/* ============================================================================
   Atlas Theme — Stage 1
   Maximalist, proudly polyglot. Celebrates LokaScript's 24-language breadth
   through dye-road palette, Instrument Serif display type, and rosette
   dividers drawn from book-arts traditions.

   Stage 1 scope:
     - palette + typography + basic components (pure CSS, no JS)
     - rosette section dividers replace <hr>
     - chromatic section accents via [data-section-accent]
     - textile-weave background overlay (light mode)
     - role-pigment syntax highlighting (shared with Gloss)

   Stage 2 (deferred):
     - multi-script polyglot hero cascade + polyglot-strings.json
     - atlas-polyglot.js helper

   Stage 3 (deferred):
     - polyglot marquee, chip-row lang switcher, ink-bleed filter
   ============================================================================ */

/* Contrast Audit (WCAG 2.1)
   Light mode (raw paper):
     --color-fg (#221810) on --color-bg (#F6EAD3): ~14:1 → AAA ✓
     --color-muted (#6E5A44) on --color-bg (#F6EAD3): ~5.2:1 → AA ✓
     --accent-indigo (#2A4875) on --color-bg (#F6EAD3): ~7.9:1 → AAA ✓
     --accent-cinnabar (#B83B3B) on --color-bg (#F6EAD3): ~5.1:1 → AA ✓
     --accent-madder (#8F2A3B) on --color-bg (#F6EAD3): ~7.4:1 → AAA ✓
     --accent-henna (#6A3019) on --color-bg (#F6EAD3): ~8.7:1 → AAA ✓
     --accent-verdant (#355E3B) on --color-bg (#F6EAD3): ~7.6:1 → AAA ✓
     --accent-turmeric (#D18A1E) on --color-bg (#F6EAD3): ~2.9:1 → decorative ⚠
   Dark mode (twilight bazaar):
     --color-fg (#F0E2C8) on --color-bg (#1A1410): ~13:1 → AAA ✓
     --color-muted (#AA9378) on --color-bg (#1A1410): ~7.1:1 → AAA ✓
     All accents lifted to meet AAA for body at 18px.
   Verified: 2026-04-22 */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif:ital,wght@0,400;1,400&family=Noto+Sans:wght@400;500&family=Noto+Sans+JP:wght@400&family=Noto+Sans+Arabic:wght@400&family=Noto+Sans+KR:wght@400&family=Noto+Sans+SC:wght@400&family=Noto+Sans+Devanagari:wght@400&display=swap");

html.atlas-theme { color-scheme: light dark; }

/* ============================================
   Theme activation — the dye-road palette
   ============================================ */

