/* ============================================================
   THE LOCKBOX — the page's layout
   The paper, ink and type come from newsprint.css. The clue ledger on
   ledger paper, typed in Courier Prime, its next line the lock, typed into
   from the keypad docked at the foot of the screen under it, and the
   notepad in the ruled card on the right.
   ============================================================ */

:root {
  --font-type: 'Courier Prime', 'Courier New', monospace;
  --ink-red: #a3302a;                    /* the starter clue's red ink */
}

/* newsprint.css hides the paper's sideways overflow on html and body both,
   which makes body a scroll container of its own, and then the docked lock
   has no viewport to stick to. Clipping hides it the same way without that. */
html, body { overflow-x: clip; }

.sheet {
  max-width: 1236px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; }
.tt { font-family: var(--font-type); font-weight: 700; letter-spacing: .5px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============ THE PUZZLE TIMES' BAR (as .times-bar in styles.css) ============ */
.times-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; padding: 0 0 6px;
}
.tb-back {
  justify-self: start; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
}
.tb-flag {
  font-family: var(--font-flag);
  font-size: 30px; line-height: 1; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  text-shadow: 0 1px 0 #00000022;
}
.tb-back:hover, .tb-flag:hover { color: var(--accent); }
/* The right ear: the reader's profile, as the front page sets it right of
   the nameplate. The -1px margins keep the bar as tall as the flag. */
.tb-side { justify-self: end; white-space: nowrap; margin-block: -1px; }
.tb-short { display: none; }
/* Profile's short form on a phone: a head and shoulders, drawn in the ink */
.tb-icon { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ============ THE MASTHEAD ============
   As the Word Search's game screen (header.top, .logo, .head-pill and
   .head-btn in styles.css): the nameplate in caps with a small "The", its
   label beside it set off by an upright rule, and at the right the guesses
   left, ruled off from How to play the way the clock is from Menu. */
header.top {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0 7px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2px;
}
.logo {
  flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 6.4vw, 38px); line-height: 1;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 #00000018;
  transform: translateY(-0.12em);    /* caps without descenders read high */
}
.logo-the { font-size: .5em; letter-spacing: 1px; margin-right: .12em; }
.head-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.head-diff { border-left: 1px solid var(--rule); padding: 3px 0 3px 14px; color: var(--ink-dim); }
.head-diff:empty { display: none; }
.head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.head-count {
  border-right: 1px solid var(--rule); padding: 3px 14px 3px 0;
  font-size: 14px; letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.head-btn {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-dim); background: transparent;
  border: 1.5px solid var(--rule); border-radius: 0;
  padding: 9px 14px; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.head-btn:hover { color: var(--paper); background: var(--ink); }

/* The Puzzle Times' folio (.dateline in styles.css): the number left, the
   date in ink in the middle, the price right. The masthead's rule is its
   top one. */
.dateline {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  gap: 4px 14px;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-dim);
}
.dateline:empty { display: none; }
.dateline > :nth-child(2) { color: var(--ink); }
.dateline > :last-child { justify-self: end; }

/* ============ THE STAGE ============
   As the Word Search's: the ledger and its keypad on the left where the
   board is, and a ruled card of a set width on the right. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 360px);
  gap: clamp(32px, 3.4vw, 56px);
  align-items: start;
  margin-top: 10px;
}
/* The scrap over the ledger, and the keypad under it, docked at the foot
   of the screen while the ledger runs above (a screen tall enough shows
   both, and it sits where it is). Once the game is over it goes. */
