/* =========================================================================
   Gentle Wellness -- Activity & action page components
   =========================================================================
   Extends the design system in site.css. Consumes --gw-* tokens only and
   declares no colours of its own beyond the two category inks below, which
   are the brand's sand and mist hues taken to an accessible depth in the
   same way site.css derives forest from sage.

   Loaded only by the pages that need it (via @section Head), so the landing
   page stays as light as possible on 3G.
   ========================================================================= */

:root {
  /* Category inks. Verified against white and against their own washes.
       clay  #6B4A21 -> 8.00:1 on white, 7.05:1 on sand wash
       ocean #1F4E58 -> 9.17:1 on white, 7.92:1 on mist wash
     Both clear AAA for body text; used here mostly at heading sizes. */
  --gw-clay: #6B4A21;   /* cognitive / Wednesday */
  --gw-ocean: #1F4E58;  /* social    / Friday    */
}

/* -------------------------------------------------------------------------
   1. Activity page shell
   ---------------------------------------------------------------------- */
.activity {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--gw-space-5);
}

.activity__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-space-1);
  margin-bottom: var(--gw-space-2);
}

.activity__title {
  margin-bottom: var(--gw-space-3);
}

/* -------------------------------------------------------------------------
   2. Badges
   ---------------------------------------------------------------------- */
.gw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: var(--gw-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gw-ink);
  color: #FFFFFF;
}

.gw-badge--physical  { background: var(--gw-forest); }
.gw-badge--cognitive { background: var(--gw-clay); }
.gw-badge--social    { background: var(--gw-ocean); }

/* Secondary badge: the subcategory is supporting detail, so it sits quieter
   without dropping below AA. */
.gw-badge--soft {
  background: var(--gw-sand);
  color: var(--gw-ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. Metadata -- duration and difficulty are data, so they get labels
   ---------------------------------------------------------------------- */
.activity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-1) var(--gw-space-4);
  margin: 0 0 var(--gw-space-4);
  padding-bottom: var(--gw-space-3);
  border-bottom: 2px solid var(--gw-border);
}

.activity__meta > div {
  display: flex;
  align-items: baseline;
  gap: var(--gw-space-1);
}

.activity__meta dt {
  font-size: var(--gw-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gw-ink-muted);
}

.activity__meta dd {
  margin: 0;
  font-size: var(--gw-text-base);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   4. Callouts
   ---------------------------------------------------------------------- */
.gw-callout {
  padding: var(--gw-space-3);
  margin-block: var(--gw-space-4);
  border-left: 8px solid var(--gw-border-strong);
  border-radius: var(--gw-radius);
  background: var(--gw-surface);
}

.gw-callout > :last-child { margin-bottom: 0; }

.gw-callout__title {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-xl);
  font-weight: 700;
  margin: 0 0 var(--gw-space-1);
}

/* Safety is the one callout that must never be skimmed past, so it carries
   the warmest surface and the heaviest rule on the page. */
.gw-callout--safety {
  background: var(--gw-surface-sand);
  border-color: var(--gw-clay);
}
.gw-callout--safety .gw-callout__title { color: var(--gw-clay); }

.gw-callout--benefit {
  background: var(--gw-success-bg);
  border-color: var(--gw-success-ink);
}
.gw-callout--benefit .gw-callout__title { color: var(--gw-success-ink); }

.gw-callout--local {
  background: var(--gw-surface-mist);
  border-color: var(--gw-ocean);
}
.gw-callout--local .gw-callout__title { color: var(--gw-ocean); }

.gw-callout--kit {
  background: var(--gw-surface);
  border-color: var(--gw-border-strong);
}

.gw-callout ul {
  margin: 0;
  padding-left: 1.5rem;
}
.gw-callout li {
  margin-bottom: var(--gw-space-1);
  max-width: var(--gw-measure);
}
.gw-callout li:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   5. Summary blurb
   ---------------------------------------------------------------------- */
.activity__summary {
  font-size: var(--gw-text-lg);
  line-height: 1.6;
  padding-left: var(--gw-space-3);
  border-left: 8px solid var(--gw-sage);
  margin-block: var(--gw-space-4);
  max-width: var(--gw-measure);
}

