/* Lading — a trade-desk / customs-ledger interface.
   Deliberately flat: no gradients, no glow, no floating rounded cards. Data is
   set in monospace like a shipping manifest; structure comes from hairline
   rules and one decisive signal colour, not from shadow and colour wash. */
:root {
  --paper:#f4f2ec; --surface:#fbfaf6; --surface-2:#eae7dd; --ink:#191510;
  --ink-soft:#413b31; --muted:#7b7365; --rule:#ddd8ca; --rule-2:#c9c3b2;
  --accent:#e5391c;
  --accent-wash:color-mix(in srgb,var(--accent) 9%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 40%,transparent);
  --care:#a86414; --defend:var(--accent); --expand:#1a7a4a; --risk:var(--accent);
  --forecast:#1f5fbf; --acquire:#7a3fb0;
  --ok:#1a7a4a;
  --f:"IBM Plex Sans Thai","Segoe UI",system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#14120e; --surface:#1b1813; --surface-2:#26221a; --ink:#efe9dd;
  --ink-soft:#c3bcab; --muted:#8f8776; --rule:#332e24; --rule-2:#453f31;
  --accent:#ff5a38;
  --care:#d99a3c; --expand:#3fbb7d; --forecast:#5f9bff; --acquire:#b58cff;
  --ok:#3fbb7d;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.muted{color:var(--muted)}
.mono,.n,.ev,.stat b,.card-band,.tbl th{font-family:var(--fm);font-variant-numeric:tabular-nums}
.mark{color:var(--accent);font-weight:400}

/* ── login ─────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:repeating-linear-gradient(135deg,transparent 0 22px,color-mix(in srgb,var(--ink) 2%,transparent) 22px 23px)}
.login-card{background:var(--surface);border:1px solid var(--rule-2);border-radius:3px;padding:0;width:100%;max-width:372px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.10)}
.brand{font-size:1.4rem;font-weight:600;letter-spacing:-.01em;padding:22px 26px 0}
.brand-sub{margin:4px 0 0;color:var(--muted);font-size:.8rem;padding:0 26px 18px;border-bottom:1px solid var(--rule)}
.login-card label{display:flex;flex-direction:column;gap:6px;font-family:var(--fm);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:16px 26px 0}
.login-card label:nth-of-type(2){padding-top:14px}
.login-card input{padding:10px 12px;border:1px solid var(--rule-2);border-radius:2px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:.95rem}
.login-card input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.login-card button{margin:22px 26px 24px;padding:11px;border:none;border-radius:2px;background:var(--accent);color:#fff;font-weight:600;font-size:.92rem;letter-spacing:.02em}
.login-card button:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.err{color:var(--accent);font-size:.82rem;min-height:1em;padding:0 26px;margin-top:-14px}

/* ── topbar ────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:20px;padding:0 22px;height:56px;background:var(--surface);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.tb-left{display:flex;align-items:baseline;gap:9px;font-size:1.02rem}
.tb-left strong{font-weight:600;letter-spacing:-.01em}
.tb-left .muted{font-size:.82rem}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.stats{display:flex;gap:0}
.stat{display:flex;flex-direction:column;line-height:1.1;padding:0 16px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:none}
.stat b{font-size:1.02rem;color:var(--ink)}
.stat span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--fm)}
.upload-btn{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:2px;font-weight:600;font-size:.82rem}
.upload-btn:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.ghost{background:transparent;border:1px solid var(--rule-2);color:var(--ink-soft);padding:8px 12px;border-radius:2px;font-weight:500;font-size:.82rem}
.ghost:hover{border-color:var(--ink);color:var(--ink)}

/* ── tabs (underline, not pills) ───────────────────────────────────── */
.tabs{display:flex;gap:22px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{background:none;border:none;padding:12px 0;color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px}
.tabs button:hover{color:var(--ink-soft)}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.badge{background:var(--accent);color:#fff;border-radius:2px;padding:0 6px;font-size:.68rem;font-family:var(--fm)}

/* ── layout ────────────────────────────────────────────────────────── */
.layout{display:flex;align-items:flex-start}
.content{flex:1;padding:22px 24px 60px;min-width:0;max-width:860px;margin:0 auto}
.drawer{width:400px;flex:none;border-left:1px solid var(--rule-2);background:var(--surface);padding:22px;position:sticky;top:57px;max-height:calc(100vh - 57px);overflow-y:auto}
@media(max-width:1100px){.drawer{position:fixed;right:0;top:0;height:100vh;max-height:100vh;z-index:20;box-shadow:-20px 0 50px rgba(0,0,0,.18)}}

/* ── feed intro ────────────────────────────────────────────────────── */
.content > p.muted:first-child{font-size:.8rem;font-family:var(--fm);border-bottom:1px solid var(--rule);padding-bottom:12px;margin:0 0 4px;letter-spacing:.01em}

/* ── cards: ledger entries ─────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--rule-2);border-radius:3px;padding:15px 18px;margin-top:12px}
.card:hover{border-top-color:var(--ink)}
.card.care{border-top-color:var(--care)} .card.defend{border-top-color:var(--defend)}
.card.expand{border-top-color:var(--expand)} .card.risk{border-top-color:var(--risk)}
.card.forecast{border-top-color:var(--forecast)} .card.acquire{border-top-color:var(--acquire)}
.card-band{display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:0;margin-bottom:9px;color:var(--muted)}
.card-band::before{content:"";width:7px;height:7px;border-radius:1px;background:currentColor}
.b-care{color:var(--care)} .b-defend{color:var(--defend)} .b-expand{color:var(--expand)}
.b-risk{color:var(--risk)} .b-forecast{color:var(--forecast)} .b-acquire{color:var(--acquire)}
.card-title{font-weight:600;font-size:1.04rem;margin:0 0 4px;line-height:1.4;letter-spacing:-.005em}
.card-detail{color:var(--ink-soft);font-size:.9rem;margin:0 0 12px}
.evidence{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;border:1px solid var(--rule);border-radius:2px;background:var(--paper)}
.ev{font-size:.72rem;color:var(--muted);padding:6px 11px;border-right:1px solid var(--rule);white-space:nowrap}
.ev:last-child{border-right:none}
.ev b{color:var(--ink);font-weight:600}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-actions button{border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-soft);padding:7px 13px;border-radius:2px;font-size:.82rem;font-weight:500}
.card-actions button:hover{border-color:var(--ink);color:var(--ink)}
.card-actions .primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.card-actions .primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff}
.card-actions .dismiss{border:none;color:var(--muted);margin-left:auto;padding:7px 10px}
.card-actions .dismiss:hover{color:var(--accent)}

/* ── drawer ────────────────────────────────────────────────────────── */
.drawer h3{margin:0 0 3px;font-size:1.18rem;letter-spacing:-.01em;font-weight:600}
.drawer .sub{color:var(--muted);font-size:.72rem;font-family:var(--fm);letter-spacing:.06em;text-transform:uppercase;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:.86rem}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--fm);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.spark{display:flex;align-items:flex-end;gap:2px;height:56px;margin:16px 0;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.spark div{flex:1;background:var(--rule-2);min-height:2px}
.spark div.last{background:var(--accent)}
.aliases{font-family:var(--fm);font-size:.7rem;color:var(--muted);margin:12px 0;line-height:1.6}
.draft-box{background:var(--paper);border:1px solid var(--rule-2);border-left:2px solid var(--accent);border-radius:2px;padding:13px 15px;white-space:pre-wrap;font-size:.88rem;margin:12px 0;line-height:1.65}
.close-x{float:right;background:none;border:1px solid var(--rule-2);width:28px;height:28px;border-radius:2px;font-size:1rem;color:var(--muted);line-height:1}
.close-x:hover{border-color:var(--accent);color:var(--accent)}

/* ── tables ────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th{text-align:left;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1.5px solid var(--ink);padding:6px 10px 7px 0;font-weight:500}
.tbl td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.tbl td.n{font-family:var(--fm);text-align:right;color:var(--ink)}

/* ── boards ────────────────────────────────────────────────────────── */
.board{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:16px 18px;margin-bottom:16px}
.board h4{margin:0 0 14px;font-size:.72rem;font-family:var(--fm);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500;border-bottom:1px solid var(--rule);padding-bottom:10px}
.bar-row{display:flex;align-items:center;gap:12px;margin:6px 0;font-size:.82rem}
.bar-row .lbl{width:170px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{flex:1;background:var(--surface-2);height:14px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--accent)}
.bar-row .val{width:88px;text-align:right;font-family:var(--fm);flex:none;color:var(--ink)}

/* ── ask ───────────────────────────────────────────────────────────── */
.ask-box{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--rule-2)}
.ask-box input{flex:1;padding:12px 14px;border:none;background:var(--surface);color:var(--ink);font-family:inherit;font-size:.95rem}
.ask-box input:focus{outline:none}
.ask-box button{padding:12px 22px;border:none;background:var(--accent);color:#fff;font-weight:600}
.answer{background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--accent);border-radius:2px;padding:16px 18px;margin-bottom:12px}
.answer .meta{font-family:var(--fm);font-size:.7rem;color:var(--muted);margin-top:12px;border-top:1px solid var(--rule);padding-top:9px;letter-spacing:.02em}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:var(--surface);border:1px solid var(--rule-2);border-radius:2px;padding:6px 12px;font-size:.8rem;color:var(--ink-soft);font-family:var(--fm)}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── merges ────────────────────────────────────────────────────────── */
.merge{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:15px 18px;margin-bottom:10px}
.merge .names{font-size:.94rem;margin-bottom:11px}
.merge .names b{color:var(--accent)}
.merge-actions{display:flex;gap:8px}
.merge-actions button{border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-soft);padding:7px 14px;border-radius:2px;font-weight:500;font-size:.84rem}
.merge-actions button:hover{border-color:var(--ink);color:var(--ink)}
.merge-actions .primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.empty{text-align:center;color:var(--muted);padding:56px 20px;border:1px dashed var(--rule-2);border-radius:3px;font-size:.9rem}
.loading{color:var(--muted);padding:20px 0;font-family:var(--fm);font-size:.82rem}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:2px;font-size:.88rem;z-index:50;max-width:90vw;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.modal{position:fixed;inset:0;background:rgba(10,8,5,.55);display:grid;place-items:center;z-index:40;padding:20px}
.modal-card{background:var(--surface);border:1px solid var(--rule-2);border-radius:3px;padding:22px 24px;max-width:660px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal-card h3{margin:0 0 14px;font-size:1.05rem;font-weight:600}
.report{font-family:var(--fm);font-size:.78rem;white-space:pre-wrap;overflow:auto;background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:15px;flex:1;line-height:1.55}
.modal-actions{margin-top:15px;text-align:right}
.modal-actions button{padding:9px 20px;border:none;border-radius:2px;background:var(--accent);color:#fff;font-weight:600}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
