/* The story UI: the result told as a story (decision 24). Nunito for the interface and
   Fraunces for the headlines, both served from fonts/ (see fonts/README.md), so no
   visitor's browser asks a font service for anything. */
@font-face {
  font-family: "Nunito Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens: each hue has a bright value for fills, borders and the map, and an "ink" value
   for text and for fills that carry white text. One colour per meaning: deep teal is the
   volunteer's own actions and choices (buttons, links, the picked name and version, the
   step numbers, the focus ring, the shelter's circle). Terracotta means "what Qloo
   returned", and nothing else. Sage means "how Namesake read it". Honey marks a highlight
   and the neighbourhood band. Neutral tags are grey. None of them stands in for another.
   Teal ink on the cream page is 6.1:1, white on it 6.8:1, the bright teal border 4.6:1. */
:root {
  --bg: #f8f2e6;
  --surface: #fffdf8;
  --surface-2: #f2e9d9;
  --paper: #fbf5e8;
  --text: #272a32;
  --heading: #1b202c;
  --muted: #5e6370;
  --border: #e4dac8;
  --border-strong: #8e8577;   /* field edges: 3.3:1 on a white field */

  --primary: #227880;         /* borders, icons: 4.6:1 on the page      */
  --primary-ink: #19646c;     /* text and fills: 6.1:1 on cream, 6.8:1 under white */
  --primary-soft: #dcebed;
  --on-primary: #ffffff;

  --secondary: #5f8a6a;
  --secondary-ink: #3f6b4c;
  --secondary-soft: #e3eee5;

  --highlight: #f2c25e;
  --highlight-ink: #76560f;
  --highlight-soft: #fcf0d2;
  --on-highlight: #272a32;
  --band: #f8e4a8;

  --qloo: #b4532f;
  --qloo-ink: #9c4424;
  --qloo-soft: #f7e2d8;
  --on-qloo: #ffffff;
  --ai: var(--secondary);
  --ai-ink: var(--secondary-ink);
  --ai-soft: var(--secondary-soft);

  --attention-ink: #2b6f82;
  --tape: rgb(236 212 150 / 0.8);

  /* Read by result-map.js and location-map.js through getComputedStyle: literal values.
     The accent draws the shelter's circle and the visitor's pin (their choice: teal);
     the lift colours are Qloo's cells. */
  --accent: #227880;
  --lift-up: #d4603f;
  --lift-down: #3f78c2;       /* cool cells: a clear blue, apart from the teal ring */
  --lift-none: #8a7f75;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-photo: 6px;
  --shadow: 0 1px 2px rgb(72 48 28 / 0.06), 0 8px 20px rgb(72 48 28 / 0.08);
  --shadow-hover: 0 2px 4px rgb(72 48 28 / 0.08), 0 14px 28px rgb(72 48 28 / 0.12);
  --focus: var(--primary-ink);
  --font: "Nunito Variable", Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces Variable", Fraunces, Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a17;
    --surface: #2a2622;
    --surface-2: #332e29;
    --paper: #302b26;
    --text: #f1ebe2;
    --heading: #fbf6ee;
    --muted: #b5aa9e;
    --border: #3f3932;
    --border-strong: #8a7f73;
    --primary: #7fcbd3;         /* 9.4:1 on the dark page */
    --primary-ink: #7fcbd3;
    --primary-soft: #1f3538;
    --on-primary: #1d1a17;
    --secondary: #8fbf9a;
    --secondary-ink: #8fbf9a;
    --secondary-soft: #26332a;
    --highlight: #f6cf80;
    --highlight-ink: #f6cf80;
    --highlight-soft: #3d3222;
    --on-highlight: #1d1a17;
    --band: #352c1c;
    --qloo: #e08a65;
    --qloo-ink: #e08a65;
    --qloo-soft: #3b2820;
    --on-qloo: #1d1a17;
    --attention-ink: #6cc0d6;
    --tape: rgb(120 100 60 / 0.6);
    --accent: #7fcbd3;
    --lift-up: #f0916f;
    --lift-down: #7fb0ea;
    --lift-none: #9a8f84;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.35);
    --shadow-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 14px 28px rgb(0 0 0 / 0.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; color: var(--heading); }

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

input[type="radio"], input[type="checkbox"] { accent-color: var(--primary-ink); }

main, .site-header, .site-footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 721px) { main, .site-header, .site-footer { padding: 0 32px; } }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding-top: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Inline, not flex, so the header's baseline alignment uses the name, not the paw. */
.brand {
  display: inline-block;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  border-radius: 999px;
}

.brand .paw {
  font-size: 1.05em;
  margin-right: 8px;
  color: var(--primary);
  vertical-align: -0.12em;
  transform: rotate(-12deg);
}

.tagline { margin-left: auto; color: var(--muted); font-size: 0.9rem; }

.site-footer { padding-top: 28px; padding-bottom: 32px; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 8px; }
.site-footer p { display: inline; margin: 0; }
.site-footer p + p::before { content: " · "; }

/* Icons drawn inline (the paw, a heart, a pencil, a pin, the spark doodle). */
.icon { display: inline-block; vertical-align: -0.15em; }

/* Start */
.intro h1 { margin: 24px 0 6px; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; }
.intro p { margin: 0 0 24px; color: var(--muted); max-width: 60ch; font-family: var(--display); font-size: 1.1rem; }

.where {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 24px;
  align-items: start;
  margin-bottom: 32px;
}

.locations { border: 0; margin: 0; padding: 0; min-width: 0; }

.location-map { margin: 0; }

/* The legend sits above the cards, so drop the map by the same amount to line them up. */
@media (min-width: 721px) {
  .location-map { margin-top: calc(1.15rem * 1.55 + 12px); }
}

#location-map {
  height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 0;
}

