/* MBTA Network Resilience Explorer — styles
   The map owns the viewport; everything else floats above it in panels that collapse on
   narrow screens. Line colours are the MBTA's own and are treated as data rather than as
   theme colours, so they sit outside the token set below. */

:root {
  --ground: #EEF1F4;
  --surface: #FFFFFF;
  --surface-2: #F4F7F9;
  --line: #D6DEE4;
  --ink: #16202A;
  --ink-2: #4C5C68;
  --ink-3: #7B8C97;
  --accent: #0F6E78;
  --accent-ink: #0A525A;
  --closed: #47525B;
  --severed: #B8C4CC;
  --shadow: 0 1px 2px rgba(22, 32, 42, .08), 0 10px 30px rgba(22, 32, 42, .12);
  --radius: 10px;

  /* Severity ramp, used when the criticality layer is active. */
  --sev-0: #A7BAC3;
  --sev-1: #63988E;
  --sev-2: #D2A03A;
  --sev-3: #C05A2B;
  --sev-4: #8C2020;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C1216;
    --surface: #151E24;
    --surface-2: #1C272E;
    --line: #2A3941;
    --ink: #E6EDF1;
    --ink-2: #9FB0BA;
    --ink-3: #6E828D;
    --accent: #3EB2BC;
    --accent-ink: #7FD2D9;
    --closed: #8797A2;
    --severed: #35434C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--ground);
}

/* OpenStreetMap's standard tiles are designed to be read on their own, so they compete with the
   transit lines drawn on top. Desaturating them in CSS keeps the geography legible as context
   while leaving colour to the data. */
.leaflet-tile-pane {
  filter: grayscale(1) contrast(.82) brightness(1.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane {
    filter: grayscale(1) invert(1) contrast(.78) brightness(.92);
  }
}

/* Leaflet paints its own attribution and zoom controls; nudge them to match the panels. */
.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255, 255, 255, .78) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-control-attribution {
    background: rgba(12, 18, 22, .78) !important;
    color: #8CA0AB !important;
  }
  :root:not([data-theme="light"]) .leaflet-control-attribution a { color: #7FD2D9 !important; }
}
.leaflet-bar a {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* ---- floating panels ---------------------------------------------------- */

.panel {
  position: absolute;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#controls {
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  width: 322px;
  max-height: calc(100% - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

.panel-head {
  padding: 13px 15px 11px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 4px;
}

h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
}

.sub { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0; }

.panel-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}

section { padding: 13px 15px; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }

h2 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 9px;
}

/* ---- controls ----------------------------------------------------------- */

.seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }

.seg button {
  flex: 1;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  padding: 6px 4px;
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--accent-ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

select, input[type="search"] {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
}

.row { display: flex; gap: 7px; align-items: center; }
.row + .row { margin-top: 7px; }
.row label {
  flex: 0 0 52px;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

button.action {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
button.action:hover { border-color: var(--accent); color: var(--accent-ink); }
button.action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.action:disabled { opacity: .45; cursor: not-allowed; }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hint { font-size: 11px; color: var(--ink-3); margin: 8px 0 0; }

/* ---- readouts ----------------------------------------------------------- */

.readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.ro { background: var(--surface-2); padding: 9px 10px; }
.ro b {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ro span {
  display: block;
  font-size: 9.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 7px 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.chip button {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.chip button:hover { color: var(--sev-4); }

/* ---- journey result ----------------------------------------------------- */

.journey { margin-top: 9px; font-size: 12.5px; }
.journey .big {
  font-family: "IBM Plex Mono", monospace;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.delta { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.delta.up { color: var(--sev-3); }
.delta.cut { color: var(--sev-4); }
.delta.same { color: var(--ink-3); }
.path-stops { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }

/* ---- ranked list -------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
th {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  font-weight: 600;
}
td.n { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }

/* ---- legend ------------------------------------------------------------- */

#legend {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  right: 12px;
  z-index: 480;
  padding: 10px 13px;
  max-width: 220px;
}
#legend .item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2); }
#legend .item + .item { margin-top: 4px; }
#legend .swatch { width: 13px; height: 3px; border-radius: 2px; flex: 0 0 13px; }
#legend .dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 9px; }

/* ---- map marker classes ------------------------------------------------- */

.stn { cursor: pointer; }
.stn-label {
  background: none;
  border: 0;
  box-shadow: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink);
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface);
  white-space: nowrap;
  pointer-events: none;
}

.leaflet-tooltip.stn-tip {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.leaflet-tooltip.stn-tip::before { display: none; }

/* ---- mobile ------------------------------------------------------------- */

#toggle-panel {
  position: absolute;
  z-index: 600;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  display: none;
}

@media (max-width: 720px) {
  #controls {
    left: 12px;
    right: 12px;
    width: auto;
    top: calc(56px + env(safe-area-inset-top, 0px));
    max-height: 62%;
  }
  #controls[hidden] { display: none !important; }
  #toggle-panel { display: block; }
  #legend { display: none; }
}

[hidden] { display: none !important; }