/* ============================================================
   house-foundation.css — the bedrock
   Sacsayhuamán inspired mortarless masonry: design tokens + resilient primitives.
   No framework. Cut to fit, interlocking, flexes under change.

   HOUSE RULES
   - Relative first: sizes derive from the root font size, which itself starts
     from the reader's browser setting (100%), times one dial: --ui-scale.
     Zoom, browser font settings and an in-page text-size choice all compose.
   - Ratios over magic numbers: type is a modular scale (--ratio), space is a
     multiple of one unit (--space). Change the unit or the ratio, not the steps.
   - Absolute values only where they are the point: hairline borders (crisp at
     1 device pixel), shadows, and sizes that must equal pixel values computed
     in script (map markers, canvas). Name the reason next to the value.
   - Roles, not colours: rules here use --color-* roles. A project supplies
     palettes; the neutral values below only keep a bare page legible.
     Contrast targets (WCAG 2.2): text and muted text ≥ 4.5:1 against bg and
     surface; control borders and focus rings ≥ 3:1 against what they sit on.
   - Everything lives in @layer foundation, so any unlayered project rule wins
     without specificity games. Opt-in primitives are classes; the base layer
     keeps browser margins so dense interfaces are not disturbed.

   USE
   Load before the project stylesheet (or concatenate it in front).
   Requires <meta name="viewport" content="width=device-width,
     initial-scale=1, viewport-fit=cover"> for the safe-area insets.
   Compatible back to Safari 15.4 / Chrome 99: no color-mix, no pow(),
   no light-dark(); svh/dvh are the newest features used.

   Precision matters: beware, rounding errors accumulate over centuries and
   earthquakes — conquistadores won't stand a chance trying to break this.
   ============================================================ */

@layer foundation {
  /* ---------- Tokens ---------- */
  :root {
    /* The one dial for reader-chosen text size (e.g. 0.875 / 1 / 1.125). */
    --ui-scale: 1;

    /* Type: modular scale around the body size. */
    --ratio: 1.2;
    --step-0: 1rem;
    --step-1: calc(var(--step-0) * var(--ratio));
    --step-2: calc(var(--step-1) * var(--ratio));
    --step-3: calc(var(--step-2) * var(--ratio));
    --step-4: calc(var(--step-3) * var(--ratio));
    --step--1: calc(var(--step-0) / var(--ratio));
    --step--2: calc(var(--step--1) / var(--ratio));
    --leading: 1.5;
    --leading-tight: 1.2;

    /* Space: multiples of one unit. */
    --space: 1rem;
    --space-3xs: calc(var(--space) * 0.125);
    --space-2xs: calc(var(--space) * 0.25);
    --space-xs: calc(var(--space) * 0.5);
    --space-s: calc(var(--space) * 0.75);
    --space-m: var(--space);
    --space-l: calc(var(--space) * 1.5);
    --space-xl: calc(var(--space) * 2);
    --space-2xl: calc(var(--space) * 3);
    --space-3xl: calc(var(--space) * 4);

    /* Layout */
    --measure: 65ch;
    --gutter: clamp(var(--space-m), 4vw, var(--space-2xl));
    --radius: 0.375rem;
    --radius-round: 100vmax;
    --hairline: 1px; /* device pixel on purpose: crisp at any scale */
    --tap-size: 2.75rem; /* 44 px at the default scale */
    --focus-width: max(2px, 0.15em);
    --focus-offset: 0.15em;

    /* Families: stacks only; projects supply their own faces. */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-body);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Colour roles, neutral light defaults. */
    color-scheme: light;
    --color-bg: #ffffff;
    --color-surface: #f3f3f3;
    --color-text: #1b1b1b;
    --color-text-muted: #595959;
    --color-border: #d6d6d6; /* decorative separators only */
    --color-control-border: #767676;
    --color-accent: #1b1b1b;
    --color-on-accent: #ffffff;
    --color-link: #0b57d0;
    --color-focus: #0b57d0;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-bg: #121212;
      --color-surface: #1e1e1e;
      --color-text: #ececec;
      --color-text-muted: #a6a6a6;
      --color-border: #3a3a3a;
      --color-control-border: #8a8a8a;
      --color-accent: #ececec;
      --color-on-accent: #121212;
      --color-link: #8ab4f8;
      --color-focus: #8ab4f8;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-text: #ececec;
    --color-text-muted: #a6a6a6;
    --color-border: #3a3a3a;
    --color-control-border: #8a8a8a;
    --color-accent: #ececec;
    --color-on-accent: #121212;
    --color-link: #8ab4f8;
    --color-focus: #8ab4f8;
  }

  /* ---------- Base ---------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    font-size: calc(100% * var(--ui-scale));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-block-size: 100svh;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
  }
  /* Not svg/canvas: map and chart libraries size those themselves. */
  :where(img, picture, video) {
    max-inline-size: 100%;
    block-size: auto;
  }
  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }
  :where(button, [role="button"], summary, label[for]) {
    cursor: pointer;
  }
  :where(a) {
    color: var(--color-link);
    text-decoration-thickness: max(1px, 0.08em);
    text-underline-offset: 0.18em;
  }
  :where(h1, h2, h3, h4) {
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  :where(:focus-visible) {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }
  /* Fingers need room; mice and pens keep dense layouts. */
  @media (pointer: coarse) {
    :where(button, input, select, textarea, summary) {
      min-block-size: var(--tap-size);
    }
  }
  [hidden] {
    display: none !important;
  }

  /* ---------- Primitives (opt-in) ---------- */
  /* A scrolling page: safe-area aware gutters. */
  .page {
    padding-block: max(var(--space-m), env(safe-area-inset-top))
      max(var(--space-m), env(safe-area-inset-bottom));
    padding-inline: max(var(--gutter), env(safe-area-inset-left))
      max(var(--gutter), env(safe-area-inset-right));
  }
  /* Centred hero content filling the small viewport. */
  .stage {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    gap: var(--space-l);
    text-align: center;
  }
  /* Readable line length. */
  .wrap {
    inline-size: min(100%, var(--measure));
    margin-inline: auto;
  }
  /* Vertical rhythm for prose: owns its children's margins. */
  .flow > * {
    margin-block: 0;
  }
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }
  /* Column with even gaps. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, var(--space-m));
  }
  /* Wrapping row of items (tags, buttons). */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-xs));
    align-items: center;
  }
  /* Responsive grid without media queries. */
  .grid {
    display: grid;
    gap: var(--grid-space, var(--space-m));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
    );
  }
  /* Side by side until there is less than --switch-at room, then stacked. */
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
  }
  .switcher > * {
    flex: 1 1 calc((var(--switch-at, var(--measure)) - 100%) * 999);
  }
  /* Fixed aspect ratio media. */
  .frame {
    aspect-ratio: var(--ratio-frame, 1);
    overflow: hidden;
  }
  .frame > :where(img, video, canvas, svg) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--fit, cover);
  }
  .bleed {
    inline-size: 100%;
    max-inline-size: none;
  }
  .lede {
    font-size: var(--step-1);
  }
  .muted {
    color: var(--color-text-muted);
  }
  .mono {
    font-family: var(--font-mono);
  }
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

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