.location-map figcaption { margin-top: 8px; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 720px) {
  .where { grid-template-columns: 1fr; }
  #location-map { height: 220px; }
}

.locations legend { padding: 0; }
/* The panel's heading, as a legend: a heading inside a legend is not valid HTML. */
.locations legend.panel-heading { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--heading); margin: 0 0 12px; }

.step-heading { font-size: 1.6rem; margin: 8px 0 14px; }

.location-options { display: grid; gap: 10px; }

.location-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px 44px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.location-option:hover { border-color: var(--border-strong); }

.location-option input { position: absolute; left: 16px; top: 18px; margin: 0; accent-color: var(--primary-ink); }

.location-option:has(input:checked) { border-color: var(--primary-ink); background: var(--primary-soft); }
.location-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.location-label { font-weight: 700; }
.location-region { color: var(--muted); font-size: 0.9rem; }

.animal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
}

/* Animal cards are submit buttons: picking one opens the result. Every card in a row is
   as tall as the tallest, whatever the length of its text. */
.animal-grid > li { display: flex; }
button.animal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

button.animal-card:hover, button.animal-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}
@media (prefers-reduced-motion: no-preference) {
  button.animal-card:hover, button.animal-card:focus-visible { transform: translateY(-2px); }
}

.animal-body > span { display: block; }
.animal-body > span + span { margin-top: 4px; }

.animal-card, .litter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The story's start: each animal a taped photo on a small mat, tilted a little either
   way (a static tilt; only the hover lift moves, and not under reduced motion). */
.taped > li { padding-top: 10px; }
.taped button.animal-card {
  position: relative;
  overflow: visible;
  padding: 10px 10px 0;
  border-radius: var(--radius-photo);
}
.taped button.animal-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  background: var(--tape);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  transform: rotate(-3deg);
  z-index: 1;
}
.taped > li:nth-child(odd) button.animal-card { transform: rotate(-0.8deg); }
.taped > li:nth-child(even) button.animal-card { transform: rotate(0.8deg); }
.taped > li:nth-child(even) button.animal-card::before { transform: rotate(4deg); }
.taped .animal-card img { border-radius: 3px; }
.taped .animal-body { padding: 12px 8px 14px; }
@media (prefers-reduced-motion: no-preference) {
  .taped button.animal-card:hover, .taped button.animal-card:focus-visible { transform: translateY(-3px) rotate(0); }
}
.story-intro { margin-top: 26px; }
.story-intro .headline { display: inline-block; }
.story-intro .lead { max-width: 64ch; margin-bottom: 26px; }
.story-intro .problem { max-width: 64ch; margin: -12px 0 26px; color: var(--muted); font-family: var(--font); font-size: 0.95rem; }
h2.step-heading.numbered { margin: 34px 0 14px; font-size: 1.6rem; }
.band {
  margin: 8px 0 26px;
  padding: 26px 0 28px;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
.band h2 { margin: 0; font-size: 1.6rem; }
.band .lead { margin: 4px 0 12px; color: var(--text); }
.examples.band ul { margin: 0; }
.examples.band .example { background: var(--surface); border-color: var(--primary); color: var(--primary-ink); }
.examples.band .example:hover { background: var(--primary-ink); color: var(--on-primary); }
.locations h3 { font-size: 1.15rem; margin: 0 0 12px; }

.animal-card img, .litter img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.animal-body { display: block; padding: 12px 16px 16px; }
.animal-body p { margin: 0; }
.animal-body p + p { margin-top: 4px; }
.animal-meta { color: var(--muted); font-size: 0.85rem; }
.animal-look { font-weight: 700; }
.animal-temperament { font-size: 0.9rem; }

.badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.litter {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.litter h2 { margin: 0 0 4px; }
.litter p { margin: 0; color: var(--muted); }
.litter > div { padding-right: 20px; }

@media (max-width: 600px) {
  .litter { grid-template-columns: 1fr; }
  .litter > div { padding: 0 16px 16px; }
}

/* Result: the top line, then the story in two columns. */
.topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 14px 0 18px; font-size: 0.9rem; }
.topline p { margin: 0; }
.back a { color: var(--primary-ink); font-weight: 700; }
.topline-place { color: var(--muted); }
.topline-place strong { color: var(--text); }
.topline-place a { color: var(--primary-ink); font-weight: 700; margin-left: 4px; }
.pin-mark { color: var(--primary); margin-right: 4px; }

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: start;
}
.story > * { min-width: 0; }

