/* progress.css — #/progress/<tab>: the reader's own progress (DESIGN §15).
 *
 * Built on the record's pieces in settings.css (.set-tiles, .set-table,
 * .set-pair, .set-block, .set-smallempty, .set-tabs, .gl-*), which are global;
 * everything here is .pg-*. Each tab sets --accent on .progress (overview
 * navy, time blue, craft orange, collection green, cuttings yellow, ledger
 * ink), and the kickers, section squares, bars and dots below read it.
 *
 * Tokens only: every colour is a var(), so both editions come for free. The
 * two textures that let a chart speak without colour (§15):
 *   hatched    estimated time, aided solves:  --pg-hatch
 *   halftone   helped solves:                 --pg-dots
 * Breakpoints: phone < 700, tablet 700–1099, desktop ≥ 1100, wide ≥ 1300 / 1500.
 */

.progress, .stand-week {
  --pg-hatch: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px);
  --pg-dots: radial-gradient(currentColor 30%, transparent 32%) 0 0 / 5px 5px;
}
.progress { min-width: 0; }
.pg-panel { min-width: 0; }

/* ================================================================ band */
.pg-band { min-height: clamp(170px, 12.5vw, 250px); }
/* The kicker at full strength: white on the evening navy is 4.8:1, faded 4.4. */
.pg-band .band-kicker { opacity: 1; }
.pg-band .band-title { font-size: clamp(36px, 4.3vw, 82px); }
/* The Overview's headline is a sentence written from the week, so it is set a
   size down and kept to a measure that still reads as a headline. */
.pg-band-lead .band-title { font-size: clamp(32px, 3.5vw, 68px); max-width: 22ch; }
.pg-band .band-plate { width: clamp(180px, 16vw, 320px); }
.pg-band .band-extra { gap: 16px 24px; }
/* The count badge sits up on the button's corner, clear of its label (a
   four-figure count is wider than the corner it used to cover). */
.pg-band .band-extra .btn { padding-right: 36px; }
.pg-band .btn-badge { top: -14px; right: -14px; }

/* ================================================================ tabs */
@supports (color: color(from red srgb-linear r g b)) {
  /* The tab's icon disc takes its label colour from the tab's own tone, so the
     yellow (Cuttings) and ink (Ledger) tabs keep a legible glyph. */
  .pg-tab .set-tab-ico { color: color(from var(--tone) var(--on-of)); }
}
.pg-tab[aria-current="page"] .set-tab-ico { background: var(--card); color: var(--ink); }

/* =========================================================== furniture */
/* The first block under the tabs starts as close to them on every tab as on
   the Overview (whose lead row has no top margin). A leading pair is pulled
   up by a block's margin instead, so its second block keeps its own margin
   when the pair stacks (settings.css: .set-block). */
.pg-panel > div > .set-block:first-child { margin-top: 0; }
.pg-panel > div > .set-pair:first-child { margin-top: calc(-1 * clamp(40px, 3.6vw, 64px)); }
/* A more-link that wraps (Oswald, set tight) keeps its lines apart. */
.progress .more-link { line-height: 1.35; }
.pg-fig { margin: 0; min-width: 0; }
.pg-cap { margin: 12px 0 0; font: italic 15.5px/1.45 var(--f-body); color: var(--muted); max-width: 80ch; }
.pg-cap-line { display: inline; }
.pg-headline { margin: 16px 0 10px; font: 800 clamp(20px, 1.55vw, 27px)/1.2 var(--f-head); text-wrap: balance; }
.pg-chart { min-width: 0; }
.pg-chart-host { min-width: 0; width: 100%; }

/* "See the figures": the chart's numbers as a table, folded under it. */
.pg-figs { margin-top: 12px; border-top: 1px solid var(--hair); }
.pg-figs > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 4px; cursor: pointer;
  font: 700 12px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.pg-figs > summary::-webkit-details-marker { display: none; }
.pg-figs > summary .icon { width: 16px; height: 16px; transition: transform .15s; }
.pg-figs[open] > summary .icon { transform: rotate(180deg); }
.pg-figs > summary:hover { color: var(--ink); }
.pg-figs .table-wrap { max-height: 420px; overflow: auto; margin-top: 6px; overscroll-behavior: contain; }
.pg-figs-table { font-size: 15px; }
.pg-figs-table thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.pg-figs-table tbody th {
  font: 500 15px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink);
  white-space: nowrap; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--hair);
}
.pg-figs-table td { padding-top: 7px; padding-bottom: 7px; }
.pg-figs-foot { margin: 8px 0 0; font: italic 14.5px/1.4 var(--f-body); color: var(--muted); }

/* Keys under charts. */
.pg-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: italic 14.5px/1.3 var(--f-body); color: var(--ink-2); }
.pg-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pg-legend li > .pg-sw, .pg-legend li > .pg-shape { margin-right: -6px; }
.pg-key { display: inline-flex; align-items: center; gap: 6px; }
.pg-sw { display: inline-block; width: 16px; height: 14px; flex: none; border: 1.5px solid var(--btn-rim); }
.pg-sw-t { background: var(--accent); border-color: var(--btn-line); }
.pg-sw-e { color: var(--accent); background: var(--pg-hatch), color-mix(in srgb, var(--accent) 10%, var(--card)); border-color: var(--accent); }

