/*  Glass Tokens Specimen
   Authoritative token system for the Glass design system
*/

/* ===== UTILITY CLASSES ===== */
.hidden {
  display: none !important;
}

:root {
  /* ===== A - SEMANTIC PALETTE ===== */
  /* Each token documents its usage and prohibitions */

  /* AMBER-HERO: Solar warmth. The hero accent (user-fixed 2026-06-10).
     This is the NEW token the DA wants; glass.css has no amber yet (Chantier 2 migrates --warm -> here).
     Usage: primary actions, KPI highlights, dominant accent, glass rim/glow source
     Prohibited: body text, canvas background, overuse */
  --amber-hero: #f8f8f8;
  --amber-hero-dim: #fbf1e2;
  --amber-hero-ghost: color-mix(in srgb, var(--amber-hero) 12%, transparent);

  /* TEAL-DATA: Korvax accent. For data, graphs, cool contrast.
     Usage: numeric highlights, data series, secondary accent
     Prohibited: primary actions, decorative use */
  --teal-data: #b5bdd4;
  --teal-data-ghost: color-mix(in srgb, var(--teal-data) 12%, transparent);

  /* ATLANTIDEUM-RARE: Void Mother's sacred color. Rarity marker.
     Usage: punctual markers only (<5% of view), emphasis on rare data
     Prohibited: background, canvas, ambient tint, repetitive use
     Regression guard: if >5% of screen, that's a v1 mistake */
  --atlantideum-rare: #8668FF;
  --atlantideum-rare-ghost: color-mix(in srgb, var(--atlantideum-rare) 8%, transparent);

  /* ROUGE-ATLAS: Atlas competitor. Conflict/danger only.
     Usage: errors, conflicts, danger states, Atlas brand identity
     Prohibited: decorative, primary actions, badges outside conflict context */
  --rouge-atlas: #E74C3C;
  --rouge-atlas-ghost: color-mix(in srgb, var(--rouge-atlas) 12%, transparent);

  /* Warm-tinted dark ramp (DA: never neutral gray/black; shadows tinted).
     These must read as TINTED, not three identical blacks: deep = cool
     violet canvas, mid = clearly violet, warm = clearly brown-gold. */
  --void-deep: #0E1016;        /* = glass.css --scrim. Cool violet-black canvas/bg */
  --void-mid:  #1C1726;        /* violet-tinted dark surface (visibly purple) */
  --void-warm: #251C12;        /* brown-gold warm dark (visibly warm) */
  /* Tinted inset fill (violet-leaning, NOT neutral gray): panels inside glass */
  --void-light: color-mix(in srgb, var(--void-mid) 60%, var(--shadow) 40%);

  /* Reusable NON-glass surface (the darker solid panel, like color-swatch).
     A usable element in its own right: no blur, opaque-ish dark tinted fill. */
  --surface-inset: color-mix(in srgb, var(--void-light) 30%, transparent);
  --surface-inset-solid: color-mix(in srgb, var(--void-mid) 70%, var(--shadow) 8%);

  /* Text (= glass.css values) */
  --text:     #f6edfa;         /* main text: white on dark glass */
  --text-dim: #c9c9c9;         /* labels, meta, inactive */

  /* Specular / light source */
  --specular: #FFFFFF;

  /* Star spectral classes: CANONICAL values from
     ressources/system_address.json -> "spectralrbg" (server-side source).
     Spectral letter -> color: O/B=blue, F/G=yellow, K/M=red, X/Y=purple, E=green. */
  --star-yellow: rgb(255, 215, 0);   /* F/G class */
  --star-red:    rgb(220, 20, 60);   /* K/M class (crimson) */
  --star-green:  rgb(0, 255, 127);   /* E class (spring green) */
  --star-blue:   rgb(0, 191, 255);   /* O/B class (deep sky) */
  --star-purple: rgb(128, 0, 128);   /* X/Y class (exotic) */

  /* ===== B - GLASS SURFACE TOKENS ===== */
  /* VALIDATED Chantier 0 recipe (WCAG AAA on 5 hostile backgrounds).
     Do not invent a new glass here: this is "le verre" that passed. */

  /* Glass material: milky frost (NOT dark). This is the membrane.
     Material + structure are the validated Chantier 0 recipe; only the
     warm SOURCE color changed from violet to amber (DA decision 2026-06-10). */
  --glass: #c1b5cf;
  --shadow: #181622;        /* tinted drop shadow base (deep violet hue) */

  /* Three validated tints of the frost material */
  --glass-tint:        color-mix(in srgb, var(--glass) 30%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--glass) 45%, transparent);
  --glass-tint-quiet:  color-mix(in srgb, var(--glass) 18%, transparent);

  /* Blur + saturate */
  --glass-blur: 24px;
  --glass-saturate: 150%;
  --glass-radius: 4px;

  /* Glass edge: white border (per glassproject-v2.md spec) */
  --glass-border: color-mix(in srgb, var(--specular) 35%, transparent);
  --glass-border-quiet: color-mix(in srgb, var(--specular) 10%, transparent);

  /* Rim light: AMBER top inset (solar source) + dark bottom bevel.
     Amber replaces the Chantier 0 violet here (DA: light is the hero). */
  --glass-rim: inset 0 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
               inset 0 -1px 0 rgba(0, 0, 0, 0.45);

  /* Shadow layers (tinted, never gray) */
  /*--glass-shadow:      0 4px 12px color-mix(in srgb, var(--shadow) 65%, transparent),
                       0 8px 32px color-mix(in srgb, var(--shadow) 40%, transparent);*/
  --glass-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 85%, transparent),
                0 16px 48px color-mix(in srgb, var(--shadow) 65%, transparent);
  --glass-shadow-hero: 0 12px 40px color-mix(in srgb, var(--shadow) 78%, transparent);

  /* Inner glow: AMBER emissive tint (the glass own solar light) */
  --glow-inner: inset 0 0 60px color-mix(in srgb, var(--amber-hero) 10%, transparent);

  /* ===== C - TYPOGRAPHY ===== */
  /* Font families: display + body + serif + mono */

  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-mono: monospace;

  /* Typographic scale (base html = 108%, so 1rem ~= 17.3px).
     Lower end raised for readability: --text-xs 0.64 was ~11px, too small.
     Major Third (1.25x) from --text-base up; gentler floor below it. */
  --text-xs: 0.9rem;      /* ~14px: fine print, labels, captions */
  --text-sm: 0.95rem;       /* ~15.5px: secondary text */
  --text-base: 1rem;       /* ~17.3px: body default */
  --text-md: 1.25rem;      /* ~21.6px */
  --text-lg: 1.563rem;     /* ~27px */
  --text-xl: 1.953rem;     /* ~34px */
  --text-2xl: 2.441rem;    /* ~42px */
  --text-3xl: 3.052rem;    /* ~53px */

  /* Numeric data: tabular-nums globally active */
  --font-numeric: 'tabular-nums';
  --font-numeric-family: 'Karla', system-ui, sans-serif;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ===== D - SPATIAL TOKENS ===== */
  /* 8px grid system */

  --space-0-5: 0.15rem;    /* 4px */
  --space-1: 0.3rem;       /* 8px */
  --space-2: 0.8rem;         /* 16px */
  --space-3: 1rem;       /* 24px */
  --space-4: 1.5rem;         /* 32px */
  --space-6: 2rem;         /* 48px */
  --space-8: 3rem;         /* 64px */

  /* Border radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* ===== E - INTERACTION TOKENS ===== */
  /* Focus, hover, active states */

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--amber-hero) 60%, transparent);
  --focus-outline: 2px solid var(--amber-hero);

  --transition-fast: 0.2s ease-in-out;
  --transition-med: 0.3s ease-in-out;

  /* ===== F - BADGE PALETTE ===== */
  /* REAL triplets from glass.css (--badge-*-color/-bg/-border), reproduced
     verbatim. var(--teal)/(--accent-void)/(--accent-atlas) references are
     mapped to our renamed tokens. Literal hexes/rgba kept as in glass.css.
     NOTE: glass.css badge-unknown used --warm (violet); under the amber
     migration that maps to --amber-hero. Flag for Chantier 2 review. */

  --badge-known-color:    var(--teal-data);
  --badge-known-bg:       color-mix(in srgb, var(--teal-data) 15%, transparent);
  --badge-known-border:   color-mix(in srgb, var(--teal-data) 45%, transparent);

  --badge-unknown-color:  var(--amber-hero);
  --badge-unknown-bg:     color-mix(in srgb, var(--amber-hero) 12%, transparent);
  --badge-unknown-border: color-mix(in srgb, var(--amber-hero) 40%, transparent);

  --badge-bh-color:       #d0a0ff;                                  /* violet clair, Void Mother */
  --badge-bh-bg:          rgba(80, 0, 120, 0.25);
  --badge-bh-border:      color-mix(in srgb, var(--atlantideum-rare) 50%, transparent);

  --badge-atlas-color:    #ff9080;                                  /* rouge chaud, Atlas */
  --badge-atlas-bg:       color-mix(in srgb, var(--rouge-atlas) 15%, transparent);
  --badge-atlas-border:   color-mix(in srgb, var(--rouge-atlas) 40%, transparent);

  --badge-water-color:    #7ae8ff;                                  /* cyan eau */
  --badge-water-bg:       rgba(0, 191, 255, 0.12);
  --badge-water-border:   rgba(0, 191, 255, 0.40);

  --badge-dis-color:      #ffd080;                                  /* ambre dissonance */
  --badge-dis-bg:         rgba(255, 165, 0, 0.12);
  --badge-dis-border:     rgba(255, 165, 0, 0.40);

  --badge-giant-color:    #b8a8ff;                                  /* lilas giant star */
  --badge-giant-bg:       rgba(134, 104, 255, 0.12);
  --badge-giant-border:   rgba(134, 104, 255, 0.40);

  --badge-locals-color:   var(--teal-data);                         /* habitants: teal */
  --badge-locals-bg:      color-mix(in srgb, var(--teal-data) 12%, transparent);
  --badge-locals-border:  color-mix(in srgb, var(--teal-data) 40%, transparent);

  --badge-wealth-color:   #ffd24d;                                  /* jaune wealth/trade */
  --badge-wealth-bg:      rgba(255, 210, 77, 0.12);
  --badge-wealth-border:  rgba(255, 210, 77, 0.40);

  --badge-conflict-color: #ff9080;                                  /* rouge Atlas conflict */
  --badge-conflict-bg:    color-mix(in srgb, var(--rouge-atlas) 15%, transparent);
  --badge-conflict-border:color-mix(in srgb, var(--rouge-atlas) 40%, transparent);

  --badge-economy-color:  #ffd24d;                                  /* jaune economy/trade */
  --badge-economy-bg:     rgba(255, 210, 77, 0.12);
  --badge-economy-border: rgba(255, 210, 77, 0.40);
}

/* ===== FONT DECLARATIONS ===== */
/* Self-hosted fonts (Chantier 1 deliverable) */
/* Using existing fonts from project library */
/* Web fonts: Syne (display), Karla (body), Crimson Pro (serif) */

@font-face {
  font-family: 'Syne';
  font-weight: 300 800;
  font-style: normal;
  src: url('/assets/fonts/FunnelDisplay-VariableFont_wght.woff2') format('woff2'),
       url('/assets/fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  font-weight: 400 700;
  font-style: normal;
  src: url('/assets/fonts/Cabin-VariableFont_wdth,wght.woff2') format('woff2'),
       url('/assets/fonts/Cabin-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  font-weight: 400 700;
  font-style: italic;
  src: url('/assets/fonts/Cabin-Italic-VariableFont_wdth,wght.woff2') format('woff2'),
       url('/assets/fonts/Cabin-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  font-weight: 400 700;
  font-style: normal;
  src: url('/assets/fonts/CrimsonPro-VariableFont_wght.woff2') format('woff2'),
       url('/assets/fonts/CrimsonPro-VariableFont_wght.ttf') format('truetype-variations');
  font-display: swap;
}

@font-face {
  font-family: 'NMS-Glyphs-Mono';
  font-weight: 400;
  font-style: normal;
  src: url('/assets/fonts/NMS-Glyphs-Mono.woff2') format('woff2'),
       url('/assets/fonts/NMS-Glyphs-Mono.woff') format('woff');
  font-display: swap;
}

/* ===== BASE STYLES ===== */
/* Root element, body reset, typography defaults */

/* HTML: Base font size 108% (scales entire rem-based system).
   Background void-deep, text color, body font, numeric feature settings. */
html {
  font-size: 108%;
  background: var(--void-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: var(--font-numeric);
}

/* BODY: Full-page background image (fixed). Glass sections blur this image via backdrop-filter.
   void-deep is fallback if image fails to load. */
body {
  margin: 0;
  padding: 0;
  line-height: var(--leading-normal);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-image, none) center / cover no-repeat fixed;
  opacity: 0.7;
  z-index: -1;
}
@media (max-width: 768px) {
  body::before { background-attachment: scroll; }
}
/* Universal: Disable em-dashes (CSP/CLAUDE.md rule). */
* {
  font-feature-settings: "zero" 1;
}

/* Heading defaults: font-weight 600, text color, no margins. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding: 0;
}

/* H2: Section title. Display font (Syne), amber color, border-bottom separator. */
h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--amber-hero);
  border-bottom: 1px solid var(--glass-border-quiet);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  margin-top: 0;
}

/* H3: Subsection title. Display font (Syne), teal color, tighter spacing. */
h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--teal-data);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* P: Body paragraph. Slightly dimmed text, relaxed line height. */
p {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--text) 80%, transparent);
  line-height: var(--leading-relaxed);
}