@media (max-width: 960px) {
  .story { grid-template-columns: 1fr; gap: 28px; }
  .story-animal { max-width: 520px; }
}

/* The portrait: the photo on a cream mat with two strips of tape, tilted a little. */
.portrait { position: relative; margin: 6px 6px 20px; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  padding: 12px 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
}
.portrait::before, .portrait::after {
  content: "";
  position: absolute;
  width: 88px;
  height: 26px;
  background: var(--tape);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.portrait::before { top: -10px; left: 24px; transform: rotate(-8deg); }
.portrait::after { bottom: 34px; right: 18px; transform: rotate(10deg); }
/* On a phone the caption wraps to two lines, and the lower tape would cover it: tape the
   top right corner instead. */
@media (max-width: 480px) {
  .portrait:not(.portrait-small)::after { top: -8px; bottom: auto; right: 18px; }
}
.portrait figcaption { margin-top: 10px; color: var(--muted); font-size: 0.8rem; }
.doodle { color: var(--highlight); pointer-events: none; }
.doodle-heart { position: absolute; right: -4px; top: 46%; font-size: 2.2rem; transform: rotate(14deg); }
.doodle-spark { font-size: 1em; margin-left: 0.1em; vertical-align: 0.1em; }

.name { margin: 4px 0 2px; font-size: clamp(2.6rem, 4.2vw, 3.6rem); line-height: 1.05; }
.name-empty { font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--muted); line-height: 1.4; }
.name-source { color: var(--muted); font-size: 0.85rem; margin: 2px 0 0; }
.version-note, .toggle-note, .refined-note, .litter-mates { color: var(--muted); font-size: 0.85rem; }
.toggle-note { margin: 8px 0 0; }
.litter-mates { margin: 12px 0 0; }
.story-animal .animal-meta { margin: 12px 0 0; font-size: 0.95rem; }
.story-animal .animal-look { margin: 2px 0 0; }

.ruled-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 10px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ruled-heading::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); opacity: 0.5; }

.fact-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.fact-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 0;
  margin-right: 16px;
  border-right: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
}
.fact-row li:last-child { border-right: 0; margin-right: 0; }
/* The record's own marks, in neutral ink: not a choice, not Qloo's. */
.fact-icon { display: inline-flex; color: var(--muted); font-size: 1.25rem; flex: none; }
.fact-icon .paw { transform: rotate(-12deg); }
.still-to-learn { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.still-to-learn .fact-icon { color: var(--muted); }

/* The story's head: the headline, the lead, and the generic/local toggle beside them. */
.story-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.headline { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.02; position: relative; }
.lead { margin: 8px 0 0; color: var(--muted); font-family: var(--display); font-size: 1.1rem; }
.story-head .lead { max-width: 60ch; font-size: 1.05rem; }

/* Numbered steps. */
.step { margin-top: 22px; }
.numbered { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1.45rem; }
.step-no {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: none;
}

/* Names: big buttons, the title under each. The input stays in the page for keyboard
   and screen readers; the label is what shows. */
.name-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 16px; }
.name-option { position: relative; }
.name-option label { display: block; text-align: center; cursor: pointer; }
.name-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-name {
  display: block;
  min-width: 9rem;
  padding: 8px 24px;
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: 10px 6px 12px 7px;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
.name-option label:hover .option-name { background: var(--primary-soft); }
@media (prefers-reduced-motion: no-preference) {
  .name-option label:hover .option-name { transform: translateY(-1px); }
}
/* The picked name is teal like every choice of the volunteer's, never Qloo's terracotta;
   an unpicked one is white with a teal edge, so it reads as choosable, not disabled. */
.name-option:has(input:checked) .option-name { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--on-primary); }
.name-option:has(input:checked) .option-name::after { content: " \2713"; }
.name-option:has(input:focus-visible) .option-name { outline: 2px solid var(--focus); outline-offset: 3px; }
/* The title under a name is Qloo's: it carries the Qloo label and swatch, centred under
   the button (the left rule gives way to the swatch here). */
