/* ============================================================
   Helm — Marine Forecast Assistant design system
   Tokens, base, components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --hull: #0B1F2A;
    --tide: #13324A;
    --tide-2: #1B4364;
    --foam: #F4F1EA;
    --foam-2: #C8C2B5;
    --brass: #C8A24B;
    --brass-2: #A8862F;
    --signal: #C8453A;
    --seaglass: #7FB3A4;
    --buoy: #E8842B;

    --rule: 1px solid rgba(200, 162, 75, .28);
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;

    --ff-display: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
    --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ff-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box }

html, body {
    margin: 0;
    background: var(--hull);
    color: var(--foam);
    font-family: var(--ff-body);
    font-feature-settings: "tnum", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brass); text-decoration: none }
a:hover { color: var(--foam) }

/* ---------- Layout shell ---------- */

.helm {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 18px 80px;
    position: relative;
}

.helm__brand {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 22px;
    position: relative;
}

.helm__brand h1 {
    margin: 0;
    font: 600 30px/1.05 var(--ff-display);
    letter-spacing: .005em;
    color: var(--foam);
}

.helm__brand .eyebrow {
    font: 600 11px/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brass);
}

.helm__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle {
    appearance: none;
    background: rgba(11, 31, 42, .55);
    border: 1px solid rgba(244, 241, 234, .12);
    color: var(--foam-2);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: color .15s ease, border-color .15s ease, transform .12s ease;
    flex: 0 0 auto;
}
.theme-toggle:hover { color: var(--foam); border-color: var(--brass) }
.theme-toggle:active { transform: scale(.94) }
.theme-icon { width: 18px; height: 18px }
[data-helm="day"] .theme-icon--sun  { display: none }
[data-helm="red"] .theme-icon--moon { display: none }

/* Compass-rose watermark behind H1 */
.compass-rose {
    position: absolute;
    top: -16px; left: -8px;
    width: 160px; height: 160px;
    pointer-events: none;
    opacity: .12;
    z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    /* Only the small inner sunburst rotates — keeps the cardinal arrows
       and letters in alignment while the medallion still feels "alive." */
    .compass-rose .compass-spin {
        transform-origin: 110px 110px;
        animation: helmRotate 240s linear infinite;
    }
}
@keyframes helmRotate { to { transform: rotate(360deg) } }
.helm__brand > * { position: relative; z-index: 1 }

/* ---------- Chart paper texture on dark cards ---------- */

.card,
.helm-form,
.tide-card,
.day-band,
.results {
    background-image:
        linear-gradient(rgba(244, 241, 234, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 241, 234, .04) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    background-position: 0 0;
}

/* ---------- Form (Helm header) ---------- */

.helm-form {
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 20px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .35);
}
@media (max-width: 720px) {
    .helm-form {
        grid-template-columns: 1fr 1fr;
        padding: 14px;   /* tighter than the 20px desktop padding */
        gap: 12px;
    }
    .helm-form__submit { grid-column: 1 / -1; }
    /* iOS Safari's <input type="date"> has a min intrinsic width that can
       punch past the parent on narrow viewports. min-width:0 lets it shrink
       to its container; max-width:100% caps it as a belt-and-braces. */
    .helm-form select,
    .helm-form input[type=text],
    .helm-form input[type=email],
    .helm-form input[type=password],
    .helm-form input[type=date] {
        min-width: 0;
        max-width: 100%;
    }
    /* But min-width / max-width are ignored by iOS Safari while the date
       input is rendered as a native button-style control. appearance:none
       strips that rendering so the input becomes a plain text-input-ish
       field that obeys the width:100% set higher up. Calendar icon goes
       away but the native picker still opens on tap. */
    .helm-form input[type=date] {
        -webkit-appearance: none;
        appearance: none;
        background-clip: padding-box;
    }
}

.helm-form label {
    display: block;
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 6px;
}

.helm-form select,
.helm-form input[type=text],
.helm-form input[type=date] {
    width: 100%;
    background: rgba(11, 31, 42, .55);
    color: var(--foam);
    border: 1px solid rgba(244, 241, 234, .12);
    border-radius: var(--r-md);
    padding: 11px 12px;
    font: 500 14px/1 var(--ff-body);
    font-feature-settings: "tnum";
    min-height: 44px;
    transition: border-color .15s ease, background .15s ease;
}
.helm-form select:focus,
.helm-form input:focus {
    outline: none;
    border-color: var(--brass);
    background: rgba(11, 31, 42, .8);
}
.helm-form input[type=date] {
    color-scheme: dark;
    font-family: var(--ff-mono);
}

