/* mindmap-sphere.css — section 05, wearing the site's clothes and no furniture.
 *
 * This replaces mindmap-embed.css. That file's job was to re-cut a tool's
 * chrome — a bar, a search field, sixteen filter chips, a legend, a controls
 * sheet — into the page's own idiom. This file's job is smaller, because the
 * chrome is gone: what is left is a canvas on the page's black, a hover card
 * with no box, and the detail block that was already under the map.
 *
 *   TOKENS, NOT COPIES. --mm-* alias --ink / --accent / --line from styles.css,
 *   with the literal as a fallback. Two palettes that agree until somebody
 *   edits one of them is not a palette.
 *
 *   NO STAGE. No border, no fill, no ruled ground, no 5:4 letterbox. The box is
 *   a square the object floats in, bounded so it cannot outgrow the viewport it
 *   is being scrolled through.
 *
 *   MONO IS SMALL CAPS. Every mono label on this page is uppercase at 9.5–10.5px
 *   on .13–.26em of tracking, and the card, the facts and the tags follow that.
 *   File paths are the exception and stay verbatim: a path is a name, not a
 *   label, and BLOCK-SHAPES.JS is a different string from the one on disk.
 *
 *   HOVER IS FOR POINTERS. A :hover a finger cannot leave reads as stuck after
 *   a tap, so hovers sit behind (hover:hover) and touch gets :active.
 *
 * The sixteen lobe hues and the shipped / dev-only / unreferenced colours are
 * NOT restyled: they are the legend, they are drawn on the canvas, and a
 * CSS-only recolour would leave the key disagreeing with the graph.
 *
 * SCOPE. Every rule hangs off [data-archmap] and addresses [data-mm="…"] rather
 * than an id: the page has its own #title, #meta, #card and #scroll.
 */

[data-archmap] {
  --mm-fg: var(--ink, #F4F1EA);
  --mm-dim: var(--ink-2, rgba(244, 241, 234, 0.66));
  --mm-faint: var(--ink-3, rgba(244, 241, 234, 0.42));
  --mm-ghost: var(--ink-4, rgba(244, 241, 234, 0.24));
  --mm-line: var(--line, rgba(244, 241, 234, 0.10));
  --mm-accent: var(--accent, #C3D488);
  --mm-mono: var(--mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  --mm-sans: var(--sans, Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  --mm-shipped: #3fb950;
  --mm-dev: #d29922;
  --mm-orphan: #f85149;
  margin-top: clamp(28px, 4vw, 54px);
  position: relative;
  font: 12px/1.5 var(--mm-mono);
  color: var(--mm-fg);
  /* THE TEXT SITS BESIDE THE OBJECT, NOT UNDER IT. Under it, the object owned a
     square of the page and the file you had just opened was a screen and a half
     further down — you clicked a bead and nothing appeared to happen. Beside it
     the two are one glance apart, and the column the object was already leaving
     empty on its left is what pays for it. */
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  grid-template-areas:
    "detail object"
    "detail hint";
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(28px, 4.5vw, 76px);
}
[data-archmap] * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── the object's box ───────────────────────────────────────────────────── */

/* Square, because the drawing is a sphere and a sphere in a 16:9 slot is
   bounded by the height — the box pays for two columns of empty black either
   side of it. Capped so it cannot turn a tall desktop window into a wall, and
   centred rather than stretched: the object has a size, not a column width. */
[data-mm="stage"] {
  grid-area: object;
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  max-height: min(86svh, 900px);
  touch-action: pan-y;
}
[data-mm="c"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: pan-y;
}
[data-mm="c"].pointing { cursor: pointer; }

/* ── the hover card ────────────────────────────────────────────────────────
   The old card was a bordered panel with a drop shadow, which is a window —
   the one thing this section is not allowed to grow back. Text on the page's
   own black, legible over the drawing because of the shadow, not a fill. */
[data-mm="card"] {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  max-width: 320px;
  opacity: 0;
  transition: opacity 0.16s ease;
  text-shadow: 0 1px 14px rgba(7, 9, 7, 0.95), 0 0 3px rgba(7, 9, 7, 0.9);
}
[data-mm="card"].on { opacity: 1; }
[data-mm="card"] .t {
  font-size: 11.5px;
  color: var(--mm-fg);
  white-space: nowrap;
}
[data-mm="card"] .m {
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-faint);
  white-space: nowrap;
}

/* ── the hint ──────────────────────────────────────────────────────────────
   .lg-hint's voice. Fades out once a file is open, because by then the reader
   has worked out what the object does. */
[data-mm="hint"] {
  grid-area: hint;
  margin-top: 10px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  color: rgba(244, 241, 234, 0.3);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(7, 9, 7, 0.95), 0 0 4px rgba(7, 9, 7, 0.9);
  transition: opacity 0.5s ease;
}
[data-archmap].mm-open [data-mm="hint"] { opacity: 0.35; }

/* ── the detail block ──────────────────────────────────────────────────────
   .map-detail: static, always present, covering nothing — and now without the
   card it used to sit in, because the section has no boxes in it at all. */
[data-mm="sheet"] {
  grid-area: detail;
  align-self: center;
  min-width: 0;
  /* No rule above it and no reserved height: in its own lane the block is text
     on the page's black, and the object next to it is what gives the section
     its height. */
}
[data-mm="sheet"] .top + [data-mm="scroll"] { margin-top: 26px; }
[data-archmap] .top { min-width: 0; }
/* The path stays a path — sans, light, large, unaltered. `overflow-wrap:
   anywhere` rather than `word-break: break-word`: both break a word that cannot
   fit, only this one takes the slashes first, so a long path folds at
   vendor/three/ instead of through the middle of three.modul|e.min.js. */
[data-mm="title"] {
  font-family: var(--mm-sans);
  font-size: clamp(19px, 2.2vw, 27px);
  color: var(--mm-fg);
  font-weight: 300;
  letter-spacing: -0.018em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.14;
}
[data-mm="title"]:empty { display: none; }
[data-mm="meta"] { margin-top: 16px; }
[data-mm="scroll"] { min-width: 0; max-height: min(46svh, 430px); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(244, 241, 234, 0.18) transparent; }

/* .plan-tag's voice, in the lobe's own colour — which is the point of it. */
[data-archmap] .tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  margin: 0 6px 7px 0;
}
[data-archmap] .facts {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  color: var(--mm-faint);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 8px;
}
[data-archmap] .facts b { color: var(--mm-fg); font-weight: 500; letter-spacing: 0.04em; }
/* Sentence, not label — and it names files, so it is left as written. */
[data-archmap] .note { color: var(--mm-ghost); font-size: 10px; margin-top: 10px; line-height: 1.7; }

/* .detail-body, with .kicker's rule turned on its side. */
[data-archmap] .blurb {
  margin: 0 0 2px;
  color: var(--mm-dim);
  font-family: var(--mm-sans);
  font-size: 15px;
  line-height: 1.78;
  border-left: 1px solid rgba(195, 212, 136, 0.4);
  padding-left: 16px;
  text-wrap: pretty;
}

/* .cell-i / .flow-n: the accent label that opens a block. */
[data-archmap] h4 {
  margin: 24px 0 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-accent);
  border-bottom: 1px solid var(--mm-line);
  padding-bottom: 8px;
  font-weight: 400;
}
[data-archmap] .row {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--mm-dim);
  transition: color 0.3s ease;
}
[data-archmap] .row .via { color: var(--mm-ghost); font-size: 10px; display: block; word-break: break-all; margin-top: 3px; }
[data-archmap] .empty {
  color: var(--mm-ghost);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 6px 0;
  line-height: 1.8;
}