/* ===== SPECIMEN LAYOUT ===== */
/* Page structure: sticky header, main content container, glass sections */

/* .specimen-header: Sticky header bar with glass recipe (blur + rim + shadow).
   Position: top of page, z-index 100 (above all content).
   Usage: <header class="specimen-header"><h1>...</h1><p class="header-subtitle">...</p></header> */
.specimen-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-1);
  background: var(--glass-tint-quiet);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-border-quiet);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}

/* .specimen-header h1: Main title in header. Amber color, display font. */
.specimen-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--amber-hero);
}

/* .header-subtitle: Smaller subtitle text in header. Dimmed, secondary importance. */
.header-subtitle {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

/* MAIN: Content container. Centered, max-width 1200px, large padding. */
main {
  padding: var(--space-8);
}

/* Page app (system/known) */
main[data-page] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sys-section--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
}

.sys-section--row .glass-plate {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-page="system-unknown"] .sys-section--row .glass-plate:first-child {
  aspect-ratio: auto;
}

[data-page="region"] .sys-section--row .glass-plate {
  aspect-ratio: auto;
  display: block;
}

.sys-section--grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.sys-section--right-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Badge styles */
.badge--nonexistent {
  background: var(--rouge-atlas);
  color: var(--specular);
}

.badge--uncertain {
  background: color-mix(in srgb, var(--rouge-atlas) 60%, transparent);
  color: var(--text);
}

.badge--yellow-star {
  background: var(--badge-wealth-bg);
  color: var(--badge-wealth-color);
  border-color: var(--badge-wealth-border);
}

.badge--purple-star {
  background: var(--badge-giant-bg);
  color: var(--badge-giant-color);
  border-color: var(--badge-giant-border);
}

/* Critical confidence */
.sys-rarity--critical .sys-rarity-num {
  color: var(--rouge-atlas);
}


.sys-section--row .glass-plate > h3 {
  position: absolute;
  top: var(--space-4);
}

.sys-section--row .solarsys,
.sys-section--row .pizzagalaxy {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys-section--row .circles {
  margin-top: auto;
  padding-bottom: var(--space-3);
}

.sys-section--cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
}

/* SECTION: Glass-based content container. Strong glass tint (45%), full rim + glow + shadow.
   Usage: <section><h2>Title</h2><p>...</p><div class="...">content</div></section> */
section {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-rim), var(--glow-inner), var(--glass-shadow-hero);
}

/* SECTION H2: Section heading. Amber, display font, border-bottom separator. */
section h2,
.glass-plate h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--amber-hero);
  border-bottom: 1px solid var(--glass-border-quiet);
  padding-bottom: var(--space-2);
}

.glass-plate h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--teal-data);
}

/* SECTION P: Paragraph inside section. Dimmed text, relaxed leading. */
section p,
.glass-plate p {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--text) 80%, transparent);
  line-height: var(--leading-relaxed);
}

/* ===== PALETTE GRID ===== */
/* Color swatches: display palette tokens in responsive grid */

/* .palette-grid: Responsive grid layout (auto-fit, min 280px per column).
   Usage: <div class="palette-grid"><div class="color-swatch">...</div>...</div> */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* .color-swatch: Single color token card. Shows color box, name, hex, usage, prohibitions.
   Usage: <div class="color-swatch"><div class="swatch-box"></div><div class="swatch-name">--token</div>...</div> */
.color-swatch {
  padding: var(--space-3);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}

/* .panel-inset: Non-glass dark panel (no blur). Use inside glass sections instead of nesting glass.
   DA Rule #2: Glass can only nest 1 level. Use .panel-inset for nested content.
   Usage: <div class="panel-inset"><h3>Title</h3><p>Content here</p></div> */
.panel-inset {
  padding: var(--space-3);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  background:
    var(--surface-inset);
  background-blend-mode: overlay;
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, var(--shadow) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--specular) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--specular) 4%, transparent);
}

/* .panel-inset--solid: Stronger version of .panel-inset (92% void-mid opacity).
   Use when .panel-inset is too translucent. */
.panel-inset--solid {
  background: var(--surface-inset-solid);
}

/* .swatch-box: Color preview box (80px height). Filled by #swatch-{name} ID selectors below.
   Usage: <div class="swatch-box" id="swatch-amber-hero"></div> */
.swatch-box {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border: 1px solid var(--glass-border-quiet);
  box-shadow: var(--glass-shadow);
}

/* Swatch fills: ID selectors map each swatch to its CSS variable.
   Pure CSS (no inline JS, CSP compliant). */
#swatch-amber-hero     { background: var(--amber-hero); }
#swatch-amber-hero-dim { background: var(--amber-hero-dim); }
#swatch-teal-data      { background: var(--teal-data); }
#swatch-atlantideum    { background: var(--atlantideum-rare); }
#swatch-rouge-atlas    { background: var(--rouge-atlas); }
#swatch-void-deep      { background: var(--void-deep); }
#swatch-void-mid       { background: var(--void-mid); }
#swatch-void-warm      { background: var(--void-warm); }
#swatch-star-yellow    { background: var(--star-yellow); }
#swatch-star-red       { background: var(--star-red); }
#swatch-star-green     { background: var(--star-green); }
#swatch-star-blue      { background: var(--star-blue); }
#swatch-star-purple    { background: var(--star-purple); }

/* .swatch-name: Token variable name (body font, teal color). */
.swatch-name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  margin: var(--space-1) 0;
  word-break: break-all;
}

/* .swatch-hex: Hex or RGB value of color token (dimmed mono). */
.swatch-hex {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text) 60%, transparent);
  margin-bottom: var(--space-2);
}

/* .swatch-usage: When to use this color. */
.swatch-usage {
  font-size: var(--text-xs);
  color: var(--text);
  margin-bottom: var(--space-1);
}

/* .swatch-prohibited: When NOT to use this color (red tint, italic). */
.swatch-prohibited {
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--rouge-atlas) 80%, transparent);
  font-style: italic;
}

/* ===== TYPOGRAPHY SECTION ===== */
/* Typography scale samples: display all text sizes and font families */

/* .type-scale: Grid container for typography samples.
   Usage: <div class="type-scale"><div class="type-sample">...</div>...</div> */
.type-scale {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

/* .type-sample: Single typography example with amber background. Shows size + font family.
   Usage: <div class="type-sample"><div class="type-sample-label">label</div><div class="type-SIZE">Sample text</div></div> */
.type-sample {
  padding: var(--space-3);
  border-left: 3px solid var(--amber-hero);
  background: color-mix(in srgb, var(--amber-hero) 5%, transparent);
}

/* .numeric-sample: Container for numeric/tabular data sample. */
.numeric-sample {
  margin: var(--space-4) 0;
}

/* .type-sample-label: Label above sample (uppercase, teal). */
.type-sample-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

/* Type size classes: Apply specific font size + font family to text.
   Body font classes: .type-xs through .type-xl (Karla)
   Display font classes: .type-2xl, .type-3xl (Syne, bold) */
.type-xs { font-size: var(--text-xs); font-family: var(--font-body); }
.type-sm { font-size: var(--text-sm); font-family: var(--font-body); }
.type-base { font-size: var(--text-base); font-family: var(--font-body); }
.type-md { font-size: var(--text-md); font-family: var(--font-body); }
.type-lg { font-size: var(--text-lg); font-family: var(--font-body); }
.type-xl { font-size: var(--text-xl); font-family: var(--font-body); }
.type-2xl { font-size: var(--text-2xl); font-family: var(--font-display); font-weight: 600; }
.type-3xl { font-size: var(--text-3xl); font-family: var(--font-display); font-weight: 700; }

/* .numeric-demo: Tabular-nums data (right-aligned for column alignment).
   Usage: <div class="numeric-demo"><div>123.45</div><div>999.99</div></div> */
.numeric-demo {
  font-family: var(--font-numeric-family);
  font-feature-settings: var(--font-numeric);
  text-align: right;
  padding-right: var(--space-3);
}

/* ===== GLASS SURFACES ===== */
/* Glass plate variants and their containers */

/* .surface-demo: Grid for glass plate variants. Responsive (min 300px per column).
   Usage: <div class="surface-demo"><div class="glass-plate">...</div>...</div> */
.surface-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

/* .surface-onbg: Container showing glass directly on photographic background (NOT nested on glass).
   This is production reality: glass on image, not glass-on-glass.
   Usage: <div class="surface-onbg"><div class="surface-demo">...</div></div> */
.surface-onbg {
  background-image: url('/assets/backgrounds/magenta/magenta-4.webp');
  background-size: cover;
  background-position: center;
  border-radius: var(--glass-radius);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border: 1px solid var(--glass-border-quiet);
}

/* .glass-plate: Chantier 0 validated glass recipe. Three opacity variants via BEM modifiers.
   Standard = --glass-tint (30% frost + blur + rim + glow + shadow).
   DO NOT INVENT NEW GLASS RECIPES. Use one of the three approved variants below.
   Usage: <div class="glass-plate"><div class="plate-label">...</div><div class="plate-title">Title</div>...</div> */
.glass-plate {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-rim), var(--glow-inner), var(--glass-shadow);
}

/* Grain texture overlay: pure-CSS procedural noise (radial gradients, overlay blend).
   Chantier 0 recipe includes this fine grain for visual depth. */
.glass-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 12% 45%, rgba(255,255,255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 23%, rgba(255,255,255, 0.06) 1.5px, transparent 1.5px),
    radial-gradient(circle at 45% 67%, rgba(0,0,0, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 89% 78%, rgba(255,255,255, 0.09) 1px, transparent 1px);
  background-size: 97px 103px, 113px 127px, 151px 139px, 179px 151px;
  background-position: 0 0, 13px 17px, 23px 5px, 37px 29px;
}

/* Content inside glass: z-index 2 to sit above grain (z-index 1). */
.glass-plate > * {
  position: relative;
  z-index: 2;
}

/* .glass-plate--strong: Hero variant. 45% frost (stronger opacity), full hero glow + shadow.
   Use for primary KPI / hero metric ONE per view. */
.glass-plate--strong {
  background: var(--glass-tint-strong);
  box-shadow: var(--glass-rim), var(--glow-inner), var(--glass-shadow-hero);
}

/* .glass-plate--quiet: Metadata variant. 18% frost (subtle), quiet border.
   Use for secondary info / metadata fields. */
.glass-plate--quiet {
  background: var(--glass-tint-quiet);
  border-color: var(--glass-border-quiet);
}

/* .plate-label: Metadata label above title (mono, teal, small).
   Usage: <div class="plate-label">Standard Glass (30%)</div> */
.plate-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  margin-bottom: var(--space-2);
}

/* .plate-title: Main title inside glass plate (display font, white, semibold). */
.plate-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: var(--space-1) 0;
  color: var(--text);
}

/* .plate-value: Large KPI number (amber, bold, tabular-nums). Draws eye.
   Usage: <div class="plate-value">2,847</div> */
.plate-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--amber-hero);
  margin: var(--space-1) 0;
  font-feature-settings: var(--font-numeric);
}

/* .plate-body: Supporting text inside glass (dimmed, relaxed leading). */
.plate-body {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--text) 70%, transparent);
  margin: var(--space-2) 0 0 0;
  line-height: var(--leading-relaxed);
}

/* ===== SHAPED GLASS TOKENS ===== */
/* Non-rectangular glass variants: hexagon, diamond, triangles, circle. Use for badges/markers.
   All three glass variants (standard/strong/quiet) apply to shaped glass. */

