/**
 * On Water mode: header mode control and the On Water view.
 * The On Water chrome follows the site theme: light for daytime glare on deck,
 * dark for night runs. Map tiles are the same in both.
 */

/* ==================== Header mode control (segmented pill) ==================== */
.mode-control {
    display: flex;
    margin-left: auto;
    padding: 3px;
    gap: 2px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 999px;
}

.mode-control label {
    position: relative;
    display: flex;
    cursor: pointer;
    user-select: none;
}

.mode-control input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.mode-control span {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-secondary);
    transition: background 0.2s, color 0.2s;
}

.mode-control input[type="radio"]:checked + span {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.mode-control input[type="radio"]:focus-visible + span {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    /* Leave room for the theme toggle, which sits top-right on phones */
    .mode-control {
        order: -1;
        width: calc(100% - 56px);
        margin-left: 0;
        box-sizing: border-box;
    }

    .mode-control label {
        flex: 1 1 auto;
    }

    .mode-control span {
        flex: 1;
        justify-content: center;
        min-height: 40px;
        padding: 0 4px;
        font-size: 0.8rem;
    }

    /* On the water the map needs the screen: keep only the mode control in the header */
    body:has(#onWaterView.active) header .header-logo,
    body:has(#onWaterView.active) header .header-text {
        display: none;
    }

    body:has(#onWaterView.active) header {
        padding: 16px;
        margin-bottom: 8px;
    }

    body:has(#onWaterView.active) .theme-toggle {
        top: 12px;
    }

    body:has(#onWaterView.active) #shareButton {
        display: none;
    }
}

/* Account button in the On Water header row (rules apply only while it shows): the mode control gives up room for it */
@media (min-width: 601px) and (max-width: 768px) {
    body:has(#onWaterView.active) header:has(#acctBtn:not([hidden])) .mode-control {
        width: calc(100% - 156px);
    }

    body:has(#onWaterView.active) header:has(#acctBtn:not([hidden])) .acct-btn {
        top: 25px;
        right: 82px;
    }
}

/* Phones: no room in the row, so the toggle shrinks and the account button stacks under it */
@media (max-width: 600px) {
    body:has(#onWaterView.active) header:has(#acctBtn:not([hidden])) .theme-toggle {
        top: 6px;
        right: 22px;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    body:has(#onWaterView.active) header:has(#acctBtn:not([hidden])) .theme-toggle svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    body:has(#onWaterView.active) header:has(#acctBtn:not([hidden])) .acct-btn {
        top: 46px;
        right: 24px;
    }
}

/* Share has no On Water state. Keep its slot so the mode control and theme toggle stay put. */
body:has(#onWaterView.active) #shareButton {
    visibility: hidden;
}

/* The floating Help button would cover the pill and sheet */
body:has(#onWaterView.active) #helpBtn {
    display: none;
}

/* ==================== On Water view ==================== */
#onWaterView {
    --ow-bg: #eef2f6;
    --ow-fg: #0f172a;
    --ow-map-bg: #c9dcea;
    --ow-panel: rgba(255, 255, 255, .94);
    --ow-sheet: #ffffff;
    --ow-grip: #cbd5e0;
    --ow-track: #d9e1ea;
    --ow-trackline: #e0119d;
    --ow-accent: #1a6fd6;
    --ow-on-accent: #ffffff;
    --ow-on-map: #0f172a;
    --ow-legend-bg: rgba(255, 255, 255, .88);
    --ow-muted: #94a3b8;
    --ow-flood: #1a6fd6;
    --ow-contour: #5b7a99;
    --ow-contour-major: #2c4a6b;
    --ow-ebb: #7c3aed;
    --ow-sun: #c98a00;
    --ow-shadow: rgba(0, 0, 0, .18);
}

[data-theme="dark"] #onWaterView {
    --ow-bg: #0e1620;
    --ow-fg: #e8eef5;
    --ow-map-bg: #0b2a3f;
    --ow-panel: rgba(18, 28, 40, .94);
    --ow-sheet: #16222f;
    --ow-grip: #44556a;
    --ow-track: #2a3a4c;
    --ow-trackline: #ff4fc3;
    --ow-accent: #4da3ff;
    --ow-on-accent: #ffffff;
    --ow-on-map: #ffffff;
    --ow-legend-bg: rgba(0, 0, 0, .6);
    --ow-muted: #5b6b7b;
    --ow-flood: #4da3ff;
    --ow-contour: #3a5d80;           /* the base tiles stay light at night, so lines go darker, not lighter */
    --ow-contour-major: #16334f;
    --ow-ebb: #c084fc;
    --ow-sun: #ffd86b;
    --ow-shadow: rgba(0, 0, 0, .4);
}

#onWaterView.active {
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100dvh - var(--ow-header-h, 120px));
    min-height: 420px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ow-bg);
    color: var(--ow-fg);
    font-family: system-ui, sans-serif;
    font-size: 13px;
}

