/* ==========================================================================
   River Picker — the Profile Line (Geography)
   One of two pages on profile-line-engine.js (the other is mountain-picker,
   which uses the same engine with revealStyle 'summit'). The stage is one long
   waterway drawn to TRUE relative scale: every river's reach in the scene IS
   its length, ruled off in 1,000 km ticks. A boat drifts downstream, slows and
   moors at one river — whose channel then floods from source to sea and fans
   out into a delta.
   ⚠️ The boat's path is an OPEN line across a scattered field — not a pointer
   on a loop — which is what keeps this from being a wheel in disguise.
   Page chrome is theme-aware (var(--theme-*)); the water, banks and sky stay
   fixed — they are a physical landscape, not themed surfaces.
   ⚖️ Original artwork only: plain stylised river silhouettes. No photos, no maps.
   ========================================================================== */
.page-river-picker {
    --riv-primary: #0f766e;
    --riv-accent: #67c9d8;
    --riv-grad: linear-gradient(135deg, #67c9d8, #0f766e);
    --riv-ink: var(--theme-text, #1f2430);
    /* ⚠️ --theme-muted, NOT --theme-text-muted (undefined). */
    --riv-muted: var(--theme-muted, #6b7280);
    --riv-surface: var(--theme-surface, #ffffff);
    --riv-border: var(--theme-border, #e5e7eb);
    --riv-display: 'Georgia', 'Times New Roman', serif;
    --riv-mono: 'DejaVu Sans Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    --riv-plate: #f2ede1;
}

/* ---- Ambient backdrop --------------------------------------------------- */
.page-river-picker::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1040px 560px at 8% -6%, rgba(15, 118, 110, 0.16), transparent 60%),
        radial-gradient(920px 520px at 94% 2%, rgba(103, 201, 216, 0.15), transparent 62%),
        radial-gradient(880px 620px at 50% 108%, rgba(16, 34, 44, 0.12), transparent 60%);
}

/* ---- Stage -------------------------------------------------------------- */
.page-river-picker .riv-stage { position: relative; max-width: 600px; margin: 0 auto; }
.page-river-picker .riv-stage-wrap { position: relative; }
.page-river-picker #rivStage { display: block; }
.page-river-picker .riv-svg {
    width: 100%; height: auto; display: block; max-height: 72vh; border-radius: 16px;
    filter: drop-shadow(0 14px 34px rgba(10, 20, 26, .5));
}
.page-river-picker .riv-fx,
.page-river-picker .riv-plate,
.page-river-picker .riv-ribbon { pointer-events: none; }
/* the other rivers dim when the boat moors — a transition, so it reads as a fade */
.page-river-picker .riv-cell { transition: opacity .45s ease; }
.page-river-picker .riv-decor { transition: opacity .45s ease; }
.page-river-picker .riv-delta { transition: opacity .35s ease; }

/* ---- Scene text --------------------------------------------------------- */
.page-river-picker .riv-lbl-t {
    fill: #f4efe4; font-family: var(--riv-display); font-weight: 700; font-size: 14px; text-anchor: middle;
}
.page-river-picker .riv-lbl-v {
    font-family: var(--riv-mono); font-weight: 700; font-size: 12px; text-anchor: middle; letter-spacing: .04em;
}
.page-river-picker .riv-axis-t {
    fill: #dff0f2; font-family: var(--riv-mono); font-size: 10px; letter-spacing: .04em;
}
.page-river-picker .riv-ribbon-t {
    text-anchor: middle; fill: #10222c; font-family: var(--riv-mono); font-weight: 800; font-size: 15px; letter-spacing: .03em;
}
.page-river-picker .riv-fx-spark { mix-blend-mode: screen; }

/* ---- River name plate ---------------------------------------------------- */
.page-river-picker .riv-plate-bg { fill: #f2ede1; stroke: #14343a; stroke-width: 2; }
.page-river-picker .riv-plate-t {
    text-anchor: middle; fill: #14232e; font-weight: 700;
    font-family: var(--riv-display); letter-spacing: .02em;
}

/* ---- Start overlay ------------------------------------------------------ */
.page-river-picker .riv-start-overlay {
    /* ⚠️ 74% sat on the boat and the near bank, hiding the idle motion
       (owner 2026-07-24). The base strip below the ground line is always empty
       at idle — the name plate only appears on reveal, and this button is
       hidden by then. */
    position: absolute; left: 50%; top: 91%; z-index: 3;
    display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px;
    padding: .8rem 1.9rem; font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #06282a; background: var(--riv-grad); cursor: pointer; box-shadow: 0 12px 30px -8px rgba(6, 30, 34, .95);
    animation: rivStartPulse 1.8s ease-in-out infinite;
}
.page-river-picker .riv-start-overlay:hover { filter: brightness(1.08); }
.page-river-picker .riv-start-overlay[hidden] { display: none; }
@keyframes rivStartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

.page-river-picker .riv-count { text-align: center; font-size: .9rem; color: var(--riv-muted); margin: .7rem 0 .25rem; }
.page-river-picker .riv-count.is-warn { color: var(--riv-primary); font-weight: 700; }
.page-river-picker .riv-effects { display: flex; gap: 1.2rem; justify-content: center; margin-top: .5rem; flex-wrap: wrap; }
.page-river-picker .riv-effects label { font-size: .85rem; color: var(--riv-muted); display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Result bar --------------------------------------------------------- */
.page-river-picker .wsp-result {
    --wsp-result-accent: var(--riv-primary);
    --wsp-result-grad: var(--riv-grad);
    --wsp-result-btn-ink: #06282a;
    --wsp-result-plate: var(--riv-plate);
    --wsp-result-display: var(--riv-display);
    --wsp-result-tint: linear-gradient(135deg, rgba(103, 201, 216, .16), rgba(15, 118, 110, .10));
}

/* ---- Speed slider ------------------------------------------------------- */
.page-river-picker .riv-speed { margin: .9rem auto .2rem; max-width: 420px; }
.page-river-picker .riv-speed > label {
    display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600;
    color: var(--riv-muted); margin-bottom: .4rem;
}
.page-river-picker .riv-speed-val { margin-left: auto; font-weight: 800; color: var(--riv-primary); font-variant-numeric: tabular-nums; }
.page-river-picker .riv-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: rgba(120, 120, 120, .25); outline: none; cursor: pointer;
}
.page-river-picker .riv-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--riv-grad); border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(6, 30, 34, .8);
}
.page-river-picker .riv-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #0f766e; border: 2px solid #fff;
}
.page-river-picker .riv-range-ends {
    display: flex; justify-content: space-between; font-size: .72rem; color: var(--riv-muted);
    opacity: .75; margin-top: .25rem;
}

/* ---- Winner reveal ------------------------------------------------------ */
.page-river-picker .riv-modal-img,
.riv-modal-img {
    width: 168px; height: 168px; display: inline-block; object-fit: contain;
    background: #f2ede1; border-radius: 12px; padding: 14px;
    box-shadow: inset 0 0 0 3px rgba(15, 118, 110, .5);
}
.riv-modal-ink {
    width: 168px; height: 168px; display: inline-block;
    background: #f2ede1; border-radius: 12px; padding: 30px;
    box-shadow: inset 0 0 0 3px rgba(15, 118, 110, .5);
}
.riv-modal-ink svg { width: 100%; height: 100%; display: block; }
.page-river-picker #winnerName {
    font-family: var(--riv-display); font-weight: 700; letter-spacing: .01em; font-size: 2rem;
}
.page-river-picker h1 { letter-spacing: .01em; }