.atlas-theme {
  /* Paper + ink */
  --color-bg:        light-dark(#F6EAD3, #1A1410);
  --color-surface:   light-dark(#FBF3E0, #241B14);
  --color-surface-hover: light-dark(#F0E1C0, #2E231A);
  --color-fg:        light-dark(#221810, #F0E2C8);
  --color-muted:     light-dark(#6E5A44, #AA9378);
  --color-faded:     light-dark(#9A866C, #8A7762);
  --color-border:    light-dark(#C9A874, #4A3B2A);
  --color-rule:      light-dark(#C9A874, #4A3B2A);

  /* Six dominant accents — natural dyes that traveled trade routes.
     These are the ONLY chromatic identity in the theme; pick one as the
     current section-accent via [data-section-accent="..."] on a section. */
  --accent-indigo:   light-dark(#2A4875, #6D8FC2);   /* aizome deep indigo */
  --accent-turmeric: light-dark(#A66A14, #E8B34A);   /* saffron (darkened light for AAA) */
  --accent-cinnabar: light-dark(#B83B3B, #E27A6C);   /* red lacquer */
  --accent-madder:   light-dark(#8F2A3B, #C76E7E);   /* madder-root fabric */
  --accent-henna:    light-dark(#6A3019, #C5876A);   /* henna */
  --accent-verdant:  light-dark(#355E3B, #8BB08C);   /* natural verdigris */

  /* Section-accent token — the CURRENT accent driven by [data-section-accent].
     Components inside a section pick this up automatically. */
  --section-accent:       var(--accent-indigo);
  --section-accent-fade:  color-mix(in oklch, var(--section-accent), transparent 80%);

  /* Semantic-role pigments — SAME mapping as Gloss so readers who learn
     the visual grammar there carry it into Atlas. */
  --role-action:      var(--accent-madder);
  --role-patient:     var(--accent-indigo);
  --role-destination: var(--accent-verdant);
  --role-source:      var(--accent-turmeric);
  --role-event:       var(--accent-henna);

  /* Code */
  --code-bg:        light-dark(#FBF3E0, #1F1610);
  --code-fg:        light-dark(#221810, #F0E2C8);
  --code-border:    light-dark(#D4B888, #3D3025);

  /* Typography — multilingually serious */
  --font-display: "Instrument Serif", "Recoleta", "Noto Serif Display", Georgia, serif;
  --font-body:    "Public Sans", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-script:  "Noto Sans", "Noto Sans Display", sans-serif;
  --font-serif:   "Noto Serif", "Noto Serif Display", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", monospace;

  --text-base: 1.0625rem;
  --atlas-leading: 1.7;
  --density: 1;

  /* Component tokens */
  --nav-bg: var(--color-bg);
  --nav-border: var(--color-rule);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: 4px;
  --btn-bg: var(--section-accent);
  --btn-fg: var(--color-bg);
  --btn-radius: 4px;
  --input-bg: var(--color-surface);
  --input-border: var(--color-border);
  --input-focus-ring: var(--section-accent-fade);

  /* missing.css font overrides */
  --main-font: var(--font-body);
  --secondary-font: var(--font-body);
  --heading-font: var(--font-display);
  --mono-font: var(--font-mono);

  --nav-max: 64rem;

  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--atlas-leading);
  transition: var(--theme-transition);
}

/* OKLCH progressive enhancement for hue-accurate palette shifts */
@supports (color: oklch(0% 0 0)) {
  .atlas-theme {
    --color-bg:      light-dark(oklch(93% 0.04 75),  oklch(15% 0.02 40));
    --color-fg:      light-dark(oklch(18% 0.03 40),  oklch(92% 0.03 80));
    --color-surface: light-dark(oklch(96% 0.03 75),  oklch(19% 0.02 40));
    --color-border:  light-dark(oklch(75% 0.08 70),  oklch(30% 0.03 40));
    --color-rule:    light-dark(oklch(75% 0.08 70),  oklch(30% 0.03 40));
  }
}

/* ============================================
   Section-accent rotation
   <section data-section-accent="indigo|turmeric|cinnabar|madder|henna|verdant">
   ============================================ */

.atlas-theme [data-section-accent="indigo"]   { --section-accent: var(--accent-indigo); }
.atlas-theme [data-section-accent="turmeric"] { --section-accent: var(--accent-turmeric); }
.atlas-theme [data-section-accent="cinnabar"] { --section-accent: var(--accent-cinnabar); }
.atlas-theme [data-section-accent="madder"]   { --section-accent: var(--accent-madder); }
.atlas-theme [data-section-accent="henna"]    { --section-accent: var(--accent-henna); }
.atlas-theme [data-section-accent="verdant"]  { --section-accent: var(--accent-verdant); }

/* ============================================
   Atmospheric overlays
   Light mode: textile-weave warp-and-weft grain.
   Dark mode : indigo-dyed block-print — 4-point stars on a 24px grid,
               with tiny resist-dot marks at edge midpoints. Same pseudo,
               per-mode image swap.
   ============================================ */

html.atlas-theme body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* z-index: -1 puts the overlay behind content without touching any body
     child's z-index. Earlier `body > * { z-index: 1 }` clobbered navbar's
     sticky z-index: 1000 and broke both the lang-switcher popover clicks
     on desktop and the mobile drawer. */
  z-index: -1;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M0 6h12M6 0v12' stroke='%236A3019' stroke-width='0.35' fill='none' stroke-opacity='0.6'/><path d='M3 3l6 6M9 3l-6 6' stroke='%236A3019' stroke-width='0.2' fill='none' stroke-opacity='0.4'/></svg>");
  background-size: 12px 12px;
}

/* Dark mode: block-print textile. Fabric-cream strokes on deep umber.
   The 4-point star echoes the ✦ flourishes in the Visa cartouche —
   one visual vocabulary across the theme. */
html.-dark-mode.atlas-theme body::before,
html.atlas-theme.-dark-mode body::before {
  opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='%23E8DCC8'><path d='M12 5 L13.4 10.6 L19 12 L13.4 13.4 L12 19 L10.6 13.4 L5 12 L10.6 10.6 Z'/><circle cx='12' cy='0' r='0.7'/><circle cx='24' cy='12' r='0.7'/><circle cx='12' cy='24' r='0.7'/><circle cx='0' cy='12' r='0.7'/></g></svg>");
  background-size: 24px 24px;
}

@media (prefers-reduced-motion: reduce) {
  html.atlas-theme body::before { display: none; }
}

/* ============================================
   Layout — asymmetric off-center grid at ≥1200px
   ============================================ */

.atlas-theme .container {
  max-inline-size: 64rem;
  margin-inline: auto;
  padding-inline: var(--space-6, 1.5rem);
}

@media (min-width: 1200px) {
  .atlas-theme .container {
    /* Off-center: content column offset ~8% from left, ~22% right margin
       reserved for marginalia + breathing room */
    margin-inline-start: 8%;
    margin-inline-end: auto;
    max-inline-size: 62rem;
  }
}

@media (max-width: 768px) {
  .atlas-theme .container {
    padding-inline: var(--space-4, 1rem);
  }
}

/* ============================================
   Typography — display + body + script fallbacks
   ============================================ */

.atlas-theme h1,
.atlas-theme h2,
.atlas-theme h3,
.atlas-theme h4,
.atlas-theme h5,
.atlas-theme h6 {
  font-family: var(--font-display);
  color: var(--color-fg);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.atlas-theme h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  margin-block: calc(var(--space-8, 2rem) * var(--density)) var(--space-5, 1.25rem);
  letter-spacing: -0.02em;
}

.atlas-theme h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--section-accent);
  margin-block: var(--space-8, 2rem) var(--space-3, 0.75rem);
}

.atlas-theme h3 {
  font-size: 1.5rem;
  margin-block: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
}

.atlas-theme h4 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block: var(--space-5, 1.25rem) var(--space-2, 0.5rem);
}

.atlas-theme p {
  line-height: var(--atlas-leading);
  margin-block: var(--space-4, 1rem);
  max-inline-size: 68ch;
}

.atlas-theme em,
.atlas-theme i {
  font-style: italic;
  font-family: var(--font-serif);
}

.atlas-theme strong,
.atlas-theme b {
  font-weight: 600;
  color: var(--color-fg);
}

/* Non-Latin script content should cascade into Noto automatically.
   Author with <span lang="ja">, <span lang="ar">, etc. */
.atlas-theme [lang="ja"],
.atlas-theme [lang="ja-JP"] { font-family: "Noto Sans JP", var(--font-script); }
.atlas-theme [lang="ar"],
.atlas-theme [lang="ar-SA"] { font-family: "Noto Sans Arabic", var(--font-script); }
.atlas-theme [lang="ko"],
.atlas-theme [lang="ko-KR"] { font-family: "Noto Sans KR", var(--font-script); }
.atlas-theme [lang="hi"],
.atlas-theme [lang="hi-IN"],
.atlas-theme [lang="ne"],
.atlas-theme [lang="mr"] { font-family: "Noto Sans Devanagari", var(--font-script); }
.atlas-theme [lang="zh"],
.atlas-theme [lang="zh-CN"],
.atlas-theme [lang="zh-Hans"] { font-family: "Noto Sans SC", var(--font-script); }
/* Russian and other Cyrillic scripts fall through to Noto Sans — it has
   full Cyrillic coverage. Declared explicitly for documentation. */
.atlas-theme [lang="ru"],
.atlas-theme [lang="uk"],
.atlas-theme [lang="bg"] { font-family: "Noto Sans", var(--font-script); }

/* ============================================
   Multi-script polyglot hero — the signature motif.

   <div class="atlas-polyglot-hero" data-word="language"></div>

   atlas-polyglot.js reads data-word, resolves to the inline dictionary, and
   appends one primary line (in the user's current language) plus 3–4 cascade
   lines in other scripts. Each line is <span class="atlas-polyglot-line
   atlas-polyglot-line-{primary|secondary}" lang="xx" [dir="rtl"]>.

   Non-Atlas themes hide the whole hero (same data lives in page, only Atlas
   renders it) so the theme owns this motif exclusively.
   ============================================ */

/* Default (non-Atlas): hide entirely — the multi-script cascade is Atlas IP. */
.atlas-polyglot-hero { display: none; }

.atlas-theme .atlas-polyglot-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
  margin-block: var(--space-6, 1.5rem);
  max-inline-size: 36rem;
}

/* Center the cascade on center-aligned hero sections (loka landing uses
   `text-align: center` on .hero) */
.atlas-theme .hero .atlas-polyglot-hero,
.atlas-theme [style*="text-align: center"] .atlas-polyglot-hero,
.atlas-theme .text-center .atlas-polyglot-hero {
  align-items: center;
  margin-inline: auto;
}

.atlas-theme .atlas-polyglot-line {
  display: block;
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.atlas-theme .atlas-polyglot-line-primary {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 400;
  color: var(--color-fg);
}

/* Secondary cascade — Noto family for broad script coverage, progressively
   smaller and faded. Four variants tuned by data-cascade-index. */
.atlas-theme .atlas-polyglot-line-secondary {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--section-accent);
}

.atlas-theme .atlas-polyglot-line-secondary[data-cascade-index="0"] {
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
  opacity: 0.85;
}
.atlas-theme .atlas-polyglot-line-secondary[data-cascade-index="1"] {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  opacity: 0.65;
}
.atlas-theme .atlas-polyglot-line-secondary[data-cascade-index="2"] {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  opacity: 0.5;
}
.atlas-theme .atlas-polyglot-line-secondary[data-cascade-index="3"] {
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  opacity: 0.4;
}

/* Per-script line-height tweaks — JP/KR/Arabic need slightly more room */
.atlas-theme .atlas-polyglot-line[lang="ja"],
.atlas-theme .atlas-polyglot-line[lang="ko"],
.atlas-theme .atlas-polyglot-line[lang="zh"] { line-height: 1.15; }

.atlas-theme .atlas-polyglot-line[lang="ar"] { line-height: 1.3; }

/* ============================================
   Grammar-key legend — the map's key.

   <p class="atlas-key atlas-only">
     <span class="atlas-key-label">Grammar key</span>
     <span><code>SVO</code> subject · verb · object</span>
     ...
   </p>

   Atlas-only. Sits under a section subtitle to demystify the language
   cartouches ("EN · SVO") before the reader meets them. Styled like the
   legend panel of an old atlas plate. */
.atlas-theme .atlas-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 1.5rem;
  margin: var(--space-5, 1.25rem) auto var(--space-7, 1.75rem);
  padding: 0.6rem 1rem;
  max-inline-size: 46rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  border-block: 1px solid var(--color-rule);
  /* Doubled hairline echo — same convention as the stamp cartouche */
  box-shadow: inset 0 2px 0 -1px var(--color-rule), inset 0 -2px 0 -1px var(--color-rule);
}

.atlas-theme .atlas-key-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--section-accent);
  white-space: nowrap;
}

.atlas-theme .atlas-key > span:not(.atlas-key-label) {
  white-space: nowrap;
}

.atlas-theme .atlas-key code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--section-accent);
  border-radius: 0;
  color: var(--section-accent);
  background: transparent;
  text-transform: uppercase;
  margin-inline-end: 0.35rem;
}

/* Reduced motion: no transitions */
@media (prefers-reduced-motion: reduce) {
  .atlas-theme .atlas-polyglot-line { transition: none; }
}

/* ============================================
   Polyglot marquee — airport-destination-board strip

   <div class="atlas-polyglot-marquee" data-phrase="tagline"></div>

   atlas-polyglot.js populates with <span class="atlas-polyglot-marquee-seg">
   entries, each containing a language tag + the translated phrase. Segments
   are appended twice so a keyframe of translateX(0 → -50%) loops seamlessly.

   Hidden in non-Atlas themes (the strip is Atlas IP).
   ============================================ */

.atlas-polyglot-marquee { display: none; }

.atlas-theme .atlas-polyglot-marquee {
  display: block;
  overflow: hidden;
  margin-block: var(--space-6, 1.5rem) var(--space-4, 1rem);
  padding-block: var(--space-3, 0.75rem);
  border-block: 1px solid var(--color-rule);
  position: relative;
  /* Fade at both edges so segments disappear into the margin rather than
     abruptly snapping at the container edge */
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.atlas-theme .atlas-polyglot-marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: atlas-marquee-scroll 90s linear infinite;
  will-change: transform;
}

.atlas-theme .atlas-polyglot-marquee:hover .atlas-polyglot-marquee-track {
  animation-play-state: paused;
}

@keyframes atlas-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.atlas-theme .atlas-polyglot-marquee-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-fg);
  white-space: nowrap;
  flex-shrink: 0;
}

.atlas-theme .atlas-polyglot-marquee-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--section-accent);
  background: var(--section-accent-fade);
  padding: 0.15em 0.45em;
  border-radius: 2px;
  text-transform: uppercase;
}

.atlas-theme .atlas-polyglot-marquee-body {
  font-family: var(--font-script);
  font-weight: 400;
}

/* Script-specific body fonts inside marquee segments */
.atlas-theme .atlas-polyglot-marquee-seg[lang="en"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="es"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="fr"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="pt"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="de"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="tr"] .atlas-polyglot-marquee-body,
.atlas-theme .atlas-polyglot-marquee-seg[lang="id"] .atlas-polyglot-marquee-body {
  font-family: var(--font-display);
  font-style: italic;
}

/* Segment dividers — thin bullet between entries */
.atlas-theme .atlas-polyglot-marquee-seg + .atlas-polyglot-marquee-seg::before {
  content: "·";
  color: var(--color-rule);
  margin-inline-end: 1.25rem;
  font-size: 1.5em;
  line-height: 1;
}

/* Respect prefers-reduced-motion: freeze the marquee */
@media (prefers-reduced-motion: reduce) {
  .atlas-theme .atlas-polyglot-marquee-track {
    animation: none;
    /* Fall back to a single row that may overflow — user can scroll */
    overflow-x: auto;
  }
}

/* ============================================
   Chip-row language switcher (Atlas-only)

   Replaces the <select id="lang-selector"> in loka's nav when Atlas is
   active. Five diverse-script chips + a disclosure for overflow languages.

   Markup pattern (authored in loka layout.njk):
     <span class="atlas-lang-chips atlas-only">
       <button class="atlas-lang-chip" data-lang="en" lang="en">A</button>
       <button class="atlas-lang-chip" data-lang="ja" lang="ja">字</button>
       ... etc ...
       <details class="atlas-lang-more">
         <summary>…</summary>
         <div class="atlas-lang-more-menu">
           <button data-lang="es" lang="es">Español</button>
           ...
         </div>
       </details>
     </span>
   ============================================ */

/* Default-hidden everywhere; revealed in Atlas */
.atlas-only { display: none !important; }
.atlas-theme .atlas-only { display: var(--atlas-only-display, flex) !important; }

/* Hide the classic select when Atlas is active.
   !important required to override `select { display: inline-flex !important }`
   from upstream missing.css. */
.atlas-theme .lang-switcher > select#lang-selector { display: none !important; }

.atlas-theme .atlas-lang-chips {
  --atlas-only-display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.atlas-theme .atlas-lang-chip,
.atlas-theme .atlas-lang-more summary {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.85rem;
  min-block-size: 1.85rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-script);
  font-size: 1rem;
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.atlas-theme .atlas-lang-chip[lang="ja"] { font-family: "Noto Sans JP", var(--font-script); }
.atlas-theme .atlas-lang-chip[lang="ar"] { font-family: "Noto Sans Arabic", var(--font-script); font-size: 1.1rem; }
.atlas-theme .atlas-lang-chip[lang="ko"] { font-family: "Noto Sans KR", var(--font-script); }
.atlas-theme .atlas-lang-chip[lang="zh"] { font-family: "Noto Sans SC", var(--font-script); }

.atlas-theme .atlas-lang-chip:hover,
.atlas-theme .atlas-lang-more summary:hover {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

.atlas-theme .atlas-lang-chip[aria-pressed="true"],
.atlas-theme .atlas-lang-chip.active {
  background: var(--section-accent);
  color: var(--color-bg);
  border-color: var(--section-accent);
}

.atlas-theme .atlas-lang-chip:focus-visible,
.atlas-theme .atlas-lang-more summary:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 1px;
}

/* "More" disclosure — overflow menu.
   Overflow: visible overrides upstream missing.css which sets overflow: clip
   on <details>, clipping the absolutely-positioned menu. */
.atlas-theme .atlas-lang-more {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.atlas-theme .atlas-lang-more summary {
  list-style: none;
  letter-spacing: 0;
}

.atlas-theme .atlas-lang-more summary::-webkit-details-marker { display: none; }

.atlas-theme .atlas-lang-more-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.35rem);
  min-inline-size: 12rem;
  background: var(--color-bg);
  border: 1px solid var(--color-fg);
  border-radius: 2px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 50;
  overflow: visible;
  box-shadow: 0 8px 24px rgba(31, 22, 16, 0.18);
}

.atlas-theme .atlas-lang-more-menu > button {
  all: unset;
  display: block;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-fg);
  cursor: pointer;
  border-radius: 2px;
}

.atlas-theme .atlas-lang-more-menu > button:hover,
.atlas-theme .atlas-lang-more-menu > button:focus-visible {
  background: var(--section-accent-fade);
  color: var(--section-accent);
  outline: none;
}

/* ============================================
   Ink-bleed filter — applied to buttons and cartouche labels

   SVG filter <filter id="atlas-ink-bleed"> lives inline in the loka layout.njk
   body. Reference via filter: url(#atlas-ink-bleed).
   ============================================ */

.atlas-theme button,
.atlas-theme .btn,
.atlas-theme input[type="submit"],
.atlas-theme input[type="button"] {
  filter: url(#atlas-ink-bleed);
}

/* Disable filter for users who prefer reduced motion or higher contrast —
   the displacement turbulence can be subtle but some users find it noisy. */
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  .atlas-theme button,
  .atlas-theme .btn,
  .atlas-theme input[type="submit"],
  .atlas-theme input[type="button"] {
    filter: none;
  }
}

/* Note: the cartouche (pre[data-lang]::before) was originally in the
   ink-bleed list per spec, but at 10px font-size the displacement scale
   destroyed readability. The doubled-rule stamp already reads as "hand
   pressed" — adding displacement on top is overkill. Kept crisp. */

/* ============================================
   Rosette dividers — replacing <hr>
   Four variants cycled via :nth-of-type for visual rhythm.
   Each rosette is a mask-image; background-color picks up section accent.
   ============================================ */

.atlas-theme hr,
.atlas-theme .atlas-rosette {
  all: unset;
  display: block;
  height: 3rem;
  margin-block: var(--space-8, 2rem);
  position: relative;
  text-align: center;
  /* Hairline runs left + right, rosette sits centered on top */
  background-image: linear-gradient(to right,
    transparent 0,
    var(--color-rule) 15%,
    var(--color-rule) 42%,
    transparent 42%,
    transparent 58%,
    var(--color-rule) 58%,
    var(--color-rule) 85%,
    transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center;
}

.atlas-theme hr::before,
.atlas-theme .atlas-rosette::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--section-accent);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Rosette 1 — surveyor's benchmark (default, also 4n+1).
   Concentric circles + short ticks at the four cardinal directions. Reads
   as a cartographer's "you are here" mark: neutral, map-native,
   deliberately not stellate. */
.atlas-theme hr::before,
.atlas-theme hr:nth-of-type(4n+1)::before,
.atlas-theme .atlas-rosette::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='11'/><circle cx='16' cy='16' r='5'/></g><circle cx='16' cy='16' r='1.6' fill='black'/><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='4'/><line x1='16' y1='28' x2='16' y2='31'/><line x1='1' y1='16' x2='4' y2='16'/><line x1='28' y1='16' x2='31' y2='16'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='11'/><circle cx='16' cy='16' r='5'/></g><circle cx='16' cy='16' r='1.6' fill='black'/><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='4'/><line x1='16' y1='28' x2='16' y2='31'/><line x1='1' y1='16' x2='4' y2='16'/><line x1='28' y1='16' x2='31' y2='16'/></g></svg>");
}

