/* System Map: the Story page at /map and the Schema tab in Content Lab.
   Rendered by js/system-map.js from data/system-map.json. Theme tokens only. */

/* Same page geometry as Site map (css/tools.css), the view beside this one in
   the Library toolbar. */
.sysmap-view { max-width: 1500px; width: 100%; margin: 0 auto; padding: 1.25rem 2rem 2.5rem; box-sizing: border-box; }

.sysmap-lede {
    font-size: 1.02rem; line-height: 1.55; color: var(--charcoal);
    max-width: 78ch; margin: 0.2rem 0 0.5rem;
}
.sysmap-lede--schema { font-size: 0.9rem; color: var(--slate); }
.sysmap-hint { font-size: 0.82rem; color: var(--slate); margin: 0 0 1rem; max-width: 78ch; }
.sysmap-foot { font-size: 0.8rem; color: var(--slate); margin: 1rem 0 0; line-height: 1.6; }
.sysmap-empty {
    color: var(--slate); font-size: 0.85rem; padding: 1.1rem;
    border: 1px dashed var(--border-light); border-radius: 10px; line-height: 1.6;
}
.sysmap-empty code { font-size: 0.8em; }

.sysmap-link {
    background: none; border: none; padding: 0; margin-left: 0.4rem; cursor: pointer;
    color: var(--primary); font: inherit; font-size: 0.82rem; text-decoration: underline;
}
.sysmap-link:hover { color: var(--charcoal); }

/* ── stage and wires ── */

.sysmap-stage { position: relative; }
.sysmap-wires {
    position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2;
}
.sysmap-wire path { fill: none; stroke-width: 1.6; opacity: 0.55; transition: opacity 0.15s; }
.sysmap-wire marker path, .sysmap-wire path[d^="M0,0"] { fill: currentColor; }
.sysmap-wire--live { color: var(--primary); }
.sysmap-wire--live path { stroke: var(--primary); }
.sysmap-wire--partial { color: var(--gamboge); }
.sysmap-wire--partial path { stroke: var(--gamboge); }
.sysmap-wire--planned { color: var(--slate); }
.sysmap-wire--planned path { stroke: var(--slate); stroke-dasharray: 5 4; }
.sysmap-wire--dead { color: var(--rose); }
.sysmap-wire--dead path { stroke: var(--rose); stroke-dasharray: 2 4; }
.sysmap-wire--disputed { color: var(--violet); }
.sysmap-wire--disputed path { stroke: var(--violet); stroke-dasharray: 8 3; }
/* Pinning a box is a two-sided answer: what it touches is coloured in, and
   what it does not recedes far enough that the lit set reads on its own. A
   dimmed wire also drops its colour, so colour on the fitted map means
   connected rather than merely present. */
.sysmap-wire.is-dim { opacity: 0.1; }
.sysmap-wire.is-dim path { stroke: var(--slate) !important; stroke-width: 1; }
.sysmap-wire.is-dim .sysmap-head path { fill: var(--slate); }
.sysmap-wire.is-hot { opacity: 1; }
.sysmap-wire.is-hot path { opacity: 1; stroke-width: 3; }
/* A band-skipping wire is quiet until its box is hovered or focused: eight of
   them labelled at once cannot be read. */
.sysmap-wire--far path { opacity: 0.3; }
.sysmap-wire--far .sysmap-wire-bg, .sysmap-wire--far .sysmap-wire-label { opacity: 0; transition: opacity 0.15s; }
.sysmap-wire--far.is-hot .sysmap-wire-bg, .sysmap-wire--far.is-hot .sysmap-wire-label { opacity: 1; }
.sysmap-wire-bg { fill: var(--bg-elevated); stroke: var(--border-light); stroke-width: 1; }
.sysmap-wire-label {
    font-family: Montserrat, sans-serif; font-size: 10.5px; font-weight: 600;
    fill: var(--charcoal); letter-spacing: 0.01em;
}
.sysmap-wire--dead .sysmap-wire-label { text-decoration: line-through; fill: var(--rose); }
.sysmap-wire--planned .sysmap-wire-label { fill: var(--slate); }
/* An arrowhead per state, so a lit wire lands in its own colour. */
.sysmap-head path { fill: var(--slate); }
.sysmap-head--live path { fill: var(--primary); }
.sysmap-head--partial path { fill: var(--gamboge); }
.sysmap-head--planned path { fill: var(--slate); }
.sysmap-head--dead path { fill: var(--rose); }
.sysmap-head--disputed path { fill: var(--violet); }

