/* Kitchen Table Sketches: a two-colour riso comic page. The sheet is the big panel; the prompt is a
   caption strip of taped cards; the tools are one band of tilted paper chips along the bottom edge. */

:root {
  --gutter: 6px;
  --line: 2.5px;
  --tape: color-mix(in srgb, var(--ak-accent-2) 72%, transparent);
  --wob-a: 10px 4px 12px 5px / 5px 12px 4px 10px;
  --wob-b: 4px 11px 6px 13px / 12px 5px 13px 4px;
  --wob-c: 14px 6px 9px 4px / 4px 9px 6px 14px;
  --status: var(--ac-status-h, 72px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --sheet-w: min(calc(100dvh - var(--status) - 14px - var(--safe-b)), 58dvw);
}

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

[hidden] { display: none !important; }

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

body {
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art), var(--ak-backdrop-layer, linear-gradient(var(--ak-bg), var(--ak-bg)));
  background-size: var(--ak-bg-size), cover, cover;
  background-position: 0 0, center, center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

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

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

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

/* The chrome's status chips, a size smaller so they keep to one line on a phone. */
#activity-chrome-status { font-size: 13px; }

/* ---------- Views: panel swap ---------- */

.app {
  position: fixed;
  inset: 0;
  touch-action: manipulation;
}

.view {
  position: absolute;
  inset: 0;
  padding:
    calc(var(--status) + 4px)
    max(var(--gutter), var(--safe-r))
    max(var(--gutter), var(--safe-b))
    max(var(--gutter), var(--safe-l));
  visibility: hidden;
  opacity: 0;
  translate: 8% 0;
  pointer-events: none;
}

.view.is-on {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.view.is-leaving { translate: -8% 0; }

/* ---------- Panels: ink line, yellow plate a hair out of register ---------- */

.panel {
  position: relative;
  isolation: isolate;
  border: var(--line) solid var(--ak-ink);
  border-radius: var(--wob-a);
  background-color: var(--ak-surface);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  color: var(--ak-ink);
}

.panel::after {
  content: '';
  position: absolute;
  inset: calc(var(--line) * -1);
  border: var(--line) solid var(--ak-accent-2);
  border-radius: inherit;
  transform: translate(2px, 1.5px);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* ---------- The sheet view ---------- */

.view-sheet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo caption chips"
    "cards cards cards"
    "sheet sheet sheet"
    "tools tools tools";
  gap: var(--gutter);
}

.panel-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--wob-b);
}

.logo {
  display: block;
  height: 44px;
  width: auto;
  rotate: -3deg;
}

.panel-caption {
  grid-area: caption;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: var(--wob-c);
  background-color: var(--ak-choice-selected-bg);
  background-image: none;
  color: var(--ak-choice-selected-ink);
  rotate: -0.4deg;
}

.panel-caption.is-empty {
  background-color: var(--ak-surface);
  background-image: var(--ak-bg-art);
  color: var(--ak-ink-muted);
}

