/* Adam V2. Tokens verbatim from Adam V1, which took them from the Clovermind
   site: Geist + Geist Mono, monochrome, colour only where it carries
   information. Colour is allowed in exactly three places: the verdict when it
   names or withholds, the teach strip when a lesson lands, and the map's
   activity glow, because all three are the network saying something. */

:root {
  --bg: #0a0a0b;
  --panel: #101013;
  --ink: #ededf0;
  --dim: #85858e;
  --faint: #4a4a52;
  --line: rgba(237, 237, 240, 0.12);
  --line-strong: rgba(237, 237, 240, 0.25);
  --live: #7d87e6;
  --warn: #c98a5e;
  --learn: #6ea87a;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bar-h: 54px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.mono-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}

/* ---------- top bar (V1's rules: pinned heights, nothing wraps) ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar-left { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; }
.mark { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; flex: none; }
.arm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-right { display: flex; gap: 14px; flex: none; align-items: center; }

.ctl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  height: 28px; flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 150ms, border-color 150ms, background 150ms, opacity 150ms;
}
.ctl::before { content: ""; position: absolute; inset: -9px -5px; }
.ctl-pill { color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 0 13px; }
.ctl-pill:hover { color: var(--ink); border-color: var(--line-strong); }
.ctl-pill[aria-pressed="true"] { color: var(--bg); background: var(--warn); border-color: var(--warn); }
.ctl-pill:disabled { opacity: 0.4; cursor: default; }
.ctl-pill:disabled:hover { color: var(--dim); border-color: var(--line); }
.ctl-plain { color: var(--ink); font-weight: 500; padding: 0; border: 0; border-radius: 0; }
.ctl-plain:hover { opacity: 0.7; }

/* ---------- layout ---------- */
.stage {
  padding: calc(var(--bar-h) + env(safe-area-inset-top) + 14px) 14px
           calc(20px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.panel { background: var(--panel); border: 1px solid var(--line); padding: 12px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- input ---------- */
.tabs { display: flex; gap: 4px; }
.tab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
  padding: 2px 10px; border: 1px solid transparent;
}
.tab:hover { color: var(--dim); }
.tab[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); border-radius: 99px; }

.in-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #060607; overflow: hidden; border: 1px solid var(--line); }
.in-wrap[hidden] { display: none; }
.pad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.pad-hint {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--faint); pointer-events: none;
  transition: opacity 200ms;
}
.pad-hint.hidden { opacity: 0; }
#camWrap video, .overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.overlay { pointer-events: none; }
.start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 12px 26px; font-size: 14px; background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.start[hidden] { display: none; }
.in-ctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ctl-ask { color: var(--ink); border-color: var(--line-strong); }
#inNote { margin-left: auto; text-align: right; }

.verdict {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line);
  transition: border-color 200ms;
}
.verdict-glyph {
  font-size: 34px; font-weight: 600; line-height: 1; min-width: 26px;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.verdict-note { color: var(--dim); text-transform: none; letter-spacing: 0.04em; }
.verdict[data-state="named"] { border-color: var(--live); }
.verdict[data-state="named"] .verdict-glyph { color: var(--live); }
.verdict[data-state="withheld"] .verdict-glyph { color: var(--faint); font-size: 22px; }
.verdict[data-state="thinking"] .verdict-glyph { color: var(--faint); font-size: 22px; }
.verdict[data-state="learned"] { border-color: var(--learn); }
.verdict[data-state="learned"] .verdict-glyph { color: var(--learn); }
.verdict[data-state="torn"] { border-color: var(--line-strong); }
.verdict[data-state="torn"] .verdict-glyph { color: var(--ink); font-size: 28px; }

/* ---------- when it asks ---------- */
.ask { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); }
.ask[hidden] { display: none; }
.ask-lede { display: block; margin-bottom: 10px; color: var(--ink); text-transform: none; letter-spacing: 0.04em; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; }
.ask-opt {
  font-family: var(--mono); font-size: 30px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-strong); padding: 12px 0; text-align: center;
  color: var(--ink); transition: color 120ms, border-color 120ms, background 120ms;
}
.ask-opt:hover { background: rgba(237, 237, 240, 0.07); }
.ask-none {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); border-radius: 99px; padding: 0 14px;
}
.ask-none:hover { color: var(--ink); border-color: var(--line-strong); }

