/* Across the Rooms: a notebook page, ruled with a margin, holding an architect's inked plan.
   Thin forest-green ink, pencil notes in the margin, no filled panels. The graph paper lives in
   the painted plan and cards; the page itself is ruled. Colours and fonts come only from kit.css. */

:root {
  --rule: 32px;
  --grid-line: color-mix(in srgb, var(--ak-accent) 15%, transparent);
  --rule-line: color-mix(in srgb, var(--ak-accent) 20%, transparent);
  --margin-x: 30px;
  --margin-line: color-mix(in srgb, var(--ak-accent-2) 75%, var(--ak-ink));
  --pencil: var(--ak-ink-muted);
  --pen: 1.5px;
  --slow: 520ms;
  --top: calc(var(--ac-status-h, 64px) + var(--toast-h, 0px) + 10px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 18px;
  line-height: 1.45;
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin-line) calc(var(--margin-x) - 1px), var(--margin-line) var(--margin-x), transparent var(--margin-x)),
    linear-gradient(transparent calc(var(--rule) - 1px), var(--rule-line) calc(var(--rule) - 1px)),
    var(--ak-backdrop-layer, none);
  background-size: 100% 100%, 100% var(--rule), cover;
  background-position: 0 0, 0 0, center;
  -webkit-tap-highlight-color: transparent;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

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

/* ------------------------------------------------------------------ the play area */

.play {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    var(--top)
    max(14px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(calc(var(--margin-x) + 10px), calc(env(safe-area-inset-left) + var(--margin-x) + 4px));
  touch-action: manipulation;
}

.logo {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

/* The pencil word for a room, with its doorway drawn beside it. */
.door {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Soft round controls drawn in pen: an outline, never a filled panel. */
.pen-btn,
.ink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 18px;
  border: var(--pen) solid var(--ak-ink);
  border-radius: 24px;
  background: transparent;
  font-size: 18px;
  font-style: italic;
  cursor: pointer;
}

.pen-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pen-btn[aria-disabled="true"] { color: var(--ak-ink-muted); border-color: var(--ak-outline); }
.pen-btn:disabled { color: var(--ak-ink-muted); border-style: dashed; cursor: default; }

.ink-btn {
  border-color: var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-style: normal;
  font-weight: 600;
}

.ink-btn:active { background: var(--ak-btn-active); }

@media (hover: hover) {
  .pen-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ak-surface) 70%, transparent); }
  .ink-btn:hover { background: var(--ak-btn-hover); }
}

.kept {
  margin: 0;
  color: var(--pencil);
  font-size: 14px;
  font-style: italic;
}

/* ------------------------------------------------------------------ the quiz */

.quiz {
  flex: 1;
  min-height: 0;
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  grid-template-areas: "head" "prompt" "teach" "cards" "controls";
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  row-gap: 10px;
}

.head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The courtyard folded away to a corner sketch; it opens the player's pages. */
.sketch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sketch-plan {
  position: relative;
  display: block;
  width: 52px;
  aspect-ratio: 368 / 384;
}

.sketch-plan img {
  display: block;
  width: 100%;
  height: 100%;
}

.sketch-ring {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ak-ink);
  border-radius: 50%;
  translate: -50% -50%;
}

