/* ============================================================================
 * Fifty-Fifty — a daily instrument. Cream gauge paper by day, the panel at
 * night; one vermilion needle, one green band where "too close to call" lives.
 * Numbers in Plex Mono, the question in Caslon. Light is the default; the
 * site's toggle adds body.dark-mode.
 * ==========================================================================*/

body.ff-page {
  --ff-bg: #f4efe4;
  --ff-panel: #fbf8f1;
  --ff-line: #ddd3c0;
  --ff-ink: #1c1a17;
  --ff-dim: #5d564c;
  --ff-faint: #8a8174;
  --ff-needle: #d6452b;
  --ff-band: #2f8f5b;
  --ff-band-soft: rgba(47, 143, 91, 0.16);
  --ff-yes: #c2552f;
  --ff-no: #3c6aa6;
  --ff-shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 10px 30px rgba(28, 26, 23, 0.07);
  --ff-serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --ff-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--ff-bg);
  color: var(--ff-ink);
  font-family: var(--ff-sans);
}

body.ff-page.dark-mode {
  --ff-bg: #14130f;
  --ff-panel: #1c1b16;
  --ff-line: #34312a;
  --ff-ink: #efe8da;
  --ff-dim: #b7ad9c;
  --ff-faint: #8a8172;
  --ff-needle: #ef6a4d;
  --ff-band: #4cbf82;
  --ff-band-soft: rgba(76, 191, 130, 0.18);
  --ff-yes: #ec8a62;
  --ff-no: #7ea6dc;
  --ff-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ff { max-width: 760px; margin: 0 auto; padding: 1.5rem 16px 4rem; }
/* The site's button styles set display, which beats the hidden attribute. */
.ff [hidden] { display: none !important; }

.ff-mast { text-align: center; margin: 1rem 0 1.75rem; }
.ff-eyebrow { font: 500 0.78rem/1.4 var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ff-faint); margin: 0 0 0.5rem; }
.ff-title { font: 700 clamp(2.4rem, 7vw, 3.6rem)/1 var(--ff-serif); margin: 0 0 0.6rem; letter-spacing: -0.01em; color: var(--ff-ink); }
.ff-dek { font: 400 1.05rem/1.55 var(--ff-sans); color: var(--ff-dim); max-width: 34rem; margin: 0 auto; }
.ff-dek b { font-family: var(--ff-mono); color: var(--ff-band); }

.ff-stage, .ff-model, .ff-attempts, .ff-done, .ff-callit, .ff-challenge {
  background: var(--ff-panel);
  border: 1px solid var(--ff-line);
  border-radius: 16px;
  box-shadow: var(--ff-shadow);
  padding: 1.25rem 1.25rem 1.1rem;
  margin: 0 0 1rem;
}

.ff-kicker { font: 500 0.75rem/1 var(--ff-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-faint); margin: 0; text-align: center; }
.ff-question { font: 400 clamp(1.5rem, 4.6vw, 2.1rem)/1.2 var(--ff-serif); font-style: italic; text-align: center; margin: 0.4rem 0 0.2rem; color: var(--ff-ink); }

