/* SPDX-License-Identifier: AGPL-3.0-only */
/* Retractle's own look, after shared.css (copied in from the hub's repository,
   bertblookers/bertblookers.github.io). */

/* the paper: a light sheet with black redaction bars */
:root {
  --sheet: #f6f3ea;
  --ink: #1d1d1f;
  --bar: #18181b;
  --marker: #ffe46b;
  --stamp-red: #b8322a;
  --stamp-green: #2f7d4a;
}

.top {
  width: 100%;
  max-width: 76rem;
  padding: 1rem 1rem 0.25rem;
  text-align: center;
  position: relative;
}

/* the way back to the hub (shared.css draws it) */
.top .hub-mark {
  position: absolute;
  left: 1rem;
  top: 1.4rem;
}

/* Settings (user, 09-10-2026), as Muldle's: the gear top right, mirroring
   the hub's mark, opens a dialog */
.settings-button {
  position: absolute;
  right: 1rem;
  top: 1.05rem;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  cursor: pointer;
}
.settings-button:hover, .settings-button:focus-visible { color: var(--text); }
.settings-dialog {
  margin: auto; /* centred: shared.css's reset takes the browser's margin */
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  width: min(22rem, 90vw);
}
.settings-dialog::backdrop { background: #000b; }
.settings-dialog h2 {
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 0.9rem;
}
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.settings-toggle input { margin-top: 0.25rem; accent-color: var(--accent); }
.settings-toggle-text > span {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 400;
}
.settings-note { color: var(--dim); font-size: 0.8rem; margin-top: 0.6rem; }
.settings-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.3rem;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
}
.settings-close:hover, .settings-close:focus-visible { color: var(--text); }

.top h1 {
  font-size: 1.9rem;
  letter-spacing: 0.12em;
}

.puzzle-line {
  color: var(--dim);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  justify-content: center;
}

/* the puzzle navigator, as Muldle's: a joined group « Puzzle #N », its
   frame and dividers in the page's border colour, no fill; the number reads
   as active, never greyed (it leads back to today's); a step that would
   leave the days that have come is greyed */
.puzzle-nav {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.puzzle-nav[hidden] { display: none; }
.nav-btn {
  background: transparent;
  color: var(--dim);
  border: none;
  padding: 0.25rem 0.8rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn + .nav-btn { border-left: 1px solid var(--border); }
.nav-step { font-size: 1rem; line-height: 1.23; }
.nav-num { color: var(--text); letter-spacing: 0.04em; }
.nav-btn:disabled { color: var(--border); cursor: default; }
/* the focus ring inside the button: the group's frame (overflow: hidden, for
   its rounded corners) cut an outer one off (review of 09-10-2026) */
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) {
  .nav-btn:not(:disabled):hover { color: var(--text); }
}

.wip-note {
  margin: 0.45rem auto 0;
  max-width: 34rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--warn);
  border-radius: 6px;
  color: var(--warn);
  font-size: 0.85rem;
}

.help {
  width: 100%;
  max-width: 76rem;
  padding: 0.25rem 1rem;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.5;
}
.help summary { cursor: pointer; color: var(--accent); width: max-content; }
.help p, .help ul { margin: 0.4rem 0 0.4rem 1.2rem; max-width: 46rem; }

/* What's new: a fold like How to play; inside, the latest update, then On
   the horizon and Earlier updates as folds of their own (each earlier
   entry too), titles in the text colour, dates dim */
.news { padding-top: 0; }
.news .news-when { color: var(--dim); font-size: 0.82rem; margin-left: 0.2rem; }
.news .news-draft { color: var(--warn); font-weight: 600; }
.news .news-title { color: var(--text); font-weight: 600; margin-bottom: 0; }
.news .news-title + ul { margin-top: 0.15rem; }
.news .news-part { margin: 0.5rem 0 0.3rem 1.2rem; max-width: 46rem; }
.news .news-part > summary { color: var(--text); }
.news .news-part p, .news .news-part ul { margin-left: 1.2rem; }
.news .news-entry { margin: 0.35rem 0; }
.news .news-entry > summary { width: auto; color: var(--text); margin-left: 1.2rem; }
.news .news-entry > summary ~ ul { margin-left: 2.4rem; }

.layout {
  width: 100%;
  max-width: 76rem;
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.25rem;
  align-items: start;
}

