/* Unified Revenue View: scroll page. Tokens from uss-proposal-engine/template/style.css, narrowed by Motif's rulings:
   ground #fbf9f5, ink #171b26, secondary #4b5263, one accent #1b4db0 (the gaps only). No orange, no dashes.
   Light only: `color-scheme: only light` here and in the meta tag, and no prefers-color-scheme block anywhere.
   Type floor: 16px body text, 14px for any label, at every width. */
@font-face { font-family: 'Inter'; font-weight: 400 600; font-display: swap; src: url(/fonts/inter.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format('woff2'); }

:root {
  color-scheme: only light;
  --bg: #fbf9f5;
  --ink: #171b26;
  --soft: #4b5263;
  --line: #e9e3d9;
  --accent: #1b4db0;
  --tab: 48px;          /* the closed drawer: a hairline and a tab */
  --drawer: 300px;      /* the drawer's reserved box on a wide screen */
  --fig-h: 380px;       /* stacked layouts: the pinned chain's height, set from the drawing's own layout */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: var(--tab); }
h1, h2 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--ink); }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---- layout: text column and pinned chain side by side (wide), or chain pinned on top (stacked) ---- */
.scrolly { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); column-gap: 56px; max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.col-fig { position: relative; }
.fig-sticky { position: sticky; top: 0; height: calc(100vh - var(--drawer)); height: calc(100svh - var(--drawer)); display: flex; align-items: center; transition: opacity .25s ease; }
.fig { width: 100%; }
.fig svg, .still svg { display: block; width: 100%; height: auto; overflow: visible; }

