/* Phase 8 readability standard (design/references/READABILITY.md):
   Atkinson Hyperlegible Next for text, Atkinson Hyperlegible Mono only for identifiers and codes;
   16px minimum for body and table text, 14px floor for secondary metadata, rem units throughout;
   dark text on a light background; every text colour at least 4.5:1, body and key values at least 7:1. */
:root{
  --bg:#f3f2f1;--panel:#ffffff;--panel2:#f8f8f7;
  --line:#cecfcf;--line2:#e6e6e4;--edge:#505a5f;              /* dividers are decorative; --edge marks controls (3:1+) */
  --text:#0b0c0c;--muted:#484c4f;                              /* 19.6:1 and 8.7:1 on white; every text pair is measured in READABILITY.md */
  --ink:#0f4c5c;--ink-soft:#e8f1f3;
  --match:#005a30;--match-soft:#e3f1e8;
  --break:#941f18;--break-soft:#fbe9e7;
  --review:#6e4400;--review-soft:#fbf0dc;
  --unbooked:#4c3d8f;--unbooked-soft:#eeebf7;
  --focus:#ffdd00;
  --sans:"Atkinson Hyperlegible Next","PingFang SC",system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,monospace;
  --fs-s:.875rem;--fs:1rem;--fs-m:1.1875rem;--fs-l:1.5rem;--fs-xl:2rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:400 var(--fs)/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-align:left}
a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:0;box-shadow:0 0 0 6px var(--text)}
.mono{font-family:var(--mono)}
.nw,h2 .mono,.cap b,.qi .id{white-space:nowrap}   /* never break a date or an id at its hyphens */
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:var(--fs-s)}
.hide{display:none!important}

