/* Shared colour, contrast and light/dark theme layer. Loaded last on every page. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --tg-bg: #0b1220;
  --tg-surface: #111827;
  --tg-surface-alt: #172033;
  --tg-panel: #0d1629;
  --tg-elevated: #131f35;
  --tg-text: #f1f5f9;
  --tg-text-secondary: #cbd5e1;
  --tg-muted: #a8b5c8;
  --tg-subtle: #94a3b8;
  --tg-border: rgba(255, 255, 255, 0.14);
  --tg-control-border: #64748b;
  --tg-link: #7dd3fc;
  --tg-link-hover: #bae6fd;
  --tg-focus: #7dd3fc;
  --tg-gold-text: #facc15;
  --tg-header: rgba(7, 14, 30, 0.94);
  --tg-header-solid: #070e1e;
  --tg-header-fade: rgba(7, 14, 30, 0);
  --tg-footer: rgba(7, 14, 30, 0.94);
  --tg-shadow: rgba(0, 0, 0, 0.48);
  --tg-input: rgba(255, 255, 255, 0.08);
  --tg-input-hover: rgba(255, 255, 255, 0.13);
  --tg-row: rgba(255, 255, 255, 0.045);
  --tg-row-hover: rgba(255, 255, 255, 0.075);
  --tg-success-fg: #86efac;
  --tg-success-bg: #052e16;
  --tg-success-border: #22c55e;
  --tg-early-fg: #dcfce7;
  --tg-early-bg: #166534;
  --tg-early-border: #4ade80;
  --tg-warning-fg: #fde047;
  --tg-warning-bg: #422006;
  --tg-warning-border: #facc15;
  --tg-orange-fg: #fdba74;
  --tg-orange-bg: #431407;
  --tg-orange-border: #f97316;
  --tg-danger-fg: #fca5a5;
  --tg-danger-bg: #450a0a;
  --tg-danger-border: #ef4444;
  --tg-maroon-fg: #fecdd3;
  --tg-maroon-bg: #3f0712;
  --tg-maroon-border: #7f1d1d;
  --tg-delay-yellow-fg: #fff08a;
  --tg-delay-yellow-bg: #443700;
  --tg-delay-yellow-border: #facc15;
  --tg-delay-orange-fg: #ffc07a;
  --tg-delay-orange-bg: #521300;
  --tg-delay-orange-border: #ff6b00;
  --tg-delay-red-fg: #ffd0d0;
  --tg-delay-red-bg: #5a0d0d;
  --tg-delay-red-border: #ff4545;
  --tg-delay-maroon-fg: #f8b4ce;
  --tg-delay-maroon-bg: #260615;
  --tg-delay-maroon-border: #be185d;
}

html[data-theme="light"] {
  color-scheme: light;
  --tg-bg: #f4f7fb;
  --tg-surface: #ffffff;
  --tg-surface-alt: #eef2f7;
  --tg-panel: #ffffff;
  --tg-elevated: #ffffff;
  --tg-text: #102a43;
  --tg-text-secondary: #334e68;
  --tg-muted: #486581;
  --tg-subtle: #5d748a;
  --tg-border: #cbd5e1;
  --tg-control-border: #64748b;
  --tg-link: #0369a1;
  --tg-link-hover: #075985;
  --tg-focus: #0369a1;
  --tg-gold-text: #854d0e;
  --tg-header: rgba(255, 255, 255, 0.94);
  --tg-header-solid: #ffffff;
  --tg-header-fade: rgba(255, 255, 255, 0);
  --tg-footer: rgba(255, 255, 255, 0.96);
  --tg-shadow: rgba(15, 23, 42, 0.18);
  --tg-input: #ffffff;
  --tg-input-hover: #f8fafc;
  --tg-row: #ffffff;
  --tg-row-hover: #f1f5f9;
  --tg-success-fg: #166534;
  --tg-success-bg: #dcfce7;
  --tg-success-border: #22c55e;
  --tg-early-fg: #14532d;
  --tg-early-bg: #f0fdf4;
  --tg-early-border: #4ade80;
  --tg-warning-fg: #854d0e;
  --tg-warning-bg: #fef9c3;
  --tg-warning-border: #facc15;
  --tg-orange-fg: #9a3412;
  --tg-orange-bg: #ffedd5;
  --tg-orange-border: #f97316;
  --tg-danger-fg: #991b1b;
  --tg-danger-bg: #fee2e2;
  --tg-danger-border: #ef4444;
  --tg-maroon-fg: #7f1d1d;
  --tg-maroon-bg: #ffe4e6;
  --tg-maroon-border: #7f1d1d;
  --tg-delay-yellow-fg: #5f4300;
  --tg-delay-yellow-bg: #fff4a3;
  --tg-delay-yellow-border: #b77900;
  --tg-delay-orange-fg: #7c2d12;
  --tg-delay-orange-bg: #ffc38f;
  --tg-delay-orange-border: #d9480f;
  --tg-delay-red-fg: #7f1d1d;
  --tg-delay-red-bg: #ffd0d0;
  --tg-delay-red-border: #dc2626;
  --tg-delay-maroon-fg: #fff1f2;
  --tg-delay-maroon-bg: #881337;
  --tg-delay-maroon-border: #4c0519;
}

html {
  background: var(--tg-bg);
  color: var(--tg-text);
}

body {
  color: var(--tg-text);
}

html[data-theme="light"] body {
  background: var(--tg-bg) !important;
}

body,
button,
input,
select,
textarea {
  color-scheme: inherit;
}

:where(a, button, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--tg-focus) !important;
  outline-offset: 3px !important;
}

/* Header, mobile navigation and persistent theme switch */
.site-header {
  background: var(--tg-header) !important;
  border-bottom-color: var(--tg-border) !important;
  box-shadow: 0 2px 16px var(--tg-shadow) !important;
}

