/* ============================================================
   River detail — page-scoped CSS (Round 7).
   Loaded by pages/river.html. Design source:
   design/DESIGN.md §"Components — River detail page" and
   design/Round 7 - Screens.html.
   Reuses tokens.css primitives + R6 --feat-h-* grid tokens.
   No new tokens introduced.
   ============================================================ */

.rv-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Breadcrumb + header --- */

.rv-crumbs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.rv-crumbs a { color: var(--link); text-decoration: none; }
.rv-crumbs a:hover { color: var(--link-hover); text-decoration: underline; }

.rv-header h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  text-wrap: balance;
}
.rv-header .rv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-secondary);
}
.rv-header .rv-meta .dot { color: var(--text-disabled); }
.rv-header .rv-meta .frag.grade[title] {
  border-bottom: 1px dotted var(--text-disabled);
  cursor: help;
}

/* --- River card + grid --- */
/* .river-grid is an alias of .features-grid (R6). Same 58/42 split,
   same height tokens, same ≤ 900 px stacked fallback. */

.rv-card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.river-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.river-map {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.river-list {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
}

/* Desktop two-column grid — matches R6 features grid breakpoint.
   Map UL, list UR (matching the map's height); the elevation
   profile spans the full card width below as its own row. Earlier
   PRs trialled a list-spans-both-rows variant to anchor the
   bottom-right quadrant, but on real Norwegian-river data the
   typical section count (Sjoa: 6) doesn't fill the doubled list
   height — the wider list cell read as half-empty. Profile
   gets the full bottom band instead, where its horizontal-km
   axis benefits from the extra width and the list returns to
   its original map-aligned height. */
@media (min-width: 900px) {
  .river-grid {
    grid-template-columns: 58% 42%;
    grid-template-areas:
      "map list"
      "profile profile";
  }
  .river-grid.h-full {
    grid-template-rows: var(--feat-h-full) auto;
  }
  .river-grid.h-short {
    grid-template-rows: var(--feat-h-short) auto;
  }
  .river-grid.h-tiny {
    grid-template-rows: var(--feat-h-tiny) auto;
  }
  .river-map {
    grid-area: map;
    height: 100%;
    border-bottom: none;
    border-right: 1px solid var(--border-subtle);
  }
  .river-list {
    grid-area: list;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 26, 38, 0.18) transparent;
  }
  .river-grid > .river-profile,
  .river-grid > .elevation-strip { grid-area: profile; }
  .river-list::-webkit-scrollbar        { width: 8px; }
  .river-list::-webkit-scrollbar-thumb  { background: rgba(14, 26, 38, 0.18); border-radius: 4px; }
  .river-list::-webkit-scrollbar-track  { background: transparent; }

  /* Hide-rail — DESIGN.md §"Components — Hide-rail". Session-scoped
     state toggle; JS flips `data-rail` on the grid. When hidden, the
     list collapses to 0 width (display:none avoids sub-pixel bleed)
     and the map takes the full grid width. Map border-right goes
     away so the edge lives on the card only. */
  .river-grid[data-rail="hidden"] {
    grid-template-columns: 100% 0;
    grid-template-areas:
      "map map"
      "profile profile";
  }
  .river-grid[data-rail="hidden"] .river-list { display: none; }
  .river-grid[data-rail="hidden"] .river-map {
    border-right: none;
  }
}

/* --- List head --- */

.river-list .list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-raised);
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.river-list .list-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.river-list .list-head .list-head-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Section row --- */

.river-sec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
  /* Round 11 item 6: row's left border encodes status colour at
     rest. Hover/lock keep their own brand-tinted treatment, but the
     status-tint is the row's resting visual signal so a wide-table
     scanner sees status without having to read the gauge column. */
  border-left: 3px solid transparent;
  background: var(--surface-raised);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.river-sec-row[data-status="good"]     { border-left-color: var(--status-good-fg); }
.river-sec-row[data-status="low"]      { border-left-color: var(--status-low-fg); }
.river-sec-row[data-status="toolow"]   { border-left-color: var(--status-too-low-fg); }
.river-sec-row[data-status="high"]     { border-left-color: var(--status-high-fg); }
.river-sec-row[data-status="veryhigh"] { border-left-color: var(--status-very-high-fg); }
.river-sec-row[data-status="unknown"]  { border-left-color: var(--text-disabled); }
.river-sec-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 50%, transparent);
  outline-offset: -1px;
}
.river-sec-row:hover,
.river-sec-row.is-hover {
  background: var(--surface-sunken);
  border-left-color: var(--brand-500);
}
.river-sec-row.is-locked {
  background: var(--brand-050);
  border-left-color: var(--brand-500);
}