.sketch-word {
  white-space: nowrap;
  color: var(--pencil);
  font-size: 15px;
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.head .logo { margin-left: auto; }

/* Until the first moment is on the page, the page says hello in a few lines written on the rules,
   and there is nothing to tap. */
.welcome {
  grid-area: prompt;
  display: none;
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(20px, 5.4vw, 26px);
  line-height: var(--rule);
}

.welcome p { margin: 0 0 var(--rule); }
.welcome .welcome-soon { color: var(--pencil); font-family: var(--ak-font-body); font-size: 18px; font-style: italic; }

.quiz.is-waiting .welcome { display: block; }
.quiz.is-waiting .prompt,
.quiz.is-waiting .cards,
.quiz.is-waiting .controls,
.quiz.is-waiting .teach { display: none !important; }

/* The first moment of a first sitting opens with one welcoming line above it. */
.kicker {
  margin: 0 0 6px;
  color: var(--ak-ink);
  font-size: 18px;
  font-style: italic;
}

/* A pencilled note in the margin beside one moment, written at a slight slant like a real aside. */
.margin-note {
  justify-self: start;
  margin: 6px 0 0;
  padding: 2px 10px 4px;
  border-left: 2px solid var(--ak-accent-2);
  color: var(--ak-ink);
  font-size: 18px;
  font-style: italic;
  line-height: 1.35;
  rotate: -1deg;
}

.met-map { display: grid; gap: 6px; }

.met-chart {
  margin: 0;
  padding: 0;
  list-style: none;
}

.met-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas: "door name words" ". cells cells";
  column-gap: 8px;
  row-gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--grid-line);
}

.met-row .door { grid-area: door; }
.met-name { grid-area: name; font-weight: 600; }
.met-words { grid-area: words; color: var(--pencil); font-size: 15px; font-style: italic; }

.met-cells {
  grid-area: cells;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 2px;
  max-width: 300px;
}

.met-cells i {
  aspect-ratio: 1;
  border: 1px solid var(--pencil);
  border-radius: 1px;
}

.met-cells i.is-met {
  border-color: var(--ak-ink);
  background: var(--ak-accent);
}

.prompt { grid-area: prompt; }

.room-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--pencil);
  font-size: 17px;
  font-style: italic;
}

.moment {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(21px, min(6vw, 3.6dvh), 30px);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: pretty;
}

/* A margin note for the first round, on a solid slip so it always reads. */
.teach {
  grid-area: teach;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ak-ink);
  border-radius: 4px 14px 4px 14px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  line-height: 1.35;
}

.teach-text { flex: 1; }

.teach-arrow {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.teach[data-point="right"] .teach-arrow { rotate: -90deg; align-self: center; }

.is-taught {
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--ak-accent-2), 0 0 0 5px var(--ak-ink);
}

.cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  min-height: 0;
}

/* Each card is the painted ink outline on graph paper, stretched by its edges. */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 112px;
  max-height: min(100%, 320px);
  height: 100%;
  margin: 0;
  padding: 2px 4px;
  border-style: solid;
  border-width: 26px 26px 18px 18px;
  border-image-source: url("art/choice-card.png");
  border-image-slice: 62 62 36 36 fill;
  border-image-width: 26px 26px 18px 18px;
  border-image-repeat: stretch;
  background: none;
  color: var(--ak-choice-ink);
  cursor: pointer;
  text-align: left;
}

.card-text {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, min(4.6vw, 2.5dvh), 21px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Chosen: a faint marigold wash and a pencil tick in the corner. */
.card::after {
  content: '';
  position: absolute;
  inset: -12px -14px -8px -8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ak-accent-2) 42%, transparent);
  opacity: 0;
}

.card.is-chosen::after { opacity: 1; }

