/* ============================================================================
   LEDGER 2.1 — "Counting-house" theme
   The register is an account book, and this layer draws it as one: cream ruled
   paper with a red double margin, a green-cloth binding with gilt rules for the
   rail, iron-gall ink, the accountant's double underline under every total, and
   rubber-stamp status marks. The dark theme is the same book read by lamplight.

   Appearance only. It loads after the built-in styles, reads and redefines the
   same tokens, and never changes layout that a workflow depends on.

   Type (self-hosted, SIL Open Font Licence — see public/fonts/*-OFL.txt):
     Fraunces         headings, the wordmark and hero figures (no tabular digits,
                      so it is never used in a column of numbers)
     Instrument Sans  the interface and every table, with tabular figures;
                      its width axis gives the condensed ledger column heads
     IBM Plex Mono    case numbers, references and keys
   ==========================================================================*/
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-full.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-full-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500.woff2) format('woff2')}

:root{
  --sans:'Instrument Sans','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',sans-serif;
  --display:'Fraunces','Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --serif:var(--display);
  --code:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --mono:var(--sans);
  --micro:600 semi-condensed 10.5px/1.4 var(--sans);
  --track-micro:.09em;

  /* Parchment: cream ruled paper on a warm desk */
  --bg:#ECE5D6;--bg-glow:rgba(133,87,15,.08);
  --surface:#FBF7EE;--surface-2:#FFFCF6;--sunk:#F1EADC;--elevated:#FFFDF8;
  --row-alt:#EEF2E6;--row-hover:#F4EAD4;
  --ink:#1D1A15;--ink-2:#463F35;--ink-3:#675E51;
  --line:rgba(29,26,21,.10);--line-2:rgba(29,26,21,.17);--line-3:rgba(29,26,21,.32);

  /* The binding: bottle-green cloth with gilt */
  --rail:#0F211B;--rail-2:#15291F;--rail-3:#1F3A31;
  --ink-inv:#F2EBDC;--ink-inv-2:rgba(242,235,220,.72);--ink-inv-3:rgba(242,235,220,.54);
  --line-inv:rgba(201,162,74,.16);--line-inv-2:rgba(201,162,74,.32);
  --gilt:#C9A24A;--gilt-text:#E3CD92;

  --accent:#85570F;--accent-deep:#694408;--accent-ink:#FFF8E8;--accent-bright:#C9A24A;
  --accent-soft:rgba(133,87,15,.10);--accent-line:rgba(133,87,15,.34);
  --danger:#962A32;--danger-deep:#76202A;--danger-soft:rgba(150,42,50,.08);--danger-line:rgba(150,42,50,.34);
  --warning:#8C5006;--warning-soft:rgba(176,108,16,.11);--warning-line:rgba(140,80,6,.34);
  --positive:#22594A;--positive-deep:#1A463A;--positive-soft:rgba(34,89,74,.09);--positive-line:rgba(34,89,74,.32);
  --info:#2A5279;--info-soft:rgba(42,82,121,.08);--info-line:rgba(42,82,121,.30);

  /* Paper furniture */
  --rule:rgba(42,82,121,.085);        /* blue feint ruling */
  --margin:rgba(150,42,50,.30);       /* red double margin */
  --rule-gap:32px;
  --r:6px;--r-sm:4px;--r-lg:10px;

  --hl:inset 0 1px 0 rgba(255,255,255,.7);
  --e1:0 1px 0 rgba(29,26,21,.06),0 1px 2px rgba(29,26,21,.06),0 8px 18px -14px rgba(29,26,21,.30);
  --e2:0 1px 0 rgba(29,26,21,.08),0 4px 10px -4px rgba(29,26,21,.16),0 18px 34px -22px rgba(29,26,21,.38);
  --e3:0 2px 4px rgba(29,26,21,.08),0 24px 50px -24px rgba(29,26,21,.45);
  --scrim:rgba(15,20,17,.58);--stamp:rgba(214,120,128,.9);
  --rail-glow-a:rgba(201,162,74,.14);--rail-glow-b:rgba(34,89,74,.24);
}
:root[data-theme="dark"]{
  --bg:#0D1012;--bg-glow:rgba(214,170,91,.05);
  --surface:#151A1D;--surface-2:#1A2024;--sunk:#101417;--elevated:#1E252A;
  --row-alt:#151C1B;--row-hover:#1F2826;
  --ink:#EDE7DA;--ink-2:#BDB5A6;--ink-3:#9A9181;
  --line:rgba(237,231,218,.075);--line-2:rgba(237,231,218,.13);--line-3:rgba(237,231,218,.26);
  --rail:#08130F;--rail-2:#0D1B16;--rail-3:#16291F;
  --accent:#D6AA5B;--accent-deep:#E7C27E;--accent-ink:#1A1206;--accent-bright:#D6AA5B;
  --accent-soft:rgba(214,170,91,.12);--accent-line:rgba(214,170,91,.36);
  --rule:rgba(109,186,216,.045);--margin:rgba(238,140,147,.16);
  --hl:inset 0 1px 0 rgba(255,255,255,.035);
  --e1:0 1px 1px rgba(0,0,0,.35),0 10px 22px -16px rgba(0,0,0,.75);
  --e2:0 2px 4px rgba(0,0,0,.4),0 22px 40px -22px rgba(0,0,0,.85);
  --e3:0 2px 6px rgba(0,0,0,.45),0 40px 80px -36px rgba(0,0,0,.95);
}