/* the teach strip flashes when "neither" hands the question back */
.panel-teach.pulse { animation: teach-pulse 700ms ease-out 2; }
@keyframes teach-pulse {
  0% { border-color: var(--line); }
  40% { border-color: var(--ink); }
  100% { border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-teach.pulse { animation: none; border-color: var(--line-strong); }
}

/* ---------- teach strip ---------- */
.digits { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.digit {
  font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); padding: 8px 0; text-align: center;
  color: var(--dim); transition: color 120ms, border-color 120ms, background 120ms;
}
.digit:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
.digit:disabled { opacity: 0.35; cursor: default; }
.digit.flash { color: var(--bg); background: var(--learn); border-color: var(--learn); }
.panel-teach .foot { margin-top: 10px; }
#teachNote { text-transform: none; letter-spacing: 0.04em; }
#teachNote.learned { color: var(--learn); }

/* ---------- pixel views ---------- */
.pix {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000; border: 1px solid var(--line);
}

/* ---------- the map ---------- */
.map { width: 100%; height: 420px; display: block; background: #070708; border: 1px solid var(--line); }
.panel-map .foot { margin-top: 10px; text-transform: none; letter-spacing: 0.04em; line-height: 1.7; }

/* ---------- bars ---------- */
.bars { display: flex; flex-direction: column; gap: 5px; position: relative; }
.bar-row { display: grid; grid-template-columns: 18px 1fr 46px; align-items: center; gap: 10px; }
.bar-key { font-family: var(--mono); font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; text-align: center; }
.bar-track { position: relative; height: 12px; background: rgba(237, 237, 240, 0.06); }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--faint); transition: width 90ms linear, background 150ms; }
.bar-row.top .bar-fill { background: var(--dim); }
.bar-row.named .bar-fill { background: var(--live); }
.bar-row.named .bar-key { color: var(--live); }
.bar-row.taught .bar-fill { background: var(--learn); }
.bar-row.taught .bar-key { color: var(--learn); }
.bar-val { font-family: var(--mono); font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.bar-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); pointer-events: none; }
.bar-mark::after {
  content: attr(data-label); position: absolute; top: -14px; left: 3px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.foot { margin-top: 12px; line-height: 1.7; text-transform: none; letter-spacing: 0.04em; }

/* ---------- about ---------- */
.about { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg); -webkit-overflow-scrolling: touch; }
.about[hidden] { display: none; }
.about-inner { max-width: 620px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 48px); }
.about h1 { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 14px; }
.about h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin: 32px 0 10px; }
.about p { color: #b9b9c0; margin-bottom: 12px; font-size: 15.5px; }
.about .lede { color: var(--ink); font-size: 17px; }
.about .ctl { margin-top: 32px; }
.prov { white-space: pre-line; line-height: 1.9; margin-top: 44px; color: var(--faint); }

/* ---------- fatal ---------- */
.fatal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 11, 0.96); }
.fatal[hidden] { display: none; }
.fatal-inner { max-width: 460px; border: 1px solid var(--warn); padding: 20px; }
.fatal-inner p { margin-top: 10px; color: #b9b9c0; font-size: 15px; }

@media (min-width: 900px) {
  .stage { max-width: 1120px; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "input teach" "input small" "input bars" "map map";
    align-items: start; }
  .panel-input { grid-area: input; }
  .panel-teach { grid-area: teach; }
  .row3 { grid-area: small; }
  .panel-bars { grid-area: bars; }
  .panel-map { grid-area: map; }
  .map { height: 520px; }
}

@media (max-width: 560px) {
  .ctl { font-size: 9.5px; letter-spacing: 0.07em; height: 26px; }
  .ctl-pill { padding: 0 11px; }
  .bar-right { gap: 10px; }
  .bar-left { gap: 9px; }
  .digit { font-size: 16px; padding: 6px 0; }
  .map { height: 340px; }
  .about-inner { padding-left: 20px; padding-right: 20px; }
  .about h1 { font-size: 30px; }
}
@media (max-width: 400px) {
  .arm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill, .verdict, .ctl, .digit { transition: none; }
}