/* A small table of facts: a label, a figure, a line beneath. */
.pg-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0 var(--gap); }
.pg-fact { min-width: 0; padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.pg-fact dt { margin: 0 0 6px; font: 600 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.pg-fact dd { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-fact-v {
  font: 900 clamp(28px, 2.2vw, 40px)/1.05 var(--f-head); font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink); overflow-wrap: anywhere;
}
.pg-fact-v a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.pg-fact-sub { font: italic 15px/1.4 var(--f-body); color: var(--muted); }
.pg-fact-sub a { color: var(--ink-2); }
.pg-figrow { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.pg-figrow .pg-fact { border-top: 0; border-left: 1px solid var(--hair); padding: 4px 0 6px 16px; }
.pg-figrow .pg-fact:first-child { border-left: 0; padding-left: 0; }
.pg-figrow .pg-fact-v { font-size: clamp(32px, 3.1vw, 60px); }

/* flex: none, or the seg (overflow: hidden) shrinks to nothing in a flex row. */
.pg-seg { flex: none; }
.pg-seg > button { min-height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.pg-seg-tiers { margin-top: 4px; }

/* Pairs of columns beyond the record's 7 / 5. */
.pg-pair-84 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.pg-pair-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pg-pair-66 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.set-pair.is-single { grid-template-columns: minmax(0, 1fr); }

/* ============================================================ OVERVIEW */
.pg-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--gap); align-items: stretch; }
.pg-lead.is-single { grid-template-columns: minmax(0, 1fr); }
.pg-lead > .set-block { margin-top: 0; }
.pg-lead > * + * { border-left: 1px solid var(--hair); padding-left: var(--gap); }

/* ---- Next up */
.pg-next {
  display: grid; grid-template-columns: clamp(96px, 9vw, 168px) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 30px); align-items: start;
  padding: clamp(16px, 1.6vw, 26px); background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--accent);
}
.pg-next-thumb { display: block; min-width: 0; }
.pg-next-plate { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--rule); background: var(--plate-bg); }
.pg-next-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-next-text { min-width: 0; }
.pg-next-h { margin: 2px 0 10px; font: 900 clamp(26px, 2.4vw, 46px)/1.04 var(--f-head); letter-spacing: -.01em; text-wrap: balance; }
.pg-next-h a { color: inherit; text-decoration: none; }
.pg-next-h a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pg-next-meta { margin: 0 0 14px; font: italic 17px/1.45 var(--f-body); color: var(--ink-2); }
.pg-next .bar { margin: -4px 0 18px; max-width: 440px; }

/* ---- Within reach */
.pg-reach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pg-reach-item { display: grid; gap: 8px; }
.pg-reach-item a { font: 600 18px/1.35 var(--f-body); color: var(--ink); text-decoration: none; }
.pg-reach-item a:hover { text-decoration: underline; text-decoration-color: var(--bar); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pg-reach-item .bar { max-width: 560px; }

/* ---- Six figures: 3 × 2 until there is room for six across (settings.css). */
.pg-tiles { margin-top: clamp(32px, 3.2vw, 52px); }
.pg-tiles .more-link { align-self: flex-start; margin-top: 6px; }
.pg-tile-time .set-tile-v { font-size: clamp(38px, 3.2vw, 64px); }

/* ---- The empty Overview's list */
.pg-fills .set-empty-list { border-left: 0; padding-left: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px var(--gap); }

/* ---- A guest's page: the band, the ways in, and what the page would keep. */
.pg-guest-ask { margin: clamp(28px, 3.2vw, 52px) 0 clamp(8px, 1.4vw, 20px); }
.pg-guest-ask .signin-panel { max-width: none; }
.pg-guest-what .pg-fills { margin-top: clamp(28px, 3vw, 48px); }

/* ---- P5 The almanac: a square a day, a navy dot sized by the minutes. */
.pg-alm-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px clamp(22px, 2.6vw, 44px); }
.pg-alm-host { flex: none; max-width: 100%; }
.pg-alm-side { flex: 1 1 190px; min-width: 0; }
.pg-alm-chart { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; row-gap: 5px; }
.pg-alm-corner { grid-area: 1 / 1; }
.pg-alm-months {
  grid-area: 1 / 2; display: grid; grid-template-columns: repeat(var(--weeks), var(--cell)); column-gap: 3px; height: 12px;
  font: 600 10.5px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pg-alm-months span { white-space: nowrap; }
.pg-alm-wd { grid-area: 2 / 1; display: grid; grid-template-rows: repeat(7, var(--cell)); row-gap: 3px; align-items: center; font: 500 10px/1 var(--f-label); letter-spacing: .06em; color: var(--muted); }
.pg-alm-grid { grid-area: 2 / 2; display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-columns: var(--cell); grid-auto-flow: column; gap: 3px; border-radius: 2px; }
.pg-alm-grid:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 4px; }
.pg-day {
  --alm: var(--c-navy);
  position: relative; display: block; width: var(--cell, 15px); height: var(--cell, 15px); flex: none;
  background: var(--paper-2); border: 1px solid var(--hair);
}
.pg-day::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--dot, 0px); height: var(--dot, 0px);
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--alm);
}
.pg-day[data-l="1"] { --dot: 34%; }
.pg-day[data-l="2"] { --dot: 56%; }
.pg-day[data-l="3"] { --dot: 78%; }
.pg-day[data-l="4"] { --dot: 100%; }
/* Mostly estimated: a hatched ring in place of the dot. */
.pg-day.is-est::before {
  width: max(var(--dot, 0px), 60%); height: max(var(--dot, 0px), 60%);
  color: var(--alm); background: var(--pg-hatch); border: 1.5px solid var(--alm);
}
/* A solve that day: an ink tick along the bottom. */
.pg-day.has-solve::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px; background: var(--ink); }
.pg-day.is-today { border-color: var(--ink-2); }
.pg-day.is-cur { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }
.pg-day.is-future { visibility: hidden; }
.pg-alm-grid .pg-day[data-k] { cursor: pointer; }
.pg-day-key { --cell: 15px; display: inline-block; }
.pg-alm-read {
  margin: 0 0 6px; padding: 4px 0 4px 12px; min-height: 2.9em; border-left: 4px solid var(--c-navy);
  font: 600 17px/1.4 var(--f-body); color: var(--ink);
}
.pg-alm-side .pg-legend { flex-direction: column; gap: 10px; }

