/* EOFY Workbench
   Ledger vernacular: hard centre gutter, green-bar row banding,
   monospace for figures only. */

:root{
  --paper:#F4F5F0; --bar:#E3EAE0; --card:#FBFBF8;
  --ink:#1B2A23; --ink-2:#4A5B52; --ink-3:#7C8C83;
  --rule:#C9D0C6; --rule-hard:#9EAA9E;
  --out:#8C3A2B; --in:#2F5D46; --flag:#A8741A;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
main{min-width:0}

.rail{background:var(--card);border-right:1px solid var(--rule-hard);padding:20px 0 0}
.brand{padding:0 18px 18px;border-bottom:1px solid var(--rule)}
.brand h1{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em}
.brand p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}

.pick{padding:14px 18px;border-bottom:1px solid var(--rule)}
.pick label{display:block;font-size:11px;color:var(--ink-3);margin:0 0 4px}
.pick label+select{margin-bottom:9px}
.pick select{width:100%;font-family:var(--sans);font-size:12.5px;padding:5px 6px;
  border:1px solid var(--rule-hard);background:var(--paper);color:var(--ink);border-radius:2px}
.pick select:disabled{color:var(--ink-2);background:var(--bar)}

nav{padding:12px 0 30px}
nav a{display:flex;gap:10px;align-items:baseline;padding:7px 18px;color:var(--ink-2);
  text-decoration:none;font-size:13px}
nav a .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);width:14px;flex:none}
nav a:hover{background:var(--bar);color:var(--ink)}
nav a.on{background:var(--bar);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--ink)}
nav .grp{padding:14px 18px 4px;font-size:11px;color:var(--ink-3);
  border-top:1px solid var(--rule);margin-top:10px}

