/* ==========================================================================
   base.css — tokens, reset, the page, and the chrome around the world
   ========================================================================== */

:root {
  color-scheme: light;
  --ink:        #1f1a17;
  --ink-soft:   #4a423b;
  --ink-faint:  #8a7f74;
  --paper:      #fbf7ef;
  --rule:       #d9d0c2;
  --accent:     #5a888b;
  --accent-ink: #446769;
  --platform:   #a7532d;
  --interact:   #ca7576;
  --spike:      #c25153;
  --vine:       #637d53;
  --water:      #2f6f8f;
  --sun:        #d9a03a;
  --print-paper: #ffffff;

  --sky-cloud: #6f8fa8;
  --sky-fog:   #8fa3b3;
  --sky-hill:  #7d8f5a;
  --sky-tree:  #5f7a45;

  --stone:       #8a8580;
  --rock:        #5f5a54;
  --rock-ink:    #3f3a35;
  --tunnel-ink:  #3a2e22;
  --tunnel-dark: #4a3b2c;
  --wood:        #7a5a3c;
  --torch:       #5a3e24;
  --flame:       #e0701c;
  --flame-hot:   #f2b13a;
  --glow:        #f0b54a;
  --gem-red:     #c0392b;
  --gem-blue:    #2e86c1;
  --gem-green:   #27ae60;

  --mu-beige:  #e9dcc3;
  --mu-cream:  #f3ecdf;
  --mu-linen:  #efe6d4;
  --mu-tan:    #a08a6a;
  --mu-taupe:  #8a7a66;
  --mu-brown:  #7a5a3a;
  --mu-gold:   #b08a2e;
  --mu-plaque: #8a6a2a;
  --mu-light:  #d9b44a;
  --mu-rope:   #9a2f2f;

  --cat:           #c98a4b;
  --brass:         #c9962b;
  --art-amplitude: #1e61f0;
  --art-beyond20:  #7b3fa0;
  --art-aoc:       #2e7d32;

  --debug-ink:   #eae3d8;
  --debug-label: #9c8f7f;
  --debug-bg:    rgba(24, 20, 17, 0.9);

  --v-ink:        #4f7a3e;
  --v-ground:     #3f6b35;
  --v-sky0-ink:   #6aa6da;
  --v-sky0-bg:    #5b9bd5;
  --v-sky1-ink:   #8bbce4;
  --v-sky1-bg:    #7cb2e0;
  --v-sky2-ink:   #b0d3ed;
  --v-sky2-bg:    #a3cbea;
  --v-sky3-ink:   #dbeaf4;
  --v-sky3-bg:    #cfe3f1;
  --v-moon:       #ffd84d;
  --v-far-ink:    #e6eef6;
  --v-far-bg:     #8fa8c4;
  --v-snow:       #ffffff;
  --v-mid-ink:    #8fae94;
  --v-mid-bg:     #5f7f6a;
  --v-near-ink:   #6f9a52;
  --v-near-bg:    #3f6b35;
  --v-tree:       #24461f;
  --v-water-ink:  #cfe6f5;
  --v-water-bg:   #4f8fc0;
  --v-reflect:    #3d6f4a;
  --v-twinkle:    #6aa6da;

  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  /* A 3x3 grid of 10x16 character cells, sliced by border-image into an
     ASCII box that fits any size. The colour is --ink. */
  --ascii-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='48' font-family='Consolas,Menlo,monospace' font-size='15' fill='%231f1a17' text-anchor='middle'%3E%3Ctext x='5' y='12'%3E+%3C/text%3E%3Ctext x='15' y='12'%3E-%3C/text%3E%3Ctext x='25' y='12'%3E+%3C/text%3E%3Ctext x='5' y='29'%3E|%3C/text%3E%3Ctext x='25' y='29'%3E|%3C/text%3E%3Ctext x='5' y='44'%3E+%3C/text%3E%3Ctext x='15' y='44'%3E-%3C/text%3E%3Ctext x='25' y='44'%3E+%3C/text%3E%3C/svg%3E");

  --step--1: clamp(0.94rem, 0.90rem + 0.18vw, 1.03rem);
  --step-0:  clamp(1.02rem, 0.97rem + 0.26vw, 1.15rem);
  --step-1:  clamp(1.22rem, 1.11rem + 0.52vw, 1.48rem);
  --step-2:  clamp(1.52rem, 1.30rem + 1.05vw, 2.05rem);
  --step-3:  clamp(2.10rem, 1.55rem + 2.60vw, 3.60rem);

  --measure: 68ch;
}

