/* ═══════════════════════════════════════════════════════════════════════
   Credit Readiness — local web application
   System fonts only, so it renders identically offline.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F7F8F7;
  --surface:#FFFFFF;
  --surface-2:#FAFBFA;
  --surface-3:#F0F3F1;

  --ink:#121815;
  --ink-2:#414B46;
  --muted:#6E7A74;
  --faint:#98A39D;

  --line:#E4E9E5;
  --line-2:#D2DAD5;

  --accent:#136B52;
  --accent-2:#0D4F3C;
  --accent-soft:#E4F1EB;
  --accent-ink:#0B4536;
  --on-accent:#FFFFFF;

  --amber:#8A5A0B;   --amber-soft:#FBF0D9;
  --oxide:#96322B;   --oxide-soft:#FBE3DF;
  --slate:#41567C;   --slate-soft:#E7EDF6;

  --r:8px; --r-sm:5px;
  --shadow:0 1px 2px rgba(18,24,21,.04), 0 8px 24px -18px rgba(18,24,21,.28);

  --f:-apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:"SF Mono", "Cascadia Code", "Cascadia Mono", Consolas,
      "Liberation Mono", monospace;

  --sidebar:236px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.hide{display:none !important;}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh;}

.side{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{padding:22px 22px 18px; display:flex; align-items:baseline; gap:8px;}
.brand b{font-size:15px; font-weight:650; letter-spacing:-.02em;}
.brand span{color:var(--accent); font-weight:500;}
.nav{padding:4px 12px; display:flex; flex-direction:column; gap:2px;}
/* The hidden attribute, made to mean what it says.
 *
 * `.nav a{display:flex}` outranks the browser's own `[hidden]{display:none}`,
 * so hideRestrictedNav() set the attribute on every restricted link and every
 * one of them stayed on screen -- staff saw 登录账号 and 操作留痕 throughout,
 * which is the precise thing that function exists to prevent. !important
 * because the rule has to beat whatever display a component sets, and a
 * hidden element has no layout to negotiate. */
[hidden]{display:none !important;}

.nav a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500;
}
.nav a:hover{background:var(--surface-3);}
.nav a.on{background:var(--accent-soft); color:var(--accent-ink);}
.nav .ico{width:16px; text-align:center; opacity:.75; font-size:13px;}
.side-foot{margin-top:auto; padding:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:8px;}
.lang{display:flex; background:var(--surface-3); border-radius:var(--r-sm); padding:2px;}
.lang button{
  border:0; background:transparent; padding:4px 10px; border-radius:4px;
  font-size:12px; font-weight:600; color:var(--muted); cursor:pointer;
}
.lang button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06);}