/* ── Story bands and boxes ── */

.sysmap-band {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(150px, 210px) 1fr 116px; gap: 0.6rem 1.4rem;
    align-items: start; padding: 1.8rem 0 2rem; border-top: 1px solid var(--border-light);
}
.sysmap-band:first-of-type { border-top: none; }
.sysmap-band-label {
    font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--charcoal);
    line-height: 1.2;
}
.sysmap-band-caption { font-size: 0.78rem; color: var(--slate); line-height: 1.45; margin-top: 0.3rem; }
.sysmap-band-boxes { display: flex; flex-wrap: wrap; gap: 0.8rem 1.1rem; }
/* Kept empty on purpose: the lanes for hand-offs that skip a band run here,
   so no wire ever has to cross the caption or a box. */
.sysmap-band-gutter { min-height: 1px; }

/* A card is a group: the main button opens the surface that lists what the
   box stands for, and the walk link opens the focus view on its first kind.
   Two buttons cannot nest, which is why the card itself is not one. */
.sysmap-box {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    flex: 1 1 200px; min-width: 190px; max-width: 320px;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 12px;
    padding: 0.7rem 0.85rem 0.75rem; font: inherit; color: var(--charcoal);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sysmap-box-main {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%;
    background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.sysmap-box-main:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.sysmap-box-walk {
    align-self: flex-end; margin-top: 0.55rem; background: none; border: none; padding: 0;
    font: inherit; font-size: 0.74rem; color: var(--primary); cursor: pointer; text-decoration: underline;
}
.sysmap-box-walk:hover, .sysmap-box-walk:focus-visible { color: var(--charcoal); outline: none; }
/* A band holding one box would otherwise leave most of its row empty. */
.sysmap-band-boxes > .sysmap-box:only-child { max-width: 460px; }
.sysmap-box:hover, .sysmap-box:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); outline: none; }
.sysmap-box-label { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.98rem; line-height: 1.15; }
.sysmap-box-sub { font-size: 0.8rem; color: var(--slate); line-height: 1.4; margin-top: 0.3rem; }
.sysmap-box-num {
    font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--primary);
    margin-top: 0.5rem; letter-spacing: 0.01em;
}
.sysmap-box-own {
    font-size: 0.76rem; color: var(--charcoal); margin-top: 0.35rem; line-height: 1.4;
    border-top: 1px dashed var(--border-light); padding-top: 0.35rem; width: 100%;
}
/* On a wide screen a box lists only the hand-offs whose wires carry no label,
   the ones that skip a band. Stacked, where there are no wires at all, it
   lists every hand-off. */
.sysmap-outs { display: none; list-style: none; margin: 0.45rem 0 0; padding: 0; width: 100%; }
.sysmap-outs--far { display: block; }
.sysmap-outs--far .sysmap-out { display: none; }
.sysmap-outs--far .sysmap-out--far { display: block; }
.sysmap-stage--stacked .sysmap-outs, .sysmap-stage--stacked .sysmap-out { display: block; }
.sysmap-out {
    font-size: 0.74rem; color: var(--slate); line-height: 1.5; padding-left: 1rem; position: relative;
}
.sysmap-out::before { content: '\2192'; position: absolute; left: 0; color: var(--primary); }
.sysmap-out-to { color: var(--charcoal); font-weight: 600; }
.sysmap-out--dead { text-decoration: line-through; }
.sysmap-out--dead::before { color: var(--rose); }
.sysmap-out--partial::before { color: var(--gamboge); }
.sysmap-out--planned::before { color: var(--slate); }

