*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    margin:0;
    color:#173042;
    background:#dce9e7;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}

button,input,select{font:inherit;}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link{
    position:fixed;
    top:8px;
    left:8px;
    z-index:5000;
    padding:10px 14px;
    border-radius:8px;
    background:#fff;
    color:#073b4c;
    transform:translateY(-150%);
}
.skip-link:focus{transform:none;}

#map{
    height:100vh;
}

.controls{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;

    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;

    width:calc(100% - 40px);
    max-width:1180px;

    background:rgba(248,252,250,.96);
    padding:10px 14px;

    border-radius:12px;
    border:1px solid rgba(7,59,76,.14);

    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
    color:#073b4c;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.brand-mark{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#073b4c;
    color:#90e0c1;
    font-size:25px;
}

.search-field{display:flex;flex:1;min-width:200px;}

.controls input{
    flex:1;
    width:100%;
    min-width:180px;
    min-height:44px;
    padding:10px 12px 10px 38px;
    border-radius:8px;
    border:1px solid #9cb6b4;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23526b69' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='m12 12 4 4'/%3E%3C/svg%3E") no-repeat 12px center;
}

.controls select{
    min-width:180px;
    min-height:44px;
    padding:10px 34px 10px 10px;
    border-radius:8px;
    border:1px solid #9cb6b4;
    background:#fff;
}

.controls button{
    min-height:44px;
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#0b6b61;
    color:white;
    white-space:nowrap;
    flex-shrink:0;
}

.controls button:hover{
    background:#074e48;
}

.controls button[aria-pressed="true"]{
    background:#073b4c;
    box-shadow:inset 0 0 0 2px white;
}

.controls .favourite-filter{
    border:1px solid #d5a629;
    background:#fff9df;
    color:#7a4e00;
}
.controls .favourite-filter:hover{background:#ffefae;}
.controls .favourite-filter[aria-pressed="true"]{background:#7a4e00;color:#fff;}

.leaflet-top.leaflet-left{
    top:78px;
}

.panel{
    position:fixed;
    top:88px;
    right:0;

    width:min(390px, calc(100vw - 32px));
    height:auto;
    max-height:calc(100dvh - 100px);

    background:white;
    z-index:2000;

    padding:14px;
    border-radius:18px 0 0 18px;

    overflow-y:auto;
    overscroll-behavior:contain;

    box-shadow:
    -3px 0 10px rgba(0,0,0,.2);
}

.hidden{
    display:none !important;
}

.panel-header{
    position:sticky;
    top:-14px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
    margin-bottom:10px;
    padding-top:4px;
    background:white;
    font-weight:bold;
}

#panel-title{font-size:19px;letter-spacing:-.01em;}

#panel-title{
    min-width:0;
    margin-right:8px;
    overflow-wrap:anywhere;
}

.panel-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.panel-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f2f4f7;
    color:#101828;
    cursor:pointer;
    font-size:18px;
}
.panel-action:hover{background:#e7eeec;}

.panel-action[aria-pressed="true"]{
    background:#fff4d6;
    color:#b54708;
}

#favourite-location{color:#05B0B0;}
#favourite-location .panel-favourite-star{fill:transparent;}
#favourite-location[aria-pressed="true"]{color:#05B0B0;}
#favourite-location[aria-pressed="true"] .panel-favourite-star{fill:currentColor;}

.sheet-handle{
    display:none;
}

.spot-meta{
    margin:0 0 14px;
    color:#101828;
    font-size:14px;
}

.spot-meta-line + .spot-meta-line{
    margin-top:5px;
}

.spot-meta-label{
    color:#101828;
    font-weight:700;
}

.section-title{
    margin:20px 0 10px;
    font-size:17px;
}

.score-card{
    overflow:visible;
    border:1px solid #f79009;
    border-radius:14px;
    background:#fffdfa;
}

.score-upper{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:126px;
    border-bottom:1px solid #f79009;
}

.score-upper::after{
    content:"";
    position:absolute;
    top:14px;
    bottom:14px;
    left:50%;
    width:1px;
    background:#f79009;
    transform:translateX(-.5px);
}

.score-meter{
    position:relative;
    min-width:0;
    padding:16px 10px;
}

.score-extra{
    min-width:0;
}

.score-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) 16px;
    align-items:start;
    column-gap:8px;
}