/* ── main ──────────────────────────────────────────────────────────────── */
.main{min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(247,248,247,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding:0 34px; height:60px; display:flex; align-items:center; gap:16px;
}
.topbar h1{font-size:17px; font-weight:620; letter-spacing:-.02em; margin:0;}
.topbar .sub{color:var(--muted); font-size:13px;}
.spacer{flex:1;}
.wrap{padding:28px 34px 64px; max-width:1320px; width:100%;}

/* ── primitives ────────────────────────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
.card-h{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px;}
.card-h h2{font-size:14px; font-weight:620; margin:0; letter-spacing:-.01em;}
.card-b{padding:20px;}

.btn{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  padding:7px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:550;
  cursor:pointer; transition:background .12s, border-color .12s;
}
a.btn{text-decoration:none; display:inline-block;}
.btn:hover{background:var(--surface-2); border-color:var(--faint);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2);}
.btn.ghost{border-color:transparent; background:transparent;}
.btn.ghost:hover{background:var(--surface-3);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.sm{padding:4px 10px; font-size:12.5px;}

.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; font-weight:600; color:var(--muted);}
.input, select.input, textarea.input{
  border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r-sm);
  padding:8px 11px; font-size:13.5px; width:100%;
}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px;
  font-size:11.5px; font-weight:650; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2);
}
.pill.ok{background:var(--accent-soft); color:var(--accent-ink);}
/* Finished and in the books. Solid rather than tinted: the neutral pill's
   background (--surface-3) is itself faintly green, so a pale green tint read
   as the same grey as "excluded". */
.pill.done{background:var(--accent); color:var(--on-accent);}
.pill.warn{background:var(--amber-soft); color:var(--amber);}
.pill.bad{background:var(--oxide-soft); color:var(--oxide);}
.pill.info{background:var(--slate-soft); color:var(--slate);}

.band{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; font-weight:700; font-size:14px;
}
.band.A{background:var(--accent-soft); color:var(--accent-ink);}
.band.B{background:var(--slate-soft); color:var(--slate);}
.band.C{background:var(--amber-soft); color:var(--amber);}
.band.D{background:var(--oxide-soft); color:var(--oxide);}

.empty{padding:56px 20px; text-align:center; color:var(--muted);}
.empty h3{margin:0 0 6px; font-size:15px; color:var(--ink-2); font-weight:600;}

/* ── tables ────────────────────────────────────────────────────────────── */
table.t{width:100%; border-collapse:collapse;}
table.t th{
  text-align:left; font-size:11.5px; font-weight:650; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); padding:10px 20px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.t td{padding:13px 20px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.t tbody tr:last-child td{border-bottom:none;}
table.t tbody tr.click{cursor:pointer;}
table.t tbody tr.click:hover{background:var(--surface-2);}
table.t td.r, table.t th.r{text-align:right;}

/* ── assessment workspace ──────────────────────────────────────────────── */
.work{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start;}
@media (max-width:1120px){ .work{grid-template-columns:1fr;} }

.dim{margin-bottom:14px;}
.dim-h{display:flex; align-items:baseline; gap:12px; padding:0 2px 9px;}
.dim-h h3{font-size:13.5px; font-weight:650; margin:0; letter-spacing:-.01em;}
.dim-h .q{font-size:12.5px; color:var(--muted); font-style:italic;}
.dim-h .pct{margin-left:auto; font-size:12.5px; color:var(--muted);}

.cp{border-bottom:1px solid var(--line);}
.cp:last-child{border-bottom:none;}
.cp-row{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:12px 18px; cursor:pointer;}
.cp-row:hover{background:var(--surface-2);}
.cp-id{font-family:var(--f-mono); font-size:12px; color:var(--faint); font-weight:600;}
.cp-name{font-weight:550; font-size:13.5px;}
.cp-tests{font-size:12.5px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cp-right{display:flex; align-items:center; gap:8px;}
.gate{font-size:11px; color:var(--oxide); font-weight:700;}

.cp-body{padding:2px 18px 18px 84px; display:grid; gap:14px;}
.why{background:var(--surface-3); border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 13px; font-size:12.5px; color:var(--ink-2); line-height:1.6;}
.rules{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
.rules > div{background:var(--surface); padding:9px 11px;}
.rules .k{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);}
.rules .v{font-size:12.5px; margin-top:3px; color:var(--ink-2);}
.outcomes{display:flex; gap:6px; flex-wrap:wrap;}
.oc{border:1px solid var(--line-2); background:var(--surface); padding:6px 13px;
  border-radius:99px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;}
.oc:hover{border-color:var(--faint);}
.oc.on.pass{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink);}
.oc.on.flag{background:var(--amber-soft); border-color:transparent; color:var(--amber);}
.oc.on.fail{background:var(--oxide-soft); border-color:transparent; color:var(--oxide);}
.oc.on.not_applicable{background:var(--slate-soft); border-color:transparent; color:var(--slate);}
.oc.on.no_data{background:var(--surface-3); border-color:transparent; color:var(--ink-2);}
.meta-row{display:grid; grid-template-columns:200px 1fr; gap:12px;}
.evi{font-size:12px; color:var(--muted);}
.evi b{color:var(--ink-2); font-weight:600;}
.fix{font-size:12.5px; color:var(--ink-2);}

/* ── result rail ───────────────────────────────────────────────────────── */
.rail{position:sticky; top:84px; display:grid; gap:14px;}
.result-hero{padding:20px; display:flex; flex-direction:column; gap:10px;}
.result-hero .top{display:flex; align-items:center; gap:12px;}
.result-hero .bandbig{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:26px; font-weight:700;
}
.result-hero .lab{font-size:14.5px; font-weight:620; letter-spacing:-.01em;}
.result-hero .pct{font-size:12.5px; color:var(--muted);}
.result-hero .mean{font-size:12.5px; color:var(--ink-2); line-height:1.6;}
.capnote{background:var(--oxide-soft); color:var(--oxide); font-size:12px;
  padding:9px 11px; border-radius:var(--r-sm); line-height:1.55;}

.bars{display:grid; gap:9px;}
.bar-row{display:grid; grid-template-columns:1fr 42px; gap:10px; align-items:center; font-size:12.5px;}
.bar{height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--accent); border-radius:99px;}
.bar i.low{background:var(--oxide);}
.bar i.mid{background:var(--amber);}
.bar-row .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-row .pv{text-align:right; color:var(--muted); font-family:var(--f-mono); font-size:11.5px;}

.blocklist{display:grid; gap:8px;}
.blockitem{display:flex; gap:9px; align-items:flex-start; font-size:12.5px;}
.blockitem .bid{font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--oxide);
  background:var(--oxide-soft); padding:1px 6px; border-radius:4px; flex:none;}