.board-col { display: flex; flex-direction: column; min-width: 0; }
.board-col > .controls {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 14px; padding: 8px 0 10px;
  background: var(--paper);
  border-top: 3px double var(--rule);
  box-shadow: 0 -6px 14px #2b1d1212;
}
.board-col > .controls .keypad { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
#ledger .line { scroll-margin: 90px 0 calc(var(--dock, 280px) + 16px); }
@media (min-width: 900px) {
  #ledger .line { min-height: 48px; }
}
.side-col {
  align-self: stretch;
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 22px 20px;
  background: var(--paper); border: 1.5px solid var(--rule);
}
.sb-sub {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.sb-sub-note {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-dim);
  margin-left: 6px;
}

/* the day's puzzle leads the card, as the daily's theme does (.daily-banner) */
.daily-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.db-label {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim);
}
.db-theme {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; line-height: 1.05; letter-spacing: 1px; text-transform: uppercase;
}
.db-facts { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.db-facts b { font-weight: 600; color: var(--accent); }

/* "Guesses 2 / 8" over a bar, as "Words to find" (.wl-head, .wl-bar) */
.wl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
}
.wl-bar { height: 6px; border: 1px solid var(--rule); }
.wl-bar i {
  display: block; height: 100%; width: 0; background: var(--ink);
  transition: width .45s cubic-bezier(.3, .8, .3, 1);
}
.card-over { font-size: 16px; line-height: 1.45; }
.card-over[hidden] { display: none; }
.card-over .tt { font-size: 18px; }

