/* USAGM4730 Language ID — implements DESIGN.md.
 *
 * Tokens are copied verbatim from DESIGN.md. Do not introduce a colour, a
 * spacing value or a radius that is not defined there. If something needs one,
 * it goes in DESIGN.md first.
 */

:root {
  /* Surfaces */
  --bg: #0b0f14;
  --surface: #111820;
  --surface-raised: #17212b;
  --surface-border: #26313d;

  /* Text */
  --text-primary: #f3f7fb;
  --text-muted: #94a3b3;
  --text-subtle: #657385;

  /* Accent — Azure cyan (AI intelligence, system activity) */
  --accent: #00bcf2;
  --accent-strong: #40d9ff;
  --accent-soft: rgba(0, 188, 242, 0.14);

  /* Semantic */
  --success: #6bb700;
  --warning: #ffb900;
  --error: #d13438;
  --info: #00bcf2;

  /* Domain-specific */
  --match: #6bb700;
  --mismatch: #d13438;
  --low-confidence: #ffb900;
  --stream-down: #657385;
  --detection-failed: #b146c2; /* our fault, not theirs */

  /* Interactive */
  --focus-ring: #40d9ff;
  --button-primary-bg: #00bcf2;
  --button-primary-text: #0b0f14;
  --button-primary-hover: #40d9ff;

  /* Spacing, base unit 4px, compact */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro: 75ms;
  --duration-short: 150ms;
  --duration-medium: 300ms;

  /* Type families. Aptos and Cascadia Code are the design system's choice;
   * the Noto fallbacks exist because Aptos covers neither CJK nor Arabic script
   * and this dashboard renders Mandarin, Korean, Persian, Dari and Pashto names.
   * A language name must never fall back to tofu. */
  --font-ui: "Aptos", "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif,
    "Noto Sans SC", "Noto Sans KR", "Noto Sans Arabic";
  --font-display: "Aptos Display", "Aptos", "DM Sans", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, monospace;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
 *
 * A UA stylesheet gives [hidden] { display: none }, but any class rule setting
 * display wins on specificity. `.presenter { display: flex }` therefore kept
 * the presenter strip visible in live mode, where scenario controls are
 * refused by the server and must not be offered at all. Found by looking at
 * the deployed page. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* the page never scrolls sideways; panels do */
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */

.header {
  height: 48px;
  flex: 0 0 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-md);
}

.header__mark {
  width: 16px; height: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  flex: 0 0 auto;
}
.header__mark i { display: block; }
.header__mark i:nth-child(1) { background: #f25022; }
.header__mark i:nth-child(2) { background: #7fba00; }
.header__mark i:nth-child(3) { background: #00a4ef; }
.header__mark i:nth-child(4) { background: #ffb900; }

.header__project {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.header__title { font-weight: 400; color: var(--text-primary); }
.header__spacer { flex: 1; }

.header__meta {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.header__meta b {
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.badge-demo {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--warning);
  color: var(--bg);
}

/* ----------------------------------------------------------- summary bar */

.summary {
  height: 48px;
  flex: 0 0 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: 0 var(--space-md);
  overflow-x: auto;
}

.stat { display: flex; align-items: baseline; gap: var(--space-sm); }
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Only the mismatch count may carry colour, and only when non-zero. */
.stat--alarm .stat__value { color: var(--mismatch); }
.stat--fail .stat__value { color: var(--detection-failed); }

/* ------------------------------------------------------------------ main */

.main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  min-height: 0;
}

.section__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.section__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin: 0;
}
.section__note {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* ---------------------------------------------------------- channel grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}

.tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--stream-down);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition:
    background var(--duration-short) var(--ease),
    border-color var(--duration-medium) var(--ease);
}
.tile:hover { background: var(--surface-raised); }

.tile[data-token="match"] { border-left-color: var(--match); }
.tile[data-token="mismatch"] { border-left-color: var(--mismatch); background: var(--surface-raised); }
.tile[data-token="low-confidence"] { border-left-color: var(--low-confidence); }
.tile[data-token="stream-down"] { border-left-color: var(--stream-down); }
.tile[data-token="detection-failed"] { border-left-color: var(--detection-failed); background: var(--surface-raised); }
.tile[data-token="warning"] { border-left-color: var(--warning); }

.tile__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.tile__name { font-weight: 500; font-size: var(--text-base); }
.tile__network {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-xs);
}
.tile__unconfirmed {
  font-size: var(--text-xs);
  color: var(--warning);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-xs);
}