.name-option .option-title { display: block; margin: 6px 0 0; padding: 0; border-left: 0; text-align: center; font-size: 0.85rem; }
.name-placeholder { margin: 0; color: var(--muted); }

.hook {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--highlight-soft);
  font-weight: 600;
}

/* The one line under the names on what came from Qloo; the rest is in "How Namesake made
   this" (decision 33). */
.local-touch { margin: 16px 0 0; font-size: 0.95rem; }
.local-touch a, .problem a, .trial a { color: var(--primary-ink); font-weight: 700; }

/* Qloo's part and the AI's, at the top of "How Namesake made this" (decisions 21, 33). */
.qloo-part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.qloo-part p { margin: 0; }
@media (max-width: 720px) { .qloo-part { grid-template-columns: 1fr; } }

/* Provenance: what Qloo returned, then our reading of it. Two colours, two left rules
   and a swatch before each label; the label text itself is what tells them apart
   without colour. */
.evidence, .reading {
  margin: 6px 0 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid;
  font-size: 0.85rem;
}
.evidence { border-color: var(--qloo); color: var(--text); }
.reading { border-color: var(--ai); color: var(--muted); }
.evidence span, .reading span, .venue-rank > span {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 4px;
}
.evidence span, .venue-rank > span { color: var(--qloo-ink); }
.reading span { color: var(--ai-ink); }
.evidence span::before, .reading span::before, .venue-rank > span::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05em;
}
.from-qloo {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--qloo);
  color: var(--on-qloo);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* The introduction, on paper. */
.paper {
  position: relative;
  padding: 22px 26px 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px 12px 6px 14px;
  box-shadow: var(--shadow);
}
.listing-text { margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.55; }
.written-by, .fallback-note { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; }
.refined-note { margin: 6px 0 0; }
.short-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 4px solid var(--highlight);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--highlight-soft);
  font-size: 0.85rem;
}
.left-out { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.85rem; }

