/* Cable Bench: app feel and motion. Loaded after bench.css. Everything here respects reduced motion (see the end). */
html,body{overscroll-behavior:none}
body{-webkit-touch-callout:none}
.bench{touch-action:manipulation;-webkit-user-select:none;user-select:none}
textarea,#backup-code,.selectable{-webkit-user-select:text;user-select:text}

/* A screen fades in when it opens. */
[data-screen]:not([hidden]){animation:screenin .2s ease-out}
@keyframes screenin{from{opacity:0}to{opacity:1}}

/* Press feedback: controls dip under the finger and spring back. */
.brass,.alloy-btn,.round,.tile,.ticket-row,.line,.chipc{transition:transform .12s ease-out,filter .12s ease-out}
.ticket-row:active{transform:scale(.985)}
.line:active{background:rgba(16,48,42,.06)}
.sw2:active i{transform:scale(.92)}
.sw2[aria-checked="true"]:active i{transform:translateX(24px) scale(.92)}
button:disabled{cursor:default}

/* Sheets and toasts */
.sheet-back{animation:fadein .18s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.toast{position:fixed;left:50%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 14px));z-index:70;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(86vw,360px);padding:12px 18px;border-radius:999px;border:0;color:var(--inkm);font:600 15px 'Hanken Grotesk',system-ui,sans-serif;text-align:center;
  background:linear-gradient(165deg,#1D4A42,#143530);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.5);transition:opacity .22s ease-out,transform .22s ease-out}
.toast[data-on]{opacity:1;transform:translate(-50%,0)}
button.update-toast{pointer-events:auto;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;opacity:1;transform:translate(-50%,0);animation:toastin .3s ease-out}
button.update-toast::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--ledG);box-shadow:0 0 10px var(--ledG);flex:none}
button.update-toast:active{transform:translate(-50%,2px) scale(.98)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* Effects layer and cheers */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
.cheer-flash{position:fixed;inset:0;z-index:58;pointer-events:none;background:radial-gradient(70% 50% at 50% 40%,rgba(255,231,154,.5),rgba(255,231,154,0) 70%);animation:cheerflash .7s ease-out forwards}
@keyframes cheerflash{from{opacity:1}to{opacity:0}}
.cheer-ring{position:fixed;left:50%;top:40%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid #FFE79A;box-shadow:0 0 18px rgba(255,201,74,.8);z-index:58;pointer-events:none;animation:cheerring .9s ease-out forwards}
@keyframes cheerring{from{transform:scale(1);opacity:.9}to{transform:scale(9);opacity:0}}
.cheer-word{position:fixed;left:50%;top:26%;z-index:62;pointer-events:none;white-space:nowrap;font:700 46px/1 'Chakra Petch',system-ui,sans-serif;color:#FFE79A;
  text-shadow:0 3px 0 #8F6218,0 8px 22px rgba(0,0,0,.55);transform:translateX(-50%);animation:cheerword 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cheerword{0%{opacity:0;transform:translateX(-50%) scale(.4)}18%{opacity:1;transform:translateX(-50%) scale(1.14)}30%{transform:translateX(-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(1)}}
.boardwrap.shake{animation:benchshake .45s ease-out}
@keyframes benchshake{0%,100%{transform:none}15%{transform:translate(-4px,1px) rotate(-.4deg)}35%{transform:translate(4px,-1px) rotate(.4deg)}55%{transform:translate(-3px,1px)}75%{transform:translate(2px,0)}}
.chipc .led.g{animation:ledpop .32s ease-out}
@keyframes ledpop{0%{transform:scale(.6)}60%{transform:scale(1.4)}100%{transform:none}}

/* Sliders */
.line.stack{flex-direction:column;align-items:stretch;gap:8px;padding-top:10px;padding-bottom:12px;cursor:default}
.line.stack label{font-size:16px;font-weight:600}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--fill:100%}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#0E7A5E var(--fill),#9DB0AB var(--fill))}
.rng::-moz-range-track{height:8px;border-radius:4px;background:#9DB0AB}
.rng::-moz-range-progress{height:8px;border-radius:4px;background:#0E7A5E}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#FFF0BC,#E8B54C 55%,#8F6218);box-shadow:0 2px 5px rgba(0,0,0,.45)}
.rng::-moz-range-thumb{width:28px;height:28px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#FFF0BC,#E8B54C 55%,#8F6218);box-shadow:0 2px 5px rgba(0,0,0,.45)}
.rng:focus-visible{outline:3px solid var(--brassB);outline-offset:2px;border-radius:8px}

/* Reduced motion: the word stays (it is information), everything else stills. */
:root[data-reduce] .cheer-word{animation:none!important;opacity:1}
:root[data-reduce] .toast{transition:none}
@media (prefers-reduced-motion:reduce){
  .cheer-word{animation:none!important;opacity:1}
  .toast{transition:none}
  [data-screen]:not([hidden]){animation:none}
}

/* Details */
h1,h2,.display{text-wrap:balance}
p,.lede,.small{text-wrap:pretty}
.cheer-word,.cheer-ring,.cheer-flash{will-change:transform,opacity}