/* ── the failure banner ────────────────────────────────────────────────────
   It has text or it is not there: anything that drops the hidden attribute must
   not put an empty black sheet over the object with no error to explain it. */
[data-mm="boot"] {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--bg, #070907);
  color: var(--mm-orphan);
  font-size: 11px;
  line-height: 1.6;
  padding: 24px;
  white-space: pre-wrap;
  overflow: auto;
  text-align: left;
}
[data-mm="boot"][hidden], [data-mm="boot"]:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  [data-archmap] .row:hover { color: var(--mm-fg); }
  [data-archmap] .row:hover .via { color: var(--mm-faint); }
}
@media (hover: none) {
  [data-archmap] .row:active { color: var(--mm-fg); }
}
[data-archmap] .row:focus-visible { outline: 1px solid var(--mm-accent); outline-offset: 3px; }

/* A NARROW STAGE — keyed off the box's own width, set by mindmap-sphere.js,
   not off the screen: this box is 700px wide inside a 1600px window and the
   window has no idea. */
/* A narrow stage stacks: object, hint, then the text — and the text takes back
   the rule above it, because stacked it needs the separation the two-column
   layout got from the gap. */
[data-archmap].mm-narrow {
  grid-template-columns: 1fr;
  grid-template-areas: "object" "hint" "detail";
  row-gap: 0;
}
.mm-narrow [data-mm="sheet"] {
  margin-top: clamp(26px, 3.5vw, 44px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--mm-line);
}
.mm-narrow [data-mm="stage"] { max-height: min(72svh, 620px); }
.mm-narrow [data-mm="card"] { max-width: min(260px, calc(100% - 20px)); }
.mm-narrow [data-mm="hint"] { gap: 12px; font-size: 9px; }

@media (pointer: coarse) {
  [data-archmap] .row { padding: 11px 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mm="card"], [data-mm="hint"], [data-archmap] .row { transition: none; }
}