/* How controls answer a touch. Every press dips and springs back, changed values
   roll into place, confirmations arrive with a tick and new content settles in
   order. Nothing here delays navigation or saving, and text content is never
   rewritten for an effect. With reduced motion everything rests in its final
   state and only colour changes remain. */
:root{--feel-spring:cubic-bezier(.34,1.56,.64,1);--feel-out:cubic-bezier(.16,1,.3,1);--feel-lime:#dce875}
:where(.commercial,.family-brand) :is(button,.btn,.p-button,.text-button,summary,[role=button],.filter-tabs a,.round-nav a){-webkit-tap-highlight-color:transparent}

/* Form fields: the ring eases in rather than snapping on. */
:where(.commercial,.family-brand) :is(.form-control,.form-select,.p-form input,.p-form select,.p-form textarea,.competition-page input,.competition-page select,.player-search input,#player-search){transition:border-color 160ms ease,box-shadow 220ms var(--feel-out),background-color 160ms ease}

/* Toasts: one style for every message the app raises after an action. */
.feel-toast{display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 16px 12px 14px;border-radius:10px;background:#1d4235;color:#f8fcf8;
  font:600 14px/1.45 Manrope,system-ui,sans-serif;box-shadow:0 14px 34px -14px #0b241a8c,0 0 0 1px #ffffff1f inset;overflow-wrap:anywhere}
.feel-toast-danger{background:#8f2a2d}.feel-toast-warning{background:#6c4c08}
.feel-tick{flex:none;width:18px;height:18px;display:block}
.feel-tick circle{fill:var(--feel-lime)}.feel-tick path{fill:none;stroke:#1d4235;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.feel-toast-danger .feel-tick circle,.feel-toast-warning .feel-tick circle{fill:#fff3e6}
.feel-toast-danger .feel-tick path{stroke:#8f2a2d}.feel-toast-warning .feel-tick path{stroke:#6c4c08}

/* Flash messages can be put away once read. */
.flash-wrap .alert.feel-dismissible{display:flex;align-items:flex-start;gap:12px}
.flash-wrap .alert .feel-tick{margin-top:1px}
.flash-wrap .alert .feel-tick circle{fill:currentColor;opacity:.16}
.flash-wrap .alert .feel-tick path{stroke:currentColor}
.feel-dismiss{margin:-6px -8px -6px auto;flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:inherit;font:400 20px/1 system-ui,sans-serif;opacity:.6;cursor:pointer}
.feel-dismiss:hover{opacity:1;background:#0000000f}

/* A button that has sent its form shows it is working, without changing its label. */
.is-sending{position:relative;overflow:hidden;cursor:progress}
.is-sending::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#ffffff40 50%,transparent 70%);background-size:220% 100%}

/* Count-up: the real number stays in the document; a drawn copy counts to it. */
@property --feel-n{syntax:'<integer>';inherits:false;initial-value:0}
.feel-count{position:relative;display:inline-block}
.feel-count.is-counting{color:transparent!important}
.feel-count.is-counting::after{content:counter(feel-n) attr(data-feel-suffix);counter-reset:feel-n var(--feel-n);position:absolute;inset:0;text-align:end;color:var(--feel-count-color);
  animation:feel-count var(--feel-count-time,900ms) cubic-bezier(.2,.8,.2,1) var(--feel-count-delay,0ms) both}
@keyframes feel-count{from{--feel-n:0}to{--feel-n:var(--feel-to)}}

/* The selected filter tab owns a marker that glides to the next one. */
.feel-tabs{position:relative}
.feel-tabs a{position:relative}
.feel-tabs a[aria-current=page]{border-bottom-color:transparent!important}
.feel-tab-mark{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--court,#245646);pointer-events:none;view-transition-name:feel-tab-mark}
.round-nav .feel-tab-mark{display:none}

/* Values that roll need a box to move. */
:is(span,strong,b,em,small):is([data-point],[data-games],[data-sets],#selection-count,.court-scores,[data-feel-tick]){display:inline-block}
.score-side{position:relative}
.score-side button,[data-feel-ripple]{position:relative;overflow:hidden;isolation:isolate}
.feel-ripple{position:absolute;border-radius:50%;pointer-events:none;background:#ffffff8c;z-index:-1;transform:translate(-50%,-50%) scale(0)}
.feel-burst{position:absolute;pointer-events:none;z-index:5}
.feel-arrow{display:inline-block}

@media(prefers-reduced-motion:no-preference){
  /* Press: a quick dip on contact, a spring back on release. */
  :where(.commercial,.family-brand) :is(.btn,.p-button,.text-button,.p-link-button,.p-text-link,.score-side button,.p-workspace-list button,.account-menu>summary,.p-mobile-nav summary,[data-step],[data-view],.filter-tabs a,.round-nav a,.feel-dismiss){
    transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,filter 160ms ease,opacity 160ms ease,outline-offset 180ms var(--feel-out),transform var(--feel-t,460ms) var(--feel-spring)}
  :where(.commercial,.family-brand) :is(.btn,.p-button,.text-button,.p-link-button,.p-workspace-list button,.account-menu>summary,.p-mobile-nav summary,[data-step],[data-view],.feel-dismiss):active:not(:disabled):not([aria-disabled=true]){--feel-t:70ms;transform:scale(.965)}
  :where(.commercial,.family-brand) :is(.p-text-link,.filter-tabs a,.round-nav a):active{--feel-t:70ms;transform:scale(.98)}
  /* Large targets dip less and press in, like a physical key. */
  :where(.commercial) .score-side button:active:not(:disabled){--feel-t:60ms;transform:scale(.985) translateY(1px);box-shadow:inset 0 3px 0 #0000001f}
  :where(.commercial) .p-workspace-list button:active:not(:disabled){transform:scale(.985)}

  /* Arrows lean toward where the link goes. */
  .feel-arrow{transition:transform 380ms var(--feel-spring)}
  :is(a,button,summary):hover .feel-arrow,:is(a,button):focus-visible .feel-arrow{transform:translateX(3px)}
  :is(a,button):hover .feel-arrow.is-up,:is(a,button):focus-visible .feel-arrow.is-up{transform:translate(2px,-2px)}
  :is(a,button):hover .feel-arrow.is-back,:is(a,button):focus-visible .feel-arrow.is-back{transform:translateX(-3px)}
  :is(a,button):hover .feel-arrow.is-down,:is(a,button):focus-visible .feel-arrow.is-down{transform:translateY(2px)}
  :is(a,button):hover .feel-arrow.is-add,:is(a,button):focus-visible .feel-arrow.is-add{transform:rotate(90deg)}
  :is(a,button):hover .feel-arrow.is-swap,:is(a,button):focus-visible .feel-arrow.is-swap{transform:scaleX(-1)}

  /* Rows answer the pointer. */
  :where(.commercial) :is(.player-row,.p-list-row,.table-tennis tbody tr,.fixture,.rotation-round){transition:background-color 200ms ease,box-shadow 240ms var(--feel-out)}
  :where(.commercial) :is(.player-row,.table-tennis tbody tr):hover{background-color:color-mix(in srgb,var(--surface-strong,#e8f0e8) 45%,transparent)}

  /* Menus open from their button rather than appearing. */
  .account-popover,.p-mobile-nav nav{transform-origin:top right;transition:opacity 160ms ease,transform 300ms var(--feel-spring)}
  @starting-style{
    .account-menu[open] .account-popover,.p-mobile-nav[open] nav{opacity:0;transform:translateY(-6px) scale(.96)}
  }
  .account-menu>summary>span[aria-hidden=true]:last-child{display:inline-block;transition:transform 300ms var(--feel-spring)}
  .account-menu[open]>summary>span[aria-hidden=true]:last-child{transform:rotate(180deg)}

  /* Disclosures grow open instead of jumping. */
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    details:not(.account-menu):not(.p-mobile-nav)::details-content{block-size:0;overflow-y:clip;transition:block-size 340ms var(--feel-out),content-visibility 340ms allow-discrete}
    details:not(.account-menu):not(.p-mobile-nav)[open]::details-content{block-size:auto}
  }

  /* Flash messages land after the page has arrived. */
  .flash-wrap .alert{animation:feel-drop 560ms var(--feel-spring) 240ms both}
  .flash-wrap .alert .feel-tick path{stroke-dasharray:14;stroke-dashoffset:14;animation:feel-draw 420ms var(--feel-out) 620ms forwards}
  .feel-toast .feel-tick path{stroke-dasharray:14;stroke-dashoffset:14;animation:feel-draw 380ms var(--feel-out) 200ms forwards}
  .is-sending::after{animation:feel-sheen 1.1s linear infinite}

  ::view-transition-group(feel-tab-mark){z-index:6;animation-duration:460ms;animation-timing-function:var(--feel-spring)}
  ::view-transition-old(feel-tab-mark){display:none}
  ::view-transition-new(feel-tab-mark){animation:none}

  @keyframes feel-drop{from{opacity:0;transform:translateY(-10px) scale(.98)}}
  @keyframes feel-draw{to{stroke-dashoffset:0}}
  @keyframes feel-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
}
@media(prefers-reduced-motion:reduce){
  .feel-count.is-counting{color:inherit!important}
  .feel-count.is-counting::after{display:none}
}
@media print{.feel-toast,.feel-dismiss,.feel-ripple,.feel-burst{display:none!important}}