/* ============================================================================
   LedgerAI Forest Dashboard v2 - production stylesheet, /home only.
   Migration page 1 per qa/redesign/MIGRATION_PLAN.md; source design
   qa/redesign/app/app.css. Production adaptations:
   - locked command-center markup keeps its classes and inline styles; this
     file restyles them (the dark Current State banner re-scopes the token
     custom properties so locked inline var() styles adapt without edits)
   - honesty / "not available" copy resolves to dark ink (>=4.5:1, audit P1-1)
   - JetBrains Mono carries numerals/data (audit P1-2)
   - [hidden] always wins (audit P0-1 guard, scoped to this page)
   - motion only engages once html.forest-js is set; the page is fully
     readable with JS disabled and under prefers-reduced-motion
   No other production page loads this file.
   ============================================================================ */
:root{
  --canvas:#F4F1E8; --panel:#FFFFFF; --panel-2:#FBF9F2;
  --rule:#E7E1D0; --rule-soft:#EFEADB;
  --ink:#232218; --ink-2:#3C3B2D; --body-ink:#56554A;
  --muted:#5D5C4D;      /* darkened vs prototype: honesty copy clears AA */
  --muted-2:#8A8875;
  --sage:#4F6B45; --sage-deep:#33462C; --sage-soft:#DEE8D7; --sage-bright:#7BA05B;
  --side:#222A1C; --side-2:#1B2216; --side-text:#E9E4D3; --side-muted:#9DA189;
  --side-line:rgba(255,255,255,0.08); --side-active:rgba(255,255,255,0.09);
  --c1:#4F6B45; --c2:#C79A3E; --c3:#C4622D; --c4:#5E7C92; --c5:#8FA45B; --c6:#B7AE94;
  --pos:#4F7A4A; --warn:#B45309;
  /* Sage Companion token aliases: the locked inline styles in home.html
     reference these names; they resolve to forest values here. */
  --clay:#4F6B45;
  --clay-deep:#33462C;
  --clay-line:rgba(79,107,69,0.28);
  --clay-soft:#DEE8D7;
  --ink-soft:#3C3B2D;
  --cream:#F4F1E8;
  --cream-2:#EFEADB;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--body-ink);
  font-family:'Onest',system-ui,sans-serif;font-size:15.5px;line-height:1.5;
  letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;}
/* Dot-grid texture, the decided default (qa/redesign/DECISIONS.md).
   Background layer only; opaque panels sit on top of it. */
body.tex-dots{
  background-image:radial-gradient(rgba(79,107,69,0.16) 1.1px, transparent 1.4px);
  background-size:18px 18px;background-attachment:fixed;background-color:var(--canvas);}
a{color:inherit;text-decoration:none;}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
svg{display:block;}
.ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:6px;}

/* -- APP SHELL ------------------------------------------------------------ */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;}
.sidebar{background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-text);
  display:flex;flex-direction:column;padding:22px 16px 18px;position:sticky;top:0;height:100vh;
  border-right:1px solid var(--side-line);overflow-y:auto;}
.s-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 20px;}
.s-mark{width:32px;height:32px;border-radius:9px;background:var(--sage);display:flex;
  align-items:center;justify-content:center;color:#fff;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,0.5);}
.s-brand b{font-weight:600;font-size:17px;letter-spacing:-0.01em;color:var(--side-text);}
.s-section{font-size:10px;text-transform:uppercase;letter-spacing:0.16em;color:var(--side-muted);padding:14px 12px 8px;}
.s-nav{display:flex;flex-direction:column;gap:2px;}
.s-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--side-muted);font-size:14px;font-weight:500;position:relative;
  transition:background .14s,color .14s;}
.s-item:hover{background:var(--side-active);color:var(--side-text);}
/* Active state is distinct from resting (audit P1-9). */
.s-item.is-active{background:var(--side-active);color:#fff;}
.s-item.is-active::before{content:'';position:absolute;left:-16px;top:9px;bottom:9px;
  width:3px;border-radius:0 3px 3px 0;background:var(--sage-bright);}
.s-badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:600;background:var(--c3);color:#fff;border-radius:100px;padding:1px 8px;}
.s-spacer{flex:1;min-height:18px;}
.s-account{padding:12px;border-radius:13px;background:var(--side-active);
  border:1px solid var(--side-line);display:flex;align-items:center;gap:11px;}
.s-avatar{width:32px;height:32px;border-radius:9px;background:var(--c2);color:#2a2410;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0;}
.s-account .n{display:block;font-size:13.5px;color:var(--side-text);font-weight:500;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;}
.s-account .p{display:block;font-size:11.5px;color:var(--side-muted);}
.s-utils{display:flex;flex-wrap:wrap;gap:2px 12px;padding:10px 12px 0;}
.s-utils a{font-size:12px;color:var(--side-muted);transition:color .14s;}
.s-utils a:hover{color:var(--side-text);}

/* -- MAIN / TOPBAR ---------------------------------------------------------- */
main{padding:26px 34px 70px;max-width:1180px;width:100%;margin:0 auto;}
.topbar{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.topbar .t-title{font-size:27px;font-weight:500;color:var(--ink);letter-spacing:-0.02em;margin:0;}
.topbar .t-title .serif{color:var(--sage-deep);font-size:29px;}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--sage);color:#fff;
  border:none;border-radius:11px;padding:10px 16px;font-family:'Onest',sans-serif;
  font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(79,107,69,0.7);transition:transform .14s,filter .14s;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);}
.btn .ic{width:16px;height:16px;stroke-width:2.1;}

/* -- GREETING + HERO --------------------------------------------------------- */
.hero{padding:4px 0 0;}
.greeting{display:inline-flex;align-items:center;gap:9px;background:var(--sage-soft);
  border:1px solid var(--clay-line);border-radius:100px;padding:5px 13px 5px 8px;
  font-size:12.5px;color:var(--sage-deep);font-weight:500;}
.greeting .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 0 3px rgba(79,107,69,0.18);}
.greeting .serif{color:var(--sage-deep);font-size:13.5px;}

/* -- SURFACES (white cards) --------------------------------------------------- */
.surface{background:var(--panel);border:1px solid var(--rule);border-radius:18px;
  padding:22px 24px;}
.surface-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.surface-title{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;margin:0;}
.surface-title .serif{color:var(--sage-deep);font-weight:400;font-size:17.5px;}
.surface-meta{font-size:12.5px;color:var(--muted);}
.surface-eyebrow,.section-eyebrow{display:block;}

/* -- CURRENT STATE: dark forest banner ----------------------------------------
   The surface keeps its locked markup; .focus re-skins it AND re-scopes the
   Sage token custom properties so the locked inline var() styles (staged
   line, links) resolve to banner-appropriate colors with zero edits. */