/* Site layer over design/css/house-foundation.css (concatenated in front by the build).
   Sizes are rem/em so the reader's browser setting and the Settings text size
   (--ui-scale) scale the whole interface; px remains only for hairlines,
   shadows and map-marker sizes that must equal pixel values set in script.
   The map remains the page; panels never add a backdrop. */

/* Lilita One (OFL, self-hosted): the hand-painted look of band names on Oaxacan
   walls. One weight only, so headings never use synthetic bold. */
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lilita-one-latin.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: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lilita-one-latin-ext.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;
}
:root {
  --font-display: "Lilita One", var(--font-body);
}
h1,
h2,
.detail-title,
.event-row strong,
.about-edge h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.01em;
}

/* Palette: role values for the dark (default) and light themes. */
:root {
  color-scheme: dark;
  --color-text: #eee4d4;
  --color-text-muted: #b9b4a9;
  --color-bg: #171d1b;
  --color-surface: #222c28;
  --color-panel: #202923;
  --color-hover: #354238;
  --color-selected: #3d4b36;
  --color-selected-border: #ad9b6d;
  --color-border: #516057;
  --color-control-border: #7a887e;
  --color-accent: #b6502e;
  --color-on-accent: #ffffff;
  --color-focus: #e2875f;
  --color-link: #ffc78b;
  --color-notice: #3e3223;
  --color-missing: #413226;
  --color-paper: #1b3028;
  --color-paper-text: #f9ecd0;
  --color-marker-edge: #26392c;
  --color-marker-selected: #ad441e;
  --color-badge: #782916;
  --color-on-badge: #ffffff;
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-text: #20352e;
  --color-text-muted: #56665c;
  --color-bg: #e9eee5;
  --color-surface: #ffffff;
  --color-panel: #ffffff;
  --color-hover: #edf1e9;
  --color-selected: #e7eee3;
  --color-selected-border: #71866c;
  --color-border: #d7dfd8;
  --color-control-border: #74877a;
  --color-accent: #923e23;
  --color-on-accent: #ffffff;
  --color-focus: #923e23;
  --color-link: #854325;
  --color-notice: #f4eddd;
  --color-missing: #f8ebd5;
  --color-paper: #eadfc7;
  --color-paper-text: #243f36;
}
/* Alternative palettes (Settings → Text and colours). Each pairs a dark and a
   light theme and meets the foundation's contrast targets. */
/* Papel picado: violet-black ink with rosa mexicano and marigold, as on the posters. */
:root[data-palette="papel"]:not([data-theme="light"]) {
  --color-text: #f4ead6;
  --color-text-muted: #bfb1c4;
  --color-bg: #110c17;
  --color-surface: #221929;
  --color-panel: #19121f;
  --color-hover: #2c2136;
  --color-selected: #3a2650;
  --color-selected-border: #b48ad6;
  --color-border: #3c2e48;
  --color-control-border: #8e7d99;
  --color-accent: #c8156b;
  --color-focus: #f6b337;
  --color-link: #f6b337;
  --color-notice: #3b2a16;
  --color-missing: #3d1f2c;
  --color-paper: #1d1226;
  --color-paper-text: #f4ead6;
  --color-marker-edge: #1a1020;
  --color-marker-selected: #e8327c;
  --color-badge: #c8156b;
}
:root[data-palette="papel"][data-theme="light"] {
  --color-text: #2a1838;
  --color-text-muted: #64566e;
  --color-bg: #f6efe4;
  --color-surface: #fffaf3;
  --color-panel: #fffaf3;
  --color-hover: #f3e8f3;
  --color-selected: #f0e2f2;
  --color-selected-border: #9b6aa8;
  --color-border: #e4d6e2;
  --color-control-border: #857596;
  --color-accent: #a8125a;
  --color-focus: #a8125a;
  --color-link: #8e1d5c;
  --color-notice: #fbecd2;
  --color-missing: #fbe3ea;
  --color-paper: #f3e6d3;
  --color-paper-text: #2a1838;
  --color-marker-edge: #2a1838;
  --color-marker-selected: #c8156b;
  --color-badge: #a8125a;
}
/* Copal y Cempasúchil (id "brasas"): copal smoke and marigold fire, for the fire-and-devils poster style. */
:root[data-palette="brasas"]:not([data-theme="light"]) {
  --color-text: #f6e7d2;
  --color-text-muted: #c9b29b;
  --color-bg: #140d0a;
  --color-surface: #261a14;
  --color-panel: #1c130f;
  --color-hover: #33221a;
  --color-selected: #43241a;
  --color-selected-border: #e08a3c;
  --color-border: #4a3328;
  --color-control-border: #9a7f69;
  --color-accent: #c9461a;
  --color-focus: #ffad4d;
  --color-link: #ffad4d;
  --color-notice: #3d2a14;
  --color-missing: #43201a;
  --color-paper: #1f130e;
  --color-paper-text: #f6e7d2;
  --color-marker-edge: #1a0f0a;
  --color-marker-selected: #ff7a2f;
  --color-badge: #b8360f;
}
:root[data-palette="brasas"][data-theme="light"] {
  --color-text: #2c1a12;
  --color-text-muted: #6b5243;
  --color-bg: #f5ebdf;
  --color-surface: #fffaf3;
  --color-panel: #fffaf3;
  --color-hover: #f8ebde;
  --color-selected: #f6e0cc;
  --color-selected-border: #b77a4a;
  --color-border: #e8d6c4;
  --color-control-border: #957560;
  --color-accent: #a3360f;
  --color-focus: #a3360f;
  --color-link: #8f3210;
  --color-notice: #fbe9cf;
  --color-missing: #f9dfd3;
  --color-paper: #f1e1cc;
  --color-paper-text: #2c1a12;
  --color-marker-edge: #2c1a12;
  --color-marker-selected: #c9461a;
  --color-badge: #a3360f;
}
/* Further palettes; hover, borders, paper and markers derive from the base roles
   (generated once, contrast-checked, then maintained here by hand). */
