/* ============================================================================
   ML demos — the house style, the one Bhav, Faultline, NPA Explorer and the
   Scorecard Playground are built in.

   This file is copied verbatim into emotion/app.css and tumor/app.css (each
   app is a self-contained deploy with no build step, so there is nothing to
   import from). Only the accent tokens at the top and the few rules after the
   "own parts" rule differ between them. Edit here, then copy.

     Newsreader for display type, IBM Plex Sans for prose, IBM Plex Mono for
     every number and label. Hairlines rather than shadows, 3px corners rather
     than 18, one accent per demo, figures in tabular numerals.

   Dark first, with a full light re-spec rather than an inversion.
   ========================================================================= */

:root {
  color-scheme: dark;

  --bg:     #0B0E12;
  --panel:  #141921;
  --sunk:   #10151C;
  --line:   #232B35;
  --line2:  #1A2028;
  --ink:    #E8EDF3;
  --ink2:   #A6B2C0;
  --mute:   #6B7889;

  --accent:     #5B8DEF;
  --accent-ink: #0B0E12;
  --glow:       rgba(91, 141, 239, .15);

  --amber: #D8A03C;
  --ok:    #5FB39B;
  --bad:   #D9534A;

  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:     #ECEFF3;
    --panel:  #FFFFFF;
    --sunk:   #E3E7ED;
    --line:   #D2D8E0;
    --line2:  #E3E8ED;
    --ink:    #121821;
    --ink2:   #414C5A;
    --mute:   #6B7787;
    --accent:     #2F5FC8;
    --accent-ink: #FFFFFF;
    --glow:       rgba(47, 95, 200, .10);
    --amber: #8A6414;
    --ok:    #2F6B5E;
    --bad:   #B5384A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15.5px/1.62 var(--ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong, b { color: var(--ink); font-weight: 600; }
p { margin: 0; max-width: 68ch; color: var(--ink2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.016em; line-height: 1.12; }
h2 { font-family: var(--display); font-size: clamp(24px, 3.2vw, 34px); }

.muted { color: var(--mute); }
.small { font-size: 13px; line-height: 1.55; }
.fine  { font-size: 12.5px; line-height: 1.6; color: var(--mute); max-width: 74ch; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute);
}

/* ---------------------------------------------------------------- chrome -- */
.topbar { border-bottom: 1px solid var(--line); }
.bar-in {
  max-width: 1000px; margin-inline: auto; height: 46px;
  padding-inline: clamp(16px, 4vw, 34px);
  display: flex; align-items: center; gap: 12px;
}
.back {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute); margin-right: auto;
}
.back:hover { color: var(--ink); text-decoration: none; }
.privacy {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ok);
  border: 1px solid currentColor; border-radius: 2px; padding: 3px 9px;
}

.hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 10% -12%, var(--glow) 0%, transparent 56%),
    var(--bg);
}
.hero-in {
  max-width: 1000px; margin-inline: auto;
  padding: clamp(36px, 6vw, 66px) clamp(16px, 4vw, 34px) clamp(22px, 4vw, 38px);
}
.ttl {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(40px, 8.4vw, 86px); line-height: .88;
  letter-spacing: -.038em; margin: 14px 0 0;
}
.ttl em { font-style: italic; color: var(--accent); }
.lede {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.4;
  color: var(--ink2); max-width: 46ch; margin-top: 18px;
}

.shell {
  max-width: 1000px; margin-inline: auto;
  padding: 0 clamp(16px, 4vw, 34px) 8px;
}
.shell > section { padding-block: clamp(30px, 4.5vw, 54px); border-bottom: 1px solid var(--line2); }