.surface.focus{background:linear-gradient(110deg,#2A3622,#445635);border:none;
  border-radius:20px;padding:24px 28px;color:#EDE7D6;position:relative;overflow:hidden;
  box-shadow:0 20px 44px -26px rgba(40,55,30,0.7);
  --clay-deep:#D7E6C6;
  --clay-line:rgba(215,230,198,0.45);
  --ink-soft:#CDD3BE;
  --clay-soft:rgba(255,255,255,0.10);}
.surface.focus::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 120% at 90% 0%,rgba(123,160,91,0.35),transparent 60%);}
.surface.focus > *{position:relative;z-index:1;}
.focus .f-eyebrow{margin:0 0 6px !important;font-size:11px !important;
  letter-spacing:0.14em !important;text-transform:uppercase;
  color:#CFE0BD !important;font-weight:600 !important;}
.focus .surface-title{color:#9DA189;font-size:13px;font-weight:500;}
.focus .surface-title .serif{color:#CFE0BD;font-size:14px;}
.focus .surface-meta{color:#9DA189;}
/* Shared review-status chip, restyled for the banner (partial unmodified). */
.focus .rs-badge{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.08em;padding:4px 11px;border-radius:100px;margin:6px 0 10px;
  background:rgba(255,255,255,0.10);color:#E9E4D3;border:1px solid rgba(255,255,255,0.16);}
.focus .rs-badge-clay{background:rgba(199,154,62,0.22);color:#F2E5C9;border-color:rgba(199,154,62,0.4);}
.focus .rs-badge-accent{background:rgba(123,160,91,0.25);color:#D7E6C6;border-color:rgba(123,160,91,0.4);}
.focus .rs-headline{font-size:23px;font-weight:500;letter-spacing:-0.015em;
  line-height:1.18;color:#fff;margin:0 0 7px;}
.focus .rs-subcopy{margin:0 0 14px;font-size:14px;color:#CDD3BE;line-height:1.55;max-width:560px;}
.focus .rs-action.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#fff;
  color:var(--sage-deep);border:none;border-radius:11px;padding:12px 20px;
  font-family:'Onest',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .14s;}
.focus .rs-action.btn-primary:hover{transform:translateY(-1px);}
.focus .rs-action-static{display:inline-block;font-size:13px;color:#CFE0BD;font-weight:600;}
.focus .btn-quiet{color:#D7E6C6;border-bottom:1px solid rgba(215,230,198,0.4);padding-bottom:1px;}

/* -- BUTTONS (light context: first-run, needs-attention) ----------------------- */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--sage);color:#fff;
  border:none;border-radius:11px;padding:12px 20px;font-family:'Onest',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(79,107,69,0.7);transition:transform .14s,filter .14s;}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);}
.btn-quiet{color:var(--sage-deep);font-size:14px;font-weight:500;cursor:pointer;}
.btn-quiet:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.cta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px;}

/* -- SECTIONS ------------------------------------------------------------------ */
section{margin-top:30px;}
.section-head{margin-bottom:12px;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;}
.section-title{font-size:14.5px;font-weight:600;color:var(--sage-deep);margin:0;
  display:inline-flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:6px;height:6px;background:var(--sage);border-radius:50%;}
.section-title .serif{color:var(--sage-deep);font-size:16.5px;font-weight:400;}
.section-meta{font-size:13px;color:var(--muted);}
.section-meta a{color:var(--sage-deep);font-weight:500;border-bottom:1px solid var(--clay-line);}

/* -- ACTIVITY PILLS (locked .l/.v/.yoy markup, forest skin) --------------------- */
.ytd-pill{background:var(--panel-2);border:1px solid var(--rule-soft);border-radius:14px;
  padding:14px 16px;}
.ytd-pill .l{font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.08em;font-weight:600;margin-bottom:8px;line-height:1.4;}
.ytd-pill .v{font-family:'JetBrains Mono',monospace;font-size:25px;font-weight:500;
  color:var(--ink);letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;}
.ytd-pill .yoy{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.4;}

/* -- YTD SECTION ---------------------------------------------------------------- */
.ytd-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;margin-bottom:14px;}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:18px 20px;}
.card-sub{font-size:12px;color:var(--muted);margin:2px 0 0;}
.chart-title{font-size:14px;font-weight:600;color:var(--ink);margin:0;}
.chart-title .serif{color:var(--sage-deep);font-weight:400;font-size:15.5px;}
#forest-trend{margin-top:10px;}
.ni-axis{font-size:10.5px;fill:var(--muted-2);}
.ni-xlab{font-size:11px;fill:var(--muted);text-anchor:middle;}
.ni-xlab.cur{fill:var(--sage-deep);font-weight:600;}
.ni-zero{stroke:var(--rule);stroke-width:1;}
.ni-line{fill:none;stroke:#4F6B45;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.donut-wrap{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap;}
.donut-center{font-family:'JetBrains Mono',monospace;font-weight:600;fill:var(--ink);}
.donut-sub{fill:var(--muted);}
.cat-list{flex:1;min-width:160px;display:flex;flex-direction:column;gap:9px;}
.cat{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;}
.cat .sw{width:10px;height:10px;border-radius:3px;}
.cat .nm{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat .am{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink);}

/* Locked honest YTD rows, restyled as a forest card (markup unchanged). */
.ytd-rows{background:var(--panel);border:1px solid var(--rule);border-radius:18px;
  padding-left:22px;padding-right:22px;}
.ytd-rows li{border-bottom:1px solid var(--rule-soft);padding:11px 0;}
.ytd-rows li:last-child{border-bottom:none;}
.ytd-rows strong{color:var(--ink);font-weight:600;}

/* -- RECENT REVIEW PACKETS -------------------------------------------------------- */
.reports{display:flex;flex-direction:column;gap:8px;}
.report{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:15px 20px;
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  transition:border-color 140ms,transform 140ms;}
.report:hover{border-color:var(--sage-soft);transform:translateY(-1px);}
.report-tag{background:var(--sage-soft);color:var(--sage-deep);
  font-family:'Instrument Serif',serif;font-style:italic;font-size:12.5px;
  padding:5px 11px;border-radius:9px;white-space:nowrap;}
.report-body{min-width:0;}
.report-name{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.008em;margin:0;}
.report-meta{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.report-actions{display:flex;align-items:center;gap:4px;}
.report-action{color:var(--sage-deep);font-size:13px;font-weight:600;padding:6px 12px;
  border:1px solid var(--rule);border-radius:100px;transition:background 140ms,border-color 140ms;}
.report:hover .report-action{background:var(--sage-soft);border-color:var(--sage-soft);}

/* -- SHORTCUTS ---------------------------------------------------------------------- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px;}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;gap:5px;transition:border-color 140ms,transform 140ms;}
.tile:hover{border-color:var(--sage-soft);transform:translateY(-1px);}
.tile-eyebrow{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.12em;font-weight:600;}
.tile-name{font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-0.008em;}
.tile-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px;}

/* -- MOTION (engages only with JS present; reduced-motion shows final state) -- */
@media (prefers-reduced-motion: no-preference){
  html.forest-js [data-animate]{opacity:0;transform:translateY(12px);}
  html.forest-js [data-animate].in{opacity:1;transform:none;
    transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);}
  html.forest-js .draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);}
  html.forest-js .in .draw{stroke-dashoffset:0;
    transition:stroke-dashoffset 1.1s cubic-bezier(.4,.7,.3,1);}
  html.forest-js .area-fill{opacity:0;}
  html.forest-js .in .area-fill{opacity:1;transition:opacity .9s ease .35s;}
}
@media (prefers-reduced-motion: reduce){
  [data-animate]{opacity:1 !important;transform:none !important;}
  .draw{stroke-dashoffset:0 !important;}
  .area-fill{opacity:1 !important;}
}

/* -- TABLET / SMALL DESKTOP (page-level phone rules live inline at 480px) ------ */
@media (max-width: 1100px){
  .ytd-grid{grid-template-columns:1fr;}
}
@media (max-width: 820px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;}
  main{padding:18px 18px 60px;}
}

/* -- PAGE 2 (/p-and-l) additions ------------------------------------------ */
.page-wrap{max-width:1080px;}
.page-hero{margin:0 0 4px;}
.page-eyebrow{display:inline-block;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.18em;font-weight:600;margin-bottom:10px;}
.page-hero h1{font-family:'Onest',sans-serif;font-size:30px;font-weight:500;
  color:var(--ink);letter-spacing:-0.022em;line-height:1.12;margin:0 0 8px;}
.page-hero h1 .serif{color:var(--sage-deep);font-size:32px;}
.page-hero > p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55;max-width:560px;}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  color:var(--ink);border:1px solid var(--rule);border-radius:11px;padding:10px 16px;
  font-family:'Onest',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:border-color .14s,color .14s,transform .14s;}
.btn-secondary:hover{border-color:var(--sage);color:var(--sage-deep);transform:translateY(-1px);}
.kpis{display:grid;gap:13px;}
.kpi-card .v{font-size:23px;}
.kpi-card.kpi-net{background:linear-gradient(180deg,#ECF0E2,#F4F0DF);border-color:var(--sage-soft);}
.kpi-card.kpi-net .v{color:var(--sage-deep);}
/* Accent token aliases used by locked /p-and-l inline styles. */
:root{--accent-soft:#DEE8D7;--accent-deep:#33462C;}

/* -- HOME PARITY (forest-home-parity) -------------------------------------- */
.fh-pills{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap;}
.fh-pill{font-family:'Onest',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--muted);background:var(--panel);border:1px solid var(--rule);
  border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:border-color .14s,color .14s,background .14s;}
.fh-pill:hover{border-color:var(--sage);color:var(--sage-deep);}
.fh-pill.is-active{background:var(--sage-deep);border-color:var(--sage-deep);
  color:#fff;}
.fh-kpis .kpi-card{position:relative;overflow:hidden;}
.fh-kpis .kpi-card .v.is-na{color:var(--muted);font-size:19px;}
.fh-spark{margin-top:8px;height:30px;}
.fh-spark svg{display:block;width:100%;height:30px;}
.fh-spark .spark-line{fill:none;stroke:var(--sage);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.kpi-net .fh-spark .spark-line{stroke:var(--sage-deep);}
#forest-rve .rve-rev{fill:var(--c1);}
#forest-rve .rve-exp{fill:var(--c3);}
#forest-rve .rve-xlab{font-family:'Onest',sans-serif;font-size:11px;
  fill:var(--muted);text-anchor:middle;}
#forest-rve .rve-axis{font-family:'JetBrains Mono',monospace;font-size:10px;
  fill:var(--muted);}
#forest-rve .rve-empty{margin:18px 0;color:var(--muted);font-size:13px;}
.rve-legend{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--muted);}
.rve-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;}
@media (max-width:760px){.fh-kpis{grid-template-columns:1fr !important;}}

