/* mindzie New Studio - container UI.
   Tokens are the ones in mindzieNewStudio/docs/design-tokens.css, ported verbatim.
   Every value below comes from a token. No hex literals outside :root. */

:root{
  --navy:#16222d; --navy2:#0d1b2a; --rail-active:#22303d;
  --teal:#18b6c0; --teal-dk:#0e8f98; --teal-soft:#e6f7f8; --teal-line:#bfe9ec;
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1a2430; --mut:#68758f;
  --line:#e2e8ef; --line-soft:#eef2f6; --zebra:#f8fafc;
  --rail-text:#c3cdd6; --rail-label:#5f7181; --rail-dim:#7d8fa0;
  --rail-hover:#1b2936; --rail-line:#22303d; --rail-chip:#2b3b4a; --rail-chip-tx:#9fb0bf;
  --ok:#1a7a3d; --ok-bg:#e3f4e8; --ok-bd:#8fcea7;
  --warn:#9a6a06; --warn-bg:#fdf2dc; --warn-bd:#e9c667;
  --bad:#b02a2a; --bad-bg:#fbe8e8; --bad-bd:#eab8b8;
  --code-bg:#0d1b2a; --code-tx:#c9e6ea;
  --font-ui:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:Consolas,Menlo,"JetBrains Mono",ui-monospace,monospace;
  --rail-w:252px; --assist-w:318px; --content-max:1500px;
  --r-md:9px; --r-lg:11px; --r-card:12px; --r-xl:14px; --r-pill:20px; --r-btn:22px;
  --shadow-hover:0 8px 24px rgba(13,27,42,.10);
  --shadow-input:0 6px 22px rgba(13,27,42,.07);
  --ease:cubic-bezier(.2,0,0,1);
  --ring:0 0 0 3px rgba(24,182,192,.28);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.app{display:flex;min-height:100vh}

/* ---------- rail ---------- */
.rail{width:var(--rail-w);background:var(--navy);flex-shrink:0;display:flex;flex-direction:column;
  padding-bottom:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;gap:11px;align-items:center;padding:18px 18px 16px}
.logo .mk{width:38px;height:38px;border-radius:var(--r-md);background:var(--teal);color:#03282c;
  font-weight:800;font-size:21px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif}
.logo .nm{color:#fff;font-weight:700;font-size:15.5px;line-height:1.15}
.logo .sb{color:var(--rail-dim);font-size:8.5px;letter-spacing:1.6px;font-weight:600}
.railsec{color:var(--rail-label);font-size:9.5px;letter-spacing:1.5px;font-weight:700;padding:14px 20px 6px}
.ritem{display:flex;gap:11px;align-items:center;color:var(--rail-text);padding:9px 18px;
  font-size:13.5px;border-left:3px solid transparent;cursor:pointer;transition:background 150ms var(--ease)}
.ritem:hover{background:var(--rail-hover);color:#fff}
.ritem.on{background:var(--rail-active);color:#fff;border-left-color:var(--teal);font-weight:600}
.ritem .n{margin-left:auto;font-size:10.5px;background:var(--rail-chip);border-radius:10px;
  padding:1px 8px;color:var(--rail-chip-tx)}
.ritem .hint{margin-left:auto;font-size:9.5px;color:var(--rail-dim);font-style:italic}
.railfoot{margin-top:auto;padding:14px 18px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--rail-line)}
.railfoot .av{width:32px;height:32px;border-radius:50%;background:var(--rail-chip);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.railfoot .nm{color:#fff;font-size:12.5px;font-weight:600}
.railfoot .tn{color:var(--rail-dim);font-size:11px}

/* ---------- main ---------- */
.main{flex:1;min-width:0}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:10px 26px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:5}
.crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;color:var(--mut);text-transform:uppercase}
.sp{flex:1}
.pill{border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 14px;font-size:12.5px;background:var(--panel)}
.pill.dark{background:var(--navy2);color:#fff;border-color:var(--navy2);font-weight:600}
.content{padding:26px 34px 60px;max-width:var(--content-max);margin:0 auto}

h1.pt{font-size:23px;margin:0 0 3px;color:var(--navy2);font-weight:700}
.psub{color:var(--mut);font-size:13px;margin:0 0 20px;max-width:80ch}
h2.sec{font-size:16px;color:var(--navy2);margin:0 0 12px;font-weight:700}

/* ---------- components ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);margin-bottom:16px}
.card .hd{padding:13px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px;
  color:var(--navy2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .bd{padding:15px 20px}
.card .bd.tight{padding:8px 20px}

.statrow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:13px 18px;min-width:150px;flex:1;max-width:250px}
.stat .l{color:var(--mut);font-size:11.5px;margin-bottom:6px}
.stat .n{font-size:26px;font-weight:700;color:var(--navy2);line-height:1;font-variant-numeric:tabular-nums}
.stat .d{font-size:11px;margin-top:6px;color:var(--mut)}

.btn{display:inline-block;background:var(--navy2);color:#fff;border:none;border-radius:var(--r-btn);
  padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.btn.teal{background:var(--teal);color:#03282c}
.btn.ghost{background:var(--panel);color:var(--navy2);border:1px solid var(--line)}
.btn.sm{padding:6px 14px;font-size:12px}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring)}

.chip{display:inline-block;border-radius:var(--r-pill);padding:2px 11px;font-weight:700;font-size:10.5px;
  border:1px solid;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}
.chip.ai{background:var(--teal-soft);color:var(--teal-dk);border-color:var(--teal-line)}

table.grid{border-collapse:collapse;width:100%;font-size:13px}
table.grid th{text-align:left;color:var(--mut);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  font-weight:700;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.grid tr:last-child td{border-bottom:none}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
tr.click{cursor:pointer}
tr.click:hover{background:var(--zebra)}

.bar{height:9px;border-radius:5px;background:var(--teal);display:inline-block;vertical-align:middle}
.bartrack{background:var(--line-soft);border-radius:5px;height:9px;width:120px;display:inline-block;
  vertical-align:middle;overflow:hidden}
.bartrack .bar{display:block}

.tablewrap{overflow-x:auto}
.scrollpanel{max-height:520px;overflow-y:auto}
.mut{color:var(--mut)}
.mono{font-family:var(--font-mono)}
.small{font-size:12px}

/* prompt box - the product's signature control */
.promptbox{display:flex;background:var(--panel);border:2px solid var(--navy2);border-radius:var(--r-xl);
  padding:6px 6px 6px 18px;align-items:center;gap:12px;box-shadow:var(--shadow-input)}
.promptbox input{flex:1;border:none;outline:none;font-size:15.5px;font-family:inherit;background:transparent;color:var(--ink)}
.promptbox .spark{width:20px;height:20px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-width:1.7}
.sugg{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.sg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 15px;
  font-size:12.5px;color:var(--navy2);cursor:pointer}
.sg:hover{border-color:var(--teal);background:var(--teal-soft)}

/* module grid on home - NOT ".grid": that collided with table.grid and
   silently turned every table into a CSS grid (header beside the first row). */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:28px}
.mod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 18px 14px;
  cursor:pointer;transition:box-shadow 150ms var(--ease),border-color 150ms var(--ease);display:block}
.mod:hover{box-shadow:var(--shadow-hover);border-color:#c8d4df}
.mod .mt{font-weight:700;font-size:15px;color:var(--navy2)}
.mod .md{font-size:12px;color:var(--mut);min-height:32px;margin:4px 0 10px}
.mod .mf{font-size:11.5px;color:var(--mut);font-family:var(--font-mono)}

/* data strip */
.datastrip{background:var(--navy);border-radius:var(--r-xl);color:#fff;padding:16px 22px;display:flex;
  align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 26px}
.ds-step{background:var(--teal);color:#03282c;font-size:10px;font-weight:800;letter-spacing:1px;
  border-radius:6px;padding:3px 9px}
.ds-title{font-weight:700;font-size:15px}
.ds-title .sub{display:block;font-weight:400;font-size:11.5px;color:var(--rail-chip-tx)}
.ds-ocel{display:flex;gap:8px;align-items:center;background:var(--navy2);border:1px solid var(--rail-chip);
  border-radius:var(--r-md);padding:8px 14px}
.ds-ocel .tag{font-family:var(--font-mono);font-weight:700;color:var(--teal);font-size:13px}
.ds-num{text-align:center}
.ds-num .n{font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ds-num .l{font-size:10px;color:var(--rail-chip-tx);text-transform:uppercase;letter-spacing:.6px}
.ds-gap{margin-left:auto;display:flex;gap:18px;align-items:center}

/* map tools */
.maptools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.slider{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:5px 15px}
.slider input[type=range]{width:110px;accent-color:var(--teal)}
.slider b{color:var(--navy2);font-family:var(--font-mono);min-width:22px;text-align:right}
.canvas{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:10px;overflow:auto}

/* The map viewport controls and full screen (8646). */
.mapbar{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.mapbar-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.3px;
  text-transform:uppercase;font-weight:700;color:var(--mut);margin-right:4px}
.mapbar-z{font-family:var(--font-mono);font-size:11.5px;color:var(--mut);
  min-width:5ch;text-align:center}
/* Full screen takes the map AND its controls over the whole screen. Taking only
   the canvas left no toolbar and no visible way back out.
   The canvas keeps its own scrollbars, so a map larger than the screen is still
   reachable rather than cropped - the point of the button is more room, not a
   different way to lose the edges. */
.mapview.fullscreen{background:var(--bg);padding:12px 16px;
  display:flex;flex-direction:column;width:100vw;height:100vh}
.mapview.fullscreen .canvas{flex:1;min-height:0}
/* The map keeps the size the layout asked for and .canvas scrolls to it.
   This rule used to say max-width:100%;height:auto, which scaled a wide map
   down to the card width - at 1,881px the activity names came out four
   pixels tall. Scrolling to a big map beats shrinking it to unreadable. */
.canvas svg{max-width:none}
.canvas .pm-node{cursor:pointer}
/* An edge's count bubble and a repeat loop are click targets too (8621). */
.canvas .pm-edge-label,.canvas .pm-self-loop{cursor:pointer}
.canvas .pm-edge-label:hover rect,.canvas .pm-self-loop:hover path{stroke:var(--teal);stroke-width:1.4px}
.canvas .pm-edge-label.pm-selected rect{stroke:var(--teal)!important;stroke-width:1.8px!important}
.canvas .pm-self-loop.pm-selected path{stroke:var(--teal)!important;stroke-width:2.4px!important}
.canvas .pm-node:hover{opacity:.82}
.canvas .pm-selected rect,.canvas .pm-selected path{stroke:var(--teal)!important;stroke-width:2.5px!important}
.perf{font-family:var(--font-mono);font-size:11px;color:var(--mut);margin-top:8px}
/* What the sliders are hiding, said on the map itself (8540). Not in the muted
   perf type - a reader who does not notice this line will read a third of a
   process as the whole of one. */
.coverage{font-size:12.5px;color:var(--ink);background:var(--teal-soft);
  border:1px solid var(--teal-line);border-radius:var(--r-md);
  padding:7px 12px;margin-top:10px}

/* variant strand */
.vseq{display:flex;gap:2px;flex-wrap:wrap}
.vseq span{background:var(--teal-soft);border:1px solid var(--teal-line);color:var(--teal-dk);
  border-radius:4px;padding:1px 6px;font-size:10.5px;white-space:nowrap}

/* Filter chips (8540). One line saying "Filtered to X" could only describe a
   single filter and could only clear all of it; each chip says what one
   filter is and takes only itself off. */
.chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.chips-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.3px;
  text-transform:uppercase;font-weight:700;color:var(--mut)}
.fchip{display:inline-flex;gap:7px;align-items:center;background:var(--teal-soft);
  border:1px solid var(--teal-line);border-radius:var(--r-pill);
  padding:4px 6px 4px 12px;font-size:12.5px;color:var(--ink)}
.fchip-k{color:var(--teal-dk);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px}
.fchip-x{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--panel);
  color:var(--mut);font-size:13px;line-height:1;text-decoration:none}
.fchip-x:hover{background:var(--bad-bg);color:var(--bad)}
.filterbar{display:flex;gap:10px;align-items:center;background:var(--teal-soft);
  border:1px solid var(--teal-line);border-radius:var(--r-lg);padding:9px 16px;margin-bottom:14px;font-size:13px}
.filterbar b{color:var(--teal-dk)}

.callout{border-left:3px solid var(--teal);background:var(--teal-soft);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:12px 18px;margin-bottom:16px;font-size:13px}
.callout.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.callout .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  font-weight:700;color:var(--teal-dk);display:block;margin-bottom:4px}
.callout.bad .lbl{color:var(--bad)}

/* A table that has been cut says so. The warn family rather than the muted grey
   every other footnote uses: "some of this is not on the screen" is a state of
   the data in front of you, and a notice set in the same grey as the rest of the
   small print is a notice nobody reads. Style guide 2.2 - semantic colour is
   status only, and incomplete is a status. */
.trunc{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--warn);
  background:var(--warn-bg);border:1px solid var(--warn-bd);
  border-radius:var(--r-lg);padding:7px 12px}

