/* Simple UI work-tool: the standard look for every dashboard and back-office screen ⭐ v3.42 (work-tool.md).
   A fixed shell (48 px top bar, 52 px rail, 26 px status bar; only the work area scrolls), the facts on one line, a list
   with its tools on one row, and the open item in a 440 px pane beside it. Load after ui.css and the language file
   (Technical suits it best) and set <html data-wt>. Tokens only from ui.css and the language; kinds k1–k6 can be renamed
   by the project (see work-tool.md, "Kinds"). First built for a supplier-reconciliation tool, 22 Oct 2026. */

:root{
  --wt-top:48px; --wt-rail:52px; --wt-rail-open:208px; --wt-status:26px; --wt-pane:440px; --wt-row:40px;
  /* Kinds: up to six colours that sort things by what they are (state colours stay for state). Each passes 4.5:1 on white. */
  --k1:#0f766e; --k2:#6d28d9; --k3:#c2410c; --k4:#1d4ed8; --k5:#57534e; --k6:#64748b;
}
html[data-wt] body{font-size:14px;overflow:hidden}
.wt{display:grid;grid-template-columns:var(--wt-rail) minmax(0,1fr);grid-template-rows:var(--wt-top) minmax(0,1fr) var(--wt-status);height:100vh}
.wt.rail-open{grid-template-columns:var(--wt-rail-open) minmax(0,1fr)}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.lg{width:20px;height:20px}
.skip{position:absolute;left:-999px}

/* Top bar: brand, the period and its state, search, account. Light: only the rail may be dark */
.wt-top{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3) 0 0;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.wt-top .mark{width:var(--wt-rail);height:var(--wt-top);display:grid;place-items:center;background:#161b24}
.wt-top .mark > .ic{color:#fff}
.wt-top .mark img{width:26px;height:26px;background:#fff;border-radius:3px;padding:1px}
.wt-top .wt-org{font-weight:600;font-size:13px;letter-spacing:.02em}
.wt-top .sep{width:1px;height:20px;background:var(--line-2)}
.wt-top .ctl{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:13px;color:var(--ink);white-space:nowrap}
.wt-top .state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.wt-top .state b{color:var(--ink);font-weight:600}
.wt-top .search{flex:1;max-width:460px;margin-left:auto;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;background:var(--sunk);border:1px solid var(--line);border-radius:4px;color:var(--ink-3);font-size:13px}
.wt-top .search .keys{margin-left:auto;display:flex;gap:3px}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line-2);border-radius:3px;font:500 11px/1 var(--mono);color:var(--ink-2);background:var(--surface)}
.wt-top .acct{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);color:#fff;font:600 12px/1 var(--font);border-radius:4px}

/* Rail: folded to icons (1280–1599 with a pane), words as tooltips */
.wt-rail{background:#1e2430;display:flex;flex-direction:column;align-items:stretch;padding:var(--s2) 0;gap:2px;overflow-y:auto}
.wt-rail a{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;color:#aab4c3;text-decoration:none;position:relative}
.wt-rail a.on{color:#fff;background:#2a3242}
.wt-rail a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--brand)}
.wt-rail .count{position:absolute;right:6px;top:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;font:600 10px/16px var(--font);text-align:center}
.wt-rail .gap{flex:1}
.wt-rail .lbl{display:none}
.rail-open .wt-rail .lbl{display:inline}

/* Work area: the only part that scrolls */
.wt-main{overflow:auto;background:var(--bg);min-width:0}
.wt-page{padding:var(--s2) var(--s4) var(--s4);display:grid;gap:var(--s2);min-width:0}
.wt-head{display:flex;align-items:center;gap:var(--s3);height:32px}
.wt-head .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--surface)}
.wt-head .seg :is(span,a){height:26px;display:grid;place-items:center;padding:0 10px;font-size:12.5px;color:var(--ink-2);border-left:1px solid var(--line-2)}
.wt-head .seg :is(span,a):first-child{border-left:0}
.wt-head .seg .on{background:var(--ink);color:#fff}
.wt-head h1{font-size:18px;font-weight:600;letter-spacing:0;white-space:nowrap}
.wt-head .eyebrow{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--brand-strong);margin-right:2px}
.wt-head .about{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--line-2);border-radius:4px;font-size:12px;color:var(--ink-2);background:var(--surface)}
.wt-head .actions{margin-left:auto;display:flex;gap:var(--s2)}

