*, *::before, *::after { box-sizing: border-box; }

:root,
html[data-theme="dark"] {
  --tg-traffic-bg: #0b1220;
  --tg-traffic-surface: #111827;
  --tg-traffic-surface-alt: #172033;
  --tg-traffic-text: #f1f5f9;
  --tg-traffic-text-secondary: #cbd5e1;
  --tg-traffic-muted: #a8b5c8;
  --tg-traffic-border: #334155;
  --tg-traffic-control-border: #64748b;
  --tg-traffic-link: #7dd3fc;
  --tg-traffic-link-hover: #bae6fd;
  --tg-traffic-focus: #facc15;
  --tg-traffic-live-bg: #0c2334;
  --tg-traffic-live-border: #38bdf8;
  --tg-traffic-note-bg: #211b07;
  --tg-traffic-note-border: #facc15;
  --tg-traffic-status-current: #facc15;
  --tg-traffic-status-upcoming: #7dd3fc;
  --tg-traffic-selection-bg: #075985;
  --tg-traffic-selection-text: #f8fafc;
}

html[data-theme="light"] {
  --tg-traffic-bg: #f4f7fb;
  --tg-traffic-surface: #ffffff;
  --tg-traffic-surface-alt: #eef2f7;
  --tg-traffic-text: #102a43;
  --tg-traffic-text-secondary: #334e68;
  --tg-traffic-muted: #486581;
  --tg-traffic-border: #cbd5e1;
  --tg-traffic-control-border: #64748b;
  --tg-traffic-link: #0369a1;
  --tg-traffic-link-hover: #075985;
  --tg-traffic-focus: #0369a1;
  --tg-traffic-live-bg: #e0f2fe;
  --tg-traffic-live-border: #0369a1;
  --tg-traffic-note-bg: #fef9c3;
  --tg-traffic-note-border: #a16207;
  --tg-traffic-status-current: #854d0e;
  --tg-traffic-status-upcoming: #0369a1;
  --tg-traffic-selection-bg: #bae6fd;
  --tg-traffic-selection-text: #102a43;
}

.traffic-content-page {
  min-height: 100vh;
  margin: 0;
  background: var(--tg-traffic-bg);
  color: var(--tg-traffic-text-secondary);
  font-family: var(--tg-font-sans);
}

.traffic-main {
  width: min(calc(100% - 32px), 960px);
  margin: 0 auto;
  padding: 96px 0 72px;
}

.traffic-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
  color: var(--tg-traffic-muted);
  font-size: 13px;
}

.traffic-breadcrumbs a,
.traffic-main a {
  color: var(--tg-traffic-link);
}

.traffic-breadcrumbs a { text-decoration: none; }

.traffic-breadcrumbs a:hover,
.traffic-main a:hover {
  color: var(--tg-traffic-link-hover);
}

.traffic-main a:not(.traffic-card):not(.traffic-station-link):not(.arlanda-station-card) {
  text-underline-offset: 3px;
}

.traffic-hero {
  max-width: 760px;
  margin-bottom: 36px;
}

.traffic-ssr-eyebrow {
  margin: 0 0 12px;
  color: var(--tg-traffic-status-current);
  font: 600 11px/1.35 var(--tg-font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.traffic-kicker { display: none; }

.traffic-hero h1 {
  margin: 0 0 14px;
  color: var(--tg-traffic-text);
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.traffic-lead {
  max-width: 720px;
  margin: 0;
  color: var(--tg-traffic-text-secondary);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
}

.traffic-panel,
.traffic-card,
.traffic-ssr-summary,
.arlanda-station-card {
  border: 1px solid var(--tg-traffic-border);
  background: var(--tg-traffic-surface);
  border-radius: 16px;
}

.traffic-panel {
  margin: 22px 0;
  padding: clamp(22px, 4vw, 34px);
}

.traffic-panel h2,
.traffic-panel h3 {
  color: var(--tg-traffic-text);
}

.traffic-panel h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
}

.traffic-card h2,
.traffic-card h3,
.arlanda-station-card h2,
.arlanda-station-card h3 {
  margin: 0 0 12px;
  color: var(--tg-traffic-link);
  font-size: 16px;
  line-height: 1.3;
}

.traffic-panel h3 {
  margin: 22px 0 8px;
  font-size: 16px;
}

.traffic-panel p,
.traffic-panel li,
.traffic-card p,
.arlanda-station-card p {
  color: var(--tg-traffic-text-secondary);
  line-height: 1.72;
}

.traffic-panel p { margin: 0 0 12px; }
.traffic-panel p:last-child { margin-bottom: 0; }
.traffic-panel > p,
.traffic-panel > ul { max-width: 74ch; }
.traffic-panel ul { margin: 10px 0 0; padding-left: 20px; }
.traffic-panel li + li { margin-top: 7px; }

.traffic-note {
  border-color: var(--tg-traffic-note-border);
  background: var(--tg-traffic-note-bg);
}

.traffic-grid,
.traffic-link-grid,
.traffic-station-grid,
.arlanda-station-strip,
.traffic-facts {
  display: grid;
  gap: 14px;
}

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

.traffic-card,
.arlanda-station-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  color: var(--tg-traffic-text-secondary) !important;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.traffic-card {
  border-color: var(--tg-traffic-control-border);
}

.traffic-card:hover,
.traffic-card:focus-visible,
.arlanda-station-card:hover,
.arlanda-station-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--tg-traffic-link);
  background: var(--tg-traffic-surface-alt);
}

