/*
 * Portal visual system.
 * Rules are ordered from shared primitives to page layouts and final responsive/theme states.
 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/roboto-condensed-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1c1c1c;
  --muted: rgba(28, 28, 28, .68);
  --paper: #f9f9f9;
  --panel: #ffffff;
  --soft: #f1f3f5;
  --line: #e9eaec;
  --line-strong: rgba(27, 42, 65, .18);
  --navy: #1b2a41;
  --navy-2: #1e2d43;
  --navy-hover: #263c5d;
  --success: #2f8f5b;
  --danger: #be2424;
  --danger-soft: #fff1f1;
  --warning: #b58100;
  --warning-soft: #fff7dc;
  --focus: rgba(31, 95, 159, .22);
  --radius: 8px;
  --control-radius: 6px;
  --shadow: 0 3px 12px rgba(27, 42, 65, .055);
  color: var(--ink);
  background: var(--paper);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-synthesis: none;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 300px;
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

.auth-locked {
  overflow: hidden;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  min-width: 300px;
  min-height: 100dvh;
  padding: 16px;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(rgba(27, 42, 65, .94), rgba(27, 42, 65, .94)),
    linear-gradient(135deg, #314764, #172338);
}

.auth-card {
  width: min(430px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 17, 31, .28);
}

.auth-logo {
  display: block;
  width: 100%;
  height: 64px;
  padding: 13px 18px;
  object-fit: contain;
  object-position: left center;
  background: var(--navy);
}

.auth-card-body {
  padding: 22px;
}

.auth-kicker,
.auth-card h1,
.auth-description,
.auth-status {
  font-size: 16px;
  font-weight: 400;
}

.auth-kicker {
  margin-bottom: 5px;
  color: #526170;
}

.auth-card h1 {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 24px;
}

.auth-description {
  margin-bottom: 18px;
  color: #394653;
  line-height: 1.42;
}

.auth-status {
  min-height: 40px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #ccd4db;
  color: #33414e;
  background: #f2f5f7;
}

.auth-status.error {
  border-color: #d8a7a7;
  color: #8b1e1e;
  background: #fff1f1;
}

.auth-form {
  display: grid;
  margin-top: 12px;
  gap: 9px;
}

.auth-form label {
  display: grid;
  gap: 4px;
  color: #33414e;
  font-size: 14px;
}

.auth-form input {
  width: 100%;
  height: 44px;
  padding: 8px 10px;
  border: 1px solid #9ca9b4;
  border-radius: 2px;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
}

.auth-form input:focus {
  border-color: #356fa8;
}

.auth-button {
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  border-radius: 2px;
  font-size: 16px;
}

.auth-reset-button {
  width: 100%;
  min-height: 38px;
  padding: 6px;
  border: 0;
  color: #315c86;
  background: transparent;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.auth-reset-button:hover {
  text-decoration: underline;
}

.auth-divider {
  display: grid;
  margin: 4px 0 9px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #65727e;
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: #d5dbe0;
  content: "";
}

.auth-google-button {
  width: 100%;
  min-height: 44px;
  border-radius: 2px;
  font-size: 15px;
}

.auth-card noscript {
  display: block;
  margin-top: 10px;
  color: var(--danger);
  font-size: 14px;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="range"],
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: .55;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
.brand,
.train-time-item time,
button {
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  color: #fff;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.topbar-inner {
  display: flex;
  width: 100%;
  max-width: 1144px;
  min-height: 56px;
  margin: 0 auto;
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  align-items: center;
  gap: 9px;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 32px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-left-width: 4px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

.brand-copy {
  min-width: 0;
  flex: 1;
}

.brand-copy strong,
.brand-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy strong {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}

.brand-copy small {
  margin-top: 2px;
  color: rgba(255, 255, 255, .62);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.topbar-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

#clock {
  min-width: 66px;
  color: #fff;
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: right;
}

.status-pill {
  display: inline-flex;
  min-height: 28px;
  padding: 0 9px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.status-pill span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #d8dde5;
}

.status-pill.online span {
  background: #6fcea0;
}

.status-pill.offline span {
  background: #ff8585;
}

main {
  width: 100%;
  max-width: 1144px;
  margin: 12px auto calc(28px + env(safe-area-inset-bottom));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  padding: 14px 16px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  align-items: end;
  gap: 18px;
  border-top: 3px solid var(--navy);
}

.station-summary {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

h1 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.1;
}

h2 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

h3 {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 800;
}

#scheduleMeta {
  margin-bottom: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-controls {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 8px;
}

.hero-controls label {
  min-width: 0;
  flex: 1;
}

label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

select,
input:not([type="range"]) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  margin-top: 5px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease;
}

select:hover,
input:not([type="range"]):hover {
  border-color: rgba(27, 42, 65, .34);
}

select:focus,
input:not([type="range"]):focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--focus);
}

.primary,
.secondary,
.mic-button,
.quick-action,
.mini-play,
.edit-train {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.primary,
.mic-button {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.primary:hover,
.mic-button:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
}

.primary.active,
.mic-button.active {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.secondary,
.mini-play,
.edit-train {
  color: var(--navy);
  background: #fff;
  border-color: var(--line-strong);
}

.secondary:hover,
.mini-play:hover,
.edit-train:hover {
  border-color: var(--navy);
  background: var(--soft);
}

.compact-button {
  min-height: 40px;
  padding-right: 12px;
  padding-left: 12px;
}

.layout {
  display: grid;
  margin-top: 12px;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, .7fr);
  grid-template-areas: "board now";
  align-items: start;
  gap: 12px;
}

.board {
  grid-area: board;
  padding: 14px;
}

.now-panel {
  grid-area: now;
  padding: 14px;
}

.section-head {
  display: flex;
  min-height: 40px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.train-list {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.train-row {
  display: grid;
  min-height: 76px;
  padding: 9px;
  grid-template-columns: 132px minmax(0, 1fr) 184px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--control-radius);
  background: #fff;
}

.train-times {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.train-time-item {
  display: block;
  min-width: 0;
}

.train-time-item small,
.train-time-item time,
.train-time-item em {
  display: block;
}

.train-time-item small {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.train-time-item time {
  color: var(--navy);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.02em;
}

.train-time-item em {
  margin-top: 1px;
  color: var(--warning);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.train-main {
  min-width: 0;
}

.train-main > strong,
.train-main > span {
  display: block;
}

.train-main > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.train-main > span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.train-badges {
  display: flex;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.event-badge {
  display: inline-block;
  padding: 4px 7px 3px;
  border: 1px solid rgba(27, 42, 65, .11);
  border-radius: 4px;
  color: var(--navy);
  background: var(--soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.delay-badge {
  display: inline-block;
  padding: 4px 7px 3px;
  border: 1px solid rgba(190, 36, 36, .2);
  border-radius: 4px;
  color: #8f1717;
  background: var(--danger-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.train-row.past {
  border-left-color: #aeb5bf;
  background: #fafafa;
}

.train-row.past .train-time-item time,
.train-row.past .train-main > strong {
  color: #5f6670;
}

.train-row.past .mini-play {
  color: #5f6670;
}

.train-actions {
  display: grid;
  width: 184px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.mini-play,
.edit-train {
  width: 100%;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
}

.empty {
  padding: 24px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--control-radius);
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  text-align: center;
}

.now-playing {
  display: grid;
  min-height: 72px;
  padding: 11px 12px;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  border: 1px solid var(--navy);
  border-radius: var(--control-radius);
  color: #fff;
  background: var(--navy);
}

.now-playing.idle {
  border-color: var(--line);
  color: var(--ink);
  background: var(--soft);
}

.live-marker {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #6fcea0;
}

.now-playing.idle .live-marker {
  background: #aeb5bf;
}

.now-playing > div {
  align-self: center;
  min-width: 0;
}

.now-playing strong,
.now-playing span {
  display: block;
}

.now-playing strong {
  overflow: hidden;
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing span {
  margin-top: 3px;
  color: inherit;
  font-size: 11px;
  opacity: .7;
}

.queue-head {
  display: flex;
  min-height: 44px;
  margin-top: 6px;
  align-items: center;
  justify-content: space-between;
}

.planned-head {
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

.queue-count {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.text-button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.text-button:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.queue-list,
.planned-list {
  min-height: 34px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border-top: 1px solid var(--line);
}

.queue-list {
  max-height: 112px;
}

.planned-list {
  max-height: 218px;
}

.queue-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.queue-list li strong,
.queue-list li span {
  display: block;
}

.queue-list li span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.planned-list > .muted {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.planned-item {
  display: grid;
  padding: 7px 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 2px 8px;
  border-bottom: 1px solid var(--line);
}

.planned-item > time {
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.planned-item div {
  min-width: 0;
}

.planned-item strong,
.planned-item span {
  display: block;
}

.planned-item strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planned-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.muted {
  color: var(--muted);
}

.volume-control {
  display: block;
  margin-top: 10px;
}

.volume-control output {
  float: right;
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  accent-color: var(--navy);
  background: transparent;
}

.manual,
.microphone,
.diagnostics {
  margin-top: 12px;
}

.manual {
  padding: 14px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.quick-action {
  padding: 8px 12px;
  color: var(--navy);
  background: #fff;
  border-color: var(--line-strong);
  text-align: center;
}

.quick-action:hover {
  border-color: var(--navy);
  background: var(--soft);
}

details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

summary {
  min-height: 44px;
  padding: 12px 2px 8px;
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.composer {
  display: grid;
  padding-top: 5px;
  grid-template-columns: 1.05fr 1.25fr .7fr auto auto;
  align-items: end;
  gap: 8px;
}

.microphone {
  display: flex;
  min-height: 88px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 3px solid var(--navy);
}

.microphone h2 {
  margin-bottom: 4px;
  font-size: 18px;
}

.microphone p:last-child {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.mic-button {
  flex: none;
}

.diagnostics {
  padding: 0 14px 12px;
}

.diagnostics details {
  margin: 0;
  border: 0;
}

.diagnostics summary {
  padding-top: 13px;
}

.diagnostic-body {
  display: grid;
  padding-top: 4px;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) auto;
  align-items: center;
  gap: 10px;
}

.diagnostic-body div span,
.diagnostic-body div strong {
  display: block;
}

.diagnostic-body div span {
  color: var(--muted);
  font-size: 11px;
}

.diagnostic-body div strong {
  margin-top: 2px;
  font-size: 13px;
}

#diagnosticLog {
  grid-column: 1 / -1;
  max-height: 130px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-radius: var(--control-radius);
  color: #dce2ea;
  background: var(--navy-2);
  font: 11px/1.35 Consolas, monospace;
  white-space: pre-wrap;
}

.train-editor {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 50px rgba(27, 42, 65, .22);
}

.train-editor::backdrop {
  background: rgba(27, 42, 65, .42);
}

.train-editor form {
  padding: 16px;
}

.editor-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-head h2 {
  font-size: 19px;
}

.override-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.override-grid label:last-child {
  grid-column: 1 / -1;
}

.override-grid small {
  display: block;
  min-height: 15px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.override-grid input:disabled {
  color: var(--muted);
  background: var(--soft);
}

.editor-footer {
  display: grid;
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toast {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--control-radius);
  color: #fff;
  background: var(--navy-2);
  box-shadow: 0 8px 24px rgba(27, 42, 65, .2);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 130%);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "now"
      "board";
  }

  .composer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "train train"
      "type track"
      "preview queue";
  }

  .composer label:nth-child(1) {
    grid-area: type;
  }

  .composer label:nth-child(2) {
    grid-area: train;
  }

  .composer label:nth-child(3) {
    grid-area: track;
  }

  #queueManual {
    grid-area: queue;
  }

  .composer .primary,
  .composer .secondary {
    width: 100%;
  }

  .diagnostic-body {
    grid-template-columns: repeat(2, 1fr);
  }

  .diagnostic-body .secondary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    min-height: 54px;
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
    gap: 8px;
  }

  .brand-mark {
    width: 36px;
    height: 30px;
  }

  .brand-copy strong {
    font-size: 13px;
  }

  .topbar-meta {
    gap: 7px;
  }

  #clock {
    min-width: 60px;
    font-size: 14px;
  }

  .status-pill {
    padding-right: 7px;
    padding-left: 7px;
  }

  main {
    margin-top: 8px;
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .hero,
  .board,
  .now-panel,
  .manual {
    padding: 12px;
  }

  .hero {
    gap: 8px;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  .hero-controls {
    gap: 7px;
  }

  .hero-controls .primary {
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
  }

  .layout,
  .manual,
  .microphone,
  .diagnostics {
    margin-top: 8px;
  }

  .train-row {
    min-height: 92px;
    padding: 8px;
    grid-template-columns: 88px minmax(0, 1fr) 78px;
    column-gap: 8px;
  }

  .train-times {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .train-time-item {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 3px;
  }

  .train-time-item small {
    grid-column: 1;
    font-size: 8px;
  }

  .train-time-item time {
    grid-column: 2;
    font-size: 17px;
  }

  .train-time-item em {
    grid-column: 2;
  }

  .train-actions {
    width: 78px;
    grid-template-columns: 1fr;
  }

  .train-actions button {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 11px;
  }

  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .microphone {
    min-height: 0;
    padding: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .mic-button {
    width: 100%;
  }

  .diagnostics {
    padding-right: 12px;
    padding-left: 12px;
  }

  .train-editor {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto auto max(8px, env(safe-area-inset-bottom));
  }

  .train-editor form {
    padding: 14px 12px;
  }
}

@media (max-width: 380px) {
  .brand-prefix,
  .brand-copy small {
    display: none;
  }

  .brand-copy strong {
    max-width: none;
  }

  .status-pill {
    font-size: 10px;
  }

  .hero-controls .primary {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }

  .train-row {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 6px;
  }

  .train-time-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .train-time-item time {
    font-size: 16px;
  }

  .train-actions {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diagnostic-body {
    grid-template-columns: 1fr;
  }

  .diagnostic-body .secondary,
  #diagnosticLog {
    grid-column: 1;
  }
}

/* Timetable movement graph */
#pageSchedule .schedule-view-nav {
  display: flex;
  min-width: 0;
  margin: 0;
  border-bottom: 1px solid #aeb7bd;
}

#pageSchedule .schedule-view-nav button {
  min-height: 32px;
  margin: 0 12px 0 0;
  padding: 4px 2px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 700;
}

#pageSchedule .schedule-view-nav button:hover,
#pageSchedule .schedule-view-nav button:focus-visible {
  color: var(--ink);
  background: transparent;
}

#pageSchedule .schedule-view-nav button[aria-selected="true"] {
  border-bottom-color: #1769aa;
  color: var(--ink);
}

#pageSchedule .schedule-graph-view {
  min-width: 0;
}

#pageSchedule .movement-chart-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(190px, 320px) minmax(190px, 320px) minmax(120px, auto) auto;
  align-items: stretch;
  justify-content: start;
  border: 1px solid #8f9aa2;
  border-bottom: 0;
  background: #eef2f4;
}

#pageSchedule .movement-chart-controls > label {
  display: grid;
  min-width: 0;
  min-height: 54px;
  padding: 5px 7px;
  align-content: center;
  gap: 3px;
  border-right: 1px solid #b8c0c5;
  color: #44515c;
  font-size: 12px;
  line-height: 1.1;
}

#pageSchedule .movement-chart-controls .graph-range-field {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(90px, 1fr) 48px;
  align-items: center;
  gap: 5px;
}

#pageSchedule .movement-chart-controls .graph-range-field input {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#pageSchedule .movement-chart-controls .graph-range-field output {
  color: #17232c;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#pageSchedule .movement-chart-controls .graph-settings-actions {
  display: flex;
  min-width: 0;
  min-height: 54px;
  padding: 5px 7px;
  align-items: center;
}

#pageSchedule .movement-chart-controls .graph-settings-actions button {
  width: auto;
  min-width: 118px;
  min-height: 29px;
  padding: 3px 8px;
}

#pageSchedule .movement-graph-legend {
  display: flex;
  min-height: 54px;
  padding: 5px 8px;
  align-items: center;
  gap: 12px;
  color: #17232c;
  white-space: nowrap;
}

#pageSchedule .movement-graph-legend[hidden] {
  display: none;
}

#pageSchedule .movement-graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#pageSchedule .movement-graph-legend i {
  display: inline-block;
  width: 24px;
  border-top: 2px solid currentColor;
}

#pageSchedule .movement-graph-legend i.projected {
  border-top-style: dashed;
}

#pageSchedule .movement-chart-viewport {
  width: 100%;
  max-height: min(72dvh, calc(100dvh - 190px));
  min-height: 300px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #8f9aa2;
  background: #fff;
  scrollbar-gutter: stable;
}

#pageSchedule .movement-chart {
  min-width: 100%;
  min-height: 300px;
  font-size: 14px;
}

#pageSchedule .movement-chart-empty {
  display: grid;
  min-height: 300px;
  padding: 20px;
  place-items: center;
  color: var(--muted);
}

#pageSchedule .movement-chart-surface {
  --station-axis-width: 180px;
  display: grid;
  min-width: 100%;
  grid-template-columns: var(--station-axis-width) var(--chart-width);
  grid-template-rows: 34px var(--chart-height);
  align-items: stretch;
  background: #fff;
}

#pageSchedule .movement-chart-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  min-width: 0;
  padding: 0;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  border-right: 1px solid #7c8992;
  border-bottom: 1px solid #7c8992;
  overflow: hidden;
  background: #f7f8f9;
}

#pageSchedule .movement-time-axis {
  position: sticky;
  top: 0;
  z-index: 6;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  border-bottom: 1px solid #7c8992;
  overflow: visible;
  color: #26323b;
  background: #eef2f4;
}

#pageSchedule .movement-time-axis span {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#pageSchedule .movement-time-axis span:not(.major) {
  top: 10px;
  color: #6b767d;
  font-size: 12px;
}

#pageSchedule .movement-time-axis span.major {
  color: #11181d;
  font-weight: 700;
}

#pageSchedule .movement-time-axis small {
  margin-left: 2px;
  font-size: 10px;
  vertical-align: top;
}

#pageSchedule .movement-station-axis {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid #7c8992;
  background: #f7f8f9;
}

#pageSchedule .movement-station-row {
  display: flex;
  min-width: 0;
  padding: 0 8px;
  align-items: center;
  justify-content: flex-end;
  color: #16212a;
  text-align: right;
}

#pageSchedule .movement-station-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageSchedule .movement-station-row.current {
  font-weight: 700;
}

#pageSchedule .movement-chart-plot {
  display: block;
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  background: #fff;
}

#pageSchedule .movement-grid-time {
  stroke: #d9dde0;
  stroke-width: 1;
}

#pageSchedule .movement-grid-time.major {
  stroke: #aeb7bd;
}

#pageSchedule .movement-grid-station {
  stroke: #c9ced2;
  stroke-width: 1;
}

#pageSchedule .movement-train {
  color: #182f70;
  outline: none;
}

#pageSchedule .movement-train polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#pageSchedule .movement-train polyline.projected {
  stroke-dasharray: 7 5;
  opacity: .78;
}

#pageSchedule .movement-train circle {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

#pageSchedule .movement-train circle.projected {
  opacity: .72;
}

#pageSchedule .movement-train:hover polyline,
#pageSchedule .movement-train:focus polyline {
  stroke-width: 3.5;
}

#pageSchedule .movement-train-label {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 3px;
  paint-order: stroke fill;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

#pageSchedule .movement-minute-label {
  fill: #101820;
  stroke: #fff;
  stroke-width: 3px;
  paint-order: stroke fill;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

#pageSchedule .movement-train-1 { color: #ad2525; }
#pageSchedule .movement-train-2 { color: #087647; }
#pageSchedule .movement-train-3 { color: #6d36a8; }
#pageSchedule .movement-train-4 { color: #b05e00; }
#pageSchedule .movement-train-5 { color: #006d8b; }
#pageSchedule .movement-train-6 { color: #87335e; }
#pageSchedule .movement-train-7 { color: #536200; }

#pageSchedule .movement-current-time {
  stroke: #d40000;
  stroke-width: 1;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

:root[data-theme="dark"] #pageSchedule .schedule-view-nav {
  border-bottom-color: #53616b;
}

:root[data-theme="dark"] #pageSchedule .schedule-view-nav button[aria-selected="true"] {
  border-bottom-color: #70bdf0;
}

:root[data-theme="dark"] #pageSchedule .movement-chart-controls {
  border-color: #60717d;
  background: #202e37;
}

:root[data-theme="dark"] #pageSchedule .movement-chart-controls > label {
  border-color: #53616b;
  color: #c5d0d6;
}

:root[data-theme="dark"] #pageSchedule .movement-chart-controls .graph-range-field output {
  color: #edf3f6;
}

:root[data-theme="dark"] #pageSchedule .movement-graph-legend {
  color: #edf3f6;
}

:root[data-theme="dark"] #pageSchedule .movement-chart-viewport,
:root[data-theme="dark"] #pageSchedule .movement-chart-surface,
:root[data-theme="dark"] #pageSchedule .movement-chart-plot {
  border-color: #60717d;
  background: #17232c;
}

:root[data-theme="dark"] #pageSchedule .movement-chart-corner {
  border-color: #60717d;
  background: #202e37;
}

:root[data-theme="dark"] #pageSchedule .movement-time-axis {
  border-color: #60717d;
  color: #dce5ea;
  background: #293943;
}

:root[data-theme="dark"] #pageSchedule .movement-time-axis span:not(.major) {
  color: #aab8c1;
}

:root[data-theme="dark"] #pageSchedule .movement-time-axis span.major {
  color: #f4f7f9;
}

:root[data-theme="dark"] #pageSchedule .movement-station-axis {
  border-color: #60717d;
  background: #202e37;
}

:root[data-theme="dark"] #pageSchedule .movement-station-row {
  color: #edf3f6;
}

:root[data-theme="dark"] #pageSchedule .movement-grid-time {
  stroke: #30414b;
}

:root[data-theme="dark"] #pageSchedule .movement-grid-time.major,
:root[data-theme="dark"] #pageSchedule .movement-grid-station {
  stroke: #4c5e69;
}

:root[data-theme="dark"] #pageSchedule .movement-train {
  color: #8baeff;
}

:root[data-theme="dark"] #pageSchedule .movement-minute-label {
  fill: #f4f7f9;
  stroke: #17232c;
}

:root[data-theme="dark"] #pageSchedule .movement-train circle {
  fill: #17232c;
}

:root[data-theme="dark"] #pageSchedule .movement-train-label {
  stroke: #17232c;
}

