/* The Allotment Row: an argument sheet in chalk. Flush-left type, a heavy rule, parts numbered I to III,
   thin pen lines and square corners. The grid is the picture; one lamp colour marks what matters.
   On a phone the three grids stack in one column that scrolls on its own, each grid whole with its own
   name, heads and labels, so every box is big enough to tap; the notes and clues stay put beside or below.
   With room for it (game.js SHEET_QUERY says the same), the grids sit in the classic L. */

:root {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --pad: 8px;
  --gap: 10px;
  --hair: color-mix(in srgb, var(--ak-ink) 30%, transparent);
  --chalk: color-mix(in srgb, var(--ak-ink) 82%, transparent);
  --lamp: color-mix(in srgb, var(--ak-accent) 34%, transparent);
  --yes: color-mix(in srgb, var(--ak-accent) 22%, transparent);
  --band: color-mix(in srgb, var(--ak-ink) 5%, transparent);
  --status: var(--ac-status-h, 64px);
  --label: 78px;
  --head: 38px;
  --block-gap: 30px;
  --nav-h: 52px;
  /* Upright on a phone: five boxes across the width, never under 44px. */
  --cell: clamp(44px, calc((100dvw - var(--sl) - var(--sr) - 2 * var(--pad) - var(--label) - 8px) / 5), 52px);
  --notes-max: 54dvh;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

/* The painted slate stays as the faintest trace under a near-solid sheet. */
body {
  min-height: 100dvh;
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ak-bg) 88%, transparent), color-mix(in srgb, var(--ak-bg) 88%, transparent)),
    var(--ak-backdrop-layer, linear-gradient(color-mix(in srgb, var(--ak-bg) 79%, transparent), color-mix(in srgb, var(--ak-bg) 79%, transparent)), url("./art/slate-desk.jpg"));
  background-size: cover;
  background-position: center top;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

[hidden] { display: none !important; }

/* start.js's help control, set as a plain mark in the sheet's ink rather than a filled square. */
html #activity-help,
html #activity-help.site-deeperpectives,
html #activity-help:active {
  background: none;
  color: var(--ak-ink);
  border: 0;
  border-bottom: 1.5px solid var(--ak-ink);
  border-radius: 0;
  box-shadow: none;
  font-weight: 600;
  font-size: 22px;
}

@media (hover: hover) {
  html #activity-help:hover { background: none; color: var(--ak-accent); border-bottom-color: var(--ak-accent); }
}

/* The brief: its Start button stays pinned at the foot of the screen, always in reach, on a solid slate band
   so the words scroll cleanly above it and are never read through it. A drag scrolls rather than selects. */
html #activity-start.is-instructions .ak-go {
  position: sticky;
  bottom: calc(4px + var(--sb));
  z-index: 2;
  /* The band is drawn as shadows, which sit under the button's own fill: wider than the button, and down past
     the brief's padding to the foot of the screen. */
  box-shadow:
    0 0 0 18px var(--ak-bg),
    -40px 0 0 18px var(--ak-bg),
    40px 0 0 18px var(--ak-bg),
    0 44px 0 18px var(--ak-bg),
    -40px 44px 0 18px var(--ak-bg),
    40px 44px 0 18px var(--ak-bg);
}
html #activity-start.is-instructions .ak-sheet { padding-bottom: calc(16px + var(--sb)); }
html #activity-start { overflow-x: hidden; }
html #activity-start .ak-sheet {
  user-select: none;
  -webkit-user-select: none;
}

/* ---- The page: grids in their own scrolling column, notes fixed beside or below ---- */

.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap);
  height: 100dvh;
  padding: calc(var(--status) + 6px) calc(var(--pad) + var(--sr)) calc(var(--pad) + var(--sb)) calc(var(--pad) + var(--sl));
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Part numbers, as on the brief: I the grid, II the clues, III the check. */
.part {
  margin-right: 6px;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

/* ---- I. The grids, under a heavy rule ---- */

.board-side {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 3px solid var(--ak-ink);
  scrollbar-width: thin;
  scrollbar-color: var(--ak-ink-muted) transparent;
}

/* The pinned bar of the three grids: the one in view underlined in the lamp's colour, each with its count. */
.grid-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ak-bg);
  border-bottom: 1px solid var(--hair);
}

