:root {
  --ink: #292c3b;
  --ink-soft: #59677f;
  --canvas: #f5f6f8;
  --surface: #fbfbfc;
  --separator: #d9dadd;
  --accent: #7c818a;
  --accent-soft: #f0f1f3;
  --green: #248a5b;
  --yellow: #ae6a00;
  --red: #e84c2a;
  --gray: #7c818a;
  --u5: #7e5330;
  --u2: #da421e;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
}

button,
summary,
a {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  --status: var(--gray);
  min-height: 100svh;
  background: var(--surface);
}

.app-shell.status-green {
  --status: var(--green);
}

.app-shell.status-yellow {
  --status: var(--yellow);
}

.app-shell.status-red {
  --status: var(--red);
}

.page-frame {
  width: min(100%, 680px);
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(12px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background: var(--surface);
}

.topbar {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--separator);
}

.brand {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.topbar-time {
  display: flex;
  align-items: center;
  gap: 7px;
}

.topbar #current-date {
  color: var(--ink-soft);
  font-size: 0.83rem;
  font-weight: 500;
}

.route-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--separator);
}

.route-heading h1 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.3rem, 5.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.direction-switch {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}

.direction-switch:hover:not(:disabled) {
  background: var(--accent-soft);
}

.direction-switch:active:not(:disabled) {
  transform: scale(0.95);
}

.direction-switch:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--status) 35%, transparent);
  outline-offset: 3px;
}

.direction-switch:disabled {
  cursor: wait;
  opacity: 0.5;
}

.hero {
  padding: 22px 0 10px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--status);
}

.status-indicator {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 13%, transparent);
}

.status-line strong {
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  font-weight: 730;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.overall-message {
  max-width: 52ch;
  margin: 12px 0 0 24px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.38;
}

.recovery-date {
  margin: 11px 0 0 24px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.recovery-date strong {
  display: block;
  margin-top: 2px;
  color: var(--status);
  font-weight: 750;
}

.status-error {
  margin: 2px 0 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 12px;
  color: #a92e17;
  background: color-mix(in srgb, var(--red) 8%, #fff);
  font-size: 0.8rem;
  font-weight: 620;
  line-height: 1.4;
}

.departures {
  min-width: 0;
  margin-top: 8px;
}

.departure-times {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.departure-times::-webkit-scrollbar {
  display: none;
}

.departure-time,
.departure-placeholder {
  display: inline-flex;
  min-height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  border: 1px solid var(--separator);
  border-radius: 9px;
  background: #fff;
}

.departure-time {
  gap: 4px;
  min-width: 55px;
  padding: 3px 8px;
}

.departure-time time {
  font-size: 0.72rem;
  font-weight: 690;
  letter-spacing: -0.015em;
}

.departure-time small {
  color: var(--yellow);
  font-size: 0.56rem;
  font-weight: 720;
}

.departure-time.is-preferred {
  border-color: color-mix(in srgb, var(--green) 38%, var(--separator));
  background: color-mix(in srgb, var(--green) 9%, #fff);
}

.departure-time.is-cancelled {
  border-color: color-mix(in srgb, var(--red) 24%, var(--separator));
  color: var(--red);
  background: color-mix(in srgb, var(--red) 5%, #fff);
}

.departure-time.is-cancelled time {
  text-decoration: line-through;
}

.departure-time.is-cancelled small {
  color: inherit;
}

.departure-placeholder {
  padding: 3px 10px;
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.departures-empty {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}

.journey {
  padding-top: 6px;
}

.journey-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 15px;
  background: #fff;
  list-style: none;
}

.journey-leg {
  --line-color: var(--gray);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-height: 104px;
  align-items: start;
  padding: 15px 14px 14px;
  border-bottom: 1px solid var(--separator);
}

.line-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.journey-leg:last-child {
  border-bottom: 0;
}

.journey-leg.line-u5 {
  --line-color: var(--u5);
}

.journey-leg.line-u2 {
  --line-color: var(--u2);
}

.journey-leg.status-green {
  --leg-status: var(--green);
}

.journey-leg.status-yellow {
  --leg-status: var(--yellow);
}

.journey-leg.status-red {
  --leg-status: var(--red);
}

.journey-leg.status-gray {
  --leg-status: var(--gray);
}

.line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--line-color);
  font-weight: 760;
  letter-spacing: -0.02em;
}

.next-departure-countdown {
  color: var(--ink-soft);
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.next-departure-countdown.is-preferred,
.next-preferred-countdown {
  color: var(--green);
}

.next-preferred-countdown {
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.line-badge {
  width: 42px;
  height: 30px;
  border-radius: 7px;
  font-size: 0.9rem;
}

.leg-copy {
  min-width: 0;
}

.leg-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.leg-topline > strong {
  font-size: 0.93rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.leg-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-self: end;
  gap: 7px;
  max-width: 116px;
  color: var(--leg-status);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: right;
}

.leg-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
}

.leg-destination {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  margin: 9px 0 0;
  color: #000;
  font-size: 0.78rem;
  line-height: 1.3;
}

.route-arrow {
  width: 16px;
  height: 16px;
}

.leg-destination-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border: 1px solid var(--separator);
  border-radius: 15px;
  background: #fff;
}

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

.metric {
  min-width: 0;
  padding: 14px 8px 12px;
  text-align: center;
}

.metric + .metric {
  border-left: 1px solid var(--separator);
}

.metric strong,
.metric span {
  display: block;
}

.metric strong {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 720;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-accent strong {
  color: var(--status);
}

.metric span {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.67rem;
  font-weight: 500;
}

.data-source-logo {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  object-fit: contain;
  opacity: 0.58;
}

.data-source-logo[hidden] {
  display: none;
}

.refresh-button {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--status);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--status) 22%, transparent);
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 160ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.refresh-button:hover:not(:disabled) {
  filter: brightness(0.96);
}

.refresh-button:active:not(:disabled) {
  transform: scale(0.985);
}

.refresh-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--status) 35%, transparent);
  outline-offset: 3px;
}

.refresh-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (min-width: 700px) {
  .app-shell {
    padding: 28px 0;
    background: var(--canvas);
  }

  .page-frame {
    min-height: auto;
    border: 1px solid #e0e1e4;
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(41, 44, 59, 0.08);
  }
}

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