.prompt-line {
  margin: 0;
  font-size: clamp(15px, 4.1vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.panel-chips {
  grid-area: chips;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Paper chips ---------- */

.chip {
  --tilt: -1.5deg;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 3px 5px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.05;
  rotate: var(--tilt);
}

.chip:nth-child(even) { --tilt: 1.5deg; }
.chip:nth-child(3n) { --tilt: -0.6deg; }

.chip svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.chip[aria-pressed="true"] {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  border-width: 3px;
}

.chip:active { translate: 0 1px; }

@media (hover: hover) {
  .chip:hover { background: var(--ak-choice-bg); }
  .chip[aria-pressed="true"]:hover { background: var(--ak-choice-selected-bg); }
}

.chip-hint {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

/* ---------- Prompt cards ---------- */

.panel-cards {
  grid-area: cards;
  container: cards / inline-size;
  padding: 12px 8px 8px;
  border-radius: var(--wob-b);
}

.cards {
  --card-h: clamp(50px, calc((100dvh - 100dvw - var(--status) - 190px) / 2), 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-rows: var(--card-h) var(--card-h);
  grid-template-areas:
    "feeling thing thing"
    "rule rule shuffle";
  gap: 8px 8px;
}

@container cards (min-width: 420px) {
  .cards {
    --card-h: clamp(52px, 12dvh, 80px);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
    grid-template-rows: var(--card-h);
    grid-template-areas: "feeling thing rule shuffle";
  }
}

.get-prompt {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  margin: 0;
  padding: 8px 18px;
  border: 3px solid var(--ak-ink);
  border-radius: var(--wob-c);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(15px, 4.4vw, 22px);
  rotate: -0.8deg;
}

.get-prompt::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 70px;
  height: 18px;
  background: var(--tape);
  translate: -50% 0;
  rotate: 3deg;
}

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

@media (hover: hover) {
  .get-prompt:hover { background: var(--ak-btn-active); }
}

/* A small stack of three blank cards, so the button looks like a deck. */
.get-stack {
  position: relative;
  width: 34px;
  height: 40px;
  flex: none;
}

.get-stack i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ak-ink);
  border-radius: 4px 6px 4px 5px;
  background: var(--ak-surface);
}

.get-stack i:nth-child(1) { rotate: -12deg; background: var(--ak-accent-2); }
.get-stack i:nth-child(2) { rotate: 6deg; }
.get-stack i:nth-child(3) { rotate: -2deg; }

.card {
  --rest: -1.5deg;
  position: relative;
  container-type: size;
  min-width: 0;
  rotate: var(--rest);
}

.card-feeling { grid-area: feeling; --rest: -2deg; }
.card-thing { grid-area: thing; --rest: 1.2deg; }
.card-rule { grid-area: rule; --rest: -0.8deg; }

/* A strip of tape above each card, holding it to the strip and clear of its word. */
.card::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 22%;
  width: 40px;
  height: 14px;
  background: var(--tape);
  rotate: -5deg;
  z-index: 2;
}

.card-thing::before { left: 30%; rotate: 4deg; }
.card-rule::before { left: 46%; }

.card-art {
  position: absolute;
  inset: 0;
  border-style: solid;
}

/* The painted cards stretch only in their plain middles, so hole, badge and notches keep their shape. */
.card-thing .card-art {
  border-image: url("art/thing-card.png") 160 120 30 30 fill;
  border-width: calc(100cqh * 160 / 384) calc(100cqh * 120 / 384) calc(100cqh * 30 / 384) calc(100cqh * 30 / 384);
}

.card-rule .card-art {
  border-image: url("art/rule-card.png") 28 72 28 72 fill;
  border-width: calc(100cqh * 28 / 176) calc(100cqh * 72 / 176);
}

/* The luggage tag lies on its side: string and hole on the left, the word on the right. */
.card-feeling .card-art {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  border-image: url("art/feeling-card.png") 140 25 30 25 fill;
  border-width: calc(100cqh * 140 / 207) calc(100cqh * 25 / 207) calc(100cqh * 30 / 207) calc(100cqh * 25 / 207);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.card-word {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.08;
  text-align: center;
}

.card-feeling .card-word {
  top: calc(100cqh * 30 / 207);
  bottom: calc(100cqh * 30 / 207);
  left: calc(100cqh * 148 / 207);
  right: calc(100cqh * 36 / 207);
}

.card-thing .card-word {
  top: calc(100cqh * 26 / 384);
  bottom: calc(100cqh * 30 / 384);
  left: calc(100cqh * 26 / 384);
  right: calc(100cqh * 126 / 384);
}

.card-rule .card-word {
  top: calc(100cqh * 26 / 176);
  bottom: calc(100cqh * 26 / 176);
  left: calc(100cqh * 76 / 176);
  right: calc(100cqh * 76 / 176);
  flex-direction: column;
  gap: 0.15em;
  color: var(--ak-btn-ink);
}

/* What counts under the rule, in a smaller pencil hand, so it stays in sight while drawing. */
.rule-gloss {
  font-size: 0.72em;
  font-weight: 500;
  font-style: italic;
  opacity: 0.88;
}

.chip-shuffle {
  grid-area: shuffle;
  align-self: stretch;
  min-width: 56px;
  --tilt: 2deg;
}

/* ---------- The drawing sheet ---------- */

.panel-sheet {
  grid-area: sheet;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 10px;
  border-radius: var(--wob-c);
  background-color: color-mix(in srgb, var(--ak-accent-2) 22%, var(--ak-bg));
}

.paper {
  position: relative;
  width: var(--paper, 240px);
  height: var(--paper, 240px);
  border: 1.5px solid var(--ak-ink);
  border-radius: 2px 3px 2px 4px;
  background: var(--ak-surface);
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.paper canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.paper:focus-visible { outline-offset: 4px; }

.tape {
  position: absolute;
  width: 58px;
  height: 18px;
  background: var(--tape);
  pointer-events: none;
}

.tape-a { top: -12px; left: -22px; rotate: -38deg; }
.tape-b { top: -12px; right: -22px; rotate: 38deg; }

.pen {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--ak-ink);
  border-radius: 50%;
  background: var(--ak-surface);
  translate: -50% -50%;
  pointer-events: none;
}

.pen.is-down { background: var(--pen-colour, var(--ak-ink)); }

/* ---------- The tool band ---------- */

.panel-tools {
  grid-area: tools;
  display: grid;
  gap: 6px;
  padding: 6px 6px 4px;
  border-radius: var(--wob-b);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(44px, 1fr));
}

.swatch {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.swatch .paint {
  position: absolute;
  inset: 8px 4px 6px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--c);
  rotate: var(--tilt, 0deg);
}

.swatch[aria-pressed="true"] .paint {
  inset: 1px 1px 10px;
  border-width: 3px;
}

/* The picked colour stands on a small ink notch. */
.swatch[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom: 7px solid var(--ak-ink);
  border-top: 0;
  translate: -50% 0;
}

.swatches.is-erasing .swatch[aria-pressed="true"] .paint { border-style: dashed; }

.tool-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr)) minmax(64px, 1.6fr);
  gap: 4px;
}