/* Rosette 2 — meridian crossing: a gentle undulating horizontal (latitude
   line) meeting a straight vertical (meridian). Replaces the earlier
   hexagram which read as a religious star. */
.atlas-theme hr:nth-of-type(4n+2)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'><path d='M2 16 Q9 11 16 16 T30 16'/><line x1='16' y1='5' x2='16' y2='27'/></g><circle cx='16' cy='16' r='1.6' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'><path d='M2 16 Q9 11 16 16 T30 16'/><line x1='16' y1='5' x2='16' y2='27'/></g><circle cx='16' cy='16' r='1.6' fill='black'/></svg>");
}

/* Rosette 3 — quatrefoil (four-petal flower) */
.atlas-theme hr:nth-of-type(4n+3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='black'><circle cx='16' cy='6' r='5'/><circle cx='26' cy='16' r='5'/><circle cx='16' cy='26' r='5'/><circle cx='6' cy='16' r='5'/></g><circle cx='16' cy='16' r='3.5' fill='white'/><circle cx='16' cy='16' r='1.5' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='black'><circle cx='16' cy='6' r='5'/><circle cx='26' cy='16' r='5'/><circle cx='16' cy='26' r='5'/><circle cx='6' cy='16' r='5'/></g><circle cx='16' cy='16' r='3.5' fill='white'/><circle cx='16' cy='16' r='1.5' fill='black'/></svg>");
}