.grid-jump {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 4px 8px 2px;
  border-bottom: 3px solid transparent;
  text-align: left;
  line-height: 1.2;
}

.jump-name { color: var(--ak-ink-muted); font-family: var(--ak-font-display); font-size: 13px; font-weight: 600; }
.jump-count { color: var(--ak-ink-muted); font-size: 12.5px; }
.grid-jump.is-here { border-bottom-color: var(--ak-accent); }
.grid-jump.is-here .jump-name { color: var(--ak-ink); }
.grid-jump.is-done .jump-count { color: var(--ak-accent); }

.board {
  position: relative;
  display: grid;
  justify-content: center;
  grid-template-columns: var(--label) calc(var(--cell) * 5);
  grid-template-areas:
    "margin margin"
    "n-gp n-gp"
    "c-gp h-gp"
    "l-gp b-gp"
    "n-gc n-gc"
    ". h-gc"
    "l-gc b-gc"
    "n-cp n-cp"
    ". h-cp"
    "l-cp b-cp";
  padding: 12px 0 28px;
}

.corner-gp { grid-area: c-gp; }
.heads-plot { grid-area: h-gp; }
.labels-gardener { grid-area: l-gp; }
#block-gp { grid-area: b-gp; }
.heads-plot-cp { grid-area: h-cp; }
.labels-crop { grid-area: l-cp; }
#block-cp { grid-area: b-cp; }
.heads-crop { grid-area: h-gc; }

/* Stacked, a grid's column heads stay pinned under the bar while its boxes scroll, its name in the corner;
   the next grid's heads slide up over them. All three are one height so each covers the last. */
.heads {
  position: sticky;
  top: var(--nav-h);
  z-index: 3;
  height: 48px;
  min-height: 0;
  margin-left: calc(-1 * var(--label));
  margin-right: -4px;
  padding-left: var(--label);
  padding-right: 4px;
  background: var(--ak-bg);
  box-shadow: 0 1px 0 var(--hair);
}
.heads::before {
  content: attr(data-name);
  position: absolute;
  left: 0;
  bottom: 6px;
  width: calc(var(--label) - 10px);
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
}
.labels-gardener-gc { grid-area: l-gc; }
#block-gc { grid-area: b-gc; }
.grid-head-gp { grid-area: n-gp; }
.grid-head-gc { grid-area: n-gc; }
.grid-head-cp { grid-area: n-cp; }
.margin { grid-area: margin; }

/* Stacked, each grid opens with its name in strong type over a plain rule, and how many yes dots it holds. */
.corner-gp { display: none; }
.grid-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: var(--block-gap) 0 4px;
  padding-top: 10px;
  border-top: 1.5px solid var(--chalk);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.grid-head-gp { margin-top: 4px; }
.grid-head .grid-name { color: inherit; font-size: inherit; font-style: normal; }
.grid-count { color: var(--ak-ink-muted); font-family: var(--ak-font-body); font-size: 14px; font-weight: 500; }
.grid-count.is-done { color: var(--ak-accent); }

/* The title, flush left: the logo small, the set beside it. */
.sheet-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.logo { display: block; height: 30px; width: auto; }

.corner {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px 6px 0;
  min-width: 0;
}

.grid-name {
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.15;
}

.grid-name.is-lit { color: var(--ak-accent); }

.heads {
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  align-items: end;
  min-height: var(--head);
}

.head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 5px;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ak-ink);
}

.head-kind {
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 11.5px;
  font-weight: 500;
  font-style: italic;
}


/* Crop names over the L lie flat in two staggered tiers, each with room to either side, a tick to its column. */
.head-crop {
  position: relative;
  align-self: stretch;
  padding: 0;
  font-family: var(--ak-font-body);
  font-size: 14px;
  font-weight: 600;
}

.head-word {
  position: absolute;
  left: 50%;
  bottom: 5px;
  translate: -50% 0;
  white-space: nowrap;
  line-height: 1;
}