.nav-link {
  color: var(--tg-muted) !important;
}

.nav-link:hover {
  color: var(--tg-text) !important;
  background: color-mix(in srgb, var(--tg-text) 9%, transparent) !important;
}

.nav-link--active,
.nav-link--active:hover {
  color: var(--tg-link) !important;
  background: color-mix(in srgb, var(--tg-link) 14%, transparent) !important;
}

.theme-toggle {
  appearance: none;
  width: 52px;
  height: 44px;
  margin: 0 0 0 6px;
  padding: 0 4px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 5;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tg-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--tg-text) 8%, transparent);
}

.theme-toggle-track {
  width: 44px;
  height: 24px;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 20px);
  grid-template-rows: 20px;
  place-content: center;
  padding: 1px;
  border: 1px solid var(--tg-control-border);
  border-radius: 999px;
  background: var(--tg-surface-alt);
}

.theme-toggle-icon {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 12px/1 "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
  color: var(--tg-muted);
}

.theme-toggle-icon--sun {
  grid-column: 1;
}

.theme-toggle-icon--moon {
  grid-column: 2;
}

.theme-toggle-thumb {
  position: absolute;
  z-index: 0;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tg-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.38);
  transform: translateX(20px);
  transition: transform 0.2s ease, background 0.2s ease;
}

html[data-theme="light"] .theme-toggle-thumb,
.theme-toggle[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(0);
}

html[data-theme="dark"] .theme-toggle-icon--moon,
.theme-toggle[data-theme="dark"] .theme-toggle-icon--moon,
html[data-theme="light"] .theme-toggle-icon--sun,
.theme-toggle[data-theme="light"] .theme-toggle-icon--sun {
  color: var(--tg-bg);
}

.site-footer {
  height: 28px !important;
  padding: 0 14px !important;
  background: var(--tg-footer) !important;
  border-top-color: var(--tg-border) !important;
  color: var(--tg-muted) !important;
  font-size: 11px !important;
}

.site-footer a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  color: var(--tg-muted) !important;
}

.site-footer a:hover {
  color: var(--tg-text) !important;
}

#map {
  bottom: 28px !important;
}

.searchbar input {
  border-color: var(--tg-control-border) !important;
}

.searchbar input::placeholder {
  color: #52606f !important;
  opacity: 1;
}

.searchbar button {
  color: #52606f !important;
}

.train-data-status {
  color: var(--tg-gold-text) !important;
  background: color-mix(in srgb, var(--tg-gold-text) 10%, var(--tg-panel)) !important;
  border-color: color-mix(in srgb, var(--tg-gold-text) 58%, var(--tg-border)) !important;
}

html[data-theme="light"] .base-layer {
  filter: brightness(1) saturate(0.92);
}

html[data-theme="light"] .locateBtn {
  border-color: var(--tg-control-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--tg-text);
}

html[data-theme="light"] .locateStatus:not(.is-error) {
  border-color: var(--tg-control-border);
  background: rgba(255, 255, 255, 0.96);
  color: var(--tg-text);
}

