/* ============================================================================
   components.css — buttons, cards, stamps, the combo box, tallies.
   ========================================================================= */

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.62rem 1.35rem;
  border: 1px solid var(--ink-2);
  background: var(--paper-lit);
  color: var(--ink);
  font-family: var(--f-antique);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper-lit);
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* The primary action gets the second ink and a printed drop-shadow. */
.btn--primary {
  background: var(--ink);
  color: var(--paper-lit);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink-4);
}
.btn--primary:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper-lit);
  box-shadow: 3px 3px 0 var(--ink-2);
}

.btn--submit {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper-lit);
  box-shadow: 3px 3px 0 var(--ink-3);
}
.btn--submit:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }

.btn--ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-3);
  color: var(--ink-3);
}
.btn--ghost:hover:not(:disabled) { background: var(--ink-3); color: var(--paper-lit); }

.btn--small { padding: 0.36rem 0.8rem; font-size: 0.72rem; }

/* ── play bar controls ─────────────────────────────────────────────────────
   Deliberately quiet. During a dispatch these are the only chrome on screen,
   so they must stay reachable without pulling the eye off the map.
   ------------------------------------------------------------------------ */

.playbar__exit {
  appearance: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--ink-4);
  background: transparent;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.playbar__exit:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper-lit);
}

.icon-chip {
  appearance: none;
  cursor: pointer;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1px solid var(--ink-4);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}
.icon-chip:hover { background: var(--ink-2); color: var(--paper-lit); border-color: var(--ink-2); }
.icon-chip.is-off { opacity: 0.4; text-decoration: line-through; }

/* ── toolbar chips ─────────────────────────────────────────────────────── */

.chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ink-4);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-antique);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.chip:hover { background: var(--ink-2); color: var(--paper-lit); border-color: var(--ink-2); }
.chip.is-off { opacity: 0.42; text-decoration: line-through; }
.chip__icon { font-size: 0.9em; }

/* ── the register picker ───────────────────────────────────────────────────
   Set as a masthead sub-heading rather than as a form control: it sits above
   the three mode cards and has to read as part of the paper, not as a settings
   widget dropped onto it. The two options are given equal weight — neither is
   the "correct" way to play — and only the selected one takes ink.
   ------------------------------------------------------------------------ */

.register-pick {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  /* No rule of its own: the mode grid already carries one across the top of
     the page, and two hairlines a few pixels apart read as a printing fault. */
  margin: 0 0 clamp(0.9rem, 2.5vw, 1.6rem);
  text-align: center;
}

.register-pick__label {
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.register-pick__note {
  margin: 0;
  max-width: 46ch;
  font-family: var(--f-body);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.register-pick__applies {
  margin: 0;
  max-width: 52ch;
  font-family: var(--f-body);
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-4);
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--ink-3);
  background: var(--paper-lit);
}

.segmented__opt {
  appearance: none;
  cursor: pointer;
  padding: 0.42rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-antique);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  transition: background 120ms linear, color 120ms linear;
}
.segmented__opt + .segmented__opt { border-left: 1px solid var(--ink-4); }
.segmented__opt:hover { color: var(--ink); background: var(--paper-2); }

/* The selected side is overprinted in the second colour on the press. */
.segmented__opt.is-on {
  background: var(--red);
  color: var(--paper-lit);
}
.segmented__opt.is-on:hover { background: var(--red-2); color: var(--paper-lit); }

@media (max-width: 30rem) {
  .segmented { flex-direction: column; width: 100%; }
  .segmented__opt + .segmented__opt { border-left: 0; border-top: 1px solid var(--ink-4); }
}

/* ── mode cards ────────────────────────────────────────────────────────── */

.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(0.9rem, 2.4vw, 1.75rem);
  text-align: center;
}

/* Reserve two lines so the rule under each title lands at the same height in
   all three columns, whether the kicker wraps or not. */
.mode-card__kicker {
  margin: 0;
  /* Two lines at this size and line-height come to ~2.42rem; reserving less
     than that lets the taller kickers push their column's title out of line
     with the others. */
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-card__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.05;
}

