/* DEP-XRAY — forensic evidence terminal
   Palette: phosphor black, amber ink, incident red, clean green. */

:root {
  --bg: #070a08;
  --bg-panel: #0b0f0c;
  --bg-inset: #050705;
  --ink: #d8cfb4;
  --ink-dim: #7d7660;
  --amber: #ffb000;
  --amber-dim: #8f6a10;
  --red: #ff4030;
  --green: #4fd67a;
  --blue: #6fb7ff;
  --line: #221f14;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display: "Doto", var(--mono);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  background-image: radial-gradient(ellipse 120% 80% at 50% -10%, #10160f 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  padding: 32px clamp(16px, 4vw, 56px) 48px;
}

::selection { background: var(--amber); color: var(--bg); }

/* ---- atmosphere ---- */

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  mix-blend-mode: multiply;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 41; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- masthead ---- */

.masthead { max-width: 1180px; margin: 0 auto 28px; }

.masthead-meta {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim);
  border-bottom: 1px dashed var(--line); padding-bottom: 10px; margin-bottom: 18px;
}

.stamp { color: var(--amber-dim); }
.case-no { color: var(--ink-dim); }

.title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(44px, 9vw, 108px);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 14px;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 176, 0, 0.35), 0 0 60px rgba(255, 176, 0, 0.12);
}

.cursor {
  display: inline-block; width: 0.45em; height: 0.78em; margin-left: 0.12em;
  background: var(--amber); animation: blink 1.1s steps(1) infinite;
  box-shadow: 0 0 14px rgba(255, 176, 0, 0.6);
}

@keyframes blink { 50% { opacity: 0; } }

.tagline { max-width: 62ch; margin: 0; color: var(--ink-dim); }
.tagline em { color: var(--ink); font-style: normal; border-bottom: 1px solid var(--amber-dim); }
.tagline u { text-decoration-color: var(--amber); color: var(--ink); }

/* ---- layout ---- */

.bench {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 22px;
  align-items: start;
}

@media (max-width: 900px) { .bench { grid-template-columns: 1fr; } }

.intake, .findings {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, 0.55);
}

.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, #101410, var(--bg-panel));
}

.panel-tag {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.22em; color: var(--amber);
}

.panel-hint { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; }
.panel-hint.busy { color: var(--amber); animation: blink 0.9s steps(1) infinite; }

/* ---- intake ---- */

#manifest {
  display: block; width: 100%; min-height: 420px; resize: vertical;
  background: var(--bg-inset); color: var(--ink);
  border: none; border-bottom: 1px solid var(--line);
  padding: 14px; font: 13px/1.6 var(--mono);
  outline: none; caret-color: var(--amber);
}

#manifest:focus { box-shadow: inset 0 0 0 1px var(--amber-dim); }

.intake-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
}

#scan-btn {
  font: 700 15px/1 var(--display);
  letter-spacing: 0.22em;
  color: var(--bg); background: var(--amber);
  border: none; padding: 13px 22px; cursor: pointer;
  box-shadow: 0 0 22px rgba(255, 176, 0, 0.25);
  transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
}

#scan-btn:hover { background: #ffc23d; box-shadow: 0 0 34px rgba(255, 176, 0, 0.45); }
#scan-btn:active { transform: translateY(1px); }
#scan-btn:disabled { background: var(--amber-dim); cursor: wait; box-shadow: none; }

.btn-arrow { margin-left: 10px; }

.dep-count { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.1em; }

/* ---- verdict ---- */

.verdict {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 14px; border-bottom: 1px dashed var(--line);
}

.verdict-stamp {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0.1em;
  padding: 8px 16px; border: 2px solid currentColor;
  transform: rotate(-1.6deg);
  animation: stamp-in 260ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes stamp-in {
  from { transform: rotate(-1.6deg) scale(2.2); opacity: 0; }
  to { transform: rotate(-1.6deg) scale(1); opacity: 1; }
}

.verdict-stamp.crit { color: var(--red); text-shadow: 0 0 20px rgba(255, 64, 48, 0.5); }
.verdict-stamp.warn { color: var(--amber); text-shadow: 0 0 20px rgba(255, 176, 0, 0.4); }
.verdict-stamp.clean { color: var(--green); text-shadow: 0 0 20px rgba(79, 214, 122, 0.4); }

.verdict-tallies { display: flex; gap: 14px; font-size: 11px; letter-spacing: 0.12em; }
.verdict-tallies b { display: block; font-size: 22px; font-weight: 500; letter-spacing: 0; }
.tally-crit b { color: var(--red); }
.tally-warn b { color: var(--amber); }
.tally-note b { color: var(--blue); }
.tally-clean b { color: var(--green); }

/* ---- results ---- */

.results { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }

.dep {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 12px;
  animation: dep-in 300ms ease both;
  border-left: 3px solid transparent;
}

@keyframes dep-in { from { opacity: 0; transform: translateX(-8px); } }

.dep.crit { border-left-color: var(--red); background: rgba(255, 64, 48, 0.04); }
.dep.warn { border-left-color: var(--amber); }
.dep.note { border-left-color: var(--blue); }
.dep.clean { border-left-color: #1d2b1f; }

.dep-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}

.dep-name { font-weight: 700; color: var(--ink); }
.dep-range { color: var(--ink-dim); font-size: 12px; }

.dep-badge {
  margin-left: auto; font-size: 10px; letter-spacing: 0.2em;
  padding: 2px 8px; border: 1px solid currentColor;
}

.dep.crit  .dep-badge { color: var(--red); }
.dep.warn  .dep-badge { color: var(--amber); }
.dep.note  .dep-badge { color: var(--blue); }
.dep.clean .dep-badge { color: var(--green); }

.dep-findings { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.dep-findings li { padding-left: 18px; position: relative; color: var(--ink-dim); }
.dep-findings li::before { content: "▪"; position: absolute; left: 4px; }
.dep-findings li.f-crit { color: #ffb3ad; }
.dep-findings li.f-crit::before { color: var(--red); }
.dep-findings li.f-warn { color: #ecd9a8; }
.dep-findings li.f-warn::before { color: var(--amber); }
.dep-findings li.f-note::before { color: var(--blue); }

/* ---- console ---- */

.console {
  height: 150px; overflow-y: auto;
  background: var(--bg-inset); border-top: 1px solid var(--line);
  padding: 10px 14px; font-size: 11.5px; line-height: 1.7; color: var(--ink-dim);
}

.console .ln-ok::before   { content: "▸ "; color: var(--green); }
.console .ln-err::before  { content: "▸ "; color: var(--red); }
.console .ln-sys::before  { content: "▸ "; color: var(--amber); }

/* ---- colophon ---- */

.colophon {
  max-width: 1180px; margin: 26px auto 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em;
  border-top: 1px dashed var(--line); padding-top: 12px;
}

/* ---- entrance ---- */

.reveal { animation: rise 520ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.reveal:nth-of-type(2) { animation-delay: 90ms; }
main .reveal:nth-child(1) { animation-delay: 140ms; }
main .reveal:nth-child(2) { animation-delay: 230ms; }
footer.reveal { animation-delay: 320ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .dep, .verdict-stamp { animation: none; }
  .cursor, .panel-hint.busy { animation: none; }
}