/* Motion layer (lane dw-motion, 11 Oct 2026). Loaded after coach.css on every page (scripts/render-chrome.js).
   One spring for the site: critically damped (damping 1.0, no overshoot), written as a CSS linear() curve;
   the response sets the duration. Only transform and opacity move. Everything here answers a tap: sheets,
   menus, the tray and popovers grow out of the control that opened them and close back the same way.
   The JS twin of these tokens is RAMotion in assets/common.js. */
:root{
  --spring:cubic-bezier(.22,1,.36,1);
  --spring-quick:270ms; /* response .2 s */
  --spring-ui:410ms;    /* response .3 s: menus, sheets, the tray, the segmented thumb */
  --spring-move:540ms;  /* response .4 s: larger moves such as the tour spotlight */
  --press-time:90ms;
  --scrim:rgba(15,18,20,.45);
  --scrim-panel:rgba(15,18,20,.28);
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,0.0384,0.1263,0.2349,0.347,0.4533,0.549,0.6323,0.703,0.762,0.8106,0.8501,0.882,0.9075,0.9277,0.9437,0.9563,0.9662,0.9739,0.9799,0.9845,0.9881,0.9909,0.993,0.9947,0.9959,0.9969,0.9976,1)}
}
:root[data-theme=dark]{--scrim:rgba(0,0,0,.6);--scrim-panel:rgba(0,0,0,.4)}

/* Reduced motion: the one site-wide rule (it replaces the three that competed in styles.css, experience.css
   and membership.css). Nothing slides, scales, springs or scrolls smoothly; opacity and colour fades stay,
   because they explain what changed without moving anything. Components need no reduced-motion rule of
   their own for transforms; RAMotion swaps its springs for a 160 ms fade. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-property:opacity,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke!important;
  }
}

/* Scrim behind the phone Menu sheet and the desktop mega menu: tap it to close. */
.nav-scrim{position:fixed;inset:0;z-index:39;background:var(--scrim-panel);opacity:0;transition:opacity 200ms ease-out;-webkit-tap-highlight-color:transparent}
.nav-scrim.is-on{opacity:1}
.nav-scrim[data-kind=menu]{z-index:65;background:var(--scrim)}

/* Phone and tablet Menu: a sheet that grows from the Menu button. */
@media(max-width:960px){
  html.menu-open .site-header{z-index:70}
  .site-header[data-menu=closing]>.header-inner>.main-nav{display:block;pointer-events:none}
  .site-header>.header-inner>.main-nav{transform-origin:calc(100% - 22px) -12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
  html.menu-open .mobile-action,html.menu-open .save-sheet{opacity:0;visibility:hidden;pointer-events:none}
}

/* Desktop mega menu: no white square behind the open chevron on the red header, and panels drop in with the
   quick spring from just under their menu word. */
@media(min-width:961px){
  .site-header .nav-toggle{border-radius:999px;transition:background-color .15s,transform var(--press-time) ease-out}
  .site-header .nav-toggle:hover,.site-header .nav-toggle[aria-expanded=true]{background:transparent}
  .site-header .nav-toggle::before{transition:transform var(--spring-quick) var(--spring)}
  .site-header .nav-panel{transform-origin:top center;animation:ra-panel-in var(--spring-quick) var(--spring)}
}
@keyframes ra-panel-in{from{opacity:0;transform:translateY(-6px) scale(.985)}}

/* Bottom tab bar: the section's tab stays lit, and a press answers at once (scale .94, icon fills). */
.tab-bar a{-webkit-tap-highlight-color:transparent;transition:transform var(--press-time) ease-out,color .15s}
.tab-bar a:active{transform:scale(.94)}
.tab-bar a[aria-current]{color:var(--tabbar-on);font-weight:800}
.tab-bar a[aria-current] .tab-icon,.tab-bar a:active .tab-icon{fill:currentColor;fill-opacity:.22;stroke-width:2.2}
.tab-bar .tab-icon{transition:fill-opacity .15s}

/* Save prompt: one surface. The slim bar rises from the bottom; "Save My Result Free" grows it into the
   save sheet (the sheet starts at the bar's top edge), and the sheet slides back down when it closes.
   Phones always get the sheet; a desktop sign-in from the header gets a dialog that grows from its button.
   Same outline language as the rest of the playground: 3px ink, 22px radius, pill buttons. */
.save-sheet .btn.is-done,dialog.save-invitation-dialog .btn.is-done{background:var(--green);border-color:var(--green);color:var(--on-green)}
.save-sheet .btn,dialog.save-invitation-dialog .btn{transition:background-color .1s ease-out,color .1s ease-out}
dialog.save-invitation-dialog{border:3px solid var(--outline);border-radius:22px;padding:24px;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
dialog.save-invitation-dialog::backdrop{background:var(--scrim)}
dialog.save-invitation-dialog .save-invitation-field input{min-height:48px;border:3px solid var(--outline);border-radius:14px;background:var(--card)}
dialog.save-invitation-dialog.is-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:min(560px,100%);max-width:none;max-height:min(90vh,calc(100dvh - 16px));border-bottom:0;border-radius:24px 24px 0 0;padding:14px 20px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.sheet-grabber{display:none}
dialog.save-invitation-dialog.is-sheet .sheet-grabber{display:block;position:relative;height:30px;margin:-14px 0 4px;cursor:grab;touch-action:none}
dialog.save-invitation-dialog.is-sheet .sheet-grabber::before{content:"";position:absolute;left:50%;top:12px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--hair)}
dialog.save-invitation-dialog.is-dragging{user-select:none;cursor:grabbing}
dialog.save-invitation-dialog.is-sheet .save-invitation-close{border-color:transparent;background:none;box-shadow:none;color:var(--muted)}
dialog.save-invitation-dialog.is-sheet h2{padding-right:0}
@media(max-width:767px){dialog.save-invitation-dialog.is-sheet{width:100%;padding-left:16px;padding-right:16px}}

/* Homepage tour: the spotlight and bubble move by transform; they wait for the page to finish scrolling
   before gliding to the next step (first-visit.js), so the light never trails the page. */
.tour-spot{left:0;top:0;transition:none;will-change:transform}
.tour-bubble{top:0;transition:opacity 160ms ease-out;will-change:transform}
.tour-layer.is-gliding .tour-spot{transition:transform var(--spring-move) var(--spring),width var(--spring-move) var(--spring),height var(--spring-move) var(--spring)}
.tour-layer.is-gliding .tour-bubble{transition:transform var(--spring-move) var(--spring),opacity 160ms ease-out}
.tour-layer.is-travelling .tour-bubble{opacity:0}

/* Segmented controls (residency and friends): a rounded thumb slides to the choice (comparison-residency.js).
   The radios stay the control; the thumb is drawn under the labels, inset 3px so it reads as a pill in a pill. */
.compare-seg.has-thumb{position:relative;isolation:isolate}
.compare-seg.has-thumb label{z-index:1;border-left-color:transparent!important;-webkit-tap-highlight-color:transparent}
.compare-seg.has-thumb input:checked+span{background:transparent}
.compare-seg.has-thumb label>span{border-radius:22px;transition:color 120ms ease-out,transform var(--press-time) ease-out}
.compare-seg.has-thumb label:active>span{transform:scale(.96)}
.seg-thumb{position:absolute;left:0;top:0;z-index:0;border-radius:22px;background:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);pointer-events:none}
.compare-seg.is-sliding .seg-thumb{transition:transform var(--spring-ui) var(--spring),width var(--spring-ui) var(--spring),height var(--spring-ui) var(--spring)}
@media(forced-colors:active){.seg-thumb{display:none}.compare-seg.has-thumb input:checked+span{background:Highlight;color:HighlightText}}