/* ── modal ─────────────────────────────────────────────────────────────── */
.veil{position:fixed; inset:0; background:rgba(18,24,21,.34); display:flex;
  align-items:center; justify-content:center; padding:24px; z-index:60;}
.modal{background:var(--surface); border-radius:var(--r); width:100%; max-width:520px;
  box-shadow:0 24px 64px -24px rgba(0,0,0,.4); max-height:88vh; overflow:auto;}
.modal .card-b{display:grid; gap:14px;}

/* ── report ────────────────────────────────────────────────────────────── */
.report{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:36px 44px; box-shadow:var(--shadow); max-width:820px;}
.report h1{font-size:22px; letter-spacing:-.02em; margin:0 0 4px;}
.report h2{font-size:16px; margin:26px 0 8px; letter-spacing:-.01em;}
.report h3{font-size:13.5px; margin:20px 0 8px; color:var(--ink-2);}
.report p{margin:0 0 10px; font-size:13.5px; line-height:1.68;}
.report ul{margin:0 0 12px; padding-left:20px; font-size:13.5px; line-height:1.68;}
.report blockquote{margin:12px 0; padding:11px 15px; background:var(--surface-3);
  border-left:3px solid var(--line-2); font-size:12.5px; color:var(--ink-2);}
.report table{width:100%; border-collapse:collapse; font-size:12.5px; margin:12px 0;}
.report th,.report td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);}
.report th{color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
.report hr{border:0; border-top:1px solid var(--line); margin:24px 0;}
.report strong{font-weight:650;}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:99px;
  font-size:13px; box-shadow:0 8px 24px -8px rgba(0,0,0,.5); z-index:80;}
.toast.bad{background:var(--oxide);}


/* ── client tabs ───────────────────────────────────────────────────────── */
/* Scrolls sideways, without a bar to say so.
 *
 * overflow-x:auto leaves overflow-y computing to auto as well, which is where
 * the second set of arrows down the right-hand edge came from -- a vertical
 * scrollbar on a strip one line tall. It is pinned to hidden here.
 *
 * The horizontal bar is hidden rather than removed: the strip still scrolls,
 * the active tab is scrolled into view on every render, and the wheel is
 * mapped onto it in app.js, because a strip that cannot be reached with a
 * plain mouse is worse than a visible bar. */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{flex-shrink:0; white-space:nowrap;}
