/* ============================================================
   TaxCo-Pilot — design system · "Mechanism"
   Warm-paper compliance workspace with dark-slate chrome. Flat, hairline,
   tabular; figures set in mono, brand set in serif. Deep-green primary.
   Light (paper, default) + dark (slate panels). Accent overridable
   (Settings → Accent). From the Mechanism Tax design (Aug-2026).
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Mechanism type — self-hosted variable fonts (latin subsets from the design bundle) ---- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/instrument-sans.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.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-500.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/source-serif-4.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/source-serif-4-italic.woff2') format('woff2')}

:root{
  --accent:#2f5a3b;          /* Mechanism deep green · overridden by JS tweak (Settings → Accent) */
  --accent-ink:#f6f5f1;      /* text that sits ON accent */
  --font-ui:'Instrument Sans','Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace;
  --font-display:'Source Serif 4',Georgia,serif;   /* brand mark + display headings */
  --rs:7px; --r:10px; --rl:14px; --rxl:18px;
  --dens:1;                   /* density multiplier (tweak) */
  /* fixed dark-slate CHROME (topbar) — constant across both themes, per the design */
  --chrome-bg:#1b1e22; --chrome-line:#2a2e34; --chrome-text:#e8e6df; --chrome-text2:#c9c6bd;
  --chrome-pill:#22262b; --chrome-tile:#f3f1e9; --chrome-tile-ink:#16150f;
}

/* ---- DARK ---- Mechanism slate: near-black canvas · slate panels · soft-green accent ---- */
:root[data-theme="dark"]{
  --bg:#101113; --bg-grain:#0d0e10; --surface:#1b1e22; --surface2:#22262b; --raised:#262a30;
  --text:#e8e6df; --text2:#a7a49b; --text3:#8b8880;
  --line:rgba(232,230,223,.07); --line2:rgba(232,230,223,.13); --line3:rgba(232,230,223,.24);
  /* #424: static fallbacks (default Mechanism-green accent) — a custom property holding an unsupported
     color-mix() poisons every var() use on pre-2023 engines, so the real values live in the
     @supports block below and these literals keep accent tinting + readable accent text everywhere. */
  --accent-bg:rgba(143,199,158,.14);
  --accent-line:rgba(143,199,158,.36);
  --accent-text:#8fc79e;
  --green:#8fc79e; --green-bg:rgba(143,199,158,.13); --green-line:rgba(143,199,158,.34);
  --warn:#d8a44a; --warn-bg:rgba(216,164,74,.14); --warn-line:rgba(216,164,74,.36);
  --red:#e08a81; --red-bg:rgba(224,138,129,.14); --red-line:rgba(224,138,129,.38);
  --shadow:0 30px 70px -28px rgba(0,0,0,.7);
  --btn-pri-bg:#e8e6df; --btn-pri-ink:#16150f;
  --sel:rgba(143,199,158,.22);
}
/* ---- LIGHT (default) ---- Mechanism paper: warm off-white · hairline warm lines · deep green ---- */
:root[data-theme="light"]{
  --bg:#f6f5f1; --bg-grain:#f0eee6; --surface:#ffffff; --surface2:#f3f1e9; --raised:#ffffff;
  --text:#1a1915; --text2:#4a483f; --text3:#8a877c;
  --line:rgba(46,44,38,.09); --line2:rgba(46,44,38,.16); --line3:rgba(46,44,38,.30);
  /* #424: static fallbacks (see the dark-theme note) — real values in the @supports block below. */
  --accent-bg:rgba(47,90,59,.12);
  --accent-line:rgba(47,90,59,.44);
  --accent-text:#1f3d28;
  --green:#2f5a3b; --green-bg:rgba(47,90,59,.10); --green-line:rgba(47,90,59,.30);
  --warn:#a0741b; --warn-bg:rgba(216,164,74,.14); --warn-line:rgba(160,116,27,.32);
  --red:#b5473a; --red-bg:rgba(224,138,129,.16); --red-line:rgba(181,71,58,.30);
  --shadow:0 24px 70px -30px rgba(23,22,15,.28);
  --btn-pri-bg:#17160f; --btn-pri-ink:#ffffff;
  --sel:rgba(47,90,59,.18);
}
/* #424: accent tinting follows the user-picked --accent on engines that support color-mix()
   (2023+); older engines keep the static forest-green fallbacks above. */