.head { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; }
.head .ix {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--accent);
}
.stack { display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(14px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 20px;
}

/* --------------------------------------------------------------- the rig -- */
.stage-grid { display: grid; gap: clamp(16px, 3vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 680px) { .stage-grid { grid-template-columns: 220px 1fr; align-items: start; } }

.viewport { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#canvas {
  width: 100%; max-width: 200px; aspect-ratio: 1; image-rendering: pixelated;
  border-radius: 2px; border: 1px solid var(--line); background: var(--sunk);
}
.viewport-note { text-align: center; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

.readout { display: flex; flex-direction: column; gap: 8px; min-height: 120px; justify-content: center; }

/* One row per class: name, a hairline track, the number. The bar is a
   measurement, so it is square and unrounded like every other one here. */
.bar-row { display: grid; grid-template-columns: 92px 1fr 54px; gap: 10px; align-items: center; }
.bar-row .nm { font-size: 12.5px; color: var(--ink2); text-transform: capitalize; }
.bar-row .tr { height: 6px; background: var(--sunk); border: 1px solid var(--line2); overflow: hidden; }
.bar-row .fl { height: 100%; background: var(--accent); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.bar-row .pc {
  font-family: var(--mono); font-size: 11.5px; color: var(--mute);
  text-align: right; font-variant-numeric: tabular-nums;
}
.bar-row.top .nm { color: var(--ink); font-weight: 500; }
.bar-row.top .pc { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- controls --- */
.controls { display: flex; flex-wrap: wrap; gap: 9px; }
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink2); background: transparent;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 9px 14px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.btn:hover, button:hover { color: var(--ink); border-color: var(--mute); }
.btn:disabled, button:disabled { opacity: .45; cursor: default; }

/* -------------------------------------------------------------- samples --- */
.samples { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 18px; }
/* These are <button>s, so they inherit the control rule above -- which makes
   them inline-flex, uppercase and letter-spaced, and laid the label out beside
   the thumbnail instead of under it, clipped. A tile is not a control bar. */
.sample {
  display: block; padding: 0; text-align: center;
  font: inherit; letter-spacing: normal; text-transform: none;
  position: relative; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; background: var(--sunk); cursor: pointer;
  transition: border-color .15s ease;
}
.sample:hover { border-color: var(--accent); }
.sample img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sample .lbl {
  display: block; padding: 5px 4px; border-top: 1px solid var(--line2);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sample.miss .lbl { color: var(--bad); }
.sample.miss .lbl::after { content: " \2717"; }

/* --------------------------------------------------------------- figures -- */
/* The 1px gaps are the line colour showing through, so rules never double. */
.stats {
  display: grid; gap: 1px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  background: var(--line); border: 1px solid var(--line);
}
.stat { background: var(--bg); padding: 16px clamp(12px, 2vw, 20px) 14px; }
.stat .n {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: clamp(20px, 3vw, 30px); letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat .l {
  display: block; margin-top: 7px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute); line-height: 1.6;
}

/* ---------------------------------------------------------------- tables -- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 18px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td {
  padding: 9px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line2);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
th:first-child, td:first-child {
  text-align: left; text-transform: capitalize;
  font-family: var(--ui); color: var(--ink2);
}
thead th {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); font-weight: 500; border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }

.note { border-left: 2px solid var(--amber); padding-left: 18px; margin-top: 20px; }
.note p { margin: 0; }

.credit {
  border-top: 1px solid var(--line); margin-top: 8px;
  padding-block: 26px 52px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: var(--mute);
}

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

/* ------------------------------------------------------ tumour demo ------ */
/* Violet, the tint this project carries on anamaya.fyi. Overridden here rather
   than in the shared block above so the two files stay diffable. */
:root { --accent: #A47BF0; --accent-ink: #0B0E12; --glow: rgba(164, 123, 240, .15); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent: #7b4bc9; --accent-ink: #FFFFFF; --glow: rgba(123, 75, 201, .10);
  }
}

/* A clinical-sounding demo needs its disclaimer to be the loudest element on
   the page that is not the image itself. */
.notice {
  border: 1px solid color-mix(in srgb, var(--bad) 42%, transparent);
  border-left-width: 2px;
  background: color-mix(in srgb, var(--bad) 7%, transparent);
  border-radius: 2px; padding: 14px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink2);
}
.notice strong { color: var(--ink); }

.canvas-wrap { display: flex; justify-content: center; }
#canvas {
  width: 100%; max-width: 420px; aspect-ratio: 1; image-rendering: auto;
  border-radius: 2px; border: 1px solid var(--line); background: #000;
}

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}
.key { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; display: inline-block; }
.sw-pred { background: #ff5c5c; }
.sw-truth { background: #3ddc84; }
.sw-both { background: #ffd34d; }

.toggle { text-transform: none; letter-spacing: 0; font-family: var(--ui);
  font-size: 13px; color: var(--ink2); gap: 9px; }
.toggle input { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); }

.scorebar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill {
  border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); background: var(--panel);
}
.pill b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.samples { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.sample img { image-rendering: auto; background: #000; }

/* A class that sets `display` beats the user-agent rule for [hidden], so every
   element toggled with el.hidden stayed visible -- the "Stop camera" button was
   on screen before the camera had ever been started. This has to come last. */
[hidden] { display: none !important; }