:root[data-theme="dark"] #pageSchedule .movement-train-1 { color: #ff8181; }
:root[data-theme="dark"] #pageSchedule .movement-train-2 { color: #65dda8; }
:root[data-theme="dark"] #pageSchedule .movement-train-3 { color: #c89bff; }
:root[data-theme="dark"] #pageSchedule .movement-train-4 { color: #ffb45e; }
:root[data-theme="dark"] #pageSchedule .movement-train-5 { color: #65cce7; }
:root[data-theme="dark"] #pageSchedule .movement-train-6 { color: #f19bc4; }
:root[data-theme="dark"] #pageSchedule .movement-train-7 { color: #c5d36b; }

:root[data-theme="dark"] #pageSchedule .movement-current-time {
  stroke: #ff3b3b;
}

@media (max-width: 600px) {
  #pageSchedule .schedule-view-nav {
    overflow-x: auto;
  }

  #pageSchedule .schedule-view-nav button {
    flex: 0 0 auto;
  }

  #pageSchedule .movement-chart-viewport,
  #pageSchedule .movement-chart,
  #pageSchedule .movement-chart-empty {
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Firestore schedule modes */

#pageSchedule .schedule-utility-bar > select,
#pageSchedule .schedule-utility-bar > input {
  height: 34px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
}

#pageSchedule #scheduleMode {
  width: 205px;
  padding: 0 24px 0 7px;
}

#pageSchedule #scheduleDate {
  width: 138px;
  padding: 0 6px;
}

#pageSchedule table.dispatch-table.compact-timetable {
  width: 1174px;
  min-width: 1174px;
}

#pageSchedule .compact-timetable .mark-column,
#pageSchedule .compact-timetable .mark-cell {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
}

#pageSchedule .compact-timetable thead th:nth-child(1) {
  width: 34px;
  background: #b9c2c8 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1) {
  background: #d8dee2 !important;
}

#pageSchedule .compact-timetable thead th:nth-child(2),
#pageSchedule .compact-timetable thead th:nth-child(3) {
  background: #e1bd68 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) {
  background: #f0d58f !important;
}

#pageSchedule .compact-timetable thead th:nth-child(4),
#pageSchedule .compact-timetable thead th:nth-child(13) {
  background: #dda0a0 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) {
  color: #111 !important;
  background: #edbcbc !important;
}

#pageSchedule .compact-timetable thead th:nth-child(5) {
  background: #cbb5df !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) {
  background: #e1d3ed !important;
}

#pageSchedule .compact-timetable thead th:nth-child(6),
#pageSchedule .compact-timetable thead th:nth-child(7),
#pageSchedule .compact-timetable thead th:nth-child(8) {
  background: #a9cde5 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8) {
  background: #c9e0ef !important;
}

#pageSchedule .compact-timetable thead th:nth-child(9),
#pageSchedule .compact-timetable thead th:nth-child(10) {
  background: #d8c866 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) {
  background: #e9dc8f !important;
}

#pageSchedule .compact-timetable thead th:nth-child(11),
#pageSchedule .compact-timetable thead th:nth-child(12) {
  background: #99c49c !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
  background: #b9d9bb !important;
}

#pageSchedule .compact-timetable tr.train-row.train-marked > .mark-cell {
  background: #08762f !important;
}

#pageSchedule .compact-timetable .mark-success-icon {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  filter: brightness(0) invert(1);
}

#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row.selected > td,
#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row:focus-visible > td {
  color: #07131d !important;
  background: #55aaff !important;
}

#pageSchedule .selection-actions {
  max-width: calc(100vw - 16px);
  overflow-x: auto;
}

#pageSchedule .selection-actions select {
  min-height: 44px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  font: inherit;
}

#pageSchedule .selection-actions .danger {
  border-color: #9e3434;
  color: #7d1717;
}

.schedule-editor {
  width: min(900px, calc(100vw - 20px));
}

.schedule-editor form,
.bulk-train-editor form {
  gap: 10px;
}

.schedule-editor-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 6px;
}

.schedule-editor-fields label {
  display: grid;
  gap: 3px;
}

.schedule-editor-fields input,
.schedule-editor-fields select,
.schedule-stops-table input {
  width: 100%;
  height: 36px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
}

.schedule-stops-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.schedule-stops-heading h3 {
  margin: 0;
}

.schedule-stops-actions {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
}

.schedule-stops-scroll {
  max-height: 44dvh;
  overflow: auto;
  border: 1px solid #777;
}

.schedule-stops-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-stops-table th,
.schedule-stops-table td {
  padding: 3px;
  border: 1px solid #aaa;
  color: #111;
  background: #eef3f6;
  text-align: left;
}

.schedule-stops-table th {
  background: #b9d4e6;
}

.schedule-stops-table th:first-child {
  width: 42%;
}

.schedule-stops-table .remove-stop {
  min-height: 36px;
  padding: 0 8px;
}

.bulk-train-editor {
  width: min(660px, calc(100vw - 20px));
}

.bulk-train-editor .schedule-editor-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialog-note {
  margin: 0;
}

@media (max-width: 760px) {
  #pageSchedule .schedule-utility-bar {
    flex-wrap: wrap;
  }

  #pageSchedule #scheduleMode {
    width: min(205px, calc(100vw - 166px));
  }

  #pageSchedule #scheduleDate {
    width: 138px;
  }

  #pageSchedule .schedule-utility-bar #scheduleSearch {
    width: min(220px, calc(100% - 109px));
    flex-basis: 220px;
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    width: 1174px;
    min-width: 1174px;
  }

  .schedule-editor-fields,
  .bulk-train-editor .schedule-editor-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-stops-table {
    min-width: 650px;
  }

  .schedule-editor .editor-footer,
  .bulk-train-editor .editor-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Single-page traffic control workspace */

:root {
  --dispatch-line: #cfd5dc;
  --dispatch-line-dark: #adb7c2;
  --dispatch-blue: #386b91;
  --dispatch-blue-soft: #dce9f2;
  --dispatch-green: #5e7e63;
  --dispatch-green-soft: #dce8dc;
  --dispatch-yellow: #e4c95f;
  --dispatch-yellow-soft: #fff6ce;
  --dispatch-red: #a82b2b;
  --dispatch-red-soft: #fbe3e3;
  --dispatch-row: #fff;
}

[hidden] {
  display: none !important;
}

.topbar-inner,
.section-nav-inner,
main {
  max-width: 1480px;
}

.section-nav {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 19;
  border-bottom: 1px solid var(--dispatch-line);
  background: rgba(255, 255, 255, .98);
}

.section-nav-inner {
  display: flex;
  width: 100%;
  min-height: 43px;
  margin: 0 auto;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  align-items: stretch;
  gap: 2px;
}

.section-nav button {
  position: relative;
  min-width: 112px;
  min-height: 43px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 0;
  color: #4b5560;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.section-nav button:hover {
  color: var(--navy);
  background: #f1f4f6;
}

.section-nav button[aria-selected="true"] {
  border-right-color: var(--dispatch-line);
  border-left-color: var(--dispatch-line);
  color: #fff;
  background: var(--navy);
}

.section-nav button[aria-selected="true"]::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  height: 3px;
  content: "";
  background: var(--dispatch-yellow);
}

main {
  margin-top: 10px;
}

.workspace-bar {
  display: grid;
  min-height: 76px;
  padding: 9px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(370px, .62fr);
  align-items: center;
  gap: 14px;
  border-top: 2px solid var(--navy);
  border-radius: 4px;
  box-shadow: none;
}

.workspace-bar h1 {
  margin-bottom: 2px;
  font-size: clamp(19px, 2vw, 24px);
}

.workspace-bar .eyebrow {
  margin-bottom: 2px;
}

.workspace-bar #scheduleMeta {
  max-width: 880px;
}

.workspace-bar .hero-controls {
  align-items: end;
  justify-content: flex-end;
}

.workspace-bar select,
.workspace-bar input:not([type="range"]) {
  height: 40px;
}

.workspace-bar .primary {
  min-height: 40px;
}

.app-page {
  min-width: 0;
  margin-top: 10px;
}

.page-heading {
  display: flex;
  min-height: 46px;
  margin-bottom: 8px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.page-heading h2 {
  font-size: 21px;
}

.page-heading p {
  max-width: 780px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.summary-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

/* Dispatcher overview */

.overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 7px;
}

.overview-stat {
  min-height: 82px;
  padding: 10px 11px;
  border: 1px solid var(--dispatch-line);
  border-top: 3px solid var(--navy);
  border-radius: 3px;
  background: #fff;
}

.overview-stat > span,
.overview-stat > small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.overview-stat > strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.overview-stat > em {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-stat.warning {
  border-top-color: var(--warning);
  background: #fffdf5;
}

.overview-stat.warning > strong {
  color: #856200;
}

.overview-stat.critical {
  border-top-color: var(--danger);
  background: #fff8f8;
}

.overview-stat.critical > strong {
  color: var(--danger);
}

.overview-grid {
  display: grid;
  margin-top: 8px;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr);
  align-items: start;
  gap: 8px;
}

.overview-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--dispatch-line);
  border-radius: 3px;
  background: #fff;
}