.card-tick {
  position: absolute;
  z-index: 2;
  top: -20px;
  left: -12px;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.card-tick { opacity: 0; }
.card.is-chosen .card-tick { stroke-dashoffset: 0; opacity: 1; }

.controls {
  grid-area: controls;
  display: grid;
  gap: 6px;
}

/* Twelve pencil boxes, three to a room, ticked as each is answered. */
.boxes {
  --box: min(20px, 4.6vw);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.box-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.box-row {
  display: flex;
  gap: 4px;
}

.boxes { justify-content: flex-start; gap: 18px; }

/* Drawn in soft pencil, each a little out of true, not a form's checkbox. */
.box {
  position: relative;
  width: var(--box);
  height: var(--box);
  border: 1px solid color-mix(in srgb, var(--pencil) 70%, transparent);
  border-radius: 3px 1px 4px 2px;
}

.box-row .box:nth-child(2) { rotate: 2deg; }
.box-row .box:nth-child(3) { rotate: -1.5deg; }

.box.is-now { border-color: var(--ak-ink); border-width: 1.5px; }

.box-tick {
  position: absolute;
  inset: -6px -4px -2px -2px;
  width: calc(100% + 6px);
  height: calc(100% + 8px);
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.box-tick { opacity: 0; }
.box.is-done .box-tick { stroke-dashoffset: 0; opacity: 1; }

.tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tools .kept {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ the page (result) */

.page {
  flex: 1;
  min-height: 0;
  width: min(100%, 560px);
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-areas: "logo" "yard" "text";
  align-content: start;
  gap: 12px;
  padding-bottom: 12px;
}

.logo-page { grid-area: logo; height: 34px; }

.yard {
  grid-area: yard;
  margin: 0 auto;
  width: min(100%, calc(44dvh * 368 / 384 + 44px), 400px);
}

.yard-middle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 4px;
}

/* The two side ends run up the walls, like notes on an architect's plan. */
.side-word {
  justify-self: center;
  color: var(--pencil);
  font-size: 14px;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.side-left { rotate: 180deg; }

.yard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--pencil);
  font-size: 14px;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}

.yard-row .door { width: 18px; height: 18px; color: var(--ak-ink); }

.door-word {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ak-ink);
}

.axis-word { font-weight: 600; color: var(--ak-ink); }

.yard-plan {
  position: relative;
  margin: 4px 0;
  aspect-ratio: 368 / 384;
}

.yard-plan img,
.yard-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.yard-marks .path-halo {
  fill: none;
  stroke: var(--ak-surface);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yard-marks .path {
  fill: none;
  stroke: var(--ak-ink-muted);
  stroke-width: 2.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

.yard-marks .ring-halo { fill: none; stroke: var(--ak-surface); stroke-width: 8; }
.yard-marks .ring-line { fill: none; stroke: var(--ak-ink-muted); stroke-width: 3; }

.yard-marks text {
  fill: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 17px;
  font-style: italic;
  paint-order: stroke;
  stroke: var(--ak-surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.yard-marks .blot-spread { fill: color-mix(in srgb, var(--ak-accent-2) 45%, transparent); }
.yard-marks .blot-core { fill: var(--ak-accent-2); stroke: var(--ak-ink); stroke-width: 3; }

.yard-marks .blot circle {
  transform-box: fill-box;
  transform-origin: center;
}

.page-text {
  grid-area: text;
  position: relative;
  display: grid;
  gap: 10px;
}

.reason {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 600;
  line-height: 1.25;
}

.says {
  margin: 0;
  color: var(--ak-ink);
  font-style: italic;
}

.tier-word { color: var(--pencil); }

/* What turned since last time: a pencilled note against a dotted margin rule. */
.since {
  margin: 0;
  padding-left: 12px;
  border-left: 3px dotted var(--ak-accent);
  color: var(--ak-ink);
  font-style: italic;
}

/* One strength and one watch-out, each on its own line with its own word, never run together. */
.sw-pair {
  display: grid;
  gap: 10px;
}

.sw {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--ak-accent);
}

.sw-watch { border-left-style: dashed; border-left-color: var(--ak-ink); }

.sw-word {
  color: var(--ak-accent);
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 700;
}

.sw-watch .sw-word { color: var(--ak-ink); }

/* What the next sitting holds, as a pencilled note against the margin. */
.next {
  margin: 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--ak-accent-2);
  color: var(--ak-ink);
}

.next strong { font-family: var(--ak-font-display); font-weight: 700; }

/* The headline of the written result: the tendency in one plain line. */
.tendency {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(19px, 4.8vw, 23px);
  font-weight: 600;
  line-height: 1.3;
}

/* A personal note about this sitting's dot, pencilled at a slight slant under the page title. */
.dot-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--ak-accent-2);
  color: var(--ak-ink);
  font-style: italic;
  rotate: -0.6deg;
}

.rooms-detail { display: grid; gap: 8px; }
.rooms-detail p { margin: 0; }

/* The site's ending, said once: a low ruled strip flush along the foot with the reason and its
   two buttons. The plan's words for the ending are written on the page itself, and the strip keeps
   its own room, so the page and its courtyard stay the thing to read. */
body #activity-chrome-ending.site-insightenes {
  inset: auto 0 0 0;
  padding: 0;
  justify-content: flex-end;
  background: none;
  pointer-events: none;
}
body #activity-chrome-ending.site-insightenes .ac-card {
  width: 100%;
  margin: 0;
  padding: 6px max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 58px;
  border: 0;
  border-top: 1.5px solid var(--ak-ink);
  border-radius: 0;
  font-size: 16px;
  line-height: 26px;
  background-image: linear-gradient(90deg, transparent 44px, var(--margin-line) 44px, var(--margin-line) 45px, transparent 45px);
  box-shadow: none;
  pointer-events: auto;
}
body #activity-chrome-ending.site-insightenes .ac-verdict { font-size: 18px; line-height: 26px; }
body #activity-chrome-ending.site-insightenes .ac-lines { display: none; }
body #activity-chrome-ending.site-insightenes .ac-actions { margin-top: 4px; gap: 8px; }
body #activity-chrome-ending.site-insightenes .ac-actions button { padding: 0 14px; font-size: 16px; white-space: nowrap; }