.tool { min-width: 44px; }

.size .dot {
  display: block;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--brush, var(--ak-ink));
  box-shadow: 0 0 0 1.5px var(--ak-ink);
}

.size[data-size="s"] .dot { --d: 6px; }
.size[data-size="m"] .dot { --d: 13px; }
.size[data-size="l"] .dot { --d: 24px; }

.done {
  --tilt: -2deg;
  min-width: 64px;
  border-width: 2.5px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
}

.done::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 36px;
  height: 13px;
  background: var(--tape);
  translate: -50% 0;
  rotate: 6deg;
}

.done[aria-disabled="true"] {
  border-style: dashed;
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
}

@media (hover: hover) {
  .done:not([aria-disabled="true"]):hover { background: var(--ak-btn-active); }
}

/* A phone in its narrowest: the tool band runs edge to edge, like a comic's bottom tier. */
@media (orientation: portrait) and (max-width: 400px) {
  .panel-tools {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: 4px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .tool-row { gap: 4px; }
}

/* ---------- The fridge view ---------- */

.view-fridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "go" "wall" "more";
  gap: var(--gutter);
}

.panel-fridge-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--wob-c);
}

.panel-fridge-head .logo { height: 52px; }

.fridge-words { min-width: 0; }

.fridge-title {
  display: inline-block;
  margin: 0 0 4px;
  padding: 2px 10px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 15px;
  font-weight: 400;
  rotate: -1.5deg;
}

.quiet {
  margin: 2px 0 0;
  color: var(--ak-ink-muted);
  font-size: 14px;
  line-height: 1.3;
}

.panel-fridge-go { grid-area: go; display: flex; }

.big-go {
  position: relative;
  flex: 1;
  min-height: 56px;
  margin: 4px 0 0;
  padding: 8px 18px;
  border: 3px solid var(--ak-ink);
  border-radius: var(--wob-c);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(15px, 4.4vw, 20px);
  rotate: 0.6deg;
}

.big-go::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 18%;
  width: 64px;
  height: 17px;
  background: var(--tape);
  rotate: -4deg;
}

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

@media (hover: hover) {
  .big-go:hover { background: var(--ak-btn-active); }
}

.panel-wall {
  grid-area: wall;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 14px 18px;
  border-radius: var(--wob-a);
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ak-accent) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ak-accent) 13%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

.wall-empty {
  max-width: 30ch;
  margin: 12px auto;
  padding: 12px 14px;
  border: 2px dashed var(--ak-ink-muted);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 17px;
  line-height: 1.35;
  rotate: -1deg;
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 42%), 1fr));
  gap: 26px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wall > li { display: flex; justify-content: center; }

