/* Material 3 dark theme, matching the Teen Chillout Mod console
 * (team-chillo-mod-tool/src/app/globals.css) so the two tools read as one
 * suite: same navy surfaces, same lilac primary, same 240px rail.
 *
 * Tokens are copied from that theme verbatim. Fonts and icons are deliberately
 * NOT loaded from Google: this server runs on a LAN and handles records about
 * minors, so it makes no third-party requests. Icons are inline SVG
 * (templates/_icons.html) and the type stack falls back to the system UI font.
 */
:root {
  --background: #051424;
  --surface: #051424;
  --surface-dim: #051424;
  --surface-container-lowest: #010f1f;
  --surface-container-low: #0d1c2d;
  --surface-container: #122131;
  --surface-container-high: #1c2b3c;
  --surface-container-highest: #273647;
  --surface-variant: #273647;
  --surface-bright: #2c3a4c;

  --on-background: #d4e4fa;
  --on-surface: #d4e4fa;
  --on-surface-variant: #c8c4d9;

  --outline: #928ea2;
  --outline-variant: #474556;

  --primary: #c7bfff;
  --primary-container: #6344ff;
  --on-primary-container: #ebe6ff;
  --on-primary: #2b009e;

  --secondary: #bcc7de;
  --secondary-container: #3e495d;
  --on-secondary-container: #aeb9d0;

  --tertiary: #bec6e0;
  --tertiary-container: #60687f;
  --on-tertiary-container: #e3e8ff;

  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  --xs: 8px;
  --sm: 16px;
  --gutter: 24px;
  --md: 24px;
  --lg: 40px;
  --rail: 240px;
  --bar: 64px;

  --r: 0.25rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Hanken Grotesk", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font: 400 16px/24px var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px/1.4 Consolas, ui-monospace, monospace; }

.ic { vertical-align: -0.2em; flex: none; }

/* ---------- type scale ---------- */
h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 600; margin: 0; color: var(--on-surface); }
h2 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 var(--sm); color: var(--on-surface); }
h3 { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); margin: 0 0 4px; }
.lead { color: var(--on-surface-variant); margin: 4px 0 0; }
.dim { color: var(--on-surface-variant); font-size: 14px; line-height: 20px; }
.label { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- app shell ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 50;
  background: var(--surface-container-low);
  border-right: 1px solid var(--outline-variant);
  display: flex; flex-direction: column; padding: var(--md) var(--xs);
}
.rail .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--sm) var(--md); color: var(--primary);
}
.rail .brand .mark {
  width: 40px; height: 40px; border-radius: var(--r-lg); flex: none;
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
}
.rail .brand b { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--primary); }
.rail .brand span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 500; }
.rail nav { display: flex; flex-direction: column; gap: var(--xs); flex: 1; }
.rail .foot { border-top: 1px solid var(--outline-variant); padding-top: var(--sm); margin-top: auto; }
.rail a.nav, .rail button.nav {
  display: flex; align-items: center; gap: var(--sm); width: 100%;
  padding: var(--xs) var(--sm); border-radius: var(--r-lg);
  color: var(--on-surface-variant); font: inherit; font-size: 15px;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background-color .2s, color .2s;
}
.rail a.nav:hover, .rail button.nav:hover { background: var(--surface-variant); text-decoration: none; }
.rail a.nav.on {
  background: var(--primary-container); color: var(--on-primary-container);
  font-weight: 700; transform: scale(.98);
}

.topbar {
  position: fixed; top: 0; right: 0; left: var(--rail); height: var(--bar); z-index: 10;
  background: var(--surface-dim); border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 var(--gutter);
}
.topbar .who { display: flex; align-items: center; gap: 10px; color: var(--on-surface-variant); }
.topbar .who .name { color: var(--on-surface); font-weight: 600; font-size: 14px; }

main { margin: var(--bar) 0 0 var(--rail); padding: var(--lg) var(--gutter) 64px; }
.wrap { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gutter); }

@media (max-width: 900px) {
  .rail {
    position: static; width: auto; flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--outline-variant);
    padding: var(--xs); gap: var(--xs); overflow-x: auto;
  }
  .rail .brand { padding: 0 var(--xs) 0 var(--sm); }
  .rail .brand .txt { display: none; }
  .rail nav { flex-direction: row; flex: 1; }
  .rail a.nav span.t { display: none; }
  .rail .foot { border: none; padding: 0; margin: 0; }
  .topbar { position: static; left: auto; width: 100%; }
  main { margin: 0; padding: var(--gutter) var(--sm) 64px; }
}