.play[data-ending] .page-actions,
.play[data-ending] #again-top { display: none; }
.play[data-ending] { padding-bottom: calc(var(--ending-h, 0px) + 6px); }

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* How the dot is placed: a short note and a hand-ruled list, one line per room. */
.how {
  display: grid;
  gap: 8px;
}

.how p { margin: 0; }

.room-chart {
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas: "door name" ". lean" ". asked";
  column-gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--grid-line);
}

.room-row .door { grid-area: door; align-self: center; }
.room-name { grid-area: name; font-weight: 600; }
.room-lean { grid-area: lean; }
.room-asked { grid-area: asked; color: var(--pencil); font-size: 14px; font-style: italic; }

/* A guess is a pencil cross, unlike any dot or ring. */
.yard-marks .cross-halo { fill: none; stroke: var(--ak-surface); stroke-width: 9; stroke-linecap: round; }
.yard-marks .cross-line { fill: none; stroke: var(--ak-ink); stroke-width: 3.5; stroke-linecap: round; }

/* ------------------------------------------------------------------ the guess */

.guess {
  flex: 1;
  min-height: 0;
  width: min(100%, 560px);
  margin: 0 auto;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
}

.guess-text {
  display: grid;
  gap: 10px;
}

.guess-text .logo { height: 34px; }
.guess-help { margin: 0; }

.guess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guess-actions .ink-btn[aria-disabled="true"] {
  border-color: var(--ak-outline);
  background: transparent;
  color: var(--ak-ink-muted);
}

.guess-plan {
  cursor: crosshair;
  touch-action: manipulation;
  border-radius: 6px;
}

.yard-guess { grid-area: auto; width: min(100%, calc(36dvh * 368 / 384 + 44px), 400px); }

.reading {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 38px;
}

.reading p { margin: 0; }

/* The doodled star lands out in the margin, beside the words, never on them. */
.star {
  position: absolute;
  top: -2px;
  left: 0;
  width: 30px;
  height: auto;
  pointer-events: none;
}

.future {
  display: grid;
  gap: 4px;
}

.future-word {
  color: var(--pencil);
  font-size: 16px;
  font-style: italic;
}