.snap-button {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---------- A snapshot: the painted frame over a sketch redrawn from its strokes ---------- */

.snap {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 335 / 384;
  rotate: var(--tilt, 0deg);
  filter: drop-shadow(0 3px 2px color-mix(in srgb, var(--ak-ink) 22%, transparent));
}

.snap canvas {
  position: absolute;
  left: 9.4%;
  top: 16.7%;
  width: 81.5%;
  height: 63.9%;
  background: var(--ak-surface);
}

.snap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.snap-words {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 81.5%;
  bottom: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ak-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
}

/* ---------- The last panel ---------- */

.view-last { display: grid; }

.panel-last {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 14px;
  border-radius: var(--wob-c);
}

.last-caption {
  justify-self: start;
  margin: 0;
  padding: 4px 12px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 14px;
  rotate: -1.2deg;
}

.snap-last { width: min(78vw, calc((100dvh - var(--status) - 300px) * 335 / 384), 420px); min-width: 180px; }

.bubble {
  position: relative;
  max-width: min(34ch, 92%);
  margin: 0;
  padding: 20px 34px;
  border: var(--line) solid var(--ak-ink);
  border-radius: 46% 54% 50% 50% / 48% 44% 56% 52%;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* The tail points down at the snapshot. */
.bubble::after {
  content: '';
  position: absolute;
  left: 30%;
  bottom: -18px;
  width: 22px;
  height: 22px;
  border-right: var(--line) solid var(--ak-ink);
  border-bottom: var(--line) solid var(--ak-ink);
  background: var(--ak-surface);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: skewX(-24deg) rotate(12deg);
}

.bubble::before {
  content: '';
  position: absolute;
  inset: calc(var(--line) * -1);
  border: var(--line) solid var(--ak-accent);
  border-radius: inherit;
  transform: translate(3px, 2px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- The in-page sheet ---------- */

.ask {
  position: fixed;
  inset: 0;
  z-index: 33;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
  background: color-mix(in srgb, var(--ak-ink) 38%, transparent);
}

.ask-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 440px);
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 20px 18px;
  border: var(--line) solid var(--ak-ink);
  border-radius: var(--wob-c);
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -0.8deg;
}

.ask-panel::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 72px;
  height: 18px;
  background: var(--tape);
  translate: -50% 0;
  rotate: -3deg;
}

.ask-view {
  width: min(78vw, calc(100dvh - 250px), 380px);
  min-width: 120px;
  aspect-ratio: 1;
  border: 1.5px solid var(--ak-ink);
  background: var(--ak-surface);
}

.ask-view canvas { display: block; width: 100%; height: 100%; }

.ask-title {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.ask-text {
  margin: 0;
  color: var(--ak-ink);
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
}

.ask-text:empty { display: none; }

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.ask-actions button {
  min-width: 48px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-weight: 600;
}

.ask-actions button:nth-child(odd) { rotate: -1deg; }
.ask-actions button:nth-child(even) { rotate: 1deg; }

.ask-actions .is-main {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

/* ---------- The first-round guide ---------- */

.coach {
  position: fixed;
  inset: 0;
  z-index: 28;
  pointer-events: none;
}

.coach-ring {
  position: fixed;
  border: 4px solid var(--ak-accent);
  border-radius: 16px 10px 18px 12px;
  box-shadow: 0 0 0 3px var(--ak-surface), inset 0 0 0 2px var(--ak-surface);
}

.coach-arrow {
  position: fixed;
  width: 30px;
  height: 44px;
  color: var(--ak-accent);
  filter: drop-shadow(0 0 2px var(--ak-surface));
}

.coach-text {
  position: fixed;
  max-width: min(330px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 14px;
  border: var(--line) solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Sideways: the sheet on one side, the strip and tools on the other ---------- */

@media (orientation: landscape) {
  .view-sheet {
    grid-template-columns: var(--sheet-w) auto minmax(0, 1fr) auto;
    max-width: calc(var(--sheet-w) + 640px);
    margin-inline: auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sheet logo caption chips"
      "sheet cards cards cards"
      "sheet newest newest newest"
      "sheet tools tools tools";
  }

  .panel-sheet { padding: 8px; }
  .logo { height: 40px; }
  .prompt-line { font-size: clamp(15px, 2.2vw, 20px); }

  .view-fridge {
    grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr);
    /* The words may scroll; the button under them always shows. */
    grid-template-rows: minmax(0, auto) auto minmax(0, 1fr);
    grid-template-areas: "head wall" "go wall" "more wall";
    max-width: 1280px;
    margin-inline: auto;
  }

  .panel-fridge-head {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    overflow-y: auto;
  }

  .panel-last {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "caption caption" "snap bubble";
    align-items: center;
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
  }

  .last-caption { grid-area: caption; }
  .snap-last { grid-area: snap; width: min(calc((100dvh - var(--status) - 140px) * 335 / 384), 44vw, 440px); min-width: 0; }
  .bubble { grid-area: bubble; justify-self: start; }

  /* Sideways, the tail points left at the snapshot. */
  .bubble::after {
    left: -18px;
    top: 44%;
    bottom: auto;
    transform: rotate(90deg) skewX(-20deg);
  }
}

/* ---------- Motion: slow and quiet, only when wanted ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .view {
    transition: opacity 420ms ease, translate 520ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 520ms;
  }

  :root:not(.ac-still) .view.is-on {
    transition: opacity 420ms ease, translate 520ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  :root:not(.ac-still) .card.is-landing {
    animation: card-slap 420ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
    animation-delay: var(--delay, 0ms);
  }

  :root:not(.ac-still) .card.is-landing::before {
    animation: tape-wobble 520ms ease-out both;
    animation-delay: calc(var(--delay, 0ms) + 260ms);
  }

  :root:not(.ac-still) .snap.is-new {
    animation: snap-drop 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  :root:not(.ac-still) .bubble.is-in {
    animation: bubble-in 360ms ease-out 300ms both;
  }

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

  :root:not(.ac-still) .coach-text,
  :root:not(.ac-still) .coach-arrow {
    animation: coach-in 320ms ease-out both;
  }
}

@keyframes card-slap {
  from { opacity: 0; transform: translateY(-16px) rotate(-6deg) scale(1.05); }
  65% { opacity: 1; transform: translateY(0) rotate(1deg) scale(1); }
  to { opacity: 1; transform: none; }
}

@keyframes tape-wobble {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes snap-drop {
  from { opacity: 0; transform: translateY(-36px) rotate(5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes bubble-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
}

@keyframes coach-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- The kitchen shelf: sixteen things, the drawn ones ticked ---------- */

/* A small sticker on the caption's top edge, clear of the line, when the thing is new to the shelf. */
.new-mark {
  position: absolute;
  top: -11px;
  right: 10px;
  padding: 1px 8px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  rotate: 2.5deg;
  pointer-events: none;
}

/* Room under the sticker, so it never sits on the line. */
.panel-caption:has(.new-mark:not([hidden])) { padding-top: 16px; }

.shelf {
  margin: 0 0 22px;
  padding: 12px 12px 14px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-c);
  background: var(--ak-surface);
  rotate: -0.4deg;
}

.shelf-title {
  display: inline-block;
  margin: 0 0 4px;
  padding: 2px 10px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 400;
  rotate: -1.2deg;
}

.shelf-note {
  margin: 4px 0 10px;
  color: var(--ak-ink);
  font-size: 14px;
  line-height: 1.3;
}

.shelf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1.5px dashed var(--ak-ink-muted);
  border-radius: var(--wob-b);
  background: var(--ak-bg);
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.shelf-item.is-drawn {
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-weight: 600;
}

.shelf-item svg { width: 14px; height: 14px; flex: none; }

/* ---------- The pinned print, fitted to the screen ---------- */

/* Never centred past the top edge; a solid wash so the last panel behind does not show through.
   Prefixed with body so these win over the chrome's own styles, which load after this file. */
body #activity-chrome-ending.site-inspicacity {
  justify-content: safe center;
  background: color-mix(in srgb, var(--ak-bg) 94%, transparent);
}

/* The card is tilted, so it stays a little narrower than the screen and its corners stay on it. */
body #activity-chrome-ending.site-inspicacity .ac-card { width: min(calc(100% - 24px), 520px); }

/* The print's tape strips sit in a little space of their own, off the line above. */
body #activity-chrome-ending.site-inspicacity .ac-work { margin-top: 14px; }

@media (orientation: portrait) and (max-height: 760px) {
  body #activity-chrome-ending.site-inspicacity { padding-block: 12px; }
  body #activity-chrome-ending.site-inspicacity .ac-card { gap: 6px; padding: 26px 18px 14px; }
  body #activity-chrome-ending.site-inspicacity .ac-number { font-size: 16px; }
  body #activity-chrome-ending.site-inspicacity .ac-verdict { font-size: 22px; }
  body #activity-chrome-ending.site-inspicacity .ac-lines { font-size: 15px; line-height: 1.35; }
  body #activity-chrome-ending.site-inspicacity .ac-work img { max-height: 25dvh; }
}

/* Sideways and short: the print beside its words, sized to the height, all of it on screen. */
@media (orientation: landscape) and (max-height: 620px) {
  body #activity-chrome-ending.site-inspicacity {
    align-items: safe center;
    /* The right side stays clear of the ? help button. */
    padding: max(10px, var(--safe-t)) max(76px, var(--safe-r)) max(10px, var(--safe-b)) max(16px, var(--safe-l));
  }

  /* The pin moves to the print's corner, off the words. */
  body #activity-chrome-ending.site-inspicacity .ac-card::before { left: 22px; top: 8px; translate: 0 0; }

  body #activity-chrome-ending.site-inspicacity .ac-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    row-gap: 6px;
    width: min(100%, 860px);
    padding: 16px 20px 14px;
    text-align: left;
  }

  body #activity-chrome-ending.site-inspicacity .ac-card > * { grid-column: 2; }

  body #activity-chrome-ending.site-inspicacity .ac-work {
    grid-column: 1;
    grid-row: 1 / span 8;
    margin: 8px 0;
    border-width: 8px 8px 20px;
  }

  body #activity-chrome-ending.site-inspicacity .ac-work img {
    max-height: calc(100dvh - 140px);
    width: auto;
  }

  body #activity-chrome-ending.site-inspicacity .ac-number { font-size: 15px; }
  body #activity-chrome-ending.site-inspicacity .ac-verdict { font-size: clamp(18px, 2.6vw, 26px); }
  body #activity-chrome-ending.site-inspicacity .ac-lines { font-size: 14px; line-height: 1.3; }
  body #activity-chrome-ending.site-inspicacity .ac-line { margin-bottom: 3px; }
  body #activity-chrome-ending.site-inspicacity .ac-actions { justify-content: flex-start; }
}