/* ── legend ── */

.sysmap-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.9rem; }
.sysmap-key {
    font-family: Montserrat, sans-serif; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--slate); padding-left: 1.3rem; position: relative; line-height: 1.4;
}
.sysmap-key::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0.95rem; height: 0; margin-top: -1px;
    border-top: 2px solid var(--slate);
}
.sysmap-key--live::before { border-top-color: var(--primary); }
.sysmap-key--partial::before { border-top-color: var(--gamboge); }
.sysmap-key--planned::before { border-top-style: dashed; }
.sysmap-key--dead::before { border-top-color: var(--rose); border-top-style: dotted; }
.sysmap-key--disputed::before { border-top-color: var(--violet); border-top-style: dashed; }

/* ── Schema tab ── */

.sysmap-schema { padding: 0.6rem 0.2rem 3rem; }
.sysmap-sbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0.4rem 0 0.8rem; }
.sysmap-sbar .library-search-wrap { flex: 1 1 260px; max-width: 420px; }
.sysmap-sbar .sysmap-legend { margin-top: 0; }
.sysmap-schema-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1.2rem; align-items: start; }
.sysmap-stage--schema { min-width: 0; }

.sysmap-sband { position: relative; z-index: 1; padding: 0.55rem 0; border-top: 1px solid var(--border-light); }
.sysmap-sband:first-of-type { border-top: none; }
.sysmap-sband--tray { margin-top: 0.6rem; border-top: 1px dashed var(--border-light); opacity: 0.85; }
.sysmap-sband-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; margin-bottom: 0.4rem; }
.sysmap-sband-n {
    font-family: ui-monospace, monospace; font-size: 0.66rem; color: var(--slate);
    border: 1px solid var(--border-light); border-radius: 6px; padding: 0.05rem 0.35rem;
}
.sysmap-sband-label { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.82rem; color: var(--charcoal); }
.sysmap-sband-caption { font-size: 0.74rem; color: var(--slate); }
.sysmap-chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; }

.sysmap-chip {
    position: relative; z-index: 1; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 999px;
    color: var(--charcoal); padding: 0.22rem 0.6rem; font-size: 0.76rem; line-height: 1.2;
    transition: border-color 0.15s, opacity 0.15s;
}
.sysmap-chip--s2 { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
.sysmap-chip--s3 { font-size: 0.9rem; padding: 0.38rem 0.85rem; font-weight: 600; }
.sysmap-chip:hover, .sysmap-chip:focus-visible { border-color: var(--primary); outline: none; }
.sysmap-chip.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--bg-panel); }
.sysmap-chip.is-dim { opacity: 0.35; }
.sysmap-chip.is-hidden { display: none; }
.sysmap-chip-n {
    font-family: ui-monospace, monospace; font-size: 0.66rem; color: var(--slate);
    background: color-mix(in srgb, var(--slate) 10%, transparent); border-radius: 999px; padding: 0.05rem 0.4rem;
}