.tier-1 .head-word { bottom: 26px; }

.tier-1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  height: 18px;
  border-left: 1px solid var(--ak-ink-muted);
}

.labels {
  display: grid;
  grid-template-rows: repeat(5, var(--cell));
}

.label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.labels-crop .label { font-weight: 500; font-style: italic; }

/* A block is one grid of 25 boxes, gardeners (or crops) down the side and plots (or crops) across. */
.block {
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  grid-template-rows: repeat(5, var(--cell));
  outline: 1.5px solid var(--chalk);
  outline-offset: 0;
}

.line { display: contents; }

.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border-left: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  cursor: pointer;
  touch-action: manipulation;
}

.cell[data-c="0"] { border-left: 0; }
.cell[data-r="0"] { border-top: 0; }

/* A faint band on every other row, so a finger can follow a line across. */
.cell[data-r="1"], .cell[data-r="3"] { background: var(--band); }

/* A block takes focus as one grid; the box the keys act on carries the focus ring. */
.block:focus { outline: 1.5px solid var(--chalk); }
.block:focus-visible .cell.is-active { outline: 3px solid var(--ak-focus); outline-offset: -3px; z-index: 2; }

.mark {
  position: absolute;
  inset: 0;
  margin: auto;
  display: none;
  pointer-events: none;
}

.mark-cross { width: auto; height: 50%; opacity: 0.85; }
.mark-dot { width: auto; height: 76%; }

.cell[data-mark="cross"] .mark-cross { display: block; }
.cell[data-mark="dot"] .mark-dot { display: block; }

/* What follows by itself is written lighter than the player's own marks. */
.cell.is-auto .mark-cross { opacity: 0.36; }
.cell.is-auto .mark-dot { opacity: 0.72; }

/* A yes is a match: the box takes the lamp's amber and a firm edge, so a match never reads like a no. */
.block .cell[data-mark="dot"] { background: var(--yes); box-shadow: inset 0 0 0 2px var(--ak-accent); }
.block .cell[data-mark="dot"].is-auto { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-accent) 60%, transparent); }

/* The lamp over a clue's boxes is hatched, never a solid fill, so a lit box is not taken for a yes. */
.block .cell.is-lit {
  background-image: repeating-linear-gradient(135deg, var(--lamp) 0 4px, transparent 4px 9px);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ak-accent) 85%, transparent);
}

.block.is-lit,
.block.is-lit:focus { outline: 2px solid var(--ak-accent); }

/* The box the last tap changed: a plain chalk square, so the note below is read against the right box. */
.cell.is-last::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid var(--ak-ink);
  pointer-events: none;
  z-index: 1;
}

/* A pen circle in the second ink: the mark a check or a clue test points at. */
.cell.is-flagged::after,
.cell.is-open-flag::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 2px solid var(--ak-accent-2);
  border-radius: 50%;
  pointer-events: none;
}

.cell.is-open-flag::after { border-width: 1px; border-style: dashed; inset: 14%; }
.cell.is-flagged::after { border-width: 1.5px; border-style: dashed; }

/* The mark the check named: a heavy pen ring that stays until that box is changed. */
.cell.is-wrong::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 3px solid var(--ak-accent-2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.cell.is-guide::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--ak-accent);
  pointer-events: none;
  z-index: 2;
}

.arrow {
  position: absolute;
  z-index: 3;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* The names a clue speaks about take the lamp's colour; the two names of the last tapped box are underlined. */
.label.is-lit,
.head.is-lit { color: var(--ak-accent); }
.label.is-cross,
.head.is-cross .head-n,
.head-crop.is-cross .head-word { text-decoration: underline 2px; text-underline-offset: 4px; }
.plot.is-cross { outline: 2px solid var(--ak-accent); outline-offset: 1px; }

/* ---- The margin: the title, the drawn row, and III, the check ---- */

/* Stacked, the title and the drawn row share one line at the top of the grid column. */
.margin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 14px;
  min-width: 0;
}

.margin .row-art { width: min(52%, 190px); flex: none; }

