/* Gridgeist v1.2.0 After system: semantic roles, shared component grammar, and state-complete responsive behavior. */
.version-after {
  --foundation-paper-100: #f3f0e7;
  --foundation-paper-200: #e5e1d6;
  --foundation-ink-900: #10120f;
  --foundation-ink-600: #666b62;
  --foundation-blue-600: #1648ff;
  --foundation-blue-300: #8299ff;
  --foundation-orange-600: #ef5428;
  --foundation-orange-100: #f8ddd3;
  --foundation-green-700: #176c4a;
  --foundation-acid-400: #d8ff00;
  --foundation-space-1: .25rem;
  --foundation-space-2: .5rem;
  --foundation-space-3: .75rem;
  --foundation-space-4: 1rem;
  --foundation-space-5: 1.5rem;
  --foundation-space-6: 2rem;
  --foundation-space-7: 3rem;
  --foundation-motion-fast: 160ms;
  --foundation-motion-route: 1800ms;
  --color-canvas: var(--foundation-paper-100);
  --color-surface-subtle: var(--foundation-paper-200);
  --color-surface-inverse: var(--foundation-ink-900);
  --color-text: var(--foundation-ink-900);
  --color-text-muted: var(--foundation-ink-600);
  --color-text-inverse: var(--foundation-paper-100);
  --color-border: var(--foundation-ink-900);
  --color-border-muted: color-mix(in srgb,var(--foundation-ink-900) 22%,transparent);
  --color-action: var(--foundation-blue-600);
  --color-action-soft: var(--foundation-blue-300);
  --color-success: var(--foundation-green-700);
  --color-warning: var(--foundation-orange-600);
  --color-warning-soft: var(--foundation-orange-100);
  --color-focus: var(--foundation-acid-400);
  --font-display: Inter,Arial,sans-serif;
  --font-body: Inter,Arial,sans-serif;
  --font-meta: "DM Mono",monospace;
  --page-gutter: max(2rem,calc((100vw - 1360px)/2));
  min-height: 100svh;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-synthesis: none;
}

.version-after :is(a[href],button):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.after-header {
  height: 72px;
  padding: 0 var(--page-gutter);
  grid-template-columns: 170px minmax(220px,1fr) auto 196px;
  gap: clamp(var(--foundation-space-5),3vw,var(--foundation-space-7));
  border-block: 6px solid var(--color-action);
  border-top: 0;
  background: var(--color-canvas);
  font: 500 .6rem var(--font-meta);
}

.after-brand { font-family: var(--font-display); }
.after-brand span { color: var(--color-action); }
.after-context { gap: var(--foundation-space-1); }
.after-context span,.after-context small { font-family: var(--font-meta); }
.after-context small { color: var(--color-text-muted); }
.after-header nav { gap: var(--foundation-space-5); }
.after-header nav a { padding-block: var(--foundation-space-3); }
.after-header nav a::after {
  bottom: .35rem;
  background: var(--color-action);
  transition-duration: var(--foundation-motion-fast);
}
.after-header nav a[aria-current='page']::after { transform: scaleX(1); }
.after-header nav b { color: var(--color-warning); }

.after-enter {
  min-height: 44px;
  padding-inline: var(--foundation-space-4);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: 600;
  transition: background var(--foundation-motion-fast),color var(--foundation-motion-fast);
}
.after-enter:hover { background: var(--color-action); }
.after-enter span { color: var(--color-focus); }

.after-hero {
  min-height: calc(100svh - 224px);
  padding: 0 var(--page-gutter);
  grid-template-columns: minmax(390px,.7fr) minmax(650px,1.3fr);
  border-bottom-color: var(--color-border);
}