#onWaterView path.ow-contour {
    pointer-events: none;
}

#onWaterView .ow-contour-lbl {
    pointer-events: none;
}

#onWaterView .ow-contour-lbl span {
    position: absolute;
    transform: translate(-50%, -50%);
    font: 600 10px/1 system-ui, sans-serif;
    color: var(--ow-fg);
    background: var(--ow-panel);
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

#onWaterMap {
    flex: 1;
    min-height: 320px;
    background: var(--ow-map-bg);
}

#onWaterView .ow-slider,
#onWaterView .ow-legend,
#onWaterView .ow-banner,
#onWaterView .ow-pill,
#onWaterView .ow-recenter,
#onWaterView .ow-trackbtn,
#onWaterView .ow-trackmenu,
#onWaterView .ow-fishwrap,
#onWaterView .ow-fishnote,
#onWaterView .ow-toast,
#onWaterView .ow-sheet {
    position: absolute;
    z-index: 1100;
    box-sizing: border-box;
}

/* styles.css sets p, li, span, div, a, label to 16px on phones; inherit the view's sizes instead */
#onWaterView div,
#onWaterView span {
    font-size: inherit;
}

#onWaterView .leaflet-control-attribution {
    font-size: 10px;
}

#onWaterView .ow-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ow-muted);
}

/* Slider over the current-speed curve */
#onWaterView .ow-slider {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 20px 10px 6px;      /* top: room for the 24 px grip above the label row's Day/Now buttons */
    border-radius: 10px;
    background: var(--ow-panel);
}

/* Grip at the top of the card: tap to fold the card down to the timeline (phones) */
#onWaterView .ow-card-grip {
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    transform: translateX(-50%);
    cursor: pointer;
}

#onWaterView .ow-card-grip::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 7px;
    height: 4px;
    border-radius: 2px;
    background: var(--ow-grip);
}

#onWaterView .ow-slider.collapsed > :is(.ow-sl-lbl, #owHist, .ow-curve-box, #owStation) {
    display: none;
}

#onWaterView .ow-sl-lbl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

#owLookingAt {
    min-height: 32px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ow-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Tomorrow mode: the same label, but not a button; a size down so the longer copy fits one line at 360 px */
#owLookingAt[disabled] {
    cursor: default;
    font-size: 11px;
}

#owDay {
    min-height: 32px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ow-fg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#owLookingAt:focus-visible,
#owDay:focus-visible,
#owCollapse:focus-visible,
#onWaterView .ow-grip:focus-visible,
#owSlider:focus-visible,
#onWaterView .ow-recenter:focus-visible,
#onWaterView .ow-trackbtn:focus-visible,
#onWaterView .ow-fishbtn:focus-visible,
#onWaterView .ow-chips button:focus-visible,
#onWaterView .ow-catch-actions button:focus-visible {
    outline: 3px solid var(--ow-accent);
    outline-offset: 2px;
}

/* Fish-area count per step over the slider span, night shaded, dawn and dusk marked */
#owHist {
    display: block;
    width: calc(100% - 20px);
    height: 40px;
    margin: 0 10px;
}

/* Current-speed curve: flood above the baseline, ebb below, dot at the slider time.
   The SVG stretches its viewBox to the panel width, so the dot is an HTML element over it
   (a circle inside the SVG would stretch into an ellipse). */
.ow-curve-box {
    position: relative;
    margin: 0 10px;
}

#owCurve {
    display: block;
    width: 100%;
    height: 40px;
}

.ow-curve-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--ow-on-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Readout on the left; Day and Now cluster on the right */
#owCurveLbl {
    margin-right: auto;
    font-weight: 600;
}

/* NOAA station behind the curve, a muted caption under the readout side */
#owStation {
    margin: 0 10px;
    text-align: right;
    font-size: 10px;
    line-height: 12px;
    color: var(--ow-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#onWaterView .ow-track {
    position: relative;
    height: 44px;
}

#onWaterView .ow-marks {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

#onWaterView .ow-marks::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 4px;
    border-radius: 2px;
    background: var(--ow-track);
}

