@font-face {
  font-family: Overpass;
  src: url("../assets/fonts/overpass-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Overpass;
  src: url("../assets/fonts/overpass-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Overpass;
  src: url("../assets/fonts/overpass-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mukta;
  src: url("../assets/fonts/mukta-devanagari-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --concrete: #e6eaec;
  --slate: #1e2b33;
  --mist: #65747d;
  --aqua: #14a3b8;
  --purple: #6b4fa0;
  --pink: #d6418a;
  --amber: #f2b200;
  --amber-ink: #1e2b33;
  --switch: #1f8a5b;
  --stay: #b5473a;
  --paper: #f7f9f9;
}

* { box-sizing: border-box; }

html { background: var(--concrete); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--slate);
  background: var(--concrete);
  font-family: Overpass, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--amber-ink); background: var(--amber); }

.site-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 3rem) 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 28%, transparent);
}

.product-name,
.data-notice,
.panel-heading p,
.planning-rail p,
.rail-preview { margin: 0; color: var(--mist); font-size: .8125rem; line-height: 1.45; }

.product-name { font-weight: 800; color: var(--slate); letter-spacing: -.02em; }

h1, h2, p { text-wrap: pretty; }
h1 { max-width: 24ch; margin: .15rem 0 0; font-size: clamp(1.5rem, 2.5vw, 2.25rem); letter-spacing: -.035em; line-height: 1.05; }
h2 { margin: 0; font-size: 1.0625rem; letter-spacing: -.015em; }

.data-notice { max-width: 30ch; text-align: right; }
.data-notice a { color: inherit; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.workforce-import { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem; max-width: 1600px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem); border-top: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.workforce-import h2 { margin: 0; }
.workforce-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.workforce-actions label, .workforce-actions button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--slate) 55%, transparent); border-radius: .35rem; color: var(--slate); background: transparent; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.workforce-actions input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.workforce-actions label:hover, .workforce-actions button:hover { background: color-mix(in srgb, var(--paper) 65%, transparent); }
.workforce-actions label:focus-within, .workforce-actions button:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.upload-status { grid-column: 1 / -1; margin: 0; color: var(--switch); font-size: .8125rem; font-weight: 600; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(18rem, .85fr);
  min-height: calc(100vh - 109px);
  max-width: 1600px;
  margin: 0 auto;
}

.map-panel { min-width: 0; padding: clamp(1rem, 2.5vw, 2.5rem); padding-right: clamp(1rem, 2.5vw, 2.5rem); border-right: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }

.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.panel-heading p { margin-top: .35rem; }