pre.code{margin:0;background:var(--code-bg);color:var(--code-tx);border-radius:var(--r-md);padding:12px 15px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.55;overflow-x:auto}

.two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
/* A grid column defaults to min-width:auto, so it grows to whatever is inside
   it rather than letting that content scroll. Without this a 1,881px map made
   the left column 1,881px wide and pushed the drill-down panel off the page,
   which is how the fix for one problem quietly created the next one. */
.two>*{min-width:0}
/* The map screen splits differently from the rest (8648). Everywhere else two
   columns of comparable weight sit at 1.6fr/1fr, which on the map screen gave
   the drill-down panel 500px of a 1,300px row while the drawing had 527px and
   the card around it stood empty. The panel is a list of activities and a list
   of cases; it needs a readable column, not a share. So it gets a fixed one and
   the map gets everything else. */
.two.mapsplit{grid-template-columns:minmax(0,1fr) 320px}
/* The case view's two summary panels sit side by side and carry equal weight -
   one is where the time went, the other is how the case compares. */
.two.casesplit{grid-template-columns:1fr 1fr}
/* The case map is narrow - one case is one column of activities - so it takes a
   fixed share and the case fields sit beside it. The event table is below, at
   full width, because it is the widest and densest thing on the page. */
.two.casemap{grid-template-columns:minmax(0,1fr) 360px}
@media(max-width:1150px){.two.casemap{grid-template-columns:1fr}}
@media(max-width:1150px){.two.casesplit{grid-template-columns:1fr}}
@media(max-width:1150px){.two.mapsplit{grid-template-columns:1fr}}
@media(max-width:1150px){.two{grid-template-columns:1fr}}
.hist{display:flex;align-items:flex-end;gap:2px;height:120px}
.hist i{flex:1;background:var(--teal);border-radius:2px 2px 0 0;min-height:1px;display:block}