/* -------------------------------------------------------------------------
   6. Instructions -- one step per row, numbered, big enough to follow while
      actually doing the movement and glancing back at the screen
   ---------------------------------------------------------------------- */
.gw-steps {
  counter-reset: gwstep;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gw-step {
  counter-increment: gwstep;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--gw-space-2);
  align-items: start;
  padding: var(--gw-space-2) 0;
  border-bottom: 1px solid var(--gw-border);
  font-size: var(--gw-text-base);
  line-height: 1.7;
  max-width: none;
}

.gw-step:last-child { border-bottom: 0; }

.gw-step::before {
  content: counter(gwstep);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gw-forest);
  color: #FFFFFF;
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-xl);
  font-weight: 700;
  line-height: 1;
}

.gw-steps--plain {
  white-space: pre-wrap;
  font-size: var(--gw-text-base);
  line-height: 1.7;
  padding: var(--gw-space-3);
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
}

/* -------------------------------------------------------------------------
   7. Media
   ---------------------------------------------------------------------- */
.gw-figure {
  margin: 0 0 var(--gw-space-4);
}

.gw-figure__caption {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-xl);
  font-weight: 700;
  color: var(--gw-forest);
  margin: 0 0 var(--gw-space-1);
}

.gw-figure img {
  width: 100%;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
}

/* aspect-ratio rather than the padding-bottom hack: no layout shift, and it
   costs nothing on a slow connection. */
.gw-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gw-ink);
  border-radius: var(--gw-radius);
  overflow: hidden;
}

.gw-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------------------------------------------------------------
   8. Disclosure -- native <details>. Works with JavaScript disabled, works
      on old Android browsers, and needs no framework.
   ---------------------------------------------------------------------- */
.gw-disclose {
  border: 2px solid var(--gw-border-strong);
  border-radius: var(--gw-radius);
  margin-bottom: var(--gw-space-2);
  background: var(--gw-surface);
}

.gw-disclose__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw-space-2);
  min-height: var(--gw-touch);
  padding: var(--gw-space-2) var(--gw-space-3);
  font-size: var(--gw-text-base);
  font-weight: 700;
  color: var(--gw-ink);
  cursor: pointer;
  list-style: none;
}

.gw-disclose__summary::-webkit-details-marker { display: none; }

.gw-disclose__summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gw-link);
}

.gw-disclose[open] > .gw-disclose__summary::after { content: "\2212"; }

.gw-disclose[open] > .gw-disclose__summary {
  background: var(--gw-success-bg);
  border-bottom: 2px solid var(--gw-border-strong);
}

.gw-disclose__summary:hover { background: var(--gw-success-bg); }

.gw-disclose__body { padding: var(--gw-space-3); }
.gw-disclose__body > :last-child { margin-bottom: 0; }

/* The solutions panel is a bigger promise than a modification, so it reads
   as a full-width action rather than a quiet row. */
.gw-disclose--solutions {
  border-color: var(--gw-link);
  border-width: 3px;
  margin-top: var(--gw-space-4);
}

.gw-disclose--solutions > .gw-disclose__summary {
  justify-content: center;
  gap: var(--gw-space-2);
  padding: var(--gw-space-3);
  font-size: var(--gw-text-lg);
  background: var(--gw-link);
  color: #FFFFFF;
}

.gw-disclose--solutions > .gw-disclose__summary::after { color: #FFFFFF; }

.gw-disclose--solutions[open] > .gw-disclose__summary {
  background: var(--gw-link-hover);
  border-bottom-color: var(--gw-link-hover);
}

.gw-disclose--solutions > .gw-disclose__summary:hover {
  background: var(--gw-link-hover);
}

/* -------------------------------------------------------------------------
   9. Sources
   ---------------------------------------------------------------------- */
.gw-sources {
  margin-top: var(--gw-space-5);
  padding-top: var(--gw-space-3);
  border-top: 2px solid var(--gw-border);
  color: var(--gw-ink-muted);
}

.gw-sources h2 {
  font-size: var(--gw-text-xl);
  margin-bottom: var(--gw-space-1);
}

.gw-sources ul { padding-left: 1.5rem; margin: 0; }
.gw-sources li { margin-bottom: var(--gw-space-1); font-size: var(--gw-text-sm); }
.gw-sources p { font-size: var(--gw-text-sm); }

.activity__foot {
  margin-top: var(--gw-space-5);
  padding-top: var(--gw-space-3);
  border-top: 1px solid var(--gw-border);
}

/* -------------------------------------------------------------------------
   10. Status pages (confirm / unsubscribe / error)
   ---------------------------------------------------------------------- */
.gw-status {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--gw-space-6);
  text-align: center;
}

