/* PULSE · network.css: the Network view (js/views/network.js), the flows,
   blocks and routes layers' map keys, and the link and route cards.
   Built on pulse.css tokens and components (.hero, .block, .badge, .legend,
   .kv, .method); only what those do not cover lives here. */

/* ------------------------------------------------------------------ view */

.net-lead { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.net-text { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.net-list { margin: 8px 0 0; padding-left: 16px; }
.net-list li { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.net-list li + li { margin-top: 4px; }

/* All: one card per mode, number first. */
.net-modes { display: flex; flex-direction: column; gap: 10px; }
.net-mode { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.net-mode-head { display: flex; align-items: center; gap: 7px; }
.net-mode-title { margin: 0; color: var(--navy); font-size: 13px; font-weight: 700; }
.net-mode-head .badge { margin-left: auto; }
.net-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--navy)); }
.net-figure { margin: 2px 0 0; color: var(--navy); font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.net-unit { color: var(--ink-soft); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.net-mode .legend { margin-top: 2px; }
.net-mode .net-width-key { margin-top: 2px; }
.net-more { align-self: flex-start; margin-left: -4px; padding: 6px 4px; font-size: 12.5px; }
.net-more::after { content: " →"; }
/* "Show the blocks on the map", straight under the hero. */
.net-show { align-self: flex-start; margin: -8px 0 0 -4px; font-size: 12.5px; }

/* A headline statistic inside a block (cross-validation). */
.net-stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.net-stat-figure { color: var(--navy); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.net-stat-text { color: var(--ink); font-size: 13px; line-height: 1.4; }

/* Ranked, clickable lists (TEAM / STAND .rank-list). */
.net-rank { display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; padding: 0; list-style: none; }
.net-rank-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "n name meta" "n reason reason";
  align-items: baseline;
  gap: 2px 8px;
  width: 100%;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
}
.net-rank-row:hover { background: var(--wash); }
.net-rank-row:focus-visible { outline-offset: -1px; }
.net-rank-n { grid-area: n; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* The name wraps in full (no clamp or ellipsis), so it survives the WCAG
   text-spacing override. */
.net-rank-name { grid-area: name; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.net-rank-meta { grid-area: meta; color: var(--navy); font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.net-rank-reason { grid-area: reason; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.net-rank-bar { display: block; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.net-rank-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--bar, var(--navy)); }
.net-rank-bar.is-estimated > span { background: repeating-linear-gradient(90deg, var(--bar, var(--navy)) 0 5px, transparent 5px 7px); }
/* Listed but not ranked (Walking: blocks too new to rank): no numbers. */
.net-rank.is-unranked .net-rank-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name meta" "reason reason"; }
.net-subhead { margin: 4px 0 -4px; color: var(--navy); font-size: 12.5px; font-weight: 700; }

/* A route id on its mode colour (all mode colours pass 4.5:1 with white). */
.net-chip { display: inline-block; min-width: 26px; padding: 0 5px; border-radius: 5px; background: var(--chip, var(--mode-bus)); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; letter-spacing: 0.01em; }

/* PT: the width key and the mode key side by side. */
.net-pt-key { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; }
.net-width-key { display: flex; flex-direction: column; gap: 3px; }
.net-width-row { display: flex; align-items: center; gap: 8px; }
.net-width-row svg { flex: none; overflow: visible; }
.net-width-row .key-label { font-variant-numeric: tabular-nums; }
.net-pt-key .chart-legend { flex-direction: column; gap: 4px; }

/* ------------------------------------------------------------------ map key */

.net-key { display: grid; gap: 5px; }
.net-key + .net-key, .key-row + .net-key, .net-key + .key-title, .key-title + .net-key { margin-top: 4px; }
.net-key-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 2px; min-width: 150px; }
.net-key-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.net-key-swatch { display: block; height: 6px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(18, 52, 67, 0.08); }
.net-key-label { color: var(--muted); font-size: 10.5px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.net-key-note { color: var(--muted); font-size: 11px; }
.net-key-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; }
.net-key .key-row .key-swatch { margin: 0; }
.net-key .net-width-key { gap: 2px; }
.net-key .net-width-row { gap: 8px; }
.net-key .net-width-row svg { width: 22px; }

/* Dark and Aerial: swatches on a tile of the basemap's colour (--tile), so
   the bright line colours read as they do on the map. Labels stay on white. */
.net-key-well { display: flex; flex-direction: column; justify-content: flex-end; }
.net-key.is-dark .net-key-steps { gap: 0; }
.net-key.is-dark .net-key-well { height: 15px; padding: 0 1px; justify-content: center; background: var(--tile); }
.net-key.is-dark .net-key-step:first-child .net-key-well { padding-left: 3px; border-radius: 3px 0 0 3px; }
.net-key.is-dark .net-key-step:last-child .net-key-well { padding-right: 3px; border-radius: 0 3px 3px 0; }
.net-key.is-dark .net-key-swatch { box-shadow: none; }
.net-key.is-dark .net-key-label { padding-left: 1px; }
.net-key.is-dark .net-key-tile, .net-key.is-dark .net-width-row svg { height: 16px; border-radius: 3px; background: var(--tile); }
.net-key.is-dark .net-width-row svg { padding: 1px 0; }
.net-key.is-dark .key-ring { background: var(--tile); }
.net-key.is-compact .net-key-steps { min-width: 140px; }

/* Several swatches on one wrapping row (Now view, phones). */
.net-key-inline { flex-wrap: wrap; gap: 3px 10px; }
.net-key-pair { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.net-key-inline .net-key-tile { width: 20px; }

/* Line widths side by side, each label under its line (phones). */
.net-width-key.is-inline { flex-direction: row; align-items: flex-end; gap: 10px; }
.net-width-key.is-inline .net-width-row { flex-direction: column; align-items: flex-start; gap: 1px; }
.net-width-key.is-inline .key-label { font-size: 10.5px; color: var(--muted); }

/* ------------------------------------------------------------------ cards */

.net-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.net-card-figure { color: var(--navy); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.net-card-text { margin: 4px 0 0; color: var(--ink); font-size: 13.5px; line-height: 1.4; }
.net-card-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.place-section .net-band { margin-top: 10px; }
.net-band .legend-step.is-current .legend-swatch-step { position: relative; z-index: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy); border-radius: 2px; }
.net-band .legend-step.is-current .legend-label { color: var(--navy); font-weight: 700; }
.place-section .net-text + .kv, .place-section .net-text + .note { margin-top: 6px; }
.place-section > .note + .note { margin-top: 6px; }
.place-section > .notice + .note { margin-top: 8px; }

.net-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 8px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 600; }
.net-button:hover { border-color: var(--navy); background: var(--wash); }
.net-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0 2px; }
.net-actions .net-button { margin-top: 0; }
.net-graphic { display: contents; }
.net-stops { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.net-chart { min-height: 40px; }
.net-chart .chart + .note, .net-chart .note + .note { margin-top: 6px; }

@media (max-width: 760px) {
  .net-key-steps { min-width: 130px; }
  .net-figure { font-size: 26px; }
  .net-card-figure { font-size: 30px; }
  /* Short key rows that fit the phone key (170 px). */
  .net-key-inline { gap: 2px 8px; }
  .net-key-pair { gap: 3px; }
  .net-key-inline .net-key-tile { width: 16px; }
  .net-key-inline .key-line, .net-key-inline .key-dash { width: 14px; }
  .net-width-key.is-inline { gap: 8px; }
}