/* NAMCHE brand map - styles for brand-map.html only. Loaded after site.css and manual.css: the production bar,
   nav, CTA, label, h2, chapters, the legend folds (.fold), tables (.tbl) and symbols (.sym) come from there.
   Everything here is DS tokens or derived from them. Same voices as the rest: Namche Shadow Sans Medium and
   Shadow Mono Medium, full-strength ink, hairlines, no shadow, nothing scales, nothing fades in.
   The drawing follows the relations map (site.css, .sysmap): Selene lines on #111111, Hestia only for the
   selection, hairline multiples for strokes (--bm-w; non-scaling, so they stay thin at any zoom). */

.bm{
  --bm-w:var(--hairline);
  --surface-page:var(--ground-dark);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32) var(--gutter);align-items:start;
}
@media (max-resolution:1.49dppx){.bm{--bm-w:var(--stroke)}} /* half a pixel does not exist on a 1x screen */
@media (min-width:1100px){.bm{grid-template-columns:var(--span-3) minmax(0,1fr)}}

/* ── Legend: one size of type throughout, mono caps for the terms, Shadow Sans for the running text ── */
.bm-side{
  display:flex;flex-direction:column;min-height:0;
  font:var(--role-label-caption);
  line-height:var(--space-16);text-transform:var(--role-label-case);
}
@media (min-width:1100px){
  .bm-side{position:sticky;top:calc(var(--space-64) + var(--space-32));max-height:calc(100svh - var(--space-64) * 2 - var(--space-16))}
}
.bm-side__scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gaia-selene) transparent}
.bm-side button{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.bm-side .fold__toggle{cursor:pointer}
.bm-keyfold .fold__body{max-height:none}
.bm-hint,.bm-note{margin:var(--space-8) 0 var(--space-16);text-wrap:pretty}
.bm-note{margin-top:var(--space-16)}
.bm-drift{margin:var(--space-16) 0 0;color:var(--hook)}
.bm-selname{display:flex;align-items:center;gap:var(--space-8);margin:var(--space-8) 0 var(--space-8);text-transform:uppercase}
.bm-selname__dot{flex:none;width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:var(--hook)}
.bm-side code{font:inherit;text-transform:none} /* a token is copied as written */
.bm-side .tbl th{width:30%}
.bm-side .tbl td{overflow-wrap:anywhere}
.bm-when{display:block;text-transform:uppercase}
.bm-links td:nth-child(2){width:28%}

/* context switches: a row per axis, a pill per value (the same switch as the boxes in the drawing) */
.bm-axes>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8) var(--space-16)}
.bm-axes__name{flex:none}
.bm-axes__vals{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.bm-seg{
  min-height:calc(var(--space-8) * 3);padding:0 var(--space-8)!important;
  border:var(--hairline) solid var(--gaia-selene)!important;border-radius:var(--radius-pill);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.bm-seg:hover,.bm-seg:focus-visible{background:var(--hook)!important;border-color:var(--hook)!important;color:var(--hook-ink)!important}
.bm-seg[aria-pressed="true"]{background:var(--gaia-selene)!important;color:var(--ink-on-gaia-selene)!important}

/* the node list */
.bm-list{list-style:none;margin:0 0 var(--space-16);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-16)}
.bm-list__head{margin:var(--space-8) 0 var(--space-4)}
.bm-list li{min-height:calc(var(--space-8) * 3)}

/* the key's symbols */
.bm-key>li{display:flex;align-items:flex-start;gap:var(--space-8)}
.bm-key .tbl__sym{display:flex;flex:none;align-items:center;justify-content:center;width:var(--space-32);min-height:var(--space-16)}
.sym.bm-sym--base,.sym.bm-sym--role,.sym.bm-sym--dsonly,.sym.bm-sym--site{width:var(--space-32);height:var(--bullet-dot);border:var(--hairline) solid currentColor;border-radius:var(--radius-pill)}
/* stylelint-disable namche/token-only -- geometry: the legend glyphs of the brand map, drawn to size */
.sym.bm-sym--base::before{content:"";position:absolute;left:3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:var(--radius-pill);background:currentColor}
.sym.bm-sym--role::before{content:"";position:absolute;left:3px;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:var(--radius-pill);border:var(--stroke) solid currentColor}
.sym.bm-sym--dsonly{border-style:dashed}
.sym.bm-sym--site{border-width:var(--stroke-bold)}
.sym.bm-sym--part{width:9px;height:9px;background:currentColor}
.sym.bm-sym--ctx{width:9px;height:9px;border:var(--stroke) solid currentColor}
/* stylelint-enable namche/token-only */
.sym.bm-sym--sel{width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:var(--hook)}

/* ── The drawing ──────────────────────────────────────────────── */
.bm-stage{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--gaia-selene) transparent}
.bm-svg{display:block;width:100%;min-width:var(--map-min-width);max-width:none;height:auto}
.bm-svg text{
  font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--map-text);text-transform:uppercase;letter-spacing:0;
  fill:var(--gaia-selene);pointer-events:none;
}
.bm-colhead,.bm-colsub,.bm-axis,.bm-cap,.bm-bandname,.bm-bandline{paint-order:stroke;stroke:var(--surface-page);stroke-width:var(--map-halo);stroke-linejoin:round}
.bm-rule{stroke:var(--gaia-selene);stroke-width:var(--bm-w);vector-effect:non-scaling-stroke}
.bm-head{fill:var(--gaia-selene)}

