/* Palette carried over from the 324-case report so the two read as one thing. */
:root{
  --ground:#eef1ee; --surface:#fff; --surface-2:#f6f8f6; --ink:#15211c; --muted:#5a6b63; --faint:#8a9990;
  --line:#dde3df; --line-strong:#c9d2cc; --accent:#0d6b56; --accent-soft:#dcece6; --accent-ink:#0a5544;
  --pass:#17794e; --pass-bg:#e4f1e9; --fail:#b0561a; --fail-bg:#fbeadd;
  --part:#9a6a12; --part-bg:#f7ecd6; --na:#6a6f74; --na-bg:#eceef0;
  --shadow:0 1px 2px rgba(20,40,32,.06),0 8px 24px -12px rgba(20,40,32,.14);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style",Palatino,Georgia,serif;
  --ar:"SF Arabic","Noto Naskh Arabic","Amiri",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0d1411; --surface:#141d19; --surface-2:#17221d; --ink:#e7efe9; --muted:#93a49b; --faint:#6d7d74;
    --line:#243029; --line-strong:#2f3d35; --accent:#54d3ad; --accent-soft:#1a3029; --accent-ink:#7fe0c2;
    --pass:#57c98c; --pass-bg:#123024; --fail:#e0894f; --fail-bg:#33200f;
    --part:#e0b24f; --part-bg:#332810; --na:#98a2a8; --na-bg:#1e2429;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* .login{display:grid} would otherwise win */
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)}
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 8px}

/* ------------------------------------------------------------------ login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-box{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:26px}
.login-box h1{font-size:28px}
.who{display:grid;gap:8px;margin:18px 0 14px}
.who button{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer}
.who button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.field{display:grid;gap:6px;margin-bottom:14px}
.field span{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
input,select,textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.err{color:var(--fail);margin:12px 0 0;font-size:13.5px}

/* ------------------------------------------------------------------- shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px clamp(12px,3vw,26px);background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand strong{font-family:var(--serif);font-size:17px;display:block;line-height:1.15}
.brand .sub{font:11.5px/1.4 var(--mono);color:var(--faint)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.me{display:flex;align-items:center;gap:8px}
.chip{font:600 12px/1 var(--mono);padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.chip-new{border:0;cursor:pointer;background:var(--accent);color:#fff}
.chip-new:hover{filter:brightness(1.08)}
@media (prefers-color-scheme:dark){.chip-new{color:#08120f}}
:root[data-theme="dark"] .chip-new{color:#08120f}
.feed-item.is-unread{border-inline-start:3px solid var(--accent)}

.filters{position:sticky;top:53px;z-index:19;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px clamp(12px,3vw,26px);background:var(--ground);border-bottom:1px solid var(--line)}
.filters select{width:auto;flex:0 1 auto;padding:8px 10px;font-size:13.5px}
.search{flex:1 1 220px;min-width:160px;padding:8px 12px;font-size:14px}
.count{font:11.5px/1 var(--mono);color:var(--faint);margin-inline-start:auto;white-space:nowrap}

.panes{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:0;align-items:start}
@media (max-width:900px){
  .panes{grid-template-columns:1fr}
  .detail{display:none;position:fixed;inset:0;z-index:30;overflow:auto;background:var(--ground)}
  body.detail-open .detail{display:block}
  body.detail-open .list,body.detail-open .filters{display:none}
}

/* -------------------------------------------------------------------- list */
.list{border-inline-end:1px solid var(--line);max-height:calc(100dvh - 106px);overflow:auto;padding:8px}
@media (max-width:900px){.list{max-height:none;border:0}}
.case{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 12px;border-radius:12px;cursor:pointer;
  border:1px solid transparent}