/* Print always takes the light set above. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink:        #abb2bf;
    --ink-soft:   #9da5b4;
    --ink-faint:  #7f848e;
    --paper:      #282c34;
    --rule:       #3e4451;
    --accent:     #56b6c2;
    --accent-ink: #56b6c2;
    --platform:   #d19a66;
    --interact:   #e06c75;
    --spike:      #be5046;
    --vine:       #98c379;
    --water:      #61afef;
    --sun:        #e5c07b;
    --ascii-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='48' font-family='Consolas,Menlo,monospace' font-size='15' fill='%23abb2bf' text-anchor='middle'%3E%3Ctext x='5' y='12'%3E+%3C/text%3E%3Ctext x='15' y='12'%3E-%3C/text%3E%3Ctext x='25' y='12'%3E+%3C/text%3E%3Ctext x='5' y='29'%3E|%3C/text%3E%3Ctext x='25' y='29'%3E|%3C/text%3E%3Ctext x='5' y='44'%3E+%3C/text%3E%3Ctext x='15' y='44'%3E-%3C/text%3E%3Ctext x='25' y='44'%3E+%3C/text%3E%3C/svg%3E");

    --sky-cloud: #61afef;
    --sky-fog:   #7f848e;
    --sky-hill:  #98c379;
    --sky-tree:  #98c379;

    --stone:       #abb2bf;
    --rock:        #181a1f;
    --rock-ink:    #abb2bf;
    --tunnel-ink:  #abb2bf;
    --tunnel-dark: #7f848e;
    --wood:        #d19a66;
    --torch:       #d19a66;
    --flame:       #d19a66;
    --flame-hot:   #e5c07b;
    --glow:        #e5c07b;
    --gem-red:     #e06c75;
    --gem-blue:    #61afef;
    --gem-green:   #98c379;

    --mu-beige:  #4b4038;
    --mu-cream:  #33363d;
    --mu-linen:  #353941;
    --mu-tan:    #a39484;
    --mu-taupe:  #8f877e;
    --mu-brown:  #d19a66;
    --mu-gold:   #e5c07b;
    --mu-plaque: #d19a66;
    --mu-light:  #e5c07b;
    --mu-rope:   #e06c75;

    --cat:           #d19a66;
    --brass:         #e5c07b;
    --art-amplitude: #61afef;
    --art-beyond20:  #c678dd;
    --art-aoc:       #98c379;

    --v-ink:        #8fa3c7;
    --v-ground:     #1b2238;
    --v-sky0-ink:   #f2e6c9;
    --v-sky0-bg:    #121831;
    --v-sky1-ink:   #8d9bc9;
    --v-sky1-bg:    #1f2747;
    --v-sky2-ink:   #c79fbf;
    --v-sky2-bg:    #3a3459;
    --v-sky3-ink:   #f0b08a;
    --v-sky3-bg:    #6a4560;
    --v-moon:       #fff4cf;
    --v-far-ink:    #c9d2ea;
    --v-far-bg:     #56618a;
    --v-snow:       #ffffff;
    --v-mid-ink:    #9aa6c8;
    --v-mid-bg:     #353f63;
    --v-near-ink:   #6b789e;
    --v-near-bg:    #1f2842;
    --v-tree:       #0f1526;
    --v-water-ink:  #7f97c8;
    --v-water-bg:   #172140;
    --v-reflect:    #4a5884;
    --v-twinkle:    #2f3860;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

img, svg { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--interact); }

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

h1, h2, h3 {
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.4em;
}

h1 { font-size: 26px; }
h2, h3 { font-size: 16px; }

p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 0.9em; padding-left: 1.35em; }
li { margin-bottom: 0.35em; }

/* Lock background scrolling while an overlay is open. `overflow: hidden` on
   html, never `position: fixed` on body, which breaks iOS. */