/* Status strip: the figures on one line, each opening its list */
.wt-strip{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:4px;min-height:56px}
.wt-strip > *{display:grid;align-content:center;gap:2px;padding:6px var(--s4);border-left:1px solid var(--line);min-width:0}
.wt-strip > :first-child{border-left:0}
.wt-strip .lab{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.wt-strip .val{font:600 18px/1.2 var(--mono);color:var(--ink);white-space:nowrap}
.wt-strip .sub{font-size:12px;color:var(--ink-3);white-space:nowrap}
.wt-strip .state{flex:1;align-content:center}
.wt-strip .state .sentence{font-size:13px;color:var(--ink-2);white-space:normal}

/* List card and pane side by side from 1280 px */
.wt-split{display:grid;grid-template-columns:minmax(0,1fr) var(--wt-pane);gap:var(--s3);align-items:start;min-width:0}
.wt-card{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:4px;min-width:0}
.wt-card + .wt-card{margin-top:0}
.wt-tabs{display:flex;align-items:center;gap:2px;height:40px;padding:0 var(--s3);border-bottom:1px solid var(--line)}
.wt-tabs a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;color:var(--ink-2);text-decoration:none;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.wt-tabs a.on{color:var(--ink);font-weight:600;border-color:var(--brand)}
.wt-tabs .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sunk);font:600 11px/18px var(--mono);color:var(--ink-2);text-align:center}
.wt-tabs a.on .n{background:var(--ink);color:#fff}
.wt-tabs .tools{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.wt-tabs .find{display:flex;align-items:center;gap:6px;width:200px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;color:var(--ink-3);font-size:13px}
.wt-tabs .fbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:13px;color:var(--ink);background:var(--surface);white-space:nowrap}
.wt-tabs .seg{margin-left:auto;display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.wt-tabs .seg span{height:28px;display:grid;place-items:center;padding:0 10px;font-size:12.5px;color:var(--ink-2);border-left:1px solid var(--line-2)}
.wt-tabs .seg span:first-child{border-left:0}
.wt-tabs .seg .on{background:var(--ink);color:#fff}
.wt-tools{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.wt-tools .find{display:flex;align-items:center;gap:6px;width:220px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;color:var(--ink-3);font-size:13px}
.wt-tools .fbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:13px;color:var(--ink);background:var(--surface);white-space:nowrap}
.wt-tools .count{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.wt-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wt-table th{height:32px;padding:0 var(--s3);text-align:left;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface);position:sticky;top:0}
.wt-table td{height:var(--wt-row);padding:0 var(--s3);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.wt-table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.wt-table .cb{width:36px;padding-right:0}
.wt-table .cbx{width:14px;height:14px;border:1.5px solid var(--line-2);border-radius:3px;display:inline-block;vertical-align:-2px}
.wt-table tr.kind td:first-child{box-shadow:inset 3px 0 0 var(--k)}
.wt-table tr.on td{background:var(--brand-soft)}
.wt-table tr.foot td{background:var(--sunk);font-weight:600;border-bottom:0}
.wt-table .key{font-weight:600;color:var(--ink)}
.wt-table .sub{color:var(--ink-3);margin-left:6px}
.wt-table .rec{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wt-table .more{display:inline-flex;align-items:center;gap:2px;margin-left:var(--s3);font-size:12.5px;color:var(--ink-2)}
.wt-table .act{text-align:right}
.ksq{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:3px;background:var(--k);color:#fff;margin-right:8px;vertical-align:-5px}
.ksq .ic{width:13px;height:13px;stroke-width:2.25}

/* State: icon + word + colour, never colour alone */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;white-space:nowrap}
.st .ic{width:14px;height:14px}
.st.ok{color:var(--ok)} .st.wait{color:var(--attn)} .st.dec{color:var(--brand-strong)} .st.info{color:var(--info)} .st.q{color:var(--ink-2)}
.st.tint{background:var(--attn-bg);padding:2px 6px;border-radius:3px}
.sure{font-size:12.5px;color:var(--ink-3)}

.wt-pagebar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.wt-pagebar .sz{display:inline-grid;place-items:center;height:26px;min-width:32px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-2)}
.wt-pagebar .sz.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wt-pagebar .nav{margin-left:auto;display:flex;gap:6px;align-items:center}

/* Banner (attention level 3): one line, with the action that clears it */
.wt-banner{display:flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);background:var(--attn-bg);color:var(--attn);font-size:13px;border-bottom:1px solid var(--line)}
.wt-banner b{color:var(--ink)}
.wt-banner a{margin-left:auto;color:var(--ink);font-weight:600}

/* Pane: the open item, soft forms inside it, next item after an action */
.wt-pane{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;display:grid;min-width:0;position:sticky;top:0;max-height:calc(100vh - var(--wt-top) - var(--wt-status) - 96px);overflow-y:auto;align-content:start}
.wt-pane > section{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:grid;gap:var(--s2)}
.wt-pane > section:last-child{border-bottom:0}
.wt-pane > section.foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);margin-top:-1px;padding:var(--s2) var(--s4)}
.wt-pane .lnk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wt-pane .ph{display:flex;align-items:flex-start;gap:var(--s2)}
.wt-pane .ph .t{display:grid;gap:2px;min-width:0}
.wt-pane .ph .over{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.wt-pane .ph h2{font-size:15px;font-weight:600;line-height:1.3}
.wt-pane .ph .amt{font:600 16px/1.3 var(--mono)}
.wt-pane .ph .x{margin-left:auto;color:var(--ink-3);display:inline-flex;gap:8px;align-items:center;font-size:12px}
.wt-pane h3{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.wt-pane p{font-size:13px;color:var(--ink-2)}
:is(.wt-pane,.wt-body) .kv{display:grid;grid-template-columns:120px 1fr;gap:6px var(--s3);font-size:13px}
:is(.wt-pane,.wt-body) .kv dt{color:var(--ink-3)} :is(.wt-pane,.wt-body) .kv dd{margin:0;color:var(--ink)}
.wt-pane .mini{width:100%;border-collapse:collapse;font-size:12.5px}
.wt-pane .mini td{height:30px;border-bottom:1px solid var(--line);padding:0 4px;white-space:nowrap}
.wt-pane .mini td.num{text-align:right;font-family:var(--mono)}
.wt-pane .mini tr.t td{font-weight:600;border-bottom:0}
.fld{display:grid;gap:4px}
.fld label{font-size:12px;font-weight:600;color:var(--ink-2)}
.in{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;font-size:13px;background:var(--surface)}
.in.area{height:52px;align-items:flex-start;padding-top:7px;color:var(--ink-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.wt-pane .btn{height:32px}
:is(.wt-pane,.wt-body,.wt-signin) .hint{font-size:12px;color:var(--ink-3)}
:is(.wt-pane,.wt-body,.wt-signin) .hint .ic{width:14px;height:14px;margin-right:4px}

/* Side column cards beside a list */
.wt-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s3);align-items:start}
.wt-cardhead{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4) var(--s2)}
.wt-cardhead h2{font-size:15px;font-weight:600}
.wt-cardhead .lead{font-size:12.5px;color:var(--ink-3)}
.wt-cardhead .r{margin-left:auto}
.wt-list{list-style:none;margin:0;padding:0 var(--s4) var(--s3);display:grid}
.wt-list li{display:grid;grid-template-columns:20px 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:13px}
.wt-list li:first-child{border-top:0}
.wt-list li b{display:block;font-weight:600;color:var(--ink)}
.wt-list li span{color:var(--ink-3);font-size:12.5px}

/* Status bar */
.wt-status{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s3);background:var(--surface);border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.wt-status .dot{width:8px;height:8px;border-radius:2px;background:var(--attn);display:inline-block;margin-right:6px}
.wt-status .env{margin-left:auto;background:var(--attn-bg);color:var(--attn);padding:2px 8px;border-radius:3px}
.wt-status .dens{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}

/* The facts on one line under the title, the answer first. No tiles and no made-up comparisons */
.wt-facts{display:flex;align-items:center;gap:var(--s5);height:24px;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.wt-facts .f{display:inline-flex;align-items:baseline;gap:6px}
.wt-facts .lab{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.wt-facts b{font:600 14px/1 var(--mono);color:var(--ink)}
.wt-facts .s{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.wt-facts .s + .s::before{content:"·";color:var(--ink-3);margin-right:4px}

/* Column widths and kind hooks, so pages carry no inline styles */
.w36{width:36px}.w72{width:72px}.w80{width:80px}.w90{width:90px}.w92{width:92px}.w100{width:100px}.w110{width:110px}.w112{width:112px}.w120{width:120px}.w130{width:130px}.w136{width:136px}.w140{width:140px}.w150{width:150px}.w156{width:156px}.w160{width:160px}.w180{width:180px}.w200{width:200px}.w96{width:96px}.w132{width:132px}.w170{width:170px}.w190{width:190px}.w220{width:220px}.w230{width:230px}.w260{width:260px}
.k1{--k:var(--k1)}.k2{--k:var(--k2)}.k3{--k:var(--k3)}.k4{--k:var(--k4)}.k5{--k:var(--k5)}.k6{--k:var(--k6)}
.wt-stack{display:grid;gap:var(--s3);min-width:0}

/* Parts inside cards and panes */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic.xl{width:32px;height:32px;stroke-width:1.5}
.wt-body{padding:var(--s3) var(--s4) var(--s4);display:grid;gap:var(--s3);min-width:0}
.wt-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
.wt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}
.fld .fh{font-size:12px;color:var(--ink-3)}
.fld.err .in{border-color:var(--brand-strong);box-shadow:inset 3px 0 0 var(--brand-strong)}
.fld.err .fh{color:var(--brand-strong)}
.wt-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wt-checks li{display:grid;grid-template-columns:18px 1fr;gap:var(--s2);align-items:start;font-size:13px;color:var(--ink-2)}
.wt-checks li .ic{width:16px;height:16px;margin-top:2px}
.wt-checks li.ok .ic{color:var(--ok)} .wt-checks li.no .ic{color:var(--brand-strong)}
.wt-checks b{color:var(--ink);font-weight:600}
.wt-stop{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);padding:var(--s3);border:1px solid var(--brand-strong);border-left-width:4px;border-radius:4px;background:var(--surface);color:var(--ink)}
.wt-stop > .ic{color:var(--brand-strong)}
.wt-stop b{display:block;font-weight:600;font-size:13.5px}
.wt-stop span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.wt-note{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line);border-left:3px solid var(--info);border-radius:4px;background:var(--surface);font-size:13px;color:var(--ink-2)}
.wt-note .ic{flex:none;margin-top:2px;color:var(--info)}
.wt-note b{color:var(--ink);font-weight:600}
.wt-time{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:grid;gap:var(--s2)}
.wt-time li{position:relative;display:flex;gap:var(--s2);justify-content:space-between;font-size:13px;color:var(--ink-2)}
.wt-time li::before{content:"";position:absolute;left:-19px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3)}
.wt-time .when{flex:none;font:500 12px/1.4 var(--mono);color:var(--ink-3)}
.wt-file{display:grid;grid-template-columns:24px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3);border:1px solid var(--line);border-radius:4px}
.wt-file > .ic{color:var(--ok)}
.wt-file b{display:block;font-weight:600;font-size:13.5px}
.wt-file span{display:block;font-size:12.5px;color:var(--ink-3)}
.wt-file a{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wt-drop{display:grid;justify-items:center;gap:var(--s2);padding:var(--s5) var(--s4);border:1.5px dashed var(--line-2);border-radius:4px;text-align:center;background:var(--sunk)}
.wt-drop > .ic{color:var(--ink-3)}
.wt-drop b{font-weight:600}
.wt-drop span{font-size:13px;color:var(--ink-3);max-width:360px}
.wt-empty{display:grid;justify-items:center;gap:var(--s2);padding:var(--s6) var(--s4);text-align:center}
.wt-empty > .ic{color:var(--ink-3)}
.wt-empty h2{font-size:17px;font-weight:600}
.wt-empty p{font-size:13.5px;color:var(--ink-2);max-width:440px}
.wt-tabs .find.wide{width:360px}
.wt-tabs .find.on{border-color:var(--ink);color:var(--ink)}

/* The one signed-out layout */
html[data-wt] body.wt-out{overflow:auto;background:var(--sunk);min-height:100vh;display:grid;place-items:center}
.wt-signin{width:380px;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;padding:var(--s5);display:grid;gap:var(--s3)}
.wt-signin h1{font-size:18px;font-weight:600}
.wt-signin .btn{justify-content:center}
.wt-signin .mk{display:flex;align-items:center;gap:var(--s2)}
.wt-signin .mk img{height:32px;width:auto}
.wt-signin .mk span{display:grid;line-height:1.15}
.wt-signin .mk b{font:600 14px/1.2 var(--mono);letter-spacing:.08em}
.wt-signin .mk small{font-size:12px;color:var(--ink-3)}