.score-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
}

.score-value{
    color:#f79009;
    font-size:19px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}

.score-rating{
    min-width:0;
    padding-left:0;
    border-left:0;
    font-size:13px;
    font-weight:700;
    line-height:15px;
    white-space:nowrap;
}

.score-help{
    position:relative;
    z-index:2;
    justify-self:end;
    margin:0;
}

.score-help summary{
    display:flex;
    align-items:center;
    justify-content:center;
    width:19.8px;
    height:19.8px;
    border:1px solid #7a2e0e;
    border-radius:50%;
    background:#fff;
    color:#7a2e0e;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
    list-style:none;
}

.score-help summary::-webkit-details-marker{
    display:none;
}

.score-help-text{
    position:absolute;
    top:30px;
    left:50%;
    right:auto;
    z-index:10;
    width:230px;
    padding:10px 32px 10px 12px;
    border:1px solid var(--brand-cyan);
    border-radius:10px;
    background:#fff;
    box-shadow:0 6px 18px rgba(16,24,40,.16);
    color:#344054;
    font-size:13px;
    font-weight:400;
    line-height:1.4;
    transform:translateX(-58%);
}

.score-help-close{
    position:absolute;
    top:6px;
    right:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    padding:0;
    border:1px solid #b54708;
    border-radius:50%;
    background:#fff;
    color:#b54708;
    font-size:15px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}

.score-track{
    position:relative;
    height:8px;
    margin:36px 0 0;
    border-radius:999px;
    background:linear-gradient(90deg,#ff2d20 0%,#ff8a00 25%,#ffd600 50%,#a8d900 75%,#42c72d 100%);
}

.score-marker{
    position:absolute;
    left:clamp(7px,var(--score-position),calc(100% - 7px));
    bottom:calc(100% + 3px);
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:10px solid #b54708;
    transform:translateX(-50%);
}

.score-marker::after{
    content:"";
    position:absolute;
    left:-4px;
    bottom:3px;
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:7px solid #fffdfa;
}

.best-time{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:12px 16px 14px;
    color:#9b2418;
    font-size:14px;
    white-space:nowrap;
}

.best-time strong{
    display:inline;
    margin-top:0;
    color:#344054;
    font-size:16px;
}

.conditions-card{
    padding:12px;
    border:1px solid #42cfc7;
    border-radius:12px;
    background:#f7fffd;
}

.tide-card{
    padding:12px;
    border:1px solid #e4e7ec;
    border-radius:12px;
    background:#f9fafb;
}

.conditions-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding-bottom:12px;
    border-bottom:1px solid #72d9d4;
}

.condition-card{
    display:grid;
    grid-template-rows:15px 44px auto auto;
    align-items:start;
    min-width:0;
    padding:0 12px;
}

.weather-summary{
    margin-top:-2px;
    color:#344054;
    font-size:9px;
    font-weight:600;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
}

.weather-visual{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:translateX(-10px);
}

.weather-visual .weather-sign{
    transform:none;
}

.condition-card:first-child{
    padding-left:0;
    border-right:1px solid #42cfc7;
}

.condition-card:last-child{
    padding-right:0;
}

.conditions-moon{
    padding-top:12px;
}

.condition-label,
.supporting-text{
    color:#2434b4;
    font-size:12px;
}

.conditions-grid .condition-label{
    line-height:15px;
    white-space:nowrap;
}

.condition-value{
    color:#344054;
    margin-top:4px;
    font-size:17px;
    font-weight:700;
    line-height:20px;
}

.conditions-grid .condition-value{
    margin-top:0;
}

.conditions-grid > .condition-card > .condition-value{
    align-self:center;
}

.weather-condition-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:8px;
    height:44px;
}