/* how to read a clue, at the foot of the card, as the drag rule's tip */
.tip {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.tip-copy { flex: 1; min-width: 0; }
.tip-title {
  margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1;
}
.tip-text { font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
.tip-text b { color: var(--ink); }
.tip-art { flex: none; display: flex; gap: 8px; padding-right: 6px; }
.tip-art .dot { width: 22px; height: 22px; border-width: 2.5px; }
/* a short screen keeps the card to the ledger's height, as the game's does */
@media (max-height: 820px) { .tip { display: none; } }

/* ============ THE CLUE LEDGER ============
   Ledger paper: a red margin and faint blue lines, a typed line a guess. */
.ledger { list-style: none; }
#ledger {
  padding: 4px 10px 4px 0;
  background:
    linear-gradient(90deg, transparent 34px, #c0505066 34px, #c0505066 35px, transparent 35px),
    #f6f3ea;
  border: 1px solid var(--rule-soft);
}
.line {
  display: grid;
  grid-template-columns: 34px auto auto minmax(0, 1fr);
  grid-template-areas: "no code sym text";
  align-items: center; gap: 2px 12px;
  min-height: 44px; padding: 6px 0;
  border-bottom: 1px solid #6f8fb033;
  scroll-margin: 16px;
}
.line:last-child { border-bottom: 0; }
.ln-no {
  grid-area: no; text-align: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--ink-dim);
}
.ln-code {
  grid-area: code;
  font-family: var(--font-type); font-weight: 700; font-size: 21px; letter-spacing: 1px;
  white-space: nowrap;
}
.sym { grid-area: sym; display: inline-flex; gap: 4px; min-width: 52px; }
.sym.none { font-family: var(--font-type); font-weight: 700; color: var(--ink-dim); }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.dot.well { background: var(--ink); }
.ln-text {
  grid-area: text;
  font-family: var(--font-type); font-size: 14px; line-height: 1.3;
}
.ln-text.typing::after { content: "▌"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.line.empty .ln-no { opacity: .55; }
/* the line being typed: the lock. Each digit a key of the typewriter's,
   a blank still to come, the cursor's underlined in red; tap one to type
   over it. */
.line.draft .ln-no { color: var(--accent); }
.line.draft .ln-no::after { content: " ←"; }
.line.draft .ln-code { display: inline-flex; align-items: baseline; }
/* spaced as the typed lines above it, a digit and a dot to a character */
.dslot {
  padding: 0;
  font: inherit; letter-spacing: inherit; line-height: 1.2;
  color: var(--ink); background: none; border: 0; border-radius: 0;
  cursor: pointer;
}
.dslot:not(.filled) { color: var(--ink-dim); opacity: .6; }
/* the cursor: a blank's own underscore in red, or a red rule under a digit */
.dslot.cursor { color: var(--accent); opacity: 1; }
.dslot.cursor.filled { box-shadow: 0 3px 0 var(--accent); }
.line.draft.shake { animation: shake .4s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.line.fresh .sym { animation: stamp .3s cubic-bezier(.2, 1.6, .5, 1) .1s backwards; }
@keyframes stamp { from { transform: scale(2); opacity: 0; } }
/* the guess that opened it */
.line.opened .ln-code, .line.opened .ln-text { color: var(--accent); }
.line.opened .ln-text { font-weight: 700; text-transform: uppercase; letter-spacing: 3px; }
.line.opened .dot.well { background: var(--accent); border-color: var(--accent); }
/* Short Clues: the symbols only */
body.short-clues #ledger .ln-text { display: none; }

/* the starter clue, in red ink on a scrap of paper pinned over the ledger */
.scrap {
  position: relative;
  margin: 0 18px 12px 8px; padding: 8px 14px 4px;
  background: #fbf8ee;
  box-shadow: 0 1px 3px #2b1d1233, 0 6px 14px -8px #2b1d1244;
  transform: rotate(-1.2deg);
  clip-path: polygon(0 3%, 4% 0, 30% 2%, 55% 0, 80% 3%, 100% 0, 99% 50%, 100% 97%, 70% 100%, 42% 97%, 15% 100%, 0 98%, 1% 50%);
}
.scrap[hidden] { display: none; }
.scrap-head {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-red);
}
.line.starter { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "code sym text"; border: 0; min-height: 0; }
.line.starter .ln-no { display: none; }
.line.starter .ln-code, .line.starter .ln-text { color: var(--ink-red); }
.line.starter .dot { border-color: var(--ink-red); }
.line.starter .dot.well { background: var(--ink-red); }
.line.starter .sym.none { color: var(--ink-red); }

/* ============ THE LOCK AND THE KEYPAD ============
   Docked at the foot of the screen while the ledger runs above. */
/* In the card on a wide screen; docked at the foot of a phone's screen. */
.controls { display: flex; flex-direction: column; }
.message {
  min-height: 1.4em; margin-bottom: 8px;
  text-align: center; font-size: 14px; font-style: italic; color: var(--ink-dim);
}
.message.bad { color: var(--accent); font-style: normal; font-weight: 600; }

.keypad {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px;
}
.key {
  position: relative;
  height: 46px;
  font-family: var(--font-type); font-weight: 700; font-size: 21px;
  color: var(--ink); background: var(--paper-2);
  border: 1.5px solid var(--rule); border-radius: 3px;
  box-shadow: 0 2px 0 var(--rule);
  cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.key:hover:not(:disabled) { background: var(--paper); }
.key:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.key:disabled { opacity: .35; cursor: default; }
.key-del { grid-column: span 2; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }
.key-try {
  grid-column: span 3;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
}
.key-try:hover:not(:disabled) { background: #3b352c; }
.key.typed { background: var(--paper); border-color: var(--ink); }
/* what you know: crossed out for you, or marked out (pencil) or in (ring) */
.key.auto-out, .key.out { color: var(--ink-dim); }
.key.auto-out { opacity: .4; }
.key.auto-out::after, .key.out::after {
  content: ""; position: absolute; left: 26%; right: 26%; top: 50%;
  height: 2.5px; background: var(--ink); transform: rotate(-30deg); border-radius: 2px;
}
.key.out::after { background: var(--accent); }
.key.in::before {
  content: ""; position: absolute; inset: 5px 22%;
  border: 2px solid var(--accent); border-radius: 50%;
}
.keypad-hint { margin-top: 6px; text-align: center; font-size: 12px; font-style: italic; color: var(--ink-dim); }

/* ============ THE NOTEPAD ============ */
.notepad {
  padding: 10px 12px;
  background: #f6f3ea; border: 1px solid var(--rule-soft);
}
.notepad[hidden] { display: none; }
@media (min-width: 900px) {
  .side-col .notepad { padding: 0; background: none; border: 0; }
}
.np-grid { border-collapse: collapse; width: 100%; table-layout: fixed; }
.np-grid th {
  font-family: var(--font-type); font-weight: 700; font-size: 13px; color: var(--ink-dim);
  padding: 2px 0 4px;
}
.np-grid tbody th { font-family: var(--font-mono); font-size: 11px; width: 22px; text-align: left; }
.np-grid td { padding: 1px; }
.np-c {
  display: block; width: 100%; aspect-ratio: 1; min-height: 24px;
  font-size: 13px; line-height: 1;
  color: var(--ink-dim); background: var(--paper);
  border: 1px solid var(--rule-soft); cursor: pointer;
}
.np-c:hover { border-color: var(--rule); }
.np-c.x { color: var(--ink-dim); }
.np-c.here { color: var(--accent); background: #fbf8ee; border-color: var(--accent); }

/* ============ THE OPTIONS ============ */
.options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px;
  margin: 30px 0 0; padding-top: 14px;
  border-top: 2px solid var(--rule);
}
.opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--ink-dim); cursor: pointer; }
.opt b { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.opt input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--rule); background: var(--paper); cursor: pointer;
  display: grid; place-items: center;
}
.opt input:checked::after { content: "✓"; color: var(--accent); font-weight: 700; font-size: 15px; line-height: 1; }
.opt input:disabled { opacity: .45; cursor: not-allowed; }
.opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============ THE RESULTS ============
   A card over the page, as the Word Search's end-of-game card (.modal in
   styles.css): a framed notice, double-ruled, its title in caps over a
   rule, a line under it, the facts in ruled rows, then the action in ink
   and the ways on under it. */