/* Data overview - 8623. Two chart shapes and a key-value table.
   Colours come from tokens only; .arr reuses the histogram teal already used by
   the cycle-time chart so the two read as the same product. */
.hist i.open{background:var(--teal-dk)}
.hist.pair{gap:3px}
.hist.pair .col{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%}
.hist.pair .col i{flex:1;border-radius:2px 2px 0 0;min-height:1px;display:block}
.hist.pair .col i.arr{background:var(--teal)}
.hist.pair .col i.done{background:var(--navy2)}
.legend{display:flex;gap:16px;margin-bottom:8px;font-size:12px;color:var(--mut)}
.legend i.sw{width:10px;height:10px;border-radius:2px;display:inline-block;
  margin-right:5px;vertical-align:middle}
.legend i.sw.arr{background:var(--teal)}
.legend i.sw.done{background:var(--navy2)}
.legend i.sw.open{background:var(--teal-dk)}
.grid.kv td:first-child{color:var(--mut)}
.grid.kv td{padding:5px 10px}

/* 8628 - the attribute value explorer. Two panes: every column of the log on the
   left, the selected column's distribution on the right. The tab strip is the
   mockup's own .tabs rule, taken as written rather than re-invented, because
   RESTYLE-CONSTRAINTS.md makes the mockup authoritative on visual language.
   Tokens only - no colour is written out here. */
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--panel);margin-bottom:14px}
.tabs a{padding:6px 16px;font-size:12px;font-weight:600;cursor:pointer;color:var(--mut)}
.tabs a.on{background:var(--navy2);color:#fff}

/* minmax(0,1fr) rather than 1fr: a grid track defaults to min-content, so a wide
   value table would push the pane out of the page instead of scrolling inside
   its own .tablewrap. */
.explorer{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.collist .bd{padding:6px 0;max-height:660px;overflow-y:auto}
.colgroup{font-size:9.5px;letter-spacing:1.3px;font-weight:700;color:var(--mut);
  padding:12px 16px 4px;text-transform:uppercase}
.colitem{display:block;padding:7px 16px;font-size:12.5px;color:var(--ink);
  border-left:3px solid transparent}
.colitem:hover{background:var(--zebra)}
.colitem.on{background:var(--teal-soft);border-left-color:var(--teal);
  font-weight:600;color:var(--navy2)}
.colitem .t{display:block;font-size:10.5px;color:var(--mut);font-family:var(--font-mono)}

.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--teal-soft);
  border:1px solid var(--teal-line);border-radius:var(--r-xl);padding:10px 16px;margin-bottom:14px}