/* ---------------- Type ---------------- */
body{font-family:var(--sans);font-feature-settings:normal;font-size:14px;letter-spacing:.003em}
.num,.kpi .value,.barvalue,td.num,td.date,.outcome-n,.outcome-amt,.pay-summary dd,.charttip em,.navitem .count,
.approval-meta .muted,.alertItem .when,.diary-when,.aging-strip,.audit-table td.t,.backup-table td.t,
.ctable td,.matrix td,.hbar .vl,.recon-lines .num,.agelegend .num,.case-facts dd,.drill-meta b,.ov-totals b{
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1}
.viewhead h1,.sectionhead h2,.card h2,.dialoghead h2,.formsection>legend,.empty strong,.login-wrap h2,
.brand .wordmark b,.ov-level h2,.plate-title,.stamp b{
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'SOFT' 30,'WONK' 0;letter-spacing:-.012em}
.viewhead h1{font-weight:620;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.viewhead p{font-family:var(--display);font-style:italic;font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--ink-3)}
.sectionhead h2,.ov-level h2{font-weight:600;font-style:italic;font-size:19px;font-variation-settings:'SOFT' 60,'WONK' 1}
.card h2{font-weight:620;font-size:15px;letter-spacing:-.008em}
.dialoghead h2{font-weight:620;font-size:18px}
.empty strong{font-style:italic;font-weight:560}
th,.usersTable th,.diff-head,.topcust .head,.outcome-head,.ctable th,.matrix th,.kpi .label,.field>label,.subhead,.eyebrow,.navgroup,.msel-key{
  font-stretch:semi-condensed}
