/* Entry 015 — Margin of error
   Series: Future Defaults.
   Scene art direction: a drafting table at the blue hour. One cool north-window
   light from the upper-left lays a single soft shadow down-right; the whole frame
   is a clean slate-blue, clinical but calm. One frosted-glass answer card floats
   over the steel-blue dark — the only crisp object. One accent: a signal-amber,
   lit ONLY on the margin bands and the dial readout — the colour of a caution
   that's telling the truth. Display voices scoped to this entry: Spectral (the
   soul / the hedge) and IBM Plex Mono (the machine / the numbers). Sharp 14px
   corners, not pillowy — the precision of a drawing board. */

.doubt-scene {
  --amber: #e6a441;
  --amber-glow: #f4c777;
  --on-dark: #e7edf4;
  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 124px 32px;
  border-color: rgba(14, 20, 30, 0.7);
  /* background-first: a real photograph (cool steel-blue light) carries the mood;
     a soft scrim keeps the card and numbers legible. */
  background-image:
    linear-gradient(164deg, rgba(16, 22, 33, 0.56) 0%, rgba(20, 29, 44, 0.28) 46%, rgba(11, 15, 24, 0.70) 100%),
    url("../../public/media/backgrounds/dark-cool-04-chris.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer 1 — the cool window light, spilled and blurred from the upper-left */
.haze {
  position: absolute;
  z-index: 0;
  left: 34%;
  top: 30%;
  width: min(820px, 92%);
  height: 520px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(58% 58% at 42% 38%, rgba(126, 160, 214, 0.20), transparent 72%);
  filter: blur(60px);
  pointer-events: none;
}

/* mid layer 2 — the faint ghost of erased pencil lines on a drawing board */
.grid-ghost {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(206, 220, 240, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 220, 240, 0.9) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  background-position: center, center;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 52%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 52%, #000 0%, transparent 78%);
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one answer card whose certainty you can dissolve     */
/* ------------------------------------------------------------------ */

.answer {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  display: grid;
  gap: 22px;
  padding: 44px 46px 38px;
  border-radius: 14px;
  font-family: "IBM Plex Mono", var(--ui-sans);
  /* cool frosted glass; the top-left edge catches the window light */
  background:
    linear-gradient(158deg, rgba(150, 178, 224, 0.14), rgba(16, 24, 42, 0.30));
  border: 1px solid rgba(176, 200, 246, 0.22);
  box-shadow:
    0 1px 0 rgba(214, 230, 255, 0.30) inset,
    0 0 0 1px rgba(8, 12, 22, 0.18),
    0 56px 120px rgba(6, 10, 22, 0.60),
    -10px -8px 60px rgba(120, 152, 208, 0.10);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  color: var(--on-dark);
}

/* machine chrome — mono, small, recessive */
.answer-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(190, 206, 234, 0.6);
}

.answer-meta .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #88abf0;
  box-shadow: 0 0 10px rgba(136, 171, 240, 0.9);
  transition: background 400ms ease, box-shadow 400ms ease;
}

.answer-meta .sep { opacity: 0.45; }
.answer-meta .state { color: rgba(210, 222, 244, 0.82); }

/* the soul voice — Spectral. the venue is the quiet hero, the verdict is the hedge */
.venue {
  margin: 2px 0 -10px;
  font-family: "Spectral", "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.0;
  letter-spacing: 0.004em;
  color: #f1f5fc;
}

.verdict-line {
  margin: 0;
  max-width: 42ch;
  font-family: "Spectral", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.45;
  color: rgba(214, 224, 244, 0.8);
  text-wrap: balance;
  transition: color 300ms ease;
}

/* the numbers — the machine's precision, with a margin it can no longer hide */
.stats {
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.stat {
  position: relative;
  display: grid;
  gap: 7px;
  padding-bottom: 16px;
}

.stat-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 202, 230, 0.52);
}

.stat-value {
  font-family: "IBM Plex Mono", var(--ui-sans);
  font-weight: 500;
  font-size: clamp(21px, 3vw, 27px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #eef3fb;
  white-space: nowrap;
}

.stat-value .unit {
  font-size: 0.62em;
  font-weight: 400;
  margin-left: 3px;
  color: rgba(200, 214, 238, 0.62);
}

.stat-value.is-range {
  font-size: clamp(17px, 2.3vw, 21px);
  letter-spacing: 0;
}

/* the margin — an amber bar that swells with the doubt you choose to see */
.stat-band {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(230, 164, 65, 0.18), var(--amber));
  box-shadow: 0 0 14px rgba(230, 164, 65, 0.5);
  transition: width 360ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 360ms ease;
  opacity: 0;
}

/* a faint full-width rail the band fills against, so the scale reads */
.stat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: rgba(176, 200, 246, 0.12);
}

/* ---- the dial — the single control ---- */
.dial {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(176, 200, 246, 0.16);
  display: grid;
  gap: 12px;
}

.dial-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: "Spectral", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: rgba(212, 224, 246, 0.84);
}

.dial-read {
  font-family: "IBM Plex Mono", var(--ui-sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--amber-glow);
  text-shadow: 0 0 16px rgba(230, 164, 65, 0.4);
}

.dial-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* tall, transparent hit area so the whole band is grabbable; the visible
     track is drawn thin by the track pseudo-elements below */
  height: 26px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
}

/* WebKit: thin visible track with amber fill driven by --fill */
.dial-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--amber) 0%, var(--amber) var(--fill, 0%), rgba(176, 200, 246, 0.16) var(--fill, 0%), rgba(176, 200, 246, 0.16) 100%);
}

.dial-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px; /* centre the 20px thumb on the 4px track */
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff6e6, #e6a441 70%);
  border: 1px solid rgba(255, 240, 214, 0.7);
  box-shadow: 0 4px 14px rgba(180, 120, 30, 0.5), 0 0 18px rgba(230, 164, 65, 0.5);
  transition: transform 140ms ease;
}
.dial-range::-webkit-slider-thumb:hover { transform: scale(1.12); }

/* Firefox: track + native progress fill */
.dial-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(176, 200, 246, 0.16);
}
.dial-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--amber);
}
.dial-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 240, 214, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff6e6, #e6a441 70%);
  box-shadow: 0 4px 14px rgba(180, 120, 30, 0.5), 0 0 18px rgba(230, 164, 65, 0.5);
}

.dial-range:focus-visible {
  box-shadow: 0 0 0 3px rgba(230, 164, 65, 0.3);
  border-radius: 999px;
}

/* the honest line — what the machine noticed about you */
.flinch {
  margin: 0;
  min-height: 1.3em;
  font-family: "Spectral", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(230, 164, 65, 0.86);
  transition: opacity 300ms ease;
}

/* ---- as doubt rises the chrome cools toward honesty ---- */
.answer[data-doubt="high"] .answer-meta .dot {
  background: var(--amber);
  box-shadow: 0 0 12px rgba(230, 164, 65, 0.85);
}

.doubt-scene:has(.answer[data-doubt="high"]) .haze { opacity: 0.7; }

/* unobtrusive photo attribution */
.scene-credit {
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 3;
  font-family: var(--ui-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 228, 244, 0.32);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stat-band, .verdict-line, .flinch { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .doubt-scene { padding: 72px 16px; min-height: 0; }
  .answer { padding: 34px 26px 30px; border-radius: 12px; gap: 20px; }
  .stats { gap: 12px; }
  .venue { font-size: clamp(34px, 12vw, 48px); }
}