@supports (color: color-mix(in oklab, red 50%, blue)){
  :root[data-theme="dark"]{
    --accent-bg:color-mix(in oklab, var(--accent) 16%, transparent);
    --accent-line:color-mix(in oklab, var(--accent) 38%, transparent);
    --accent-text:color-mix(in oklab, var(--accent) 72%, #ffffff);
  }
  :root[data-theme="light"]{
    --accent-bg:color-mix(in oklab, var(--accent) 13%, transparent);
    --accent-line:color-mix(in oklab, var(--accent) 44%, transparent);
    --accent-text:color-mix(in oklab, var(--accent) 78%, #000000);
  }
}

html,body{height:100%}
body{
  font-family:var(--font-ui);
  font-size:13.5px; line-height:1.5; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; overflow:hidden;
  font-feature-settings:"ss01","cv01";
}
::selection{background:var(--sel)}
.fig,.num,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:inherit}
button,input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.012em;line-height:1.18}

/* scrollbars */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--line3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================ TOP BAR
   Mechanism: the topbar is DARK SLATE CHROME in both themes — the constant frame around the
   paper (light) or slate (dark) canvas. Chrome tokens are theme-independent. */
.topbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:54px;
  border-bottom:1px solid var(--chrome-line);background:var(--chrome-bg);color:var(--chrome-text);flex-shrink:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;
  font-family:var(--font-display);color:var(--chrome-text)}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--chrome-tile);position:relative;flex-shrink:0;
  display:grid;place-items:center;color:var(--chrome-tile-ink);font-family:var(--font-display);font-size:15px;font-weight:700}
.brand b{font-weight:600}
.brand .dim{color:var(--chrome-text2);font-weight:500}
.tb-divider{width:1px;height:22px;background:var(--chrome-line);flex-shrink:0}

/* segmented "view as" — sits on the chrome */
.seg{display:flex;background:var(--chrome-pill);border:1px solid var(--chrome-line);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--chrome-text2);font-size:12.5px;font-weight:560;
  padding:5px 13px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.seg button .si{font-size:14px;line-height:0}
.seg button:hover{color:var(--chrome-text)}
.seg button.on{background:var(--chrome-tile);color:var(--chrome-tile-ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
:root[data-theme="dark"] .seg button.on{box-shadow:0 1px 2px rgba(0,0,0,.18)}

.ctx{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.topbar .pill{background:var(--chrome-pill);border-color:var(--chrome-line);color:var(--chrome-text2)}
.topbar .pill b{color:var(--chrome-text)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);
  border-radius:100px;padding:4px 11px;font-size:11.5px;font-weight:560;white-space:nowrap;color:var(--text2)}
.pill b{color:var(--text);font-weight:600}
.pill .ent{color:var(--accent-text);font-weight:600}
.topbar .pill .ent{color:#8fc79e;font-weight:600}
.spacer{flex:1}

.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);
  color:var(--text2);display:grid;place-items:center;cursor:pointer;font-size:15px;flex-shrink:0}
.icon-btn:hover{color:var(--text);border-color:var(--line2)}
.theme-tog{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface2)}
.theme-tog button{width:32px;height:30px;border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:14px;display:grid;place-items:center}
.theme-tog button.on{background:var(--raised);color:var(--accent-text)}
.theme-tog button:hover{color:var(--text)}

/* ============================================================ BUTTONS */
.btn{border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:8px;
  padding:6px 13px;font-size:12.5px;font-weight:540;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface2);border-color:var(--line3)}
.btn.primary{background:var(--btn-pri-bg);color:var(--btn-pri-ink);border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(.94)}
.btn.gold{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;color:var(--text2);padding-left:8px;padding-right:8px}
.btn.ghost:hover{background:var(--surface2);color:var(--text)}
.btn.sm{padding:4px 9px;font-size:11.5px;border-radius:7px}
.btn.lg{padding:9px 18px;font-size:14px}
.btn .ki{font-size:14px;line-height:0}