.overview-card > header,
.overview-card > .section-head {
  display: flex;
  min-height: 34px;
  margin: 0 0 5px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.overview-card h3 {
  color: var(--navy);
  font-size: 13px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.overview-list {
  min-height: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-list > .empty {
  margin: 7px 0 2px;
}

.overview-movement {
  display: grid;
  min-height: 50px;
  padding: 6px 2px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
}

.overview-movement:last-child {
  border-bottom: 0;
}

.overview-movement > time,
.overview-movement .movement-time {
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.overview-movement > div {
  min-width: 0;
}

.overview-movement strong,
.overview-movement span,
.overview-movement small {
  display: block;
}

.overview-movement strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-movement span,
.overview-movement small {
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-movement .event-badge,
.overview-movement .delay-badge {
  margin: 0;
}

.overview-alerts .overview-movement,
.overview-alerts > li {
  border-left: 3px solid var(--warning);
  padding-left: 9px;
}

.overview-alert {
  display: grid;
  min-height: 58px;
  padding: 7px 6px 7px 10px;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  background: #fffdf7;
}

.overview-alert:last-child {
  border-bottom: 0;
}

.overview-alert > div {
  min-width: 0;
}

.overview-alert strong,
.overview-alert span,
.overview-alert small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-alert strong {
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.overview-alert span {
  margin-top: 2px;
  color: #765900;
  font-size: 10px;
  line-height: 1.2;
}

.overview-alert small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.overview-alert .table-action {
  width: 100%;
  min-height: 44px;
}

.overview-alert.critical {
  border-left-color: var(--danger);
  background: #fff7f7;
}

.overview-alert.critical span {
  color: var(--danger);
}

.overview-alerts .critical,
.overview-alerts > li.critical {
  border-left-color: var(--danger);
  background: #fff9f9;
}

.success-empty {
  border-color: rgba(47, 143, 91, .34);
  color: #276e49;
  background: #f4fbf7;
}

.path-plan {
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 3px;
  box-shadow: none;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
}

.path-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--dispatch-line);
  border-left: 5px solid var(--dispatch-yellow);
  border-radius: 2px;
  background: #fff;
}

.path-card.warning {
  border-color: rgba(181, 129, 0, .36);
  border-left-color: var(--warning);
  background: #fffdf5;
}

.path-card.critical {
  border-color: rgba(190, 36, 36, .32);
  border-left-color: var(--danger);
  background: #fff7f7;
}

.path-card-head {
  display: flex;
  min-height: 27px;
  padding-bottom: 5px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.path-card-head strong {
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.path-card-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.path-call {
  display: grid;
  min-height: 30px;
  padding-top: 5px;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dotted var(--dispatch-line);
  font-size: 11px;
}

.path-call:last-child {
  border-bottom: 0;
}

.path-call time {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.path-call strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-call span {
  color: var(--muted);
  white-space: nowrap;
}

.path-calls {
  min-width: 0;
  margin-top: 3px;
}

.path-calls > .muted {
  display: block;
  padding: 7px 1px 2px;
  font-size: 10px;
}

.path-warning {
  display: block;
  margin: 7px 0 2px;
  padding: 5px 6px;
  border-left: 2px solid var(--warning);
  color: #765900;
  background: var(--warning-soft);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

.path-call.conflict {
  margin-right: -3px;
  margin-left: -3px;
  padding-right: 3px;
  padding-left: 3px;
  border-bottom-color: rgba(190, 36, 36, .3);
  color: #811c1c;
  background: var(--danger-soft);
}

.path-call.conflict time {
  color: var(--danger);
}

/* EDR-inspired station timetable */

.timetable-panel {
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: none;
}

.timetable-toolbar {
  display: grid;
  padding: 2px 2px 9px;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .46fr) minmax(150px, .46fr) auto;
  align-items: end;
  gap: 7px;
  border-bottom: 1px solid var(--dispatch-line);
}

.filter-field {
  display: block;
  min-width: 0;
}

.filter-field > span,
.filter-field > label {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.filter-field input,
.filter-field select {
  height: 38px;
  margin-top: 3px;
  border-radius: 3px;
}

.filter-check {
  display: inline-flex;
  min-height: 38px;
  padding: 0 9px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--dispatch-line);
  border-radius: 3px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
  white-space: nowrap;
}

.filter-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--navy);
}

.table-meta {
  display: flex;
  min-height: 32px;
  padding: 7px 3px 5px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.timetable-toolbar > .table-meta {
  min-height: 20px;
  padding: 4px 1px 0;
  grid-column: 1 / -1;
}

.overview-card .table-meta {
  display: inline;
  min-height: 0;
  padding: 0;
}

.timetable-scroll {
  max-width: 100%;
  max-height: calc(100dvh - 255px);
  min-height: 220px;
  overflow: auto;
  border: 1px solid var(--dispatch-line-dark);
  background: #e9edf0;
  overscroll-behavior: contain;
  scrollbar-color: #85909b #eef0f2;
  scrollbar-width: thin;
}

table.dispatch-table {
  width: 100%;
  min-width: 1610px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #20252b;
  background: #fff;
  font-size: 11px;
  table-layout: fixed;
}

.dispatch-table thead {
  color: #fff;
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

.dispatch-table thead th {
  position: sticky;
  z-index: 5;
  padding: 5px 5px;
  border-right: 1px solid rgba(255, 255, 255, .27);
  border-bottom: 1px solid var(--dispatch-line-dark);
  text-align: center;
  vertical-align: middle;
}

.dispatch-table thead tr:first-child th {
  top: 0;
  height: 29px;
}

.dispatch-table thead tr:nth-child(2) th {
  top: 29px;
  height: 31px;
}

.dispatch-table thead th[rowspan="2"] {
  top: 0;
}

.dispatch-table .group-service {
  background: var(--navy);
}

.dispatch-table .group-arrival {
  color: #132433;
  background: #a9c8dc;
}

.dispatch-table .group-route {
  background: var(--dispatch-blue);
}

.dispatch-table .group-station {
  color: #2c270f;
  background: var(--dispatch-yellow);
}

.dispatch-table .group-departure {
  background: var(--dispatch-green);
}

.dispatch-table .group-control {
  background: #4c5661;
}

tbody#trainList.train-list {
  display: table-row-group;
}

.dispatch-table tr.train-row {
  --dispatch-row: #fff;
  display: table-row;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--dispatch-row);
}

.dispatch-table tr.train-row:hover {
  --dispatch-row: #f2f6f9;
}

.dispatch-table tr.train-row.past {
  --dispatch-row: #f3f4f5;
  color: #656d76;
}

.dispatch-table td {
  height: 48px;
  padding: 5px 6px;
  overflow: hidden;
  border-right: 1px solid var(--dispatch-line);
  border-bottom: 1px solid var(--dispatch-line);
  background: var(--dispatch-row);
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.dispatch-table tbody tr td:first-child {
  border-left: 3px solid var(--navy);
}

.dispatch-table .train-number-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 84px;
  color: var(--navy);
  background: var(--dispatch-row);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .015em;
}

.dispatch-table .train-number-cell > strong,
.dispatch-table .train-number-cell > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-table .train-number-cell > strong {
  font-size: inherit;
}

.dispatch-table .train-number-cell > strong::before {
  content: "№ ";
}

.dispatch-table .train-number-cell > span {
  margin-top: 2px;
  color: var(--muted);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
}

.dispatch-table .mobile-leg {
  display: none;
}

.dispatch-table thead .train-number-cell,
.dispatch-table thead .train-number-head,
.dispatch-table thead tr:nth-child(2) th:first-child {
  left: 0;
  z-index: 8;
}

.dispatch-table .mark-cell {
  width: 100px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: normal;
}

.dispatch-table .train-time-item {
  display: table-cell;
  width: 84px;
  color: var(--navy);
  background: color-mix(in srgb, var(--dispatch-row) 82%, var(--dispatch-blue-soft));
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.dispatch-table .arrival-plan,
.dispatch-table .arrival-operative,
.dispatch-table .departure-plan,
.dispatch-table .departure-operative {
  width: 78px;
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.dispatch-table .arrival-plan,
.dispatch-table .arrival-operative {
  color: #254c68;
  background: color-mix(in srgb, var(--dispatch-row) 78%, var(--dispatch-blue-soft));
}

.dispatch-table .departure-plan,
.dispatch-table .departure-operative {
  color: #365b3b;
  background: color-mix(in srgb, var(--dispatch-row) 78%, var(--dispatch-green-soft));
}

.dispatch-table .train-time-item time {
  display: block;
  color: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.dispatch-table .train-time-item small,
.dispatch-table .train-time-item em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  line-height: 1;
}

.dispatch-table .delta-cell {
  width: 54px;
  color: var(--dispatch-red);
  background: color-mix(in srgb, var(--dispatch-row) 84%, var(--dispatch-red-soft));
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.dispatch-table .delta-cell.neutral {
  color: var(--muted);
}

.dispatch-table .station-cell {
  width: 155px;
  text-align: left;
}

.dispatch-table .previous-cell,
.dispatch-table .next-cell,
.dispatch-table .origin-cell,
.dispatch-table .destination-cell {
  width: 142px;
  text-align: left;
}

.dispatch-table .previous-cell,
.dispatch-table .next-cell {
  color: #3e5668;
  background: color-mix(in srgb, var(--dispatch-row) 90%, var(--dispatch-blue-soft));
}

.dispatch-table .origin-cell,
.dispatch-table .destination-cell {
  color: #2d5133;
  background: color-mix(in srgb, var(--dispatch-row) 91%, var(--dispatch-green-soft));
}

.dispatch-table .previous-cell strong,
.dispatch-table .previous-cell span,
.dispatch-table .next-cell strong,
.dispatch-table .next-cell span,
.dispatch-table .origin-cell strong,
.dispatch-table .origin-cell span,
.dispatch-table .destination-cell strong,
.dispatch-table .destination-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-table .station-cell strong,
.dispatch-table .station-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-table .station-cell strong {
  font-size: 11px;
}

.dispatch-table .station-cell span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.dispatch-table .track-cell {
  width: 72px;
  color: #302800;
  background: color-mix(in srgb, var(--dispatch-row) 46%, var(--dispatch-yellow-soft));
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.dispatch-table .track-cell strong,
.dispatch-table .track-cell small,
.dispatch-table .dwell-cell strong,
.dispatch-table .dwell-cell small {
  display: block;
}

.dispatch-table .track-cell small,
.dispatch-table .dwell-cell small {
  margin-top: 2px;
  color: var(--muted);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.dispatch-table tr.no-track .track-cell {
  color: var(--dispatch-red);
  background: var(--dispatch-red-soft);
}

.dispatch-table .dwell-cell {
  width: 74px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dispatch-table .mode-cell {
  width: 108px;
  color: #4b5560;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.dispatch-table .train-main {
  min-width: 0;
  text-align: left;
}

.dispatch-table td.train-main {
  display: table-cell;
}

.dispatch-table .train-main > strong,
.dispatch-table .train-main > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-table td.train-actions {
  display: table-cell;
  width: 142px;
  padding: 4px;
}

.dispatch-table td.train-actions > div,
.dispatch-table td.train-actions .action-set {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.dispatch-table td.train-actions > .mini-play,
.dispatch-table td.train-actions > .edit-train,
.dispatch-table td.train-actions > .table-action {
  display: inline-flex;
  width: calc(50% - 3px);
  min-height: 30px;
  padding: 3px 4px;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 9px;
  vertical-align: middle;
}

.dispatch-table td.train-actions > button:only-child {
  width: 100%;
}

.table-action {
  min-width: 0;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--dispatch-line-dark);
  border-radius: 2px;
  color: var(--navy);
  background: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.05;
}

.table-action:hover {
  border-color: var(--navy);
  background: #edf2f6;
}

.table-action.primary-action {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.table-action.primary-action:hover {
  border-color: var(--navy-hover);
  background: var(--navy-hover);
}

.dispatch-table .empty-row td {
  height: 100px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  text-align: center;
}

.dispatch-table tbody > tr:not(.train-row) td {
  height: 100px;
  padding: 12px;
  background: #fff;
  text-align: center;
}

/* Secondary workspaces */

.broadcast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .58fr);
  align-items: start;
  gap: 8px;
}

.broadcast-grid .now-panel {
  grid-area: auto;
  margin: 0;
  border-radius: 3px;
  box-shadow: none;
}

.broadcast-guide {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--dispatch-line);
  border-radius: 3px;
  background: #fff;
}

.broadcast-guide h3 {
  margin-bottom: 7px;
  color: var(--navy);
  text-transform: uppercase;
}

.broadcast-guide p,
.broadcast-guide li {
  color: var(--muted);
  font-size: 11px;
}

.broadcast-guide dl {
  margin: 10px 0;
  border-top: 1px solid var(--dispatch-line);
}

.broadcast-guide dl > div {
  display: grid;
  min-height: 43px;
  padding: 7px 0;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  border-bottom: 1px solid var(--line);
}

.broadcast-guide dt {
  color: var(--navy);
  font-family: "Manrope", "Roboto Condensed", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.broadcast-guide dd {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.announcement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .6fr);
  align-items: start;
  gap: 8px;
}

.announcement-grid .manual,
.announcement-grid .microphone,
.system-page .diagnostics {
  margin-top: 0;
  border-radius: 3px;
  box-shadow: none;
}

.announcement-grid .microphone {
  min-height: 100%;
  align-items: stretch;
  flex-direction: column;
}

.announcement-grid .microphone .mic-button {
  width: 100%;
  margin-top: auto;
}

.system-page {
  min-width: 0;
}

.system-page .diagnostics {
  padding-top: 4px;
}

@media (max-width: 980px) {
  .overview-stats {
    grid-template-columns: repeat(3, minmax(118px, 1fr));
  }

  .overview-grid,
  .broadcast-grid,
  .announcement-grid {
    grid-template-columns: 1fr;
  }

  .announcement-grid .microphone {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .workspace-bar {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .workspace-bar .hero-controls {
    justify-content: stretch;
  }

  .timetable-toolbar {
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, .55fr));
  }

  .timetable-toolbar .filter-check {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .page-heading {
    min-height: 38px;
    margin-bottom: 6px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .page-heading h2 {
    font-size: 18px;
  }

  .overview-stats {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .overview-stat {
    min-height: 74px;
    scroll-snap-align: start;
  }

  .overview-stat > strong {
    font-size: 21px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-card {
    padding: 9px;
  }

  .path-grid {
    grid-template-columns: 1fr;
  }

  .timetable-panel {
    padding: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .timetable-toolbar {
    padding: 0 0 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 0;
  }

  .timetable-toolbar .filter-field:first-child {
    grid-column: 1 / -1;
  }

  .timetable-toolbar .filter-check {
    grid-column: 1 / -1;
  }

  .table-meta {
    padding-right: 1px;
    padding-left: 1px;
  }

  .timetable-scroll {
    max-height: none;
    min-height: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  table.dispatch-table {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
    table-layout: auto;
  }

  .dispatch-table thead {
    display: none;
  }

  tbody#trainList.train-list {
    display: grid;
    width: 100%;
    gap: 7px;
  }

  .dispatch-table tbody > tr:not(.train-row) {
    display: block;
    width: 100%;
  }

  .dispatch-table tbody > tr:not(.train-row) td {
    display: block;
    width: 100%;
    height: auto;
    min-height: 88px;
  }

  .dispatch-table tr.train-row {
    --dispatch-row: #fff;
    display: grid;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--dispatch-line-dark);
    border-left: 4px solid var(--navy);
    border-radius: 3px;
    background: var(--dispatch-row);
    box-shadow: 0 1px 3px rgba(27, 42, 65, .045);
  }

  .dispatch-table tr.train-row.past {
    opacity: .76;
  }

  .dispatch-table tr.train-row:hover {
    --dispatch-row: #fff;
  }

  .dispatch-table td,
  .dispatch-table .train-time-item,
  .dispatch-table td.train-main,
  .dispatch-table td.train-actions {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-height: 49px;
    padding: 6px 7px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--dispatch-row);
    text-align: left;
    text-overflow: ellipsis;
  }

  .dispatch-table tr.train-row > td {
    width: auto;
    max-width: none;
  }

  .dispatch-table td::before {
    display: block;
    margin-bottom: 3px;
    overflow: hidden;
    color: var(--muted);
    content: attr(data-label);
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .065em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .dispatch-table tbody tr td:first-child {
    border-left: 0;
  }

  .dispatch-table .train-number-cell {
    grid-column: 1 / 3;
  }

  .dispatch-table .mark-cell {
    grid-column: 3 / 5;
  }

  .dispatch-table .previous-cell {
    grid-column: 1 / -1;
  }

  .dispatch-table .arrival-plan {
    grid-column: 1 / 2;
  }

  .dispatch-table .arrival-operative {
    grid-column: 2 / 4;
  }

  .dispatch-table .arrival-delta {
    grid-column: 4 / 5;
  }

  .dispatch-table .dwell-cell {
    grid-column: 1 / 2;
  }

  .dispatch-table .track-cell {
    grid-column: 2 / 4;
  }

  .dispatch-table .mode-cell {
    grid-column: 4 / 5;
  }

  .dispatch-table .departure-plan {
    grid-column: 1 / 2;
  }

  .dispatch-table .departure-operative {
    grid-column: 2 / 4;
  }

  .dispatch-table .departure-delta {
    grid-column: 4 / 5;
  }

  .dispatch-table .next-cell {
    grid-column: 1 / -1;
  }

  .dispatch-table .origin-cell {
    grid-column: 1 / 3;
  }

  .dispatch-table .destination-cell {
    grid-column: 3 / 5;
  }

  .dispatch-table .train-actions {
    grid-column: 1 / -1;
  }

  .dispatch-table .train-number-cell {
    z-index: auto;
    min-height: 70px;
    color: var(--navy);
    background: color-mix(in srgb, var(--dispatch-row) 83%, var(--dispatch-blue-soft));
    font-size: 20px;
  }

  .dispatch-table .mark-cell {
    min-height: 70px;
    color: var(--muted);
    background: color-mix(in srgb, var(--dispatch-row) 88%, #e8ebee);
    font-size: 10px;
  }

  .dispatch-table .train-number-cell .mobile-leg {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #40566a;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dispatch-table .train-number-cell > strong::before {
    content: "Поезд ";
  }

  .dispatch-table .train-time-item,
  .dispatch-table .arrival-plan,
  .dispatch-table .arrival-operative {
    color: var(--navy);
    background: color-mix(in srgb, var(--dispatch-row) 75%, var(--dispatch-blue-soft));
    font-size: 15px;
  }

  .dispatch-table .departure-plan,
  .dispatch-table .departure-operative {
    color: #315a37;
    background: color-mix(in srgb, var(--dispatch-row) 72%, var(--dispatch-green-soft));
    font-size: 15px;
  }

  .dispatch-table .train-time-item time {
    font-size: 15px;
  }

  .dispatch-table .delta-cell {
    color: var(--dispatch-red);
    background: color-mix(in srgb, var(--dispatch-row) 76%, var(--dispatch-red-soft));
    font-size: 13px;
  }

  .dispatch-table .station-cell {
    min-height: 54px;
  }

  .dispatch-table .previous-cell,
  .dispatch-table .next-cell,
  .dispatch-table .origin-cell,
  .dispatch-table .destination-cell {
    min-height: 50px;
  }

  .dispatch-table .track-cell {
    min-height: 58px;
    color: #302800;
    background: var(--dispatch-yellow-soft);
    font-size: 20px;
  }

  .dispatch-table .dwell-cell,
  .dispatch-table .mode-cell {
    min-height: 58px;
  }

  .dispatch-table td.train-actions {
    display: grid;
    min-height: 52px;
    padding: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    border-right: 0;
    border-bottom: 0;
  }

  .dispatch-table td.train-actions::before {
    display: none;
  }

  .dispatch-table td.train-actions > div,
  .dispatch-table td.train-actions .action-set {
    grid-column: 1 / -1;
    gap: 5px;
  }

  .dispatch-table td.train-actions > .mini-play,
  .dispatch-table td.train-actions > .edit-train,
  .dispatch-table td.train-actions > .table-action {
    width: 100%;
    min-height: 44px;
    font-size: 10px;
  }

  .table-action {
    min-height: 44px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .dispatch-table .mobile-secondary,
  .dispatch-table .destination-cell {
    display: none;
  }
}

@media (max-width: 640px) {
  .section-nav {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--dispatch-line-dark);
    border-bottom: 0;
    box-shadow: 0 -4px 14px rgba(27, 42, 65, .1);
  }

  .section-nav-inner {
    display: grid;
    min-height: 52px;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .section-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 2px 3px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    border-left: 0;
    font-size: 9px;
    letter-spacing: .015em;
    line-height: 1.05;
    text-overflow: ellipsis;
    text-transform: none;
  }

  .section-nav button:last-child {
    border-right: 0;
  }

  .section-nav button[aria-selected="true"] {
    border-right-color: rgba(255, 255, 255, .12);
    border-left: 0;
  }

  .section-nav button[aria-selected="true"]::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 3px;
  }

  main {
    margin-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .workspace-bar {
    min-height: 0;
    padding: 8px;
    border-radius: 3px;
  }

  .workspace-bar h1 {
    font-size: 18px;
  }

  .workspace-bar .hero-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workspace-bar .hero-controls label {
    width: 100%;
  }

  .app-page {
    margin-top: 7px;
  }

  .overview-movement {
    grid-template-columns: 47px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .overview-movement > time,
  .overview-movement .movement-time {
    font-size: 13px;
  }

  .broadcast-guide {
    padding: 10px;
  }

  .announcement-grid .manual,
  .announcement-grid .microphone,
  .system-page .diagnostics {
    padding-right: 10px;
    padding-left: 10px;
  }

  .toast {
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 50;
  }
}

@media (max-width: 430px) {
  .table-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .dispatch-table .previous-cell,
  .dispatch-table .next-cell {
    min-height: 50px;
  }

  .overview-alert {
    padding-left: 8px;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 6px;
  }

  .broadcast-guide dl > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 7px;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }
}

/* Structured directory records */

.directory-mobile-sort {
  display: none;
}

.directory-sort-button {
  display: flex;
  width: 100%;
  min-height: 27px;
  padding: 2px 5px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.directory-sort-button:hover,
.directory-sort-button:focus-visible {
  color: inherit;
  background: rgba(29, 74, 108, .12);
  outline: 2px solid #347bb1;
  outline-offset: -2px;
}

.directory-sort-indicator {
  width: 10px;
  font-size: 14px;
  line-height: 1;
}

.directory-editor {
  width: min(620px, calc(100vw - 20px));
}

.directory-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
  gap: 8px;
}

.directory-editor-fields > label,
.directory-editor-fields > .directory-tracks-field {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: var(--ink);
  font-size: 15px;
}

.directory-editor-fields input,
.directory-editor-fields select,
.directory-editor-fields textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  color: var(--ink);
  background: var(--control-bg);
  font: inherit;
}

.directory-editor-fields input,
.directory-editor-fields select {
  height: 38px;
}

.directory-editor-fields textarea {
  min-height: 74px;
  padding: 6px;
  line-height: 1.25;
  resize: vertical;
}

.directory-tracks-field {
  grid-column: 1 / -1;
}

.warning-description-field {
  grid-column: 1 / -1;
}

.directory-editor-fields > label.directory-checkbox-field {
  display: flex;
  min-height: 38px;
  align-self: end;
  align-items: center;
  gap: 7px;
}

.directory-editor-fields .directory-checkbox-field input[type="checkbox"] {
  width: 19px;
  height: 19px;
  min-height: 19px;
  margin: 0;
  accent-color: #176faf;
}

.field-label {
  display: block;
}

.tag-editor {
  display: flex;
  min-height: 40px;
  padding: 4px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  gap: 4px;
  align-content: flex-start;
  flex-wrap: wrap;
}

.tag-editor-empty {
  padding: 5px 4px;
  color: var(--muted);
}

.tag-editor-item {
  display: inline-flex;
  min-height: 29px;
  overflow: hidden;
  border: 1px solid #52718b;
  color: #10202c;
  background: #d8e9f5;
  align-items: stretch;
}

.tag-editor-item > span {
  display: grid;
  min-width: 35px;
  padding: 3px 7px;
  font-weight: 700;
  place-items: center;
}

.tag-editor-item button {
  min-height: 27px;
  padding: 2px 7px;
  border: 0;
  border-left: 1px solid #52718b;
  border-radius: 0;
  color: #19364b;
  background: #c4dceb;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.tag-editor-item button:hover,
.tag-editor-item button:focus-visible {
  color: #fff;
  background: #8b2929;
}

.tag-editor-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.tag-editor-entry button {
  min-height: 38px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 400;
}

.directory-table-tags {
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
}

.directory-table-tags > span {
  padding: 1px 5px;
  border: 1px solid #657682;
  color: inherit;
  background: rgba(255, 255, 255, .42);
  font-weight: 700;
}

:root[data-theme="dark"] .tag-editor-item {
  border-color: #64849b;
  color: #f0f5f8;
  background: #27465a;
}

:root[data-theme="dark"] .tag-editor-item button {
  border-left-color: #64849b;
  color: #dfeaf1;
  background: #34566c;
}

:root[data-theme="dark"] .directory-table-tags > span {
  border-color: #71818c;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 820px) {
  .directory-mobile-sort {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
    gap: 5px;
  }

  .directory-mobile-sort select,
  .directory-mobile-sort button {
    width: 100%;
    height: 34px;
    min-height: 34px;
    border-radius: 2px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
  }

  .directory-table tbody td:first-child {
    grid-column: auto;
    min-height: 39px;
  }

  .directory-table-tags {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .directory-editor-fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 7px;
  }

  .directory-tracks-field {
    grid-column: auto;
  }
}

/* Final compact three-section control interface */

.section-nav-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(116px, 156px));
  justify-content: start;
  gap: 0;
}

.section-nav button {
  min-width: 0;
  min-height: 39px;
  padding: 0 14px;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
}

.timetable-panel {
  padding: 8px;
  border-radius: 2px;
}

.timetable-heading {
  min-height: 35px;
  margin-bottom: 6px;
}

.timetable-heading h2 {
  font-size: 17px;
}

.timetable-toolbar {
  display: grid;
  padding: 0 0 7px;
  grid-template-columns:
    minmax(210px, 1fr)
    minmax(145px, .55fr)
    minmax(145px, .55fr)
    minmax(104px, .38fr)
    auto
    max-content;
  align-items: end;
  gap: 6px;
  border-bottom: 0;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

.timetable-toolbar .filter-field {
  min-width: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.timetable-toolbar .filter-field input,
.timetable-toolbar .filter-field select {
  height: 34px;
  margin-top: 3px;
  padding: 0 8px;
  border-color: #c9d0d7;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
}

.timetable-toolbar .reset-filters {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #c9d0d7;
  border-radius: 2px;
  color: #36485a;
  background: #f7f8f9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.timetable-toolbar .reset-filters:hover {
  border-color: #9da9b4;
  background: #eef1f3;
}

.timetable-toolbar > .table-meta {
  min-height: 34px;
  margin: 0;
  padding: 0 2px;
  grid-column: auto;
  align-items: center;
  justify-content: flex-end;
  color: #5d6872;
  font-family: inherit;
  font-size: 10px;
  white-space: nowrap;
}

.timetable-scroll {
  max-height: calc(100dvh - 268px);
  min-height: 220px;
  overflow: auto;
  border: 1px solid #bfc7ce;
  border-radius: 0;
  background: #fff;
  scrollbar-color: #87939e #edf0f2;
  scrollbar-width: thin;
}

table.dispatch-table.compact-timetable {
  display: table;
  width: 100%;
  min-width: 1080px;
  border: 0;
  border-collapse: separate;
  border-radius: 0;
  border-spacing: 0;
  color: #27313a;
  background: #fff;
  box-shadow: none;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
  table-layout: fixed;
}

.compact-timetable,
.compact-timetable * {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
}

.compact-timetable thead {
  display: table-header-group;
  color: #2c3945;
  background: #e8ecef;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.05;
  text-transform: uppercase;
}

.compact-timetable thead tr,
.compact-timetable tbody > tr,
.compact-timetable tr.train-row {
  display: table-row;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.compact-timetable thead th,
.compact-timetable thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  padding: 3px 5px;
  border: 0;
  border-right: 1px solid #c8d0d6;
  border-bottom: 1px solid #adb7c0;
  border-radius: 0;
  color: #2c3945;
  background: #e8ecef;
  box-shadow: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.compact-timetable thead th:first-child {
  left: 0;
  z-index: 8;
}

.compact-timetable tbody#trainList.train-list {
  display: table-row-group;
  width: auto;
  gap: 0;
}

.compact-timetable tr.train-row {
  --compact-row: #fff;
  cursor: pointer;
  background: #fff;
}

.compact-timetable tr.train-row:hover {
  --compact-row: #f4f7f9;
}

.compact-timetable tr.train-row.past:not(.selected) {
  opacity: .68;
}

.compact-timetable td,
.compact-timetable .train-time-item,
.compact-timetable td.train-main,
.compact-timetable td.train-actions {
  display: table-cell;
  width: auto;
  max-width: none;
  height: 34px;
  min-height: 0;
  padding: 3px 5px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #d6dce1;
  border-bottom: 1px solid #d6dce1;
  border-radius: 0;
  background: var(--compact-row);
  box-shadow: none;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  vertical-align: middle;
}

.compact-timetable td::before,
.compact-timetable .train-number-cell::before,
.compact-timetable .train-number-cell strong::before {
  display: none !important;
  content: none !important;
}

.compact-timetable tbody tr td:first-child {
  border-left: 0;
}

.compact-timetable .train-number-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  display: table-cell;
  width: 70px;
  min-width: 70px;
  height: 34px;
  padding: 3px 5px;
  color: #22384b;
  background: color-mix(in srgb, var(--compact-row) 67%, #e7ecef);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.compact-timetable .route-cell {
  width: 155px;
  color: #334a5d;
  background: color-mix(in srgb, var(--compact-row) 68%, #eaf0f4);
  line-height: 1.08;
  overflow-wrap: break-word;
  text-align: left;
  white-space: normal;
}

.compact-timetable .origin-cell,
.compact-timetable .destination-cell {
  display: table-cell;
  width: 155px;
}

.compact-timetable .type-cell {
  width: 90px;
  color: #52606b;
  background: color-mix(in srgb, var(--compact-row) 72%, #e7ecef);
  white-space: normal;
}

.compact-timetable .time-cell,
.compact-timetable .arrival-plan,
.compact-timetable .arrival-actual,
.compact-timetable .departure-plan,
.compact-timetable .departure-actual {
  width: 76px;
  height: 34px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.compact-timetable .arrival-plan,
.compact-timetable .arrival-actual {
  color: #294a61;
  background: color-mix(in srgb, var(--compact-row) 66%, #e4f0f6);
}

.compact-timetable .arrival-delta {
  background: color-mix(in srgb, var(--compact-row) 70%, #e4f0f6);
}

.compact-timetable .dwell-cell,
.compact-timetable .track-cell {
  color: #5c5135;
  background: color-mix(in srgb, var(--compact-row) 68%, #f2eddc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compact-timetable .dwell-cell {
  width: 70px;
}

.compact-timetable .track-cell {
  width: 58px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
}

.compact-timetable tr.no-track .track-cell {
  color: #7a6262;
  background: color-mix(in srgb, var(--compact-row) 72%, #f0e7e2);
}

.compact-timetable .departure-plan,
.compact-timetable .departure-actual {
  color: #38563c;
  background: color-mix(in srgb, var(--compact-row) 66%, #e5f0e6);
}

.compact-timetable .departure-delta {
  background: color-mix(in srgb, var(--compact-row) 70%, #e5f0e6);
}

.compact-timetable .delta-cell {
  width: 56px;
  height: 34px;
  color: #69747d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.compact-timetable .delta-cell.nonzero {
  color: #8d3030;
  background: #f8eaea;
}

.compact-timetable thead th:nth-child(1) {
  width: 70px;
  background: #dfe5e9;
}

.compact-timetable thead th:nth-child(2),
.compact-timetable thead th:nth-child(3) {
  width: 155px;
  background: #e1eaf0;
}

.compact-timetable thead th:nth-child(4) {
  width: 90px;
  background: #e3e8eb;
}

.compact-timetable thead th:nth-child(5),
.compact-timetable thead th:nth-child(6) {
  width: 76px;
  background: #dceaf2;
}

.compact-timetable thead th:nth-child(7) {
  width: 56px;
  background: #e1edf3;
}

.compact-timetable thead th:nth-child(8) {
  width: 70px;
  background: #eee8d4;
}

.compact-timetable thead th:nth-child(9) {
  width: 58px;
  background: #eee8d4;
}

.compact-timetable thead th:nth-child(10),
.compact-timetable thead th:nth-child(11) {
  width: 76px;
  background: #deebdf;
}

.compact-timetable thead th:nth-child(12) {
  width: 56px;
  background: #e3eee4;
}

.compact-timetable tr.train-row:focus {
  outline: none;
}

.compact-timetable tr.train-row:focus-visible td,
.compact-timetable tr.train-row.selected td {
  box-shadow: inset 0 1px #60788d, inset 0 -1px #60788d;
}

.compact-timetable tr.train-row:focus-visible td:first-child,
.compact-timetable tr.train-row.selected td:first-child {
  box-shadow:
    inset 2px 0 #60788d,
    inset 0 1px #60788d,
    inset 0 -1px #60788d;
}

.compact-timetable tr.train-row:focus-visible td:last-child,
.compact-timetable tr.train-row.selected td:last-child {
  box-shadow:
    inset -2px 0 #60788d,
    inset 0 1px #60788d,
    inset 0 -1px #60788d;
}

.compact-timetable tr.train-row.selected {
  opacity: 1;
}

.compact-timetable tbody > tr:not(.train-row) {
  display: table-row;
  width: auto;
}

.compact-timetable tbody > tr:not(.train-row) td,
.compact-timetable .empty-row td {
  display: table-cell;
  width: auto;
  height: 76px;
  min-height: 0;
  padding: 10px;
  border-radius: 0;
  color: #66717b;
  background: #fff;
  box-shadow: none;
  text-align: center;
}

.compact-timetable .empty {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.timetable-selection-bar {
  display: flex;
  min-height: 48px;
  padding: 6px 0 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: #fff;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

.selection-status {
  min-width: 0;
  overflow: hidden;
  color: #52606c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.selection-actions button {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
}

.selection-actions button:disabled {
  color: #8c969f;
  border-color: #d9dee2;
  background: #f3f5f6;
  opacity: 1;
}

.announcements-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.announcements-workspace .now-panel,
.announcement-controls .manual,
.announcement-controls .microphone {
  margin-top: 0;
  box-shadow: none;
}

.announcement-controls {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.train-editor,
.train-info,
.train-editor *,
.train-info * {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
}

.train-editor,
.train-info {
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #9eabb6;
  border-radius: 2px;
  color: #27313a;
  background: #fff;
  box-shadow: 0 14px 38px rgba(27, 42, 65, .18);
}

.train-editor {
  width: min(600px, calc(100% - 24px));
}

.train-info {
  width: min(1040px, calc(100% - 24px));
}

.train-editor::backdrop,
.train-info::backdrop {
  background: rgba(27, 42, 65, .26);
}

.train-editor form,
.train-info-body {
  padding: 14px;
}

.train-editor .editor-head,
.train-info .editor-head {
  min-height: 38px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d3d9de;
}

.train-editor .editor-head h2,
.train-info .editor-head h2 {
  margin-bottom: 0;
  font-size: 19px;
}

.train-editor .override-grid input {
  height: 38px;
  border-radius: 2px;
}

.train-editor .editor-footer button {
  min-height: 42px;
  border-radius: 2px;
}

.train-info-facts {
  display: grid;
  margin: 12px 0 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d3d9de;
  border-left: 1px solid #d3d9de;
}

.train-info-facts > div {
  min-width: 0;
  min-height: 54px;
  padding: 7px 8px;
  border-right: 1px solid #d3d9de;
  border-bottom: 1px solid #d3d9de;
  background: #fff;
}

.train-info-facts dt {
  overflow: hidden;
  color: #68747e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.train-info-facts dd {
  margin: 5px 0 0;
  color: #273744;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.route-table-title {
  margin: 0 0 6px;
  color: #273744;
  font-size: 14px;
}

.route-table-scroll {
  max-width: 100%;
  max-height: min(44dvh, 430px);
  overflow: auto;
  border: 1px solid #bfc7ce;
  border-radius: 0;
  scrollbar-width: thin;
}

.route-table {
  width: 100%;
  min-width: 820px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #303b44;
  background: #fff;
  font-size: 10px;
  table-layout: fixed;
}

.route-table th,
.route-table td {
  height: 31px;
  padding: 3px 5px;
  border: 0;
  border-right: 1px solid #d5dbe0;
  border-bottom: 1px solid #d5dbe0;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-align: center;
}

.route-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #344553;
  background: #e7ecef;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.route-table th:first-child,
.route-table td:first-child {
  width: 180px;
  text-align: left;
}

@media (max-width: 800px) {
  .announcements-workspace {
    grid-template-columns: 1fr;
  }

  .announcements-workspace .now-panel {
    position: static;
  }

  .train-info-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .timetable-panel {
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
  }

  .timetable-toolbar {
    padding: 0 0 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .timetable-toolbar .filter-search {
    grid-column: 1 / -1;
  }

  .timetable-toolbar > .table-meta {
    min-height: 22px;
    padding: 0;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .timetable-scroll {
    max-height: calc(100dvh - 362px);
    min-height: 250px;
    overflow: auto;
    border: 1px solid #bfc7ce;
    background: #fff;
  }

  table.dispatch-table.compact-timetable {
    display: table;
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
  }

  .compact-timetable thead {
    display: table-header-group;
  }

  .compact-timetable tbody#trainList.train-list {
    display: table-row-group;
    width: auto;
    gap: 0;
  }

  .compact-timetable thead tr,
  .compact-timetable tbody > tr,
  .compact-timetable tr.train-row,
  .compact-timetable tbody > tr:not(.train-row) {
    display: table-row;
    width: auto;
  }

  .compact-timetable td,
  .compact-timetable .train-time-item,
  .compact-timetable td.train-main,
  .compact-timetable td.train-actions,
  .compact-timetable .destination-cell,
  .compact-timetable tbody > tr:not(.train-row) td {
    position: static;
    display: table-cell;
    width: auto;
    max-width: none;
    height: 34px;
    min-height: 0;
    padding: 3px 5px;
    border-right: 1px solid #d6dce1;
    border-bottom: 1px solid #d6dce1;
    text-align: center;
  }

  .compact-timetable .train-number-cell {
    position: sticky;
    left: 0;
    z-index: 3;
    display: table-cell;
    width: 70px;
    min-width: 70px;
    height: 34px;
    font-size: 13px;
  }

  .compact-timetable .route-cell,
  .compact-timetable .origin-cell,
  .compact-timetable .destination-cell {
    width: 155px;
    text-align: left;
    white-space: normal;
  }

  .compact-timetable .type-cell {
    width: 90px;
  }

  .compact-timetable .time-cell,
  .compact-timetable .arrival-plan,
  .compact-timetable .arrival-actual,
  .compact-timetable .departure-plan,
  .compact-timetable .departure-actual {
    width: 76px;
  }

  .compact-timetable .arrival-delta,
  .compact-timetable .departure-delta {
    width: 56px;
  }

  .compact-timetable .dwell-cell {
    width: 70px;
  }

  .compact-timetable .track-cell {
    width: 58px;
  }
}

@media (max-width: 640px) {
  .section-nav {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #bfc7ce;
    border-bottom: 0;
    box-shadow: 0 -3px 10px rgba(27, 42, 65, .09);
  }

  .section-nav-inner {
    display: grid;
    min-height: 52px;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0;
  }

  .section-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 2px 4px;
    border-right: 1px solid #d5dbe0;
    border-left: 0;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: none;
  }

  .section-nav button:last-child {
    border-right: 0;
  }

  .section-nav button[aria-selected="true"] {
    border-right-color: rgba(255, 255, 255, .12);
    border-left: 0;
  }

  .section-nav button[aria-selected="true"]::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 2px;
  }

  main {
    margin-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .timetable-selection-bar {
    min-height: 0;
    padding-top: 7px;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .selection-status {
    min-height: 16px;
    padding: 0 1px;
  }

  .selection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selection-actions button {
    min-height: 44px;
    padding: 0 8px;
  }

  .train-editor,
  .train-info {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 0;
  }

  .train-editor form,
  .train-info-body {
    padding: 10px;
  }

  .train-info-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .train-info-facts > div {
    min-height: 50px;
    padding: 6px;
  }

  .route-table-scroll {
    max-height: 43dvh;
  }
}

@media (max-width: 420px) {
  .train-info-facts {
    grid-template-columns: 1fr;
  }

  .train-editor .override-grid,
  .train-editor .editor-footer {
    grid-template-columns: 1fr;
  }

  .train-editor .override-grid label:last-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .timetable-scroll {
    min-height: 180px;
    max-height: max(180px, calc(100dvh - 590px));
    overscroll-behavior: auto;
  }
}

/* EDR-inspired single-strip interface */

body,
body * {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body,
button,
input,
select,
textarea,
summary,
h1,
h2,
h3,
p,
label,
span,
strong,
small,
time,
output,
dt,
dd,
th,
td,
li,
pre {
  font-size: 15px !important;
  font-weight: 400 !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: env(safe-area-inset-top) 0 0;
  border-bottom: 1px solid #0d1726;
  background: #1b2a41;
}

.topbar-inner {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 58px;
  margin: 0;
  padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 220px;
  height: 46px;
  flex: 0 0 220px;
  overflow: hidden;
}

.brand-logo img {
  display: block;
  width: 220px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

.section-nav {
  position: static;
  inset: auto;
  z-index: auto;
  min-width: 0;
  width: 390px;
  flex: 0 1 390px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.section-nav-inner {
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 36px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.section-nav button {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.section-nav button[aria-selected="true"] {
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.section-nav button[aria-selected="true"]::after {
  display: none;
  content: none;
}

.header-station {
  display: flex;
  min-width: 0;
  flex: 0 0 210px;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #fff;
  white-space: nowrap;
}

.header-station select {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 36px;
  padding: 0 28px 0 8px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 2px;
  color: #111;
  background-color: #fff;
}

main {
  width: auto;
  max-width: none;
  margin: 4px 8px 0;
  padding: 0 0 max(8px, env(safe-area-inset-bottom));
}

.app-page {
  margin-top: 0;
}

.timetable-panel {
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.timetable-toolbar {
  display: grid;
  padding: 0 0 4px;
  grid-template-columns: minmax(260px, 380px) 170px auto max-content;
  align-items: end;
  justify-content: start;
  gap: 4px;
}

.timetable-toolbar .filter-field {
  min-width: 0;
  line-height: 1;
}

.timetable-toolbar .filter-field input,
.timetable-toolbar .filter-field select {
  height: 36px;
  margin-top: 2px;
  padding: 0 8px;
  border: 1px solid #777;
  border-radius: 0;
  color: #111;
  background: #fff;
}

.timetable-toolbar .reset-filters {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #777;
  border-radius: 0;
  color: #111;
  background: #ececec;
}

.timetable-toolbar > .table-meta {
  min-height: 36px;
  margin: 0;
  padding: 0 3px;
  display: flex;
  align-items: center;
  color: #111;
  white-space: nowrap;
}

.timetable-scroll {
  max-width: 100%;
  max-height: calc(100dvh - 166px);
  min-height: 0;
  overflow: auto;
  border: 1px solid #666;
  border-radius: 0;
  background: #fff;
  overscroll-behavior: contain;
}

table.dispatch-table.compact-timetable {
  display: table !important;
  width: 1050px;
  min-width: 1050px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #111;
  background: #fff;
  table-layout: fixed;
}

.compact-timetable thead {
  display: table-header-group !important;
  color: #111;
  background: transparent;
}

.compact-timetable tbody#trainList.train-list {
  display: table-row-group !important;
  width: auto;
  gap: 0;
}

.compact-timetable thead tr,
.compact-timetable tbody > tr,
.compact-timetable tr.train-row {
  display: table-row !important;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.compact-timetable thead th,
.compact-timetable thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 36px;
  padding: 2px 4px;
  border: 0;
  border-right: 1px solid #666;
  border-bottom: 1px solid #555;
  border-radius: 0;
  color: #111 !important;
  line-height: 1.05;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

table.dispatch-table.compact-timetable tbody tr.train-row > td {
  position: static;
  display: table-cell !important;
  width: auto;
  max-width: none;
  height: 30px;
  min-height: 0 !important;
  padding: 2px 4px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  border-radius: 0;
  color: #111 !important;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  vertical-align: middle;
}

.compact-timetable tbody tr.train-row:hover > td {
  filter: brightness(.96);
}

.compact-timetable tr.train-row.past:not(.selected) {
  opacity: 1;
}

.compact-timetable tr.train-row.selected > td,
.compact-timetable tr.train-row:focus-visible > td {
  box-shadow: inset 0 2px #1b2a41, inset 0 -2px #1b2a41;
}

.compact-timetable tr.train-row.selected > td:first-child,
.compact-timetable tr.train-row:focus-visible > td:first-child {
  box-shadow: inset 2px 0 #1b2a41, inset 0 2px #1b2a41, inset 0 -2px #1b2a41;
}

.compact-timetable tr.train-row.selected > td:last-child,
.compact-timetable tr.train-row:focus-visible > td:last-child {
  box-shadow: inset -2px 0 #1b2a41, inset 0 2px #1b2a41, inset 0 -2px #1b2a41;
}

.compact-timetable .train-number-cell {
  position: sticky !important;
  left: 0;
  z-index: 3;
  width: 64px;
  min-width: 64px;
  white-space: nowrap;
}

.compact-timetable thead th:first-child {
  left: 0;
  z-index: 8;
}

.compact-timetable .route-cell,
.compact-timetable .origin-cell,
.compact-timetable .destination-cell {
  width: 150px;
  overflow-wrap: break-word;
  text-align: left;
  white-space: normal;
}

.compact-timetable .type-cell {
  width: 70px;
}

.compact-timetable .time-cell,
.compact-timetable .arrival-plan,
.compact-timetable .arrival-actual,
.compact-timetable .departure-plan,
.compact-timetable .departure-actual {
  width: 72px;
  height: 30px;
  white-space: nowrap;
}

.compact-timetable .arrival-delta,
.compact-timetable .departure-delta,
.compact-timetable .delta-cell {
  width: 62px;
  height: 30px;
  white-space: nowrap;
}

.compact-timetable .dwell-cell {
  width: 70px;
}

.compact-timetable .track-cell {
  width: 52px;
  height: 30px;
  white-space: nowrap;
}

.compact-timetable thead th:nth-child(1) {
  width: 64px;
  background: #cbb5df !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(1) {
  background: #e1d3ed !important;
}

.compact-timetable thead th:nth-child(2),
.compact-timetable thead th:nth-child(3),
.compact-timetable thead th:nth-child(4) {
  background: #a9cde5 !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(2),
.compact-timetable tbody tr.train-row > td:nth-child(3),
.compact-timetable tbody tr.train-row > td:nth-child(4) {
  background: #c9e0ef !important;
}

.compact-timetable thead th:nth-child(5),
.compact-timetable thead th:nth-child(6) {
  width: 72px;
  background: #e1bd68 !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(5),
.compact-timetable tbody tr.train-row > td:nth-child(6) {
  background: #f0d58f !important;
}

.compact-timetable thead th:nth-child(7),
.compact-timetable thead th:nth-child(12) {
  width: 62px;
  background: #dda0a0 !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(7),
.compact-timetable tbody tr.train-row > td:nth-child(12),
.compact-timetable .delta-cell.nonzero {
  color: #111 !important;
  background: #edbcbc !important;
}

.compact-timetable thead th:nth-child(8) {
  width: 70px;
  background: #d8c866 !important;
}

.compact-timetable thead th:nth-child(9) {
  width: 52px;
  background: #d8c866 !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(8),
.compact-timetable tbody tr.train-row > td:nth-child(9) {
  background: #e9dc8f !important;
}

.compact-timetable thead th:nth-child(10),
.compact-timetable thead th:nth-child(11) {
  width: 72px;
  background: #99c49c !important;
}

.compact-timetable tbody tr.train-row > td:nth-child(10),
.compact-timetable tbody tr.train-row > td:nth-child(11) {
  background: #b9d9bb !important;
}

.compact-timetable tbody > tr:not(.train-row) td,
.compact-timetable .empty-row td {
  display: table-cell !important;
  height: 54px;
  min-height: 0;
  padding: 5px;
  border: 0;
  color: #111;
  background: #fff;
  text-align: center;
}

.timetable-selection-bar {
  display: grid;
  min-height: 48px;
  padding: 3px 0 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.selection-status {
  min-width: 0;
  color: #111;
}

.selection-actions {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px;
}

.selection-actions button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 0;
}

.page-heading {
  min-height: 46px;
  margin-bottom: 4px;
  align-items: center;
}

.page-heading h2 {
  margin: 0;
}

.diagnostic-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagnostic-body > div,
.diagnostic-body > button {
  min-height: 48px;
}

.diagnostic-body .system-meta {
  grid-column: span 2;
}

.diagnostic-body .system-actions {
  display: flex;
  min-height: 0;
  padding: 0;
  grid-column: 1 / -1;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
}

.system-actions button {
  min-height: 42px;
  border-radius: 0;
}

.system-page .status-pill {
  min-height: 0;
  padding: 0;
  border: 0;
  color: #111;
  background: transparent;
}

.system-page .status-pill span {
  width: 8px;
  height: 8px;
}

.system-page #clock {
  min-width: 0;
  color: #111;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .topbar-inner {
    display: grid;
    min-height: 48px;
    padding: 3px 4px;
    grid-template-columns: 28px minmax(0, 1fr) 80px;
    gap: 3px;
  }

  .brand-logo {
    width: 28px;
    height: 28px;
    flex: none;
  }

  .brand-logo img {
    width: 135px;
    max-width: none;
    height: 28px;
    object-fit: contain;
    object-position: left center;
  }

  .section-nav-inner {
    min-height: 36px;
  }

  .section-nav {
    width: 100%;
    flex: none;
  }

  .section-nav button {
    min-height: 36px;
    padding: 0 3px;
  }

  .header-station span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .header-station select {
    width: 80px;
    height: 36px;
    padding-right: 16px;
    padding-left: 4px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 3px center;
  }

  .header-station {
    width: auto;
    flex: none;
    margin-left: 0;
  }

  main {
    margin: 3px 4px 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .timetable-panel {
    padding: 0;
  }

  .timetable-toolbar {
    padding-bottom: 3px;
    grid-template-columns: minmax(125px, 1fr) 118px auto;
    gap: 3px;
  }

  .timetable-toolbar > .table-meta {
    min-height: 20px;
    padding: 0;
    grid-column: 1 / -1;
  }

  .timetable-toolbar .filter-field input,
  .timetable-toolbar .filter-field select,
  .timetable-toolbar .reset-filters {
    height: 36px;
    min-height: 36px;
  }

  .timetable-scroll {
    min-height: 150px;
    max-height: calc(100dvh - 188px);
    overflow: auto;
  }

  table.dispatch-table.compact-timetable {
    display: table !important;
    width: 1050px;
    min-width: 1050px;
    table-layout: fixed;
  }

  .compact-timetable thead {
    display: table-header-group !important;
  }

  .compact-timetable tbody#trainList.train-list {
    display: table-row-group !important;
  }

  .compact-timetable thead tr,
  .compact-timetable tbody > tr,
  .compact-timetable tr.train-row {
    display: table-row !important;
  }

  table.dispatch-table.compact-timetable tbody tr.train-row > td {
    display: table-cell !important;
    height: 30px;
    min-height: 0 !important;
    padding: 2px 4px;
  }

  .compact-timetable .train-number-cell {
    position: sticky !important;
    width: 64px;
    min-width: 64px;
    height: 30px;
  }

  .timetable-selection-bar {
    display: grid;
    min-height: 50px;
    padding-top: 3px;
    grid-template-columns: minmax(0, 1fr) minmax(218px, auto);
    align-items: center;
    gap: 4px;
  }

  .selection-status {
    min-height: 0;
    padding: 0;
  }

  .selection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .selection-actions button {
    min-height: 44px;
    padding: 0 7px;
  }

  .diagnostic-body {
    grid-template-columns: 1fr;
  }

  .diagnostic-body .system-meta,
  .diagnostic-body .system-actions {
    grid-column: auto;
  }

  .diagnostic-body .system-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Control-room pages: announcements and system */

.control-page {
  --control-ink: #18232d;
  --control-muted: #5d6974;
  --control-line: #aeb8c1;
  --control-line-soft: #d5dbe0;
  --control-head: #e5eaee;
  --control-head-dark: #d5dde3;
  --control-blue: #1b2a41;
  --control-blue-soft: #edf2f6;
  min-width: 0;
  color: var(--control-ink);
}

.control-page .control-page-heading {
  display: grid !important;
  min-height: 52px;
  margin: 0 0 8px;
  padding: 0 0 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--control-blue);
}

.control-page .control-page-title {
  min-width: 0;
}

.control-page .control-page-title h2 {
  margin: 0;
  color: var(--control-ink);
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.1;
}

.control-page .control-page-title p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--control-muted);
  font-size: 12px !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-page .control-page-heading > button {
  min-width: 150px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 2px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.control-page .control-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--control-line);
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}

.control-page .control-panel-header {
  display: flex;
  min-height: 48px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--control-line);
  background: var(--control-head);
}

.control-page .control-panel-header > div {
  min-width: 0;
}

.control-page .control-panel-header h2 {
  margin: 0;
  color: var(--control-ink);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.1;
}

.control-page .control-panel-header p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--control-muted);
  font-size: 12px !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-page button,
.control-page select,
.control-page input:not([type="range"]) {
  border-radius: 2px;
}

#pageAnnouncements .announcements-workspace {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  grid-template-areas: "controls monitor";
  align-items: start;
  gap: 8px;
}

#pageAnnouncements .announcement-controls {
  display: grid;
  min-width: 0;
  grid-area: controls;
  gap: 8px;
}

#pageAnnouncements .now-panel {
  position: static;
  min-width: 0;
  padding: 0;
  grid-area: monitor;
}

#pageAnnouncements .manual,
#pageAnnouncements .microphone {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#pageAnnouncements .control-panel-body,
#pageAnnouncements .broadcast-monitor-body {
  min-width: 0;
}

#pageAnnouncements .control-subsection {
  min-width: 0;
  padding: 10px;
}

#pageAnnouncements .control-subsection + .control-subsection {
  border-top: 1px solid var(--control-line);
}

#pageAnnouncements .control-subsection-heading {
  display: grid;
  min-width: 0;
  margin-bottom: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

#pageAnnouncements .control-subsection-heading h3,
#pageAnnouncements .queue-head h3 {
  margin: 0;
  color: var(--control-ink);
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15;
}

#pageAnnouncements .control-subsection-heading span {
  overflow: hidden;
  color: var(--control-muted);
  font-size: 12px !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageAnnouncements .quick-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 5px;
}

#pageAnnouncements .quick-action {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid #8997a3;
  border-radius: 2px;
  color: var(--control-ink);
  background: #f7f8f9;
  font-size: 14px !important;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
}

#pageAnnouncements .quick-action:hover {
  border-color: var(--control-blue);
  background: var(--control-blue-soft);
}

#pageAnnouncements .composer {
  display: grid;
  min-width: 0;
  padding: 0;
  grid-template-columns:
    minmax(165px, 1.05fr)
    minmax(185px, 1.2fr)
    minmax(90px, .48fr)
    minmax(250px, .9fr);
  grid-template-areas: none;
  align-items: end;
  gap: 6px;
}

#pageAnnouncements .composer > label,
#pageAnnouncements .composer-actions,
#pageAnnouncements .composer-actions button {
  grid-area: auto;
}

#pageAnnouncements .composer label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--control-muted);
  font-size: 12px !important;
  line-height: 1;
}

#pageAnnouncements .composer select,
#pageAnnouncements .composer input {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #8997a3;
  color: var(--control-ink);
  background: #fff;
  font-size: 14px !important;
}

#pageAnnouncements .composer-actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#pageAnnouncements .composer-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 5px 10px;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1;
}

#pageAnnouncements .microphone {
  display: block;
  min-height: 0;
  border-left: 1px solid var(--control-line);
}

#pageAnnouncements .microphone-body {
  display: grid;
  min-width: 0;
  padding: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

#pageAnnouncements .microphone-body p {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--control-muted);
  font-size: 13px !important;
  line-height: 1.3;
}

#pageAnnouncements .mic-button {
  min-width: 190px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--control-blue);
  border-radius: 2px;
  color: #fff;
  background: var(--control-blue);
  font-size: 14px !important;
  font-weight: 700 !important;
}

#pageAnnouncements .mic-button.active {
  border-color: #8e2020;
  background: #a62b2b;
}

#pageAnnouncements .broadcast-monitor-body {
  padding: 9px;
}

#pageAnnouncements .now-playing {
  display: grid;
  min-height: 62px;
  padding: 9px 10px;
  grid-template-columns: 5px minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  border: 1px solid var(--control-blue);
  border-radius: 0;
  color: #fff;
  background: var(--control-blue);
}

#pageAnnouncements .now-playing.idle {
  border-color: #b8c0c7;
  color: var(--control-ink);
  background: #eef1f3;
}

#pageAnnouncements .live-marker {
  display: block;
  width: 5px;
  border-radius: 0;
  background: #51ba82;
}

#pageAnnouncements .now-playing.idle .live-marker {
  background: #98a4ae;
}

#pageAnnouncements .now-playing > div {
  min-width: 0;
  align-self: center;
}

#pageAnnouncements .now-playing strong,
#pageAnnouncements .now-playing span {
  display: block;
}

#pageAnnouncements .now-playing strong {
  overflow: hidden;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageAnnouncements .now-playing span {
  margin-top: 4px;
  color: inherit;
  font-size: 12px !important;
  line-height: 1.2;
  opacity: .75;
}

#pageAnnouncements .broadcast-list-section {
  min-width: 0;
  margin-top: 8px;
  border: 1px solid var(--control-line-soft);
}

#pageAnnouncements .queue-head {
  display: flex;
  min-height: 38px;
  margin: 0;
  padding: 0 8px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--control-line-soft);
  background: var(--control-head);
}

#pageAnnouncements .planned-head {
  margin: 0;
  border-top: 0;
}

#pageAnnouncements .queue-head .text-button {
  min-height: 36px;
  padding: 0 3px;
  color: #405160;
  font-size: 12px !important;
  font-weight: 400 !important;
}