/* ---------- How the rule card works with the pen: a pencil note on the empty sheet ---------- */

.sheet-note {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  translate: 0 -50%;
  pointer-events: none;
}

.rule-tip {
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: clamp(13px, 4.2cqmin, 18px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

/* A dotted first mark in riso blue, like a pencil line waiting to be gone over. */
.first-squiggle {
  width: min(120px, 40cqmin);
  height: auto;
  color: var(--ak-accent);
  rotate: -4deg;
}

.paper { container-type: size; }

.card-rule,
.card-feeling,
.card-thing { cursor: pointer; }

/* The worked example on the empty sheet, above the rule's how-to: the first thing to read. */
.feeling-tip {
  margin: 0;
  color: var(--ak-ink);
  font-size: clamp(14px, 4.8cqmin, 20px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* How hard the rule is: a small sticker on the ticket's corner, clear of the rule word. */
.rule-tier {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: -9px;
  padding: 0 6px;
  border: 1.5px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  rotate: 3deg;
}

/* ---------- Today's special: a week of day stamps ---------- */

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 44px;
  padding: 2px 1px;
  border: 1.5px dashed var(--ak-ink-muted);
  border-radius: var(--wob-b);
  background: var(--ak-bg);
  color: var(--ak-ink-muted);
  font-size: 11px;
  font-weight: 600;
}

.week-day:nth-child(odd) { rotate: -2deg; }
.week-day:nth-child(even) { rotate: 1.5deg; }

.week-day.is-today {
  border: 2.5px solid var(--ak-accent);
  color: var(--ak-ink);
}

.week-day.is-kept {
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.week-day svg { width: 16px; height: 16px; }

/* ---------- The ending's button: big, level, easy to read and tap ---------- */

/* The card hangs tilted like a print; its button row turns back level against that tilt. */
body #activity-chrome-ending.site-inspicacity .ac-actions { rotate: 2deg; }

body #activity-chrome-ending.site-inspicacity .ac-actions button {
  min-height: 56px;
  padding: 0 28px;
  border-width: 2.5px;
  font-size: 17px;
  rotate: 0deg;
}

body #activity-chrome-ending.site-inspicacity .ac-actions .ac-replay {
  min-width: min(100%, 260px);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

@media (hover: hover) {
  body #activity-chrome-ending.site-inspicacity .ac-actions .ac-replay:hover { background: var(--ak-btn-active); }
}

/* ---------- Before the first deal: the kitchen table, set ---------- */

.table-note {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 10px;
  overflow: hidden;
  border: 1.5px solid var(--ak-ink);
  border-radius: 3px 5px 2px 6px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

#table-note-1 { grid-area: note1; rotate: -2deg; }
#table-note-2 { grid-area: note2; rotate: 1.4deg; }

.cards[data-dealt="false"] {
  grid-template-areas:
    "note1 note2 note2"
    "go go go";
}

.cards[data-dealt="false"] .get-prompt { grid-area: go; }

@container cards (min-width: 420px) {
  .cards[data-dealt="false"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "note1 note2 go";
  }
}

/* ---------- The newest print, pinned within sight of the sheet ---------- */

.chip-print {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ak-ink);
  background: var(--ak-surface);
  rotate: -4deg;
}

.newest-slot {
  grid-area: newest;
  display: none;
  container: newest / size;
  min-height: 0;
}

.panel-newest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px;
  font: inherit;
  cursor: pointer;
}

.newest-label {
  padding: 1px 8px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-size: 12px;
  font-weight: 600;
  rotate: -1.5deg;
}

.newest-snap {
  width: min(100%, calc((100cqh - 40px) * 335 / 384));
  --tilt: 2deg;
}

.newest-snap .snap-words { font-size: 10px; }

@media (orientation: landscape) {
  .newest-slot { display: block; }
}

/* Too short a space for a print to read: leave it out rather than squeeze it. */
@container newest (max-height: 120px) {
  .panel-newest { display: none; }
}

/* ---------- The fridge, celebrating the sketch just saved ---------- */

.fresh {
  container: fresh / inline-size;
  margin: 0 0 22px;
}

.fresh-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 12px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 14px;
  rotate: -1.5deg;
}

.fresh-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 20px;
}

