/* ICS A24 — visual direction "Precisión" (SPEC §2, decision #23)
   Implemented from the owner's Claude Design project (ui_kits/tablero).
   Rules: UI is black/grey. Orange = alerts & risk CTAs ONLY. Light green =
   data visualization ONLY. Never decorate with color. Structure comes from
   hairlines, not boxes: sections divide with 1px lines; metrics sit on left
   border-rules, not in cards. Fonts vendored locally (no CDN, on-prem). */

/* ---- fonts (vendored woff2, latin) ---- */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/schibstedgrotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/schibstedgrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/schibstedgrotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/schibstedgrotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 300; font-display: swap;
  src: url("/static/fonts/archivo-300.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibmplexmono-400.woff2") format("woff2"); }

/* ---- tokens (Precisión) ---- */
:root {
  /* base neutrals (the UI) */
  --ink: #111311;
  --grey-700: #4A504B;
  --grey-600: #6B716C;
  --grey-400: #A5AAA5;
  --border-strong: #D9DCD9;
  --line: #E9EBE9;
  --gridline: #F2F4F2;
  --wash: #F5F6F5;
  --paper: #FFFFFF;

  /* alert channel (orange) — alerts, overdue, risk CTAs only */
  --alert: #F0620D;
  --alert-2: #F5813B;
  --alert-ink: #B04A08;
  --alert-wash: #FDEBDD;

  /* data channel (light green) — charts & data marks only */
  --data: #9ED2B4;
  --data-2: #C9E5D4;
  --data-ink: #4E7A61;
  --data-wash: #E4F2EA;

  /* type */
  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-display: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type-figure-xl: 300 56px/1.05 var(--font-display);
  --type-figure-lg: 300 40px/1.05 var(--font-display);
  --type-figure-md: 300 26px/1.1 var(--font-display);
  --ls-figure: -0.03em;
  --type-page-title: 400 34px/1.05 var(--font-ui);
  --type-section-title: 600 15px/1.3 var(--font-ui);
  --ls-title: -0.025em;
  --type-ui: 500 13px/1.3 var(--font-ui);
  --type-ui-strong: 600 13px/1.3 var(--font-ui);
  --type-meta: 500 12px/1.4 var(--font-ui);
  --type-caption: 400 10.5px/1.4 var(--font-ui);
  --type-overline: 500 11px/1.3 var(--font-ui);
  --type-overline-sm: 500 10px/1.3 var(--font-ui);
  --ls-overline: 0.1em;
  --type-mono: 400 12px/1.5 var(--mono);

  /* geometry */
  --page-pad-x: 48px;
  --sidebar-w: 230px;
  --radius-pill: 24px;
  --radius-badge: 12px;
  --radius-data: 8px;
  --radius-mark: 3px;
  --border-control: 1.5px solid var(--border-strong);

  /* compatibility aliases (older templates) */
  --paper-2: var(--wash);
  --ink-2: var(--grey-600);
  --line-strong: var(--border-strong);
  --accent: var(--ink);
  --accent-ink: #FFFFFF;
  --warn: var(--alert-ink);
  --crit: var(--alert);
  --ok: var(--data-ink);
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); line-height: 1.5;
}
a { color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { color: var(--grey-600); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
h1 { font: var(--type-page-title); letter-spacing: var(--ls-title); margin: 0 0 6px; }
h1 + .sub { color: var(--grey-600); margin: 0 0 26px; font-size: .9rem; }
h2 { font: var(--type-section-title); color: var(--ink); margin: 36px 0 12px; }
h2 .sub { font: 400 12px var(--font-ui); color: var(--grey-600); }

/* ---- layout: sidebar + content ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: none; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 28px 0 24px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper);
}
.sidebar .brand { padding: 0 28px 24px; }
.sidebar .brand a { font: 700 17px var(--font-ui); color: var(--ink);
                    letter-spacing: -.02em; text-decoration: none; }
.sidebar .brand .tagline { font: var(--type-caption); color: var(--grey-400);
                           margin-top: 3px; }
.snav { display: flex; flex-direction: column; }
.snav a {
  display: flex; align-items: center; padding: 10px 28px;
  border-left: 3px solid transparent; font: var(--type-ui);
  color: var(--grey-600); text-decoration: none;
}
.snav a:hover { color: var(--ink); background: var(--wash); }
.snav a.on { border-left-color: var(--ink); background: var(--wash);
             font: var(--type-ui-strong); color: var(--ink); }
.scount { margin-left: auto; font: 700 10px var(--font-ui); color: #fff;
          background: var(--alert); border-radius: var(--radius-badge);
          padding: 2px 8px; }
.sdiv { height: 1px; background: var(--line); margin: 18px 28px; }
.sgroup { padding: 0 28px; margin-bottom: 6px; }
.sgroup .glabel { font: var(--type-overline-sm); letter-spacing: .12em;
                  color: var(--grey-400); text-transform: uppercase;
                  margin: 12px 0 4px; }
.sgroup a { display: block; font: var(--type-ui); color: var(--grey-600);
            padding: 6px 0; text-decoration: none; }
.sgroup a:hover { color: var(--ink); }
.sgroup a.on { color: var(--ink); font: var(--type-ui-strong); }
.sboot { margin-top: auto; padding: 18px 28px 0; border-top: 1px solid var(--line); }
.sboot .who { display: flex; align-items: center; gap: 10px; }
.sboot .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink);
                 color: #fff; display: grid; place-items: center;
                 font: 700 11px var(--font-ui); flex: none; text-transform: uppercase; }
.sboot .cname { font: 600 12px var(--font-ui); color: var(--ink);
                max-width: 130px; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.sboot .cmeta { font: var(--type-caption); color: var(--grey-400); }
.sboot .links { display: flex; gap: 12px; margin-top: 12px; align-items: center;
                font: var(--type-meta); }
.sboot .links a { color: var(--grey-600); text-decoration: none; }
.sboot .links a:hover, .sboot .links a.on { color: var(--ink); }
.mode-tag { font: var(--type-overline-sm); letter-spacing: .1em; color: var(--alert-ink);
            text-transform: uppercase; margin-top: 8px; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; padding: 36px var(--page-pad-x) 70px; }
footer { border-top: 1px solid var(--line); color: var(--grey-400);
         font: var(--type-caption); padding: 16px var(--page-pad-x); }

@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row;
             flex-wrap: wrap; align-items: center; gap: 0 4px;
             border-right: 0; border-bottom: 1px solid var(--line);
             padding: 12px 16px; }
  .sidebar .brand { padding: 0 16px 0 0; }
  .snav { flex-direction: row; flex-wrap: wrap; }
  .snav a { padding: 7px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .snav a.on { border-bottom-color: var(--ink); background: transparent; }
  .sdiv, .sgroup .glabel { display: none; }
  .sgroup { display: flex; gap: 2px; padding: 0; margin: 0; }
  .sgroup a { padding: 7px 10px; }
  .sboot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sboot .who { display: none; }
  .sboot .links { margin: 0; }
  main, footer { padding-left: 20px; padding-right: 20px; }
  :root { --page-pad-x: 20px; }
}

/* ---- full-bleed hairline sections (dashboard) ---- */
.rule-section { border-top: 1px solid var(--line);
                margin: 0 calc(-1 * var(--page-pad-x));
                padding: 28px var(--page-pad-x); }

.authority-banner {
  border: 1px solid var(--alert-2); color: var(--alert-ink);
  background: var(--alert-wash); border-radius: var(--radius-data);
  padding: 10px 16px; margin-bottom: 18px; font: var(--type-ui-strong);
}

/* ---- flash ---- */
.flash { margin: 14px var(--page-pad-x) 0; padding: 11px 18px;
         font: var(--type-ui-strong); border: 1px solid; border-radius: var(--radius-data); }
.flash-ok { color: var(--data-ink); border-color: var(--data); background: var(--data-wash); }
.flash-error { color: var(--alert-ink); border-color: var(--alert-2); background: var(--alert-wash); }

/* ---- tables: hairlines, not boxes ---- */
table { border-collapse: collapse; width: 100%; margin: 10px 0 22px;
        background: var(--paper); font-size: .87rem; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left;
         vertical-align: top; }
th { font: var(--type-overline); letter-spacing: var(--ls-overline);
     text-transform: uppercase; color: var(--grey-600); white-space: nowrap;
     border-bottom: 1px solid var(--border-strong); background: var(--paper); }
tr:hover td { background: var(--wash); }
td.r, th.r { text-align: right; }
.num, td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums;
                font-size: .82rem; }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--border-strong); }