/* Rosette 4 — nested concentric (mandala) */
.atlas-theme hr:nth-of-type(4n+4)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='13'/><circle cx='16' cy='16' r='8'/><circle cx='16' cy='16' r='3'/></g><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='5'/><line x1='16' y1='27' x2='16' y2='31'/><line x1='1' y1='16' x2='5' y2='16'/><line x1='27' y1='16' x2='31' y2='16'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='13'/><circle cx='16' cy='16' r='8'/><circle cx='16' cy='16' r='3'/></g><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='5'/><line x1='16' y1='27' x2='16' y2='31'/><line x1='1' y1='16' x2='5' y2='16'/><line x1='27' y1='16' x2='31' y2='16'/></g></svg>");
}

/* ============================================
   Auto-injected rosette dividers above major h2 headings.
   Pages like the LokaScript landing don't use <hr>; they break sections
   with <div> classes. Without auto-injection the theme looks quiet.
   This rule gives every top-level h2 a compass-rosette divider above it,
   with a broken hairline on each side — all in the current section accent.
   ============================================ */

.atlas-theme h2:not(:first-child)::before {
  content: "";
  display: block;
  height: 2.25rem;
  margin: var(--space-6, 1.5rem) 0 var(--space-3, 0.75rem);
  background-color: var(--section-accent);
  /* Surveyor's benchmark — see Rosette 1 above for rationale. */
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='11'/><circle cx='16' cy='16' r='5'/></g><circle cx='16' cy='16' r='1.6' fill='black'/><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='4'/><line x1='16' y1='28' x2='16' y2='31'/><line x1='1' y1='16' x2='4' y2='16'/><line x1='28' y1='16' x2='31' y2='16'/></g></svg>"),
    linear-gradient(to right, transparent 0%, black 15%, black 42%, transparent 42%, transparent 58%, black 58%, black 85%, transparent 100%);
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='black' stroke-width='1.2'><circle cx='16' cy='16' r='11'/><circle cx='16' cy='16' r='5'/></g><circle cx='16' cy='16' r='1.6' fill='black'/><g stroke='black' stroke-width='1.2'><line x1='16' y1='1' x2='16' y2='4'/><line x1='16' y1='28' x2='16' y2='31'/><line x1='1' y1='16' x2='4' y2='16'/><line x1='28' y1='16' x2='31' y2='16'/></g></svg>"),
    linear-gradient(to right, transparent 0%, black 15%, black 42%, transparent 42%, transparent 58%, black 58%, black 85%, transparent 100%);
  -webkit-mask-size: 1.75rem 1.75rem, 100% 1px;
  mask-size: 1.75rem 1.75rem, 100% 1px;
  -webkit-mask-position: center center, center center;
  mask-position: center center, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}