/* .glass-plate--hexagon: Hexagon-shaped glass token (100x100px). */
.glass-plate--hexagon {
  /* Clip into hexagon shape. Regular hexagon: 60deg angles */
  clip-path: polygon(
    50% 0%,           /* top */
    100% 25%,         /* top-right */
    100% 75%,         /* bottom-right */
    50% 100%,         /* bottom */
    0% 75%,           /* bottom-left */
    0% 25%            /* top-left */
  );
  border-color: color-mix(in srgb, var(--glass-border) 15%, transparent);
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  /* Tiny token size */
  width: 100px;
  height: 100px;
  padding: 0px;
  gap: 25px;
  /* Rim light on bottom and top-left edges */
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    inset -1px 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
  /* Maintain glass styling, just change shape */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* .glass-plate--diamond: Diamond shape (rotated square, 100x100px). */
.glass-plate--diamond {
  /* Diamond shape: points up and down */
  clip-path: polygon(
    50% 0%,           /* top point */
    100% 50%,         /* right */
    50% 100%,         /* bottom point */
    0% 50%            /* left */
  );
  border-color: color-mix(in srgb, var(--glass-border) 15%, transparent);
  border-radius: 0;
  /* Tiny token size */
  width: 100px;
  height: 100px;
  padding: 0px;
  gap: 25px;
  /* Rim light on top-left diagonal edge */
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    inset -1px 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
  /* Maintain glass styling, just change shape */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* .glass-plate--triangle-down: Triangle pointing downward (120x100px). */
.glass-plate--triangle-down {
  /* Triangle pointing down */
  clip-path: polygon(
    0% 0%,            /* top-left */
    100% 0%,          /* top-right */
    50% 100%          /* bottom point */
  );
  border-color: color-mix(in srgb, var(--glass-border) 15%, transparent);
  border-radius: 0;
  /* Tiny token size */
  width: 120px;
  height: 100px;
  padding: 0px;
  gap: 25px;
  /* Rim light */
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    inset -1px 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
  /* Maintain glass styling, just change shape */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* .glass-plate--triangle-up: Triangle pointing upward (120x100px). */
.glass-plate--triangle-up {
  /* Triangle pointing up */
  clip-path: polygon(
    50% 0%,           /* top point */
    100% 100%,        /* bottom-right */
    0% 100%           /* bottom-left */
  );
  border-color: color-mix(in srgb, var(--glass-border) 15%, transparent);
  border-radius: 0;
  /* Tiny token size */
  width: 120px;
  height: 100px;
  padding: 0px;
  gap: 25px;
  /* Rim light */
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    inset -1px 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
  /* Maintain glass styling, just change shape */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* .glass-plate--circle: Perfect circle (100x100px, border-radius 50%). */
.glass-plate--circle {
  /* Perfect circle */
  border-radius: 50%;
  /* Tiny token size */
  width: 100px;
  height: 100px;
  padding: 0;
  gap: 25px;
  /* Rim light on bottom and top-left edges */
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    inset -1px 1px 0 color-mix(in srgb, var(--amber-hero) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
  /* Maintain glass styling, just change shape */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* .tokens-demo: Flex container for shaped glass tokens (hexagon, diamond, triangles, circles).
   Centered, centered wrap for responsive layout. */
.tokens-demo {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* .token-symbol: Unicode symbol inside shaped glass token (large font, centered). */
.token-symbol {
  font-size: 1.5rem;
}

/* ===== DATA LAYOUT ===== */
/* Two-column layout: sidebar + main content. Mobile: stacked. Desktop: sidebar sticky on left. */

.data-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .data-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-4);
  }
}

.data-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

@media (min-width: 768px) {
  .data-layout__sidebar {
    position: sticky;
    top: var(--space-3);
    height: fit-content;
    max-height: calc(100vh - var(--space-3) * 2);
    overflow-y: auto;
  }
}

.data-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* .sidebar-nav: Glass quiet plate for secondary navigation. Inherits glass-plate--quiet styling. */
.sidebar-nav {
  background: var(--glass-tint-quiet);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* .sidebar-nav__section: Grouped navigation area (title + links). */
.sidebar-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* .sidebar-nav__title: Section header (uppercase, dimmed, extra small). */
.sidebar-nav__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0;
  padding: 0;
}

/* .sidebar-nav__links: Flex container for navigation links (no list styling). */
.sidebar-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* .sidebar-nav__link: Individual navigation link styled as ghost button. */
.sidebar-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-nav__link:hover {
  background: color-mix(in srgb, var(--amber-hero) 12%, transparent);
  color: var(--amber-hero);
  border-color: var(--amber-hero);
}

.sidebar-nav__link.active {
  background: color-mix(in srgb, var(--amber-hero) 12%, transparent);
  color: var(--amber-hero);
  border-color: var(--amber-hero);
  font-weight: 600;
}

/* ===== DOCUMENTATION SECTIONS TOC ===== */
/* Table of contents for doc sections (H2/H3). Quiet glass plate. */

.doc-sections {
  background: var(--glass-tint-quiet);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.doc-sections__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
  padding: 0;
}

.doc-sections__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.doc-sections__item {
  padding-left: 0;
}

.doc-sections__item--level-3 {
  padding-left: var(--space-3);
}

.doc-sections__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.doc-sections__link:hover {
  color: var(--amber-hero);
}

/* Doc footer with back-to-top link */
.doc-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--glass-border-quiet);
  margin-top: var(--space-4);
}

.doc-footer__back-to-top {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.doc-footer__back-to-top:hover {
  color: var(--amber-hero);
}

/* Heading anchor link (appears on hover) */
.heading-anchor {
  margin-left: var(--space-2);
  color: var(--text-dim);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  font-size: 0.8em;
}

.doc-content h2:hover .heading-anchor,
.doc-content h3:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor:hover {
  color: var(--amber-hero);
}

/* ===== BUTTONS ===== */
/* Button hierarchy: Primary (filled amber), Ghost (outline), Tertiary (text-only). DA Rule #3. */

/* .button-grid: Container for button rows (stacked grid). */
.button-grid {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* .button-row: Single row of button variants (primary/hover/disabled). Flex, centered. */
.button-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--void-light) 20%, transparent);
  border-radius: var(--radius-md);
}

/* .button-label: Label for button type (PRIMARY, GHOST, TERTIARY). */
.button-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  text-transform: uppercase;
  min-width: 100px;
}

/* .btn: Base button. Body font, small size, smooth transitions, focus outline.
   Usage: <button class="btn btn--primary">Action</button> */
a {
  color: var(--teal-data);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

a:hover {
  color: var(--amber-hero);
}

.sys-zone-2 a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--teal-data) 15%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.btn {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

/* Button focus state: amber outline, 2px offset. Always visible. */
.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Disabled buttons: reduced opacity, not-allowed cursor. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .btn--primary: Filled amber button. ONE per view (DA Rule #3).
   Hover: dim amber, lift effect. Active: return to baseline. */
.btn--primary {
  background: var(--amber-hero);
  color: var(--void-deep);
  font-weight: 600;
}

.btn--primary:hover:not(:disabled) {
  background: var(--amber-hero-dim);
  color: var(--void-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--amber-hero) 30%, transparent);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0);
}

/* .btn--ghost: Outline-only button. Secondary action (1-3 per view). */
.btn--ghost {
  background: transparent;
  color: var(--amber-hero);
  border: 1px solid var(--amber-hero);
}

.btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amber-hero) 12%, transparent);
}

/* .btn--sm: compact size for inline nav rows */
.btn--sm {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  min-width: 2rem;
  text-align: center;
}

/* groups breadcrumb + switcher as one flex child of main, so the main gap doesn't apply between them */
.sys-page-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* cancel most of the main gap between the header block and the first hero section */
.sys-page-header + .sys-section {
  margin-top: calc(var(--space-1) - var(--space-6));
}

/* galaxy switcher row (between breadcrumb and hero) */
.galaxy-switcher-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-2);
}

.galaxy-autocomplete-wrap {
  position: relative;
  width: 240px;
  min-width: 0;
  flex-shrink: 1;
  overflow: visible;
}

.galaxy-autocomplete-wrap input[type="text"] {
  box-sizing: border-box;
  width: 100%;
}


.galaxy-autocomplete-results {
  position: fixed;
  z-index: 500;
  min-width: 220px;
  max-height: 220px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-rim), 0 8px 32px rgba(0,0,0,0.7);
  display: none;
}

.galaxy-autocomplete-results .autocomplete-item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.galaxy-autocomplete-results .autocomplete-item:last-child {
  border-bottom: none;
}

.galaxy-autocomplete-results .autocomplete-item:hover {
  background: color-mix(in srgb, var(--amber-hero) 12%, transparent);
}

/* .btn--text: Tertiary action. Text-only, no background, teal color, unlimited per view. */
.btn--text {
  background: transparent;
  color: var(--teal-data);
  font-weight: 500;
}

.btn--text:hover:not(:disabled) {
  color: var(--amber-hero);
}

/* .btn--danger: Red danger button for destructive actions */
.btn--danger {
  background: var(--rouge-atlas);
  color: var(--specular);
  font-weight: 600;
}

.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rouge-atlas) 85%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rouge-atlas) 30%, transparent);
}

.btn--danger:active:not(:disabled) {
  transform: translateY(0);
}

/* .btn--hover: Simulate hover state (for demo/testing). */
.btn--hover:not(:disabled) {
  background: color-mix(in srgb, var(--amber-hero) 12%, transparent);
}

/* .focus-button: Full-width button (for demo). */
.focus-button {
  width: 100%;
  box-sizing: border-box;
}

/* ===== BADGES ===== */
/* Badge system: 11 variants with semantic colors. DA Rule #4: always include legend. */

/* .badge-grid: Responsive grid for badge items (min 200px per column). */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* .badge-item: Container for single badge with legend.
   Usage: <div class="badge-item"><span class="badge badge--known">KNOWN</span><div class="badge-legend">...</div></div> */
.badge-item {
  padding: var(--space-2);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--void-light) 15%, transparent);
}

/* .badge: Inline badge element (triplet: bg, color, border). Small size, semantic color via variant class.
   Usage: <span class="badge badge--known">KNOWN</span> */
.badge {
  display: inline-block;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-bottom: var(--space-1);
  border: 1px solid transparent;
}

/* Badge variants: 11 semantic colors. Each is a triplet (--badge-{name}-{bg/color/border}). */
/* Teal: Known systems */
.badge--known {
  background: var(--badge-known-bg);
  color: var(--badge-known-color);
  border-color: var(--badge-known-border);
}

/* Amber: Unknown systems */
.badge--unknown {
  background: var(--badge-unknown-bg);
  color: var(--badge-unknown-color);
  border-color: var(--badge-unknown-border);
}

/* Violet: Black holes / Void Mother */
.badge--bh {
  background: var(--badge-bh-bg);
  color: var(--badge-bh-color);
  border-color: var(--badge-bh-border);
}

/* Red: Atlas / conflict / piracy */
.badge--atlas {
  background: var(--badge-atlas-bg);
  color: var(--badge-atlas-color);
  border-color: var(--badge-atlas-border);
}

/* Cyan: Water planets */
.badge--water {
  background: var(--badge-water-bg);
  color: var(--badge-water-color);
  border-color: var(--badge-water-border);
}

/* Amber: Discoverer / dissonance */
.badge--dis {
  background: var(--badge-dis-bg);
  color: var(--badge-dis-color);
  border-color: var(--badge-dis-border);
}

/* Lilac: Giant stars */
.badge--giant {
  background: var(--badge-giant-bg);
  color: var(--badge-giant-color);
  border-color: var(--badge-giant-border);
}

/* Teal: Lifeforms / inhabitants */
.badge--locals {
  background: var(--badge-locals-bg);
  color: var(--badge-locals-color);
  border-color: var(--badge-locals-border);
}

/* Yellow: Wealth / trade */
.badge--wealth {
  background: var(--badge-wealth-bg);
  color: var(--badge-wealth-color);
  border-color: var(--badge-wealth-border);
}

/* Red: Conflict / war / piracy */
.badge--conflict {
  background: var(--badge-conflict-bg);
  color: var(--badge-conflict-color);
  border-color: var(--badge-conflict-border);
}

/* Yellow: Economy / trade hub */
.badge--economy {
  background: var(--badge-economy-bg);
  color: var(--badge-economy-color);
  border-color: var(--badge-economy-border);
}

/* .badge-name: CSS variable name (token reference). Mono, teal, uppercase. */
.badge-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  margin-top: var(--space-1);
  text-transform: uppercase;
  word-break: break-all;
}

/* .badge-legend: Human-readable explanation of what this badge means. DA Rule #4. */
.badge-legend {
  display: block;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text) 60%, transparent);
  margin-top: var(--space-1);
  font-style: italic;
}

/* ===== FOCUS & ACCESSIBILITY ===== */
/* Focus states must be visible. Never hide outlines. Respects prefers-reduced-motion. */

/* .focus-demo: Grid for interactive element demos (inputs, buttons). */
.focus-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

/* .focus-sample: Container for single interactive element example. */
.focus-sample {
  padding: var(--space-3);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--void-light) 20%, transparent);
}

/* .focus-label: Label above interactive element (mono, teal, uppercase). */
.focus-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal-data);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

/* Text input: dark background, white text, subtle border. Focus shows amber ring + glow. */
input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

/* Text input focus: amber border, amber ring shadow, lighter background. */
input[type="text"]:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
  background: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

/* URL input: same as text input */
input[type="url"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

input[type="url"]:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
  background: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

/* Number input: same as text input */
input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

input[type="number"]:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
  background: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

/* Select dropdown: same styling as text input */
select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6edfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-1) center;
  background-size: 1.5em 1.5em;
  padding-right: calc(var(--space-2) + 2em);
}

select:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
  background-color: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

/* Textarea: same styling as text input */
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-normal);
}

textarea:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
  background: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

/* Portal glyph input in hero (wider field) */
.sys-hero-actions input[type="text"] {
  width: 100%;
  max-width: 400px;
}

/* Portal format hint text */
.portal-format-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* Universal focus-visible: amber outline + offset (keyboard navigation). */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* ===== ADDITIONAL SECTIONS ===== */

/* .note-info: Informational note block (technical specs, requirements, constraints).
   Usage: Wrap inline specs, requirements, or technical notes that must be visible but not highlighted.
   Example: <p class="note-info">Specification: backdrop-filter: blur(16px) saturate(150%);</p>
   Styling: Mono font, small text, subtle gray background, left border accent. */
.note-info {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--text) 60%, transparent);
  font-family: var(--font-body);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--void-light) 15%, transparent);
  border: 1px solid var(--glass-border-quiet);
  border-left: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
}

/* .section-highlight: Section with amber background tint and border.
   Usage: Wrap sections that need to stand out as important (rules, requirements, closures).
   Example: <section class="section-highlight"><h2>Title</h2><ul class="list-check">...</ul></section>
   Styling: 5% amber background, amber border color. Combines with .list-check for emphasis. */
.section-highlight {
  background: color-mix(in srgb, var(--amber-hero) 5%, transparent);
  border-color: var(--amber-hero);
}

/* .list-check: Checklist with teal checkmark bullets.
   Usage: Numbered or bulleted list with explicit checkmarks (✓, ✓✓, etc).
   Example: <ul class="list-check"><li><span class="checkmark">✓</span> Item text</li></ul>
   Styling: No bullet points, semantic spacing. Items have teal checkmarks for visual emphasis. */
.list-check {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}

.list-check li {
  padding: var(--space-2) 0;
}

/* .checkmark: Teal-colored emphasis for checkmarks or bullet symbols within .list-check items.
   Usage: <span class="checkmark">✓</span> before item text.
   Styling: Teal color, bold weight. Draws visual attention to valid/approved items. */
.checkmark {
  color: var(--teal-data);
  font-weight: 700;
}

/* .specimen-footer: Footer section with dashed border and subtle background.
   Usage: Final section of a page (closing remarks, usage instructions, version info).
   Example: <section class="specimen-footer"><h2>Footer Title</h2><p>...</p></section>
   Styling: Dashed border (10% void-light background, quiet border). Visually separates footer from main content. */
.specimen-footer {
  background: color-mix(in srgb, var(--void-light) 10%, transparent);
  border: 1px dashed var(--glass-border-quiet);
}

/* ===== SVG DEFS BLOCK ===== */
/* SVG filter definitions (glass-vellum). Hidden from layout via positioning (CSP-safe, no display:none). */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ===== 3D NAVIGATION CUBES ===== */
/* Spatial navigation interface: 3D cube grid representing 6 directions (X/Y/Z axes).
   Center cube is non-interactive anchor. Adjacent cubes are links (directional navigation).
   Uses CSS 3D transforms + glass tokens for aesthetics. */

/* .cube-scene: Perspective viewport (3D scene). */
.cube-scene {
  perspective: 800px;
  width: 300px;
  height: 300px;
  margin: var(--space-4) auto;
}

/* .cube-container: 3D grid container (150x150px) with 6 cubes positioned in 3D space. */
.cube-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(53deg) translate3d(-100px, -10px, -67px);
  left: 15px;
  top: 15px;
}

/* .cube: Single 50x50px 3D cube (interactive link or non-interactive anchor).
   Combines 6 faces (.cfront, .cback, .cleft, .cright, .ctop, .cbottom) via CSS 3D.
   Usage: <a href="#" class="cube cube-left"><div class="cface cfront"></div>...</a> */
.cube {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text);
  font-weight: bold;
  transform-style: preserve-3d;
  transition: all var(--transition-med);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

/* Interactive cubes: cursor pointer. */
.cube:not(.cube-special) {
  cursor: pointer;
}

/* Interactive cube hover: stronger glass, amber glow. */
.cube:not(.cube-special):hover .cface {
  background: var(--glass-tint-strong);
  border-color: var(--amber-hero);
  opacity: 1;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--amber-hero) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--amber-hero) 25%, transparent);
}

/* .cube-special: Center cube (non-interactive anchor). No pointer events. */
.cube-special {
  pointer-events: none;
}

.cube-special .cface {
  background: var(--glass-tint-strong);
  border-color: var(--glass-border-quiet);
  opacity: 0.35;
}

/* .cface: Single cube face (50x50px). Positioned via translateZ for 3D. Glass tokens. */
.cface {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid var(--glass-border);
  background: var(--glass-tint);
  border-radius: 1px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--specular) 20%, transparent),
              0 2px 8px color-mix(in srgb, var(--shadow) 40%, transparent);
}

/* Cube face transforms (3D positioning on 50px cube): each face is 25px from center. */
.cfront {
  transform: translateZ(25px);
  opacity: 0.3;
}

.cback {
  transform: rotateY(180deg) translateZ(25px);
  opacity: 0.2;
}

.cleft {
  transform: rotateY(-90deg) translateZ(25px);
  opacity: 0.4;
}

.cright {
  transform: rotateY(90deg) translateZ(25px);
  opacity: 0.2;
}

.ctop {
  transform: rotateX(90deg) translateZ(25px);
  opacity: 0.4;
}

.cbottom {
  transform: rotateX(-90deg) translateZ(25px);
  opacity: 1;
}

/* .cube::before: Directional arrow symbol (Unicode). Each cube direction has a visual indicator. */
.cube::before {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9rem;
  font-weight: 900;
  z-index: 10;
}

/* Directional symbols (Unicode): ⭠ (left), ⭡ (up), ⭢ (right), ⭣ (down) */
.cube-left::before {
  content: '⭠';
}

.cube-up::before {
  content: '⭡';
}

.cube-front::before {
  content: '⭢';
  transform: rotateY(90deg);
}

.cube-back::before {
  content: '⭢';
  transform: rotateY(-90deg);
}

.cube-down::before {
  content: '⭣';
}

.cube-right::before {
  content: '⭢';
}

.cube-center::before {
  content: '';
}

/* Cube 3D positioning (translate3d): each cube at 90px intervals from center (90, 90, 90). */
.cube-left {
  transform: translate3d(0px, 90px, 90px);
}

.cube-up {
  transform: translate3d(90px, 0px, 90px);
}

.cube-front {
  transform: translate3d(90px, 90px, 0px);
}

.cube-center {
  transform: translate3d(90px, 90px, 90px);
}

.cube-back {
  transform: translate3d(90px, 90px, 180px);
}

.cube-down {
  transform: translate3d(90px, 180px, 90px);
}

.cube-right {
  transform: translate3d(180px, 90px, 90px);
}

/* Accessibility: Respects prefers-reduced-motion (disable transitions/animations). */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Inline icon (SVG as <img class="icon">) */
.btn--primary .icon {
  filter: invert(1);
}

.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon--up {
}

/* ===== GALAXY MAP + SOLAR SYSTEM (preserved viz) ===== */
/* Extracted from glass.css. Classes/keyframes unchanged (used by pizzagalaxy.js + solarsys.js).
   Token remaps: --light->#FFFFFF, --warm->--amber-hero, --color-green-flash->rgba(0,255,0,.5).
   --gr is a JS-injected RGB var, kept as-is. */
/* --- 3D / Solar cards --- */

/* pizzagalaxy 3D scene */
.pizzagalaxy {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  perspective: 400px;
  position: relative;
  overflow: hidden;
  cursor: grab;
  margin: auto;
  user-select: none;
}
.scene {
  width: 400px;
  height: 400px;
  position: absolute;
  top: calc(50% + 50px);
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-50deg) rotateY(-12deg);
  transform-style: preserve-3d;
  transition: transform .1s ease-out;
  pointer-events: auto;
}
.scene-reset {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 1.5rem;
  color: #FFFFFF;
  opacity: .5;
  z-index: 100;
  user-select: none;
}
.parallelepiped {
  width: 200px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 100px));
  transform-style: preserve-3d;
}
.parallelepiped-shadow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  background: radial-gradient(ellipse 150px 150px, rgba(0, 0, 0, 0.80) 0%, transparent 80%);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(-150px);
  pointer-events: none;
}
.face {
  position: absolute;
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #FFFFFF;
  opacity: .4;
  background: var(--glass-tint-quiet);
  box-shadow: inset 0 0 0 1px var(--glass-border),
              inset 0 1px 2px rgba(255, 255, 255, 0.2),
              inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.front  { transform: translateZ(100px); }
.back   { transform: translateZ(-100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
/*.top {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 45%;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(-30px);
  opacity: 0.2;
/*  border: 1px solid lightgray; }*/
.bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 45%;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(30px);
  background: rgba(145,141,141,.2);
  opacity: .2;
  border: 1px solid lightgray;
}



.map {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) rotateX(90deg);
  opacity: 0.5;
  overflow: visible;
  background-image: url('/assets/img/map.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  /*filter: brightness(1.6) contrast(1.9);*/
}
.centergalaxy,
.centergalaxy2,
.centergalaxy3,
.centergalaxy4,
.centergalaxy5 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--gr-galaxy, 255, 255, 255));
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(var(--gr-galaxy, 255, 255, 255), .8), 0 0 15px rgba(var(--gr-galaxy, 255, 255, 255), .8);
}
.centergalaxy  { transform: translate(-50%,-50%) translateX(-5px) translateZ(-5px) rotateX(45deg) rotateY(45deg); }
.centergalaxy2 { transform: translate(-50%,-50%) translateX(-5px) translateZ(-5px); }
.centergalaxy3 { transform: translate(-50%,-50%) translateX(-5px) translateZ(-5px) rotateX(90deg); }
.centergalaxy4 { transform: translate(-50%,-50%) translateX(-5px) translateZ(-5px) rotateX(65deg) rotateY(25deg); }
.centergalaxy5 { transform: translate(-50%,-50%) translateX(-5px) translateZ(-5px) rotateX(25deg) rotateY(65deg); }
.target {
  position: absolute;
  visibility: hidden;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.target:before,
.target:after,
.target .side-left,
.target .side-right,
.target .side-top,
.target .side-bottom {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.9;
  background-color: rgba(0,255,0,.8);
  box-shadow: 0 0 5px rgba(0,255,0,.8), 0 0 15px rgba(0,255,0,.8);
}
.target:before {
  transform: translateZ(5px);
}
.target:after {
  transform: rotateY(180deg) translateZ(5px);
}
.target .side-left {
  transform: rotateY(-90deg) translateZ(5px);
}
.target .side-right {
  transform: rotateY(90deg) translateZ(5px);
}
.target .side-top {
  transform: rotateX(90deg) translateZ(5px);
}
.target .side-bottom {
  transform: rotateX(-90deg) translateZ(5px);
}
.breathing {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: .9;
  animation: breathing 2s infinite ease-in-out;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
@keyframes breathing {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50%       { transform: translate(-50%, -50%) scale(1.6); opacity: .5; }
}
.target-wrong {
  position: absolute;
  visibility: hidden;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 3px solid red;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255,0,0,.7);
  background: radial-gradient(circle, rgba(255,0,0,.5), rgba(255,0,0,0) 70%);
  transform: translate(-50%,-50%) rotateX(90deg);
  transform-style: preserve-3d;
  opacity: .7;
}
.regiontarget {
  z-index: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 5px dashed rgb(var(--gr));
  border-radius: 50%;
  box-shadow: 0 0 20px rgb(var(--gr));
  background: radial-gradient(circle, rgb(var(--gr)), rgba(255,0,0,0) 70%);
  transform: translate(-50%,-50%) translateZ(1px);
  transform-style: preserve-3d;
  opacity: 0;
}

/* Solar system orbits */

.solarsys {
  position: relative;
  display: block;
  width: 400px;
  height: 400px;
  justify-content: center;
  margin: auto;
}
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgb(var(--gr)));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25), 0 0 8px rgb(var(--gr)), 0 0 20px rgb(var(--gr)), 0 0 40px rgba(var(--gr),0.6), 0 0 60px rgba(var(--gr),0.4), 0 0 80px rgba(var(--gr),0.2);
  z-index: 10;
}
.orbit {
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0);
  box-shadow: inset 0 2px 2px rgba(176, 176, 176, 0.5), inset 1px -2px 1px rgba(255,255,255,.05);
  z-index: 1;
}
.planet {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  /*background-color: #ffffff;*/
  box-shadow: 0 30px 8px rgba(0,0,0,.1), inset -1px -1px 2px rgba(0,0,0,.7), inset 0.5px 0.5px 1px rgba(255,255,255,.5);
  z-index: 5;
  opacity: 0.95;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.planet.giant {
  width: 22px;
  height: 22px;
}
.moon-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  /*box-shadow: inset 0 1px 3px rgba(0,0,0,.25);*/
  z-index: 2;
}
.moon {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--glass);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset -0.5px -0.5px 1px rgba(0,0,0,.15);
  z-index: 6;
}
.there { box-shadow: 0 0 8px 3px rgba(231,58,118,.8); }