.bm-node{cursor:pointer}
.bm-hit{fill:transparent;stroke:none}
.bm-shape{
  fill:var(--surface-page);stroke:var(--gaia-selene);stroke-width:calc(var(--bm-w) * 2);vector-effect:non-scaling-stroke;
  transition:fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard);
}
.bm-src--dsonly .bm-shape{stroke-dasharray:4 3}
.bm-src--site .bm-shape{stroke-width:calc(var(--bm-w) * 4)}
.bm-ring,.bm-tone,.bm-box,.bm-sw{vector-effect:non-scaling-stroke;stroke:var(--gaia-selene);stroke-width:calc(var(--bm-w) * 2);fill:none;transition:fill var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard)}
.bm-tone,.bm-sw{fill:currentColor}
.bm-sq{fill:var(--gaia-selene);transition:fill var(--dur-base) var(--ease-standard)}
.bm-value{transition:fill var(--dur-base) var(--ease-standard)}
/* a context that is on: the box is filled, the pill takes the ink of a fill */
.bm-node--ctx.is-state .bm-shape{fill:var(--gaia-selene)}
.bm-node--ctx.is-state text{fill:var(--gaia-erebos)}
.bm-node--ctx.is-state .bm-box{fill:var(--gaia-erebos);stroke:var(--gaia-erebos)}
/* hover and focus chain: Hestia, like every control of the site */
.bm-node:hover .bm-shape,.bm-node.is-hov .bm-shape{stroke:var(--hook)}
.bm-node.is-near .bm-shape{stroke:var(--hook);stroke-width:calc(var(--bm-w) * 4)}
.bm-node.is-near.bm-src--site .bm-shape{stroke-width:calc(var(--bm-w) * 5)}
.bm-node.is-sel .bm-shape{fill:var(--hook);stroke:var(--hook)}
.bm-node.is-sel text{fill:var(--hook-ink)}
.bm-node.is-sel .bm-ring,.bm-node.is-sel .bm-box,.bm-node.is-sel .bm-sw{stroke:var(--hook-ink)}
.bm-node.is-sel .bm-sq{fill:var(--hook-ink)}
.bm-node.is-sel .bm-tone{stroke:var(--hook-ink)}

/* links: Selene hairlines; role -> part a little quieter, faint when the link belongs to another context,
   the chain of the selection in Hestia at twice the weight */
.bm-edge{
  fill:none;stroke:var(--gaia-selene);stroke-width:var(--bm-w);stroke-linecap:round;vector-effect:non-scaling-stroke;
  opacity:.9;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard),stroke var(--dur-base) var(--ease-standard);
}
.bm-edge--part{opacity:.45}
.bm-edge--d{stroke-width:var(--map-edge);stroke-dasharray:0 4}
.bm-edge.is-off{opacity:.2}
.bm-edge--part.is-off{opacity:.12}
.bm-edge.is-dim{opacity:.22}
.bm-edge.is-dim.is-off{opacity:.08}
.bm-edge.is-hov{opacity:1}
.bm-edge.is-on{stroke:var(--hook);stroke-width:calc(var(--bm-w) * 2);opacity:1}
.bm-edge--d.is-on{stroke-width:var(--map-edge-on)}
.bm-edge.is-on.is-off{stroke-dasharray:5 4}
.bm-edge--d.is-on.is-off{stroke-dasharray:0 4}