#onWaterView .ow-mark {
    position: absolute;
    top: 14px;
    width: 6px;
    height: 16px;
    margin-left: -3px;
    border-radius: 3px;
}

#onWaterView .ow-now {
    position: absolute;
    top: 10px;
    width: 2px;
    height: 24px;
    margin-left: -1px;
    background: var(--ow-fg);
    opacity: .6;
}

/* Scoped to the marks box: the detail sheet has no .ow-slack of its own */
#onWaterView .ow-marks .ow-slack {
    position: absolute;
    top: 15px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--ow-fg);
    transform: rotate(45deg);
    border: 1px solid var(--ow-panel);
}

#owSlider {
    position: relative;
    min-height: 0;
    padding: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

#owSlider::-webkit-slider-runnable-track { height: 44px; background: transparent; }
#owSlider::-moz-range-track { height: 44px; background: transparent; }

#owSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: 12px;
    border-radius: 50%;
    background: var(--ow-accent);
    border: 2px solid var(--ow-on-accent);
    box-sizing: border-box;
}

#owSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ow-accent);
    border: 2px solid var(--ow-on-accent);
    box-sizing: border-box;
}

#owSlider:disabled { opacity: .4; cursor: default; }

#onWaterView .ow-tl-lbl {
    position: relative;
    height: 14px;
    margin: -6px 10px 0;
    font-size: 10px;
    opacity: .7;
}

#onWaterView .ow-tl-lbl span {
    position: absolute;
    transform: translateX(-50%);
}

/* Legend, banner, pill, recenter */
#onWaterView .ow-legend {
    top: 190px;
    right: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--ow-legend-bg);
    font-size: 11px;
    line-height: 1.7;
}

#onWaterView .ow-legend div {
    display: flex;
    align-items: center;
    gap: 6px;
}

#onWaterView .ow-legend .ow-ramp {
    width: 96px;
    height: 8px;
    border-radius: 4px;
}

#onWaterView .ow-legend .ow-ramp-lbl {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 2px;
}

#onWaterView .ow-banner {
    top: 190px;
    left: 8px;
    max-width: calc(100% - 140px);
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(240, 140, 60, .95);
    color: #1b1206;
    font-size: 12px;
    font-weight: 600;
}

#onWaterView .ow-banner[hidden] { display: none; }

#onWaterView .ow-pill {
    left: 8px;
    right: 64px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--ow-panel);
    font-size: 12px;
    line-height: 1.3;
}

#onWaterView .ow-recenter {
    right: 8px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--ow-panel);
    color: var(--ow-accent);
    padding: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

#onWaterView .ow-recenter.following { color: var(--ow-on-accent); background: var(--ow-accent); }

/* Track button sits above recenter; its menu opens to the left */
#onWaterView .ow-trackbtn {
    right: 8px;
    bottom: 66px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--ow-panel);
    color: var(--ow-trackline);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#onWaterView .ow-trackmenu {
    right: 64px;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    border-radius: 12px;
    background: var(--ow-sheet);
    box-shadow: 0 4px 16px var(--ow-shadow);
}

#onWaterView .ow-trackmenu[hidden] { display: none; }

#onWaterView .ow-trackmenu label,
#onWaterView .ow-trackmenu button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ow-fg);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

#onWaterView .ow-trackmenu input { width: 18px; height: 18px; margin: 0; accent-color: var(--ow-accent); }

#onWaterView .ow-trackcount {
    padding: 4px 8px 2px;
    font-size: 12px;
    opacity: .7;
}

#onWaterView .ow-acctline {
    padding: 0 8px 4px;
    font-size: 12px;
    opacity: .7;
}

#onWaterView .ow-trackmenu .ow-acctline button {
    display: inline;
    min-height: 0;
    padding: 0;
    color: var(--ow-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
}

/* Fish button tops the right-hand column, centred over the 48 px buttons */
#onWaterView .ow-fishwrap {
    right: 4px;
    bottom: 122px;
    width: 56px;
    height: 56px;
    transition: bottom 200ms ease;
}

#onWaterView:has(#owSheet.open) .ow-fishwrap { bottom: calc(var(--ow-sheet-h, 0px) + 10px); }
#onWaterView:has(#owSheet.open) .ow-fishnote { bottom: calc(var(--ow-sheet-h, 0px) + 24px); }
#onWaterView:has(#owCatchSheet.open) .ow-toast { bottom: calc(var(--ow-catch-h, 0px) + 10px); }