/* orbit keyframes - one per slot (up to 9 planets) */
@keyframes orbit-planet-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-3 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-4 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-5 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-6 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-7 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-8 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-planet-9 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* circles row (planet selector) */
.circles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  margin-top: .5rem;
}
.circlesun {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: .25rem;
  margin-right: 1.5rem;
}

.circlesun::after {
  content: '';
  display: block;
  width: 1rem;
}

.circleAtlas {
  position: relative;
  width: 40px;
  height: 40px;
  background: url('../img/atlas.png') no-repeat center center, radial-gradient(circle, rgb(255, 0, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0)) no-repeat center center;
  background-size: 40px 40px, 60px 60px;
  margin: 0.25rem;
}
.circleBH {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  box-shadow: 0 0 15px rgb(255, 255, 255), inset 0 2px 4px rgba(0, 0, 0, 0.8), inset -1px -1px 3px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.596);
  background: radial-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
  margin: 0.25rem;
}

.circle {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  /*background-color: rgba(255,255,255,.1);*/
  background-color:  #ffffff ;
  box-shadow: 0 20px 6px rgba(0,0,0,.2), inset -1px -1px 2px rgba(0,0,0,.15), inset 0.5px 0.5px 1px rgba(255,255,255,.2);
  margin: .25rem;
  opacity: 0.9;
}
.cmoon  { background-color: var(--amber-hero) !important; }

/* Incomplete system data: CTA to contribute a survey */
.sys-incomplete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-dim);
  font-size: var(--text-sm);
}

/* Unknown planet count: empty disc with a "?", keep the shadow rim only */
.circle.cempty {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
}


/* ===== SITE HEADER (glass quiet) ===== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-tint-quiet);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-border-quiet);
  box-shadow: var(--glass-rim);
}

.site-head__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  flex-wrap: wrap;
}

.site-head__brand {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--amber-hero);
  text-decoration: none;
  white-space: nowrap;
}

.site-head__brand:hover {
  color: var(--amber-hero-dim);
}

.site-head__search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  max-width: 320px;
  position: relative;
}

.site-head__search-input {
  flex: 1;
  padding: var(--space-0-5) var(--space-2);
  background: transparent;
  color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--glass-border-quiet) 50%, transparent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  opacity: 0.6;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

.site-head__search-input::placeholder {
  color: var(--text-muted);
}

.site-head__search-input:focus {
  opacity: 1;
  color: var(--text);
}

.site-head__search-input:focus {
  outline: none;
  border-color: var(--amber-hero);
  box-shadow: var(--focus-ring);
}

.site-head__search-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  padding: 1px 5px;
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--void-mid) 50%, transparent);
}

.site-head__primary {
  display: flex;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  gap: var(--space-2);
}

.site-head__primary a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: none;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.site-head__primary a:hover,
.site-head__primary a.is-active {
  color: var(--amber-hero);
}

.site-head__primary a.is-active {
  border-bottom: 1px solid var(--amber-hero);
}

.site-head__account a {
  color: var(--teal-data);
}

.site-head__account a:hover,
.site-head__account a.is-active {
  color: var(--amber-hero);
}

.site-head__subnav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-0-5) var(--space-4);
  border-top: 1px solid var(--glass-border-quiet);
  flex-wrap: wrap;
}

.site-head__subnav a {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-decoration: none;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.site-head__subnav a:hover,
.site-head__subnav a.is-active {
  color: var(--amber-hero);
}

/* ===== SITE FOOTER (glass quiet) ===== */

.site-foot {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: var(--glass-tint-quiet);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-border-quiet);
}

.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto var(--space-4);
}

.site-foot__col h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--amber-hero);
  margin: 0 0 var(--space-2) 0;
  padding: 0;
  border: none;
}

.site-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-foot__col a {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-foot__col a:hover {
  color: var(--amber-hero);
}

.site-foot__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border-quiet);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.site-foot__bottom p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.site-foot__credit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-dim);
}


.site-foot__logo-link {
  display: inline-flex;
  align-items: center;
}

.site-foot__logo-img {
  height: 100px;
  width: auto;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.site-foot__logo-link:hover .site-foot__logo-img {
  opacity: 1;
}

/* ===== SYSTEM PAGE - known.html utilities ===== */

/* Layout wrapper - conteneur de mise en page, pas de glass */

/* Breadcrumb */
.sys-breadcrumb {
  padding: var(--space-1) var(--space-4) var(--space-1);
}

.sys-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.sys-breadcrumb li + li::before {
  content: '>';
  margin-right: var(--space-1);
  opacity: 0.5;
}

.sys-breadcrumb a {
  color: var(--teal-data);
  text-decoration: none;
}

.sys-breadcrumb a:hover {
  color: var(--amber-hero);
}

/* Hero layout */
.sys-hero-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-3);
}

.sys-hero-left h2 {
  margin-bottom: var(--space-2);
}

.sys-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.sys-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.sys-completion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  border: 1px solid var(--teal-data);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.sys-completion-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.sys-completion-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.sys-completion .btn--sm {
  font-size: var(--text-xs);
}

.sys-hero-glyphs .g-row {
  display: flex;
  gap: var(--space-1);
  font-family: 'NMS-Glyphs-Mono', monospace;
  font-size: 2rem;
}

.sys-hero-welcome {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--glass-border-quiet);
}

.sys-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border-quiet);
}

.sys-hero-qr {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  opacity: 0.3;
  filter: brightness(1.15) contrast(1.2);
}

.sys-hero-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  margin-left: -60px - var(--space-1);
}

/* Viz grid */

/* Metric row */
.sys-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--glass-border-quiet);
  font-size: var(--text-sm);
}

.sys-metric:last-child {
  border-bottom: none;
}

/* Axes */
.sys-axes {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.sys-axis {
  flex: 1;
  min-width: 80px;
  padding: var(--space-2);
  background: var(--surface-inset);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  position: relative;
}

/* Hover info panel */
.sys-infobox {
  position: relative;
}

.sys-hover-info {
  display: none;
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--surface-inset-solid);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.sys-infobox:hover .sys-hover-info {
  display: block;
}

/* Civ icons */
.sys-civ-icons {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  justify-content: center;
}

.sys-civ-icon {
   width: 95px !important;
  height: 95px !important;
  filter: grayscale(95%) hue-rotate(200deg) brightness(1.2) saturate(1.5);
}

/* Tools row */
.sys-exports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.sys-exports > :first-child {
  margin-right: var(--space-4);
}

.sys-tools-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Code box */
.sys-code-box {
  margin-bottom: var(--space-3);
}

.sys-code-row {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin-top: var(--space-1);
}

.sys-code-row input[type="text"] {
  flex: 1;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

/* Shortcuts nav */
.sys-shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Editorial badges */
.sys-editorial {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border-quiet);
}

.sys-editorial-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Reviews */
.sys-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sys-recent {
  margin-top: var(--space-4);
}

/* BH data */
.sys-bh-data {
  display: flow-root;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  background-color: color-mix(in srgb, var(--amber-hero-ghost) 50%, transparent);
}

/* Black hole jump map: flat 2D SVG over map.jpg (top-down X/Z plane) */
.bh-jumpmap {
  float: left;
  width: 250px;
  height: 250px;
  margin: 0 var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  transform: rotate(-0.8deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
}

/* Dim the map backdrop so the jump markers/line read clearly */
.bh-jumpmap-bg {
  opacity: 0.9;

}

.bh-jumpmap-line {
  stroke: var(--teal-data);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

/* Arrowhead on the jump line, same hue as the line */
.bh-jumpmap-arrow path {
  fill: var(--teal-data);
}

.bh-jumpmap-from {
  fill: var(--amber-hero);
  stroke: var(--amber-hero-dim);
  stroke-width: 1.5;
}

/* Departure black hole: outer ring for a double-border look */
.bh-jumpmap-ring {
  fill: none;
  stroke: var(--amber-hero);
  stroke-width: 1.5;
}

.bh-jumpmap-to {
  fill: var(--badge-known-color);
  stroke: var(--shadow);
  stroke-width: 1;
}

/* Page nav */
.sys-page-nav {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4);
  gap: var(--space-3);
}

.sys-page-nav a {
  color: var(--teal-data);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.sys-page-nav a:hover {
  color: var(--amber-hero);
}

/* Rarity KPI (sys-hero-right, sous les glyphs) */
.sys-rarity-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.sys-rarity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  flex: 1 1 0;
  min-width: 9rem;
  min-height: 120px;
}

.kpi-bg-galactic,
.kpi-bg-portal,
.kpi-bg-core {
  position: relative;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background: transparent !important;
  border: 1px solid var(--amber-hero);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.3s ease;
}

.kpi-bg-galactic:hover,
.kpi-bg-portal:hover,
.kpi-bg-core:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.kpi-bg-galactic .plate-label,
.kpi-bg-portal .plate-label,
.kpi-bg-core .plate-label {
  color: var(--amber-hero);
  position: relative;
  z-index: 2;
}

.kpi-bg-galactic .sys-rarity-num,
.kpi-bg-portal .sys-rarity-num,
.kpi-bg-core .sys-rarity-num {
  color: var(--amber-hero);
  position: relative;
  z-index: 2;
}

.kpi-bg-galactic .sys-rarity-label,
.kpi-bg-portal .sys-rarity-label,
.kpi-bg-core .sys-rarity-label {
  color: var(--amber-hero);
  position: relative;
  z-index: 2;
}

.kpi-bg-galactic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/img/galactic-map.webp);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  z-index: 0;
    opacity: 0.3;
}

.kpi-bg-portal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/img/portal.webp);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  z-index: 0;
    opacity: 0.3;
}

.kpi-bg-core::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/img/core.webp);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.3;
  z-index: 0;
}

.sys-rarity-num {
  position: relative;
  z-index: 1;
}

.sys-rarity-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--amber-hero);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sys-rarity-unit {
  font-size: var(--text-md);
  font-weight: 400;
  opacity: 0.7;
  margin-left: 0.1em;
}

.sys-rarity-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* Responsive */
@media (max-width: 768px) {
  .sys-hero-layout {
    grid-template-columns: 1fr;
  }

  .sys-hero-right {
    justify-content: flex-start;
  }

  .sys-hero-glyphs .g-row {
    font-size: 1.6rem;
  }

  .site-head__nav {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .site-head__primary {
    flex-wrap: wrap;
  }
}

/* ===== VELLUM PAPER TEXTURE ===== */

.vellum-scene {
  width: 100%;
  margin: 0 auto;
  margin-bottom: var(--space-3);
  position: relative;
}

/* Museum label: alone at the bottom, full width, centered */
.sys-explore .vellum-label {
  clear: both;
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text) 55%, transparent);
  letter-spacing: 0.08em;
}

/* Specular glaze: two skewed hard-edge reflets, manga-style */
/*.vellum-scene::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 8%;
  width: 6%;
  height: 60%;
  pointer-events: none;
  z-index: 20;
  background: rgba(255, 255, 255, 0.1);
  transform: skew(-22deg, 0deg);
  transform-origin: bottom right;
  box-shadow: 20px 0 0 0 rgba(255, 255, 255, 0.05);
}

/* Small specular hit top-left — tall enough to always cross the full pane */
.vellum-scene::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 20%;
  width: 10%;
  height: calc(100% + 200px);
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10) 20%,
    rgba(255, 255, 255, 0.10) 40%,
    transparent
  );
  filter: blur(3px);
  transform: skew(-22deg, 0deg);
  transform-origin: top left;
  box-shadow: 32px 0 10px -12px rgba(255, 255, 255, 0.10);
}

/* Second specular hit bottom-right — same trick */
.vellum-glare {
  position: absolute;
  top: -100px;
  right: 15%;
  width: 10%;
  height: calc(100% + 150px);
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.20) 30%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent
  );
  filter: blur(5px);
  transform: skew(-22deg, 0deg);
  transform-origin: bottom right;
  box-shadow: 28px 0 12px 8px rgba(255, 255, 255, 0.10);
}

.vellum-base {
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  z-index: 1;
  position: relative;
  overflow: visible;
  /* Glass thickness: thick sharp slab, bright bottom + right edges */
  box-shadow:
    0 18px 0 0 rgba(255, 255, 255, 0.55),
    18px 0 0 0 rgba(255, 255, 255, 0.25),
    18px 18px 0 0 rgba(255, 255, 255, 0.20),
    0 24px 28px rgba(0, 0, 0, 0.50);
}