.helm-form__custom { transition: opacity .2s ease, transform .2s ease }
.helm-form__custom[hidden] { display: none }

.helm-form__submit {
    appearance: none;
    border: 1px solid var(--brass);
    background: linear-gradient(180deg, var(--brass), var(--brass-2));
    color: var(--hull);
    font: 700 13px/1 var(--ff-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 13px 22px;
    border-radius: var(--r-md);
    min-height: 44px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(200, 162, 75, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .08s ease, box-shadow .15s ease;
}
.helm-form__submit:hover { box-shadow: 0 6px 18px rgba(200, 162, 75, .35), inset 0 1px 0 rgba(255, 255, 255, .35) }
.helm-form__submit:active { transform: translateY(1px) }

/* ---------- Day Scroller (mobile date picker) ---------- */

.day-scroller {
    display: none;
}

@media (max-width: 720px) {
    .day-scroller {
        display: flex;
        grid-column: 1 / -1;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: var(--brass-2) transparent;
        padding: 2px 0 8px;
        margin: -2px -10px 4px;
        padding-left: 10px;
        padding-right: 10px;
        -webkit-overflow-scrolling: touch;
    }
    /* Native date input becomes secondary on mobile (kept available for off-scroller dates) */
    .helm-form__date-field {
        grid-column: 1 / -1;
        opacity: .72;
    }
    .helm-form__date-field label {
        font-size: 9px;
    }
}

.day-scroller__pill {
    flex: 0 0 auto;
    scroll-snap-align: center;
    min-width: 68px;
    padding: 9px 6px;
    border: 1px solid rgba(244, 241, 234, .12);
    background: rgba(11, 31, 42, .55);
    color: var(--foam-2);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    appearance: none;
    font-family: inherit;
}
.day-scroller__pill:hover {
    border-color: var(--brass);
    color: var(--foam);
}
.day-scroller__pill--active {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--hull);
    box-shadow: 0 0 0 3px rgba(200, 162, 75, .15);
}
.day-scroller__day {
    font: 600 9px/1 var(--ff-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.day-scroller__num {
    font: 700 20px/1 var(--ff-display);
    font-feature-settings: "tnum";
}

/* ---------- Results header (Go/No-Go + Beaufort + units + profile) ---------- */

.results {
    margin-top: 22px;
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .35);
}

.results__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.results__title {
    margin: 0;
    font: 600 22px/1.15 var(--ff-display);
    flex: 1 1 auto;
    min-width: 200px;
}
.results__title .eyebrow {
    display: block;
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 4px;
}

.results__controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

.units-toggle,
.profile-picker {
    display: inline-flex;
    background: rgba(11, 31, 42, .6);
    border: 1px solid rgba(244, 241, 234, .12);
    border-radius: 999px;
    padding: 3px;
    font: 600 11px/1 var(--ff-mono);
    letter-spacing: .08em;
}
.units-toggle button,
.profile-picker button {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--foam-2);
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 32px;
    text-transform: uppercase;
}
.units-toggle button[aria-pressed=true],
.profile-picker button[aria-pressed=true] {
    background: var(--brass);
    color: var(--hull);
}

/* ---------- Go/No-Go stamp ---------- */

.gng {
    font: 800 14px/1 var(--ff-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    padding: 7px 12px;
    border-radius: 6px;
    transform: rotate(-6deg);
    display: inline-block;
    opacity: .94;
    align-self: center;
}
.gng--go { color: var(--seaglass) }
.gng--no { color: var(--signal) }

/* ---------- Beaufort badge ---------- */

.badge {
    font: 600 11px/1 var(--ff-mono);
    letter-spacing: .06em;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(200, 162, 75, .5);
    color: var(--brass);
    white-space: nowrap;
}
.badge--beaufort { background: rgba(200, 162, 75, .08) }

/* ---------- Day Band ---------- */

.day-band {
    position: relative;
    margin-top: 4px;
    background: var(--hull);
    border: var(--rule);
    border-radius: var(--r-md);
    padding: 18px 16px 14px;
    overflow: hidden;
}

.day-band__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .85;
}

.day-band__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}

.day-band__track {
    position: relative;
    height: 78px;
}