.weather-sign{
    justify-self:center;
    transform:translateX(-10px);
    width:34px;
    height:30.8px;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.weather-sign .weather-cloud{
    fill:#fafdff;
}

.weather-sign .weather-cloud,
.weather-sign .weather-rain{
    stroke:#1570ef;
    stroke-width:2.5;
}

.weather-sign .weather-sun{
    stroke:#f79009;
    stroke-width:2.5;
}

.weather-sign .weather-rain-heavy{
    stroke-width:3.5;
}

.weather-sign .weather-snow{
    stroke:#1570ef;
    stroke-width:2;
}

.weather-sign .weather-hail{
    fill:#d0d5dd;
    stroke:#1570ef;
    stroke-width:1.5;
}

.wind-direction{
    font-size:11px;
    font-weight:700;
}

.wind-direction.north{
    color:#175cd3;
}

.wind-direction.south{
    color:#d92d20;
}

.wind-direction.east-west{
    color:#101828;
}

.moon-primary{
    display:flex;
    align-items:center;
    gap:8px;
    color:#344054;
    font-size:14px;
    font-weight:700;
    line-height:18px;
}

.moon-phase-icon{
    flex:0 0 auto;
    width:15.4px;
    height:15.4px;
}

.moon-phase-light{
    fill:#f5c842;
}

.moon-phase-shadow{
    fill:#d9dee0;
}

.moon-phase-outline{
    fill:none;
    stroke:#82929a;
    stroke-width:1.5;
}

.moon-events{
    margin-top:6px;
    color:#2434b4;
    font-size:13px;
}

.tide-card{
    border-color:#67b7ff;
    background:#f5faff;
}

.tide-now{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.tide-summary{
    min-width:0;
}

.tide-now-values{
    display:flex;
    align-items:baseline;
    gap:12px;
}

.tide-height{
    color:#344054;
    margin-top:4px;
    font-size:17px;
    font-weight:700;
}

.tide-strength{
    margin-top:0;
    color:#344054;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.tide-help{
    align-self:center;
}

.tide-help-text{
    left:auto;
    right:-4px;
    width:min(215px, calc(100vw - 110px));
    padding:8px 26px 8px 10px;
    font-size:11px;
    line-height:1.35;
    transform:none;
}

.tide-help-text .score-help-close{
    top:5px;
    right:5px;
    width:17px;
    height:17px;
    font-size:13px;
}

.tide-trend{
    padding:5px 9px;
    border-radius:999px;
    background:#dff4ff;
    color:#026aa2;
    font-size:13px;
    font-weight:700;
    text-transform:capitalize;
}

.tide-events{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #67b7ff;
}

.tide-events-header{
    margin-bottom:5px;
    color:#2434b4;
    font-size:12px;
    font-weight:400;
}

.tide-event{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;
    gap:12px;
    padding-top:6px;
    font-size:17px;
    line-height:20px;
}

.tide-event > span{
    white-space:nowrap;
}

.tide-event > span:last-child{
    text-align:right;
}

.tide-event b{
    color:#344054;
}

.data-source{
    margin-top:8px;
    color:#2434b4;
    font-size:11px;
}

.data-source a{
    color:inherit;
}

.custom-marker .marker{
    box-sizing:border-box;
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid white;
    background:#FEA015;
    box-shadow:0 1px 4px rgba(1,36,87,.35);
}

.custom-marker .marker.favourite{
    display:grid;
    place-items:center;
    width:17.6px;
    height:17.6px;
    border:0;
    background:#0066CB;
    box-shadow:0 0 0 2.2px #05B0B0,0 1px 4px rgba(1,36,87,.4);
}

.custom-marker .marker.favourite svg{
    width:17.6px;
    height:17.6px;
    overflow:visible;
}

.marker.favourite .fish-shape,.marker.favourite .fish-fin{fill:white;}
.marker.favourite .fish-eye{fill:#0066CB;}

.map-status{
    position:absolute;
    left:50%;
    bottom:max(20px, env(safe-area-inset-bottom));
    z-index:1000;
    transform:translateX(-50%);
    max-width:calc(100% - 40px);
    padding:9px 12px;
    border:1px solid #d0d5dd;
    border-radius:10px;
    background:#fff;
    color:#344054;
    font-size:13px;
    box-shadow:0 4px 12px rgba(16,24,40,.12);
}

.panel-state{
    padding:10px 0;
    color:#667085;
    font-size:13px;
}

.panel-state[role="alert"]{
    color:#b42318;
}

.no-tide{
    margin-top:10px;
    padding:10px;
    border-radius:8px;
    background:#f3f7fb;
    color:#555;
}

.retry-button{
    margin-left:8px;
    padding:4px 8px;
    border:1px solid #d0d5dd;
    border-radius:6px;
    background:#fff;
    color:#344054;
    cursor:pointer;
}

.app-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    z-index:3000;
    transform:translateX(-50%);
    max-width:calc(100% - 32px);
    padding:10px 14px;
    border-radius:10px;
    background:#101828;
    color:white;
    font-size:14px;
    box-shadow:0 6px 18px rgba(16,24,40,.25);
}

.no-forecast{
    margin-top:12px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible{
    outline:3px solid rgba(44,123,229,.35);
    outline-offset:2px;
}

@media (max-width:720px){
    .controls{
        top:8px;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:calc(100% - 16px);
        gap:8px;
        padding:8px;
    }

    .brand{grid-column:1 / -1;justify-content:center;}

    .brand-mark{width:30px;height:30px;font-size:22px;}

    .search-field{
        grid-column:1 / -1;
        min-width:0;
    }

    .controls input{min-width:0;}

    .controls select{
        min-width:0;
        width:100%;
    }

    .controls button{
        width:100%;
        padding-inline:8px;
    }

    #near-me{grid-column:1 / 3;}

    #show-favourites{grid-column:3;}

    .leaflet-top.leaflet-left{
        top:210px;
    }

    .panel{
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        height:min(78dvh,720px);
        padding:8px 12px calc(12px + env(safe-area-inset-bottom));
        border-radius:18px 18px 0 0;
        box-shadow:0 -8px 28px rgba(16,24,40,.22);
        overscroll-behavior:contain;
    }

    body.panel-open{overflow:hidden;}

    .sheet-handle{
        display:block;
        position:sticky;
        top:-8px;
        z-index:21;
        width:42px;
        height:5px;
        margin:0 auto 2px;
        border-radius:999px;
        background:#d0d5dd;
    }

    .panel-header{
        top:-8px;
        min-height:48px;
    }

    .panel-action{
        width:44px;
        height:44px;
    }

    body:has(.panel:not(.hidden)) .map-status{
        bottom:calc(78dvh + 10px);
    }
}

@media (max-width:380px){
    .controls{gap:6px;}
    .controls button{font-size:13px;}
    .panel{
        width:100%;
    }

    .score-upper{
        grid-template-columns:58% 42%;
    }

    .score-upper::after{
        left:58%;
    }

    .score-rating{
        font-size:12px;
    }

    .best-time{
        gap:6px;
        padding-inline:12px;
        font-size:12px;
    }

    .best-time strong{
        font-size:14px;
    }

    .tide-event{
        gap:8px;
        font-size:14px;
    }
}

@media (min-width:721px) and (max-width:1024px){
    .panel{
        top:88px;
        width:380px;
        max-height:calc(100dvh - 100px);
    }

    .leaflet-top.leaflet-left{
        top:78px;
    }
}

@media (pointer:coarse){
    .controls input,
    .controls select,
    .controls button,
    .retry-button{
        min-height:44px;
    }
}

@media (forced-colors:active){
    .custom-marker .marker,.panel,.controls{border:2px solid CanvasText;}
    .score-track{background:CanvasText;}
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}

/* CatchNow: Figma brand palette and responsive map surface. */
:root{
    --brand-navy:#000a1d;
    --brand-deep-blue:#012457;
    --brand-ocean:#01a0f7;
    --brand-cyan:#00d5ea;
    --brand-teal:#05b0b0;
    --brand-off-white:#e4ebf2;
    --header-height:128px;
    --panel-top:174px;
}
body{color:var(--brand-deep-blue);font-family:Poppins,ui-sans-serif,system-ui,sans-serif;overflow:hidden;}
.site-header{position:relative;z-index:1100;height:var(--header-height);display:flex;align-items:flex-start;gap:48px;padding:12px 24px;background:linear-gradient(110deg,var(--brand-navy),#04116c 78%,#061e9a);isolation:isolate;}
.site-header::before,.site-header::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;}
.site-header::before{background:linear-gradient(110deg,#012457,#01a0f7);clip-path:polygon(0 100%,35% 65%,58% 85%,79% 59%,100% 20%,100% 100%);}
.site-header::after{background:linear-gradient(100deg,#05b0b070,#00d5ea80);clip-path:polygon(0 100%,44% 84%,68% 61%,100% 89%,100% 100%);}
.site-header .brand{display:block;flex:none;width:190px;height:76px;}
.brand img{display:block;width:190px;height:76px;object-fit:cover;object-position:center 38%;border-radius:4px;}
.primary-nav{display:flex;align-items:center;gap:26px;padding-top:6px;}
.primary-nav a,.primary-nav button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:white;text-decoration:none;font-size:12px;cursor:pointer;white-space:nowrap;}
.primary-nav a:hover,.primary-nav button:hover{color:var(--brand-cyan);}
.primary-nav [aria-current]{color:var(--brand-cyan);}
.header-actions{margin-left:auto;display:flex;gap:4px;padding-top:6px;}
.header-action{width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--brand-cyan);font-size:25px;cursor:pointer;border-radius:8px;}
.header-action:hover,.header-action[aria-pressed="true"]{background:#00d5ea24;}
.header-action[aria-pressed="true"]{color:white;}
.menu-toggle{display:none;}
#map{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));}
.controls{top:calc(var(--header-height) - 24px);z-index:1200;display:flex;flex-wrap:nowrap;gap:8px;width:calc(100% - 80px);max-width:840px;padding:8px;border:1px solid #00d5ea80;border-radius:12px;background:var(--brand-teal);box-shadow:0 4px 12px #01245720;}
.controls select,.controls input,.controls button{min-height:44px;border:1px solid #d0eeee;border-radius:7px;background-color:#fff;color:var(--brand-deep-blue);font-size:13px;}
.controls select{flex:1;min-width:0;width:160px;}
.controls .search-field{flex:1.4;min-width:0;}
.controls input{min-width:0;padding:10px 12px;background-image:none;}
.controls button{padding:10px 16px;font-weight:600;}
.controls button:hover{background:#e9ffff;color:var(--brand-deep-blue);}
.controls button:disabled{opacity:.65;cursor:wait;}
#near-me{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.leaflet-top.leaflet-left{top:28px;}
.panel{top:var(--panel-top);right:18px;width:360px;max-height:calc(100dvh - var(--panel-top) - 18px);padding:12px;border:1px solid var(--brand-teal);border-radius:12px;box-shadow:0 4px 20px #01245720;scrollbar-width:thin;scrollbar-color:#9cdddd white;}
.panel-header{top:-12px;min-height:44px;padding-top:0;margin-bottom:14px;gap:6px;}
#panel-title{font-size:16px;line-height:1.45;font-weight:600;margin-right:0;}
.panel-actions{gap:2px;}
.panel-action{flex:none;width:32px;height:36px;border-radius:7px;background:#effcfc;color:#079caa;font-size:20px;}
.panel-action:hover{background:#daf7f7;}
.panel-action[aria-pressed="true"]{background:#ddf9f9;color:#047f88;}
.spot-meta{margin-bottom:24px;font-size:12px;line-height:18px;color:var(--brand-deep-blue);}
.spot-meta-label{font-weight:400;color:inherit;}
.spot-meta-line + .spot-meta-line{margin-top:4px;}
.section-title{margin:12px 0 8px;font-size:13px;font-weight:600;}
.score-card{border-color:var(--brand-teal);border-radius:11px;background:#fffdfa;}
.score-upper{min-height:93px;margin:0 12px;border-bottom-color:#ff8000;}
.score-upper::after{top:14px;bottom:12px;background:#ff8000;}
.score-meter{padding:10px 12px 12px 0;}
.score-card .score-copy{gap:0;}
.score-card .score-help{margin-top:6px;}
.score-card .score-help summary{border-color:#b53500;color:#b53500;}
.score-value{font-size:19px;line-height:24px;color:#ff8000;font-weight:800;}
.score-rating{font-size:12px;line-height:18px;font-weight:600;color:var(--brand-deep-blue);white-space:normal;}
.score-track{height:8px;margin-top:20px;}
.best-time{justify-content:center;align-items:baseline;flex-wrap:wrap;gap:6px 28px;padding:7px 10px;font-size:13px;line-height:18px;color:#b53500;white-space:normal;}
.best-time strong{font-size:13px;line-height:18px;font-weight:600;color:var(--brand-deep-blue);font-variant-numeric:tabular-nums;}
.conditions-card,.tide-card{padding:10px;border-color:var(--brand-teal);border-radius:11px;}
.condition-card{padding:0 10px;grid-template-rows:15px 38px auto auto;}
.conditions-grid{padding-bottom:8px;}
.condition-value,.tide-height{font-size:15px;color:var(--brand-deep-blue);}
.condition-label,.supporting-text,.tide-events-header{font-size:10px;color:var(--brand-deep-blue);}
.weather-condition-row{height:38px;gap:4px;}
.weather-visual{transform:none;}
.weather-summary{font-size:9px;}
.conditions-moon{padding-top:7px;}
.moon-primary{font-size:12px;color:var(--brand-deep-blue);}
.moon-events{font-size:10px;color:var(--brand-deep-blue);}
.data-source{font-size:8px;margin-top:8px;color:var(--brand-deep-blue);}
.tide-now{flex-wrap:wrap;gap:5px;}
.tide-now-values{gap:6px;flex-wrap:wrap;}
.tide-strength{font-size:12px;white-space:normal;}
.tide-trend{margin-left:auto;font-size:10px;padding:3px 6px;}
.tide-events{margin-top:8px;padding-top:8px;}
.tide-event{font-size:12px;gap:6px;line-height:18px;padding-top:4px;}
.directions-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;min-height:38px;border:1px solid var(--brand-teal);border-radius:8px;color:var(--brand-deep-blue);font-size:12px;font-weight:600;text-decoration:none;}
.directions-link:hover{background:#eaffff;}
.map-status{font-family:inherit;font-size:11px;border:0;}
a:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:3px;}
@media (min-width:721px) and (max-width:1024px){
    .site-header{gap:24px;padding-inline:16px;}
    .primary-nav{gap:18px;}
    .panel{top:var(--panel-top);width:350px;max-height:calc(100dvh - var(--panel-top) - 16px);}
    .leaflet-top.leaflet-left{top:40px;}
}
@media (max-width:720px){
    :root{--header-height:104px;}
    .site-header{padding:4px 12px;gap:8px;}
    .site-header .brand,.brand img{width:164px;height:70px;}
    .header-actions{padding-top:8px;}
    .menu-toggle{display:block;}
    .primary-nav{display:none;position:absolute;top:62px;right:12px;min-width:190px;padding:10px 18px;border:1px solid #00d5ea60;border-radius:10px;background:var(--brand-deep-blue);box-shadow:0 8px 24px #000a1d40;}
    .site-header:has(.menu-toggle[aria-expanded="true"]){z-index:1300;}
    .primary-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;}
    .controls{top:80px;width:calc(100% - 24px);max-width:520px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:6px;padding:6px;}
    .controls select{width:100%;font-size:12px;}
    .controls .search-field{grid-column:1 / 3;grid-row:2;}
    .controls input{font-size:12px;}
    .controls button{padding-inline:10px;font-size:12px;}
    #apply-filters{grid-column:3;grid-row:2;}
    #near-me{grid-column:3;grid-row:1;}
    .leaflet-top.leaflet-left{top:92px;}
    .panel{top:auto;right:0;left:0;bottom:0;width:100%;height:min(78dvh,720px);max-height:calc(100dvh - 70px);padding:8px 14px calc(14px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;}
    .panel-header{top:-8px;min-height:48px;margin-bottom:10px;}
    .panel-action{width:44px;height:44px;}
    #panel-title{font-size:15px;}
    .spot-meta{margin-bottom:16px;}
    .directions-link{min-height:44px;}
    .score-help summary{min-width:24px;min-height:24px;}
    .score-summary{grid-template-columns:minmax(0,1fr) 24px;}
    .score-help-text{left:auto;right:-24px;transform:none;width:min(230px,calc(100vw - 44px));}
    .tide-help-text{right:-4px;width:min(215px, calc(100vw - 110px));}
    body:has(.panel:not(.hidden)) .map-status{display:none;}
}
@media (pointer:coarse){.panel-action{width:44px;height:44px;}}

/* Keep the condition below both the score and help icon. */
.score-card .score-copy{display:contents;}
.score-card .score-value{grid-column:1;grid-row:1;}
.score-card .score-rating{grid-column:1 / -1;grid-row:2;white-space:nowrap;font-size:12px;letter-spacing:-.2px;}
.score-card .score-help{grid-column:2;grid-row:1;}
.score-card .best-time{color:#b52e00;column-gap:20px;}
@media(max-width:380px){.score-card .score-rating{font-size:11px;}}

/* Wind: centred speed and two-colour compass, matching the design. */
.wind-card .condition-value{text-align:center;font-size:16px;font-weight:600;width:100%;}
.wind-bearing{display:flex;align-items:center;justify-content:center;gap:14px;font-size:10px;line-height:20px;color:var(--brand-deep-blue);white-space:nowrap;}
.wind-compass{display:block;flex:none;width:19px;height:19px;}

/* Centre temperature in the left half of the weather row. */
.weather-condition-row > .condition-value{width:100%;text-align:center;}

/* Moon typography matched to the supplied panel reference. */
.conditions-moon .moon-primary{font-size:14px;line-height:21px;font-weight:600;gap:12px;margin-top:3px;color:var(--brand-deep-blue);}
.conditions-moon .moon-events{font-size:12px;line-height:18px;font-weight:400;margin-top:2px;color:var(--brand-deep-blue);}
.conditions-moon .data-source{margin-top:10px;}

/* Match the tide card to the 193px conditions card above. */
.conditions-card,.tide-card{min-height:193px;}
.tide-card{display:flex;flex-direction:column;}
.tide-card .tide-events{margin-top:auto;}

/* Panel proportions and tide rows from the supplied comparison. */
.panel-header{min-height:32px;margin-bottom:24px;}
.panel-actions{gap:6px;}
.panel-action{width:28px;height:28px;border-radius:8px;font-size:23px;}
.panel-action svg{width:17px;height:17px;}
.section-title{margin:12px 10px 10px;font-size:14px;line-height:20px;}
.conditions-card,.tide-card{padding-inline:16px;}
.weather-summary{font-size:10px;font-weight:400;}
.tide-now{position:relative;display:block;padding-bottom:22px;}
.tide-now-values{gap:6px;align-items:baseline;}
.tide-height,.tide-strength{font-size:14px;font-weight:600;color:var(--brand-deep-blue);}
.tide-trend{position:absolute;right:0;bottom:0;font-size:11px;font-weight:500;}
.tide-events-header{font-size:10px;margin-bottom:7px;}
.tide-event{grid-template-columns:minmax(0,1fr) auto;font-size:14px;line-height:21px;font-weight:600;color:var(--brand-deep-blue);gap:6px;padding-top:3px;font-variant-numeric:tabular-nums;}
.tide-event b{color:inherit;font-weight:600;}
.tide-event-kind{display:inline-block;min-width:38px;text-decoration:underline;text-underline-offset:2px;}
.tide-event-arrow{display:inline-block;min-width:17px;}
.tide-event .tide-event-reading{display:flex;align-items:baseline;gap:3px;}
.directions-link{font-size:14px;min-height:34px;margin-top:8px;}
@media(max-width:380px){.tide-event{font-size:12px;}.tide-event-kind{min-width:32px;}.tide-event-arrow{min-width:12px;}}
@media(pointer:coarse){.panel-action{width:44px;height:44px;}.directions-link{min-height:44px;}}

/* Tide reference: compact circular help and centred direction arrows. */
.tide-now .tide-help{align-self:center;display:flex;align-items:center;}
.tide-now .tide-help > summary{width:14px;height:14px;min-width:14px;min-height:14px;flex:none;padding:0;border:1.5px solid #b53500;color:#b53500;background:transparent;font-family:Arial,sans-serif;font-size:10px;line-height:1;font-weight:700;}
.tide-event .tide-event-reading{align-items:center;}
.tide-event-arrow{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:21px;line-height:1;font-family:Arial,sans-serif;font-size:16px;font-weight:600;}

/* Keep day labels separate so every forecast time shares one column. */
.tide-event > .tide-event-time{display:grid;grid-template-columns:auto 76px;align-items:center;gap:5px;}
.tide-event-clock{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tide-event-day{text-align:right;}
@media(max-width:380px){.tide-event > .tide-event-time{grid-template-columns:auto 66px;gap:4px;}}

/* Score help icon matched to the reference. */
.score-card .score-help > summary{width:14px;height:14px;min-width:14px;min-height:14px;padding:0;border:1.5px solid #b53500;border-radius:50%;background:transparent;color:#b53500;font-family:Arial,sans-serif;font-size:10px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}

/* Keep location failures visible beside the filters. */
.map-status.location-notice{position:fixed;top:180px;bottom:auto;left:50%;transform:translateX(-50%);font-size:13px;padding:12px 18px;border:1px solid var(--brand-teal);max-width:calc(100% - 80px);}
@media(max-width:720px){.map-status.location-notice{top:192px;width:calc(100% - 24px);max-width:none;}}

/* Cyan outline for the outer location panel. */
.panel{border-color:var(--brand-cyan);}

/* Direction button: stronger cyan fill and hover feedback. */
.directions-link{background:#eaffff;transition:background-color .15s ease;}
.directions-link:hover{background:#d8f7f9;}
.directions-link:active{background:#caeff2;}

/* Anchor the non-tidal explanation to its card and open it upwards. */
.no-tide{position:relative;}
.no-tide .tide-help{position:static;}
.no-tide .tide-help-text{top:auto;bottom:calc(100% + 8px);left:0;right:auto;width:min(260px,100%);max-width:100%;transform:none;}

/* Consistent typography across score and tide explanations. */
.score-help-text,.tide-help-text{font-size:13px;line-height:1.4;font-weight:400;}

/* Render the small raster tagline as readable live text. */
.site-header .brand{position:relative;z-index:0;}
.brand-tagline{position:absolute;left:34%;right:7%;top:57%;bottom:0;padding:2px 0 0;background:#000a1d;color:#fff;font-family:Arial,sans-serif;font-size:10.5px;font-weight:500;line-height:1.3;text-align:center;white-space:nowrap;border-radius:0 0 4px 0;}
.brand-tagline-top{display:flex;justify-content:space-between;color:#fff;}
.brand-tagline-end{display:block;color:#00d5ea;}
@media(max-width:720px){.brand-tagline{font-size:9px;}}
.mobile-app .brand-tagline{font-size:8px;}

/* Align the wordmark and tagline as one rectangular text block. */
.brand-copy{position:absolute;left:34%;right:7%;top:4%;bottom:5%;display:flex;flex-direction:column;justify-content:space-between;background:#000a1d;}
.brand-wordmark{display:block;width:100%;height:auto;aspect-ratio:294 / 69;flex:none;}
.brand-copy .brand-tagline{position:static;display:block;padding:0;border-radius:0;width:100%;line-height:1.25;transform:translateY(-8px);}

/* Add space between the symbol and the full text block. */
.site-header .brand{background:#000a1d;border-radius:4px;}
.site-header .brand > img{clip-path:inset(0 66% 0 0);}
.brand-copy{transform:translateX(20%);}

/* Keep header controls above the decorative waves. */
.site-header .primary-nav,.site-header .header-actions{z-index:2;}