html.overlay-open,
html.reader-open { overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px; left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--paper);
  border: 1px dashed var(--ink);
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

/* Chrome ------------------------------------------------------------------ */

.chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem clamp(0.9rem, 3vw, 1.75rem);
  padding-top: max(0.6rem, env(safe-area-inset-top));
  background: var(--paper);
  /* Only the bottom edge of the ASCII box: a row of dashes. */
  border: solid;
  border-width: 0 0 16px;
  border-image: var(--ascii-box) 16 10 round;
}

.brand {
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.brand::before { content: "> "; color: var(--accent); }
.brand::after { content: "_"; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand::after { animation: none; } }

.chrome-actions { display: flex; gap: 0.5rem; }

.btn {
  font-family: var(--mono);
  font-size: 14px;
  padding: 0.3rem 0.2rem;
  background: none;
  color: var(--ink);
  border: 0;
  cursor: pointer;
}
.btn::before { content: "[ "; color: var(--ink-faint); }
.btn::after { content: " ]"; color: var(--ink-faint); }
.btn:hover { color: var(--interact); }
.btn:hover::before, .btn:hover::after { color: var(--interact); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn--quiet { font-size: 13px; color: var(--ink-soft); }

/* Contents / map ---------------------------------------------------------- */

.map {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 6vh, 4rem) 1rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.map[hidden] { display: none; }

.map-sheet,
.reader-sheet {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  background: var(--paper);
  border: solid;
  border-width: 16px 10px;
  border-image: var(--ascii-box) 16 10 round;
}

.map-sheet {
  width: min(46rem, 100%);
  padding: clamp(1rem, 3vw, 1.75rem);
}

.map-sheet h2 {
  margin-bottom: 0.6em;
  font-family: inherit;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.map-sheet h2::before { content: "## "; color: var(--accent); }
.map-foot { margin-top: 1.4rem; text-align: right; }

#map-list { list-style: none; padding: 0; counter-reset: none; }
#map-list li { margin-bottom: 0.2rem; }
#map-list a, #map-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.15rem 0.5rem;
  font: inherit;
  background: none;
  border: 0;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
#map-list a::before, #map-list button::before { content: "  "; white-space: pre; color: var(--accent); }
#map-list a:hover::before, #map-list button:hover::before,
#map-list a:focus-visible::before, #map-list button:focus-visible::before { content: "> "; }
#map-list a:hover, #map-list button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
#map-list .map-sub { padding-left: 2ch; color: var(--ink-soft); }
#map-list li[data-unfound] a, #map-list li[data-unfound] button { color: var(--ink-faint); font-style: italic; }
#map-list .map-heading {
  margin-top: 0.9rem;
  padding: 0.15rem 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#map-list .map-heading::before { content: "### "; color: var(--accent); }

/* Touch controls --------------------------------------------------------- */

.touch-controls { display: none; }
.touch-controls[hidden] { display: none !important; }

/* Reader ----------------------------------------------------------------- */

.reader {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  /* An auto track would grow to the headings' nowrap ASCII rules. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(0.75rem, 4vh, 3rem) 1rem;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  overflow-y: auto;
}
.reader[hidden] { display: none; }

.reader-sheet {
  position: relative;
  width: min(52rem, 100%);
  padding: clamp(1.2rem, 4vw, 2.5rem);
  font-size: 15px;
}

.reader-close {
  position: absolute;
  top: 0.4rem; right: 0.6rem;
  padding: 0.2rem 0.4rem;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
}
.reader-close:hover { color: var(--interact); }

.reader-body > :first-child { margin-top: 0; }
.reader-body h2 { margin-bottom: 0.5em; }
.reader-body ul { max-width: var(--measure); }
.reader-body p, .reader-body li { max-width: var(--measure); }

.reader-sheet:has(.polaroid) {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  transform: rotate(-1.5deg);
}
.reader-sheet:has(.polaroid) .reader-close {
  top: -0.7rem; right: -0.9rem;
  z-index: 1;
  background: var(--paper);
}
.polaroid {
  margin: 0;
  padding: 12px 12px 0;
  background: var(--paper);
  border: solid;
  border-width: 16px 10px;
  border-image: var(--ascii-box) 16 10 round;
}
.cat-photo {
  width: auto;
  max-height: 60vh;
  border: 1px solid var(--rule);
}
.polaroid figcaption {
  padding: 1.6rem 0 1.4rem;
  text-align: center;
}
.reader-body .polaroid h2 { margin: 0; }
.reader-body .polaroid h2::before,
.reader-body .polaroid h2::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .reader-sheet:has(.polaroid) { transform: none; }
}
.map-sheet :focus-visible,
.reader-sheet :focus-visible { outline-width: 1px; outline-offset: 1px; }
#map-list button:disabled { cursor: default; }
#map-list button:disabled::before { content: "  "; }
#map-list button:disabled:hover { background: none; }

/* The view through the telescope: day in the light theme, night in the dark. */
.vista {
  width: fit-content;
  margin: 1rem 0;
  white-space: pre;
  color: var(--v-ink);
}
/* The lens is 56 columns, and a monospace column is about 0.6em, so it needs
   34em of width. The two calcs are the reader sheet's inner width below and
   above 480px, where its 4vw padding passes 1.2rem. */
.reader-body .vista {
  font-size: min(14px, calc((100vw - 92px) / 34.5), calc((92vw - 54px) / 34.5));
  line-height: 1.15;
}
.reader-sheet:has(.vista) { width: fit-content; max-width: 100%; }
.reader-body:has(.vista) { width: min-content; max-width: 100%; }
/* Sized to nothing, so the heading's rule takes the lens's width instead of
   widening the sheet to its own. */
.reader-body:has(.vista) h2::after { width: 0; min-width: 100%; }
/* Inline backgrounds cover only the glyph box, which at a small font rounds
   short of the line and leaves a stripe between rows. */
.vista :where(span:not(.v-rim, .v-lake)) { background: var(--v-ground); padding-block: 0.05em; }
.vista .v-sky0   { color: var(--v-sky0-ink); background: var(--v-sky0-bg); }
.vista .v-sky1   { color: var(--v-sky1-ink); background: var(--v-sky1-bg); }
.vista .v-sky2   { color: var(--v-sky2-ink); background: var(--v-sky2-bg); }
.vista .v-sky3   { color: var(--v-sky3-ink); background: var(--v-sky3-bg); }
.vista .v-moon   { color: var(--v-moon); background: var(--v-sky0-bg); font-weight: 700; }
.vista .v-far, .vista .v-far-fill { color: var(--v-far-ink); background: var(--v-far-bg); }
.vista .v-snow   { color: var(--v-snow); background: var(--v-far-bg); font-weight: 700; }
.vista .v-mid, .vista .v-mid-fill { color: var(--v-mid-ink); background: var(--v-mid-bg); font-weight: 700; }
.vista .v-near, .vista .v-near-fill { color: var(--v-near-ink); background: var(--v-near-bg); font-weight: 700; }
.vista .v-tree   { color: var(--v-tree); background: var(--v-near-bg); font-weight: 700; }
.vista .v-water  { color: var(--v-water-ink); background: var(--v-water-bg); }
.vista .v-reflect { color: var(--v-reflect); background: var(--v-water-bg); }
.vista .v-rim    { color: var(--ink); font-weight: 700; }
.vista .v-twinkle { animation: v-twinkle 4s ease-in-out infinite; }
.vista .v-twinkle--1 { animation-duration: 5.5s; animation-delay: -1.7s; }
.vista .v-twinkle--2 { animation-duration: 3.2s; animation-delay: -2.9s; }
.vista .v-twinkle--3 { animation-duration: 4.6s; animation-delay: -3.3s; }
.vista .v-twinkle--4 { animation-duration: 6s; animation-delay: -0.8s; }
@keyframes v-twinkle { 45%, 55% { color: var(--v-twinkle); } }
@media (prefers-reduced-motion: reduce) {
  .vista .v-twinkle { animation: none; }
}