.mode-card__body {
  font-size: 0.92rem;
  color: var(--ink-2);
  flex: 1;
}

.mode-card__meta {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.4rem 0 0.9rem;
}
.mode-card__meta > div { display: grid; gap: 0.1rem; }
.mode-card__meta dt {
  font-family: var(--f-antique);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mode-card__meta dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Which register the card will draw from — the line that ties the picker above
   to the button below, so nobody has to guess what the setting reaches. */
.mode-card__note {
  margin: -0.5rem 0 0.7rem;
  font-family: var(--f-antique);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* A "read" overprint once the day's dispatch is finished. */
.mode-card.is-done .mode-card__stamp {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  width: 4.5rem;
  height: 4.5rem;
  border: 3px double var(--red);
  border-radius: 50%;
  opacity: 0.34;
  transform: rotate(-16deg);
  pointer-events: none;
}
.mode-card.is-done .mode-card__stamp::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--f-type);
  font-size: 1.9rem;
  color: var(--red);
}

/* ── mode cards on a phone ─────────────────────────────────────────────────
   Three stacked cards with full descriptions run past a phone screen before
   the third one is reachable. The kicker on each card already states the mode
   in a line ("Five subjects. No reprieve."), and How to Play carries the rules
   in full, so the long description is the part that gives way. Everything else
   just tightens.
   ------------------------------------------------------------------------ */
@media (max-width: 40rem) {
  .chip { padding: 0.26rem 0.52rem; font-size: 0.64rem; letter-spacing: 0.12em; }

  .portrait { width: clamp(4.5rem, 22%, 6.5rem); margin-bottom: 0.5rem; }
  .portrait figcaption { font-size: 0.52rem; margin-top: 0.3rem; }
  .broadside__stamp { font-size: 0.62rem; padding: 0.3rem 0.6rem; border-width: 3px; }

  .mode-card { gap: 0.25rem; padding: 0.85rem 0.9rem 1rem; }

  .mode-card__body { display: none; }

  /* No neighbours to line up with once the columns stack. */
  .mode-card__kicker {
    min-height: 0;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }

  .mode-card__title { font-size: 1.5rem; }

  .mode-card__meta { margin: 0.3rem 0 0.7rem; gap: 1.1rem; }
  .mode-card__meta dd { font-size: 1.05rem; }

  .mode-card .btn { padding: 0.5rem 1rem; }
  .mode-card.is-done .mode-card__stamp { width: 3.2rem; height: 3.2rem; top: 0.7rem; }
  .mode-card.is-done .mode-card__stamp::after { font-size: 1.3rem; }
}

/* ── record cards (born / died) ────────────────────────────────────────── */

.record {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7rem 1rem 0.8rem;
  border: 1px solid var(--ink-4);
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.6), transparent 55%);
  text-align: center;
}

.record__mark {
  position: absolute;
  top: -0.72rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.5rem;
  background: var(--paper);
  color: var(--red);
  font-size: 1.1rem;
  line-height: 1;
}

.record__label { margin: 0.1rem 0 0.35rem; }

.record__place {
  margin: 0 0 0.2rem;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  line-height: 1.2;
}

/* Modern country beneath the historical place name. Set quietly: the
   settlement is the clue, the country is orientation. */
.record__country {
  margin: 0 0 0.25rem;
  font-family: var(--f-antique);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.record__country:empty { display: none; }

.record__year {
  margin: 0;
  font-family: var(--f-type);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  font-variant-numeric: lining-nums;
}

/* The cause-of-death purchase. Deliberately the quietest thing on the card: it
   is an offer, not an instruction, and it must not compete with the two facts
   the round is actually about. `margin-top: auto` pins it to the bottom edge so
   it lines up whatever height the record cards settle at. */
.record__buy {
  margin: 0.6rem -0.4rem -0.2rem;
  padding: 0.34rem 0.5rem;
  border: 1px dashed var(--ink-4);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-antique);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.record__buy:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-wash);
}
.record__buy:disabled {
  cursor: default;
  border-style: dotted;
  color: var(--ink-4);
}