.check-home { display: flex; align-items: center; gap: 8px; }
.margin .check-home:empty,
.margin .check-home:not(:has(.check)) { display: none; }

.part-check { font-size: 14px; }

.check {
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--ak-ink);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  text-align: left;
}

.check:disabled { border-color: var(--ak-outline); color: var(--ak-ink-muted); cursor: default; }

.check-note {
  display: none;
  width: 100%;
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.3;
}

/* ---- The drawn row: a gate and five plots, furrowed as gardeners are confirmed ---- */

.row-art {
  position: relative;
  aspect-ratio: 384 / 186;
  container-type: inline-size;
}

.row-picture { display: block; width: 100%; height: 100%; }

.plot {
  position: absolute;
  background: var(--ak-surface);
  overflow: hidden;
}

.furrows {
  position: absolute;
  inset: 8% 10%;
  width: 80%;
  height: 84%;
  overflow: visible;
}

.furrows path {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.85;
}

.plot.is-held .furrows path { stroke-dashoffset: 0; }

.plot-crop {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  writing-mode: vertical-rl;
  rotate: 180deg;
  padding: 3px 1px;
  background: var(--ak-surface);
  color: var(--ak-accent);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: clamp(8px, 3.3cqw, 15px);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

/* The set: five small plots, furrowed once settled, the current one outlined in the lamp's colour. */
.set-strip { display: inline-flex; align-items: center; gap: 4px; }
.set-box { width: 9px; height: 13px; border: 1px solid var(--ak-ink-muted); }
.set-box.is-now { border-color: var(--ak-accent); border-width: 1.5px; }
.set-box.is-done {
  border-color: var(--ak-ink);
  background: repeating-linear-gradient(90deg, var(--ak-ink) 0 1px, transparent 1px 3px);
}
/* A clean row's furrows are inked in the lamp's colour. */
.set-box.is-clean {
  border-color: var(--ak-accent);
  background: repeating-linear-gradient(90deg, var(--ak-accent) 0 1px, transparent 1px 3px);
}
.set-word {
  margin-left: 6px;
  white-space: nowrap;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.check-note .set-strip { display: none; }

/* ---- II. The notes and the clues ---- */

.notes-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: var(--notes-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 3px solid var(--ak-ink);
  padding-top: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--ak-outline) transparent;
}

.notes-side > * { flex-shrink: 0; }

/* The key to the marks: one quiet line, the whole cycle of a tap read left to right. */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 14px;
  line-height: 1.3;
}