.fresh-snap-button { max-width: min(260px, calc((100dvh - var(--status) - 120px) * 335 / 384)); }
.fresh-snap .snap-words { font-size: 16px; }

.fresh-bubble { max-width: min(30ch, 100%); }

@container fresh (min-width: 460px) {
  .fresh-row {
    flex-direction: row;
    justify-content: center;
  }

  .fresh-snap-button { flex: 0 0 min(46%, 260px, calc((100dvh - var(--status) - 120px) * 335 / 384)); }

  /* Beside the print, the bubble's tail points left at it. */
  .fresh-bubble::after {
    left: -18px;
    top: 44%;
    bottom: auto;
    transform: rotate(90deg) skewX(-20deg);
  }
}

.shelf-item.is-fresh,
.week-day.is-fresh {
  outline: 3px solid var(--ak-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .shelf-item.is-fresh,
  :root:not(.ac-still) .week-day.is-fresh {
    animation: fresh-settle 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
  }
}

@keyframes fresh-settle {
  from { outline-color: transparent; transform: scale(0.92); }
  to { outline-color: var(--ak-accent); transform: none; }
}

/* ---------- The fridge scrolls: a visible bar, and a taped button beside the wall while there is more below ---------- */

.panel-wall {
  scrollbar-width: thin;
  scrollbar-color: var(--ak-accent) transparent;
}

.wall:not(:empty) { margin-bottom: 26px; }

/* Under the wall upright, under Pull a prompt sideways: never over a snapshot. */
.wall-more {
  grid-area: more;
  align-self: end;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin: 0 0 4px;
  padding: 6px 16px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wob-b);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--ak-ink);
  rotate: -1deg;
}

