/* ── CONVENTIONS ─────────────────────────────────────────────
   Before editing this file you MUST read, IN FULL (not skimmed),
   the governing CSS conventions — mandatory for any Claude or
   Codex session writing CSS here:
   C:\Users\catsc\Documents\Projects\Aza-core\conventions\code\CSS.md
   ──────────────────────────────────────────────────────────── */

/* 1. Tokens. One blue ink on cream paper, laid down in washes that darken
      where they overlap, and one ochre for the highlighter and the strap. */
:root {
  --paper: oklch(96% 0.025 90);        /* ~#f8f2e2 */
  --paper-deep: oklch(92% 0.03 88);    /* ~#ebe3cd */
  --ink-blue: oklch(42% 0.17 262);     /* ~#2a4fa8 fountain-pen blue */
  --ink-deep: oklch(28% 0.13 262);     /* ~#14306e pooled ink */
  --ink-text: oklch(30% 0.12 262);     /* ~#1c3573 readable on cream */
  --ink-soft: oklch(52% 0.1 262);      /* ~#5b76b8 */
  --ochre: oklch(76% 0.15 80);         /* ~#dfa63a the ballerina's yellow */
  --ochre-wash: oklch(85% 0.12 88 / 0.55);
  --leaf: oklch(60% 0.14 145);         /* ~#4f8f4c a wash of green for the trees */
  --coral: oklch(63% 0.17 32);         /* ~#d9634b the passenger's coat */
  --leather: oklch(54% 0.11 58);       /* ~#9e6a3a the suitcase, like the other lessons */
  --bark: oklch(45% 0.08 60);          /* ~#7a5a3c tree trunks */
  --fleece: oklch(93% 0.05 85);        /* ~#f3e4bf the doodle's cream coat */
  --outline: oklch(42% 0.07 60);       /* ~#735234 the doodle's warm brown line */
  --board: oklch(97% 0.02 90);         /* ~#fbf7ea a painted board */
  --petal: oklch(93% 0.05 350);        /* ~#f6dfe6 a pale flower */
  --milk: oklch(98% 0.006 90);         /* ~#fbf9f4 a white hen, a white cow */
  --pine: oklch(50% 0.11 155);         /* ~#3f7a52 pines */
  --light-green: oklch(74% 0.13 128);  /* ~#9fc36a young leaves */
  --focus: var(--ochre);
  --voice: "Palatino Linotype", "Iowan Old Style", Palatino, Georgia, "Book Antiqua", serif;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --stage-w: 1600px;
  --u: calc(var(--stage-w) / 1600); /* one stage unit in screen pixels */
}

*, *::before, *::after { box-sizing: border-box; }
/* Hidden means hidden, even for pieces that set their own display. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--ui);
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* 2. Ink. Every mark is one blue at one of four weights; multiply blending
      makes overlaps pool darker, the way wet ink does on paper. */