.day-band__hours {
    position: absolute;
    inset: auto 0 0 0;
    height: 14px;
    display: flex;
    justify-content: space-between;
    font: 500 9px/1 var(--ff-mono);
    color: var(--foam-2);
    opacity: .55;
}
.day-band__hours span { transform: translateX(-50%) }
.day-band__hours span:first-child { transform: none }
.day-band__hours span:last-child { transform: translateX(-100%) }

.day-band__axis {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    height: 1px;
    background: rgba(200, 162, 75, .35);
}

.day-band__arc {
    position: absolute;
    left: 0; right: 0; top: 4px; bottom: 18px;
    pointer-events: none;
}
.day-band__arc svg { width: 100%; height: 100%; overflow: visible }

.day-band__marker {
    position: absolute;
    bottom: 18px;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--foam);
    pointer-events: auto;
}
.day-band__marker .ico {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hull);
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--brass);
    flex: 0 0 auto;
}
.day-band__marker .ico svg { width: 14px; height: 14px }
.day-band__marker .lbl {
    font: 600 10px/1 var(--ff-mono);
    color: var(--foam-2);
    white-space: nowrap;
    transform: translateY(8px);
}
.day-band__marker--high .ico { color: var(--seaglass) }
.day-band__marker--low  .ico { color: var(--signal) }
.day-band__marker--sunrise .ico,
.day-band__marker--sunset .ico,
.day-band__marker--noon .ico { color: var(--buoy) }

.day-band__now {
    position: absolute;
    top: 0; bottom: 14px;
    width: 1px;
    background: var(--foam);
    z-index: 3;
}
.day-band__now::before {
    content: 'NOW';
    position: absolute;
    top: -4px;
    left: 4px;
    font: 700 9px/1 var(--ff-mono);
    letter-spacing: .12em;
    color: var(--foam);
}
.day-band__now::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -3px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--foam);
    transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
    .day-band__now::after { animation: helmPulse 2.4s ease-in-out infinite }
}
@keyframes helmPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 241, 234, .45) }
    50%      { box-shadow: 0 0 0 6px rgba(244, 241, 234, 0) }
}

.day-band__moon {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-left: 1px solid rgba(244, 241, 234, .12);
    color: var(--foam-2);
    min-width: 90px;
}
.day-band__moon .glyph { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 6px rgba(244, 241, 234, .15)) }
.day-band__moon .name  { font: 500 10px/1.2 var(--ff-mono); text-align: center; max-width: 90px }
.day-band__moon .illum { font: 600 10px/1 var(--ff-mono); color: var(--brass) }

@media (max-width: 520px) {
    .day-band__inner { grid-template-columns: 1fr; }
    .day-band__moon  { flex-direction: row; align-items: center; gap: 10px;
                       border-left: none; border-top: 1px solid rgba(244, 241, 234, .12);
                       padding: 10px 0 0; min-width: 0; }
    .day-band__moon .glyph { font-size: 22px }

    /* At narrow widths, absolute-positioned marker labels overlap. Drop the
       text labels on tide H/L markers (their colored icons + position on the
       ribbon already convey the timing); shrink the sun/noon/sunset labels;
       and give the track a touch more vertical room for the staggered look. */
    .day-band__track { height: 88px }
    .day-band__marker .lbl { font-size: 8px; letter-spacing: 0; transform: translateY(10px) }
    .day-band__marker--high .lbl,
    .day-band__marker--low .lbl { display: none }
}

/* ---------- Instrument Cluster ---------- */

.cluster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}

@media (max-width: 720px) {
    .cluster {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 10px;
        padding: 0 0 8px;
        margin-left: -2px;
        margin-right: -2px;
        scrollbar-width: thin;
    }
    .dial { scroll-snap-align: center }
}

.dial {
    margin: 0;
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .35);
}

.dial svg {
    width: 100%;
    max-width: 170px;
    height: auto;
    display: block;
}

.dial__track {
    stroke: rgba(244, 241, 234, .08);
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}
.dial__arc {
    stroke: var(--brass);
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke .35s ease;
    filter: drop-shadow(0 0 6px rgba(200, 162, 75, .25));
}
.dial__needle line {
    stroke: var(--foam);
    stroke-width: 2;
    stroke-linecap: round;
}
.dial__needle circle {
    fill: var(--brass);
    stroke: var(--hull);
    stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
    .dial__needle { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) }
}

