/* Terminal CLI theme — shared by index/stats/detectors/reports.html.
   Legacy var() names (--line, --clear, --pending-bg, etc.) are aliased to the new
   palette below so the existing per-page JS, which builds markup via template strings
   referencing those names, re-themes with zero changes to any .js file. */
:root{
  --bg:#12150f;
  --fg:#5fa876;
  --primary:#5fa876;
  --secondary:#d48800;
  --muted:#14381e;
  --accent:#5fa876;
  --error:#cc3333;
  --border:#14381e;
  --radius:0px;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --glow:0 0 6px rgba(95,168,118,.45);

  /* legacy aliases */
  --panel:var(--bg);
  --ink:var(--fg);
  --ink-dim:#538967;
  --line:var(--border);
  --clear:var(--primary);
  --clear-bg:rgba(95,168,118,.10);
  --delete:var(--error);
  --delete-bg:rgba(204,51,51,.12);
  --pending:var(--secondary);
  --pending-bg:rgba(212,136,0,.12);
  --accent-bg:rgba(95,168,118,.10);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background-color:var(--bg);
  /* subtle CRT scanlines — only ever painted on body's own box. Every panel/card/table
     below sets its own opaque background, so this never shows through over thumbnails
     or text; it's only visible in the gutters between panes. */
  background-image:repeating-linear-gradient(0deg, rgba(95,168,118,.035) 0px, rgba(95,168,118,.035) 1px, transparent 1px, transparent 2px);
  color:var(--fg);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
}

h1,h2,h3{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.02em; margin:0 0 6px; }
h1{ font-size:21px; font-weight:700; text-shadow:var(--glow); }
h2{ font-size:14px; font-weight:700; margin-top:30px; padding-bottom:8px; border-bottom:1px dashed var(--border); text-shadow:var(--glow); }
h3{ font-size:13px; font-weight:700; }

.sub,.hint,.note{ color:var(--ink-dim); font-size:12.5px; line-height:1.6; }
.sub{ max-width:70ch; }
.hint{ margin-top:6px; }

a{ color:var(--fg); }
.nav-link{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; color:var(--fg); }
.nav-link::before{ content:"/"; margin-right:4px; color:var(--muted); }
.nav-link:hover{ color:var(--secondary); text-decoration:underline; }

.header-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.nav-links{ display:flex; gap:16px; flex-wrap:wrap; }

.ascii-logo{ font-size:10px; line-height:1.1; color:var(--primary); text-shadow:var(--glow); margin:0 0 10px; white-space:pre; }
@media (max-width:520px){ .ascii-logo{ display:none; } }

/* --- form controls: prompt-style, no boxes --- */
.prompt-field{ display:inline-flex; align-items:center; gap:6px; }
.prompt-prefix{ color:var(--primary); font-size:12px; white-space:nowrap; }
input,select,textarea{ font-family:var(--mono); }
.prompt-field input{
  background:transparent; border:none; border-bottom:1px solid var(--border);
  color:var(--fg); font-size:13px; padding:5px 2px; outline:none; caret-color:var(--primary);
}
.prompt-field input:focus{ border-bottom-color:var(--primary); }
input::placeholder{ color:var(--muted); }
select{
  background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:0;
  font-size:12px; text-transform:uppercase; letter-spacing:.02em; padding:7px 10px; outline:none;
}
select:focus{ border-color:var(--primary); }