#pageAnnouncements .queue-count {
  color: var(--control-muted);
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}

#pageAnnouncements .queue-list,
#pageAnnouncements .planned-list {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  list-style: none;
}

#pageAnnouncements .queue-list {
  max-height: 130px;
}

#pageAnnouncements .planned-list {
  max-height: 258px;
}

#pageAnnouncements .queue-list li,
#pageAnnouncements .planned-list > .muted {
  min-width: 0;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid #e0e4e7;
  font-size: 13px !important;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#pageAnnouncements .queue-list li:last-child,
#pageAnnouncements .planned-list li:last-child {
  border-bottom: 0;
}

#pageAnnouncements .queue-list li strong {
  display: block;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#pageAnnouncements .queue-list li span {
  display: block;
  margin-top: 2px;
  color: var(--control-muted);
  font-size: 11px !important;
}

#pageAnnouncements .planned-item {
  display: grid;
  min-width: 0;
  padding: 8px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid #e0e4e7;
}

#pageAnnouncements .planned-item > time {
  color: var(--control-blue);
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}

#pageAnnouncements .planned-item div {
  min-width: 0;
}

#pageAnnouncements .planned-item strong {
  display: block;
  overflow: hidden;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageAnnouncements .planned-item span {
  display: block;
  margin-top: 3px;
  color: var(--control-muted);
  font-size: 11px !important;
  line-height: 1.25;
}

