:root{
  --ink:#1D1C1C; --ink-deeper:#111111; --ink-soft:#6F777E;
  --paper:#FFFFFC; --white:#FFFFFF;
  --blue-900:#001E40; --blue-800:#002E63; --blue-700:#0051AE; --blue-600:#406896;
  --blue-300:#B1CCEB; --blue-200:#BDD6F2; --blue-100:#DEE6EE; --blue-50:#EBF3FB;
  --mute:#B1B7CD; --rule:#E2E2E2; --red:#E91A00;
  --font-serif:"PT Serif",Georgia,serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  color-scheme:light;
}
/* Dark theme — toggled by the header button (persisted in localStorage).
   Overrides the palette tokens so the rest of the sheet is theme-agnostic. */
html.dark{
  color-scheme:dark;
  --ink:#E8E8E5; --ink-deeper:#FBFBF7; --ink-soft:#98A1AC;
  --paper:#14181D; --white:#0E1217;
  --blue-900:#DDE9F8; --blue-800:#BFD4EE; --blue-700:#7BA8E0; --blue-600:#6A93C9;
  --blue-300:#3D4E63; --blue-200:#2D3A4B; --blue-100:#232E3C; --blue-50:#1B2330;
  --mute:#4A5260; --rule:#2A3038;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-serif);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}
a{color:var(--blue-700);text-decoration:none}
.muted{color:var(--ink-soft)}
.small{font-size:12px}
.nowrap{white-space:nowrap}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:30;height:70px;padding:0 40px;display:flex;
  align-items:center;justify-content:space-between;background:var(--white);
  border-bottom:1px solid var(--blue-100)}
.wordmark{font-family:var(--font-serif);font-weight:700;font-size:26px;line-height:1;
  letter-spacing:-0.03em;color:var(--ink);white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.topbar nav{display:flex;align-items:center;gap:28px}
.topbar nav a{font-family:var(--font-mono);font-weight:600;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);position:relative;padding:6px 0}
.topbar nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:currentColor;transition:right 280ms var(--ease-out)}
.topbar nav a:hover::after,.topbar nav a.on::after{right:0}
.topbar .who{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--ink-soft);text-transform:none;margin-left:6px}
.theme-toggle{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--blue-100);background:var(--white);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{background:var(--blue-50);border-color:var(--ink)}
.theme-toggle svg{display:block}
.theme-icon-sun{display:none}
html.dark .theme-icon-moon{display:none}
html.dark .theme-icon-sun{display:block}

main{max-width:1180px;margin:0 auto;padding:40px}
h1{font-family:var(--font-serif);font-weight:700;font-size:34px;line-height:1.05;
  letter-spacing:-0.022em;margin:6px 0 26px}
h2{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 16px}
h3{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:18px 0 8px}

/* ---------- overview cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.card{background:var(--white);border:1px solid var(--blue-100);padding:22px 24px;
  color:var(--ink);display:block;transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out)}
.card:hover{border-color:var(--ink);background:var(--blue-50)}
.card-num{font-family:var(--font-serif);font-weight:700;font-size:46px;line-height:1;letter-spacing:-0.02em}
.card-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
.card.high .card-num{color:var(--red)}
.card.warn .card-num{color:var(--blue-700)}

.two-col,.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--white);border:1px solid var(--blue-100);padding:22px 24px}

/* ---------- breakdown tables ---------- */
.breakdown{width:100%;border-collapse:collapse}
.breakdown td{padding:7px 8px;vertical-align:middle}
.breakdown td:first-child{width:150px}
.breakdown a{color:var(--ink)}
.breakdown a:hover{color:var(--blue-700)}
.breakdown .count{text-align:right;width:92px;white-space:nowrap;color:var(--ink-soft);font-family:var(--font-mono);font-size:12px}
.breakdown .count strong{color:var(--ink)}
.bar-cell{width:auto}
/* Track is sized to the category total; the inner .bar fills the open share. */
.bar-track{display:inline-block;height:8px;background:var(--blue-300);min-width:2px;vertical-align:middle;border-radius:1px}
.bar{display:inline-block;height:8px;background:var(--blue-700);min-width:2px;vertical-align:top}
.bar.alt{background:var(--blue-300)}