/* ============================================================ BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.b-green{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.b-red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.b-gold{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-line)}
.b-gray{background:var(--surface2);color:var(--text2);border-color:var(--line)}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ============================================================ CARDS */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:16px 18px}
.card+.card{margin-top:13px}
.card-h{font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);
  margin-bottom:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;font-size:12.5px}
.kv .k{color:var(--text2)}
.kv .v{font-weight:600}
.kv .v.fig{font-weight:500;font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums}
.kv.total{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.kv .big{font-size:17px;color:var(--accent-text);font-weight:700}
.muted{font-size:11.5px;color:var(--text3);line-height:1.6}

/* ============================================================ APP LAYOUT */
#app{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.surface{flex:1;min-height:0;display:none}
.surface.on{display:flex}

/* generic 3-col workbench / 2-col chat scaffolds defined in their modules */
.rail{width:236px;flex-shrink:0;border-right:1px solid var(--line);background:var(--bg-grain);
  overflow-y:auto;display:flex;flex-direction:column}
.rail-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);
  padding:14px 16px 6px}
.rail-item{display:flex;align-items:center;gap:10px;padding:7px 16px;cursor:pointer;color:var(--text2);
  font-size:12.5px;border-left:2px solid transparent}
.rail-item:hover{background:var(--surface2);color:var(--text)}
.rail-item.on{background:var(--surface);color:var(--text);border-left-color:var(--accent);font-weight:560}
.rail-item .ri-ico{font-size:15px;width:18px;text-align:center;color:var(--text3);flex-shrink:0}
.rail-item.on .ri-ico{color:var(--accent-text)}
.rail-item .ri-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-item .ri-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3)}

/* ============================================================ DATA TABLES */
table.dt{width:100%;border-collapse:collapse;font-size:12.5px}
table.dt th{text-align:left;padding:8px 11px;font-weight:600;color:var(--text3);
  border-bottom:1px solid var(--line);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface2);white-space:nowrap;position:sticky;top:0;z-index:1}
table.dt td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
table.dt tbody tr:hover{background:var(--surface2)}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.computed{color:var(--accent-text);font-weight:600;cursor:pointer;border-bottom:1px dotted var(--accent-line)}
.computed:hover{background:var(--accent-bg)}
.extracted{cursor:pointer;border-bottom:1px dotted var(--line3);color:var(--text)}
.extracted:hover{background:var(--surface2)}
tr.subtotal td{border-top:1px solid var(--line2);font-weight:700;background:var(--surface2)}
.adj-pos{color:var(--green);font-weight:600}
.adj-neg{color:var(--red);font-weight:600}
.cell-in{width:90px;border:1px solid var(--line2);border-radius:6px;padding:4px 7px;font-size:12px;
  font-family:var(--font-mono);text-align:right;background:var(--bg);color:var(--text)}
.cell-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.cell-in:disabled{opacity:.45;cursor:not-allowed}
select.cell-sel{border:1px solid var(--line2);border-radius:6px;padding:3px 6px;font-size:11.5px;background:var(--bg);color:var(--text)}
.chk{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}

/* row review states */
tr.row-accepted{background:var(--green-bg)!important}
tr.row-rejected{opacity:.4}
tr.row-rejected td{text-decoration:line-through}
tr.row-edited{background:var(--warn-bg)!important}

/* accept / edit / reject */
.aer{font-size:12px;display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.aer span.act{cursor:pointer;padding:2px 6px;border-radius:6px;user-select:none;font-weight:600;line-height:1}
.aer .a{color:var(--green)} .aer .a:hover{background:var(--green-bg)}
.aer .e{color:var(--accent-text)} .aer .e:hover{background:var(--accent-bg)}
.aer .r{color:var(--red)} .aer .r:hover{background:var(--red-bg)}
.aer .sep{color:var(--line2);cursor:default;padding:0 1px}

/* provenance / citation chips */
.cite{font-family:var(--font-mono);font-size:10px;color:var(--text2);background:var(--surface2);
  border:1px solid var(--line);padding:1px 6px;border-radius:5px;display:inline-block;white-space:nowrap;cursor:pointer}
.cite:hover{border-color:var(--line2);color:var(--text)}
.flagchip{font-size:10px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);padding:1px 6px;border-radius:5px;white-space:nowrap}