#onWaterView .ow-fishbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ow-accent);
    box-shadow: 0 2px 8px var(--ow-shadow);
    cursor: pointer;
}

#onWaterView .ow-fisheye { fill: var(--ow-accent); }

/* Disabled: clicks fall through to the wrapper, which shows the waiting note */
#onWaterView .ow-fishbtn:disabled {
    pointer-events: none;
    background: var(--ow-muted);
    box-shadow: none;
}

#onWaterView .ow-fishbtn:disabled .ow-fisheye { fill: var(--ow-muted); }

#onWaterView .ow-fishnote,
#onWaterView .ow-toast {
    right: 68px;
    bottom: 136px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ow-panel);
    box-shadow: 0 2px 8px var(--ow-shadow);
    font-size: 13px;
    white-space: nowrap;
}

#onWaterView .ow-fishnote[hidden],
#onWaterView .ow-toast[hidden] { display: none; }

/* Catch pins: a bare fish in the track colour with a thin light outline */
#onWaterView .ow-fishpin { background: none; border: 0; }

#onWaterView .ow-fishpin path {
    fill: var(--ow-trackline);
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 1;
}

#onWaterView .ow-pin-pop { min-width: 140px; font-size: 13px; line-height: 1.4; }
/* Fixed frame: Leaflet sizes the popup on open, before the photo has loaded */
#onWaterView .ow-pin-pop img { display: block; width: 200px; height: 150px; object-fit: cover; margin-bottom: 6px; border-radius: 6px; }

#onWaterView .ow-pin-popup .leaflet-popup-content-wrapper,
#onWaterView .ow-pin-popup .leaflet-popup-tip {
    background: var(--ow-sheet);
    color: var(--ow-fg);
}
#onWaterView .ow-pin-species { font-weight: 700; }
#onWaterView .ow-pin-time { opacity: .7; }
#onWaterView .ow-pin-actions { display: flex; gap: 6px; margin-top: 8px; }

#onWaterView .ow-pin-actions button,
#onWaterView .ow-catch-actions button,
#onWaterView .ow-catch-photo button,
#onWaterView .ow-chips button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ow-grip);
    border-radius: 18px;
    background: var(--ow-sheet);
    color: var(--ow-fg);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* Catch sheet: shares the detail sheet's slide-up, adds chips and actions */
#onWaterView .ow-catch-title { font-size: 17px; font-weight: 700; }

#onWaterView .ow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

#onWaterView .ow-chips button[aria-pressed="true"] {
    border-color: var(--ow-accent);
    background: var(--ow-accent);
    color: var(--ow-on-accent);
}

#onWaterView .ow-catch-photo { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
#onWaterView .ow-catch-photo:empty { display: none; }
#onWaterView .ow-catch-photo img { max-height: 96px; max-width: 60%; border-radius: 8px; }

#onWaterView .ow-catch-actions { display: flex; gap: 8px; margin-top: 12px; }
#onWaterView .ow-catch-actions button { flex: 1; min-height: 44px; border-radius: 12px; }

#onWaterView .ow-catch-actions .ow-primary {
    border-color: var(--ow-accent);
    background: var(--ow-accent);
    color: var(--ow-on-accent);
    font-weight: 700;
}

/* Detail sheet */
#onWaterView .ow-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 14px 14px;
    border-radius: 16px 16px 0 0;
    background: var(--ow-sheet);
    box-shadow: 0 -4px 16px var(--ow-shadow);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
}

#onWaterView .ow-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 200ms ease;
}

/* Grip at the top of the sheet: tap closes it (swipe down and a map tap do too) */
#onWaterView .ow-grip {
    display: block;
    position: relative;
    width: 64px;
    height: 24px;
    min-height: 0;
    margin: -6px auto 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

#onWaterView .ow-grip::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 8px;
    height: 4px;
    border-radius: 2px;
    background: var(--ow-grip);
}

#onWaterView .ow-state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
}

#onWaterView .ow-sub {
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
}

#onWaterView .ow-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
}

#onWaterView .ow-facts span:nth-child(odd) { opacity: .6; }

#owStrip {
    display: block;
    width: 100%;
    height: 16px;
    margin-top: 10px;
}

#onWaterView .ow-strip-lbl {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 10px;
    opacity: .65;
}

/* Map background matches the chrome while tiles load */
#onWaterView .leaflet-container { background: var(--ow-map-bg); font: inherit; }

/* Keep the tile attribution clear of the pill */
#onWaterView .leaflet-bottom.leaflet-left { bottom: 62px; }