/* ---- P6 Form: lettered chips, each with its own texture. */
.pg-form-strip { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.pg-chip {
  display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 7px;
  border: 2px solid var(--btn-line); font: 800 clamp(13px, 1.1vw, 17px)/1 var(--f-grid); color: var(--ink); text-decoration: none;
  box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim);
  transition: transform .08s ease, box-shadow .08s ease;
}
a.pg-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
.pg-chip-key { width: 24px; height: 24px; font-size: 12px; box-shadow: none; border-width: 1.5px; border-radius: 5px; }
.pg-r-C { background: var(--ok); color: var(--btn-ink-fg); }
.pg-r-H { color: var(--hl-cursor); background: var(--pg-dots), color-mix(in srgb, var(--hl) 55%, var(--card)); }
.pg-r-A { color: var(--rev); background: var(--pg-hatch), var(--rev-bg); border-color: var(--rev); }
.pg-r-R { background: var(--card); color: var(--ink-2); border: 2px dashed var(--ink-2); box-shadow: none; }
/* On the textures the letter sits on a small plate of its own, so the dots
   and the hatching never fight it. */
.pg-r-H .pg-chip-l, .pg-r-A .pg-chip-l { padding: 1px 3px; border-radius: 3px; background: var(--card); color: var(--ink); }
.pg-form-line { margin: 0 0 4px; font: 800 clamp(20px, 1.5vw, 26px)/1.2 var(--f-head); }
.pg-form-run { margin: 0; font: italic 16.5px/1.4 var(--f-body); color: var(--ink-2); }
.pg-form-key { gap: 8px 16px; }
.pg-form-key li { gap: 7px; }