/* ── The gauge ─────────────────────────────────────────────────────────── */
.ff-gauge { margin: 0.25rem auto 0.5rem; max-width: 420px; }
.ff-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.ff-arc { fill: none; stroke: var(--ff-line); stroke-width: 14; stroke-linecap: round; }
.ff-band { fill: none; stroke: var(--ff-band); stroke-width: 14; }
.ff-ticks line { stroke: var(--ff-faint); stroke-width: 1.5; }
.ff-ticks text { fill: var(--ff-faint); font: 500 9px var(--ff-mono); }
.ff-end { fill: var(--ff-dim); font: 600 12px var(--ff-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.ff-mid { fill: var(--ff-band); font: 600 12px var(--ff-mono); }
.ff-needle { transform-origin: 160px 170px; transform: rotate(-90deg); transition: transform 1.1s var(--lab-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
.ff-needle line { stroke: var(--ff-needle); stroke-width: 4; stroke-linecap: round; }
.ff-needle circle { fill: var(--ff-needle); }
.ff-needle.ff-idle line { stroke: var(--ff-faint); }
.ff-needle.ff-idle circle { fill: var(--ff-faint); }
@media (prefers-reduced-motion: reduce) { .ff-needle { transition: none; } }

.ff-readout { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin-top: -0.4rem; }
.ff-p { font: 600 2.6rem/1 var(--ff-mono); color: var(--ff-ink); font-variant-numeric: tabular-nums; }
.ff-tier { font: 500 0.95rem/1.3 var(--ff-sans); color: var(--ff-dim); text-align: center; }
.ff-tier.ff-win { color: var(--ff-band); font-weight: 600; }

/* ── Compose ───────────────────────────────────────────────────────────── */
.ff-compose { margin-top: 0.75rem; }
.ff-label { display: flex; justify-content: space-between; font: 500 0.85rem/1 var(--ff-sans); color: var(--ff-dim); margin-bottom: 0.4rem; }
.ff-count { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.ff-count.ff-over { color: var(--ff-needle); }
.ff-row { display: flex; gap: 0.5rem; }
.ff-input {
  flex: 1; min-width: 0; font: 400 1.05rem/1.3 var(--ff-serif);
  padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--ff-line);
  background: var(--ff-bg); color: var(--ff-ink);
}
.ff-input:focus { outline: 2px solid var(--ff-needle); outline-offset: 1px; }
.ff-ask, .ff-load, .ff-btn {
  font: 600 0.95rem/1 var(--ff-sans); padding: 0.7rem 1.1rem; border-radius: 10px; border: 0;
  background: var(--ff-needle); color: #fff; cursor: pointer; white-space: nowrap;
}
.ff-ask:disabled, .ff-load:disabled { opacity: 0.45; cursor: not-allowed; }
.ff-btn-quiet { background: transparent; color: var(--ff-ink); border: 1px solid var(--ff-line); }
.ff-hint { font-size: 0.82rem; color: var(--ff-faint); margin: 0.5rem 0 0; min-height: 1.2em; }
.ff-hint.ff-error { color: var(--ff-needle); }

/* ── Model ─────────────────────────────────────────────────────────────── */
.ff-h3 { font: 600 0.8rem/1 var(--ff-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-faint); margin: 0 0 0.7rem; }
.ff-model-line { margin: 0 0 0.6rem; color: var(--ff-dim); font-size: 0.93rem; line-height: 1.5; }
.ff-progress { height: 6px; border-radius: 99px; background: var(--ff-line); overflow: hidden; margin: 0 0 0.7rem; }
.ff-progress span { display: block; height: 100%; width: 0; background: var(--ff-needle); transition: width 0.3s; }

/* ── Attempts ──────────────────────────────────────────────────────────── */
.ff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ff-empty { color: var(--ff-faint); font-size: 0.9rem; margin: 0; }
.ff-try { border: 1px solid var(--ff-line); border-radius: 12px; padding: 0.75rem 0.85rem; background: var(--ff-bg); }
.ff-try-head { display: flex; align-items: baseline; gap: 0.6rem; }
.ff-try-sq { font-size: 1.1rem; line-height: 1; }
.ff-try-p { font: 600 1.15rem/1 var(--ff-mono); font-variant-numeric: tabular-nums; }
.ff-try-label { color: var(--ff-dim); font-size: 0.85rem; }
.ff-words { font: 400 1.05rem/1.9 var(--ff-serif); margin: 0.45rem 0 0.3rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.3rem; }
.ff-word { padding: 0 0.22rem; border-radius: 4px; }
.ff-receipt { font: 400 0.75rem/1.5 var(--ff-mono); color: var(--ff-faint); margin: 0.25rem 0 0; }
.ff-flip { font-size: 0.88rem; color: var(--ff-ink); margin: 0.3rem 0 0; }
.ff-flip b { font-family: var(--ff-mono); }
.ff-try.ff-refused { opacity: 0.75; }
.ff-try.ff-refused .ff-try-p { color: var(--ff-faint); }

/* ── Done / share ──────────────────────────────────────────────────────── */
.ff-share { font: 400 1rem/1.5 var(--ff-mono); background: var(--ff-bg); border: 1px dashed var(--ff-line); border-radius: 10px; padding: 0.75rem; margin: 0 0 0.7rem; white-space: pre-wrap; color: var(--ff-ink); }
.ff-share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ff-bench { color: var(--ff-dim); font-size: 0.9rem; margin: 0.8rem 0 0; line-height: 1.5; }

/* ── Call it ───────────────────────────────────────────────────────────── */
.ff-tag { font: 500 0.68rem/1 var(--ff-mono); text-transform: none; letter-spacing: 0; color: var(--ff-band); border: 1px solid var(--ff-band); border-radius: 99px; padding: 0.15rem 0.45rem; margin-left: 0.35rem; vertical-align: 1px; }
.ff-callit-dek { color: var(--ff-dim); font-size: 0.9rem; margin: 0 0 0.8rem; line-height: 1.5; }
.ff-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ff-card { border: 1px solid var(--ff-line); border-radius: 12px; padding: 0.7rem 0.85rem; background: var(--ff-bg); }
.ff-card-q { font: 500 0.75rem/1.2 var(--ff-mono); color: var(--ff-faint); margin: 0 0 0.25rem; }
.ff-card-s { font: 400 1.02rem/1.4 var(--ff-serif); margin: 0 0 0.5rem; }
.ff-card-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ff-card-row button { font: 600 0.82rem/1 var(--ff-sans); padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--ff-line); background: var(--ff-panel); color: var(--ff-ink); cursor: pointer; }
.ff-card-row button:disabled { cursor: default; opacity: 0.6; }
.ff-card-out { font: 500 0.85rem/1.3 var(--ff-mono); }
.ff-card-out.ff-right { color: var(--ff-band); }
.ff-card-out.ff-wrong { color: var(--ff-needle); }
.ff-tally { font: 500 0.85rem/1 var(--ff-mono); color: var(--ff-dim); margin: 0.7rem 0 0; }

/* ── Challenge ─────────────────────────────────────────────────────────── */
.ff-challenge { border-color: var(--ff-needle); }
.ff-challenge p { margin: 0.2rem 0; }
.ff-challenge q { font-family: var(--ff-serif); font-style: italic; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.ff-foot { margin-top: 1.5rem; color: var(--ff-dim); font-size: 0.9rem; line-height: 1.6; }
.ff-foot p { margin: 0 0 0.7rem; }
.ff-foot a { color: var(--ff-needle); }
.ff-fine { color: var(--ff-faint); font-size: 0.82rem; }

@media (max-width: 520px) {
  .ff-row { flex-direction: column; }
  .ff-ask { width: 100%; }
  .ff-p { font-size: 2.2rem; }
}