/* Royal Velvet Obsidian: volcanic glass, royal purple velvet and gold thread. */
:root[data-palette="obsidian"]:not([data-theme="light"]) {
  --color-text: #efe8f7;
  --color-text-muted: #b6aec6;
  --color-bg: #0b0a10;
  --color-surface: #1b1826;
  --color-panel: #13111b;
  --color-hover: #2c2937;
  --color-selected: #2d1f4d;
  --color-selected-border: #b39ddb;
  --color-border: #3b3843;
  --color-control-border: #8a80a3;
  --color-accent: #6c2bd9;
  --color-on-accent: #ffffff;
  --color-focus: #e9c46a;
  --color-link: #e9c46a;
  --color-notice: #312a26;
  --color-missing: #23163d;
  --color-paper: #150d24;
  --color-paper-text: #efe8f7;
  --color-marker-edge: #0b0a10;
  --color-marker-selected: #8955e1;
  --color-badge: #6c2bd9;
  --color-on-badge: #ffffff;
}
:root[data-palette="obsidian"][data-theme="light"] {
  --color-text: #1d1530;
  --color-text-muted: #5e5672;
  --color-bg: #f3f0f7;
  --color-surface: #ffffff;
  --color-panel: #fdfcff;
  --color-hover: #edecee;
  --color-selected: #ebe3fb;
  --color-selected-border: #8b6fc6;
  --color-border: #d5d2da;
  --color-control-border: #7f7596;
  --color-accent: #5b21b6;
  --color-on-accent: #ffffff;
  --color-focus: #5b21b6;
  --color-link: #5b21b6;
  --color-notice: #eae2f6;
  --color-missing: #ede6f8;
  --color-paper: #eae4f3;
  --color-paper-text: #1d1530;
  --color-marker-edge: #1d1530;
  --color-marker-selected: #5b21b6;
  --color-badge: #5b21b6;
  --color-on-badge: #ffffff;
}
/* Torito pirotécnico: night sky, magenta rockets, golden sparks and cyan trails. */
:root[data-palette="torito"]:not([data-theme="light"]) {
  --color-text: #f1f0ff;
  --color-text-muted: #b3b5cc;
  --color-bg: #0a0d16;
  --color-surface: #171c33;
  --color-panel: #10142a;
  --color-hover: #282d43;
  --color-selected: #2a1f45;
  --color-selected-border: #3ee0d0;
  --color-border: #393c50;
  --color-control-border: #7e84a8;
  --color-accent: #d1105a;
  --color-on-accent: #ffffff;
  --color-focus: #ffd23f;
  --color-link: #ffd23f;
  --color-notice: #312f2d;
  --color-missing: #331333;
  --color-paper: #1e0d1d;
  --color-paper-text: #f1f0ff;
  --color-marker-edge: #0a0d16;
  --color-marker-selected: #da407b;
  --color-badge: #d1105a;
  --color-on-badge: #ffffff;
}
:root[data-palette="torito"][data-theme="light"] {
  --color-text: #141a33;
  --color-text-muted: #555b78;
  --color-bg: #f2f3f9;
  --color-surface: #ffffff;
  --color-panel: #ffffff;
  --color-hover: #ecedef;
  --color-selected: #fde4ee;
  --color-selected-border: #0f8f86;
  --color-border: #d5d6da;
  --color-control-border: #767c9a;
  --color-accent: #c2104f;
  --color-on-accent: #ffffff;
  --color-focus: #c2104f;
  --color-link: #a80f47;
  --color-notice: #f5e2e9;
  --color-missing: #f9e7ed;
  --color-paper: #eee5ee;
  --color-paper-text: #141a33;
  --color-marker-edge: #141a33;
  --color-marker-selected: #c2104f;
  --color-badge: #c2104f;
  --color-on-badge: #ffffff;
}
/* Piñata (light first): bright paper, hot pink, turquoise and yellow. */
:root[data-palette="pinata"]:not([data-theme="light"]) {
  --color-text: #fff0f7;
  --color-text-muted: #cdb3c6;
  --color-bg: #1a0f1d;
  --color-surface: #2c1a34;
  --color-panel: #23142a;
  --color-hover: #3d2b44;
  --color-selected: #4a1f3d;
  --color-selected-border: #2ee6d6;
  --color-border: #4b3c4f;
  --color-control-border: #9a7f98;
  --color-accent: #c8126f;
  --color-on-accent: #ffffff;
  --color-focus: #2ee6d6;
  --color-link: #ffd23f;
  --color-notice: #422f2d;
  --color-missing: #411436;
  --color-paper: #2b0f25;
  --color-paper-text: #fff0f7;
  --color-marker-edge: #1a0f1d;
  --color-marker-selected: #d3418c;
  --color-badge: #c8126f;
  --color-on-badge: #ffffff;
}
:root[data-palette="pinata"][data-theme="light"] {
  --color-text: #2b1631;
  --color-text-muted: #69546e;
  --color-bg: #fff4e2;
  --color-surface: #ffffff;
  --color-panel: #fffdf8;
  --color-hover: #eeecef;
  --color-selected: #ffe0ef;
  --color-selected-border: #00a3b4;
  --color-border: #d9d3d4;
  --color-control-border: #8b7591;
  --color-accent: #d1006b;
  --color-on-accent: #ffffff;
  --color-focus: #007f8c;
  --color-link: #a8005a;
  --color-notice: #f5dfe5;
  --color-missing: #fae4ea;
  --color-paper: #fae5da;
  --color-paper-text: #2b1631;
  --color-marker-edge: #2b1631;
  --color-marker-selected: #d1006b;
  --color-badge: #d1006b;
  --color-on-badge: #ffffff;
}
/* Ajolote / Axolotl (light first): axolotl pink and Xochimilco water. */
:root[data-palette="axolotl"]:not([data-theme="light"]) {
  --color-text: #fde8ee;
  --color-text-muted: #b9c4c4;
  --color-bg: #0f1a1c;
  --color-surface: #1c2d31;
  --color-panel: #152326;
  --color-hover: #2e3c40;
  --color-selected: #3a2530;
  --color-selected-border: #ff9fbf;
  --color-border: #3f464a;
  --color-control-border: #7f9496;
  --color-accent: #b8306c;
  --color-on-accent: #ffffff;
  --color-focus: #5fd3c4;
  --color-link: #ff9fbf;
  --color-notice: #36343b;
  --color-missing: #322533;
  --color-paper: #201c24;
  --color-paper-text: #fde8ee;
  --color-marker-edge: #0f1a1c;
  --color-marker-selected: #c65989;
  --color-badge: #b8306c;
  --color-on-badge: #ffffff;
}
:root[data-palette="axolotl"][data-theme="light"] {
  --color-text: #2a1a22;
  --color-text-muted: #6a5560;
  --color-bg: #fdf0f3;
  --color-surface: #ffffff;
  --color-panel: #fffafb;
  --color-hover: #eeeded;
  --color-selected: #fde2ea;
  --color-selected-border: #e46f97;
  --color-border: #d9d2d4;
  --color-control-border: #93737f;
  --color-accent: #b0306a;
  --color-on-accent: #ffffff;
  --color-focus: #00695c;
  --color-link: #00695c;
  --color-notice: #e0e9e8;
  --color-missing: #f7e6ed;
  --color-paper: #eee8ea;
  --color-paper-text: #2a1a22;
  --color-marker-edge: #2a1a22;
  --color-marker-selected: #b0306a;
  --color-badge: #b0306a;
  --color-on-badge: #ffffff;
}
/* Maguey: agave blue-green leaves under a dusty sky. */
:root[data-palette="maguey"]:not([data-theme="light"]) {
  --color-text: #e6f2ee;
  --color-text-muted: #a9bdb8;
  --color-bg: #0e1716;
  --color-surface: #182a29;
  --color-panel: #132120;
  --color-hover: #283a39;
  --color-selected: #1f3d3a;
  --color-selected-border: #6fbfae;
  --color-border: #394745;
  --color-control-border: #74908a;
  --color-accent: #2a7468;
  --color-on-accent: #ffffff;
  --color-focus: #9fe3cf;
  --color-link: #9fe3cf;
  --color-notice: #273c39;
  --color-missing: #17302d;
  --color-paper: #11201e;
  --color-paper-text: #e6f2ee;
  --color-marker-edge: #0e1716;
  --color-marker-selected: #559086;
  --color-badge: #2a7468;
  --color-on-badge: #ffffff;
}
:root[data-palette="maguey"][data-theme="light"] {
  --color-text: #14302b;
  --color-text-muted: #4f6a64;
  --color-bg: #e8f1ee;
  --color-surface: #ffffff;
  --color-panel: #fbfefd;
  --color-hover: #eceeee;
  --color-selected: #dcefe9;
  --color-selected-border: #4f9a8c;
  --color-border: #d1d9d7;
  --color-control-border: #6f8c85;
  --color-accent: #1f6b60;
  --color-on-accent: #ffffff;
  --color-focus: #1f6b60;
  --color-link: #1d6358;
  --color-notice: #e0ebe9;
  --color-missing: #e5efed;
  --color-paper: #dce8e5;
  --color-paper-text: #14302b;
  --color-marker-edge: #14302b;
  --color-marker-selected: #1f6b60;
  --color-badge: #1f6b60;
  --color-on-badge: #ffffff;
}
/* Café, chocolate y mole: roasted browns, café con leche and mole red. */
:root[data-palette="mole"]:not([data-theme="light"]) {
  --color-text: #f4e6d4;
  --color-text-muted: #c7b09a;
  --color-bg: #150e0b;
  --color-surface: #281b15;
  --color-panel: #1e1410;
  --color-hover: #382b24;
  --color-selected: #3f261b;
  --color-selected-border: #c08a5a;
  --color-border: #453a33;
  --color-control-border: #9a806b;
  --color-accent: #9a2f1f;
  --color-on-accent: #ffffff;
  --color-focus: #e3b27a;
  --color-link: #e3b27a;
  --color-notice: #3a2a1f;
  --color-missing: #341913;
  --color-paper: #22110d;
  --color-paper-text: #f4e6d4;
  --color-marker-edge: #150e0b;
  --color-marker-selected: #ae594c;
  --color-badge: #9a2f1f;
  --color-on-badge: #ffffff;
}
:root[data-palette="mole"][data-theme="light"] {
  --color-text: #2a1a12;
  --color-text-muted: #6a5040;
  --color-bg: #f3e9dd;
  --color-surface: #ffffff;
  --color-panel: #fffaf3;
  --color-hover: #eeedec;
  --color-selected: #f1dcc7;
  --color-selected-border: #a8744c;
  --color-border: #d9d2cb;
  --color-control-border: #94735d;
  --color-accent: #7a2416;
  --color-on-accent: #ffffff;
  --color-focus: #7a2416;
  --color-link: #7a3b1c;
  --color-notice: #efe3d9;
  --color-missing: #f2e5dd;
  --color-paper: #ecdfd1;
  --color-paper-text: #2a1a12;
  --color-marker-edge: #2a1a12;
  --color-marker-selected: #7a2416;
  --color-badge: #7a2416;
  --color-on-badge: #ffffff;
}
:root {
  /* Text size presets chosen in Settings. */
  --ui-scale: 1;
}
:root[data-text-size="smaller"] {
  --ui-scale: 0.875;
}
:root[data-text-size="larger"] {
  --ui-scale: 1.125;
}
html {
  color: var(--color-text);
  background: var(--color-bg);
  accent-color: var(--color-accent);
}
button,
.upload-button {
  border: 1px solid var(--color-control-border);
  border-radius: 0.3125rem;
  background: var(--color-surface);
  color: inherit;
  padding: 0.125rem 0.25rem;
}
button:hover,
.upload-button:hover {
  background: var(--color-hover);
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
button.primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
a {
  color: var(--color-link);
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-control-border);
  border-radius: 0.25rem;
  background: var(--color-surface);
  color: inherit;
  padding: 0.25rem 0.25rem;
}
textarea {
  resize: vertical;
}
small {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--color-text-muted);
}
h1 {
  font-size: var(--step-1);
  margin: 0 0 0.625rem;
}
p {
  line-height: 1.45;
}

