/* ── JEV SHOWCASE ──
   Page styles for jev.html. Panel, button, input and article rules follow
   retro-pet.css so the two demos read as one family, but are kept separate so
   editing one can never break the other. */

/* Outcome colours are the site's green / yellow / red from the Retro AI Pet.
   Each only marks a bar: the words and numbers beside it stay in text colour,
   so no verdict is carried by colour alone. */
:root {
  --inset: #0a0a0a;
  --ok: #45e0a6;
  --near: #ffe66d;
  --bad: #ff5d73;
}

/* Several blocks here set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

/* ── HERO ── */
/* Capped like the case study heroes, so the rule beneath stops short of the page edges. */
/* ── STAGE ──
   Wide screens: the image and the play frame (scene, question, answer) sit side
   by side so the whole game fits on one screen, with the telemetry full width
   underneath. Narrower screens stack them in one column. */
.device-section {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 3rem;
}

.jev-demo {
  width: 100%;
  max-width: 1200px;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 960px) {
  .jev-demo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .jev-demo > .share-card,
  .jev-demo > .telemetry-panel { grid-column: 1 / -1; }
  .jev-demo .play-frame { text-align: left; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .action-form { justify-items: start; }
  .jev-demo .play-frame .btn { justify-self: start; }
  .jev-demo .ending-path { margin-left: 0; }
  .jev-demo .crowd-rows { margin-left: 0; }
}

.stage-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 60vh;
  background: var(--inset);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The one place the player acts. Same frame as the image above it, on a slightly
   lighter fill so it still reads as its own box. */
.play-frame {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 1.5rem clamp(1.1rem, 3vw, 1.75rem) 1.5rem;
  text-align: center;
  min-width: 0;
}

.panel {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 1.5rem clamp(1.1rem, 4vw, 2.25rem) 1.75rem;
  min-width: 0;
}

.panel-label {
  font-family: 'Sixtyfour Convergence', sans-serif;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-intro {
  font-size: 14px;
  color: var(--muted2);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 78ch;
}

/* ── GAME ──
   scene-title and scene-count are visually-hidden in the markup (kept for
   assistive tech); the image carries the scene on its own. */

/* The site's monospace body font has no bold weight, so the question gets
   emphasis from size, case and a rule instead. */
.scene-kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.scene-text {
  font-size: 15px;
  color: var(--muted2);
  line-height: 1.7;
  margin: 0 auto 1.25rem;
}

.action-form {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

/* Same face as the scenario line above the description: white caps. */
.action-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--text);
  padding: 1rem 0 0.1rem;
  border-top: 0.5px solid var(--border2);
  width: 100%;
}

.action-input {
  width: 100%;
  resize: vertical;
  background: var(--inset);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 0.8rem 0.9rem;
  text-align: left;
  outline: none;
}

.action-input::placeholder { color: var(--muted); }

.action-input:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

.action-input:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn {
  justify-self: center;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn:hover { border-color: var(--text); }

.btn.primary {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.btn.primary:hover {
  background: transparent;
  color: var(--text);
}

.btn:disabled,
.btn:disabled:hover {
  opacity: 0.4;
  cursor: default;
  background: var(--text);
  color: var(--bg);
}

.btn:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

/* Verdict and outcome read as one line: "[swatch] Failure: The morning goes...".
   Hidden while both are empty so the frame doesn't carry a gap. */
.result-line:has(.result-verdict:empty):has(.result-text:empty) { display: none; }

.result { margin-top: 0.9rem; }

.result-line {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 auto 0.9rem;
}

.result-verdict {
  color: var(--text);
  white-space: nowrap;
}

.result-verdict:not(:empty)::after {
  content: ':';
  margin-right: 0.5rem;
}

.result-verdict .swatch {
  width: 12px;
  height: 12px;
  margin-right: 0.55rem;
  vertical-align: baseline;
}

.result-text { color: var(--muted2); }

/* The colour swatch beside a verdict. Always paired with the word. */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--muted);
  flex: none;
}

.swatch[data-outcome="success"] { background: var(--ok); }
.swatch[data-outcome="narrow_success"] { background: var(--near); }
.swatch[data-outcome="failure"] { background: var(--bad); }

/* ── HOW EVERYONE ELSE DID ──
   Three rows under the verdict: swatch and word, a bar, a percentage. As with the
   meters, the words carry the meaning and the colour only marks the bar. */
.crowd {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 0.5px solid var(--border2);
}

.crowd-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.crowd-rows {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  max-width: 560px;
  margin: 0 auto;
}

.crowd-row {
  display: grid;
  grid-template-columns: 14rem 1fr 3rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 14px;
  color: var(--muted2);
}

.crowd-label {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.crowd-you {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inset);
  background: var(--muted2);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

.crowd-track {
  height: 8px;
  background: var(--inset);
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}

.crowd-fill {
  display: block;
  height: 100%;
  background: var(--muted2);
}

.crowd-fill[data-outcome="success"] { background: var(--ok); }
.crowd-fill[data-outcome="narrow_success"] { background: var(--near); }
.crowd-fill[data-outcome="failure"] { background: var(--bad); }

.crowd-value { text-align: right; color: var(--text); }

.crowd-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 0.75rem;
}

.ending-path {
  list-style: none;
  max-width: 420px;
  margin: 1.25rem auto 1rem;
  text-align: left;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 14px;
}

.ending-path li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted2);
}