/* Copy, and edit and approve: two buttons side by side; the editor opens under both. */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.copy.primary, .flyer-tools .primary, .approve > summary {
  display: block;
  padding: 11px 16px;
  border: 2px solid var(--primary-ink);
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.copy.primary, .flyer-tools .primary { background: var(--primary-ink); color: var(--on-primary); box-shadow: var(--shadow); }
/* "Write her story": the one action on a result with no listing yet. */
.write-run { margin: 14px 0 0; }
.run-button {
  padding: 11px 18px;
  border: 2px solid var(--primary-ink);
  border-radius: 10px;
  background: var(--primary-ink);
  color: var(--on-primary);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.run-button:hover { filter: brightness(1.08); }
/* On a button filled with the teal, the focus ring is ink rather than teal, so it shows
   against the button itself. */
.run-button:focus-visible, .copy.primary:focus-visible, .flyer-tools .primary:focus-visible { outline-color: var(--text); }
/* The saved run's log under "How Namesake made this": folded, the working page's timeline. */
.run-log { margin: 18px 0 6px; }
.run-log > summary { cursor: pointer; font-weight: 800; color: var(--primary-ink); }
.run-log .steps.timeline { margin-top: 12px; }
.copy.primary:hover, .flyer-tools .primary:hover { filter: brightness(1.08); }
.approve { margin: 0; }
.approve > summary { background: var(--surface); color: var(--primary-ink); list-style: none; }
.approve > summary::-webkit-details-marker { display: none; }
.approve > summary:hover { background: var(--primary-soft); }
.approve[open] { grid-column: 1 / -1; }
.approve-body { padding: 14px 16px; margin-top: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.approve label, .refine-line label { display: block; font-weight: 800; margin: 0 0 6px; }
.approve-body button[type="submit"] { margin-top: 10px; }
@media (max-width: 480px) { .actions { grid-template-columns: 1fr; } }

.refine-line { margin-top: 16px; }
.refine-line label { font-size: 0.95rem; }

/* How Namesake made this. */
.behind { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.section-head h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; }
.section-head .lead { margin-top: 6px; }

.process { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.process li { display: flex; gap: 14px; min-width: 0; }
.process li + li { border-left: 1px solid var(--border); padding-left: 24px; }
.process-no {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--highlight-soft);
  color: var(--highlight-ink);
  font-weight: 800;
  flex: none;
}
.process h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.process p { margin: 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 760px) {
  .process { grid-template-columns: 1fr; gap: 16px; }
  .process li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
}

/* Why these names? Qloo's answer and Namesake's choice, side by side and never in one box. */
.why-name { margin-top: 28px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.why-name > summary { cursor: pointer; font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: var(--primary-ink); }
.why-name[open] > summary { margin-bottom: 10px; }
.why-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.why-pair + .why-pair { margin-top: 6px; }
.why-pair h4 { grid-column: 1 / -1; margin: 0; font-size: 1.1rem; }
.why-pair .picked-mark { display: none; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--highlight); color: var(--on-highlight); font-family: var(--font); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle; }
.why-pair.selected { background: var(--highlight-soft); border-color: var(--highlight); }
.why-pair.selected .picked-mark { display: inline-block; }
/* The generic version has no Qloo name, so its view has no "Why these names?". */
body:has(input[name="variant"][value="generic"]:checked) .why-name { display: none; }
.why-pair .evidence, .why-pair .reading { margin: 0; font-size: 1rem; border-left-width: 4px; padding-left: 14px; }
.why-pair .reading { color: var(--text); }
.why-pair span { display: block; margin-bottom: 4px; }
@media (max-width: 720px) { .why-pair { grid-template-columns: 1fr; } }

.notes {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
}
.notes h3 { font-size: 1rem; margin: 0 0 4px; }

.why { margin-top: 24px; }
.why > summary { font-size: 1.05rem; font-weight: 800; cursor: pointer; margin-bottom: 12px; color: var(--primary-ink); }

.why-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .why-columns { grid-template-columns: 1fr; } }

.why-column {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.why-column[data-role="qloo-returned"] { border-top: 5px solid var(--qloo); background: linear-gradient(var(--qloo-soft), var(--surface) 44px); }
.why-column[data-role="our-reading"] { border-top: 5px solid var(--ai); background: linear-gradient(var(--ai-soft), var(--surface) 44px); }
.why-column h3 { margin: 0 0 10px; font-size: 1rem; font-family: var(--font); font-weight: 800; }
.why-column[data-role="qloo-returned"] h3 { color: var(--qloo-ink); }
.why-column[data-role="our-reading"] h3 { color: var(--ai-ink); }
.why-column h3::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: currentColor;
}
.why-column dt { font-weight: 700; font-size: 0.9rem; }
.why-column dd { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }

/* Help her story travel: the honey band, edge to edge, with the map and the places. */
.travel {
  margin-top: 56px;
  padding: 40px 0 44px;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
.travel .lead, .travel figcaption, .travel .venues-note, .travel .venues-more, .travel .hint { color: var(--text); }
.travel-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 28px 32px; margin-top: 24px; align-items: start; }
.travel-grid > * { min-width: 0; }
.travel-grid h3, .other-ways h3 { margin: 0 0 10px; font-size: 1.3rem; }
@media (max-width: 960px) { .travel-grid { grid-template-columns: 1fr; } }

.result-map { margin: 0; }
#result-map {
  height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 0;
}
@media (max-width: 960px) { #result-map { height: 360px; } }
.result-map figcaption { margin-top: 10px; font-size: 0.85rem; opacity: 0.9; }

.venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.venue {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s;
}
.venue:hover { box-shadow: var(--shadow-hover); }
.venue p { margin: 0; }
.venue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.venue-head strong { font-size: 1.05rem; font-weight: 800; }
.venue-number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--heading);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 800;
  flex: none;
}
.venue-place { color: var(--muted); font-size: 0.85rem; }
/* Qloo's rank leads the card, above the AI's reading (decision 33, revised 23 October);
   ".venue p" would otherwise set their margins to 0. */