/* ---------- reconciliation strip ---------- */
.recon{border-bottom:1px solid var(--rule-hard);background:var(--card);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 26px;gap:26px}
.recon .side{display:flex;flex-direction:column}
.recon .side.r{align-items:flex-end;text-align:right}
.recon .lab{font-size:11px;color:var(--ink-3)}
.recon .fig{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.recon .fig.out{color:var(--out)} .recon .fig.in{color:var(--in)}
.recon .mid{text-align:center;padding:0 22px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.recon .mid .fig{font-size:19px}
.recon .tie{font-size:11px;color:var(--in);margin-top:2px}
.recon .tie.bad{color:var(--out)}

/* ---------- page furniture ---------- */
.head{padding:22px 26px 0;display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.head h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.head h2+p,.head p{margin:3px 0 0;font-size:13px;color:var(--ink-2);max-width:64ch}
.wrap{padding:0 26px 44px}
.wrap.narrow{max-width:460px}
h3{font-size:15px;font-weight:600;margin:30px 0 10px}

.btn{display:inline-block;font-family:var(--sans);font-size:13px;padding:7px 14px;
  border:1px solid var(--rule-hard);background:var(--card);color:var(--ink);
  border-radius:2px;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.pri:hover{background:#0F1A15}
.btn.small{font-size:12px;padding:4px 9px}
.btn.wide{width:100%;text-align:center}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--flag);outline-offset:1px}

.flash{margin:14px 26px 0;padding:10px 14px;border-left:3px solid var(--ink-3);
  background:var(--card);font-size:13px}
.flash-ok{border-color:var(--in)} .flash-bad{border-color:var(--out)} .flash-warn{border-color:var(--flag)}
.note{margin:22px 0 0;padding:12px 14px;border-left:3px solid var(--flag);
  background:var(--card);font-size:13px;color:var(--ink-2);max-width:74ch}
.hint{font-size:11px;color:var(--ink-3)}
.lede{color:var(--ink-2);max-width:60ch}
.opt{font-size:11px;color:var(--ink-3);font-weight:400}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
thead th{text-align:left;font-weight:500;font-size:11px;color:var(--ink-3);
  padding:0 10px 6px;border-bottom:1px solid var(--rule-hard);white-space:nowrap}
thead th.num{text-align:right}
tbody td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr.band{background:var(--bar)}
.c-date{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.c-desc{max-width:40ch}
.c-desc .hint{display:block;margin-top:2px}
.c-out,.c-in,.c-num{font-family:var(--mono);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.c-out{color:var(--out)} .c-in{color:var(--in)}
.gutter{width:1px;padding:0;background:var(--rule-hard)}
.c-act{white-space:nowrap;text-align:right}

.conf{display:inline-block;font-size:11px;padding:2px 7px;border-radius:2px;white-space:nowrap}
.conf-high{background:#DBE7DE;color:var(--in)}
.conf-med{background:#E8E2CE;color:#6B5A20}
.conf-low{background:#F0DFC9;color:var(--flag)}
.conf-none{background:#EBD8D3;color:var(--out)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  margin-top:22px;background:var(--rule-hard);border:1px solid var(--rule-hard)}
.tile{background:var(--card);padding:16px 18px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:3px}
.tile:hover{background:var(--bar)}
.tile .fig{font-family:var(--mono);font-size:26px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .lab{font-size:12px;color:var(--ink-3)}

/* ---------- forms ---------- */
.field{margin:0 0 14px}
.field label{display:block;font-size:12px;color:var(--ink-2);margin:0 0 4px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:14px;
  padding:8px 9px;border:1px solid var(--rule-hard);background:var(--card);
  color:var(--ink);border-radius:2px}
.field input:focus,.field select:focus{border-color:var(--ink)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:8px;align-items:center;font-size:13px;margin:0 0 16px}
.check input{width:auto}
.inline{display:inline-block;margin-left:4px}
.popform{position:absolute;z-index:5;background:var(--card);border:1px solid var(--rule-hard);
  padding:10px;display:flex;gap:6px;margin-top:4px;box-shadow:0 2px 0 rgba(27,42,35,.08)}
.popform input{font-size:12px;padding:5px 7px;border:1px solid var(--rule-hard);border-radius:2px}
.addform{max-width:620px}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}

/* ---------- standalone sheets: login, installer ---------- */
body.plain{background:var(--paper)}
body.centred{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.sheet{background:var(--card);border:1px solid var(--rule-hard);padding:30px 34px 34px;
  margin:34px auto;max-width:640px;width:100%}
.sheet.narrow{max-width:380px;margin:0}
.sheet h1{font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.sheet h2{font-size:14px;font-weight:600;margin:26px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--rule)}
.sheet .flash{margin:14px 0}
.steps{font-size:13px;color:var(--ink-2);padding-left:18px}
.warn{border-left:3px solid var(--out);background:var(--paper);padding:10px 14px;font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--rule-hard)}
  nav{display:flex;flex-wrap:wrap;padding:10px 8px 14px}
  nav a{padding:6px 10px} nav .grp{width:100%;border-top:0;padding-top:8px}
  .recon{grid-template-columns:1fr;gap:14px}
  .recon .mid{border:0;padding:0;text-align:left}
  .recon .side.r{align-items:flex-start;text-align:left}
  .row{grid-template-columns:1fr}
  .c-desc .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- progress track ---------- */
.progress{margin:18px 0 0;border:1px solid var(--rule-hard);background:var(--card)}
.progress .track{display:flex;height:22px}
.progress .seg{display:flex;align-items:center;justify-content:center;font-size:11px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--card);
  overflow:hidden;white-space:nowrap;min-width:0}
.seg.done{background:var(--in)}
.seg.ok{background:#7FA08C}
.seg.rev{background:var(--flag)}
.seg.todo{background:var(--rule);color:var(--ink-2)}
.progress .key{display:flex;gap:18px;flex-wrap:wrap;padding:7px 12px;
  border-top:1px solid var(--rule);font-size:12px;color:var(--ink-2)}
.progress .key i{display:inline-block;width:9px;height:9px;margin-right:6px;font-style:normal}

/* ---------- filter bar ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 0;
  padding:10px 12px;border:1px solid var(--rule);background:var(--card)}
.filters select,.filters input{font-family:var(--sans);font-size:12.5px;padding:5px 7px;
  border:1px solid var(--rule-hard);background:var(--paper);color:var(--ink);border-radius:2px}
.filters input{min-width:180px}

/* ---------- profit and loss ---------- */
.pl .c-code{font-family:var(--mono);font-size:12px;color:var(--ink-3);width:58px}
.pl .c-num{width:112px}
.pl .c-delta{font-family:var(--mono);font-size:12px;text-align:right;width:74px}
.pl .c-delta.up{color:var(--in)} .pl .c-delta.down{color:var(--out)}
.pl .sec td{padding-top:20px;font-size:11px;color:var(--ink-3);
  border-bottom:1px solid var(--rule-hard)}
.pl .tot td{border-top:1px solid var(--rule-hard);border-bottom:2px solid var(--ink);
  font-weight:600;padding-top:10px;background:transparent}
.pl .tot .c-num{font-size:15px}

/* row select in the review queue */
tbody td select{font-family:var(--sans);font-size:12.5px;padding:4px 6px;max-width:230px;
  border:1px solid var(--rule-hard);background:var(--card);color:var(--ink);border-radius:2px}

/* wide sample tables scroll rather than squash */
.scroll{overflow-x:auto;margin-top:18px}
.scroll table{margin-top:0;min-width:100%}
textarea{width:100%;font-family:var(--mono);font-size:12.5px;padding:9px;
  border:1px solid var(--rule-hard);background:var(--card);color:var(--ink);
  border-radius:2px;resize:vertical}
textarea:focus{border-color:var(--ink)}