/* ---- River chooser grid (settings) -------------------------------------- */
.page-river-picker .riv-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.page-river-picker .riv-chip {
    --chip-c: #0f766e; position: relative;
    border: 2px solid var(--riv-border); background: var(--riv-surface); border-radius: 10px; padding: .5rem .3rem .4rem;
    cursor: pointer; text-align: center; transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; opacity: .55;
}
.page-river-picker .riv-chip img,
.page-river-picker .riv-chip-ink {
    width: 52px; height: 52px; display: block; margin: 0 auto .25rem; object-fit: contain;
    background: var(--riv-plate); border-radius: 8px; padding: 5px;
    box-shadow: inset 0 0 0 1.5px rgba(15, 118, 110, .35);
}
.page-river-picker .riv-chip-ink svg { width: 100%; height: 100%; display: block; }
.page-river-picker .riv-chip-t { font-size: .66rem; font-weight: 700; color: var(--riv-ink); display: block; line-height: 1.15; }
.page-river-picker .riv-chip-v {
    display: block; font-family: var(--riv-mono); font-size: .6rem; font-weight: 700;
    color: var(--chip-c); margin-top: .12rem; letter-spacing: .02em;
}
.page-river-picker .riv-chip:hover { transform: translateY(-2px); border-color: var(--chip-c); }
.page-river-picker .riv-chip.is-on { opacity: 1; border-color: var(--chip-c); box-shadow: 0 6px 16px -10px var(--chip-c); }
.page-river-picker .riv-chip.is-custom { opacity: 1; border-style: dashed; border-color: var(--chip-c); }
.page-river-picker .riv-chip-x {
    position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--riv-primary); color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .4);
}
.page-river-picker .riv-custom-row { display: flex; gap: .4rem; margin-top: .6rem; }
.page-river-picker .riv-custom-row input {
    flex: 1 1 auto; border: 1px solid var(--riv-border); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem;
    background: var(--riv-surface); color: var(--riv-ink);
}
.page-river-picker .riv-custom-row button { border: 0; border-radius: 10px; padding: .5rem .9rem; font-weight: 700; color: #06282a; background: var(--riv-grad); cursor: pointer; }

/* ---- SEO content section ------------------------------------------------
   Colour + accents ONLY. Type scale comes from .content-guide on the wrapper. */
.page-river-picker .riv-content {
    color: var(--riv-ink);
    background: linear-gradient(180deg, #ffffff 0%, #ecf5f4 100%);
    padding: 3.5rem 0 3.75rem; margin-top: 1rem;
    border-top: 1px solid var(--riv-border);
}
body[data-theme].page-river-picker .riv-content { background: var(--theme-bg); }
.page-river-picker .riv-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.page-river-picker .riv-content h2,
.page-river-picker .riv-content h3 { color: var(--riv-ink); }
.page-river-picker .riv-content p,
.page-river-picker .riv-content li { color: var(--riv-muted); }
.page-river-picker .riv-content strong { color: var(--riv-ink); }
.page-river-picker .riv-content em { color: var(--riv-ink); font-style: italic; }
.page-river-picker .riv-content a { color: var(--riv-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.page-river-picker .riv-content a:hover { color: #0a544e; }

.page-river-picker .riv-kicker {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #06282a; background: var(--riv-grad); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .85rem;
}
.page-river-picker .riv-lead { font-size: 1.2rem; line-height: 1.7; color: var(--riv-ink); }
.page-river-picker .riv-section { margin-top: 3rem; }
.page-river-picker .riv-list { margin: .4rem 0 0; padding-left: 1.15rem; }

/* ---- Signature section shape: LENGTH GAUGES — each river gets a bar drawn
   to the same true relative scale the tool uses, so the page and the picker
   tell the same story. Deliberately unlike the mountain page's ascent
   staircase, the tourist page's tickets, and the HP shapes. ---------------- */
.page-river-picker .riv-gauges { margin-top: 1.5rem; display: grid; gap: .7rem; }
.page-river-picker .riv-gauge {
    background: var(--riv-surface); border: 1px solid var(--riv-border); border-radius: 12px;
    padding: .75rem .95rem;
}
.page-river-picker .riv-gauge-head { display: flex; align-items: baseline; gap: .6rem; }
.page-river-picker .riv-gauge-name { font-weight: 700; color: var(--riv-ink); font-size: 1rem; }
.page-river-picker .riv-gauge-km {
    margin-left: auto; font-family: var(--riv-mono); font-weight: 800; font-size: .85rem; color: var(--riv-primary);
    white-space: nowrap;
}
.page-river-picker .riv-gauge-track {
    height: 10px; border-radius: 999px; background: rgba(15, 118, 110, .12); margin-top: .5rem; overflow: hidden;
}
.page-river-picker .riv-gauge-fill { height: 100%; border-radius: 999px; background: var(--riv-grad); }
.page-river-picker .riv-gauge-note { margin: .45rem 0 0; font-size: .88rem; }

/* signature asset — the 20-row rivers table */
.page-river-picker .riv-table-wrap { overflow-x: auto; margin-top: 1.4rem; }
.page-river-picker .riv-ctab { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.page-river-picker .riv-ctab thead th {
    text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 800;
    color: #06282a; background: var(--riv-accent); padding: .7rem 1rem;
}
.page-river-picker .riv-ctab tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--riv-border); vertical-align: top; }
.page-river-picker .riv-ctab tbody tr:nth-child(even) { background: rgba(15, 118, 110, .05); }
.page-river-picker .riv-ctab tbody td:first-child { font-weight: 700; color: var(--riv-ink); white-space: nowrap; }
.page-river-picker .riv-ctab tbody td:nth-child(2) { font-family: var(--riv-mono); white-space: nowrap; color: var(--riv-ink); }

.page-river-picker .riv-callout {
    margin-top: 1.4rem; border-left: 4px solid var(--riv-primary); border-radius: 0 12px 12px 0;
    background: rgba(15, 118, 110, .08); padding: 1rem 1.15rem;
}
.page-river-picker .riv-callout p { margin: 0; }

.page-river-picker .riv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.page-river-picker .riv-pair-card {
    background: var(--riv-surface); border: 1px solid var(--riv-border); border-radius: 12px;
    padding: 1rem 1.1rem; border-top: 3px solid var(--riv-accent);
}
.page-river-picker .riv-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; }
.page-river-picker .riv-pair-card p:last-child { margin-bottom: 0; font-size: .9rem; }

@media (max-width: 767.98px) {
    .page-river-picker .riv-pair { grid-template-columns: 1fr; }
    .page-river-picker .riv-content { padding: 2.5rem 0 2.75rem; }
}