.future input {
  width: 100%;
  min-height: 48px;
  padding: 6px 2px;
  border: 0;
  border-bottom: var(--pen) solid var(--ak-ink);
  border-radius: 0;
  background: transparent;
  color: var(--ak-ink);
  font: inherit;
  font-size: 18px;
}

.future input::placeholder { color: var(--ak-ink-muted); font-style: italic; }

.note-state {
  min-height: 1.2em;
  margin: -4px 0 0;
  color: var(--pencil);
  font-size: 14px;
  font-style: italic;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shelf-title {
  margin: 10px 0 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 600;
}

.shelf,
.sources {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--grid-line);
}

.shelf-mark {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ak-ink-muted);
  stroke-width: 2.2;
}

.shelf-row.is-open .shelf-mark { fill: var(--ak-accent-2); stroke: var(--ak-ink); }

.shelf-words { display: grid; min-width: 0; }
.shelf-day { font-weight: 500; }

.shelf-note {
  overflow: hidden;
  color: var(--pencil);
  font-size: 15px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pen-btn.small { padding: 0 12px; font-size: 16px; }

.shelf-empty {
  padding: 8px 0;
  color: var(--pencil);
  font-style: italic;
}

.sources li {
  padding: 4px 0;
  color: var(--pencil);
  font-size: 15px;
}

.sources a {
  color: var(--ak-link);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ delete sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 33;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--ak-bg) 72%, transparent);
}

.sheet-page {
  width: min(100%, 460px);
  padding: 16px 20px 18px 56px;
  border: 1px solid var(--ak-ink);
  border-radius: 16px;
  background-color: var(--ak-surface);
  background-image: linear-gradient(90deg, transparent 40px, var(--margin-line) 40px, var(--margin-line) 41px, transparent 41px);
}