.head { padding: 72px 0 40px; }
.kicker { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 16px; }
h1 { font-size: clamp(2.25rem, 4.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; }
.disclaimer { margin-top: 16px; font-size: 1rem; line-height: 1.55; color: var(--soft); }
.intro { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; }
.readings-key { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 6px; font-size: 1rem; color: var(--soft); }
.readings-key b { color: var(--ink); font-weight: 600; }

.step { min-height: 78vh; padding: 12vh 0 8vh; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.step:first-child { padding-top: 4vh; }
.step h2 { font-size: 1.625rem; line-height: 1.2; }
.step .body { font-size: 1.0625rem; }
.readings { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.sec { font-size: 1rem; line-height: 1.55; color: var(--soft); }
.lbl { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--soft); margin-bottom: 2px; }
.constraint { font-size: 1rem; line-height: 1.55; border-left: 2px solid var(--ink); padding-left: 14px; }
.gaps { margin: 0; padding-left: 1.1em; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.gaps li { margin-bottom: 4px; }
.gaps li::marker { color: var(--accent); }
.closing { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.25rem; line-height: 1.5; padding: 8vh 0 30vh; }
.still { display: none; }

/* stacked: the chain pins across the top, the steps scroll underneath it */
@media (max-width: 1023px) {
  .scrolly { display: flex; flex-direction: column; padding: 0 16px; }
  .col-text { display: contents; }
  .head { order: 0; padding: 40px 0 28px; }
  .col-fig { order: 1; position: sticky; top: 0; z-index: 2; background: var(--bg); height: var(--fig-h); margin: 0 -16px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
  .fig-sticky { position: static; height: 100%; align-items: flex-start; }
  .steps { order: 2; }
  .closing { order: 3; padding: 6vh 0 24vh; font-size: 1.125rem; }
  .step { min-height: calc(100vh - var(--fig-h) - var(--tab)); min-height: calc(100svh - var(--fig-h) - var(--tab)); padding: 28px 0 40px; }
  .step:first-child { padding-top: 28px; }
  .step { scroll-margin-top: var(--fig-h); } /* an anchor lands with its heading under the pinned chain, not behind it */
  .step h2 { font-size: 1.375rem; }
  h1 { font-size: 2.25rem; }
  :root { --drawer: calc(100svh - var(--fig-h)); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .step .body { font-size: 1rem; }
  .intro { font-size: 1.0625rem; }
  /* phone: the stop's headline rides just under the pinned chain for as long as its stop is being read (Ryan, 2026-09-30:
     the chain was hiding it). The chain is packed tighter on a phone too (app.js layout); neither alone keeps it in view. */
  /* its lower edge is ruled like the chain's (Motif, 2026-09-30): 12px under the glyphs with a 1px hairline, so body text
     visibly passes under an edge instead of being sliced just under the headline. The negative margin cancels the
     padding (no change at rest); the box-shadow takes no layout space; flat colours only. */
  html:not(.rm) .step h2 { position: sticky; top: var(--fig-h); z-index: 1;
    background: var(--bg); padding: 8px 0 12px; margin: -8px 0 -12px;
    box-shadow: 0 1px 0 var(--line); }
}

/* ---- the drawer ---- */
.drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--tab); background: var(--bg); border-top: 1px solid var(--soft); transition: height .3s ease; display: flex; flex-direction: column; }
.drawer[data-open="true"] { height: var(--drawer); }
.drawer-bar { flex: none; height: calc(var(--tab) - 1px); display: flex; align-items: flex-start; justify-content: center; }
.drawer-tab { position: relative; margin-top: -1px; min-height: 40px; padding: 8px 20px 8px 18px; border: 1px solid var(--soft); border-top-color: var(--bg); border-radius: 0 0 10px 10px; background: var(--bg); cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.drawer-tab::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(-45deg); margin-top: 4px; transition: transform .2s ease; }
.drawer[data-open="true"] .drawer-tab::after { transform: rotate(135deg); margin-top: -4px; }
/* stop 5's hint: a small ink notch on the closed tab, never an alert */
.notch { position: absolute; top: -1px; left: 50%; width: 14px; height: 4px; margin-left: -7px; background: var(--ink); border-radius: 0 0 3px 3px; opacity: 0; transition: opacity .2s ease; }
body[data-stop="4"] .drawer[data-open="false"] .notch { opacity: 1; }
.drawer-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.drawer-panel:focus { outline: none; }
.drawer-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.drawer-inner { max-width: 1080px; margin: 0 auto; padding: 8px 40px 24px; }
.axis { margin: 4px 0 12px; }
.axis svg { display: block; width: 100%; height: auto; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tl li { display: grid; grid-template-columns: 18px 112px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.45; }
.tl .g { width: 16px; height: 16px; align-self: center; }
.tl time, .tl .nodate { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .9375rem; color: var(--ink); }
.tl .what { color: var(--ink); }
.tl .tag { grid-column: 3; font-size: .875rem; color: var(--soft); }
.limits-h { font-size: 1.0625rem; margin: 20px 0 6px; }
.limits { margin: 0; padding-left: 1.1em; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.limits li { margin-bottom: 6px; }
/* the chain stays where it is and drops to about 40% ink while the drawer is open */
body.drawer-open .fig { opacity: .4; }
@media (max-width: 1023px) { .drawer-inner { padding: 8px 16px 20px; } }
@media (max-width: 560px) {
  .tl li { grid-template-columns: 18px minmax(0, 1fr); }
  .tl time, .tl .nodate { grid-column: 2; }
  .tl .what, .tl .tag { grid-column: 2; }
}

/* ---- reduced motion: no pinning, no travel. Each step carries a still of its own end state. ---- */
html.rm .scrolly { display: block; max-width: 820px; padding: 0 24px; }
html.rm .col-text { display: block; }
html.rm .col-fig { display: none; }
html.rm .still { display: block; margin-bottom: 8px; }
html.rm .step { min-height: 0; padding: 48px 0; border-top: 1px solid var(--line); }
html.rm .closing { padding: 48px 0 96px; }
html.rm .drawer, html.rm .drawer-tab::after, html.rm .notch, html.rm .fig-sticky { transition: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }