@import url('/fonts/fonts.css');
:root {
  color-scheme:dark;
  --bg:#080f15;
  --panel:#0c161f;
  --panel-2:#101e29;
  --border:#243746;
  --border-soft:#1a2a36;
  --text:#dbe6ef;
  --muted:#849bab;
  --subtle:#577183;
  --cyan:#78be20;
  --green:#5cdb83;
  --amber:#f1bd4d;
  --red:#ff626c;
  --gray:#8193aa;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --sans:'Barlow Condensed','Arial Narrow',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  min-height:100%;
  background:var(--bg)
}
body {
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  color:var(--text);
  background:radial-gradient(ellipse at 50% -25%,#182a36 0,transparent 65%),var(--bg)
}
button,input {
  font:inherit
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
button {
  touch-action:manipulation
}
a {
  color:inherit
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:600
}
button {
  border:0;
  background:none
}
.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  padding:12px;
  background:var(--cyan);
  color:var(--bg);
  z-index:1000
}
.skip-link:focus {
  top:10px
}
[hidden] {
  display:none!important
}
.masthead {
  min-height:74px;
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--border);
  padding:0 22px 0 18px;
  gap:26px;
  background:#0d1720d9
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  flex-shrink:0;
  font-size:29px;
  line-height:1;
  letter-spacing:.055em;
  font-weight:700
}
.brand-mark {
  width:28px;
  height:33px;
  color:var(--cyan);
  stroke-width:1.45
}
.brand-accent {
  color:var(--cyan)
}
.brand small {
  display:block;
  font-family:var(--mono);
  font-size:8px;
  font-weight:400;
  letter-spacing:.16em;
  margin-top:7px;
  color:var(--muted)
}
.territory {
  display:flex;
  align-items:center;
  gap:10px;
  font:10px var(--mono);
  color:#a8bdcc;
  white-space:nowrap;
  letter-spacing:.05em
}
.territory span {
  color:var(--subtle)
}
.top-nav {
  display:flex;
  align-items:stretch;
  margin:auto;
  align-self:stretch;
  gap:26px
}
.nav-link {
  position:relative;
  padding:0 0 2px;
  font-size:17px;
  white-space:nowrap;
  color:#9fb2c4;
  transition:color .15s
}
.nav-link:hover,.nav-link.active {
  color:var(--cyan)
}
.nav-contact {display:flex;align-items:center;gap:5px;text-decoration:none;color:#c5d9e4}
.nav-contact span {color:var(--cyan);font:10px var(--mono)}
.nav-link.active:after {
  content:'';
  height:2px;
  background:var(--cyan);
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  box-shadow:0 -2px 15px #78be2033
}
.nav-count {
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  margin-left:4px;
  font:9px var(--mono);
  background:#26323c;
  border-radius:2px;
  color:#b2c4d0
}
.header-status {
  display:flex;
  align-items:center;
  gap:21px;
  flex-shrink:0
}
.demo-badge {
  font:8px var(--mono);
  letter-spacing:.045em;
  color:#efb46a;
  border:1px solid #9b612d77;
  background:#492b151f;
  padding:7px 8px;
  border-radius:2px;
  white-space:nowrap
}
.clock {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:19px;
  border-left:1px solid var(--border);
  gap:5px
}
.clock time {
  font:13px var(--mono);
  letter-spacing:.05em
}
.clock small {
  font:8px var(--mono);
  color:var(--muted)
}
.workspace {
  display:grid;
  grid-template-columns:42px 208px minmax(320px,1fr) 320px;
  grid-template-rows:minmax(510px,calc(100svh - 360px)) 190px;
  gap:10px;
  padding:13px 14px 12px 10px;
  max-width:2400px;
  margin:auto
}
.panel {
  border:1px solid var(--border);
  border-radius:3px;
  background:linear-gradient(130deg,#111e28a3,#0b151de8);
  min-width:0;
  overflow:hidden
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:42px;
  border-bottom:1px solid var(--border-soft);
  padding:0 12px
}
h2 {
  font-size:15px;
  letter-spacing:.035em;
  text-transform:uppercase
}
.panel-index {
  font:9px var(--mono);
  color:var(--subtle)
}
.panel-heading h2 span {
  color:var(--muted)
}
.tool-rail {
  grid-column:1;
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding-top:1px
}
.rail-button {
  width:38px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:3px;
  color:#9db2c6;
  transition:.15s
}
.rail-button svg {
  width:22px;
  height:22px
}
.rail-button:hover {
  background:#13232f;
  color:var(--text)
}
.rail-button.active {
  border-color:#2b5265;
  color:var(--cyan);
  background:#102330
}
.rail-bottom {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center
}
.rail-version {
  font:8px var(--mono);
  color:var(--subtle);
  writing-mode:vertical-rl;
  letter-spacing:.08em;
  margin-bottom:9px
}
.control-panel {
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  padding:0 12px 12px
}
.control-panel>.panel-heading {
  padding:0;
  min-height:44px
}
.layer-list {
  padding:10px 0 14px;
  display:grid;
  gap:0
}
.layer {
  height:39px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  cursor:pointer
}
.layer>span:nth-child(2) {
  flex:1
}
.line-sample {
  display:inline-block;
  width:23px;
  height:3px;
  border-radius:2px
}
.cyan {
  background:var(--cyan)
}
.green {
  background:var(--green)
}
.line-sample.green {background:#8ba89b}
.amber {
  background:var(--amber)
}
.red {
  background:var(--red)
}
.gray {
  background:var(--gray)
}
.station-sample {
  width:8px;
  height:8px;
  border:2px solid #dceaf3;
  border-radius:50%;
  margin:0 8px
}
.train-sample {
  color:#d5e8f1;
  font-size:22px;
  width:24px;
  text-align:center
}
.layer input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}
.switch {
  position:relative;
  width:27px;
  height:15px;
  border:1px solid #415463;
  border-radius:12px;
  background:#22333f;
  transition:.15s
}
.switch:after {
  position:absolute;
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  left:2px;
  top:2px;
  background:#849bab;
  transition:.15s
}
.layer input:checked+.switch {
  background:#4c801c;
  border-color:#78be20
}
.layer input:checked+.switch:after {
  left:13px;
  background:#e8f5db
}
.layer input:focus-visible+.switch {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0 9px;
  border-bottom:1px solid var(--border-soft);
  gap:4px
}
.section-heading h2 {
  font-size:14px
}
.micro-label {
  font:8px var(--mono);
  color:var(--subtle);
  letter-spacing:.07em
}
.network-states {
  padding-top:7px;
  display:grid;
  gap:1px
}
.state-row {
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 2px;
  font-size:14px;
  border:1px solid transparent;
  border-radius:2px;
  text-align:left
}
.state-row b {
  margin-left:auto;
  font:10px var(--mono);
  color:var(--muted)
}
.state-row:hover,.state-row[aria-pressed=true] {
  background:#182a38;
  border-color:#2c4356
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  min-width:7px;
  border-radius:50%;
  vertical-align:middle;
  box-shadow:0 0 8px #ffffff09
}
.state-row .status-dot {
  width:10px;
  height:10px;
  min-width:10px
}
.text-button {
  color:var(--cyan);
  font-size:12px;
  padding:8px 0;
  text-align:left
}
.source-summary {
  margin-top:auto;
  padding-top:14px
}
.source-summary .section-heading {
  padding-top:8px
}
.source-row {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  margin-top:11px;
  color:#a3b7c7
}
.source-row small {
  margin-left:auto;
  font:7px var(--mono);
  color:var(--subtle)
}
.source-summary p {
  font:9px/1.8 var(--mono);
  color:var(--subtle);
  margin:15px 0
}
.icon-button {
  padding:4px;
  display:grid;
  place-items:center;
  color:var(--muted);
  border:1px solid transparent;
  border-radius:3px
}
.icon-button:hover {
  color:var(--cyan);
  background:#182c3a;
  border-color:var(--border)
}
.icon-button svg {
  width:16px;
  height:16px
}
.outline-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:3px;
  background:#111e28;
  padding:8px 10px;
  font-size:13px;
  color:#bdcfdb
}
.outline-button:hover {
  border-color:#40708a;
  background:#172c3c;
  color:var(--cyan)
}
.outline-button svg {
  width:14px;
  height:14px
}
.outline-button span {
  font:8px var(--mono);
  margin-left:auto;
  color:var(--subtle)
}
.map-panel {
  grid-column:3;
  grid-row:1;
  display:flex;
  flex-direction:column;
  background:#0c1821
}
.map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:43px;
  padding:0 11px;
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:3;
  background:linear-gradient(90deg,#101f2a,#0e1921)
}
.map-heading>div {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0
}
.map-heading h1 {
  font-size:16px;
  white-space:nowrap
}
.heading-divider {
  font:12px var(--mono);
  color:#365062
}
.map-heading #map-caption {
  color:var(--muted);
  font:9px var(--mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.map-container {
  position:relative;
  flex:1;
  min-height:430px;
  overflow:hidden
}
.map-container:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,#07121d30 100%);
  z-index:1
}
#rail-map {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,#152735,#091722)
}
.map-search {
  position:absolute;
  z-index:3;
  top:13px;
  left:13px;
  width:min(294px,calc(100% - 76px));
  display:flex;
  align-items:center;
  gap:9px;
  background:#0c1824eb;
  border:1px solid #365265;
  border-radius:3px;
  padding:9px 10px;
  box-shadow:0 3px 14px #0003
}
.map-search svg {
  width:16px;
  height:16px;
  color:#b3c9d8
}
.map-search input {
  min-width:0;
  width:100%;
  border:0;
  background:transparent;
  font-size:14px;
  color:var(--text);
  outline:none
}
.map-search input::placeholder {
  color:#95aabd
}
.map-search input:focus-visible {
  outline:none
}
.map-search:focus-within {
  border-color:var(--cyan)
}
.map-search kbd {
  font:9px var(--mono);
  color:var(--subtle)
}
.map-reset {
  position:absolute;
  z-index:3;
  top:101px;
  right:10px;
  display:grid;
  place-items:center;
  width:30px;
  height:31px;
  border:1px solid #3b5160;
  background:#0f1c27ec;
  color:#bdd0dc;
  border-radius:3px
}
.map-reset:hover {
  color:var(--cyan)
}
.map-reset svg {
  width:18px;
  height:18px
}
.map-context {
  position:absolute;
  bottom:27px;
  left:12px;
  z-index:2;
  display:flex;
  gap:11px;
  align-items:center;
  pointer-events:none
}
.context-tag {
  font:8px var(--mono);
  letter-spacing:.09em;
  color:#a8c2d2;
  border:1px solid #284b5e;
  background:#0c1c28e8;
  padding:6px 7px
}
.context-tag .status-dot {
  width:5px;
  height:5px;
  min-width:5px;
  margin-right:5px
}
.map-context>span:last-child {
  font:8px var(--mono);
  color:#829bab
}
.map-note {
  position:absolute;
  bottom:8px;
  left:12px;
  z-index:2;
  font:7px var(--mono);
  letter-spacing:.07em;
  color:#718c9f
}
.map-empty {
  position:absolute;
  inset:0;
  z-index:5;
  background:#101c26ed;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:15px;
  padding:30px;
  text-align:center
}
.map-empty>svg {
  width:35px;
  height:35px;
  color:var(--amber)
}
.map-empty p {
  color:var(--muted);
  max-width:350px
}
.maplibregl-ctrl-top-right {
  top:13px;
  right:10px
}
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin:0
}
.maplibregl-ctrl-group {
  background:#0d1a25ed;
  box-shadow:none;
  border:1px solid #3b5160;
  border-radius:3px
}
.maplibregl-ctrl-group button {
  width:28px;
  height:28px
}
.maplibregl-ctrl-group button+button {
  border-color:#354b5b
}
.maplibregl-ctrl-icon {
  filter:invert(.82)
}
.maplibregl-ctrl-bottom-right {
  bottom:4px;
  right:5px
}
.maplibregl-ctrl-attrib {
  background:#0b1821c9!important;
  color:#7b95a7;
  font:8px var(--mono);
  padding:0 4px
}
.maplibregl-ctrl-attrib a {
  color:#8ca8bb
}
.maplibregl-ctrl-scale {
  background:#08131c66;
  color:#a2bdcd;
  border-color:#7798aa;
  font:8px var(--mono);
  margin-bottom:34px!important
}
.maplibregl-popup-content {
  background:#101e2a;
  color:var(--text);
  border:1px solid #41637b;
  border-radius:3px;
  font:13px/1.6 var(--sans);
  padding:14px 22px 13px 13px;
  box-shadow:0 5px 30px #0007
}
.maplibregl-popup-content strong {
  font-size:17px
}
.maplibregl-popup-content small {
  color:var(--muted);
  font:9px var(--mono)
}
.maplibregl-popup-tip {
  border-top-color:#41637b!important
}
.maplibregl-popup-close-button {
  color:#a6bfce;
  padding:3px 6px
}
.map-label {
  font:13px var(--sans);
  font-weight:500;
  color:#dbe8f1;
  text-shadow:0 1px 3px #06111c,1px 0 3px #06111c,-1px 0 3px #06111c;
  white-space:nowrap;
  pointer-events:none;
  padding-left:5px
}
.map-label.major {
  font-size:16px;
  font-weight:600;
  color:#f0f6fa
}
.map-label.country {
  font:10px var(--mono);
  letter-spacing:.35em;
  color:#658399;
  text-transform:uppercase
}
.map-label.water {
  font:italic 12px Georgia,serif;
  letter-spacing:.13em;
  color:#45748f
}
.maplibregl-canvas:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:-3px
}
.incidents-panel {
  grid-column:4;
  grid-row:1;
  display:flex;
  flex-direction:column;
  padding:0 10px
}
.incidents-panel>.panel-heading {
  padding:0;
  min-height:44px
}
.incidents-panel h2 {
  font-size:15px
}
.incident-count {
  font:8px var(--mono);
  color:var(--red);
  white-space:nowrap
}
.segmented {
  display:flex;
  gap:4px;
  padding:10px 0
}
.segmented button,.event-filters button {
  font-size:12px;
  padding:5px 7px;
  background:#152431;
  border:1px solid #2c4051;
  border-radius:3px;
  color:#a6bacb;
  white-space:nowrap
}
.segmented button span {
  font:8px var(--mono);
  margin-left:2px
}
.segmented button:hover,.event-filters button:hover {
  border-color:#4c7189
}
.segmented button.selected,.event-filters button.selected {
  color:#092030;
  background:#78be20;
  border-color:#a7d96c
}
.incident-list {
  display:grid;
  align-content:start;
  gap:10px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#31495b transparent;
  padding-bottom:8px
}
.incident-card {
  position:relative;
  width:100%;
  padding:12px 11px 11px 14px;
  text-align:left;
  background:linear-gradient(100deg,#121f2a,#0d1922);
  border:1px solid #263b4a;
  border-left:3px solid var(--red);
  border-radius:3px;
  display:block;
  transition:background .15s,border-color .15s
}
.incident-card:hover,.incident-card.selected {
  background:#162734;
  border-color:#4e687c;
  border-left-color:var(--red)
}
.incident-card.degraded {
  border-left-color:var(--amber)
}
.incident-card.degraded:hover,.incident-card.degraded.selected {
  border-left-color:var(--amber)
}
.incident-card .incident-meta {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font:9px var(--mono);
  color:#9fb5c5
}
.incident-meta .status-dot {
  width:9px;
  height:9px
}
.severity-label {
  font:7px var(--mono);
  letter-spacing:.03em;
  padding:3px 5px;
  border:1px solid #a5424d88;
  background:#57242d24;
  color:#ff858c;
  border-radius:2px
}
.degraded .severity-label {
  border-color:#ac833e88;
  background:#573f1824;
  color:#eec35e
}
.incident-id {
  margin-left:auto;
  font:7px var(--mono);
  color:#68879c
}
.incident-card h3 {
  font-size:18px;
  letter-spacing:.015em;
  margin-bottom:6px;
  padding-right:15px
}
.incident-card .card-arrow {
  position:absolute;
  right:9px;
  top:41px;
  width:15px;
  height:15px;
  color:#7f9cae
}
.incident-route {
  font-size:14px;
  color:#b9cedd;
  margin-bottom:7px
}
.incident-line {
  font:8px var(--mono);
  color:#7994a8;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-soft)
}
.incident-description {
  font-size:13px;
  line-height:1.5;
  color:#9fb7ca
}
.incident-card .evidence-tag {
  display:block;
  font:7px var(--mono);
  color:#6a889c;
  margin-top:9px;
  letter-spacing:.03em
}
.incidents-footnote {
  margin-top:auto;
  border-top:1px solid var(--border-soft);
  padding:10px 0;
  color:#8d9c9f;
  font:8px/1.7 var(--mono);
  display:flex;
  align-items:flex-start;
  gap:7px
}
.incidents-footnote .status-dot {
  margin-top:3px;
  width:5px;
  height:5px;
  min-width:5px
}
.loading-copy {
  color:var(--muted);
  font-size:14px;
  padding:15px 0
}
.history-panel {
  grid-column:2 / 4;
  grid-row:2
}
.history-panel .panel-heading,.events-panel .panel-heading {
  min-height:36px
}
.history-panel h2,.events-panel h2 {
  font-size:14px
}
.chart-key {
  display:flex;
  gap:16px;
  font:8px var(--mono);
  color:#91aabc
}
.chart-key>span {
  display:flex;
  align-items:center;
  gap:5px
}
.chart-key i {
  display:block;
  width:16px;
  height:2px
}
.delay-chart {
  height:150px;
  width:100%
}
.events-panel {
  grid-column:4;
  grid-row:2;
  overflow:hidden
}
.events-panel>.panel-heading {
  padding:0 9px
}
.events-panel .event-filters {
  display:flex;
  gap:3px
}
.event-filters button {
  padding:3px 5px;
  font-size:10px
}
.events-scroll {
  max-height:145px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#2c4355 transparent
}
.events-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px;
  white-space:nowrap
}
.events-table th {
  font:7px var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#7892a5;
  padding:8px 7px;
  border-bottom:1px solid var(--border)
}
.events-table td {
  padding:5px 7px;
  border-bottom:1px solid #1b2d3b75;
  color:#abc1d1
}
.events-table td:first-child {
  font:8px var(--mono);
  color:#718fa5
}
.events-table .event-type {
  font:7px var(--mono);
  color:var(--cyan)
}
.events-table .event-type.warning {
  color:var(--amber)
}
.events-table .event-type.danger {
  color:var(--red)
}
.events-table td:last-child {
  max-width:350px;
  overflow:hidden;
  text-overflow:ellipsis
}
.telemetry {
  display:flex;
  align-items:center;
  gap:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid #14232e;
  padding:10px 20px;
  font:8px var(--mono);
  color:#8aa2b6;
  background:#0c1720
}
.telemetry>span {
  padding:0 15px;
  border-right:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:7px
}
.telemetry>span:first-child {
  padding-left:0
}
.telemetry .telemetry-right {
  margin-left:auto;
  padding-right:0;
  border-right:0;
  gap:20px;
  color:#607f95
}
.telemetry .status-dot {
  width:5px;
  height:5px;
  min-width:5px
}
.site-footer {
  max-width:1500px;
  width:calc(100% - 58px);
  margin:0 auto;
  padding:21px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 22px;
  flex-wrap:wrap
}
.footer-origin {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  color:#718391;
  font:8px var(--mono);
  letter-spacing:.065em;
  text-transform:uppercase
}
.footer-sign {
  appearance:none;
  margin:0;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:8px
}
.footer-contact {color:#a6db6b;text-decoration:none;border-bottom:1px solid #648f37;padding:4px 0;margin-left:10px;white-space:nowrap}
.footer-contact:hover {color:#eefbe4;border-bottom-color:#c7ef9d}
.footer-sign .signature-en,.footer-sign .signature-es {
  font-weight:500;
  color:#a5b4bf;
  border-bottom:1px dashed transparent;
  transition:border-color .15s
}
.footer-flag {
  font-size:13px;
  filter:saturate(.75)
}
.signature-es {
  display:none
}
.footer-sign:hover .signature-en,.footer-sign:focus-visible .signature-en,.footer-sign.is-spanish .signature-en {
  display:none
}
.footer-sign:hover .signature-es,.footer-sign:focus-visible .signature-es,.footer-sign.is-spanish .signature-es {
  display:inline
}
.footer-sign:hover .signature-es,.footer-sign:focus-visible .signature-es {
  border-bottom-color:#677f91
}
.copyright {
  white-space:nowrap;
  color:#627888;
  font-size:7px
}
.footer-links {
  display:flex;
  align-items:center;
  gap:15px
}
.footer-links button {
  padding:2px 0;
  font:8px var(--mono);
  color:#778d9e
}
.footer-links button:hover {
  color:#c4d6e2
}
.footer-separator {
  height:12px;
  width:1px;
  background:#293a47;
  margin:0 2px
}
.detail-dialog {
  width:min(620px,calc(100% - 32px));
  max-height:85svh;
  overflow:auto;
  color:var(--text);
  background:#101d28;
  border:1px solid #3e5a70;
  border-radius:5px;
  box-shadow:0 20px 100px #000a;
  padding:20px 25px 27px
}
.detail-dialog::backdrop {
  background:#03090fbb;
  backdrop-filter:blur(4px)
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}
.detail-dialog h2 {
  font-size:26px;
  text-transform:none;
  letter-spacing:.015em;
  margin-bottom:17px
}
.detail-dialog p {
  font-size:16px;
  color:#a8becf;
  line-height:1.6;
  margin-bottom:12px
}
.detail-dialog a {
  color:var(--cyan)
}
.detail-dialog .dialog-note {
  padding:11px 13px;
  border-left:2px solid var(--amber);
  background:#f1bd4d08;
  font-size:14px
}
.detail-dialog ul {
  padding-left:19px;
  color:#a8becf;
  line-height:1.8
}
.detail-dialog .outline-button {
  margin-top:20px
}
.detail-dialog .detail-meta {
  font:10px/1.8 var(--mono);
  color:#7e9aaf;
  margin-bottom:16px
}
.dialog-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:15px 0 23px
}
.dialog-stat {
  border:1px solid var(--border);
  padding:12px
}
.dialog-stat small {
  display:block;
  color:var(--muted);
  font:8px var(--mono);
  text-transform:uppercase
}
.dialog-stat strong {
  display:block;
  font:27px var(--mono);
  color:var(--cyan);
  margin:10px 0 4px
}
.dialog-stat span {
  font-size:12px;
  color:var(--subtle)
}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 18px;
  max-width:calc(100% - 30px);
  background:#173247;
  border:1px solid #41728e;
  border-radius:3px;
  box-shadow:0 6px 30px #0005;
  font:12px var(--mono);
  z-index:100;
  color:#d0e9f7
}
@media(min-width:1700px) {
  .workspace {
    grid-template-columns:46px 226px minmax(500px,1fr) 360px;
    grid-template-rows:minmax(580px,calc(100svh - 360px)) 190px;
    gap:12px
  }
  .masthead {
    gap:35px
  }
  .territory {
    font-size:11px
  }
  .incidents-panel {
    padding:0 12px
  }
  .incident-card {
    padding:14px 13px 15px 16px
  }
  .incident-card h3 {
    font-size:20px
  }
  .incident-description {
    font-size:15px
  }
  .incident-route {
    font-size:15px
  }
  .incident-line {
    font-size:9px
  }
  .layer {
    font-size:16px;
    height:43px
  }
  .control-panel {
    padding:0 14px 14px
  }
  .source-row {
    font-size:14px
  }
}
@media(min-width:1400px) {
  .events-panel {
    grid-column:3 / 5
  }
  .history-panel {
    grid-column:2 / 3
  }
  .workspace {
    grid-template-columns:42px 208px minmax(550px,1fr) 340px
  }
  .history-panel {
    grid-column:2 / 4;
    width:56%;
    justify-self:start
  }
  .events-panel {
    grid-column:2 / 5;
    width:calc(44% - 10px);
    justify-self:end
  }
  .event-filters button {
    font-size:11px
  }
  .delay-chart {
    height:150px
  }
  .events-table td:last-child {
    max-width:420px
  }
}
@media(max-width:1200px) {
  .masthead {
    gap:20px;
    padding-right:14px
  }
  .territory {
    display:none
  }
  .top-nav {
    gap:20px
  }
  .header-status {
    gap:12px
  }
  .demo-badge {
    font-size:7px
  }
  .clock {
    padding-left:12px
  }
  .workspace {
    grid-template-columns:37px 180px minmax(300px,1fr) 280px;
    gap:8px;
    padding:10px 10px 10px 7px
  }
  .control-panel {
    padding:0 9px 10px
  }
  .layer {
    font-size:13px;
    gap:6px
  }
  .incidents-panel h2 {
    font-size:13px
  }
  .segmented button {
    font-size:11px;
    padding:5px
  }
  .incident-card {
    padding:10px
  }
  .incident-card h3 {
    font-size:16px
  }
  .incident-description {
    font-size:12px
  }
  .incident-id {
    display:none
  }
  .map-heading #map-caption {
    font-size:8px
  }
  .events-panel .event-filters button[data-event-filter=infrastructure] {
    display:none
  }
  .telemetry>span {
    padding:0 9px
  }
  .telemetry {
    padding:10px 15px
  }
  .telemetry>span:nth-child(3) {
    display:none
  }
  .site-footer {
    width:calc(100% - 38px)
  }
  .footer-links {
    gap:12px
  }
}
@media(max-width:980px) {
  .masthead {
    min-height:68px;
    flex-wrap:wrap;
    gap:0 20px;
    padding-top:13px
  }
  .brand {
    font-size:26px;
    margin-bottom:12px
  }
  .brand small {
    font-size:7px
  }
  .brand-mark {
    width:24px;
    height:29px
  }
  .top-nav {
    order:3;
    width:100%;
    height:42px;
    justify-content:center;
    gap:35px;
    border-top:1px solid var(--border-soft)
  }
  .nav-link {
    font-size:16px
  }
  .header-status {
    margin-left:auto;
    margin-bottom:12px
  }
  .workspace {
    grid-template-columns:34px 173px minmax(320px,1fr);
    grid-template-rows:560px auto 190px
  }
  .control-panel {
    grid-column:2;
    grid-row:1
  }
  .map-panel {
    grid-column:3;
    grid-row:1
  }
  .incidents-panel {
    grid-column:2 / 4;
    grid-row:2;
    padding:0 10px
  }
  .incident-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding-bottom:12px
  }
  .incident-card {
    height:100%
  }
  .incidents-footnote {
    display:none
  }
  .incident-card h3 {
    font-size:16px
  }
  .incident-line {
    min-height:28px;
    line-height:1.5
  }
  .history-panel {
    grid-column:2 / 4;
    grid-row:3
  }
  .events-panel {
    grid-column:2 / 4;
    grid-row:4
  }
  .tool-rail {
    grid-row:1 / 5
  }
  .events-scroll {
    max-height:180px
  }
  .events-panel {
    min-height:185px
  }
  .site-footer {
    justify-content:center;
    text-align:center
  }
  .footer-origin {
    justify-content:center
  }
  .map-search {
    width:calc(100% - 65px)
  }
  .map-context {
    gap:5px
  }
  .map-context>span:last-child {
    display:none
  }
  .map-note {
    font-size:6px
  }
  .telemetry .telemetry-right #coordinates {
    display:none
  }
}
@media(max-width:650px) {
  .masthead {
    padding:12px 12px 0;
    gap:0 10px
  }
  .brand {
    font-size:23px;
    gap:9px
  }
  .brand small {
    font-size:6px;
    letter-spacing:.09em
  }
  .brand-mark {
    width:22px;
    height:27px
  }
  .demo-badge {
    font-size:6px;
    padding:5px
  }
  .clock {
    display:none
  }
  .top-nav {
    gap:clamp(8px,2.5vw,18px);
    height:42px
  }
  .nav-link {
    font-size:14px
  }
  .nav-count {
    display:none
  }
  .workspace {
    display:flex;
    flex-wrap:wrap;
    padding:9px;
    gap:9px
  }
  .tool-rail {
    display:none
  }
  .control-panel {
    width:100%;
    padding:0 10px 7px
  }
  .control-panel>.panel-heading {
    min-height:33px
  }
  .panel-heading h2 {
    font-size:13px
  }
  .layer-list {
    display:flex;
    flex-wrap:wrap;
    gap:3px 15px;
    padding:5px 0 3px
  }
  .layer {
    height:29px;
    gap:6px;
    font-size:13px;
    flex:0 0 auto
  }
  .layer .line-sample {
    width:15px
  }
  .layer .switch {
    width:24px;
    height:13px
  }
  .layer .switch:after {
    width:7px;
    height:7px
  }
  .layer input:checked+.switch:after {
    left:13px
  }
  .layer .station-sample {
    margin:0 3px
  }
  .layer .train-sample {
    width:14px;
    font-size:18px
  }
  .control-panel>.section-heading,.network-states,.source-summary,.control-panel>.outline-button,.clear-filter {
    display:none!important
  }
  .map-panel {
    width:100%;
    height:480px
  }
  .map-container {
    min-height:0
  }
  .map-heading #map-caption {
    font-size:7px
  }
  .map-heading>div {
    gap:9px
  }
  .map-heading h1 {
    font-size:15px
  }
  .map-search {
    top:10px;
    left:10px;
    padding:7px 8px
  }
  .map-note {
    font-size:6px;
    max-width:85%;
    line-height:1.5
  }
  .incidents-panel {
    width:100%
  }
  .incident-list {
    grid-template-columns:1fr;
    gap:8px;
    max-height:500px
  }
  .incident-card .incident-line {
    min-height:0
  }
  .incident-card {
    padding:12px 13px
  }
  .incident-id {
    display:block
  }
  .incident-description {
    font-size:14px
  }
  .incident-card h3 {
    font-size:18px
  }
  .history-panel,.events-panel {
    width:100%;
    min-height:190px
  }
  .events-table {
    font-size:12px
  }
  .events-panel .event-filters button[data-event-filter=infrastructure] {
    display:block
  }
  .events-table td:last-child {
    max-width:260px
  }
  .telemetry {
    padding:9px 12px;
    gap:10px;
    flex-wrap:wrap;
    font-size:7px
  }
  .telemetry>span {
    padding:0;
    border:0
  }
  .telemetry>span:nth-child(2) {
    margin-left:auto
  }
  .telemetry .telemetry-right {
    display:none
  }
  .site-footer {
    width:calc(100% - 26px);
    padding:19px 0 23px;
    gap:16px
  }
  .footer-origin {
    font-size:7px;
    letter-spacing:.025em;
    gap:8px
  }
  .footer-sign {
    gap:5px
  }
  .footer-flag {
    font-size:11px
  }
  .copyright {
    font-size:7px
  }
  .footer-links {
    gap:11px;
    flex-wrap:wrap;
    justify-content:center
  }
  .footer-links button {
    font-size:7px
  }
  .footer-separator {
    display:none
  }
  .dialog-stats {
    grid-template-columns:1fr
  }
  .dialog-stat strong {
    font-size:23px
  }
  .detail-dialog {
    padding:17px 19px
  }
  .detail-dialog h2 {
    font-size:23px
  }
}
/* Chart SVGs are application canvases, not the 20px interface icons. */
.delay-chart svg {
  width:100%;
  height:100%;
  stroke:none;
  stroke-width:0
}
@media(max-width:650px) {
  .incident-list {
    max-height:none
  }
}
@media(min-width:1400px) {
  .history-panel {
    grid-column:2 / 5;
    width:calc(50% - 5px)
  }
  .events-panel {
    grid-column:2 / 5;
    width:calc(50% - 5px)
  }
}
@media(min-width:651px) {
  .footer-origin {
    font-size:9px
  }
  .copyright {
    font-size:8px
  }
  .footer-links button {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}

/* Demo and saved observations share the console, with explicit source boundaries. */
.data-mode-label {display:flex;flex-direction:column;gap:4px;font:8px var(--mono);color:var(--muted)}
.data-mode-label select {font:12px var(--sans);color:var(--text);background:#142634;border:1px solid #3b5a70;border-radius:3px;padding:5px 20px 5px 8px;min-width:104px}
.data-mode-label select:focus-visible {outline:2px solid var(--cyan);outline-offset:3px}
.header-status {gap:12px}
.snapshot-notice {padding:10px 24px;border-bottom:1px solid #785e2c;background:#352c162e;color:#eac77b;font:10px/1.7 var(--mono)}
.manual-incident {padding:9px 24px;border-bottom:1px solid #b93d46;background:#461a20;color:#ffd5d5;font:11px/1.6 var(--mono)}
.manual-incident strong {color:#ff7078}
.manual-incident a {color:#fff;text-underline-offset:3px}
.renfe-mode .demo-badge {border-color:#648f37;color:#b8e681;background:#29451b55}
.renfe-mode .layer:has(input:disabled) {display:none}
.renfe-mode .network-states {font-size:12px}
.renfe-mode .layer {height:35px}
.renfe-mode .state-row {padding:7px 2px}
.renfe-mode .source-row {margin-top:7px}
.renfe-mode .source-summary p {font:9px/1.5 var(--mono);margin:9px 0}
.renfe-mode [data-status="operational"] .status-dot {background:var(--cyan)}
.renfe-mode [data-status="interrupted"] .status-dot {background:#a3adba}
.renfe-mode [data-status="unknown"] .status-dot {background:#bb91e8}
.renfe-mode .incident-count {color:var(--muted)}
.renfe-mode .incident-list {min-height:0;flex:1}
.snapshot-card {overflow-wrap:anywhere}
.snapshot-card .incident-description {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.snapshot-card.identified {border-left-color:var(--cyan)}
.snapshot-card.identified .severity-label {border-color:#648f37;color:#b8e681;background:#23371b}
.snapshot-counts {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 15px 10px}
.snapshot-counts strong {display:block;font:24px var(--mono);color:var(--cyan)}
.snapshot-counts span {display:block;color:var(--muted);font-size:13px;margin-top:5px}
.snapshot-history-note {font:9px/1.6 var(--mono);padding:0 15px;color:var(--muted)}
.snapshot-details {display:grid;grid-template-columns:145px minmax(0,1fr);gap:9px 14px;font-size:15px;line-height:1.5;margin:20px 0}
.snapshot-details dt {color:var(--muted)}
.snapshot-details dd {margin:0;overflow-wrap:anywhere}
.detail-dialog .detail-meta {overflow-wrap:anywhere}
.raw-evidence {white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.7 var(--mono);padding:15px;background:#09131c;border:1px solid var(--border);max-height:300px;overflow:auto}
.snapshot-source {margin:20px 0;padding-top:15px;border-top:1px solid var(--border)}
.snapshot-table-scroll {overflow:auto;margin:15px 0}
.observation-link {padding:0;color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1400px) {.territory {display:none}.masthead {gap:18px}.top-nav {gap:20px}}
@media(max-width:650px) {
  .renfe-mode .layer {height:29px}
  .header-status {width:100%;margin-left:0;justify-content:space-between;order:2;gap:8px}
  .top-nav {order:3;gap:clamp(6px,2vw,12px)}
  .nav-link {font-size:13px}
  .snapshot-notice {padding:9px 12px;font-size:8px}
  .manual-incident {padding:9px 12px;font-size:9px}
  .snapshot-details {grid-template-columns:1fr;gap:3px}
  .snapshot-details dd {margin-bottom:9px}
  .snapshot-counts strong {font-size:20px}
  .snapshot-counts span {font-size:12px}
  .renfe-mode .incidents-footnote {display:block}
}