.venue-rank { font-size: 0.85rem; }
.venue p.venue-rank { margin-top: 6px; }
.venue p.venue-rank + p.reading { margin-top: 4px; }
.venue-rank.rank-top strong { color: var(--qloo-ink); }
.venue-rank.rank-bottom { color: var(--muted); }
.venue-where { margin: 4px 0 0; }
/* The rest of a place's evidence, folded under its card (decision 33, revised 23 October). */
.venue-why { margin-top: 8px; }
.venue-why > summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--primary-ink); }
.venue-why[open] > summary { margin-bottom: 6px; }
.venue-why > p + p { margin-top: 6px; }
.map-about > summary, .venues-more > summary { cursor: pointer; font-weight: 700; }
.map-about[open] > summary, .venues-more[open] > summary { margin-bottom: 6px; }
.map-about p, .venues-more p { margin: 0; }
/* The trial the local version would need, closing "How Namesake made this". */
.trial { margin: 28px 0 0; padding: 12px 16px; border-left: 4px solid var(--highlight); background: var(--surface); border-radius: var(--radius-sm); font-size: 0.95rem; }
.venue-empty { color: var(--muted); }
.venues-note { margin-top: 14px; font-size: 0.8rem; }
.venues-more { margin-top: 6px; font-size: 0.8rem; }

.tag {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}
.tag-strong { border-color: var(--highlight); background: var(--highlight); color: var(--on-highlight); }

/* The exposure plan: each step with its basis in front. The counter is not sage, so
   sage keeps meaning "Namesake's reading". */
.other-ways { margin-top: 32px; }
.plan { margin: 0; padding: 0; list-style: none; counter-reset: plan; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px 24px; }
.plan li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  counter-increment: plan;
}
.plan li::before {
  content: counter(plan);
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--primary-ink);
  color: var(--on-primary);
  font-size: 0.8rem;
  font-weight: 800;
  align-self: start;
  margin-top: 0.15em;
}
.plan li .basis { grid-column: 2; justify-self: start; }
.plan-text { grid-column: 2; min-width: 0; }

.basis {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.basis-qloo { border-color: var(--qloo); background: var(--qloo-soft); color: var(--qloo-ink); }
.basis-our-suggestion { border-color: var(--ai); background: var(--ai-soft); color: var(--ai-ink); }

/* Working: the animal's taped photo, the headline, a key, and the steps as a timeline,
   each marked by who did it, in colour and in words: terracotta for Qloo's part of the
   work (its calls and its answers), sage for Namesake's AI, grey for the classifier
   (TypeSafe's Jev), ink for the run's own code. */
.working-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 36px; align-items: center; margin-top: 18px; }
.portrait-small { margin: 10px 6px 0; }
.portrait-small::before { width: 64px; height: 20px; top: -8px; left: 18px; }
.portrait-small::after { width: 64px; height: 20px; bottom: 16px; right: 10px; }
.working-intro .animal-meta { margin: 0; }
.working-title { margin: 4px 0 6px; font-size: clamp(2rem, 3.8vw, 3rem); }
.working-intro .lead { margin: 0 0 6px; }
.step-key { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 0.85rem; font-weight: 700; }
.step-key li::before, .timeline li::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--text);
}
.step-key li::before { margin-right: 6px; vertical-align: 0.02em; }
.step-key .actor-qloo::before, .timeline .actor-qloo::before { background: var(--qloo); }
.step-key .actor-ai::before, .timeline .actor-ai::before { background: var(--ai); }
.step-key .actor-classifier::before, .timeline .actor-classifier::before { background: var(--border-strong); }
.timeline .actor-classifier { border-left-color: var(--border-strong); }
/* The actor in words on every step, so colour is never the only cue. */
.step-actor { display: inline-block; margin-right: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.actor-qloo .step-actor { color: var(--qloo-ink); }
.actor-ai .step-actor { color: var(--ai-ink); }
.actor-classifier .step-actor { color: var(--muted); }
/* More specific than the `.steps` box below, which the classic layout still uses. */
.steps.timeline { position: relative; list-style: none; margin: 26px 0 14px; padding: 0 0 0 30px; background: none; border: 0; box-shadow: none; font-size: inherit; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); opacity: 0.45; }
.timeline li {
  position: relative;
  margin: 8px 0;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.timeline li::before { position: absolute; left: -29px; top: 13px; width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--bg); }
.timeline .actor-qloo { border-left-color: var(--qloo); }
.timeline .actor-ai { border-left-color: var(--ai); }
.timeline .step-check, .timeline .step-note { color: var(--muted); }
.timeline .step-error { color: var(--attention-ink); font-weight: 700; }
.timeline .step-done { font-weight: 700; }
@media (max-width: 720px) {
  .working-head { grid-template-columns: 1fr; }
  .portrait-small { max-width: 260px; }
}

.who { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin-top: 20px; }
.who img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 3px var(--surface); }
.who p { margin: 0; }
.who h1 { margin: 2px 0; font-size: 1.8rem; line-height: 1.15; }
.where-label { color: var(--muted); font-size: 0.9rem; }

.steps {
  margin: 20px 0;
  padding: 14px 18px 14px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.steps li { margin: 4px 0; }
.step-check { color: var(--muted); }
.step-error { color: var(--attention-ink); font-weight: 700; }
.step-done { font-weight: 700; }
.result-link { color: var(--primary-ink); font-weight: 600; }

/* Generic / local toggle: both versions are in the page; the picked one shows. */
.version-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  flex: none;
}
.version-toggle legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.version-choice { position: relative; padding: 6px 16px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 700; }
.version-choice:has(input:checked) { background: var(--primary-ink); color: var(--on-primary); box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.1); }
.version-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.version-choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.version-choice input { position: absolute; opacity: 0; }
.listing-form:has(input[name="variant"][value="generic"]:checked) .version-local,
.listing-form:has(input[name="variant"][value="generic"]:checked) .local-only,
.listing-form:has(input[name="variant"][value="local"]:checked) .version-generic { display: none; }
/* With neither version to choose (no draft and no free generic name), one line, not two. */
.listing-form:not(:has(input[name="variant"]:checked)) .local-touch.version-generic { display: none; }

/* Forms */
.inline-field { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-field input { flex: 1 1 220px; }
input[type="text"], .add-animal-form input:not([type]), .add-animal-form textarea, .approve textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input[type="text"]:focus-visible, .add-animal-form input:not([type]):focus-visible,
.add-animal-form textarea:focus-visible, .approve textarea:focus-visible { border-color: var(--primary); outline-offset: 0; }
.inline-field input[type="text"] { width: auto; }
button[type="submit"]:not(.animal-card):not(.link-button), .candidates button {
  padding: 10px 18px;
  border: 1px solid var(--primary-ink);
  border-radius: 10px;
  background: var(--primary-ink);
  color: var(--on-primary);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}
button[type="submit"]:not(.animal-card):not(.link-button):hover { filter: brightness(1.08); }
.candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.candidates button { background: var(--surface); color: var(--primary-ink); border-color: var(--primary); box-shadow: none; }
.candidates button:hover { background: var(--primary-soft); }
.link-button { background: none; border: 0; padding: 0; color: var(--primary-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }
.hint { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; }
.form-message, .form-error { margin: 8px 0 0; font-size: 0.9rem; }
.form-error { color: var(--attention-ink); font-weight: 700; }
.custom-location { margin-top: 14px; }
.custom-location label { display: block; font-weight: 700; margin-bottom: 4px; }
.examples ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.example {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--highlight);
  border-radius: 999px;
  background: var(--highlight-soft);
  color: var(--highlight-ink);
  font-weight: 700;
  text-decoration: none;
}
.example:hover { background: var(--highlight); color: var(--on-highlight); }
.examples { margin-bottom: 28px; }
.add-animal a, .litter button { margin-top: 8px; }
.add-animal-form h1 { font-size: 2.2rem; margin: 16px 0 6px; }
.add-animal-form form { display: grid; gap: 6px; max-width: 640px; }
.add-animal-form label { font-weight: 700; margin-top: 6px; }
.add-animal-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface); }
.add-animal-form fieldset label { font-weight: 400; margin-right: 12px; }
.question { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 4px 0; }
.question span { min-width: 12em; }
.approved h2 { font-size: 1.3rem; margin: 24px 0 8px; }
.copy-block {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 4px 12px 6px 14px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.5;
  box-shadow: var(--shadow);
}
.copy {
  font: inherit;
  font-weight: 700;
  padding: 6px 14px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-ink);
  cursor: pointer;
}
.copy:hover { background: var(--primary-soft); }
.recorded { color: var(--muted); font-size: 0.9rem; }
.notice { max-width: 640px; }
.notice h1 { font-size: 2rem; }

/* Suggestions under the typed area, anchored to the field. */
.suggest-wrap { position: relative; display: block; flex: 1 1 220px; }
.inline-field .suggest-wrap input[type="text"] { width: 100%; box-sizing: border-box; }
.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
}
.suggestions li { padding: 6px 12px; cursor: pointer; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--primary-ink); color: var(--on-primary); }