.wall-more[hidden] { display: none; }
.wall-more svg { width: 20px; height: 20px; flex: none; }
.wall-more:active { translate: 0 2px; box-shadow: 1px 1px 0 var(--ak-ink); }

/* Sideways on a phone the fridge is short, so it turns in whole pages: the new sketch, each row of
   snapshots, then the specials and the shelf. Each page is the wall's own height and the scroll snaps
   to them, so no snapshot is ever left cut off at the edge. */
@media (orientation: landscape) and (max-height: 500px) {
  .panel-wall {
    container-type: size;
    overflow-anchor: none;
    display: flex;
    flex-direction: column;
    /* Wider than the padding, so the next page's tilted edge stays out of sight. */
    gap: 36px;
    padding: 12px 14px;
    scroll-snap-type: y mandatory;
  }
  .panel-wall > * { flex: none; margin: 0; }
  .fresh,
  .wall-empty { scroll-snap-align: start; }
  .fresh { display: flex; flex-direction: column; height: 100cqh; }
  .fresh[hidden] { display: none; }
  .fresh-label { align-self: flex-start; margin-bottom: 8px; }
  .fresh-row { flex: 1; min-height: 0; }
  .fresh-snap-button { max-width: min(220px, calc((100cqh - 56px) * 335 / 384)); }
  @container fresh (min-width: 460px) {
    .fresh-snap-button { flex-basis: min(40%, 220px, calc((100cqh - 56px) * 335 / 384)); }
  }
  .wall { gap: 36px 18px; }
  .wall:not(:empty) { margin-bottom: 0; }
  .wall > li { align-items: center; height: 100cqh; scroll-snap-align: start; }
  .wall .snap-button { max-width: min(220px, calc((100cqh - 16px) * 335 / 384)); }
  /* The specials and the shelf together run past one page: one stop at the top of them, one at the very end. */
  .shelf-week { scroll-snap-align: start; }
  .panel-wall > .shelf:last-child { scroll-snap-align: end; }
  .shelf + .shelf { margin-top: -10px; }
  #kept-how { display: none; }
  /* The fridge words give way (they scroll) so Pull a prompt and More on the fridge both have room. */
  .view-fridge { grid-template-rows: minmax(0, 1fr) auto auto; }
  .panel-fridge-head { gap: 4px; padding-block: 6px; }
  .panel-fridge-head .logo { height: 36px; }
  .panel-fridge-head .quiet { font-size: 13px; }
}

