/* ═══════════════════════════════════════════════════════════════════
   Umbra·Lux CE
   The door is umbra (dark login). The workspace is lux (light).
   You sign in and come OUT of the shadow. The dock is the last
   thin line of shadow at the foot of the lit room.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts (vendored, served locally) ─────────────────────────────── */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/cinzel-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/cinzel-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/cinzel-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url('/_content/UmbraLux.Design/fonts/dm-sans-latin-300-italic.woff2') format('woff2')}

:root{
  --bg:#0a0c12;
  --gold:#c89a3e;
  --gold-soft:#e8d4a8;
  --ink:#f0ebde;
  --ink-body:#c9c2b2;
  --ink-dim:#8f887a;
  --line:rgba(232,212,168,.13);
  --line-strong:rgba(232,212,168,.26);
  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--ink-body);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ── Wordmark lockup — UMBRA · Lux CE ─────────────────────────────── */
.ce-brand{display:inline-flex;align-items:baseline;line-height:1}
.ce-brand .b-umbra{font-family:var(--serif);font-weight:500;font-size:var(--bh);letter-spacing:.10em}
.ce-brand .b-dot{font-size:var(--bh);width:.3em;height:.3em;align-self:center;position:relative;top:-.04em;margin:0 .14em;display:inline-block}
.ce-brand .b-dot svg{width:100%;height:100%;display:block}
.ce-brand .b-lux{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--gold);font-size:calc(var(--bh)*.94);margin-left:.04em}
.ce-brand .b-ce{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--gold);font-size:calc(var(--bh)*.94);margin-left:.28em}

/* ═══ THE DOOR — login (umbra). Verbatim CGP values. ═══════════════ */
.login-shell{min-height:100vh;background:#05080f;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.login-bg-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% 38%,rgba(200,154,62,.07) 0%,transparent 65%),radial-gradient(ellipse 100% 40% at 50% 100%,rgba(13,17,23,.8) 0%,transparent 60%)}
.login-center{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;padding:0 2rem}
.login-lockup{margin-bottom:1.1rem}
.login-lockup .ce-brand{--bh:2.9rem;color:#e8d4a8}
.login-org{font-size:.82rem;font-weight:500;color:rgba(232,212,168,.5);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2rem}
.login-divider{display:flex;align-items:center;gap:.85rem;width:100%;margin-bottom:1.75rem}
.login-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(232,212,168,.2) 30%,rgba(232,212,168,.2) 70%,transparent)}
.login-divider-label{font-size:.62rem;font-weight:700;letter-spacing:.2em;color:rgba(232,212,168,.35)}
.login-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.85rem 1.5rem;border-radius:8px;border:1px solid rgba(232,212,168,.35);background:rgba(232,212,168,.06);color:#e8d4a8;font-size:.9rem;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.login-btn:hover{background:rgba(232,212,168,.14);border-color:rgba(232,212,168,.65);color:#f0e0b8}
.login-btn-icon{width:18px;height:18px;flex-shrink:0;opacity:.85}
.login-note{margin-top:1.4rem;font-size:.74rem;color:rgba(255,255,255,.28);text-align:center;line-height:1.6}
.login-footer{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;font-size:.68rem;color:rgba(255,255,255,.15);letter-spacing:.08em}

/* ═══ THE ROOM — app workspace (lux). Light. ═══════════════════════ */
/* Light theme — the default workspace skin, on the canonical cool brand ground. */
/* ────────────────────────────────────────────────────────────────────────────
   CANONICAL BRAND PALETTE — UmbraLux_old/docs/executive/BRAND-IDENTITY.md
   ("Established", 2026-04-20). Use the canonical names; these colours HAVE names.

     UMBRA Black #0d1117   deepest black — login screen
     UMBRA Gold  #c89a3e   primary brand gold — buttons, accents, icons
     LUX Black   #1a1a2e   base body text and UI chrome
     LUX Blue    #1e293b   dark navy — sidebar, headers, dark surfaces
     LUX Gold    #e8d4a8   soft gold — labels/muted accents ON DARK
     LUX BG      #f4f5f8   page background — COOL LIGHT SURFACE
     LUX RING    #dadbf1   input focus ring and border accent

   CE's light theme had drifted off this entirely into cream and brown (#f1efe7
   canvas, #4d4838 ink, olive "green", brick "red"). That drift is why the app
   read as a warm white-on-white room with nothing to contrast against: the
   brand ground is COOL and I had built a warm one by lightening the dark theme
   instead of reading the brand. Restored here. Don't re-derive it — read the doc.
   ──────────────────────────────────────────────────────────────────────────── */
.app-shell{
  --canvas:#f4f5f8;          /* LUX BG — the desk, brand canon, do not repaint */
  --surface:#ffffff;         /* true white paper, so panels separate from the cool desk */
  --head-bg:#e6e9f0;         /* header band — a shade deeper than the desk, marks structure vs rows */
  --ink:#1a1a2e;             /* LUX Black */
  --ink-2:#3d4354;
  --ink-3:#5f6878;
  --line:#d7dce4;            /* hairline, actually visible on the desk (was #e3e6ec, invisible) */
  --line-2:#c3cad5;          /* toward LUX RING */
  --gold:#a8801f;            /* UMBRA Gold darkened for contrast as text on light */
  --pos:#0f7a5c;
  --neg:#c0341d;
  /* MONEY FLOW — the one semantic pair the brand palette doesn't define, so it's added rather than
     drifted. Out = vermilion, in = teal-green. Tuned PER THEME, never one muted compromise: a value
     that survives LUX BG disappears on UMBRA Black, which is what made dark mode unreadable. */
  --flow-out:#bf3f24;
  --flow-in:#12775a;
  --flow-out-wash:rgba(191,63,36,.05);
  --flow-in-wash:rgba(18,119,90,.05);
  /* The dark anchor is LUX Blue — this is literally its documented job: "dark navy — sidebar,
     headers, dark surfaces". Its labels take LUX Gold, also documented: "soft gold — labels and
     muted accents ON DARK". Earlier attempts (cool black, then espresso) were both me inventing
     a colour the brand had already specified. */
  --hero-bg:#1e293b;
  --hero-ink:#f4f5f8;        /* LUX BG */
  --hero-ink-3:#e8d4a8;      /* LUX Gold */
  /* STATUS surfaces. These used to be hardcoded hex on every alert/confirm box, which meant they
     ignored the theme entirely — a near-white #fdf2f1 error panel glared on the dark page. Tokens
     now, tuned per theme, and cooled to sit on LUX BG. */
  /* The rail divider needs its OWN token. On dark, --line is gold-tinted and reads at 7.34:1; the
     light equivalent was #e3e6ec on #f4f5f8 = 1.15:1, i.e. no line at all. Light cannot recede by
     going paler (that is the contrast floor), so it separates structurally instead — a rule you can
     actually see. */
  --rail-line:#c4ccd8;
  /* Light recedes by going DARKER, never paler — paler runs into the contrast floor. A hair of
     cool tint is the light-mode equivalent of what dark gets for free. */
  --rail-bg:#edeff4;
  --gold-ink:#7d5f14;        /* gold as small TEXT on light — plain --gold is too pale to read */
  --on-gold:#1a1a2e;         /* LUX Black — text on a gold fill */
  /* Primary button. On light it echoes the navy hero (LUX Blue) with the gold demoted to a focus ring,
     so a solid gold fill stops being the loudest thing on a now-restrained page. On dark it stays gold,
     which is gold's documented home. Tuned per theme below. */
  --btn-bg:#1e293b;          /* LUX Blue */
  --btn-ink:#f4f5f8;         /* LUX BG */
  --ok:#0f7a5c;   --ok-bg:#e9f5f1;   --ok-line:#b7ddd0;
  --warn:#8a5a12; --warn-bg:#faf1e2; --warn-line:#ead6ae;
  --bad:#c0341d;  --bad-bg:#fdedea;  --bad-line:#f3c9c1;
  /* Exactly the viewport, never taller. The canvas is the ONLY thing that scrolls, so content can't
     run under the dock and the bottom band is real chrome instead of something floating over the work.
     Desktop surface — a bounded work area is the point, not a compromise. */
  height:100vh;overflow:hidden;background:var(--canvas);color:var(--ink-2);
  display:flex;flex-direction:column;
}
/* Dark theme — cinematic (direction C). Toggled by the header switch, pure CSS via :has(). */
.app-shell:has(.theme-switch:checked){
  --canvas:#0d1117;          /* UMBRA Black */
  --surface:#161c26;
  --head-bg:#1c2431;         /* header band — a step up from the surface, marks structure vs rows */
  --ink:#f4f5f8;             /* LUX BG */
  --ink-2:#c2c8d4;
  --ink-3:#9aa3b4;
  --line:rgba(200,154,62,.16);
  --line-2:rgba(200,154,62,.28);
  --gold:#c89a3e;            /* UMBRA Gold, at full strength on dark */
  --pos:#3fd8a0;
  --neg:#ff7f5c;
  /* Same meanings, rebuilt for near-black: lifted in value so they glow rather than sink, and
     still holding chroma. The light-theme values are invisible down here. */
  --flow-out:#ff7f5c;
  --flow-in:#3fd8a0;
  --flow-out-wash:rgba(255,127,92,.065);
  --flow-in-wash:rgba(63,216,160,.06);
  --hero-bg:#1e293b;          /* LUX Blue lifts off UMBRA Black — the brand's own layering */
  --hero-ink:#f4f5f8;
  --hero-ink-3:#e8d4a8;       /* LUX Gold */
  --rail-line:rgba(200,154,62,.20);   /* warm rule; dark recedes on its own */
  --rail-bg:transparent;              /* a dark region already reads as background */
  --gold-ink:#e8d4a8;         /* LUX Gold reads as the gold text colour on dark */
  --on-gold:#1a1a2e;
  --btn-bg:#c89a3e;           /* on dark, gold IS the strong solid — a navy button would vanish here */
  --btn-ink:#1a1a2e;
  --ok:#3fd8a0;   --ok-bg:rgba(63,216,160,.10);  --ok-line:rgba(63,216,160,.30);
  --warn:#e8b45c; --warn-bg:rgba(232,180,92,.10); --warn-line:rgba(232,180,92,.30);
  --bad:#ff7f5c;  --bad-bg:rgba(255,127,92,.10);  --bad-line:rgba(255,127,92,.30);
}

/* ── Menu bar (chrome, not nav) ───────────────────────────────────── */
.app-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.6rem;background:var(--surface);border-bottom:1px solid var(--line);
}
.app-bar .ce-brand{--bh:1.15rem;color:var(--ink)}
.app-bar-right{display:flex;align-items:center;gap:1.1rem}
/* Settings — a cog in the app bar (replaces the org name) opening a small popover; pure-CSS toggle */
.settings-wrap{position:relative;display:grid;place-items:center}
.settings-toggle{position:absolute;opacity:0;pointer-events:none}
.settings-btn{display:grid;place-items:center;width:30px;height:30px;cursor:pointer;color:var(--ink-3);border-radius:3px;transition:color .12s,background .12s}
.settings-btn:hover{color:var(--ink);background:var(--line)}
.settings-btn svg{width:18px;height:18px}
.settings-scrim{position:fixed;inset:0;z-index:70;display:none}
.settings-toggle:checked ~ .settings-scrim{display:block}
.settings-pop{position:absolute;top:calc(100% + .55rem);right:0;min-width:212px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 34px rgba(13,17,23,.16);padding:.75rem .85rem;
  z-index:71;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease}