.ink { fill: var(--ink-blue); mix-blend-mode: multiply; }
.line { fill: none; stroke: var(--ink-blue); stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: multiply; }
.w1 { opacity: 0.28; }
.w2 { opacity: 0.5; }
.w3 { opacity: 0.74; }
.w4 { opacity: 0.96; }
.paper { fill: var(--paper); }
.accent { fill: var(--ochre); mix-blend-mode: normal; opacity: 0.9; }
/* A few things are not blue: the same wash weights, other inks. */
.ink.green { fill: var(--leaf); }
.ink.ochre { fill: var(--ochre); }
.ink.coral { fill: var(--coral); }
.ink.leather { fill: var(--leather); }
.ink.bark { fill: var(--bark); }
.ink.petal { fill: var(--petal); }
.ink.milk { fill: var(--milk); }
.ink.pine-green { fill: var(--pine); }
.ink.light-green { fill: var(--light-green); }
.ink.bloom { mix-blend-mode: normal; }
.line.birch-line { stroke: var(--paper-deep); mix-blend-mode: normal; }
.line.coral-line { stroke: var(--coral); }
.line.animal-neck { mix-blend-mode: normal; }
.line.animal-neck.milk { stroke: var(--milk); }
.line.animal-neck.ochre { stroke: var(--ochre); }
.line.animal-neck.leather { stroke: var(--leather); }
.line.chicken-wattle { stroke: var(--coral); mix-blend-mode: normal; }
.line.chicken-legs { stroke: var(--ochre); mix-blend-mode: normal; }
.ink.eye { fill: var(--ink-deep); mix-blend-mode: normal; }
.line.bird { stroke: var(--ink-deep); }
.ink.firefly { fill: var(--ochre); mix-blend-mode: normal; }
.sky-wash.sunset { fill: var(--coral); opacity: 0.16; }
.sky-wash.dusk { fill: var(--ochre); opacity: 0.14; }
.sky-wash.dawn { fill: var(--ochre); opacity: 0.1; }
.sky-wash.evening { fill: var(--ink-deep); opacity: 0.16; }
.afterglow .sky-wash { opacity: 0.22; }
.line.green-line { stroke: var(--leaf); }
.line.bark-line { stroke: var(--bark); }
.line.plank-line { stroke: var(--outline); opacity: 0.45; }
.ink.patch { fill: var(--ink-deep); mix-blend-mode: normal; }
.ink.muzzle { fill: var(--petal); mix-blend-mode: normal; filter: brightness(0.93); }
.line.animal-line { stroke: var(--outline); mix-blend-mode: normal; }
.line.animal-fill { stroke: var(--milk); mix-blend-mode: normal; }
.line.ochre-line { stroke: var(--ochre); }
.ink.night-wash { fill: var(--ink-deep); opacity: 0.55; }
.ink.water-wash { fill: var(--ink-blue); opacity: 0.22; }
.ink.glow { opacity: 0.35; }
.ink.flame { mix-blend-mode: normal; }
.ink.mark.lit { fill: var(--ochre); mix-blend-mode: normal; opacity: 0.95; }
.ink.lit-window { mix-blend-mode: normal; opacity: 0.9; }
.reflection { pointer-events: none; }
.map .board-face { fill: var(--paper); }
.map .map-path, .map .map-x { pointer-events: none; }
.ticket {
  position: absolute;
  margin: 0;
  translate: -50% -100%;
  padding: 0.25em 0.9em;
  border: 2px dashed var(--ink-blue);
  border-radius: 4px;
  background: var(--ochre);
  color: var(--ink-deep);
  font-family: var(--ui);
  font-weight: 700;
  font-size: max(18px, calc(var(--u) * 30));
  letter-spacing: 0.08em;
  box-shadow: 3px 4px 0 color-mix(in oklab, var(--ink-blue) 25%, transparent);
  pointer-events: none;
  z-index: 5;
}
.shout {
  position: absolute;
  margin: 0;
  translate: -50% -100%;
  font-family: var(--voice);
  font-weight: 700;
  font-size: max(28px, calc(var(--u) * 58));
  letter-spacing: 0.01em;
  color: var(--coral);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 3px 3px 0 color-mix(in oklab, var(--paper) 80%, white);
  z-index: 5;
}
.slide-link { margin: 0 0 0.8rem; text-align: center; font-size: 0.95rem; }
/* The case, opened on the pier: every postcard read back, each one changeable. */
.pack-cloud { width: min(58rem, 94vw); border-radius: 6% 8% 7% 9% / 12% 10% 13% 11%; }
.pack-list { margin: 0.8rem 0 0; padding: 0; list-style: none; text-align: left; }
.pack-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: start; padding: 0.55rem 0; border-top: 1px solid color-mix(in oklab, var(--ink-blue) 22%, transparent); }
.pack-list .pack-kind { margin: 0; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.pack-list .pack-title { margin: 0 0 0.15rem; font-weight: 600; color: var(--ink-deep); }
.pack-list .pack-text { margin: 0.1rem 0; white-space: pre-wrap; }
.pack-list .pack-text.empty { color: var(--ink-soft); font-style: italic; }
.pack-list .pack-label { margin: 0.2rem 0 0; font-family: var(--ui); font-size: 0.72rem; color: var(--ink-soft); }
.pack-list button { align-self: center; padding: 0.3rem 0.8rem; border: 2px solid var(--ink-blue); border-radius: 999px; background: var(--board); color: var(--ink-deep); font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.pack-list button:hover { background: var(--ochre-wash); }
.pack-list li.editing { background: var(--ochre-wash); }
.pack-cloud .slide-postcard { margin-top: 1rem; }
.slide-link a { color: var(--ink-deep); }
.line.bark { stroke: var(--bark); }
.fleece { fill: var(--fleece); stroke: var(--outline); stroke-width: 1.6; stroke-linejoin: round; }
.fleece.ear { fill: oklch(86% 0.07 80); /* ~#e4cc9c ears a shade darker */ }
.line.fleece-line { stroke: var(--fleece); mix-blend-mode: normal; }
.fleece.dog-body { stroke-width: 2.4; }
/* The dog is line art: a bold warm-brown line, paper inside so the scooter does not show through him. */
.line-art { fill: var(--paper); stroke: var(--outline); stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
.line-art.dog-ear { fill: var(--paper); }
.line.outline { stroke: var(--outline); mix-blend-mode: normal; }
.ink.nose { fill: var(--ink-deep); mix-blend-mode: normal; }
.ink.tongue { fill: var(--coral); mix-blend-mode: normal; opacity: 0.9; }
.board-face { fill: var(--board); mix-blend-mode: normal; }
.board { opacity: 0.3; transition: opacity 0.4s; }
.board.has-words, .board.solid { opacity: 1; }
/* A board you can touch lights up under the pointer. */
.board.touchable:hover .board-face, .board.hover .board-face { fill: var(--ochre-wash); }
.board.touchable:hover .board-edge, .board.hover .board-edge { stroke-width: 4.5; }
.board.touchable { cursor: pointer; }
.board.flipped .board-face { fill: var(--ochre-wash); }
.sign.flipped { color: var(--ink-deep); }
/* Seven houses, seven colours, so each has a face of its own. */
.house.c0 .house-body { fill: var(--coral); }
.house.c1 .house-body { fill: var(--ochre); }
.house.c2 .house-body { fill: var(--leaf); }
.house.c3 .house-body { fill: oklch(60% 0.12 300); /* ~#8d6bb5 plum */ }
.house.c4 .house-body { fill: oklch(62% 0.13 40); /* ~#c9704f terracotta */ }
.house.c5 .house-body { fill: oklch(66% 0.10 220); /* ~#5f95c2 sky */ }
.house.c6 .house-body { fill: oklch(58% 0.11 150); /* ~#4c8f68 pine */ }
.house .house-roof { fill: var(--ink-deep); }
.house .house-door { fill: var(--ink-deep); }
.house .shop-window { fill: var(--paper); mix-blend-mode: normal; opacity: 0.9; }
/* The dog is the same flat shapes as the rider: cream fur, tan ears, no outline. */
.dog .fur { fill: var(--coral); mix-blend-mode: normal; }
.dog .fur.ear { fill: oklch(48% 0.16 30); /* ~#a83a2a the ear, a deeper red */ }
.dog .fur-line { stroke: var(--coral); mix-blend-mode: normal; }
.dog .fur-line.deep { stroke: oklch(48% 0.16 30); }
.dog .dog-nose { fill: var(--ink-blue); mix-blend-mode: normal; }
.water { fill: var(--ink-blue); }
.glint { opacity: 0.55; }
/* Rough edges are drawn into the shapes themselves; no runtime filter, so a
   9,600-unit town still pans at full frame rate. */
.grain { pointer-events: none; opacity: 0.55; }
.touchable { cursor: pointer; }
.shop-window.lit { fill: var(--ochre); mix-blend-mode: normal; opacity: 0.85; }
.bus-number { font-family: var(--ui); font-weight: 700; font-size: 30px; letter-spacing: 0.08em; fill: var(--paper); }

/* 3. The stage fills the window; the world letterboxes inside it. */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
}
.world {
  width: 100vw;
  height: 100dvh;
  display: block;
}
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.overlay > * { pointer-events: auto; }

/* 4. The top bar and the stop strip float over the world, thin and quiet. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 30; padding: 0.5rem 1rem; background: var(--ink-deep); color: var(--paper); border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
/* The top bar follows the other lessons' bars: the wordmark, "Go to", and
   the suitcase menu on the right, in this lesson's ink. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  min-height: 3.6rem;
  padding: 0.35rem clamp(0.8rem, 2vw, 1.5rem);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.wordmark { font-family: var(--voice); font-size: 1.3rem; color: var(--ink-deep); text-decoration: none; white-space: nowrap; }
.wordmark i { color: var(--coral); }
.lesson-tag { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.goto { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.evidence-link { font-family: var(--ui); font-size: 0.85rem; color: var(--ink-deep); text-underline-offset: 0.18em; }
.place-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--ui); font-size: 0.82rem; color: var(--ink-soft); }
#goto { max-width: 15rem; padding: 0.35rem 0.5rem; border: 2px solid var(--ink-blue); border-radius: 6px; background: var(--board); color: var(--ink-text); font-family: var(--voice); font-size: 0.9rem; }
.menu { position: relative; }
.menu > summary { position: relative; list-style: none; display: grid; place-items: center; width: 3rem; height: 2.75rem; border: 2px solid var(--ink-blue); border-radius: 8px; background: var(--board); color: var(--ink-blue); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.menu[open] > summary { background: var(--ink-blue); color: var(--paper); }
.case-icon { display: block; width: 28px; height: 23px; fill: currentColor; }
.case-icon .strap { fill: var(--ochre); }
.case-count { position: absolute; top: -0.5rem; right: -0.5rem; min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: var(--ochre); color: var(--ink-deep); font-family: var(--ui); font-size: 0.72rem; line-height: 1.4; text-align: center; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 14rem; display: flex; flex-direction: column; padding: 0.4rem; border: 2px solid var(--ink-blue); background: var(--board); box-shadow: 4px 5px 0 color-mix(in oklab, var(--ink-blue) 25%, transparent); font-family: var(--voice); font-size: 0.95rem; }
.menu-panel button, .menu-file { position: relative; display: block; width: 100%; padding: 0.55rem 0.6rem; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--ink-blue) 22%, transparent); background: none; color: var(--ink-text); font: inherit; text-align: left; cursor: pointer; }
.menu-panel button:hover, .menu-file:hover { background: var(--ochre-wash); }
.menu-panel button[aria-pressed="true"] { background: var(--ink-blue); color: var(--paper); }
.menu-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-file:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.menu-panel .dialog-status { margin: 0.4rem 0.2rem 0.1rem; font-family: var(--ui); font-size: 0.74rem; }
.menu-panel .dialog-status:empty { display: none; }
.save-status { margin-left: auto; font-family: var(--ui); font-size: 0.72rem; color: var(--ink-soft); pointer-events: auto; }
.warning { position: fixed; top: 3.4rem; left: 1rem; right: 1rem; z-index: 12; margin: 0; padding: 0.7rem 1rem; border: 2px solid var(--ochre); border-radius: 8px; background: var(--paper); }
.stops {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.35rem clamp(0.8rem, 2vw, 1.5rem);
  pointer-events: none;
}
.stops ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.stops button { padding: 0.15rem 0.55rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 0.78rem; cursor: pointer; }
.stops button:hover { background: var(--ochre-wash); color: var(--ink-deep); }
.stops button[aria-current="true"] { background: var(--ink-blue); color: var(--paper); }
.stops > ol { gap: 0.2rem 0.5rem; }
.stops-section { display: flex; align-items: center; gap: 0.3rem; }
.stops-head { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.stops-section.current .stops-head { background: var(--ochre-wash); color: var(--ink-deep); }
.stops-section.current ol { margin-left: 0.2rem; padding-left: 0.5rem; border-left: 2px solid var(--outline); }

/* 5. The companion's bubble: the words live in the world, drawn like the rest. */
.bubble {
  position: absolute;
  left: 4.5%;
  top: 9%;
  width: 46%;
  padding: calc(var(--u) * 24) calc(var(--u) * 30) calc(var(--u) * 22);
  background: color-mix(in oklab, var(--paper) 92%, white);
  border: calc(var(--u) * 2.5) solid var(--ink-blue);
  border-radius: calc(var(--u) * 34) calc(var(--u) * 40) calc(var(--u) * 36) calc(var(--u) * 30) / calc(var(--u) * 36) calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * 32);
  color: var(--ink-text);
  font-family: var(--voice);
  font-size: max(15px, calc(var(--u) * 21));
  line-height: 1.45;
  box-shadow: calc(var(--u) * 4) calc(var(--u) * 5) 0 color-mix(in oklab, var(--ink-blue) 25%, transparent);
}
.bubble[data-stop="3"] { width: 31%; }
.bubble::after {
  content: "";
  position: absolute;
  left: 42%;
  bottom: calc(var(--u) * -26);
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 60% 0;
  transform: rotate(45deg) skew(8deg, 8deg);
}
.bubble p { margin: 0 0 0.6em; }
.bubble h1 { margin: 0 0 0.4em; font-size: 1.55em; line-height: 1.15; font-weight: 600; text-wrap: balance; }
.bubble a { color: var(--ink-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bubble .doing { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px dashed var(--ink-soft); font-size: 0.92em; }
.eyebrow { margin: 0 0 0.3em !important; font-family: var(--ui); font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.bubble-hint { margin: 0.4em 0 0 !important; font-family: var(--ui); font-size: 0.72em; color: var(--ink-soft); }
.bubble-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.7em; }
.go {
  padding: 0.35em 1em;
  border: calc(var(--u) * 2) solid var(--ink-blue);
  border-radius: 999px;
  background: var(--ink-blue);
  color: var(--paper);
  font-family: var(--voice);
  font-size: 0.95em;
  cursor: pointer;
}
.go:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
.go.soft { background: transparent; color: var(--ink-deep); }
.thought {
  position: absolute;
  margin: 0;
  padding: 0.3em 0.9em;
  border: calc(var(--u) * 2) solid var(--ink-blue);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--voice);
  font-style: italic;
  font-size: max(14px, calc(var(--u) * 19));
  color: var(--ink-text);
  transform-origin: 0 100%;
}

/* 6. The page on the wall, the words that rise from the well, the shop signs. */
.page {
  position: absolute;
  width: min(22vw, 22rem);
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border: calc(var(--u) * 2) solid var(--ink-blue);
  border-radius: 2px 3px 2px 3px;
  background: white;
  color: var(--ink-text);
  font-family: var(--voice);
  font-size: max(13px, calc(var(--u) * 18));
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  box-shadow: calc(var(--u) * 3) calc(var(--u) * 4) 0 color-mix(in oklab, var(--ink-blue) 30%, transparent);
  transform-origin: 50% 0;
}
.page .page-eyebrow { display: block; margin-bottom: 0.5em; font-family: var(--ui); font-size: 0.66em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.page q { quotes: none; }
.page .hi { background: linear-gradient(transparent 12%, var(--ochre-wash) 12%, var(--ochre-wash) 88%, transparent 88%); }
.well-words {
  position: absolute;
  margin: 0;
  max-width: 24%;
  padding: 0.3em 0.7em;
  font-family: var(--voice);
  font-size: max(13px, calc(var(--u) * 17));
  line-height: 1.35;
  color: var(--ink-deep);
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  border-radius: 6px;
  transform-origin: 50% 100%;
}
.shop-labels button {
  position: absolute;
  translate: -50% -50%;
  padding: 0.1em 0.4em;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-text);
  font-family: var(--voice);
  font-weight: 600;
  font-size: max(12px, calc(var(--u) * 17));
  white-space: nowrap;
  cursor: pointer;
}
.shop-labels button:hover, .shop-labels button.lit { color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.shop-labels .top-tag { display: block; font-family: var(--ui); font-weight: 400; font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(55% 0.14 60); }

/* 7. Postcards: where the learner's own words go, then into the case. */
.postcard, .flying-card {
  position: absolute;
  right: 12%;
  bottom: 12%;
  width: 34%;
  padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 14);
  background: color-mix(in oklab, var(--paper) 60%, white);
  border: calc(var(--u) * 2) solid var(--ink-blue);
  border-radius: 3px;
  color: var(--ink-text);
  font-family: var(--voice);
  font-size: max(14px, calc(var(--u) * 17));
  line-height: 1.35;
  box-shadow: calc(var(--u) * 4) calc(var(--u) * 5) 0 color-mix(in oklab, var(--ink-blue) 25%, transparent);
}
.postcard-kind { margin: 0 0 0.4em; font-family: var(--ui); font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.postcard label { display: block; margin: 0.3em 0 0.2em; font-size: 0.9em; color: var(--ink-deep); }
.postcard textarea {
  display: block;
  width: 100%;
  padding: 0.2em 0.3em;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  background: transparent;
  font-family: var(--voice);
  font-size: 1em;
  line-height: 1.35;
  resize: vertical;
}
.postcard textarea:focus { outline: 2px solid var(--ochre); outline-offset: 2px; }
.worked { margin: 0.6em 0 0; }
.worked summary { cursor: pointer; font-family: var(--ui); font-size: 0.78em; color: var(--ink-soft); }
.worked p { margin: 0.3em 0 0; font-size: 0.88em; }
.postcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; margin-top: 0.7em; }
.keep {
  padding: 0.3em 0.9em;
  border: calc(var(--u) * 2) solid var(--ink-blue);
  border-radius: 999px;
  background: var(--ochre);
  color: var(--ink-deep);
  font-family: var(--voice);
  font-size: 0.9em;
  cursor: pointer;
}
.keep:hover { background: var(--ink-blue); color: var(--paper); }
.postcard-status { font-family: var(--ui); font-size: 0.72em; color: var(--ink-soft); }
.flying-card { pointer-events: none; overflow: hidden; white-space: pre-wrap; z-index: 7; }

/* 8. Dialogs: the suitcase and the plain reading. */
.sheet-dialog {
  width: min(36rem, calc(100% - 2rem));
  max-height: 85vh;
  padding: 1.2rem 1.5rem 1.4rem;
  border: 3px solid var(--ink-blue);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--ui);
}
.sheet-dialog::backdrop { background: color-mix(in oklab, var(--ink-deep) 40%, transparent); }
.plain-dialog { width: min(44rem, calc(100% - 2rem)); font-family: var(--voice); font-size: 1.05rem; line-height: 1.55; }
.plain-text h2 { font-size: 1.4rem; }
.plain-text table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.plain-text th, .plain-text td { text-align: left; vertical-align: top; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--ink-soft); }
.plain-text a { color: var(--ink-deep); }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-topline h2 { margin: 0; font-family: var(--voice); font-size: 1.4rem; }
.close-button { width: 2.2rem; height: 2.2rem; border: 2px solid var(--ink-blue); border-radius: 999px; background: white; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dialog-note { font-size: 0.88rem; color: var(--ink-soft); }
.packed-list { list-style: none; margin: 1rem 0; padding: 0; }
.packed-list li { margin: 0.6rem 0; padding: 0.7rem 0.9rem; border: 2px solid var(--ink-blue); border-radius: 6px; background: white; }
.packed-empty { border-style: dashed !important; color: var(--ink-soft); }
.packed-kind { margin: 0 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.packed-label { margin: 0.5rem 0 0.1rem; font-size: 0.82rem; color: var(--ink-soft); }
.packed-text { margin: 0; font-family: var(--voice); white-space: pre-wrap; overflow-wrap: anywhere; }
.packed-when { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; }
.file-control { position: relative; display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border: 2px solid var(--ink-blue); border-radius: 999px; background: white; cursor: pointer; }
.file-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-control:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.dialog-status { min-height: 1.4em; margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }

/* 9. Narrow windows and phones: the world crops to the stop's thing, and the
      bubble and the postcard span the width, one above, one below. */
@media (width < 720px) {
  .bubble { left: 4%; top: 16%; width: 92%; font-size: 16px; }
  .bubble h1 { font-size: 1.3em; }
  .postcard { right: 4%; bottom: 15%; width: 92%; font-size: 15px; }
  .page { width: 68vw; font-size: 14px; }
  .well-words { max-width: 60vw; }
  .save-status { display: none; }
  .stops-note { display: none; }
  .lesson-tag { display: none; }
}

/* 10. Words on things. Each sign is HTML text sitting on a painted board in
       the drawing; the doodle's thoughts sit in a small bubble by his head;
       the road signs ahead and behind the scooter are how you move. */
.signs { position: absolute; inset: 0; pointer-events: none; }
.sign {
  position: absolute;
  translate: -50% -50%;
  padding: 0.2em 0.6em;
  color: var(--ink-text);
  font-family: var(--voice);
  font-size: max(14px, calc(var(--u) * 19));
  line-height: 1.3;
  text-align: center;
  pointer-events: auto;
}
.sign p { margin: 0.15em 0; }
.sign.touch { cursor: pointer; }
.sign h1 { margin: 0.1em 0 0.2em; font-size: 1.5em; line-height: 1.12; font-weight: 600; text-wrap: balance; }
.sign a { color: var(--ink-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sign .heart { display: block; width: 2.4em; height: 2.2em; margin: 0 auto 0.1em; fill: var(--coral); }
.sign .small { font-family: var(--ui); font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.sign p.small { margin-top: 0.1em; }
.sign .big { font-size: 1.5em; font-weight: 600; }
.sign .quiet { font-size: 0.78em; line-height: 1.2; color: var(--ink-soft); }
.sign .box-word { font-size: 1.25em; font-weight: 600; color: var(--ink-deep); }
.sign .quiet-strong { font-size: 0.82em; line-height: 1.2; font-weight: 600; }
.line.cross { stroke: var(--coral); stroke-width: 7; mix-blend-mode: normal; pointer-events: none; }
.window-board .board-face { fill: var(--paper); }
.sign.on-step { translate: -50% -100%; padding: 0.1em 0.5em; font-size: max(13px, calc(var(--u) * 17)); background: color-mix(in oklab, var(--paper) 80%, white); border-radius: 4px; }
.dog-says {
  position: absolute;
  margin: 0;
  translate: -50% -100%;
  max-width: min(22rem, 70vw);
  padding: 0.35em 0.8em;
  border: calc(var(--u) * 2) solid var(--outline);
  border-radius: 1.2em;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--voice);
  font-style: italic;
  font-size: max(14px, calc(var(--u) * 18));
  line-height: 1.3;
  transform-origin: 50% 100%;
}
.dog-says::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.35em);
  bottom: -0.55em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--paper);
  border: calc(var(--u) * 2) solid var(--outline);
}
.road-sign-button {
  position: absolute;
  translate: 0 -100%;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.9em;
  border: calc(var(--u) * 2.5) solid var(--ink-blue);
  border-radius: 999px;
  background: var(--board);
  color: var(--ink-deep);
  font-family: var(--voice);
  font-weight: 600;
  font-size: max(14px, calc(var(--u) * 18));
  white-space: nowrap;
  cursor: pointer;
  box-shadow: calc(var(--u) * 3) calc(var(--u) * 3) 0 color-mix(in oklab, var(--ink-blue) 30%, transparent);
}
.road-sign-button:hover { background: var(--ochre-wash); }
.road-sign-button.back { translate: -100% -100%; font-weight: 400; font-size: max(13px, calc(var(--u) * 15)); }
.road-sign-button.soft { translate: -50% 0; background: var(--paper); font-weight: 400; }
.postcard.check { border-style: dashed; border-color: var(--ochre); }
.check-question { margin: 0 0 0.6em; font-size: 1.1em; font-weight: 600; color: var(--ink-deep); }
.check-answer { margin: 0.8em 0 0; padding: 0.6em 0.8em; border-left: 4px solid var(--ochre); background: color-mix(in oklab, var(--ochre-wash) 60%, transparent); }
.postcard-ask { margin: 0 0 0.4em; font-weight: 600; }
.postcard-ask:empty { display: none; }
@media (width < 720px) {
  .sign { font-size: 14px; }
  .sign h1 { font-size: 1.25em; }
  .road-sign-button { font-size: 14px; }
}

/* 11. A slide: one of the seven ways, shown being done, with its postcard. */
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  z-index: 6;
}
.slide-cloud {
  position: relative;
  width: min(46rem, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 1.2rem 3.6rem 2.6rem;
  background: var(--board);
  border: 3px solid var(--ink-blue);
  border-radius: 30% 34% 32% 36% / 22% 18% 26% 20%;
  box-shadow: 6px 8px 0 color-mix(in oklab, var(--ink-blue) 30%, transparent);
  font-family: var(--voice);
  color: var(--ink-text);
}
.slide-close { display: block; margin: 0 auto; padding: 0.3rem 0.9rem; border: 2px solid var(--ink-blue); border-radius: 999px; background: var(--paper); font-family: var(--voice); cursor: pointer; }
.slide-kind { margin: 1rem 0 0.2rem; font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.slide-title { margin: 0 0 0.3rem; font-size: 1.8rem; text-align: center; }
.slide-doing { margin: 0 0 0.6rem; text-align: center; font-size: 1.1rem; }
.slide-prop { display: block; width: min(24rem, 80%); height: auto; margin: 0 auto; }
.slide-example { margin: 0.6rem auto 1rem; max-width: 34rem; text-align: center; font-size: 1.15rem; line-height: 1.45; }
.slide-postcard .postcard { position: static; width: 100%; max-width: 30rem; margin: 0 auto; }
.slide .prop-paper { fill: var(--paper); }
.slide .prop-card { fill: white; stroke: var(--ink-blue); stroke-width: 3; }
.slide .prop-ink { fill: var(--ink-blue); }
.slide .prop-number { font-family: var(--ui); font-weight: 700; font-size: 44px; fill: var(--ink-deep); }
.slide .prop-small { font-family: var(--voice); font-size: 22px; fill: var(--ink-text); }
.slide .prop-yellow { fill: var(--ochre); opacity: 0.75; }
.slide .prop-line { fill: none; stroke: var(--ink-blue); stroke-width: 3; stroke-linecap: round; }
.slide .prop-faint { opacity: 0.35; }