#pageAnnouncements .volume-control {
  display: grid;
  min-width: 0;
  margin: 8px 0 0;
  padding: 8px 8px 3px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  border: 1px solid var(--control-line-soft);
  color: var(--control-ink);
  font-size: 13px !important;
}

#pageAnnouncements .volume-control output {
  float: none;
  color: var(--control-blue);
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}

#pageAnnouncements .volume-control input {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
}

#pageSystem .settings-shell {
  width: 100%;
  max-width: 1040px;
  min-width: 0;
}

#pageSystem .settings-page-header {
  display: flex;
  min-height: 42px;
  margin: 0 0 7px;
  padding: 0 2px 7px;
  align-items: center;
  border-bottom: 1px solid var(--control-line);
}

#pageSystem .settings-page-header h2 {
  margin: 0;
  color: var(--control-ink);
  font-size: 20px !important;
  font-weight: 700 !important;
}

#pageSystem .system-dashboard {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  grid-template-areas:
    "status maintenance"
    "log log";
  align-items: start;
  gap: 7px;
}

#pageSystem .settings-section,
#pageSystem .settings-log {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--control-line);
  border-radius: 2px;
  color: var(--control-ink);
  background: var(--surface);
}

#pageSystem .settings-section > h2 {
  min-height: 37px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--control-line-soft);
  background: var(--surface-soft);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

#pageSystem .system-status-panel {
  grid-area: status;
}

#pageSystem .system-maintenance {
  grid-area: maintenance;
}

#pageSystem .system-log-panel {
  grid-area: log;
}

#pageSystem .settings-status-list {
  min-width: 0;
  margin: 0;
}

#pageSystem .settings-status-row {
  display: grid;
  min-width: 0;
  min-height: 39px;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--control-line-soft);
}

#pageSystem .settings-status-row:last-child {
  border-bottom: 0;
}

#pageSystem .settings-status-row > * {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 7px 9px;
  align-items: center;
  overflow-wrap: anywhere;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

#pageSystem .settings-status-row dt {
  color: #44515c;
  border-right: 1px solid var(--control-line-soft);
  background: #f0f2f4;
}

#pageSystem .settings-status-row dd {
  color: var(--control-ink);
  background: #fff;
}

#pageSystem .status-pill {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--control-ink);
  background: transparent;
}

#pageSystem .status-pill > span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 7px 0 0;
  flex: 0 0 9px;
  border-radius: 50%;
}

#pageSystem .system-actions {
  display: grid;
  min-width: 0;
  padding: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  border-top: 1px solid var(--control-line-soft);
  background: var(--surface-soft);
}

#pageSystem .system-actions button {
  width: 100%;
  min-width: 0;
  min-height: 37px;
  padding: 5px 8px;
  border: 1px solid #8997a3;
  border-radius: 2px;
  color: var(--control-ink);
  background: #f7f8f9;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.15;
}

#pageSystem .system-actions button:hover {
  border-color: var(--control-blue);
  background: var(--control-blue-soft);
}

#pageSystem .settings-log {
  grid-area: log;
}

#pageSystem .settings-log > summary {
  display: flex;
  min-height: 38px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  background: var(--surface-soft);
}

#pageSystem .settings-log > summary::-webkit-details-marker {
  display: none;
}

#pageSystem .settings-log > summary:hover,
#pageSystem .settings-log > summary:focus-visible {
  background: var(--control-blue-soft);
}

#pageSystem .settings-log > summary span:first-child {
  font-size: 14px !important;
  font-weight: 700 !important;
}

#pageSystem .settings-log-state {
  color: var(--control-muted);
  font-size: 12px !important;
}

#pageSystem .settings-log[open] .settings-log-state {
  font-size: 0 !important;
}

#pageSystem .settings-log[open] .settings-log-state::after {
  content: "Скрыть";
  font-size: 12px;
}

#pageSystem #diagnosticLog {
  width: 100%;
  min-width: 0;
  min-height: 170px;
  max-height: 300px;
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--control-line);
  border-radius: 0;
  color: #e1e8ee;
  background: #1e2d43;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  #pageAnnouncements .composer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pageAnnouncements .composer > label:nth-child(3) {
    grid-column: 1 / 2;
  }

  #pageAnnouncements .composer-actions {
    grid-column: 2 / 3;
  }
}

@media (max-width: 900px) {
  #pageAnnouncements .announcements-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "monitor"
      "controls";
  }

  #pageAnnouncements .now-panel {
    position: static;
  }

  #pageSystem .system-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "maintenance"
      "log";
  }

  #pageSchedule .movement-chart-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pageSchedule .movement-chart-controls .graph-settings-actions {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .control-page .control-page-heading {
    min-height: 54px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    gap: 6px;
  }

  .control-page .control-page-title h2 {
    font-size: 17px !important;
  }

  .control-page .control-page-title p {
    font-size: 11px !important;
  }

  .control-page .control-page-heading > button {
    min-width: 132px;
    min-height: 44px;
    padding: 0 9px;
    font-size: 13px !important;
  }

  .control-page .control-panel-header {
    min-height: 46px;
    padding: 7px 8px;
  }

  .control-page .control-panel-header p {
    font-size: 11px !important;
  }

  #pageSchedule .movement-chart-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pageSchedule .movement-chart-controls > label:nth-of-type(even) {
    border-right: 0;
  }

  #pageSchedule .movement-chart-controls .graph-settings-actions {
    grid-column: 1 / -1;
  }

  #pageSchedule .movement-chart-controls .graph-settings-actions {
    min-height: 46px;
    align-items: center;
  }

  #pageAnnouncements .announcements-workspace,
  #pageAnnouncements .announcement-controls {
    gap: 5px;
  }

  #pageAnnouncements .broadcast-monitor-body,
  #pageAnnouncements .control-subsection,
  #pageAnnouncements .microphone-body {
    padding: 7px;
  }

  #pageAnnouncements .planned-list {
    max-height: 210px;
  }

  #pageAnnouncements .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  #pageAnnouncements .quick-action {
    min-height: 44px;
    padding: 6px 8px;
  }

  #pageAnnouncements .control-subsection-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #pageAnnouncements .composer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 7px;
  }

  #pageAnnouncements .composer > label:nth-child(3),
  #pageAnnouncements .composer-actions {
    grid-column: auto;
  }

  #pageAnnouncements .composer select,
  #pageAnnouncements .composer input,
  #pageAnnouncements .composer-actions button {
    min-height: 44px;
    height: 44px;
  }

  #pageAnnouncements .microphone-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #pageAnnouncements .mic-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  #pageSystem .system-dashboard {
    gap: 5px;
  }

  #pageSystem .settings-status-row {
    min-height: 42px;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  #pageSystem .settings-status-row > * {
    padding: 8px;
    font-size: 13px !important;
  }

  #pageSystem .system-actions {
    padding: 7px;
    gap: 5px;
  }

  #pageSystem #diagnosticLog {
    min-height: 220px;
    max-height: 42dvh;
    padding: 9px;
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  #pageSystem .system-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 350px) {
  .control-page .control-page-title p {
    display: none;
  }

  .control-page .control-page-heading > button {
    min-width: 120px;
    padding-right: 6px;
    padding-left: 6px;
  }

  #pageAnnouncements .quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #pageAnnouncements .composer-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #pageAnnouncements .composer-actions button {
    height: auto;
  }

  #pageSystem .settings-status-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* Staged schedule editor and route model */

.schedule-editor-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  background: var(--surface-muted);
}

.schedule-editor-progress span {
  min-width: 0;
  padding: 6px 9px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.schedule-editor-progress span + span {
  border-left: 1px solid var(--line-strong);
}

.schedule-editor-progress span[aria-current="step"] {
  color: #fff;
  background: #176faf;
}

.schedule-editor-step {
  min-width: 0;
}

.schedule-editor-step .schedule-editor-fields {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.schedule-editor-fields select,
.schedule-stops-table select {
  width: 100%;
  height: 36px;
  min-width: 0;
  border: 1px solid #777;
  border-radius: 0;
  color: #111;
  background: #fff;
  font: inherit;
}

.schedule-stops-table {
  min-width: 760px;
  table-layout: fixed;
}

.schedule-stops-table th:first-child {
  width: 30%;
}

.schedule-stops-table th:nth-child(2),
.schedule-stops-table th:nth-child(3) {
  width: 15%;
}

.schedule-stops-table th:nth-child(4) {
  width: 86px;
  text-align: center;
}

.schedule-stops-table th:nth-child(5) {
  width: 12%;
}

.schedule-stops-table th:last-child {
  width: 43px;
}

.schedule-stops-table .scheduled-stop-cell {
  text-align: center;
}

.schedule-stops-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #176faf;
}

.schedule-stops-table tr.passing-stop [data-stop-field="arrival"],
.schedule-stops-table tr.passing-stop [data-stop-field="departure"] {
  background: #eef5f9;
}

.schedule-editor .editor-footer {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-end;
}

.schedule-editor .editor-footer button {
  min-width: 128px;
}

.train-info .route-table-scroll {
  width: calc(100% + 28px);
  max-width: none;
  margin-inline: -14px;
  border-right: 0;
  border-left: 0;
}

.train-info table.route-table {
  width: 100%;
  min-width: 836px;
}

@media (max-width: 560px) {
  .schedule-editor-progress span {
    padding-inline: 5px;
    font-size: 14px;
  }

  .schedule-editor .editor-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-editor .editor-footer button {
    width: 100%;
    min-width: 0;
  }
}

/* Timetable utility bar and revised column order */

#pageSchedule .timetable-panel {
  width: fit-content;
  max-width: 100%;
}

#pageSchedule .schedule-utility-bar {
  display: flex;
  min-height: 40px;
  padding: 0 0 4px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  background: transparent;
}

#pageSchedule .schedule-utility-bar #scheduleSearch {
  width: min(240px, 34vw);
  max-width: none;
  height: 34px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #777;
  border-radius: 0;
  color: #111;
  background: #fff;
  font-size: 15px !important;
}

#pageSchedule .schedule-utility-bar #scheduleSearch::placeholder {
  color: #666;
  opacity: 1;
}

#pageSchedule #scheduleClock {
  display: inline-flex;
  min-width: 116px;
  height: 34px;
  margin: 0 0 0 auto;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid #2e78ba;
  border-radius: 0;
  color: #fff;
  background: #55aaff;
  font-size: 28px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

#pageSchedule .timetable-scroll {
  max-height: calc(100dvh - 158px);
}

#pageSchedule table.dispatch-table.compact-timetable {
  width: 1140px;
  min-width: 1140px;
}

#pageSchedule .compact-timetable thead th,
#pageSchedule .compact-timetable thead tr:first-child th {
  height: 44px;
  padding: 3px 4px;
  font-weight: 700 !important;
  line-height: 1.05;
}

#pageSchedule .compact-timetable .arrival-plan,
#pageSchedule .compact-timetable thead th:nth-child(1) {
  width: 120px;
}

#pageSchedule .compact-timetable .arrival-actual,
#pageSchedule .compact-timetable thead th:nth-child(2) {
  width: 105px;
}

#pageSchedule .compact-timetable .arrival-delta,
#pageSchedule .compact-timetable .departure-delta,
#pageSchedule .compact-timetable thead th:nth-child(3),
#pageSchedule .compact-timetable thead th:nth-child(12) {
  width: 52px;
}

#pageSchedule .compact-timetable .train-number-cell {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
}

#pageSchedule .compact-timetable .train-number-cell,
#pageSchedule .compact-timetable thead th:nth-child(4) {
  width: 78px;
  min-width: 0;
}

#pageSchedule .compact-timetable .type-cell,
#pageSchedule .compact-timetable thead th:nth-child(5) {
  width: 75px;
}

#pageSchedule .compact-timetable .origin-cell,
#pageSchedule .compact-timetable .destination-cell,
#pageSchedule .compact-timetable thead th:nth-child(6),
#pageSchedule .compact-timetable thead th:nth-child(7) {
  width: 150px;
}

#pageSchedule .compact-timetable .dwell-cell,
#pageSchedule .compact-timetable thead th:nth-child(8) {
  width: 70px;
}

#pageSchedule .compact-timetable .track-cell,
#pageSchedule .compact-timetable thead th:nth-child(9) {
  width: 52px;
}

#pageSchedule .compact-timetable .departure-plan,
#pageSchedule .compact-timetable thead th:nth-child(10) {
  width: 125px;
}

#pageSchedule .compact-timetable .departure-actual,
#pageSchedule .compact-timetable thead th:nth-child(11) {
  width: 110px;
}

#pageSchedule .compact-timetable thead th:first-child {
  left: auto;
  z-index: 5;
}

#pageSchedule .compact-timetable thead th:nth-child(1),
#pageSchedule .compact-timetable thead th:nth-child(2) {
  background: #e1bd68 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2) {
  background: #f0d58f !important;
}

#pageSchedule .compact-timetable thead th:nth-child(3),
#pageSchedule .compact-timetable thead th:nth-child(12) {
  background: #dda0a0 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
  color: #111 !important;
  background: #edbcbc !important;
}

#pageSchedule .compact-timetable thead th:nth-child(4) {
  background: #cbb5df !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4) {
  background: #e1d3ed !important;
}

#pageSchedule .compact-timetable thead th:nth-child(5),
#pageSchedule .compact-timetable thead th:nth-child(6),
#pageSchedule .compact-timetable thead th:nth-child(7) {
  background: #a9cde5 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7) {
  background: #c9e0ef !important;
}

#pageSchedule .compact-timetable thead th:nth-child(8),
#pageSchedule .compact-timetable thead th:nth-child(9) {
  background: #d8c866 !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9) {
  background: #e9dc8f !important;
}

#pageSchedule .compact-timetable thead th:nth-child(10),
#pageSchedule .compact-timetable thead th:nth-child(11) {
  background: #99c49c !important;
}

#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11) {
  background: #b9d9bb !important;
}

#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row.selected > td,
#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row:focus-visible > td,
#pageSchedule .compact-timetable tr.train-row.selected > td:first-child,
#pageSchedule .compact-timetable tr.train-row.selected > td:last-child,
#pageSchedule .compact-timetable tr.train-row:focus-visible > td:first-child,
#pageSchedule .compact-timetable tr.train-row:focus-visible > td:last-child {
  color: #07131d !important;
  background: #55aaff !important;
  box-shadow: none !important;
  filter: none !important;
}

#pageSchedule .compact-timetable tr.train-row.selected,
#pageSchedule .compact-timetable tr.train-row:focus-visible {
  outline: 0;
  box-shadow: none;
}

#pageSchedule .compact-timetable tr.train-row.selected:hover > td {
  filter: none;
}

#pageSchedule .timetable-selection-bar {
  display: flex;
  min-height: 47px;
  padding: 3px 0 0;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0;
}

#pageSchedule .selection-actions {
  display: flex;
  margin: 0;
  grid-template-columns: none;
  gap: 4px;
}

#pageSchedule .selection-actions button {
  min-height: 44px;
  padding: 0 12px;
}

@media (max-width: 760px) {
  #pageSchedule .schedule-utility-bar {
    display: flex;
    min-height: 41px;
    padding: 0 0 3px;
    gap: 5px;
  }

  #pageSchedule .schedule-utility-bar #scheduleSearch {
    width: min(220px, calc(100% - 109px));
    min-width: 0;
    max-width: none;
    height: 38px;
    flex: 0 1 220px;
  }

  #pageSchedule #scheduleClock {
    min-width: 104px;
    height: 38px;
    flex: 0 0 104px;
    padding: 0 7px;
    font-size: 25px !important;
    font-weight: 700 !important;
  }

  #pageSchedule .timetable-scroll {
    min-height: 150px;
    max-height: calc(100dvh - 164px);
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    width: 1140px;
    min-width: 1140px;
  }

  #pageSchedule .compact-timetable .train-number-cell {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    width: 78px;
    min-width: 0;
  }

  #pageSchedule .timetable-selection-bar {
    display: flex;
    min-height: 47px;
    padding-top: 3px;
    flex-direction: row;
    justify-content: flex-start;
  }

  #pageSchedule .selection-actions {
    display: flex;
    width: auto;
    grid-template-columns: none;
    gap: 3px;
  }

  #pageSchedule .selection-actions button {
    min-height: 44px;
    padding: 0 9px;
  }
}

/* Train dialogs and row context actions */

.train-editor .editor-head,
.train-info .editor-head {
  justify-content: flex-start;
}

.train-editor .editor-footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.train-editor .editor-footer button,
.train-info .dialog-close-button {
  min-height: 46px;
  border-radius: 0;
}

.train-info .dialog-footer {
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
}

.train-info .dialog-close-button {
  min-width: 180px;
}

.train-info .train-info-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.train-info .route-table-scroll {
  max-width: 100%;
  max-height: min(48dvh, 430px);
  overflow: auto;
  border: 1px solid #666;
  border-radius: 0;
  background: #fff;
  overscroll-behavior: contain;
}

.train-info table.route-table {
  display: table !important;
  width: 836px;
  min-width: 836px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #111;
  background: #fff;
  table-layout: fixed;
}

.train-info .route-table thead {
  display: table-header-group !important;
}

.train-info .route-table tbody {
  display: table-row-group !important;
}

.train-info .route-table tr {
  display: table-row !important;
}

.train-info .route-table th,
.train-info .route-table td {
  display: table-cell !important;
  height: 30px;
  min-height: 0 !important;
  padding: 2px 4px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  border-radius: 0;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  vertical-align: middle;
}

.train-info .route-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44px;
  padding: 3px 4px;
  border-right-color: #666;
  border-bottom-color: #555;
  font-weight: 700 !important;
  white-space: normal;
}

.train-info .route-table th:nth-child(1),
.train-info .route-table td:nth-child(1) {
  width: 150px;
  text-align: center !important;
  white-space: normal;
}

.train-info .route-table th:nth-child(2),
.train-info .route-table td:nth-child(2) {
  width: 120px;
}

.train-info .route-table th:nth-child(3),
.train-info .route-table td:nth-child(3) {
  width: 105px;
}

.train-info .route-table th:nth-child(4),
.train-info .route-table td:nth-child(4),
.train-info .route-table th:nth-child(9),
.train-info .route-table td:nth-child(9) {
  width: 52px;
}

.train-info .route-table th:nth-child(5),
.train-info .route-table td:nth-child(5) {
  width: 70px;
}

.train-info .route-table th:nth-child(6),
.train-info .route-table td:nth-child(6) {
  width: 52px;
}

.train-info .route-table th:nth-child(7),
.train-info .route-table td:nth-child(7) {
  width: 125px;
}

.train-info .route-table th:nth-child(8),
.train-info .route-table td:nth-child(8) {
  width: 110px;
}

.train-info .route-table th:nth-child(1) {
  background: #a9cde5 !important;
}

.train-info .route-table tbody td:nth-child(1) {
  background: #c9e0ef !important;
}

.train-info .route-table th:nth-child(2),
.train-info .route-table th:nth-child(3) {
  background: #e1bd68 !important;
}

.train-info .route-table tbody td:nth-child(2),
.train-info .route-table tbody td:nth-child(3) {
  background: #f0d58f !important;
}

.train-info .route-table th:nth-child(4),
.train-info .route-table th:nth-child(9) {
  background: #dda0a0 !important;
}

.train-info .route-table tbody td:nth-child(4),
.train-info .route-table tbody td:nth-child(9) {
  background: #edbcbc !important;
}

.train-info .route-table th:nth-child(5),
.train-info .route-table th:nth-child(6) {
  background: #d8c866 !important;
}

.train-info .route-table tbody td:nth-child(5),
.train-info .route-table tbody td:nth-child(6) {
  background: #e9dc8f !important;
}

.train-info .route-table th:nth-child(7),
.train-info .route-table th:nth-child(8) {
  background: #99c49c !important;
}

.train-info .route-table tbody td:nth-child(7),
.train-info .route-table tbody td:nth-child(8) {
  background: #b9d9bb !important;
}

.train-info .route-table tbody tr:hover > td {
  filter: brightness(.96);
}

.train-editor.is-opening,
.train-info.is-opening {
  animation: rail-dialog-in 180ms cubic-bezier(.2, .75, .3, 1) both;
}

.train-editor.is-closing,
.train-info.is-closing {
  pointer-events: none;
  animation: rail-dialog-out 150ms ease-in both;
}

.train-editor.is-opening::backdrop,
.train-info.is-opening::backdrop {
  animation: rail-backdrop-in 180ms ease-out both;
}

.train-editor.is-closing::backdrop,
.train-info.is-closing::backdrop {
  animation: rail-backdrop-out 150ms ease-in both;
}

@keyframes rail-dialog-in {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rail-dialog-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes rail-backdrop-in {
  from { background: rgba(27, 42, 65, 0); }
  to { background: rgba(27, 42, 65, .26); }
}

@keyframes rail-backdrop-out {
  from { background: rgba(27, 42, 65, .26); }
  to { background: rgba(27, 42, 65, 0); }
}

.train-context-menu[hidden] {
  display: none;
}

.train-context-menu {
  position: fixed;
  z-index: 80;
  width: 190px;
  max-width: calc(100vw - 12px);
  padding: 3px;
  border: 1px solid #66727d;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(27, 42, 65, .2);
  animation: rail-context-in 110ms ease-out both;
}

.train-context-menu button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: #111;
  background: #fff;
  font-size: 15px !important;
  text-align: left;
}

.train-context-menu button:hover,
.train-context-menu button:focus-visible {
  color: #07131d;
  background: #55aaff;
  outline: 0;
}

@keyframes rail-context-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .train-editor .editor-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .train-editor .editor-footer #resetTrainOverride {
    grid-column: 1 / -1;
  }

  .train-info .train-info-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .train-editor .editor-footer {
    grid-template-columns: 1fr;
  }

  .train-editor .editor-footer #resetTrainOverride {
    grid-column: auto;
  }

  .train-info .train-info-facts {
    grid-template-columns: 1fr;
  }

  .train-info .dialog-close-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .train-editor.is-opening,
  .train-info.is-opening,
  .train-editor.is-closing,
  .train-info.is-closing,
  .train-editor.is-opening::backdrop,
  .train-info.is-opening::backdrop,
  .train-editor.is-closing::backdrop,
  .train-info.is-closing::backdrop,
  .train-context-menu {
    animation-duration: .001ms !important;
  }
}

/* Firestore schedule final cascade */

#pageSchedule table.dispatch-table.compact-timetable {
  width: 1174px !important;
  min-width: 1174px !important;
}

#pageSchedule .compact-timetable .mark-column,
#pageSchedule .compact-timetable .mark-cell,
#pageSchedule .compact-timetable thead th:nth-child(1) {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
}

#pageSchedule .compact-timetable .mark-cell {
  position: static !important;
}

#pageSchedule .compact-timetable .mark-column,
#pageSchedule .compact-timetable thead th:nth-child(1) {
  position: sticky !important;
  top: 0;
}

#pageSchedule .compact-timetable thead th:nth-child(1) { background: #b9c2c8 !important; }
#pageSchedule .compact-timetable thead th:nth-child(2) { width: 120px !important; }
#pageSchedule .compact-timetable thead th:nth-child(3) { width: 105px !important; }
#pageSchedule .compact-timetable thead th:nth-child(4),
#pageSchedule .compact-timetable thead th:nth-child(13) { width: 52px !important; }
#pageSchedule .compact-timetable thead th:nth-child(5) { width: 78px !important; }
#pageSchedule .compact-timetable thead th:nth-child(6) { width: 75px !important; }
#pageSchedule .compact-timetable thead th:nth-child(7),
#pageSchedule .compact-timetable thead th:nth-child(8) { width: 150px !important; }
#pageSchedule .compact-timetable thead th:nth-child(9) { width: 70px !important; }
#pageSchedule .compact-timetable thead th:nth-child(10) { width: 52px !important; }
#pageSchedule .compact-timetable thead th:nth-child(11) { width: 125px !important; }
#pageSchedule .compact-timetable thead th:nth-child(12) { width: 110px !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1) { background: #d8dee2 !important; }
#pageSchedule .compact-timetable thead th:nth-child(2),
#pageSchedule .compact-timetable thead th:nth-child(3) { background: #e1bd68 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) { background: #f0d58f !important; }
#pageSchedule .compact-timetable thead th:nth-child(4),
#pageSchedule .compact-timetable thead th:nth-child(13) { background: #dda0a0 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) { color: #111 !important; background: #edbcbc !important; }
#pageSchedule .compact-timetable thead th:nth-child(5) { background: #cbb5df !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) { background: #e1d3ed !important; }
#pageSchedule .compact-timetable thead th:nth-child(6),
#pageSchedule .compact-timetable thead th:nth-child(7),
#pageSchedule .compact-timetable thead th:nth-child(8) { background: #a9cde5 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8) { background: #c9e0ef !important; }
#pageSchedule .compact-timetable thead th:nth-child(9),
#pageSchedule .compact-timetable thead th:nth-child(10) { background: #d8c866 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) { background: #e9dc8f !important; }
#pageSchedule .compact-timetable thead th:nth-child(11),
#pageSchedule .compact-timetable thead th:nth-child(12) { background: #99c49c !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) { background: #b9d9bb !important; }

#pageSchedule .compact-timetable tr.train-row.train-marked > .mark-cell {
  background: #08762f !important;
}

#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row.selected > td,
#pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row:focus-visible > td {
  color: #07131d !important;
  background: #55aaff !important;
}

@media (max-width: 760px) {
  #pageSchedule .schedule-utility-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px;
    grid-template-areas:
      "search clock"
      "mode date";
    min-height: 79px;
    gap: 3px 5px;
  }

  #pageSchedule .schedule-utility-bar #scheduleSearch {
    grid-area: search;
    width: 100% !important;
    max-width: none;
  }

  #pageSchedule #scheduleMode {
    grid-area: mode;
    width: 100%;
  }

  #pageSchedule #scheduleDate {
    grid-area: date;
    width: 138px;
  }

  #pageSchedule #scheduleClock {
    grid-area: clock;
    width: 104px;
    margin-left: auto;
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    width: 1174px !important;
    min-width: 1174px !important;
  }
}

/* Portal architecture: operator, editor and directories */

:root {
  --workspace: #e9edf1;
  --surface: #ffffff;
  --surface-soft: #f4f6f8;
  --control-bg: #ffffff;
  --control-border: #9da8b1;
  --table-border: #66717a;
  --table-head: #d9dee2;
  --selected-row: #2697e8;
  --selected-row-text: #07131d;
}

:root[data-theme="dark"] {
  --ink: #eef3f7;
  --muted: #aeb9c3;
  --paper: #0d141c;
  --panel: #141e28;
  --soft: #192530;
  --line: #2a3946;
  --line-strong: #425260;
  --navy: #111d2b;
  --navy-2: #162536;
  --navy-hover: #243b52;
  --success: #45b879;
  --danger: #ff7878;
  --danger-soft: #3b2024;
  --warning: #f0bd48;
  --warning-soft: #382f1c;
  --focus: rgba(70, 159, 232, .4);
  --workspace: #0d141c;
  --surface: #141e28;
  --surface-soft: #192530;
  --control-bg: #101923;
  --control-border: #647481;
  --table-border: #596a78;
  --table-head: #263541;
  --selected-row: #176faf;
  --selected-row-text: #ffffff;
  color-scheme: dark;
}

body,
main {
  background: var(--workspace);
}

main {
  width: 100%;
  max-width: none;
  padding: 10px;
}

.topbar {
  border-bottom: 1px solid #101a27;
  background: var(--navy);
}

.topbar-inner {
  display: grid;
  grid-template-columns: 184px minmax(360px, 1fr) minmax(150px, 230px) auto;
  width: 100%;
  max-width: none;
  min-height: 47px;
  padding: 4px 10px;
  gap: 7px;
  align-items: center;
}

.brand-logo {
  width: 184px;
  min-width: 0;
  height: 38px;
  padding: 4px 8px;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.section-nav,
.section-nav-inner {
  min-width: 0;
}

.section-nav-inner {
  display: flex;
  gap: 2px;
}

.section-nav button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #dfe8f0;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.section-nav button:hover,
.section-nav button:focus-visible {
  border-color: #5d7186;
  color: #fff;
  background: #26394e;
}

.section-nav button[aria-selected="true"] {
  border-color: #73879a;
  color: #fff;
  background: #334a62;
  box-shadow: none;
}

.mobile-page-select {
  display: none;
}

.header-station {
  display: block;
  min-width: 0;
}

.header-station > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.header-station select,
.theme-toggle,
.mobile-page-select {
  height: 34px;
  min-height: 34px;
  border: 1px solid #718396;
  border-radius: 2px;
  color: #fff;
  background: #17283a;
  font-family: inherit;
  font-size: 15px;
}

.header-station select {
  width: 100%;
  padding: 3px 25px 3px 8px;
}

.theme-toggle {
  padding: 3px 10px;
  white-space: nowrap;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.mobile-page-select:focus {
  background: #2a4159;
}

.app-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.management-page {
  display: grid;
  gap: 8px;
}

.management-heading {
  display: flex;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.management-heading h2,
.management-heading p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.management-heading h2 {
  font-size: 20px;
}

.management-heading p {
  color: var(--muted);
}

.management-heading-actions,
.management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.management-panel {
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.editor-filters,
.directory-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 7px;
  gap: 5px;
  align-items: end;
}

.editor-filters label,
.directory-toolbar label {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
}

.editor-filters input,
.editor-filters button,
.directory-toolbar input,
.directory-toolbar select,
.management-heading button,
.management-actions button {
  height: 34px;
  min-height: 34px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
}

.editor-filters input,
.directory-toolbar input,
.directory-toolbar select {
  border: 1px solid var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
}

.editor-filters input[type="date"] {
  width: 142px;
}

.editor-filters input[type="time"] {
  width: 112px;
}

.editor-filters input[type="search"],
.directory-toolbar input[type="search"] {
  width: 190px;
}

.directory-toolbar label select {
  width: 210px;
}

.management-table-scroll {
  width: 100%;
  max-height: calc(100dvh - 225px);
  overflow: auto;
  border: 1px solid var(--table-border);
  background: var(--surface);
}

.management-table {
  width: 100%;
  min-width: 900px;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
}

.directory-table {
  min-width: 640px;
}

.management-table th,
.management-table td {
  height: 31px;
  padding: 3px 6px;
  overflow: hidden;
  border-right: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
  color: inherit;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  background: var(--table-head);
  font-weight: 700;
}

.management-table td:nth-child(n+4):nth-child(-n+8) {
  text-align: left;
}

.management-table tr:last-child td {
  border-bottom: 0;
}

.management-table th:last-child,
.management-table td:last-child {
  border-right: 0;
}

.management-table tbody tr {
  cursor: pointer;
}

.management-table tbody tr:hover > td {
  background: var(--surface-soft);
}

.management-table tbody tr.selected > td {
  color: var(--selected-row-text);
  background: var(--selected-row) !important;
}

.management-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #176faf;
}

.schedule-admin-table th:nth-child(1) { width: 34px; }
.schedule-admin-table th:nth-child(2) { width: 88px; }
.schedule-admin-table th:nth-child(3) { width: 68px; }
.schedule-admin-table th:nth-child(4) { width: 95px; }
.schedule-admin-table th:nth-child(5) { width: 120px; }
.schedule-admin-table th:nth-child(6) { width: 145px; }
.schedule-admin-table th:nth-child(7),
.schedule-admin-table th:nth-child(8) { width: 145px; }
.schedule-admin-table th:nth-child(9),
.schedule-admin-table th:nth-child(10) { width: 70px; }

.management-actions {
  margin-top: 7px;
}

.management-note {
  margin: 7px 0 0;
  padding: 7px 8px;
  border-left: 3px solid #4f7699;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 14px;
}

/* The operator view intentionally has no administrative controls. */

#pageSchedule .timetable-panel {
  width: min(1100px, 100%);
  margin: 0;
  padding: 0;
  border: 1px solid var(--table-border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

#pageSchedule .schedule-utility-bar {
  display: grid !important;
  grid-template-columns: 190px 142px 1fr auto;
  width: 100%;
  min-height: 43px;
  padding: 4px;
  border: 0;
  border-bottom: 1px solid var(--table-border);
  background: var(--surface);
  gap: 5px;
  align-items: center;
}

#pageSchedule #scheduleSearch,
#pageSchedule #scheduleDate {
  width: 100% !important;
  height: 33px;
  min-height: 33px;
  margin: 0;
  padding: 4px 7px;
  align-self: center;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  color: var(--ink);
  background: var(--control-bg);
  font-family: inherit;
  font-size: 16px;
}

#pageSchedule #scheduleClock {
  grid-column: 4;
  min-width: 116px;
  padding: 3px 8px;
  color: #fff;
  background: #238dd7;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

#pageSchedule .operator-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 0;
}

#pageSchedule table.dispatch-table.compact-timetable {
  width: 1240px !important;
  min-width: 1240px !important;
  max-width: 1240px !important;
  table-layout: fixed;
  color: #111;
  font-size: 15px;
}

#pageSchedule .compact-timetable th,
#pageSchedule .compact-timetable td {
  height: 33px;
  padding: 3px 4px !important;
  border-right: 1px solid #5f686f;
  border-bottom: 1px solid #5f686f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageSchedule .compact-timetable th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 700;
  line-height: 1.05;
}

#pageSchedule .compact-timetable th:nth-child(1) { width: 34px !important; min-width: 34px !important; max-width: 34px !important; }
#pageSchedule .compact-timetable th:nth-child(2) { width: 62px !important; }
#pageSchedule .compact-timetable th:nth-child(3) { width: 48px !important; }
#pageSchedule .compact-timetable th:nth-child(4),
#pageSchedule .compact-timetable th:nth-child(5) { width: 150px !important; }
#pageSchedule .compact-timetable th:nth-child(6),
#pageSchedule .compact-timetable th:nth-child(7),
#pageSchedule .compact-timetable th:nth-child(11),
#pageSchedule .compact-timetable th:nth-child(12) { width: 102px !important; }
#pageSchedule .compact-timetable th:nth-child(8),
#pageSchedule .compact-timetable th:nth-child(13) { width: 42px !important; }
#pageSchedule .compact-timetable th:nth-child(9) { width: 61px !important; }
#pageSchedule .compact-timetable th:nth-child(10) { width: 48px !important; }

#pageSchedule .compact-timetable thead th:nth-child(1) { background: #abb6bd !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1) { background: #d4dade !important; }
#pageSchedule .compact-timetable thead th:nth-child(2),
#pageSchedule .compact-timetable thead th:nth-child(3) { background: #c8afd9 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) { background: #e1d2eb !important; }
#pageSchedule .compact-timetable thead th:nth-child(4),
#pageSchedule .compact-timetable thead th:nth-child(5) { background: #8ec1df !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) { background: #c2ddef !important; }
#pageSchedule .compact-timetable thead th:nth-child(6),
#pageSchedule .compact-timetable thead th:nth-child(7),
#pageSchedule .compact-timetable thead th:nth-child(8) { background: #d9b65d !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8) { background: #f0d88d !important; }
#pageSchedule .compact-timetable thead th:nth-child(9),
#pageSchedule .compact-timetable thead th:nth-child(10) { background: #c3b954 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) { background: #e1d77d !important; }
#pageSchedule .compact-timetable thead th:nth-child(11),
#pageSchedule .compact-timetable thead th:nth-child(12),
#pageSchedule .compact-timetable thead th:nth-child(13) { background: #80b784 !important; }
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12),
#pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) { background: #b3d6b5 !important; }
#pageSchedule .compact-timetable tr.train-row.train-marked > .mark-cell {
  background: #086b2b !important;
}

#pageSchedule .compact-timetable tr.train-row.selected > td,
#pageSchedule .compact-timetable tr.train-row:focus-visible > td {
  color: var(--selected-row-text) !important;
  background: var(--selected-row) !important;
}

/* Complete dark palette, including legacy announcement and system panels. */

:root[data-theme="dark"] body,
:root[data-theme="dark"] main,
:root[data-theme="dark"] .app-page,
:root[data-theme="dark"] .page-shell,
:root[data-theme="dark"] .announcements-workspace,
:root[data-theme="dark"] .system-workspace {
  color: var(--ink);
  background: var(--workspace) !important;
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .management-heading,
:root[data-theme="dark"] .page-heading,
:root[data-theme="dark"] .control-page-heading,
:root[data-theme="dark"] .control-panel,
:root[data-theme="dark"] .system-panel,
:root[data-theme="dark"] .queue-item,
:root[data-theme="dark"] .broadcast-now,
:root[data-theme="dark"] .control-subsection,
:root[data-theme="dark"] .system-card,
:root[data-theme="dark"] .system-status-card,
:root[data-theme="dark"] .audio-meter,
:root[data-theme="dark"] .settings-group {
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  border-color: var(--control-border) !important;
  color: var(--ink) !important;
  background: var(--control-bg) !important;
}

:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] button.ghost,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .quick-action,
:root[data-theme="dark"] .manual-action,
:root[data-theme="dark"] .system-action {
  border-color: var(--control-border) !important;
  color: var(--ink) !important;
  background: #1d2b37 !important;
}

:root[data-theme="dark"] button.secondary:hover,
:root[data-theme="dark"] button.ghost:hover,
:root[data-theme="dark"] .secondary:hover {
  background: #2b3d4b !important;
}

:root[data-theme="dark"] button:disabled {
  color: #73818c !important;
  background: #1a232c !important;
}

:root[data-theme="dark"] .control-panel-header,
:root[data-theme="dark"] .control-subsection-heading,
:root[data-theme="dark"] .system-panel-header,
:root[data-theme="dark"] .editor-head,
:root[data-theme="dark"] .editor-footer,
:root[data-theme="dark"] .train-info-header,
:root[data-theme="dark"] .train-info-footer {
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  background: var(--surface-soft) !important;
}

:root[data-theme="dark"] #pageSystem .settings-page-header {
  border-color: var(--line-strong);
}

:root[data-theme="dark"] #pageSystem .settings-page-header h2,
:root[data-theme="dark"] #pageSystem .settings-section,
:root[data-theme="dark"] #pageSystem .settings-log {
  color: var(--ink);
}

:root[data-theme="dark"] #pageSystem .settings-section,
:root[data-theme="dark"] #pageSystem .settings-log {
  border-color: var(--line-strong);
  background: var(--surface);
}

:root[data-theme="dark"] #pageSystem .settings-section > h2,
:root[data-theme="dark"] #pageSystem .settings-log > summary,
:root[data-theme="dark"] #pageSystem .system-actions {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface-soft);
}

:root[data-theme="dark"] #pageSystem .settings-status-row,
:root[data-theme="dark"] #pageSystem .settings-status-row dt,
:root[data-theme="dark"] #pageSystem #diagnosticLog {
  border-color: var(--line-strong);
}

:root[data-theme="dark"] #pageSystem .settings-status-row dt {
  color: var(--muted);
  background: var(--surface-soft);
}

:root[data-theme="dark"] #pageSystem .settings-status-row dd,
:root[data-theme="dark"] #pageSystem .status-pill {
  color: var(--ink);
  background: var(--surface);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] label,
:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .control-subsection-heading span {
  color: inherit;
}

:root[data-theme="dark"] .train-editor,
:root[data-theme="dark"] .train-info {
  border-color: #657584 !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}

:root[data-theme="dark"] .train-editor form,
:root[data-theme="dark"] .train-info > div,
:root[data-theme="dark"] .train-info-body,
:root[data-theme="dark"] .schedule-route-section,
:root[data-theme="dark"] .train-info-facts > div {
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}

:root[data-theme="dark"] .train-editor::backdrop,
:root[data-theme="dark"] .train-info::backdrop {
  background: rgba(0, 5, 10, .72);
}

:root[data-theme="dark"] .train-context-menu,
:root[data-theme="dark"] .train-context-menu button {
  border-color: #667887;
  color: var(--ink);
  background: var(--surface);
}

:root[data-theme="dark"] .train-context-menu button:hover,
:root[data-theme="dark"] .train-context-menu button:focus-visible {
  color: #fff;
  background: #176faf;
}

:root[data-theme="dark"] #pageSchedule table.dispatch-table.compact-timetable {
  color: #f2f5f7;
}

:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(1) { background: #35434d !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1) { background: #27343e !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(2),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(3) { background: #493a58 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) { background: #342c40 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(4),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(5) { background: #285069 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) { background: #1f3c50 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(6),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(7),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(8) { background: #635127 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8) { background: #4a3e24 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(9),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(10) { background: #595528 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) { background: #403e23 !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(11),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(12),
:root[data-theme="dark"] #pageSchedule .compact-timetable thead th:nth-child(13) { background: #315e3c !important; }
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12),
:root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) { background: #24442d !important; }
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .auth-card-body {
  color: var(--ink);
  background: var(--surface);
}

:root[data-theme="dark"] .auth-card h1,
:root[data-theme="dark"] .auth-kicker,
:root[data-theme="dark"] .auth-description,
:root[data-theme="dark"] .auth-form label {
  color: var(--ink);
}

:root[data-theme="dark"] .auth-status {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface-soft);
}

@media (max-width: 980px) {
  .topbar-inner {
    grid-template-columns: 150px minmax(300px, 1fr) minmax(130px, 180px) auto;
    padding-inline: 6px;
  }

  .brand-logo {
    width: 150px;
  }

  .section-nav button {
    padding-inline: 6px;
    font-size: 14px;
  }

  #pageSchedule .timetable-panel {
    width: 100%;
  }
}