.modal {
  width: calc(100% - 40px); max-width: 440px; max-height: calc(100dvh - 40px);   /* the scrim's 20px round it, as the game's */
  margin: auto; padding: 30px 28px 26px;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--rule);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7.5px var(--rule);   /* double frame */
  overflow: hidden auto;
  text-align: center;
}
.modal[open] { animation: cardIn .3s ease; }
.modal::backdrop { background: #1a171288; }
.modal[open]::backdrop { animation: scrimIn .3s ease; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes scrimIn { from { opacity: 0; } }
.modal h2 {
  margin-top: 14px; margin-bottom: 6px; padding-bottom: 10px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.05;
  letter-spacing: .5px; text-transform: uppercase;
  border-bottom: 2px solid var(--rule);
}
.modal p { margin: 10px 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }
.modal p .tt { font-size: 18px; color: var(--ink); }
.goal-list { list-style: none; margin: 14px 0 16px; text-align: left; font-size: 14px; }
.goal-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
}
.goal-list b { font-family: var(--font-type); font-size: 16px; white-space: nowrap; }
.stamp {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 34px; letter-spacing: 7px; text-transform: uppercase; line-height: 1;
  color: var(--accent);
  border: 4px double var(--accent);
  padding: 6px 10px 3px 17px;
  transform: rotate(-6deg);
  mix-blend-mode: multiply; opacity: .92;
  animation: slam .45s cubic-bezier(.2, 1.5, .5, 1) .15s backwards;
}
.stamp.shut { color: var(--ink); border-color: var(--ink); }
@keyframes slam { from { transform: rotate(-6deg) scale(2.4); opacity: 0; } }
.res-sub {
  margin: 4px 0 8px; text-align: left;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
/* the way to the reader's profile, at the record heading's right */
.res-sub:has(.res-profile) { display: flex; justify-content: space-between; align-items: baseline; }
.res-profile { color: var(--ink-dim); text-decoration: none; letter-spacing: 1.5px; }
.res-profile:hover { color: var(--ink); text-decoration: underline; }
/* an achievement today's game won, in the accent */
.goal-list .res-ach > b { color: var(--accent); }
.goal-list .res-ach span b { font-family: inherit; font-size: inherit; }
/* each guess's clue in a typed box, wrapping, the opening one in red */
.res-trail {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  margin-top: 14px;
}
.res-trail li {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 28px; padding: 0 7px;
  border: 1px solid var(--rule-soft); background: #f6f3ea;
}
.res-trail .sym { min-width: 0; gap: 3px; }
.res-trail .dot { width: 10px; height: 10px; }
.res-trail li.opened { border-color: var(--accent); }
.res-trail li.opened .dot { border-color: var(--accent); background: var(--accent); }
.share-card[hidden] { display: none; }
.share-card {
  display: inline-block; margin-top: 16px; padding: 10px 14px; min-width: 200px;
  text-align: left;
  font-family: var(--font-type); font-size: 14px; line-height: 1.5;
  background: #f6f3ea; border: 1px solid var(--rule-soft);
  white-space: pre-wrap;
}
.res-nums {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft);
}
.res-nums b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; }
.res-nums span { font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); }
.res-btns { display: grid; gap: 8px; margin-top: 18px; }
.res-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-pair .btn { padding-left: 8px; padding-right: 8px; letter-spacing: 1.2px; }
.res-pair .btn:not(.ghost) { font-size: 13px; }
/* a phone: the record's labels and the clues each keep to one line */
@media (max-width: 560px) {
  .res-nums span { font-size: 8.5px; letter-spacing: .6px; white-space: nowrap; }
  .res-trail { gap: 4px; }
  .res-trail li { min-width: 0; height: 26px; padding: 0 5px; }
  .res-trail .dot { width: 9px; height: 9px; }
}
.res-btns .btn { width: 100%; }
/* the secondary actions, as the Word Search's .btn.ghost */
.btn.ghost { background: var(--paper); color: var(--ink); font-size: 13px; padding: 10px 22px; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.card-over .btn.ghost { display: block; width: 100%; margin-top: 12px; }
.hist { display: grid; gap: 2px; }
.h-row { display: grid; grid-template-columns: 20px 1fr 26px; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.1; }
.h-l { text-align: right; color: var(--ink-dim); }
.h-bar { height: 10px; }
.h-bar i { display: block; height: 100%; background: var(--ink-dim); }
.h-row.mine .h-bar i { background: var(--accent); }
.h-row.mine .h-l, .h-row.mine .h-n { color: var(--accent); }
.h-n { font-family: var(--font-type); font-weight: 700; text-align: left; }
.modal .res-foot { margin: 12px 0 0; font-size: 13px; font-style: italic; }
/* a short screen: the card closes up to fit whole, as the Word Search's;
   on a very short one the histogram goes */
@media (max-height: 820px) {
  .modal { padding: 22px 24px 20px; }
  .modal h2 { font-size: 26px; margin-top: 10px; padding-bottom: 8px; }
  .modal p { margin: 8px 0; }
  .goal-list { margin: 10px 0 12px; }
  .goal-list li { padding: 6px 0; }
  .stamp { font-size: 28px; }
  .res-btns { margin-top: 14px; }
  .hist { gap: 1px; }
  .h-bar { height: 8px; }
  .h-row { font-size: 10px; }
}
@media (max-height: 680px) {
  .hist, .res-sub:has(+ .hist) { display: none; }
}
/* once it's over, the ledger stays as the record; the lock and keypad go */
body.over .controls { display: none; }

/* the finished game as a lock puzzle, only on paper */
.print-only { display: none; }
.printable { padding: 14px 16px 10px; background: var(--paper); }
.pz-kicker { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); }
.pz-title { font-family: var(--font-display); font-weight: 900; font-size: 24px; margin-top: 2px; }
.pz-sub { font-size: 14px; font-style: italic; color: var(--ink-dim); margin-bottom: 6px; }
.pz-lines .line { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "code sym text"; min-height: 36px; }
.pz-lines .line .ln-no { display: none; }
.pz-answer {
  margin-top: 10px; text-align: right;
  font-family: var(--font-type); font-size: 12px; color: var(--ink-dim);
  transform: rotate(180deg); transform-origin: center;
}
@media print {
  body * { visibility: hidden; }
  body::before, body::after, .modal, .modal::backdrop { display: none; }
  .print-only { display: block; }
  .printable, .printable * { visibility: visible; }
  .printable { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
}

/* ============ HOW TO PLAY ============ */
.btn-line {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--rule); padding: 11px 14px; cursor: pointer;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }
.help {
  max-width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  margin: auto; padding: 22px 24px 20px;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 3px;
}
.help::backdrop { background: #1a171299; }
.help h2 { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1.1; margin-bottom: 10px; }
.help h3 { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--rule); }
.help p, .help li { font-size: 15px; line-height: 1.45; }
.help > form > ol { margin: 8px 0 8px 20px; display: grid; gap: 4px; }
.walk { padding: 8px 10px 10px; background: #f6f3ea; border: 1px solid var(--rule-soft); }
.walk-ledger .line { grid-template-columns: 22px auto auto minmax(0, 1fr); min-height: 38px; }
.walk-ledger .line.starter { grid-template-columns: auto auto minmax(0, 1fr); }
.walk-ledger .line.fresh { animation: fadein .3s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } }
.walk-note { margin: 8px 0 10px; font-style: italic; min-height: 2.9em; }
.help-lang { width: 100%; border-collapse: collapse; font-size: 14px; }
.help-lang td { padding: 6px 4px; border-bottom: 1px solid var(--rule-soft); }
.help-lang td:first-child { width: 76px; }
.help .btn { display: block; width: 100%; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ln-text.typing::after, .line.fresh .sym, .line.draft.shake, .stamp, .walk-ledger .line.fresh, .modal[open], .modal[open]::backdrop { animation: none; }
  .wl-bar i { transition: none; }
}

