/* Standalone graph/mind-map styling. Mirrors the look of the baked map in
   MapBuilder.swift so the lifted engine renders identically. */
* { box-sizing: border-box; }
:root { --map-nav-h: 36px; --map-title-h: 130px; }
/* Root font-size (and the whole `.site-nav` look) come from the shared site.css, loaded first —
   so the map inherits any future nav change automatically instead of drifting. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #fafaf7; }
/* site.css paints a full-page noise texture via body::before; the fullscreen map doesn't want it. */
body::before { content: none; }

/* The map's own numbered, hue-coloured page title ("11.4 Map") — the full-bleed analogue of
   every other back-matter page's `subject-header`. Text + background are set at runtime from
   graph.json (see map.js `build`). */
.map-title {
  position: fixed; top: var(--map-nav-h); left: 0; right: 0; height: var(--map-title-h); z-index: 15;
  /* Mirror the content pages' chapter title (`.subject-header` h1): Cormorant Garamond,
     weight 300, line-height 1.1, with the same 1.5rem of space above the title. */
  display: flex; align-items: flex-start; padding: 1.5rem 3rem 1.25rem;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; color: #000;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Nav bar: all styling (flex layout, icons, title font, spacing, colours) comes from the
   shared site.css — see map.html's <link>. map.css ONLY re-pins the same bar as a fixed-height
   band above the map chrome (the map's fixed-position title/controls/host key off its height),
   overriding site.css's sticky, padding-driven container. Nothing else about the bar lives here. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--map-nav-h); z-index: 20;
  padding: 0 clamp(.75rem, 3vw, 2rem);
}
.nav-search-dialog { position: fixed; top: 3rem; left: 50%; transform: translateX(-50%); margin: 0; border: none; border-radius: 12px; padding: 1rem 1.25rem 1.25rem; max-width: 34rem; width: 92vw; background: #faf8f5; box-shadow: 0 1rem 3rem rgba(0,0,0,.3); font: 14px system-ui, sans-serif; }
.nav-search-dialog::backdrop { background: rgba(0,0,0,.35); }
.nav-search-title { font: 400 .72rem 'DM Mono', monospace; letter-spacing: .15em; text-transform: uppercase; color: #7a5210; margin: 0 0 .6rem; text-align: center; }
.nav-search-dialog .nav-search { display: block; position: relative; padding: 0; }
.nav-search-dialog .nav-search-input { width: 100%; height: 32px; padding: 0 .6rem; border: 1px solid #cdbfa0; border-radius: 6px; font: 14px system-ui, sans-serif; }
.nav-search-dialog .nav-search-input:focus { outline: none; border-color: #000; }
.nav-search-dialog .nav-search-results { margin-top: .6rem; max-height: 60vh; overflow-y: auto; }
.nav-search-dialog .nav-search-results[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.map-controls {
  position: fixed; top: calc(var(--map-nav-h) + var(--map-title-h)); left: 0; right: 0; min-height: 44px; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem .75rem;
  background: rgba(255,255,255,.92); border-bottom: 1px solid #e3ddd0;
  font: 13px system-ui, sans-serif; color: #555;
}
/* nowrap so the hint stays one phrase inline and, when tight, wraps as a whole
   unit to its own line (below) instead of breaking mid-phrase. */
.map-controls .hint { opacity: .7; white-space: nowrap; }
.map-controls .spacer { flex: 1; }
/* undo/redo and the zoom cluster (2 buttons + level) each stay glued together as
   one wrap unit — an inner nowrap flex, so a line break never splits a pair. */
.map-controls .nav-group,
.map-controls .zoom-group { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
/* Below this width the single row gets tight, so the instruction hint drops to
   its own full-width line FIRST (as a unit) — the control clusters keep the top
   row and the zoom cluster never wraps before the hint does. */
@media (max-width: 880px) {
  .map-controls .hint { flex-basis: 100%; order: 1; text-align: center; white-space: normal; }
  .map-controls .spacer { display: none; }
}
/* Match content pages' .wrap padding on narrow screens. */
@media (max-width: 640px) {
  .map-title { padding-left: .75rem; padding-right: 1.5rem; }
}
.map-controls button {
  width: 30px; height: 26px; border: 1px solid #cdbfa0; border-radius: 6px;
  background: #fff; font-size: 16px; line-height: 1; cursor: pointer; color: #333;
}
.map-controls button:hover { border-color: #000; }
.map-controls button:disabled { opacity: .35; cursor: default; border-color: #cdbfa0; }
/* Flexible width: 200px when there's room, but shrinks (down to 3rem) so the filter,
   undo/redo and zoom controls stay on ONE row on a narrow phone instead of wrapping. */
.filter {
  height: 26px; flex: 0 1 200px; min-width: 3rem; width: auto; padding: 0 .5rem;
  border: 1px solid #cdbfa0; border-radius: 6px; font: 13px system-ui, sans-serif;
  color: #222; background: #fff;
}
.filter:focus { outline: none; border-color: #000; }
/* Degrees-of-separation filter: a small numeric stepper next to the text filter. */
.map-controls .degrees { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.map-controls .degrees-label { opacity: .8; }
.degrees-input {
  height: 26px; width: 3.5rem; padding: 0 .4rem;
  border: 1px solid #cdbfa0; border-radius: 6px; font: 13px system-ui, sans-serif;
  color: #222; background: #fff;
}
.degrees-input:focus { outline: none; border-color: #000; }
.zoom-level { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom-level:hover { color: #000; }

.map-host { position: fixed; top: calc(var(--map-nav-h) + var(--map-title-h) + 44px); left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: none; }
/* `touch-action: none` keeps a touch-drag on the graph moving nodes / panning the map
   instead of scrolling or pinch-zooming the page (paired with Pointer Events in map.js). */
.map-graph-svg { width: 100%; height: 100%; display: block; touch-action: none; }

.map-graph-edge { stroke-width: 2; fill: none; opacity: .5; }
.map-graph-bullet { opacity: .5; fill: #fff; stroke-width: 1.5; }
.map-graph-bullet-from { fill: #fff; stroke-width: 3; }   /* hollow, thick border */
.map-graph-bullet-to { opacity: 1; }                      /* solid fill set inline to edge color */
.map-graph-node { fill: #fff; stroke: #c8a96e; stroke-width: 1.2; }
/* The node the degrees filter measures from — ringed so "1 = center + neighbors"
   is unambiguous about which node is the center. */
.map-graph-node-center { stroke: #000; stroke-width: 3; }
.map-graph-label { font: 11px system-ui, sans-serif; fill: #000; }
.map-graph-node-link:hover .map-graph-node, .map-graph-node-wrap:hover .map-graph-node {
  stroke: #000; stroke-width: 2;
}
.map-graph-node-wrap, .map-graph-node-wrap * {
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; cursor: pointer;
}

.map-menu {
  position: fixed; z-index: 100; min-width: 140px; padding: 4px;
  background: #fff; border: 1px solid #cdbfa0; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); display: flex; flex-direction: column;
}
.map-menu button {
  appearance: none; border: 0; background: none; text-align: left;
  padding: 7px 12px; border-radius: 5px; font: 14px system-ui, sans-serif;
  color: #222; cursor: pointer;
}
.map-menu button:hover { background: #f0ead9; }