/* gates / tie-outs */
.gate{font-size:11.5px;padding:9px 12px;border-radius:9px;margin-bottom:9px;display:flex;gap:9px;align-items:flex-start;line-height:1.5;border:1px solid transparent}
.gate .gi{flex-shrink:0;font-size:14px;line-height:1.1}
.gate.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.gate.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.gate.bad{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.gate b{font-weight:700}

/* rule registry */
.rule-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.rule-row:last-child{border-bottom:none}
.rule-row .rk{color:var(--text2)}
.rule-row .rv{font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============================================================ MODAL (trace) */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:120;padding:22px}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line2);border-radius:var(--rl);max-width:540px;width:100%;
  max-height:84vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:var(--surface);z-index:1}
.modal-h b{font-size:14px}
.modal-x{cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:4px 8px;border-radius:6px}
.modal-x:hover{background:var(--surface2);color:var(--text)}
.modal-b{padding:16px 18px}
.trace-head{background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:9px;padding:12px 14px;margin-bottom:14px}
.trace-head .v{font-size:22px;font-weight:700;color:var(--accent-text);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.trace-head .l{font-size:12px;color:var(--text2);margin-top:1px}
.tnode{border-left:2px solid var(--line2);margin-left:6px;padding:9px 0 9px 16px;position:relative}
.tnode::before{content:"";position:absolute;left:-5px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tnode .tl{font-size:12.5px;font-weight:560;display:flex;justify-content:space-between;gap:10px}
.tnode .tv{font-family:var(--font-mono);font-weight:700;color:var(--accent-text)}
.tnode .tm{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.55}
.kind-tag{font-family:var(--font-mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle}
.k-computed{background:var(--accent-bg);color:var(--accent-text)}
.k-extracted{background:var(--surface2);color:var(--text2);border:1px solid var(--line)}
.k-manual{background:var(--warn-bg);color:var(--warn)}
.k-carryforward{background:var(--accent-bg);color:var(--accent-text)}

/* ============================================================ utility */
.flex{display:flex} .ac{align-items:center} .jc{justify-content:center} .jb{justify-content:space-between}
.gap6{gap:6px} .gap8{gap:8px} .gap10{gap:10px} .gap12{gap:12px}
.wrap{flex-wrap:wrap}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.tar{text-align:right}
.fade-in{transform:none;transition:transform .24s ease}
@starting-style{.fade-in{transform:translateY(6px)}}
@keyframes fade{from{transform:translateY(5px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

/* ============================================================ LOGIN GATE */
body[data-auth="out"] > .topbar,
body[data-auth="out"] > #app{display:none!important}
body[data-auth="in"] #login{display:none!important}

.login{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;grid-template-columns:1.04fr .96fr}

/* --- left editorial panel --- */
.login-aside{position:relative;overflow:hidden;border-right:1px solid var(--line);
  background:var(--surface);
  padding:52px 60px;display:flex;flex-direction:column;justify-content:space-between}
.login-aside::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px);
  -webkit-mask:linear-gradient(to bottom, transparent, #000 16% 70%, transparent);
          mask:linear-gradient(to bottom, transparent, #000 16% 70%, transparent)}
.login-aside > *{position:relative}
.brand.lg{font-size:18px}
.brand.lg .mark{width:27px;height:27px;border-radius:7px;font-size:14px}

.la-mid{max-width:460px}
.la-head{font-size:33px;line-height:1.14;letter-spacing:-.025em;font-weight:640}
.la-sub{margin-top:16px;font-size:14.5px;line-height:1.62;color:var(--text2);max-width:430px;text-wrap:pretty}
.la-list{list-style:none;margin-top:30px;display:flex;flex-direction:column}
.la-list li{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--text2)}
.la-list li:last-child{border-bottom:1px solid var(--line)}
.la-list .ln{font-family:var(--font-mono);font-size:11px;color:var(--accent-text);font-weight:600;padding-top:2px;flex-shrink:0}
.la-list b{color:var(--text);font-weight:620}

.la-foot{font-size:11px;color:var(--text3);letter-spacing:.01em;display:flex;align-items:center;gap:9px}
.la-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 3px var(--green-bg)}

/* --- right form panel --- */
.login-main{position:relative;display:flex;align-items:center;justify-content:center;padding:40px}
.login-tog{position:absolute;top:26px;right:30px}
.login-card{width:100%;max-width:372px;opacity:1}
@keyframes lg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.lc-head{font-size:25px;letter-spacing:-.02em}
.lc-sub{font-size:13.5px;color:var(--text2);margin-top:5px;margin-bottom:22px}

.role-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.role-seg button{text-align:left;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);
  padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .12s,background .12s}
.role-seg button:hover{border-color:var(--line3)}
.role-seg button.on{border-color:var(--accent);background:var(--accent-bg)}
.role-seg .rs-t{font-size:13px;font-weight:620;color:var(--text)}
.role-seg .rs-d{font-size:10.5px;color:var(--text3);line-height:1.3}
.role-seg button.on .rs-d{color:var(--accent-text)}

.field{margin-bottom:15px}
.field > label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text3);margin-bottom:7px}
.field input{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);
  padding:11px 13px;font-size:14px;color:var(--text);transition:border-color .12s,box-shadow .12s}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.field-pass{position:relative}
.field-link{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;
  color:var(--text3);text-decoration:none}
.field-link:hover{color:var(--accent-text)}

.lc-go{width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:6px}
.lc-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text3);font-size:11px}
.lc-or::before,.lc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.lc-sso{width:100%;justify-content:center;padding:10px;font-size:13px}
.lc-sso .sso-ico{font-size:15px;line-height:0}
.lc-foot{font-size:11.5px;color:var(--text3);margin-top:22px;line-height:1.6;text-align:center}
.lc-foot a{color:var(--accent-text);text-decoration:none}
.lc-foot a:hover{text-decoration:underline}