/* top bar */
.top{white-space:nowrap;min-height:4rem;display:flex;align-items:center;gap:1.5rem;padding:.5rem 1.5rem;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:.75rem}
.brand b{font:700 var(--fs-m)/1.2 var(--sans)}
.brand span{font-size:var(--fs);color:var(--muted)}
.nav{display:flex;gap:.25rem}
.nav a{padding:.5rem .875rem;border-radius:.375rem;color:var(--text);text-decoration:none;font-weight:500;border-bottom:3px solid transparent}
.nav a:hover{background:var(--panel2)}
.nav a.on{background:var(--ink-soft);color:var(--ink);font-weight:700;border-bottom-color:var(--ink);border-radius:.375rem .375rem 0 0}
.top .right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.tag{font-size:var(--fs-s);line-height:1.3;padding:.25rem .625rem;border-radius:.375rem;border:1px solid var(--line);color:var(--muted);background:var(--panel2)}
.tag.syn{color:var(--review);border-color:#e3cfa5;background:var(--review-soft);font-weight:700}
.user{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
select,input,textarea{font:inherit;color:var(--text);border:1px solid var(--edge);border-radius:.375rem;padding:.375rem .625rem;background:var(--panel)}

/* review layout: queue · document · match sheet */
.review{display:grid;grid-template-columns:21rem minmax(0,1fr) 36rem;height:calc(100vh - 4rem)}   /* 21rem fits the longest counterparty name on one line */
.pane{min-width:0;overflow:auto;border-right:1px solid var(--line)}
.pane:last-child{border-right:0}
.queue{background:var(--panel)}
.queue .tabs{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;padding:.5rem .75rem 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.queue .tabs button{padding:.375rem .25rem .375rem;color:var(--muted);font-weight:500;border-bottom:3px solid transparent;white-space:nowrap;line-height:1.3}
.queue .tabs button.on{color:var(--text);font-weight:700;border-bottom-color:var(--ink)}
.queue .tabs button i{display:block;font-style:normal;font-size:var(--fs-s);font-weight:400;color:var(--muted)}
.queue .search{padding:.75rem;border-bottom:1px solid var(--line2)}
.queue .search label{display:block;font-size:var(--fs-s);color:var(--muted);margin-bottom:.25rem}
.queue .search input{width:100%}
.qi{display:grid;grid-template-columns:.75rem 1fr auto;gap:.125rem .625rem;padding:.75rem 1rem .75rem .75rem;border-bottom:1px solid var(--line2);cursor:pointer;line-height:1.35}
.qi:hover{background:var(--panel2)}
.qi.on{background:var(--ink-soft);box-shadow:inset 4px 0 0 var(--ink)}
.dot{width:.625rem;height:.625rem;border-radius:50%;margin-top:.375rem;background:var(--muted)}
.dot.REVIEW{background:var(--review)}.dot.BREAK{background:var(--break)}.dot.AUTO_MATCHED{background:var(--match)}.dot.UNBOOKED{background:var(--unbooked)}.dot.CLOSED{background:var(--muted)}
.qi .id{font:700 var(--fs)/1.35 var(--mono)}
.qi .lay{font-size:var(--fs-s);color:var(--muted);text-align:right}
.qi .cp{grid-column:2/4;font-weight:500}
.qi .meta{grid-column:2/4;font-size:var(--fs-s);color:var(--muted)}
.qi .why{grid-column:2/4;font-size:var(--fs-s);color:var(--muted)}
.qi .why b{font-weight:700;color:var(--break)}.qi .why em{font-style:normal;font-weight:700;color:var(--review)}.qi .why u{text-decoration:none;font-weight:700;color:var(--unbooked)}.qi .why .ok{color:var(--match);font-weight:700}

/* document */
.doc{background:var(--bg);padding:1rem 1.25rem 2.5rem}
.doc .cap{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;margin-bottom:.75rem;color:var(--muted);font-size:var(--fs-s)}
.doc .cap b{color:var(--text);font:700 var(--fs)/1.3 var(--mono)}
.page{position:relative;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 24px rgba(11,12,12,.08);margin:0 auto 1rem;max-width:860px}
.page img{display:block;width:100%;height:auto}
.hl{position:absolute;border:2px solid var(--ink);background:rgba(15,76,92,.1);border-radius:2px;cursor:pointer}
.hl:hover,.hl.on{background:rgba(15,76,92,.22);box-shadow:0 0 0 3px rgba(15,76,92,.25)}
.hl.bad{border-color:var(--break);background:rgba(148,31,24,.1)}
.hl.bad:hover,.hl.bad.on{background:rgba(148,31,24,.22);box-shadow:0 0 0 3px rgba(148,31,24,.25)}
.hl.approx{border-style:dashed}
.hl span{position:absolute;left:-2px;bottom:100%;margin-bottom:2px;font:700 var(--fs-s)/1.2 var(--sans);background:var(--ink);color:#fff;padding:.125rem .375rem;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;z-index:3}
.hl:hover span,.hl.on span{opacity:1}
.hl.bad span{background:var(--break)}
.email{max-width:860px;margin:0 auto;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 24px rgba(11,12,12,.08);padding:1.5rem 1.75rem;font:400 var(--fs)/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.email .ln{display:block;padding:0 .375rem;margin:0 -.375rem;border-radius:3px}
.email .ln.hl2{background:rgba(15,76,92,.1);box-shadow:inset 3px 0 0 var(--ink);cursor:pointer}
.email .ln.hl2.bad{background:rgba(148,31,24,.1);box-shadow:inset 3px 0 0 var(--break)}
.email .ln.on{background:rgba(15,76,92,.22)}
.note{font-size:var(--fs-s);color:var(--muted);max-width:66ch;margin:0 0 .75rem}

/* match sheet: one block per field, label and status on top, document and blotter values side by side, evidence in full underneath */
.sheet{background:var(--panel);display:flex;flex-direction:column}
.sheet .head{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.sheet .head .row{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.375rem;font-weight:700;font-size:var(--fs-s);line-height:1.3;padding:.25rem .625rem;border-radius:.375rem;border:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.chip.AUTO_MATCHED{color:var(--match);background:var(--match-soft);border-color:#b9d9c5}
.chip.REVIEW{color:var(--review);background:var(--review-soft);border-color:#e3cfa5}
.chip.BREAK{color:var(--break);background:var(--break-soft);border-color:#eebfba}
.chip.UNBOOKED{color:var(--unbooked);background:var(--unbooked-soft);border-color:#cfc8e8}
.chip.state{color:var(--ink);background:var(--ink-soft);border-color:#b7d0d6}
.sheet h2{font:700 var(--fs-m)/1.35 var(--sans);margin:.625rem 0 .125rem}
.sheet .head .sub{color:var(--muted)}
.sheet .reasons{list-style:none;display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem}
.sheet .reasons li{font-size:var(--fs-s);line-height:1.35;padding:.25rem .5rem;border-radius:.25rem;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.sheet .reasons li.b{color:var(--break);background:var(--break-soft);border-color:#eebfba;font-weight:700}
.sheet .reasons li.c{color:var(--review);background:var(--review-soft);border-color:#e3cfa5;font-weight:700}
.cmp .cmp-h,.cmp .fv{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cmp .cmp-h{padding:.75rem 1.25rem .5rem;border-bottom:1px solid var(--line);font-weight:700;color:var(--muted);font-size:var(--fs-s);position:sticky;top:0;background:var(--panel);z-index:1}
.cmp .f{padding:.625rem 1.25rem .75rem;border-bottom:1px solid var(--line2);cursor:pointer;line-height:1.4}
.cmp .f:hover{background:var(--panel2)}
.cmp .f.on{background:var(--ink-soft);box-shadow:inset 4px 0 0 var(--ink)}
.cmp .f.BREAK{box-shadow:inset 4px 0 0 var(--break)}
.cmp .f.BREAK.on{box-shadow:inset 4px 0 0 var(--break),inset 8px 0 0 var(--ink-soft)}
.cmp .fh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.25rem}
.cmp .fn{font-weight:700}
.cmp .v{overflow-wrap:break-word}
.cmp .v.id{font-family:var(--mono);overflow-wrap:anywhere}
.cmp .f.BREAK .v.d{color:var(--break);font-weight:700}
.cmp .f.MISSING .v.d{color:var(--review);font-weight:700}
.cmp .v .nt{display:block;font-size:var(--fs-s);color:var(--muted);font-weight:400}
.cmp .ev{margin-top:.375rem;font-size:var(--fs-s);color:var(--muted);line-height:1.45}
.cmp .ev q{color:var(--text);quotes:"“" "”"}
.cmp .ev .bad{color:var(--break);font-weight:700}
.cmp .ev .low{color:var(--review);font-weight:700}
.cmp .terms{padding:1rem 1.25rem}
.cmp .terms dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin-top:.5rem}
.cmp .terms dt{color:var(--muted)}
.st{white-space:nowrap;font-weight:700;font-size:var(--fs)}
.st i{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;margin-right:.375rem;vertical-align:.0625rem}
.st.MATCH{color:var(--match)}.st.MATCH i{background:var(--match)}
.st.BREAK{color:var(--break)}.st.BREAK i{background:var(--break)}
.st.MISSING{color:var(--review)}.st.MISSING i{background:var(--review)}
.st.NA{color:var(--muted);font-weight:400}.st.NA i{background:transparent;border:1.5px solid var(--muted)}
.conf{display:inline-block;width:2.5rem;height:.375rem;border-radius:3px;background:var(--line2);vertical-align:middle;margin:0 .375rem 0 .25rem;overflow:hidden}
.conf b{display:block;height:100%;background:var(--ink)}
.conf.low b{background:var(--review)}
.actions{position:sticky;bottom:0;margin-top:auto;background:var(--panel);border-top:1px solid var(--line);padding:.75rem 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem;z-index:2}
.btn{padding:.5rem .875rem;border:1px solid var(--edge);border-radius:.375rem;background:var(--panel);font-weight:700;display:inline-flex;align-items:center;gap:.5rem;line-height:1.3;color:var(--text)}
.btn:hover{background:var(--panel2)}
.btn kbd{font:400 var(--fs-s)/1 var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:.1875rem .3125rem;background:var(--panel)}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri kbd{color:var(--ink);background:#fff;border-color:#fff}
.btn.danger{color:var(--break);border-color:var(--break)}
.btn:disabled,.btn.pri:disabled,.btn.danger:disabled{background:var(--bg);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.btn:disabled kbd{background:var(--bg)}
.sec{padding:1rem 1.25rem;border-top:1px solid var(--line)}
.sec h3{font:700 var(--fs)/1.35 var(--sans);margin-bottom:.375rem}
.sec p,.sec li{max-width:66ch}
.sec ul{padding-left:1.25rem}
.truth{background:var(--panel2)}
.hist div{margin-bottom:.25rem}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--text);color:#fff;padding:.625rem 1rem;border-radius:.375rem;font-size:var(--fs);box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:9;opacity:0;transition:opacity .2s;pointer-events:none;max-width:40rem}
.toast.on{opacity:1}
.toast.err{background:var(--break)}
.empty{padding:2.5rem;color:var(--muted);text-align:center}

/* dialogs */
.modal{position:fixed;inset:0;background:rgba(11,12,12,.4);display:flex;align-items:center;justify-content:center;z-index:8}
.modal .box{background:var(--panel);border-radius:.5rem;padding:1.25rem 1.5rem;width:30rem;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{font:700 var(--fs-m)/1.3 var(--sans);margin-bottom:.5rem}
.modal label{display:block;font-weight:700;margin:.875rem 0 .25rem}
.modal input,.modal select,.modal textarea{width:100%;padding:.5rem .625rem}
.modal .foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}

/* dashboard */
.dash,.audit{padding:1.5rem 2rem 4rem;max-width:90rem;margin:0 auto}
h1.pg{font:700 var(--fs-xl)/1.25 var(--sans);margin-bottom:.375rem}
h1.pg span{font-weight:400;color:var(--muted)}
.lede{color:var(--muted);max-width:75ch;margin-bottom:1.5rem;font-size:var(--fs-m);line-height:1.5}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:.5rem;padding:1rem 1.125rem}
.kpi .l{font-weight:700;line-height:1.3}
.kpi .v{font:700 var(--fs-xl)/1.15 var(--sans);margin:.5rem 0 .375rem;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:var(--fs);font-weight:400;color:var(--muted);margin-left:.25rem}
.kpi .d{font-size:var(--fs-s);color:var(--muted);line-height:1.4}
.kpi.warn .v{color:var(--break)}
.kpi.good .v{color:var(--match)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:.5rem;padding:1.125rem 1.25rem;min-width:0}
.card h3{font:700 var(--fs-m)/1.3 var(--sans);margin-bottom:.125rem}
.card .cap{color:var(--muted);margin-bottom:.875rem;max-width:90ch}
.card.wide{grid-column:span 2}
.card.full{grid-column:1/-1}
.bars{display:grid;grid-template-columns:max-content 1fr 3rem;gap:.5rem .875rem;align-items:center}
.bars .tr{height:.75rem;background:var(--line2);border-radius:2px;overflow:hidden}
.bars .tr b{display:block;height:100%;background:var(--ink);min-width:2px}
.bars .n{text-align:right;font-variant-numeric:tabular-nums}
.cols{display:flex;align-items:flex-end;gap:2px;height:8.5rem;border-bottom:1px solid var(--edge)}
.cols b{flex:1;background:var(--ink);border-radius:2px 2px 0 0;min-height:2px}
.cols-ax{display:flex;justify-content:space-between;font-size:var(--fs-s);color:var(--muted);margin-top:.25rem}
.cols-max{font-size:var(--fs-s);color:var(--muted);margin-bottom:.25rem}
table.t{width:100%;border-collapse:collapse;line-height:1.35}
table.t th{font-weight:700;text-align:left;padding:.625rem .75rem;border-bottom:2px solid var(--edge);vertical-align:bottom}
table.t td{padding:.625rem .75rem;border-bottom:1px solid var(--line2);vertical-align:top}
table.t td.num,table.t th.num{text-align:right}
table.t tr.cur td{background:var(--ink-soft);font-weight:700}
table.t td.bad{color:var(--break);font-weight:700}
.stack{display:flex;height:.75rem;border-radius:2px;overflow:hidden;background:var(--line2);margin-top:.375rem}
.stack b,.legend i{display:block;height:100%}
.t1{background:var(--match)}.t2{background:var(--ink)}.tb{background:var(--unbooked)}.th{background:var(--review)}
.legend{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;margin-top:.875rem;color:var(--muted)}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:2px;margin-right:.375rem;vertical-align:-.0625rem}
.legend .muted{flex-basis:100%;max-width:90ch}
.ctrl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ctrl .c{display:flex;gap:.75rem;align-items:flex-start;padding:.875rem 1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel2)}
.ctrl .c i{width:.625rem;height:.625rem;border-radius:50%;margin-top:.4375rem;flex:none;background:var(--match)}
.ctrl .c i.w{background:var(--review)}
.ctrl .c b{display:block}
.ctrl .c span{font-size:var(--fs-s);color:var(--muted);display:block}
.tip{position:fixed;pointer-events:none;background:var(--text);color:#fff;font-size:var(--fs-s);padding:.25rem .5rem;border-radius:.25rem;z-index:9;opacity:0}
.tip.on{opacity:1}

/* audit */
.audit .bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 1.25rem}
.audit .vres{font-weight:700}
.audit .vres.ok{color:var(--match)}.audit .vres.bad{color:var(--break)}
.audit td.h{font-family:var(--mono);color:var(--muted);font-size:var(--fs-s)}
.audit td.d{white-space:nowrap}
.audit td.id{font-family:var(--mono);white-space:nowrap}
.audit tr.me td{background:var(--ink-soft)}
.audit tr.tampered td{background:var(--break-soft)}
.audit tr.tampered td.pl{color:var(--break);font-weight:700}
.pl{overflow-wrap:anywhere}

@media (max-width:1360px){.review{grid-template-columns:18rem minmax(0,1fr) 32rem}#brand-sub{display:none}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.review{grid-template-columns:16rem minmax(0,1fr) 28rem}.cards{grid-template-columns:1fr}.card.wide{grid-column:auto}}