.settings-toggle:checked ~ .settings-pop{opacity:1;visibility:visible;transform:none}
.settings-h{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.settings-lbl{font-size:.8rem;color:var(--ink-2)}
.settings-langs{display:flex;gap:.3rem}
.settings-lang{font-size:.78rem;padding:.2rem .5rem;border-radius:5px;color:var(--ink-3);text-decoration:none;border:1px solid transparent;transition:.12s}
.settings-lang:hover{color:var(--ink);background:var(--line)}
.settings-lang.on{color:var(--ink);border-color:var(--line-2);font-weight:600}
.app-user{
  width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--surface);
  display:grid;place-items:center;font-size:.68rem;font-weight:700;letter-spacing:.04em;
}
/* Light/dark switch — pure CSS, sun in light, moon in dark */
.theme-switch{position:absolute;opacity:0;pointer-events:none}
.theme-btn{display:grid;place-items:center;width:30px;height:30px;cursor:pointer;color:var(--ink-3);border-radius:3px;transition:color .12s,background .12s}
.theme-btn:hover{color:var(--ink);background:var(--line)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .ic-moon{display:none}
.app-shell:has(.theme-switch:checked) .theme-btn .ic-sun{display:none}
.app-shell:has(.theme-switch:checked) .theme-btn .ic-moon{display:block}

/* ── Canvas ───────────────────────────────────────────────────────── */
/* The one scroll region. min-height:0 is load-bearing — without it a flex child refuses to shrink
   below its content and the shell grows past the viewport again. The 7rem of dead space that used to
   clear the floating dock is gone: the dock now sits in its own band below this. */
.app-canvas{--canvas-pad-t:2.4rem;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--canvas-pad-t) 2rem 1.8rem}
.dash{max-width:1180px;margin:0 auto}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.6rem}
.dash-title{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.9rem;letter-spacing:.01em;margin:0}
.dash-date{font-size:.78rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}

/* ── Widget ───────────────────────────────────────────────────────── */
.w{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:1.15rem 1.3rem;transition:border-color .18s,box-shadow .18s,transform .18s;
  display:flex;flex-direction:column;
}
a.w:hover{border-color:var(--line-2);box-shadow:0 8px 26px rgba(13,17,23,.07);transform:translateY(-1px)}
.w-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.w-title{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.w-more{font-size:.68rem;font-weight:600;color:var(--gold-ink);letter-spacing:.02em}

/* KPI */
.kpi{grid-column:span 3}
.kpi-val{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.75rem;line-height:1.1}
.kpi-val.muted{color:var(--ink-3)}
.kpi-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;gap:.6rem}
.kpi-delta{font-size:.72rem;font-weight:600;letter-spacing:.02em}
.kpi-delta.pos{color:var(--pos)}
.kpi-delta.neg{color:var(--neg)}
.kpi-delta.flat{color:var(--ink-3)}
.spark{width:74px;height:22px;flex:none;opacity:.9}

/* Queue */
.q{grid-column:span 5}
.q-row{display:flex;align-items:flex-start;gap:.85rem;padding:.7rem 0;border-top:1px solid var(--line)}
.q-row:first-of-type{border-top:none;padding-top:0}
.q-count{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);
  min-width:1.4rem;line-height:1.3;border-left:2px solid var(--gold);padding-left:.55rem;
}
.q-text{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.q-sub{font-size:.74rem;color:var(--ink-3);margin-top:.1rem}

/* River — the signature widget */
.river{grid-column:span 7}
.r-row{display:flex;align-items:baseline;gap:.85rem;padding:.62rem 0;border-top:1px solid var(--line)}
.r-row:first-of-type{border-top:none;padding-top:0}
.r-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-2px)}
.r-main{flex:1;font-size:.86rem;color:var(--ink-2)}
.r-main b{color:var(--ink);font-weight:600}
.r-when{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.r-foot{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--ink-3)}