@media (prefers-reduced-motion:reduce){.bm *{transition:none!important}}

/* ── Narrow screens: the drawing scrolls sideways at a readable size; the legend stacks above it ── */
@media (max-width:1099px){
  .bm-side{max-height:none}
  .bm-side__scroll{overflow:visible}
  .bm-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:599px){.bm-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Chapter 02: the table ─────────────────────────────────────── */
.bm-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin-inline:calc(var(--edge) * -1);padding-inline:var(--edge)}
.bm-table{
  width:100%;min-width:var(--map-min-width);border-collapse:collapse;table-layout:fixed;text-align:left;
  font:var(--role-label-caption);
  line-height:var(--space-16);text-transform:var(--role-label-case);
}
.bm-table th,.bm-table td{padding:var(--space-8) var(--space-16) var(--space-8) 0;border-top:var(--hairline) solid currentColor;vertical-align:top;font-weight:inherit;text-align:left}
.bm-table thead th{padding-top:0;padding-bottom:var(--space-8);border-top:0}
.bm-table tbody tr:first-child>*{border-top:var(--hairline) solid currentColor}
.bm-table th:first-child{width:16%}
.bm-th-hint{display:block;margin-top:var(--space-4)}
.bm-tstack{display:grid;gap:var(--space-4)}
.bm-trow{display:flex;align-items:center;gap:var(--space-8);min-height:var(--space-16)}
.bm-tsw{flex:none;width:var(--space-16);height:var(--space-16);background:var(--c);border:var(--hairline) solid currentColor}
.bm-thex{margin-left:auto}
.bm-none{display:block}
.bm-ratio{display:inline-block;width:fit-content;padding:0 var(--space-8);margin-left:calc(var(--space-8) * -1);border:var(--hairline) solid transparent;border-radius:var(--radius-pill)}
.bm-ratio.is-low{border-color:currentColor}
.bm-table .is-ratio td,.bm-table .is-ratio th{padding-block:var(--space-4)}
.bm-foot{margin:var(--space-32) 0 0;max-width:var(--span-8)}
.bm-foot code,.blk code{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-code)}

/* ── Chips: a node named in the text, a button that selects it in the map ─────────────── */
.bm-chips{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:auto;padding-top:var(--space-16)}
.bm-chip{
  display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 4);padding:0 var(--space-16);
  border:var(--hairline) solid currentColor;border-radius:var(--radius-pill);background:none;color:inherit;cursor:pointer;
  font:var(--role-label-caption);
  line-height:1;text-transform:var(--role-label-case);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.bm-chip:hover,.bm-chip:focus-visible{background:var(--hook);border-color:var(--hook);color:var(--hook-ink)}
.bm-chip--row{min-height:0;padding:0;border:0;border-radius:0;text-align:left;text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.bm-chip--row:hover,.bm-chip--row:focus-visible{background:none;color:var(--hook)}
.scene.light .bm-chip:hover,.scene.light .bm-chip:focus-visible{background:var(--hook);color:var(--hook-ink)}
.scene.light .bm-chip--row:hover,.scene.light .bm-chip--row:focus-visible{background:none;color:var(--ink-light)}

/* the selection bar, narrow screens only (above 1100px the legend sticks beside the drawing) */
.bm-bar{
  position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-8) 0;background:var(--surface-page);box-shadow:inset 0 var(--hairline) 0 var(--gaia-selene);
  font:var(--role-label-caption);
  line-height:var(--space-16);text-transform:var(--role-label-case);
}
.bm-bar[hidden]{display:none}
@media (min-width:1100px){.bm-bar{display:none}}
.bm-bar__dot{flex:none;width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:var(--hook)}
.bm-bar__text{flex:1;min-width:0}
.bm-bar__clear{
  flex:none;min-height:calc(var(--space-8) * 4);padding:0 var(--space-16);border:var(--hairline) solid var(--gaia-selene);border-radius:var(--radius-pill);
  background:none;color:inherit;font:inherit;text-transform:inherit;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.bm-bar__clear:hover,.bm-bar__clear:focus-visible{background:var(--hook);border-color:var(--hook);color:var(--hook-ink)}