.filterbar .lbl{font-size:9.5px;letter-spacing:1.3px;font-weight:700;
  color:var(--teal-dk);text-transform:uppercase}
table.grid th.tick,table.grid td.tick{width:28px;padding-right:0}
table.grid td.tick input{accent-color:var(--teal);cursor:pointer}
.filteract{display:flex;gap:14px;align-items:flex-start;padding:12px 0 4px}
.filteract .small{max-width:70ch}

/* map tabs - the three views of one log (UI_STYLE_GUIDE 5.11 segmented toggle) */
.maptabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);
  overflow:hidden;margin-bottom:14px;background:var(--panel)}
.maptabs .seg{padding:7px 18px;font-size:12.5px;color:var(--mut);border-right:1px solid var(--line);
  text-decoration:none;display:block}
.maptabs .seg:last-child{border-right:none}
.maptabs .seg.on{background:var(--navy2);color:#fff;font-weight:600}
.maptabs .seg.off{color:var(--line);cursor:not-allowed}
.maptabs a.seg:hover{background:var(--zebra);color:var(--navy2)}

/* what the diagram will not show - one line per statement, always present */
.says{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.say{font-size:12.5px;color:var(--ink);background:var(--zebra);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:9px 14px}
.say .lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  font-weight:700;color:var(--mut);margin-right:10px}

/* the lane chooser sits in the map-tools row and looks like the sliders do */
.slider select{border:none;background:transparent;font-family:inherit;font-size:11.5px;
  color:var(--navy2);font-weight:600;outline:none;max-width:34ch}

/* The BPMN canvas scrolls; it does not shrink.
   A discovered BPMN of twenty activities is several thousand pixels wide, and
   `max-width:100%` on the SVG - which is right for the process map - scaled it
   to a fifth of its size and made every task label unreadable. A diagram nobody
   can read is not a smaller diagram, it is no diagram. The page body still never
   scrolls sideways; this container does, per DESIGN_LAYOUT. */
.canvas.bpmn{max-height:70vh}
.canvas.bpmn svg{max-width:none;width:auto;height:auto}

/* ------------------------------------------------------------ the shell
   Added by the shell mission: the rail's divider, the not-built page, and the
   not-built module card on Home. Nothing above this line is modified.

   The look is deliberate. Every working screen in this product is white cards on
   a grey page. A screen that is not built is hatched, dashed and carries no card
   at all, so it cannot be mistaken for a working screen with nothing in it. */

.raildiv{height:1px;background:var(--rail-line);margin:14px 18px 8px}

.notbuilt{border:1px dashed var(--line);border-radius:var(--r-xl);padding:18px 22px 20px;
  margin-bottom:6px;background-color:var(--zebra);
  background-image:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 9px)}