/* Doors */
.doors{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.door{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.8rem;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.door:hover{border-color:var(--line-2);box-shadow:0 8px 26px rgba(13,17,23,.07);transform:translateY(-1px)}
.door svg{width:17px;height:17px;color:var(--gold);flex:none}
.door span{font-size:.86rem;font-weight:600;color:var(--ink)}

/* Empty room */
.room-empty{color:var(--ink-3);font-size:.98rem;max-width:40em;line-height:1.7}

/* Money — inline engraved figures + account rows */
.money{font-family:var(--serif);font-variant-numeric:tabular-nums}
.acct{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.62rem 0;border-top:1px solid var(--line)}
.acct:first-of-type{border-top:none;padding-top:0}
.acct-left{display:flex;align-items:baseline;gap:.7rem;min-width:0}
.acct-code{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.acct-name{font-size:.9rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-bal{font-family:var(--serif);font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.acct-bal.zero{color:var(--ink-3)}
.r-main .money{color:var(--ink)}

/* ── Money workspace (a place you work the books, not a dashboard) ── */
.work{max-width:1180px;margin:0 auto}
/* FocusOnNavigate parks focus on the h1 for screen readers — keep the focus, drop the visible ring (a heading is never a control) */
h1:focus,h1:focus-visible{outline:none}
.work-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.work-title{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.9rem;letter-spacing:.01em;margin:0}
.record-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--gold);color:var(--gold-ink);background:rgba(200,154,62,.08);border-radius:7px;padding:.55rem 1rem;font-size:.86rem;font-weight:600;cursor:pointer;transition:.15s}
.record-btn:hover{background:rgba(200,154,62,.16)}
.record-btn svg{width:15px;height:15px}
.strip{display:flex;align-items:flex-end;gap:2.6rem;padding:1.4rem 0 1.7rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem;flex-wrap:wrap}
.strip .cash .lbl{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.strip .cash .val{font-family:var(--serif);font-size:2.2rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.strip .fig{display:flex;flex-direction:column;gap:.3rem;padding-bottom:.15rem}
.strip .fig .lbl{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.strip .fig .val{font-family:var(--serif);font-size:1.15rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.strip .cash .val.neg,.strip .fig .val.neg{color:var(--neg)}
.strip .fig .val.pos{color:var(--pos)}
.cols{display:grid;grid-template-columns:1fr 340px;gap:2.4rem;align-items:start}
.sect-title{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:0 0 1rem}

/* Money section bar — flat nav inside the workspace, never a drill */
.sec-bar{display:flex;gap:1.7rem;border-bottom:1px solid var(--line);margin:.1rem 0 1.9rem}
.sec{padding:.6rem 0;font-size:.9rem;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.sec:hover{color:var(--ink-2)}
.sec.on{color:var(--ink);border-bottom-color:var(--gold)}
.sec-cog{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 0 .55rem;color:var(--ink-3);font-size:.82rem;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.sec-cog svg{width:15px;height:15px}
.sec-cog:hover{color:var(--ink-2)}
.sec-cog.on{color:var(--ink);border-bottom-color:var(--gold)}
.sec-intro{color:var(--ink-2);font-size:.9rem;line-height:1.65;max-width:60ch;margin:1.4rem 0 1.7rem;
  padding-left:.9rem;border-left:2px solid var(--line-2)}

/* Journal — every entry compresses to one line and expands to the full ledger on demand. */
.jrn-count{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Search bar */
.jrn-tools{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 1.1rem}
.jrn-search{flex:1;max-width:26rem;background:var(--surface);border:1.5px solid var(--line-2);border-radius:2px;
  padding:.55rem .75rem;font-size:.86rem;color:var(--ink);font-family:inherit;
  box-shadow:inset 0 1px 2px rgba(13,17,23,.05)}
.jrn-search:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 1px 2px rgba(13,17,23,.05),0 0 0 3px rgba(168,128,31,.12)}
.jrn-search::placeholder{color:var(--ink-3)}
.jrn-tools-n{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Month grouping — a sticky heading so the reader always knows where they are in a long journal. */
.jrn-month{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.55rem 0 .5rem .7rem;margin-top:1.1rem;background:var(--canvas);border-bottom:1px solid var(--line-2);
  box-shadow:inset 3px 0 0 var(--gold);
  font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.jrn-month:first-of-type{margin-top:0}
.jrn-month-n{font-weight:600;letter-spacing:.04em;color:var(--ink-3);text-transform:none}
/* Collapsed entry line */
.jrn-item{border-bottom:1px solid var(--line)}
.jrn-item.hit{background:rgba(200,154,62,.06)}
.jrn-row{display:grid;grid-template-columns:1.1rem 3.6rem 1fr auto auto .7rem;align-items:baseline;gap:.85rem;
  width:100%;padding:.62rem .2rem;background:none;border:none;text-align:left;cursor:pointer;font-family:inherit}
.jrn-row:hover{background:var(--line)}
.jrn-r-chev{color:var(--ink-3);font-size:.7rem;line-height:1;align-self:center}
.jrn-r-date{font-size:.76rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.jrn-r-desc{min-width:0;display:flex;flex-direction:column;gap:.12rem}
.jrn-r-what{font-size:.9rem;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrn-r-flow{font-size:.72rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrn-arr{color:var(--gold);font-weight:700;padding:0 .3rem}         /* gold = the money moved */
.jrn-r-run{font-family:var(--serif);font-size:.86rem;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.jrn-r-amt{font-family:var(--serif);font-size:.98rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.jrn-r-amt.in{color:var(--pos)}                                     /* account register: grew this account */
.jrn-r-amt.out{color:var(--neg)}                                    /* account register: shrank it */
.jrn-r-dot{align-self:center;width:7px;height:7px;border-radius:50%;background:var(--pos)}
.jrn-r-dot.bad{background:var(--neg)}
.jrn-item.open .jrn-r-chev{color:var(--ink)}
/* Expanded ledger — a white panel that lifts off the desk so an open entry never blends into the rows */
.jrn-detail{background:var(--surface);border:1px solid var(--line-2);border-radius:3px;
  margin:.1rem .1rem .6rem;box-shadow:0 6px 18px rgba(13,17,23,.08)}
.jrn-lines thead th{background:var(--head-bg)}
.jrn-detail-meta{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;font-size:.71rem;color:var(--ink-3);
  padding:.6rem 1.1rem .75rem;border-top:1px solid var(--line)}
.jrn-meta-ref{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.jrn-lines{width:100%;border-collapse:collapse}
.jrn-lines th{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:.7rem 1.1rem .5rem}
.jrn-lines th.num{text-align:right}
.jrn-lines td{padding:.55rem 1.1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
.jrn-lines td.num{text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.jrn-acct-code{color:var(--ink-3);font-size:.76rem;margin-right:.55rem;font-variant-numeric:tabular-nums}
.jrn-foot td{border-top:2px solid var(--line-2);font-weight:600;color:var(--ink);font-size:.82rem}
.jrn-bal{display:inline-flex;align-items:center;gap:.35rem;font-size:.73rem;color:var(--pos);font-weight:600}
.jrn-evid{font-size:.71rem;color:var(--ink-3);padding:.7rem 1.1rem;border-top:1px solid var(--line);background:var(--canvas)}
.jrn-evid code{font-family:ui-monospace,monospace;color:var(--ink-2)}
/* Account filter — visible and removable, never a silent narrowing of the record. */
.jrn-filter{display:flex;align-items:center;gap:.7rem;padding:.5rem 0 .8rem}
.jrn-filter-k{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.jrn-filter-v{font-size:.9rem;color:var(--ink);font-weight:500}
.jrn-filter-x{font-size:.74rem;font-weight:600;color:var(--ink-3);text-decoration:none}
.jrn-filter-x:hover{color:var(--gold-ink)}
/* The line you drilled on, and the entry you were sent to. */
.jrn-lines tr.jrn-line-hit td{background:rgba(200,154,62,.10);box-shadow:inset 2px 0 0 var(--gold)}
.jrn-entry.hit{border-color:var(--gold)}

/* Record form — the one road into the ledger */
.rec{max-width:720px}
.rec-field{margin-bottom:1.2rem}
.rec-field label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem}
.rec-in{width:100%;border:1px solid var(--line-2);border-radius:2px;padding:.55rem .65rem;font-size:.92rem;color:var(--ink);background:var(--surface);font-family:inherit}
.rec-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,154,62,.12)}
.rec-row2{display:flex;gap:1.2rem}
.rec-row2>.rec-field{flex:1}
.rec-lines{width:100%;border-collapse:collapse;margin:.3rem 0 .2rem}
.rec-lines th{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 .5rem .5rem}
.rec-lines th.num{text-align:right}
.rec-lines td{padding:.4rem .5rem;border-top:1px solid var(--line);vertical-align:middle}
.rec-lines td.num{text-align:right}
.rec-lines td:first-child{padding-left:0}
.rec-acct{width:100%;border:1px solid var(--line-2);border-radius:4px;padding:.45rem .5rem;font-size:.88rem;color:var(--ink);background:var(--surface);font-family:inherit}
.rec-amt{width:120px;border:1px solid var(--line-2);border-radius:4px;padding:.45rem .5rem;font-size:.9rem;color:var(--ink);background:var(--surface);text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums}
.rec-amt:focus,.rec-acct:focus{outline:none;border-color:var(--gold)}
.rec-del{border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .4rem}
.rec-del:hover{color:var(--bad)}
.rec-addline{border:1px dashed var(--line-2);background:none;color:var(--ink-2);border-radius:4px;padding:.45rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;margin-top:.3rem}
.rec-addline:hover{border-color:var(--gold);color:var(--gold-ink)}
.rec-tote{display:flex;justify-content:flex-end;gap:2.2rem;padding:1rem 0;border-top:2px solid var(--line-2);margin-top:.4rem}
.rec-tote .t{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rec-tote .v{font-family:var(--serif);font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.rec-status{font-size:.8rem;font-weight:600;margin-top:.5rem}
.rec-status.ok{color:var(--pos)}
.rec-status.off{color:var(--bad)}
.rec-actions{display:flex;gap:.8rem;align-items:center;margin-top:1.6rem}
.rec-post{border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-ink);border-radius:2px;padding:.6rem 1.4rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .12s}
.rec-post:hover{filter:brightness(1.12)}
.rec-post:disabled{opacity:.4;cursor:not-allowed}
.rec-cancel{color:var(--ink-3);font-size:.86rem;font-weight:600}
.rec-err{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);border-radius:5px;padding:.7rem .9rem;font-size:.84rem;margin-bottom:1.2rem}
.rec-err ul{margin:.3rem 0 0;padding-left:1.1rem}
.rec-done{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);border-radius:6px;padding:1rem 1.1rem;font-size:.9rem}
/* Inline categorize row — an unmatched bank line sorted to a GL account. A flat inset strip, not a bubble. */
.rec-cat>td{background:var(--head-bg);border-bottom:1px solid var(--line-2);padding:.7rem 1rem}
.rec-cat-form{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rec-cat-lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rec-cat-form select,.rec-cat-form input{border:1px solid var(--line-2);border-radius:2px;padding:.34rem .5rem;font:inherit;font-size:.86rem;color:var(--ink);background:var(--surface);min-width:0}
.rec-cat-form select:focus,.rec-cat-form input:focus{outline:none;border-color:var(--gold)}
/* Close-the-books band — appears when every bank line is accounted for. Flat, gold left rule, action on the right. */
.rec-close{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin:0 0 1.6rem;padding:1.1rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold)}
.rec-close-h{font-size:.95rem;font-weight:700;color:var(--ink)}
.rec-close-sub{font-size:.84rem;color:var(--ink-2);line-height:1.5;margin-top:.2rem;max-width:64ch}

/* Smart suggestion — a repeat detected at entry. Flat, gold left-rule, not a bubble. */
.suggest{margin:0 0 1.8rem;padding:1.1rem 1.3rem;border-left:3px solid var(--gold);
  background:var(--surface);border:1px solid var(--line);border-left-width:3px}
.suggest-head{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.35rem}
.suggest-sub{font-size:.9rem;color:var(--ink-2);line-height:1.5;max-width:66ch}
.suggest-form{display:flex;gap:1.6rem;align-items:flex-end;flex-wrap:wrap;margin-top:1.1rem}

/* Subscription status/due tags — flat, sharp, tiny */
.sub-tag{display:inline-block;margin-top:.25rem;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.1rem .4rem;border-radius:2px}
.sub-tag.due{color:var(--gold-ink);border:1px solid var(--line-2)}
.sub-tag.over{color:var(--neg);border:1px solid var(--neg)}
.sub-tag.paused{color:var(--ink-3);border:1px solid var(--line-2)}
.sub-paused{opacity:.6}
.sub-acts{display:flex;gap:.6rem;align-items:center;justify-content:flex-end}
.sub-tag.trial{color:var(--gold-ink);border:1px solid var(--gold-ink)}
.sub-tags{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
/* renewal calendar — one bar per upcoming renewal, placed by date, height by amount */
.sub-cal .sub-bar{fill:var(--flow-out);transition:fill .12s}
.sub-cal .sub-bar:hover{fill:var(--gold)}
.sub-cal-tick{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.sub-months{position:relative;height:1rem;margin-top:.25rem;font-size:.62rem;color:var(--ink-3)}
.sub-months span{position:absolute;transform:translateX(-50%);white-space:nowrap}
/* list bits */
.sub-cyc{font-size:.66rem;color:var(--ink-3);margin-left:.1rem}
.sub-when{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.sub-cancel{color:var(--ink-3)}
.sub-cancel:hover{color:var(--neg)}
/* trial toggle in the add form */
.sub-trial-row{display:flex;align-items:center;gap:.5rem;margin-top:.85rem;font-size:.84rem;color:var(--ink-2)}
.sub-trial-when{color:var(--ink-3)}
.sub-trial-date{width:auto;max-width:11rem}
/* AP aging strip — one segment per bucket, width by amount, colour escalating with age; click to filter */
.ap-aging{display:flex;gap:2px;margin:1rem 0 1.1rem;height:2.6rem;border-radius:3px;overflow:hidden}
.ap-seg{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.05rem;
  min-width:5.5rem;padding:0 .7rem;border:none;cursor:pointer;color:#fff;text-align:left;overflow:hidden;white-space:nowrap;
  transition:filter .12s,box-shadow .12s}
.ap-seg:hover{filter:brightness(1.06)}
.ap-seg.on{box-shadow:inset 0 -3px 0 rgba(255,255,255,.85)}
.ap-seg-l{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.9}
.ap-seg-v{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.ap-seg.current{background:var(--ink-3)}
.ap-seg.d1{background:var(--warn)}
.ap-seg.d2{background:color-mix(in srgb, var(--warn), var(--bad) 45%)}
.ap-seg.d3{background:color-mix(in srgb, var(--warn), var(--bad) 75%)}
.ap-seg.d4{background:var(--bad)}
/* overdue bars on the due-date timeline */
.sub-cal .sub-bar.od{fill:var(--bad)}
.bud-legend .lg-od::before{background:var(--bad)}
/* aging filter chip */
.ap-filter{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--ink-3);margin-top:.3rem}
.ap-filter-x{background:none;border:none;color:var(--gold-ink);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
/* bill drill drawer body */
.bd-body{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.bd-row{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.bd-k{color:var(--ink-3)}
.bd-v{color:var(--ink);font-variant-numeric:tabular-nums}
.bd-pay{display:flex;gap:.6rem;align-items:center;margin-top:.7rem}
.bd-pay .ein{width:8rem;text-align:right}
/* Accounts statement — who-owns-the-assets bar + grouped chart with subtotals */
.stmt-bar{display:flex;gap:2px;height:2.4rem;border-radius:3px;overflow:hidden;margin:.2rem 0 1.5rem}
.stmt-seg{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:0 .85rem;color:#fff;white-space:nowrap;overflow:hidden;min-width:6rem}
.stmt-seg span:first-child{text-transform:uppercase;letter-spacing:.04em;opacity:.92;font-size:.6rem;font-weight:700}
.stmt-seg span:last-child{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.stmt-seg.liab{background:var(--flow-out)}
.stmt-seg.eq{background:var(--flow-in)}
.stmt-grp{margin-bottom:1.4rem}
.stmt-grp-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem .85rem;background:var(--head-bg);border-left:3px solid var(--gold);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.stmt-grp-h .money{font-family:var(--serif);font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.stmt-table{margin-top:.15rem}
.stmt-code{font-variant-numeric:tabular-nums;color:var(--ink-3);width:4rem}
.stmt-name{color:var(--ink-2)}

/* Money entry — FLAT. No card, no box, no shadow, no bubble. A titled band with hairline rules and
   underline fields. Sharp corners everywhere. */
.mform{margin:0 0 2.4rem}
.mform-title{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:0;
  padding-bottom:.9rem;border-bottom:1px solid var(--line-2)}
.mform-grid{display:flex;gap:2rem;align-items:flex-end;flex-wrap:wrap;padding-top:1.4rem}
.mform-field{display:flex;flex-direction:column;gap:.55rem}
.mform-field>label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mform-field.grow{flex:1 1 190px;min-width:150px}
.mform-field.amt{width:140px}
/* underline field — bottom rule only, no box */
.mfield{border:none;border-bottom:1.5px solid var(--line-2);border-radius:0;background:transparent;
  padding:.35rem .1rem;font-size:.95rem;color:var(--ink);font-family:inherit;width:100%;transition:border-color .12s}
.mfield:focus{outline:none;border-bottom-color:var(--gold)}
.mfield:disabled{color:var(--ink-2);border-bottom-style:dotted}
.mfield-amt{font-family:var(--serif);font-size:1.5rem;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.mform-actions{display:flex;gap:1.1rem;align-items:center;margin-left:auto;padding-bottom:.1rem}
.btn-primary{border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-ink);border-radius:2px;
  padding:.6rem 1.5rem;font-size:.86rem;font-weight:700;letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:filter .12s}
.btn-primary:hover{filter:brightness(1.12)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,128,31,.35)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:none;border:none;color:var(--ink-3);font-size:.85rem;font-weight:600;cursor:pointer;padding:.5rem 0}
.btn-ghost:hover{color:var(--ink)}
.mform-err{color:var(--neg);font-size:.85rem;margin-top:1rem}
/* New-vendor inline — a hairline-separated row, flat */
.mform-inline{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-2);
  display:flex;gap:2rem;align-items:flex-end;flex-wrap:wrap}
.mform-inline-label{width:100%;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:-.4rem}

/* Search-first picker — search pinned top, list scrolls, add-new floats at the bottom */
.picker{position:relative}
.picker-field{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:transparent;border:none;border-bottom:1.5px solid var(--line-2);border-radius:0;
  padding:.35rem .1rem;font-size:.95rem;color:var(--ink);cursor:pointer;text-align:left}
.picker.open .picker-field{border-bottom-color:var(--gold)}
.picker-ph{color:var(--ink-3)}
.picker-chev{width:1rem;height:1rem;color:var(--ink-3);flex:0 0 auto;transition:transform .15s}
.picker.open .picker-chev{transform:rotate(180deg)}
.picker-backdrop{position:fixed;inset:0;z-index:40}
.picker-panel{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:41;
  background:var(--surface);border:1px solid var(--line-2);border-radius:2px;
  box-shadow:0 10px 24px rgba(20,18,12,.12);display:flex;flex-direction:column;max-height:20rem;overflow:hidden}
.picker-search{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.picker-search svg{width:1rem;height:1rem;color:var(--ink-3);flex:0 0 auto}
.picker-search-in{flex:1;border:none;outline:none;background:none;font-size:.9rem;color:var(--ink)}
.picker-list{overflow-y:auto;flex:1;padding:.25rem 0}
.picker-item{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:.45rem .8rem;font-size:.9rem;color:var(--ink)}
.picker-item:hover{background:var(--canvas)}
/* Keyboard cursor. Mouseenter sets the same index, so hover and arrow-keys share one highlight
   concept — a gold left rule that reads differently from .sel (the value already chosen). */
.picker-item.hi{background:var(--canvas);box-shadow:inset 2px 0 0 var(--gold)}
.picker-item.sel{background:var(--gold-soft);font-weight:600}
.picker-item-sub{font-size:.76rem;color:var(--ink-3);margin-top:.05rem}
.picker-empty{padding:.7rem .8rem;font-size:.85rem;color:var(--ink-3)}
.picker-add{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;cursor:pointer;
  border:none;border-top:1px solid var(--line);background:var(--canvas);
  padding:.6rem .8rem;font-size:.88rem;font-weight:700;color:var(--gold-ink)}
.picker-add:hover{background:var(--gold-soft)}
.picker-add-plus{font-size:1.05rem;line-height:1}

/* Inline "add a new ___" revealed inside a picker — add without leaving the flow */
.inline-add{margin-top:.9rem;border:1px solid var(--line-2);border-radius:6px;padding:.9rem 1rem;background:var(--canvas)}
.inline-add-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700;margin-bottom:.6rem}
.inline-add-grid{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end}
.rec-del-text{background:none;border:none;color:var(--ink-3);font-size:.85rem;font-weight:600;cursor:pointer;padding:.4rem}

/* Pre-post review — the deterministic guardrail */
.rec-review{margin-top:1.4rem;border:1px solid var(--line-2);border-radius:8px;padding:1.1rem 1.2rem;background:var(--canvas)}
.rr-head{font-size:.82rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.8rem}
.rr-impact{width:100%;border-collapse:collapse;font-size:.9rem}
.rr-impact th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600;padding:.2rem .5rem .4rem;border-bottom:1px solid var(--line)}
.rr-impact th.num,.rr-impact td.num{text-align:right}
.rr-impact td{padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.rr-arrow{color:var(--ink-3);text-align:center;width:1.6rem}
.rr-neg{color:var(--neg)}
.rr-warns{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.rr-warn{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.35;border-radius:6px;padding:.6rem .8rem}
.rr-warn .rr-ico{flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;margin-top:.05rem}
.rr-warn.caution{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.rr-warn.caution .rr-ico{background:var(--warn)}
.rr-warn.notice{background:rgba(30,41,59,.06);border:1px solid var(--line-2);color:var(--ink-2)}
.rr-warn.notice .rr-ico{background:#1e293b}
.rr-clean{margin-top:.9rem;font-size:.86rem;color:var(--pos);font-weight:600}
.rec-review .rec-cancel{background:none;border:none;cursor:pointer}

/* Chart-of-accounts editor */
.acct-right{display:flex;align-items:center;gap:1.1rem}
.acct-kind{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:.12rem .4rem}
.acct.inactive{opacity:.5}
.acct-actions{display:flex;gap:.7rem;align-items:center;min-width:112px;justify-content:flex-end}
.acct-act{border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:.76rem;font-weight:600;padding:0}
.acct-act:hover{color:var(--gold-ink)}
.acct-rename{border:1px solid var(--line-2);border-radius:2px;padding:.3rem .45rem;font-size:.88rem;font-family:inherit;color:var(--ink)}
.acct-rename:focus{outline:none;border-color:var(--gold)}
.acct-add{border:1px solid var(--line-2);border-radius:2px;padding:1.1rem 1.2rem;margin-top:1.2rem;background:var(--surface)}
.acct-add-grid{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.acct-add-grid .rec-field{margin-bottom:0}
.acct-add-grid .code{width:90px}
.acct-add-grid .name{flex:1;min-width:160px}
.acct-add-grid .kind{width:150px}
.acct-addbtn{border:1px solid var(--line-2);background:none;color:var(--ink-2);border-radius:2px;padding:.55rem 1rem;font-size:.84rem;font-weight:600;cursor:pointer;margin-top:1.2rem}
.acct-addbtn:hover{border-color:var(--gold);color:var(--gold-ink)}

/* Module configuration — Settings / Blueprints / Imports */
.cfg-nav{display:flex;gap:1.7rem;border-bottom:1px solid var(--line);margin:.1rem 0 1.7rem;flex-wrap:wrap}
.cfg-ctx{padding:.6rem 0;font-size:.88rem;font-weight:600;color:var(--ink-3);border:none;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-family:inherit;transition:.15s}
.cfg-ctx:hover{color:var(--ink-2)}
.cfg-ctx.on{color:var(--ink);border-bottom-color:var(--gold)}
.cfg-bp-title{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:0 0 .5rem}
.cfg-bp-sub{color:var(--ink-2);font-size:.88rem;line-height:1.6;margin:0 0 1.4rem;max-width:60ch;
  padding-left:.9rem;border-left:2px solid var(--line-2)}
.cfg-empty{color:var(--ink-3);font-size:.9rem;line-height:1.6;padding:1.6rem 0;max-width:56ch}

/* Ledger table — the books */
.ledger{width:100%;border-collapse:collapse}
.ledger th{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 1.4rem .75rem 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
.ledger th.num{text-align:right}
.ledger td{padding:.9rem 1.4rem .9rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.ledger td.num{text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.ledger th:last-child,.ledger td:last-child{padding-right:1rem}
/* Outer gutter so rows aren't flush to the edges — and so the over/overdue left-edge accent has room to
   sit beside the first column instead of on top of its text. */
.ledger th:first-child,.ledger td:first-child{padding-left:1rem}
.led-date{font-size:.8rem;color:var(--ink-3);white-space:nowrap;padding-right:1.6rem}
.led-desc{font-size:.93rem;color:var(--ink)}
.led-entry{font-size:.74rem;color:var(--ink-3);margin-top:.25rem}
.led-in{color:var(--pos)}
.ledger-note{color:var(--ink-3);font-size:.82rem;padding-top:1rem}
/* Bills — per-row partial pay: a compact amount box (pre-filled to Remaining) + the Pay action */
.pay-cell{white-space:nowrap}
.pay-amt{width:82px;text-align:right;border:none;border-bottom:1.5px solid var(--line-2);border-radius:0;
  background:transparent;font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:.92rem;
  color:var(--ink);padding:.2rem .1rem;margin-right:.7rem}
.pay-amt:focus{outline:none;border-bottom-color:var(--gold)}

/* Accounts side panel */
.acct-panel{border:none;border-top:1px solid var(--line-2);border-radius:0;background:none;padding:1rem 0 0}

/* ── "?" help flyout ── */
.help-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.help-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-3);display:grid;place-items:center;font-size:.82rem;font-weight:700;cursor:pointer;transition:.15s;user-select:none}
.help-btn:hover{border-color:var(--gold);color:var(--gold-ink)}
.help-scrim{position:fixed;inset:0;background:rgba(13,17,23,.3);opacity:0;visibility:hidden;transition:opacity .2s;z-index:60}
.help-flyout{position:fixed;top:0;right:0;bottom:0;width:min(390px,90vw);background:#fff;border-left:1px solid var(--line);box-shadow:-14px 0 44px rgba(13,17,23,.12);transform:translateX(100%);transition:transform .25s ease;z-index:61;display:flex;flex-direction:column}
.help-toggle:checked ~ .help-scrim{opacity:1;visibility:visible}
.help-toggle:checked ~ .help-flyout{transform:none}
.help-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.help-head .t{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.help-close{font-size:1.4rem;color:var(--ink-3);cursor:pointer;line-height:1;user-select:none}
.help-body{padding:1.4rem;overflow:auto;color:var(--ink-2);font-size:.92rem;line-height:1.65}
.help-body p{margin:0 0 1.1rem}
.help-q{display:block;padding:.75rem 0;border-top:1px solid var(--line);color:var(--ink);font-size:.9rem;font-weight:500;cursor:pointer}
.help-q:first-of-type{border-top:1px solid var(--line);margin-top:.4rem}
.help-lc{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--gold-ink);font-weight:600;font-size:.88rem}

@media(max-width:820px){ .cols{grid-template-columns:1fr} }

/* ── The dock — the last line of shadow ───────────────────────────── */
/* ── The bottom band ──────────────────────────────────────────────────────────
   A demarcation rule closes the work area, then a three-track row: context on the
   left, the dock centred, position on the right. The flanks are OUTLETS the page
   fills (SectionOutlet) — never layout-owned, because the layout sits outside the
   page's interactive island and anything live rendered here would go stale. */
.app-foot{
  flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.2rem;padding:.5rem 2rem .6rem;border-top:1px solid var(--line-2);background:var(--canvas);
}
.foot-l{justify-self:start;min-width:0}
.foot-r{justify-self:end;min-width:0;text-align:right}
.foot-l,.foot-r{display:flex;align-items:center;gap:1.4rem;overflow:hidden;white-space:nowrap}
.foot-item{display:flex;align-items:baseline;gap:.45rem}
.foot-k{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot-v{font-family:var(--serif);font-size:1.08rem;color:var(--ink);font-variant-numeric:tabular-nums}
.foot-v.neg{color:var(--neg)}
.foot-v.mute{color:var(--ink-3)}

/* The dock sits on LUX Blue — the same surface as the masthead, so the band reads as one piece of
   brand chrome top and bottom rather than two unrelated dark things. */
.dock{
  display:flex;align-items:center;gap:.3rem;
  background:#1e293b;border:1px solid rgba(232,212,168,.18);
  border-radius:15px;padding:.45rem;
  box-shadow:0 6px 18px rgba(13,17,23,.18);   /* seated in the band now, not floating over content */
  z-index:50;
}

/* Each module carries its own metal — quiet wayfinding, so over time you reach for the tone as well
   as the position. FOUR METALS, not four shades of one gold: champagne, gold, copper, brass. That
   framing is what makes them tell apart while staying in the brand's warm family.

   Two constraints, both learned by measuring rather than looking:

   1. DON'T RAMP BY VALUE. On a dark ground a deeper gold has LESS contrast, so a pale->bronze ramp
      put the last item at 2.31:1 against LUX Blue — unreadable, and still only 4.19:1 when active.
   2. DON'T SPEND THE BUDGET ON DIMMING. Holding all four to one luminance band to protect contrast
      made them nearly identical — gold is a narrow hue range and they collapsed into each other.
      Raising inactive from 72% to 88% bought back the headroom to separate them properly.

   All four clear 4.5:1 AA even dimmed (9.27 / 7.18 / 5.05 / 5.41). Keep a fifth module inside that
   floor, and separate it by HUE, not by going darker. */
.dock-app{
  --dg:#f2e3c0;                                /* fallback: champagne */
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.55rem 1.05rem .5rem;border-radius:11px;
  color:color-mix(in srgb, var(--dg) 88%, transparent);
  font-size:.66rem;font-weight:600;letter-spacing:.05em;
  transition:background .16s,color .16s;
}
.dock-app.d-today  {--dg:#f2e3c0}              /* champagne — 9.27:1 inactive */
.dock-app.d-work   {--dg:#e8a838}              /* amber     — 6.0:1 */
.dock-app.d-customers{--dg:#e9b3a4}            /* rose gold — 7.4:1 */
.dock-app.d-money  {--dg:#f2c33f}              /* gold      — 7.18:1 */
.dock-app.d-people {--dg:#e08a4a}              /* copper    — 5.05:1 */
.dock-app.d-things {--dg:#cbbf57}              /* brass     — 5.41:1 */

.dock-app:hover{background:color-mix(in srgb, var(--dg) 10%, transparent);color:var(--dg)}
.dock-app.active{background:color-mix(in srgb, var(--dg) 18%, transparent);color:var(--dg)}
.dock-app svg{width:19px;height:19px}
.dock-app.active::after{
  content:"";position:absolute;bottom:-.28rem;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--dg);
}

@media(max-width:900px){
  .kpi{grid-column:span 6}
  .q,.river{grid-column:span 12}
  .doors{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   DENSE WORKSPACE — the money screens
   ----------------------------------------------------------------------------
   These are the high-volume, keyboard-driven surfaces: enter forty bills, pay
   them, read the position at a glance. The reference is a trading blotter or an
   IDE, NOT a marketing page — information per screen is the point, and prose
   that explains the screen belongs in help rather than permanently occupying
   the top of it. Deliberately NOT responsive: this is the desktop surface.
   ============================================================================ */

/* ============================================================================
   MONEY OVERVIEW — redesign (/money/next)
   ----------------------------------------------------------------------------
   COLOUR RULE: every colour names a meaning. Gold = you can act on this.
   Rust = money left the business. Green = money came in. Nothing decorative.
   The old page read flat because nothing on it was clickable — inert elements
   have no reason to differ. Affordance first; colour follows function.
   ============================================================================ */

/* THE DARK ANCHOR. The workspace stays light, but the page needs one element with real value
   contrast or the cream reads as absence rather than as a choice — the dock was the only thing
   on the page doing that, which is why it looked designed and everything above it didn't.
   A masthead, not a theme change: it's the summary band, not the work area. */
/* The six metrics spread across the FULL width — packed into the left two-thirds with an empty
   right third read as an accident rather than a layout. It's an instrument strip; it should span. */
.mx-hero{
  /* THIS IS A DARK SURFACE INSIDE A LIGHT PAGE, so it re-declares the tokens whose values were
     tuned for light ground. Without this, children inherit the page palette and land at ~2.6:1 on
     navy — the secondary labels and the negative figure were both effectively unreadable while the
     one label with an explicit colour (Cash on hand, LUX Gold, 10:1) looked fine. Fix the surface,
     not each selector, or the next element added here inherits the same wrong values. */
  --ink-3:#9fb0c6;
  --ink-2:#c6d0dd;
  --flow-out:#ff7f5c;        /* the dark-theme flow values, because this ground IS dark */
  --flow-in:#3fd8a0;
  --pos:#3fd8a0;
  --neg:#ff7f5c;
  display:flex;align-items:flex-end;gap:2rem;background:var(--hero-bg);
  padding:1.4rem 1.7rem 1.3rem;border-top:2px solid var(--gold);margin-bottom:1.5rem}
.mx-hero .lbl{color:var(--hero-ink-3)}
.mx-hero .val{color:var(--hero-ink)}
.mx-cash .lbl{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.mx-cash .val{font-family:var(--serif);font-size:2.2rem;line-height:1.15;margin-top:.3rem}
.mx-cash .val.neg{color:var(--flow-out)}
.mx-figs{display:flex;align-items:flex-end;justify-content:space-between;
  flex:1;gap:1.4rem;padding-bottom:.25rem}
.mx-fig{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;padding-bottom:2px;
  border-bottom:2px solid transparent;transition:border-color .12s}
.mx-fig .lbl{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mx-fig .val{font-family:var(--serif);font-size:1.05rem;font-variant-numeric:tabular-nums}
.mx-fig .val.neg{color:var(--flow-out)}
.mx-fig .val.pos{color:var(--flow-in)}
a.mx-fig:hover{border-bottom-color:var(--gold)}          /* gold = this goes somewhere */
a.mx-fig:hover .lbl{color:var(--gold-ink)}
.mx-fig.static{cursor:default}

.mx-cols{display:grid;grid-template-columns:1fr 340px;gap:2.6rem;padding-top:1.5rem;align-items:start}
.mx-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.7rem}
.mx-head .sect-title{margin:0}
.mx-more{font-size:.74rem;font-weight:600;color:var(--ink-3);text-decoration:none}
.mx-more:hover{color:var(--gold-ink)}

/* Activity — narrative rows. The left rule carries the direction; it's the page's rhythm. */
/* Direction needs AREA, not a hairline. A 3px sliver has too little surface to register on cream
   and vanishes entirely on near-black. So: a 5px bar, a faint wash across the whole row, and the
   amount itself carries the colour — the amount is where the eye already goes, so that's where a
   meaning is cheapest to read. */
.mx-row{display:grid;grid-template-columns:58px 1fr auto 108px;gap:1.1rem;align-items:baseline;
  padding:.48rem .9rem .48rem .85rem;border-bottom:1px solid var(--line);text-decoration:none;
  box-shadow:inset 5px 0 0 transparent;transition:background .1s,box-shadow .1s}
.mx-row.out{box-shadow:inset 5px 0 0 var(--flow-out);background:var(--flow-out-wash)}
.mx-row.in{box-shadow:inset 5px 0 0 var(--flow-in);background:var(--flow-in-wash)}
.mx-row.out .mx-amt{color:var(--flow-out)}
.mx-row.in  .mx-amt{color:var(--flow-in)}
.mx-row:hover{box-shadow:inset 5px 0 0 var(--gold)}
.mx-row.out:hover,.mx-row.in:hover{background:var(--surface)}
.mx-row:hover .mx-desc{color:var(--gold-ink)}
.mx-date{font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.mx-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.mx-desc{font-size:.93rem;color:var(--ink);font-weight:500}
.mx-move{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.76rem;color:var(--ink-3)}
.mx-leg{display:inline-flex;align-items:center;gap:.18rem}
.mx-acct{color:var(--ink-2)}
.mx-up{color:var(--flow-in);font-weight:700}
.mx-dn{color:var(--flow-out);font-weight:700}
.mx-amt{font-family:var(--serif);font-size:.98rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-run{font-family:var(--serif);font-size:.9rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}

/* Position — a different SHAPE from the activity list, not a mirror of it. */
.mx-position{border-left:1px solid var(--line-2);padding-left:1.6rem}
.mx-grp{margin-bottom:1.15rem}
.mx-grp-h{font-size:.57rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.mx-acctrow{display:grid;grid-template-columns:38px 1fr auto;gap:.6rem;align-items:baseline;
  padding:.34rem 0;text-decoration:none;border-bottom:1px solid var(--line)}
.mx-acctrow:hover .mx-acctname{color:var(--gold-ink)}
.mx-acctcode{font-size:.66rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mx-acctname{font-size:.83rem;color:var(--ink-2)}
.mx-acctbal{font-family:var(--serif);font-size:.85rem;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.mx-grp-t{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0 0;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mx-grp-t .money{font-family:var(--serif);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink)}
/* An expandable ROW, not a stray line of faint text — it has to read as "these are available",
   never as "these were omitted". Full width, its own rule, and a chevron that turns. */
.mx-idle-toggle{display:flex;align-items:center;gap:.5rem;width:100%;
  background:none;border:none;border-top:1px solid var(--line-2);
  padding:.55rem 0 .5rem;margin-top:.2rem;cursor:pointer;text-align:left;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.mx-idle-toggle:hover{color:var(--gold-ink)}
.mx-idle-chev{flex:0 0 auto;width:.85rem;height:.85rem;transition:transform .15s}
.mx-idle-toggle.open .mx-idle-chev{transform:rotate(90deg)}
.mx-idle-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:500}
.mx-acctrow.idle .mx-acctname,.mx-acctrow.idle .mx-acctbal{color:var(--ink-3)}

/* Display money figure — dollars full size, cents half and raised to the cap line. The decimal point
   is dropped; the size change is the separator. Hero numbers only — ledgers align on the decimal and
   must keep it. See MoneyFigure.razor. */
.mfig{white-space:nowrap;font-variant-numeric:tabular-nums}
.mfig-c{
  font-size:.5em;line-height:1;vertical-align:top;
  margin-left:.08em;letter-spacing:.02em;
  /* vertical-align:top parks it at the LINE box top, which sits above the glyphs by half the leading.
     This nudge drops it back onto the dollars' cap line. Measured against the ranged glyph box, not
     eyeballed — .16em landed ~2px low at 35px, .10em sits flush. */
  position:relative;top:.10em;
}

/* Position strip — numbers where the explanatory paragraph used to be. */
.wstrip{display:flex;align-items:stretch;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);margin:0 0 .2rem}
.wstat{padding:.5rem 1.5rem .55rem;border-right:1px solid var(--line)}
.wstat:first-child{padding-left:0}
.wstat:last-child{border-right:none}
.wstat-l{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wstat-v{font-family:var(--serif);font-size:1.05rem;line-height:1.2;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:.15rem;white-space:nowrap}
.wstat-v.neg{color:var(--neg)}
.wstat-v.mute{color:var(--ink-3)}

/* Entry row — one line, tab across, Enter commits. Sized to the data, not to a thumb. */
.erow{display:grid;gap:1rem;align-items:end;padding:.85rem 0 .95rem;border-bottom:1px solid var(--line-2)}
.erow-bill{grid-template-columns:1.4fr 1.3fr 108px 132px 1.6fr auto}
.ecell{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ecell>label{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ein{width:100%;border:none;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;
  padding:.28rem 0;font-size:.88rem;color:var(--ink);font-family:inherit}
.ein:focus{outline:none;border-bottom-color:var(--gold)}
.ein.amt{text-align:right;font-family:var(--serif);font-size:1rem;font-variant-numeric:tabular-nums}
.ein::placeholder{color:var(--ink-3)}
/* the shared picker, compacted to entry-row scale */
.erow .picker-field{padding:.28rem 0;font-size:.88rem}
.erow-act{display:flex;align-items:center;gap:.8rem;padding-bottom:.05rem}

/* Keyboard legend — the shortcuts, not a paragraph about what a bill is. */
.kbd-hint{font-size:.8rem;color:var(--ink-3);display:flex;gap:1.15rem;align-items:center;white-space:nowrap}
.kbd-hint kbd{font-family:inherit;font-size:.76rem;font-weight:600;border:1px solid var(--line-2);
  border-radius:3px;padding:.06rem .38rem;color:var(--ink-2);background:var(--surface)}

/* Dense ledger — tighter rows, sortable heads, a real total line. */
.ledger.dense th{padding-bottom:.5rem}
/* Frozen header. Only works because .app-canvas is a real scroll container — the column names stay
   put while a long ledger runs under them, which is the whole point of a blotter.
   The negative offset cancels the canvas's top padding: sticky resolves against the scrollport's
   CONTENT edge, so top:0 would park the header a padding's-width down and leave a sliver of moving
   content visible above it. Measured, not guessed — pins flush at the canvas edge. */
.ledger.dense thead th{position:sticky;top:calc(-1 * var(--canvas-pad-t));background:var(--canvas);z-index:5}
.ledger.dense thead th::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:var(--line-2)}
.ledger.dense td{padding:.45rem 1.4rem .45rem 0;vertical-align:middle}
.ledger.dense td:last-child{padding-right:1rem}
.ledger.dense th:first-child,.ledger.dense td:first-child{padding-left:1rem}
.ledger.dense .led-desc{font-size:.86rem}
.ledger.dense tbody tr:hover{background:var(--surface)}
.ledger th.sortable{cursor:pointer;user-select:none}
.ledger th.sortable:hover{color:var(--ink-2)}
.ledger th .sort-caret{color:var(--gold-ink);margin-left:.3rem;font-size:.6rem}
.ledger tfoot td{padding:.6rem 1.4rem .1rem 0;border-top:2px solid var(--line-2);border-bottom:none;
  font-weight:700;color:var(--ink);font-size:.8rem;letter-spacing:.02em}
.ledger tfoot td:last-child{padding-right:1rem}
.ledger tfoot td.num{font-family:var(--serif);font-size:.98rem;font-variant-numeric:tabular-nums}
.age{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--neg);
  margin-left:.45rem}
.due-soon{color:var(--ink-3)}
.row-od td{box-shadow:inset 2px 0 0 var(--neg)}

/* ============================================================================
   FOCUS VISIBILITY — WCAG 2.4.7
   ----------------------------------------------------------------------------
   This is a keyboard-first workspace, so the focus indicator is a primary
   affordance, not a fallback. Before this rule the stylesheet had exactly ONE
   :focus-visible declaration, eight outline:none suppressions, and fifteen
   focusable element types with nothing at all — the dock, the picker, every
   drillable row. Keyboard users were navigating blind wherever a component
   killed the UA default.

   :focus-visible, NOT :focus — a mouse click shouldn't leave a ring behind.
   Scoped under .app-shell so it outranks the component-level outline:none
   rules (both 0,2,0) by coming later in the file. Anything added after this
   inherits the ring for free.
   ============================================================================ */
.app-shell :focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}
/* Dark surfaces need the bright brand gold — the darkened text gold disappears
   against LUX Blue. Same reason the flow colours are tuned per ground. */
.dock :focus-visible,
.mx-hero :focus-visible{outline-color:#e8d4a8;outline-offset:3px}

/* Rows are full-width links; a tight ring reads better than one hugging the text. */
.mx-row:focus-visible,.mx-acctrow:focus-visible{outline-offset:-2px;border-radius:0}

/* ============================================================================
   WORKSPACE RAILS — opt-in, per page, invisible until you arrange
   ----------------------------------------------------------------------------
   The authored page keeps its width; rails take what's LEFT OVER. Below the
   width where a rail fits, it simply doesn't render — so an enabled rail can
   never squeeze the work area on a monitor we couldn't test. That's what makes
   this safe to ship without knowing anyone's setup.

   Note this is a breakpoint that ADDS desktop capability, not one that hedges a
   dense screen down for touch. The doctrine forbids the latter. Same mechanism,
   opposite intent — don't cite one to justify the other.
   ============================================================================ */
/* THE WORK AREA NEVER MOVES. Symmetric gutters with the main column pinned to the middle track, so
   its position on screen is identical whether you have no rails, one, or two. The earlier version
   sized the columns to whichever rails existed and centre-justified the result — which meant adding
   a left rail shoved the work area ~162px right. A drop-in is never allowed to displace the work;
   it gets leftover space or it doesn't appear. */
/* --rail-top lines the rails up with the section nav under the page title — the top of the page's
   own chrome, so the title owns the full width and everything below it reads as one band.
   Measured: 55px, the height of the title block above the nav. STOPGAP: it is an offset guessed at
   from one page and a page with a different header must override it. The structural answer is
   separating page header from page body so the grid begins below the header on its own — the same
   declared-regions work as moving existing panels into rails. */
.wpage{display:grid;grid-template-columns:1fr minmax(0,1180px) 1fr;gap:1.5rem;align-items:start;--rail-top:3.45rem}
.wmain{grid-column:2;min-width:0}
/* margin, not padding, so the tint starts at the widgets rather than at the grid top — the rails
   stay aligned with the section nav either way. */
.wrail{display:none;min-width:0;width:300px;margin-top:var(--rail-top);background:var(--rail-bg)}
.wrail-l{grid-column:1;justify-self:end}    /* hugs the work area rather than the window edge */
.wrail-r{grid-column:3;justify-self:start}

/* Visibility ONLY — the columns above never change. Because the work area is pinned to the centre
   track, a rail needs its gutter to hold it, and the gutters are symmetric:

       gutter = (viewport − 64 canvas padding − 1180 work − 48 gaps) / 2
       gutter ≥ 300  ⇒  viewport ≥ 1892

   So both rails arrive together at 1900 rather than the right one appearing earlier. That's the
   deliberate cost of "the work area never moves": a lone right rail at 1600 would only be possible
   by letting the main column slide, which is the thing being fixed. Below this, rails are hidden and
   the page is exactly as authored. */
@media (min-width:1900px){
  .wrail{display:block}
}

.wrail-head{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.5rem;border-bottom:1px solid var(--line-2);margin-bottom:.9rem}
.wwidget{margin-bottom:1.4rem}
.wwidget-h{display:flex;align-items:baseline;gap:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.wwidget-t{font-size:.57rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.wwidget-x{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--ink-3);
  font-size:1rem;line-height:1;padding:0 .2rem}
.wwidget-x:hover{color:var(--bad)}
.wwidget-b{padding-top:.6rem}
.wwidget-err{font-size:.8rem;color:var(--bad)}

/* Add-a-panel, only present while arranging. */
.wrail-add{border-top:1px dashed var(--line-2);padding-top:.7rem;margin-top:.4rem}
.wrail-add-l{display:block;font-size:.57rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.wrail-add-s{width:100%;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);
  padding:.35rem .4rem;font-family:inherit;font-size:.82rem;color:var(--ink)}
.wrail-none{font-size:.78rem;color:var(--ink-3)}

/* Widget internals */
.wnil{font-size:.82rem;color:var(--ink-3)}
.wtot{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
.wtot-v{font-family:var(--serif);font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.wtot-k{font-size:.72rem;color:var(--ink-3)}
.wlist{list-style:none;margin:0;padding:0}
.wlist-i{padding:.35rem 0;border-bottom:1px solid var(--line)}
.wlist-i a{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.wlist-i:hover .wlist-n{color:var(--gold-ink)}
.wlist-n{font-size:.83rem;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlist-a{margin-left:auto;font-family:var(--serif);font-size:.85rem;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wlist-i.od .wlist-a{color:var(--flow-out)}
.wlist-d{font-size:.7rem;color:var(--ink-3)}
.wmore{display:inline-block;margin-top:.5rem;font-size:.74rem;font-weight:600;color:var(--ink-3)}
.wmore:hover{color:var(--gold-ink)}

/* ── Arrange mode ────────────────────────────────────────────────────────────
   The page goes INERT while arranging. Otherwise clicking a row to move it
   navigates you away mid-arrangement — same mode discipline as draft -> posted:
   while you're moving furniture, nothing touches data. */
.arrange-btn{display:grid;place-items:center;width:30px;height:30px;cursor:pointer;
  background:none;border:none;color:var(--ink-3);border-radius:3px;transition:color .12s,background .12s}
.arrange-btn svg{width:16px;height:16px}
.arrange-btn:hover{color:var(--gold-ink)}
.arrange-btn.on{background:rgba(200,154,62,.16);color:var(--gold-ink)}

/* Driven by :has() rather than a class on the shell — the layout renders statically and cannot
   know the edit state. The rails are the interactive islands, so they carry the signal. */
.wpage:has(.wrail.editing) .wmain{pointer-events:none;opacity:.72;transition:opacity .15s}
.wpage:has(.wrail.editing) .wrail{pointer-events:auto;outline:1px dashed var(--line-2);outline-offset:8px}
.wrail-all{display:block;margin-top:.45rem;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--ink-3);text-align:left}
.wrail-all:hover{color:var(--gold-ink)}

/* ============================================================================
   RAILS READ AS SECONDARY
   ----------------------------------------------------------------------------
   Everything was bleeding together because the rails were styled at the same
   weight as the work: same ink, same gold headings, same rhythm. Three changes,
   in order of how much they do:

   1. A HAIRLINE ON THE INNER EDGE. The single strongest signal — it says "this
      is a different zone" without boxing anything, which is what a card would
      have done.
   2. GOLD REMOVED FROM WIDGET TITLES. Gold means "you can act on this". A title
      isn't actionable, so using it there both broke the rule and stole the one
      cue that distinguishes zones. Titles are now quiet uppercase like every
      other non-interactive label.
   3. TYPE STEPPED DOWN AND DENSITY UP. Context beside the work should be
      tighter than the work, not looser.
   ============================================================================ */
.wrail-l{border-right:1px solid var(--rail-line);padding:0 1.5rem 1.2rem 1.2rem}
.wrail-r{border-left:1px solid var(--rail-line);padding:0 1.2rem 1.2rem 1.5rem}

.wwidget{margin-bottom:1.05rem}
.wwidget-h{padding-bottom:.3rem}
.wwidget-t{color:var(--ink-3);font-size:.55rem;letter-spacing:.15em}
.wwidget-b{padding-top:.45rem}

/* Numbers: the serif is for MONEY. A count of parties is not money. */
.wtot{gap:.4rem;margin-bottom:.45rem}
.wtot-v{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink-2)}
.wtot-v.money{font-family:var(--serif);font-weight:400;color:var(--ink)}
.wtot-k{font-size:.68rem}

.wlist-i{padding:.26rem 0}
.wlist-n{font-size:.79rem;color:var(--ink-3)}
.wlist-a{font-size:.79rem;color:var(--ink-2)}
.wlist-d{font-size:.66rem}
.wlist-i:hover .wlist-n{color:var(--gold-ink)}   /* gold still means: this goes somewhere */

/* ── Budget — the plan laid over the ledger ──────────────────────────────────────────── */
.bud-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 .7rem}
.bud-head .sect-title{margin:0}
.bud-fy{width:auto;min-width:112px;font-size:.82rem;font-weight:600;color:var(--ink-2);padding:.2rem 0}
.wstat-hero .wstat-v{font-size:1.55rem;line-height:1.15}
.wstat-v.pos{color:var(--pos)}
.wstat-sub{font-size:.6rem;color:var(--ink-3);margin-top:.18rem;letter-spacing:.02em}
.erow-bud{grid-template-columns:1fr 170px auto}
.bud-sub{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:1.7rem 0 .7rem}
.bud-table td.money.pos{color:var(--pos)}
.bud-table td.money.neg{color:var(--neg)}
.bud-table td.money.mute{color:var(--ink-3)}
.bud-code{font-size:.66rem;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:.05rem}
.bud-bar-h{width:190px}
.bud-bar-cell{white-space:nowrap}
/* pace bar: green base = spend/earn within plan; red overage (expense) or green overage (income).
   the budget line sits at the right edge when within plan and floats left to plan/actual when over,
   so the line's distance from the right edge IS the overage. it pokes above and below the track. */
.bud-barwrap{position:relative;display:inline-block;width:calc(100% - 42px);vertical-align:middle}
.bud-track{position:relative;height:.55rem;background:var(--line-2);overflow:hidden;border-radius:2px}
.bud-fill{position:absolute;top:0;bottom:0;transition:width .3s ease,left .3s ease}
.bud-fill.good{left:0;background:var(--ok)}
.bud-fill.bad{background:var(--bad)}
.bud-fill.goodover{background:var(--ok)}
.bud-tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);transform:translateX(-1px);pointer-events:none;transition:left .3s ease}
/* over-budget row stays flat — the red actual, red "Left", and red pace bar carry it.
   drop the shared per-cell red inset entirely (it chopped the row into stubs). */
/* Attention rows (over budget / overdue): NOT the chopped per-cell stubs — one clean thin accent down
   the row's left edge. Consistent across the budget and AP ledgers. */
.bud-table .row-od td{box-shadow:none}
.bud-table .row-od td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
.ap-ledger .row-od td{box-shadow:none}
.ap-ledger .row-od td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
.sub-cal .sub-bar{cursor:pointer}
.bud-pct{font-size:.64rem;color:var(--ink-3);margin-left:.5rem;font-variant-numeric:tabular-nums;display:inline-block;width:32px;text-align:right;vertical-align:middle}

/* ── Budget — rich dashboard (mx-hero + chart + insights) ─────────────────────────────── */
.bud-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.1rem 0 1rem}
/* Hero figure colours (dark masthead re-maps the tokens; be explicit so pos/neg/mute always read) */
.mx-hero .mx-cash-sub{font-size:.6rem;color:var(--ink-3);margin-top:.28rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.mx-hero .val.pos,.mx-hero .mfig.pos{color:var(--pos)}
.mx-hero .val.neg,.mx-hero .mfig.neg{color:var(--neg)}
.mx-hero .val.mute{color:var(--ink-3)}
.mx-hero .mx-of{color:var(--ink-3);font-size:.82em;font-weight:400}
/* The chart card */
.bud-chart{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.3rem .9rem;margin:1.3rem 0;display:flex;flex-direction:column}
.bud-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.bud-legend{display:flex;gap:1.1rem;font-size:.62rem;font-weight:600;letter-spacing:.03em}
.bud-legend .lg{display:inline-flex;align-items:center;gap:.34rem;color:var(--ink-3)}
.bud-legend .lg::before{content:"";width:9px;height:9px;border-radius:2px;background:currentColor}
.bud-legend .lg-in{color:var(--flow-in)} .bud-legend .lg-out{color:var(--flow-out)} .bud-legend .lg-proj{color:var(--ink-3);opacity:.5}
.bud-svg{width:100%;height:100%;display:block;overflow:visible;flex:1 1 auto;min-height:130px}
.bud-svg .b-in{fill:var(--flow-in)} .bud-svg .b-out{fill:var(--flow-out)}
.bud-svg .b-in.proj,.bud-svg .b-out.proj{opacity:.38}
.bud-svg .bud-axis{stroke:var(--line-2)} .bud-svg .bud-now{stroke:var(--gold);stroke-dasharray:3 3;opacity:.7}
.bud-svg .bud-mlabel{fill:var(--ink-3);font-size:9px;font-family:var(--sans)}
/* Two-column body */
.bud-cols{grid-template-columns:1fr 320px}
.bud-aside{display:flex;flex-direction:column;gap:1.1rem}
.bud-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.bud-panel-h{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.65rem}
.ins-row{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem 0;border-top:1px solid var(--line)}
.ins-row:first-of-type{border-top:none}
.ins-dot{width:8px;height:8px;border-radius:50%;margin-top:.36rem;flex:none}
.ins-dot.bad{background:var(--bad)} .ins-dot.warn{background:var(--warn)} .ins-dot.good{background:var(--ok)} .ins-dot.info{background:var(--ink-3)}
.ins-t{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.ins-empty{font-size:.82rem;color:var(--ink-3);line-height:1.5}
.bud-set{display:flex;flex-direction:column;gap:.65rem}
.bud-set .amt{border:1px solid var(--line-2);padding:.42rem .55rem;border-radius:2px}
.bud-set-note{font-size:.7rem;color:var(--ink-3);margin-top:.55rem;line-height:1.45}
@media (max-width:900px){ .bud-cols{grid-template-columns:1fr} }
.bud-months{display:grid;grid-template-columns:repeat(12,1fr);margin-top:.15rem;padding:0 .3rem}
.bud-months span{text-align:center;font-size:.62rem;font-weight:600;color:var(--ink-3);font-family:var(--sans)}
.bud-months span.proj{opacity:.5}

/* ── Budget drill — a number opens its own transactions ──────────────────────────────── */
.bud-drill{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;font-variant-numeric:tabular-nums;border-bottom:1px dashed transparent}
.bud-drill:hover{border-bottom-color:var(--gold)}
/* click a category to reveal its row actions: a cog (edit inline) and a red X (remove), sliding out left */
.bud-cat-cell{position:relative}
.bud-cat-btn{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:block;line-height:1.15}
.bud-cat-btn:hover .led-desc{color:var(--gold-ink)}
.bud-cat-btn .led-desc{display:block}
.bud-cat-btn .bud-code{display:block}
.bud-actions{position:absolute;top:50%;left:-1.6rem;transform:translateY(-50%) translateX(-.5rem);
  display:flex;flex-direction:column;gap:.3rem;opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:4}
.bud-actions.open{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
/* just the icons — no box chrome */
.bud-act{display:grid;place-items:center;padding:0;cursor:pointer;border:none;background:none;line-height:0}
.bud-act-cog{color:var(--ink-2)}
.bud-act-cog:hover{color:var(--gold-ink)}
.bud-act-x{color:var(--bad)}
.bud-act-x:hover{color:var(--neg)}
.bud-plan-in{width:6rem;text-align:right;font-variant-numeric:tabular-nums;padding:.15rem .35rem}
.bud-svg .bud-hit{fill:transparent;cursor:pointer}
.bud-svg .bud-hit:hover{fill:var(--gold);opacity:.07}
.bud-drill-ov{position:fixed;inset:0;background:rgba(13,17,23,.42);z-index:60;display:flex;justify-content:flex-end;animation:bud-fade .22s ease}
.bud-drawer{width:min(540px,94vw);height:100%;overflow:auto;background:var(--canvas);border-left:1px solid var(--line-2);box-shadow:-14px 0 44px rgba(13,17,23,.22);padding:0 1.6rem 2rem;box-sizing:border-box;animation:bud-slide .42s cubic-bezier(.22,.61,.36,1)}
.bud-drawer.wide{width:min(720px,96vw)}
@keyframes bud-fade{from{opacity:0}to{opacity:1}}
@keyframes bud-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* Customer center — payment-behaviour badge + the drill's stat grid + history. */
.cust-row{cursor:pointer}
.cust-kind{font-size:.7rem;color:var(--ink-3);margin-top:.05rem}
.pays{font-size:.74rem;font-weight:600;white-space:nowrap}
.pays.good{color:var(--pos)}
.pays.warn{color:var(--warn)}
.pays.bad{color:var(--neg)}
.pays.info{color:var(--ink-3)}
.cust-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 1.4rem;padding:.4rem 0 1.1rem;border-bottom:1px solid var(--line)}
.cust-stat{display:flex;flex-direction:column;gap:.2rem}
.cust-stat .k{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cust-stat .v{font-family:var(--serif);font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.cust-stat .v.neg{color:var(--neg)} .cust-stat .v.mute{color:var(--ink-3)}
.cust-hist-h{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:1.1rem 0 .2rem}
.cust-late{font-size:.68rem;color:var(--ink-3);margin-left:.4rem}

/* People — the owner card, engagement docs, the seat-upgrade callout, and the classification helper. */
.ppl-you{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding:1rem 1.2rem;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px}
.ppl-avatar{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--hero-bg);color:#f4f5f8;
  display:grid;place-items:center;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.ppl-you-main{flex:1;min-width:0}
.ppl-you-name{font-size:1.02rem;font-weight:600;color:var(--ink)}
.ppl-you-sub{font-size:.78rem;color:var(--ink-3);margin-top:.1rem}
.ppl-docs{font-size:.74rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ppl-hint{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:.7rem 0 .2rem;font-size:.82rem;color:var(--ink-2)}
.ppl-hint-doc b{color:var(--ink)}
.ppl-classify-toggle{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--gold-ink);text-decoration:underline}
/* Seat-upgrade callout — the entitlement gate */
.spot-upgrade{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--head-bg);
  border-radius:3px;padding:1.1rem 1.3rem;max-width:44rem}
.spot-upgrade .up-h{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.spot-upgrade .up-sub{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin:0 0 .9rem;max-width:52ch}
.spot-upgrade .up-note{display:block;margin-top:.6rem;font-size:.72rem;color:var(--ink-3)}
/* Classification helper — proposes, never decides */
.ppl-classify{border:1px solid var(--line-2);background:var(--surface);border-radius:3px;padding:1rem 1.2rem;margin-top:.7rem;max-width:44rem}
.pc-h{font-size:.9rem;font-weight:600;color:var(--ink)}
.pc-sub{font-size:.82rem;color:var(--ink-3);margin:.15rem 0 .7rem;line-height:1.5}
.pc-q{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;color:var(--ink-2);margin:.4rem 0;cursor:pointer;line-height:1.4}
.pc-q input{margin-top:.15rem;flex:none}
.pc-out{display:flex;align-items:center;gap:1rem;margin:.9rem 0 .3rem;padding-top:.7rem;border-top:1px solid var(--line)}
.pc-lean{font-size:.9rem;font-weight:700}
.pc-lean.good{color:var(--pos)} .pc-lean.bad{color:var(--neg)}
.ppl-apply{background:none;border:1px solid var(--line-2);border-radius:2px;padding:.35rem .8rem;font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.ppl-apply:hover{border-color:var(--gold);color:var(--gold-ink)}
.pc-note{font-size:.74rem;color:var(--ink-3);line-height:1.5;margin:.6rem 0 0}
/* Header — the same LUX blue as the page hero, spanning the drawer with a gold top rule */
.bud-drill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 -1.6rem 1.1rem;padding:1.2rem 1.6rem 1.1rem;background:var(--hero-bg);border-top:2px solid var(--gold)}
.bud-drill-t{font-family:var(--serif);font-size:1.22rem;color:var(--hero-ink);font-weight:500}
.bud-drill-sub{font-size:.72rem;color:var(--hero-ink-3);margin-top:.28rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bud-x{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--hero-ink-3);cursor:pointer;padding:0 .2rem}
.bud-x:hover{color:var(--hero-ink)}
.bud-txn-open{color:var(--gold);text-decoration:none;font-size:1.25rem;font-weight:700;line-height:1}
.bud-txn-open:hover{color:var(--gold-ink)}

/* Budget — net trend line + committed column */
.bud-legend .lg-net{color:var(--gold)}
.bud-svg .bud-net{fill:none;stroke:var(--gold);stroke-width:2;pointer-events:none}
.bud-svg .bud-net.proj{stroke-dasharray:4 3;opacity:.55}
.bud-svg .bud-zero{stroke:var(--line-2);stroke-dasharray:2 3;opacity:.7;pointer-events:none}
.bud-table td.bud-committed{color:var(--warn)}

/* Budget — what-if scenario */
.bud-scen{display:flex;flex-direction:column;gap:.5rem}
.bud-scen-row{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-2)}
.bud-scen-in{width:62px;text-align:right;border:1px solid var(--line-2);border-radius:2px;padding:.25rem .4rem;font-variant-numeric:tabular-nums}
.bud-scen-out{margin-top:.7rem;font-size:.82rem;color:var(--ink-2);line-height:1.55;border-top:1px solid var(--line);padding-top:.6rem}
.bud-scen-reset{margin-top:.6rem}

/* ── Budget — lender one-pager ────────────────────────────────────────────────────────── */
.bud-topbar-r{display:flex;align-items:center;gap:1.1rem}
.bud-report-link{font-size:.82rem;font-weight:600;color:var(--gold-ink);text-decoration:none;white-space:nowrap}
.bud-report-link:hover{color:var(--gold)}
.rep-controls{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.2rem}
.rep-back{font-size:.85rem;font-weight:600;color:var(--ink-3);text-decoration:none}
.rep-back:hover{color:var(--ink)}
.rep-ctl-r{display:flex;align-items:center;gap:1rem}
.bud-report{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2rem 2.2rem;max-width:840px}
.rep-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:1.4rem}
.rep-org{font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-weight:500}
.rep-title{font-size:.9rem;color:var(--ink-2);margin-top:.25rem}
.rep-meta{font-size:.74rem;color:var(--ink-3);text-align:right;line-height:1.6}
.rep-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.7rem}
.rep-card{border:1px solid var(--line);border-radius:6px;padding:.8rem .9rem}
.rep-card-l{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rep-card-v{font-family:var(--serif);font-size:1.28rem;color:var(--ink);margin-top:.3rem;font-variant-numeric:tabular-nums}
.rep-card-v.neg{color:var(--neg)}
.rep-card-s{font-size:.62rem;color:var(--ink-3);margin-top:.35rem;font-variant-numeric:tabular-nums}
.rep-lines{width:100%;border-collapse:collapse;font-size:.86rem}
.rep-lines th{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 1rem .6rem 0;border-bottom:1px solid var(--line-2)}
.rep-lines th.num,.rep-lines td.num{text-align:right}
.rep-lines td{padding:.4rem 1rem .4rem 0;color:var(--ink-2)}
.rep-lines td.num{font-variant-numeric:tabular-nums;color:var(--ink)}
.rep-lines td.money{font-family:var(--serif)}
.rep-lines td.money.neg{color:var(--neg)} .rep-lines td.money.pos{color:var(--pos)}
.rep-sec td{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);padding-top:1rem;border-bottom:1px solid var(--line)}
.rep-sub td{border-top:1px solid var(--line);font-weight:600;color:var(--ink)}
.rep-net td{border-top:2px solid var(--ink);font-weight:700;color:var(--ink);padding-top:.6rem}
.rep-foot{margin-top:1.7rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--ink-3);line-height:1.65;max-width:74ch}
@media print{
  .app-bar,.app-foot,.app-dock,.rep-controls,.sec-bar,.work-head{display:none !important}
  .app-shell,.app-canvas,.wpage,.work{display:block !important;height:auto !important;overflow:visible !important;padding:0 !important;margin:0 !important;background:#fff !important}
  .bud-report{border:none !important;box-shadow:none !important;max-width:none !important;padding:0 !important;background:#fff !important}
  .rep-org,.rep-title,.rep-card-v,.rep-lines td,.rep-net td,.rep-sub td{color:#111 !important}
  .rep-card{border:1px solid #bbb !important}
}

/* Budget — chart beside What-to-watch */
.bud-chartrow{display:grid;grid-template-columns:1fr 320px;gap:1.3rem;align-items:stretch;margin:1.3rem 0}
.bud-chartrow .bud-chart{margin:0}
.bud-watch{display:flex;flex-direction:column;gap:1.1rem}
@media (max-width:900px){ .bud-chartrow{grid-template-columns:1fr} }

/* ── My Day — a DENSE PC page. Uncaged: the shell's 1180px cap doesn't apply; the grid fills
   the monitor with MORE information, never bigger type. ─────────────────────────────────── */
.wpage:has(.day){grid-template-columns:auto minmax(0,1fr) auto}
.day{padding:0 clamp(10px,1.4vw,34px) .6rem}
.day-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin:0 0 .8rem}
.day-title{font-size:1.35rem;font-weight:650;margin:0}
.day-date{color:var(--ink-3);font-size:.88rem}
.day-verbbar{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.day-verb{display:inline-block;text-decoration:none;background:var(--btn-bg);color:var(--btn-ink);
  border-radius:2px;padding:.34rem .8rem;font-size:.8rem;font-weight:600}
.day-verb:hover{filter:brightness(1.18)}

/* the band — ① one hero number + verdict, ② four figures. Five elements, done. */
.day-band{display:flex;flex-wrap:wrap;background:var(--hero-bg);border-top:2px solid var(--gold);margin-bottom:14px}
.day-hero{display:block;text-decoration:none;color:inherit;padding:.85rem 1.6rem .9rem 1.15rem;border-right:1px solid color-mix(in srgb,#f4f5f8 14%,transparent)}
.day-hero .lbl{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink-3)}
.day-hero .val{font-size:2.1rem;line-height:1.15;color:#f2e3c0;font-variant-numeric:tabular-nums}
.day-hero .verdict{font-size:.8rem;color:#9fd4a8;margin-top:.1rem}
.day-hero .verdict.warn{color:#f2c33f}
.day-figs{display:flex;flex-wrap:wrap}
.day-s{padding:.65rem 1.15rem .7rem;border-right:1px solid color-mix(in srgb,#f4f5f8 12%,transparent);text-decoration:none;display:block;color:inherit}
.day-s .lbl{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink-3)}
.day-s .val{font-size:1.3rem;line-height:1.25;color:#f2e3c0;font-variant-numeric:tabular-nums}
.day-s .sub{font-size:.72rem;color:var(--hero-ink-3)}
.day-s .sub .neg{color:#f4a9a1}
.day-s:hover,.day-hero:hover{background:color-mix(in srgb,#f4f5f8 6%,transparent)}

/* ③④ the working surface: left = the list (the 80%% zone), right = context. One paper, no cards. */
.day-main{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);background:var(--surface);border:1px solid var(--line-2)}
.day-col-l{min-width:0;border-right:1px solid var(--line-2)}
.day-col-r{min-width:0}
@media (max-width:1100px){ .day-main{grid-template-columns:1fr} .day-col-l{border-right:none} }
/* NEXT — an explicit verb column, taught by its header. Plain text link, arrow nudges on hover. */
.day-sec-cols{display:flex;justify-content:space-between;align-items:baseline}
.day-sec-cols .colhead{font-size:.6rem;letter-spacing:.14em;color:var(--ink-3)}
.day-row .act{flex:0 0 6.6em;text-align:right;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--btn-bg);white-space:nowrap}
.day-row .act::after{content:"\2192";display:inline-block;margin-left:.35rem;transition:transform .15s}
.day-row:hover .act{color:var(--gold-ink,#8a6a1f)}
.day-row:hover .act::after{transform:translateX(3px)}
/* the working surface — ONE continuous paper, sections split by rules and head bands. No cards. */
.day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));
  background:var(--surface);border:1px solid var(--line-2);border-right:none;border-bottom:none}
.day-sec{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-width:0}
.day-sec-h{background:var(--head-bg);padding:.45rem .95rem;font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line-2)}

/* dense line items */
/* dense line items — who · why · amount · ACTION, each its own aligned column */
.day-row{display:flex;align-items:center;gap:.9rem;padding:.4rem .95rem;border-bottom:1px solid var(--line);font-size:.86rem;text-decoration:none;color:var(--ink)}
.day-row:hover{background:var(--head-bg)}
.day-row .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-row .meta{margin-left:auto;color:var(--ink-3);font-size:.75rem;white-space:nowrap}
.day-row .meta.od{color:var(--bad,#b91c1c);font-weight:600}
.day-row .amt{flex:0 0 7.5em;text-align:right;font-family:var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.day-row .amt.pos{color:var(--ok)}
.day-foot{display:flex;justify-content:space-between;padding:.45rem .95rem;font-size:.8rem;color:var(--ink-2);border-top:1px solid var(--line-2)}
.day-foot b{font-family:var(--serif)}
/* bad news never dead-ends: a foot line carrying a red figure carries its verb too, and the red
   is the real red — .neg is otherwise only defined for the dark hero tiles. */
.day-foot .neg{color:var(--neg)}
.day-foot .act{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--btn-bg);white-space:nowrap;text-decoration:none;margin-left:.7rem}
.day-foot .act::after{content:"\2192";display:inline-block;margin-left:.35rem;transition:transform .15s}
.day-foot .act:hover{color:var(--gold-ink)}
.day-foot .act:hover::after{transform:translateX(3px)}
.day-empty{padding:.7rem .95rem;font-size:.85rem;color:var(--ink-3)}

/* inline spend bars — where the money went */
.day-sp{display:flex;align-items:center;gap:.6rem;padding:.38rem .95rem;border-bottom:1px solid var(--line);font-size:.85rem}
.day-sp .n{flex:0 0 11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-sp .bar{flex:1;height:8px;background:var(--head-bg)}
.day-sp .bar i{display:block;height:100%;background:var(--gold)}
.day-sp .amt{font-family:var(--serif);font-variant-numeric:tabular-nums;flex:0 0 6.5em;text-align:right}

/* the weeks — in vs out */
.day-week{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:.8rem .95rem .3rem;align-items:end;height:104px}
.day-wd{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:100%}
.day-bars{display:flex;gap:2px;align-items:end;height:100%}
.day-bar{width:9px;background:var(--ink-3);opacity:.35}
.day-bar.in{background:var(--gold);opacity:1}
.day-wd .dl{font-size:.62rem;color:var(--ink-3);white-space:nowrap}
.day-week-foot{display:flex;gap:1.4rem;padding:.5rem .95rem .7rem;font-size:.8rem;color:var(--ink-2)}
.day-week-foot b{font-family:var(--serif)}

/* journal feed rows */
.day-evt{display:flex;gap:.7rem;padding:.38rem .95rem;border-bottom:1px solid var(--line);font-size:.85rem}
.day-evt:last-child{border-bottom:none}
.day-evt .d{color:var(--ink-3);width:4.6em;flex-shrink:0;font-size:.78rem}
.day-evt .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-evt .amt{margin-left:auto;font-family:var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.day-evt .amt.pos{color:var(--ok)}

/* ── the find corridor — chips emerge from the control's right edge as intent is typed.
   Icon + word (icons alone can't carry fine distinctions); no dropdown, no cards. ──────── */
.day-find{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1}
.day-find .df-glass{width:15px;height:15px;color:var(--ink-3);flex-shrink:0}
.day-find input{width:12.5rem;flex-shrink:0;background:var(--surface);border:1px solid var(--line-2);
  border-radius:2px;padding:.34rem .6rem;font:inherit;font-size:.85rem;color:var(--ink)}
.day-find input:focus{outline:none;border-color:var(--gold)}
.df-hits{display:flex;gap:.4rem;min-width:0;overflow:hidden}
.df-chip{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;text-decoration:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:2px;padding:.28rem .6rem;
  font-size:.8rem;font-weight:600;color:var(--ink-2);
  opacity:0;transform:translateX(-10px);animation:df-in .18s ease-out forwards;
  animation-delay:calc(var(--i) * 55ms)}
.df-chip svg{width:14px;height:14px;flex-shrink:0}
.df-chip:hover,.df-chip.sel{border-color:var(--gold);color:var(--gold-ink,#8a6a1f)}
@keyframes df-in{to{opacity:1;transform:translateX(0)}}
/* the operating-pattern switch on the mock — same founder, same grammar, different prominence */
.day-pattern{margin-left:auto;align-self:center;padding:0 1.1rem;font-size:.72rem;color:var(--hero-ink-3);display:flex;gap:.6rem;align-items:center}
.day-pattern a{color:var(--hero-ink-3);text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.day-pattern a.on{color:#f2c33f;border-bottom:2px solid #f2c33f}

/* ── My Work — the doorway row: someone asked ─────────────────────────────── */
.wk-ask{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 1.2rem;
  background:var(--surface);border:1px solid var(--line-2);padding:.8rem 1rem}
.wk-ask-lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.wk-ask select,.wk-ask input{border:1px solid var(--line-2);border-radius:2px;padding:.4rem .55rem;
  font:inherit;font-size:.88rem;color:var(--ink);background:var(--surface);min-width:0;flex:1}
.wk-ask select:focus,.wk-ask input:focus{outline:none;border-color:var(--gold)}
.wk-ask .rec-post{flex:0 0 auto}