.tabs a{padding:9px 15px; font-size:13.5px; font-weight:550; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs a:hover{color:var(--ink);}
.tabs a.on{color:var(--accent-ink); border-bottom-color:var(--accent);}
/* The strip with its arrows: the line and the gap move to the wrapper so the
   arrows sit on the same baseline as the tabs. */
/* The ledger's last column -- reverse, ask for a correction -- stays at the
   right edge while a wide table scrolls under it, so it is never off screen. */
.ledger th.act,.ledger td.act{position:sticky; right:0; background:var(--surface, #fff);
  box-shadow:-8px 0 8px -8px rgba(0,0,0,.18);}
/* Buttons at the end of a row stay on one line, side by side: squeezed by a
   long note, "打开处理" broke in two and "退回" fell under it. */
/* The entry a link from the review queue was about. */
tr.focus-row td{background:#FFF6DA;}
/* The user guide: contents on the left, the section on the right. */
.help{display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start;}
.help-toc{position:sticky; top:12px; display:flex; flex-direction:column; gap:8px;}
.help-toc nav{display:flex; flex-direction:column;}
.help-toc nav a{padding:6px 10px; border-radius:6px; color:var(--ink-2); text-decoration:none; font-size:13.5px;}
.help-toc nav a:hover{background:var(--surface-2);}
.help-toc nav a.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600;}
.help-body{line-height:1.75; max-width:860px;}
.help-body h2{margin-top:0;} .help-body h3{margin:18px 0 6px;}
.help-body li{margin:4px 0;} .help-body table{margin:8px 0 12px;}
.help-role{margin-right:4px; font-size:11.5px;}
.help-faq dt{font-weight:600; margin-top:12px;} .help-faq dd{margin:4px 0 0 0; color:var(--ink-2);}
.help-nav{display:flex; justify-content:space-between; margin-top:24px; gap:10px;}
@media (max-width:800px){ .help{grid-template-columns:1fr;} .help-toc{position:static;} }
/* Holiday card: the average daily wage the preparer still has to enter. */
.hreminder{margin-top:14px; border-left:3px solid var(--accent);}
.hadw-missing{border-color:var(--bad, #c0392b); box-shadow:0 0 0 1px var(--bad, #c0392b) inset;}
.row-actions{display:flex; flex-direction:column; gap:5px; align-items:flex-end; white-space:nowrap;}
/* Stacked, the same width, so the pair reads as one block. */
.row-actions .btn{white-space:nowrap; min-width:76px; justify-content:center; text-align:center;}
.row-actions .return-why{white-space:normal; text-align:left; max-width:280px;}
.tabs-wrap{display:flex; align-items:flex-end; border-bottom:1px solid var(--line); margin-bottom:22px;}
.tabs-wrap > .tabs{flex:1; min-width:0; border-bottom:none; margin-bottom:0;}
.tab-arrows{display:flex; gap:4px; flex-shrink:0; padding:0 0 5px 8px;}
.tabs-wrap.fits .tab-arrows{display:none;}
.tab-arrow{width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:var(--surface, #fff);
  color:var(--ink); font-size:17px; line-height:1; cursor:pointer; padding:0;}
.tab-arrow:hover:not(:disabled){border-color:var(--accent); color:var(--accent-ink);}
.tab-arrow:disabled{opacity:.35; cursor:default;}

/* ── kpis & trend ──────────────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px;}
.kpi{padding:16px 18px;}
.kpi .k{font-size:11.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--faint);}
.kpi .v{font-size:25px; font-weight:640; letter-spacing:-.03em; margin-top:5px;}
.kpi .v.pos{color:var(--accent);} .kpi .v.neg{color:var(--oxide);}
.kpi .d{font-size:12px; color:var(--muted); margin-top:2px;}

.two{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px;}
@media (max-width:1000px){ .two{grid-template-columns:1fr;} }
.lg{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted);}
.sw{width:9px; height:9px; border-radius:2px; display:inline-block;}
.sw.inc{background:var(--accent);} .sw.exp{background:var(--line-2);}
.trend{display:flex; align-items:flex-end; gap:10px; height:150px;}
.tcol{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%;}
.tstack{flex:1; width:100%; display:flex; align-items:flex-end; gap:3px;}
.tstack i{flex:1; border-radius:3px 3px 0 0; min-height:2px;}
.tstack i.inc{background:var(--accent);} .tstack i.exp{background:var(--line-2);}
.tlab{font-size:10.5px; color:var(--faint); font-family:var(--f-mono);}

/* ── filters & ledger ──────────────────────────────────────────────────── */
.filters{display:flex; gap:12px; align-items:flex-end; padding:14px 16px; margin-bottom:14px;}
.filters .field{min-width:150px;} .filters .grow{flex:1;}
table.t.ledger td{padding:10px 14px; font-size:13px;}
table.t.ledger th{padding:9px 14px;}
table.t.ledger .sub{color:var(--muted); font-size:12.5px;}
table.t.ledger .strong{font-weight:620;}
table.t.ledger .nowrap{white-space:nowrap;}
table.t.ledger tfoot td{border-top:1.5px solid var(--line-2); border-bottom:none;
  background:var(--surface-2); font-weight:620; padding:12px 14px;}
table.t.crit td{padding:9px 12px; font-size:13px; border-bottom:1px solid var(--line);}
table.t.crit .sub{color:var(--muted); font-size:12.5px;}

.qmark{border:1px solid var(--line-2); background:var(--surface); color:var(--muted);
  width:17px; height:17px; border-radius:50%; font-size:11px; font-weight:700;
  line-height:1; cursor:pointer; padding:0; margin-left:5px; vertical-align:middle;}
.qmark:hover{border-color:var(--accent); color:var(--accent);}


/* ── payroll ───────────────────────────────────────────────────────────── */
.input.tiny{width:78px; padding:5px 8px; text-align:right; font-size:12.5px;}
.hint{margin-top:12px; font-size:12.5px; color:var(--muted);}
.stubwrap .card-b.stub{padding:22px 26px;}
.stub-top{display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:12px; border-bottom:1.5px solid var(--ink);}
.stub-top .co{font-size:15px; font-weight:650; letter-spacing:-.02em;}
.stub .sub{font-size:11px; color:var(--muted);}
.stub .r{text-align:right;}
.stub-meta{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line);}
.ssec{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 6px;}
.srow{display:flex; justify-content:space-between; gap:16px; padding:4px 0; font-size:13px;}
.stub-net{display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding:13px 0; border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink); font-weight:650;}
.stub-net .num{font-size:22px; letter-spacing:-.03em; color:var(--accent);}
@media print{
  .side,.topbar,.card-h,.veil{background:#fff !important;}
  .side,.topbar,.tabs,.tab-arrows,.btn{display:none !important;}
  .veil{position:static; padding:0;} .modal{box-shadow:none; max-width:none;}
}


/* ── framework browser inside the ? ────────────────────────────────────── */
.cplist{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm);}
.cpitem{padding:11px 13px; border-bottom:1px solid var(--line);}
.cpitem:last-child{border-bottom:none;}
.cpitem-h{display:flex; align-items:center; gap:8px; margin-bottom:3px;}
.cpid{font-family:var(--f-mono); font-size:11.5px; font-weight:700; color:var(--faint);}
.cpitem .sub{font-size:12.5px; color:var(--muted);}
.rules.mini{margin-top:8px;}
.rules.mini .v{font-size:11.5px;}

/* ── daily hours grid ──────────────────────────────────────────────────── */
.daybtn{border:1px solid var(--line-2); background:var(--surface); color:var(--muted);
  border-radius:4px; width:20px; height:20px; font-size:11px; line-height:1; cursor:pointer;
  padding:0; margin-right:7px; vertical-align:middle;}
.daybtn:hover{border-color:var(--accent); color:var(--accent);}
tr.dayrow td{background:var(--surface-2); padding:14px 18px !important;}
.daygrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px;}
.daycell{display:flex; flex-direction:column; gap:3px;}
.daycell .dl{font-size:11px; color:var(--muted); font-family:var(--f-mono);}
.daycell .input{padding:5px 8px; text-align:right; font-size:12.5px;}
.dayfoot{display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap;}
.dayfoot .sub{font-size:12px; color:var(--muted);}
.wk{display:inline-block; background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:2px 10px; margin-right:6px; font-size:11.5px; color:var(--ink-2);}
.wk em{color:var(--accent); font-style:normal; font-weight:600;}


/* ── evidence ──────────────────────────────────────────────────────────── */
.clip{font-size:11px; color:var(--accent); background:var(--accent-soft);
  border-radius:99px; padding:1px 7px; font-weight:600;}
.evbox{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
  background:var(--surface);}
.evhead{display:flex; align-items:center; gap:10px; font-size:12.5px; margin-bottom:6px;}
.evhead .btn{position:relative; overflow:hidden;}
.evlist{display:grid; gap:4px;}
.evrow{display:flex; align-items:center; gap:10px; font-size:12.5px;
  padding:5px 0; border-top:1px solid var(--line);}
.evrow:first-child{border-top:none;}
.evname{color:var(--accent); text-decoration:none; font-weight:550;}
.evname:hover{text-decoration:underline;}
.evrow .sub{color:var(--muted); font-size:11.5px;}


/* ── archive ───────────────────────────────────────────────────────────── */
.pathbar{display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:18px;}
.pathbar .sub{font-size:12px; color:var(--muted); white-space:nowrap;}
.pathcode{font-family:var(--f-mono); font-size:12px; color:var(--ink-2);
  background:var(--surface-3); padding:4px 9px; border-radius:var(--r-sm);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ── holiday regime badges ─────────────────────────────────────────────── */
.pill.reg-general{background:var(--surface-3); color:var(--ink-2);}
.pill.reg-construction{background:rgba(217,119,6,.12); color:var(--warn);}
.pill.reg-excluded{background:var(--surface-3); color:var(--muted); text-decoration:line-through;}
.fhint{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5;}
.pill.warnpill{background:rgba(217,119,6,.12); color:var(--warn); margin-left:6px;}

/* ── employee roster ───────────────────────────────────────────────────── */
.toolbar{display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:18px;}
.seg{display:inline-flex; background:var(--surface-3); border-radius:var(--r-sm); padding:2px;}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px;
  padding:5px 12px; border-radius:calc(var(--r-sm) - 2px); cursor:pointer;}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06);}