.sysmap-panel {
    position: sticky; top: 0.5rem;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 12px;
    padding: 0.9rem 1rem 1rem; max-height: 84vh; overflow: auto;
}
.sysmap-panel-kicker { font-family: Montserrat, sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.sysmap-panel-title { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--charcoal); margin: 0.25rem 0 0.2rem; }
.sysmap-panel-one { font-size: 0.85rem; color: var(--charcoal); line-height: 1.5; margin: 0 0 0.6rem; }
.sysmap-panel-row { font-size: 0.78rem; color: var(--charcoal); line-height: 1.5; margin: 0.25rem 0; }
.sysmap-panel-row > span { font-family: Montserrat, sans-serif; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-right: 0.4rem; }
.sysmap-panel-row code { font-size: 0.72rem; word-break: break-all; }
.sysmap-panel-sub { font-family: Montserrat, sans-serif; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0.9rem 0 0.4rem; }
.sysmap-edges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sysmap-edge { border-left: 3px solid var(--primary); padding: 0.1rem 0 0.1rem 0.6rem; }
.sysmap-edge--partial { border-left-color: var(--gamboge); }
.sysmap-edge--planned { border-left-color: var(--slate); border-left-style: dashed; }
.sysmap-edge--dead { border-left-color: var(--rose); border-left-style: dotted; }
.sysmap-edge--disputed { border-left-color: var(--violet); border-left-style: dashed; }
.sysmap-edge-line { font-size: 0.8rem; color: var(--charcoal); line-height: 1.45; }
.sysmap-edge-dir { font-size: 0.68rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; }
.sysmap-edge-verb { color: var(--slate); font-style: italic; }
.sysmap-edge-num { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--primary); margin-left: 0.3rem; }
.sysmap-edge-meta { font-size: 0.7rem; color: var(--slate); line-height: 1.45; margin-top: 0.15rem; }
.sysmap-edge-meta code { font-size: 0.68rem; }
.sysmap-edge-reason { font-size: 0.74rem; color: var(--rose); line-height: 1.45; margin-top: 0.2rem; }
.sysmap-edge-note { font-size: 0.74rem; color: var(--slate); line-height: 1.45; margin-top: 0.2rem; }
.sysmap-pill {
    display: inline-block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.56rem;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.4rem; border-radius: 5px; margin-left: 0.3rem;
    color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.sysmap-pill--partial { color: var(--gamboge-deep); background: color-mix(in srgb, var(--gamboge) 18%, transparent); }
.sysmap-pill--planned { color: var(--slate); background: color-mix(in srgb, var(--slate) 12%, transparent); }
.sysmap-pill--dead { color: var(--rose); background: color-mix(in srgb, var(--rose) 14%, transparent); }
.sysmap-pill--disputed { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }

/* ── narrow screens ── */

/* A narrower main area squeezes the boxes column hardest, and a band wrapping
   into three rows makes the page enormous. Give the column back some width by
   trimming the caption and the routing gutter. */
@media (max-width: 1100px) {
    .sysmap-view { padding: 1.1rem 1.25rem 2rem; }
    .sysmap-band { grid-template-columns: minmax(120px, 160px) 1fr 84px; gap: 0.5rem 1rem; }
}
@media (max-width: 900px) {
    .sysmap-schema-grid { grid-template-columns: 1fr; }
    .sysmap-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
    .sysmap-view { padding: 1rem 1.1rem 2rem; }
    .sysmap-band { grid-template-columns: 1fr; gap: 0.4rem; }
    .sysmap-band-gutter { display: none; }
    .sysmap-box { max-width: none; }
}

/* ── Focus view (/map/<kind>) ── */

.sysfocus-bar { margin: 0.2rem 0 0.9rem; max-width: 420px; }
.sysfocus-find { width: 100%; }

.sysfocus-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0 0 1rem; }
.sysfocus-crumb {
    background: none; border: none; padding: 0.15rem 0.3rem; font: inherit; font-size: 0.8rem;
    color: var(--primary); cursor: pointer; border-radius: 6px;
}
.sysfocus-crumb:hover { background: var(--bg-elevated); }
.sysfocus-crumb + .sysfocus-crumb::before { content: '\203A'; color: var(--slate); margin-right: 0.35rem; }
.sysfocus-crumb--here { color: var(--charcoal); font-weight: 600; cursor: default; }