/* Full-window map and poster thumbnails, modelled on the supplied mural map. */
.map-app,
.map-canvas {
  position: fixed;
  inset: 0;
}
.map-canvas {
  z-index: 0;
}
.map-canvas.leaflet-container { background: var(--color-bg); }
.leaflet-layer.osm-dark-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.9);
}
.map-canvas.picking {
  cursor: crosshair;
}
.poster-icon {
  background: transparent;
  border: 0;
}
.poster-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 1px 2px #0006);
}
.event-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-badge);
  color: var(--color-on-badge);
  font:
    700 11px/18px system-ui,
    sans-serif;
  text-align: center;
}
.leaflet-container .poster-marker img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: var(--poster-size, 40px) !important;
  max-height: var(--poster-size, 40px) !important;
  border-radius: 0;
  border: var(--poster-border) solid var(--color-marker-edge);
  transition: transform 0.12s;
  transform-origin: center bottom;
}
.poster-marker:hover img,
.poster-marker.selected img {
  transform: scale(var(--poster-scale));
  border-color: var(--color-marker-selected);
}
.place-marker {
  text-align: center;
  line-height: 28px;
}
.empty-marker {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #994b2d;
  border: 3px solid white;
  color: white;
  text-align: center;
}

/* Top-right controls and bottom-left details leave the valley's diagonal open. */
.floating-panel {
  position: fixed;
  z-index: 500;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 3px 16px #1b2f2626;
  overflow: hidden;
}
.control-panel {
  top: 0.625rem;
  right: 0.625rem;
  width: 23.75rem;
  max-height: calc(100dvh - 1.25rem);
  display: flex;
  flex-direction: column;
}
.control-panel:not(.collapsed) {
  bottom: 0.625rem;
}
.panel-heading {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.3125rem 0.5rem;
  flex-shrink: 0;
}
.brand {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--step-0);
  font-weight: 700;
}
.papel-picado-title {
  display: block;
  height: auto;
  object-fit: contain;
}
.emoji-pattern-canvas,
.emoji-animation-canvas {
  position: absolute;
  pointer-events: none;
}
.brand .papel-picado-title {
  width: 100%;
  max-width: 100%;
}
.about-title {
  width: 100%;
  height: 125%;
  max-width: none;
  margin: 0;
  object-fit: fill;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}