.kpi .label{font:600 semi-condensed 11px/1.35 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.field>label{font:600 semi-condensed 11px/1.35 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
code,kbd,.code,.topsearch kbd,.pw-reveal code,.panel-mark,.restore-confirm input{font-family:var(--code)}
.lede{font-size:13.5px}

/* ---------------- The page: ruled paper with a red double margin ----------------
   Drawn on the scrolling pane with background-attachment:local, so the ruling
   moves with the content like a real page. */
.shell::before{background:radial-gradient(100% 60% at 50% -10%,var(--bg-glow),transparent 70%)}
.main{
  background:
    linear-gradient(90deg,transparent 0 10px,var(--margin) 10px 11px,transparent 11px 14px,var(--margin) 14px 15px,transparent 15px) 0 0/100% 100% no-repeat local,
    repeating-linear-gradient(180deg,transparent 0 calc(var(--rule-gap) - 1px),var(--rule) calc(var(--rule-gap) - 1px) var(--rule-gap)) 0 0/100% var(--rule-gap) local;
}
@media(max-width:760px){.main{background:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px) local}}

/* ---------------- The binding ---------------- */
.sidebar{
  background-color:var(--rail);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 4px);
  border-right:0;
  box-shadow:inset -1px 0 0 rgba(201,162,74,.38),inset -4px 0 0 rgba(0,0,0,.28),inset -5px 0 0 rgba(201,162,74,.18);
}
.sidebar::before{background:radial-gradient(closest-side,rgba(201,162,74,.10),transparent 72%)}
.sidebar::after{background:radial-gradient(closest-side,rgba(34,89,74,.30),transparent 74%)}
.brand{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line-inv),inset 0 -4px 0 rgba(0,0,0,.2),inset 0 -5px 0 rgba(201,162,74,.10)}
.brand .mark{
  border-radius:50%;width:34px;height:34px;flex-basis:34px;
  background:radial-gradient(circle at 32% 28%,#F3E2AE,#C9A24A 46%,#8A6A22 100%);color:#2A1D05;
  font:italic 700 13px/1 var(--display);letter-spacing:-.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(90,60,10,.45),0 2px 6px rgba(0,0,0,.35);
}
.brand .wordmark b{font-style:italic;font-weight:620;font-size:22px;line-height:1;color:var(--gilt-text);font-variation-settings:'SOFT' 80,'WONK' 1;letter-spacing:-.01em}
.brand .wordmark span{color:rgba(227,205,146,.62);font-stretch:semi-condensed;letter-spacing:.14em;margin-top:3px}
.navgroup{color:rgba(227,205,146,.55)!important;letter-spacing:.14em}
.navitem{font:500 13.5px/1.2 var(--sans);color:var(--ink-inv-2);border-radius:var(--r-sm)}
.navitem:hover{background:rgba(242,235,220,.06);color:var(--ink-inv)}
.navitem.active{background:linear-gradient(90deg,rgba(201,162,74,.16),rgba(201,162,74,.04));color:#F6E7BD;box-shadow:inset 0 0 0 1px rgba(201,162,74,.18)}
.nav-indicator{background:var(--gilt);width:3px;box-shadow:0 0 10px rgba(201,162,74,.6)}
.navitem .count{background:var(--gilt);color:#231805;font:700 10.5px/1.5 var(--sans);font-variant-numeric:tabular-nums}
.navitem .count.soft{background:rgba(242,235,220,.12);color:var(--ink-inv-2)}
.sidefoot{border-top:0;box-shadow:inset 0 1px 0 var(--line-inv)}
.userchip{background:rgba(0,0,0,.18);border-color:var(--line-inv)}
.userchip .avatar{background:transparent;border:1px solid rgba(201,162,74,.45);color:var(--gilt-text);font:italic 600 14px/1 var(--display)}
.railbtn{border-color:var(--line-inv)}

/* ---------------- Command bar ---------------- */
.topbar{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:3px double var(--line-2)}
.topsearch input{border-radius:var(--r-sm);background:var(--surface-2);font:400 13px/1 var(--sans)}
.iconbtn{border-radius:var(--r-sm);background:var(--surface-2)}
.iconbtn.on{background:var(--accent-soft)}
.menu{border-radius:var(--r);border-top:2px solid var(--accent-bright)}

/* ---------------- Slicers ---------------- */
.msel-btn,.daterange{border-radius:var(--r-sm)!important;background:var(--surface-2)}
.msel-btn.active{background:var(--accent-soft);border-color:var(--accent-line)}
.chip{border-radius:var(--r-sm)}
.filters .numrange input{border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2);font:500 12.5px/1 var(--sans);color:var(--ink)}

/* ---------------- Paper sheets ---------------- */
.card,.approval-item,.pay-summary,.scope-box,.ov-head{
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--hl),var(--e1)}
.card{background:linear-gradient(180deg,var(--surface-2),var(--surface) 42%)}
/* Section titles sit on an accountant's double rule. */
.card>h2{padding-bottom:9px;margin-bottom:14px;border-bottom:3px double var(--line-2)}
.ov-level{border-bottom:1px solid var(--line-2);padding-bottom:8px}
.ov-level .lvl{font:600 semi-condensed 10px/1.2 var(--sans);letter-spacing:.16em;color:var(--accent-deep);background:transparent;
  border:1px solid var(--accent-line);border-radius:2px;padding:3px 7px}
.sectionhead{border-bottom:1px solid var(--line-2);padding-bottom:8px}

/* ---------------- Figures: the double underline of a total ---------------- */
.kpi{border-radius:var(--r);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.kpi::before{width:4px;top:0;bottom:0;border-radius:var(--r) 0 0 var(--r)}
.kpi .value{font-weight:700;letter-spacing:-.02em}
.ov-kpi .value{
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'SOFT' 40,'WONK' 0;font-weight:600;
  font-size:clamp(21px,1.75vw,28px);letter-spacing:-.018em;line-height:1.1;white-space:nowrap;
  width:max-content;max-width:100%;padding-bottom:3px;margin-bottom:4px;border-bottom:3px double var(--line-3);
  transition:border-color var(--fast) var(--ease)}
.ov-kpi .value.na{font-style:italic}
/* The currency sits beside the figure as a small printed marker, as in a ledger column head. */
.ov-kpi .value .cur{font:700 semi-condensed 10.5px/1 var(--sans);letter-spacing:.12em;vertical-align:.95em;margin-right:5px;color:var(--ink-3)}
.ov-kpi:hover .value,.ov-kpi:focus-visible .value{border-bottom-color:var(--accent)}
.ov-kpi.red .value{color:var(--danger)}
.ov-kpi.green .value{color:var(--positive)}
.ov-kpi .sub b{color:var(--ink)}
.ov-kpi .cmp .chg{font-variant-numeric:tabular-nums}
.ov-info{font:italic 600 12px/20px var(--display);background:transparent;border-color:var(--line-3)}
.status-grid .kpi .value{font-family:var(--display)}
.recon-lines .tot{border-top:0;box-shadow:inset 0 3px 0 -1px var(--surface),inset 0 1px 0 var(--line-3),inset 0 4px 0 -1px var(--line-3)}

/* ---------------- Ledger tables ----------------
   Condensed column heads over a double rule, faint column rules, and green-bar
   banding — the look of a printed accounts register. */
th,.ctable th,.matrix th,.audit-table th,.backup-table th{
  font:600 semi-condensed 10.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
thead th,.ctable thead th{background:var(--sunk);border-bottom:3px double var(--line-3)!important}
#tableBody td+td,.ctable td+td,.audit-table td+td,.backup-table td+td{border-left:1px solid var(--line)}
.tablewrap,.tablescroll{border-radius:var(--r);border-color:var(--line-2)}
.ctable td{border-bottom-color:var(--line)}
.ctable tbody tr:nth-child(even) td{background:var(--row-alt)}
.tablescroll .ctable tbody tr:nth-child(even) td:first-child{background:var(--row-alt)}
.ctable tr.clickable:hover td{background:var(--row-hover)}
td .sub,.ctable td .sub{font-size:11px}
.celllink{text-decoration-color:var(--accent-line)}

/* ---------------- Stamps ----------------
   Status marks are inked, not painted: rectangular, condensed capitals, a heavier
   border. The critical mark is struck slightly askew, the way a stamp lands. */
.tag,.prio,.prio-b,.decision,.status-pill,.stage{
  border-radius:3px!important;font-stretch:semi-condensed;letter-spacing:.07em;text-transform:uppercase;
  font-size:10.5px!important;font-weight:700!important;border-width:1.5px!important;padding:2px 7px!important}
.stage{text-transform:none;letter-spacing:.02em;font-weight:600!important}
.prio.critical,.prio-b.critical{transform:rotate(-2deg);box-shadow:0 0 0 1px var(--danger-soft)}
.prio-b.low,.tag.blue{background:transparent}

/* ---------------- Buttons ---------------- */
.btn{border-radius:var(--r-sm);font:600 12.5px/1 var(--sans);letter-spacing:.01em}
.btn.primary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(29,26,21,.2),0 8px 16px -10px var(--accent)}
.btn.green{background:linear-gradient(180deg,color-mix(in srgb,var(--positive) 88%,#fff 12%),var(--positive))}

/* ---------------- Dialogs: a sheet with a gilt head rule ---------------- */
.dialog{border-radius:var(--r-lg);border-top:3px solid var(--accent-bright)}
.dialoghead{border-bottom:3px double var(--line-2)}
.toast{background:var(--ink);color:var(--surface);border-radius:var(--r);border:0;font-weight:500}
.toast.err{background:var(--danger-deep);color:#FFF4F4}
.toast.ok{background:var(--positive-deep);color:#F2FBF7}

/* ---------------- Sign-in: the book's cover ---------------- */
.plate{background-color:var(--rail);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px);
  box-shadow:inset -1px 0 0 rgba(201,162,74,.4),inset -5px 0 0 rgba(0,0,0,.3),inset -6px 0 0 rgba(201,162,74,.2);border-right:0}
.plate-inner{border:1px solid rgba(201,162,74,.28);outline:1px solid rgba(201,162,74,.14);outline-offset:6px;padding:52px 56px;margin-left:70px}
.plate-title{font-weight:600;color:#F6ECD2;font-variation-settings:'SOFT' 20,'WONK' 1}
.plate-title em{color:var(--gilt);font-weight:400}
.plate-folio,.plate-cols li{color:rgba(227,205,146,.6)}
.plate-cols li{border-color:rgba(201,162,74,.25);border-radius:2px}
.plate-margin{background:linear-gradient(to bottom,transparent,rgba(201,162,74,.4),transparent)}
.login-panel{background:var(--bg);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),
    linear-gradient(90deg,transparent 0 38px,var(--margin) 38px 39px,transparent 39px 42px,var(--margin) 42px 43px,transparent 43px)}
.panel-mark span{color:var(--accent)}
.login-wrap h2{font-weight:600;font-size:34px;font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1}

/* ---------------- Motion: one orchestrated arrival ----------------
   Only on the dashboard's first paint (#ovRoot.ov-first), never on refreshes;
   removed entirely by the reduced-motion rule in the base styles. */
@keyframes sheet-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rule-draw{from{border-bottom-color:transparent;clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ov-first .ov-kpi{animation:sheet-in 420ms var(--ease-out) backwards}
.ov-first .ov-kpi:nth-child(2){animation-delay:40ms}.ov-first .ov-kpi:nth-child(3){animation-delay:80ms}
.ov-first .ov-kpi:nth-child(4){animation-delay:120ms}.ov-first .ov-kpi:nth-child(5){animation-delay:160ms}
.ov-first .ov-kpi:nth-child(6){animation-delay:200ms}.ov-first .ov-kpi:nth-child(7){animation-delay:240ms}
.ov-first .ov-kpi:nth-child(8){animation-delay:280ms}
.ov-first .ov-kpi .value{animation:rule-draw 700ms var(--ease-out) 300ms backwards}
.ov-first .ov-grid>.card{animation:sheet-in 480ms var(--ease-out) backwards}
.ov-first .ov-grid>.card:nth-child(1){animation-delay:320ms}.ov-first .ov-grid>.card:nth-child(2){animation-delay:370ms}
.ov-first .ov-grid>.card:nth-child(3){animation-delay:420ms}.ov-first .ov-grid>.card:nth-child(4){animation-delay:470ms}
.ov-first .ov-grid>.card:nth-child(n+5){animation-delay:520ms}
@media(prefers-reduced-motion:reduce){.ov-first .ov-kpi,.ov-first .ov-kpi .value,.ov-first .ov-grid>.card{animation:none!important}.prio.critical,.prio-b.critical{transform:none}}

/* ---------------- Small details ---------------- */
::selection{background:rgba(201,162,74,.28)}
.main{scrollbar-color:var(--line-3) transparent}
.skel,.ov-kpi.skel .value{background:var(--sunk)}
.empty{border-radius:var(--r)}
.notice{border-radius:var(--r);border-left:4px solid var(--accent)}
.ov-warn{border-radius:var(--r);border-left:4px solid var(--warning)}
.ov-warn.err{border-left-color:var(--danger)}
.snapshot-banner{border-radius:var(--r);border-left:4px solid var(--info)}
@media print{.sidebar,.topbar,.filterbar,.activeChips,.ov-head button{display:none!important}.main{background:none}}
@media(forced-colors:active){.main,.sidebar,.plate,.login-panel{background-image:none}.ov-kpi .value{border-bottom:3px double CanvasText}}

/* The cover's gilt frame follows the base layout's breakpoints. */
@media(max-width:980px){.plate-inner{margin:0 26px 0 50px;padding:30px 30px}.plate{box-shadow:inset 0 -1px 0 rgba(201,162,74,.4)}}
@media(max-width:620px){.plate-inner{margin:0 14px 0 40px;padding:22px 18px;outline:none}.login-panel{background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px)}}