/* Scope-out: no auto-injected rosette above h2 inside cards, pillars,
   features, asides, or known container classes. Only the page's top-level
   section breaks get rosettes. */
.atlas-theme .card h2::before,
.atlas-theme .pillar h2::before,
.atlas-theme .feature h2::before,
.atlas-theme .intro-card h2::before,
.atlas-theme #intro-to-hyperscript h2::before,
.atlas-theme #features-list h2::before,
.atlas-theme aside h2::before,
.atlas-theme .card-header h2::before,
.atlas-theme .install-option h2::before,
.atlas-theme .loka-example h2::before { content: none; }

/* ============================================
   Links — 2px underline in section accent, doubles on hover
   ============================================ */

.atlas-theme a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--section-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-style 0.12s ease, text-decoration-thickness 0.12s ease;
}

.atlas-theme a:hover {
  text-decoration-style: double;
  text-decoration-thickness: 1px;
}

.atlas-theme a:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 3px;
  text-decoration: none;
  background: var(--section-accent-fade);
}

/* ============================================
   Blockquotes — wide margin, henna left rule, italic
   ============================================ */

.atlas-theme blockquote {
  margin: var(--space-6, 1.5rem) 0;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  border-inline-start: 2px solid var(--accent-henna);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-muted);
  font-size: 1.05em;
}