.paper {
  position: relative;
  background: var(--sheet);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 6px 28px #0008;
  padding: 3rem 3rem 2.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.stamp {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  transform: rotate(-9deg);
  border: 3px solid var(--stamp-red);
  color: var(--stamp-red);
  font: 800 1rem "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.14em;
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 3;
}
.stamp.restored { border-color: var(--stamp-green); color: var(--stamp-green); }

.paper-status { color: #555; font-style: italic; }

/* the game's fiction, said where the stamp is (and so in any screenshot) */
.fiction-note {
  position: absolute;
  top: 0.55rem;
  left: 1.1rem;
  max-width: calc(100% - 12rem);
  color: #8a8578;
  font: italic 0.75rem "Segoe UI", system-ui, sans-serif;
}

/* the title stays in view while the paper scrolls (as in Redactle); it
   spans the sheet's padding so the text scrolls away under it */
.paper-title {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sheet);
  border-bottom: 1px solid #e3ddcc;
  font-size: 1.55rem;
  line-height: 1.45;
  text-align: center;
  margin: 0.6rem -3rem 1.2rem;
  padding: 0.5rem 3rem;
}

.paper-body h3, .paper-body h4, .paper-body h5 {
  margin: 1.4rem 0 0.5rem;
  line-height: 1.45;
}
.paper-body h3 { font-size: 1.2rem; }
.paper-body h4 { font-size: 1.07rem; }
.paper-body h5 { font-size: 1rem; font-style: italic; }
.paper-body p { margin: 0 0 0.8rem; }

.paper-body .label {
  text-align: center;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.paper-body .caption {
  font-size: 0.92em;
  border-left: 3px solid #ccc6b5;
  padding-left: 0.7rem;
}

/* a figure: its graphics (each a black block of its own shape until enough
   of the caption is restored, then its image from arXiv, in the same box),
   a credit line, its caption. Panels sit side by side as they fit. */
.paper-body .fig { margin: 1.1rem 0 0.9rem; }
.paper-body .fig-graphic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.paper-body .fig-bar {
  box-sizing: border-box;
  max-width: 100%;
  background: var(--bar);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* a figure that came back: its box keeps its place and size while the
   image loads ("restoring…"), and if it can't be loaded */
.paper-body .fig-bar.loading, .paper-body .fig-bar.failed {
  background: transparent;
  border: 1px dashed #b5ae9c;
}
.paper-body .fig-bar.loading span { color: #6b665a; }
.paper-body .fig-bar span {
  color: #ffffff8c;
  font: 600 0.72rem "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.paper-body .fig-graphic img { max-width: 100%; height: auto; object-fit: contain; background: #fff; }
.paper-body .fig-credit {
  margin: -0.3rem 0 0.6rem;
  text-align: center;
  color: #6b665a;
  font: 0.75rem "Segoe UI", system-ui, sans-serif;
}
.paper-body .fig-credit a { color: inherit; }
/* a figure with no graphic in arXiv's HTML */
.paper-body .fig-graphic.beyond {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  border: 2px dashed #ccc6b5;
  border-radius: 4px;
  padding: 0.8rem 1rem;
}
.paper-body .fig-graphic.beyond .fig-credit { margin: 0; }
.paper-body .fig-beyond {
  margin: 0;
  color: #6b665a; /* 5.1:1 on the sheet (review of 08-10-2026: 3.3:1 was too pale) */
  font: 800 0.9rem "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* maths as in the paper: inline in the line, displayed equations on lines
   of their own (MathML, drawn by the browser); a formula too wide for the
   screen scrolls in its own box instead of the page. A scroll box clips at
   its padding, so it gets 4px of it on each side, and its text stays where
   it was: room for the current place's outline (3px out) around a word at
   the box's edge (re-check of 09-10-2026, R1: a word starting a line lost
   its frame's left side). On phones the -4px stays inside .paper's
   padding. A caption has room on its left already (its own padding). */
.paper-body .has-math { overflow-x: auto; overflow-y: hidden; padding-right: 4px; margin-right: -4px; }
.paper-body .has-math:not(.caption) { padding-left: 4px; margin-left: -4px; }
.paper-body .equation { margin: 0.5rem -4px 0.9rem; padding-inline: 4px; overflow-x: auto; overflow-y: hidden; }
.paper-body .equation table { width: 100%; border-collapse: collapse; }
.paper-body .equation td { padding: 0.15rem 0.1rem; vertical-align: middle; white-space: nowrap; }
.paper-body .equation td.pad { width: 50%; }
.paper-body .equation td.left { text-align: left; }
.paper-body .equation td.right { text-align: right; }
.paper-body .equation td.center { text-align: center; }
.paper-body .equation td.eqno { text-align: right; padding-left: 1rem; }
.paper-body math { font-size: 1.05em; }

.tag { font-weight: bold; }

/* a redacted word: a black bar as wide as the word, roughly, showing its
   number of characters (every bar: user, 08-10-2026; .count is set once the
   bar comes near the screen, see numberNear in retractle.js). The number is
   drawn over the bar, so it never moves the text; it keeps a readable size
   in small type (captions, subscripts in maths). Inside maths the bar sits
   in its MathML token, which keeps the maths layout. */
span.r {
  display: inline-block;
  width: calc(var(--len) * 0.56em);
  height: 0.95em;
  background: var(--bar);
  border-radius: 2px;
  vertical-align: -0.12em;
  position: relative;
}
span.r.count::after {
  content: attr(data-len);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: max(0.62em, 0.6rem);
  line-height: 1;
}

/* With the glide off (Settings), the paper's blocks are drawn only near the
   view: a long paper's first screen about 2.5x faster (Claude's proposal,
   09-10-2026; notes/render-speed.md). A block keeps its last drawn height
   once seen. Not in print, which draws everything. Its paint containment
   clips at the block's edge, so the current place's outline (3px out) gets
   room to show (pre-push review of 09-10-2026, A2: a word starting a line
   lost its frame's left side; a browser that doesn't widen paint
   containment with overflow-clip-margin still clips it). A block with
   maths scrolls and has room of its own (above). Only where the browser
   has scroll anchoring (the class anchoring, set from
   CSS.supports("overflow-anchor", "auto")): it keeps the text in place as
   blocks above the view get their real height. WebKit (Safari, every
   iPhone and iPad) has none, and the text jumped as the player scrolled up
   after a jump (review of 09-10-2026, B2). */
.anchoring.glide-off .paper-body > * { content-visibility: auto; contain-intrinsic-size: auto 3em; overflow-clip-margin: 4px; }

/* print: every bar black with its number, the ones never scrolled near the
   screen too (re-check of 08-10-2026: they printed without one); browsers
   leave backgrounds out of a print unless told */

@media print {
  .settings-button { display: none; }
  .anchoring.glide-off .paper-body > * { content-visibility: visible; }
  /* the title above the abstract, not where it was stuck on screen */
  .paper-title { position: static; }
  span.r, .paper-body .fig-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  span.r::after {
    content: attr(data-len);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: normal 600 max(0.62em, 0.6rem)/1 "Segoe UI", system-ui, sans-serif;
  }
  /* a figure that came back but never came near the view prints as its
     empty box, not with a progress word frozen on paper (review of
     09-10-2026; the print asks for it, so the next one has it) */
  .paper-body .fig-bar.loading span { visibility: hidden; }
}

/* an older retractle.js's maths bar (block characters), in a deploy's
   mixed cache */
math .r { color: var(--bar); background: var(--bar); border-radius: 2px; }

/* restored words; .given = shown at the end, not restored by the player */
.k.hl { background: var(--marker); border-radius: 2px; }
.k.cur { outline: 2px solid #e07b00; outline-offset: 1px; }
.k.given { color: #6b665a; }

/* forced colours (Windows High Contrast) replace every background with the
   page's, which took away the bars and the marker of a guess's places
   (review of 08-10-2026): the bars in the text colour (in maths too) with
   their numbers in the page's, the places of the picked guess in the
   system's mark colours, the current one outlined in the text colour (the
   selected guess's row: with the guess list's rules, below).
   After the rules above, which it overrides at the same specificity
   (re-check of 08-10-2026). */
@media (forced-colors: active) {
  span.r, math .r { forced-color-adjust: none; background: CanvasText; color: CanvasText; }
  span.r.count::after, span.r::after { forced-color-adjust: none; color: Canvas; }
  .k.hl { forced-color-adjust: none; background: Mark; color: MarkText; }
  .k.cur { outline-color: CanvasText; }
  .paper-body .fig-bar { forced-color-adjust: none; background: CanvasText; }
  .paper-body .fig-bar span { forced-color-adjust: none; color: Canvas; }
  .paper-body .fig-bar.loading, .paper-body .fig-bar.failed { background: Canvas; border-color: CanvasText; }
  .paper-body .fig-bar.loading span { color: CanvasText; }
  /* a figure keeps its white plate, as in the paper: forced to the page's
     colour, a dark theme's black, a transparent figure drawn in black
     vanished (review of 09-10-2026) */
  .paper-body .fig-graphic img { forced-color-adjust: none; background: #fff; }
}

/* the side panel: guess box, score, guess list */
.panel {
  position: sticky;
  top: 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: calc(100vh - 2rem);
}

.guess-form { display: flex; gap: 0.4rem; }
/* what's typed, counted as the bars count it ("6", "5-5"), at the field's
   right end: drawn over the field, so nothing moves. retractle.js shortens
   a count too wide for its room; what still overflows is clipped from the
   start (flex-end), never the end, the word being typed */
.guess-field { flex: 1; min-width: 0; display: flex; position: relative; }
.guess-length {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: 50%;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--dim);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.guess-form input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.guess-form button, .result button {
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #0b0e1a;
  font-weight: 600;
  cursor: pointer;
}
.guess-form button:disabled { opacity: 0.4; cursor: default; }

.message { min-height: 1.3em; font-size: 0.92rem; }
/* a game that can't be saved for lack of room, said plainly */
.storage-note { font-size: 0.88rem; border-left: 3px solid var(--warn); padding-left: 0.5rem; }
/* text for screen readers only; no negative margin, which can make
   VoiceOver on macOS read it out of order (GOV.UK Frontend dropped it) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.score { color: var(--dim); font-size: 0.88rem; }

.guesses-box { min-height: 0; overflow: auto; }
.guesses-box summary { cursor: pointer; color: var(--dim); font-size: 0.9rem; }
.guesses { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 0.3rem; }
.guesses th { text-align: left; color: var(--dim); font-weight: normal; font-size: 0.8rem; }
.guesses td, .guesses th { padding: 0.15rem 0.35rem; }
.guesses td:last-child, .guesses th:last-child { text-align: right; }
.guesses tbody tr { cursor: pointer; }
.guesses tbody tr:hover { background: #ffffff10; }
.guesses tr.miss td { color: var(--dim); }
.guess-word {
  background: none;
  border: none;
  padding: 0.1rem 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guess-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the selected guess's row: after the hover, at its specificity, so the
   pointer resting on it (to pick it again) and a phone's tap, which keeps
   :hover, leave its colour (pre-push review of 14-10-2026, C1) */
.guesses tbody tr.sel { background: #ffe46b30; }
/* in forced colours its background would be the page's: the row in the
   system's mark colours, as the guess's places (review of 14-10-2026, C4) */
@media (forced-colors: active) {
  .guesses tbody tr.sel { forced-color-adjust: none; background: Mark; color: MarkText; }
  .guesses tbody tr.sel td { color: MarkText; } /* a miss's dim text too */
  /* its button's focus ring, no longer forced either (re-check of 14-10-2026, R1) */
  .guesses tbody tr.sel .guess-word:focus-visible { outline-color: MarkText; }
}

.give-up { align-self: flex-start; font-size: 0.85rem; color: var(--dim); }

.result {
  border: 1px solid var(--good);
  border-radius: 6px;
  padding: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.result-head { font-weight: 700; margin-bottom: 0.3rem; }
.result-time { margin-bottom: 0.3rem; }
.result .cite { margin-bottom: 0.2rem; }
.result .rights { color: var(--dim); font-size: 0.85rem; margin-bottom: 0.5rem; }
.result-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.result .more-games { color: var(--dim); font-size: 0.85rem; margin-top: 0.6rem; }

/* phones: one column, the panel docked at the bottom of the screen */
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0.5rem 0.5rem 0; gap: 0; }
  .paper { padding: 2.6rem 1rem 1.5rem; font-size: 1rem; }
  .paper-title { font-size: 1.08rem; margin: 0.4rem -1rem 1rem; padding: 0.35rem 1rem; }
  .top .hub-mark { position: static; display: flex; width: fit-content; margin-bottom: 0.2rem; }
  .panel {
    position: sticky;
    top: auto;
    bottom: 0;
    z-index: 4; /* above the paper's sticky title on short screens */
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 0.7rem;
    gap: 0.35rem;
    max-height: 45vh;
    box-shadow: 0 -6px 20px #0009;
  }
  .guesses-box { max-height: 26vh; }
  /* the feedback above the input: an on-screen keyboard covers what's below */
  .message { order: -1; }
  .storage-note { order: -2; }
  /* tap targets of at least about 24 px */
  .link-button, .help summary, .guesses-box summary { padding: 0.4rem 0; }
  .news .news-part, .news .news-entry { margin-top: 0.1rem; margin-bottom: 0.1rem; }
  .puzzle-line .link-button { padding: 0.4rem 0.3rem; }
}