/* JustAudit — web edition.
 *
 * The desktop app's "Broadsheet Ledger" design language, token for token: the palettes
 * below are src/PnaAudit.App/Theme/themes.json, so the two surfaces cannot drift into
 * different products. Serif display type, hairline rules doing the work borders do
 * elsewhere, square corners, rubber-stamp chips.
 *
 * Broadsheet is the light palette, Night Ledger the dark one. The viewer's explicit
 * choice stamps data-theme on the root; with nothing stamped, prefers-color-scheme
 * decides. No colour gets its only definition inside a media query.
 */

/* ══ palette — Theme/themes.json ═══════════════════════════════════════════ */

:root {
    color-scheme: light dark;

    --c-bg:            #F2EEE3;
    --c-panel:         #FAF7EE;
    --c-sidebar:       #EAE5D6;
    --c-accent:        #1E3A5F;
    --c-accent2:       #A63D2A;
    --c-text:          #211F1A;
    --c-muted:         #7A7364;
    --c-border:        #D5CDB9;
    --c-danger:        #A63D2A;
    --c-success:       #3D6B4F;
    --c-btn_primary:   #1E3A5F;
    --c-btn_hover:     #172E4D;
    --c-btn_secondary: #E3DECC;
    --c-input_bg:      #FDFBF4;
    --c-input_border:  #C7BFA8;
    --c-highlight:     #E7E1CE;
    --c-list_sel:      #DCE4EC;
    --c-chip_active:   #ECE7D8;
    --c-chip_hover:    #EEE9DB;
    --c-status_ns:     #8A8272;
    --c-status_ip:     #A8752B;
    --c-status_done:   #3D6B4F;
    --c-status_na:     #ABA28C;
    --c-lock_bg:       #EFD9D0;
    --c-lock_fg:       #7C2D1B;
    --c-onink:         #F6F3E9;

    --serif: Georgia, Cambria, "Times New Roman", ui-serif, serif;
    --sans:  "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --mono:  Consolas, "Cascadia Mono", ui-monospace, monospace;

    --lift: 0 1px 2px rgba(58, 44, 20, .06), 0 10px 26px -10px rgba(58, 44, 20, .18);
    --split-left: 380px;
}

/* Night Ledger, applied by the toggle in either direction and by the system default. */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg: #191813; --c-panel: #201E17; --c-sidebar: #1C1B14;
        --c-accent: #8FB0D8; --c-accent2: #C96F52; --c-text: #EAE5D6; --c-muted: #8D8672;
        --c-border: #383527; --c-danger: #C96F52; --c-success: #7FA98C;
        --c-btn_primary: #3A5C86; --c-btn_hover: #2F4A6E; --c-btn_secondary: #2A2820;
        --c-input_bg: #211F17; --c-input_border: #45412F; --c-highlight: #2C2A20;
        --c-list_sel: #2C3542; --c-chip_active: #252318; --c-chip_hover: #282619;
        --c-status_ns: #8D8672; --c-status_ip: #C79A4B; --c-status_done: #7FA98C; --c-status_na: #5C5744;
        --c-lock_bg: #3A241C; --c-lock_fg: #EFB9A6; --c-onink: #F6F3E9;
        --lift: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
    }
}
:root[data-theme="dark"] {
    --c-bg: #191813; --c-panel: #201E17; --c-sidebar: #1C1B14;
    --c-accent: #8FB0D8; --c-accent2: #C96F52; --c-text: #EAE5D6; --c-muted: #8D8672;
    --c-border: #383527; --c-danger: #C96F52; --c-success: #7FA98C;
    --c-btn_primary: #3A5C86; --c-btn_hover: #2F4A6E; --c-btn_secondary: #2A2820;
    --c-input_bg: #211F17; --c-input_border: #45412F; --c-highlight: #2C2A20;
    --c-list_sel: #2C3542; --c-chip_active: #252318; --c-chip_hover: #282619;
    --c-status_ns: #8D8672; --c-status_ip: #C79A4B; --c-status_done: #7FA98C; --c-status_na: #5C5744;
    --c-lock_bg: #3A241C; --c-lock_fg: #EFB9A6; --c-onink: #F6F3E9;
    --lift: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
}