/* Reused editorial sections embedded in the route pages */
.content-section {
  background: var(--tg-bg) !important;
  color: var(--tg-text);
}

.content-hero h1,
.content-hero h2,
.info-title,
.destination-heading {
  color: var(--tg-text) !important;
}

.content-hero > p,
.info-block p,
.feature-card p,
.faq-answer,
.nav-card-desc,
.level-desc,
.number-example-label,
.not-found-intro,
  .destination-description,
  .station-directory-page > main > p {
  color: var(--tg-text-secondary) !important;
}

.info-block h2,
.feature-card h2,
.feature-card h3,
.faq-chevron,
.breadcrumb a,
.content-section a,
.destination-arrow {
  color: var(--tg-link) !important;
}

.content-eyebrow,
.search-eyebrow,
.info-tag {
  color: var(--tg-gold-text) !important;
}

.feature-card,
.faq-question,
.nav-card,
.number-example,
.station-list a,
.info-card,
.destination-link {
  background: var(--tg-surface) !important;
  border-color: var(--tg-border) !important;
  color: var(--tg-text) !important;
}

.faq-answer {
  background: var(--tg-surface-alt) !important;
}

/* Station links in generated city pages and traffic information use inline
   dark defaults, so theme them explicitly after the page-specific styles. */
.content-section nav a {
  background: var(--tg-surface) !important;
  border-color: var(--tg-border) !important;
  color: var(--tg-link) !important;
}

.content-section nav a:hover {
  background: var(--tg-surface-alt) !important;
  border-color: color-mix(in srgb, var(--tg-link) 42%, var(--tg-border)) !important;
  color: var(--tg-link-hover) !important;
}

/* Directory and 404 pages have inline dark styles; keep their hierarchy in both themes. */
.station-directory-page > main > h1,
.not-found-page h1,
.destination-title {
  color: var(--tg-text) !important;
}

.station-directory-page > main > p {
  color: var(--tg-text-secondary) !important;
}

.station-directory-page .station-list a {
  color: var(--tg-link) !important;
}

html[data-theme="dark"] .not-found-page {
  background:
    radial-gradient(circle at 50% 18%, rgba(56, 189, 248, 0.13), transparent 34rem),
    radial-gradient(circle at 15% 75%, rgba(250, 204, 21, 0.07), transparent 25rem),
    var(--tg-bg) !important;
}

html[data-theme="dark"] .not-found-panel {
  background: linear-gradient(145deg, rgba(19, 31, 51, 0.97), rgba(12, 21, 37, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.22) !important;
}

html[data-theme="light"] .not-found-page {
  background:
    radial-gradient(circle at 50% 18%, rgba(14, 165, 233, 0.12), transparent 34rem),
    radial-gradient(circle at 15% 75%, rgba(202, 138, 4, 0.08), transparent 25rem),
    var(--tg-bg) !important;
}

html[data-theme="light"] .not-found-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 247, 0.98)) !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}

.not-found-page .destination-heading {
  color: var(--tg-muted) !important;
}

.faq-list,
.faq-item,
.content-divider,
.info-hero,
.info-updated {
  border-color: var(--tg-border) !important;
}

.faq-question {
  color: var(--tg-text) !important;
}

.faq-question:hover,
.nav-card:hover,
.station-list a:hover,
.destination-link:hover {
  background: var(--tg-surface-alt) !important;
}

.breadcrumb,
.info-subtitle,
.info-card-label,
.info-updated {
  color: var(--tg-muted) !important;
}

/* Station board: readable metadata, history and complete light surfaces */
body.station-page {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}

.station-hero {
  border-color: var(--tg-border) !important;
}

html[data-theme="light"] .station-hero {
  background: linear-gradient(135deg, #dbeafe 0%, #f4f7fb 100%) !important;
}

.station-name,
.time-adv,
.row-dest,
.ac-name {
  color: var(--tg-text) !important;
}

.station-date,
.station-sig-badge,
.station-name--prompt,
.station-page .back-link,
.toggle-btn,
.board-count,
.refresh-label,
.board-header,
.time-struck,
.time-adv.time-departed,
.row-via,
.row-product,
.col-track,
.track-badge,
.board-empty,
.ac-sig,
.nearest-station-results small {
  color: var(--tg-muted) !important;
}

.station-searchbar,
.hero-search-wrap .station-searchbar,
.date-picker-wrap,
.toggle-group,
.track-badge,
.station-sig-badge,
.nearest-station-results {
  background: var(--tg-input) !important;
  border-color: var(--tg-border) !important;
}

.station-searchbar:focus-within,
.hero-search-wrap .station-searchbar:focus-within,
.date-picker-wrap:focus-within {
  background: var(--tg-input-hover) !important;
  border-color: var(--tg-focus) !important;
}

.station-searchbar input,
.hero-search-wrap .station-searchbar input,
#datePicker {
  color: var(--tg-text) !important;
}