/* ============================================================================
   FOREST MOTION LAYER (forest-motion PR, 2026-06-12). Shared across all
   migrated pages. Rules of the layer:
   - Everything here is presentation on REAL server values; nothing delays,
     fakes, or obscures data (charts draw the exact paths/sizes the
     renderers computed; count-ups land on the exact server string).
   - Fully gated: motion only under html.forest-js AND
     prefers-reduced-motion: no-preference. The reduce block below
     neutralizes every animation to a static, instantly-visible state.
   - JS-off: no forest-js class, so every element renders static.
   ============================================================================ */

/* -- Light rail (promoted from the design lab; persisted by forest.js) ---- */
html.light-rail body .sidebar, html.light-rail .sidebar{
  --side:#FBF9F2; --side-2:#F4F1E8; --side-text:#2A3320; --side-muted:#85836F;
  --side-line:var(--rule); --side-active:rgba(79,107,69,0.14);
}
html.light-rail .s-mark{box-shadow:0 4px 14px -6px rgba(40,50,30,0.35);}
html.light-rail .s-item.is-active{color:var(--sage-deep);background:var(--side-active);}
.rail-toggle{display:flex;align-items:center;gap:8px;margin:10px 2px 0;padding:6px 10px;
  background:none;border:none;cursor:pointer;color:var(--side-muted);
  font-family:'Onest',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:0.04em;}
.rail-toggle .sw{width:26px;height:13px;border-radius:100px;background:rgba(255,255,255,0.18);
  position:relative;transition:background .2s;flex-shrink:0;}
.rail-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;
  border-radius:50%;background:#fff;transition:transform .2s;}
html.light-rail .rail-toggle .sw{background:rgba(42,51,32,0.25);}
html.light-rail .rail-toggle .sw::after{transform:translateX(13px);}
.rail-toggle:hover{color:var(--side-text);}

/* -- Hover feedback (replaces the retired cursor glow) ---------------------
   Uri 2026-07-02: the pointer-following glow is gone; feedback now lives
   on the interactive elements themselves. Buttons/cards already lift on
   hover above - this section covers the clickable controls that had no
   hover state yet. Kept subtle and consistent with the existing lifts. */
.rpt-cta,.rq-action-btn{transition:transform .14s ease,filter .18s ease,
  border-color .18s ease,background .18s ease;}
.rpt-cta:hover,.rq-action-btn:hover{transform:translateY(-1px);
  filter:brightness(1.04);}
.section-meta a:hover{color:var(--ink);border-bottom-color:var(--sage);}
.fh-pill:hover{transform:translateY(-1px);}
/* In-content text links (accountant packet, coverage notes, trails):
   deepen on hover so every clickable line answers the pointer. Button
   classes keep their own lift styles. */
@media (hover:hover){
  .surface a:not(.btn-primary):not(.btn-secondary):not(.btn-quiet):hover{
    filter:brightness(.82);}
}

/* -- Micro-interactions ---------------------------------------------------- */
.btn:active,.btn-primary:active,.btn-secondary:active,.fh-pill:active,
.rq-action-btn:active,.rpt-cta:active,.rail-toggle:active{transform:scale(.97);}
.fh-pill{transition:border-color .22s,color .22s,background .22s,transform .12s;}
.rq-decision-link{transition:border-color .18s,background .18s,transform .14s;}
@media (prefers-reduced-motion: no-preference){
  html.forest-js .rq-decision-link:hover{transform:translateX(2px);}
  html.forest-js .rq-staged-counter.f-tick{animation:f-pulse .5s ease;}
}
@keyframes f-pulse{0%{transform:scale(1);}35%{transform:scale(1.18);}100%{transform:scale(1);}}

/* -- Staggered card entrance + chart growth -------------------------------- */
@keyframes f-card-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes f-grow{from{transform:scaleY(0.001);}to{transform:scaleY(1);}}
@media (prefers-reduced-motion: no-preference){
  html.forest-js .f-stagger{opacity:0;
    animation:f-card-in .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay:calc(var(--si,0)*55ms);}
  html.forest-js .rve-rev,html.forest-js .rve-exp{
    transform-box:fill-box;transform-origin:bottom;
    animation:f-grow .6s cubic-bezier(.3,.8,.3,1) both;
    animation-delay:calc(var(--si,0)*70ms);}
  html.forest-js .donut-seg{transition:stroke-dasharray .9s cubic-bezier(.4,.6,.3,1),
    stroke-dashoffset .9s cubic-bezier(.4,.6,.3,1);}
  /* Fade-through page transitions (forest.js drives the -out class). */
  html.forest-js body{animation:f-page-in .26s ease both;}
  html.forest-js body.f-page-out{opacity:0;transition:opacity .12s ease;}
}
@keyframes f-page-in{from{opacity:0;}to{opacity:1;}}

/* -- Reduced motion: every motion-layer effect neutralized ----------------- */
@media (prefers-reduced-motion: reduce){
  .f-stagger{opacity:1 !important;animation:none !important;}
  .rve-rev,.rve-exp{animation:none !important;transform:none !important;}
  .donut-seg{transition:none !important;}
  body{animation:none !important;}
  body.f-page-out{opacity:1 !important;transition:none !important;}
  .rq-staged-counter.f-tick{animation:none !important;}
  .btn:active,.btn-primary:active,.btn-secondary:active,.fh-pill:active,
  .rq-action-btn:active,.rpt-cta:active,.rail-toggle:active{transform:none !important;}
}

/* ============================================================================
   PAGE 4b (/this-month, /close, /close/{rid}) - close_home section styles
   ported from close.css into the forest system. Class names preserved so
   every locked structure assertion (ytd-trio, ytd-pill, month-card,
   pl-table, package-list, coming-later, ...) keeps matching; only surface
   values moved to v2 tokens. Shared with the page-5 share view later.
   ============================================================================ */
:root { --warning: #C4622D; --paper: #FFFFFF; --positive: #4F7A4A; }

/* Shared review-status chip (from app_base inline styles; the chip
   partial is locked and renders on /this-month + share surfaces). */
.rs-chip { margin: 0 0 14px; padding: 10px 0 4px; }
.rs-chip .rs-headline { margin: 8px 0 4px; font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 22px; line-height: 1.25; color: var(--ink); }
.rs-chip .rs-subcopy { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.rs-chip .rs-action-static { display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--clay-soft); color: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
.rs-chip .rs-badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; text-transform: none; }
.rs-chip .rs-badge-accent { background: var(--accent-soft); color: var(--accent-deep); }
.rs-chip .rs-badge-clay   { background: rgba(199,154,62,0.16); color: #7A5A1E; }
.rs-chip .rs-badge-muted  { background: var(--panel-2); color: var(--ink-soft); }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
body[data-page="close_home"] .hero{ padding: 32px 0 36px; }
body[data-page="close_home"] .greeting{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--clay-soft);
  border: 1px solid var(--clay-line);
  border-radius: 100px;
  padding: 6px 14px 6px 8px;
  font-size: 13px; color: var(--clay-deep);
  font-weight: 500;
  margin-bottom: 22px;
}
body[data-page="close_home"] .greeting .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(79,107,69,0.18);
}
body[data-page="close_home"] .greeting .serif{ color: var(--clay-deep); font-size: 14px; }
body[data-page="close_home"] .hero-headline{
  font-size: 48px; line-height: 1.04;
  letter-spacing: -0.030em;
  font-weight: 500; color: var(--ink);
  margin: 0 0 18px;
}
body[data-page="close_home"] .hero-headline .serif{ font-size: 52px; color: var(--clay); letter-spacing: -0.020em; }
body[data-page="close_home"] .hero-deck{
  font-size: 18px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 540px;
}
body[data-page="close_home"] .hero-deck .serif{ color: var(--clay-deep); font-size: 19px; }
body[data-page="close_home"] .basis-chip{
  display: inline-block;
  font-size: 13px; color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 6px 14px;
  margin: 0 0 26px;
}
body[data-page="close_home"] .basis-chip .serif{ color: var(--ink-soft); font-size: 13.5px; margin-left: 4px; }