/* ---------- The opening, sideways: every line and both buttons on one screen ---------- */

/* Prefixed with body so these win over the start screen's own styles, which load after this file. */
@media (orientation: landscape) and (max-height: 500px) {
  body #activity-start.is-scene { padding-block: 12px; }
  body #activity-start .ak-scene {
    gap: 12px;
    min-height: calc(100dvh - 40px);
  }
  body #activity-start .ak-scene .ak-logo { max-height: 56px; }
  body #activity-start .ak-scene-lines { max-width: min(100%, 720px); gap: 6px; }
  body #activity-start .ak-scene-line { font-size: clamp(17px, 2.6vw, 22px); line-height: 1.25; }
  body #activity-start .ak-scene-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  /* The main button first, as upright; the start screen's short rule already gives it order 2. */
  body #activity-start .ak-scene .ak-jump { order: 3; margin: 0; }
}

/* ---------- The notes after "Open the sketchbook": the first move and its button come first ---------- */

/* Straight under the title: what to tap, then the button itself, in view the moment the page opens.
   The notes follow for anyone who wants them. The doubled id matches the start screen's own short rule. */
body #activity-start#activity-start.is-instructions .ak-sheet { display: flex; flex-direction: column; }
body #activity-start#activity-start.is-instructions .ak-head { order: 0; }
body #activity-start#activity-start.is-instructions .ak-first { order: 1; margin-top: 14px; }
body #activity-start#activity-start.is-instructions .ak-go {
  order: 2;
  position: relative;
  bottom: auto;
  align-self: center;
  margin: 18px auto 4px;
}
body #activity-start#activity-start.is-instructions .ak-howto { order: 3; margin-top: 26px; }
body #activity-start#activity-start.is-instructions .ak-how { order: 4; }
/* Pull a prompt sits right there, so a second way past the notes would only be one more thing to read. */
body #activity-start#activity-start.is-instructions .ak-jump { display: none; }

/* The kitchen thing the next prompt brings, written small under Pull a prompt on the fridge. */
.big-go-next {
  display: block;
  margin-top: 2px;
  font-family: var(--ak-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}