/* 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;

  --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;
  }
}
: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;
}

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

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); }

/* ---- 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); }

.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; }

blockquote.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);
}
blockquote.gloss p { margin: 0; }
blockquote.gloss cite { display: block; margin-block-start: 0.6rem; font-style: normal; color: var(--fg-soft); font-size: 0.92rem; }

.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, blockquote.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; }

/* 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; }

/* 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 {
  .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; }
}