.sheet-page h2 {
  margin: 0 0 6px;
  font-family: var(--ak-font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.sheet-page p { margin: 0 0 14px; }

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ------------------------------------------------------------------ sideways */

@media (orientation: landscape) {
  :root { --margin-x: 26px; }

  .quiz {
    width: min(100%, 1000px);
    grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head prompt"
      "teach prompt"
      ". cards"
      "controls cards";
    column-gap: 28px;
    row-gap: 8px;
  }

  .prompt { align-self: end; }
  .teach { align-self: start; font-size: 18px; padding: 6px 10px; }
  .head .logo { margin-left: 0; height: 34px; }
  .head { justify-content: space-between; }
  .sketch-plan { width: 44px; }
  .moment { font-size: clamp(20px, min(2.6vw, 5.4dvh), 30px); }
  .card { max-height: 300px; }
  .card-text { font-size: clamp(16px, min(1.8vw, 4.4dvh), 21px); }
  .tools { flex-wrap: wrap; }
  .tools .kept { flex-basis: 100%; margin-left: 0; text-align: left; }

  :root { --yard-w: min(46vw, calc((100dvh - var(--top) - 96px) * 368 / 384 + 44px)); }

  .page {
    width: min(100%, 1000px);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr);
    grid-template-areas: "yard logo" "yard text";
    align-items: start;
    column-gap: 32px;
    row-gap: 6px;
    padding-top: 4px;
    overflow-y: auto;
  }

  .yard {
    position: sticky;
    top: 12px;
    align-self: start;
    width: var(--yard-w);
  }

  .page-text { padding-right: 8px; }

  /* Sideways the strip sits under the text column only: the courtyard keeps its full height, and
     the text column ends where the strip begins and scrolls on its own, fading at its foot. */
  .play[data-ending] { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .play[data-ending] .page-text {
    max-height: var(--text-max, calc(100dvh - var(--top) - var(--ending-h, 0px) - 60px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--ak-accent) transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  }

  body #activity-chrome-ending.site-insightenes {
    left: max(calc(var(--margin-x) + 10px + var(--yard-w) + 32px), calc((100vw - 1000px) / 2 + var(--yard-w) + 32px));
  }
  body #activity-chrome-ending.site-insightenes .ac-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    padding-left: 52px;
    background-image: linear-gradient(90deg, transparent 38px, var(--margin-line) 38px, var(--margin-line) 39px, transparent 39px);
  }
  body #activity-chrome-ending.site-insightenes .ac-verdict { flex: 1 1 100%; font-size: 17px; }
  body #activity-chrome-ending.site-insightenes .ac-actions { margin-top: 0; flex-wrap: nowrap; }
  body #activity-chrome-ending.site-insightenes .ac-actions button { padding: 0 12px; font-size: 15px; }

  .logo-page { justify-self: start; height: 32px; }
}

@media (orientation: landscape) {
  .guess {
    width: min(100%, 1000px);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 28px;
  }

  .yard-guess { width: min(46vw, calc((100dvh - var(--top) - 60px) * 368 / 384 + 44px)); }

}

/* A phone on its side with little height: the margin column drops the saves line (the result page
   carries it) and gives the first-round note more width, so Back and the boxes stay on screen. */
@media (orientation: landscape) and (max-height: 420px) {
  .quiz { grid-template-columns: minmax(270px, 1fr) minmax(0, 1.25fr); row-gap: 6px; }
  .quiz .tools .kept { display: none; }
  .sketch-plan { width: 40px; }
  .head .logo { height: 28px; }
  .teach { padding: 4px 8px; line-height: 1.3; }
  .teach-arrow { width: 24px; height: 24px; }
}

@media (orientation: portrait) {
  /* Upright, the courtyard sits above the two buttons. */
  .guess-text { display: contents; }
  .guess-actions { order: 2; }
  .yard-guess { order: 1; }

  .page-text { padding-bottom: 8px; }
}

@media (min-width: 900px) and (min-height: 600px) {
  .logo { height: 52px; }
  .sketch-plan { width: 72px; }
}

/* ------------------------------------------------------------------ slow motion, only when wanted */

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .card-tick,
  :root:not(.ac-still) .box-tick { transition: stroke-dashoffset 420ms ease-out; }
  :root:not(.ac-still) .card::after { transition: opacity 260ms ease; }
  :root:not(.ac-still) .sketch-ring { transition: left var(--slow) ease, top var(--slow) ease; }

  :root:not(.ac-still) .is-taught { animation: ring-pulse 1800ms ease-in-out infinite; }

  :root:not(.ac-still) .page:not([hidden]) .yard,
  :root:not(.ac-still) .page:not([hidden]) .page-text { animation: page-in 700ms ease-out both; }

  :root:not(.ac-still) .blot.is-new .blot-core { animation: blot-drop 800ms cubic-bezier(0.3, 0.9, 0.4, 1) 60ms both; }
  :root:not(.ac-still) .blot.is-new .blot-spread { animation: blot-spread 1400ms ease-out 650ms both; }

  :root:not(.ac-still) .reading.is-new p { animation: page-in 900ms ease-out both; }
  :root:not(.ac-still) .reading.is-new p + p { animation-delay: 500ms; }

  :root:not(.ac-still) .reading.is-new .star {
    --sweep: 0deg;
    mask-image: conic-gradient(from 200deg, #000 var(--sweep), transparent 0);
    animation: star-draw 1500ms ease-in-out 300ms forwards, star-settle 420ms ease-out 1800ms both;
  }
}

@keyframes page-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ak-accent-2), 0 0 0 5px var(--ak-ink); }
  50% { box-shadow: 0 0 0 7px var(--ak-accent-2), 0 0 0 9px var(--ak-ink); }
}

@keyframes blot-drop {
  0% { opacity: 0; translate: 0 -90px; scale: 0.6; }
  70% { opacity: 1; translate: 0 0; scale: 1.08; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes blot-spread {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}

@keyframes star-draw {
  to { --sweep: 360deg; }
}

@keyframes star-settle {
  0% { scale: 1.12; }
  100% { scale: 1; }
}