.table-wrap table { margin: 0; }

/* status */
.s-critical { color: var(--alert-ink); font-weight: 700; }
.s-warn { color: var(--alert-ink); font-weight: 600; }
.s-ok { color: var(--data-ink); }
.badge { display: inline-block; border-radius: var(--radius-badge);
         padding: 2px 10px; font: 600 11px var(--font-ui);
         text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; }
.badge-critical { color: #fff; background: var(--alert); }
.badge-high { color: var(--alert-ink); background: var(--alert-wash);
              border-color: var(--alert-2); }
.badge-warn { color: var(--alert-ink); background: var(--alert-wash); }
.badge-info { color: var(--grey-600); background: var(--wash);
              border-color: var(--line); }
.badge-ok { color: var(--data-ink); background: var(--data-wash); }
tr.row-crit td { background: var(--alert-wash); }
tr.row-muted td { color: var(--grey-400); }
.neg { color: var(--alert-ink); font-weight: 600; }

/* ---- metrics: left border-rules, not cards ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 26px 0; margin: 26px 0 30px; }
.tile { border-left: 1px solid var(--line); padding: 2px 24px 0 22px;
        background: transparent; }
.tile .k { font: var(--type-overline); letter-spacing: var(--ls-overline);
           text-transform: uppercase; color: var(--grey-600); margin-bottom: 10px; }
.tile .v { font: var(--type-figure-md); letter-spacing: var(--ls-figure);
           color: var(--ink); font-variant-numeric: tabular-nums; }
.tile .d { font: var(--type-meta); color: var(--grey-600); margin-top: 8px; }
.tile.crit { border-left: 3px solid var(--alert); }
.tile.crit .k { color: var(--alert-ink); }
.tile.crit .v { color: var(--alert); }
.tile.warn { border-left: 3px solid var(--alert-2); }
.tile.warn .k { color: var(--alert-ink); }
.tile.warn .v { color: var(--alert-ink); }

/* ---- charts ---- */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.chart { margin: 0; padding: 0; border: 0; background: transparent; }
.chart figcaption { font: var(--type-section-title); color: var(--ink);
                    margin-bottom: 12px; text-transform: none; letter-spacing: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.bar { fill: var(--data); }
.bar-critical { fill: var(--alert); }
.bar-row:hover .bar { fill: var(--data-ink); }
.bar-row:hover .bar-critical { fill: var(--alert-ink); }
.bar-label { font-size: 10px; fill: var(--grey-600); font-family: var(--font-ui); }
.bar-value { font-size: 10.5px; fill: var(--ink); font-family: var(--font-display); }
.empty { color: var(--grey-400); }
.legend { display: flex; gap: 18px; flex-wrap: wrap;
          font: 500 11.5px var(--font-ui); color: var(--grey-600); }
.legend .sw { width: 10px; height: 10px; border-radius: var(--radius-mark);
              display: inline-block; }
.legend span { display: flex; align-items: center; gap: 6px; }

/* ---- forms ---- */
form.panel, .panel { background: var(--paper); border: 1px solid var(--line);
                     border-radius: var(--radius-data); padding: 20px 22px;
                     margin: 14px 0 22px; }
.frow { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.fld { display: flex; flex-direction: column; gap: 4px;
       font: var(--type-meta); color: var(--grey-600); min-width: 130px; }
.fld input, .fld select, .fld textarea {
  border: var(--border-control); border-radius: var(--radius-data);
  background: var(--paper); padding: 8px 11px; font: 400 13px var(--font-ui);
  color: var(--ink); min-width: 0;
}
.fld input:focus, .fld select:focus { outline: 2px solid var(--ink);
                                      outline-offset: 1px; }
button, .btn {
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill); padding: 9px 20px;
  font: 600 13px var(--font-ui); cursor: pointer; text-decoration: none;
  display: inline-block; transition: background 140ms cubic-bezier(.4,0,.2,1);
}
button:hover, .btn:hover { background: var(--grey-700); border-color: var(--grey-700);
                           color: #fff; text-decoration: none; }
button.secondary, .btn.secondary { background: transparent; color: var(--ink);
  border: var(--border-control); }
button.secondary:hover, .btn.secondary:hover { background: var(--wash);
  color: var(--ink); border-color: var(--grey-400); }
button.danger { background: var(--alert); border-color: var(--alert); }
button.danger:hover { background: var(--alert-ink); border-color: var(--alert-ink); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
           margin: 14px 0; }
.toolbar { display: flex; gap: 14px; align-items: center;
           justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar form { display: flex; gap: 8px; align-items: center; }
input[type="search"], select {
  border: var(--border-control); border-radius: var(--radius-pill);
  padding: 7px 14px; font: 400 13px var(--font-ui); background: var(--paper);
  color: var(--ink); }

/* ---- misc ---- */
.mono { font-family: var(--mono); font-size: .92em; }
.chip { border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
        padding: 2px 11px; font: var(--type-overline-sm); letter-spacing: .05em;
        text-transform: uppercase; color: var(--grey-600); }
.login-box { max-width: 380px; margin: 110px auto; padding: 0 24px; }
.login-box h1 { margin-bottom: 4px; }
.login-box .fld { margin-bottom: 14px; }
.wiki-body { border-top: 1px solid var(--border-strong); padding: 26px 0;
             max-width: 860px; }
.wiki-body table { font-size: .85rem; }
.wiki-body code { background: var(--wash); border-radius: var(--radius-mark);
                  padding: 1px 6px; font-family: var(--mono); font-size: .84em; }
.wiki-body pre { background: var(--wash); border-radius: var(--radius-data);
                 padding: 14px; overflow-x: auto; }
.pill-tier-legal { color: var(--alert-ink); font-weight: 700; }
.pill-tier-system { color: var(--ink); font-weight: 700; }
.pill-tier-client { color: var(--data-ink); font-weight: 700; }
details summary { cursor: pointer; font-weight: 600; }

/* ============================================================= Mapa
   (SPEC_MAPA §4) — the subway canvas. Line colors are FUNCTIONAL encoding
   (which flow), not decoration; RAG is always color+shape+word. */
.map-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.map-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-seed { width: 70px; }
.map-run-select { max-width: 240px; }

.map-stage { position: relative; height: calc(100vh - 220px); min-height: 420px;
  border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.map-canvas, .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-svg { cursor: grab; font-family: var(--font-ui); outline: none; }
.map-svg:active { cursor: grabbing; }
.map-stage.editing .map-station { cursor: move; }

.zones, .mode-glyphs { pointer-events: none; } /* decorative layers never block clicks */
.map-zone-label { font: var(--type-overline); letter-spacing: var(--ls-overline); }
.map-seg { opacity: 0.9; }
.map-mode-dot { fill: var(--paper); stroke: var(--border-strong); stroke-width: 1; }
.map-mode-glyph { font-size: 9px; fill: var(--grey-600); }

.map-station { cursor: pointer; }
.map-station-circle { fill: var(--paper); stroke-width: 3.5; }
.map-station-inter-outer { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.map-station:hover .map-station-circle,
.map-station:hover .map-station-inter-outer { stroke-width: 5; }
.map-station-glyph { font-size: 9px; fill: var(--grey-700); pointer-events: none; }
.map-station-label { font-size: 12.5px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3px;
  stroke-linejoin: round; pointer-events: none; }
.map-station-cc { font-weight: 500; fill: var(--grey-600); font-size: 10.5px; }
.map-badge-bg { fill: var(--paper); stroke: var(--line); }
.map-badge-text { font-size: 10.5px; font-weight: 600; }

.map-pin { cursor: pointer; display: none; }
.map-svg.zoomed-in .map-pin { display: initial; }
.map-pin-circle { fill: var(--paper); stroke-width: 2.5; }
.map-pin:hover .map-pin-circle { stroke-width: 4; }
.map-pin-num { font-size: 9px; font-weight: 600; fill: var(--ink); pointer-events: none; }
.map-svg.zoomed-out .map-station-glyph,
.map-svg.zoomed-out .map-badge-bg, .map-svg.zoomed-out .map-badge-text { display: none; }

.map-controls { position: absolute; left: 12px; bottom: 12px; display: flex;
  flex-direction: column; gap: 4px; z-index: 5; }
.map-controls button { width: 34px; height: 34px; padding: 0; background: var(--paper);
  color: var(--ink); border: 1px solid var(--border-strong); font-size: 16px; }
.map-controls button:hover { background: var(--wash); color: var(--ink); }
.map-edit-on { background: var(--ink) !important; color: var(--paper) !important; }

.map-legend { position: absolute; right: 12px; top: 12px; z-index: 5;
  background: var(--paper); border: 1px solid var(--line); padding: 10px 14px;
  max-width: 260px; font: var(--type-meta); }
.map-legend-h { font: var(--type-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--grey-600); margin-bottom: 4px; }
.map-legend-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.map-legend-rag { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: baseline; font-size: 11px; }
.map-legend-edit { margin-top: 8px; color: var(--alert-ink); font-size: 11px; }
.mp-line-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex: none; }
.mp-line-dot-all { background: var(--grey-400); }

/* station panel (overlay right, map stays visible) */
.map-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92%);
  background: var(--paper); border-left: 1px solid var(--border-strong);
  box-shadow: none; z-index: 8; overflow-y: auto; }
.map-panel-body { padding: 18px 20px 40px; }
.mp-head { position: relative; border-bottom: 1px solid var(--line);
  padding-bottom: 10px; margin-bottom: 10px; }
.mp-head h2 { margin: 2px 0; }
.mp-kind { font: var(--type-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--grey-600); }
.mp-country { border: 1px solid var(--line); padding: 0 5px; margin-left: 6px; }
.mp-close { position: absolute; right: 0; top: 0; width: 30px; height: 30px;
  padding: 0; background: transparent; color: var(--grey-600);
  border: 1px solid var(--line); }
.mp-notes { color: var(--grey-700); }
.mp-toolbar { margin: 10px 0; }
.mp-vars { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
  font: var(--type-meta); border-left: 2px solid var(--line); padding-left: 10px;
  margin: 10px 0; }
.mp-vars dt { color: var(--grey-600); }
.mp-vars dd { margin: 0; }
.mp-line-h { display: flex; gap: 8px; align-items: center;
  font: var(--type-section-title); margin: 16px 0 6px; }
.mp-step { border: 1px solid var(--line); margin-bottom: 6px; }
.mp-step summary { display: flex; gap: 8px; align-items: center; padding: 8px 10px;
  cursor: pointer; list-style: none; }
.mp-step summary::-webkit-details-marker { display: none; }
.mp-step[open] summary { border-bottom: 1px solid var(--line); background: var(--wash); }
.mp-step-seq { color: var(--grey-400); min-width: 16px; }
.mp-step-title { flex: 1; font-weight: 600; }
.mp-step-body { padding: 10px 12px; }
.mp-sop { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px;
  font-size: 13px; }
.mp-sop dt { color: var(--grey-600); font-weight: 500; }
.mp-sop dd { margin: 0; }
.mp-gap { color: var(--alert-ink); }
.rag-verde { color: #4E7A61; } .rag-ambar { color: #B08A2E; }
.rag-rojo { color: #B04A08; } .rag-sin_dato { color: var(--grey-400); }
.mp-io { display: flex; gap: 14px; margin: 10px 0; }
.mp-io-col { flex: 1; border: 1px solid var(--line); padding: 8px 10px; }
.mp-io-h { font: var(--type-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--grey-600); margin-bottom: 4px; }
.mp-io-item, .mp-doc { font-size: 13px; padding: 2px 0; }
.mp-docs, .mp-handoffs { margin: 10px 0; }
.mp-hand { font-size: 13px; padding: 2px 0; }
.mp-cond { border: 1px solid var(--border-strong); padding: 0 6px; margin-left: 6px;
  font: var(--type-meta); }
.mp-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.mp-link { font-size: 12px; padding: 4px 10px; }

/* walkthrough bar */
.map-simbar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6;
  display: flex; gap: 10px; align-items: center; background: var(--paper);
  border: 1px solid var(--border-strong); padding: 8px 12px; }
.map-simbar[hidden] { display: none; } /* display:flex must not defeat [hidden] */
.map-simbar input[type=range] { flex: 1; }
#sim-caption { font: var(--type-meta); color: var(--grey-700); min-width: 180px; }
.sim-caption-incident { color: var(--alert-ink) !important; font-weight: 600; }
#sim-play, #sim-close { width: 34px; padding: 4px 0; }
.map-traveler { stroke: var(--paper); stroke-width: 2; }
.map-traveler-incident { stroke: var(--alert); stroke-width: 3; }

/* wide form fields for the step editor */
.fld-wide { flex: 1 1 320px; }
.fld-wide textarea { width: 100%; resize: vertical; }
.map-line-panel { margin-bottom: 14px; }
.map-stops-table { margin: 10px 0; }

@media (max-width: 900px) {
  .map-stage { height: calc(100vh - 300px); }
  .map-panel { width: 100%; }
}

/* v1.23 — parties, doc files, freshness */
.map-badge-stale { stroke: var(--alert-2); }
.map-pin-stale { stroke-dasharray: 3 2.5; }
.mp-file { display: inline-block; border: 1px solid var(--line); padding: 1px 7px;
  margin-left: 6px; font: var(--type-meta); }
.fld-check { flex-direction: row; align-items: center; gap: 8px; }
.fld-check input { width: auto; }
.chk { font: var(--type-meta); white-space: nowrap; }
.row-muted td { color: var(--grey-400); }

/* v1.24 — terminal stations (nested maps) */
.map-terminal-outer { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.map-terminal-inner { fill: var(--paper); stroke-width: 3; }
.map-terminal:hover .map-terminal-outer { stroke-width: 3.5; }
.map-terminal-label { font-size: 13.5px; font-weight: 700; }
.mp-terminal { border: 1px solid var(--border-strong); padding: 10px 12px;
  margin: 10px 0; }
.mp-terminal-sum { font: var(--type-meta); color: var(--grey-700);
  margin: 4px 0 2px; }

/* v1.24.1 — single-color SVG icon sprite (owner request: no emoji) */
.mi { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
button .mi { vertical-align: -2.5px; }
.map-station-icon { color: var(--grey-700); pointer-events: none; }
.map-terminal .map-station-icon { color: var(--ink); }
.map-mode-icon { color: var(--grey-600); pointer-events: none; }
.map-badge-clock { color: var(--alert-ink); pointer-events: none; }
.map-legend .mi { vertical-align: -2px; }
.mp-io-h .mi { vertical-align: -2px; }