/* ---------- filters / form controls ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filters input[type=search]{flex:1;min-width:220px}
input,select,textarea{background:var(--white);border:1px solid var(--blue-100);color:var(--ink);
  border-radius:0;padding:9px 11px;font-family:var(--font-mono);font-size:13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-700)}
.clear{align-self:center;color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase}

/* ---------- buttons ---------- */
button{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;background:var(--white);border:1px solid var(--blue-100);color:var(--ink);
  border-radius:0;padding:9px 14px;cursor:pointer;transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out)}
button:hover{border-color:var(--ink);background:var(--blue-50)}
.btn{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--blue-100);
  background:var(--white);color:var(--ink);cursor:pointer;
  transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out)}
.btn:hover{border-color:var(--ink);background:var(--blue-50);text-decoration:none}
.btn.primary{background:var(--blue-700);border-color:var(--blue-700);color:var(--paper)}
.btn.primary:hover{background:var(--blue-800);border-color:var(--blue-800)}

/* ---------- items table ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.items{width:100%;min-width:680px;border-collapse:collapse}
table.items th{text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:10px;border-bottom:1px solid var(--blue-100)}
table.items td{padding:13px 10px;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15px}
.sender{font-weight:700}
.sender-date{display:none;margin-top:3px}
.subject{font-weight:700;color:var(--ink)}
.subject:hover{color:var(--blue-700)}
.preview{margin-top:4px;max-width:440px}
.actions{text-align:right}
.actions .btn,.actions form{margin-left:4px}
.empty{text-align:center;color:var(--ink-soft);padding:40px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase}

/* ---------- tags & badges ---------- */
.tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--blue-100);padding:3px 9px;white-space:nowrap}
.pri{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:0.1em;text-transform:uppercase}
.pri-high{color:var(--red)}
.pri-medium{color:var(--blue-700)}
.pri-low{color:var(--ink-soft)}
.status{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 9px;border:1px solid var(--blue-100);white-space:nowrap;color:var(--ink-soft)}
.status-new{color:var(--blue-700);border-color:var(--blue-700)}
.status-processed{color:var(--ink-soft);border-color:var(--rule)}

/* ---------- detail ---------- */
.back{display:inline-block;margin-bottom:12px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.back:hover{color:var(--blue-700)}
.flash{background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-700);
  padding:9px 14px;margin-bottom:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase}
.meta-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.meta-k{width:110px;flex-shrink:0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.body{background:var(--blue-50);border:1px solid var(--blue-100);padding:16px;white-space:pre-wrap;
  word-break:break-word;max-height:480px;overflow:auto;font-family:var(--font-mono);font-size:13px;line-height:1.6}
.detail-grid form label{display:block;margin-bottom:14px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.detail-grid form input,.detail-grid form select,.detail-grid form textarea{width:100%;margin-top:6px;color:var(--ink)}
.detail-grid form textarea{font-family:var(--font-serif);font-size:15px;text-transform:none;letter-spacing:0;line-height:1.5}

/* ---------- login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--paper)}
.login-card{background:var(--white);border:1px solid var(--blue-100);padding:38px 42px;width:410px;max-width:90vw;text-align:center}
.login-card .wordmark{display:block;margin-bottom:18px}
.login-card h1{font-size:24px;margin:0 0 8px}
.login-card p{font-family:var(--font-serif);font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0}
.login-card form{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.login-card input{width:100%;text-align:center}
.login-card .btn{padding:10px 14px}
.login-error{background:rgba(233,26,0,0.10);border:1px solid var(--red);color:var(--red);padding:10px 14px;
  margin:14px 0;font-family:var(--font-mono);font-size:12px;letter-spacing:0.01em;text-transform:none;line-height:1.5}

@media (max-width:860px){
  .cards,.two-col,.detail-grid{grid-template-columns:1fr}
  .topbar{padding:0 20px}
  main{padding:24px}
  /* Date folds under the sender so the table needs one fewer column. */
  .col-date{display:none}
  .sender-date{display:block}
}