/* The reform shell (wave 9, Task 1). Every colour is a var(--r-*) token written by
   lib.reform.css_tokens from lib.design; this file types no hex. Boards:
   A1-first-run, A1-phone-breaks-375, A1-phone-holds, A7-menu-states. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.r-body{margin:0;background:var(--r-page);color:var(--r-ink);font-family:var(--r-font);font-size:17px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--r-anchor)}
a:hover{color:var(--r-anchor-hover)}
:focus-visible{outline:3px solid var(--r-anchor);outline-offset:2px}
svg{flex:0 0 auto}

/* Skip link: off-screen until focused, never display:none. */
.r-skip{position:absolute;left:-9999px;top:8px;z-index:20;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--r-surface);color:var(--r-anchor);font-weight:700;border:2px solid var(--r-anchor);border-radius:8px}
.r-skip:focus{left:16px}

/* Header, desktop. */
.r-header{background:var(--r-surface);border-bottom:1px solid var(--r-rule);position:relative;z-index:10}
.r-header-row{max-width:1200px;margin:0 auto;padding:12px 32px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px;min-height:56px}
.r-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--r-ink);font-weight:700;letter-spacing:0.06em;font-size:20px;min-width:0}
.r-brand:hover{color:var(--r-ink)}
.r-mark-tile{fill:var(--r-signal)}
.r-mark-ring{fill:none;stroke:var(--r-ink)}
.r-mark-bar{fill:var(--r-ink)}
.r-wordmark{white-space:nowrap}
.r-tagline{display:none;font-weight:400;letter-spacing:0;font-size:17px;color:var(--r-muted)}
/* Seven items and the pill do not share one row in 1200px: the brand and the pill
   sit on the first row, the menu on its own full row beneath (decision, Task 1). */
.r-nav{flex:1 1 100%;min-width:0}
.r-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}
.r-nav-link{display:inline-flex;align-items:center;min-height:44px;color:var(--r-muted);text-decoration:none;border-bottom:3px solid transparent}
.r-nav-link[aria-current="page"]{color:var(--r-ink);font-weight:500;border-bottom-color:var(--r-anchor)}
.r-more-item{margin-left:auto;position:relative}
.r-more>summary{list-style:none}
.r-more>summary::-webkit-details-marker,.r-phone-menu>summary::-webkit-details-marker{display:none}
.r-more-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--r-muted);cursor:pointer;border-bottom:3px solid transparent}
.r-more-button[aria-current="page"]{color:var(--r-ink);font-weight:500;border-bottom-color:var(--r-anchor)}
.r-more[open]>.r-more-button{padding:0 12px;border:2px solid var(--r-anchor);border-radius:8px;background:var(--r-tint);color:var(--r-anchor);font-weight:700}
.r-chevron,.r-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-more-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(520px,calc(100vw - 32px));background:var(--r-surface);border:1px solid var(--r-rule);border-radius:12px;box-shadow:var(--r-shadow);padding:8px 8px 4px}
.r-more-heading{margin:0;padding:12px 12px 4px;font-weight:700}
.r-more-heading:not(:first-child){border-top:1px solid var(--r-rule);margin-top:8px}
.r-more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.r-more-link{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--r-ink)}
.r-more-link:hover{background:var(--r-tint);color:var(--r-ink)}
.r-more-link[aria-current="page"]{background:var(--r-tint)}
.r-more-label{font-weight:700;color:var(--r-anchor)}
.r-more-note{color:var(--r-muted)}
.r-pack-row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.r-more-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.r-pack-state{flex:0 0 auto;color:var(--r-muted)}
.r-pack-on{background:var(--r-tint)}
.r-pack-on .r-pack-state{color:var(--r-anchor);font-weight:700}
.r-more-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--r-rule);margin-top:8px;color:var(--r-muted)}
.r-more-settings{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.r-week-pill{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--r-rule);border-radius:999px;text-decoration:none;font-weight:500;color:var(--r-anchor)}

/* Phone menu and title bar: hidden on desktop. */
.r-phone-menu{display:none}
.r-titlebar{display:none}
.r-phone-menu>summary{list-style:none}
.r-menu-button{width:44px;height:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--r-rule);border-radius:8px;background:var(--r-surface);color:var(--r-ink);cursor:pointer}
.r-phone-nav{position:absolute;left:0;right:0;top:100%;background:var(--r-surface);border-bottom:1px solid var(--r-rule);box-shadow:var(--r-shadow);padding:8px 8px 4px;max-height:calc(100vh - 64px);overflow-y:auto}
.r-phone-list{list-style:none;margin:0;padding:0}
.r-phone-link{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:8px;text-decoration:none;color:var(--r-ink);font-weight:500}
.r-phone-link[aria-current="page"]{background:var(--r-tint);box-shadow:inset 3px 0 0 var(--r-anchor)}
.r-phone-more{margin:8px 0 0;padding:12px 12px 0;border-top:1px solid var(--r-rule);color:var(--r-muted)}