/* ── the cause of death, once bought ──────────────────────────────────────
   Marked like a hint but not one of them: a heavier rule and the death dagger,
   so a reader can see at a glance that this clue came out of the score rather
   than out of an attempt.
   ------------------------------------------------------------------------ */

.cause {
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem 0.55rem;
  border-left: 3px solid var(--ink-2);
  background: rgba(140, 120, 80, 0.09);
}

.cause__title {
  margin: 0 0 0.15rem;
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cause__title::before { content: '† '; color: var(--red); }

/* Set to match .hint__body: it is a clue a player reads and weighs, and it cost
   more than any of the other three. */
.cause__body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 1.05rem + 0.35vw, 1.35rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* ── hints ─────────────────────────────────────────────────────────────── */

.hint {
  padding: 0.5rem 0.9rem 0.55rem;
  border-left: 3px solid var(--red);
  background: var(--red-wash);
}

.hint__title {
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.15rem;
}

/* The hints are the thing a player actually reads and weighs, so they are set
   larger than body copy rather than smaller. The box around them was tightened
   by the same amount the type grew, so this costs no vertical space. */
.hint__body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 1.05rem + 0.35vw, 1.35rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* ── attempts ──────────────────────────────────────────────────────────── */

.attempts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin-bottom: 0.6rem;
}

.attempts__label {
  font-family: var(--f-antique);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.attempts__marks { display: inline-flex; gap: 0.25rem; font-size: 1.15rem; line-height: 1; }
.attempts__mark { color: var(--ink-4); transition: color 200ms ease; }
.attempts__mark.is-spent { color: var(--red); }

/* What the next correct answer is still worth. The stake is the whole reason
   to guess now rather than take another hint, so it should be visible. */
.attempts__worth {
  font-family: var(--f-antique);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--red);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.attempts__worth:empty { display: none; }

/* ── the combo box ─────────────────────────────────────────────────────── */

.combo {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 40rem;
  margin: 0 auto;
}

.combo__field { position: relative; flex: 1; }

/* Skip carries its price in its label ("Skip · −1 attempt"), which is the whole
   point of the button being there — so it is set tighter than a plain button
   and kept on one line rather than breaking in half beside Guess. */
#btn-skip {
  flex-shrink: 0;
  padding-inline: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.combo__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ink-2);
  border-radius: 0;
  background: var(--paper-lit);
  color: var(--ink);
  font-family: var(--f-type);
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.combo__input::placeholder { color: var(--ink-4); }
.combo__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-wash);
}
.combo__input:disabled { opacity: 0.55; }

/* The suggestion list is a slip of paper laid over the sheet.
   It opens UPWARD: on a phone the on-screen keyboard covers everything below
   the field, so a list rendered beneath it can only be reached by dismissing
   the keyboard first. */
.combo__list {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper-lit);
  border: 1px solid var(--ink-2);
  box-shadow: 0 12px 26px -16px rgba(40, 30, 10, 0.75);
}

.combo__option {
  padding: 0.45rem 0.85rem;
  font-family: var(--f-body);
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(106, 92, 69, 0.22);
}
.combo__option:last-child { border-bottom: 0; }
.combo__option:hover,
.combo__option[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper-lit);
}

@media (max-width: 34rem) {
  .combo { flex-wrap: wrap; }
  .combo__field { flex: 1 0 100%; }
  .combo .btn { flex: 1; }
}

/* ── notices & tried list ──────────────────────────────────────────────── */

.notice {
  max-width: 40rem;
  margin: 0.7rem auto 0;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--red);
  background: var(--red-wash);
  color: var(--red);
  font-family: var(--f-antique);
  font-size: 0.88rem;
  text-align: center;
}