.dial figcaption {
    text-align: center;
    margin-top: -36px;        /* tuck readout up into the dial */
    position: relative;
    z-index: 2;
}
.dial__readout {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.dial__num {
    font: 700 30px/1 var(--ff-display);
    color: var(--foam);
    font-feature-settings: "tnum";
}
.dial__unit {
    font: 500 11px/1 var(--ff-mono);
    color: var(--foam-2);
}
.dial__label {
    display: block;
    margin-top: 26px;
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass);
}
.dial__when {
    display: block;
    margin-top: 5px;
    font: 500 11px/1 var(--ff-mono);
    color: var(--foam-2);
}

/* ---------- Bridge Watch (hourly) ---------- */

/* Bridge Watch is NOT its own card — it sits flush inside the Forecast
   (.results) card so its "Bridge Watch" eyebrow lines up with "Forecast" and
   the hour rows get the full content width. No background/border/padding;
   only the per-row chrome remains. */
.bridge {
    margin-top: 20px;
}

.card__head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.card__eyebrow {
    font: 600 11px/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass);
}
.card__title { margin: 0; font: 600 18px/1.2 var(--ff-display) }
.card__head .badge { margin-left: auto }

.bridge__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 6px;
}

.bridge__row {
    border-radius: var(--r-md);
    background: rgba(11, 31, 42, .45);
    border: 1px solid rgba(244, 241, 234, .05);
    transition: background .15s ease;
    overflow: hidden;   /* keep the detail panel inside the rounded corners */
}
.bridge__row[data-now] {
    background: rgba(244, 241, 234, .04);
    outline: 1px solid var(--foam);
    box-shadow: 0 0 0 3px rgba(244, 241, 234, .08);
}

/* The summary is the accessible click target — a real <button> so Enter/Space
   and focus come for free. The grid that used to live on the row lives here. */
.bridge__summary {
    display: grid;
    grid-template-columns: 66px 1fr 66px 100px 64px 50px 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    margin: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bridge__summary:hover { background: rgba(244, 241, 234, .03) }
.bridge__summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px }

.bridge__chevron {
    width: 14px; height: 14px;
    color: var(--foam-2);
    justify-self: center;
    transition: transform .18s ease;
}
.bridge__row[data-open] .bridge__chevron { transform: rotate(180deg) }

/* Expandable detail: gusts, cardinal wind direction, tide state + height. */
.bridge__detail { padding: 4px 14px 12px; border-top: 1px dashed rgba(244, 241, 234, .1) }
.bridge__detail[hidden] { display: none }
.bridge__detail-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 18px;
}
.bridge__detail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(244, 241, 234, .05);
}
.bridge__detail-item dt {
    font: 600 10px/1 var(--ff-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--foam-2);
}
.bridge__detail-item dd { margin: 0; font: 600 14px/1 var(--ff-body); color: var(--foam) }
.bridge__detail-item dd small { color: var(--foam-2); font-weight: 500; margin-left: 2px }

.bridge__tide--rising  { color: var(--seaglass) }
.bridge__tide--falling { color: var(--brass) }
.bridge__tide--slack   { color: var(--foam-2) }

.bridge__time { font: 600 13px/1 var(--ff-mono); color: var(--foam) }
.bridge__cond { display: flex; align-items: center; gap: 10px; color: var(--foam-2); min-width: 0 }
.bridge__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px }
.bridge__icon {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    /* OWM icons are blue/cool on a transparent bg. A gentle warm desaturation
       blends them into Helm's brass-on-tide palette without losing readability. */
    filter: saturate(.9);
}
[data-helm="red"] .bridge__icon {
    /* Tint to monochrome red for night vision. CSS recipe: strip color, push
       to sepia (~30°), then rotate the hue back to red and boost saturation. */
    filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-30deg) brightness(.65);
}

.bridge__temp {
    font: 600 16px/1 var(--ff-body);
    text-align: right;
    font-feature-settings: "tnum";
}
.bridge__temp small { color: var(--foam-2); font-weight: 500; margin-left: 2px }

.bridge__wind {
    display: flex; align-items: center; gap: 10px;
    justify-content: flex-end; color: var(--foam);
}
.bridge__card {
    font: 500 13px/1 var(--ff-mono);
    color: var(--foam-2);
    flex: 0 0 auto;
}
.bridge__mph { font: 500 13px/1 var(--ff-mono); color: var(--foam-2) }

