:root{
  --bg:#080d1a; --ink:#e8eefc; --muted:#8aa0c8; --panel:#0e1730;
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
/* tone lives in the type: a geological display serif for headings + name-elements only */
h1,h2,.element{font-family:"Fraunces",Georgia,serif;letter-spacing:.01em}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:24px;align-items:baseline;
  padding:14px 22px;background:rgba(8,13,26,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid #1b2747}
.topbar h1{font-size:18px;margin:0;letter-spacing:.3px}
.tabs{display:flex;gap:8px}
.tab{background:transparent;color:var(--muted);border:1px solid #243355;
  border-radius:999px;padding:6px 16px;cursor:pointer;font-size:14px}
.tab.is-active{color:var(--ink);border-color:#3a6df0;background:#13203f}
.worlds{display:flex;gap:8px}
.world{background:transparent;color:var(--muted);border:1px solid #243355;
  border-radius:999px;padding:6px 16px;cursor:pointer;font-size:14px}
.world.is-active{color:var(--ink);border-color:#3a6df0;background:#13203f}

/* v2 subnav: country tabs (left) + lens toggle (right) */
.subnav{position:sticky;top:53px;z-index:4;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:8px 22px;flex-wrap:wrap;
  background:rgba(8,13,26,.82);backdrop-filter:blur(8px);border-bottom:1px solid #1b2747}
.lens-toggle{display:flex;gap:.25rem}
.lens{background:transparent;color:var(--muted);border:1px solid #243355;
  border-radius:999px;padding:6px 16px;cursor:pointer;font-size:14px}
.lens.is-active{color:var(--ink);border-color:#3a6df0;background:#13203f}

/* ---- composed two-column stage: map (left) + story panel (right) ----------
   The map and the story are ONE unit. The panel holds the step card + the
   ‹ count › nav as one attached, vertically-centred block that never clips. */
:root{ --chrome:101px; }            /* topbar (~53) + subnav (~48) sticky height */
/* Grid is centred and only as wide as it needs to be: a ~620px map box + a 340px
   panel. This keeps the narrow country and the story panel close together rather
   than stranding them at opposite edges of a 1200px row (the central void). */
.story{width:max-content;max-width:100%;margin:0 auto;padding:8px 22px 0;
  display:grid;grid-template-columns:620px 340px;gap:28px;align-items:stretch}

.map-stage{position:sticky;top:var(--chrome);height:calc(100vh - var(--chrome) - 16px);
  margin:0;display:flex;flex-direction:column;justify-content:center}
#map{width:100%;flex:1 1 auto;min-height:0;display:block}
#glow-canvas{
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;     /* zoom transform applied from top-left, matches d3.zoomIdentity */
  pointer-events:none;       /* events go to the container (a later container-listener task);
                                the container hit-tests dots-then-provinces and the SVG draws beneath */
}
.map-caption{color:#cfdcff;font-size:14px;min-height:1.4em;margin-top:6px}

/* right-hand story panel: sticky, viewport-bounded, scrolls internally if a long
   history overflows — so the card + nav are ALWAYS fully on screen, never clipped. */
.panel{position:sticky;top:var(--chrome);height:calc(100vh - var(--chrome) - 16px);
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.step-body{overflow:auto;max-height:calc(100% - 56px)}

/* the step card */
.step-body .card{background:var(--panel);border:1px solid #1b2747;border-radius:14px;
  padding:22px 22px;text-align:left}
.step-body .element{font-size:30px;font-weight:600;margin:0 0 4px;line-height:1.1}
.step-body .gloss{color:var(--muted);font-size:12px;margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.7px}
.step-body .history{margin:0;color:#cfdcff;font-size:15px;line-height:1.55}

/* the ‹ count › nav, owned by the panel (no more edge-floating buttons) */
.step-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.step-btn{font-size:1.3rem;line-height:1;background:#13203f;color:var(--ink);
  border:1px solid #243355;border-radius:10px;padding:.35rem .8rem;cursor:pointer;
  transition:border-color .15s,background .15s}
.step-btn:hover:not(:disabled){border-color:#3a6df0;background:#16264a}
.step-btn:disabled{opacity:.3;cursor:default}
.step-count{font-size:.8rem;color:var(--muted);min-width:4.5ch;text-align:center;
  font-variant-numeric:tabular-nums}

/* unique-by-province drill + family legend inside the right panel card */
.step-body .drill{list-style:none;margin:.4rem 0 0;padding:0;font-size:.8rem;color:#cfe0ff}
.step-body .drill li{padding:0}
.drill-el{display:flex;align-items:center;gap:7px;width:100%;background:transparent;
  border:1px solid transparent;border-radius:8px;padding:.18rem .4rem;cursor:pointer;
  color:inherit;font:inherit;font-size:.8rem;text-align:left;
  transition:border-color .15s,background .15s}
.drill-el:hover{border-color:#3a6df0}
.drill-el.is-on{border-color:#3a6df0;background:#13203f}
.fam-legend{display:flex;flex-direction:column;gap:5px;margin-top:14px;
  padding-top:12px;border-top:1px solid #1b2747}
.fam-chip,.stock-chip,.terrain-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:#b9c8e8;
  background:transparent;border:1px solid transparent;border-radius:999px;
  padding:3px 8px;cursor:pointer;text-align:left;font:inherit;font-size:12px;
  transition:border-color .15s,background .15s,opacity .15s}
.fam-chip:hover,.stock-chip:hover,.terrain-toggle:hover{border-color:#3a6df0}
.fam-chip.is-on,.stock-chip.is-on{border-color:#3a6df0;background:#13203f;color:#e8eefc}
.fam-dot{width:9px;height:9px;border-radius:50%;flex:none}
/* terrain layer-toggle chips: on by default (full opacity, bordered swatch),
   dimmed when toggled off. */
.terrain-toggles{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.terrain-toggle{border-color:#1b2747}
.terrain-toggle.is-off{opacity:.4}

/* stock-view stepper: a drill-in CTA on each stock card, and a back-to-stocks
   pill when drilled into a stock's families. */
.drill-into{display:inline-block;margin-top:10px;font-size:12px;color:#cfe0ff;
  background:transparent;border:1px solid #2a3a5e;border-radius:8px;
  padding:5px 11px;cursor:pointer;font:inherit;font-size:12px;
  transition:border-color .15s,background .15s}
.drill-into:hover{border-color:#3a6df0;background:#13203f}
.back-stocks{display:inline-block;margin-bottom:10px;font-size:12px;color:#9fb3dc;
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:3px 8px;cursor:pointer;font:inherit;font-size:12px;
  transition:color .15s,border-color .15s}
.back-stocks:hover{color:#e8eefc;border-color:#3a6df0}

.footnote{max-width:var(--maxw);margin:32px auto 40px;padding:0 22px;color:var(--muted)}
.footnote .src{font-size:13px}

/* narrow desktop / tablet (781–1040px): the fixed 620+340 grid would overflow,
   so let the map column flex down while the panel keeps its width. */
@media (min-width:781px) and (max-width:1040px){
  .story{width:auto;grid-template-columns:minmax(0,1fr) 320px;gap:22px}
}

/* mobile: redesign, not shrink (KB rule). Single column; the MAP IS STICKY at the
   top (~45dvh) so it never scrolls away while the card scrolls beneath it; nav
   compresses to two slim sticky rows; chips become one scroll-snap row. */
@media (max-width:780px){
  :root{ --chrome:88px; }            /* topbar (~44) + subnav (~44) on mobile */
  .topbar{padding:8px 12px;gap:12px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .topbar h1{font-size:clamp(14px,4.2vw,18px);white-space:nowrap}
  .worlds{flex:none}
  .subnav{position:sticky;top:44px;padding:6px 12px;flex-wrap:nowrap;gap:.5rem;
    overflow-x:auto;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .tabs,.lens-toggle{flex:none}
  .world,.tab,.lens{padding:8px 14px;min-height:40px}
  .story{width:auto;grid-template-columns:1fr;gap:14px;padding:0 12px;align-items:start}
  .map-stage{position:sticky;top:var(--chrome);z-index:3;height:45dvh;
    background:var(--bg);padding-top:6px}
  .panel{position:relative;top:0;height:auto;justify-content:flex-start;
    margin-bottom:8px}
  .step-body{overflow:visible;max-height:none}
  .step-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:none}
  .step-chips::-webkit-scrollbar{display:none}
  .chip{flex:none;scroll-snap-align:center;min-height:36px}
  .step-btn{min-height:44px;min-width:48px}
  .fam-chip,.stock-chip,.terrain-toggle,.drill-el{min-height:40px}
  .drill-into,.back-stocks{min-height:40px}
}

/* substrate lens: provinces are outline-only by default; JS lightens them to a
   neutral grey-blue on hover/selection (no score-encoded hue — meaning is in the dots). */
.provinces path{transition:fill-opacity .12s ease}

/* shared cursor-following tooltip (replaces native SVG <title>: instant,
   styled, and a tap pins it — native titles never fire on touch) */
.tip{position:fixed;display:none;pointer-events:none;z-index:10;
  background:#0e1730;color:#e8eefc;border:1px solid #2c3f6b;border-radius:8px;
  padding:5px 10px;font-size:13px;max-width:260px;box-shadow:0 4px 18px #0009}

/* on-map name label for the selected/stepped province */
.prov-label text{font-family:"Fraunces",Georgia,serif;font-size:14px;fill:#e8eefc;
  text-anchor:middle;paint-order:stroke;stroke:#080d1a;stroke-width:3px;
  pointer-events:none}

/* step chips: the story's clickable table of contents */
.step-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:transparent;
  color:var(--muted);border:1px solid #243355;border-radius:999px;
  padding:3px 10px;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s}
.chip:hover{border-color:#3a6df0;color:var(--ink)}
.chip.is-active{color:var(--ink);border-color:#3a6df0;background:#13203f}
.chip-dot{width:8px;height:8px;border-radius:50%;flex:none}

/* Name Inspector panel (Task 6): rendered into #step-body on a glow-dot click */
.insp .label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7f8aa3; margin-top:14px; }
/* Same muted uppercase house style for the bare .label/.dens used by the
   features-lens truth card (a .card stepper panel, not an .insp inspector). */
.label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7f8aa3; margin-top:14px; }
.dens { margin-top:4px; }
.insp-frag { font-family:"Fraunces",serif; font-size:26px; margin:2px 0; }
.insp-gloss { font-size:15px; color:#9aa3b2; font-family:"Inter",sans-serif; }
.insp-lead, .insp-theory { font-size:14px; line-height:1.55; }
.dens-row { display:flex; align-items:center; gap:8px; font-size:13px; margin:3px 0; }
.dens-row > span:first-child { flex:0 0 120px; }
.dens-bar { height:9px; background:#22d3ff; border-radius:3px; min-width:2px; }
.dens-n { color:#9aa3b2; }
.insp-back { margin-top:14px; background:none; border:1px solid #2a2f3a; color:#cdd6e6;
  padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px; }
.insp-back:hover { border-color:#6f8fd8; }

/* Features lens (Task 8) — categorical hue encoding of each named feature by
   truthfulness (truthful is true/false/null, NOT a continuous value ramp). The
   feature DOTS render on the glow canvas now (Task 5: featureColor); these are the
   inline legend swatches in the truth-step card. */
.f-key { display:inline-block; padding:0 6px; border-radius:4px; font-weight:600; color:#0d1426; }
.f-true-key { background:#ffd27a; }
.f-transplant-key { background:#8b97b3; color:#0d1426; }

/* Step-2 spread view (Task 9): radius ring + echoing settlements. */
.spread-ring { fill: none; stroke: #ffd27a; stroke-dasharray: 3 3; opacity: 0.5; vector-effect: non-scaling-stroke; }
.s-echo { fill: #ffd27a; }       /* echoing town: bright, small — pops over the dim feature dots */

/* Frame-bar: stepped-zoom presets (whole / region / cluster), Task 5. */
.frame-bar { display: flex; gap: 6px; margin: 8px 0; }
.frame-chip { background: #1a2236; color: #aeb9d4; border: 1px solid #2a3551;
  border-radius: 999px; padding: 4px 12px; font: 500 12px/1 Inter, sans-serif; cursor: pointer; }
.frame-chip.is-active { background: #2a3a64; color: #eaf0ff; border-color: #3d5188; }

/* Physical terrain: quiet ground, never figure. Desaturated, low-luminance. */
.terrain { pointer-events: none; }
.tr-water { fill: #16243a; stroke: none; }
.tr-coast { fill: none; stroke: #2a3a55; stroke-width: 0.6px; opacity: 0.5; vector-effect: non-scaling-stroke; }
.tr-river { fill: none; stroke: #2f4a6b; stroke-width: 0.5px; opacity: 0.45; vector-effect: non-scaling-stroke; }

/* Cross-page navigation: islands link in footer (Task 8). */
.islands-link { margin:.2rem 0 .6rem; font-size:1rem; }
.islands-link a { color:#ffd166; text-decoration:none; font-weight:500; }
.islands-link a:hover { text-decoration:underline; }