/* Dispute Desk. Tokens match Order Desk / the tracker (charcoal surfaces, warm ink, Inter, 8/10px radii).
   Dispute Desk's own accent is CORAL (Order Desk is sky, the tracker lime). Status colours stay separate. */
:root {
  --canvas:#0c0d0f; --rail:#010203; --surface:#131417; --surface-2:#1b1c20; --surface-3:#222429; --sunken:#0f1013;
  --hair:#23252a; --hair-strong:#34373d;
  --ink:#eeede9; --ink-2:#c8c6c0; --muted:#a19f99; --faint:#8a8882;
  --accent:#ff9a6b; --accent-hi:#ffb795; --accent-soft:rgba(255,154,107,.13); --on-accent:#1d0c04;
  --link:#aaa0ff;
  --ok:#7ad26e; --ok-soft:rgba(122,210,110,.13); --warn:#f0be50; --warn-soft:rgba(240,190,80,.13);
  --bad:#f87878; --bad-soft:rgba(240,100,100,.14); --info:#a3abff; --info-soft:rgba(163,171,255,.13);
  --mono:'JetBrains Mono', ui-monospace, Consolas, monospace; --radius:10px; --radius-sm:8px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --canvas:#f6f5f2; --rail:#ecebe7; --surface:#ffffff; --surface-2:#f3f2ee; --surface-3:#e9e7e2; --sunken:#fbfaf8;
    --hair:#e3e1dc; --hair-strong:#cfccc5; --ink:#1b1a18; --ink-2:#3a3835; --muted:#5f5c57; --faint:#77736d;
    --accent:#c4501d; --accent-hi:#a8410f; --accent-soft:rgba(196,80,29,.10); --on-accent:#fff; --link:#4b3fd1;
    --ok:#2c7a1f; --ok-soft:rgba(44,122,31,.10); --warn:#8a5a00; --warn-soft:rgba(180,120,0,.12);
    --bad:#b3261e; --bad-soft:rgba(179,38,30,.09); --info:#3b44b8; --info-soft:rgba(59,68,184,.09);
    color-scheme: light;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--canvas); color:var(--ink); }
body { font:14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased;
       font-variant-numeric:tabular-nums; }
a { color:var(--link); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:100vh; }
.rail { background:var(--rail); border-right:1px solid var(--hair); position:sticky; top:0; height:100vh;
        display:flex; flex-direction:column; padding:18px 12px 14px; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:var(--ink); text-decoration:none; }
.brand svg { width:26px; height:26px; flex:none; }
.brand b { font-size:16px; font-weight:700; letter-spacing:-.02em; } .brand span { display:block; color:var(--faint); font-size:11.5px; }
.nav a { position:relative; display:flex; align-items:center; gap:10px; padding:7px 10px 7px 12px; border-radius:6px;
         color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px; }
.nav a:hover { background:var(--surface); color:var(--ink); }
.nav a.on { background:var(--surface-2); color:var(--ink); font-weight:600; }
.nav a.on::before { content:""; position:absolute; left:3px; top:8px; bottom:8px; width:3px; border-radius:1px;
                    background:var(--accent); transform:skewX(-16deg); }