.nb-label{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:2.2px;color:var(--navy2);background:var(--panel);
  border:2px solid var(--navy2);border-radius:var(--r-md);padding:4px 12px}
.nb-say{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink);max-width:80ch}

.nbpart{margin-top:22px;max-width:80ch}
.nbh{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--mut)}
.nbp{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.nbl{margin:0;padding-left:19px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.nbl li{margin-bottom:7px}
.nbl li:last-child{margin-bottom:0}

.mod.soon{border-style:dashed;background-color:var(--zebra);
  background-image:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 9px)}
.mod.soon:hover{box-shadow:none;border-color:var(--mut)}
.mod.soon .mt{color:var(--mut)}
.mod .mf.nb{font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
/* The train map's panels (8538).
   Severity colours reuse the ok/warn/bad tokens rather than adding new hues,
   because the map's own SVG grades severity with the same four steps and two
   palettes for one idea is how a screen starts contradicting itself.
   The tab strip is NOT here - it is `.maptabs .seg` above, written once and
   shared by all three views. */
.trainsvg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px;overflow:auto;max-height:1400px}
.trainsvg svg{display:block;width:100%;height:auto}
.chip.sev-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.chip.sev-note{background:var(--line-soft);color:var(--mut);border-color:var(--line)}
.chip.sev-medium{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.chip.sev-high{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-top:16px}
@media(max-width:1250px){.three{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.three{grid-template-columns:1fr}}