.notice{display:flex; gap:12px; padding:14px 16px; margin-bottom:18px;
  border-left:3px solid var(--warn);}
.card.pad{padding:16px;}

/* ── the practice's own books ──────────────────────────────────────────── */
/* Deliberately a different colour from every client screen. Whoever is looking
   must be able to tell whose money this is without reading the title. */
.navsep{height:1px; background:var(--line); margin:10px 12px;}
#nav a.own.on{background:rgba(109,90,207,.12); color:#6d5acf;}
#nav a.own.on .ico{color:#6d5acf;}
.ownbar{display:flex; align-items:center; gap:8px; font-size:12px; color:#6d5acf;
  background:rgba(109,90,207,.08); border-radius:var(--r-sm);
  padding:8px 12px; margin-bottom:14px;}
.ownbar::before{content:"\25C6"; font-size:9px;}
.two.one{grid-template-columns:1fr;}

/* A labelled group heading says HOW the group differs, not only that it does. */
.navgroup{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); padding:16px 14px 6px; font-weight:600;}

/* work board */
.dim-h h3.neg{color:var(--bad);}
td.neg, span.num.neg{color:var(--bad); font-weight:600;}

/* holiday panel */
.hcard{padding:14px 16px; margin-bottom:10px;}
.hrow{display:flex; justify-content:space-between; gap:18px; align-items:flex-start;}
.hfacts{text-align:right; font-size:13px; white-space:nowrap;}
/* The average-day-wage working is one long line; on a phone it wraps. */
@media (max-width: 800px){ .hfacts{white-space:normal; overflow-wrap:anywhere; min-width:0;} }
.hfacts .warn{color:var(--warn);}
.hctrl{display:flex; gap:14px; align-items:end; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line); flex-wrap:wrap;}
.hctrl label{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px;}
/* The label is muted and inputs inherit colour: what the preparer typed read
   as grey as the computed hint beside it (2026-10-05). Typed is ink; the hint
   is grey italic. */