.legend { display: flex; flex-wrap: wrap; justify-content: end; gap: .35rem .85rem; max-width: 31rem; font-size: .75rem; line-height: 1.2; color: var(--slate); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.legend-line { width: 1.35rem; border-top: 3px solid currentColor; }
.line-l1 { color: var(--purple); }
.line-l2 { color: var(--aqua); }
.line-l3 { color: var(--pink); border-top-style: dashed; }
.legend-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.can-switch { color: var(--switch); }
.legend-dot.borderline { color: var(--switch); background: transparent; border: 1.25px solid currentColor; }
.stay { color: var(--stay); }

.map-canvas { position: relative; min-height: 560px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--slate) 18%, transparent); overflow: hidden; }
.map-canvas svg { display: block; width: 100%; height: auto; min-height: 560px; }
.metro-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
.metro-line[data-line="L1"] { stroke: var(--purple); }
.metro-line[data-line="L2"] { stroke: var(--aqua); }
.metro-line[data-line="L3"] { stroke: var(--pink); stroke-dasharray: 10 9; opacity: .72; }
.metro-line[data-line="L3"].is-open { stroke-dasharray: none; opacity: 1; }
.shuttle-casing { fill: none; stroke: var(--slate); stroke-linecap: round; stroke-width: 14; }
.shuttle-loop { fill: none; stroke: var(--amber); stroke-linecap: round; stroke-width: 10; animation: draw-shuttle 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.shuttle-marker { fill: var(--slate); }
.station { fill: var(--paper); stroke: var(--slate); stroke-width: 2.25; }
.station--interchange { fill: var(--slate); stroke: var(--paper); stroke-width: 3.5; }
.station-label { fill: var(--slate); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; transition: opacity 150ms ease-out; }
.station-label--hidden { opacity: 0; }
.station-group:focus .station-label--hidden, .station-group:hover .station-label--hidden { opacity: 1; }
.station-group:focus .station, .station-group:hover .station { stroke: var(--aqua); outline: none; }
.employee { transition: fill 150ms ease-out, stroke 150ms ease-out, opacity 150ms ease-out; }
.employee.can-switch { fill: var(--switch); }
.employee.borderline { fill: none; stroke: var(--switch); stroke-width: 1.25; opacity: 1; }
.employee.stay { fill: var(--stay); opacity: .64; }
.employee.is-selected { stroke: var(--slate); stroke-width: 2.5; opacity: 1; }
.map-detail { position: absolute; z-index: 2; top: .75rem; right: .75rem; width: min(20rem, calc(100% - 1.5rem)); padding: 1rem; color: var(--slate); background: var(--paper); border: 1px solid color-mix(in srgb, var(--slate) 55%, transparent); }
.map-detail h3 { margin: 0 2.8rem .8rem 0; font-size: 1.0625rem; text-transform: capitalize; }
.map-detail p { display: grid; gap: .15rem; margin: 0 0 .8rem; font-size: .8125rem; line-height: 1.4; }
.map-detail p strong { font-size: .75rem; }
.map-detail-close { position: absolute; top: .6rem; right: .6rem; min-height: 2rem; padding: .25rem .5rem; border: 1px solid color-mix(in srgb, var(--slate) 45%, transparent); border-radius: .35rem; color: var(--slate); background: transparent; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.map-detail-close:hover { background: color-mix(in srgb, var(--concrete) 70%, transparent); }
.map-detail-close:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.map-detail dl { margin: 0 0 .8rem; border-top: 1px solid color-mix(in srgb, var(--slate) 20%, transparent); font-size: .75rem; font-variant-numeric: tabular-nums; }
.map-detail dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slate) 20%, transparent); }
.map-detail dt { color: var(--mist); }
.map-detail dd { margin: 0; font-weight: 600; text-align: right; }
.map-detail .map-detail-verdict { margin: 0; font-weight: 800; }
.map-detail-unavailable { color: var(--mist); }
.map-note { fill: var(--mist); font-size: 12px; }
.cluster-label { fill: var(--mist); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }

.planning-rail { padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.controls h2, .results h2 { margin-bottom: 1rem; }
.controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.controls legend, .range-control > span, .line3-toggle { font-size: .8125rem; font-weight: 600; }
.service-choice { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-bottom: .75rem !important; }
.service-choice legend { flex-basis: 100%; }
.service-choice label, .line3-toggle { display: flex; align-items: center; gap: .55rem; min-height: 2.5rem; font-size: .8125rem; }
.service-choice input, .line3-toggle input { accent-color: var(--slate); width: 1rem; height: 1rem; }
.range-control { display: grid; gap: .25rem; margin: .65rem 0; }
.range-control > span { display: flex; justify-content: space-between; gap: 1rem; }
.range-control output { font-variant-numeric: tabular-nums; color: var(--mist); font-weight: 400; }
.range-control input { width: 100%; min-height: 2.5rem; accent-color: var(--aqua); }
.range-control input:disabled { opacity: .45; cursor: not-allowed; }
.line3-toggle { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.results { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--slate) 45%, transparent); }
.switcher-number { display: grid; margin: 0 0 .9rem; }
.switcher-number output { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; color: var(--switch); }
.switcher-number span { margin-top: .4rem; color: var(--mist); font-size: .8125rem; }
.result-metrics { margin: 0; }
.result-metrics div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--slate) 18%, transparent); }
.result-metrics dt { color: var(--mist); font-size: .75rem; }
.result-metrics dd { margin: 0; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.boarding-breakdown { margin-top: 1.2rem; }
.boarding-breakdown h3 { margin: 0 0 .55rem; font-size: .8125rem; }
.boarding-breakdown ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; color: var(--mist); font-size: .75rem; }
.boarding-breakdown li { padding-left: .1rem; }
.boarding-breakdown li span { color: var(--slate); font-variant-numeric: tabular-nums; }
.frequency-chart-section { margin: 0 0 .75rem; padding: .75rem 0 0; border-top: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.frequency-chart-section h3 { margin: 0; font-size: .8125rem; }
.frequency-chart-section p { margin: .25rem 0 .4rem; color: var(--mist); font-size: .75rem; line-height: 1.35; }
#frequency-chart { display: block; width: 100%; height: auto; overflow: visible; }
.frequency-bar { fill: var(--slate); opacity: .35; }
.frequency-bar--recommended { fill: var(--switch); opacity: 1; }
.frequency-current-outline { fill: none; stroke: var(--slate); stroke-width: 2; }
.frequency-value { fill: var(--slate); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.frequency-label { fill: var(--mist); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }

.memo-section, .robustness-section, .assumptions-section { max-width: 1600px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem); border-top: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.section-intro { max-width: 65ch; margin: .4rem 0 0; color: var(--mist); font-size: .8125rem; line-height: 1.5; }
.memo-text { max-width: 72ch; margin: 1.5rem 0; white-space: pre-line; font-size: .9375rem; line-height: 1.65; }
.memo-text strong { font-weight: 800; }
.memo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; }
.memo-actions button { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--slate) 65%, transparent); border-radius: .35rem; color: var(--amber-ink); background: var(--amber); font: inherit; font-weight: 600; cursor: pointer; transition: transform 150ms ease-out, background-color 150ms ease-out; }
.memo-actions button:hover { background: color-mix(in srgb, var(--amber) 84%, var(--paper)); }
.memo-actions button:active { transform: scale(.96); }
.memo-actions button:focus-visible, .assumptions-scroll:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.memo-actions p { margin: 0; color: var(--mist); font-size: .8125rem; }
.robustness-actions { margin-top: 1.25rem; }
.robustness-actions button { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--slate) 65%, transparent); border-radius: .35rem; color: var(--amber-ink); background: var(--amber); font: inherit; font-weight: 600; cursor: pointer; transition: transform 150ms ease-out, background-color 150ms ease-out; }
.robustness-actions button:hover { background: color-mix(in srgb, var(--amber) 84%, var(--paper)); }
.robustness-actions button:active { transform: scale(.96); }
.robustness-actions button:focus-visible, .robustness-scroll:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.robustness-summary { max-width: 72ch; margin: 1.5rem 0 .35rem; font-weight: 800; line-height: 1.45; }
.robustness-sensitive { margin: 0; color: var(--mist); font-size: .8125rem; line-height: 1.5; }
.robustness-scroll { margin-top: 1rem; overflow-x: auto; border-bottom: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.robustness-scroll table { width: 100%; min-width: 47rem; border-collapse: collapse; font-size: .8125rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.robustness-scroll th, .robustness-scroll td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-top: 1px solid color-mix(in srgb, var(--slate) 20%, transparent); }
.robustness-scroll thead th { color: var(--mist); font-size: .75rem; font-weight: 600; }
.robustness-row--changes th, .robustness-row--changes td:last-child { color: var(--stay); font-weight: 800; }
.assumptions-scroll { margin-top: 1.5rem; overflow-x: auto; border-bottom: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
.assumptions-scroll table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .8125rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.assumptions-scroll th, .assumptions-scroll td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-top: 1px solid color-mix(in srgb, var(--slate) 20%, transparent); }
.assumptions-scroll th { color: var(--mist); font-size: .75rem; font-weight: 600; }
.assumptions-scroll td:last-child { text-transform: capitalize; }
.assumption-confidence { font-weight: 600; }
.confidence--low { color: var(--stay); }

@keyframes draw-shuttle { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

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

@media (max-width: 850px) {
  .site-header { align-items: start; flex-direction: column; gap: .75rem; }
  .data-notice { max-width: none; text-align: left; }
  .app-shell { grid-template-columns: 1fr; }
  .map-panel { border-right: 0; }
  .planning-rail { border-top: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); }
  .service-choice { display: grid; }
  .workforce-import { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 600px) {
  .panel-heading { flex-direction: column; gap: .9rem; }
  .legend { justify-content: start; }
  .map-canvas, .map-canvas svg { min-height: 430px; }
}

@media (prefers-color-scheme: dark) {
  :root { --concrete: #11181d; --slate: #e3e8eb; --mist: #aebbc2; --paper: #172127; --switch: #54b982; --stay: #f07c71; }
}