.sysfocus-stage {
    position: relative;
    display: grid; grid-template-columns: 1fr minmax(240px, 320px) 1fr;
    column-gap: 64px; row-gap: 0.5rem; align-items: center;
}
.sysfocus-wire { fill: none; stroke-width: 1.6; opacity: 0.5; }
.sysfocus-wire--live { stroke: var(--primary); }
.sysfocus-wire--partial { stroke: var(--gamboge); }
.sysfocus-wire--planned { stroke: var(--slate); stroke-dasharray: 5 4; }
.sysfocus-wire--dead { stroke: var(--rose); stroke-dasharray: 2 4; }
.sysfocus-wire--disputed { stroke: var(--violet); stroke-dasharray: 8 3; }

/* Both headings sit at the top of the stage while the rows stay centred on
   the middle card, so the two columns read as a pair rather than as two
   accidents of height. */
.sysfocus-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-self: stretch; }
.sysfocus-col-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.sysfocus-col-head {
    font-family: Montserrat, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--slate); margin: 0 0 0.5rem;
}
.sysfocus-col--in .sysfocus-col-head { text-align: right; }
.sysfocus-none { font-size: 0.82rem; color: var(--slate); margin: 0; }

.sysfocus-row {
    display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 10px;
    padding: 0.5rem 0.7rem; font: inherit; color: var(--charcoal); cursor: pointer; text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sysfocus-row:hover, .sysfocus-row:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); outline: none; }
.sysfocus-row--in { justify-content: flex-end; text-align: right; }
.sysfocus-row-name { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.92rem; }
.sysfocus-row-verb { font-size: 0.8rem; color: var(--slate); }
.sysfocus-row-num { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--primary); }
.sysfocus-row-state {
    font-size: 0.66rem; letter-spacing: 0.03em; text-transform: uppercase;
    font-family: Montserrat, sans-serif; font-weight: 700; color: var(--slate);
}
.sysfocus-row-src { flex-basis: 100%; font-size: 0.68rem; color: var(--slate); line-height: 1.4; }
.sysfocus-row-src code { font-size: 0.95em; }
.sysfocus-row--partial .sysfocus-row-state { color: var(--gamboge); }
.sysfocus-row--dead .sysfocus-row-state, .sysfocus-row--dead .sysfocus-row-verb { color: var(--rose); }
.sysfocus-row--dead .sysfocus-row-verb { text-decoration: line-through; }
.sysfocus-row--disputed .sysfocus-row-state { color: var(--violet); }

.sysfocus-hub {
    position: relative; z-index: 1;
    background: var(--bg-elevated); border: 2px solid var(--primary); border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem; text-align: center;
}
.sysfocus-hub-kicker {
    font-family: Montserrat, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--slate);
}
.sysfocus-hub-name { font-family: Montserrat, sans-serif; font-size: 1.35rem; margin: 0.25rem 0 0.4rem; color: var(--charcoal); }
.sysfocus-hub-one { font-size: 0.86rem; line-height: 1.5; color: var(--slate); margin: 0 0 0.6rem; }
.sysfocus-hub-num { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--primary); }
.sysfocus-hub-loop { font-size: 0.78rem; color: var(--slate); margin: 0.4rem 0 0; }
.sysfocus-hub-open {
    margin-top: 0.7rem; background: none; border: 1px solid var(--border-light); border-radius: 8px;
    padding: 0.35rem 0.7rem; font: inherit; font-size: 0.8rem; color: var(--primary); cursor: pointer;
}
.sysfocus-hub-open:hover { border-color: var(--primary); }

.sysfocus-starts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.sysfocus-start {
    display: flex; flex-direction: column; gap: 0.25rem; text-align: left; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 12px;
    padding: 0.75rem 0.85rem; font: inherit; color: var(--charcoal);
}
.sysfocus-start:hover, .sysfocus-start:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); outline: none; }
.sysfocus-start-name { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.95rem; }
.sysfocus-start-one { font-size: 0.78rem; color: var(--slate); line-height: 1.45; }

@media (max-width: 900px) {
    .sysfocus-stage { grid-template-columns: 1fr; column-gap: 0; row-gap: 1rem; }
    .sysfocus-row--in { justify-content: flex-start; text-align: left; }
    .sysfocus-hub { order: -1; }
}