.case:hover{background:var(--surface-2)}
.case[aria-current=true]{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow)}
.case .num{font:600 12px/1.6 var(--mono);color:var(--faint)}
.case .q{font-family:var(--ar);font-size:15px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.tag{font:11px/1 var(--mono);padding:4px 7px;border-radius:6px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.badge{font:600 10.5px/1 var(--mono);padding:4px 7px;border-radius:999px;letter-spacing:.04em}
.b-PASS{background:var(--pass-bg);color:var(--pass)} .b-FAIL{background:var(--fail-bg);color:var(--fail)}
.b-PARTIAL{background:var(--part-bg);color:var(--part)} .b-NA{background:var(--na-bg);color:var(--na)}
.b-run{background:var(--accent-soft);color:var(--accent-ink)}
.b-new{background:var(--accent);color:#fff;font-weight:700}
.b-changed{background:var(--part-bg);color:var(--part)}
.ev-PASS{background:var(--pass-bg);color:var(--pass);border:1px solid var(--pass)}
.ev-FAIL{background:var(--fail-bg);color:var(--fail);border:1px solid var(--fail)}
.ev-PARTIAL{background:var(--part-bg);color:var(--part);border:1px solid var(--part)}
.ev-NA{background:var(--na-bg);color:var(--na);border:1px solid var(--line-strong)}
@media (prefers-color-scheme:dark){.b-new{color:#08120f}}
:root[data-theme="dark"] .b-new{color:#08120f}

/* ------------------------------------------------------------------ detail */
.detail{padding:clamp(14px,2.4vw,26px);max-height:calc(100dvh - 106px);overflow:auto}
.empty{color:var(--faint);text-align:center;padding:60px 20px;font-size:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:14px}
.card h2{font-family:var(--serif);font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .n{font:11.5px/1 var(--mono);color:var(--faint);font-weight:400}
.dhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ar{font-family:var(--ar);font-size:16px;line-height:1.9}
.q-big{font-family:var(--ar);font-size:19px;line-height:1.9;margin:0 0 10px}
.gap{background:var(--fail-bg);color:var(--fail);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:10px}
.kv{display:flex;flex-wrap:wrap;gap:6px 14px;font:11.5px/1.6 var(--mono);color:var(--faint);margin-top:8px}

.run{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface-2)}
.run.base{border-inline-start:3px solid var(--accent)}
.run.err{border-inline-start:3px solid var(--fail)}
.run-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.run-head .who{font-weight:600;margin:0;display:inline}
.run-body{white-space:pre-wrap;word-break:break-word}
.clamp{max-height:12.5em;overflow:hidden;position:relative}
.clamp::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3.2em;
  background:linear-gradient(to bottom,transparent,var(--surface-2))}
.more{margin-top:6px}

.comment{border-inline-start:2px solid var(--line-strong);padding:2px 0 2px 12px;margin:0 0 12px;
  padding-inline-start:12px;padding-inline-end:0}
.comment .head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.comment .body{white-space:pre-wrap;word-break:break-word}
.replies{margin-top:10px;margin-inline-start:14px}
.cbox{display:grid;gap:8px;margin-top:10px}
.cbox textarea{min-height:74px;resize:vertical}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:9px 14px;cursor:pointer;
  font-size:14px;font-weight:500;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;width:100%}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.ghost{background:transparent}
.btn.link{border:0;background:none;color:var(--accent-ink);padding:2px 4px;text-decoration:underline;font-size:13px}
.btn[disabled]{opacity:.55;cursor:progress}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px;margin-inline-end:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;inset-inline:0;bottom:18px;margin:auto;width:max-content;max-width:92vw;z-index:50;
  background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:999px;font-size:13.5px;box-shadow:var(--shadow)}

/* -------------------------------------------------------------- admin feed */
.feed{max-width:960px;margin:0 auto;padding:clamp(14px,2.4vw,26px) clamp(12px,3vw,26px) 60px}
.feed h2{font-family:var(--serif);font-size:18px;margin:0 0 4px}
.feed .sub{font:11.5px/1.5 var(--mono);color:var(--faint);margin:0 0 16px}
.who-tally{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.who-tally div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 13px;
  box-shadow:var(--shadow);font-size:13px}
.who-tally b{display:block;font-size:14px;margin-bottom:2px}
.who-tally span{display:block;font:11px/1.6 var(--mono);color:var(--faint)}
.feed-item{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer}
.feed-item:hover{border-color:var(--line-strong)}
.feed-item .av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  display:grid;place-items:center;font:600 13px/1 var(--sans)}
.feed-item .top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:5px}
.feed-item .top b{font-size:14px}
.feed-item .when{font:11px/1.5 var(--mono);color:var(--faint)}
.feed-item .q{font-family:var(--ar);font-size:13.5px;color:var(--muted);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.feed-item .body{white-space:pre-wrap;word-break:break-word;font-size:14.5px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.feed-item .body a{color:var(--accent-ink)}
.feed-item.run .body{font-family:var(--ar);color:var(--muted);font-size:14px}
.feed-item .reply-to{font-size:12.5px;color:var(--faint);margin-bottom:4px}
.feed-empty{color:var(--faint);text-align:center;padding:50px 20px}

/* ------------------------------------------------------- comment attachments */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-file{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 8px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line)}
.chip-file .muted{font:11px/1 var(--mono)}
/* staged (not yet posted) attachment previews */
.stage{display:inline-flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line)}
.stage.audio{min-width:260px}
.stage-img{max-width:150px;max-height:120px;border-radius:8px;display:block;cursor:zoom-in;object-fit:cover}
.stage-audio{width:100%;height:34px}
.stage-meta{display:flex;align-items:center;gap:8px;font:11px/1.4 var(--mono)}
.stage-meta .btn.link{margin-inline-start:auto}
.btn.rec{background:var(--fail-bg);color:var(--fail);border-color:var(--fail)}
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.att-img{max-width:220px;max-height:220px;border-radius:10px;border:1px solid var(--line);display:block;cursor:zoom-in}
.att-img:hover{border-color:var(--accent)}
.att-audio{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:4px 8px}
.att-audio audio{height:32px}

/* full-size image preview */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(8,18,15,.86);backdrop-filter:blur(3px);cursor:zoom-out}
.lightbox img{max-width:min(1100px,94vw);max-height:90vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox .btn{position:absolute;top:16px;inset-inline-end:16px}