.legend-lead { font-style: italic; }
.legend-lead::after { content: ":"; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-item b { color: var(--ak-ink); font-family: var(--ak-font-display); font-weight: 700; }
.legend-yes b { color: var(--ak-accent); }
.legend-mark { width: 18px; height: 18px; }

/* The caption is a note in the sheet: a small-caps word, then the words, under a hairline. */
.caption {
  margin: 0;
  min-height: 74px;
  padding: 6px 0 0;
  border-top: 1px solid var(--hair);
  color: var(--ak-ink);
}

.caption-label {
  display: block;
  margin-bottom: 2px;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.caption-text { display: block; }

.caption.is-loud .caption-text { font-size: 18px; line-height: 1.35; }
.caption.is-loud .caption-label { color: var(--ak-accent); }
.caption.is-note .caption-text { font-size: 16px; line-height: 1.4; }
.caption-said {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hair);
  color: var(--ak-ink-muted);
  font-size: 14.5px;
  line-height: 1.35;
}

/* Your own mark, read back: the mark as drawn in the box, a firm no or yes, then what it means. */
.caption.is-readout .caption-text { font-size: 16px; line-height: 1.4; }
.said-mark {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: -5px;
}
.said { font-family: var(--ak-font-display); font-weight: 700; }
.said-cross { color: var(--ak-ink); }
.said-dot { color: var(--ak-accent); }
.caption.is-quiet .caption-text { color: var(--ak-ink-muted); font-size: 15px; font-style: italic; line-height: 1.35; }

/* The check's verdict: written under the heavy rule, never a card over the grid. */
.caption.is-verdict {
  padding-top: 8px;
  border-top: 3px solid var(--ak-ink);
}

.verdict-title {
  display: block;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

.verdict-why {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.35;
}

/* How to take the wrong mark back, in the ring's own colour, read straight after the why. */
.verdict-fix { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.verdict-fix .caption-label { display: inline; margin-right: 8px; color: var(--ak-accent-2); }
.verdict-fix .caption-text { display: inline; }

.clues-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: -8px;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.run-note {
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
}

.clues {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--ak-ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 16px;
}

.clue-item { border-bottom: 1px solid var(--hair); display: flex; }

.clue {
  position: relative;
  display: grid;
  grid-template-columns: 1.5em 1fr;
  align-items: start;
  width: 100%;
  min-height: 48px;
  padding: 7px 4px 7px 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ak-ink);
}

.clue-n {
  position: relative;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.clue-note {
  grid-column: 2;
  display: none;
  margin-top: 2px;
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-style: italic;
}

/* The one lamp falls across the active clue, or the clue a note is leaning on. */
.clue.is-active,
.clue.is-cited {
  background-image: radial-gradient(ellipse 90% 140% at 22% 50%, var(--lamp), transparent 72%);
}

.clue.is-active .clue-n,
.clue.is-cited .clue-n { color: var(--ak-accent); }

.clue.is-active { box-shadow: inset 3px 0 0 var(--ak-accent); padding-left: 6px; }

.clue.is-broken .clue-n::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 1.45em;
  height: 1.55em;
  border: 2px solid var(--ak-accent-2);
  border-radius: 50%;
}

/* Hint and Clear ride at the right of the clue heading, as plain underlined words. */
.tools { display: flex; align-items: center; gap: 18px; flex: none; }

/* On a phone the check takes the clue list's last place; with the L it stays in the margin and the place goes. */
.check-slot { align-items: center; padding: 6px 0; }
.check-slot:empty { display: none; }
.check-slot .check { width: 100%; }

.undo,
.hint,
.clear {
  min-height: 48px;
  min-width: 48px;
  padding: 0 4px;
  font-size: 15px;
  font-variant: normal;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hint { color: var(--ak-accent); font-family: var(--ak-font-display); font-weight: 600; }
.clear,
.undo { color: var(--ak-ink-muted); }
.undo:disabled { opacity: 0.4; cursor: default; }
.clear:disabled { opacity: 0.4; cursor: default; }

/* ---- Narrow phones, upright ---- */

@media (max-width: 379px) {
  :root { --label: 74px; --pad: 6px; }
  .clue { font-size: 14px; padding: 5px 2px 5px 0; }
  .clues { column-gap: 12px; }
  .legend { gap: 2px 10px; font-size: 13px; }
  .caption.is-loud .caption-text { font-size: 18px; line-height: 1.3; }
  .caption.is-readout .caption-text { font-size: 15px; line-height: 1.35; }
}

/* ---- A phone on its side: the grid column on the left, the notes and clues on the right ---- */

@media (orientation: landscape) {
  :root {
    --label: 80px;
    --cell: clamp(44px, calc((100dvh - var(--sb) - 2 * var(--pad) - var(--head) - 3px) / 6), 52px);
  }

  .play {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 22px;
    padding-top: var(--pad);
  }

  .board-side { padding-right: 6px; }

  /* The status line moves over the notes, so the grid column takes the full height. */
  html #activity-chrome-status { left: calc(var(--sl) + var(--pad) + var(--label) + var(--cell) * 5 + 34px); }

  .notes-side {
    max-height: none;
    margin-top: calc(var(--status) - var(--pad));
  }

  .clues { grid-template-columns: 1fr 1fr; }

  /* The solved card takes the notes side only, so the finished grid stays in view. */
  html #activity-chrome-ending {
    left: auto;
    right: 0;
    width: calc(100dvw - var(--sl) - var(--pad) - var(--label) - var(--cell) * 5 - 34px);
    justify-content: flex-start;
  }
  html.is-solved #activity-chrome-ending .ac-card { padding-top: 14px; padding-bottom: 12px; }
  html.is-solved #activity-chrome-ending .ac-rule { margin-bottom: 10px; }
  html.is-solved #activity-chrome-ending .ac-verdict { margin-bottom: 6px; font-size: 24px; }
  html.is-solved #activity-chrome-ending .ac-line { font-size: 14px; line-height: 1.35; margin-bottom: 2px; }
  html.is-solved #activity-chrome-ending .ac-line:nth-child(-n + 5) { font-size: 15px; line-height: 1.3; margin: 0; }
  html.is-solved #activity-chrome-ending .ac-line:nth-child(6) { margin-top: 6px; }
  html.is-solved #activity-chrome-ending .ac-work { top: 14px; }
  html.is-solved #activity-chrome-ending .ac-actions { margin-top: 2px; }
}

/* A short phone upright: the notes take a little more of the height, so the check stays in view. */
@media (orientation: portrait) and (max-height: 779px) {
  :root { --notes-max: 58dvh; }
}

/* ---- A short phone on its side: the notes packed so every clue and the check show without scrolling ---- */

@media (orientation: landscape) and (max-height: 639px) {
  :root { --label: 76px; --cell: 46px; }

  /* One line over the caption: the key to the marks on the left, Hint and Clear on the right. */
  .notes-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "legend tools" "caption caption" "clues clues";
    align-items: center;
    align-content: start;
    column-gap: 10px;
    row-gap: 6px;
  }
  .clues-head { display: contents; }
  .clues-part, .legend-lead { display: none; }
  .legend { grid-area: legend; gap: 2px 10px; font-size: 13.5px; }
  .tools { grid-area: tools; gap: 12px; }
  .caption { grid-area: caption; min-height: auto; padding-top: 4px; }
  .caption-label { display: inline; margin: 0 8px 0 0; }
  .caption-text { display: inline; }
  .caption.is-loud .caption-text { line-height: 1.3; }
  .clues { grid-area: clues; }
  .clue { font-size: 14.5px; line-height: 1.25; padding: 5px 4px 5px 0; }
  .check-slot { padding: 0; }
}

/* ---- Room for the L: three grids sharing their heads, notes beside (wide) or below (tall) ---- */

@media (min-width: 900px) and (min-height: 640px), (orientation: portrait) and (min-width: 560px) and (min-height: 900px) {
  :root { --label: 84px; --head: 56px; }

  .board-side { overflow: visible; border-top: 3px solid var(--ak-ink); padding-right: 0; }

  .board {
    grid-template-columns: var(--label) calc(var(--cell) * 5) calc(var(--cell) * 5);
    grid-template-rows: var(--head) calc(var(--cell) * 5) calc(var(--cell) * 5);
    grid-template-areas:
      "c-gp h-gp h-gc"
      "l-gp b-gp b-gc"
      "l-cp b-cp margin";
    padding: 6px 0 0;
  }

  .heads { position: static; height: auto; min-height: var(--head); margin: 0; padding: 0; box-shadow: none; background: none; }
  .heads::before { content: none; }
  .corner-gp { display: flex; }
  .grid-nav, .grid-head, .heads-plot-cp, .labels-gardener-gc { display: none; }

  /* The grid's empty corner holds the title, the drawn row and III, the check. */
  .margin {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 0 0 14px;
  }
  .margin .row-art { width: 100%; }
  .sheet-title { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .logo { height: 26px; }
  .check-home .check { flex: 1 1 auto; }
  .check-note { display: block; }

  .notes-side { max-height: none; overflow: visible; }
  .clue-note { display: block; }

  html #activity-chrome-status { left: max(10px, var(--sl)); }
  .notes-side { margin-top: 0; }
}

/* Wide: the L on the left, the notes on the right, all of it in one screen. */
@media (min-width: 900px) and (min-height: 640px) {
  :root {
    --cell: min(
      calc((100dvh - var(--status) - 14px - var(--sb) - var(--pad) - var(--head) - 9px) / 10),
      calc((100dvw - var(--sl) - var(--sr) - 2 * var(--pad) - 28px - 340px - var(--label)) / 10),
      56px
    );
  }

  .play {
    grid-template-columns: auto minmax(320px, 460px);
    grid-template-rows: auto;
    justify-content: center;
    align-items: start;
    column-gap: 28px;
    height: auto;
    min-height: 100dvh;
    padding-top: calc(var(--status) + 8px);
    overflow: visible;
  }

  .clues { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }

  html #activity-chrome-ending {
    left: auto;
    right: 0;
    width: min(46vw, 560px);
    justify-content: flex-start;
  }
}

/* Tall: a tablet upright, the L above, the notes below. */
@media (orientation: portrait) and (min-width: 560px) and (min-height: 900px) {
  :root {
    --cell: min(
      calc((100dvw - var(--sl) - var(--sr) - 2 * var(--pad) - var(--label)) / 10),
      max(44px, calc((100dvh - var(--status) - var(--head) - 420px) / 10)),
      56px
    );
  }

  .play {
    grid-template-rows: auto auto;
    justify-items: center;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .notes-side { width: calc(var(--label) + var(--cell) * 10); }
}

/* ---- The solved ending: five lines in strong type, and the stamp in the margin ---- */

:root.is-solved #activity-chrome-ending .ac-card {
  --stamp-w: clamp(76px, 18vw, 128px);
  position: relative;
  padding-right: calc(var(--stamp-w) + 36px + var(--sr));
  background-image: linear-gradient(var(--ak-outline), var(--ak-outline));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: right calc(var(--stamp-w) + 22px + var(--sr)) top;
}

:root.is-solved #activity-chrome-ending .ac-line:nth-child(-n + 5) {
  margin: 0 0 2px;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 18px;
  white-space: pre-wrap;
}