/* --- guided dossier setup: the drop surface lights up while dragging --- */
.cpa-dropzone{transition:border-color .15s, background .15s}
.cpa-dropzone:hover{border-color:var(--accent-line)}
.cpa-dropzone.drag{border-color:var(--accent-text);background:var(--accent-bg)}

/* --- topbar account chip + collapsible menu (all top-right controls live behind it) --- */
/* account chip + menu live ON the dark chrome (the menu itself is slate in both themes, per the design) */
.acct-wrap{position:relative;flex-shrink:0}
.acct{display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid transparent;
  background:transparent;cursor:pointer;padding:4px 8px;border-radius:9px;font:inherit}
.acct:hover,.acct[aria-expanded="true"]{background:var(--chrome-pill);border-color:var(--chrome-line)}
.acct-av{width:24px;height:24px;border-radius:50%;background:rgba(143,199,158,.16);color:#8fc79e;
  border:1px solid rgba(143,199,158,.36);display:grid;place-items:center;font-size:11px;font-weight:700;
  font-family:var(--font-mono)}
.acct-av.lg{width:34px;height:34px;font-size:14px}
.acct-name{font-size:12.5px;font-weight:560;color:var(--chrome-text2)}
.acct-caret{font-size:9px;color:var(--chrome-text2);transition:transform .15s}
.acct[aria-expanded="true"] .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:236px;display:none;
  background:var(--chrome-bg);border:1px solid var(--chrome-line);border-radius:12px;padding:6px;
  color:var(--chrome-text);box-shadow:0 14px 40px rgba(0,0,0,.24)}