.river-sec-row .sec-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: inherit;
}
.river-sec-row:hover .sec-name { color: var(--brand-700); }

/* Trailing-edge detail anchor — modeled on `.feat-sat` from
   section.css. The row body is now the cross-reference toggle
   target; this anchor is the "go to /section/<id>" affordance. */
.river-sec-row .sec-detail {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  align-self: center;
}
.river-sec-row .sec-detail:hover {
  background: var(--surface-sunken);
  color: var(--brand-700);
}
.river-sec-row .sec-detail:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.river-sec-row .sec-river {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.river-sec-row .sec-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.river-sec-row .sec-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.river-sec-row .sec-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.river-sec-row .sec-status .dot[data-status="good"]     { background: var(--status-good-fg); }
.river-sec-row .sec-status .dot[data-status="low"]      { background: var(--status-low-fg); }
.river-sec-row .sec-status .dot[data-status="high"]     { background: var(--status-high-fg); }
.river-sec-row .sec-status .dot[data-status="veryhigh"] { background: var(--status-very-high-fg); }
.river-sec-row .sec-status .dot[data-status="unknown"]  { background: var(--text-disabled); }
.river-sec-row .sec-status .sep   { color: var(--text-disabled); }
.river-sec-row .sec-status .flow  { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); font-weight: 500; }
.river-sec-row .sec-status .flow .u { color: var(--text-muted); font-weight: 400; }
.river-sec-row .sec-status .flow.unknown { color: var(--text-muted); font-weight: 400; }
.river-sec-row .sec-status .grade { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.river-sec-row .sec-status .len   { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.river-sec-row .sec-status .status-word { text-transform: lowercase; }

/* --- Gauge sub-row --- */

.river-gauge-subrow {
  display: grid;
  grid-template-columns: 14px 1fr auto 16px;
  gap: 8px;
  align-items: center;
  padding: 6px 16px 6px 34px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.river-gauge-subrow:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-500) 50%, transparent);
  outline-offset: -1px;
}
.river-gauge-subrow:hover,
.river-gauge-subrow.is-hover { background: var(--surface-sunken); }
.river-gauge-subrow.is-locked { background: var(--brand-050); }
.river-gauge-subrow.is-proxy { opacity: 0.88; }

.river-gauge-subrow .triangle { width: 10px; height: 10px; display: block; }
.river-gauge-subrow .triangle polygon { stroke: #fff; stroke-width: 1; }
.river-gauge-subrow .triangle[data-status="good"] polygon     { fill: var(--status-good-fg); }
.river-gauge-subrow .triangle[data-status="low"] polygon      { fill: var(--status-low-fg); }
.river-gauge-subrow .triangle[data-status="high"] polygon     { fill: var(--status-high-fg); }
.river-gauge-subrow .triangle[data-status="veryhigh"] polygon { fill: var(--status-very-high-fg); }
.river-gauge-subrow .triangle[data-status="unknown"] polygon  { fill: var(--text-disabled); }
.river-gauge-subrow .gid { color: var(--text-secondary); font-weight: 500; }
.river-gauge-subrow .gid .proxy-mark { color: var(--text-muted); }
.river-gauge-subrow .right { display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.river-gauge-subrow .reading { color: var(--text-primary); font-weight: 500; }
.river-gauge-subrow .reading.unknown { color: var(--text-muted); font-weight: 400; }
.river-gauge-subrow .fresh { color: var(--text-muted); font-size: 10.5px; }
.river-gauge-subrow .fresh.is-stale { color: var(--status-low-fg); }
.river-gauge-subrow .sep { color: var(--text-disabled); }
.river-gauge-subrow .out-arrow { color: var(--text-muted); }
.river-gauge-subrow:hover .out-arrow { color: var(--brand-700); }

/* --- Gauge pin (triangle) ---
   Shared `.gauge-pin` rules + halo ring + pulse keyframes live in
   components.css so /section also picks them up. The .rv-wrap
   show/hide toggle below stays river-scoped. */

/* --- Teardrop feature pin (shared vocabulary with R6) --- */

.rv-map-pin {
  background: none;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(14, 26, 38, 0.24));
  overflow: visible;
  position: relative;
}
.rv-map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid var(--pin-color, var(--brand-500));
  background: color-mix(in srgb, var(--pin-color, var(--brand-500)) 15%, transparent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  z-index: -1;
}
.rv-map-pin.is-hover::before,
.rv-map-pin.is-locked::before {
  opacity: 1;
  transform: scale(1);
}
.rv-map-pin.is-locked::before {
  animation: rv-pin-pulse 1.6s ease-in-out infinite;
}

/* `.river-path` (status-colored polyline strokes) lives in
   components.css — both /river/<id> and /section/<id> render the
   class. Hoisted in R9 slice 3c (docs/round9-slice-3c-scoping.md
   §10) when the section page started emitting it; the rules
   themselves are unchanged from this file's earlier home. */

/* --- Map chip (mobile Gauges toggle) --- */

.rv-gauges-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  box-shadow: var(--elev-1);
}
.rv-gauges-chip:hover { background: #fff; color: var(--text-primary); }
.rv-gauges-chip[aria-pressed="true"] {
  background: var(--brand-050);
  color: var(--brand-700);
  border-color: var(--brand-500);
}
.rv-gauges-chip svg { width: 10px; height: 10px; display: block; fill: currentColor; }

/* --- Elevation profile placeholder --- */

.river-profile {
  width: 100%;
  height: 96px;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--text-muted);
}
.river-profile-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Empty state --- */