/* ---------- role / status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid transparent;
}
.pill-mod { background: var(--primary-container); color: var(--on-primary-container); border-color: var(--primary); }
.pill-hr  { background: var(--tertiary-container); color: var(--on-tertiary-container); border-color: var(--tertiary); }
.pill-ok  { background: color-mix(in srgb, var(--primary-container) 22%, transparent); color: var(--primary); border-color: var(--primary-container); }
.pill-bad { background: color-mix(in srgb, var(--error-container) 30%, transparent); color: var(--error); border-color: var(--error); }
.pill-warn{ background: var(--surface-variant); color: var(--tertiary); border-color: var(--outline-variant); }
.pill-mut { background: var(--surface-variant); color: var(--on-surface-variant); border-color: var(--outline-variant); }

/* incident status */
.st-new { background: color-mix(in srgb, var(--primary-container) 22%, transparent); color: var(--primary); border-color: var(--primary-container); }
.st-reported { background: var(--secondary-container); color: var(--on-secondary-container); border-color: var(--outline-variant); }
.st-dismissed { background: var(--surface-variant); color: var(--on-surface-variant); border-color: var(--outline-variant); }
/* verdicts */
.v-in_range { background: color-mix(in srgb, var(--primary-container) 22%, transparent); color: var(--primary); border-color: var(--primary-container); }
.v-under { background: color-mix(in srgb, var(--error-container) 30%, transparent); color: var(--error); border-color: var(--error); }
.v-over { background: var(--tertiary-container); color: var(--on-tertiary-container); border-color: var(--outline-variant); }
.v-unchecked { background: var(--surface-variant); color: var(--on-surface-variant); border-color: var(--outline-variant); }

/* ---------- cards ---------- */
.card {
  background: var(--surface-container-low); border: 1px solid var(--outline-variant);
  border-radius: var(--r-xl); padding: var(--md);
}
.card:hover { border-color: var(--outline); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); margin-bottom: var(--sm); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gutter); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

/* metric tiles, with the oversized watermark glyph from the reference */
.metric { position: relative; overflow: hidden; }
.metric .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sm); }
.metric .chip-ic {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
}
.metric .n { font-size: 40px; line-height: 48px; letter-spacing: -0.02em; font-weight: 700; color: var(--on-surface); }
.metric .n small { font-size: 16px; font-weight: 400; color: var(--on-surface-variant); margin-left: 8px; }
.metric .ghost { position: absolute; right: -22px; bottom: -26px; opacity: .06; pointer-events: none; }
.metric:hover .ghost { opacity: .11; }
.metric.is-primary .chip-ic { background: color-mix(in srgb, var(--primary-container) 20%, transparent); color: var(--primary); }
.metric.is-primary .ghost { color: var(--primary); }
.metric.is-error .chip-ic { background: color-mix(in srgb, var(--error-container) 20%, transparent); color: var(--error); }
.metric.is-error .ghost { color: var(--error); }
.metric.is-tertiary .chip-ic { background: color-mix(in srgb, var(--tertiary-container) 25%, transparent); color: var(--tertiary); }
.metric.is-tertiary .ghost { color: var(--tertiary); }
a.metric:hover { text-decoration: none; }

/* ---------- forms ---------- */
input, select, textarea, button {
  font: inherit; color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--outline-variant); border-radius: var(--r-lg);
  padding: 8px 12px;
}
input::placeholder, textarea::placeholder { color: var(--outline); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
textarea { width: 100%; resize: vertical; }
label { display: block; font-size: 14px; line-height: 20px; letter-spacing: .05em;
        font-weight: 600; color: var(--on-surface-variant); margin-bottom: var(--xs); }
label input, label select { display: block; width: 100%; margin-top: 6px; font-weight: 400; letter-spacing: normal; }
.field { position: relative; }
.field .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); }
.field input { padding-left: 40px; }