.event-emoji-field input {
  width: 5.25rem;
  font-size: var(--step-2);
}
.header-action {
  width: 1.8125rem;
  flex: 0 0 1.8125rem;
  height: 1.8125rem;
  padding: 0.0625rem 0.1875rem;
  font-size: var(--step--1);
  font-weight: 700;
}
.header-action.sign-out,
.header-action.settings-toggle,
.header-action.sound-toggle { font-size: var(--step-1); }
.sound-toggle-slot { display: flex; }
.sound-toggle { position: relative; }
.sound-muted { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--step--1); line-height: 1; }
.icon-button {
  border: 0;
  background: transparent;
  font-size: var(--step-2);
  padding: 0 0.4375rem;
}
.panel-toggle {
  width: 1.9375rem;
  height: 1.8125rem;
  flex: 0 0 1.9375rem;
  padding: 0;
  line-height: 1;
  display: grid;
  place-items: center;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
  padding: 0 0.5rem 0.375rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.main-nav button {
  white-space: nowrap;
  font-size: var(--step--1);
  flex: 1 1 auto;
  padding: 0.25rem 0.25rem;
}
.main-nav button[aria-current="page"] {
  background: var(--color-selected);
  border-color: var(--color-selected-border);
}
.panel-body {
  padding: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel-footer {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.panel-footer button {
  border: 0;
  padding: 0.1875rem;
  font-size: var(--step--1);
  background: none;
}
.panel-footer button:last-child:not(:first-child) {
  margin-left: auto;
}
.filters {
  display: grid;
  gap: 0.3125rem;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.results-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.375rem;
  margin: 0.5rem 0 0.25rem;
  font-size: var(--step--1);
}
.event-list {
  margin: 0 -4px;
}
.event-row {
  border-top: 1px solid var(--color-border);
  padding: 0.125rem 0;
  position: relative;
}
.event-summary {
  display: flex;
  gap: 0.375rem;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 0.125rem 0.1875rem;
  background: transparent;
}
.event-summary img {
  width: 3.125rem;
  height: 4.375rem;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: 0.1875rem;
  flex-shrink: 0;
}
.event-summary > span:last-child {
  flex: 1;
  min-width: 0;
}
.event-summary strong {
  font-size: var(--step--1);
  line-height: 1.25;
}
.event-summary span span,
.event-summary small {
  display: block;
  font-size: var(--step--1);
  line-height: 1.3;
  margin-top: 0;
}
/* Bands: always one line; the band being searched for is moved to the front. */
.event-summary .event-bands {
  display: flex;
  gap: 0.25em;
  min-width: 0;
  color: var(--color-text-muted);
}
.event-summary .event-bands .event-bands-names {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.event-summary .event-bands .event-bands-count {
  flex: none;
}
.event-summary .event-bands .sr-only {
  position: absolute;
}
.published-actions {
  position: absolute;
  top: 2.625rem; /* 4px row padding + 3px button padding + half the 70px thumbnail */
  left: 1.75rem;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.0625rem;
}
.published-actions > * {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 1px solid #ffffffcc;
  border-radius: 0.125rem;
  background: #0004;
  font-size: var(--step-0);
  line-height: 1;
}
.published-actions button:hover {
  background: #0008;
}
.poster-placeholder {
  width: 3.125rem;
  height: 3.125rem;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.review-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0;
}
.review-actions button {
  padding: 0.1875rem 0.375rem;
  font-size: var(--step--1);
}
.empty-text {
  margin: 0.9375rem 0;
  color: var(--color-text-muted);
}
.notice,
.form-message {
  background: var(--color-notice);
  border-left: 3px solid #b38a4c;
  padding: 0.5rem;
  font-size: var(--step--1);
}
.notice {
  position: relative;
  padding-right: 1.6875rem;
}
.notice .icon-button {
  position: absolute;
  top: 0.1875rem;
  right: 0.125rem;
}

/* Compact details: poster first, only known information, no modal or blank overlay. */
.detail-panel {
  bottom: 2.1875rem;
  left: 0.625rem;
  width: 17.625rem;
  max-height: calc(100dvh - 3.4375rem);
  overflow-y: auto;
}
.detail-panel .panel-heading strong {
  font-size: var(--step-0);
}
.detail-poster {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.poster-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
}
.poster-gallery-controls button {
  min-width: 2rem;
}
.poster-provisional,
.poster-source {
  display: block;
  margin: 0.125rem 0.5rem 0.375rem;
}
.events-here {
  margin: 0.25rem 0.5rem;
  font-size: var(--step--1);
}
.events-here-list {
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.25rem 0;
}
.events-here-list button {
  flex: 0 0 8.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  scroll-snap-align: start;
  min-height: 2.75rem;
  text-align: left;
}
.events-here-list button small,
.events-here-list button span {
  display: block;
}
.events-here-list button[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-accent);
  cursor: default;
}
.event-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.5rem;
  padding: 0.625rem;
  margin: 0;
  font-size: var(--step--1);
}
.event-facts dt {
  color: var(--color-text-muted);
}
.event-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.text-link {
  display: inline;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  color: var(--color-link);
  background: none;
  font-size: inherit;
  text-align: left;
}
.detail-notes {
  margin: 0;
  padding: 0 0.625rem 0.5rem;
  white-space: pre-wrap;
  font-size: var(--step--1);
}
.source-link {
  display: block;
  margin: 0 0.625rem 0.625rem;
  font-size: var(--step--1);
}
.map-instruction {
  position: fixed;
  z-index: 600;
  bottom: 2.8125rem;
  left: 0.625rem;
  max-width: min(24.375rem, calc(100vw - 4.375rem));
  background: #203c2f;
  color: white;
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  box-shadow: 0 2px 8px #0003;
}
.map-instruction button {
  font-size: var(--step--1);
  margin-left: 0.3125rem;
}

/* Submission and review share one small, readable form. */
.form-intro {
  margin: 0 0 0.75rem;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5625rem 0;
}
.field > span {
  font-size: var(--step--1);
  font-weight: 600;
}
.field-label-with-help {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--step--1);
  font-weight: 600;
}
.time-zone-button {
  font-size: var(--step--1);
  padding: 0 0.1875rem;
}
.time-zone-note {
  margin: 0 0 0.5rem;
  padding: 0.4375rem;
  background: var(--color-notice);
  font-size: var(--step--1);
}
.date-field {
  display: flex;
  gap: 0.1875rem;
}
.date-field input {
  flex: 1;
}
.date-field button {
  flex: none;
  min-width: 1.9375rem;
  font-size: var(--step-1);
}
.date-calendar {
  position: fixed;
  z-index: 1200;
  width: min(21.25rem, calc(100vw - 1rem));
  padding: 0.625rem;
  border: 1px solid var(--color-control-border);
  border-radius: 0.4375rem;
  background: var(--color-surface);
  box-shadow: 0 6px 24px #0004;
  font-size: var(--step-0);
}
.date-calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4375rem;
}
.date-calendar-head button {
  width: 2.125rem;
  height: 2.125rem;
  font-size: var(--step-2);
}
.date-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1875rem;
  text-align: center;
}
.date-calendar-grid > * {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
}
.date-calendar-grid button {
  font-size: var(--step-0);
}
.date-calendar-grid button[aria-pressed="true"] {
  background: var(--color-accent);
  color: white;
}
.date-weekday {
  font-size: var(--step--1);
  font-weight: 700;
}
.field-pair .field {
  margin: 0;
}
.form-poster-strip {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding: 0.625rem 0;
  scroll-snap-type: x proximity;
}
.form-poster-strip a {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 11.25rem;
  scroll-snap-align: start;
}
.form-poster-strip .form-poster {
  display: block;
  width: auto;
  height: auto;
  max-width: 10.625rem;
  max-height: 12.8125rem;
  object-fit: contain;
}
.form-poster-strip small {
  color: var(--color-text-muted);
  text-align: center;
}
.upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
}
.upload-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: 0.3125rem;
  margin: 0.75rem 0;
  padding: 0.5rem;
}
legend {
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0 0.25rem;
}
details {
  border-top: 1px solid var(--color-border);
  padding: 0.5625rem 0;
}
summary {
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
}
details > select {
  margin-top: 0.4375rem;
}
.band-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.375rem;
  gap: 0.3125rem;
  align-items: end;
}
.band-row button {
  padding: 0.3125rem;
  margin-bottom: 0.5625rem;
}
.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  position: sticky;
  bottom: -12px;
  background: var(--color-surface);
  padding: 0.625rem 0;
  border-top: 1px solid var(--color-border);
  margin-top: 0.75rem;
}
.directory-list {
  list-style: none;
  padding: 0;
  margin: 0.875rem 0 0;
}
.directory-list li {
  border-top: 1px solid var(--color-border);
  padding: 0.5625rem 0;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.directory-list li > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.directory-list a,
.directory-list button {
  font-size: var(--step--1);
}
.contribution-row > div {
  min-width: 0;
  width: 100%;
}
.contribution-row pre {
  overflow: auto;
  max-height: 11.25rem;
  padding: 0.375rem;
  background: var(--color-surface);
  font-size: var(--step--1);
}
.contribution-poster {
  max-width: 4.375rem;
  max-height: 6.25rem;
  object-fit: contain;
}
.detail-edit {
  margin: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: var(--step--1);
}

@media (max-width: 40em) {
  .control-panel {
    width: min(23.75rem, calc(100vw - 1.25rem));
    max-height: calc(100dvh - 1.25rem);
  }
  .detail-panel {
    width: 14.75rem;
    max-height: 45dvh;
  }
  .map-instruction {
    max-width: calc(100vw - 4.375rem);
    font-size: var(--step--1);
  }
  input,
  textarea,
  select {
    /* iOS zooms into fields under 16 px; never go below that on phones. */
    font-size: max(1rem, 16px);
  }
}
.setup-page {
  max-width: 30rem;
  padding: 1.5rem;
  margin: 1.875rem auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

/* Keep focused/resized fields below the sticky form actions. */
.form-actions {
  z-index: 2;
  isolation: isolate;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: -2px;
}
.directory-list li > .directory-identity {
  display: block;
  flex: 1;
  min-width: 0;
}
.directory-identity small {
  display: block;
}
.directory-name {
  font-weight: 600;
}
.external-icon {
  display: inline-block;
  margin-left: 0.375rem;
  text-decoration: none;
  font-weight: 700;
}
.external-icon.facebook {
  color: #1877f2;
  font-family: Arial, sans-serif;
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-bottom: 0.375rem;
}
.audit-panel {
  top: 0.625rem;
  bottom: 0.625rem;
  left: 0.625rem;
  right: 24.6875rem;
  display: flex;
  flex-direction: column;
}
.audit-panel header {
  padding: 0.625rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.audit-panel h1 {
  margin: 0;
}
.audit-panel .button-row {
  margin: 0;
}
.audit-sort {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.audit-sort:hover {
  text-decoration: underline;
}
.audit-panel button[aria-current="page"] {
  background: var(--color-selected);
  border-color: var(--color-selected-border);
}
.audit-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
}
.audit-tools input[type="text"],
.audit-tools input:not([type]) {
  flex: 1;
}
.audit-tools label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.25rem;
}
.audit-tools input[type="checkbox"] {
  width: auto;
}
.audit-scroll {
  overflow: auto;
  flex: 1;
}
.audit-panel table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: var(--step--1);
}
.audit-panel th,
.audit-panel td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.3125rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}
.audit-panel th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
}
.audit-missing {
  background: var(--color-missing);
}
@media (max-width: 53.125em) {
  .audit-panel {
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    bottom: 0.5rem;
    height: 45dvh;
  }
}
.map-app.audit-view {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.audit-view .control-panel,
.audit-view .audit-panel {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.audit-view .control-panel {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.audit-view .panel-heading {
  grid-column: 1;
}
.audit-view .brand {
  flex: none;
  width: 14.375rem;
}
.audit-view .main-nav {
  grid-column: 2;
  justify-content: flex-end;
  border: 0;
  padding: 0.25rem 0.625rem;
}
.audit-view .main-nav button {
  flex: none;
  padding: 0.25rem 0.5rem;
}
.audit-view .panel-body {
  grid-column: 1 / -1;
}
.audit-view .control-panel .icon-button,
.audit-view .panel-body > .form-intro {
  display: none;
}
.audit-view .panel-body {
  padding: 0.25rem 0.625rem;
}
.audit-view .admin-nav {
  margin-bottom: 0;
}
.audit-view .audit-panel {
  flex: 1;
  min-height: 0;
}
@media (max-width: 43.75em) {
  .audit-view .control-panel {
    display: block;
  }
  .audit-view .main-nav {
    justify-content: flex-start;
  }
}
.layer-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.layer-toggle input {
  width: auto;
}
.legend-list {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.5rem;
  font-size: var(--step--1);
}
.legend-list dd {
  margin: 0;
}

.directory-editor {
  border: 1px solid var(--color-border);
  padding: 0.625rem;
  margin-top: 0.75rem;
  border-radius: 0.3125rem;
}
.directory-editor h2,
.directory-group h2 {
  font-size: var(--step-0);
  margin: 0;
}
.directory-list .directory-group {
  padding-top: 1.125rem;
  border-top: 0;
  color: var(--color-text-muted);
}
.external-icon.spotify {
  vertical-align: middle;
}

/* Posters keep their original shape, including drafts and the detail panel. */
.leaflet-container .poster-marker {
  width: max-content;
  max-width: var(--poster-size, 40px);
}
.leaflet-container .poster-marker img {
  min-width: 0 !important;
  min-height: 0 !important;
}
.detail-panel {
  width: min(24.375rem, calc(100vw - 1.5rem));
  overflow-y: auto;
}
.detail-close {
  position: sticky;
  float: right;
  top: 0.375rem;
  margin: 0.375rem 0.375rem -40px 0;
  z-index: 1;
  background: var(--color-surface);
}
.detail-title {
  margin: 0.625rem;
  font-size: var(--step-0);
  font-weight: 400;
}
.event-facts {
  grid-template-columns: minmax(0, 4.375rem) minmax(0, 1fr);
}
.event-facts dt {
  overflow-wrap: anywhere;
}
.map-symbol {
  display: block;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 1px 1px #fff);
}
.map-symbol.monarch-butterfly {
  filter: hue-rotate(180deg) saturate(1.4) drop-shadow(0 1px 1px #fff);
}
.event-symbol {
  display: block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 22px;
  border: 0;
  background: radial-gradient(
    ellipse at 50% 65%,
    #0007 0%,
    #0003 35%,
    transparent 70%
  );
  filter: drop-shadow(0 1px 1px #0005);
}
.location-point {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a94124;
  box-shadow: 0 0 0 1px #a94124;
}
.map-download {
  display: grid;
  gap: 0.25rem;
}
.map-symbol {
  font-size: var(--map-symbol-size);
  /* Size follows the current zoom immediately; no second delayed animation. */
}
/* Map picking must reach the map even through an existing circle or poster. */
.map-canvas.picking .leaflet-interactive,
.map-canvas.picking .leaflet-marker-pane,
.map-canvas.picking .leaflet-place-markers-pane,
.map-canvas.picking .leaflet-dynamic-place-markers-pane,
.map-canvas.picking .leaflet-event-markers-pane,
.map-canvas.picking .leaflet-draft-markers-pane,
.map-canvas.picking .leaflet-popup-pane,
.map-canvas.picking .leaflet-tooltip-pane {
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .map-symbol,
  .poster-marker img {
    transition: none !important;
  }
}
.legend-item {
  display: contents;
}
.legend-item dt {
  min-width: 1.5625rem;
}
/* Background records remain visible but do not intercept drawing clicks. */
.map-canvas.editing-geometry .leaflet-event-markers-pane *,
.map-canvas.editing-geometry .leaflet-place-markers-pane *,
.map-canvas.editing-geometry .leaflet-dynamic-place-markers-pane *,
.map-canvas.editing-geometry .leaflet-draft-markers-pane *,
.map-canvas.editing-geometry .leaflet-overlay-pane .leaflet-interactive,
.map-canvas.editing-geometry .leaflet-tooltip-pane *,
.map-canvas.editing-geometry .leaflet-popup-pane * {
  pointer-events: none !important;
}
.field-help {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.directory-editor .field > span:has(> .field-help) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
}
.field-help button {
  padding: 0 0.125rem;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--step-0);
}
.field-help [role="tooltip"] {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 15.3125rem;
  max-width: calc(100vw - 2.5rem);
  padding: 0.5rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.3125rem;
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: 400;
  z-index: 2;
}
.field-help:hover [role="tooltip"],
.field-help:focus-within [role="tooltip"],
.field-help.open [role="tooltip"] {
  display: block;
}
.import-preview ul {
  max-height: 11.25rem;
  overflow: auto;
}
.main-nav {
  overflow-x: auto;
}
.detail-mode {
  margin: 0.5rem 0.625rem 0;
}
/* Four sliding paper panels leave a live, interactive window onto the map. */
/* The title garland hangs just below the header buttons, which keep their
   exact panel position; everything under the garland moves down with it. */
:root {
  --garland-drop: 2.875rem;
}
.about-overlay {
  --about-top-height: calc(19% + var(--garland-drop));
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 700ms;
}
.about-overlay.open {
  visibility: visible;
}
.about-edge {
  position: absolute;
  pointer-events: auto;
  color: var(--color-paper-text);
  background: var(--color-paper);
  padding: clamp(0.5rem, 1.2vw, 1.25rem);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: auto;
}
.about-top {
  inset: 0 0 auto;
  height: var(--about-top-height);
  transform: translateY(-105%);
  padding: 0;
  text-align: center;
  overflow: visible;
  z-index: 3;
}
.about-bottom {
  inset: auto 23% 0;
  height: 18%;
  transform: translateY(105%);
  text-align: center;
  z-index: 1;
}
.about-left {
  inset: var(--about-top-height) auto 0 0;
  width: 23%;
  transform: translateX(-105%);
}
.about-right {
  inset: var(--about-top-height) 0 0 auto;
  width: 23%;
  transform: translateX(105%);
}
.about-left,
.about-right {
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.about-overlay.open .about-edge {
  transform: translate(0);
}
.about-top h1 {
  line-height: 0;
  margin: 0;
  height: 100%;
  padding-top: var(--garland-drop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.about-edge h2 {
  text-align: center;
  font-size: clamp(1.1875rem, 2.2vw, 1.875rem);
}
.about-edge p {
  max-width: 52ch;
  margin: 0.375rem auto;
}
.about-left p,
.about-right p {
  width: 100%;
  text-align: justify;
  hyphens: auto;
}
.about-edge small {
  color: #e0c99a;
}
.about-contact {
  font-size: 0.85rem;
  margin: 0.375rem auto;
}
.about-contact a {
  color: #ffe3a2;
}
.paper-flower {
  font-size: clamp(2.75rem, 8vw, 6.25rem);
  color: #ec9e2e;
  line-height: 1;
}
.paper-skull {
  font-size: clamp(2.25rem, 6vw, 4.75rem);
}
.paper-flower,
.paper-skull,
.about-right button {
  align-self: center;
}
.about-right button {
  background: #f2c56d;
  border-color: #f2c56d;
  color: #243f36;
}
.about-right button:hover {
  background: #ffda90;
}
.about-open .detail-panel {
  opacity: 0;
  pointer-events: none;
}
/* Keep the same two buttons and their layout above the animated About frame.
   Visibility hides the other controls from pointers and keyboard focus without
   removing their layout space or moving the preferences by a single pixel. */
.about-open .control-panel {
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.about-open .control-panel .theme-toggle,
.about-open .control-panel .language-toggle,
.about-open .control-panel .settings-toggle,
.about-open .control-panel .downloads-toggle,
.about-open .control-panel .sound-toggle {
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 37.5em) {
  .about-top {
    height: calc(clamp(3.125rem, 13vw, 4.875rem) + var(--garland-drop));
    padding: 0;
  }
  .about-top h1 {
    font-size: var(--step-3);
  }
  .about-left,
  .about-right {
    top: 46%;
    bottom: 18%;
    width: 50%;
    padding: 0.5rem 0.75rem;
  }
  .about-edge h2 {
    font-size: var(--step-1);
  }
  .about-left p,
  .about-right p {
    font-size: var(--step--1);
  }
  .about-right button {
    padding: 0.3125rem;
    font-size: var(--step--1);
  }
  .about-bottom {
    inset: auto 0 0;
    height: 18%;
    padding: 0.5rem;
  }
  .paper-flower,
  .paper-skull {
    font-size: var(--step-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-edge,
  .about-overlay,
  .control-panel {
    transition: none;
  }
}

/* The geometry editor uses a code-drawn point, without external marker images. */
.drawing-point {
  color: #a94124;
  font-size: var(--step-2);
  line-height: 1.25rem;
  text-align: center;
  text-shadow: 0 0 2px white;
}

.place-notes {
  width: 15rem;
  max-width: calc(100vw - 5.625rem);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Leaflet's controls and tooltips use the same palette, independent of basemap choice. */
.leaflet-tooltip,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-bar a,
.leaflet-control-attribution {
  background: var(--color-surface);
  color: var(--color-text);
}
.leaflet-tooltip {
  border-color: var(--color-border);
}
.leaflet-tooltip-top:before {
  border-top-color: var(--color-surface);
}
.leaflet-bar a:hover {
  background: var(--color-hover);
}
.leaflet-container .leaflet-control-attribution {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.35;
  padding: 0 5px;
  max-width: min(100vw - 12px, 440px);
  overflow-wrap: anywhere;
}
.leaflet-container .leaflet-control-attribution a {
  color: var(--color-link);
}
:root[data-theme="light"] .about-edge small {
  color: var(--color-text-muted);
}
:root[data-theme="light"] .about-contact a {
  color: var(--color-link);
}

/* Full-page translation work: originals remain visible beside reviewed text. */
.translation-workspace {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.625rem;
  overflow: hidden;
}
.translation-heading,
.translation-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.translation-heading h1 {
  margin: 0;
}
.translation-workspace .form-intro {
  margin: 0.375rem 0;
}
.translation-toolbar {
  margin-bottom: 0.5rem;
}
.translation-toolbar input:not([type="checkbox"]) {
  flex: 1;
  min-width: 9.375rem;
  width: auto;
}
.translation-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}
.translation-list,
.translation-editor {
  overflow: auto;
  min-width: 0;
}
.translation-list table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.translation-list th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.translation-list td,
.translation-list th {
  padding: 0.3125rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.translation-list td small {
  display: block;
  color: var(--color-text-muted);
}
.translation-list [aria-current="true"] {
  font-weight: 700;
}
.translation-editor h2 {
  font-size: var(--step-1);
  margin: 0 0 0.5rem;
}
.translation-editor textarea {
  min-height: 8.75rem;
  resize: vertical;
}
.translation-editor textarea[readonly] {
  background: var(--color-hover);
}
.translation-source {
  white-space: pre-wrap;
}
@media (max-width: 40.625em) {
  .translation-columns {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(7.5rem, 30%) 1fr;
  }
  .translation-workspace .form-intro {
    font-size: var(--step--1);
  }
}

.sound-controls {
  margin: 0.5rem 0;
  padding: 0.5rem;
}
.sound-controls label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.375rem 0;
}
.translation-toolbar select {
  width: auto;
}
.translation-toolbar label,
.translation-editor > label:not(.field) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.translation-workspace input[type="checkbox"],
.sound-controls input[type="checkbox"] {
  width: auto;
}

/* Stored media keeps its native proportions, in editor and map popup. */
.map-media-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 65vh;
  object-fit: contain;
  margin: 0.375rem 0;
}
.coordinate-pair {
  margin-top: 0.5rem;
}

.audit-table .returned-row,
.audit-scroll .returned-row {
  outline: 2px solid var(--color-accent, #c98939);
  outline-offset: -2px;
}

.animation-options {
  margin: 0.5rem 0;
}
.animation-options summary {
  cursor: pointer;
}
.animation-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.375rem 0;
}
.animation-previews button {
  padding: 0.1875rem 0.3125rem;
  font-size: var(--step--1);
}

.map-rotation-controls { display: flex; flex-direction: column; }
.map-rotation-controls button {
  width: 1.875rem; height: 1.875rem; padding: 0; margin: 0; border: 0;
  border-radius: 0; background: var(--color-surface); color: var(--color-text); font-size: var(--step-2);
}
.map-rotation-controls button:nth-child(2) span { display: inline-block; transform: rotate(var(--compass-bearing, 0deg)); }
.map-rotation-controls button:disabled { opacity: .4; }

.emoji-parade-canvas { position: absolute; pointer-events: none; }

.event-row:has(.poster-placeholder) .published-actions { top: 2rem; }

/* The story is a hanging garland over the live website, with true text holes. */
.about-bottom { padding: 0.5rem 0.75rem; }
.about-bottom p { margin: 0.1875rem auto; }
.about-bottom small { display: block; font-size: .85rem; line-height: 1.25; }
.about-story-link { align-self: center; margin: 0.5rem 0; }
.story-overlay {
  position: fixed; inset: 0; z-index: 1000; background: transparent;
  visibility: hidden; transform: translateY(105%);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), visibility 700ms;
}
.story-overlay.open { visibility: visible; transform: translateY(0); }
.story-rail {
  display: flex; height: 100%; align-items: flex-start; gap: 1.25rem;
  --story-top: calc(19dvh + 1.375rem + var(--garland-drop));
  padding: var(--story-top) 1.5rem 0.5rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem;
  outline: none;
}
.story-flag {
  position: relative; flex: 0 0 auto;
  width: min(38.75rem, calc((100dvh - var(--story-top) - 0.5rem) * .82446));
  scroll-snap-align: start;
}
.story-paper { display: block; width: 100%; height: auto; overflow: visible; }
.story-cord { fill: none; stroke: #c7ac7e; stroke-width: 2; }
.story-ties { fill: none; stroke: #c7ac7e; stroke-width: 3; }
.story-dimmer { opacity: .62; }
.story-sheet { fill: var(--flag-dark); filter: drop-shadow(1px 3px 2px #0007); }
:root[data-theme="light"] .story-sheet { fill: var(--flag-light); }
.story-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; border-radius: 0; padding: 0; width: 1.5rem; height: 2.5rem;
  color: #fff; background: #0004; font: 2rem/2.25rem Georgia, serif;
}
.story-arrow.previous { left: 0.5rem; }
.story-arrow.next { right: 0.5rem; }
.story-arrow:hover, .story-arrow:focus-visible { background: #0009; }
.story-arrow:disabled { visibility: hidden; }
.story-accessible-text { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panel-section { margin: 0.5rem 0; border-top: 1px solid var(--color-border); }
.panel-section > summary { cursor: pointer; padding: 0.4375rem 0; font-weight: 600; }
.panel-section[open] > summary { margin-bottom: 0.25rem; }
.panel-section .sound-controls { border: 0; margin: 0; padding: 0; }
@media (max-width: 37.5em) {
  .story-rail { --story-top: calc(5.375rem + var(--garland-drop)); }
  .story-flag { width: min(calc(100vw - 3rem), calc((100dvh - var(--story-top) - 0.5rem) * .82446)); }
  .about-bottom { padding: 0.375rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .story-overlay { transition: none; } }

/* Segmented choice built from native radios: keyboard and screen readers work as usual. */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--space-xs);
  padding: 0;
  border: 0;
}
.segmented legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}
.segmented label {
  flex: 1;
  position: relative;
}
.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.segmented span {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  text-align: center;
  border: 1px solid var(--color-control-border);
  background: var(--color-surface);
  cursor: pointer;
}
.segmented label + label span {
  border-left-width: 0;
}
.segmented label:first-of-type span {
  border-radius: var(--radius) 0 0 var(--radius);
}
.segmented label:last-of-type span {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.segmented input:checked + span {
  background: var(--color-selected);
  border-color: var(--color-selected-border);
  font-weight: 700;
}
.segmented input:focus-visible + span {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.text-size-smaller span {
  font-size: var(--step--1);
}
.text-size-larger span {
  font-size: var(--step-1);
}
.detail-share {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: var(--space-xs) 0.625rem 0.625rem;
}
.detail-share [role="status"] {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.palette-choice {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}
.palette-choice legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}
.palette-choice label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.palette-choice input {
  width: auto;
  flex: none;
  margin: 0;
}
.palette-swatches {
  display: inline-flex;
}
.palette-swatches i {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 1px solid var(--color-control-border);
  margin-right: -0.25em;
}

.directions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: baseline;
  margin: 0 0.625rem 0.625rem;
  font-size: var(--step--1);
}
.directions small {
  flex-basis: 100%;
}
.downloads .map-download {
  margin: var(--space-xs) 0;
}
.downloads .map-download button,
.download-button {
  justify-self: start;
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
}
.download-button {
  display: inline-block;
  border: 1px solid var(--color-control-border);
  border-radius: 5px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.download-button:hover {
  background: var(--color-hover);
}