.bridge__precip {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
    font: 600 13px/1 var(--ff-mono);
    font-feature-settings: "tnum";
    color: var(--foam-2);
    white-space: nowrap;
}
.bridge__precip .drop { width: 11px; height: 11px; flex: 0 0 auto; opacity: .75 }
.bridge__precip small { font-size: 10px; margin-left: 1px; opacity: .7 }
.bridge__precip[data-intensity="low"]  { color: var(--foam-2); opacity: .55 }
.bridge__precip[data-intensity="med"]  { color: var(--brass) }
.bridge__precip[data-intensity="high"] { color: var(--signal); font-weight: 700 }
.bridge__precip[data-intensity="high"] .drop { opacity: 1 }

.row-gng {
    font: 700 9px/1 var(--ff-mono);
    letter-spacing: .14em;
    text-align: center;
    padding: 6px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    justify-self: end;
    min-width: 38px;
    border: 1px solid currentColor;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.row-gng[data-verdict="go"] {
    color: var(--seaglass);
    background: rgba(127, 179, 164, .12);
    border-color: rgba(127, 179, 164, .35);
}
.row-gng[data-verdict="no"] {
    color: var(--signal);
    background: rgba(200, 69, 58, .12);
    border-color: rgba(200, 69, 58, .35);
}

@media (max-width: 520px) {
    /* Bridge Watch has no wrapper card now, so rows span the full .results
       content width. Keep the row internals tight:
       - summary padding 11/14→8/6 (gains horizontal room)
       - wind column uses minmax(0, 1fr) instead of 1fr — without minmax(0,…)
         the column refuses to shrink below its content's intrinsic width and
         pushes the row past the card border. Overflow:hidden on the wind cell
         clips the (rare) case where even the minimum doesn't fit. */
    .bridge__summary {
        grid-template-columns: 50px 56px minmax(0, 1fr) 44px 34px 14px;
        gap: 6px;
        padding: 8px 6px;
        min-width: 0;
    }
    .bridge__detail { padding: 4px 8px 10px }
    .bridge__detail-grid { grid-template-columns: 1fr }
    .bridge__chevron { width: 12px; height: 12px }
    .bridge__cond { display: none }
    .bridge__time { font-size: 12px }
    .bridge__temp { font-size: 15px }
    .bridge__wind { gap: 5px; min-width: 0; overflow: hidden }
    .bridge__mph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .bridge__card { font-size: 12px }
    .bridge__precip { font-size: 11px; gap: 3px; min-width: 0 }
    .bridge__precip .drop { width: 9px; height: 9px }
    .bridge__precip small { display: none }
    .row-gng { padding: 5px 6px; min-width: 26px; font-size: 8px; letter-spacing: .1em }
}

/* ---------- Tide Curve ---------- */

.tide-card {
    margin-top: 20px;
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .35);
}
.tide-card__chart {
    height: 280px;
    position: relative;
    margin-top: 4px;
}
.tide-card__legend {
    list-style: none; padding: 0; margin: 12px 4px 0;
    display: flex; gap: 18px; flex-wrap: wrap;
    font: 500 11px/1 var(--ff-mono); color: var(--foam-2);
}
.dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; margin-right: 7px; vertical-align: middle;
    border: 1px solid var(--hull);
}
.dot--high { background: var(--seaglass) }
.dot--low  { background: var(--signal) }
.dot--now  { background: var(--foam) }
.dot--curve { background: var(--brass) }

/* ---------- Extreme tide quick list (under the curve) ---------- */

.tide-extremes {
    list-style: none; padding: 0; margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.tide-extremes li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(11, 31, 42, .45);
    border: 1px solid rgba(244, 241, 234, .05);
    border-radius: var(--r-md);
}
.tide-extremes .swatch {
    width: 8px; height: 32px; border-radius: 2px;
}
.tide-extremes li[data-type="High"] .swatch { background: var(--seaglass) }
.tide-extremes li[data-type="Low"]  .swatch { background: var(--signal) }
.tide-extremes .meta { display: flex; flex-direction: column; gap: 2px }
.tide-extremes .ttl { font: 600 11px/1 var(--ff-mono); letter-spacing: .12em;
                      text-transform: uppercase; color: var(--foam-2) }
.tide-extremes .val { font: 600 14px/1 var(--ff-body); font-feature-settings: "tnum" }
.tide-extremes .tm  { font: 500 11px/1 var(--ff-mono); color: var(--foam-2) }