/* ── the six engagement-type inks and the status rails ─────────────────────
 * Theme/themes.json carries them per palette: the commercial palettes map
 * accent3..accent6 back onto their own two inks (what you see below), while the
 * firm's "Broadsheet Colour" gives all six types a stamp ink of their own — and
 * turns the status rails on. Which one applies is the brand's statusColour flag,
 * stamped as data-inks on the root by app.js; the CSS never asks which edition it is.
 * The paper (bg/panel/sidebar/border/inputs/text/muted) never changes. */
:root {
    --c-accent3: var(--c-accent);
    --c-accent4: var(--c-accent2);
    --c-accent5: var(--c-accent);
    --c-accent6: var(--c-accent2);
}
:root[data-theme="dark"] {
    --c-accent3: #8FB0D8; --c-accent4: #C96F52; --c-accent5: #8FB0D8; --c-accent6: #C96F52;
}
:root[data-theme="light"][data-inks="colour"] {
    --c-accent:        #1B4D8F;
    --c-accent2:       #C2410C;
    --c-danger:        #B3261E;
    --c-success:       #15803D;
    --c-btn_primary:   #1B4D8F;
    --c-btn_hover:     #123A6E;
    --c-list_sel:      #CCDFF4;
    --c-status_ip:     #C2710B;
    --c-status_done:   #15803D;
    --c-lock_bg:       #F8DCD1;
    --c-lock_fg:       #9A3412;
    --c-accent3:       #15803D;   /* green   — non-corporate */
    --c-accent4:       #7C3AED;   /* violet  — consolidation  */
    --c-accent5:       #0E7490;   /* teal    — bank branch    */
    --c-accent6:       #B45309;   /* amber   — trust          */
}

/* ══ base ══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    /* The app is one screen. Nothing may ever make the body a scroll container —
     * if it were, a wheel over a left-hand list whose own scroller had ended would
     * take the whole page with it. Every view scrolls inside itself (see #app);
     * anything transient lives here as position:fixed, never in flow. */
    overflow: hidden;
    background: var(--c-bg);
    color: var(--c-text);
    font: calc(13px * var(--type-scale))/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
}
/* The app is one screen, like the desktop window is: #app is exactly the viewport and
 * every view scrolls *inside* itself, so wheeling over a left-hand list can never scroll
 * the whole page (and print restores the free-flowing document — see @media print). */
#app { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.homescroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; flex: none; }
body.dragging::after {
    content: "Drop a .pna file to open it";
    position: fixed; inset: 12px; z-index: 9000;
    border: 2px dashed var(--c-accent);
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    display: grid; place-items: center;
    font: 600 calc(16px * var(--type-scale)) var(--serif); color: var(--c-accent);
    pointer-events: none;
}