.traffic-card:hover :is(h2, h3),
.traffic-card:focus-visible :is(h2, h3),
.arlanda-station-card:hover :is(h2, h3),
.arlanda-station-card:focus-visible :is(h2, h3) {
  color: var(--tg-traffic-link-hover);
}

.traffic-card p,
.arlanda-station-card p {
  margin: 0;
  font-size: 14px;
}

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

.traffic-station-link {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--tg-traffic-control-border);
  border-radius: 11px;
  background: var(--tg-traffic-surface);
  color: var(--tg-traffic-link) !important;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.traffic-station-link:hover,
.traffic-station-link:focus-visible {
  border-color: var(--tg-traffic-link);
  background: var(--tg-traffic-surface-alt);
  color: var(--tg-traffic-link-hover) !important;
}

.traffic-live-fallback {
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--tg-traffic-live-border);
  border-radius: 16px;
  background: var(--tg-traffic-live-bg);
}

.traffic-live-fallback h2 {
  margin: 0 0 8px;
  color: var(--tg-traffic-text);
  font-size: 18px;
}

.traffic-live-fallback p {
  margin: 0;
  color: var(--tg-traffic-text-secondary);
  line-height: 1.65;
}

.traffic-live-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.traffic-live-heading-group {
  min-width: 0;
}

.traffic-live-heading {
  margin: 0 0 5px;
  color: var(--tg-traffic-text);
  font-size: 18px;
  line-height: 1.35;
}

.traffic-live-state {
  min-width: 0;
  margin: 10px 0 0;
  color: var(--tg-traffic-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.traffic-live-state[data-state="current"],
.traffic-live-state.is-current {
  color: var(--tg-traffic-status-current);
}

.traffic-live-state[data-state="upcoming"],
.traffic-live-state.is-upcoming {
  color: var(--tg-traffic-status-upcoming);
}

.traffic-live-state--warning,
.traffic-live-state--error {
  color: var(--tg-traffic-status-current);
}

.traffic-live-refresh {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--tg-traffic-control-border);
  border-radius: 11px;
  background: var(--tg-traffic-surface);
  color: var(--tg-traffic-link);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.traffic-live-refresh svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.traffic-live-refresh:hover,
.traffic-live-refresh:focus-visible {
  border-color: var(--tg-traffic-link);
  background: var(--tg-traffic-surface-alt);
  color: var(--tg-traffic-link-hover);
}

.traffic-live-refresh:disabled {
  border-color: var(--tg-traffic-border);
  background: var(--tg-traffic-surface-alt);
  color: var(--tg-traffic-muted);
  cursor: wait;
}

.traffic-ssr-summary { padding: 20px; }
.traffic-ssr-header { margin-bottom: 14px; }
.traffic-ssr-eyebrow { margin-bottom: 6px; }

.traffic-ssr-source,
.traffic-ssr-limit,
.traffic-ssr-event-time,
.traffic-ssr-language-label {
  margin: 0;
  color: var(--tg-traffic-muted);
  font-size: 12px;
  line-height: 1.55;
}

.traffic-ssr-cards {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--tg-traffic-border);
}

.traffic-ssr-card {
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--tg-traffic-border);
  border-radius: 0;
  background: transparent;
}

.traffic-ssr-card:last-child { border-bottom: 0; }