.after-copy {
  min-height: 0;
  padding: var(--foundation-space-5) clamp(var(--foundation-space-6),3vw,var(--foundation-space-7)) var(--foundation-space-5) 0;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.after-copy::before { background: var(--color-surface-inverse); }
.after-kicker {
  color: color-mix(in srgb,var(--color-text-inverse) 66%,transparent);
  font: .55rem var(--font-meta);
}
.after-kicker b { color: var(--color-focus); }
.after-kicker i,.lane-state i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
}
.after-copy h1 {
  max-width: 520px;
  font-family: var(--font-display);
  font-size: clamp(4.25rem,5.55vw,6.25rem);
  line-height: .79;
}
.after-copy h1 span:first-child { color: var(--color-text-inverse); }
.after-copy h1 span:last-child { color: var(--color-action-soft); }
.after-intro {
  gap: var(--foundation-space-6);
  border-top-color: color-mix(in srgb,var(--color-text-inverse) 50%,transparent);
}
.after-intro p { max-width: 360px; }
.after-intro a { color: var(--color-text-inverse); }
.after-intro a span { color: var(--color-focus); }
.after-note { color: color-mix(in srgb,var(--color-text-inverse) 55%,transparent); }

.network-panel {
  grid-template-rows: 68px minmax(310px,1fr) auto;
  background: var(--color-canvas);
}
.network-panel>header {
  padding-inline: var(--foundation-space-5);
  background: var(--color-surface-subtle);
  border-bottom-color: var(--color-border);
  font-family: var(--font-meta);
}
.network-panel>header span { color: var(--color-text-muted); }
.network-panel>header strong { font-family: var(--font-display); }
.network-panel>header p { color: var(--color-text-muted); }
.network-panel>header p b,.network-panel>header i { color: var(--color-success); }

.route-map { min-height: 310px; background: var(--color-canvas); }
.map-grid {
  opacity: .62;
  background-image: linear-gradient(to right,var(--color-border-muted) 1px,transparent 1px),linear-gradient(to bottom,var(--color-border-muted) 1px,transparent 1px);
  background-size: calc(100%/8) 100%,100% 20%;
}
.map-legend {
  top: var(--foundation-space-4);
  left: var(--foundation-space-5);
  gap: var(--foundation-space-5);
  color: var(--color-text-muted);
  font-family: var(--font-meta);
}
.map-legend i { background: var(--color-action); }
.map-legend span:last-child i { background: repeating-linear-gradient(90deg,var(--color-text) 0 4px,transparent 4px 7px); }
.route { stroke: var(--color-text); }
.route-two { stroke: var(--color-action); stroke-width: 3; }
.route-map circle { fill: var(--color-canvas); stroke: var(--color-text); }
.route-map .pulse {
  fill: color-mix(in srgb,var(--color-action) 12%,transparent);
  stroke: var(--color-action);
  animation-duration: var(--foundation-motion-route);
}
.city { font-family: var(--font-meta); }
.city b { color: var(--color-text-muted); }

.map-alert {
  position: absolute;
  z-index: 3;
  right: var(--foundation-space-5);
  bottom: var(--foundation-space-5);
  width: 220px;
  padding: var(--foundation-space-3) var(--foundation-space-4);
  display: grid;
  gap: var(--foundation-space-1);
  border: 1px solid var(--color-border);
  border-left: 7px solid var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-text);
}
.map-alert span,.map-alert small {
  font: .48rem var(--font-meta);
  text-transform: uppercase;
}
.map-alert strong { font: 700 .82rem var(--font-display); }
.map-alert small { color: var(--color-text-muted); }