/* ---- P7 The road: four desks on a line. */
.pg-road { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pg-road::before { content: ""; position: absolute; left: 19px; right: 0; top: 17px; height: 4px; background: var(--rule); }
.pg-station { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-st-mark {
  position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--btn-ink-fg); border: 2px solid var(--btn-line); font: 800 17px/1 var(--f-grid);
  box-shadow: 0 0 0 5px var(--paper);
}
.pg-st-mark .icon { width: 20px; height: 20px; stroke-width: 3; }
.pg-st-head {
  display: grid; grid-template-columns: clamp(70px, 6vw, 112px) minmax(0, 1fr); gap: 12px 14px; align-items: center;
  padding: 14px 14px 0; background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--accent); border-bottom: 0;
}
.pg-st-more { display: flex; flex-direction: column; gap: 10px; margin-top: -14px; padding: 14px; background: var(--card); border: 1px solid var(--rule); border-top: 0; flex: 1; }
.pg-st-plate { aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--rule); background: var(--plate-bg); }
.pg-st-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-st-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-st-name h3 { font: 900 clamp(22px, 1.75vw, 32px)/1.02 var(--f-head); }
.pg-st-name h3 a { color: inherit; text-decoration: none; }
.pg-st-name h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.pg-st-size { font: 600 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pg-st-count { display: none; font: 700 14px/1.2 var(--f-grid); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-st-chip { grid-column: 1 / -1; justify-self: start; background: var(--accent); color: var(--btn-ink-fg); border-color: var(--btn-line); }
/* From the tablet up the chip rides on the road beside the station's number,
   so "You are here" / "Start here" does not push that station's card below
   the other three. */
@media (min-width: 700px) {
  .pg-st-chip { position: absolute; z-index: 1; top: 7px; left: 50px; margin: 0; box-shadow: 0 0 0 4px var(--paper); }
}
.pg-st-solved { margin: 0; font: 16.5px/1.35 var(--f-body); color: var(--ink-2); }
.pg-st-solved b { font: 900 24px/1 var(--f-head); color: var(--ink); }
.pg-st-times { margin: 0; font: 600 14px/1.35 var(--f-grid); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-st-next { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 16px/1.3 var(--f-body); color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.pg-st-next .icon { width: 15px; height: 15px; flex: none; }
.pg-st-next.is-done { font-style: italic; color: var(--muted); }
.pg-station.is-done .pg-st-mark { background: var(--ok); }
.pg-ready {
  display: grid; gap: 10px; justify-items: start; margin-top: 4px; padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-left: 5px solid var(--accent);
}
.pg-ready p { margin: 0; font: 600 16.5px/1.4 var(--f-body); color: var(--ink); }
.pg-road-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.pg-road-shared { margin: 0; font: italic 16px/1.4 var(--f-body); color: var(--ink-2); }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-st-mark, .pg-st-chip { color: color(from var(--accent) var(--on-of)); }
  .pg-station.is-done .pg-st-mark { color: color(from var(--ok) var(--on-of)); }
  .pg-r-C { color: color(from var(--ok) var(--on-of)); }
}

/* ---- P8 Notices: stamped rosettes. */
.pg-ros-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.pg-ros { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; }
.pg-ros-seal {
  width: clamp(66px, 5.4vw, 96px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--tone); color: var(--btn-ink-fg); border: 2px solid var(--btn-line);
  outline: 1.5px dashed currentColor; outline-offset: -8px;
  box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); transform: rotate(-7deg);
}
.pg-ros-seal .icon { width: 40%; height: 40%; }
.pg-ros-label { font: 700 12.5px/1.25 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pg-ros-date { font: italic 14.5px/1.2 var(--f-body); color: var(--muted); }
.pg-ros.is-todo .pg-ros-seal { background: transparent; color: var(--muted); border: 2px dashed var(--hair); outline: 0; box-shadow: none; }
.pg-ros.is-todo .pg-ros-label { color: var(--muted); }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-ros:not(.is-todo) .pg-ros-seal { color: color(from var(--tone) var(--on-of)); }
}

.pg-more { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: clamp(36px, 3.4vw, 56px); padding-top: 16px; border-top: 4px solid var(--rule); }

/* ================================================================ TIME */
/* ---- P9 Daily / weekly bars: tracked solid, estimated hatched. */
.pg-chart-host { margin-top: 18px; }
/* The left margin holds the widest tick, "1h 30m". */
.pg-plot { position: relative; height: clamp(170px, 15vw, 250px); margin: 0 0 30px 48px; border-bottom: 1.5px solid var(--rule); }
.pg-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--hair); }
.pg-gridlab {
  position: absolute; right: calc(100% + 8px); top: -7px; white-space: nowrap;
  font: 600 11px/1 var(--f-label); letter-spacing: .06em; color: var(--muted);
}
.pg-cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: clamp(1px, .3vw, 4px); }
.pg-cols.is-dense { gap: 1px; }
.pg-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pg-bar { height: var(--h); display: flex; flex-direction: column; min-height: 0; }
.pg-bseg { flex-basis: 0; min-height: 0; }
.pg-bseg-t { background: var(--accent); }
.pg-bseg-e { color: var(--accent); background: var(--pg-hatch), color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.pg-col.is-now .pg-bar { box-shadow: 0 0 0 1.5px var(--ink); }
.pg-xlab {
  position: absolute; top: calc(100% + 7px); left: 0; white-space: nowrap; pointer-events: none;
  font: 600 10.5px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Near the right-hand end a label ends at its column, inside the chart. */
.pg-col .pg-xlab.is-end { left: auto; right: 0; }

/* ---- P10 When you solve: two small bar charts. */
.pg-when-charts { display: grid; grid-template-columns: minmax(0, 24fr) minmax(0, 10fr); gap: 0 clamp(18px, 2vw, 30px); }
.pg-when-part { min-width: 0; }
.pg-mini-k { margin: 0 0 8px; font: 600 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.pg-mini { position: relative; height: 130px; display: flex; gap: 2px; border-bottom: 1.5px solid var(--rule); margin-bottom: 24px; }
.pg-mini-days { gap: clamp(3px, .5vw, 8px); }
.pg-mini-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pg-mini .pg-xlab { left: 50%; transform: translateX(-50%); }
.pg-mini-bar { height: var(--h); background: var(--accent); }
.pg-when .pg-cap { color: var(--ink-2); font-size: 16.5px; }

/* ---- P11 / P12 */
.pg-sit .set-standfirst { margin-top: 0; }
.pg-sit .pg-facts, .pg-records .pg-facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pg-sit .pg-fact-v { font-size: clamp(26px, 1.9vw, 36px); }
.pg-facts-records .pg-fact-v { color: var(--accent); }
@supports (color: color-mix(in srgb, red, blue)) {
  .pg-facts-records .pg-fact-v { color: color-mix(in srgb, var(--accent), var(--tx-mix) var(--tx-amt)); }
}

/* =============================================================== CRAFT */
.pg-best { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pg-best > b { font: 700 17px/1.1 var(--f-grid); font-variant-numeric: tabular-nums; }
.pg-best-sub { font: italic 14px/1.3 var(--f-body); color: var(--muted); }
.pg-best-sub a { color: var(--ink-2); }
.pg-best-chip .icon { width: 12px; height: 12px; }
.pg-t-bests .set-rowhead { min-width: 9em; }

/* ---- P14 / P21 SVG charts */
.pg-svg { display: block; max-width: 100%; height: auto; color: var(--accent); overflow: visible; }
.pg-gl { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 3; }
.pg-gl-0 { stroke: var(--rule); stroke-dasharray: none; stroke-width: 1.5; }
.pg-axis-t { fill: var(--muted); font: 600 11px var(--f-label); letter-spacing: .06em; }
.pg-tick { stroke: var(--muted); stroke-width: 1; }
.pg-step { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pg-step-accent { stroke: var(--accent); stroke-width: 2.5; }
.pg-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.pg-dot-c { fill: var(--accent); stroke: var(--btn-line); stroke-width: 1.2; }
.pg-dot-h { fill: var(--card); stroke: var(--accent); stroke-width: 2.2; }
.pg-dot-a { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.pg-shape { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; }
.pg-shape-c { border-radius: 50%; background: var(--accent); border: 1.2px solid var(--btn-line); }
.pg-shape-h { border-radius: 50%; background: var(--card); border: 2.2px solid var(--accent); }
.pg-shape-a { color: var(--accent); font: 800 19px/1 var(--f-grid); }
.pg-shape-step { width: 20px; height: 0; border-top: 2px solid var(--ink); }

/* ---- P15 Stacked bars: clean solid, helped halftone, aided hatched,
   revealed outline — with the count printed on each. */
.pg-stacks { display: grid; gap: 7px; }
.pg-stackrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 36px; gap: 12px; align-items: center; }
.pg-stack-k { font: 600 12px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pg-stack-n { font: 700 14px/1 var(--f-grid); text-align: right; font-variant-numeric: tabular-nums; }
.pg-stack-track { min-width: 0; }
.pg-stack { display: flex; height: 28px; min-width: 26px; border: 1.5px solid var(--btn-rim); background: var(--card); }
.pg-stack-seg { flex-basis: 0; min-width: 24px; display: grid; place-items: center; overflow: hidden; }
.pg-stack-seg + .pg-stack-seg { border-left: 1.5px solid var(--btn-rim); }
.pg-stack-seg b, .pg-ladder-bar b {
  font: 700 12px/1 var(--f-grid); padding: 2px 4px; border-radius: 4px; background: var(--card); color: var(--ink);
}
.pg-s-C { background: var(--ok); }
.pg-s-C b { background: transparent; color: var(--btn-ink-fg); }
.pg-s-H { color: var(--hl-cursor); background: var(--pg-dots), color-mix(in srgb, var(--hl) 55%, var(--card)); }
.pg-s-A { color: var(--rev); background: var(--pg-hatch), var(--rev-bg); }
.pg-s-R { background: var(--card); }
.pg-sw.pg-s-R { border-style: dashed; }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-s-C b { color: color(from var(--ok) var(--on-of)); }
}

/* ---- The help ledger */
.pg-facts-help { grid-template-columns: minmax(0, 1fr); }
.pg-facts-help .pg-fact { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; align-content: start; }
.pg-facts-help .pg-fact dt { margin: 0; }
.pg-facts-help .pg-fact dd { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pg-facts-help .pg-fact-v { font-size: clamp(26px, 2vw, 36px); }
.pg-ladder { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pg-ladder-bar { display: flex; height: 24px; max-width: 340px; border: 1.5px solid var(--btn-rim); }
.pg-ladder-bar > * { min-width: 26px; }

/* ---- P16 */
.pg-kind-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pg-few-tag { font: italic 13.5px/1 var(--f-body); color: var(--muted); }
.pg-t-kind tr.pg-few > * { color: var(--ink-2); }
.pg-pending { margin: 14px 0 0; padding: 12px 14px; border: 1.5px dashed var(--hair); font: 16px/1.45 var(--f-body); color: var(--ink-2); }

/* ---- P17 The twelve devices, as a printer's type case. */
.pg-case {
  list-style: none; margin: 0; padding: clamp(8px, .8vw, 12px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .6vw, 10px);
  background: color-mix(in srgb, var(--c-orange) 14%, var(--paper-3)); border: 2px solid var(--btn-line);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ink) 10%, transparent), 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim);
}
.pg-sort {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; min-height: 128px; padding: 12px 14px 12px;
  background: color-mix(in srgb, var(--card) 55%, transparent); border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); color: var(--muted);
}
.pg-sort.is-met { background: var(--card); border: 1.5px solid var(--btn-line); color: var(--ink); box-shadow: inset 0 -5px 0 var(--accent); }
.pg-sort-n { font: 700 12px/1 var(--f-grid); letter-spacing: .08em; color: var(--muted); }
.pg-sort-name { font: 800 clamp(17px, 1.3vw, 21px)/1.15 var(--f-head); }
.pg-sort-line { font: 600 14.5px/1.3 var(--f-body); }
.pg-sort-sub { font: italic 14px/1.35 var(--f-body); color: var(--muted); }
.pg-sort-link {
  margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font: 600 11.5px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.pg-sort-link .icon { width: 13px; height: 13px; }
.pg-sort-link:hover { color: var(--ink); }

/* ========================================================== COLLECTION */
/* ---- P18 The whole paper: a square a puzzle. Shape carries the meaning
   (outline, filling, ✓, ✓ with a notch, ×); colour only adds to it. */
.pg-mosaic { display: grid; gap: 14px; }
.pg-mgroup { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; align-items: start; min-width: 0; }
.pg-mgroup-k { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 12.5px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.pg-mgroup-k a { color: var(--ink); text-decoration: none; }
.pg-mgroup-k a:hover { text-decoration: underline; text-decoration-color: var(--sw); }
.pg-mgroup-k .set-swatch { width: 12px; height: 12px; }
.pg-mgroup-n { font: italic 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.pg-msq { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pg-mthemed { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.pg-mthemed-k { margin: 0; }
.pg-msubjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px clamp(16px, 2vw, 32px); }
.pg-mgroup.is-subject { grid-template-columns: minmax(0, 1fr) auto; }
.pg-mgroup.is-subject .pg-mgroup-k { letter-spacing: .06em; font-size: 12px; }
.pg-sq {
  --sq: 26px;
  position: relative; flex: none; width: var(--sq); height: var(--sq); display: grid; place-items: center; overflow: hidden;
  background: var(--card); border: 1.5px solid var(--ink-2); color: var(--ink); text-decoration: none;
}
.pg-sq:hover { border-color: var(--ink); background: var(--paper-2); }
.pg-sq.is-started::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%);
  background: color-mix(in srgb, var(--pc) 50%, var(--card));
}
.pg-sq.is-solved { background: var(--pc); border-color: var(--btn-line); color: var(--btn-ink-fg); }
.pg-sq.is-clean::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--ink) transparent transparent; }
.pg-sq.is-revealed { color: var(--rev); background: var(--pg-hatch), var(--rev-bg); border-color: var(--rev); }
.pg-sq-g { position: relative; z-index: 1; font: 800 14px/1 var(--f-grid); }
.pg-sq.is-revealed .pg-sq-g { padding: 0 2px; background: var(--rev-bg); }
.pg-sq:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; z-index: 2; }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-sq.is-solved { color: color(from var(--pc) var(--on-of)); }
}
.pg-sq-key { --sq: 20px; display: inline-grid; }
.pg-sq-key .pg-sq-g { font-size: 12px; }

/* ---- P19 Subjects shelf */
.pg-shelf-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; border: 1.5px solid var(--btn-rim); background: var(--card); font: 600 13px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.pg-shelf-sum::-webkit-details-marker { display: none; }
.pg-shelf-sum .icon { width: 18px; height: 18px; transition: transform .15s; }
.pg-shelf-det[open] .pg-shelf-sum .icon { transform: rotate(180deg); }
.pg-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 10px; }
.pg-subj {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; height: 100%;
  padding: 8px 10px 8px 8px; background: var(--card); border: 1px solid var(--hair); border-left: 5px solid var(--sw);
  color: var(--ink); text-decoration: none;
}
.pg-subj:hover { border-color: var(--btn-line); border-left-color: var(--sw); }
.pg-subj-art { aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--rule); background: var(--plate-bg); }
.pg-subj-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-subj-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-subj-text b { font: 800 15.5px/1.15 var(--f-head); hyphens: auto; }
.pg-subj-n { font: italic 13.5px/1.2 var(--f-body); color: var(--muted); }
.pg-subj .bar { margin-top: 2px; }
.pg-subj-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pg-subj-done { height: 20px; padding: 0 7px; font-size: 10px; font-style: normal; }
.pg-subj-done .icon { width: 12px; height: 12px; }
.pg-subj.is-done { border-color: var(--ok); border-left-color: var(--sw); }