/* YTD trio */
body[data-page="close_home"] .ytd-trio{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
body[data-page="close_home"] .ytd-pill{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 20px;
  transition: border-color 140ms, transform 140ms;
}
body[data-page="close_home"] .ytd-pill:hover{ border-color: var(--clay-line); transform: translateY(-1px); }
body[data-page="close_home"] .ytd-pill .l{
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-page="close_home"] .ytd-pill .l .ic{
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
body[data-page="close_home"] .ytd-pill .l .ic.in{ background: var(--clay-soft); color: var(--clay-deep); }
body[data-page="close_home"] .ytd-pill .l .ic.out{ background: var(--sage-soft); color: var(--sage); }
body[data-page="close_home"] .ytd-pill .l .ic.net{ background: var(--clay); color: var(--panel-2); }
body[data-page="close_home"] .ytd-pill .v{
  font-size: 26px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.020em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
body[data-page="close_home"] .ytd-pill .yoy{
  margin-top: 8px;
  font-size: 12.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
}
body[data-page="close_home"] .ytd-pill .yoy .delta{ color: var(--positive); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="close_home"] .ytd-pill .yoy.basis-yoy{ color: var(--ink-soft); font-style: italic; font-family: 'Instrument Serif', serif; font-size: 13px; }
body[data-page="close_home"] .ytd-pill.net{ background: linear-gradient(180deg, #ECF0E2, #F4F0DF); border-color: var(--clay-line); }
body[data-page="close_home"] .ytd-pill.net .v{ color: var(--clay-deep); }
body[data-page="close_home"] .ytd-pill.ghost .v{ color: var(--muted-2); letter-spacing: 0.04em; }
body[data-page="close_home"] .ytd-pill.ghost .yoy{ color: var(--muted-2); font-style: italic; font-family: 'Instrument Serif', serif; }

/* Year trend strip */
body[data-page="close_home"] .trend{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 20px 16px;
}
body[data-page="close_home"] .trend-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; font-size: 12.5px;
}
body[data-page="close_home"] .trend-head-l{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px; font-weight: 500;
}
body[data-page="close_home"] .trend-head-r{ color: var(--muted); }
body[data-page="close_home"] .trend-head-r .v{ color: var(--ink); font-weight: 600; }
body[data-page="close_home"] .trend-bars{
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px; height: 80px; align-items: flex-end;
}
body[data-page="close_home"] .bar{ width: 100%; transition: background 140ms; }
body[data-page="close_home"] .bar.past{ background: var(--clay-soft); border-radius: 4px 4px 2px 2px; }
body[data-page="close_home"] .bar.current{ background: var(--clay); border-radius: 4px 4px 2px 2px; box-shadow: 0 0 0 2px rgba(79,107,69,0.10); }
body[data-page="close_home"] .bar.future{ background: transparent; border: 1px dashed var(--rule); border-radius: 4px; }
body[data-page="close_home"] .trend-labels{
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px; margin-top: 10px;
  font-size: 10.5px; color: var(--muted-2);
  text-align: center;
}
body[data-page="close_home"] .trend-labels span.current{ color: var(--clay-deep); font-weight: 600; }

/* Honest "coming next" inline tile (replaces YTD/trend/PL when no data) */
body[data-page="close_home"] .coming-next{
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 18px;
  padding: 26px 28px;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
body[data-page="close_home"] .coming-next .serif{
  display: block; color: var(--clay-deep);
  font-size: 17px; margin-bottom: 4px;
}
body[data-page="close_home"] .coming-next .ink{ color: var(--ink-soft); }


/* ── SECTION ──────────────────────────────────────────────────────────────── */
body[data-page="close_home"] section{ margin-top: 56px; }
body[data-page="close_home"] .section-head{
  margin-bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
body[data-page="close_home"] .section-title{
  font-size: 14.5px; font-weight: 500;
  color: var(--clay-deep);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
body[data-page="close_home"] .section-title::before{
  content: ''; width: 6px; height: 6px;
  background: var(--clay); border-radius: 50%;
}
body[data-page="close_home"] .section-title .serif{ color: var(--clay-deep); font-size: 17px; margin-left: -1px; }
body[data-page="close_home"] .section-meta{ font-size: 13.5px; color: var(--muted); }
body[data-page="close_home"] .section-meta a{ color: var(--clay-deep); font-weight: 500; border-bottom: 1px solid var(--clay-line); }

/* ── MONTH CARD ───────────────────────────────────────────────────────────── */
body[data-page="close_home"] .month-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 26px 28px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 28px; align-items: center;
}
body[data-page="close_home"] .month-card-closed{ background: linear-gradient(180deg, #ECF0E2, #F4F0DF); border-color: var(--clay-line); }
body[data-page="close_home"] .month-card-preparing{ background: var(--panel-2); }
body[data-page="close_home"] .month-status{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--positive);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 10px;
}
body[data-page="close_home"] .month-status::before{
  content: ''; width: 7px; height: 7px;
  background: var(--positive); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(79,122,74,0.18);
}
body[data-page="close_home"] .month-status.closed-status{ color: var(--clay-deep); }
body[data-page="close_home"] .month-status.closed-status::before{ background: var(--clay-deep); box-shadow: 0 0 0 3px rgba(53,74,47,0.18); }
body[data-page="close_home"] .month-status.processing-status{ color: var(--clay-deep); }
body[data-page="close_home"] .month-status.processing-status::before{ display: none; }
body[data-page="close_home"] .month-headline{
  font-size: 24px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  line-height: 1.2;
}
body[data-page="close_home"] .month-headline .serif{ color: var(--clay-deep); font-size: 26px; }
body[data-page="close_home"] .month-money{
  font-size: 14.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body[data-page="close_home"] .month-money .v{ color: var(--ink); font-weight: 600; }
body[data-page="close_home"] .month-money .sep{ color: var(--muted-2); margin: 0 6px; }
body[data-page="close_home"] .month-decisions{ margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
body[data-page="close_home"] .month-decisions .num{ font-weight: 600; color: var(--ink); }
body[data-page="close_home"] .month-decisions .serif{ color: var(--clay-deep); font-size: 15px; margin-right: 2px; }
body[data-page="close_home"] .month-card-r{ display: flex; flex-direction: column; gap: 8px; align-items: stretch; }


/* ── P&L TABLE ────────────────────────────────────────────────────────────── */
body[data-page="close_home"] .pl-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
body[data-page="close_home"] .pl-table{ width: 100%; border-collapse: collapse; }
body[data-page="close_home"] .pl-table thead th{
  text-align: right;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 500;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--rule);
}
body[data-page="close_home"] .pl-table thead th:first-child{
  text-align: left;
  color: var(--clay-deep);
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-weight: 400; font-size: 14px;
  text-transform: none; letter-spacing: 0;
}
body[data-page="close_home"] .pl-table tbody tr td{
  padding: 11px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--rule-soft);
}
body[data-page="close_home"] .pl-table tbody tr:last-child td{ border-bottom: none; }
body[data-page="close_home"] .pl-table tbody tr td:first-child{ color: var(--ink-soft); }
body[data-page="close_home"] .pl-table tbody tr td.num{ text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-page="close_home"] .pl-table tbody tr td.delta{ text-align: right; color: var(--positive); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="close_home"] .pl-table tbody tr td.delta.neg{ color: var(--warning); }
body[data-page="close_home"] .pl-table tbody tr.subtotal td{
  background: var(--panel-2);
  font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
body[data-page="close_home"] .pl-table tbody tr.total td{
  background: linear-gradient(180deg, #ECF0E2, #F4F0DF);
  font-weight: 600; color: var(--clay-deep);
  border-top: 1px solid var(--clay-line);
  padding-top: 14px; padding-bottom: 14px;
}
body[data-page="close_home"] .pl-table tbody tr.total td:first-child{ font-size: 15.5px; }
body[data-page="close_home"] .pl-table tbody tr.total td.num, body[data-page="close_home"] .pl-table tbody tr.total td.delta{ color: var(--clay-deep); font-size: 15px; }
/* P&L "preparing / coming next" overlay */
body[data-page="close_home"] .pl-card.pl-empty{ padding: 48px 32px; text-align: center; border-style: dashed; }
body[data-page="close_home"] .pl-card.pl-empty .pl-empty-text{
  max-width: 440px; margin: 0 auto;
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
body[data-page="close_home"] .pl-card.pl-empty .pl-empty-text .serif{
  display: block; color: var(--clay-deep);
  font-size: 18px; margin-bottom: 6px;
}
body[data-page="close_home"] .pl-card.pl-empty .pl-empty-text .ink{ color: var(--ink-soft); }


/* ── BRIEFING CARD ────────────────────────────────────────────────────────── */
body[data-page="close_home"] .briefing-card{
  background: linear-gradient(180deg, var(--panel-2), var(--paper));
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 30px 34px;
  position: relative;
}
body[data-page="close_home"] .briefing-quote{
  position: absolute;
  top: 14px; left: 24px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 60px; color: var(--clay);
  line-height: 1; opacity: 0.35;
}
body[data-page="close_home"] .briefing-card p{
  margin: 0; padding-left: 30px;
  font-size: 18px; line-height: 1.6; color: var(--ink-soft);
}
body[data-page="close_home"] .briefing-card p .num{ font-weight: 600; color: var(--ink); }
body[data-page="close_home"] .briefing-card p .muted{ color: var(--muted); }
body[data-page="close_home"] .briefing-sig{
  margin-top: 18px; padding-left: 30px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 15px; color: var(--clay-deep);
}

/* What moved (briefing observations) */
body[data-page="close_home"] .observations-list{ display: flex; flex-direction: column; gap: 8px; }
body[data-page="close_home"] .observation-row{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: baseline;
}
body[data-page="close_home"] .observation-name{ font-size: 14.5px; color: var(--ink); font-weight: 500; }
body[data-page="close_home"] .observation-detail{ font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
body[data-page="close_home"] .observation-amount{
  font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body[data-page="close_home"] .observation-amount.up{ color: var(--warning); }
body[data-page="close_home"] .observation-amount.down{ color: var(--positive); }

/* ── KEPT OFF ─────────────────────────────────────────────────────────────── */
body[data-page="close_home"] .kept-card{
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
body[data-page="close_home"] .kept-text{ font-size: 14.5px; color: var(--ink-soft); }
body[data-page="close_home"] .kept-text .num{ font-weight: 600; color: var(--ink); }
body[data-page="close_home"] .kept-text .muted{ color: var(--muted); }
body[data-page="close_home"] .kept-link{
  color: var(--clay-deep); font-weight: 500; font-size: 13.5px;
  border-bottom: 1px solid var(--clay-line);
  padding-bottom: 1px;
}


/* ── HANDOFF ──────────────────────────────────────────────────────────────── */
body[data-page="close_home"] .handoff-card{
  background: linear-gradient(135deg, #ECF0E2 0%, #DDE8D7 100%);
  border: 1px solid var(--clay-line);
  border-radius: 24px;
  padding: 30px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 12px 32px -16px rgba(79,107,69,0.20);
}
body[data-page="close_home"] .handoff-text h3{
  margin: 0 0 6px;
  font-size: 22px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.015em;
}
body[data-page="close_home"] .handoff-text h3 .serif{ font-weight: 400; color: var(--clay-deep); font-size: 24px; }
body[data-page="close_home"] .handoff-text p{
  margin: 0; font-size: 14.5px;
  color: var(--ink-soft); line-height: 1.5;
  max-width: 420px;
}
body[data-page="close_home"] .package-list{
  margin: 22px 0 24px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(79,107,69,0.18);
  border-radius: 14px;
}
body[data-page="close_home"] .package-label{
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 10px;
}
body[data-page="close_home"] .package-list ul{
  margin: 0; padding: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
body[data-page="close_home"] .package-list li{
  font-size: 13.5px; color: var(--ink-soft);
  padding: 4px 0 4px 18px;
  position: relative;
  display: flex; align-items: baseline; gap: 6px;
}
body[data-page="close_home"] .package-list li::before{
  content: '✓';
  position: absolute; left: 0; top: 4px;
  color: var(--clay); font-weight: 600; font-size: 11px;
}
body[data-page="close_home"] .package-list li.coming-later{ color: var(--muted); }
body[data-page="close_home"] .package-list li.coming-later::before{ content: '·'; color: var(--muted-2); font-size: 16px; top: 3px; }
body[data-page="close_home"] .package-list li .tag-coming{
  font-style: italic; font-family: 'Instrument Serif', serif;
  color: var(--muted-2); font-size: 12.5px;
}
body[data-page="close_home"] .handoff-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
body[data-page="close_home"] .footer{
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
body[data-page="close_home"] .footer-meta{ font-size: 13px; color: var(--muted); line-height: 1.6; font-variant-numeric: tabular-nums; }
body[data-page="close_home"] .footer-meta .ok::before{
  content: '●'; color: var(--positive);
  font-size: 8px; margin-right: 6px; vertical-align: 2px;
}
body[data-page="close_home"] .footer-sig{
  margin-top: 14px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 14px; color: var(--muted);
}



/* Trend bars: motion-layer grow (real heights only; the inline
   height_pct is server-computed). */
@media (prefers-reduced-motion: no-preference){
  html.forest-js body[data-page="close_home"] .trend-bars .bar{transform-origin:bottom;
    animation:f-grow .6s cubic-bezier(.3,.8,.3,1) both;}
}
@media (prefers-reduced-motion: reduce){
  body[data-page="close_home"] .trend-bars .bar{animation:none !important;transform:none !important;}
}

/* ============================================================================
   PAGE 5 (/close/share/{token}) - accountant read-only share view, ported
   from close.css and scoped to close_share. The share page deliberately
   has NO app sidebar (the accountant has no session); the locked
   read-only banner + brand bar carry the chrome. Class names preserved
   for the T_design_4 / T_close_5/7 / T_polish_3 locks. Some primitives
   (ytd-pill, pl-table, briefing) are duplicated from the 4b appendix
   under this page's own scope - deliberate: scoping safety over DRY
   (Bugbot PR #43 lesson); consolidate later if wanted.
   ============================================================================ */
/* YTD trio */
body[data-page="close_share"] .ytd-trio{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
body[data-page="close_share"] .ytd-pill{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 20px;
  transition: border-color 140ms, transform 140ms;
}
body[data-page="close_share"] .ytd-pill:hover{ border-color: var(--clay-line); transform: translateY(-1px); }
body[data-page="close_share"] .ytd-pill .l{
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-page="close_share"] .ytd-pill .l .ic{
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
body[data-page="close_share"] .ytd-pill .l .ic.in{ background: var(--clay-soft); color: var(--clay-deep); }
body[data-page="close_share"] .ytd-pill .l .ic.out{ background: var(--sage-soft); color: var(--sage); }
body[data-page="close_share"] .ytd-pill .l .ic.net{ background: var(--clay); color: var(--panel-2); }
body[data-page="close_share"] .ytd-pill .v{
  font-size: 26px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.020em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
body[data-page="close_share"] .ytd-pill .yoy{
  margin-top: 8px;
  font-size: 12.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
}
body[data-page="close_share"] .ytd-pill .yoy .delta{ color: var(--positive); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="close_share"] .ytd-pill .yoy.basis-yoy{ color: var(--ink-soft); font-style: italic; font-family: 'Instrument Serif', serif; font-size: 13px; }
body[data-page="close_share"] .ytd-pill.net{ background: linear-gradient(180deg, #ECF0E2, #F4F0DF); border-color: var(--clay-line); }
body[data-page="close_share"] .ytd-pill.net .v{ color: var(--clay-deep); }
body[data-page="close_share"] .ytd-pill.ghost .v{ color: var(--muted-2); letter-spacing: 0.04em; }
body[data-page="close_share"] .ytd-pill.ghost .yoy{ color: var(--muted-2); font-style: italic; font-family: 'Instrument Serif', serif; }

/* Year trend strip */
body[data-page="close_share"] .trend{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 20px 16px;
}
body[data-page="close_share"] .trend-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; font-size: 12.5px;
}
body[data-page="close_share"] .trend-head-l{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px; font-weight: 500;
}
body[data-page="close_share"] .trend-head-r{ color: var(--muted); }
body[data-page="close_share"] .trend-head-r .v{ color: var(--ink); font-weight: 600; }
body[data-page="close_share"] .trend-bars{
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px; height: 80px; align-items: flex-end;
}
body[data-page="close_share"] .bar{ width: 100%; transition: background 140ms; }
body[data-page="close_share"] .bar.past{ background: var(--clay-soft); border-radius: 4px 4px 2px 2px; }
body[data-page="close_share"] .bar.current{ background: var(--clay); border-radius: 4px 4px 2px 2px; box-shadow: 0 0 0 2px rgba(79,107,69,0.10); }
body[data-page="close_share"] .bar.future{ background: transparent; border: 1px dashed var(--rule); border-radius: 4px; }
body[data-page="close_share"] .trend-labels{
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px; margin-top: 10px;
  font-size: 10.5px; color: var(--muted-2);
  text-align: center;
}
body[data-page="close_share"] .trend-labels span.current{ color: var(--clay-deep); font-weight: 600; }

/* Honest "coming next" inline tile (replaces YTD/trend/PL when no data) */
body[data-page="close_share"] .coming-next{
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 18px;
  padding: 26px 28px;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
body[data-page="close_share"] .coming-next .serif{
  display: block; color: var(--clay-deep);
  font-size: 17px; margin-bottom: 4px;
}
body[data-page="close_share"] .coming-next .ink{ color: var(--ink-soft); }


/* ── SECTION ──────────────────────────────────────────────────────────────── */
body[data-page="close_share"] section{ margin-top: 56px; }
body[data-page="close_share"] .section-head{
  margin-bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
body[data-page="close_share"] .section-title{
  font-size: 14.5px; font-weight: 500;
  color: var(--clay-deep);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
body[data-page="close_share"] .section-title::before{
  content: ''; width: 6px; height: 6px;
  background: var(--clay); border-radius: 50%;
}
body[data-page="close_share"] .section-title .serif{ color: var(--clay-deep); font-size: 17px; margin-left: -1px; }
body[data-page="close_share"] .section-meta{ font-size: 13.5px; color: var(--muted); }
body[data-page="close_share"] .section-meta a{ color: var(--clay-deep); font-weight: 500; border-bottom: 1px solid var(--clay-line); }


/* ── P&L TABLE ────────────────────────────────────────────────────────────── */
body[data-page="close_share"] .pl-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
body[data-page="close_share"] .pl-table{ width: 100%; border-collapse: collapse; }
body[data-page="close_share"] .pl-table thead th{
  text-align: right;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 500;
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--rule);
}
body[data-page="close_share"] .pl-table thead th:first-child{
  text-align: left;
  color: var(--clay-deep);
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-weight: 400; font-size: 14px;
  text-transform: none; letter-spacing: 0;
}
body[data-page="close_share"] .pl-table tbody tr td{
  padding: 11px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--rule-soft);
}
body[data-page="close_share"] .pl-table tbody tr:last-child td{ border-bottom: none; }
body[data-page="close_share"] .pl-table tbody tr td:first-child{ color: var(--ink-soft); }
body[data-page="close_share"] .pl-table tbody tr td.num{ text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-page="close_share"] .pl-table tbody tr td.delta{ text-align: right; color: var(--positive); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="close_share"] .pl-table tbody tr td.delta.neg{ color: var(--warning); }
body[data-page="close_share"] .pl-table tbody tr.subtotal td{
  background: var(--panel-2);
  font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
body[data-page="close_share"] .pl-table tbody tr.total td{
  background: linear-gradient(180deg, #ECF0E2, #F4F0DF);
  font-weight: 600; color: var(--clay-deep);
  border-top: 1px solid var(--clay-line);
  padding-top: 14px; padding-bottom: 14px;
}
body[data-page="close_share"] .pl-table tbody tr.total td:first-child{ font-size: 15.5px; }
body[data-page="close_share"] .pl-table tbody tr.total td.num, body[data-page="close_share"] .pl-table tbody tr.total td.delta{ color: var(--clay-deep); font-size: 15px; }
/* P&L "preparing / coming next" overlay */
body[data-page="close_share"] .pl-card.pl-empty{ padding: 48px 32px; text-align: center; border-style: dashed; }
body[data-page="close_share"] .pl-card.pl-empty .pl-empty-text{
  max-width: 440px; margin: 0 auto;
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
body[data-page="close_share"] .pl-card.pl-empty .pl-empty-text .serif{
  display: block; color: var(--clay-deep);
  font-size: 18px; margin-bottom: 6px;
}
body[data-page="close_share"] .pl-card.pl-empty .pl-empty-text .ink{ color: var(--ink-soft); }


/* ── BRIEFING CARD ────────────────────────────────────────────────────────── */
body[data-page="close_share"] .briefing-card{
  background: linear-gradient(180deg, var(--panel-2), var(--paper));
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 30px 34px;
  position: relative;
}
body[data-page="close_share"] .briefing-quote{
  position: absolute;
  top: 14px; left: 24px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 60px; color: var(--clay);
  line-height: 1; opacity: 0.35;
}
body[data-page="close_share"] .briefing-card p{
  margin: 0; padding-left: 30px;
  font-size: 18px; line-height: 1.6; color: var(--ink-soft);
}
body[data-page="close_share"] .briefing-card p .num{ font-weight: 600; color: var(--ink); }
body[data-page="close_share"] .briefing-card p .muted{ color: var(--muted); }
body[data-page="close_share"] .briefing-sig{
  margin-top: 18px; padding-left: 30px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 15px; color: var(--clay-deep);
}

/* What moved (briefing observations) */
body[data-page="close_share"] .observations-list{ display: flex; flex-direction: column; gap: 8px; }
body[data-page="close_share"] .observation-row{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: baseline;
}
body[data-page="close_share"] .observation-name{ font-size: 14.5px; color: var(--ink); font-weight: 500; }
body[data-page="close_share"] .observation-detail{ font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
body[data-page="close_share"] .observation-amount{
  font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body[data-page="close_share"] .observation-amount.up{ color: var(--warning); }
body[data-page="close_share"] .observation-amount.down{ color: var(--positive); }

/* ── KEPT OFF ─────────────────────────────────────────────────────────────── */
body[data-page="close_share"] .kept-card{
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
body[data-page="close_share"] .kept-text{ font-size: 14.5px; color: var(--ink-soft); }
body[data-page="close_share"] .kept-text .num{ font-weight: 600; color: var(--ink); }
body[data-page="close_share"] .kept-text .muted{ color: var(--muted); }
body[data-page="close_share"] .kept-link{
  color: var(--clay-deep); font-weight: 500; font-size: 13.5px;
  border-bottom: 1px solid var(--clay-line);
  padding-bottom: 1px;
}


/* ── HANDOFF ──────────────────────────────────────────────────────────────── */
body[data-page="close_share"] .handoff-card{
  background: linear-gradient(135deg, #ECF0E2 0%, #DDE8D7 100%);
  border: 1px solid var(--clay-line);
  border-radius: 24px;
  padding: 30px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 12px 32px -16px rgba(79,107,69,0.20);
}
body[data-page="close_share"] .handoff-text h3{
  margin: 0 0 6px;
  font-size: 22px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.015em;
}
body[data-page="close_share"] .handoff-text h3 .serif{ font-weight: 400; color: var(--clay-deep); font-size: 24px; }
body[data-page="close_share"] .handoff-text p{
  margin: 0; font-size: 14.5px;
  color: var(--ink-soft); line-height: 1.5;
  max-width: 420px;
}
body[data-page="close_share"] .package-list{
  margin: 22px 0 24px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(79,107,69,0.18);
  border-radius: 14px;
}
body[data-page="close_share"] .package-label{
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 10px;
}
body[data-page="close_share"] .package-list ul{
  margin: 0; padding: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
body[data-page="close_share"] .package-list li{
  font-size: 13.5px; color: var(--ink-soft);
  padding: 4px 0 4px 18px;
  position: relative;
  display: flex; align-items: baseline; gap: 6px;
}
body[data-page="close_share"] .package-list li::before{
  content: '✓';
  position: absolute; left: 0; top: 4px;
  color: var(--clay); font-weight: 600; font-size: 11px;
}
body[data-page="close_share"] .package-list li.coming-later{ color: var(--muted); }
body[data-page="close_share"] .package-list li.coming-later::before{ content: '·'; color: var(--muted-2); font-size: 16px; top: 3px; }
body[data-page="close_share"] .package-list li .tag-coming{
  font-style: italic; font-family: 'Instrument Serif', serif;
  color: var(--muted-2); font-size: 12.5px;
}
body[data-page="close_share"] .handoff-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
body[data-page="close_share"] .footer{
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
body[data-page="close_share"] .footer-meta{ font-size: 13px; color: var(--muted); line-height: 1.6; font-variant-numeric: tabular-nums; }
body[data-page="close_share"] .footer-meta .ok::before{
  content: '●'; color: var(--positive);
  font-size: 8px; margin-right: 6px; vertical-align: 2px;
}
body[data-page="close_share"] .footer-sig{
  margin-top: 14px;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 14px; color: var(--muted);
}


/* ════════════════════════════════════════════════════════════════════════════
   ACCOUNTANT READ-ONLY (share view)
   ════════════════════════════════════════════════════════════════════════════ */

body[data-page="close_share"] .ro-banner{
  position: sticky; top: 0; z-index: 20;
  background: rgba(242,237,223,0.92);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
body[data-page="close_share"] .ro-banner-inner{
  max-width: 760px; margin: 0 auto;
  padding: 13px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 13px;
}
body[data-page="close_share"] .ro-banner-l{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); }
body[data-page="close_share"] .ro-pill{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--clay-soft);
  border: 1px solid var(--clay-line);
  border-radius: 100px;
  padding: 4px 11px 4px 9px;
  font-size: 11.5px; font-weight: 500;
  color: var(--clay-deep);
  letter-spacing: 0.02em;
}
body[data-page="close_share"] .ro-pill .lock{
  width: 12px; height: 12px;
  border: 1.5px solid var(--clay-deep);
  border-radius: 3px;
  position: relative;
}
body[data-page="close_share"] .ro-pill .lock::before{
  content: ''; position: absolute;
  width: 6px; height: 4px;
  border: 1.5px solid var(--clay-deep);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  left: 1.5px; top: -4px;
}
body[data-page="close_share"] .ro-banner-shared{ color: var(--muted); font-size: 12.5px; }
body[data-page="close_share"] .ro-banner-shared .v{ color: var(--ink-soft); font-weight: 500; }
body[data-page="close_share"] .ro-banner-r{ color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
body[data-page="close_share"] .ro-banner-r .v{ color: var(--ink); font-weight: 500; }

/* Cover letter */
body[data-page="close_share"] .cover{
  background: linear-gradient(180deg, var(--panel-2), var(--paper));
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 36px 38px;
  margin-bottom: 24px;
}
body[data-page="close_share"] .cover-eyebrow{
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 500; margin-bottom: 12px;
}
body[data-page="close_share"] .cover-headline{
  font-family: 'Onest', sans-serif;
  font-size: 36px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.08;
  margin: 0 0 20px;
}
body[data-page="close_share"] .cover-headline .serif{ color: var(--clay-deep); font-size: 38px; }
body[data-page="close_share"] .cover-from{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
body[data-page="close_share"] .cover-avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sage-soft); color: var(--sage);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 18px; line-height: 1;
  flex-shrink: 0;
}
body[data-page="close_share"] .cover-from-text{ font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
body[data-page="close_share"] .cover-from-text .name{ color: var(--ink); font-weight: 600; }
body[data-page="close_share"] .cover-from-text .meta{ color: var(--muted); font-size: 12.5px; }
body[data-page="close_share"] .cover-note{
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 17px; color: var(--ink-soft);
  line-height: 1.55;
  padding: 18px 0 4px;
  border-top: 1px solid var(--rule-soft);
}

/* Package files (accountant) */
body[data-page="close_share"] .files{ display: flex; flex-direction: column; gap: 8px; }
body[data-page="close_share"] .file-row{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 20px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  transition: border-color 140ms, transform 140ms;
}
body[data-page="close_share"] .file-row:hover{ border-color: var(--clay-line); transform: translateY(-1px); }
body[data-page="close_share"] .file-row.coming-later{ background: var(--panel-2); }
body[data-page="close_share"] .file-row.coming-later:hover{ transform: none; border-color: var(--rule); }
body[data-page="close_share"] .file-tag{
  background: var(--panel-2);
  border: 1px solid var(--rule);
  color: var(--clay-deep);
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
body[data-page="close_share"] .file-body{ min-width: 0; }
body[data-page="close_share"] .file-name{
  font-size: 15.5px; font-weight: 500;
  color: var(--ink);
  margin: 0; letter-spacing: -0.008em;
}
body[data-page="close_share"] .file-row.coming-later .file-name{ color: var(--ink-soft); }
body[data-page="close_share"] .file-meta{
  font-size: 12.5px; color: var(--muted);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
body[data-page="close_share"] .file-actions{ display: flex; align-items: center; gap: 4px; }
body[data-page="close_share"] .file-action{
  color: var(--clay-deep);
  font-size: 13.5px; font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms, color 140ms;
}
body[data-page="close_share"] .file-action:hover{ background: var(--panel-2); color: var(--ink); }
body[data-page="close_share"] .file-action.coming{
  color: var(--muted); cursor: default;
  font-style: italic; font-family: 'Instrument Serif', serif;
}
body[data-page="close_share"] .file-action.coming:hover{ background: transparent; color: var(--muted); }
body[data-page="close_share"] .file-actions .sep{ color: var(--rule); font-size: 14px; }

/* Decisions log (accountant) */
body[data-page="close_share"] .decisions-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
}
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row{
  display: grid; grid-template-columns: 70px 1fr auto auto;
  gap: 14px; align-items: baseline;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row:last-child{ border-bottom: none; }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .date{ color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .what{ color: var(--ink-soft); }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .what .v{ color: var(--ink); font-weight: 500; }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .outcome{
  font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
}
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .outcome.confirmed{ background: var(--clay-soft); color: var(--clay-deep); }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .outcome.reclassified{ background: var(--sage-soft); color: var(--sage); }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .outcome.flagged{ background: rgba(180,83,9,0.10); color: var(--warning); }
:is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .amt{
  font-size: 13.5px; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}



/* Share-page shell: forest canvas without the app grid. */
body[data-page="close_share"] .ro-banner-inner{max-width:980px;}
body[data-page="close_share"] main{max-width:980px;margin:0 auto;
  padding:26px 34px 70px;}
body[data-page="close_share"] .topbar-inner{max-width:980px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 34px;}
body[data-page="close_share"] header.topbar{display:block;border-bottom:1px solid var(--rule);
  background:var(--panel-2);margin-bottom:0;}
body[data-page="close_share"] .brand{display:inline-flex;align-items:center;
  gap:10px;font-weight:600;font-size:16.5px;color:var(--ink);}
body[data-page="close_share"] .brand-mark{width:30px;height:30px;
  border-radius:9px;background:var(--sage);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;}

/* Page 4b/5 responsive tier (ported from close.css 700px block; the
   pages' inline 480px blocks cover phones). Scoped per page. */
@media (max-width: 700px) {
  body[data-page="close_share"] main { padding: 16px 18px 64px; }
  body[data-page="close_share"] .ytd-trio { grid-template-columns: 1fr; gap: 8px; }
  body[data-page="close_share"] .ytd-pill .v { font-size: 22px; }
  body[data-page="close_share"] .pl-table thead th { font-size: 10px; padding: 14px 12px 8px; }
  body[data-page="close_share"] .pl-table tbody tr td { font-size: 13.5px; padding: 9px 12px; }
  body[data-page="close_share"] .briefing-card { padding: 24px 22px; }
  body[data-page="close_share"] .briefing-card p { font-size: 16.5px; padding-left: 24px; }
  body[data-page="close_share"] .ro-banner-inner { padding: 11px 18px; flex-wrap: wrap; gap: 8px; }
  body[data-page="close_share"] .ro-banner-shared { display: none; }
  body[data-page="close_share"] .cover { padding: 26px 22px; }
  body[data-page="close_share"] .cover-headline { font-size: 26px; }
  body[data-page="close_share"] .cover-headline .serif { font-size: 28px; }
  body[data-page="close_share"] .file-row { grid-template-columns: 1fr; gap: 8px; }
  :is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 12px 16px; }
  :is(body[data-page="close_share"],body[data-page="transactions"]) .decision-row .amt { display: none; }
  body[data-page="close_home"] .hero-headline { font-size: 36px; }
  body[data-page="close_home"] .hero-headline .serif { font-size: 38px; }
  body[data-page="close_home"] .hero-deck { font-size: 16.5px; }
  body[data-page="close_home"] .ytd-trio { grid-template-columns: 1fr; gap: 8px; }
  body[data-page="close_home"] .ytd-pill .v { font-size: 22px; }
  body[data-page="close_home"] .trend { padding: 16px 16px 14px; }
  body[data-page="close_home"] .trend-bars { height: 64px; }
  body[data-page="close_home"] .month-card { grid-template-columns: 1fr; gap: 18px; padding: 22px 22px; }
  body[data-page="close_home"] .pl-table thead th { font-size: 10px; padding: 14px 12px 8px; }
  body[data-page="close_home"] .pl-table tbody tr td { font-size: 13.5px; padding: 9px 12px; }
  body[data-page="close_home"] .briefing-card { padding: 24px 22px; }
  body[data-page="close_home"] .handoff-card { padding: 24px 22px; }
  body[data-page="close_home"] .package-list ul { grid-template-columns: 1fr; }
}

/* ============================================================================
   PAGE 6 (login / signup / onboarding / upgrade / run-review) - the last
   migration group. Auth + form primitives ported from app_shell.css with
   class names preserved (the ~185 locks on these surfaces assert copy,
   markers, and structure); scoped per page (PR #43 lesson). The reading
   loader is NOT restyled here - it is a standalone, heavily locked
   cinematic surface (test_reading_loader_static and friends).
   ============================================================================ */
/* ── AUTH PAGES, login / signup card ────────────────────────────────────── */

:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-frame{
  /* Batch 1 (May 2026): tightened vertical padding to remove the
     large empty band above the signup card on 1440x900. The legacy
     min-height: 100vh - 80px centred the card and left ~280px of
     empty cream above it at desktop heights. Switch to a top-aligned
     flex with comfortable but not excessive padding; the card still
     centres horizontally. */
  min-height: calc(100vh - 80px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px 64px;
  /* Defensive overflow guard. Combined with the html/body rule in
     tokens.css this means no child can scroll the viewport sideways
     on a 375px or 390px phone. */
  max-width: 100%;
  overflow-x: hidden;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 40px 36px;
  width: 100%;
  /* Cap width but allow shrinking inside narrow viewports. The
     min() form prevents an 480px card from forcing a horizontal
     scroll on a 390px phone (legacy bug). */
  max-width: min(440px, 100%);
  box-shadow: 0 12px 32px -16px rgba(79,107,69,0.15);
  /* Long content (a 60-char email) must wrap inside the card, not
     punch out of it. min-width:0 lets flex children honor the cap. */
  min-width: 0;
  overflow-wrap: anywhere;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-eyebrow{
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-bottom: 10px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card h1{
  font-family: 'Onest', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  line-height: 1.2;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card h1 .serif{
  color: var(--clay-deep);
  font-size: 30px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .sub{
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.55;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card label{
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 6px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input[type="email"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input[type="text"]{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  margin-bottom: 4px;
  /* Long email overflow guard. Without min-width:0 a long string
     stretches the input past its parent's max-width on phones. */
  min-width: 0;
  max-width: 100%;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input[type="email"]:focus, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input[type="text"]:focus{
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(79,107,69,0.10);
}
/* Inline-validation states (Batch 1, May 2026). The blur listener
   on /signup adds .is-invalid + flips aria-invalid; we surface it
   with a calm warning border + the warning palette. The hint slot
   below each input renders the field-level guidance. */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input.is-invalid, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card input[aria-invalid="true"]{
  border-color: var(--warning, #B45309);
  background: #FDF6EB;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .field-hint{
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.4;
  min-height: 16px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .field-hint.is-error{
  color: var(--warning, #B45309);
}
/* Trust block under the signup CTA. Four short claims that answer
   the most common "what happens next?" anxieties. Layout: vertical
   stack on phones, two-column on >=520px. */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .signup-trust{
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .signup-trust li{
  list-style: none;
  padding-left: 18px;
  position: relative;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .signup-trust li::before{
  content: "·";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--clay-deep);
  font-weight: 700;
}
@media (min-width: 520px) {
  :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .signup-trust{
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
}
/* Phone breakpoint: keep the card readable at 375px (iPhone SE) +
   390px (iPhone 12-15). Smaller padding + slightly compressed h1. */
@media (max-width: 480px) {
  :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-frame{
    padding: 24px 14px 48px;
  }
  :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card{
    padding: 28px 22px;
    border-radius: 18px;
  }
  :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card h1{
    font-size: 25px;
  }
  :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card h1 .serif{
    font-size: 26px;
  }
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-submit{
  width: 100%;
  padding: 13px 22px;
  background: var(--clay);
  color: var(--cream);
  border: none;
  border-radius: 100px;
  font-family: 'Onest', sans-serif;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 8px 24px -10px rgba(79,107,69,0.55),
    0 2px 8px -2px rgba(79,107,69,0.20);
  transition: transform 140ms, filter 140ms;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-submit:hover{ transform: translateY(-1px); filter: brightness(1.05); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-submit[disabled]{ opacity: 0.55; cursor: wait; }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-back{
  display: block;
  text-align: center;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-back:hover{ color: var(--ink); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-alt{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-card .auth-alt a{
  color: var(--clay-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--clay-line);
  padding-bottom: 1px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-msg{
  display: none;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-msg.success{
  background: var(--clay-soft);
  border: 1px solid var(--clay-line);
  color: var(--clay-deep);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-msg.error{
  background: rgba(180,83,9,0.08);
  border: 1px solid rgba(180,83,9,0.25);
  color: var(--warning);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .auth-msg.show{ display: block; }



/* Paper card, the workhorse interior container */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 16px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface-title{
  font-size: 16px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.010em;
  margin: 0;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface-meta{ font-size: 13px; color: var(--muted); }

/* Form fields, matches the auth-card styling but reusable */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .field{ display: flex; flex-direction: column; margin-bottom: 18px; }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .field label, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface label:not(.dropzone){
  /* Bugbot (PR #49): exclude .dropzone, which is itself a <label>
     inside .surface. Without :not(.dropzone) the field-label
     typography (uppercase, compact, letter-spaced) cascades into the
     whole dropzone and uppercases its caption, diverging from the
     locked dropzone design. Applies to every form-group page that
     has a dropzone, not just /import. */
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 6px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .field-help{
  font-size: 12.5px; color: var(--muted);
  margin: -10px 0 14px;
  line-height: 1.45;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input[type="text"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input[type="email"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input[type="password"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input[type="number"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input[type="url"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface textarea, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface select{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807E70' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface input:focus, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface textarea:focus, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .surface select:focus{
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(79,107,69,0.10);
}

/* Radio + segmented control */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice-row{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice:hover{ border-color: var(--clay-line); color: var(--ink); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="radio"], :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="checkbox"]{
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="checkbox"]{ border-radius: 4px; }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="radio"]:checked, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="checkbox"]:checked{
  border-color: var(--clay);
  background: var(--clay);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="radio"]:checked::after{
  content: ''; position: absolute;
  inset: 3px; border-radius: 50%;
  background: var(--cream);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice input[type="checkbox"]:checked::after{
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  font-size: 10px; font-weight: 700;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .choice:has(input:checked){
  border-color: var(--clay);
  background: var(--clay-soft);
  color: var(--clay-deep);
}

/* CTA row */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .cta-row{
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Status pills */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px 5px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill::before{
  content: ''; width: 7px; height: 7px;
  border-radius: 50%;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.connected{ color: var(--positive); background: rgba(79,122,74,0.10); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.connected::before{ background: var(--positive); box-shadow: 0 0 0 3px rgba(79,122,74,0.18); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.warn{ color: var(--warning); background: rgba(180,83,9,0.10); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.warn::before{ background: var(--warning); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.muted{ color: var(--muted); background: var(--cream-2); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .status-pill.muted::before{ background: var(--muted-2); }

/* File upload dropzone */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone{
  border: 2px dashed var(--rule);
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  background: var(--cream-2);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone:hover, :is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone.is-drag{
  border-color: var(--clay);
  background: var(--clay-soft);
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone-icon{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 32px;
  color: var(--clay);
  display: block;
  margin-bottom: 8px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone-text{
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 4px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone-text .pick{
  color: var(--clay-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--clay-line);
  padding-bottom: 1px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .dropzone-help{
  font-size: 12.5px; color: var(--muted);
  margin: 0;
}

/* Progress treatment for async actions */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .progress{
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--cream-2);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
  display: none;
  align-items: center;
  gap: 10px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .progress.show{ display: flex; }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .progress.success{ background: var(--clay-soft); color: var(--clay-deep); }
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .progress.error{ background: rgba(180,83,9,0.10); color: var(--warning); }

/* Step nav for onboarding */
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .steps{
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 32px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .step{
  display: inline-flex; align-items: center; gap: 8px;
}
:is(body[data-page="login"],body[data-page="signup"],body[data-page="onboarding"],body[data-page="upgrade"],body[data-page="run_review"],body[data-page="settings"],body[data-page="import"],body[data-page="quickbooks"]) .step .step-dot{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;


/* Pre-auth pages center the card on the forest canvas. */
:is(body[data-page="login"],body[data-page="signup"]) main{
  max-width:none;padding:0;}