/* ============ NARROWER SCREENS ============ */

/* A phone, or a tablet held upright: one column, as the Word Search stacks
   (styles.css under 900px). The card and the left column give up their
   boxes so their parts stack in the stage: the day's puzzle as a strip
   reversed out of the ink, the ledger, the keypad docked at the foot of the
   screen while the ledger runs above, then the notepad. The
   stage is the dock's containing block, so it stays docked over the ledger. */
@media (max-width: 899px) {
  .sheet { padding: calc(6px + env(safe-area-inset-top, 0px)) 10px calc(24px + env(safe-area-inset-bottom, 0px)); }
  header.top { padding: 2px 0; border-bottom: 0; margin: 6px 0; }
  .logo { transform: none; }
  .dateline { border-top: 1px solid var(--rule); }
  .stage { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 10px; }
  .board-col, .side-col { display: contents; }
  .ledger-wrap { display: block; }
  .daily-banner {
    order: 1;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px;
    padding: 6px 12px;
    background: var(--ink); color: var(--paper); border: 0;
  }
  .db-label { color: var(--paper); opacity: .72; font-size: 9px; letter-spacing: 1.4px; }
  .db-theme { font-size: 14px; }
  .db-facts { flex-basis: 100%; text-align: center; margin: 0; font-size: 12.5px; color: var(--paper); opacity: .85; }
  .db-facts b { color: var(--paper); }
  .ledger-wrap { order: 2; }
  .board-col > .controls {
    order: 3;
    position: sticky; bottom: 0; z-index: 5;
    margin: 0 -10px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 3px double var(--rule);
    box-shadow: 0 -6px 14px #2b1d1212;
  }
  .card-over { order: 3; text-align: center; }
  .notepad { order: 4; margin-top: 0; max-width: none; }
  .guesses, .tip { display: none; }
  .line { scroll-margin: 90px 0 calc(var(--dock, 280px) + 16px); }
}
@media (max-width: 560px) {
  .tb-flag { font-size: 24px; }
  .tb-back { font-size: 9.5px; letter-spacing: 1.2px; }
  .logo { font-size: 21px; }
  .head-diff { display: none; }
  .head-count { padding-right: 10px; font-size: 13px; }
  .head-btn { padding: 7px 12px; }
  .tb-long { display: none; }
  .tb-short { display: inline; font-size: 14px; }
  .dateline { grid-template-columns: 1fr auto; font-size: 9.5px; letter-spacing: 1.2px; }
  .dateline > :last-child { display: none; }
  .dateline > :nth-child(2) { justify-self: end; }
  /* a line on a phone: the code and its symbols, the sentence under them */
  .line { grid-template-columns: 28px auto minmax(0, 1fr); grid-template-areas: "no code sym" ". text text"; gap: 2px 10px; }
  #ledger { background: linear-gradient(90deg, transparent 28px, #c0505066 28px, #c0505066 29px, transparent 29px), #f6f3ea; }
  .line.starter, .pz-lines .line, .walk-ledger .line.starter { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "code sym" "text text"; }
  .walk-ledger .line { grid-template-columns: 22px auto minmax(0, 1fr); grid-template-areas: "no code sym" ". text text"; }
  .ln-code { font-size: 19px; }
  .ln-text { font-size: 13px; }
  .key { height: 44px; }
  .keypad-hint { display: none; }
  .options { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: 24px 18px 20px; }
}