/* Staleness strip. */
.r-stale{background:var(--r-tint);border-top:1px solid var(--r-rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:0 max(32px, calc((100% - 1136px) / 2));min-height:44px}
.r-rerun{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700;text-decoration:none}

/* A page opened while its group is switched off (wave 9 Task 10; A7-menu-states state 3). */
.r-notice{background:var(--r-tint);border-top:1px solid var(--r-rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px max(32px, calc((100% - 1136px) / 2));min-height:44px}
.r-notice-form{margin:0}
.r-notice-button{min-height:44px;padding:0 16px;border:2px solid var(--r-anchor);border-radius:8px;background:var(--r-surface);color:var(--r-anchor);font:inherit;font-weight:700;cursor:pointer}
.r-notice-button:hover{background:var(--r-tint)}

/* Main. */
.r-main{flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:48px 32px 64px;display:flex;flex-direction:column;gap:32px;min-width:0}
.r-main:focus{outline:none}
.r-h1{margin:0;font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-0.01em}
.r-main h2{margin:0;font-size:26px;line-height:1.25;font-weight:700}
.r-lead{margin:0;font-size:22px;line-height:1.35;max-width:40ch}
.r-main p{margin:0}

/* Sticky action bar (a page's block action_bar): stuck to the foot on a phone. */
.r-actions{width:100%;max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;flex-wrap:wrap;gap:8px 16px}
.r-actions a,.r-actions button{min-height:44px}

/* Footer. */
.r-footer{border-top:1px solid var(--r-rule);background:var(--r-surface)}
.r-footer-inner{max-width:1200px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:16px}
.r-not-advice{margin:0;font-weight:700}
.r-stamp-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--r-muted)}
.r-stamp-key li{display:flex;align-items:center;gap:8px}
.r-footer-figures{margin:0;color:var(--r-muted)}
.r-legal{margin:0;color:var(--r-muted)}
.r-legal-link{display:inline-flex;align-items:center;min-height:44px}

/* The six stamps (ruling 282): solid = taken or measured, outline = arithmetic,
   dashed = a stand-in or an assumption. The shape carries it, colour reinforces. */
.r-stamp{display:inline-block;font-size:17px;font-weight:500;letter-spacing:0.04em;line-height:1;padding:4px 8px;border-radius:4px;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:help}
.r-stamp-read{background:var(--r-ink);color:var(--r-surface)}
.r-stamp-measured{background:var(--r-anchor);color:var(--r-surface)}
.r-stamp-derived{background:var(--r-surface);color:var(--r-ink);box-shadow:inset 0 0 0 2px var(--r-ink)}
.r-stamp-computed{background:var(--r-surface);color:var(--r-anchor);box-shadow:inset 0 0 0 2px var(--r-anchor)}
.r-stamp-proxy{background:var(--r-surface);color:var(--r-ink);box-shadow:inset 0 0 0 2px var(--r-ink);outline:2px dashed var(--r-muted);outline-offset:2px}
.r-stamp-estimated{background:var(--r-signal);color:var(--r-ink);outline:2px dashed var(--r-ink);outline-offset:-2px}
span.r-stamp{cursor:default}
/* The plain mark (ruling 428): a figure the reader typed, "given by you", is words and not a stamp. */
.r-given{color:var(--r-muted);font-size:inherit;font-weight:400;vertical-align:baseline}

/* Money and months. */
.r-money{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.r-figure{font-weight:700}
.r-tone-breach .r-figure{color:var(--r-breach)}
.r-tone-holds .r-figure{color:var(--r-holds)}
.r-month-tag{color:var(--r-muted)}

/* The Load Line: the disc on its amber tile. Its float and sink are in the motion section. */
.r-ll{display:inline-block;background:var(--r-signal);border-radius:calc(var(--r-ll-size) / 8);padding:calc(var(--r-ll-size) / 9);line-height:0;--r-ll-shift:calc(var(--r-ll-size) * 0.04)}
.r-ll-disc{fill:var(--r-surface);stroke:var(--r-ink)}
.r-ll-bar{fill:var(--r-ink)}
.r-ll-holds .r-ll-mass{fill:var(--r-ink)}
.r-ll-breaks .r-ll-mass{fill:var(--r-breach)}
.r-ll-move{display:block}

/* A horizontal mass on its track (the bar macro); it grows from the rule at its left. */
.r-bar-track{display:block;position:relative;height:16px;background:var(--r-tint);border-left:2px solid var(--r-ink);min-width:0}
.r-bar{display:block;height:100%;background:var(--r-anchor)}
.r-bar-breach{background:var(--r-breach)}
.r-bar-holds{background:var(--r-holds)}
.r-bar-read{background:var(--r-ink)}

/* The proof page. */
.r-check-card{background:var(--r-surface);border:1px solid var(--r-rule);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}
.r-check-figure{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.r-check-line{font-size:30px;line-height:1.1}
.r-check-stamps{display:flex;flex-wrap:wrap;gap:12px}
.r-check-bars{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 16px;margin:0}
.r-check-bars dt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.r-check-bars dd{margin:0}

/* Phone (767px and under): the menu button, the title bar, the sticky actions. */
@media (max-width:767px){
  .r-header-row{padding:6px 16px;flex-wrap:nowrap;justify-content:space-between;gap:8px;min-height:56px}
  .r-brand{gap:8px;font-size:19px}
  .r-mark{width:28px;height:28px}
  .r-tagline{display:inline}
  .r-nav,.r-week-pill{display:none}
  .r-phone-menu{display:block;flex:0 0 auto}
  .r-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;border-top:1px solid var(--r-rule);min-height:44px}
  .r-titlebar-name{font-weight:700;min-width:0}
  .r-week-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none;text-align:right}
  .r-stale{padding:0 16px}
  .r-notice{padding:8px 16px}
  .r-main{padding:16px 16px 32px;gap:20px}
  .r-h1{font-size:26px}
  .r-main h2{font-size:20px}
  .r-lead{font-size:19px}
  .r-has-actions .r-actions{position:sticky;bottom:0;z-index:5;background:var(--r-surface);border-top:1px solid var(--r-rule);padding:10px 16px 14px;flex-direction:column}
  html:has(.r-has-actions){scroll-padding-bottom:168px}
  .r-footer-inner{padding:24px 16px}
}
@media (max-width:359px){.r-tagline{display:none}}