button { cursor: pointer; background: var(--surface-container-high); transition: background-color .2s; }
button:hover { background: var(--surface-variant); }
.btn-primary {
  background: var(--primary-container); color: var(--on-primary-container);
  border-color: var(--primary-container); font-weight: 600;
}
.btn-primary:hover { background: color-mix(in srgb, var(--primary-container) 85%, white); }
.btn-danger { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error-container) 22%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--error-container) 40%, transparent); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
button.link, a.link {
  background: none; border: none; padding: 0; color: var(--primary);
  cursor: pointer; font-size: 14px;
}
button.link:hover { text-decoration: underline; background: none; }
.danger-link { color: var(--error); }

.filters { display: flex; gap: var(--xs); flex-wrap: wrap; align-items: center; }
.filters input[name="q"] { flex: 1; min-width: 220px; }
.inline-form { display: flex; gap: var(--sm); flex-wrap: wrap; align-items: flex-end; }
.inline-form label { margin: 0; }
.inline-form label.grow { flex: 1; min-width: 200px; }
.row-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.row-form input { padding: 4px 8px; width: 62px; }

/* ---------- chips ---------- */
.chips { display: flex; gap: var(--xs); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 14px; border-radius: 9999px; font-size: 14px;
  background: var(--surface-container-low); border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
}
.chip:hover { border-color: var(--outline); text-decoration: none; }
.chip.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.chip-n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.chip.c-unverified .chip-n, .chip.c-under .chip-n { color: var(--error); font-weight: 700; }
.chip.c-unverified.on, .chip.c-under.on {
  background: color-mix(in srgb, var(--error-container) 45%, transparent);
  border-color: var(--error); color: var(--on-error-container);
}
.chip.c-unverified.on .chip-n, .chip.c-under.on .chip-n { color: var(--on-error-container); }

/* ---------- tables ---------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--outline-variant);
  border-radius: var(--r-xl); background: var(--surface-container-low);
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px var(--sm); border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
th {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--on-surface-variant);
  background: var(--surface-container); position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-container); }
td.note { max-width: 280px; font-size: 14px; color: var(--on-surface-variant); }
td.actions { min-width: 280px; }
tr.row-unverified td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.uid { font-size: 12px; color: var(--outline); }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  padding: 10px 0; border-bottom: 1px solid var(--outline-variant);
  display: flex; gap: var(--xs); align-items: center; flex-wrap: wrap;
}
.list li:last-child { border-bottom: none; }

/* ---------- evidence ---------- */
pre.mono {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg); padding: var(--sm); overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
  font: 13px/1.6 Consolas, ui-monospace, monospace; max-height: 420px; color: var(--on-surface-variant);
}
img.shot, video.clip {
  max-width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--outline-variant); display: block; margin: var(--xs) 0;
}

/* ---------- banners ---------- */
.banner {
  display: flex; align-items: center; gap: var(--xs);
  padding: 12px var(--sm); border-radius: var(--r-lg); font-size: 14px;
}
.banner-warn { background: color-mix(in srgb, var(--tertiary-container) 30%, transparent); color: var(--on-tertiary-container); border: 1px solid var(--outline-variant); }
.banner-error { background: color-mix(in srgb, var(--error-container) 22%, transparent); color: var(--error); border: 1px solid var(--error); }

/* ---------- live refresh ---------- */
.live-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 12px 3px 10px; border-radius: 9999px;
  background: color-mix(in srgb, var(--primary-container) 22%, transparent);
  color: var(--primary); border: 1px solid var(--primary-container);
}
.live-toggle::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); animation: pulse 2s ease-in-out infinite;
}
.live-toggle.off { background: var(--surface-variant); color: var(--on-surface-variant); border-color: var(--outline-variant); }
.live-toggle.off::before { background: var(--outline); animation: none; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-toggle::before { animation: none; } }

.stale-pill {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--primary-container); color: var(--on-primary-container);
  border: 1px solid var(--primary); border-radius: 9999px;
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

/* ---------- login ---------- */
.auth-wrap { max-width: 400px; margin: 10vh auto; padding: 0 var(--sm); }
.auth-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--lg); }
.auth-brand .mark {
  width: 64px; height: 64px; border-radius: var(--r-xl);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); margin-bottom: var(--sm);
}
.auth-brand h1 { color: var(--primary); text-align: center; }
.auth-brand .sub { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: var(--xs); font-weight: 600; }
.auth-wrap .card { box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.auth-wrap button[type="submit"] { width: 100%; margin-top: var(--xs); padding: 10px; }