.atlas-theme blockquote cite {
  display: block;
  margin-block-start: var(--space-3, 0.75rem);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: end;
  color: var(--color-faded);
}

/* ============================================
   Code blocks — cream surface, ochre border, role pigments
   ============================================ */

.atlas-theme pre,
.atlas-theme pre[class*="language-"] {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: var(--card-radius);
  padding: var(--space-5, 1.25rem);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
}

/* Reserve vertical space at the top of the code block for the cartouche,
   so the stamp sits in its own band instead of overlapping the first line. */
.atlas-theme pre[data-lang],
.atlas-theme pre[data-lang][class*="language-"] {
  padding-top: 2.65rem;
}

.atlas-theme code,
.atlas-theme code[class*="language-"] {
  font-family: var(--font-mono);
  color: var(--code-fg);
}

/* Override prism-htmx.css's hardcoded #fdfdfd code background and its
   decorative striped gradient — both leak through in dark mode. */
.atlas-theme pre[class*="language-"] > code,
.atlas-theme pre[class*="language-"] > code[class*="language-"] {
  background: var(--code-bg);
  background-image: none;
  box-shadow: none;
}

.atlas-theme :not(pre) > code {
  background: var(--color-surface);
  padding: 0.12em 0.4em;
  border-radius: 2px;
  color: var(--accent-henna);
  font-size: 0.9em;
  border: 1px solid var(--color-border);
}