@media (max-width: 820px) {
  main {
    padding: 5px;
  }

  .topbar-inner {
    grid-template-columns: 116px minmax(0, 1fr) 42px;
    grid-template-areas:
      "logo page theme"
      "station station station";
    min-height: 79px;
    padding: 4px 5px;
    gap: 4px;
  }

  .brand-logo {
    grid-area: logo;
    width: 116px;
    height: 32px;
    padding: 2px 4px;
  }

  .section-nav {
    display: none;
  }

  .mobile-page-select {
    display: block;
    grid-area: page;
    width: 100%;
  }

  .header-station {
    grid-area: station;
  }

  .theme-toggle {
    grid-area: theme;
    width: 42px;
    overflow: hidden;
    padding: 3px 5px;
    color: transparent;
    font-size: 0;
  }

  .theme-toggle::before {
    color: #fff;
    content: "Тема";
    font-size: 13px;
  }

  .management-page {
    gap: 5px;
  }

  .management-heading {
    min-height: 0;
    padding: 6px;
    gap: 7px;
    align-items: stretch;
  }

  .management-heading h2 {
    font-size: 18px;
  }

  .management-heading p {
    display: none;
  }

  .management-heading-actions {
    flex-wrap: nowrap;
  }

  .management-heading-actions button,
  .management-heading > button {
    min-height: 34px;
    padding-inline: 7px;
    white-space: nowrap;
  }

  .management-panel {
    padding: 5px;
  }

  .editor-filters,
  .directory-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-filters label,
  .editor-filters input,
  .editor-filters button,
  .directory-toolbar label,
  .directory-toolbar input {
    width: 100% !important;
  }

  .editor-filters input[type="search"],
  .directory-toolbar input[type="search"] {
    grid-column: 1 / -1;
  }

  .directory-toolbar label select {
    width: 100%;
  }

  .management-table-scroll {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .management-table,
  .directory-table {
    display: block;
    min-width: 0;
    background: transparent;
  }

  .management-table thead {
    display: none;
  }

  .management-table tbody {
    display: grid;
    gap: 5px;
  }

  .management-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--table-border);
    background: var(--surface);
  }

  .management-table tbody td {
    display: grid;
    width: auto !important;
    min-width: 0 !important;
    height: auto;
    min-height: 39px;
    padding: 3px 6px;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    text-align: left !important;
    white-space: normal;
    place-content: center start;
  }

  .management-table tbody td::before {
    display: block;
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    line-height: 1.05;
  }

  .management-table tbody td:first-child {
    grid-column: 1 / -1;
    min-height: 30px;
  }

  .management-table tbody td:first-child::before {
    display: none;
  }

  .management-table tbody tr.selected > td::before {
    color: rgba(255, 255, 255, .78);
  }

  .management-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-note {
    font-size: 13px;
  }

  #pageSchedule .schedule-utility-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 135px !important;
    grid-template-areas:
      "search clock"
      "date clock" !important;
    min-height: 73px !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  #pageSchedule #scheduleSearch {
    grid-area: search;
  }

  #pageSchedule #scheduleDate {
    grid-area: date;
    width: 145px !important;
  }

  #pageSchedule #scheduleClock {
    grid-area: clock;
    width: 135px;
    height: 70px;
    display: grid;
    margin: 0;
    font-size: 25px;
    place-items: center;
  }

  #pageSchedule .operator-table-scroll {
    overflow: visible;
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent;
  }

  #pageSchedule .compact-timetable thead {
    display: none !important;
  }

  #pageSchedule .compact-timetable tbody#trainList.train-list {
    display: grid !important;
    width: 100% !important;
    padding: 4px;
    gap: 5px;
    background: var(--workspace);
  }

  #pageSchedule .compact-timetable tbody tr.train-row {
    display: grid !important;
    grid-template-columns: 32px 62px 44px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--table-border);
    background: var(--surface);
  }

  #pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row > td {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    min-height: 40px;
    padding: 3px 5px !important;
    border-right: 1px solid #69747c;
    border-bottom: 1px solid #69747c;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    place-content: center start;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td::before {
    display: block;
    color: rgba(17, 17, 17, .65);
    content: attr(data-label);
    font-size: 11px;
    line-height: 1;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    min-height: 40px;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(1)::before {
    display: none;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
    min-height: 43px;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 2;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6) {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7) {
    grid-column: 3 / 5;
    grid-row: 3;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) {
    display: none !important;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9) {
    grid-column: 1;
    grid-row: 4;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) {
    grid-column: 4;
    grid-row: 1;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11) {
    grid-column: 1 / 3;
    grid-row: 5;
  }
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
    grid-column: 3 / 5;
    grid-row: 5;
  }
  #pageSchedule .compact-timetable tbody tr.train-row.selected > td::before {
    color: rgba(255, 255, 255, .78);
  }

  :root[data-theme="dark"] #pageSchedule .compact-timetable tbody tr.train-row > td::before {
    color: rgba(242, 245, 247, .65);
  }

}

@media (max-width: 430px) {
  .management-heading {
    display: grid;
  }

  .management-heading-actions,
  .management-heading > button {
    width: 100%;
  }

  .management-heading-actions button {
    width: 50%;
  }

  .editor-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-filters button {
    grid-column: 1 / -1;
  }

  .management-actions {
    grid-template-columns: 1fr;
  }

  #pageSchedule .schedule-utility-bar {
    grid-template-columns: minmax(0, 1fr) 122px !important;
  }

  #pageSchedule #scheduleClock {
    width: 122px;
    font-size: 22px;
  }
}

/* Layout hardening and repository icon set */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.button-icon,
.utility-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  object-fit: contain;
}

button.icon-button,
button.icon-only-button,
button.responsive-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

button.primary > .button-icon,
.topbar .button-icon,
.topbar .utility-icon {
  filter: invert(1);
}

:root[data-theme="dark"] button.secondary > .button-icon,
:root[data-theme="dark"] .tag-editor-item .button-icon {
  filter: invert(1);
}

button:disabled > .button-icon {
  opacity: .48;
}

.icon-only-button {
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
}

.editor-filters .management-heading-actions .icon-only-button,
.directory-toolbar > .icon-only-button,
.schedule-stops-heading > .icon-only-button,
.tag-editor-entry > .icon-only-button {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

.schedule-stops-table .remove-stop {
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
}

.tag-editor-item button.icon-only-button {
  width: 29px;
  min-width: 29px;
  padding: 0 !important;
}

#pageAnnouncements .composer-actions {
  grid-template-columns: minmax(0, 1fr) 42px;
}

#pageAnnouncements #queueManual {
  width: 42px;
  min-width: 42px;
  padding: 0 !important;
  justify-self: end;
}

body {
  width: 100%;
  min-width: 0;
}

main {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.topbar-inner,
.topbar-inner > *,
.app-page,
.app-page > *,
.management-heading > *,
.management-panel,
.management-table-scroll,
.control-page,
.control-page > *,
.announcements-workspace,
.announcement-controls,
.system-dashboard {
  min-width: 0;
}

.topbar-inner {
  grid-template-columns: 184px minmax(0, 1fr) auto;
}

.header-actions {
  display: flex;
  min-width: 0;
  gap: 4px;
  align-items: center;
}

.header-action-button {
  width: 36px;
  min-width: 36px;
  height: 34px;
  min-height: 34px;
  border: 1px solid #718396;
  border-radius: 2px;
  color: #fff;
  background: #17283a;
}

.theme-toggle {
  width: 36px;
  min-width: 36px;
}

.theme-toggle::before {
  content: none !important;
}

.header-action-button:hover,
.header-action-button:focus-visible,
.header-action-button[aria-pressed="true"] {
  border-color: #8799aa;
  background: #334a62;
}

.management-heading > div:first-child,
.control-page-title {
  overflow: hidden;
}

.management-heading h2,
.management-heading p,
.control-page-title h2,
.control-page-title p {
  max-width: 100%;
  text-overflow: ellipsis;
}

.management-heading-actions,
.management-actions,
.composer-actions {
  min-width: 0;
}

.management-actions .icon-only-button {
  flex: 0 0 36px;
}

.train-context-menu button.icon-button {
  justify-content: flex-start;
}

.train-editor,
.train-info {
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
}

.train-editor form,
.train-info-body,
.schedule-editor-fields,
.directory-editor-fields,
.schedule-stops-heading,
.schedule-stops-scroll {
  min-width: 0;
  max-width: 100%;
}

.schedule-editor {
  width: min(900px, calc(100vw - 16px));
}

.schedule-stops-scroll {
  width: 100%;
}

@media (max-width: 980px) {
  .topbar-inner {
    grid-template-columns: 150px minmax(0, 1fr) auto;
  }

  .section-nav-inner {
    overflow: hidden;
  }

  .section-nav button {
    min-width: 0;
    padding-inline: 5px;
  }

  .schedule-editor-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 900px) {
  .topbar-inner {
    grid-template-columns: 128px minmax(0, 1fr) auto;
    padding-inline: 5px;
    gap: 4px;
  }

  .brand-logo {
    width: 128px;
  }

  .section-nav button {
    padding-inline: 3px;
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .topbar-inner {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-areas: "logo page actions";
    min-height: 40px;
  }

  .brand-logo {
    width: 110px;
  }

  .header-actions {
    grid-area: actions;
    gap: 3px;
  }

  .header-action-button,
  .theme-toggle {
    width: 38px;
    min-width: 38px;
    color: inherit;
    font-size: inherit;
  }

  .management-table-scroll,
  #pageSchedule .operator-table-scroll {
    max-width: 100%;
  }

  .management-actions .icon-only-button {
    width: 40px;
    min-width: 40px;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .schedule-editor-fields,
  .bulk-train-editor .schedule-editor-fields,
  .directory-editor-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-stops-heading {
    align-items: stretch;
  }
}

@media (max-width: 430px) {
  #editorAddTrainButton {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
  }

  #editorAddTrainButton .button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  #editorImportButton {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .management-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 350px) {
  .control-page .control-page-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-page .control-page-heading > button {
    width: 100%;
  }
}

/* Operator timetable actions */

#pageSchedule #scheduleClock {
  color: #fff;
  font-size: 28px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  line-height: 1;
}

#pageSchedule .timetable-selection-bar {
  display: flex;
  min-height: 43px;
  padding: 4px;
  border-top: 1px solid var(--table-border);
  background: var(--surface);
  align-items: center;
}

#pageSchedule .selection-actions {
  display: flex;
  width: auto;
  min-width: 0;
  gap: 5px;
}

#pageSchedule .selection-actions button {
  min-height: 34px;
  height: 34px;
  padding: 3px 11px;
  border-radius: 2px;
  font-size: 15px;
}

@media (min-width: 821px) {
  #pageSchedule .timetable-panel {
    width: 100%;
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #pageSchedule .compact-timetable thead th {
    height: 48px;
    padding: 4px 5px !important;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    vertical-align: middle;
  }

  #pageSchedule .compact-timetable thead th:nth-child(1) {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(2) {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(3) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(4),
  #pageSchedule .compact-timetable thead th:nth-child(5) {
    width: auto !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(6),
  #pageSchedule .compact-timetable thead th:nth-child(7),
  #pageSchedule .compact-timetable thead th:nth-child(11),
  #pageSchedule .compact-timetable thead th:nth-child(12) {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(8),
  #pageSchedule .compact-timetable thead th:nth-child(13) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(9) {
    width: 61px !important;
    min-width: 61px !important;
    max-width: 61px !important;
  }

  #pageSchedule .compact-timetable thead th:nth-child(10) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
}

@media (max-width: 820px) {
  #pageSchedule #scheduleClock {
    font-size: 25px !important;
  }

  #pageSchedule .compact-timetable tbody tr.train-row {
    grid-template-columns: 32px 62px 44px minmax(0, 1fr);
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 2;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(6) {
    display: grid !important;
    grid-column: 1 / 3;
    grid-row: 3;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
    display: grid !important;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(7) {
    grid-column: 3 / 5;
    grid-row: 3;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) {
    display: none !important;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(9) {
    grid-column: 1;
    grid-row: 4;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(10) {
    grid-column: 4;
    grid-row: 1;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(11) {
    display: grid !important;
    grid-column: 1 / 3;
    grid-row: 5;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(12) {
    grid-column: 3 / 5;
    grid-row: 5;
  }

  #pageSchedule .selection-actions {
    width: 100%;
  }

  #pageSchedule .selection-actions button {
    flex: 0 1 auto;
  }
}

/* Flat editor and directory toolbars */

.management-page {
  gap: 0;
}

.editor-filters .management-heading-actions {
  margin-left: auto;
  align-self: end;
}

.directory-toolbar > button {
  height: 34px;
  min-height: 34px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
}

.management-table-scroll {
  max-height: calc(100dvh - 180px);
}

@media (max-width: 820px) {
  .editor-filters .management-heading-actions {
    width: 100%;
    margin-left: 0;
    grid-column: 1 / -1;
  }

  .editor-filters .management-heading-actions button,
  .directory-toolbar > button {
    width: 100%;
  }
}

/* Compact subsection headers */

.subsection-header {
  display: flex;
  width: 100%;
  min-height: 40px;
  padding: 3px 4px;
  border: 1px solid #0d1726;
  color: #fff;
  background: #1b2a41;
  align-items: center;
  gap: 5px;
}

.operations-subheader[hidden] {
  display: none !important;
}

.subsection-nav {
  min-width: 0;
  flex: 0 1 auto;
}

.subsection-nav-inner {
  display: flex;
  min-width: 0;
  gap: 3px;
  align-items: stretch;
  flex-wrap: wrap;
}

.subsection-nav button {
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subsection-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.subsection-nav button[aria-selected="true"] {
  color: #fff;
  background: #3b536d;
}

.subsection-nav button:focus-visible {
  outline: 2px solid #7fc7f6;
  outline-offset: -2px;
}

.operations-view-nav {
  flex: 0 0 auto;
}

.operations-station {
  display: block;
  width: min(220px, 34vw);
  min-width: 170px;
  margin-left: auto;
}

.operations-station select {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 4px 25px 4px 7px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 2px;
  color: #111;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}

.directory-subheader {
  margin-bottom: 4px;
}

.directory-kind-nav {
  width: 100%;
}

.directory-kind-nav .subsection-nav-inner {
  width: 100%;
}

#pageSchedule .schedule-utility-bar {
  grid-template-columns: 190px 142px minmax(0, 1fr) auto !important;
}

#pageSchedule #scheduleSearch {
  grid-column: 1;
}

#pageSchedule #scheduleDate {
  grid-column: 2;
}

#pageSchedule #scheduleClock {
  grid-column: 4;
}

@media (max-width: 820px) {
  .operations-subheader {
    flex-wrap: wrap;
  }

  .operations-view-nav {
    flex: 1 1 auto;
  }

  .operations-view-nav .subsection-nav-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-station {
    width: min(210px, 48vw);
    min-width: 160px;
  }

  .directory-kind-nav .subsection-nav-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .directory-kind-nav .subsection-nav button {
    padding-inline: 7px;
  }

  #pageSchedule .schedule-utility-bar {
    grid-template-columns: minmax(0, 1fr) 135px !important;
    grid-template-areas:
      "search clock"
      "date clock" !important;
    min-height: 73px !important;
  }

  #pageSchedule #scheduleSearch {
    grid-area: search;
  }

  #pageSchedule #scheduleDate {
    grid-area: date;
  }

  #pageSchedule #scheduleClock {
    grid-area: clock;
  }
}

@media (max-width: 520px) {
  .operations-view-nav,
  .operations-station {
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }

  .operations-station {
    margin-left: 0;
  }

  .directory-kind-nav .subsection-nav-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-kind-nav .subsection-nav button {
    min-height: 40px;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  #pageSchedule .schedule-utility-bar {
    grid-template-columns: minmax(0, 1fr) 122px !important;
  }
}

@media (max-width: 360px) {
  .topbar-inner {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding-inline: 4px;
    gap: 2px;
  }

  .brand-logo {
    width: 72px;
  }

  .header-actions {
    gap: 2px;
  }

  .header-action-button,
  .settings-button,
  .theme-toggle {
    width: 34px;
    min-width: 34px;
  }

  .mobile-page-select {
    font-size: 14px;
  }
}

/* Final schedule editor/table alignment overrides */

.train-info .train-info-body {
  padding-right: 0;
  padding-left: 0;
}

.train-info .editor-head,
.train-info .train-info-facts,
.train-info .route-table-title,
.train-info .dialog-footer {
  margin-right: 14px;
  margin-left: 14px;
}

.train-info .route-table-scroll {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-right: 0;
  border-left: 0;
}

.train-info table.route-table {
  width: 100%;
  min-width: 836px;
}

:root[data-theme="dark"] .schedule-editor-progress,
:root[data-theme="dark"] .schedule-stops-table th,
:root[data-theme="dark"] .schedule-stops-table td {
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .schedule-editor-fields select,
:root[data-theme="dark"] .schedule-stops-table select {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
}

:root[data-theme="dark"] .schedule-stops-table tr.passing-stop [data-stop-field="arrival"],
:root[data-theme="dark"] .schedule-stops-table tr.passing-stop [data-stop-field="departure"] {
  color: var(--ink);
  background: #24394a;
}

/* Information timetable mirrors the operational timetable density and grid. */

.train-info .train-info-body {
  padding: 8px 0;
}

.train-info .editor-head,
.train-info .train-info-facts,
.train-info .route-table-title,
.train-info .dialog-footer {
  margin-right: 8px;
  margin-left: 8px;
}

.train-info .editor-head {
  min-height: 32px;
  padding-bottom: 4px;
}

.train-info .train-info-facts {
  margin-top: 6px;
  margin-bottom: 8px;
}

.train-info .train-info-facts > div {
  min-height: 38px;
  padding: 3px 5px;
}

.train-info .train-info-facts dt {
  font-size: 12px !important;
  line-height: 1.05;
  text-transform: none;
}

.train-info .train-info-facts dd {
  margin-top: 2px;
  font-size: 15px !important;
  line-height: 1.05;
}

.train-info .route-table-title {
  margin-top: 0;
  margin-bottom: 3px;
}

.train-info .route-table-scroll {
  border: 1px solid #777;
}

.train-info table.route-table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.train-info .route-table th,
.train-info .route-table td {
  height: 33px !important;
  padding: 3px 4px !important;
  border: 0 !important;
  border-right: 1px solid #777 !important;
  border-bottom: 1px solid #777 !important;
}

.train-info .route-table th {
  height: 44px;
  padding: 3px 4px !important;
}

.train-info .dialog-footer {
  margin-top: 6px;
}

/* New-train route initialization and terminal stop rules. */
.schedule-route-initializer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  background: var(--soft);
}

.schedule-route-initializer[hidden] {
  display: none;
}

.schedule-route-initializer label {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-route-initializer select {
  width: 100%;
  min-width: 0;
}

.schedule-stops-table [data-stop-field]:disabled {
  color: transparent;
  background: color-mix(in srgb, var(--soft) 78%, var(--table-border));
  cursor: default;
}

.schedule-stops-table .scheduled-stop-cell input:disabled {
  color: initial;
  opacity: 1;
}

.schedule-stops-table tr.route-terminal-start [data-stop-field="arrival"],
.schedule-stops-table tr.route-terminal-end [data-stop-field="departure"] {
  border-color: transparent;
}

@media (max-width: 620px) {
  .schedule-route-initializer {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-stops-heading {
    flex-wrap: wrap;
  }

  .schedule-stops-actions {
    width: 100%;
  }

  #generateScheduleTimes {
    flex: 1 1 auto;
  }
}

/* Final layout safeguards verified against populated route editors. */
.schedule-editor {
  overflow-x: hidden;
  overflow-y: auto;
}

.schedule-editor form,
.schedule-editor-step,
#scheduleRouteTableEditor {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.schedule-stops-actions {
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

#generateScheduleTimes {
  white-space: nowrap;
}

.schedule-stops-table input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.directory-sort-button {
  min-height: 32px;
}

@media (max-width: 620px) {
  .schedule-stops-heading {
    flex-wrap: nowrap;
    align-items: center;
  }

  .schedule-stops-actions {
    width: auto;
  }

  #generateScheduleTimes {
    flex: 0 1 auto;
  }

  .control-page .control-page-title p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .schedule-editor .editor-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-editor .editor-footer #scheduleEditorBack {
    grid-column: 1 / -1;
  }
}

/* Operational and train-information timetables use one density and palette. */
#pageSchedule .compact-timetable th,
#pageSchedule .compact-timetable td,
.train-info .route-table th,
.train-info .route-table td {
  height: 33px;
  padding: 3px 4px !important;
  border-right: 1px solid #5f686f !important;
  border-bottom: 1px solid #5f686f !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageSchedule .compact-timetable th,
.train-info .route-table th {
  height: 48px !important;
  padding: 4px 5px !important;
  font-weight: 700 !important;
  white-space: normal;
}

.train-info .route-table td:first-child {
  text-align: center !important;
  white-space: nowrap;
}

.train-info .route-table thead tr {
  height: 48px !important;
}

.train-info .route-table tbody tr {
  height: 33px !important;
}

.train-info .route-table th:nth-child(1) {
  background: #8ec1df !important;
}

.train-info .route-table tbody td:nth-child(1) {
  background: #c2ddef !important;
}

.train-info .route-table th:nth-child(2),
.train-info .route-table th:nth-child(3),
.train-info .route-table th:nth-child(4) {
  background: #d9b65d !important;
}

.train-info .route-table tbody td:nth-child(2),
.train-info .route-table tbody td:nth-child(3),
.train-info .route-table tbody td:nth-child(4) {
  background: #f0d88d !important;
}

.train-info .route-table th:nth-child(5),
.train-info .route-table th:nth-child(6) {
  background: #c3b954 !important;
}

.train-info .route-table tbody td:nth-child(5),
.train-info .route-table tbody td:nth-child(6) {
  background: #e1d77d !important;
}

.train-info .route-table th:nth-child(7),
.train-info .route-table th:nth-child(8),
.train-info .route-table th:nth-child(9) {
  background: #80b784 !important;
}

.train-info .route-table tbody td:nth-child(7),
.train-info .route-table tbody td:nth-child(8),
.train-info .route-table tbody td:nth-child(9) {
  background: #b3d6b5 !important;
}

/* Compact announcement control desk. */
#pageAnnouncements {
  width: 100%;
}

#pageAnnouncements .announcement-command-bar {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin-bottom: 6px;
  padding: 4px;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--control-line);
  background: var(--control-head);
}

#pageAnnouncements .announcement-command-bar > button {
  width: auto;
  min-width: 154px;
  min-height: 40px;
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#pageAnnouncements .announcement-command-bar .mic-button {
  border-color: #6e7f8d;
  color: var(--control-ink);
  background: #f7f8f9;
}

#pageAnnouncements .announcement-command-bar .mic-button.active {
  border-color: #8e2020;
  color: #fff;
  background: #a62b2b;
}

#pageAnnouncements .announcement-command-bar .volume-control {
  display: grid;
  width: min(370px, 100%);
  min-width: 250px;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 0 8px;
  grid-template-columns: auto minmax(110px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--control-line);
  background: var(--surface);
  font-size: 13px !important;
}

#pageAnnouncements .announcement-command-bar .volume-control input {
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  grid-column: auto;
}

#pageAnnouncements .announcement-command-bar .volume-control output {
  text-align: right;
}

#pageAnnouncements .announcements-workspace {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  grid-template-areas: none;
  align-items: start;
  gap: 6px;
  background: transparent;
}

#pageAnnouncements .manual,
#pageAnnouncements .now-panel {
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
  grid-area: auto;
}

#pageAnnouncements .control-panel-header {
  min-height: 40px;
  padding: 7px 8px;
}

#pageAnnouncements .control-panel-header h2,
#pageAnnouncements .control-subsection > h3,
#pageAnnouncements .queue-head h3 {
  margin: 0;
  color: var(--control-ink);
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15;
}

#pageAnnouncements .control-subsection {
  min-width: 0;
  padding: 8px;
}

#pageAnnouncements .control-subsection > h3 {
  margin-bottom: 7px;
}

#pageAnnouncements .composer {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  align-items: stretch;
  gap: 7px;
}

#pageAnnouncements .composer > label,
#pageAnnouncements .composer-actions,
#pageAnnouncements .composer-actions button {
  width: 100%;
  min-width: 0;
  grid-area: auto;
}

#pageAnnouncements .composer label {
  gap: 4px;
}

#pageAnnouncements .composer select {
  height: 40px;
}

#pageAnnouncements .composer input {
  width: 100%;
  min-width: 0;
  height: 40px;
}

#pageAnnouncements .composer > label[hidden] {
  display: none;
}

#pageAnnouncements .composer-actions {
  display: block;
}

#pageAnnouncements #queueManual {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 5px 12px !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#pageAnnouncements #queueManual .button-icon {
  width: 17px;
  height: 17px;
}

#pageAnnouncements .quick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

#pageAnnouncements .quick-action {
  min-height: 38px;
  padding: 6px 8px;
}