/* Picking the shelter's spot on the start map. */
.map-hint { margin-top: 6px; }
.map-pick p { margin: 0 0 8px; }
.map-pick button {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-ink);
  color: var(--on-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Working page: a sign of life between steps. */
.busy { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 8px 0 16px; }
.busy-paw { display: inline-flex; color: var(--primary); font-size: 1.25rem; transform-origin: center; animation: busy-pulse 1.4s ease-in-out infinite; }
.busy-word { color: var(--text); font-weight: 700; }
.busy-ellipsis::after { content: "…"; animation: busy-blink 1.2s steps(2, start) infinite; }
.busy-time { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
@keyframes busy-pulse {
  0%, 100% { transform: scale(0.8) rotate(-12deg); opacity: 0.55; }
  50% { transform: scale(1.1) rotate(-12deg); opacity: 1; }
}
@keyframes busy-blink { to { visibility: hidden; } }

/* A failed area check, shown at the top of "Where is the shelter?". */
.location-alert {
  margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--highlight);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--highlight-soft); font-weight: 700;
}

/* The shelter bar above the animals, and its panel for changing the area. */
.shelter { margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.shelter > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.shelter > summary::-webkit-details-marker { display: none; }
.shelter-heading, .shelter-region { color: var(--muted); }
.shelter-name { font-size: 1.05rem; font-weight: 800; }
.shelter-toggle { margin-left: auto; color: var(--primary-ink); font-weight: 700; }
.shelter-toggle .when-open, .shelter[open] .shelter-toggle .when-closed { display: none; }
.shelter[open] .shelter-toggle .when-open { display: inline; }
.shelter[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.shelter > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shelter .where { padding: 18px; margin-bottom: 0; }
.shelter.unchosen > summary .shelter-name { color: var(--primary-ink); }
.shelter-region:not(:empty)::before { content: ", "; }
.shelter .if-unchosen, .shelter.unchosen .if-chosen { display: none; }
.shelter.unchosen .if-unchosen { display: inline; }

/* The key drawn on the result map. */
.map-key {
  max-width: 220px; padding: 8px 10px; font-size: 0.75rem; line-height: 1.3;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.map-key p { margin: 2px 0 0; }

/* Leaflet's own chrome, brought onto the palette. CARTO's tiles are quiet already; the
   map scripts mark a map drawn over OpenStreetMap's standard tiles (no key) with
   `tiles-plain`, and only then are the tiles quietened: lower saturation and a slight
   warm tint, inverted and dimmed in dark mode. Only the tile pane is filtered. */
.leaflet-container { font-family: inherit; }
.tiles-plain .leaflet-tile-pane { filter: saturate(0.45) sepia(0.18) brightness(1.04) contrast(0.92); }
@media (prefers-color-scheme: dark) {
  .tiles-plain .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(0.35) brightness(0.82) contrast(0.9); }
}
.leaflet-bar { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.leaflet-touch .leaflet-bar { border: 1px solid var(--border); }
.leaflet-bar a { background: var(--surface); color: var(--text); border-bottom-color: var(--border); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--surface-2); color: var(--text); }
.leaflet-bar a.leaflet-disabled { background: var(--surface-2); color: var(--muted); }
.leaflet-touch .leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:last-child { border-radius: 0; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }
.leaflet-tooltip { border-color: var(--border); }
.leaflet-container .leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--muted);
  border-radius: var(--radius-sm) 0 0 0;
}
.leaflet-container .leaflet-control-attribution a { color: var(--primary-ink); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* Suggested places on the result map, numbered as in the list. */
/* The numbers mark Qloo's places in the list's order: neutral ink, not a choice. */
.venue-pin span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--heading); color: var(--bg); font-weight: 800; font-size: 0.8rem; border: 2px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35); }

/* The search above the start map: it only moves the map. */
.map-search { margin: 0 0 8px; }
.map-search label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.map-search input { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Under the "01 Shelter area" heading the bar's own "Shelter area:" label is for screen
   readers only; the heading says it once. */
.shelter-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Read by screen readers only: tells each "Why this place" apart. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The visitor's own animals and their workspace, before the samples (decision 34). */
.yours { margin: 8px 0 28px; }
.yours h3, .samples-heading { font-family: var(--display); font-size: 1.25rem; margin: 0 0 12px; }
.yours .animal-grid > li { flex-direction: column; }
.own-actions { display: flex; gap: 16px; margin: 8px 4px 0; }
.workspace-note { font-size: 0.9rem; margin: 8px 0 0; max-width: 60ch; }
.workspace-note a { color: var(--primary-ink); font-weight: 700; }

/* The flyer link under the copy and approve buttons (decision 35). */
.actions .flyer-link { grid-column: 1 / -1; justify-self: start; }
/* "Print a flyer" and the flyer page's links, in the skin's ink like its other links. */
.flyer-link, .flyer-tools a { color: var(--primary-ink); font-weight: 700; }