/* Code-block language label — the "Visa" cartouche.
   Specimen № 03 from the Caravanserai plate: double-rule stamp with
   four-point stars flanking the tag inside.

   Overrides required: prism-htmx.css (upstream Prism Coy theme) sets
   pre[class*=language-]::before with left, width, height, transform, bottom
   for a decorative paper-stack shadow — all of which bleed into and warp
   our cartouche. Explicit resets below pin the cartouche to top-right and
   size it to content. */
.atlas-theme pre[data-lang]::before {
  content: "✦  " attr(data-lang) "  ✦";
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-3, 0.75rem);
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  transform: none;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--section-accent);
  background: var(--code-bg);
  padding: 0.38em 0.8em 0.32em;
  border: 1px solid var(--section-accent);
  border-radius: 0;
  /* Doubled-rule stamp: outer border + 2px cream gap + 1px inner rule.
     box-shadow layers paint back-to-front so the accent sits at depth
     2-3px with the code-bg gap layered on top covering the outer 2px. */
  box-shadow:
    inset 0 0 0 2px var(--code-bg),
    inset 0 0 0 3px var(--section-accent);
}

/* Prism-htmx also sets pre[class*=language-]::after for the second paper
   layer. If it's unused on our code blocks it's harmless, but hide it to
   prevent any visual artifacts near cartouche-carrying blocks. */
.atlas-theme pre[data-lang][class*="language-"]::after {
  display: none;
}

/* ============================================
   Prism syntax tokens — role pigments shared with Gloss
   ============================================ */

.atlas-theme .token.comment,
.atlas-theme .token.prolog,
.atlas-theme .token.doctype,
.atlas-theme .token.cdata {
  color: var(--color-faded);
  font-style: italic;
}

.atlas-theme .token.keyword,
.atlas-theme .token.tag,
.atlas-theme .token.boolean,
.atlas-theme .token.constant,
.atlas-theme .token.deleted,
.atlas-theme .token.important {
  color: var(--role-action);
  font-weight: 500;
}

.atlas-theme .token.string,
.atlas-theme .token.char,
.atlas-theme .token.attr-value,
.atlas-theme .token.inserted,
.atlas-theme .token.selector,
.atlas-theme .token.regex {
  color: var(--role-patient);
}

.atlas-theme .token.function,
.atlas-theme .token.class-name,
.atlas-theme .token.builtin {
  color: var(--role-destination);
}

.atlas-theme .token.number,
.atlas-theme .token.symbol {
  color: var(--role-event);
}

.atlas-theme .token.property,
.atlas-theme .token.attr-name,
.atlas-theme .token.variable {
  color: var(--role-source);
}

.atlas-theme .token.operator,
.atlas-theme .token.entity,
.atlas-theme .token.url,
.atlas-theme .token.punctuation {
  color: var(--color-muted);
}

.atlas-theme .token.namespace { opacity: 0.7; }

/* ============================================
   Buttons — filled in section accent, rosette flourish optional
   ============================================ */

.atlas-theme button,
.atlas-theme .btn,
.atlas-theme input[type="submit"],
.atlas-theme input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.atlas-theme button:hover,
.atlas-theme .btn:hover,
.atlas-theme input[type="submit"]:hover,
.atlas-theme input[type="button"]:hover {
  background: color-mix(in oklch, var(--btn-bg), black 15%);
  border-color: color-mix(in oklch, var(--btn-bg), black 15%);
}

.atlas-theme button:focus-visible,
.atlas-theme .btn:focus-visible {
  outline: 3px solid var(--section-accent-fade);
  outline-offset: 2px;
}

.atlas-theme button:active,
.atlas-theme .btn:active {
  transform: translateY(1px);
}

/* Secondary variant — outlined cartouche-style */
.atlas-theme button.secondary,
.atlas-theme .btn.secondary {
  background: transparent;
  color: var(--section-accent);
  border: 1px solid var(--section-accent);
}

.atlas-theme button.secondary:hover,
.atlas-theme .btn.secondary:hover {
  background: var(--section-accent-fade);
  color: var(--section-accent);
  border-color: var(--section-accent);
}

/* ============================================
   Forms
   ============================================ */

.atlas-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.atlas-theme select,
.atlas-theme textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.55rem 0.85rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  color: var(--color-fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.atlas-theme input:focus,
.atlas-theme select:focus,
.atlas-theme textarea:focus {
  outline: none;
  border-color: var(--section-accent);
  box-shadow: 0 0 0 3px var(--section-accent-fade);
}

/* ============================================
   Tables — printed-index feel
   ============================================ */

.atlas-theme table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-5, 1.25rem);
  font-size: 0.95em;
  border-block-start: 2px solid var(--section-accent);
  border-block-end: 2px solid var(--section-accent);
}

.atlas-theme th {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8em;
  text-align: start;
  padding: 0.6rem 0.8rem;
  color: var(--section-accent);
  background: transparent;
  border-block-end: 1px solid var(--color-rule);
}