.display { font-family: var(--serif); font-weight: 700; line-height: 1.2; }
.muted { color: var(--c-muted); }
.bad { color: var(--c-danger); }
.small { font-size: calc(12px * var(--type-scale)); }
.tiny { font-size: calc(10.5px * var(--type-scale)); }
.mono { font-family: var(--mono); }
.num { text-align: right; }
.b { font-weight: 700; }
.center { text-align: center; }
.spacer { flex: 1; }
.rule { height: 1px; background: var(--c-border); }
.heavyrule { height: 2px; background: var(--c-text); margin-top: 14px; }
.hstack { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.hstack.wrapline { flex-wrap: wrap; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.empty { padding: 26px 0; }
a { color: var(--c-accent); }

/* Ledger section head: uppercase label, then a hairline to the right edge. */
.sechead { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.sechead-label { font-size: calc(11.5px * var(--type-scale)); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sechead-rule { flex: 1; height: 1px; background: var(--c-border); }

.stamp {
    display: inline-block; border: 1.2px solid currentColor; padding: 1px 6px;
    font-size: calc(9.5px * var(--type-scale)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}

.card {
    background: var(--c-panel); border: 1px solid var(--c-border);
}
.card.dim { opacity: .55; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title { font-weight: 600; font-size: calc(13px * var(--type-scale)); }
.card-kicker { font-size: calc(10.5px * var(--type-scale)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent); }
.wrapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tile { min-width: 0; }
.regpanel { background: var(--c-panel); border: 1px solid var(--c-border); padding: 14px; margin: 14px 0; }
/* The rail down a document/checklist card's leading edge: green on file, amber N/A,
 * grey still owing. Colour carries status only where the brand says so. */
html[data-inks="colour"] .card.rail { position: relative; border-left-width: 4px; }
html[data-inks="colour"] .card.rail::before {
    content: ""; position: absolute; left: -4px; top: -1px; bottom: -1px; width: 4px;
    background: var(--rail-ink, var(--c-border));
}

/* ══ controls ══════════════════════════════════════════════════════════════ */

.btn {
    font: 600 calc(12px * var(--type-scale)) var(--sans); padding: 6px 14px; cursor: pointer;
    border: 1px solid var(--c-input_border); border-radius: 0;
    background: var(--c-btn_secondary); color: var(--c-text);
    white-space: nowrap;
}
.btn:hover:not(:disabled) { opacity: .82; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--c-btn_primary); border-color: var(--c-btn_primary); color: var(--c-onink); }
.btn.danger { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-onink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--c-muted); }
.btn.ghost:hover:not(:disabled) { color: var(--c-text); background: var(--c-highlight); }
.btn.tiny { font-size: calc(10px * var(--type-scale)); padding: 3px 7px; }
.btn.rm { color: var(--c-danger); }
.btn.stat { font-size: calc(10px * var(--type-scale)); padding: 4px 9px; margin-right: 5px; background: transparent; color: var(--c-muted); }
.btn.stat.on { color: var(--c-onink); }
.btn.signchip { font-size: calc(9.5px * var(--type-scale)); padding: 1px 6px; min-width: 30px; background: transparent; color: var(--c-muted); }
.btn.signchip.on { color: var(--c-onink); }
.btn.on { background: var(--c-highlight); color: var(--c-text); }
.statusbtns { display: flex; flex-wrap: wrap; gap: 2px 0; }
.signchips { display: flex; gap: 4px; }

.inp {
    font: calc(13px * var(--type-scale)) var(--sans); padding: 6px 8px; width: 100%;
    background: var(--c-input_bg); color: var(--c-text);
    border: 1px solid var(--c-input_border); border-radius: 0;
}
.inp:focus { outline: none; border-color: var(--c-accent); }
.inp:disabled { opacity: .55; }
.inp.area { resize: vertical; font-family: var(--sans); line-height: 1.5; }
select.inp { padding: 5px 6px; }
.fieldlabel { display: block; font-size: calc(11.5px * var(--type-scale)); color: var(--c-muted); margin: 12px 0 4px; }
label.inline { font-size: calc(12px * var(--type-scale)); color: var(--c-muted); white-space: nowrap; }
label.inline.wide { width: 240px; display: inline-block; }
label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--type-scale)); cursor: pointer; }
.cellchk { display: flex; justify-content: center; }
.cellcomputed { font-family: var(--mono); font-size: calc(12px * var(--type-scale)); padding-top: 6px; }
.cellcomputed.text { font-family: var(--sans); }
.cellcomputed.bad { color: var(--c-danger); }

/* ══ top bar ═══════════════════════════════════════════════════════════════ */

.topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 20px; border-bottom: 1px solid var(--c-border);
    background: var(--c-sidebar);
}
.brand { font: 700 calc(13px * var(--type-scale)) var(--serif); letter-spacing: .12em; cursor: pointer; }
.crumb {
    font-size: calc(12px * var(--type-scale)); color: var(--c-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch;
}
.topbar select.inp, .homebar select.inp { width: 150px; flex: none; }

/* ══ home ══════════════════════════════════════════════════════════════════ */

.home { max-width: 900px; margin: 0 auto; padding: 18px 44px 40px; width: 100%; }
.homebar { display: flex; align-items: center; gap: 10px; }
.masthead { text-align: center; margin-top: 8px; }
.masthead .logo { max-width: 300px; width: 100%; height: auto; }
.mastcaption { font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: .08em; color: var(--c-accent); padding: 6px 0; }
.homeactions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.register { margin-top: 4px; }
.regrow {
    display: flex; align-items: center; gap: 14px; padding: 11px 2px;
    border-bottom: 1px solid var(--c-border); cursor: pointer;
}
.regrow:hover { background: var(--c-highlight); }
.regidx { color: var(--c-muted); font-size: calc(13px * var(--type-scale)); }
.regbody { flex: 1; min-width: 0; }
.regname { font-size: calc(15.5px * var(--type-scale)); }
.regbody .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ terms gate ════════════════════════════════════════════════════════════ */

.termsgate { display: flex; flex-direction: column; height: 100vh; max-width: 900px; margin: 0 auto; width: 100%; }
.termshead {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 18px 26px 12px; flex-wrap: wrap;
}
.termsscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 26px; }
.termsbody { max-width: 720px; }
.termsfoot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 26px 18px; flex-wrap: wrap;
}
.termsgap { height: 7px; }
.termsrule { margin: 10px 0; }
.termsh1 { font: 700 calc(21px * var(--type-scale))/1.35 var(--serif); color: var(--c-accent); margin: 4px 0 4px; }
.termsh2 { font: 700 calc(16px * var(--type-scale))/1.4 var(--serif); margin: 18px 0 4px; }
.termsh3 { font: 700 calc(13.5px * var(--type-scale))/1.45 var(--serif); margin: 12px 0 4px; }
.termsp { font-size: calc(12.5px * var(--type-scale)); line-height: 1.55; margin: 1px 0; }
.termsli { margin-left: 12px; }
.termsind { margin-left: 16px; }
.termsnote {
    border-left: 3px solid var(--c-danger); background: var(--c-panel);
    padding: 11px 14px; margin: 6px 0; font-weight: 600;
}

