/* Rivers & Geography: the scroll-drawn M-65 map.
   The map is water (navy); the river cards sit on the wall. The route draws in the order a southbound
   boat travels (Paducah to Mobile), with the Knoxville and Birmingham branches drawing outward. */

.rivers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }

.rivers-map {
  position: sticky; top: 0; z-index: 2;
  margin: 0 calc(var(--gutter) * -1);
  height: 48svh;
  display: flex; flex-direction: column;
  background: var(--navy);
  border-bottom: .1875rem solid var(--sea);
}
.rivers-svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; display: block; }
.rivers-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  padding: .5rem var(--gutter) .65rem;
  font-size: .875rem; color: var(--on-dark);
}
.rivers-key span { display: inline-block; margin-right: .1rem; }
.k-lock { width: .2rem; height: .9rem; background: var(--sea); }

.rivers-steps { display: grid; gap: 0; padding-top: 1.5rem; }
.river-step {
  min-height: 70svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 1.5rem;
}
.river-step > * { max-width: 34rem; }
.river-step h3 { font-size: min(clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem), 9vw); color: var(--navy); }
.river-num { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; font: 500 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.1 var(--font-body); color: var(--muted); }
.river-num span {
  font: 700 clamp(2.75rem, 2rem + 2.8vw, 4.25rem)/1 var(--font-body);
  letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums lining-nums;
}
.river-span { margin-top: .35rem; font-weight: 700; color: var(--hunter); }
.river-step > p:not(.river-num):not(.river-span) { margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; }
.river-facts { margin: 1.25rem 0 0; display: grid; gap: .6rem; }
.river-facts div { border-top: 1px solid var(--rule); padding-top: .6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.river-facts dt { font-weight: 700; color: var(--navy); }
.river-facts dd { margin: 0; }
/* Steps not yet reached dim their river name only; body text stays full strength for contrast (2026-10-05) */
.is-live-steps .river-step h3 { opacity: .6; transition: opacity .4s var(--ease-out); }
.is-live-steps .river-step.is-active h3, .is-live-steps .river-step.is-done h3 { opacity: 1; }

@media (min-width: 56em) and (min-height: 36em) {
  .rivers-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .rivers-map { top: calc(var(--header-h, 0px) + 1rem); margin: 0; height: calc(100svh - 2rem - var(--header-h, 0px)); border-radius: .25rem; border-bottom: 0; border-top: .1875rem solid var(--sea); }
  .rivers-steps { padding-top: 0; padding-bottom: 20svh; }
  .river-step { min-height: 85svh; }
}
/* Short screens (phones on their side): no pinned map, show everything drawn. */
@media (max-height: 35.99em) {
  .rivers-map { position: relative; height: auto; }
  .rivers-svg { height: auto; aspect-ratio: 504 / 725; max-height: 80svh; }
  .river-step { min-height: 0; opacity: 1; }
  .is-live-steps .river-step h3 { opacity: 1; }
}

/* ---- the map itself ---- */
.rivers-svg .state-bg { fill: #1a2b39; stroke: rgba(131, 177, 177, .12); stroke-width: .6; }
.rivers-svg .state { fill: #233a4c; stroke: rgba(131, 177, 177, .35); stroke-width: .8; }
.rivers-svg .state-name { font: 700 9px var(--font-body); letter-spacing: .18em; fill: rgba(245, 246, 244, .28); }
.rivers-svg .ghost { fill: none; stroke: rgba(245, 246, 244, .14); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.rivers-svg .river {
  fill: none; stroke: var(--off); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
  transition: stroke .5s var(--ease-out), stroke-width .5s var(--ease-out);
}
.rivers-svg .river.is-active { stroke: var(--sea); stroke-width: 4; filter: drop-shadow(0 0 4px rgba(131, 177, 177, .55)); }
.rivers-svg .connector { stroke-dasharray: 1 1; stroke-width: 1.8; }
.rivers-svg .lock { stroke: var(--sea); stroke-width: 2.4; stroke-linecap: round; transition: opacity .3s; }
.rivers-svg .lock.on-active { stroke: var(--off); }
.rivers-svg .place { transition: opacity .4s; }
/* Once the script is running, pieces start hidden and appear as the water reaches them. */
.is-live .rivers-svg .lock:not(.is-on), .is-live .rivers-svg .place:not(.is-on), .is-live .rivers-svg .conn-label:not(.is-on) { opacity: 0; }
.rivers-svg .place circle { fill: var(--navy); stroke: var(--sea); stroke-width: 1.8; }
.rivers-svg .place text, .rivers-svg .conn-label text {
  font: 600 12px var(--font-body); fill: var(--off);
  paint-order: stroke; stroke: var(--navy); stroke-width: 3px; stroke-linejoin: round;
}
.rivers-svg .conn-label { transition: opacity .4s; }
.rivers-svg .conn-label text { fill: var(--sea); }

@media (prefers-reduced-motion: reduce) {
  .rivers-svg .river, .rivers-svg .lock, .rivers-svg .place, .river-step { transition: none; }
}

/* Section head stacked: the sentence runs across both columns under the heading. */
.section-head.stacked { display: block; }
.section-head.stacked p { max-width: 62rem; margin-top: 1rem; justify-self: start; }
.river-facts dd + dd { margin-top: .25rem; }
.river-source { margin-top: .5rem; font-size: .875rem; color: var(--muted); }

/* ---- Lock profile: side view of the water, lock by lock (heights to scale) ---- */
.lock-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.lock-panel { margin: 0; min-width: 0; }
.lock-panel figcaption { max-width: 44rem; margin-bottom: 1rem; }
.lock-title { font-size: min(clamp(1.375rem, 1.2rem + .6vw, 1.75rem), 8vw); color: var(--navy); }
.lock-panel figcaption p { margin-top: .5rem; }
.lock-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .25rem; }
.lock-scroll:focus-visible { outline: .125rem solid var(--navy); outline-offset: .25rem; }
/* The drawing is sized in rem so its labels grow with the reader's text size; narrow screens scroll it sideways. */
.lock-svg { display: block; width: 100%; min-width: calc(var(--w) * .06rem); height: auto; }
.lock-branches { display: flex; flex-wrap: wrap; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.lock-branches > :first-child { flex: 760 1 28rem; }
.lock-branches > :last-child { flex: 508 1 19rem; }
.lock-note { font-size: .9375rem; color: var(--muted); max-width: 48rem; }

.lock-svg .water { fill: var(--navy); }
.lock-svg .surface { stroke: var(--sea); stroke-width: 3; }
.lock-svg .lock-wall { fill: #A9B2AC; }
.lock-svg .lock-wall.ttw { fill: var(--teal-dark); }
.lock-svg .lock-name { font: 600 12.5px var(--font-body); fill: var(--muted); }
.lock-svg .lock-name.ttw { fill: var(--navy); font-weight: 700; }
.lock-svg .lock-lift { font: 500 12px var(--font-mono); fill: var(--charcoal); }
.lock-svg .gauge { stroke: var(--muted); stroke-width: 1; }
.lock-svg .gauge-num { font: 400 11px var(--font-mono); fill: var(--muted); }
.lock-svg .pool-name { font: 600 12px var(--font-body); fill: var(--charcoal); }
.lock-svg .bracket { fill: none; stroke: var(--teal-dark); stroke-width: 1.5; }
.lock-svg .bracket-label { font: 700 13px var(--font-body); fill: var(--hunter); }

.lock-table { margin-top: .5rem; }
.lock-table summary { cursor: pointer; font-weight: 700; color: var(--hunter); width: fit-content; }
.lock-table table { margin-top: 1rem; width: 100%; max-width: 44rem; border-collapse: collapse; font-size: .9375rem; }
.lock-table caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: .5rem; }
.lock-table th, .lock-table td { text-align: left; padding: .45rem .75rem .45rem 0; border-bottom: 1px solid var(--rule); }
.lock-table thead th { color: var(--navy); }
.lock-table tbody th { font-weight: 600; }
.lock-table td:nth-child(3), .lock-table td:nth-child(4) { font-variant-numeric: tabular-nums; }
.lock-hint { display: none; margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--hunter); }
@media (max-width: 55.99em) { .lock-hint { display: block; } }