.hctrl .input{color:var(--ink);}
.hctrl .input::placeholder{color:var(--muted); font-style:italic; opacity:1;}
.input.sm{padding:5px 8px; font-size:12.5px;}

/* bank panel */
.filters{display:flex; gap:12px; align-items:end; flex-wrap:wrap;}
label.btn input[type=file]{display:none;}

/* context bar + switcher */
.ctxbar{display:flex; align-items:center; gap:12px; padding:8px 12px; margin-bottom:12px;
  border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius:var(--r-sm); position:sticky; top:0; z-index:5; backdrop-filter:blur(6px);}
.ctxname{font-weight:650; color:var(--accent);}
.ctxbar kbd{font:inherit; font-size:10.5px; padding:1px 5px; border:1px solid var(--line);
  border-radius:4px; margin-left:4px; color:var(--muted);}
.modal.switcher{padding:12px; width:min(520px, 92vw);}
.modal.switcher .input{font-size:15px; padding:10px 12px;}
.sw-h{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:10px 8px 4px;}
.sw-item{padding:8px 10px; border-radius:var(--r-sm); cursor:pointer;}
.sw-item.on, .sw-item:hover{background:var(--surface-3);}
.sw-item.own{color:#6d5acf;}

/* first group heading sits flush under the brand */
.nav .navgroup:first-child{padding-top:4px;}

/* a name you can click is a name you can edit */
.namelink{cursor:pointer; border-bottom:1px dashed transparent;}
.namelink:hover{border-bottom-color:var(--muted);}

/* manual deduction overrides */
td.manual{color:var(--ink); font-weight:600;}
.mbadge{font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--warn);
  border:1px solid var(--warn); border-radius:3px; padding:0 4px; margin-left:6px; vertical-align:middle;}