/* Side By Side tray: slides in from the bottom (compare.js); the bank names stay on screen while the table scrolls. */
.shortlist-tray{will-change:transform}
.compare-side thead th{position:sticky;top:0;z-index:1;background:var(--card)}

/* Jargon popovers on guides: anchored to the term, never breaking the sentence (guide-interactive.js).
   Inside main at large text (zoom) 100vw is drawn zoomed too, so the cap divides by --text-zoom; the
   script sets the exact cap from the window width and shifts the bubble to stay 12px from each edge. */
abbr.gloss-ready{position:relative}
abbr .gloss-tip{position:absolute;z-index:30;left:50%;top:calc(100% + 12px);display:block;width:max-content;max-width:min(300px,calc((100vw - 24px) / var(--text-zoom,1)));margin:0;padding:12px 46px 12px 14px;border:3px solid var(--outline);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);font:600 .9375rem/1.45 var(--font-body);text-align:left;text-indent:0;white-space:normal;letter-spacing:0;transform:translateX(calc(-50% + var(--shift,0px)));transform-origin:var(--arrow,50%) -12px;animation:ra-pop-in 150ms ease-out}
abbr .gloss-tip[hidden]{display:none}
abbr .gloss-tip::before{content:"";position:absolute;top:-9px;left:calc(var(--arrow,50%) - 7px);width:12px;height:12px;border:solid var(--outline);border-width:3px 0 0 3px;border-radius:3px 0 0 0;background:var(--card);transform:rotate(45deg)}
abbr.gloss-above .gloss-tip{top:auto;bottom:calc(100% + 12px);transform-origin:var(--arrow,50%) calc(100% + 12px)}
abbr.gloss-above .gloss-tip::before{top:auto;bottom:-9px;border-width:0 3px 3px 0;border-radius:0 0 3px 0}
.gloss-tip-text{display:block}
.gloss-tip-close{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;border-radius:0 13px 0 13px;background:none;color:var(--ink);font:800 1.375rem/1 var(--font-body);cursor:pointer}
.gloss-tip-close:focus-visible{outline:3px solid var(--focus);outline-offset:-6px}
.gloss-open>.gloss-term{background:var(--yellow);color:var(--on-yellow);border-radius:4px;box-shadow:0 0 0 2px var(--yellow)}
@keyframes ra-pop-in{from{opacity:0;scale:.96}}

/* Tool "?" tips: the bubble grows from its button instead of appearing. */
.info-tip-bubble:not([hidden]){animation:ra-pop-in 150ms ease-out;transform-origin:50% 0}

/* Reduced motion keeps the fades: these keyframe entrances become a plain 150 ms opacity fade. */
@keyframes ra-fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  abbr .gloss-tip,.info-tip-bubble:not([hidden]),.site-header .nav-panel{animation:ra-fade-in 150ms ease-out!important}
}
@media(max-width:767px){.save-sheet--slim.is-paused p{display:block;margin:0;font-size:.8125rem}}