.acct-menu.open{display:block}
.am-id{display:flex;align-items:center;gap:10px;padding:9px 10px 8px}
.am-id-t{display:flex;flex-direction:column;min-width:0}
.am-id-t b{font-size:13px;font-weight:640;color:var(--chrome-text);overflow:hidden;text-overflow:ellipsis}
.am-id-t span{font-size:11.5px;color:#8b8880;overflow:hidden;text-overflow:ellipsis}
.am-sep{border-top:1px solid var(--chrome-line);margin:5px 6px}
.am-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--chrome-text2);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.am-row:hover{background:var(--chrome-pill);color:var(--chrome-text)}
.am-row.am-static{cursor:default;justify-content:space-between}
.am-row.am-static:hover{background:transparent}
.am-lab{color:#8b8880;font-size:12px}
.am-ico{width:18px;display:grid;place-items:center;color:#8b8880;font-size:13px}
.am-row:hover .am-ico{color:#8fc79e}
.acct-menu .theme-tog{background:var(--chrome-pill);border-color:var(--chrome-line)}
.acct-menu .theme-tog button{color:#8b8880}
.acct-menu .theme-tog button.on{background:var(--chrome-tile);color:var(--chrome-tile-ink)}
.am-out{color:var(--text2)}
.am-out:hover{color:#e2557a}
.am-out:hover .am-ico{color:#e2557a}

@media (max-width:880px){
  .login{grid-template-columns:1fr}
  .login-aside{display:none}
  .acct-name{display:none}
}


/* ============================================================
   MECHANISM — full-design completion (PR 2 of the reskin)
   The mockup's surfaces: warm PAPER (light) or slate (dark) — the THEME
   TOGGLE now governs the whole app, preparer bench included. The bench
   chrome (rail · tab header · provenance column · sign-in gate) reads
   the theme tokens plus two bench tokens (--rail-bg/--rail-line) that
   keep the dark values pixel-identical to the original slate design.
   (Previously the bench was FORCED slate in both themes, which made the
   Light toggle a no-op for preparers — the team read it as broken.)
   ============================================================ */
:root[data-theme="dark"]{ --rail-bg:#16181b; --rail-line:#2a2e34; }
:root[data-theme="light"]{ --rail-bg:#f0eee6; --rail-line:rgba(46,44,38,.14); }

/* ---- the workbench rail: the design's nav column ---- */
.rail{background:var(--rail-bg);border-right-color:var(--rail-line)}
.rail-h{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.12em;color:var(--text3)}
.rail-item{color:var(--text2)}
.rail-item:hover{background:var(--surface2);color:var(--text)}
.rail-item.on{background:var(--surface);color:var(--text)}
.rail-item .ri-ico{color:var(--text3)}

/* ---- the per-tab header: the design's toolbar strip, full-bleed on the canvas ---- */
.wb-head{background:var(--surface);border-bottom:1px solid var(--rail-line);
  margin:-22px -26px 18px;padding:14px 22px;max-width:none}
:root[data-density="compact"] .wb-head{margin:-16px -18px 16px;padding:12px 18px}
:root[data-density="comfy"] .wb-head{margin:-30px -36px 20px;padding:16px 24px}
.wb-title{color:var(--text)}
.wb-sub{color:var(--text2)}
.wb-sub b{color:var(--text)}

/* ---- the gate: theme backdrop, PAPER sign-in card (the design's centerpiece) ---- */
.login-aside{background:var(--rail-bg);border-right-color:var(--rail-line)}
.login-card{
  /* paper island on the slate gate — its own token scope so every field inside reads paper */
  --bg:#f6f5f1; --surface:#ffffff; --surface2:#f3f1e9; --raised:#ffffff;
  --text:#1a1915; --text2:#4a483f; --text3:#8a877c;
  --line:rgba(46,44,38,.09); --line2:rgba(46,44,38,.16); --line3:rgba(46,44,38,.30);
  --accent-bg:rgba(47,90,59,.12); --accent-line:rgba(47,90,59,.44); --accent-text:#1f3d28;
  --btn-pri-bg:#17160f; --btn-pri-ink:#ffffff; --sel:rgba(47,90,59,.18);
  background:#f6f5f1;color:var(--text);border-radius:16px;
  /* hairline so the paper card stays defined on the paper (light) gate too */
  border:1px solid rgba(46,44,38,.14);
  padding:24px 26px;box-shadow:0 24px 70px rgba(0,0,0,.35);
}
@supports (color: color-mix(in oklab, red 50%, blue)){
  .login-card{
    --accent-bg:color-mix(in oklab, var(--accent) 13%, transparent);
    --accent-line:color-mix(in oklab, var(--accent) 44%, transparent);
    --accent-text:color-mix(in oklab, var(--accent) 78%, #000000);
  }
}
.lc-head{font-family:var(--font-display);font-size:20px;font-weight:600}
.login-card .field input{background:var(--surface);border-color:#d9d5ca}
.login-card .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,90,59,.12)}

/* ---- shared polish: design focus ring, modal radius ---- */
.field input:focus{box-shadow:0 0 0 3px var(--sel)}
.modal{border-radius:var(--rxl)}


/* ---- the Mechanism PROVENANCE PANEL: cross-references land here, not in a popup ----
   The right rail is the design's side column (theme-following since the light-toggle fix).
   The resting state invites the click; a selected figure renders its full trace with the
   design's treatments: stacked head with the big mono value, SOURCE cards, the serif-italic
   quoted snippet, and numbered trace steps with mono indices. */
/* .wb-right background/border are owned by components.css (var(--bg-grain)/var(--line)) —
   both theme-following; a second declaration here was dead weight that loads earlier. */
.wb-right-tabs{border-bottom-color:var(--rail-line)}
.wb-right-tabs button{color:var(--text3)}
.wb-right-tabs button:hover{color:var(--text)}
.wb-right-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}

.prov-empty{text-align:center;margin:26px 8px 18px;padding:0 10px}
.prov-empty .pe-ico{font-size:22px;color:var(--text3)}
.prov-empty .pe-t{font-size:12.5px;font-weight:600;margin-top:8px;color:var(--text)}
.prov-empty .pe-s{font-size:11.5px;color:var(--text3);margin-top:4px;line-height:1.6}

.prov-trace{animation:fadeUp .25s ease}
.prov-trace .trace-head{display:block;border-bottom:0;padding-bottom:0;margin-bottom:10px}
.prov-trace .trace-head .l{font-size:13px;font-weight:700;color:var(--text)}
.prov-trace .trace-head .v{display:block;font-family:var(--font-mono);font-size:22px;margin-top:6px;color:var(--text)}
.prov-trace .tsrc{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-top:10px}
.prov-trace .tsrc-h{font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.prov-trace .tsrc-doc{font-size:12px;font-weight:600;margin-top:5px;color:var(--text)}
.prov-trace .tsrc-snip{font-family:var(--font-display);font-style:italic;font-size:11.5px;color:var(--text2);
  border-left:2px solid var(--line3);padding-left:9px;margin-top:7px;line-height:1.6}
.prov-trace .tnode{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;margin-top:7px;
  counter-increment:provstep;position:relative;padding-left:34px}
.prov-trace .tnode::before{content:counter(provstep,decimal-leading-zero);position:absolute;left:11px;top:10px;
  font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.prov-trace{counter-reset:provstep}
.prov-trace .conf-panel{background:var(--surface);border:1px solid var(--line2);border-radius:10px}

/* ---- R3: citation chips open the controlling text ---- */
.cite{cursor:pointer}
.cite:hover{text-decoration:underline;text-underline-offset:2px}
a.cite-link{text-decoration:none}
a.cite-link:hover{text-decoration:underline}

/* ---- R4: the edit-ledger layer of a trace ---- */
.tledger{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;padding:9px 11px;margin:8px 0;background:var(--surface2)}
.tledger .tsrc-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.tled-main{font-size:13px}
.tled-st{font-size:10px;border:1px solid var(--line2);border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.tled-pending{color:var(--warn)}
.tled-accepted{color:var(--green)}
.tled-rejected{color:var(--red)}
.tled-meta{font-size:11px;color:var(--text2);margin-top:3px}
.tled-hist{font-size:11px;color:var(--text3);border-top:1px dashed var(--line);margin-top:6px;padding-top:5px}