.station-searchbar input::placeholder,
.hero-search-wrap .station-searchbar input::placeholder {
  color: var(--tg-subtle) !important;
  opacity: 1;
}

#datePicker {
  color-scheme: inherit !important;
}

.station-autocomplete {
  background: var(--tg-elevated) !important;
  border-color: var(--tg-border) !important;
  box-shadow: 0 18px 40px var(--tg-shadow) !important;
}

.ac-item {
  border-color: var(--tg-border) !important;
}

.ac-item:hover,
.ac-item--active,
.toggle-btn:hover {
  background: var(--tg-surface-alt) !important;
  color: var(--tg-text) !important;
}

.toggle-btn--active,
.today-btn {
  background: color-mix(in srgb, var(--tg-link) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--tg-link) 40%, transparent) !important;
  color: var(--tg-link) !important;
}

.board-header {
  background: var(--tg-bg) !important;
}

html[data-theme="light"] :is(.board-header, .board-rows) {
  border-color: var(--tg-orange-border) !important;
}

.board-row {
  background: var(--tg-row) !important;
}

.board-row:hover {
  background: var(--tg-row-hover) !important;
  border-color: var(--tg-border) !important;
}

.board-rows,
.board-header {
  scrollbar-color: var(--tg-border) transparent !important;
}

.row-departed .col-dest,
.row-departed .col-track,
.row-departed .col-train,
.row-canceled .col-dest,
.row-canceled .col-track,
.row-canceled .col-train {
  opacity: 0.68 !important;
}

.time-real--departed {
  opacity: 0.72 !important;
}

.status-departed,
.status-canceled--departed {
  color: var(--tg-muted) !important;
  background: var(--tg-surface-alt) !important;
  border-color: var(--tg-border) !important;
}

.nearest-station-results a {
  color: var(--tg-text) !important;
  background: var(--tg-surface-alt) !important;
}

.nearest-station-results .nearest-error {
  color: var(--tg-text) !important;
}

.nearest-station-btn {
  color: var(--tg-link) !important;
  background: color-mix(in srgb, var(--tg-link) 12%, var(--tg-surface)) !important;
  border-color: color-mix(in srgb, var(--tg-link) 46%, var(--tg-border)) !important;
}

.nearest-station-btn:hover,
.nearest-station-btn:focus-visible {
  color: var(--tg-link-hover) !important;
  background: color-mix(in srgb, var(--tg-link) 20%, var(--tg-surface)) !important;
  border-color: var(--tg-link) !important;
}

/* Train detail timeline */
body.detail-page,
.detail-body {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}

.info-card,
.operating-points-toggle {
  background: var(--tg-surface) !important;
  border-color: var(--tg-border) !important;
}

.info-card-value,
.stops-title,
.stop-name,
.time-real,
.time-adv,
.stop-next .stop-name {
  color: var(--tg-text) !important;
}

.info-card-label,
.stops-badge,
.refresh-indicator,
.operating-point-label,
.time-label,
.empty-msg,
.stop-track {
  color: var(--tg-muted) !important;
}

.operating-points-toggle {
  color: var(--tg-text-secondary) !important;
}

.stop-dot {
  border-color: var(--tg-text-secondary);
}

.stop-dot--passed,
.stop-line {
  background: var(--tg-border);
  border-color: var(--tg-border);
}

.stop-row.stop-passed .stop-name,
.stop-row.stop-canceled .stop-name {
  opacity: 0.68 !important;
}

/* Search page */
body.search-page {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}

.card-heading h1 {
  color: var(--tg-text) !important;
}

.card-heading p,
.form-label {
  color: var(--tg-muted) !important;
}

.form-input {
  background: var(--tg-input) !important;
  border-color: var(--tg-control-border) !important;
  color: var(--tg-text) !important;
  color-scheme: inherit !important;
}

.form-input::placeholder {
  color: var(--tg-subtle) !important;
  opacity: 1;
}