/* ============================================================== MOTION
   The one set of motion primitives every reform page uses (wave 9, Task 1, fix round 1;
   docs/design_handoff/CLAUDE_CODE_HANDOFF.md section 3). The rule: movement may show a
   measurement being DRAWN, never a quantity CHANGING OVER TIME. Never moves: hazard
   stripes, anything sweeping left to right across months, provenance stamps, the refused
   chart. Nothing loops (ruling 400, 26 October 2026): the Load Line floats once, about 2.6 s, when cash holds,
   and sinks once and stays down when it breaks. */
:root{--r-ease:cubic-bezier(.2,.9,.25,1)}

/* The Load Line floats when the cash holds and sinks when it breaks (the boards'
   alternating keyframes), and settles once, 300ms, when the figure behind it changes
   (motion.js adds .r-ll-settle). */
@keyframes rFloat{0%{transform:translateY(0)}100%{transform:translateY(calc(var(--r-ll-shift) * -1))}}
@keyframes rSink{0%{transform:translateY(0)}100%{transform:translateY(var(--r-ll-shift))}}
@keyframes rSettle{0%{transform:translateY(calc(var(--r-ll-shift) * -2))}100%{transform:translateY(0)}}
.r-ll-holds .r-ll-move{animation:rFloat 1.3s ease-in-out 2 alternate}
.r-ll-breaks .r-ll-move{animation:rSink 400ms ease-in 1 forwards}
.r-ll.r-ll-settle{animation:rSettle 300ms var(--r-ease) 1}

/* A mass or bar grows out of its limit rule, once, on first paint: .r-grow from the rule
   beneath it, .r-grow-down from the rule above it, .r-grow-x from the rule at its left. */
@keyframes rGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.r-grow,.r-grow-down,.r-grow-x{transform-box:fill-box;animation:rGrowY 220ms var(--r-ease) 1 both}
.r-grow{transform-origin:50% 100%}
.r-grow-down{transform-origin:50% 0}
.r-grow-x{transform-origin:0 50%;animation-name:rGrowX}

/* Content arrives with a 160ms fade, the main column only; the header stays put. */
@keyframes rFade{from{opacity:0}to{opacity:1}}
.r-fade{animation:rFade 160ms ease-out 1 both}

/* Disclosures open on height, 180ms, the chevron turning on the same curve. Where a
   browser cannot animate to auto height, the disclosure snaps open, which is fine. */
:root{interpolate-size:allow-keywords}
.r-chevron{transition:transform 180ms var(--r-ease)}
details[open]>summary .r-chevron{transform:rotate(180deg)}
details.r-disclosure::details-content{block-size:0;overflow:clip;transition:block-size 180ms var(--r-ease),content-visibility 180ms allow-discrete}
details.r-disclosure[open]::details-content{block-size:auto}
.r-disclosure-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-weight:700;color:var(--r-anchor);cursor:pointer}
.r-disclosure-summary::-webkit-details-marker{display:none}

/* A figure being counted (motion.js): the true figure stays in the page for a screen
   reader while an aria-hidden copy counts up beside it. */
.r-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reduced motion is not a downgrade: every duration goes to zero, so masses stand at
   full height, figures are printed, disclosures snap. The Load Line rests still at its
   resting offset. This block stays LAST in the sheet so nothing after it can win. */
@media (prefers-reduced-motion: reduce){
  /* Two rules, never one list: a browser that does not know ::details-content drops a
     whole selector list containing it, which would leave every other duration running. */
  *,*::before,*::after{animation-duration:0s !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important}
  ::details-content{animation-duration:0s !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important}
  .r-ll-holds .r-ll-move{animation:none !important;transform:translateY(calc(var(--r-ll-shift) * -1))}
  .r-ll-breaks .r-ll-move{animation:none !important;transform:translateY(var(--r-ll-shift))}
  .r-ll.r-ll-settle{animation:none !important}
}