.ending-path .ending-verdict {
  margin-left: auto;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── SHARING ── */
.share-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.share-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted2);
  max-width: 560px;
  margin: 0 auto;
}

/* The call-out at the end of the story: the main thing to do on the last screen. */
.share-callout {
  max-width: 520px;
  margin: 1.5rem auto;
  padding: 1.25rem;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: var(--inset);
}

.share-title {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.share-callout .share-intro { font-size: 14px; margin-bottom: 1rem; }

.share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

.share-link {
  font-size: 14px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.share-link:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 3px;
}

.share-status {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 0.75rem;
}

.share-fallback {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0.5rem auto 0;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--border2);
  border-radius: 8px;
  resize: none;
  line-height: 1.6;
}

.ending-totals {
  font-size: 14px;
  color: var(--muted2);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* The button that moves the story on. Bigger than the rest, and pulsing until
   hovered so nobody mistakes the page for a single scenario. */
.btn.next-btn {
  font-size: 16px;
  padding: 1rem 2.75rem;
  border: 2px solid var(--text);
  animation: throb 1.6s ease-in-out infinite;
}

.btn.next-btn:hover,
.btn.next-btn:focus-visible {
  color: var(--bg);
  background: var(--text);
  animation: none;
}

@keyframes throb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 230, 224, 0); border-color: rgba(232, 230, 224, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(232, 230, 224, 0.14); border-color: var(--text); }
}

.privacy-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1.5rem;
}

/* ── TELEMETRY ── */
.mode-badge {
  margin-left: auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

/* The side-by-side table. One typeface throughout, so the numbers read like
   the rest of the page. */
.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 0.9rem;
}

.compare th,
.compare td {
  padding: 0.6rem 0.75rem;
  border-top: 0.5px solid var(--border);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 400;
  min-width: 0;
}

/* Long numbers and the model id may break anywhere; words never do, or a
   narrow phone splits "unravelling" as "unravellin / g". */
.compare .num,
#t-model {
  overflow-wrap: anywhere;
}

.compare thead th {
  border-top: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--border2);
}

.compare thead th:not(:first-child),
.compare td { width: 26%; }

.compare tbody th {
  color: var(--muted2);
  width: 48%;
}

.compare td {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}


.compare td:nth-child(2) { border-left: 0.5px solid var(--border); }
.compare td:nth-child(3) { border-left: 0.5px solid var(--border); }

.compare .is-running { color: var(--muted2); }