.gw-status p { margin-inline: auto; }

/* The mark is decorative reinforcement only -- the heading always states the
   outcome in words, so nothing depends on reading the symbol or its colour. */
.gw-status__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto var(--gw-space-3);
  border-radius: 50%;
  font-size: 2.75rem;
  line-height: 1;
  background: var(--gw-success-bg);
  color: var(--gw-success-ink);
  border: 3px solid var(--gw-success-ink);
}

.gw-status__mark--warn {
  background: var(--gw-surface-sand);
  color: var(--gw-clay);
  border-color: var(--gw-clay);
}

.gw-status__mark--bad {
  background: var(--gw-error-bg);
  color: var(--gw-error-ink);
  border-color: var(--gw-error-ink);
}

.gw-status__mark--info {
  background: var(--gw-surface-mist);
  color: var(--gw-ocean);
  border-color: var(--gw-ocean);
}

.gw-status__title { margin-bottom: var(--gw-space-2); }

.gw-status .gw-card {
  text-align: left;
  margin-top: var(--gw-space-4);
}

.gw-status .gw-card h2 {
  font-size: var(--gw-text-xl);
}

.gw-email {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: var(--gw-sand);
  border-radius: var(--gw-radius);
  font-weight: 700;
  word-break: break-all;
}

/* -------------------------------------------------------------------------
   11. Plain checklist -- no emoji, no colour dependency
   ---------------------------------------------------------------------- */
.gw-ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gw-space-2);
}

.gw-ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--gw-space-1);
  max-width: var(--gw-measure);
}

.gw-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gw-success-ink);
  font-weight: 700;
}

.gw-days {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gw-days li {
  padding: var(--gw-space-2) 0;
  border-bottom: 1px solid var(--gw-border);
  max-width: none;
}

.gw-days li:last-child { border-bottom: 0; }

.gw-days strong { color: var(--gw-forest); }

/* -------------------------------------------------------------------------
   12. Puzzles -- Sudoku, word search and anagrams as HTML, not images
   ----------------------------------------------------------------------
   These were PNGs rendered by SkiaSharp onto local disk, which broke on every
   redeploy. As real tables they reflow, respect the reader's own text size,
   print cleanly, and cost a couple of kilobytes instead of a couple of hundred.

   Sizing is in ch/rem rather than px so a reader who has zoomed the browser or
   raised their default font size gets a bigger grid, not a clipped one.
   ---------------------------------------------------------------------- */
.gw-puzzle { margin-block: var(--gw-space-5); }

.gw-puzzlegrid {
  border-collapse: collapse;
  margin: var(--gw-space-4) 0;
  /* Grids must not be stretched to the container -- a square stays square. */
  width: auto;
  table-layout: fixed;
  background: var(--gw-surface);
}

.gw-puzzlegrid td {
  border: 1px solid var(--gw-border);
  text-align: center;
  vertical-align: middle;
  padding: 0;
  font-variant-numeric: tabular-nums;
  color: var(--gw-ink);
}

/* --- Sudoku ---
   Cell size is driven by the digit, not the other way round: 1.5rem lands at
   24px, the top of the 18-24px range this audience needs, and the cell is sized
   to give it room. A 9-wide grid at 3rem is 27rem, comfortably inside the
   46rem column. */
.gw-puzzlegrid--sudoku td {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  font-weight: 600;
}

/* The 3x3 block borders. Drawn with heavier edges on the interior boundaries
   rather than nth-child background tricks, so it stays legible in print and
   in high-contrast mode. */
.gw-puzzlegrid--sudoku { border: 3px solid var(--gw-ink); }

.gw-puzzlegrid--sudoku tr td:nth-child(3n) { border-right: 3px solid var(--gw-ink); }
.gw-puzzlegrid--sudoku tr td:last-child { border-right: none; }
.gw-puzzlegrid--sudoku tr:nth-child(3n) td { border-bottom: 3px solid var(--gw-ink); }
.gw-puzzlegrid--sudoku tr:last-child td { border-bottom: none; }

/* Blank cells read as "yours to fill in" without relying on colour alone --
   the emptiness itself carries the meaning. */
.gw-puzzlegrid--sudoku td.is-blank { background: var(--gw-surface-sand); }

/* Typed answers sit in a real input filling the whole cell, so the tap target
   is the square the reader is aiming at rather than something smaller inside
   it. Well over the 48px minimum once you count the cell. */
.gw-puzzlegrid--sudoku td.is-blank input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--gw-link);          /* your answers, distinct from the givens */
  -moz-appearance: textfield;
}