/* --- buttons: [ BRACKETED ], invert on hover, no radius --- */
button{
  font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  cursor:pointer; border-radius:0; border:1px solid var(--border); background:transparent; color:var(--fg);
  padding:8px 12px;
}
button::before{ content:"[ "; color:var(--muted); }
button::after{ content:" ]"; color:var(--muted); }
button:hover:not(:disabled){ background:var(--fg); color:#000; border-color:var(--fg); }
button:hover:not(:disabled)::before,button:hover:not(:disabled)::after{ color:#000; }
button:active:not(:disabled){ transform:translateY(1px); }
button:disabled{ opacity:.35; cursor:not-allowed; }
button.primary{ border-color:var(--primary); color:var(--primary); }
button.act-clear.chosen{ border-color:var(--primary); color:var(--primary); background:rgba(95,168,118,.12); }
button.act-delete.chosen{ border-color:var(--error); color:var(--error); background:rgba(204,51,51,.12); }

/* --- toolbar / stats row --- */
.toolbar{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:20px 0 24px; padding:12px 16px; border:1px solid var(--border); background:var(--panel); }
.spacer{ flex:1; }
.stat{ font-size:11.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.03em; }
.stat b{ color:var(--fg); text-shadow:var(--glow); font-weight:700; }

/* --- banners: [OK] / [ERR] prefix via content --- */
.banner{ font-size:12px; padding:8px 12px; border:1px dashed var(--border); margin-bottom:16px; text-transform:uppercase; letter-spacing:.02em; }
.banner.err{ border-color:var(--error); color:var(--error); }
.banner.err::before{ content:"[ERR] "; }
.banner.ok{ border-color:var(--primary); color:var(--primary); }
.banner.ok::before{ content:"[OK] "; }

/* --- bulk action bar --- */
.bulk-action-bar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; padding:10px 16px; border:1px dashed var(--primary); background:rgba(95,168,118,.05); }

/* --- item cards (moderation queue) --- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:0; padding:14px 16px; margin-bottom:8px; display:flex; gap:16px; align-items:flex-start; }
.card.resolved{ opacity:.4; }
.card.focused{ outline:1px solid var(--primary); outline-offset:-1px; }
.card.selected{ background:rgba(95,168,118,.06); border-color:var(--primary); }
.select-col input[type=checkbox]{ width:15px; height:15px; cursor:pointer; accent-color:var(--primary); }
.card-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.title{ font-weight:700; font-size:14px; }
.username{ font-size:12px; color:var(--ink-dim); }
.meta-row{ display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:8px; align-items:center; }
.thumbs{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.thumbs img{ width:64px; height:64px; object-fit:cover; border-radius:0; border:1px solid var(--border); display:block; filter:none; }
.id{ font-size:11px; color:var(--ink-dim); margin-top:8px; }
.actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.actions button{ min-width:100px; text-align:left; padding:7px 10px; font-size:11.5px; }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-dim); font-size:13px; text-transform:uppercase; }
.empty::before{ content:"[ ]  "; color:var(--muted); }

/* --- tags/reasons/badges/pills: bracketed text, no fill --- */
.tag,.reason,.badge,.pill,.model-tag,.tag-decision,.label.mono{ background:transparent!important; border:none; padding:0; border-radius:0; font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
.tag::before,.reason::before,.badge::before,.pill::before,.model-tag::before{ content:"["; }
.tag::after,.reason::after,.badge::after,.pill::after,.model-tag::after{ content:"]"; }
.tag{ color:var(--fg); margin-right:6px; }
.reason{ color:var(--secondary); margin-right:6px; }
.reason .score{ opacity:.7; margin-left:4px; }
.reason-toggle{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.reason-toggle:has(input:not(:checked)) .reason{ opacity:.4; text-decoration:line-through; }
.pill{ display:inline-block; margin:2px 6px 2px 0; }
.pill.flagged,.badge.status-open,.badge.status-flagged{ color:var(--secondary); }
.pill.clear,.badge.status-clear,.badge.status-resolved,.badge.status-actioned{ color:var(--primary); }
.pill.other,.badge.source-email,.badge.source-block{ color:var(--fg); }
.badge.status-needs_manual_review{ color:var(--error); }
.tag-decision.clear{ color:var(--primary); }
.tag-decision.delete{ color:var(--error); }
.decided-at{ font-size:11px; color:var(--ink-dim); margin-left:auto; white-space:nowrap; }

/* --- ascii progress bars (stats.js / detectors.js render these as text) --- */
.ascii-bar{ font-family:var(--mono); color:var(--primary); }
.ascii-bar .empty{ color:var(--border); }

/* --- tables --- */
table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border); }
th,td{ text-align:left; padding:8px 12px; font-size:12px; border-bottom:1px solid var(--border); }
th{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); font-weight:700; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:rgba(95,168,118,.04); }

/* --- stat tiles (stats.html) --- */
.tiles{ display:flex; gap:1px; flex-wrap:wrap; background:var(--border); border:1px solid var(--border); }
.tile{ flex:1; min-width:140px; background:var(--bg); padding:14px 16px; }
.tile .label{ font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.02em; }
.tile .value{ font-size:22px; font-weight:700; margin-top:4px; text-shadow:var(--glow); }
.tile .value.clear{ color:var(--primary); }
.tile .value.delete{ color:var(--error); text-shadow:0 0 6px rgba(204,51,51,.45); }

/* --- reports.html layout --- */
.layout{ display:flex; gap:16px; align-items:flex-start; }
.list-col{ flex:0 0 380px; display:flex; flex-direction:column; gap:8px; max-height:75vh; overflow-y:auto; }
.detail-col{ flex:1; min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:0; padding:20px; min-height:200px; }
.row{ background:var(--panel); border:1px solid var(--border); border-radius:0; padding:12px 14px; cursor:pointer; }
.row:hover{ border-color:var(--primary); }
.row.active{ border-color:var(--primary); background:rgba(95,168,118,.06); }
.row-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.reason-preview{ font-size:12px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meta{ font-size:10.5px; color:var(--ink-dim); margin-top:4px; }
.field{ margin-bottom:14px; }
.field .label{ font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-dim); margin-bottom:3px; }
.field .value{ font-size:13px; }
.reason-text,.raw-email,.chat{ background:var(--bg); border:1px solid var(--border); border-radius:0; padding:10px 12px; font-size:12.5px; }
.raw-email{ white-space:pre-wrap; max-height:300px; overflow-y:auto; }
.reason-text{ white-space:pre-wrap; }
.chat{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.msg .who{ font-weight:700; margin-right:6px; }
.msg .when{ color:var(--ink-dim); font-size:11px; }
.actions-row{ display:flex; gap:8px; margin-top:18px; }
.placeholder{ color:var(--ink-dim); font-size:13px; text-align:center; padding:60px 20px; text-transform:uppercase; }

/* --- sticky bar (index.html) --- */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; background:var(--bg); border-top:1px solid var(--border); padding:12px 20px; display:flex; gap:10px; align-items:center; justify-content:center; }
.sticky-bar .stat{ margin-right:auto; }

/* --- shared shell/layout --- */
.shell{ max-width:960px; margin:0 auto; padding:32px 20px 100px; }