.nav .count { margin-left:auto; font:500 12px var(--mono); color:var(--faint); }
.rail form.logout { margin-top:auto; }
main { padding:24px 30px 90px; min-width:0; max-width:1240px; }
.page-head { display:flex; align-items:flex-end; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-head h1 { margin:0; display:flex; align-items:center; gap:12px; font-size:24px; line-height:1.15; letter-spacing:-.6px; font-weight:650; }
.page-head h1::before { content:""; flex:none; width:5px; height:.8em; border-radius:1px; background:var(--accent); transform:skewX(-16deg); }
.page-head .sub { color:var(--muted); font-size:13.5px; margin-top:2px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.card > h2, .card > summary > h2 { font-size:15px; font-weight:650; margin:0 0 10px; letter-spacing:-.1px; }
details.card > summary { cursor:pointer; list-style:none; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary h2 { display:inline; }
details.card > summary::after { content:"▸"; float:right; color:var(--faint); }
details.card[open] > summary::after { content:"▾"; }
details.card[open] > summary { margin-bottom:10px; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:12.5px; } .nowrap { white-space:nowrap; }
.mono { font-family:var(--mono); }
.badge { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:600;
         line-height:18px; white-space:nowrap; margin:1px 3px 1px 0; }
.b-ok { background:var(--ok-soft); color:var(--ok); } .b-warn { background:var(--warn-soft); color:var(--warn); }
.b-bad { background:var(--bad-soft); color:var(--bad); } .b-info { background:var(--info-soft); color:var(--info); }
.b-mute { background:var(--surface-3); color:var(--muted); } .b-acc { background:var(--accent-soft); color:var(--accent); }
button, .btn { background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--radius-sm);
               min-height:36px; padding:0 14px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
               text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button:hover, .btn:hover { background:var(--accent-hi); border-color:var(--accent-hi); }
button.ghost, .btn.ghost { background:var(--surface-2); color:var(--ink); border-color:var(--hair-strong); font-weight:500; }
button.ghost:hover, .btn.ghost:hover { background:var(--surface-3); }
button.danger { background:var(--bad-soft); color:var(--bad); border-color:transparent; }
button.small, .btn.small { min-height:28px; padding:0 9px; font-size:12.5px; }
button.link { background:none; border:0; min-height:0; color:var(--link); padding:0; font-weight:500; }
input, select, textarea { min-height:36px; padding:6px 10px; border:1px solid var(--hair-strong); border-radius:var(--radius-sm);
  background:var(--sunken); color:var(--ink); font:inherit; font-size:14px; max-width:100%; }
textarea { width:100%; min-height:80px; resize:vertical; }
input[type=checkbox], input[type=radio] { min-height:0; accent-color:var(--accent); }
input[type=file] { padding:6px; }
label { display:block; font-size:12.5px; color:var(--muted); margin:0 0 3px; }
.f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.f input, .f select, .f textarea { width:100%; }
.grid { display:grid; gap:10px 12px; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); align-items:end; }
.grid .wide { grid-column:1 / -1; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msg { padding:10px 14px; border-radius:8px; background:var(--ok-soft); color:var(--ok); margin-bottom:14px; font-weight:500; }
.err { padding:10px 14px; border-radius:8px; background:var(--bad-soft); color:var(--bad); margin-bottom:14px; font-weight:500; }
.warnbox { padding:9px 12px; border-radius:8px; background:var(--warn-soft); color:var(--warn); margin:8px 0; font-size:13.5px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--hair); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.num { text-align:right; white-space:nowrap; font-family:var(--mono); }
.tablewrap { overflow-x:auto; }
.figs { display:grid; grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); gap:10px; margin-bottom:14px; }
.fig { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:10px 12px; }
.fig .k { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.fig .v { font:600 19px var(--mono); margin-top:2px; overflow-wrap:anywhere; }
.fig .h { font-size:11.5px; color:var(--faint); margin-top:2px; }
.qtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.qtabs a { padding:6px 11px; border-radius:99px; background:var(--surface-2); border:1px solid var(--hair); color:var(--ink-2);
           text-decoration:none; font-size:13px; font-weight:500; }
.qtabs a.on { border-color:var(--accent); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.qtabs b { font-family:var(--mono); margin-left:4px; color:var(--accent); }
.caserow { display:block; padding:11px 12px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface);
           margin-bottom:8px; color:var(--ink); text-decoration:none; }
.caserow:hover { border-color:var(--hair-strong); background:var(--surface-2); }
.caserow .t { font-weight:600; font-size:14.5px; }
.caserow .meta { color:var(--muted); font-size:12.5px; margin-top:2px; }
.caserow .amts { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; }
.caserow .amts span b { font-family:var(--mono); font-weight:600; color:var(--ink); }
.caserow .why { margin-top:5px; }
.four { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.four .card { margin:0; }
.four h3 { margin:0 0 6px; font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.quick { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.quick details { flex:0 0 auto; } .quick details[open] { flex:1 1 100%; }
.badge.wrap, .caserow .why .badge, .four .badge { white-space:normal; }
.quick summary { display:inline-flex; }
.quick > details > summary { list-style:none; cursor:pointer; padding:7px 12px; border-radius:99px; background:var(--surface-2);
            border:1px solid var(--hair-strong); font-size:13px; font-weight:600; }
.quick > details[open] > summary { border-color:var(--accent); color:var(--accent); }
.quick > details > .card { margin-top:8px; }
.quickbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.tl { list-style:none; margin:0; padding:0; }
.tl li { border-left:2px solid var(--hair-strong); padding:2px 0 12px 14px; position:relative; }
.tl li::before { content:""; position:absolute; left:-6px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--surface-3);
                 border:2px solid var(--hair-strong); }
.tl li.k-inbound::before, .tl li.k-portal::before { background:var(--info); border-color:var(--info); }
.tl li.k-outbound::before, .tl li.k-call::before, .tl li.k-escalation::before { background:var(--accent); border-color:var(--accent); }
.tl li.k-promise::before { background:var(--warn); border-color:var(--warn); }
.tl li.k-match::before, .tl li.k-ledger::before { background:var(--ok); border-color:var(--ok); }
.tl li.auto { opacity:.62; }
.tl .when { font:12px var(--mono); color:var(--faint); }
.tl .body { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-2); font-size:13.5px; margin-top:3px; max-height:260px; overflow:auto; }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--sunken); border:1px solid var(--hair); border-radius:8px;
       padding:12px; font-size:13.5px; }
.chain { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chain .node { padding:4px 9px; border-radius:7px; background:var(--surface-2); border:1px solid var(--hair-strong); font:13px var(--mono); }
.compare { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:8px; }
.compare > div { background:var(--surface-2); border:1px solid var(--hair); border-radius:8px; padding:8px 10px; }
.thumb { max-width:120px; max-height:120px; border-radius:6px; border:1px solid var(--hair); display:block; }
.ev { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; }
.ev > div { border:1px solid var(--hair); border-radius:8px; padding:8px; background:var(--surface-2); overflow-wrap:anywhere; }
.topbar, .tabbar { display:none; }
@media (max-width: 820px) {
  .shell { grid-template-columns:1fr; }
  .rail { display:none; }
  .topbar { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--hair); background:var(--rail);
            position:sticky; top:0; z-index:5; }
  .topbar form { flex:1; } .topbar input { width:100%; }
  .topbar .brand { padding:0; }
  .tabbar { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; background:var(--rail);
            border-top:1px solid var(--hair); z-index:6; padding-bottom:env(safe-area-inset-bottom); }
  .tabbar a { text-align:center; padding:9px 2px 8px; font-size:11.5px; color:var(--ink-2); text-decoration:none; font-weight:600; }
  .tabbar a.on { color:var(--accent); }
  .tabbar a b { display:block; font-size:18px; line-height:1.1; }
  main { padding:14px 16px 90px; }
  .four { grid-template-columns:1fr; }
  .page-head h1 { font-size:20px; }
  .hide-m { display:none; }
  table.stack thead { display:none; }
  table.stack tr { display:block; border-bottom:1px solid var(--hair); padding:6px 0; }
  table.stack td { display:block; border:0; padding:2px 0; }
  table.stack td.num { text-align:left; }
}