/* ── Stages view (/stages) ── */

.sysstage-onramp { display: flex; align-items: center; gap: 0.9rem; margin: 0.6rem 0 1.3rem; flex-wrap: wrap; }
.sysstage-intake {
    display: flex; flex-direction: column; gap: 0.3rem; text-align: left; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 12px;
    padding: 0.75rem 0.9rem; font: inherit; color: var(--charcoal); max-width: 460px;
}
.sysstage-intake:hover, .sysstage-intake:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); outline: none; }
.sysstage-intake-label { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.95rem; }
.sysstage-intake-one { font-size: 0.8rem; color: var(--slate); line-height: 1.45; }
.sysstage-intake-steps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.sysstage-intake-steps span {
    font-size: 0.68rem; color: var(--slate); background: var(--bg-panel);
    border: 1px solid var(--border-light); border-radius: 999px; padding: 0.1rem 0.45rem;
}
.sysstage-onramp-arrow {
    flex: none; width: 34px; height: 2px; background: var(--border-light); position: relative;
}
.sysstage-onramp-arrow::after {
    content: ''; position: absolute; right: -1px; top: -4px;
    border: 5px solid transparent; border-left-color: var(--border-light);
}
.sysstage-onramp-note { font-size: 0.8rem; color: var(--slate); line-height: 1.45; max-width: 30ch; }

/* Seven columns, in spectrum order, each carrying its own stage colour. */
.sysstage-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem; align-items: stretch; }
.sysstage-col {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left;
    cursor: pointer; font: inherit; color: var(--charcoal); min-width: 0;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-top: 3px solid var(--stage); border-radius: 10px; padding: 0.6rem 0.65rem 0.7rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sysstage-col:hover, .sysstage-col:focus-visible { border-color: var(--stage); box-shadow: 0 0 0 1px var(--stage); outline: none; transform: translateY(-2px); }
.sysstage-col.is-open { border-color: var(--stage); box-shadow: 0 0 0 2px var(--stage); }
.sysstage-col.is-here { background: var(--rose-tint); }
.sysstage-n {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 20px; height: 20px; border-radius: 999px; background: var(--stage); color: #fff;
    font-family: Montserrat, sans-serif; font-size: 0.7rem; font-weight: 700;
}
.sysstage-name { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 0.84rem; line-height: 1.2; }
.sysstage-doing { font-size: 0.75rem; color: var(--slate); line-height: 1.4; }
.sysstage-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: auto; padding-top: 0.35rem; }
.sysstage-chip {
    font-size: 0.66rem; color: var(--charcoal); background: var(--bg-panel);
    border: 1px solid var(--border-light); border-radius: 999px; padding: 0.1rem 0.4rem;
}
.sysstage-chip--n { color: var(--slate); }
.sysstage-you {
    font-family: Montserrat, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--rose);
}

.sysstage-detail {
    margin-top: 0.9rem; background: var(--bg-elevated);
    border: 1px solid var(--border-light); border-left: 4px solid var(--stage);
    border-radius: 12px; padding: 0.9rem 1.1rem 1rem;
}
.sysstage-detail-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sysstage-detail-head h3 { font-family: Montserrat, sans-serif; font-size: 1.05rem; margin: 0; color: var(--charcoal); }
.sysstage-detail-short { font-size: 0.8rem; color: var(--slate); }
.sysstage-close {
    margin-left: auto; background: none; border: none; padding: 0.2rem 0.3rem; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: var(--primary); text-decoration: underline;
}
.sysstage-detail-feels { font-size: 0.86rem; line-height: 1.55; color: var(--charcoal); margin: 0.5rem 0 0.8rem; max-width: 78ch; }
.sysstage-detail-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.6rem; }
.sysstage-detail-cols h4 {
    font-family: Montserrat, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--slate); margin: 0 0 0.4rem;
}
.sysstage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sysstage-item {
    background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem;
    color: var(--primary); cursor: pointer; text-align: left;
}
.sysstage-item:hover { text-decoration: underline; }
.sysstage-item--plain { color: var(--charcoal); cursor: default; }
.sysstage-item--plain:hover { text-decoration: none; }
.sysstage-kindnote { font-size: 0.74rem; color: var(--slate); }
.sysstage-none { font-size: 0.82rem; color: var(--slate); margin: 0; }