.traffic-ssr-card h2,
.traffic-ssr-card h3 {
  margin: 3px 0 7px;
  color: var(--tg-traffic-text);
  font-size: 15px;
  line-height: 1.35;
}

.traffic-ssr-card p {
  margin: 5px 0;
  color: var(--tg-traffic-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.traffic-ssr-status {
  color: var(--tg-traffic-status-current) !important;
  font: 600 11px/1.35 var(--tg-font-sans) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.traffic-ssr-card--upcoming .traffic-ssr-status {
  color: var(--tg-traffic-status-upcoming) !important;
}

.traffic-ssr-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.traffic-ssr-facts > span { min-width: 0; overflow-wrap: anywhere; }
.traffic-ssr-facts strong { color: var(--tg-traffic-text); }
.traffic-ssr-limit { margin-top: 13px; }

.traffic-ssr-empty {
  margin: 0;
  color: var(--tg-traffic-text-secondary);
  line-height: 1.6;
}

.traffic-ssr-summary--compact { padding: 16px; }
.info-block .traffic-ssr-summary--compact p { margin: 0; color: var(--tg-traffic-muted); font-size: 12px; font-weight: 500; line-height: 1.55; }
.traffic-ssr-summary--compact .traffic-live-toolbar { margin-bottom: 8px; }
.traffic-ssr-summary--compact .traffic-ssr-card { min-width: 0; padding: 10px 0; }
.traffic-ssr-summary--compact .traffic-ssr-card h3 { margin: 3px 0; }
.traffic-ssr-summary--compact .traffic-ssr-card p { margin: 3px 0; color: var(--tg-traffic-text-secondary); font-size: 13px; }
.info-block .traffic-ssr-summary--compact a { color: var(--tg-traffic-link); border-color: currentColor; text-underline-offset: 3px; }
.info-block .traffic-ssr-summary--compact a:hover { color: var(--tg-traffic-link-hover); }
.info-block .traffic-ssr-summary--compact a:focus-visible { outline: 2px solid var(--tg-traffic-link); outline-offset: 3px; }
.traffic-ssr-summary--compact .traffic-ssr-card a,
.traffic-ssr-summary--compact .traffic-ssr-compact-location { overflow-wrap: anywhere; }
.traffic-ssr-summary--compact .traffic-ssr-overview { display: inline-block; padding: 6px 0; border-bottom: 0; font-weight: 650; text-decoration: underline; }
.traffic-ssr-summary--compact .traffic-ssr-limit { margin-top: 4px; }
.traffic-ssr-summary--compact .traffic-live-state { margin-top: 2px; }
.info-block .traffic-ssr-summary--compact .traffic-live-state--warning,
.info-block .traffic-ssr-summary--compact .traffic-live-state--error { color: var(--tg-traffic-status-current); }

.arlanda-station-picker {
  margin: 30px 0;
}

.traffic-panel.arlanda-station-picker,
.traffic-panel.traffic-station-choice {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.traffic-station-choice .traffic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.arlanda-station-picker > h2 {
  margin: 0 0 14px;
  color: var(--tg-traffic-text);
  font-size: 22px;
  line-height: 1.3;
}

.arlanda-station-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.arlanda-station-card {
  min-height: 100%;
  border-color: var(--tg-traffic-control-border);
}

.arlanda-card-action,
.traffic-card-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: auto;
  padding-top: 12px;
  color: var(--tg-traffic-link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.traffic-card-title {
  color: var(--tg-traffic-link);
}

.traffic-card .traffic-card-title {
  margin: 0 0 12px;
}

.arlanda-station-strip {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 22px 0 18px;
  padding: 0;
  list-style: none;
}

.arlanda-station-strip::before {
  position: absolute;
  z-index: 0;
  top: 7px;
  right: 16.66%;
  left: 16.66%;
  height: 1px;
  background: var(--tg-traffic-control-border);
  content: "";
}

.arlanda-station-strip li {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  color: var(--tg-traffic-text-secondary);
  text-align: center;
}

.arlanda-station-strip > li + li {
  margin-top: 0;
}

.arlanda-station-strip li::before {
  width: 14px;
  height: 14px;
  border: 3px solid var(--tg-traffic-surface);
  border-radius: 50%;
  background: var(--tg-traffic-link);
  box-shadow: 0 0 0 1px var(--tg-traffic-link);
  content: "";
}

.arlanda-station-strip span {
  color: var(--tg-traffic-muted);
  font-size: 12px;
}

.arlanda-station-strip strong {
  color: var(--tg-traffic-text);
  font-size: 14px;
  line-height: 1.35;
}

.arlanda-station-strip span,
.arlanda-station-strip strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.traffic-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
  border-block: 1px solid var(--tg-traffic-border);
}

.traffic-facts > * {
  min-width: 0;
  padding: 16px 0;
}

.traffic-facts > * + * {
  padding-left: 16px;
  border-left: 1px solid var(--tg-traffic-border);
}

.traffic-facts :is(dt, h3) {
  margin: 0 0 6px;
  color: var(--tg-traffic-text);
  font-weight: 700;
}

.traffic-facts :is(dd, p) {
  margin: 0;
  color: var(--tg-traffic-text-secondary);
  line-height: 1.6;
}

.traffic-source-list,
.traffic-sources ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tg-traffic-border);
}

.traffic-source-list li,
.traffic-sources li {
  padding: 12px 0;
  color: var(--tg-traffic-text-secondary);
  line-height: 1.55;
}

.traffic-source-list li + li,
.traffic-sources li + li {
  border-top: 1px solid var(--tg-traffic-border);
}

.traffic-inline-note {
  margin: 16px 0;
  padding: 14px 16px;
  border-block: 1px solid var(--tg-traffic-note-border);
  background: var(--tg-traffic-note-bg);
  color: var(--tg-traffic-text-secondary);
  line-height: 1.6;
}

.traffic-faq {
  margin: 14px 0 0;
  border-top: 1px solid var(--tg-traffic-border);
}

.traffic-faq > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--tg-traffic-border);
}