.vellum-sheet {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: calc(80% - var(--space-8) * 2);
  margin: 150px var(--space-8);
  border-radius: 1px;
  background: color-mix(in srgb, var(--amber-hero-dim) 45%, var(--void-warm) 15%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.4deg);
  z-index: 2;
  padding: var(--space-4);
  overflow: hidden;
  position: relative;
}

.vellum-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  contain: paint;
  background: #000;
  filter: url(#glass-vellum);
  mix-blend-mode: multiply;
  z-index: 1;
  opacity: 0.35;
}

.vellum-sheet > * {
  position: relative;
  z-index: 3;
}

/* Paper watermark: reads "16" / "19" mirrored, tiled down the full
   right height. Sits at z-index 2 (over the SVG texture, under the
   content) so it looks pressed "into" the sheet. The mark is a tiny
   SVG tile (mirrored glyphs + a 1px highlight under each digit for the
   debossed look) repeated with repeat-y, so it self-fills any sheet
   height: no markup, and the sheet's overflow:hidden clips the last
   tile cleanly. */
.vellum-sheet .vellum-watermark {
  position: absolute;
  top: -14px;
  bottom: 0;
  right: 30px;
  width: 60px;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='56'%3E%3Cg%20font-family='serif'%20font-weight='700'%20font-size='20'%20text-anchor='middle'%20transform='translate(60,0)%20scale(-1,1)'%3E%3Ctext%20x='30'%20y='22'%20fill='rgba(58,34,8,0.16)'%3E16%3C/text%3E%3Ctext%20x='30'%20y='23'%20fill='rgba(255,255,255,0.20)'%3E16%3C/text%3E%3Ctext%20x='30'%20y='48'%20fill='rgba(58,34,8,0.16)'%3E19%3C/text%3E%3Ctext%20x='30'%20y='49'%20fill='rgba(255,255,255,0.20)'%3E19%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: top right;
  opacity: 0.5;
  rotate: -0.4deg;
}

.vellum-sheet .plate-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--void-warm);
  margin-top: 0;
}

.vellum-sheet .plate-body,
.vellum-sheet .plate-body p {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--void-deep);
  text-rendering: geometricPrecision;
}

/* Museum caption: anchored bottom of row 1, same space as left margin */

.floating-img {
  float: right;
  max-width: 500px;
  max-height: 400px;
  margin: 0 0 var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  transform: rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
}

/* Vellum photo recipe: floated image inside glass plate.
   Applies border, radius, shadow—the vellum aesthetic—while fitting
   inside a glass container (no rotation, fills available space). */
.floating-img--plate {
  float: none;
  max-width: 100%;
  max-height: none;
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
  width: 100%;
  object-fit: cover;
}

.text-right {
  text-align: right;
  display: block;
}

/* Exploration narrative layout (vellum recipe, no paper/reflets).
   Content flows as one block, photo floated right inside the text.
   Label sits alone at the bottom, full width. */
.sys-explore {
  overflow: hidden;
}

/* No grain texture on this plate (unlike the default glass recipe). */
.sys-explore.glass-plate::before {
  content: none;
}

/* Photo: floated right inside the flowing text, like the vellum sheet. */
.sys-explore-image {
  float: right;
  display: block;
  width: 45%;
  max-width: 500px;
  margin: 0 0 var(--space-3) var(--space-3);
}

.sys-explore-image .floating-img--plate {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(0.1deg);
}

/* Content: single flowing block. */
.sys-explore-content {
  min-width: 0;
}

.sys-explore-text p {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.sys-explore-text p:last-child {
  margin-bottom: 0;
}

/* Footer clears the float so it never overlaps the photo.
   Visual styling comes from .panel-inset--solid on the same element. */
.sys-explore-footer {
  clear: both;
}

.sys-explore-footer p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* Responsive : photo full width, no float on mobile */
@media (max-width: 768px) {
  .sys-explore-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--space-3) 0;
  }
}

/* Glyph Code Display */
.glyph-code {
  font-family: "NMS-Glyphs-Mono", monospace;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* Spectral Sun: colored star with glow */
.spectral-sun {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgb(var(--spectral, 255,255,255)));
  box-shadow: 0 0 8px rgb(var(--spectral, 255,255,255)), 0 0 16px rgb(var(--spectral, 255,255,255)), inset -1px -1px 2px rgba(0,0,0,0.3), inset 0.5px 0.5px 1px rgba(255,255,255,0.6);
}

/* Default yellow sun for BH/Atlas */
.spectral-sun--yellow {
  --spectral: 255, 215, 0;
}

/* Region Page Specific Styles */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Nearby Regions: Three.js scene container.
   Cinema scope aspect ratio (2.39:1) for cinematic experience. */
#treescene {
  position: relative;
  width: 100%;
  aspect-ratio: 2.39 / 1;
  margin: auto;
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: grab;
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, var(--shadow) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--specular) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--specular) 4%, transparent);
}

#treescene:active {
  cursor: grabbing;
}

/* Pin the Three.js canvas to fill #treescene. The renderer sizes the canvas
   once at init from container.clientHeight; if the stylesheet resolves after
   JS runs (slower asset delivery in prod), clientHeight is 0 and JS falls back
   to a fixed 400px, leaving the canvas floating mid-box. Forcing 100% keeps the
   scene (and heatmap layer) filling the box in every environment. */
#treescene > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Toolbar overlay: a quiet glass panel, not the legacy gray box. */
.region-toolbar {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--glass-tint-quiet);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px) saturate(140%);
  user-select: none;
}

.region-toolbar strong {
  color: var(--text);
}

.region-toolbar-text {
  font-size: 0.9em;
}

/* Orientation gizmo: own canvas overlaid bottom-right, above the scene canvas. */
.region-gizmo {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 10;
  cursor: pointer;
}

/* Axis legend keys: colors mirror the 3D AxesHelper (spectral tokens). */
.axis-key {
  font-weight: 700;
}

.axis-x { color: var(--star-red); }
.axis-y { color: var(--star-green); }
.axis-z { color: var(--star-blue); }

.region-procgen-note {
  opacity: 0.7;
}

.nms-font {
  font-family: 'NMS-Glyphs-Mono', monospace;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
}

/* === Table pagination === */
.table-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.table-pagination .btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* === Tables === */
[data-page="home"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="home"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="home"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
}

[data-page="home"] table th:hover {
  color: var(--text-primary);
}

[data-page="home"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="home"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="home"] table .sys-row {
  transition: background 0.15s;
}

[data-page="home"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

[data-page="home"] table td:nth-child(3) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

[data-page="region"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="region"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="region"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
}

[data-page="region"] table th:hover {
  color: var(--text-primary);
}

[data-page="region"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="region"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="region"] table .sys-row {
  transition: background 0.15s;
}

[data-page="region"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

[data-page="region"] table th:nth-child(2),
[data-page="region"] table td:nth-child(2) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Colonnes tables: annule le ratio carre par defaut de sys-section--row */
[data-page="cube"] .sys-section--row .glass-plate {
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
}

/* Block page: two-column tables layout */
[data-page="block"] .sys-section--row .glass-plate {
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
}

/* === Block page tables === */
[data-page="block"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="block"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="block"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-page="block"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="block"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="block"] table .sys-row {
  transition: background 0.15s;
}

[data-page="block"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

/* === Sector page tables === */
[data-page="sector"] .sys-section--row .glass-plate {
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
}

[data-page="sector"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="sector"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="sector"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-page="sector"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="sector"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="sector"] table .sys-row {
  transition: background 0.15s;
}

[data-page="sector"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

/* === Quadrant page heatmap layout (30/70) === */
[data-page="quadrant"] .sys-section--quad-heatmap {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

[data-page="quadrant"] .quad-about-sidebar {
  flex: 0 0 30%;
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
  overflow-y: auto;
  max-height: 600px;
}

[data-page="quadrant"] .quad-heatmap-container {
  flex: 1 1 70%;
}

/* === Clipped heatmap plate (quadrant/sector/cube) ===
   Kill the glass padding so the canvas bleeds to the edges; keep a little breathing
   room only at the bottom for the grid controls. */
.quad-heatmap-container {
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
  padding: 0;
  overflow: hidden;
}

.quad-heatmap-container .hm-container {
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

/* Fill the whole plate: override the shared centered 500x500 default. */
.quad-heatmap-container #hm-heatmap {
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.quad-heatmap-container #controls {
  padding: 0 var(--space-3);
}

/* === Quadrant page tables === */
[data-page="quadrant"] .sys-section--row .glass-plate {
  aspect-ratio: auto;
  display: block;
  justify-content: unset;
}

[data-page="quadrant"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="quadrant"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="quadrant"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-page="quadrant"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="quadrant"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="quadrant"] table .sys-row {
  transition: background 0.15s;
}

[data-page="quadrant"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

/* === Cube page tables === */
[data-page="cube"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="cube"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="cube"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-page="cube"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="cube"] table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="cube"] table .sys-row {
  transition: background 0.15s;
}

[data-page="cube"] table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

/* Pagination nav */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
  font-size: 0.85rem;
}

.pagination .btn[aria-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}

/* Zoom-out navigation cards (3D region scene) */
.zoom-cards-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
  z-index: 10;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.zoom-cards-overlay.visible {
  display: flex;
}

.zoom-card {
  pointer-events: auto;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body, Karla, system-ui, sans-serif);
  color: var(--text, #f6edfa);
  background: var(--glass-tint, rgba(193, 181, 207, 0.1));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.35));
  border-radius: var(--glass-radius, 4px);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturate, 150%));
  box-shadow: inset 0 1px 0 var(--glass-rim-light, rgba(248, 248, 248, 0.1)),
              inset 0 -1px 0 rgba(0, 0, 0, 0.1),
              0 6px 14px rgba(24, 22, 34, 0.5);
  flex-shrink: 0;
}

.zoom-card-icon {
  font-size: 36px;
  line-height: 1;
}

.zoom-card-label {
  font-weight: 600;
  font-size: var(--text-sm, 0.95rem);
}

/* ============================================================
   Galaxy Map (#galaxyscene + .map-toolbar)
   ============================================================ */

#galaxyscene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: auto;
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: grab;
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, var(--shadow) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--specular) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--specular) 4%, transparent);
}

#galaxyscene:active {
  cursor: grabbing;
}

/* Toolbar overlay */
.map-toolbar {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--glass-tint-quiet);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px) saturate(140%);
  font-size: 0.8rem;
  color: var(--text-dim);
  user-select: none;
  max-width: 220px;
}

.map-toolbar__label {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.map-toolbar__level-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.map-toolbar__level-name {
  color: var(--amber-hero);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Segmented level selector */
.map-toolbar__seg {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.map-toolbar__seg-btn {
  padding: 3px 8px;
  font-size: 0.78rem;
  font-family: inherit;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map-toolbar__seg-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--amber-hero) 20%, transparent);
  color: var(--amber-hero);
  border-color: color-mix(in srgb, var(--amber-hero) 50%, transparent);
}

.map-toolbar__seg-btn:hover:not([aria-pressed="true"]) {
  background: var(--glass-tint);
  color: var(--text);
}

/* Layer toggles */
.map-toolbar__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map-toolbar__toggle {
  padding: 3px 7px;
  font-size: 0.76rem;
  font-family: inherit;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map-toolbar__toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--teal-data) 15%, transparent);
  color: var(--teal-data);
  border-color: color-mix(in srgb, var(--teal-data) 40%, transparent);
}

.map-toolbar__toggle:hover:not([aria-pressed="true"]) {
  background: var(--glass-tint);
  color: var(--text);
}

/* Quadrant 3D parallelepiped navigation */
.pscene {
  width: 300px;
  height: 250px;
  perspective: 800px;
  margin: auto;
  user-select: none;
}

.pscene--galaxy {
  transform: scale(1.6);
  margin-top: 60px;
  margin-bottom: 80px;
}

.pcontainer {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(15deg) rotateY(-5deg) translateX(40px) translateY(-5px) translateZ(-5px);
  will-change: transform;
}

.pcontainer--galaxy {
  transform: rotateX(40deg) rotateZ(0deg) rotateY(0deg) translateX(40px) translateY(-5px) translateZ(0px);
}

.pparallelepiped {
  width: 100px;
  height: 100px;
  position: absolute;
  transform-style: preserve-3d;
  cursor: pointer;
  text-decoration: none;
}

.pparallelepiped:hover .pface {
  background: var(--glass-tint-strong);
  border-color: var(--amber-hero);
  opacity: 1;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--amber-hero) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--amber-hero) 25%, transparent);
}

.pface {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid var(--glass-border);
  background: var(--glass-tint-quiet);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--specular) 20%, transparent),
              0 2px 8px color-mix(in srgb, var(--shadow) 40%, transparent);
  opacity: .7;
  outline: 1px solid transparent;
}

.pnw { top: 0;    left: 0;     }
.pne { top: 0;    left: 110px; }
.psw { top: 110px; left: 0;    }
.pse { top: 110px; left: 110px; }
.pcore { top: 85px; left: 80px; }