.rv-empty {
  padding: 40px 24px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--text-muted);
}

/* --- Mobile --- */

@media (max-width: 899px) {
  .rv-wrap { padding: 14px 14px calc(var(--tabbar-height, 0px) + 24px); }
  .rv-header h1 { font-size: 26px; }
  /* Elevation profile hides entirely on mobile in v1 — the real
     component's mobile story is deferred, and 320 px-wide profile
     strips read poorly. The slot's DOM position (between map and
     list inside .river-grid) is committed in R8 so R9/R10's
     display:block flip drops the stack into the right order
     without reshuffling. See DESIGN_NOTES §"Elevation profile
     (future) → Mobile stack order (committed in Round 8)". */
  .river-profile { display: none; }
  /* Gauges-off-by-default on mobile — DESIGN_NOTES §"Mobile
     gauges-off-by-default". The chip toggles on per-session. */
  .rv-wrap .gauge-pin { display: none; }
  .rv-wrap.show-gauges .gauge-pin { display: block; }
  /* The map's ``border-bottom`` provides the divider between map
     and strip in the single-column stack. Strip → list has no
     such divider by default. Mirror the map → strip treatment:
     map renders ``border-bottom`` AND the strip renders
     ``border-top`` (existing rule) — two stacked 1 px borders
     read as a slightly heavier divider than a single 1 px line.
     Match by giving the strip a ``border-bottom`` AND the list a
     ``border-top`` so the visual weight on either side of the
     strip is identical. Desktop doesn't need this — the strip
     sits in row 2 with the rv-card's outer border directly below
     and adding a border there would double the edge. */
  .river-grid .elevation-strip {
    border-bottom: 1px solid var(--border-subtle);
    /* On a phone the caption row's title + attribution don't fit
       on one line without ellipsing the dynamic km/m suffix. Drop
       the row's fixed height so the head can stack vertically:
       title on the first line, attribution on the second. The
       custom property bump keeps the absolutely-positioned
       band-labels lane aligned with the now-taller head (the lane
       reads ``--elev-head-h`` to compute its top offset). */
    --elev-head-h: 30px;
  }
  .river-grid .elevation-strip .elevation-strip-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .river-grid .river-list {
    border-top: 1px solid var(--border-subtle);
  }
}

/* Desktop: the gauges chip is never rendered (JS skips it). Defensive
   rule in case the markup slips in. */
@media (min-width: 900px) {
  .rv-gauges-chip { display: none; }
}

/* --- Dark mode --- */

.theme-dark .rv-card,
.theme-dark .river-sec-row,
.theme-dark .river-gauge-subrow,
.theme-dark .rv-empty {
  background: var(--surface-raised);
}
.theme-dark .rv-gauges-chip { background: rgba(14, 26, 38, 0.88); color: var(--text-secondary); }

@media (prefers-color-scheme: dark) {
  .rv-card, .river-sec-row, .river-gauge-subrow, .rv-empty { background: var(--surface-raised); }
  .rv-gauges-chip { background: rgba(14, 26, 38, 0.88); color: var(--text-secondary); }
}