/* 5680 pass 10a: global motion/colour tokens (the one place), numbering, right rail, the one sticky bar, body copy
   and label contrast. Loaded last; palette unchanged (bg #2c2f32, sage #d7e8bc, acid #e9f056).
   Contrast (measured with ~/ms3-local/5680-internal/tools/contrast.js from the site.css tokens): sage needs at least
   62% opacity for 4.5:1 on #353840 (58% on #2c2f32); 50% sage is 3.8:1 and fails, so small labels use --label (64%).
   --muted #9aa88c passes at full opacity (5.36:1 on bg, 4.66:1 on surface) but not at 80% or 70%.
   The Section A-A drawing uses the sage/acid palette only (no blue). */

:root{
  --e-enter:cubic-bezier(.25,1,.5,1);--d-enter:800ms;   /* entrances 700-900ms */
  --e-ui:cubic-bezier(.32,.72,0,1);--d-ui:500ms;        /* UI, drawers */
  --e-zoom:cubic-bezier(.7,0,.3,1);--d-zoom:1000ms;     /* image zoom */
  --d-micro:180ms;                                      /* micro 160-220ms */
  --reveal-y:24px;
  --label:rgba(215,232,188,.64);                        /* small labels on any of the three dark grounds, >= 4.5:1 */
  --body:rgba(215,232,188,.9);                          /* body copy, >= 88% sage */
  --barh:70px;                                          /* sticky bar height without the safe area */
  --rail-g:16px;                                        /* right gutter the rail lives in */
}
html{font-variant-numeric:tabular-nums}

/* ===== Numbering: chapter name (small caps) + one "N / 8" counter per section ===== */
.lk-c{color:var(--text)}
.lk-n{color:var(--paper)}
.lk-e{color:var(--muted)}
.chap-wm,.chap-n{display:none}
.fig{color:var(--label)}

/* ===== Right rail: 2px sage 20% line, acid fill, one 6px node per chapter (active 10px, 2px acid ring) ===== */
.rail{right:0;width:var(--rail-g);transition:opacity var(--d-ui) var(--e-ui)}
.rail-t{right:calc(var(--rail-g) / 2 - 1px);width:2px;background:rgba(215,232,188,.2)}
.rail-d button{width:var(--rail-g);height:32px;border-radius:0}
.rail-d button::before{right:calc(var(--rail-g) / 2 - 5px);top:11px;width:10px;height:10px;border:2px solid rgba(215,232,188,.55);background:var(--bg);
  transform:scale(.6);transition:transform var(--d-micro) var(--e-ui),border-color var(--d-micro) linear,background-color var(--d-micro) linear}
.rail-d li.past button::before{border-color:var(--text);background:var(--text)}
.rail-d button[aria-current="true"]::before{border-color:var(--acid);background:var(--bg);transform:none}
.rail-l{right:calc(var(--rail-g) + 6px);color:var(--paper);transition:opacity .6s var(--e-enter),transform .6s var(--e-enter)}
.rail-d button:hover .rail-l{opacity:0}
.rail-d li.lbl .rail-l,.rail-d button:focus-visible .rail-l{opacity:1;transform:translate(0,-50%);transition-duration:1.5s}
/* phones: the rail is a read-out only, so it can never take a tap meant for a button, slider or the plan thumb */
@media (max-width:899px){
  .rail.on .rail-d button{pointer-events:none}
  html.cta-on .rail{bottom:calc(var(--barh) + 16px + env(safe-area-inset-bottom))}
}
@media (min-width:900px){
  .rail{width:44px;right:max(0px,calc(var(--rail-g) - 14px))}
  .rail-t{right:21px}
  .rail-d button{width:44px;height:44px}
  .rail-d button::before{right:17px;top:17px}
  .rail-l{right:34px}
}

/* ===== The one sticky Inquire/Call bar: hidden in the hero and at the footer CTA ===== */
.ctabar{padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(100%);visibility:hidden;
  transition:transform 350ms var(--e-ui),visibility 0s linear 350ms}
.ctabar.on{transform:none;visibility:visible;transition:transform 350ms var(--e-ui)}
@media (min-width:900px){
  .ctabar{display:grid;left:50%;right:auto;bottom:16px;width:380px;margin-left:-190px;padding:8px;border:1px solid var(--line-2);border-radius:999px;
    transform:translateY(calc(100% + 16px + env(safe-area-inset-bottom)))}
  .ctabar .btn{min-height:44px}
}
html{scroll-padding-bottom:calc(var(--barh) + 24px + env(safe-area-inset-bottom))}
main{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@media (max-width:899px){.sec{padding-bottom:max(clamp(88px,14vw,180px),calc(var(--barh) + 24px + env(safe-area-inset-bottom)))}}

/* ===== Body copy: 16px/1.6 minimum, sage >= 88%, ~34ch on phones ===== */
.lede,.st-home p:not(.eyebrow){opacity:1;color:var(--body)}
.lede,.st-home p:not(.eyebrow),.facts p,.lb-story,.cost-l dd,.mf-l dd,.mf-note,.calc-info,.bp5-key li,.bp5-live,.bp-cap,
.dk-msg,.an-sm,.area-notes .an-sm,.places li,.oh-time,.sheet-p p:last-child,.am-t,.cal-actions p{font-size:16px;line-height:1.6}
.facts p,.lb-story,.bp5-key li,.bp5-live,.bp-cap,.an-sm,.area-notes .an-sm,.dk-msg.bot,.places li,.oh-time,.sheet-p p:last-child,.am-t{color:var(--body)}
@media (max-width:600px){
  .lede,.st-home p:not(.eyebrow),.facts p,.mf-note,.calc-info,.bp-cap,.an-sm,.oh-time,.am-t,.cal-actions p,.intro-body{max-width:34ch}
}

/* ===== Labels that failed 4.5:1 ===== */
.cf-u{color:var(--muted)}
.sfoot-x{opacity:1}

/* ===== Reduced motion: final states, no transitions on what this pass touched ===== */
@media (prefers-reduced-motion: reduce){
  .rail,.rail-d button::before,.rail-l,.ctabar,.ctabar.on{transition:none!important}
}

/* Upgrades list (desktop): no step numbers; the current step keeps its acid dot */
.ups-list button[aria-current]::before{content:"";flex:none;align-self:center;width:5px;height:5px;border-radius:50%;background:var(--acid)}