.search-breadcrumb,
.search-eyebrow {
  width: max-content;
  max-width: 100%;
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-control-border) !important;
  box-shadow: 0 4px 16px var(--tg-shadow);
}

.search-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 8px;
  color: var(--tg-text-secondary) !important;
}

.search-breadcrumb a {
  color: var(--tg-link) !important;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.search-eyebrow {
  color: var(--tg-gold-text) !important;
}

html[data-theme="light"] .search-hero::before {
  filter: brightness(0.95) saturate(0.72) !important;
}

html[data-theme="light"] .search-hero::after {
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(255,255,255,0.16) 10%, rgba(244,247,251,0.72) 100%) !important;
}

html[data-theme="light"] .search-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22) !important;
}

/* Info pages use their own short variable names; bridge them to shared tokens. */
html[data-theme="dark"] {
  --bg: var(--tg-bg);
  --surface: var(--tg-surface);
  --border: var(--tg-border);
  --text: var(--tg-text-secondary);
  --muted: var(--tg-muted);
  --accent: var(--tg-link);
  --gold: var(--tg-gold-text);
}

html[data-theme="light"] {
  --bg: var(--tg-bg);
  --surface: var(--tg-surface);
  --border: var(--tg-border);
  --text: var(--tg-text-secondary);
  --muted: var(--tg-muted);
  --accent: var(--tg-link);
  --gold: var(--tg-gold-text);
}

/* Cookie notice is created after page CSS, so these overrides are important. */
#cookie-banner {
  bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--tg-surface) !important;
  border-color: var(--tg-control-border) !important;
  color: var(--tg-text-secondary) !important;
}

#cookie-banner h2 {
  color: var(--tg-text) !important;
}

#cookie-banner p,
#cb-preferences label {
  color: var(--tg-text-secondary) !important;
}

#cb-preferences {
  border-color: var(--tg-border) !important;
}

#cookie-banner a,
#cb-customize {
  color: var(--tg-link) !important;
}

#cb-accept,
#cb-decline,
#cb-save {
  min-height: 44px !important;
}

#cb-accept,
#cb-save {
  background: var(--tg-link) !important;
  border-color: var(--tg-link) !important;
  color: var(--tg-bg) !important;
}

#cb-decline {
  background: var(--tg-surface-alt) !important;
  border-color: var(--tg-control-border) !important;
  color: var(--tg-text) !important;
}

#cb-accept:hover,
#cb-save:hover {
  background: var(--tg-link-hover) !important;
  border-color: var(--tg-link-hover) !important;
}

#cb-customize:hover,
#cookie-banner .cb-policy:hover {
  color: var(--tg-link-hover) !important;
}

@media (max-width: 700px) {
  .site-header {
    padding-right: 4px !important;
  }

  .site-nav-scroll-button {
    color: var(--tg-link) !important;
    text-shadow: 0 0 8px color-mix(in srgb, var(--tg-link) 28%, transparent) !important;
  }

  .site-nav-scroll-button--left {
    background: linear-gradient(to left, var(--tg-header-fade) 0%, var(--tg-header-solid) 43%, var(--tg-header-solid) 100%) !important;
  }

  .site-nav-scroll-button--right {
    background: linear-gradient(to right, var(--tg-header-fade) 0%, var(--tg-header-solid) 43%, var(--tg-header-solid) 100%) !important;
  }

  .site-nav {
    padding-right: 4px !important;
  }

  .theme-toggle {
    margin-left: 0;
  }

  .theme-toggle-icon {
    transform: translateY(1px);
  }

  .site-footer {
    padding-inline: 8px !important;
  }

  .footer-links {
    gap: 8px !important;
  }
}

/* Audit 2026-07: AA-safe semantic states and remaining light-theme leaks. */
html[data-theme="light"] .logo-tag,
html[data-theme="light"] .logo-dot {
  color: var(--tg-gold-text) !important;
}

html[data-theme="light"] .logo-radar,
html[data-theme="light"] .site-nav-scroll-button {
  color: var(--tg-link) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--tg-link) 28%, transparent) !important;
}

html[data-theme="light"] .nav-card-title,
html[data-theme="light"] .number-example-nr,
html[data-theme="light"] strong[style*="rgba(255,255,255"] {
  color: var(--tg-text) !important;
}

html[data-theme="light"] :is(
  nav[aria-label="Populära stationer"],
  nav[aria-label="Närliggande stationer"]
) > a {
  color: var(--tg-link) !important;
  background: var(--tg-surface) !important;
  border-color: var(--tg-border) !important;
}

