:root {
  --bg: #1a1b26;
  --panel: #1f2335;
  --line: #2f3550;
  --fg: #c0caf5;
  --dim: #7681a8;
  --accent: #7aa2f7;
  --urgent: #f7768e;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef1f8;
    --panel: #ffffff;
    --line: #d3dae9;
    --fg: #1f2335;
    --dim: #5a6484;
    --accent: #2e5db8;
    --urgent: #c0384f;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box }

/* Author display rules below (.guess is a flex row) outrank the UA stylesheet's
   [hidden] rule, so hiding has to win explicitly or answered days keep showing
   a live input. */
[hidden] { display: none !important }

html { background: var(--bg) }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px
           calc(32px + env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* The date belongs with the title it dates, not adrift in the corner. */
.hero-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.hero h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: .3px }
.puzzle { font-size: .875rem; color: var(--dim) }
.streak { font-size: .8125rem; color: var(--dim); margin-top: 6px }

/* ---------- question ---------- */
.asof {
  font-size: .75rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 24px;
}
.asof + .prompt { margin-top: 6px }

.prompt {
  font-size: 1.1875rem;
  line-height: 1.45;
  margin-top: 24px;
}

/* ---------- input ---------- */
.guess { display: flex; gap: 10px; margin-top: 24px }

.guess input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--fg);
}
.guess input::placeholder { color: var(--dim) }
.guess input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.guess button {
  padding: 14px 24px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
.guess button:active { transform: translateY(1px) }

.error { color: var(--urgent); font-size: .8125rem; margin-top: 10px }

/* ---------- result ---------- */
.result {
  margin-top: 24px;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--tone, var(--accent));
  background: color-mix(in srgb, var(--tone, var(--accent)) 11%, transparent);
}
.result.tone-accent  { --tone: var(--accent) }
.result.tone-neutral { --tone: var(--fg) }
.result.tone-urgent  { --tone: var(--urgent) }

.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.band { font-size: 1.5rem; font-weight: 700; color: var(--tone) }
.points { font-size: 1rem; font-weight: 700; color: var(--tone) }
.line { font-size: .9375rem; margin-top: 8px }
.decades { font-size: .8125rem; color: var(--dim); margin-top: 10px }

.share {
  margin-top: 16px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.share:active { transform: translateY(1px) }

.hint, .source { font-size: .8125rem; color: var(--dim); margin-top: 18px }
.source { font-style: italic }

/* ---------- history ---------- */
/* The collapsible sections - practice, how to play, history, stats, suggest -
   are one list of the same kind of control, so they share one separator. */
.practice, .howto, .history, .stats {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.history-list { list-style: none; margin-top: 6px }

.history-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.history-row:last-child { border-bottom: 0 }

.history-date { font-size: .8125rem; color: var(--dim) }

.history-band { font-size: .8125rem; font-weight: 700 }
.history-band.tone-accent  { color: var(--accent) }
.history-band.tone-neutral { color: var(--fg) }
.history-band.tone-urgent  { color: var(--urgent) }

.history-numbers { font-size: .75rem; color: var(--dim); text-align: right; min-width: 0 }
.history-numbers .nowrap { white-space: nowrap }

/* ---------- stats ---------- */

.stats-toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.stats-title { font-size: .875rem; font-weight: 700 }
.chev { display: inline-block; width: 1em; color: var(--dim) }
.stats-summary { font-size: .8125rem; color: var(--dim) }

.stats-body { margin-top: 14px }

.bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2rem;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.bar-label { font-size: .8125rem; color: var(--dim) }
.bar-track {
  /* Explicitly block: width and height do not apply to an inline box, and
     these have been built from spans before now. */
  display: block;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent) }
.bar-fill.tone-accent  { background: var(--accent) }
.bar-fill.tone-neutral { background: var(--fg) }
.bar-fill.tone-urgent  { background: var(--urgent) }
.bar-tally { font-size: .8125rem; color: var(--dim); text-align: right }

.stats-footer { font-size: .8125rem; color: var(--dim); margin-top: 16px }

.calibration {
  font-size: .8125rem;
  color: var(--fg);
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 6px 6px 0;
}

.export {
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.export:active { transform: translateY(1px) }

/* --- hint offer and revealed guidance --- */
/* Matches .stats-toggle so the two expanders read as the same control. */
.hint-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.strategy {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.strategy-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.strategy-guidance {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--dim);
}

/* The archetype shown after answering sits with the hint text below it. */
#approach { margin: 0.9rem 0 0; }

/* --- how to play --- */

.howto-steps {
  margin: 0.2rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--dim);
}

.howto-steps li { margin-bottom: 0.4rem }

.howto-intro {
  margin: 0.9rem 0 0.6rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--dim);
}