.home.activate { max-width: 620px; }
.home.activate .lockbanner { margin: 14px 0; }
.home.activate .inp { font-size: calc(15px * var(--type-scale)); letter-spacing: .08em; text-align: center; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ══ client view ═══════════════════════════════════════════════════════════ */

/* One screen per view, like the desktop windows: the band and the bars stay put and
 * the register scrolls inside the view. */
.clientview, .engview, .dashview { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; overflow: hidden; }
.clientband { background: var(--c-sidebar); border-bottom: 1px solid var(--c-border); flex: none; }
.clientband-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 20px 34px 18px; flex-wrap: wrap;
}
.identity { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.identity .stamps { margin-top: 7px; flex-wrap: wrap; }
.clientactions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.clientmain { padding: 18px 34px 30px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.engregister { margin-top: 4px; }
.engrow {
    display: grid; grid-template-columns: 150px 1fr auto auto;
    gap: 18px; align-items: center; padding: 15px 0;
    border-bottom: 1px solid var(--c-border);
}
.engrow:hover { background: var(--c-highlight); }
.fyblock { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.engbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.progblock { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 120px; }
.pct { font-size: calc(15px * var(--type-scale)); color: var(--c-accent); }
.progtrack { width: 120px; height: 4px; background: var(--c-border); }
.progfill { height: 100%; background: var(--c-accent); }
.engactions { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ══ engagement view ═══════════════════════════════════════════════════════ */

.engbar { display: flex; align-items: center; gap: 8px; padding: 12px 24px 8px; flex: none; }
.lockbanner {
    background: var(--c-lock_bg); color: var(--c-lock_fg);
    padding: 7px 24px; font-size: calc(11px * var(--type-scale)); font-weight: 700; letter-spacing: .03em;
}

/* Manila folder tabs on a baseline rule; the open tab carries a red top edge and
   merges into the page below. */
.tabstrip {
    display: flex; gap: 2px; margin: 6px 24px 0;
    border-bottom: 1px solid var(--c-input_border);
    overflow-x: auto; scrollbar-width: thin;
    overscroll-behavior-x: contain;
    flex: none;
}
.tab {
    display: flex; align-items: center; gap: 7px;
    font: 700 calc(11px * var(--type-scale)) var(--sans); letter-spacing: .02em; white-space: nowrap;
    padding: 7px 13px 8px; cursor: pointer;
    background: transparent; color: var(--c-muted);
    border: 1px solid transparent; border-top-width: 2.5px;
    margin-bottom: -1px;
}
.tab:hover { background: var(--c-highlight); color: var(--c-text); }
.tab.on {
    border-top-color: var(--c-accent2);
    border-left-color: var(--c-input_border); border-right-color: var(--c-input_border);
    border-bottom-color: var(--c-bg);
    background: var(--c-bg); color: var(--c-text);
}
.tab .ltr {
    font-family: var(--mono); font-size: calc(9.5px * var(--type-scale)); color: var(--c-muted);
    border: 1px solid var(--c-border); padding: 0 3px;
}
.tab.on .ltr { color: var(--c-accent2); border-color: var(--c-accent2); }

/* The tab page scrolls here — never the document, so a wheel over the left list
 * (whose own scroller has ended) cannot take the whole page with it. */
.tabhost { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.tabpage { display: flex; flex-direction: column; min-height: 100%; }
/* A master-detail page fills the host exactly, so the list and detail panes get a
 * definite height and scroll themselves — a wheel over the left bar must never hand
 * the whole tab to .tabhost. Flowing pages (.scroll) keep growing instead. */
.tabpage:not(.scroll) { height: 100%; }
.tabpage-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px 8px; flex-wrap: wrap;
}
.tabpage-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabpage-body { padding: 0 24px 30px; flex: 1; min-height: 0; }
.tabpage:not(.scroll) .tabpage-body { display: flex; flex-direction: column; overflow: hidden; }
.sec-actions { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; flex-wrap: wrap; }

/* master-detail */
.split {
    display: grid; grid-template-columns: var(--split-left) 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px; flex: 1 1 0; min-height: 0;
}
.split-left, .split-right { min-height: 0; display: flex; flex-direction: column; overscroll-behavior: contain; }
.listpane { display: flex; flex-direction: column; min-height: 0; gap: 6px; flex: 1 1 0; overscroll-behavior: contain; }
.listpane:focus { outline: none; }
.listscroll { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 0; min-height: 0; }
.panelpane {
    background: var(--c-panel); border: 1px solid var(--c-border);
    padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain;
    flex: 1 1 0; min-height: 0;
}
.itemlist { display: flex; flex-direction: column; }
.itemrow {
    display: flex; gap: 0; background: var(--c-sidebar);
    margin: 1.5px 0; cursor: pointer;
}
.itemrow:hover { background: var(--c-chip_hover); }
.itemrow.sel { background: var(--c-list_sel); }
.itemrow.hiddenrow { opacity: .55; }
.strip { width: 3px; flex: none; }
.itembody { padding: 6px 8px; min-width: 0; }
.itemlabel { font-size: calc(12px * var(--type-scale)); }
.itemstatus { font-size: calc(9px * var(--type-scale)); font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.placeholder { color: var(--c-muted); text-align: center; padding: 60px 20px; }
.detail { padding: 14px 0; position: relative; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.detailhost { min-height: 100%; }
/* The status rail down the detail sheet's leading edge, in the item's own status ink —
 * the two halves of the tab agree at a glance. Drawn only where colour carries status
 * (the firm edition): Brand.StatusColour gates it, as on the desktop. */
html[data-inks="colour"] .detail.rail::before {
    content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px;
    background: var(--rail-ink, var(--c-border));
}
.menu { display: flex; flex-direction: column; gap: 6px; }

/* the whole-tab N/A overlay */
.na-host { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.na-overlay {
    position: absolute; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
    background: color-mix(in srgb, var(--c-bg) 96%, transparent);
}
.na-inner { max-width: 820px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; gap: 10px; }
.apl-rows { display: flex; flex-direction: column; gap: 8px; }
.apl-row {
    display: grid; grid-template-columns: 1fr auto 260px; gap: 10px; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--c-border);
}
.apl-label { font-size: calc(12px * var(--type-scale)); }

/* ══ register ledger ═══════════════════════════════════════════════════════ */

/* .regwrap keeps no scrollport of its own — a horizontal overflow is .tabhost's to
 * scroll, and leaving overflow visible is what lets the sticky header stick at all
 * (any value other than visible on one axis forces auto on the other). */
.reggrid, .vargrid, .matgrid { display: grid; gap: 0 8px; align-items: start; min-width: 100%; }
.reghead {
    font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: .04em; color: var(--c-accent);
    padding: 6px 0 5px; border-bottom: 1px solid var(--c-border); position: sticky; top: 0;
    background: var(--c-bg);
}
.regnum { font-family: var(--mono); font-size: calc(11px * var(--type-scale)); color: var(--c-muted); padding: 10px 0; }
.regcell { padding: 5px 0; border-bottom: 1px solid var(--c-border); }
.regnum { border-bottom: 1px solid var(--c-border); }
.reg-actions { display: flex; align-items: center; gap: 8px; }

/* variance grid */
.vargrid { grid-template-columns: minmax(240px, 2fr) 130px 130px 120px 90px minmax(180px, 1.4fr) 44px; }
.varhdr {
    background: var(--c-highlight); font-weight: 700; font-size: calc(11.5px * var(--type-scale));
    padding: 7px 8px; margin-top: 6px;
}
.varcell { padding: 4px 0; border-bottom: 1px solid var(--c-border); font-size: calc(12px * var(--type-scale)); }
.varcell.vartotal { font-weight: 700; background: var(--c-chip_active); }
.varcell.varflag { background: color-mix(in srgb, var(--c-status_ip) 12%, transparent); }
.flagmark { color: var(--c-accent2); margin-left: 4px; }
.btn.flag.hot { color: var(--c-danger); }

/* materiality grid */
.matgrid { grid-template-columns: minmax(240px, 1fr) 140px 140px 76px 150px 150px; }
.matlabel { font-size: calc(12.5px * var(--type-scale)); padding-top: 8px; }
.matbody { max-width: 1050px; }
.mono.big { font-size: calc(22px * var(--type-scale)); }
.figures { display: grid; grid-template-columns: 320px 160px; gap: 3px 10px; margin: 8px 0; font-size: calc(12.5px * var(--type-scale)); }

/* financials review checklist */
.finchecks { display: flex; flex-direction: column; }
.fincheck {
    display: grid; grid-template-columns: minmax(200px, 1.2fr) auto minmax(180px, 1fr) auto minmax(220px, 1.3fr);
    gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-border);
}
.fincheck-label { font-size: calc(12.5px * var(--type-scale)); }

/* progress bars on the review tab */
.progbars { display: grid; grid-template-columns: 220px 1fr 46px; gap: 6px 12px; align-items: center; margin-top: 8px; }
.progl { font-size: calc(12px * var(--type-scale)); }

/* outstanding list */
.outsec { margin-top: 12px; }
.outsec-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: calc(12px * var(--type-scale)); }
.outlist { margin: 4px 0 0; padding-left: 18px; }
.outlist li { display: flex; justify-content: space-between; gap: 16px; font-size: calc(12px * var(--type-scale)); padding: 2px 0; }
.outlist .why { color: var(--c-muted); white-space: nowrap; }

/* ══ attachments & open points ═════════════════════════════════════════════ */

.attpanel { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.attrow { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.annx {
    font-family: var(--mono); font-size: calc(9.5px * var(--type-scale)); color: var(--c-accent);
    border: 1px solid var(--c-accent); padding: 0 4px; white-space: nowrap;
}
.attname {
    flex: 1; min-width: 0; text-align: left; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-weight: 400;
}
.attsize { font-family: var(--mono); font-size: calc(10px * var(--type-scale)); color: var(--c-muted); white-space: nowrap; }
.att-none { font-size: calc(11px * var(--type-scale)); color: var(--c-status_na); padding: 2px 0; }

.oppanel { margin-top: 4px; }
.oppanel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oplist, .opgroup { display: flex; flex-direction: column; gap: 8px; }
.opcard {
    border: 1px solid var(--c-border); background: var(--c-panel);
    padding: 8px; display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
}
.opcard.cleared { opacity: .68; }
.opcard-head { display: flex; align-items: center; gap: 8px; }
.opcard-head .muted { flex: 1; }

/* ══ documents (letters, reports) ══════════════════════════════════════════ */

.auxhost { display: none; }
/* A fixed flex column that fills the viewport exactly: the pane inside gets a
 * definite height, so its two halves scroll independently and the context bar
 * stays put — the overlay never scrolls as one long page. */
.auxhost.open {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 500;
    background: var(--c-bg); overflow: hidden;
}
/* The open document windows, one chip each — the desktop keeps one window per key
 * alive at once and so does this bar. */
.auxswitch {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 20px 0;
}
.auxhost.open:not(:has(.auxpane)) .auxswitch { display: none; }
.auxpane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overscroll-behavior: contain; }
.auxpane[hidden] { display: none; }
.auxbar {
    display: flex; align-items: center; gap: 12px; padding: 8px 20px;
    border-bottom: 1px solid var(--c-border); background: var(--c-sidebar);
    position: sticky; top: 0; z-index: 2;
}
.docwin { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.docwin-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px 8px; flex-wrap: wrap;
}
.docwin-body {
    display: grid; grid-template-columns: minmax(360px, 46%) 1fr;
    gap: 20px; padding: 0 24px 30px; flex: 1 1 0; min-height: 0;
}
.docleft { overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.docright { overflow-y: auto; overscroll-behavior: contain; }
.docpreview { padding-bottom: 20px; }
.paper {
    background: var(--c-panel); border: 1px solid var(--c-border);
    padding: 34px 40px; box-shadow: var(--lift);
    font-family: var(--serif); font-size: calc(13px * var(--type-scale)); line-height: 1.62; color: var(--c-text);
}
.paper h2 { font-size: calc(13.5px * var(--type-scale)); margin: 18px 0 6px; }
.paper p { margin: 0 0 10px; text-align: justify; }
.paper ol { margin: 0 0 10px; padding-left: 26px; }
.paper li { margin-bottom: 7px; text-align: justify; }
.paper table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: calc(11.5px * var(--type-scale)); }
.paper th, .paper td { border: 1px solid var(--c-border); padding: 4px 7px; text-align: left; vertical-align: top; }
.paper .sig { white-space: pre-wrap; margin-top: 30px; }
.paper .num { text-align: right; }

.paraeditor { display: flex; flex-direction: column; }
.parahdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pararow { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--c-border); }
.pararow.off { opacity: .5; }
.pararow.lvl1 { padding-left: 20px; }
.pararow.lvl2 { padding-left: 40px; }
.paracheck { padding-top: 8px; }
.parabody { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.parameta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.defrow { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.defrow.off { opacity: .5; }
.matters { display: flex; flex-direction: column; gap: 6px; }
.matter { display: grid; grid-template-columns: 180px 1fr auto; gap: 6px; align-items: start; }
.reasons { margin: 4px 0 8px; padding-left: 18px; font-size: calc(12px * var(--type-scale)); color: var(--c-muted); }
.reasons li { margin-bottom: 3px; }

/* ══ dashboard ═════════════════════════════════════════════════════════════ */

.dashmain { padding: 18px 34px 40px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dashhead, .dashrow {
    display: grid; grid-template-columns: minmax(200px, 1.4fr) 180px 150px 110px 90px 170px minmax(180px, 1fr);
    gap: 14px; align-items: center;
}
.dashhead {
    font-size: calc(10px * var(--type-scale)); font-weight: 700; letter-spacing: .04em; color: var(--c-accent);
    padding: 10px 0 6px; border-bottom: 1px solid var(--c-border); margin-top: 14px;
}
.dashrow { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.dashrow.failrow { color: var(--c-muted); }
.dashrows { min-height: 60px; }
/* A due date inside thirty days warns before it turns red. */
.due-soon { color: var(--c-status_ip); font-weight: 700; }

/* ══ resources ═════════════════════════════════════════════════════════════ */

.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.linkcard {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--c-panel); border: 1px solid var(--c-border);
    padding: 10px 12px; text-decoration: none; color: var(--c-text); font-size: calc(12.5px * var(--type-scale));
}
.linkcard:hover { background: var(--c-highlight); }
.linkcard-title { min-width: 0; }

/* ══ modals, toasts, status ════════════════════════════════════════════════ */

.modal-back {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: rgba(20, 16, 8, .45); padding: 20px; overflow: auto;
}
.modal {
    background: var(--c-panel); border: 1px solid var(--c-border);
    box-shadow: var(--lift); width: 100%; max-width: 620px; max-height: 90vh;
    display: flex; flex-direction: column;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px 10px; border-bottom: 1px solid var(--c-border);
}
.modal-body { padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; }
.modal-msg { white-space: pre-wrap; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dlgrow { margin-bottom: 10px; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--c-panel); border: 1px solid var(--c-border); box-shadow: var(--lift);
    padding: 9px 14px; font-size: calc(12px * var(--type-scale)); max-width: 380px;
    animation: toastin .22s ease-out;
}
.toast.bad { border-color: var(--c-danger); color: var(--c-danger); }
.toast.out { opacity: 0; transition: opacity .35s; }
@keyframes toastin { from { transform: translateY(6px); opacity: 0; } }

.statusline {
    position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1100;
    background: var(--c-panel); border: 1px solid var(--c-border); box-shadow: var(--lift);
    padding: 8px 16px; font-size: calc(12px * var(--type-scale));
}
/* Fixed across the top, not in flow: a banner in flow under body would make the body
 * the page's scroll container again, and the whole-page scroll bug with it. */
.errbox {
    position: fixed; left: 0; right: 0; top: 0; z-index: 1300;
    background: var(--c-lock_bg); color: var(--c-lock_fg);
    padding: 10px 20px; font-size: calc(12.5px * var(--type-scale)); cursor: pointer;
}

/* ══ narrow screens — the strip and the split stack ════════════════════════ */

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split-left { max-height: 300px; }
    .docwin-body { grid-template-columns: 1fr; }
    .engrow { grid-template-columns: 120px 1fr; }
    .progblock, .engactions { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
    .dashhead { display: none; }
    .dashrow { grid-template-columns: 1fr 1fr; }
    .home { padding: 14px 18px 30px; }
    .clientband-inner, .clientmain, .dashmain { padding-left: 18px; padding-right: 18px; }
    .tabpage-head, .tabpage-body, .docwin-body, .docwin-head, .engbar { padding-left: 14px; padding-right: 14px; }
    .tabstrip { margin-left: 14px; margin-right: 14px; }
    .fincheck { grid-template-columns: 1fr; }
    .fincheck .oppanel { margin-top: 2px; }
    .apl-row { grid-template-columns: 1fr; }
    .matgrid { grid-template-columns: 1fr 1fr; }
    .figures { grid-template-columns: 1fr auto; }
    .progbars { grid-template-columns: 1fr auto; }
    .progbars .progtrack { display: none; }
}

@media print {
    /* Printing needs the document back as one free-flowing page: undo the screen's
     * fixed-height shell and let every pane grow, or only the visible part prints. */
    .topbar, .tabstrip, .engbar, .homebar, .auxbar, .btn { display: none !important; }
    body { background: #fff; color: #000; }
    html, body, #app { height: auto !important; overflow: visible !important; }
    .homescroll, .clientview, .engview, .dashview,
    .clientmain, .dashmain, .tabhost, .tabpage, .tabpage-body,
    .split, .split-left, .split-right, .listpane, .listscroll, .panelpane,
    .docwin, .docwin-body, .docleft, .docright { height: auto !important; overflow: visible !important; flex: none !important; min-height: 0 !important; }
    .auxhost.open { position: static !important; overflow: visible !important; }
    html[data-inks="colour"] .card.rail::before,
    html[data-inks="colour"] .detail.rail::before { left: 0; }
}