.pfront {
  transform: translateZ(20px);
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  color: var(--text);
  font-weight: bold;
  font-size: 2rem;
}

.pback   { transform: translateZ(-20px) rotateY(180deg); opacity: 1; }
.ptop    { transform: rotateX(90deg) translateZ(20px); height: 40px; }
.pbottom { transform: rotateX(-90deg) translateZ(80px); height: 40px; }
.pleft   { transform: rotateY(-90deg) translateZ(20px); width: 40px; }
.pright  { transform: rotateY(90deg) translateZ(80px); width: 40px; }

.pcface {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 1000;
  outline: 1px solid transparent;
}

.pparallelepiped:hover .pcface {
  background: var(--glass-tint-strong);
  border-color: var(--amber-hero);
  opacity: 1;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--amber-hero) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--amber-hero) 25%, transparent);
}

.pcfront {
  transform: translateZ(22px);
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  color: var(--text);
  font-weight: bold;
  font-size: 1rem;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-tint);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--specular) 20%, transparent);
  opacity: 1;
}

.pcback {
  transform: translateZ(-20px) rotateY(180deg);
  border-radius: 50%;
  border: 1px solid var(--glass-border-quiet);
  background: var(--glass-tint-quiet);
  opacity: .7;
}

.pctop {
  transform: rotateX(90deg) translateZ(0) translateX(0);
  height: 42px;
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  opacity: .7;
}

.pparallelepiped:hover .pctop {
  background: none;
  opacity: 1;
}

.pscene-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

.pscene-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.pscene-links a:hover {
  color: var(--text);
}

/* Heatmap section */
.hm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

#hm-heatmap {
  width: 500px;
  height: 500px;
  max-width: 100%;
  position: relative;
  margin: auto;
  background: color-mix(in srgb, var(--scrim) 80%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--shadow) 60%, transparent),
              0 0 0 1px var(--glass-border);
}

#controls {
  width: 100%;
  color: var(--text);
}

#gridLevelControls > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
}

#gridLevelControls .btn.active {
  background: color-mix(in srgb, var(--teal-data) 15%, transparent);
  border-color: var(--teal-data);
  color: var(--teal-data);
}

/* Toggle switch */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
}

.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.hm-slider {
  display: inline-block;
  width: 38px;
  height: 22px;
  background: var(--glass-border);
  border-radius: 22px;
  position: relative;
  transition: background var(--transition-med);
}

.hm-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  transition: transform var(--transition-med), background var(--transition-med), border-color var(--transition-med);
}

.toggle-switch input[type="checkbox"]:checked + .hm-slider {
  background: color-mix(in srgb, var(--teal-data) 40%, transparent);
}

.toggle-switch input[type="checkbox"]:checked + .hm-slider::before {
  transform: translateX(16px);
  background: var(--teal-data);
  border-color: var(--teal-data);
}

/* Hint text bottom-right */
.map-hint {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-3);
  z-index: 10;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
  line-height: 1.5;
  text-align: right;
}

/* === Galaxy Map page tables === */
[data-page="galaxymap"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

[data-page="galaxymap"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="galaxymap"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-page="galaxymap"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="galaxymap"] table tr:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="galaxymap"] table tr {
  transition: background 0.15s;
}

[data-page="galaxymap"] table tr:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
}

/* ===== SHARE MODAL ===== */
.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  padding: var(--space-4);
}

.share-modal-content {
  max-width: 500px;
  width: 100%;
  padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--glass-border-quiet);
  padding-bottom: var(--space-4);
}

.share-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
}

.share-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--glass-radius);
  transition: all 0.2s;
}

.share-modal-close:hover {
  background: color-mix(in srgb, var(--rouge-atlas) 15%, transparent);
  color: var(--text);
}

.share-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.share-image-box {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--glass-radius);
  background: color-mix(in srgb, var(--void-deep) 50%, transparent);
}

.share-image-preview {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: contain;
}

.share-url-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: var(--space-4);
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border-quiet);
  box-shadow: var(--glass-rim), inset 0 1px 0 color-mix(in srgb, var(--specular) 6%, transparent);
}

.share-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.share-url-input {
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  border: 1px solid var(--glass-border-quiet);
  color: var(--text);
  padding: var(--space-3);
  border-radius: var(--glass-radius);
  font-family: monospace;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.share-url-input:focus {
  outline: none;
  border-color: var(--amber-hero-dim);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber-hero) 20%, transparent);
}

.share-url-input.js-copied {
  border-color: var(--amber-hero);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber-hero) 25%, transparent);
}

.share-copy-btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.share-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.share-modal-actions .btn {
  flex: 1;
}

/* ===== SPATIAL NOTIFICATION ===== */
.spatial-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: color-mix(in srgb, var(--void-mid) 80%, transparent);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border-quiet);
  font-size: 0.95rem;
  z-index: 9999;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideInUp 0.3s ease-out;
}

/* ============================================================
   SURVEY FORM COMPONENTS
   ============================================================ */

.survey-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .survey-layout {
    grid-template-columns: 1fr;
  }
}

.survey-sidebar {
  position: static;
}

.survey-sidebar .pizzagalaxy,
.survey-sidebar .scene {
  width: 280px;
  height: 280px;
}

.survey-form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.survey-fieldset.glass-plate {
  aspect-ratio: auto;
  justify-content: flex-start;
  margin-bottom: var(--space-2);
}

.survey-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.survey-fieldset h2 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--amber-hero);
  margin: 0 0 var(--space-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.survey-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.survey-label input[type="text"],
.survey-label input[type="url"],
.survey-label input[type="number"],
.survey-label textarea,
.survey-label select {
  width: 100%;
}

.survey-label small {
  font-size: 0.8rem;
  color: var(--text-dim);
  opacity: 0.7;
}

.survey-required {
  color: var(--amber-hero);
  font-weight: 600;
}

.survey-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-dim);
  transition: all var(--transition-fast);
  background: color-mix(in srgb, var(--void-deep) 60%, transparent);
}

.radio-option:hover {
  border-color: var(--amber-hero);
  color: var(--text);
}

.radio-option input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--amber-hero);
}

.radio-option input[type="radio"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.radio-option input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.radio-option:has(input[type="radio"]:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: var(--space-1);
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--amber-hero);
}

.checkbox-label input[type="checkbox"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkbox-label:has(input[type="checkbox"]:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.number-input {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
}

.number-input input[type="number"] {
  width: 60px;
  text-align: center;
  border-radius: 0;
}

.number-input .decrement,
.number-input .increment {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--void-deep) 80%, transparent);
  border: 1px solid var(--glass-border-quiet);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
  border-radius: 0;
}