html[data-theme="light"] :is(
  .station-clock,
  .ac-name mark,
  .train-link,
  .now-divider-label
) {
  color: var(--tg-link) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .map-icon-btn {
  color: var(--tg-link) !important;
  background: color-mix(in srgb, var(--tg-link) 10%, var(--tg-surface)) !important;
  border-color: color-mix(in srgb, var(--tg-link) 55%, var(--tg-surface)) !important;
}

html[data-theme="light"] .map-icon-btn:hover {
  color: var(--tg-link-hover) !important;
  background: color-mix(in srgb, var(--tg-link) 18%, var(--tg-surface)) !important;
  border-color: var(--tg-link) !important;
}

:is(.status-ontime, .status-badge.on-time, .time-delay.on-time) {
  color: var(--tg-success-fg) !important;
  background: var(--tg-success-bg) !important;
  border: 1px solid var(--tg-success-border) !important;
}

html[data-theme="light"] .detail-page :is(.stop-badge--at-station, .stop-badge--next) {
  background: #bfdbfe;
  color: #075985;
  border-color: #3b82f6;
}

.time-real.on-time {
  color: var(--tg-success-fg) !important;
  background: var(--tg-success-bg) !important;
  border: none !important;
  opacity: 1 !important;
}

.stops-badge {
  border-color: var(--tg-border) !important;
}

.status-early {
  color: var(--tg-early-fg) !important;
  background: var(--tg-early-bg) !important;
  border: 1px solid var(--tg-early-border) !important;
}

:is(.delay-yellow, .time-delay.delay-yellow) {
  color: var(--tg-delay-yellow-fg) !important;
  background: var(--tg-delay-yellow-bg) !important;
  border-color: var(--tg-delay-yellow-border) !important;
}

.deviation-tag {
  color: var(--tg-warning-fg) !important;
  background: var(--tg-warning-bg) !important;
  border-color: var(--tg-warning-border) !important;
}

.stop-badge--departure-only {
  color: var(--tg-warning-fg) !important;
  background: var(--tg-warning-bg) !important;
  border-color: var(--tg-warning-border) !important;
}

:is(.delay-orange, .time-delay.delay-orange) {
  color: var(--tg-delay-orange-fg) !important;
  background: var(--tg-delay-orange-bg) !important;
  border-color: var(--tg-delay-orange-border) !important;
}

:is(.delay-red, .time-delay.delay-red) {
  color: var(--tg-delay-red-fg) !important;
  background: var(--tg-delay-red-bg) !important;
  border-color: var(--tg-delay-red-border) !important;
}

:is(
  .status-canceled,
  .stop-badge--canceled,
  .board-error,
  .error-msg,
  .form-error
) {
  color: var(--tg-danger-fg) !important;
  background: var(--tg-danger-bg) !important;
  border-color: var(--tg-danger-border) !important;
}

:is(.delay-maroon, .time-delay.delay-maroon) {
  color: var(--tg-delay-maroon-fg) !important;
  background: var(--tg-delay-maroon-bg) !important;
  border-color: var(--tg-delay-maroon-border) !important;
}

html[data-theme="light"] :is(.error-code, .info-section a:hover) {
  color: var(--tg-link-hover) !important;
}

.row-departed .col-dest,
.row-departed .col-track,
.row-departed .col-train,
.row-canceled .col-dest,
.row-canceled .col-track,
.row-canceled .col-train,
.time-real--departed {
  opacity: 1 !important;
}

.row-departed .row-dest {
  color: var(--tg-muted) !important;
}

.row-canceled .row-dest {
  color: var(--tg-muted) !important;
  text-decoration: line-through;
}

.stop-row.stop-passed .stop-name {
  color: var(--tg-muted) !important;
  opacity: 1 !important;
}

.stop-row.stop-canceled .stop-name {
  color: var(--tg-muted) !important;
  opacity: 1 !important;
  text-decoration: line-through;
}

:is(.time-struck, .time-adv.time-struck) {
  color: var(--tg-muted) !important;
  opacity: 1 !important;
}

.faq-item.open .faq-answer {
  max-height: none !important;
}

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

@media (forced-colors: active) {
  .theme-toggle-track,
  .theme-toggle-thumb,
  .toggle-btn,
  .ti-layer-mode-label {
    forced-color-adjust: auto;
    border: 1px solid ButtonText !important;
  }
}