.route-table-shell { border-top: 1px solid var(--color-border); }
.route-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font: .55rem var(--font-meta);
}
.route-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.route-table tr {
  display: grid;
  grid-template-columns: 98px minmax(120px,1fr) 100px 54px;
  align-items: center;
  padding-inline: var(--foundation-space-5);
  column-gap: var(--foundation-space-4);
  border-bottom: 1px solid var(--color-border-muted);
}
.route-table thead tr {
  min-height: 28px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.route-table tbody tr { min-height: 47px; transition: background var(--foundation-motion-fast); }
.route-table tbody tr:last-child { border-bottom: 0; }
.route-table tbody tr:hover { background: #fff; }
.route-table th,.route-table td { padding: 0; text-align: left; font-weight: 400; }
.route-table tbody th { font: 700 .78rem var(--font-display); }
.route-table th:last-child,.route-table td:last-child { text-align: right; }
.route-table tbody tr.is-attention {
  background: var(--color-warning-soft);
  box-shadow: inset 7px 0 0 var(--color-warning);
}
.lane-state {
  display: inline-flex;
  align-items: center;
  gap: var(--foundation-space-2);
  text-transform: uppercase;
}
.lane-state.is-on-time { color: var(--color-success); }
.lane-state.is-check { color: color-mix(in srgb,var(--color-warning) 72%,var(--color-text)); font-weight: 600; }

.after-metrics {
  min-height: 152px;
  padding: 0 var(--page-gutter);
  grid-template-columns: 180px repeat(3,1fr) 1.25fr;
  background: var(--color-canvas);
}
.after-metrics>div,.after-metrics>p {
  padding: var(--foundation-space-4) var(--foundation-space-5);
  border-right-color: var(--color-border);
}
.after-metrics .metrics-label { padding-left: 0; }
.after-metrics span,.after-metrics small,.metrics-label span,.metrics-label small { font-family: var(--font-meta); }
.after-metrics small,.metrics-label small { color: var(--color-text-muted); }
.after-metrics strong { font-size: clamp(2.4rem,3.2vw,3.1rem); }
.metric-exception {
  background: var(--color-warning);
  color: var(--color-text);
  box-shadow: inset 0 6px 0 var(--color-text);
}
.metric-exception small { color: var(--color-text); }

@media(max-width:1100px) {
  .after-header { grid-template-columns: 150px 1fr auto; }
  .after-context { display: grid; }
  .after-header nav { display: none; }
  .after-hero { grid-template-columns: minmax(340px,.72fr) minmax(540px,1.28fr); }
  .after-copy h1 { font-size: clamp(3.55rem,6.35vw,4.9rem); }
  .after-metrics { grid-template-columns: 150px repeat(3,1fr); }
  .after-statement { display: none; }
}

@media(max-width:900px) {
  .version-after { --page-gutter: 1rem; }
  .after-header { grid-template-columns: 1fr auto; }
  .after-context { display: none; }
  .after-hero { grid-template-columns: 1fr; }
  .after-copy {
    min-height: 540px;
    padding: var(--foundation-space-5) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .after-copy::before { right: -1rem; left: -1rem; width: auto; z-index: -1; }
  .after-copy h1 { max-width: 620px; font-size: clamp(4rem,13vw,6.8rem); }
  .network-panel { min-height: 680px; }
  .after-metrics { grid-template-columns: repeat(2,1fr); }
  .after-metrics .metrics-label { min-height: 120px; padding-left: var(--foundation-space-5); }
  .after-metrics>div:first-of-type,.after-metrics .metric-exception { border-right: 0; }
}

@media(max-width:560px) {
  .after-enter { padding-inline: var(--foundation-space-3); }
  .after-copy { min-height: 500px; }
  .after-copy h1 { font-size: 13.5vw; }
  .after-intro { grid-template-columns: 1fr; align-items: start; }
  .after-intro a { margin-top: var(--foundation-space-2); }
  .network-panel { min-height: 620px; grid-template-rows: 74px minmax(300px,1fr) auto; }
  .network-panel>header { padding-inline: var(--foundation-space-3); }
  .network-panel>header p { gap: var(--foundation-space-2); }
  .map-alert {
    right: var(--foundation-space-3);
    bottom: var(--foundation-space-3);
    width: 178px;
    padding: var(--foundation-space-2) var(--foundation-space-3);
  }
  .route-table tr {
    grid-template-columns: 64px minmax(88px,1fr) 72px 42px;
    padding-inline: var(--foundation-space-3);
    column-gap: var(--foundation-space-2);
  }
  .route-table tbody th { font-size: .68rem; }
  .after-metrics { grid-template-columns: 1fr; }
  .after-metrics .metrics-label,.after-metrics>div {
    min-height: 120px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

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

@media(forced-colors:active) {
  .after-enter,.map-alert,.metric-exception,.route-table tbody tr.is-attention { border: 2px solid CanvasText; }
  .after-header nav a[aria-current='page'] { text-decoration: underline; }
  .lane-state i,.after-kicker i { forced-color-adjust: none; }
}