.gw-puzzlegrid--sudoku td.is-blank input:focus {
  outline: 3px solid var(--gw-forest);
  outline-offset: -3px;
  background: #FFFFFF;
}

/* A wrong square is marked with a heavy outline and a colour, never colour
   alone -- and the count is also written out in the message below the grid. */
.gw-puzzlegrid--sudoku td.is-blank input.is-wrong {
  background: var(--gw-error-bg);
  color: var(--gw-error-ink);
  box-shadow: inset 0 0 0 3px var(--gw-error-ink);
}

.gw-puzzle__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
  margin: var(--gw-space-3) 0;
}

.gw-puzzle__result {
  margin: 0 0 var(--gw-space-3);
  font-size: var(--gw-text-base);
  font-weight: 600;
  min-height: 1.5em;              /* no jump when the message appears */
}

.gw-puzzle__result.is-good { color: var(--gw-success-ink); }
.gw-puzzle__result.is-warn { color: var(--gw-clay); }

.gw-puzzle__print {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-space-2);
  margin: var(--gw-space-4) 0;
}

.gw-puzzle__printnote {
  color: var(--gw-ink-muted);
  font-size: var(--gw-text-sm);
}

/* --- Word search ---
   A little tighter than Sudoku because the grid is 12 wide rather than 9, but
   the letter still clears 20px. 12 x 2.6rem is 31.2rem, still inside the column. */