/* ---------- Footer / footnotes ---------- */

.helm__footnote {
    margin-top: 28px;
    font: 500 11px/1.5 var(--ff-mono);
    color: var(--foam-2);
    opacity: .75;
    text-align: center;
}
.helm__footnote a { color: var(--brass-2) }

/* ---------- Lat/long tick marks (desktop) ---------- */

@media (min-width: 1024px) {
    .helm::before, .helm::after {
        content: '';
        position: absolute;
        top: 100px; bottom: 100px;
        width: 14px;
        background-image: linear-gradient(to bottom, rgba(200, 162, 75, .35) 1px, transparent 1px);
        background-size: 100% 36px;
        opacity: .7;
    }
    .helm::before { left: -2px }
    .helm::after  { right: -2px }
}

/* ---------- Admin area ---------- */

.helm--admin { padding-top: 18px }

.admin__bar {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    margin-bottom: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .35);
}

.admin__brand { display: flex; flex-direction: column; gap: 2px; color: var(--foam) }
.admin__brand .eyebrow {
    font: 600 9px/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brass);
}
.admin__brand .title { font: 600 18px/1 var(--ff-display) }

.admin__nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 6px }
.admin__nav a {
    color: var(--foam-2);
    padding: 8px 12px;
    border-radius: 999px;
    font: 600 12px/1 var(--ff-body);
    letter-spacing: .04em;
    border: 1px solid transparent;
}
.admin__nav a:hover { color: var(--foam); background: rgba(244, 241, 234, .05) }
.admin__nav a[aria-current=page] {
    color: var(--hull);
    background: var(--brass);
    border-color: var(--brass);
}

.admin__session {
    margin-left: auto;
    display: flex; align-items: center; gap: 12px;
    font: 500 12px/1 var(--ff-mono);
}
.admin__session .who { color: var(--foam-2) }
.admin__session .logout {
    color: var(--brass);
    border: 1px solid rgba(200, 162, 75, .5);
    padding: 7px 11px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.admin__session .logout:hover { background: rgba(200, 162, 75, .12); color: var(--foam) }

.admin__hero { margin-bottom: 22px }
.admin__title {
    margin: 0 0 6px;
    font: 600 24px/1.15 var(--ff-display);
    color: var(--foam);
}
.admin__lede {
    margin: 0 0 14px;
    color: var(--foam-2);
    max-width: 60ch;
    line-height: 1.5;
}

.admin__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.admin__tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px;
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    color: var(--foam);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.admin__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 162, 75, .55);
    color: var(--foam);
}
.admin__tile .tile__count {
    font: 700 32px/1 var(--ff-display);
    color: var(--brass);
    font-feature-settings: "tnum";
}
.admin__tile .tile__label {
    font: 600 11px/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--foam-2);
    margin-top: 8px;
}
.admin__tile .tile__hint { font-size: 13px; color: var(--foam-2); margin-top: 4px }