.tile__status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
/* Status is never colour alone: a shape and a word accompany every colour,
 * because this dashboard's core job is a red/green distinction and red/green is
 * the most common colour vision deficiency. */
.dot {
  width: 10px; height: 10px;
  flex: 0 0 10px;
  background: currentColor;
}
.dot--match { border-radius: var(--radius-full); }                    /* circle */
.dot--mismatch { clip-path: polygon(50% 0, 100% 100%, 0 100%); }      /* triangle */
.dot--low-confidence { transform: rotate(45deg); }                    /* diamond */
.dot--stream-down { border-radius: 1px; }                             /* square */
.dot--detection-failed {
  border-radius: var(--radius-full);
  background: transparent;
  border: 2px solid currentColor;
}                                                                     /* ring */

.status-word {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Status colour is set on the tile so both the status row and the confidence
 * bar inherit it. The bar taking the status colour is load-bearing, not
 * decorative: a 90% confidence bar in cyan or white next to a MISMATCH reads as
 * a healthy signal, and it is the opposite. */
[data-token="match"] .tile__status,
[data-token="match"] .conf { color: var(--match); }
[data-token="mismatch"] .tile__status,
[data-token="mismatch"] .conf { color: var(--mismatch); }
[data-token="low-confidence"] .tile__status,
[data-token="low-confidence"] .conf { color: var(--low-confidence); }
[data-token="stream-down"] .tile__status,
[data-token="stream-down"] .conf { color: var(--stream-down); }
[data-token="detection-failed"] .tile__status,
[data-token="detection-failed"] .conf { color: var(--detection-failed); }
[data-token="warning"] .tile__status,
[data-token="warning"] .conf { color: var(--warning); }

/* The numeric readout stays neutral; only the bar carries the status colour,
 * so the number remains easy to read at projector distance. */
.conf__num { color: var(--text-muted); }
.conf .stat__label { color: var(--text-muted); }

.kv { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-xs) var(--space-sm); }
.kv__k {
  font-size: var(--text-xs);
  color: var(--text-muted);
  align-self: center;
}
.kv__v {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.kv__v--mismatch { color: var(--mismatch); }
.kv__v--muted { color: var(--text-subtle); }

.conf { margin-top: var(--space-md); }
.conf__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-xs);
}
.conf__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.conf__track {
  height: 3px;
  background: var(--surface-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
/* The fill takes the STATUS colour, not the accent: confidence in a wrong
 * answer must not read as a positive signal. */
.conf__fill {
  height: 100%;
  background: currentColor;
  transition: width var(--duration-medium) var(--ease);
}

.tile__age {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.tile__age--warn { color: var(--warning); }
.tile__age--stale { color: var(--stream-down); font-weight: 600; }

/* One pulse cycle while a sample is in flight. Never a permanent animation:
 * a control-room surface that flashes forever gets muted. */
@keyframes pulse-once {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}
.tile--sampling .dot { animation: pulse-once var(--duration-medium) var(--ease) 2; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------- detection log */

.log {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.log__scroll { max-height: 320px; overflow: auto; }

table { border-collapse: collapse; width: 100%; }
thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--surface-border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--surface-border); }
tbody tr:hover { background: var(--surface-raised); }
tbody td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: nowrap;
}
td.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.pill {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill--match { background: var(--match); color: var(--bg); }
.pill--mismatch { background: var(--mismatch); color: var(--text-primary); }
.pill--low-confidence { background: var(--low-confidence); color: var(--bg); }
.pill--stream-down { background: var(--stream-down); color: var(--text-primary); }
.pill--detection-failed { background: var(--detection-failed); color: var(--text-primary); }
.pill--warning { background: var(--warning); color: var(--bg); }

/* ---------------------------------------------------------------- drawer */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(640px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--surface-border);
  transform: translateX(100%);
  transition: transform var(--duration-medium) var(--ease);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.drawer[data-open="true"] { transform: translateX(0); }

.drawer__head {
  flex: 0 0 auto;
  padding: var(--space-md);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.drawer__title { font-size: var(--text-xl); font-weight: 500; margin: 0; }
.drawer__body { flex: 1; overflow: auto; padding: var(--space-md); }

.icon-button {
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font: inherit;
}
.icon-button:hover { color: var(--text-primary); border-color: var(--accent); }

.subhead {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-lg) 0 var(--space-sm);
}

.trace { display: grid; gap: var(--space-sm); }
.trace__hop {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.trace__target { flex: 1; font-size: var(--text-sm); }
.trace__latency {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.json {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

.ack { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.button {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0 var(--space-md);
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease);
}
.button:hover { border-color: var(--accent); }
.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: transparent;
  font-weight: 600;
}
.button--primary:hover { background: var(--button-primary-hover); }
.button[disabled] { opacity: 0.5; cursor: default; }

/* ------------------------------------------------------- presenter strip */

.presenter {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.presenter__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-sm);
}
.presenter select,
.presenter .button { min-height: 36px; }
.presenter select {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  padding: 0 var(--space-sm);
}

/* ---------------------------------------------------------------- footer */

.footer {
  height: 36px;
  flex: 0 0 36px;
  background: var(--surface);
  border-top: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow-x: auto;
}
.footer b { font-weight: 500; color: var(--text-primary); font-family: var(--font-mono); }

.live-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--stream-down);
  display: inline-block;
  margin-right: var(--space-xs);
}
.live-dot[data-live="true"] { background: var(--match); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tablet: DESIGN.md sets the breakpoint at 768px. */
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
  .summary { gap: var(--space-md); }
}

/* --------------------------------------------------------- human check
 *
 * Listening to the channel is the check that makes an alert actionable: an
 * operator seeing "detected Russian at 88%" needs to hear it before
 * dispositioning it. The controls are quiet by default and legible at
 * projector distance when active.
 */

.tile__head-spacer { flex: 1; }

/* The channel name is the focusable affordance that opens detail. Styled as
 * text, because a card full of buttons reads as a form. */
button.tile__name {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
button.tile__name:hover { color: var(--accent); }

.listen {
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: var(--space-2xs) var(--space-sm);
  min-height: 24px;
  cursor: pointer;
  transition: color var(--duration-micro) var(--ease),
              border-color var(--duration-micro) var(--ease);
}
.listen:hover { color: var(--text-primary); border-color: var(--accent); }
/* Cyan is the system-activity colour, and playback is the system doing
 * something on the operator's behalf. It is never a channel status. */
.listen[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* A playing tile is marked, but with a static outline rather than motion: a
 * control room mutes what pulses indefinitely. */
.tile[data-playing="true"] { box-shadow: inset 0 0 0 1px var(--accent); }

.audio-panel {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.audio-panel--empty { border-style: dashed; }

.audio-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.audio-panel__row .listen {
  min-height: 44px;
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
}
.audio-panel__meta { flex: 1; }
.audio-panel__when {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.audio-panel__note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
}
/* Provenance is stated in the interface, not buried in a tooltip. An operator
 * about to overturn the system's verdict must know whether they are hearing
 * the sample it judged or merely audio from the same channel. */
.audio-panel__note--verified { color: var(--match); }
.audio-panel__note--caveat {
  color: var(--warning);
  border-left: 2px solid var(--warning);
  padding-left: var(--space-sm);
}

.audio-panel__clips {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--surface-border);
}
.audio-panel__clips .listen { font-family: var(--font-mono); }

/* ------------------------------------------------------ simulation banner
 *
 * Added after a viewer heard genuine Korean audio while the screen read
 * "detected Russian" and reasonably asked whether the model was connected.
 * It is not. An amber footnote in a drawer was not enough; the claim has to be
 * unavoidable at a glance, because everything else on the page looks exactly
 * like a working system.
 */
.sim-banner {
  flex: 0 0 auto;
  background: var(--warning);
  color: var(--bg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.sim-banner strong { font-weight: 600; }
.sim-banner code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(11, 15, 20, 0.15);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
}
.sim-banner em { font-style: normal; font-weight: 600; }

/* A channel with no stream states the gap and shows nothing else. */
.tile__nofeed {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Present and explained, rather than silently absent. */
.listen--disabled {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}
.listen--disabled:hover { color: var(--text-muted); border-color: var(--surface-border); }

/* Live detection banner. The mirror of .sim-banner: a viewer needs to know the
 * results are real just as clearly as they need to know when they are not. */
.live-banner {
  flex: 0 0 auto;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.live-banner strong { color: var(--accent); font-weight: 600; }
.live-banner code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-strong);
}
#live-locales { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
#live-dari-caveat { color: var(--warning); }

/* Live listening reads as system activity, which is what cyan means here. It
 * is deliberately not a status colour: hearing a channel is not a verdict. */
.listen--live[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.audio-panel--live { border-color: var(--accent); }