@media (max-width: 1100px) {
    .sysstage-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sysstage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
    .sysstage-onramp-note { max-width: none; }
}

/* ── Story page, fitted to one screen ── */

.sysmap-density { display: inline-flex; gap: 0; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; margin: 0 0 0.8rem; }
.sysmap-density-btn {
    background: var(--bg-elevated); border: none; padding: 0.32rem 0.7rem; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: var(--slate);
}
.sysmap-density-btn + .sysmap-density-btn { border-left: 1px solid var(--border-light); }
.sysmap-density-btn.is-on { background: var(--primary); color: #fff; font-weight: 600; }
/* Two lines rather than three: the fitted map is spending its height on the
   map, so the sentence above it gives up its reading measure. */
.sysmap-lede--fit { font-size: 0.9rem; margin: 0 0 0.7rem; max-width: none; }

/* Fitted: the same bands, with each box down to its name and number and each
   band's padding cut to what a wire label no longer needs. */
/* Two columns, not three: the fitted map carries no band label, so the boxes
   take the width the column of restatements was using. */
.sysmap-stage--fit .sysmap-band { grid-template-columns: 1fr 116px; padding: 0.7rem 0 0.8rem; }
.sysmap-stage--fit .sysmap-band-boxes { gap: 0.45rem 0.7rem; }
.sysmap-box--mini {
    position: relative; flex: 1 1 150px; min-width: 130px; max-width: 240px;
    gap: 0.1rem; padding: 0.45rem 0.55rem;
}
.sysmap-box--mini .sysmap-box-label { font-size: 0.78rem; }
.sysmap-box--mini .sysmap-box-num { font-size: 0.63rem; margin-top: 0.1rem; }
.sysmap-box--mini.is-pinned { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.sysmap-box--mini.is-linked { border-color: var(--primary); background: var(--rose-tint); }
.sysmap-box--mini.is-faded { opacity: 0.32; }
.sysmap-box--mini.is-faded:hover, .sysmap-box--mini.is-faded:focus-visible { opacity: 1; }
.sysmap-stage--fit .sysmap-band-label { transition: opacity 0.15s; }
.sysmap-mini-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 999px; background: var(--rose); }

.sysmap-mdetail {
    margin-top: 1rem; background: var(--bg-elevated);
    border: 1px solid var(--border-light); border-left: 4px solid var(--primary);
    border-radius: 12px; padding: 0.8rem 1rem 0.9rem;
}
.sysmap-mdetail-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.sysmap-mdetail-head h3 { font-family: Montserrat, sans-serif; font-size: 1rem; margin: 0; color: var(--charcoal); }
.sysmap-mdetail-sub { font-size: 0.85rem; color: var(--slate); line-height: 1.5; margin: 0.35rem 0 0; max-width: 78ch; }
.sysmap-mdetail-own { font-size: 0.82rem; color: var(--charcoal); margin: 0.3rem 0 0; }
.sysmap-mdetail-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem 1.6rem; margin-top: 0.7rem; }
.sysmap-mdetail-cols h4 {
    font-family: Montserrat, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--slate); margin: 0 0 0.3rem;
}
.sysmap-outs--shown { display: block; }
.sysmap-outs--shown .sysmap-out { display: block; }

@media (max-width: 1100px) {
    .sysmap-mcols { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: 1.1rem; }
}
@media (max-width: 780px) {
    .sysmap-mcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sysmap-stage--fit { padding-bottom: 0; }
}