/* ---- P20 The Onesies desk */
.pg-ocbars { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.pg-ocbar { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pg-ocbar-k { font: 600 12.5px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pg-ocbar .bar { height: 14px; }
.pg-ocbar-n { font: 500 14px/1 var(--f-grid); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-ocbar-n b { color: var(--ink); font-weight: 800; }
.pg-ocline { margin: 0 0 6px; font: 17px/1.45 var(--f-body); color: var(--ink); }
.pg-ocline-sub { font-style: italic; color: var(--ink-2); font-size: 16px; }
.pg-nations { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pg-nations-k { margin: 0 0 10px; font: 600 16.5px/1.4 var(--f-body); }
.pg-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-flags img { display: block; width: 30px; height: 22px; object-fit: cover; border: 1px solid var(--hair); background: var(--paper-2); }

/* ---- P21 Words */
.pg-words-line { margin: 0 0 6px; font: 600 17px/1.45 var(--f-body); color: var(--ink); }
.pg-az { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.pg-az li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; min-width: 0; background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1.5px solid var(--btn-rim); }
.pg-az b { font: 900 17px/1 var(--f-head); }
.pg-az span { font: 600 11px/1 var(--f-grid); color: var(--ink-2); min-height: 11px; font-variant-numeric: tabular-nums; }
.pg-az li.is-zero { background: transparent; border-style: dashed; border-color: var(--hair); color: var(--muted); }
.pg-pos { margin-top: 18px; }
.pg-pos-bar { display: flex; height: 26px; border: 1.5px solid var(--btn-rim); background: var(--card); }
.pg-pos-seg { flex-basis: 0; min-width: 4px; }
.pg-pos-seg + .pg-pos-seg { border-left: 1.5px solid var(--btn-rim); }
.pg-pos-noun { background: var(--accent); }
.pg-pos-verb { color: var(--accent); background: var(--pg-dots), color-mix(in srgb, var(--accent) 16%, var(--card)); }
.pg-pos-adjective { color: var(--accent); background: var(--pg-hatch), var(--card); }
.pg-pos-adverb { color: var(--accent); background: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 5px), var(--pg-hatch), var(--card); }
.pg-pos-other { background: var(--card); }
.pg-longest { margin: 16px 0 0; font: 16.5px/1.45 var(--f-body); color: var(--ink-2); }
.pg-longest a { font: 800 17px/1 var(--f-head); letter-spacing: .03em; color: var(--ink); text-decoration-color: var(--accent); }

/* ---- P8b Every notice */
.pg-archive-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
/* "All notices →" lands on this block: its heading clears the sticky nav
   (50 px; 46 on a phone) with room to spare. */
#pg-archive { scroll-margin-top: 72px; }
.pg-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.pg-timeline::before { content: ""; position: absolute; left: 16px; top: 12px; bottom: 12px; width: 2px; background: var(--hair); }
.pg-timeline li { position: relative; display: grid; grid-template-columns: 34px 6.4em minmax(0, 1fr); gap: 14px; align-items: center; padding: 5px 0; }
.pg-tl-dot {
  position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tone); color: var(--btn-ink-fg); border: 2px solid var(--btn-line);
}
.pg-tl-dot .icon { width: 16px; height: 16px; }
.pg-tl-date { font: 600 13.5px/1.2 var(--f-grid); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-tl-label { font: 600 17px/1.3 var(--f-body); }
.pg-tl-joined .pg-tl-dot { background: var(--paper); border: 2px dashed var(--ink-2); }
.pg-tl-joined .pg-tl-label { font-style: italic; font-weight: 500; color: var(--ink-2); }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-tl-dot { color: color(from var(--tone) var(--on-of)); }
}
.pg-todo { padding: 16px 18px; border: 1.5px dashed var(--hair); background: color-mix(in srgb, var(--card) 60%, transparent); }
.pg-todo-k { margin: 0 0 8px; font: 700 12.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pg-todo ul { list-style: none; margin: 0; padding: 0; columns: 220px 2; column-gap: var(--gap); }
.pg-todo li { break-inside: avoid; padding: 6px 0; border-bottom: 1px dotted var(--hair); font: italic 16px/1.35 var(--f-body); color: var(--muted); }

/* ---- P22 */
.pg-facts-desk .pg-fact-v { font-size: clamp(26px, 2vw, 36px); }

/* ============================================================ CUTTINGS */
/* The glossary’s letter blocks wear the tab’s yellow, so their letter
   takes the ink that reads on it. */
.pg-tab-cuttings .gl-letter { color: var(--c-ink); }
@supports (color: color(from red srgb-linear r g b)) {
  .pg-tab-cuttings .gl-letter { color: color(from var(--accent) var(--on-of)); }
}
.pg-cut-line { margin: 0; }
.pg-cuttings .set-glossary { margin-top: clamp(22px, 2.4vw, 36px); }
/* A link to a word the reader hasn't collected says so, above the list. */
.gl-miss { margin: -4px 0 16px; font: italic 16.5px/1.4 var(--f-body); color: var(--ink-2); }
.gl-miss[hidden] { display: none; }
.gl-more { margin-top: 22px; }

/* ============================================================== LEDGER */
.pg-led-controls { display: grid; gap: 14px; margin-bottom: 18px; }
.pg-led-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pg-led-month { width: auto; min-width: 190px; max-width: 100%; min-height: 42px; }
.pg-t-ledger tbody.pg-led-month { width: auto; }
.pg-t-ledger .pg-month > th {
  padding: 20px 0 8px; border-bottom: 2px solid var(--rule); white-space: normal;
  font: italic 15.5px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted);
}
.pg-t-ledger .pg-month > th b { font: 800 19px/1.2 var(--f-head); font-style: normal; color: var(--ink); }
.pg-t-ledger tbody:first-of-type .pg-month > th { padding-top: 8px; }
.pg-t-ledger tbody tr:hover > * { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.pg-t-ledger tbody tr.pg-month:hover > * { background: none; }
.pg-t-ledger .chip .icon { width: 13px; height: 13px; }
.pg-led-more { display: flex; justify-content: center; margin-top: 18px; }
.pg-chip-revealed { background: var(--card); border: 1.5px dashed var(--ink-2); color: var(--ink-2); }

/* ====================================================== FRONT PAGE ROW */
/* The "Your standing" box's week (home.js, from /api/progress?brief=1): seven
   Monday-to-Sunday bars, estimated time hatched. Kept here with the rest of
   the progress figures; this file is loaded on every page. */
.stand-week { display: block; margin: 12px 0 0; padding: 10px 12px 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; }
.stand-week:hover .stand-week-k { color: var(--ink); }
.stand-week:hover .stand-week-k b { text-decoration: underline; text-decoration-color: var(--c-navy); text-decoration-thickness: 2px; }
.stand-week-k { margin: 0 0 8px; font: italic 15px/1.35 var(--f-body); color: var(--ink-2); }
.stand-week-k b { font: 800 16px/1.2 var(--f-head); font-style: normal; color: var(--ink); }
.sw-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sw-day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
/* No box behind a day: an empty day is its baseline alone, so a new week does
   not look full. */
.sw-bar { position: relative; height: 46px; display: flex; flex-direction: column; justify-content: flex-end; background: transparent; border-bottom: 1.5px solid var(--rule); }
.sw-fill { display: flex; flex-direction: column; height: var(--h); min-height: 0; }
.sw-t { flex-basis: 0; background: var(--c-navy); }
.sw-e { flex-basis: 0; color: var(--c-navy); background: var(--pg-hatch), color-mix(in srgb, var(--c-navy) 10%, var(--card)); box-shadow: inset 0 0 0 1px var(--c-navy); }
.sw-lab { font: 600 10.5px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.sw-day.is-today .sw-lab { color: var(--ink); font-weight: 700; }
/* Today is marked by a heavier baseline, not a box: an outlined box read as
   a day already full. */
.sw-day.is-today .sw-bar { border-bottom: 3px solid var(--ink); }
.sw-day.is-future .sw-bar { background: transparent; border-bottom-style: dotted; }

/* ========================================================== responsive */
@media (max-width: 1499px) {
  .pg-pair-57 { grid-template-columns: minmax(0, 1fr); }
  .pg-pair-57 > * + * { border-left: 0; padding-left: 0; }
  /* The whole paper takes the width and the subjects shelve beneath it, five
     or so across: side by side, the one-column shelf ran far below the mosaic. */
  .pg-collection > .pg-pair-84 { grid-template-columns: minmax(0, 1fr); }
  .pg-collection > .pg-pair-84 > * + * { border-left: 0; padding-left: 0; }
}
@media (max-width: 1299px) {
  .pg-pair-66 { grid-template-columns: minmax(0, 1fr); }
  .pg-pair-66 > * + * { border-left: 0; padding-left: 0; }
}
/* Six notices fit across from 1100 px; below that, three by two. */
@media (max-width: 1099px) {
  .pg-ros-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 3 × 2 tiles from the tablet up to where six fit across. */
@media (min-width: 700px) and (max-width: 1299px) {
  .pg-tiles.set-tiles > .set-tile, .pg-tiles.set-tiles > .set-tile:nth-child(n+4) { grid-column: span 2; }
}
@media (max-width: 1099px) {
  .pg-lead { grid-template-columns: minmax(0, 1fr); }
  .pg-lead > * + * { border-left: 0; padding-left: 0; }
  .pg-lead > .set-block + .set-block { margin-top: clamp(32px, 4vw, 44px); }
  .pg-pair-84 { grid-template-columns: minmax(0, 1fr); }
  .pg-pair-84 > * + * { border-left: 0; padding-left: 0; }
  .pg-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-road::before { display: none; }
  .pg-archive-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) {
  .pg-shelf-sum { display: none; }
}
/* On a tablet the ledger’s eleven columns do not fit: each attempt folds into
   a card of two rows (the puzzle beside five figures, then five more), as the
   record’s tables fold on a phone (settings.css). */
@media (min-width: 700px) and (max-width: 1099px) {
  .pg-t-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-t-ledger, .pg-t-ledger tbody { display: block; }
  .pg-t-ledger tr { display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(5, minmax(0, 1fr)); gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: start; }
  .pg-t-ledger tbody th, .pg-t-ledger td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 !important; border: 0; text-align: left !important; min-width: 0; }
  .pg-t-ledger tbody th { grid-row: span 2; }
  .pg-t-ledger td::before { content: attr(data-label); font: 600 10.5px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pg-t-ledger tr.pg-month { display: block; padding: 0; border-bottom: 0; }
  .pg-t-ledger .pg-month > th { display: block; }
  .pg-t-ledger .set-checks { align-items: flex-start; }
}
/* The wordplay table keeps its columns on a tablet: its heads may wrap and the
   help-per-clue bar gives way to its figure, so it fits without a sideways scroll. */
@media (min-width: 700px) and (max-width: 1099px) {
  .pg-t-kind thead th { white-space: normal; vertical-align: bottom; }
  .pg-t-kind .set-col-bar { width: auto; min-width: 0; }
  .pg-t-kind .set-barcell .bar { display: none; }
  .pg-t-kind .set-rowhead { min-width: 0; }
  .pg-t-kind td, .pg-t-kind tbody th { padding-right: 10px; }
}
@media (max-width: 699px) {
  .pg-band .band-art { display: none; }
  .pg-band-lead .band-title { font-size: clamp(29px, 8.4vw, 40px); }
  .pg-band .band-extra { gap: 10px 16px; }
  /* The tab strip: one row that scrolls sideways, edges fading — the
     Settings rule (settings.css), which this page shares. */

  .pg-next { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .pg-next-meta { font-size: 16px; }
  .pg-next .btn-row .btn { flex: 1 1 auto; }
  .pg-reach-item:nth-child(n+3) { display: none; }
  .pg-reach-item a { font-size: 17px; }
  .pg-tile-time .set-tile-v { font-size: 34px; }

  .pg-facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 0 16px; }
  .pg-fact-v { font-size: 26px; }
  .pg-figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .pg-figrow .pg-fact { border-left: 0; padding: 10px 0 12px; border-top: 1px solid var(--hair); }
  .pg-figrow .pg-fact:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .pg-figrow .pg-fact-v { font-size: 34px; }
  .pg-plot { margin-left: 46px; }
  .pg-when-charts { grid-template-columns: minmax(0, 1fr); }
  .pg-facts-help .pg-fact { grid-template-columns: minmax(0, 1fr); }

  .pg-form-strip { gap: 4px; }
  .pg-chip { border-radius: 5px; border-width: 1.5px; box-shadow: none; }

  /* The road: stacked; the desk you are at open, the others one line each. */
  .pg-road { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pg-station { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; align-items: start; }
  .pg-st-mark { grid-row: 1 / span 2; margin-top: 4px; box-shadow: none; }
  .pg-st-head { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .pg-station.is-open .pg-st-head { border-bottom: 0; padding-bottom: 0; }
  .pg-st-plate { display: none; }
  .pg-st-name { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .pg-st-name h3 { font-size: 22px; }
  .pg-st-count { display: inline; margin-left: auto; }
  .pg-station:not(.is-open) .pg-st-more { display: none; }
  .pg-station.is-open .pg-st-count { display: none; }
  .pg-st-more { margin-top: 0; padding: 10px 12px 12px; grid-column: 2; }
  .pg-st-chip { grid-column: 1 / -1; }

  .pg-ros-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pg-ros:nth-child(n+4) { display: none; }
  .pg-ros-label { font-size: 11px; letter-spacing: .06em; }

  .pg-stackrow { grid-template-columns: 46px minmax(0, 1fr) 28px; gap: 8px; }
  .pg-case { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-sort { min-height: 0; padding: 9px 9px 10px; }
  .pg-sort-name { font-size: 15px; overflow-wrap: anywhere; }
  .pg-sort-line { font-size: 13px; }
  .pg-sort-sub { display: none; }
  .pg-sort-link { font-size: 10px; letter-spacing: .06em; }

  .pg-mgroup { grid-template-columns: minmax(0, 1fr); }
  .pg-mgroup.is-subject { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-mgroup.is-long .pg-msq { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
  .pg-mgroup.is-long .pg-sq { width: auto; height: auto; aspect-ratio: 1; border-width: 1px; }
  .pg-mgroup.is-long .pg-sq-g { font-size: 10px; }
  .pg-mgroup.is-long .pg-sq.is-clean::after { border-width: 0 6px 6px 0; }
  .pg-sq { --sq: 24px; }
  .pg-msubjects { grid-template-columns: minmax(0, 1fr); }
  .pg-shelf { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .pg-ocbar { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; }
  .pg-az { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .pg-timeline li { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
  .pg-tl-dot { grid-row: 1 / span 2; }
  .pg-tl-date { grid-column: 2; }
  .pg-tl-label { grid-column: 2; font-size: 16px; }
  .pg-todo ul { columns: 1; }

  /* Segmented controls run the width of the page, their buttons sharing it. */
  .pg-seg { display: flex; width: 100%; flex: 1 1 100%; }
  .pg-seg > button { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 11.5px; letter-spacing: .04em; }
  .set-sechead-right:has(> .pg-seg) { flex: 1 1 100%; }
  .pg-led-month { flex: 1 1 160px; }
  .pg-t-ledger .pg-month > th { display: block; padding: 16px 0 6px; }
  /* An attempt as a short card: the result beside the puzzle's name, then
     only the figures it has (no "0" hints, no "—" time). */
  .pg-t-ledger tr:not(.pg-month) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; }
  .pg-t-ledger tbody th.set-rowhead { grid-column: 1 / span 2; grid-row: 1; }
  .pg-t-ledger td.pg-led-result { grid-column: 3; grid-row: 1; align-items: flex-end; justify-content: flex-start; }
  .pg-t-ledger td.pg-led-result::before { display: none; }
  .pg-t-ledger td.is-empty { display: none; }
  .pg-alm-read { font-size: 16px; }
}

/* =============================================================== print */
@media print {
  .set-tabs, .pg-figs > summary, .pg-seg, .pg-shelf-sum { display: none !important; }
  .pg-figs:not([open]) { display: none; }
}