.compare td[id$="verdict"] .swatch { margin-right: 0.5rem; }
.compare td[id$="verdict"] > * { vertical-align: middle; }

.race-note {
  font-size: 13px;
  color: var(--text);
  min-height: 1.5em;
  margin-bottom: 1.75rem;
}

/* Two columns so no bar is stretched across the whole page. */
.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.25rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.meter-group { min-width: 0; }

.meter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}

/* Each bar is a <details>: the whole row is the button, and the triangle on
   the left says so. Text inside is the criteria or a plain definition. */
.meter {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.015);
}

.meter[open] { border-color: var(--border2); }

.meter summary {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  column-gap: 0.55rem;
  row-gap: 0.4rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--muted2);
}

.meter summary::-webkit-details-marker { display: none; }

.meter summary::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  width: 0;
  height: 0;
  border-left: 7px solid var(--text);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.15s;
}

.meter[open] summary::before { transform: rotate(90deg); }

.meter summary:hover { color: var(--text); }

.meter summary:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
  border-radius: 8px;
}

.meter-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.meter-value { color: var(--text); }

.meter.is-chosen .meter-name { color: var(--text); }

/* The verdict marker: filled with the outcome's colour so a failure reads at a
   glance. The word stays, so colour is never the only signal. */
.chosen-pill {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inset);
  background: var(--muted2);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.meter[data-outcome="success"] .chosen-pill { background: var(--ok); }
.meter[data-outcome="narrow_success"] .chosen-pill { background: var(--near); }
.meter[data-outcome="failure"] .chosen-pill { background: var(--bad); }

.meter.is-chosen { border-color: var(--muted); }

.meter-track {
  grid-column: 2 / 4;
  height: 8px;
  background: var(--inset);
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--muted2);
  transition: width 0.45s ease;
}

.meter[data-outcome="success"] .meter-fill { background: var(--ok); }
.meter[data-outcome="narrow_success"] .meter-fill { background: var(--near); }
.meter[data-outcome="failure"] .meter-fill { background: var(--bad); }

.meter-more {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted2);
  padding: 0 0.9rem 0.85rem 2.15rem;
}

.meter-more:empty::before {
  content: 'Answer the scenario to see the rule Jev judged you against.';
  color: var(--muted);
}

.raw { margin-bottom: 1.25rem; }

.cost-footnote {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 0.5px solid var(--border);
  padding-top: 1rem;
}

.raw summary {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.raw summary:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

.raw pre {
  margin-top: 0.5rem;
  max-height: 260px;
  overflow: auto;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted2);
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
}

/* ── ARTICLE ── */
.article {
  max-width: 768px; /* 720px of text, lined up with .hero-content */
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

.article-section {
  padding: 3rem 0;
  border-top: 0.5px solid var(--border);
}

.article-section:first-of-type {
  border-top: none;
  padding-top: 4rem;
}

.article-section h2 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.article-section a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-section p {
  font-size: 16px;
  color: var(--muted2);
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

.article-section strong {
  color: var(--text);
}

.article-section > ol {
  list-style-position: inside;
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--muted2);
  font-size: 16px;
  line-height: 1.9;
}

.article-section > ol li::marker {
  color: var(--text);
}

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

footer {
  border-top: 0.5px solid var(--border);
}

/* ── RESPONSIVE ──
   The image, play frame and telemetry share one width at every size. The two
   decision columns stack on tablets and narrower. */
@media (max-width: 820px) {
  .decision-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .device-section {
    padding: 1.5rem 1rem 3rem;
  }

  .crowd-row { grid-template-columns: 1fr 3rem; }
  .crowd-track { grid-column: 1 / -1; grid-row: 2; }
  .compare tbody th { width: 40%; }
  .compare thead th:not(:first-child),
  .compare td { width: 30%; }
  .compare th,
  .compare td { padding: 0.5rem 0.4rem; }
  #race-jev-verdict,
  #race-llm-verdict { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .meter-fill { transition: none; }
  .btn.next-btn { animation: none; }
}