.admin__card {
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.admin__form { display: grid; gap: 14px; max-width: 460px }
.admin__form label {
    display: block;
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 6px;
}
.admin__form label small {
    color: var(--foam-2);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 6px;
}
.admin__form input[type=text],
.admin__form input[type=email],
.admin__form input[type=password],
.admin__form input[type=number],
.admin__textarea {
    width: 100%;
    background: rgba(11, 31, 42, .55);
    color: var(--foam);
    border: 1px solid rgba(244, 241, 234, .12);
    border-radius: var(--r-md);
    padding: 11px 12px;
    font: 500 14px/1.3 var(--ff-body);
    font-feature-settings: "tnum";
    min-height: 44px;
    transition: border-color .15s ease, background .15s ease;
}
.admin__textarea { font-family: var(--ff-mono); min-height: 200px; line-height: 1.5 }
.admin__form input:focus,
.admin__textarea:focus {
    outline: none;
    border-color: var(--brass);
    background: rgba(11, 31, 42, .8);
}

.admin__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px }
.admin__link {
    color: var(--foam-2);
    font: 600 11px/1 var(--ff-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.admin__link:hover { color: var(--brass) }

/* Profiles table */

.profiles__table { display: grid; gap: 8px; margin: 4px 0 16px }
.profiles__head,
.profiles__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.profiles__head {
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass);
    padding: 0 4px;
}
.profiles__head small {
    color: var(--foam-2);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 4px;
}
.profiles__row input[type=text],
.profiles__row input[type=number] {
    width: 100%;
    background: rgba(11, 31, 42, .55);
    color: var(--foam);
    border: 1px solid rgba(244, 241, 234, .12);
    border-radius: var(--r-sm);
    padding: 9px 10px;
    font: 500 13px/1.2 var(--ff-body);
    font-feature-settings: "tnum";
    min-height: 38px;
}
.profiles__row input:focus { outline: none; border-color: var(--brass) }
.profiles__delete {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 10px/1 var(--ff-mono);
    color: var(--signal);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.profiles__delete--ghost { color: var(--foam-2); opacity: .55; cursor: default }
.profiles__row--new input { border-style: dashed; opacity: .8 }
.profiles__row--new input:focus { opacity: 1; border-style: solid }

.admin__form .profiles__table,
.admin__form .admin__actions { max-width: none }

/* Flash messages */

.flash {
    padding: 11px 14px;
    border-radius: var(--r-md);
    margin: 0 0 14px;
    font: 600 13px/1.3 var(--ff-body);
}
.flash--ok  { background: rgba(127, 179, 164, .12); color: var(--seaglass);
              border: 1px solid rgba(127, 179, 164, .35) }
.flash--err { background: rgba(200, 69, 58, .12); color: var(--signal);
              border: 1px solid rgba(200, 69, 58, .35) }

/* ---------- QR-share flyout (native <dialog>) ---------- */

.qr-trigger { /* same shape as theme-toggle, just a different glyph */ }
.qr-trigger svg { width: 18px; height: 18px }

.qr-flyout {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--foam);
    max-width: 380px;
    width: calc(100% - 32px);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.qr-flyout::backdrop {
    background: rgba(11, 31, 42, .82);
    backdrop-filter: blur(4px);
}

.qr-flyout__inner {
    background: linear-gradient(180deg, var(--tide), var(--tide-2));
    border: var(--rule);
    border-radius: var(--r-lg);
    padding: 26px 22px 22px;
    text-align: center;
    position: relative;
    background-image:
        linear-gradient(rgba(244, 241, 234, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 241, 234, .04) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
}

.qr-flyout__close {
    position: absolute;
    top: 10px; right: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--foam-2);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.qr-flyout__close svg { width: 16px; height: 16px }
.qr-flyout__close:hover {
    color: var(--foam);
    border-color: rgba(244, 241, 234, .12);
    background: rgba(11, 31, 42, .55);
}

.qr-flyout__eyebrow {
    display: block;
    font: 600 10px/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 6px;
}
.qr-flyout__title {
    margin: 0 0 6px;
    font: 600 22px/1.2 var(--ff-display);
    color: var(--foam);
}
.qr-flyout__lede {
    margin: 0 0 18px;
    color: var(--foam-2);
    font-size: 13px;
}

.qr-flyout__code {
    display: inline-block;
    padding: 14px;
    background: #ffffff;
    border-radius: var(--r-md);
    margin-bottom: 18px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.qr-flyout__code img { display: block; width: 220px; height: 220px }

.qr-flyout__placeholder {
    width: 220px; min-height: 220px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    padding: 18px;
    color: var(--foam-2);
    background: rgba(11, 31, 42, .55);
    border: 1px dashed rgba(244, 241, 234, .18);
    border-radius: var(--r-sm);
}
.qr-flyout__placeholder p {
    margin: 0;
    font: 500 12px/1.5 var(--ff-mono);
    color: var(--foam-2);
}
.qr-flyout__placeholder code {
    color: var(--brass);
    font-family: var(--ff-mono);
}

.qr-flyout__url {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.qr-flyout__url code {
    font: 500 12px/1.3 var(--ff-mono);
    color: var(--foam);
    word-break: break-all;
}
.qr-flyout__copy {
    appearance: none;
    background: rgba(11, 31, 42, .55);
    border: 1px solid rgba(244, 241, 234, .12);
    color: var(--foam);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: 600 10px/1 var(--ff-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .15s ease, border-color .15s ease;
    min-height: 32px;
}
.qr-flyout__copy:hover { color: var(--brass); border-color: var(--brass) }
.qr-flyout__copy--copied { color: var(--seaglass); border-color: var(--seaglass) }

/* ---------- Helm-Red night mode ---------- */
/*
 * Preserves dark adaptation when checking conditions at night.
 * Tokens swap to a deep-red-on-near-black palette. Semantic colors
 * stay distinguishable by intensity: --seaglass (GO) is muted dark red,
 * --signal (NO-GO) is vivid bright red.
 */

[data-helm="red"] {
    --hull:     #0a0202;
    --tide:     #1c0606;
    --tide-2:   #2c0a0a;
    --foam:     #ff6457;
    --foam-2:   #c8473c;
    --brass:    #ff8175;
    --brass-2:  #b04a3e;
    --seaglass: #8a2f28;
    --signal:   #ff5040;
    --buoy:     #ff7a6a;
    --rule: 1px solid rgba(255, 129, 117, .28);
}

/* Hardcoded rgba layers — re-tint to a near-black + red wash */
[data-helm="red"] .helm-form input,
[data-helm="red"] .helm-form select,
[data-helm="red"] .units-toggle,
[data-helm="red"] .profile-picker,
[data-helm="red"] .bridge__row,
[data-helm="red"] .tide-extremes li,
[data-helm="red"] .day-scroller__pill,
[data-helm="red"] .theme-toggle,
[data-helm="red"] .admin__form input,
[data-helm="red"] .admin__textarea,
[data-helm="red"] .profiles__row input {
    background: rgba(10, 2, 2, .55);
    border-color: rgba(255, 100, 87, .15);
}

[data-helm="red"] .bridge__row[data-now] {
    background: rgba(255, 100, 87, .06);
    outline-color: var(--foam);
    box-shadow: 0 0 0 3px rgba(255, 100, 87, .10);
}

/* Chart-paper grid: re-tint with red instead of cream */
[data-helm="red"] .card,
[data-helm="red"] .helm-form,
[data-helm="red"] .tide-card,
[data-helm="red"] .day-band,
[data-helm="red"] .results,
[data-helm="red"] .dial,
[data-helm="red"] .admin__bar,
[data-helm="red"] .admin__card,
[data-helm="red"] .admin__tile {
    background-image:
        linear-gradient(rgba(255, 100, 87, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 100, 87, .04) 1px, transparent 1px);
}

/* Track + arc + glyph helpers in red mode */
[data-helm="red"] .dial__track { stroke: rgba(255, 100, 87, .08) }
[data-helm="red"] .dial__arc { filter: drop-shadow(0 0 6px rgba(255, 80, 64, .25)) }

/* Per-hour Go/No-Go pill — preserve intensity contrast */
[data-helm="red"] .row-gng[data-verdict="go"] {
    color: var(--seaglass);
    background: rgba(138, 47, 40, .25);
    border-color: rgba(138, 47, 40, .55);
}
[data-helm="red"] .row-gng[data-verdict="no"] {
    color: var(--signal);
    background: rgba(255, 80, 64, .18);
    border-color: rgba(255, 80, 64, .45);
}

/* Bridge Watch detail panel — re-tint dividers + hover from cream to red */
[data-helm="red"] .bridge__detail { border-top-color: rgba(255, 100, 87, .18) }
[data-helm="red"] .bridge__detail-item { border-bottom-color: rgba(255, 100, 87, .1) }
[data-helm="red"] .bridge__summary:hover { background: rgba(255, 100, 87, .05) }

/* Compass rose stays subtle */
[data-helm="red"] .compass-rose { opacity: .08 }

/* Active day-scroller pill keeps the brass→hull inversion (vivid red on near-black) */
[data-helm="red"] .day-scroller__pill--active {
    background: var(--brass);
    color: var(--hull);
}

/* QR flyout in red mode — keep the QR backing white (codes need contrast to scan),
 * but tint the placeholder, the backdrop, the chart-paper grid, and inputs.
 * The QR image itself is unaffected (it's a static PNG/SVG).
 */
[data-helm="red"] .qr-flyout::backdrop {
    background: rgba(10, 2, 2, .85);
}
[data-helm="red"] .qr-flyout__inner {
    background-image:
        linear-gradient(rgba(255, 100, 87, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 100, 87, .04) 1px, transparent 1px);
}
[data-helm="red"] .qr-flyout__copy,
[data-helm="red"] .qr-flyout__placeholder,
[data-helm="red"] .qr-flyout__close:hover {
    background: rgba(10, 2, 2, .55);
    border-color: rgba(255, 100, 87, .15);
}

/* ---------- Accessibility / motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .compass-rose .compass-spin,
    .day-band__now::after {
        animation: none !important;
    }
}