.howto-scoring {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.howto-scoring td {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.howto-scoring tr:last-child td { border-bottom: 0 }

.howto-band { font-weight: 700; white-space: nowrap }
/* Tone colours are scoped per component, so the guide needs its own. */
.howto-band.tone-accent  { color: var(--accent) }
.howto-band.tone-neutral { color: var(--fg) }
.howto-band.tone-urgent  { color: var(--urgent) }
.howto-meaning { color: var(--dim); padding-left: 0.6rem !important }
.howto-points { color: var(--dim); text-align: right; white-space: nowrap }

.howto-note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--dim);
}

/* --- build / puzzle-date stamp --- */
.build {
  margin: 1.2rem 0 0;
  font-size: 0.72rem;
  color: var(--dim);
  opacity: 0.75;
  text-align: right;
  letter-spacing: 0.02em;
}

/* --- how everyone else did --- */
.dist {
  margin-top: 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.dist-title { font-size: 0.85rem; font-weight: 700 }
.dist-summary { font-size: 0.75rem; color: var(--dim) }

.dist-note {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
}

/* Your own band, so the comparison is findable at a glance. */
.bar-row.mine .bar-label { color: var(--fg); font-weight: 700 }

/* History rows that can show a chart. */
.history-row.comparable { cursor: pointer }
.history-row.comparable:hover .history-date { color: var(--fg) }
.history-row.open { background: color-mix(in srgb, var(--fg) 4%, transparent) }

.history-dist {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

/* --- suggest a question --- */
/* Was a link out to a GitHub issue template, which redirected most players
   to a login page on their phone. The form posts to the Worker instead; a
   suggestion lands as pending and is only ever added to the bank by hand. */
.suggest-field {
  display: block;
  margin-top: 0.85rem;
}

.suggest-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  color: var(--dim);
}

.suggest-label em { font-style: normal; opacity: 0.7 }

/* The answer row carries .guess as well, so the field and the exponent button
   are styled by the same rules as the daily ones rather than by copies of
   them. All this adds is the wrap that lets the label sit on its own line. */
.suggest-row { flex-wrap: wrap }
.suggest-row .suggest-label { flex: 1 0 100% }

/* --- scientific-notation helper --- */
/* The phone keypad has no "e"; this puts one within reach without swapping
   the keypad for a full keyboard. */
.exp {
  flex: 0 0 auto;
  padding: 0 0.7rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--dim);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.exp sup { font-size: 0.7em }
.exp:hover, .exp:focus-visible { color: var(--fg); border-color: var(--dim) }
.exp:active { background: color-mix(in srgb, var(--fg) 8%, transparent) }

/* --- daily reminder, in the header corner --- */
.remind {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.remind:hover { border-color: var(--dim); color: var(--fg) }
.remind-bell { font-size: 0.85em }
.remind-state { font-weight: 700 }

/* On is worth seeing at a glance; Off should stay quiet. */
.remind[data-on="true"] { border-color: var(--accent); color: var(--accent) }

.remind-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- restore a history --- */
.restore-help, .restore-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
}

.restore-input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  resize: vertical;
}
.restore-input:focus { outline: none; border-color: var(--accent) }

/* --- which shapes of problem you are good at --- */
.arch {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.arch-headline {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 700;
}

.arch-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  padding: 0.18rem 0;
}

.arch-label { color: var(--fg) }
.arch-played { color: var(--dim); font-size: 0.72rem }
.arch-median { color: var(--dim); text-align: right; white-space: nowrap }

/* Too few plays to rank: shown, but visibly not part of the comparison. */
.arch-row.thin .arch-label { color: var(--dim) }

.arch-note {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --- practice --- */

.practice-intro {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--dim);
}

.practice-prompt {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

/* Practice earns no points, so the slot says so rather than showing a number. */
#practice-points {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

#practice-next { margin-top: 0.9rem }

/* --- the reminder part of How to play --- */
.howto-reminder {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.howto-subhead {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.howto-reminder .howto-steps { margin-top: 0.55rem }

/* --- AGPL source offer --- */
/* Section 13 requires that people using this over a network are offered its
   source, so the link is in the app rather than only in the repository. */
.source-offer {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  color: var(--dim);
  opacity: 0.75;
  text-align: center;
}
.source-offer a { color: inherit }
.source-offer a:hover { color: var(--fg) }

/* --- the confession --- */
/* An exact-to-the-digit guess is essentially unreachable by estimating, so it
   gets asked, in fun, whether they looked it up. The answers ship with the app
   so it can play offline - anyone can read them, and pretending otherwise
   would be sillier than joking about it. */
.confess {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.confess-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.confess-body {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg);
}

.confess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.9rem;
}

.confess-actions button {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.confess-actions button:hover { color: var(--fg); border-color: var(--dim) }
.confess-actions button:active { transform: translateY(1px) }

/* The honest answer is the one worth making easy to press. Specificity rather
   than !important, so it stays overridable. */
.confess-actions .confess-yes {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.dist-confessed {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
  font-style: italic;
}