monotropic-map.css

/* monotropic-map.css — one stylesheet, no build step, no third parties.
   Colours are tokens defined once on :root and redefined for dark. Never give a
   colour its only definition inside a media query. */

/* Atkinson Hyperlegible, served from this origin. It is designed for low vision —
   letterforms are pulled apart so b/d, i/l and 0/O cannot be confused — which is the
   whole reason it is the face named in --font, and for two years everyone got the
   system stack instead because the files were never shipped.

   SIL OFL 1.1, Copyright 2020 Braille Institute of America, Inc. The licence travels
   with the font in fonts/OFL.txt, which clause 2 requires; ATTRIBUTIONS.md records the
   designers. Converted TTF to WOFF2 and nothing else — no subsetting, all 342 glyphs —
   so no character silently loses its shape.

   THE FOUR FACES COST NOTHING TO DECLARE. A browser fetches only the faces a page
   actually uses, so bold italic sits here unused and undownloaded rather than being
   synthesised later by smearing the regular — which on a legibility face defeats the
   point of choosing it.

   `swap` and not `block`: a reader gets the system stack for a few hundred milliseconds
   and then the real face. The alternative is invisible text, and invisible text on an
   accessibility site is not a trade worth making. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-bolditalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  color-scheme: light dark;

  --sand:      #f6efe2;
  --paper:     #fffdf8;
  --ink:       #1d2b32;
  --ink-soft:  #4a5f68;
  --rule:      #ddd0b8;
  --sea:       #0b6b82;
  --sea-deep:  #084c5d;
  --sea-wash:  #e3f1f4;

  --flow:      #0b6b82;
  --social:    #7a5a17;
  --stuck:     #8a3324;
  --pressure:  #5b3a72;

  /* TWO COLOURS THAT ARE NOT STATES. The four above mean something — they are the four
     kinds of area, and the page uses them to say which is which — so painting a tree in
     one would be claiming the tree is a state. These two are paint: leaves, and a storm
     sky. Added 2026-09-16 for the version-two canvas, which is why no rule in this file
     uses them yet; `check.mjs` holds them to the same 4.5:1 as the rest. */
  --leaf:      #2f6b3f;
  --sky:       #2b4a72;

  --bg:        var(--sand);
  --card:      var(--paper);
  --fg:        var(--ink);
  --fg-soft:   var(--ink-soft);
  --line:      var(--rule);
  --accent:    var(--sea);
  --accent-fg: #ffffff;
  --wash:      var(--sea-wash);

  --measure: 34rem;
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0e1a20;
    --card:      #152630;
    --fg:        #e9f1f3;
    --fg-soft:   #a9c0c8;
    --line:      #2b4450;
    --accent:    #6fc6dd;
    --accent-fg: #06212b;
    --wash:      #14313c;
    --flow:      #6fc6dd;
    --social:    #e0b85c;
    --stuck:     #f09a86;
    --pressure:  #c3a0dc;
    --leaf:      #7fcb8f;
    --sky:       #9dbce4;
  }
}
:root[data-theme="dark"] {
  --bg:        #0e1a20;
  --card:      #152630;
  --fg:        #e9f1f3;
  --fg-soft:   #a9c0c8;
  --line:      #2b4450;
  --accent:    #6fc6dd;
  --accent-fg: #06212b;
  --wash:      #14313c;
  --flow:      #6fc6dd;
  --social:    #e0b85c;
  --stuck:     #f09a86;
  --pressure:  #c3a0dc;
  --leaf:      #7fcb8f;
  --sky:       #9dbce4;
}

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

/* `hidden` MEANS HIDDEN, whatever else a rule says about display. The attribute is only
   a UA default, so any class that sets `display` outranks it — which is how the writing
   strip for a place of your own shipped visible under every piece on the board, `hidden`
   dutifully set to true and ignored. Everything on this site that reveals itself with a
   script relies on this: the theme toggle, the builder, the buttons in the marking
   tool. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding-block: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 60rem; margin: 0 auto; padding-inline: 1.25rem; }
.prose { max-width: var(--measure); }
.prose p, .prose li { line-height: 1.65; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin-block: 1.6em 0.5em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.7rem); }
h3 { font-size: 1.15rem; }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-fg);
  padding: 0.6rem 1rem; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- shell ------------------------------------------------------------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--card);
  border-block-end: 1px solid var(--line);
}
.bar-in {
  max-width: 60rem; margin: 0 auto; padding: 0.55rem 1.25rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.bar a.home { font-weight: 700; text-decoration: none; color: var(--fg); }
.bar nav { margin-inline-start: auto; }
.bar nav ul { display: flex; gap: 0.9rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.bar nav a { color: var(--fg-soft); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; }

.theme-toggle {
  background: none; border: 1px solid var(--line); color: var(--fg-soft);
  border-radius: 999px; padding: 0.15rem 0.7rem; font: inherit; font-size: 0.85rem;
  cursor: pointer;
}

footer.site {
  margin-block-start: 4rem; padding-block: 2rem 3rem;
  border-block-start: 1px solid var(--line);
  color: var(--fg-soft); font-size: 0.92rem;
}
footer.site .wrap > * + * { margin-block-start: 0.75rem; }

/* ---- the map ----------------------------------------------------------- */

