/* ============================================================================
   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; }
}

/* 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; }