:root.is-solved #activity-chrome-ending .ac-line:nth-child(6) { margin-top: 12px; }

:root.is-solved #activity-chrome-ending .ac-work {
  position: absolute;
  top: 80px;
  right: calc(12px + var(--sr));
  width: var(--stamp-w);
  margin: 0;
  border: 0;
  rotate: -5deg;
}

:root.is-solved .cell.is-answer .mark-dot { filter: drop-shadow(0 0 2px var(--ak-accent)); }

/* ---- Motion, only when wanted ---- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .cell.is-new .mark { animation: filled-in 520ms ease-out both; }
  :root:not(.ac-still) .cell.is-pressed .mark-dot { animation: chalk-press 240ms cubic-bezier(0.22, 1, 0.36, 1); }
  :root:not(.ac-still) .cell.is-guide::before { animation: ring 1600ms ease-in-out infinite; }

  :root:not(.ac-still) .plot.is-drawing .furrows path {
    animation: furrow 240ms ease-out both;
    animation-delay: calc(var(--n) * 90ms);
  }

  :root:not(.ac-still) .cell.is-answer .mark-dot {
    animation: answer 900ms ease-out both;
    animation-delay: calc(var(--order) * 140ms);
  }

  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(-n + 7) {
    animation: set-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(1) { animation-delay: 200ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(2) { animation-delay: 320ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(3) { animation-delay: 440ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(4) { animation-delay: 560ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(5) { animation-delay: 680ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(6) { animation-delay: 860ms; }
  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-line:nth-child(7) { animation-delay: 980ms; }

  :root:not(.ac-still).is-solved #activity-chrome-ending .ac-work {
    animation: stamp 280ms cubic-bezier(0.3, 0, 0.2, 1) 1150ms both;
  }

  @keyframes filled-in {
    from { opacity: 0; }
  }

  @keyframes chalk-press {
    from { transform: scale(1.28); opacity: 0.35; }
    to { transform: scale(1); opacity: 1; }
  }

  @keyframes ring {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.12); }
  }

  @keyframes furrow {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes answer {
    0% { transform: scale(1); filter: none; }
    45% { transform: scale(1.14); filter: drop-shadow(0 0 5px var(--ak-accent)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--ak-accent)); }
  }

  @keyframes set-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes stamp {
    from { opacity: 0; transform: scale(1.5); }
    70% { opacity: 1; }
    to { opacity: 1; transform: scale(1); }
  }
}