.input.tiny.note{width:120px; margin-left:4px; font-size:11px;}

/* working-day schedule */
.restrow{display:flex; gap:6px;}
.restday{display:flex; align-items:center; justify-content:center; width:34px; height:30px;
  border:1px solid var(--line); border-radius:var(--r-sm); font-size:12px; cursor:pointer;
  color:var(--muted); user-select:none;}
.restday.on{background:var(--surface-3); color:var(--ink); font-weight:600; border-color:var(--muted);}
.restday input{display:none;}
.cal{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-top:16px;}
.cal-h{font-size:10.5px; color:var(--faint); text-align:center; padding-bottom:4px;}
.cal-d{position:relative; min-height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:4px 5px; cursor:pointer; background:var(--surface);}
.cal-d:hover{border-color:var(--muted);}
.cal-d.off{background:var(--surface-3); color:var(--muted);}
.cal-d .dn{font-size:11.5px; font-variant-numeric:tabular-nums;}
.cal-d .dk{position:absolute; left:5px; bottom:3px; font-size:9px; color:var(--warn);}
.cal-d.k-vacation, .cal-d.k-sick, .cal-d.k-unpaid, .cal-d.k-holiday{border-color:var(--warn);}


/* How many are waiting, on the navigation link itself. A queue nobody is told
   about gets checked when somebody remembers -- which, for a practice of
   three, is the day the client asks where their invoice went. */
.nav a .navbadge{
  margin-left:auto; min-width:18px; padding:1px 6px; border-radius:9px;
  background:var(--oxide, #96322B); color:#fff;
  font-size:11px; font-weight:600; line-height:16px; text-align:center;
}


/* Why something came back. It is the one thing on that row the preparer is
   there to read, so it is not a grey aside. */
.return-why{
  padding:6px 9px; border-radius:6px; text-align:left;
  background:#FBE3DF; color:var(--oxide, #96322B); font-size:.86rem;
}
.return-why .sub{display:block; opacity:.75; font-size:11px;}


/* An entry that still has its document. Marked rather than merely clickable:
   which entries can produce their paperwork is the question being asked when
   somebody is looking for it. */
.txn-doc{
  color:var(--accent-ink, #0B4536); text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.txn-doc:hover{background:var(--accent-soft, #EAF4EF);}


/* A correction and the entry it corrects. Both are marked, because either one
   read alone says something untrue. */
.pill.rev{background:#FBE3DF;color:var(--oxide,#96322B)}
.pill.reversed{background:var(--surface-3,#f4f6f5);color:var(--muted);
  text-decoration:line-through}


/* The closing date, above the ledger it governs. A rule people meet only as a
   refusal is an obstacle; a rule they can see is a control. */
.closing-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:9px 14px;border-radius:8px;font-size:13px;
  background:var(--surface-3,#f4f6f5);color:var(--muted);
  border:1px solid var(--line,#E4E9E5)}
.closing-bar.on{background:var(--accent-soft,#EAF4EF);color:var(--accent-ink,#0B4536);
  border-color:var(--accent-ink,#0B4536)}
.closing-bar span{flex:1 1 auto;min-width:0}


/* The totals belong to the filter, the rows to one page of it. Said plainly,
   because a footer that quietly means something other than the rows above it
   is how a page of three thousand entries gets read as three thousand. */
.cut{color:var(--muted)}

.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:12px 14px;border-top:1px solid var(--line,#E4E9E5)}
.pager .spacer{flex:1 1 auto}
.pager .gap{color:var(--muted);padding:0 2px}

.pager label.sub{display:flex;align-items:center;gap:6px}
.pager .input.sm{padding:3px 6px;font-size:12px;width:auto}

/* A balance owed the other way. Shown rather than dashed out: the figure is
   money the company has to hand back, and a dash is how it stopped being
   anybody's job. */
.owed{color:var(--oxide,#96322B);font-weight:600}

/* Deleting something a customer may be holding. Distinct from primary so it is
   never the button a hand lands on out of habit. */
.btn.danger{color:var(--oxide,#96322B);border-color:var(--oxide,#96322B);background:transparent}
.btn.danger:hover{background:var(--oxide,#96322B);color:#fff}