.atlas-theme td {
  padding: 0.55rem 0.8rem;
  border-block-end: 1px solid var(--color-rule);
  vertical-align: top;
}

.atlas-theme tr:last-child td {
  border-block-end: none;
}

/* ============================================
   Navigation
   ============================================ */

.atlas-theme .navbar {
  background: var(--nav-bg);
  border-block-end: 1px solid var(--color-rule);
}

.atlas-theme .nav-brand a {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  text-decoration: none;
}

.atlas-theme .navigation a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-fg);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0.5rem;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.atlas-theme .navigation a:hover {
  color: var(--section-accent);
  border-bottom-color: var(--section-accent);
}

.atlas-theme .navigation select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-bg);
  color: var(--color-fg);
}

/* ============================================
   Cards — light paper surface with section accent top-bar
   ============================================ */

.atlas-theme .card,
.atlas-theme .intro-card,
.atlas-theme #intro-to-hyperscript,
.atlas-theme #features-list > div {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--section-accent);
  border-radius: var(--card-radius);
  padding: var(--space-6, 1.5rem);
  margin-block: var(--space-5, 1.25rem);
  box-shadow: 0 1px 0 var(--color-rule);
}

.atlas-theme #features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-inline-size: 64rem;
  margin-inline: auto;
  padding-block: var(--space-4, 1rem);
}

.atlas-theme #features-list h2 {
  text-align: center;
  margin-block: var(--space-6, 1.5rem);
}

/* ============================================
   Marginalia — right-column sidenotes on wide screens
   ============================================ */

.atlas-theme aside.marginalia {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9em;
  color: var(--color-muted);
  border-inline-start: 1px solid var(--color-rule);
  padding: 0 var(--space-4, 1rem);
  margin-block: var(--space-5, 1.25rem);
}

@media (min-width: 1200px) {
  .atlas-theme aside.marginalia {
    float: inline-end;
    inline-size: 15rem;
    margin-inline-start: var(--space-6, 1.5rem);
    margin-inline-end: calc(var(--space-8, 2rem) * -1);
  }
}

/* ============================================
   Warning / info / ok boxes — role-coloured left rule
   ============================================ */

.atlas-theme .box.warn,
.atlas-theme .box.warning {
  background: transparent;
  border-inline-start: 3px solid var(--role-action);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  margin-block: var(--space-4, 1rem);
  border-radius: 0;
  color: var(--color-fg);
}

.atlas-theme .box.info {
  background: transparent;
  border-inline-start: 3px solid var(--role-patient);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  margin-block: var(--space-4, 1rem);
  border-radius: 0;
  color: var(--color-fg);
}

.atlas-theme .box.ok {
  background: transparent;
  border-inline-start: 3px solid var(--role-destination);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  margin-block: var(--space-4, 1rem);
  border-radius: 0;
  color: var(--color-fg);
}

/* ============================================
   Theme-switcher feedback toast
   ============================================ */

.atlas-theme .shortcut-feedback {
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--section-accent);
  border-radius: 2px;
  font-family: var(--font-body);
}

/* ============================================
   High Contrast
   ============================================ */

@media (prefers-contrast: more) {
  .atlas-theme {
    --color-fg:      light-dark(#0D0A08, #FFF6E0);
    --color-muted:   light-dark(#3A2D1E, #D4BFA0);
    --color-border:  light-dark(#8A6A34, #7A6A52);
    --color-rule:    light-dark(#8A6A34, #7A6A52);
  }

  html.atlas-theme body::before { display: none; }
}

/* ============================================
   Reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .atlas-theme * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Print — flatten to ink-on-white, drop textures
   ============================================ */

@media print {
  .atlas-theme {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-surface: #ffffff;
    --color-border: #000000;
    --color-rule: #666666;
    --section-accent: #000000;
  }

  html.atlas-theme body::before { display: none; }

  .atlas-theme hr::before {
    background-color: #000000;
  }

  .atlas-theme pre,
  .atlas-theme .card,
  .atlas-theme table {
    box-shadow: none;
    border-color: #000000;
  }
}

/* --- Wordmark: hyperfixi ------------------------------------------------
   Polyglot trade-route banner: Instrument Serif italic indigo drop-cap
   (aizome), upright turmeric-toned rest. Oversized to feel hand-set.
*/
.atlas-theme .wm-hyperfixi .wm-drop {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  font-style: italic;
  color: var(--accent-indigo);
  letter-spacing: -0.02em;
}

.atlas-theme .wm-hyperfixi .wm-rest {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.atlas-theme .wm-hyperfixi .wm-rest::after {
  background: var(--accent-turmeric);
  opacity: 0.7;
}

/* --- Wordmark: lokascript ----------------------------------------------
   Italic aizome indigo 'loka' + upright 'script' in fg. Instrument Serif
   at comparable weight to hyperfixi for visual parity across the family.
*/
.atlas-theme .wm-lokascript .wm-drop {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  font-style: italic;
  color: var(--accent-indigo);
  letter-spacing: -0.02em;
}

.atlas-theme .wm-lokascript .wm-rest {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.atlas-theme .wm-lokascript .wm-rest::after {
  background: var(--accent-turmeric);
  opacity: 0.7;
}