#pageAnnouncements .broadcast-monitor-body {
  min-width: 0;
  padding: 0;
}

#pageAnnouncements .now-playing {
  display: grid;
  min-height: 40px;
  margin: 6px 6px 0;
  padding: 6px 8px;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

#pageAnnouncements .now-playing[hidden] {
  display: none;
}

#pageAnnouncements .now-playing strong {
  min-width: 0;
  font-size: 14px !important;
}

#pageAnnouncements .broadcast-list-section {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--control-line);
}

#pageAnnouncements .broadcast-list-section:last-child {
  border-bottom: 0;
}

#pageAnnouncements .queue-head {
  min-height: 40px;
  padding: 0 8px;
}

#pageAnnouncements .queue-list {
  max-height: 150px;
}

#pageAnnouncements .queue-list .queue-item {
  display: grid;
  min-width: 0;
  padding: 5px 6px 5px 8px;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

#pageAnnouncements .queue-item-copy {
  min-width: 0;
}

#pageAnnouncements .queue-list .queue-remove {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  justify-self: end;
  border-color: transparent;
  background: transparent;
}

#pageAnnouncements .queue-list .queue-remove:hover,
#pageAnnouncements .queue-list .queue-remove:focus-visible {
  border-color: #a7b0b8;
  background: #e8ecef;
}

#pageAnnouncements .queue-list .queue-remove .button-icon {
  width: 16px;
  height: 16px;
}

#pageAnnouncements .planned-list {
  max-height: min(430px, 55dvh);
}

:root[data-theme="dark"] #pageAnnouncements .announcement-command-bar {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

:root[data-theme="dark"] #pageAnnouncements .announcement-command-bar .mic-button,
:root[data-theme="dark"] #pageAnnouncements .announcement-command-bar .volume-control {
  border-color: var(--control-border);
  color: var(--ink);
  background: var(--control-bg);
}

:root[data-theme="dark"] #pageAnnouncements .queue-list li,
:root[data-theme="dark"] #pageAnnouncements .planned-item,
:root[data-theme="dark"] #pageAnnouncements .planned-list > .muted {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}

:root[data-theme="dark"] #pageAnnouncements .queue-list .queue-remove:hover,
:root[data-theme="dark"] #pageAnnouncements .queue-list .queue-remove:focus-visible {
  border-color: var(--control-border);
  background: #2b3d4b;
}

@media (max-width: 760px) {
  #pageAnnouncements .announcement-command-bar {
    flex-wrap: wrap;
  }

  #pageAnnouncements .announcement-command-bar > button {
    flex: 1 1 170px;
  }

  #pageAnnouncements .announcement-command-bar .volume-control {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    flex: 1 0 100%;
  }

  #pageAnnouncements .announcements-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  #pageAnnouncements .planned-list {
    max-height: 300px;
  }
}

@media (max-width: 380px) {
  #pageAnnouncements .announcement-command-bar > button {
    flex-basis: 100%;
  }

  #pageAnnouncements .announcement-command-bar .volume-control {
    grid-template-columns: auto minmax(70px, 1fr) 36px;
  }
}

/* Mobile operations timetable: preserve the real table and scroll it locally. */
@media (max-width: 820px) {
  #pageSchedule .timetable-panel,
  #pageSchedule #scheduleTableView {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #pageSchedule .operator-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 180px;
    max-height: max(180px, calc(100dvh - 285px));
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  #pageSchedule table.dispatch-table.compact-timetable {
    display: table !important;
    width: 1080px !important;
    min-width: 1080px !important;
    max-width: none !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(1) {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(2) {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(3) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(4),
  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(5) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(6),
  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(7),
  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(11),
  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(12) {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(8),
  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(13) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(9) {
    width: 61px !important;
    min-width: 61px !important;
    max-width: 61px !important;
  }

  #pageSchedule table.dispatch-table.compact-timetable thead th:nth-child(10) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  #pageSchedule .compact-timetable thead {
    display: table-header-group !important;
  }

  #pageSchedule .compact-timetable tbody#trainList.train-list {
    display: table-row-group !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent;
  }

  #pageSchedule .compact-timetable thead tr,
  #pageSchedule .compact-timetable tbody > tr,
  #pageSchedule .compact-timetable tbody tr.train-row,
  #pageSchedule .compact-timetable tbody > tr:not(.train-row) {
    display: table-row !important;
    width: auto !important;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #pageSchedule table.dispatch-table.compact-timetable tbody tr.train-row > td,
  #pageSchedule .compact-timetable tbody > tr:not(.train-row) > td {
    display: table-cell !important;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 33px;
    min-height: 33px;
    padding: 3px 4px !important;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td::before {
    display: none !important;
    content: none;
  }

  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(8),
  #pageSchedule .compact-timetable tbody tr.train-row > td:nth-child(13) {
    display: table-cell !important;
  }

  #pageSchedule .compact-timetable .origin-cell,
  #pageSchedule .compact-timetable .destination-cell {
    text-align: left;
  }

  #pageSchedule .compact-timetable .train-number-cell {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }
}

/* Cross-page alignment and dark-theme contrast audit. */

.creation-action {
  width: 36px !important;
  min-width: 36px !important;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  flex: 0 0 36px;
}

#pageScheduleEditor .management-heading-actions {
  flex-wrap: nowrap;
}

#pageScheduleEditor #editorImportButton {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}

#pageScheduleEditor #editorExportButton {
  margin-left: auto;
}

.directory-toolbar .creation-action {
  margin-left: auto;
}

:root[data-theme="dark"] .control-page {
  --control-ink: var(--ink);
  --control-muted: var(--muted);
  --control-line: var(--line-strong);
  --control-line-soft: var(--line);
  --control-head: var(--surface-soft);
  --control-head-dark: #22313d;
  --control-blue: #2f8fce;
  --control-blue-soft: #172633;
}

:root[data-theme="dark"] .empty {
  border-color: var(--line-strong);
  color: var(--muted);
  background: var(--surface-soft);
}

:root[data-theme="dark"] .compact-timetable tbody > tr:not(.train-row) td,
:root[data-theme="dark"] .compact-timetable .empty-row td {
  color: var(--muted);
  background: var(--surface);
}

:root[data-theme="dark"] #pageSchedule .operator-table-scroll {
  background: var(--surface);
}

:root[data-theme="dark"] .train-info .train-info-facts dt {
  color: var(--muted) !important;
}

:root[data-theme="dark"] .train-info .train-info-facts dd {
  color: var(--ink) !important;
}

:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .mic-button {
  border-color: #3a9bdd;
  color: #fff;
  background: #176fa9;
}

:root[data-theme="dark"] button.primary:hover,
:root[data-theme="dark"] .mic-button:hover {
  border-color: #55afea;
  background: #2386c5;
}

:root[data-theme="dark"] button.primary.active,
:root[data-theme="dark"] .mic-button.active {
  border-color: #c94c4c;
  background: #a62b2b;
}

@media (max-width: 820px) {
  .management-table-scroll {
    max-height: min(56dvh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .management-table tbody td[colspan] {
    display: block;
    width: 100% !important;
    grid-column: 1 / -1;
  }

  .management-table tbody td[colspan] .empty {
    width: 100%;
    min-height: 68px;
    box-sizing: border-box;
  }

  #pageScheduleEditor .editor-filters > button[type="submit"] {
    grid-column: 1 / -1;
  }

  #pageScheduleEditor #editorBulkButton {
    justify-self: end;
  }

  #pageScheduleEditor #editorDeleteButton {
    justify-self: start;
  }

  #pageScheduleEditor #editorExportButton {
    margin-left: 0;
    grid-column: 2;
  }

  .directory-toolbar {
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas:
      "search add"
      "sort sort";
    align-items: end;
  }

  .directory-toolbar #directorySearch {
    grid-area: search;
  }

  .directory-toolbar #addDirectoryItem {
    width: 36px !important;
    min-width: 36px !important;
    margin-left: 0;
    grid-area: add;
  }

  .directory-toolbar .directory-mobile-sort {
    width: 100%;
    grid-area: sort;
  }

  .directory-kind-nav .subsection-nav-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .directory-kind-nav .subsection-nav button {
    min-height: 40px;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (max-width: 620px) {
  #pageScheduleEditor #editorExportButton {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  .directory-kind-nav .subsection-nav-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-kind-nav .subsection-nav-inner > button {
    grid-column: auto;
  }

  .directory-kind-nav .subsection-nav-inner > button:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 521px) and (max-width: 620px) {
  .directory-kind-nav .subsection-nav-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .directory-kind-nav .subsection-nav-inner > button {
    grid-column: span 2;
  }

  .directory-kind-nav .subsection-nav-inner > button:nth-last-child(-n+2) {
    grid-column: span 3;
  }
}

/* Website content management */

.site-category-nav {
  margin: -1px -1px 7px;
  border: 1px solid var(--line);
  border-width: 0 0 1px;
  background: var(--surface-soft);
}

.site-category-nav[hidden] {
  display: none;
}

.site-category-nav > div {
  display: flex;
  min-width: 0;
}

.site-category-nav button {
  min-height: 34px;
  padding: 5px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.site-category-nav button[aria-selected="true"] {
  color: #fff;
  background: var(--navy-hover);
}

.site-category-nav button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.site-content-toolbar {
  display: flex;
  margin: 0 0 7px;
  gap: 5px;
  align-items: center;
}

.site-content-toolbar input {
  width: min(280px, 100%);
  height: 34px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  color: var(--ink);
  background: var(--control-bg);
  font: inherit;
}

.site-content-toolbar .creation-action {
  margin-left: auto;
}

.site-content-table {
  min-width: 620px;
}

.site-content-table th:first-child,
.site-content-table td:first-child {
  width: 160px;
}

.site-content-table th:nth-child(2),
.site-content-table td:nth-child(2) {
  width: auto;
  text-align: left;
}

.site-content-table th:last-child,
.site-content-table td:last-child {
  width: 140px;
}

.site-content-table.passenger-site-content-table th:first-child,
.site-content-table.passenger-site-content-table td:first-child {
  width: 82px;
  text-align: center;
}

.site-content-editor {
  width: min(760px, calc(100vw - 16px));
}

.site-content-editor-fields {
  display: grid;
  min-width: 0;
  padding: 10px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 180px;
}

.site-content-editor-fields label {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.site-content-editor-fields input,
.site-content-editor-fields select,
.site-content-editor-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  color: var(--ink);
  background: var(--control-bg);
  font: inherit;
  box-sizing: border-box;
}

.site-content-editor-fields input,
.site-content-editor-fields select {
  height: 36px;
}

.site-content-editor-fields textarea {
  resize: vertical;
}

.site-content-title-field,
.site-content-body-field,
.site-content-list-field,
.site-content-image-field,
.site-content-published-field {
  grid-column: 1 / -1;
}

.site-content-published-field {
  display: flex !important;
  align-items: center;
}

.site-content-published-field input {
  width: 18px;
  height: 18px;
}

@media (max-width: 820px) {
  .site-category-nav > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-category-nav button {
    padding-inline: 4px;
    border-right: 1px solid var(--line);
    line-height: 1.1;
  }

  .site-category-nav button:last-child {
    border-right: 0;
  }

  .site-content-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .site-content-toolbar input {
    width: 100%;
  }

  .site-content-toolbar .creation-action {
    margin-left: 0;
  }

  .site-kind-nav,
  .site-kind-nav .subsection-nav-inner {
    width: 100%;
  }

  .site-kind-nav .subsection-nav-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-kind-nav .subsection-nav button {
    min-height: 40px;
    padding-inline: 5px;
    line-height: 1.05;
    white-space: normal;
  }

  .site-content-table {
    min-width: 0;
  }

  .site-content-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-content-table tbody td:first-child {
    grid-column: auto;
  }

  .site-content-table tbody td:first-child::before {
    display: block;
  }

  .site-content-table tbody td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .site-content-table tbody td:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .site-content-editor-fields {
    grid-template-columns: 1fr;
    padding: 7px;
  }

  .site-content-editor-fields > * {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  .site-kind-nav .subsection-nav-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Train-specific service messages. */

.schedule-notices-editor {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.schedule-train-notices {
  display: grid;
  gap: 5px;
}

.schedule-notice-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.34fr) minmax(260px, 1fr) 36px;
  align-items: start;
  gap: 5px;
}

.schedule-notice-row select,
.schedule-notice-row textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.schedule-notice-row textarea {
  min-height: 58px;
  resize: vertical;
}

.schedule-notices-empty {
  margin: 0;
  color: var(--muted);
}

.train-info .train-info-notices {
  display: grid;
  gap: 4px;
  margin: 0 8px 8px;
}

.train-info .train-info-notices[hidden] {
  display: none;
}

.train-notice {
  border: 1px solid var(--line-strong);
  border-left-width: 5px;
  padding: 6px 8px;
  color: var(--ink);
  background: var(--surface);
}

.train-notice-alert {
  border-left-color: #b32128;
  background: #f4d7d8;
}

.train-notice-information {
  border-left-color: #1d6fa5;
  background: #dcecf6;
}

.train-notice strong,
.train-notice p {
  margin: 0;
  font-size: inherit;
  line-height: 1.25;
}

.train-notice p {
  margin-top: 2px;
  white-space: pre-wrap;
}

:root[data-theme="dark"] .train-notice-alert {
  background: #47252a;
}

:root[data-theme="dark"] .train-notice-information {
  background: #203b4e;
}

@media (max-width: 620px) {
  .schedule-notice-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .schedule-notice-row textarea {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .schedule-notice-row .icon-only-button {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Planning contracts */

.planning-subheader {
  margin-bottom: 4px;
}

.planning-view-nav,
.planning-view-nav .subsection-nav-inner {
  width: 100%;
}

.contract-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 320px) minmax(150px, 210px) 1fr 34px;
  margin: 0 0 7px;
  gap: 5px;
  align-items: center;
}

.contract-toolbar input,
.contract-toolbar select,
.contract-toolbar button {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
}

.contract-toolbar button {
  grid-column: 4;
  width: 34px;
}

.contract-table {
  min-width: 790px;
}

.contract-table th:nth-child(1) { width: 105px; }
.contract-table th:nth-child(2) { width: 88px; }
.contract-table th:nth-child(3) { width: 180px; }
.contract-table th:nth-child(4) { width: auto; }
.contract-table th:nth-child(5) { width: 115px; }
.contract-table th:nth-child(6),
.contract-table th:nth-child(7) { width: 68px; }

.contract-status {
  display: inline-block;
  max-width: 100%;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  background: var(--surface-soft);
  line-height: 1.1;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.contract-status-active {
  border-color: #287a9f;
  background: #cde9f4;
}

.contract-status-fulfilled {
  border-color: #2f7d4d;
  background: #cfe8d8;
}

.contract-status-cancelled {
  border-color: #a84b4b;
  background: #f1d2d2;
}

.contract-editor {
  width: min(980px, calc(100% - 20px));
  max-width: 980px;
  max-height: calc(100dvh - 20px);
}

.contract-editor form {
  max-height: calc(100dvh - 22px);
  padding: 0;
  overflow: auto;
}

.contract-editor .editor-head {
  padding: 8px 10px;
}

.contract-editor .editor-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--line-strong);
  background: var(--surface-soft);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-editor-section {
  padding: 9px 10px 10px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}

.contract-editor-section > h3,
.contract-section-heading h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.contract-section-heading {
  display: flex;
  min-height: 34px;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contract-section-heading h3 {
  margin: 0;
}

.contract-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.contract-fields label,
.contract-signature-party label,
.contract-service label {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
}

.contract-fields input,
.contract-fields select,
.contract-fields textarea,
.contract-signature-party input,
.contract-service input,
.contract-service textarea,
.contract-train-search {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
}

.contract-fields input,
.contract-fields select,
.contract-signature-party input,
.contract-service input,
.contract-train-search {
  height: 34px;
  min-height: 34px;
}

.contract-fields textarea,
.contract-service textarea {
  resize: vertical;
}

.contract-wide-field {
  grid-column: span 2;
}

.contract-services {
  display: grid;
  gap: 5px;
}

.contract-service {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(86px, .45fr)
    minmax(86px, .45fr)
    minmax(210px, 1.3fr)
    34px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  gap: 5px;
  align-items: end;
}

.contract-service-description textarea {
  min-height: 34px;
  height: 34px;
}

.contract-service-remove {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.contract-train-search {
  max-width: 320px;
  margin-bottom: 5px;
}

.contract-train-options {
  display: grid;
  max-height: 210px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.contract-train-option {
  display: grid;
  grid-template-columns: 22px 70px 92px minmax(0, 1fr);
  min-height: 34px;
  padding: 3px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

.contract-train-option:last-child {
  border-bottom: 0;
}

.contract-train-option:hover {
  background: var(--surface-soft);
}

.contract-train-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #176faf;
}

.contract-train-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.contract-train-route {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-signature-summary {
  display: flex;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 5px;
}

.contract-signature-summary > span {
  display: grid;
  min-width: 150px;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.contract-signature-summary strong {
  color: var(--muted);
  font-weight: 400;
}

.contract-signature-summary strong.signed {
  color: #17683d;
}

.contract-signature-section #openContractSignatures {
  min-height: 34px;
  padding-block: 4px;
}

.contract-signature-editor {
  width: min(1280px, calc(100% - 16px));
  max-width: 1280px;
  height: min(760px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
}

.contract-signature-editor form {
  display: grid;
  height: 100%;
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.contract-signature-editor .editor-head,
.contract-signature-editor .editor-footer {
  margin: 0;
  padding: 9px 10px;
  background: var(--surface-soft);
}

.contract-signature-editor .editor-footer {
  border-top: 1px solid var(--line-strong);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-signature-parties {
  display: grid;
  min-height: 0;
  padding: 8px;
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contract-signature-party {
  display: grid;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  gap: 6px;
}

.contract-signature-party h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.contract-signature-party > button {
  min-height: 34px;
  justify-self: start;
}

.contract-signature-pad {
  width: 100%;
  min-height: 220px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--control-border);
  background:
    linear-gradient(to bottom, transparent calc(100% - 28px), var(--line) calc(100% - 28px), var(--line) calc(100% - 27px), transparent calc(100% - 27px)),
    #fff;
}

.contract-signature-pad canvas {
  display: block;
  width: 100%;
  height: 100%;
  color: #111;
  cursor: crosshair;
  touch-action: none;
}

:root[data-theme="dark"] .contract-status {
  color: var(--ink);
  background: var(--surface-soft);
}

:root[data-theme="dark"] .contract-status-active {
  border-color: #3e88a7;
  background: #203f4d;
}

:root[data-theme="dark"] .contract-status-fulfilled {
  border-color: #448a5f;
  background: #244431;
}

:root[data-theme="dark"] .contract-status-cancelled {
  border-color: #9c5454;
  background: #48292b;
}

:root[data-theme="dark"] .contract-signature-summary strong.signed {
  color: #68d49a;
}

:root[data-theme="dark"] .contract-service,
:root[data-theme="dark"] .contract-train-options,
:root[data-theme="dark"] .contract-train-option,
:root[data-theme="dark"] .contract-editor-section,
:root[data-theme="dark"] .contract-signature-party,
:root[data-theme="dark"] .contract-signature-summary > span {
  border-color: var(--line-strong);
  color: var(--ink);
}

:root[data-theme="dark"] .contract-service {
  background: var(--surface-soft);
}

:root[data-theme="dark"] .contract-train-options,
:root[data-theme="dark"] .contract-train-option,
:root[data-theme="dark"] .contract-editor-section,
:root[data-theme="dark"] .contract-signature-party {
  background: var(--surface);
}

:root[data-theme="dark"] .contract-signature-pad {
  border-color: var(--control-border);
  background:
    linear-gradient(to bottom, transparent calc(100% - 28px), #71808a calc(100% - 28px), #71808a calc(100% - 27px), transparent calc(100% - 27px)),
    #f4f6f7;
}

:root[data-theme="dark"] .contract-signature-pad canvas {
  color: #111;
}

@media (max-width: 820px) {
  .planning-view-nav .subsection-nav-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contract-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr) 34px;
  }

  .contract-toolbar button {
    grid-column: 3;
  }

  .contract-table {
    min-width: 0;
  }

  .contract-table tbody td:first-child {
    grid-column: auto;
    min-height: 39px;
  }

  .contract-table tbody td:first-child::before {
    display: block;
  }

  .contract-table tbody td:nth-child(4) {
    grid-column: 1 / -1;
  }

  .contract-table tbody td:nth-child(4),
  .contract-table tbody td:nth-child(4)::before {
    white-space: normal;
  }

  .contract-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contract-service {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 34px;
  }

  .contract-service-name,
  .contract-service-description {
    grid-column: 1 / -1;
  }

  .contract-service-remove {
    grid-column: 3;
    grid-row: 2;
  }

  .contract-signature-parties {
    grid-template-columns: 1fr;
  }

  .contract-signature-editor {
    width: calc(100% - 10px);
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
  }

  .contract-signature-party {
    min-height: 330px;
  }
}

@media (max-width: 560px) {
  .contract-toolbar {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .contract-toolbar select {
    grid-column: 1;
    grid-row: 2;
  }

  .contract-toolbar button {
    grid-column: 2;
    grid-row: 1;
  }

  .contract-fields {
    grid-template-columns: 1fr;
  }

  .contract-wide-field {
    grid-column: auto;
  }

  .contract-editor-section {
    padding: 7px;
  }

  .contract-service {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .contract-service > label {
    grid-column: 1 / -1;
  }

  .contract-service-remove {
    grid-column: 2;
    grid-row: 1;
  }

  .contract-train-option {
    grid-template-columns: 22px 62px minmax(0, 1fr);
  }

  .contract-train-route {
    grid-column: 2 / -1;
    white-space: normal;
  }

  .contract-signature-pad {
    min-height: 220px;
  }
}

/* Pin operational actions only when their natural position is below the viewport. */
#pageSchedule #scheduleTableView.schedule-actions-pinned {
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

#pageSchedule #scheduleTableView.schedule-actions-pinned .operator-table-scroll {
  max-height: var(--schedule-table-available-height, 50dvh) !important;
  overflow-y: auto !important;
  scroll-padding-bottom: calc(48px + env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

#pageSchedule .timetable-selection-bar.viewport-pinned {
  position: fixed;
  right: max(5px, env(safe-area-inset-right));
  bottom: 0;
  left: max(5px, env(safe-area-inset-left));
  z-index: 18;
  min-height: calc(43px + env(safe-area-inset-bottom));
  padding: 4px 4px max(4px, env(safe-area-inset-bottom));
  border: 1px solid var(--table-border);
  box-shadow: 0 -3px 10px rgba(8, 19, 31, .18);
}