.gw-puzzlegrid--wordsearch td {
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.gw-wordlist {
  list-style: none;
  padding: 0;
  margin: var(--gw-space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
}

.gw-wordlist li {
  background: var(--gw-surface-sand);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Anagrams --- */
.gw-anagrams {
  margin: var(--gw-space-4) 0;
  padding-left: var(--gw-space-4);
}

.gw-anagrams li { margin-bottom: var(--gw-space-3); }

.gw-anagrams__word {
  display: inline-block;
  font-size: var(--gw-text-lg);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gw-anagrams__hint {
  display: block;
  color: var(--gw-ink-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* -------------------------------------------------------------------------
   Feedback form
   ----------------------------------------------------------------------
   Sized for someone 70+ answering on a phone, possibly one-handed. Each
   choice is a full-width tap target rather than a small radio dot, and the
   whole row is inside the <label> so a tap anywhere on it registers.
   ---------------------------------------------------------------------- */
.gw-feedback { text-align: left; }

.gw-choices {
  border: 0;
  margin: 0 0 var(--gw-space-4);
  padding: 0;
}

.gw-choices__legend {
  padding: 0;
  margin-bottom: var(--gw-space-3);
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-xl);
  font-weight: 700;
  color: var(--gw-forest);
}

.gw-choice {
  display: flex;
  align-items: baseline;
  gap: var(--gw-space-2);
  flex-wrap: wrap;
  min-height: 4rem;               /* comfortably past the 48px minimum */
  padding: var(--gw-space-3);
  margin-bottom: var(--gw-space-2);
  border: 2px solid var(--gw-border);
  border-radius: var(--gw-radius);
  background: var(--gw-surface);
  cursor: pointer;
}

.gw-choice:hover { background: var(--gw-surface-sand); }

/* The checked state is carried by the border and background as well as the
   radio itself, so it does not depend on seeing a small filled circle. */
.gw-choice:has(input:checked) {
  border-color: var(--gw-forest);
  background: var(--gw-success-bg);
}

/* Focus lands on the input; the ring belongs on the whole row. */
.gw-choice:focus-within {
  outline: 3px solid var(--gw-forest);
  outline-offset: 2px;
}

.gw-choice input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--gw-forest);
  flex: none;
}

.gw-choice__label {
  font-size: var(--gw-text-lg);
  font-weight: 700;
  color: var(--gw-ink);
}

.gw-choice__hint {
  color: var(--gw-ink-muted);
  font-size: var(--gw-text-base);
}

.gw-field { margin-bottom: var(--gw-space-4); }

.gw-field__label {
  display: block;
  margin-bottom: var(--gw-space-2);
  font-size: var(--gw-text-lg);
  font-weight: 700;
  color: var(--gw-forest);
}

.gw-field__optional {
  display: inline-block;
  margin-left: var(--gw-space-2);
  font-size: var(--gw-text-sm);
  font-weight: 600;
  color: var(--gw-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gw-textarea {
  display: block;
  width: 100%;
  padding: var(--gw-space-3);
  border: 2px solid var(--gw-border);
  border-radius: var(--gw-radius);
  background: var(--gw-surface);
  font: inherit;
  font-size: var(--gw-text-base);
  line-height: 1.6;
  color: var(--gw-ink);
  resize: vertical;
}

.gw-textarea:focus {
  outline: 3px solid var(--gw-forest);
  outline-offset: 2px;
}

.gw-field__note {
  margin: var(--gw-space-3) 0 0;
  font-size: var(--gw-text-sm);
  color: var(--gw-ink-muted);
}

/* Turnstile renders its own iframe; give it room without letting it shift the
   submit button around as it resolves. */
.cf-turnstile { margin-bottom: var(--gw-space-4); min-height: 65px; }

/* --- Riddles --- */
.gw-riddles {
  margin: var(--gw-space-4) 0;
  padding-left: var(--gw-space-4);
}

.gw-riddles li { margin-bottom: var(--gw-space-4); }

.gw-riddles__question {
  display: block;
  font-size: var(--gw-text-lg);
  line-height: 1.6;
  max-width: var(--gw-measure);
}

/* --- Word ladders --- */
.gw-ladders {
  margin: var(--gw-space-4) 0;
  padding-left: var(--gw-space-4);
}

.gw-ladder { margin-bottom: var(--gw-space-5); }

.gw-ladder__goal {
  margin: 0 0 var(--gw-space-2);
  font-size: var(--gw-text-lg);
}

.gw-ladder__count {
  display: block;
  font-size: var(--gw-text-sm);
  color: var(--gw-ink-muted);
  font-weight: 600;
}

.gw-ladder__rungs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gw-space-2);
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gw-ladder__rungs li {
  min-width: 9rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gw-border);
  border-radius: var(--gw-radius);
  font-size: var(--gw-text-lg);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* The two ends are given; the rungs between them are the puzzle. */
.gw-ladder__rungs li.is-fixed {
  background: var(--gw-surface);
  border-color: var(--gw-forest);
  color: var(--gw-ink);
}

.gw-ladder__rungs li.is-blank {
  background: var(--gw-surface-sand);
  border-style: dashed;
}

/* --- Odd one out --- */
.gw-odd {
  margin: var(--gw-space-4) 0;
  padding-left: var(--gw-space-4);
}

.gw-odd > li { margin-bottom: var(--gw-space-4); }

.gw-odd__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
}

.gw-odd__items li {
  background: var(--gw-surface);
  border: 2px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: 0.6rem 1.1rem;
  font-size: var(--gw-text-lg);
  font-weight: 600;
}

.gw-answers__note {
  margin: var(--gw-space-3) 0 0;
  padding-left: var(--gw-space-3);
  border-left: 4px solid var(--gw-sage);
  color: var(--gw-ink-muted);
  font-style: italic;
}

/* --- Hints --- */
.gw-hint {
  margin-top: var(--gw-space-2);
  max-width: var(--gw-measure);
}

.gw-hint__summary {
  display: inline-block;
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 700;
  color: var(--gw-link);
  text-decoration: underline;
}

.gw-hint__body {
  margin: var(--gw-space-1) 0 0;
  padding-left: var(--gw-space-3);
  border-left: 4px solid var(--gw-sage);
  color: var(--gw-ink-muted);
}

.gw-answers {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gw-answers--numbered {
  list-style: decimal;
  padding-left: var(--gw-space-4);
}

.gw-answers li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--gw-border);
}

.gw-answers li:last-child { border-bottom: none; }

/* Narrow screens: a 12x12 grid at a readable cell size is wider than a phone.
   Scrolling the grid alone is better than shrinking the letters past legibility
   or letting the whole page scroll sideways. */
@media (max-width: 40rem) {
  .gw-puzzle { overflow-x: auto; }

  /* Both grids are sized to fit a 360px phone whole, because hunting for words
     in a grid you have to swipe sideways is exactly the interaction the
     senior-first UX rules tell us to avoid. The letters stay at or above the
     18px floor: 9 x 2.35rem and 12 x 1.75rem both land inside the column. */
  .gw-puzzlegrid--sudoku td { width: 2.35rem; height: 2.35rem; font-size: 1.2rem; }
  .gw-puzzlegrid--wordsearch td { width: 1.75rem; height: 1.75rem; font-size: 1.125rem; }
}

/* -------------------------------------------------------------------------
   13. Print -- activity pages get printed and taped to fridges
   ---------------------------------------------------------------------- */
@media print {
  .gw-embed,
  .activity__foot { display: none; }

  .gw-disclose__body { display: block !important; }
  .gw-disclose,
  .gw-callout,
  .gw-step { break-inside: avoid; }

  /* Everything else prints expanded, but printing the answers alongside the
     puzzle defeats the point of printing the puzzle. */
  .gw-disclose--answers { display: none; }

  .gw-puzzlegrid { break-inside: avoid; }
  .gw-puzzlegrid td { border-color: #000; }

  /* On paper the shading is wasted ink and the reader needs the white space to
     write in, so blanks print as plain empty squares. */
  .gw-puzzlegrid--sudoku td.is-blank { background: none; }

  /* Anything typed on screen prints too, so a half-finished grid can be carried
     on with a pencil. The input must not print its own box on top of the cell --
     including the focus ring, which would otherwise leave one square on the
     printed sheet mysteriously outlined. */
  .gw-puzzlegrid--sudoku td.is-blank input,
  .gw-puzzlegrid--sudoku td.is-blank input:focus {
    border: 0;
    background: none;
    box-shadow: none;
    outline: none;
    color: #000;
  }

  /* Text that only makes sense in front of a screen. */
  .gw-screen-only { display: none; }

  .gw-puzzle__actions,
  .gw-puzzle__result,
  .gw-puzzle__print { display: none; }

  .gw-figure img { border: 1px solid #999; }

  /* ---- "Print this puzzle": just the puzzle, on its own sheet ----
     Set by the print button. Plain Ctrl+P is untouched and still prints the
     whole activity, which is what you want for the non-puzzle activities. */
  .gw-print-puzzle .site-header,
  .gw-print-puzzle .site-footer,
  .gw-print-puzzle .activity__meta,
  .gw-print-puzzle .activity__summary,
  .gw-print-puzzle .activity__badges,
  .gw-print-puzzle .gw-callout,
  .gw-print-puzzle .gw-steps,
  .gw-print-puzzle .gw-steps--plain,
  .gw-print-puzzle .gw-figure,
  .gw-print-puzzle .activity > section:not(.gw-puzzle) {
    display: none;
  }

  /* The heading stays: a printed grid with no title is a mystery sheet a week
     later. The "Step by step" heading goes with its list. */
  .gw-print-puzzle .activity > h2 { display: none; }

  .gw-print-puzzle .gw-puzzle { margin-top: 0; }
}