/* ===== Currents page (/currents) + shared header nav link =====
   Dash loads every assets/*.css on every page, so all rules are scoped to
   currents-* classes. The page can't scroll (gotone.css sets body overflow
   hidden), so it is a flex column exactly as tall as the *visible* viewport
   (dvh: iPad/iPhone Safari's 100vh includes the area under its toolbars,
   which pushed the chart off-screen): header, then map + chart. */

.currents-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.currents-page > .gotone-header { flex: 0 0 auto; }
.currents-page > .container-fluid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.currents-page > .container-fluid > .row { flex: 1 1 auto; min-height: 0; margin: 0; }
.currents-page .map-col { height: 100%; }
.currents-page .gotone-sidebar { height: 100%; }

.header-nav-link {
    margin-left: auto;
    align-self: center;
    padding-left: 1rem;
    color: #0183fe;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.header-nav-link:hover { color: #4da6ff; text-decoration: underline; }

.currents-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #05080f;
}
.currents-map-box {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.currents-map-box .leaflet-container {
    background: #0b0f17;
    font-family: inherit;
}
/* Leaflet 1.9 draws tiles with mix-blend-mode: plus-lighter to hide seams in
   opaque basemaps; on the semi-transparent place-name layer it brightens every
   tile edge into faint lines across the map. Normal blending there. */
#currents-map .leaflet-currents-labels-pane-pane img.leaflet-tile { mix-blend-mode: normal; }
.currents-chart-box {
    flex: 0 0 auto;
    height: 31%;
    min-height: 200px;
    max-height: 310px;
    display: flex;
    flex-direction: column;
    background: #0a1628;
    border-top: 1px solid #1e293b;
}
.currents-badge {
    flex: 0 0 auto;
    min-height: 1.6rem;
    padding: 0.3rem 0.75rem 0;
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.35;
}
.currents-badge b { color: #fbbf24; font-weight: 600; }
.currents-badge .muted { color: #94a3b8; }
.currents-chart-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.currents-chart {
    position: absolute;
    inset: 0;
    cursor: col-resize;
}
.currents-cursor-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.currents-cursor {
    position: absolute;
    top: 6px;
    bottom: 26px;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
/* Readout riding on the time line while someone points at / touches the chart */
.currents-readout {
    position: absolute;
    display: none;
    padding: 0.35rem 0.55rem;
    background: rgba(15, 29, 50, 0.94);
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.currents-readout .rt { font-weight: 600; color: #ffffff; }
.currents-readout .sw {
    display: inline-block;
    width: 12px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px solid #fbbf24;
}
.currents-readout .sw.tide { border-top-color: #60a5fa; }
.currents-readout .sw.mod { border-top-style: dotted; }
.currents-readout .sw.dash { border-top-style: dashed; }
.currents-readout .flood { color: #2dd4bf; }
.currents-readout .ebb { color: #fb923c; }
.currents-readout .hint { margin-top: 0.15rem; color: #94a3b8; font-size: 0.66rem; }
/* Plotly's drag layer sets a pointing-hand cursor; signal "slide along". */
#currents-chart .nsewdrag { cursor: ew-resize !important; }

/* The map's moment (time, tide stage, spot current, tide), between the map and
   the chart (filled by currents.js updateClock). Fixed height so the map never
   resizes as the text changes (a resize reseeds the particles). Two lines on
   narrow screens, one on wide ones. */
.currents-status-line {
    flex: 0 0 auto;
    height: 2.75rem;
    padding: 0.3rem 0.75rem;
    background: #0d1d38;
    border-top: 1px solid #1e293b;
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.1rem;
    overflow: hidden;
}
.currents-status-line .cst-l1,
.currents-status-line .cst-l2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.currents-status-line .cst-time { color: #ffffff; font-weight: 600; }
.currents-status-line .cst-sub,
.currents-status-line .cst-dot { color: #94a3b8; }
.currents-status-line .cst-cur { color: #e2e8f0; }
.currents-status-line .flood { color: #2dd4bf; font-weight: 600; }
.currents-status-line .ebb { color: #fb923c; font-weight: 600; }
.currents-status-line .slack { color: #ffffff; font-weight: 600; }
@media (min-width: 992px) and (min-height: 501px) {
    .currents-status-line {
        height: 1.9rem;
        display: flex;
        align-items: center;
        gap: 0;
    }
    .currents-status-line .cst-l1 { flex: 0 0 auto; }
    .currents-status-line .cst-l2 { flex: 1 1 auto; min-width: 0; }
    .currents-status-line .cst-l2::before { content: " · "; color: #94a3b8; white-space: pre; }
}
.currents-legend {
    background: rgba(10, 22, 40, 0.82);
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    color: #cbd5e1;
    font-size: 0.7rem;
    pointer-events: none;
}
.currents-legend .bar {
    width: 150px;
    height: 8px;
    border-radius: 4px;
    margin: 0.25rem 0 0.15rem;
}
.currents-legend .ticks { display: flex; justify-content: space-between; }
.currents-status {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 900;
    max-width: 80%;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 0.85rem;
    text-align: center;
    pointer-events: none;
}
.currents-status.error { border-color: #f87171; color: #fecaca; }
.currents-canvas { pointer-events: none; }
.leaflet-tooltip.currents-tip {
    background: rgba(10, 22, 40, 0.92);
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 0.75rem;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.currents-tip::before { border-top-color: #334155; }

/* Harbor-inlet estimate: an arrow the way the water runs (colour = flood /
   ebb, set inline by currents.js, as is the rotation); a dot at slack. */
.currents-inlet { cursor: pointer; }
.currents-inlet .arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease-out;
}
.currents-inlet svg path {
    fill: currentColor;
    stroke: #0a1628;
    stroke-width: 1.4;
    stroke-linejoin: round;
}
.currents-inlet .dot {
    display: none;
    position: absolute;
    left: 9px;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    border: 1.5px solid #0a1628;
}
.currents-inlet.slack .arrow { display: none; }
.currents-inlet.slack .dot { display: block; }
.currents-inlet.sel svg path { stroke: #ffffff; stroke-width: 2; }
.currents-inlet.sel .dot { border: 2.5px solid #ffffff; }

/* Sidebar dropdowns: the dark sidebar's light text colour is inherited by Dash
   4's white dropdown trigger, making the selected value invisible. Force the
   brand navy (gotone.css only covers the date picker's dropdowns). */
#currents-week,
#currents-station,
#currents-week .dash-dropdown-value,
#currents-station .dash-dropdown-value,
#currents-week .dash-dropdown-value span,
#currents-station .dash-dropdown-value span,
/* ...and the open menu, which Dash 4 renders inline inside the sidebar */
#sidebar-col .dash-dropdown-content,
#sidebar-col .dash-dropdown-content .dash-dropdown-option,
#sidebar-col .dash-dropdown-content .dash-options-list-option-text {
    color: #0a1628 !important;
}

/* Radio/checkbox spacing in the dark sidebar */
.currents-radio .form-check-inline { margin-right: 0.6rem; }

/* View switch + tide strength: radio items drawn as a pill button group */
.currents-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.currents-seg .form-check { margin: 0; padding: 0; min-height: 0; }
.currents-seg .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.currents-seg-btn {
    display: inline-block;
    padding: 0.22rem 0.62rem;
    border: 1px solid #334155;
    border-radius: 100px;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.currents-seg-btn:hover { border-color: #0183fe; color: #ffffff; }
.currents-seg-btn.active { background: #0183fe; border-color: #0183fe; color: #ffffff; }
.currents-seg .form-check-input:disabled + .currents-seg-btn { opacity: 0.35; cursor: not-allowed; }
#currents-panel-date, #currents-panel-cycle, #currents-panel-week { margin-top: 0.65rem; }
/* Date + "Now" share a line when the sidebar is wide enough, else "Now" wraps
   (the input has a fixed width and would otherwise cover the button). */
.currents-date-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.currents-date-row .dash-datepicker { flex: 1 1 110px; min-width: 0; }
.currents-date-row .dash-datepicker-input { width: 100% !important; min-width: 0; box-sizing: border-box; }
.currents-now-btn {
    border-radius: 100px !important;
    font-size: 0.72rem !important;
    padding: 0.2rem 0.65rem !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
.currents-now-btn:hover { background: #0183fe !important; border-color: #0183fe !important; }
.currents-blurb {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #cbd5e1;
}
.currents-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    font-size: 0.7rem;
    text-decoration: underline;
    cursor: pointer;
}
.currents-link-btn:hover { color: #e2e8f0; }

/* Header: "How it works" + "← SST Map" */
.currents-header-links { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.currents-header-links .header-nav-link { margin-left: 0; }
.currents-about-link { background: none; border: none; cursor: pointer; color: #cbd5e1; }
.currents-about-link:hover { color: #ffffff; }

.currents-legend .haze-note {
    display: none;
    margin-top: 0.35rem;
    max-width: 170px;
    color: #94a3b8;
    font-size: 0.66rem;
    line-height: 1.3;
}
.currents-legend .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    vertical-align: -1px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.5);
}
.currents-haze { pointer-events: none; }

/* Confidence labels (badge, tooltips, the About table) */
.conf { font-weight: 600; white-space: nowrap; }
.conf-high { color: #2dd4bf; }
.conf-good { color: #86efac; }
.conf-moderate { color: #fbbf24; }
.conf-low { color: #f87171; }
.conf-rough,
.conf-estimate { color: #c4b5fd; }   /* computed, not modelled: its own colour */
.conf-estimate { cursor: help; }

/* "How it works" modal, dark like the page */
.currents-about { background: #0a1628; color: #e2e8f0; border: 1px solid #1e293b; }
.currents-about .modal-header, .currents-about .modal-footer { border-color: #1e293b; }
.currents-about .modal-title { font-size: 1.05rem; font-weight: 600; color: #ffffff; }
.currents-about .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.currents-about-body { font-size: 0.86rem; line-height: 1.5; color: #cbd5e1; }
.currents-about-body b { color: #ffffff; }
.currents-about-body ul { padding-left: 1.1rem; margin-bottom: 0.5rem; }
.currents-about-h {
    margin: 1.1rem 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.currents-about-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.currents-about-table th {
    text-align: left;
    color: #94a3b8;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #334155;
}
.currents-about-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #1e293b; vertical-align: top; }
.currents-about-table td:first-child { color: #e2e8f0; width: 30%; }
.currents-about-note { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; }

@media (max-width: 767.98px), (max-height: 500px) {
    .header-nav-link { font-size: 0.78rem; padding-left: 0.5rem; }
    .currents-about-table td:first-child { width: auto; }
    .currents-chart-box { height: 36%; min-height: 160px; }
    .currents-badge { font-size: 0.7rem; padding: 0.25rem 0.6rem 0; }
    .currents-status-line { font-size: 0.72rem; height: 2.55rem; padding: 0.25rem 0.6rem; line-height: 1.02rem; }
    .currents-legend { display: none; }
}

/* ===== Floating controls on the map (created by currents.js) ===== */
.currents-fs-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0a1628;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.currents-playbar {
    display: none;                      /* drawer mode only (sidebar has its own) */
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid #1e293b;
    border-radius: 100px;
}
.currents-playbar button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #334155;
    border-radius: 100px;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
}
.currents-playbar button.main {
    width: 72px;
    background: #ffffff;
    border-color: #ffffff;
    color: #0a1628;
    font-weight: 600;
}

/* ===== Full screen: a slim branded bar (logo, title, "How it works")
   instead of the full header, so map + chart get nearly all the height. ===== */
html.currents-fs .currents-page > .gotone-header { padding: 0.3rem 0.75rem; gap: 0.5rem; }
html.currents-fs .currents-page > .gotone-header img { height: 34px; }
html.currents-fs .currents-page > .gotone-header h1 { font-size: 1rem; }
html.currents-fs .currents-page > .gotone-header .subtitle,
html.currents-fs .currents-page .currents-labs-link { display: none; }
/* iPadOS full screen keeps its status bar (time, battery) drawn over the top
   of the page and adds its own exit "X" (~56 pt square, ~20 pt in, ~32 pt
   down) that a page can't hide. On touch screens the bar spans both: a strip
   behind the status bar, then a row with the X on the left, the brand after
   it and "How it works" on the right; the map starts below, so the X can't
   cover the zoom buttons. (Measured on an iPad in landscape.) */
@media (hover: none) and (pointer: coarse) {
    html.currents-fs .currents-page > .gotone-header {
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: 0;
        padding-left: 92px;
        min-height: calc(max(24px, env(safe-area-inset-top)) + 60px);
    }
}

/* ===== Tablets (any touch screen) and windows < 1200px: the sidebar becomes
   a slide-in drawer, as on phones (gotone.css), and play/pause floats on the
   map. A fixed 2-column sidebar left the map cramped and clipped the panels. */
@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) {
    .currents-page .gotone-sidebar {
        position: fixed !important;
        top: 0;
        left: -330px;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 2000;
        transition: left 0.3s ease;
        flex: none !important;
        padding-top: 2.75rem !important;
        padding-left: max(1.25rem, env(safe-area-inset-left)) !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .currents-page .gotone-sidebar.drawer-open { left: 0; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.35); }
    .currents-page .gotone-sidebar .sidebar-header { flex-shrink: 0; position: relative; z-index: 10; }
    .currents-page .gotone-sidebar .sidebar-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        min-height: 0;
    }
    .currents-page .gotone-sidebar .dash-datepicker-calendar { z-index: 2100 !important; }
    .currents-page .sidebar-close-btn { display: block !important; }
    /* gotone.css hides the backdrop above phone width; show it while open
       (the toggle callback's inline style can't beat that !important). */
    .currents-page .sidebar-backdrop { display: none !important; }
    .currents-page:has(.gotone-sidebar.drawer-open) .sidebar-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1999;
    }
    .currents-page .map-col { flex: 0 0 100% !important; max-width: 100% !important; }
    .currents-page .hamburger-btn {
        display: block !important;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1100;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 1.4rem;
        color: #0a1628;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    .currents-page .leaflet-top.leaflet-right { top: 54px; }   /* below the hamburger */
    .currents-playbar { display: flex; }
}