.mapframe { position: relative; margin-block: 1rem; max-width: 46rem; }
.mapframe picture { display: block; }
.mapframe img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.hotspots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hotspots a {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 2px solid var(--tone, var(--accent));
  color: var(--fg);
  font-weight: 700; font-size: 0.8rem; line-height: 1;
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.hotspots a::after { content: ""; position: absolute; inset: -0.45rem; border-radius: 999px; }
.hotspots a:hover, .hotspots a:focus-visible {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 2;
}
.hotspots a .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.mapnote { color: var(--fg-soft); font-size: 0.92rem; max-width: var(--measure); }

/* The offer of the changelog feed, above the entries. Quiet, and the same muted
   colour the contrast gate already holds to 4.5:1 in both themes. */
.feednote { color: var(--fg-soft); font-size: 0.92rem; max-width: var(--measure); margin-block: 0 1.5rem; }

/* ---- area lists -------------------------------------------------------- */

.stategroup + .stategroup { margin-block-start: 2.5rem; }
.stategroup > p { max-width: var(--measure); color: var(--fg-soft); margin-block-start: 0.25rem; }

.arealist { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .arealist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.arealist li { margin: 0; }
.arealist a {
  display: block; height: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-inline-start: 5px solid var(--tone, var(--accent));
  border-radius: 8px; padding: 0.85rem 1rem;
  text-decoration: none; color: var(--fg);
}
.arealist a:hover { border-color: var(--accent); border-inline-start-color: var(--tone, var(--accent)); }
.arealist .num { color: var(--fg-soft); font-family: var(--mono); font-size: 0.85rem; }
.arealist .name { display: block; font-weight: 700; margin-block: 0.15rem; }
.arealist .who { display: block; color: var(--fg-soft); font-size: 0.88rem; }

[data-tone="flow"]     { --tone: var(--flow); }
[data-tone="social"]   { --tone: var(--social); }
[data-tone="stuck"]    { --tone: var(--stuck); }
[data-tone="pressure"] { --tone: var(--pressure); }
/* The builder's shapes use the same mechanism, and reach for two tones the four
   states do not have: leaves and a storm sky are paint, not a kind of area. */
[data-tone="leaf"]     { --tone: var(--leaf); }
[data-tone="sky"]      { --tone: var(--sky); }
[data-tone="soft"]     { --tone: var(--fg-soft); }

.tag {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 700;
  color: var(--tone, var(--accent));
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

/* ---- area page --------------------------------------------------------- */

.areahead { margin-block-start: 1.5rem; }
.areahead .num { font-family: var(--mono); color: var(--fg-soft); }
.areahead h1 { margin-block-start: 0.2rem; }

.gloss {
  margin: 1.25rem 0; padding: 0.9rem 1.2rem;
  background: var(--wash); border-inline-start: 5px solid var(--tone, var(--accent));
  border-radius: 0 8px 8px 0;
  max-width: var(--measure);
}
.gloss p { margin: 0; }
.gloss cite { display: block; margin-block-start: 0.6rem; font-style: normal; color: var(--fg-soft); font-size: 0.92rem; }

/* A gloss that is NOT a quotation ships as a div rather than a blockquote — see
   `glossNote` in areas.mjs. It keeps the panel so it still reads as the definition,
   and loses the heavy rule down the side, which is what says "quotation" here. The
   difference has to be visible before anybody reaches the credit under it. */
div.gloss { border-inline-start: 1px solid var(--line); border-radius: 8px; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; margin-block: 1.25rem; max-width: var(--measure);
}
.panel h2, .panel h3 { margin-block-start: 0; }

.borders { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.borders a {
  display: inline-block; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.25rem 0.8rem; text-decoration: none; font-size: 0.92rem;
}

.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-start: 2.5rem; }

/* ---- print ------------------------------------------------------------- */

@media print {
  .bar, .theme-toggle, .pager, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .panel, .gloss, .arealist a { border: 1px solid #999; background: #fff; }
  .arealist { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- callouts and contents --------------------------------------------- */

.callout {
  max-width: var(--measure);
  margin-block: 1.5rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--card);
}
.callout > p, .callout > ul { margin-block: 0.5rem; }
.callout > :last-child { margin-block-end: 0; }
.callout-label {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-block: 0 0.35rem !important;
}
.callout.consider { border-inline-start-color: var(--social); background: var(--wash); }
.callout.consider .callout-label { color: var(--social); }
.callout.consider ul { padding-inline-start: 1.2rem; }

.toc {
  max-width: var(--measure);
  margin-block: 1.5rem 2.5rem;
  padding: 0.9rem 1.2rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.toc h2 { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
          color: var(--fg-soft); margin-block: 0 0.5rem; }
.toc ol { margin: 0; padding-inline-start: 1.4rem; }
.toc li { margin-block: 0.28rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Tables from md.mjs. The wrapper is what scrolls, never the page — a three-column
   comparison at 375px should wrap its words, and only a genuinely wide table should
   need a sideways swipe. It is focusable so the scroll can be reached by keyboard. */
.tablewrap {
  max-width: var(--measure);
  margin-block: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.tablewrap th, .tablewrap td {
  padding: 0.6rem 0.75rem; text-align: start; vertical-align: top;
  line-height: 1.45; border-block-end: 1px solid var(--line);
}
.tablewrap tbody tr:last-child > * { border-block-end: 0; }
.tablewrap thead th { font-weight: 700; }
.tablewrap tbody th { font-weight: 700; color: var(--fg); }
/* On a phone each row becomes a small block: its heading, then each cell under its
   column's name. See the table comment in tools/md.mjs for why the roles are there. */
@media (max-width: 30rem) {
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap th, .tablewrap td { display: block; }
  .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tablewrap tbody tr { padding: 0.75rem 0.9rem; border-block-end: 1px solid var(--line); }
  .tablewrap tbody tr:last-child { border-block-end: 0; }
  .tablewrap th, .tablewrap td { padding: 0; border: 0; }
  .tablewrap tbody th { margin-block-end: 0.35rem; }
  .tablewrap td + td { margin-block-start: 0.5rem; }
  .tablewrap td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 0.8rem; font-weight: 700; color: var(--fg-soft);
  }
}

/* A heading jumped to from the contents should not sit under the sticky bar. */
:is(h2, h3, section)[id] { scroll-margin-top: 5.5rem; }

@media print {
  .toc { display: none; }
  .callout { break-inside: avoid; border: 1px solid #999; background: #fff; }
}

/* ---- training slides ---------------------------------------------------- */

/* The slides are 16:9 and wider than the reading measure on purpose: they are
   pictures to look at, not prose to read along a 34rem line. */
.slide {
  margin: 1.75rem 0;
  max-width: 46rem;
}
.slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

@media print {
  .slide { break-inside: avoid; max-width: 100%; }
  .slide img { border: 1px solid #999; }
}

/* ---- the numbered key under the map ------------------------------------ */

/* A legend for the picture: compact, in map order, numbers matching the markers.
   Columns rather than cards — this is for scanning against the artwork, not for
   browsing, which is what the grouped list is for. */
.mapkey { max-width: 46rem; margin-block: 1.25rem 0; }
.mapkey h2 {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-soft); margin-block: 0 0.6rem;
}
/* column-WIDTH, not column-count: the browser fits as many as the space allows, so
   this is one column on a phone and three on a wide screen with no breakpoints to
   keep in sync. Fixed at two, entry 13's long label wrapped five deep at 375px. */
.mapkey ol {
  margin: 0; padding-inline-start: 1.6rem;
  columns: 13rem; column-gap: 2rem;
  font-size: 0.95rem;
}
.mapkey li {
  margin-block: 0.22rem;
  break-inside: avoid;
  padding-inline-start: 0.15rem;
  /* the marker takes the area's own colour, so the key reads against the map */
  &::marker { color: var(--tone, var(--fg-soft)); font-weight: 700; }
}
.mapkey a { color: var(--fg); text-decoration-color: var(--line); }
.mapkey a:hover { color: var(--accent); text-decoration-color: currentColor; }

@media print {
  .mapkey ol { columns: 2; }
}

/* ---- the plain-language definition -------------------------------------- */

/* It comes FIRST on an area page and is styled to look like the main text,
   not like a simplified aside. An Easy Read version placed below the "real"
   one, in smaller type, tells the reader which of the two is for them. */
.plain {
  max-width: var(--measure);
  margin-block: 1.25rem 1.5rem;
}
.plain h2 {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tone, var(--accent)); margin-block: 0 0.5rem;
}
.plain p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media print {
  .plain { break-inside: avoid; }
  .plain p { font-size: 12pt; }
}

/* ---- My Monotropic Map, version one ------------------------------------- */
/* The controls are real radios and are styled, not replaced: the input keeps its own
   focus ring and keyboard behaviour and is only visually folded into its label. A
   custom control here would mean rebuilding arrow-key roving and checked state by hand
   for no gain. See tools/build.mjs for why there are five marks and not four, and
   my-map.js for why there are no counts anywhere. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mymap { margin-block: 2rem 1rem; }
.mymap-lede { max-width: var(--measure); color: var(--fg-soft); }
.mymap-note {
  max-width: var(--measure); background: var(--wash);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem;
}

.markrows { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.markrow {
  background: var(--card); border: 1px solid var(--line);
  border-inline-start: 5px solid var(--tone, var(--accent));
  border-radius: 8px; padding: 0.8rem 1rem;
  scroll-margin-block-start: 5rem;
}
.markrow:target { outline: 3px solid var(--accent); outline-offset: 2px; }
.markrow-h { display: flex; align-items: baseline; gap: 0.6rem; }
.markrow-n { font-family: var(--mono); font-size: 0.85rem; color: var(--fg-soft); }
.markrow-name { font-weight: 700; color: var(--fg); text-decoration: none; }
.markrow-name:hover { text-decoration: underline; }

.marks { border: 0; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mark {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  font-size: 0.9rem; color: var(--fg-soft);
  cursor: pointer; background: var(--bg);
}
.mark input { accent-color: var(--tone, var(--accent)); margin: 0; }
.mark:hover { border-color: var(--tone, var(--accent)); color: var(--fg); }
.mark:has(input:checked) {
  border-color: var(--tone, var(--accent));
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, var(--card));
  color: var(--fg); font-weight: 700;
}
/* The resting state must not look like an answer. "Not said yet" is checked on all
   twenty when the page opens, and given the same weight as a real mark it made the
   tool read as twenty confident answers nobody had given yet. It stays quiet, in the
   muted grey, until a person actually chooses something. */
.mark:has(input[value=""]:checked) {
  border-color: var(--line);
  background: var(--bg);
  color: var(--fg-soft);
  font-weight: 400;
}
.mark:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The picture repeats what the list says. Each state differs in fill AND in outline
   weight, never in hue alone, and my-map.js writes the mark into the marker's
   accessible name as well — colour is not information everybody can receive. */
.hotspots a[data-mark="living"] {
  background: var(--tone, var(--accent)); color: var(--accent-fg); border-width: 3px;
}
.hotspots a[data-mark="passing"] { border-style: dashed; border-width: 3px; }
.hotspots a[data-mark="swallowed"] {
  background: var(--tone, var(--accent)); color: var(--accent-fg);
  border-width: 3px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--tone, var(--accent));
}
/* "Never been" is an answer, not an absence, so it must not read as unanswered — and
   the unmarked marker is the ordinary-looking one. It recedes by dropping the area's
   own colour for the muted grey and going dotted, rather than by fading until it looks
   like a rendering fault on somebody else's artwork. */
.hotspots a[data-mark="never"] {
  border-style: dotted; border-color: var(--fg-soft); color: var(--fg-soft); opacity: 0.75;
}

.legend {
  margin-block-start: 2rem; padding: 1.25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.legend h3 { margin-block: 0 0.75rem; }
.legend-empty { color: var(--fg-soft); margin: 0; }
.legend-groups { display: grid; gap: 1.25rem; }
.legend-g h4 {
  margin-block: 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-soft);
}
.legend-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.legend-g li { display: flex; gap: 0.6rem; align-items: baseline; }
.legend-n { font-family: var(--mono); font-size: 0.85rem; color: var(--fg-soft); min-width: 1.5rem; }

.legend-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.25rem 0; }
.btn {
  font: inherit; font-size: 0.92rem;
  background: var(--accent); color: var(--accent-fg);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.4rem 1rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-quiet { background: none; color: var(--fg-soft); border-color: var(--line); }
.btn-quiet:hover { background: none; color: var(--fg); border-color: var(--fg); }
.legend-note { color: var(--fg-soft); font-size: 0.9rem; margin-block: 0.75rem 0; min-height: 1.4em; }


/* ---- an area's own illustration ------------------------------------------ */

/* Set beside the opening of the page rather than above it: the page is about the area,
   and a picture the width of the column would announce itself as the artwork. It is
   not the artwork — Helen's map is — which is what the caption says. */
.areaart {
  margin: 1.25rem 0 1.5rem;
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem; align-items: center;
  max-width: var(--measure);
}
.areaart svg {
  display: block; width: 100%; height: auto;
  background: var(--wash); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.35rem;
}
.areaart figcaption { color: var(--fg-soft); font-size: 0.82rem; }
@media (max-width: 30rem) {
  .areaart { grid-template-columns: 1fr; justify-items: start; }
  .areaart svg { max-width: 9rem; }
}

/* ---- the map builder, version two --------------------------------------- */

/* THE WHOLE TOOL IS HIDDEN UNTIL map-canvas.js REVEALS IT, and `.canvas-off` says so
   in the meantime. Drawing needs a script the way marking does not, so the honest
   thing is to show the sentence rather than a board that will never respond. */
/* THE BOARD STEPS OUT OF THE READING MEASURE. Prose is 34rem because that is how wide
   a line should be; a drawing board is not prose, and squeezed into 34rem the tray
   stacks under a canvas barely wider than a phone. So it takes the page's own column,
   anchored at the same left edge, and never more than the viewport minus its gutter —
   which is what keeps the page from scrolling sideways at 375px. */
.canvas-tool {
  margin-block: 2rem 1rem; display: grid; gap: 1.5rem;
  width: min(calc(100vw - 2.5rem), 57.5rem); max-width: none;
}
@media (min-width: 62rem) {
  .canvas-tool { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .canvas-tool > h3, .canvas-tool > .canvas-lede, .canvas-tool > .shape-defs { grid-column: 1 / -1; }
}

/* THE BOARD FOLLOWS YOU DOWN THE TRAY. Ninety-five shapes is a long list, and scrolling
   back up to see what you just put down is the difference between placing a piece and
   guessing at one. It also puts the empty column beside the tray to work, which is more
   than it was doing before.

   IT USED TO GIVE UP ON A SHORT WINDOW, and silently. The rule asked for 44rem of
   height — 704px — on the reasoning that a board taller than the window would be pinned
   with its bottom cut off. A laptop window with a bookmarks bar, or Chrome at 110% zoom,
   is under that, so the feature simply was not there for the person it was built for,
   with nothing to say why. A board whose lower edge is cut off is still a board you can
   see your map on; no board at all is not. The floor is now low enough to be about
   genuinely tiny windows rather than ordinary ones, and the stage shrinks to fit what
   room there is, so the whole thing usually stays on screen anyway.

   The offset clears the site header, which is sticky itself and measures 90px at every
   width this rule applies to. */
@media (min-width: 62rem) and (min-height: 30rem) {
  .canvas-board { position: sticky; top: 6rem; }
  .canvas-stage { max-height: calc(100vh - 19rem); }
}
.canvas-lede { max-width: var(--measure); color: var(--fg-soft); }
.canvas-off {
  background: var(--wash); border-inline-start: 5px solid var(--accent);
  padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; max-width: var(--measure);
}

/* The drawings are written into the page once and used from here, so this element
   holds every shape and shows none of them. */
.shape-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.canvas-board { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem; }
.canvas-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-block-end: 0.6rem; }
.canvas-bar .btn { font-size: 0.85rem; padding: 0.3rem 0.8rem; }
.canvas-spacer { flex: 1 1 auto; }
.canvas-stage {
  display: block; width: 100%; height: auto;
  background: var(--wash); border-radius: 8px; touch-action: none;
}
/* The writing strip for a place of your own. It appears only when one is selected, so
   it is never a text box with no evident purpose. */
.canvas-name {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-block-start: 0.6rem; padding: 0.6rem 0.7rem;
  background: var(--wash); border: 1px solid var(--line); border-radius: 8px;
}
.canvas-name label { font-size: 0.85rem; color: var(--fg-soft); }
.canvas-name input {
  flex: 1 1 12rem; min-width: 0;
  font: inherit; font-size: 0.95rem; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.35rem 0.5rem;
}
.canvas-name input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.canvas-name .btn { font-size: 0.85rem; padding: 0.3rem 0.8rem; }
.placebtn-own .placen { border-style: dashed; }

.canvas-say { color: var(--fg-soft); font-size: 0.95rem; margin-block: 0.6rem 0; min-height: 1.5em; }
.canvas-keys { color: var(--fg-soft); font-size: 0.85rem; margin-block: 0.25rem 0; }

.piece { cursor: grab; }
.piece:focus-visible { outline: 3px solid var(--accent); }
.piece[data-held="yes"] { cursor: grabbing; }
.ring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 7 7; }

/* Paint. `fill="var(--x)"` in a presentation attribute is not resolved everywhere,
   so build.mjs turns every colour into one of these and the cascade does the rest —
   which is also what lets a theme switch reach inside a <use>. */
.f-tone   { fill: var(--tone, var(--accent)); }
.f-card   { fill: var(--card); }
.f-fg     { fill: var(--fg); }
.f-flow   { fill: var(--flow); }
.f-ground { fill: var(--wash); }
.f-leaf   { fill: var(--leaf); }
.f-social { fill: var(--social); }
.s-tone   { stroke: var(--tone, var(--accent)); }
.s-ground { stroke: var(--wash); }
.s-card   { stroke: var(--card); }
.s-leaf   { stroke: var(--leaf); }
.s-fg     { stroke: var(--fg); }
.s-flow   { stroke: var(--flow); }
.s-social { stroke: var(--social); }

.canvas-tray { display: grid; gap: 1.5rem; }
.trayhead {
  margin-block: 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-soft);
}
.setnote { color: var(--fg-soft); font-size: 0.85rem; margin-block: 0 0.6rem; max-width: var(--measure); }
.shapesets { display: grid; gap: 1.1rem; }
.shapeset h4 {
  margin-block: 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg-soft);
}
.shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.5rem; }
/* EVERY TILE THE SAME HEIGHT, whatever it is called. A grid row is as tall as its
   tallest item, so one eighty-four-character area name used to stretch its whole row
   and leave the drawings floating in uneven cells. Two things stop that: the tray
   shows a short name (see `short` in areas.mjs — the front of the real name, with the
   full one still in the accessible name), and the label is clamped to two lines here
   so the next long name cannot do it again. */
.shapebtn {
  display: grid; gap: 0.25rem; place-items: center; align-content: start;
  padding: 0.5rem 0.3rem; min-height: 6.4rem;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 0.78rem; cursor: pointer;
}
.shapebtn > span[aria-hidden] {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
  text-align: center; line-height: 1.25; text-wrap: balance;
}
.shapebtn:hover { border-color: var(--accent); }
.shapebtn svg { display: block; }

/* The twenty used to scroll inside their own box, because the board was long gone by
   the time you reached them. With the board following you down there is no reason for a
   second scrollbar inside the first. */
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.places li { margin: 0; }
.placebtn {
  width: 100%; display: flex; gap: 0.55rem; align-items: center; text-align: start;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.3rem 0.45rem; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.placebtn:hover { border-color: var(--accent); }
.placebtn[data-placed="yes"] { opacity: 0.5; }
.placen {
  flex: 0 0 auto; width: 1.55rem; height: 1.55rem; display: grid; place-items: center;
  border-radius: 999px; border: 2px solid var(--tone, var(--accent));
  font-weight: 700; font-size: 0.74rem;
}

/* What prints is the legend and the marked map — the thing stories.md promises you can
   keep. The eighty radio buttons that produced it are not the artefact. */
@media print {
  /* Same rule for the builder: the map is the artefact, the tray that built it is not. */
  .canvas-tray, .canvas-bar, .canvas-keys, .canvas-say, .canvas-lede { display: none !important; }
  .canvas-board { border: 0; padding: 0; }
  .canvas-stage { background: #fff; border: 1px solid #000; }

  .mymap-lede, .markrows, .legend-actions, .legend-note, .mymap-note { display: none !important; }
  .legend { border: 0; padding: 0; background: #fff; break-inside: avoid; }
  .legend-g { break-inside: avoid; }
  .mymap .mapframe { max-width: 14cm; }
  .hotspots a { background: #fff; color: #000; border-color: #000; }
  .hotspots a[data-mark="living"], .hotspots a[data-mark="swallowed"] { background: #000; color: #fff; }
}