.number-input .decrement {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.number-input .increment {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.number-input .decrement:hover,
.number-input .increment:hover {
  background: color-mix(in srgb, var(--amber-hero) 20%, transparent);
  border-color: var(--amber-hero);
  color: var(--text);
}

.date-picker {
  display: flex;
  gap: var(--space-1);
}

.date-picker select {
  flex: 1;
}

.star-color-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: var(--space-1);
}

.star-color-yellow { background: var(--star-yellow, #f5d76e); }
.star-color-blue   { background: var(--star-blue, #6ea8f5); }
.star-color-red    { background: var(--star-red, #f56e6e); }
.star-color-green  { background: var(--star-green, #6ef5a0); }
.star-color-purple { background: var(--star-purple, #a06ef5); }

.survey-subgroup {
  border-left: 2px solid var(--glass-border-quiet);
  padding-left: var(--space-2);
  margin: var(--space-2) 0;
}

.survey-infoboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.survey-infobox {
  font-size: var(--text-sm);
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.survey-infobox__icon {
  color: var(--amber-hero);
  flex-shrink: 0;
}

.survey-known-data {
  margin-top: var(--space-2);
}

.survey-glyph {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--amber-hero);
}

.survey-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.survey-hidden {
  display: none;
}

.survey-honeypot {
  display: none;
}

/* Locked/prefilled fields (edit form) */
.survey-field-locked,
input[readonly].survey-field-locked,
select.survey-field-locked {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--glass-border-quiet) !important;
  background: color-mix(in srgb, var(--void-deep) 90%, transparent) !important;
}

input[disabled],
select[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

textarea[name="guide"] {
  min-height: 120px;
  resize: vertical;
}

/* Error states set by surveyor.js */
.is-invalid {
  border-color: var(--rouge-atlas, #c0392b) !important;
}

.has-error legend,
.has-error .survey-label:first-child {
  color: var(--rouge-atlas, #c0392b);
}

.error-message {
  color: var(--rouge-atlas, #c0392b);
  font-size: 0.8rem;
  margin-top: var(--space-1);
}

.warning {
  color: var(--amber-hero);
  font-size: 0.85rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--amber-hero);
  border-radius: var(--radius-sm);
  margin: var(--space-1) 0;
}

.blur {
  opacity: 0.3;
  pointer-events: none;
}

/* Survey glyph font */
.nms-font {
  font-family: 'NMS-Glyphs-Mono', monospace;
}

/* ==========================================================================
   QUALITY TIERS - optimisation pour machines faibles.
   Pose par /assets/js/quality-bootstrap.js via html[data-quality] avant paint.

   "high" = le CSS normal : n'override rien, les defaults :root s'appliquent
   (blur 24px, saturate 150%, ombres a plusieurs couches, glow interne).
   medium et low degradent depuis la.

   Cout GPU sur machine faible, du plus lourd au plus leger :
   1. backdrop-filter (blur + saturate) : passe offscreen par surface verre.
      blur(0px) NE retire PAS ce cout : le compositeur alloue quand meme la
      couche. Seul `backdrop-filter: none` supprime la passe (fait en low).
   2. box-shadow multi-couches (rayons jusqu'a 48px) recalcules au scroll.
   3. glow interne (inset 60px) : pure decoration.

   Presque tout passe par des tokens var(), donc medium se fait au token pres.
   low doit en plus annuler la propriete backdrop-filter (les tokens ne
   peuvent pas la retirer) : override groupe sur les 12 selecteurs reels.
   ========================================================================== */

/* MEDIUM : on garde le look, on coupe ~moitie du cout. Tokens seuls. */
html[data-quality="medium"] {
  --glass-blur: 8px;          /* 24 -> 8 : cout du flou ~lineaire au rayon */
  --glass-saturate: 120%;     /* 150 -> 120 : moins cher, reste teinte */

  /* Ombres : on collapse les couches lourdes en une seule plus legere */
  --glass-shadow: 0 6px 16px color-mix(in srgb, var(--shadow) 80%, transparent);
  --glass-shadow-hero: 0 8px 24px color-mix(in srgb, var(--shadow) 75%, transparent);
  --glow-inner: none;         /* glow interne 60px : decoratif, on coupe */
}

/* LOW : on supprime la passe de compositing backdrop-filter.
   Translucide conserve (choix valide), mais sans flou : on retire la
   propriete backdrop-filter, pas juste blur(0). */
html[data-quality="low"] {
  --glass-blur: 0px;
  --glass-saturate: 100%;

  /* Ombre unique a plat, ni glow ni ombre hero */
  --glass-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 70%, transparent);
  --glass-shadow-hero: 0 2px 8px color-mix(in srgb, var(--shadow) 70%, transparent);
  --glow-inner: none;
  --glass-rim: inset 0 1px 0 color-mix(in srgb, var(--amber-hero) 15%, transparent);

  /* Sans flou, le fond passe net derriere le verre : on densifie les tints
     (plus de couleur qu'en high) pour garder la lisibilite, tout en gardant
     de la transparence reelle (le verre ne devient pas un panneau opaque).
     High = 30/45/18% de couleur ; low = 55/68/40%, le reste transparent. */
  --glass-tint:        color-mix(in srgb, var(--glass) 55%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--glass) 68%, transparent);
  --glass-tint-quiet:  color-mix(in srgb, var(--glass) 40%, transparent);
}

/* low : retrait de la propriete backdrop-filter (les tokens ne l'atteignent
   pas). Liste des 12 selecteurs qui la posent reellement dans ce fichier. */
html[data-quality="low"] .specimen-header,
html[data-quality="low"] section,
html[data-quality="low"] .glass-plate,
html[data-quality="low"] .sidebar-nav,
html[data-quality="low"] .doc-sections,
html[data-quality="low"] .site-head,
html[data-quality="low"] .site-foot,
html[data-quality="low"] .region-toolbar,
html[data-quality="low"] .zoom-card,
html[data-quality="low"] .map-toolbar,
html[data-quality="low"] .share-url-box,
html[data-quality="low"] .spatial-notification {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* low : effets vellum (decoratifs, parmi les plus chers du fichier).
   - filter: url(#glass-vellum) -> passe SVG souvent non acceleree GPU
   - filter: blur(3/5px) sur les glares speculaires
   - mix-blend-mode: multiply -> groupe d'isolation/compositing
   On neutralise tout le grain vellum sur ce tier (medium le garde). */
html[data-quality="low"] .vellum-sheet::before {
  filter: none;
  mix-blend-mode: normal;
}
html[data-quality="low"] .vellum-scene::before,
html[data-quality="low"] .vellum-glare {
  filter: none;
}

/* low : animations en BOUCLE INFINIE seulement (repaint continu, jamais au
   repos). Les apparitions a duree finie (modales, notifications) restent. */
html[data-quality="low"] .breathing {
  animation: none;
}

/* ============================================================= */
/* HOME (page_id="home") : hero photo + side-card, destinations  */
/* 2/3 + 1/3, satellites a glyphe. Reutilise les tokens glass.   */
/* ============================================================= */

/* 1 · HERO : une seule plaque glass, photo a gauche + carte a droite.
   Traite comme un glass-plane standard : contenu flex, PAS width:100%.
   La plaque elle-meme (glass-plate) gere l'espace, pas le flex. */
.home-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-2);
  align-items: stretch;
  overflow: hidden;
}

/* Photo container: prend la largeur proportionnelle. */
.home-hero-photo {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.home-hero-photo .floating-img--plate {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  rotate: -0.2deg;
}

.home-hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
}

.home-hero-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text);
}

.home-hero-card .sys-hero-actions {
  margin-top: auto;
}

/* 3 · DESTINATIONS : piece maitresse 2/3, satellites 1/3. Pas de carre. */
.home-destinations {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}


/* Carte satellite façon KPI (cf. .sys-rarity) : colonne badges / nom / prose,
   du haut vers le bas. */
.home-satellite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
  min-height: 120px;
  transition: border-color 0.2s ease;
}

/* Hover (ces 3 satellites uniquement) : seul le liseré s'éclaircit. */
.home-satellite:hover {
  border-color: color-mix(in srgb, var(--specular) 45%, transparent);
}

/* Badges en haut, sur une ligne (wrap si étroit). Rôle du plate-label dans un KPI. */
.home-satellite-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-self: stretch;
}

/* Nom au milieu : la "valeur" du KPI, en display, plus gros que le reste.
   Largeur bornée à la carte : on autorise 2 lignes (puis ellipse) plutôt que
   de couper un nom long trop tôt, et on casse les mots qui débordent. */
.home-satellite-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Prose en bas du KPI : poussée tout en bas par margin-top auto (le nom reste
   au milieu, les badges en haut). Libellé discret. */
.home-satellite-prose {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.home-destinations-all {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
}

/* Pièce maîtresse : photo hero sans cadre ni vellum */
.home-feature-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


.home-feature-photo .floating-img--plate {
  height: auto;
  rotate: 0.2deg;
}

.home-feature-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-feature-data h2 {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--amber-hero);
  border-bottom: 1px solid var(--glass-border-quiet);
  padding-bottom: var(--space-2);
}

.home-feature-data .sys-hero-badges {
  margin-bottom: var(--space-1);
}

.home-feature-data .btn {
  width: fit-content;
}

/* Responsive : tout en pile sous ~860px (satellites pleine largeur). */
@media (max-width: 860px) {
  .home-hero,
  .home-destinations {
    grid-template-columns: 1fr;
  }
}

.systems {
  margin-bottom: var(--space-4);
}

/* Recently visited : meme recette zebra que la table region */
#recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#recent-table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

#recent-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#recent-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

#recent-table .sys-row {
  transition: background 0.15s;
}

#recent-table .sys-row:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

#recent-table .sys-row:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
}

.recent-cta {
  margin-top: var(--space-4);
  text-align: right;
}

/* Quick Warp : 4 panels inset standard (recette glass-test) */
.quickwarp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.quickwarp-grid a {
  text-decoration: none;
  color: inherit;
  /* Rebord transparent au repos : ne change pas le rendu initial, mais donne au
     hover une bordure 1px à éclaircir (cf. .home-satellite, qui l'a via glass-plate). */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}

/* Hover des 4 quick warp : même nature que les satellites, seul le liseré s'éclaircit. */
.quickwarp-grid a:hover {
  border-color: color-mix(in srgb, var(--specular) 45%, transparent);
}

@media (max-width: 768px) {
  .quickwarp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== CARTOGRAPHER'S DESK ===== */
/* Two side-by-side gap cards: systems worth the trip but missing a page in their
   file (no planet census / no charted black-hole exit). An invitation to survey. */
.desk-gaps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* panel-inset (solid, non-glass) so the cards don't stack glass-on-glass inside
   the quiet desk plate (DA Rule #2). Here we only add the link layout + hover. */
.desk-gap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.desk-gap:hover {
  border-color: color-mix(in srgb, var(--specular) 45%, transparent);
}

.desk-gap-prose {
  margin: 0;
  flex: 1 1 auto;
}

.desk-gap-cta {
  font-weight: 600;
  color: var(--amber-hero);
}

@media (max-width: 768px) {
  .desk-gaps {
    grid-template-columns: 1fr;
  }
}

/* ===== PORTAL GLYPH DECODER ===== */

.glyphsblock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.glyph-grid {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(16, 1fr);
  gap: 0;
  width: 80%;
  margin: 0 auto;
}

.glyph-row {
  display: contents;
}

.glyph-symbols div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'NMS-Glyphs-Mono', monospace !important;
  font-size: 2.5rem;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  user-select: none;
  position: relative;
}

.glyph-symbols div::after {
  content: attr(data-id);
  display: block;
  font-size: 0.65rem;
  font-family: var(--font-body);
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 2px;
  line-height: 1;
}

.glyph-0:hover,
.glyph-1:hover,
.glyph-2:hover,
.glyph-3:hover,
.glyph-4:hover,
.glyph-5:hover,
.glyph-6:hover,
.glyph-7:hover,
.glyph-8:hover,
.glyph-9:hover,
.glyph-A:hover,
.glyph-B:hover,
.glyph-C:hover,
.glyph-D:hover,
.glyph-E:hover,
.glyph-F:hover {
  transform: scale(1.6);
  text-shadow: 0 0 10px rgba(81, 124, 216, 0.6), 0 0 20px rgba(81, 124, 216, 0.8), 0 0 30px rgba(81, 124, 216, 1);
  color: rgba(255, 255, 255, 1);
  filter: brightness(1.5) saturate(1.5);
}

.glyph-0:active,
.glyph-1:active,
.glyph-2:active,
.glyph-3:active,
.glyph-4:active,
.glyph-5:active,
.glyph-6:active,
.glyph-7:active,
.glyph-8:active,
.glyph-9:active,
.glyph-A:active,
.glyph-B:active,
.glyph-C:active,
.glyph-D:active,
.glyph-E:active,
.glyph-F:active {
  transform: scale(0.9);
  text-shadow: 0 0 15px rgba(81, 124, 216, 0.8), 0 0 30px rgba(81, 124, 216, 1), 0 0 45px rgba(81, 124, 216, 1);
  filter: brightness(2) saturate(2);
  color: rgba(255, 255, 255, 1);
}

.clickedglyphs {
  visibility: hidden;
}

.glyph-display-container {
  position: relative;
}

#clickedglyphsvue {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  position: relative;
}

#clickedglyphsvue .glyph-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
}

#clickedglyphsvue .glyph-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

#clickedglyphsvue .glyph-row span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: 'NMS-Glyphs-Mono', monospace !important;
  font-size: 4rem !important;
  color: var(--glass-text);
}

.info-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  padding-top: var(--space-2);
}

.info-row span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 0.6rem;
  color: var(--text-muted);
  border-top: 3px solid var(--glass-border-quiet);
  padding: var(--space-1) 0;
}

#glyphinfoP {
  grid-column: span 1;
}

#glyphinfoSSI {
  grid-column: span 3;
}

#glyphinfoYY {
  grid-column: span 2;
}

#glyphinfoZZZ {
  grid-column: span 3;
}

#glyphinfoXXX {
  grid-column: span 3;
}

.third-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  padding-top: var(--space-2);
}

#glyphinfoALL {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.glyph-display-container {
  position: relative;
}


@keyframes blink-cursor {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

#clickedglyphsvue.is-redirecting {
  animation: pulse-redirect 0.3s ease-out forwards;
}

@keyframes pulse-redirect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

@media (max-width: 768px) {
  .glyph-grid {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }

  .glyph-symbols div {
    font-size: 1.5rem;
  }

  #clickedglyphsvue .glyph-row span {
    font-size: 2.5rem !important;
  }
}

/* ===== MY GLYPHS PAGE ===== */
[data-page="myglyphs"] .glass-plate--strong {
  margin-top: var(--space-6);
}

[data-page="myglyphs"] .myglyphs-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-4);
  width: 100%;
}

[data-page="myglyphs"] .myglyphs-sidebar {
  display: flex;
  flex-direction: column;
}

[data-page="myglyphs"] .btn {
  margin: var(--space-1) 0;
}

[data-page="myglyphs"] .myglyphs-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

[data-page="myglyphs"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: var(--space-3);
}

[data-page="myglyphs"] table thead tr {
  border-bottom: 1px solid var(--glass-border-quiet);
}

[data-page="myglyphs"] table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
}

[data-page="myglyphs"] table th:hover {
  color: var(--text);
}

[data-page="myglyphs"] table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border-quiet) 40%, transparent);
  vertical-align: middle;
}

[data-page="myglyphs"] table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--void-mid) 20%, transparent);
}

[data-page="myglyphs"] table tbody tr {
  transition: background 0.15s;
}

[data-page="myglyphs"] table tbody tr:hover {
  background: color-mix(in srgb, var(--amber-hero) 8%, transparent);
  cursor: pointer;
}

[data-page="myglyphs"] table th:nth-child(2),
[data-page="myglyphs"] table td:nth-child(2) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

[data-page="myglyphs"] .star-bookmark,
[data-page="myglyphs"] .star-bookmarked,
[data-page="myglyphs"] .delete-entry {
  background: transparent;
  border: none;
  color: var(--amber-hero);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

[data-page="myglyphs"] .star-bookmark:hover,
[data-page="myglyphs"] .star-bookmarked:hover,
[data-page="myglyphs"] .delete-entry:hover {
  color: var(--teal-data);
  transform: scale(1.15);
}

[data-page="myglyphs"] .star-bookmarked {
  color: var(--amber-hero);
}

[data-page="myglyphs"] .table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

[data-page="myglyphs"] .table-pagination span {
  font-size: 0.9rem;
  color: var(--text-dim);
  min-width: 120px;
  text-align: center;
}

/* Storage Gauge */
[data-page="myglyphs"] #jauge {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

[data-page="myglyphs"] .jauge-title {
  font-size: var(--text-md);
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

[data-page="myglyphs"] .jauge-container {
  display: flex;
  flex-direction: column;
}

[data-page="myglyphs"] .jauge-bar {
  height: 40px;
  background: color-mix(in srgb, var(--void-mid) 40%, transparent);
  border: 1px solid var(--glass-border-quiet);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

[data-page="myglyphs"] .jauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-data), var(--amber-hero));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--amber-hero) 20%, transparent);
  transition: width 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

[data-page="myglyphs"] .jauge-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--specular) 25%, transparent) 0%,
    transparent 50%,
    color-mix(in srgb, var(--shadow) 40%, transparent) 100%);
}

[data-page="myglyphs"] .jauge-label {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   Background gallery (/backgrounds)
   Gallery-specific: no existing glass primitive covers a media
   card grid + colour filter. Existing tokens only.
   ============================================================ */

/* KPI row: reuses .glass-plate; layout + centering only */
.bg-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.bg-kpi { text-align: center; }

/* Colour filter row */
.color-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-4);
}
.color-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.color-filter__btn:hover {
  color: var(--text);
  border-color: var(--amber-hero);
}
.color-filter__btn--active {
  color: var(--amber-hero);
  border-color: var(--amber-hero);
  background: var(--amber-hero-ghost);
}
.color-filter__btn--empty {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.color-filter__count {
  margin-left: var(--space-1);
  opacity: 0.6;
  font-feature-settings: var(--font-numeric);
}
.color-filter__dot,
.color-dot {
  display: inline-block;
  border-radius: 2px;
  flex-shrink: 0;
}
.color-filter__dot { width: 12px; height: 12px; margin-right: var(--space-1); }
.color-dot { width: 10px; height: 10px; margin-right: var(--space-0-5); }

/* Card grid */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Card reuses .glass-plate--quiet; override padding so image is flush */
.bg-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: opacity var(--transition-fast);
}
.bg-card.is-hidden { display: none; }

.bg-thumb-link {
  display: block;
  overflow: hidden;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  transition: opacity var(--transition-fast);
}
.bg-thumb-link:hover { opacity: 0.85; }
.bg-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
}
.bg-thumb--missing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--glass-tint-quiet);
  color: var(--text-dim);
  font-size: var(--text-xs);
}

.bg-card__info { padding: var(--space-2); }
.bg-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-0-5);
  color: var(--text);
}
.bg-card__author {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin: 0 0 var(--space-1);
}
.bg-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dim);
}
.bg-card__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--glass-tint-quiet);
}