.tried {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

/* A rejected name is struck through, the way a sub-editor would kill it. */
.tried__item {
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--ink-4);
  font-family: var(--f-type);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.tried__item--skip { border-style: dotted; text-decoration: none; font-style: italic; }

/* ── the verdict stamp ─────────────────────────────────────────────────── */

/* The stamp sits fully inside the sheet. Hanging it off the top edge put it
   underneath the sticky play bar, which cropped the taller translations
   ("Nao identificado") clean in half. */
.broadside__stamp {
  position: absolute;
  z-index: 2;
  top: clamp(0.6rem, 2vw, 1.1rem);
  right: clamp(0.6rem, 3vw, 1.75rem);
  max-width: calc(100% - 1.5rem);
  padding: 0.4rem 0.9rem;
  border: 4px double currentColor;
  font-family: var(--f-type);
  font-size: clamp(0.7rem, 2vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Starts lifted and rotated; `is-stamped` slams it down. */
  transform: rotate(-14deg) scale(2.4);
  opacity: 0;
  pointer-events: none;
}
.broadside__stamp.is-correct { color: var(--green); }
.broadside__stamp.is-failed { color: var(--red); }
.broadside__stamp.is-stamped { animation: stamp-slam 460ms cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ── portrait ──────────────────────────────────────────────────────────────
   Framed as a pasted-in plate: an oval vignette, sepia-shifted so a modern
   colour photograph still sits on 1890s newsprint without shouting.
   ------------------------------------------------------------------------ */

.portrait {
  margin: 0 auto 0.7rem;
  width: clamp(6rem, 24%, 9rem);
}
.portrait[hidden] { display: none; }

.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%; /* portraits are almost always top-weighted */
  border: 1px solid var(--ink-3);
  box-shadow: 0 0 0 3px var(--paper-lit), 0 0 0 4px var(--ink-4),
              0 10px 22px -14px rgba(40, 30, 10, 0.8);
  filter: sepia(0.42) contrast(1.06) brightness(0.98) saturate(0.7);
}

.portrait figcaption {
  /* Wider than the plate it sits under, so the credit stays on one line. */
  width: 150%;
  margin: 0.4rem 0 0 -25%;
  font-family: var(--f-antique);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.portrait figcaption a { color: var(--ink-4); text-decoration: none; }
.portrait figcaption a:hover { color: var(--red); text-decoration: underline; }

/* ── read further ──────────────────────────────────────────────────────── */

.readmore { margin: 0.6rem 0 0; }
.readmore a {
  font-family: var(--f-antique);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.readmore a:hover { color: var(--ink); }
.readmore a[hidden] { display: none; }

.broadside__kicker {
  font-family: var(--f-antique);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}

.broadside__name {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  line-height: 1.02;
  margin-bottom: 0.25rem;
}

.broadside__span {
  font-family: var(--f-type);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-variant-numeric: lining-nums;
}

.broadside__deed {
  font-family: var(--f-body);
  font-size: 1.12rem;
  font-style: italic;
  max-width: 38ch;
  margin: 0 auto 0.85rem;
}

.broadside__ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
}
.broadside__ledger > div { display: grid; gap: 0.2rem; }
.broadside__ledger dt {
  font-family: var(--f-antique);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.broadside__ledger dd { margin: 0; font-size: 0.95rem; }

/* The cause of death is a sentence, not a date, so it takes the whole width of
   the ledger instead of sharing a row with the two places. */
.broadside__ledger-wide { grid-column: 1 / -1; }
.broadside__ledger-wide dd { font-size: 0.9rem; font-style: italic; color: var(--ink-2); }

.broadside__attempts {
  font-family: var(--f-antique);
  font-size: 0.9rem;
  color: var(--ink-3);
}

.broadside__perfect {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--red);
}

.broadside__next {
  font-family: var(--f-antique);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: 1rem;
}

/* ── award ─────────────────────────────────────────────────────────────── */

.award {
  display: grid;
  gap: 0.15rem;
  margin: 0.8rem 0 0.3rem;
}
.award__label {
  font-family: var(--f-antique);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.award__value {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1;
  color: var(--green);
  font-variant-numeric: lining-nums tabular-nums;
}
.award.is-empty .award__value { color: var(--ink-4); }

/* ── the verdict on a phone ────────────────────────────────────────────────
   These override base declarations that live in this file, so they must live
   here too: css/layout.css is linked BEFORE components.css, and at equal
   specificity the later file wins. The same rules sitting in layout.css did
   nothing at all.
   ------------------------------------------------------------------------ */
@media (max-width: 40rem) {
  .broadside__name { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .broadside__span { font-size: 0.88rem; }
  .broadside__deed { font-size: 0.98rem; margin-bottom: 0.45rem; }

  /* auto-fit dropped Lifespan onto a second row, which costs more height than
     three narrow columns ever save. */
  .broadside__ledger {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.55rem;
    padding: 0.5rem 0;
  }
  .broadside__ledger dt { font-size: 0.56rem; letter-spacing: 0.1em; }
  .broadside__ledger dd { font-size: 0.74rem; line-height: 1.25; }

  .broadside__attempts { font-size: 0.82rem; }
  .readmore { margin-top: 0.4rem; }
  .readmore a { font-size: 0.72rem; }
  .award { margin: 0.35rem 0 0.15rem; }
  .award__value { font-size: clamp(2rem, 11vw, 2.8rem); }
}

/* ── tallies ───────────────────────────────────────────────────────────── */

.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.9rem;
  margin: 0.9rem 0;
}

.tally__item { display: grid; gap: 0.15rem; }
.tally__label {
  font-family: var(--f-antique);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.tally__value {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.tally__item--major .tally__value { font-size: 2.6rem; color: var(--red); }
.tally--minor .tally__value { font-size: 1.3rem; }

/* ── the Hundred ───────────────────────────────────────────────────────────
   A small honour set between printers' fleurons on the verdict sheet. It is
   praise for the subject, not for the reader, so it stays quiet: no fill, no
   box, just the second colour and a pair of ornaments.
   ------------------------------------------------------------------------ */

.laurel {
  margin: 0.2rem 0 0;
  font-family: var(--f-antique);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
/* Set as margins rather than as spaces inside the glyph: the uppercase
   tracking above would otherwise swallow the gap and jam the fleuron against
   the first letter. */
.laurel__text::before { content: '❦'; margin-right: 0.6em; }
.laurel__text::after { content: '❦'; margin-left: 0.45em; }

/* The same signal in the run summary, where there is only room for the mark. */
.scorelist__laurel {
  color: var(--red);
  font-size: 0.9em;
  cursor: help;
}

/* ── per-round score list ──────────────────────────────────────────────── */

.scorelist {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--ink-4);
}

.scorelist__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid rgba(106, 92, 69, 0.25);
}

.scorelist__name { font-family: var(--f-body); font-size: 1rem; }
.scorelist__marks { font-family: var(--f-display); letter-spacing: 0.1em; color: var(--green); }
.scorelist__points {
  font-family: var(--f-type);
  font-size: 0.85rem;
  min-width: 4.5rem;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.scorelist__row.is-lost .scorelist__name { color: var(--ink-4); font-style: italic; }
.scorelist__row.is-lost .scorelist__marks { color: var(--ink-4); }

/* ── distribution bars ─────────────────────────────────────────────────── */

.dist { display: grid; gap: 0.35rem; margin: 0.6rem 0 1.4rem; }

.dist__row { display: grid; grid-template-columns: 1.4rem 1fr; align-items: center; gap: 0.5rem; }

.dist__label {
  font-family: var(--f-type);
  font-size: 0.85rem;
  color: var(--ink-3);
  text-align: right;
}

.dist__track { display: block; }

.dist__bar {
  display: block;
  padding: 0.15rem 0.45rem;
  background: var(--red);
  color: var(--paper-lit);
  font-family: var(--f-type);
  font-size: 0.75rem;
  text-align: right;
  min-width: 1.6rem;
  transition: width 500ms cubic-bezier(.2, .8, .3, 1);
}
.dist__bar--lost { background: var(--ink-4); }

.dist__legend {
  margin: 0.4rem 0 0;
  font-family: var(--f-type);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-4);
  text-align: right;
}

.stats__subtitle {
  font-family: var(--f-antique);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  margin-top: 1rem;
}

.stats__empty {
  font-family: var(--f-antique);
  font-style: italic;
  color: var(--ink-3);
  padding: 1.5rem 0;
}

/* ── archive ───────────────────────────────────────────────────────────── */

.archive { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; }

.archive__row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(106, 92, 69, 0.25);
}

.archive__date {
  font-family: var(--f-type);
  font-size: 0.8rem;
  color: var(--ink-3);
  font-variant-numeric: lining-nums tabular-nums;
}

.archive__status {
  font-family: var(--f-antique);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border: 1px solid currentColor;
}
.archive__status.is-solved { color: var(--red); }
.archive__status.is-lost { color: var(--ink-3); }
/* Read but not played: the answer is known, the day was never scored. */
.archive__status.is-seen { color: var(--ink-3); border-style: dashed; font-style: italic; }
.archive__status.is-unplayed { color: var(--ink-4); border-style: dashed; }

.archive__name { font-family: var(--f-body); font-size: 0.95rem; }
/* A day still to be met keeps its name back; the ellipsis is the placeholder. */
.archive__name.is-withheld { color: var(--ink-4); letter-spacing: 0.2em; cursor: help; }

@media (max-width: 40rem) {
  .archive__row { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .archive__name { grid-column: 1 / -1; }
}

/* ── help dialog ───────────────────────────────────────────────────────── */

.sheet {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(38rem, 92vw);
}
.sheet::backdrop { background: rgba(30, 22, 8, 0.62); backdrop-filter: blur(2px); }

.sheet__body {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: var(--paper-lit);
  border: 1px solid var(--ink-3);
  box-shadow: 0 0 0 4px var(--ink-4);
  text-align: center;
}

.sheet__title { font-family: var(--f-display); font-size: clamp(1.5rem, 4vw, 2.2rem); }

/* The sheet is long enough to overflow on a phone, and it opens unbidden on a
   first visit — so it scrolls inside itself rather than pushing its own close
   button past the bottom of the screen. */
.sheet__body {
  max-height: 88vh;
  overflow-y: auto;
}

.sheet__lead {
  margin: 0 0 1rem;
  font-family: var(--f-body);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-2);
}

/* The confirm sheet asks one question, so it is narrower than the rules sheet
   and its two answers sit side by side — accept first, decline second. */
.sheet--ask { max-width: min(30rem, 92vw); }

.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.sheet__actions .btn { flex: 1 1 9rem; }

.sheet__part {
  text-align: left;
  margin-bottom: 1.15rem;
}
.sheet__part p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.sheet__head {
  margin: 0 0 0.3rem;
  font-family: var(--f-antique);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.sheet__aside {
  margin-top: 0.5rem !important;
  font-style: italic;
  font-size: 0.85rem !important;
  color: var(--ink-3) !important;
}

/* The scoring ladder, set as a narrow price list rather than a full-width
   table — four rows of two numbers should not span the sheet. */
.awards {
  margin: 0.7rem 0 0;
  border-collapse: collapse;
  min-width: 12rem;
}
.awards th {
  font-family: var(--f-antique);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: normal;
  text-align: left;
  padding: 0 1.4rem 0.25rem 0;
  border-bottom: 1px solid var(--ink-4);
}
.awards td {
  padding: 0.22rem 1.4rem 0.22rem 0;
  font-family: var(--f-type);
  font-size: 0.85rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.awards__points { color: var(--red); }
.awards tr:last-child .awards__points { color: var(--ink-3); }

.sheet__legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
  font-family: var(--f-antique);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sheet__legend .mark { font-size: 1.1rem; }

.sheet__privacy {
  margin: 0 0 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink-4);
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-3);
  text-align: left;
}