.traffic-faq dt {
  margin: 0 0 6px;
  color: var(--tg-traffic-text);
  font-weight: 700;
  line-height: 1.4;
}

.traffic-faq dd {
  margin: 0;
  color: var(--tg-traffic-text-secondary);
  line-height: 1.65;
}

.traffic-related-heading {
  margin: 42px 0 15px;
  color: var(--tg-traffic-text);
  font-size: 22px;
}

.traffic-page-updated {
  margin-top: 32px;
  color: var(--tg-traffic-muted);
  font-size: 12px;
}

.traffic-content-page ::selection {
  background: var(--tg-traffic-selection-bg);
  color: var(--tg-traffic-selection-text);
}

.traffic-content-page :focus-visible {
  outline: 3px solid var(--tg-traffic-focus);
  outline-offset: 3px;
}

/* New pages use the shared theme control without substituting text glyphs for icons. */
.traffic-content-page .theme-toggle > span {
  width: 14px;
  height: 14px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

.traffic-content-page .theme-toggle-icon--moon,
html[data-theme="light"] .traffic-content-page .theme-toggle > span:not([class]) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .traffic-main {
    width: min(calc(100% - 24px), 960px);
    padding-top: 78px;
  }

  .traffic-grid,
  .traffic-link-grid,
  .traffic-station-grid,
  .arlanda-station-strip,
  .traffic-facts {
    grid-template-columns: 1fr;
  }

  .traffic-station-choice .traffic-grid {
    grid-template-columns: 1fr;
  }

  .arlanda-station-strip {
    gap: 16px;
  }

  .arlanda-station-strip::before {
    top: 7px;
    right: auto;
    bottom: 7px;
    left: 7px;
    width: 1px;
    height: auto;
  }

  .arlanda-station-strip li {
    grid-template-columns: 14px minmax(76px, auto) minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .arlanda-station-strip li::before {
    grid-row: 1;
    grid-column: 1;
  }

  .arlanda-station-strip li span,
  .arlanda-station-strip li strong {
    align-self: center;
  }

  .traffic-facts > * + * {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--tg-traffic-border);
  }

  .traffic-hero { margin-bottom: 28px; }
}

@media (max-width: 520px) {
  .traffic-live-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .traffic-live-refresh {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-card,
  .traffic-station-link,
  .traffic-live-refresh,
  .arlanda-station-card {
    transition: none;
  }

  .traffic-card:hover,
  .traffic-card:focus-visible,
  .arlanda-station-card:hover,
  .arlanda-station-card:focus-visible {
    transform: none;
  }
}

@media (forced-colors: active) {
  .traffic-card,
  .traffic-station-link,
  .traffic-live-fallback,
  .traffic-live-refresh,
  .arlanda-station-card {
    border-color: ButtonText;
  }

  .traffic-content-page :focus-visible {
    outline-color: Highlight;
  }
}