@import url('fonts.css?v=521d1ccaec37');
:root{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--text);background:#111f28;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;font-size:var(--text-14);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button,a,input,select{touch-action:manipulation}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}::selection{background:var(--accent);color:var(--bg)}*{scrollbar-width:thin;scrollbar-color:#354d40 transparent}h1,h2,h3,p{margin:0}h1{font-weight:500;font-size:var(--text-34);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}h2{font-size:var(--text-24);line-height:1.2;font-weight:500;letter-spacing:-.025em}h3{font-size:var(--text-18);font-weight:500}p{color:var(--muted)}small{font-size:var(--text-12);color:var(--muted)}svg.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.review-sidebar{position:fixed;left:42px;top:48px;bottom:40px;width:210px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;font-size:var(--text-24);font-weight:600;letter-spacing:-1px}.brand img{width:36px;height:36px;object-fit:contain;}.review-caption{font-size:var(--text-12);margin-top:8px}#prototype-nav{display:flex;flex-direction:column;gap:5px;margin-top:32px;overflow:auto}.nav-group{font-size:10px;letter-spacing:1.5px;color:var(--muted);margin:18px 0 8px 13px}.nav-group:first-child{margin-top:0}.prototype-chip{text-align:left;padding:9px 13px;border-radius:999px;font-size:var(--text-12);color:var(--muted);display:flex;gap:13px}.prototype-chip span{font-size:10px;width:15px;padding-top:3px}.prototype-chip.active{color:#062a30;background:var(--accent)}.prototype-chip:hover:not(.active){background:var(--surface);color:var(--text)}footer{margin-top:auto;padding-top:24px;font-size:10px;letter-spacing:1.3px}footer small{display:block;letter-spacing:0;margin-top:6px;font-size:11px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:6px}.viewport-controls{position:fixed;right:30px;top:30px;display:flex;flex-direction:column;gap:10px}.icon-btn{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;flex-shrink:0}.icon-btn:hover{background:var(--raised)}.phone-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:42px 0;margin-left:150px}.phone-shell{position:relative;width:390px;height:844px;border-radius:52px;background:var(--bg);overflow:hidden;box-shadow:0 0 0 1px #57717a,0 0 0 10px #1b2b32,0 0 0 11px #344852,0 32px 80px #0006;flex-shrink:0}.status-bar{height:56px;padding:17px 26px 0;position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;font-size:var(--text-14);font-weight:600;pointer-events:none;background:var(--bg)}.island{position:absolute;width:116px;height:29px;top:10px;left:137px;border-radius:30px;background:#000}.status-symbols{display:flex;align-items:center;gap:5px;height:20px;font-size:10px}.status-symbols svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:2}.home-indicator{position:absolute;bottom:8px;left:130px;width:130px;height:5px;border-radius:8px;background:#e6f1f4;z-index:5;pointer-events:none}#app{position:absolute;inset:56px 0 0;display:flex;flex-direction:column}.screen{height:100%;display:flex;flex-direction:column;animation:arrive .25s ease-out}.screen-body{padding:20px 24px;overflow:auto;flex:1;min-height:0}.step-header{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 16px}.step-header .icon-btn{width:44px;height:44px}.step-count{font-size:var(--text-12);color:var(--muted)}.step-progress{display:flex;gap:5px;margin:0 24px 6px}.step-progress span{height:3px;background:var(--border);flex:1;border-radius:5px}.step-progress .done{background:var(--accent)}.intro{margin:12px 0 25px}.intro p{margin-top:12px;line-height:1.6}.actions{padding:14px 24px 31px;background:var(--bg);flex-shrink:0}.primary,.secondary{min-height:var(--control-height);width:100%;padding:14px 20px;border-radius:var(--radius-control);line-height:22px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}.primary{background:var(--accent);color:var(--primary-ink);box-shadow:0 5px 20px #12cffa19}.primary:hover{background:var(--primary-hover)}.primary:active{transform:scale(.985)}.secondary{background:#162f39;border:1px solid #3d5964}.secondary:hover{background:#22424d}.text-btn{padding:12px;min-height:44px;color:var(--muted)}.actions .footnote{font-size:var(--text-12);text-align:center;margin-top:12px}.options{display:grid;gap:10px}.option{min-height:73px;width:100%;padding:15px 16px;border:1px solid var(--border);border-radius:var(--radius-card);display:flex;align-items:center;gap:14px;text-align:left;background:#10242e}.option .icon{color:var(--muted)}.option strong{display:block;font-size:var(--text-16);font-weight:500}.option small{display:block;font-size:var(--text-12);margin-top:3px}.option .radio{width:20px;height:20px;border:1px solid #647d86;border-radius:50%;margin-left:auto;flex-shrink:0}.option[aria-pressed=true]{background:color-mix(in srgb,var(--accent-dim) 30%,transparent);border-color:var(--accent)}.option[aria-pressed=true] .radio{background:var(--accent);border:5px solid #164455;outline:1px solid var(--accent)}.option[aria-pressed=true] .icon{color:var(--accent)}.field{display:block;margin:18px 0}.field>span,.field-label{display:block;margin-bottom:8px;font-size:var(--text-13);font-weight:600;color:#c5d8df}.field input,.field select,button.water-search-entry,.water-map-top .water-search{width:100%;height:var(--control-height);padding:0 15px;border:1px solid var(--field-border);background:var(--surface);color:var(--text);border-radius:var(--radius-field);caret-color:var(--accent)}input::placeholder{color:#a2b8c2}.field small{display:block;margin-top:7px}.field input[aria-invalid=true]{border-color:var(--error)}.error{color:var(--error);font-size:var(--text-12);margin-top:8px}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:10px 16px;min-height:44px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--surface)}.chip[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.notice{display:flex;gap:12px;align-items:flex-start;padding:16px 0;color:var(--muted);font-size:var(--text-12)}.notice .icon{width:18px;color:var(--accent)}.welcome-body{padding:27px 24px 10px;flex:1;display:flex;flex-direction:column;overflow:auto}.wordmark{text-align:center;font-size:var(--text-14);letter-spacing:3px;font-weight:600}.logo-stage{position:relative;display:grid;place-items:center;min-height:286px;margin:12px 0 16px}.logo-stage:before,.logo-stage:after{content:'';position:absolute;border:1px solid #3b6470;border-radius:50%;width:270px;height:270px}.logo-stage:after{width:230px;height:230px;border-style:dashed;opacity:.5}.logo-stage img{width:216px;position:relative;z-index:1}.welcome-body h1{font-size:var(--text-40);line-height:1.12;letter-spacing:-.035em}.welcome-body h1 span{color:var(--text)}.welcome-body>p{margin-top:16px;max-width:310px;line-height:1.65}.welcome-trust{display:flex;gap:8px;align-items:center;font-size:var(--text-12);color:var(--muted);margin-top:23px}.welcome-trust .icon{width:17px;color:var(--accent)}.location-preview{height:122px;border-radius:var(--radius-card);background:#12323e;margin-bottom:22px;display:flex;align-items:center;justify-content:center;gap:16px;border:1px solid #365765}.location-preview .icon{width:40px;height:40px;color:var(--accent)}.location-preview strong{font-size:var(--text-18);font-weight:500;display:block}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two-col .option{flex-wrap:wrap;padding:16px;gap:10px;min-height:105px}.two-col .option>div{width:100%}.two-col .option .radio{margin-left:auto}.section-label{margin:23px 0 12px;font-size:var(--text-14);font-weight:500;color:var(--text)}.summary{border:1px solid var(--border);border-radius:var(--radius-card);padding:4px 18px;margin-top:25px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--border);font-size:var(--text-14)}.summary-row:last-child{border:0}.summary-row span{color:var(--muted)}.summary-row strong{font-weight:500;text-align:right}.ready-mark{margin:18px auto 28px;width:94px;height:94px;border:1px solid #43818a;border-radius:50%;display:grid;place-items:center;background:var(--accent-dim)}.ready-mark .icon{width:40px;height:40px;color:var(--accent)}.home-header{padding:15px 24px 10px;display:flex;justify-content:space-between;align-items:center}.home-header small{font-size:var(--text-12);display:flex;align-items:center;gap:5px}.home-header small .icon{width:14px;height:14px}.home-header h1{font-size:26px;margin-top:5px}.avatar{width:42px;height:42px;display:grid;place-items:center;border:1px solid #405646;background:#193a47;border-radius:50%;color:#c0e4e8}.home-scroll{padding:12px 24px 25px;overflow:auto;flex:1}.day-tabs{display:flex;padding:4px;border-radius:999px;background:var(--surface);margin-bottom:18px}.day-tabs button{flex:1;padding:9px 2px;border-radius:999px;min-height:40px;color:var(--muted);font-size:var(--text-12)}.day-tabs button.active{background:#31505e;color:var(--text)}.briefing{padding:20px;border-radius:22px;border:1px solid #38616f;background:#102e39;position:relative;overflow:hidden}.briefing-top{display:flex;justify-content:space-between;align-items:center}.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-12);color:var(--accent);font-weight:600}.badge .icon{width:16px;height:16px}.demo-tag{font-size:var(--text-12);letter-spacing:.5px;color:#b4cbd1}.briefing h2{font-size:28px;max-width:230px;margin:18px 0 10px;line-height:1.15}.briefing p{font-size:var(--text-14);color:#bfd3dc;line-height:1.6}.confidence{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding-top:15px;border-top:1px solid #3c5a65}.confidence strong{font-size:30px;font-weight:500;color:var(--accent);line-height:1}.confidence strong small{font-size:var(--text-12);color:#a9cbd2}.confidence>div{font-size:var(--text-12);flex:1}.confidence .text-btn{padding:5px;color:var(--accent);font-size:var(--text-12)}.window{display:flex;align-items:center;gap:13px;padding:17px 0;border-bottom:1px solid var(--border)}.window>.icon{color:var(--amber);width:26px;height:26px}.window strong{font-size:var(--text-18);font-weight:500;display:block}.window small{font-size:var(--text-12)}.window .icon:last-child{margin-left:auto;color:var(--muted);width:17px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 13px}.section-heading h2{font-size:var(--text-18)}.section-heading button{color:var(--accent);font-size:var(--text-12);min-height:35px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metric{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:12px 10px;text-align:left;min-height:108px}.metric .icon{width:20px;color:#a3c5cf;margin-bottom:8px}.metric small{font-size:var(--text-12);display:block}.metric strong{display:block;font-size:var(--text-20);font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums}.metric strong span{font-size:var(--text-12);color:var(--muted)}.metric .detail{font-size:var(--text-12);margin-top:3px}.tide{margin-top:12px;padding:14px 16px;background:var(--surface);border-radius:var(--radius-card)}.tide-heading{display:flex;justify-content:space-between;font-size:var(--text-12)}.tide-heading span{color:var(--muted)}.tide svg{width:100%;height:64px;overflow:visible;margin-top:5px}.tide-times{display:flex;justify-content:space-between;font-size:var(--text-12);color:var(--muted)}.home-cta{margin-top:20px}.bottom-nav{padding:10px 10px 26px;display:flex;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}.bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;gap:5px;color:var(--muted);font-size:var(--text-12);min-height:44px}.bottom-nav button.active{color:var(--accent)}.bottom-nav .icon{width:22px;height:22px}.canvas-note{position:fixed;bottom:17px;left:calc(50% + 75px);transform:translateX(-50%);width:390px;display:flex;justify-content:space-between;font-size:10px;color:#a7bbc5}.canvas-note span{font-size:9px}dialog{padding:0;background:var(--bg);color:var(--text);border:1px solid #496673;border-radius:24px;width:min(720px,calc(100vw - 32px));max-height:85dvh;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.modal-header{padding:24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}.modal-header h2{font-size:22px}.modal-body{padding:24px 24px 32px}.modal-body p{margin:12px 0}.modal-body h3{margin-top:24px}.modal-body h3:first-child{margin-top:0}.modal-body .primary{margin-top:20px}.ds-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.swatch{height:60px;border-radius:12px;border:1px solid #496a77;margin-bottom:6px}.ds-colors strong,.ds-colors small{display:block}.ds-samples{display:grid;gap:14px;margin-top:16px}.ds-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}.ds-tabs a{padding:8px 12px;border-radius:20px;border:1px solid var(--border);font-size:var(--text-12)}#toast{position:absolute;left:24px;right:24px;bottom:100px;padding:13px 16px;background:#244b58;border:1px solid #5f8793;border-radius:12px;font-size:var(--text-12);z-index:9;display:none}#toast.visible{display:block}.check-row{display:flex;gap:12px;align-items:center;margin:16px 0;font-size:var(--text-14);color:var(--muted)}.check-row input{width:20px;height:20px;accent-color:var(--accent)}.inline-error{color:var(--error)}.species-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.species-grid .option{flex-wrap:wrap;gap:8px;padding:14px;min-height:91px}.species-grid .option strong{width:100%;font-size:var(--text-14)}.species-grid .option .icon{width:30px}.detail-list{padding:0;list-style:none}.detail-list li{padding:15px 0;border-bottom:1px solid var(--border)}.detail-list strong{display:block;font-weight:500}.detail-list p{font-size:var(--text-14);margin:6px 0 0}.saved-trip{padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);margin:20px 0}.saved-trip p{margin-top:8px}.link-button{color:var(--accent);min-height:44px;padding:8px 0}.profile-edit{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--border)}.profile-edit span{color:var(--muted);font-size:var(--text-12)}.profile-edit strong{font-weight:500;display:block;font-size:var(--text-14);color:var(--text);margin-top:3px}@keyframes arrive{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:none}}@media(min-width:700px) and (max-height:940px){.phone-wrap{padding:28px 0 44px}.phone-shell{height:min(844px,calc(100dvh - 85px));min-height:640px}.canvas-note{bottom:10px}}@media(max-width:900px){.review-sidebar{left:20px;width:175px}.brand{font-size:var(--text-20)}.review-caption{font-size:11px}.phone-wrap{margin-left:180px}.canvas-note{left:calc(50% + 90px)}}@media(max-width:650px){.review-sidebar,.viewport-controls,.canvas-note{display:none}.phone-wrap{padding:0;margin:0;min-height:100dvh}.phone-shell{width:100%;height:100dvh;min-height:0;border-radius:0;box-shadow:none}.island{left:calc(50% - 58px)}.home-indicator{left:calc(50% - 65px)}.logo-stage{min-height:250px}.welcome-body h1{font-size:38px}dialog{max-height:90dvh}.ds-colors{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.home-plan{padding:10px 24px 12px;background:var(--bg)}.home-plan .primary{min-height:var(--control-height-compact);padding:12px 20px}.two-col .option{position:relative;min-height:105px;display:block}.two-col .option>.icon{margin-bottom:8px}.two-col .option .radio{position:absolute;right:14px;top:15px}

/* Teal marine palette — reference-led atmospheric surfaces. */
:root{--app-gradient:radial-gradient(ellipse 110% 60% at 100% 0%,rgba(138,163,162,.16),transparent 68%),linear-gradient(160deg,#1b3240 0%,#122b39 30%,#091b25 64%,#08141b 100%);--dock:rgba(8,20,27,.94)}
body{background:radial-gradient(ellipse at 88% 0%,#425257 0%,#22333d 32%,#12222b 66%,#111f28 100%);background-attachment:fixed}
.phone-shell{background:var(--app-gradient)}
.status-bar{background:transparent}
.actions,.home-plan{background:transparent}
.bottom-nav{background:var(--dock);backdrop-filter:blur(18px)}
.option,.metric,.tide{background:rgba(8,25,34,.3)}
.field input,.field select,button.water-search-entry,.water-map-top .water-search{background:var(--field-background)}
.briefing{background:linear-gradient(145deg,rgba(15,43,54,.95),rgba(12,34,43,.88));border-color:#3c6876}
.location-preview{background:rgba(15,47,59,.8)}
.day-tabs{background:rgba(9,29,40,.72)}
.secondary{background:rgba(20,46,58,.82)}
.prototype-chip:hover:not(.active){background:rgba(35,61,74,.8)}
.prototype-chip:not(.active),.review-caption,footer small,.canvas-note{color:#c0d0d7}
.modal-header{background:#102632}
dialog{background:linear-gradient(150deg,#1c3a49,#091b25 55%,#08141b)}

/* Photographic welcome: edge-to-edge dawn scene, fading into marine ink. */
.phone-shell:has(.welcome-screen){background:radial-gradient(ellipse 110% 60% at 0% 100%,rgba(138,163,162,.23),transparent 68%),linear-gradient(180deg,rgba(8,20,27,.7) 0%,rgba(9,27,37,.3) 25%,rgba(9,27,37,.76) 48%,rgba(9,27,37,.88) 62%,rgba(14,35,47,.98) 72%,#223b49 100%),url('assets/home-fishing.webp') 50% center/cover no-repeat,#08141b}
.welcome-screen .welcome-body{position:relative;justify-content:flex-end;padding:24px 24px 30px}
.welcome-brand{position:absolute;top:14px;left:24px;display:flex;align-items:center;gap:11.7px;font-size:15.6px;font-weight:600;letter-spacing:2.6px}
.welcome-brand img{width:52px;height:var(--control-height);object-fit:contain;}
.welcome-copy{position:relative;margin-top:260px}
.welcome-copy h1{font-size:var(--text-40);font-weight:500;line-height:1.14;letter-spacing:-.035em}
.welcome-copy>p{margin-top:18px;max-width:310px;color:#d0dce1;line-height:1.65}
.welcome-copy .welcome-trust{margin-top:22px;color:#bcd0d9}
.welcome-screen .actions{background:transparent;padding-top:8px;padding-bottom:56px}
@media(max-height:760px){.welcome-copy{margin-top:205px}.welcome-screen .welcome-body{padding-bottom:20px}.welcome-copy h1{font-size:36px}.welcome-copy .welcome-trust{margin-top:16px}}

.welcome-copy .welcome-trust + .welcome-trust{margin-top:12px}

/* Welcome benefit rows. */
.welcome-copy .welcome-trust{font-size:var(--text-14);line-height:1.5;gap:12px}
.welcome-copy .welcome-trust .icon{width:36px;height:36px;padding:9px;border-radius:10px;background:rgba(18,207,250,.12);color:var(--accent);flex-shrink:0}

.welcome-brand-accent{color:var(--accent)}

/* Desktop presentation controls use the existing responsive sidebar layout. */

/* Phosphor regular icons — local @phosphor-icons/web 2.1.1. */
.icon.ph{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;font-size:22px;vertical-align:middle}
.welcome-copy .welcome-trust .icon.ph{width:36px;height:36px;font-size:var(--text-18);padding:9px}
.notice .icon.ph{width:18px;height:18px;font-size:var(--text-18)}
.location-preview .icon.ph,.ready-mark .icon.ph{width:40px;height:40px;font-size:var(--text-40)}
.home-header small .icon.ph{width:14px;height:14px;font-size:var(--text-14)}
.badge .icon.ph{width:16px;height:16px;font-size:var(--text-16)}
.window>.icon.ph{width:26px;height:26px;font-size:26px}
.window .icon.ph:last-child{width:17px;height:17px;font-size:17px}
.metric .icon.ph{width:20px;height:20px;font-size:var(--text-20)}
.species-grid .option .icon.ph{width:30px;height:30px;font-size:30px}
.status-symbols .ph{font-size:var(--text-16);line-height:1}


.welcome-screen .welcome-sign-in{margin-top:12px;font-size:var(--text-15)}

.experience-options{grid-auto-rows:1fr}

/* A quiet water motif separating the welcome headline and description. */
.welcome-divider{display:flex;align-items:center;gap:10px;width:104px;height:18px;margin:16px 0 14px;color:var(--accent)}
.welcome-divider .icon.ph{width:26.4px;height:21.6px;font-size:21.6px;line-height:21.6px}
.welcome-copy .welcome-divider+p{margin-top:0}

/* Readable app type scale: captions 12px, controls 14px, body 16px. */
body{font-size:var(--text-16)}
.primary,.secondary,.text-btn,.chip{font-size:var(--text-14)}
input,select,textarea{font-size:var(--text-16)}

/* Sentence-case Jakarta headings and wordmarks. */
h1,h2,h3,.welcome-copy h1{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:600;text-transform:none;letter-spacing:-.035em;line-height:1.15}
.welcome-copy h1{font-size:var(--text-40)}
@media(max-width:380px){.welcome-copy h1{font-size:36px}}

.welcome-brand,.brand,.wordmark{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:600;text-transform:none;letter-spacing:0}
.welcome-brand{font-size:var(--text-20)}

/* Larger screen headings with consistent supporting text. */
h1{font-size:var(--text-40)}
h2{font-size:28px}
h3{font-size:22px}
.home-header h1{font-size:var(--text-34)}
.briefing h2{font-size:var(--text-34);max-width:270px}
.section-heading h2{font-size:22px}
.modal-header h2{font-size:28px}
.welcome-copy>p,.intro p,.screen-body>h1+p,.screen-body>h2+p,.home-header small,.briefing>p{font-size:var(--text-14)}

/* Calmer heading scale for the Jakarta typeface. */
h1{font-size:var(--text-32)}
h2{font-size:var(--text-24)}
h3{font-size:var(--text-20)}
.welcome-copy h1{font-size:36px}
.home-header h1{font-size:var(--text-34)}
.briefing h2{font-size:28px}
.section-heading h2{font-size:var(--text-20)}
.modal-header h2{font-size:var(--text-24)}
@media(max-width:380px){.welcome-copy h1{font-size:var(--text-32)}}

.species-grid .checkbox-mark{width:20px;height:20px;margin-left:auto;flex-shrink:0;border:1px solid #647d86;border-radius:5px;display:grid;place-items:center}
.species-grid .option[aria-checked=true]{background:color-mix(in srgb,var(--accent-dim) 30%,transparent);border-color:var(--accent)}
.species-grid .option[aria-checked=true] .icon{color:var(--accent)}
.species-grid .option[aria-checked=true] .checkbox-mark{background:var(--accent);border-color:var(--accent)}
.species-grid .option[aria-checked=true] .checkbox-mark::after{content:"";width:6px;height:10px;border:solid #08141b;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

.field .field-help{display:flex;align-items:flex-start;gap:6px;margin-top:11px}
.field-help .icon.ph{width:14px;height:18px;font-size:var(--text-14);flex-shrink:0}



/* Pliability-inspired balance: light titles, clear groups, quiet surfaces. */
h1,h2,h3,.welcome-copy h1{font-family:'Plus Jakarta Sans',system-ui,sans-serif;text-transform:none;letter-spacing:-.02em}
h1,.welcome-copy h1{font-weight:400;line-height:1.15}
h1{font-size:var(--text-32)}
.welcome-copy h1{font-size:var(--text-40)}
h2,.home-header h1,.briefing h2{font-weight:400;line-height:1.2}
h3,.section-heading h2{font-size:var(--text-20);font-weight:500;letter-spacing:-.01em}
.intro{margin:12px 0 32px}
.intro p,.welcome-copy>p,.briefing>p{font-size:var(--text-14);font-weight:400;line-height:1.5}
.intro p{margin-top:12px}
.options,.species-grid{gap:12px}
.option{padding:18px 16px;border-color:rgba(140,168,180,.2)}
.option strong,.species-grid .option strong{font-size:var(--text-16);font-weight:500;line-height:1.35}
.option small{font-size:var(--text-14);font-weight:400;line-height:1.5;margin-top:6px}
.species-grid .option{padding:16px;gap:12px}
.section-label{font-size:var(--text-20);font-weight:500;margin:32px 0 16px}
.section-heading{margin:32px 0 16px}
.briefing{padding:24px;border-radius:var(--radius-card);border-color:rgba(140,168,180,.2);background:rgba(8,25,34,.3)}
.briefing h2{max-width:280px;margin:20px 0 12px}
.metric,.tide{border-color:rgba(140,168,180,.2)}
.primary,.secondary{font-size:var(--text-14);font-weight:600}
.field small{font-size:var(--text-12);line-height:1.5}
@media(max-width:380px){.welcome-copy h1{font-size:var(--text-32)}.intro{margin-bottom:28px}}

.home-scroll .briefing-plan{margin-top:16px;margin-bottom:8px}

/* Duotone illustrations introduce each onboarding step. */
.onboarding-symbol{display:flex;align-items:center;width:44px;height:44px;margin-bottom:16px;color:var(--accent);font-size:44px;line-height:1}
.onboarding-symbol .ph-duotone:before{opacity:.24}

/* Keep the duotone fill and layer the lighter outline above it. */
.onboarding-symbol{position:relative}
.onboarding-symbol .ph-duotone:after{display:none}
.onboarding-symbol .ph-thin{position:absolute;inset:0;line-height:1}

/* Screen subtitles */
.welcome-copy>p,.intro p,.screen-body>h1+p,.screen-body>h2+p{font-size:var(--text-16);line-height:1.5}

/* Frosted overlays: scrolling content continues beneath the glass. */
:root{--glass-surface:rgba(12,30,40,.62);--glass-edge:rgba(192,220,230,.12)}
.screen{position:relative}
.screen>.actions,.screen>.bottom-nav{position:absolute;bottom:0;left:0;right:0;z-index:2;background:var(--glass-surface);border-top:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(20px) saturate(125%);backdrop-filter:blur(20px) saturate(125%)}
.screen:has(>.actions)>.screen-body{padding-bottom:121px;scroll-padding-bottom:121px}
.screen:has(>.bottom-nav)>.screen-body,.screen:has(>.bottom-nav)>.home-scroll{padding-bottom:112px;scroll-padding-bottom:112px}
.welcome-screen>.actions{position:relative;flex-shrink:0}
dialog{background:rgba(12,30,40,.82);-webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.screen>.actions,.screen>.bottom-nav,dialog{background:rgba(12,30,40,.95)}}

/* Clear glass: preserve the underlying colors without a tinted panel. */
.screen>.actions,.screen>.bottom-nav,dialog{background:transparent;border-color:transparent;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

.notification-cards{display:grid;gap:12px;margin:0 0 20px}
.notification-cards li{padding:18px 16px;border:1px solid var(--border);border-radius:var(--radius-card);background:transparent}
.notification-cards strong{font-size:var(--text-16);line-height:1.35}
.notification-cards p{line-height:1.5}

.primary,.secondary,.welcome-sign-in{font-size:var(--text-15)}

.notification-cards li{display:flex;align-items:flex-start;gap:12px}
.notification-cards li>.icon.ph{color:var(--accent);width:22px;height:22px;font-size:22px;flex-shrink:0}
.notification-cards li>div{min-width:0}

/* A soft blue glow gives the daily briefing a little depth. */
.home-scroll .briefing{border-color:rgba(151,209,243,.3);background:radial-gradient(ellipse at 95% 8%,rgba(78,157,224,.19) 0%,rgba(58,130,199,.07) 38%,transparent 70%),radial-gradient(ellipse at 5% 100%,rgba(61,159,200,.08),transparent 62%),rgba(8,25,34,.3)}

/* Ready to launch: the original boat image beneath a readable marine wash. */
.phone-shell:has(.ready-screen){background:linear-gradient(180deg,rgba(8,20,27,.64) 0%,rgba(8,20,27,.64) 26%,rgba(8,20,27,.86) 52%,rgba(8,20,27,.94) 100%),url('assets/welcome-boat.webp') 68% center/cover no-repeat,#08141b}
.ready-screen .summary{background:rgba(8,25,34,.58);border-color:rgba(151,209,243,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Anchor the Ready summary above the action while allowing shorter screens to scroll. */
.ready-screen>.screen-body{display:flex;flex-direction:column}
.ready-screen>.screen-body>*{flex-shrink:0}
.ready-screen>.screen-body>.onboarding-symbol{margin-top:auto}
.ready-screen>.screen-body>.link-button{font-size:var(--text-14);text-align:center;align-self:stretch;margin-top:4px}

/* Species choices use compact, full-width checkbox rows. */
.species-grid{grid-template-columns:1fr}
.species-grid .option{flex-wrap:nowrap;min-height:56px;padding:16px;align-items:center}
.species-grid .option strong{width:auto;white-space:nowrap}


/* Match the Ready title to the Welcome heading scale. */
.ready-screen h1{font-size:var(--text-40)}
@media(max-width:380px){.ready-screen h1{font-size:var(--text-32)}}

/* Briefing polish: measured spacing and a clear, two-line confidence summary. */
.home-scroll .briefing{background:radial-gradient(ellipse at 100% 0%,rgba(91,169,231,.17),transparent 66%),rgba(8,25,34,.42);border-color:rgba(151,209,243,.28)}
.home-scroll .briefing .badge{font-size:var(--text-13);gap:8px;font-weight:500}
.home-scroll .briefing h2{margin:20px 0 12px;max-width:100%;line-height:1.22;text-wrap:balance}
.home-scroll .briefing>p{font-size:var(--text-15);line-height:1.6;color:var(--muted)}
.home-scroll .briefing .confidence{display:block;margin-top:24px;padding-top:16px;border-top-color:rgba(151,209,243,.18)}
.home-scroll .briefing .confidence-heading,.home-scroll .briefing .confidence-context{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-scroll .briefing .confidence-heading{font-size:var(--text-14)}
.home-scroll .briefing .confidence strong{display:inline-flex;align-items:baseline;gap:3px;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.home-scroll .briefing .confidence strong small{font-weight:400;letter-spacing:0;color:var(--muted)}
.home-scroll .briefing .confidence-context{margin-top:4px}
.home-scroll .briefing .confidence-context>small{min-width:0;line-height:1.5}
.home-scroll .briefing .confidence .text-btn{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:48px;min-height:44px;padding:0;border-radius:8px;font-size:var(--text-13);flex-shrink:0}
.home-scroll .briefing .confidence .text-btn:hover{color:var(--text)}
.home-scroll .briefing .confidence .text-btn .icon{width:16px;height:16px;font-size:var(--text-16)}

/* Home groups planning, upcoming conditions, and destination discovery. */
.home-section+.home-section{margin-top:32px}
.home-section>h2,.home-section>.section-heading h2{font-size:var(--text-20);font-weight:500;line-height:1.3}
.trip-start{padding:24px;border:1px solid rgba(151,209,243,.22);border-radius:var(--radius-card);background:linear-gradient(100deg,rgba(8,20,27,.96),rgba(8,20,27,.64)),url('assets/welcome-boat.webp') 65% 24%/cover}
.trip-start>p{font-size:var(--text-14);line-height:1.6;margin-top:10px}
.trip-start>.primary{margin-top:24px}
.upcoming-conditions>.section-heading{margin:0 0 16px}
.upcoming-conditions>.section-heading h3{font-size:var(--text-16);font-weight:500}
.upcoming-conditions>.window{margin-top:8px;margin-bottom:20px}
.upcoming-conditions>.metrics{margin-top:16px}
.section-description{font-size:var(--text-14);line-height:1.5;margin-top:8px}
.place-list{margin-top:16px;display:grid;gap:12px}
.place-row{display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-card);background:transparent}
.place-row>span{flex:1;min-width:0}.place-row strong,.place-row small{display:block}.place-row strong{font-size:var(--text-15);font-weight:500}.place-row small{font-size:var(--text-12);line-height:1.5;margin-top:4px}.place-row>.icon:first-child{color:var(--accent)}.place-row:hover{background:rgba(16,60,77,.5)}

/* Confidence as a calm, readable instrument. */
.home-scroll .visual-briefing{padding:24px;text-align:center}
.confidence-gauge{position:relative;width:min(100%,240px);aspect-ratio:240/140;margin:0 auto}
.confidence-gauge svg{width:100%;height:100%;overflow:visible}
.confidence-gauge path{fill:none;stroke-width:10;stroke-linecap:round}
.gauge-track{stroke:rgba(151,209,243,.1)}
.gauge-value{stroke:var(--score-color)}
.gauge-number{position:absolute;inset:auto 0 8px;display:flex;align-items:baseline;justify-content:center;gap:4px;font-variant-numeric:tabular-nums}
.gauge-number strong{font-size:64px;font-weight:400;line-height:1;letter-spacing:-.04em;color:var(--text)}
.gauge-number span{font-size:var(--text-16);color:var(--muted)}
.gauge-caption{font-size:var(--text-14);color:var(--muted);margin:0 0 24px}
.visual-briefing .briefing-top{justify-content:center}
.home-scroll .visual-briefing h2{font-size:var(--text-24);line-height:1.25;margin:12px 0}
.home-scroll .visual-briefing>p{font-size:var(--text-16);line-height:1.5;text-align:left}
.visual-briefing-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(151,209,243,.18);margin-top:20px;padding-top:12px;text-align:left}
.visual-briefing-footer .text-btn{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:48px;color:var(--accent);font-size:var(--text-13);padding:0}
.visual-briefing-footer .text-btn:hover{color:var(--text)}
.visual-briefing-footer .icon{width:16px;height:16px;font-size:var(--text-16)}

/* Compact briefing: the gauge and recommendation share the first row. */
.home-scroll .visual-briefing{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:20px;text-align:left;align-items:center}
.visual-briefing .confidence-gauge{grid-column:1;grid-row:1;width:112px;margin:0;align-self:end}
.visual-briefing .gauge-number{bottom:1px;gap:2px}
.visual-briefing .gauge-number strong{font-size:var(--text-34);letter-spacing:-.035em}
.visual-briefing .gauge-number span{font-size:11px}
.visual-briefing .gauge-caption{grid-column:1;grid-row:2;font-size:11px;text-align:center;margin:4px 0 0;align-self:start}
.visual-briefing .briefing-top{grid-column:1/-1;grid-row:3;justify-content:flex-start;margin-top:20px}
.home-scroll .visual-briefing h2{grid-column:2;grid-row:1/3;font-size:var(--text-20);line-height:1.3;margin:0;text-wrap:initial}
.home-scroll .visual-briefing>p{grid-column:1/-1;font-size:var(--text-14);line-height:1.5;margin-top:10px}
.visual-briefing .visual-briefing-footer{grid-column:1/-1;margin-top:16px;padding-top:8px}
@media(max-width:350px){.home-scroll .visual-briefing{grid-template-columns:96px minmax(0,1fr);column-gap:12px;padding:16px}.visual-briefing .confidence-gauge{width:96px}.home-scroll .visual-briefing h2{font-size:var(--text-18)}}

/* Two distinct briefing sections: score summary, then supporting details. */
.home-scroll .visual-briefing{display:block;padding:0}
.briefing-overview{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:center;padding:24px 20px}
.visual-briefing .briefing-overview .confidence-gauge{width:120px}
.visual-briefing .briefing-overview .gauge-number strong{font-size:var(--text-40)}
.visual-briefing .briefing-overview .gauge-caption{margin-top:6px}
.briefing-details{padding:20px;border-top:1px solid rgba(151,209,243,.18);background:rgba(8,20,27,.18)}
.visual-briefing .briefing-details .briefing-top{margin-top:0}
.home-scroll .visual-briefing .briefing-details>p{font-size:var(--text-14);line-height:1.5;color:var(--muted);margin-top:10px}
.visual-briefing .briefing-details .visual-briefing-footer{border-top:0;margin-top:12px;padding-top:0}
@media(max-width:350px){.briefing-overview{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:20px 16px}.visual-briefing .briefing-overview .confidence-gauge{width:104px}.briefing-details{padding:16px}}

/* A quiet planning entry, with destination and date made tangible. */
.home-section.trip-start{padding:4px 0 0;border:0;background:none;border-radius:0}
.home-section.trip-start>h2{font-size:var(--text-24);font-weight:400;letter-spacing:-.02em}
.trip-start>p{margin-top:8px;line-height:1.5}
.trip-start-fields{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin-top:20px;border:1px solid rgba(140,168,180,.22);border-radius:var(--radius-card);background:rgba(8,25,34,.3);overflow:hidden}
.trip-start-field{display:flex;align-items:center;gap:10px;text-align:left;min-height:76px;padding:14px 12px;min-width:0}
.trip-start-field+.trip-start-field{border-left:1px solid rgba(140,168,180,.18)}
.trip-start-field>.icon{color:var(--accent);width:20px;height:20px;font-size:var(--text-20);flex-shrink:0}
.trip-start-field>span{min-width:0}
.trip-start-field small,.trip-start-field strong{display:block}
.trip-start-field small{font-size:var(--text-12);line-height:1.4;margin-bottom:3px}
.trip-start-field strong{font-size:var(--text-14);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.trip-start-field:hover{background:rgba(16,60,77,.3)}
.trip-start-field:focus-visible{outline-offset:-4px}
.trip-start>.primary{margin-top:12px}

/* Day-by-day confidence, inspired by a weather detail view. */
.confidence-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.confidence-days button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 8px;border:1px solid transparent;border-radius:var(--radius-card);color:var(--muted)}
.confidence-days button[aria-pressed=true]{background:rgba(151,209,243,.08);border-color:rgba(151,209,243,.42);color:var(--text)}
.confidence-days button:hover{background:rgba(151,209,243,.1)}
.confidence-days button>span{font-size:var(--text-13);font-weight:500}
.confidence-days strong{font-size:22px;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--day-color)}
.confidence-days strong small{font-size:10px;margin-left:2px;font-weight:400}
.confidence-days i{height:3px;width:20px;border-radius:3px;background:var(--day-color);opacity:.7}
.confidence-hero{text-align:center;padding:24px 0}
.confidence-hero .badge{font-size:var(--text-14);font-weight:500;gap:6px}
.daily-score{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:8px;font-variant-numeric:tabular-nums}
.daily-score strong{font-size:88px;line-height:1.1;font-weight:400;letter-spacing:-.04em}
.daily-score>span{font-size:var(--text-20);color:var(--muted)}
.daily-score-label{font-size:var(--text-16);margin:0 0 8px}
.confidence-hero>small{font-size:var(--text-12)}
.daily-recommendation{padding:20px;border-radius:var(--radius-card);border:1px solid rgba(151,209,243,.2);background:linear-gradient(130deg,rgba(61,120,164,.13),rgba(8,25,34,.3))}
.daily-recommendation h3{font-size:var(--text-18);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.daily-recommendation p{font-size:var(--text-14);line-height:1.5;margin-top:8px}
.daily-recommendation .text-btn{display:flex;align-items:center;gap:4px;min-height:44px;padding:0;margin-top:8px;color:var(--accent);font-size:var(--text-13)}
.daily-recommendation .text-btn:hover{color:var(--text)}
.daily-recommendation .icon{width:16px;height:16px;font-size:var(--text-16)}

/* Home: plan, next suitable window, daily previews, locations. */
.next-window-section>.section-heading{margin:0 0 16px}
.next-window-date{display:flex;gap:12px;align-items:center;padding:16px 0;border-top:1px solid rgba(151,209,243,.16);border-bottom:1px solid rgba(151,209,243,.16)}
.next-window-date>.icon{color:var(--amber);width:28px;height:28px;font-size:28px}
.next-window-date span,.next-window-date strong{display:block}.next-window-date span{font-size:var(--text-14);color:var(--muted);margin-bottom:3px}.next-window-date strong{font-size:var(--text-20);font-weight:500}
.window-conditions-title{font-size:var(--text-16);font-weight:500;margin:24px 0 12px}.plan-window{margin-top:16px}
.upcoming-day-list{margin-top:16px;border-top:1px solid rgba(151,209,243,.16)}
.upcoming-day{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 0;min-height:80px;border-bottom:1px solid rgba(151,209,243,.16)}
.upcoming-day-copy{flex:1;min-width:0}.upcoming-day-copy strong,.upcoming-day-copy small{display:block}.upcoming-day-copy strong{font-size:var(--text-16);font-weight:500}.upcoming-day-copy small{font-size:var(--text-12);margin-top:4px}.upcoming-score{font-size:26px;font-weight:400;font-variant-numeric:tabular-nums}.upcoming-score small{font-size:11px;margin-left:2px}.upcoming-day>.icon{width:16px;height:16px;font-size:var(--text-16);color:var(--muted)}.upcoming-day:hover{background:rgba(151,209,243,.06)}
.next-planned-trip>.place-row{margin-top:16px}

.home-section.trip-start>h2{font-size:var(--text-20)}
.trip-start>.primary{margin-top:20px}
.window-score-gauge{position:relative;width:220px;max-width:100%;aspect-ratio:240/140;margin:16px auto 4px}
.window-score-gauge svg{display:block;width:100%;height:100%;overflow:visible}
.window-score-gauge path{fill:none;stroke-width:9;stroke-linecap:round}
.window-score-gauge .daily-score{position:absolute;inset:auto 0 4px;margin:0;gap:4px}
.window-score-gauge .daily-score strong{font-size:64px;line-height:1}
.window-score-gauge .daily-score>span{font-size:var(--text-16)}

/* Daily preview cards with compact confidence bars. */
.upcoming-day-list{display:grid;gap:12px;border-top:0}
.upcoming-day{padding:16px;border:1px solid var(--border);border-radius:var(--radius-card);background:transparent}
.upcoming-score{display:flex;flex-direction:column;gap:6px;min-width:64px;flex-shrink:0;text-align:right;line-height:1.15}
.upcoming-score-track{display:block;width:64px;height:4px;border-radius:4px;background:rgba(151,209,243,.14);overflow:hidden}
.upcoming-score-track>span{display:block;height:100%;border-radius:inherit;background:currentColor}

/* Confidence summary: score and progress on the left, context on the right. */
.confidence-hero.confidence-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;text-align:left;padding:24px 0}
.window-score-number{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.window-score-number strong{font-size:56px;font-weight:400;line-height:1.1;letter-spacing:-.04em}
.window-score-number>span{font-size:var(--text-14);color:var(--muted)}
.window-score-track{height:5px;margin-top:10px;border-radius:5px;background:rgba(151,209,243,.14);overflow:hidden}
.window-score-track>span{display:block;height:100%;border-radius:inherit;background:currentColor}
.window-score-info>p{font-size:var(--text-16);color:var(--text);line-height:1.4;margin:0 0 8px}
.window-score-info>small{font-size:var(--text-12);line-height:1.6}

.daily-confidence{margin-top:20px}
.daily-recommendation>.confidence-columns{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid rgba(151,209,243,.16);gap:16px}

.daily-recommendation>.next-window-date{padding:0 0 16px;margin-bottom:20px;border-top:0}
.window-score-info{display:grid;gap:10px}
.window-context-row{display:flex;align-items:center;gap:8px;font-size:var(--text-14);line-height:1.4;color:var(--muted)}
.window-context-row>.icon.ph{width:18px;height:18px;font-size:var(--text-18);flex-shrink:0;color:var(--accent)}

/* Window card: centered gauge, shared context row, integrated action. */
.window-recommendation{position:relative}
.window-info{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--muted)}
.window-info:hover{background:rgba(151,209,243,.1);color:var(--accent)}
.window-recommendation .window-info .icon{width:20px;height:20px;font-size:var(--text-20)}
.window-recommendation>.next-window-date{padding-right:32px}
.window-recommendation>.confidence-columns{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.window-recommendation .window-score-gauge{width:200px;margin:0 auto}
.window-recommendation .window-score-info{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.window-recommendation .plan-window{margin-top:20px}

/* Tighter spacing within Home sections. */
.next-window-section>.section-heading{margin-bottom:12px}
.next-window-section>.daily-confidence{margin-top:0}
.upcoming-days-section>.upcoming-day-list,.recommended-places>.place-list{gap:8px}

.home-scroll>.next-window-section+.upcoming-days-section,.home-scroll>.upcoming-days-section+.recommended-places{margin-top:48px}

/* Compact day cards with native horizontal swipe. */
.upcoming-days-section>.upcoming-day-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:2px 0 8px;margin-top:12px;scrollbar-width:thin}
.upcoming-day-list>.upcoming-day{flex:0 0 128px;width:128px;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:16px;scroll-snap-align:start}
.upcoming-day .upcoming-day-copy{flex:none}
.upcoming-day .upcoming-day-copy strong{font-size:var(--text-14)}
.upcoming-day .upcoming-score{font-size:30px;text-align:left;gap:8px}
.upcoming-day .upcoming-score-track{width:100%}
.upcoming-day-weather{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:var(--text-12);line-height:1.4}
.upcoming-day-weather>span{display:flex;align-items:center;gap:6px}
.upcoming-day-weather .icon{width:16px;height:16px;font-size:var(--text-16)}

/* Main Home sections retain their spacing in the new order. */
.home-scroll>.home-section+.home-section{margin-top:48px}

/* Six-day edge-to-edge carousel and integrated window conditions. */
.home-scroll>.home-section+.home-section{margin-top:28px}
.upcoming-days-section>.upcoming-day-list{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px;scrollbar-width:none}
.upcoming-day-list::-webkit-scrollbar{display:none}
.window-water-stats{margin-top:12px;padding-top:0;border-top:1px solid rgba(151,209,243,.16)}
.window-water-stats .window-conditions-title{font-size:var(--text-16);margin:0 0 12px}
.window-water-stats .metrics{grid-template-columns:1fr;gap:0}
.window-water-stats .metric{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;min-height:60px;padding:8px 0;border:0;border-radius:0;background:none}
.window-water-stats .metric+.metric{border-top:1px solid rgba(151,209,243,.12)}
.window-water-stats .metric>.icon{grid-column:1;grid-row:1/3;color:var(--muted)}
.window-water-stats .metric>small:not(.detail){grid-column:2;grid-row:1;font-size:var(--text-14);color:var(--text)}
.window-water-stats .metric>.detail{grid-column:2;grid-row:2;font-size:var(--text-12);margin-top:0}
.window-water-stats .metric>strong{grid-column:3;grid-row:1/3;margin:0;font-size:var(--text-20)}
.day-tabs{overflow-x:auto;scrollbar-width:none}
.day-tabs button{flex:1 0 80px}

/* Soft blue glow at the top-right of the best-window card. */
.window-recommendation{background:radial-gradient(ellipse 290px 260px at 105% 0%,rgba(45,137,235,.3) 0%,rgba(40,120,205,.13) 42%,transparent 75%),linear-gradient(130deg,rgba(61,120,164,.13),rgba(8,25,34,.3))}

/* Shared translucent treatment for Home cards. */
.home-scroll .upcoming-day,.home-scroll .daily-recommendation,.home-scroll .place-row{background:rgba(255,255,255,.1);border:0}
.home-scroll .upcoming-day:hover,.home-scroll .place-row:hover{background:rgba(255,255,255,.14)}

/* Shared card surface across onboarding and the main app. */
:root{--card-background:linear-gradient(to bottom,rgba(120,185,255,.13),rgba(120,185,255,.06));--card-hover:linear-gradient(to bottom,rgba(120,185,255,.19),rgba(120,185,255,.10))}
#app :is(.option,.location-preview,.summary,.briefing,.metric,.tide,.saved-trip,.place-row,.daily-recommendation,.upcoming-day){background:var(--card-background);border:0}
#app :is(.option,.place-row,.upcoming-day):hover{background:var(--card-hover)}
#app .option[aria-pressed=true]{background:rgba(18,207,250,.18)}
/* These are rows within a card, so they retain only their separators. */
#app .window-water-stats .metric{background:none;border:0}
#app .window-water-stats .metric+.metric{border-top:1px solid rgba(151,209,243,.12)}

/* Dark glass distinguishes navigation from the content beneath it. */
.screen>.bottom-nav{background:rgba(5,17,25,.45)}

/* Inset selection border preserves card dimensions. */
#app .option[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--accent)}

/* Blue corner glow is exclusive to the best-window card. */
#app .daily-recommendation.window-recommendation{background:radial-gradient(ellipse 290px 260px at 105% 0%,rgba(45,137,235,.3) 0%,rgba(40,120,205,.13) 42%,transparent 75%),var(--card-background)}

.window-recommendation>p{padding-bottom:8px}

/* Four destinations and a persistent central planning action. */
.screen>.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:10px 8px 26px}
.bottom-nav>button{min-width:0;min-height:56px;justify-content:flex-end;padding:0 2px;gap:5px;font-size:11px;line-height:16px;white-space:nowrap}
.bottom-nav>button>.icon{width:22px;height:22px;font-size:22px}
.bottom-nav>.nav-plan{color:var(--text);gap:4px}
.nav-plan-icon{display:grid;place-items:center;width:44px;height:40px;border-radius:13px;background:var(--accent);color:var(--primary-ink);box-shadow:0 4px 14px rgba(18,207,250,.15)}
.nav-plan-icon .icon{width:24px;height:24px;font-size:var(--text-24)}
.nav-plan:hover .nav-plan-icon{background:var(--primary-hover)}
.nav-plan:active .nav-plan-icon{transform:scale(.96)}

/* Raised circular planning action, inspired by the supplied navigation. */
.screen>.bottom-nav{border-radius:28px 28px 0 0;padding-top:12px;overflow:visible}
.bottom-nav>.nav-plan{position:relative;gap:6px}
.nav-plan-icon{width:60px;height:60px;border-radius:50%;margin-top:-28px;background:var(--accent);color:var(--primary-ink);box-shadow:0 5px 16px rgba(0,0,0,.18)}
.nav-plan-icon .icon{width:28px;height:28px;font-size:28px}
.nav-plan:hover .nav-plan-icon{background:var(--primary-hover)}

/* Photo-led location cards, with concise fishing context. */
.recommended-places>.place-list{gap:16px}
#app .place-card{display:block;padding:0;overflow:hidden;text-align:left}
.place-photo{display:block;width:100%;height:164px;object-fit:cover;object-position:center 48%}
.place-card .place-card-body{display:block;padding:16px}
.place-card .place-area{display:flex;align-items:center;gap:5px;margin:0 0 6px;font-size:var(--text-12)}
.place-card .place-area .icon{width:14px;height:14px;font-size:var(--text-14);color:var(--accent)}
.place-card .place-name{display:block;font-size:var(--text-18);font-weight:500;line-height:1.35}
.place-facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:var(--text-12)}
.place-facts>span{display:flex;align-items:center;gap:5px}
.place-facts .icon{width:16px;height:16px;font-size:var(--text-16);color:var(--accent)}
.place-description{display:block;margin-top:12px;font-size:var(--text-14);line-height:1.5;color:var(--muted)}
.place-explore{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--text-13);color:var(--accent)}
.place-explore .icon{width:18px;height:18px;font-size:var(--text-18)}
.place-modal-photo{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-card)}

/* Keep the trip planner within the preview device, with native dialog focus handling. */
#modal.phone-modal,#login-dialog.phone-modal,#flow-dialog.phone-modal,#launch-dialog.phone-modal{position:fixed;inset:auto;left:calc(var(--phone-left) + 12px);bottom:calc(var(--phone-bottom) + 16px);width:calc(var(--phone-width) - 24px);max-width:none;max-height:calc(var(--phone-height) - 88px);margin:0;border:1px solid var(--border);border-radius:24px;background:rgba(12,30,40,.97);overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
#modal.phone-modal::backdrop,#login-dialog.phone-modal::backdrop,#flow-dialog.phone-modal::backdrop,#launch-dialog.phone-modal::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(3px);clip-path:inset(var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left) round var(--phone-radius))}
.phone-modal .modal-header{padding:20px;gap:12px;background:#0c1e28}
.phone-modal .modal-header h2{font-size:var(--text-20)}
.phone-modal .modal-body{padding:20px 20px 32px}
.phone-modal .modal-body>:first-child{margin-top:0}
.phone-modal .modal-body>:last-child{margin-bottom:0}
.phone-modal input{min-width:0}

/* Home greeting size. */
header.home-header h1{font-size:var(--text-34)}

/* Swipeable location cards, aligned with the day carousel. */
.recommended-places>.place-list{display:flex;gap:12px;overflow-x:auto;margin-inline:-24px;padding:2px 24px 8px;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;align-items:stretch}
.recommended-places>.place-list::-webkit-scrollbar{display:none}
#app .place-list>.place-card{flex:0 0 min(300px,calc(100% - 24px));width:min(300px,calc(100% - 24px));display:flex;flex-direction:column;align-items:stretch;gap:0;scroll-snap-align:start}
.place-card .place-card-body{display:flex;flex-direction:column;flex:1}
.place-card .place-description{flex:1}

/* Compact location summaries and trailing distance. */
.place-card .place-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;height:3em}
.place-card .place-area{justify-content:space-between;gap:8px}
.place-area-name{display:flex;align-items:center;gap:5px;min-width:0}
.place-distance{flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Transparent Welcome action area. */
.screen.welcome-screen>.actions{background:transparent}

.welcome-screen>.actions>.primary,.welcome-screen>.actions>.secondary{height:var(--control-height);min-height:var(--control-height);width:100%;padding:0 20px;font-size:var(--text-15)}

/* Weekly opportunities: location and time lead; details remain one tap away. */
.opportunity-card{background:var(--card-background);border:0;border-radius:var(--radius-card);text-align:left}
.opportunity-featured,.trip-change-summary{padding:20px 20px 20px;background:radial-gradient(ellipse 290px 260px at 105% 0%,rgba(45,137,235,.3),transparent 75%),var(--card-background)}
.opportunity-fit{display:flex;align-items:center;gap:7px;color:var(--accent);font-size:var(--text-13);font-weight:500}
.opportunity-fit .icon{font-size:17px;width:17px;height:17px}
.opportunity-schedule{display:flex;align-items:center;gap:8px;font-size:var(--text-13);line-height:1.6;color:var(--text)}
.opportunity-schedule>.icon{color:var(--muted);flex-shrink:0;width:18px;height:18px;font-size:var(--text-18)}
.opportunity-schedule strong{font-weight:600}
.opportunity-reason{font-size:var(--text-14);line-height:1.6;color:var(--muted);margin:16px 0}
.opportunity-weather{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--text-13);color:var(--muted)}
.opportunity-weather>span{display:flex;align-items:center;gap:6px}
.opportunity-weather .icon{width:18px;height:18px;font-size:var(--text-18);color:var(--muted)}
.opportunity-open{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--control-height-compact);margin-top:16px;padding:12px 0 0;border-top:1px solid var(--border);color:var(--accent);font-size:var(--text-14);font-weight:600}
.opportunity-open:hover{color:var(--text)}
.opportunity-list{display:grid;gap:10px;margin-top:14px}
.opportunity-alternative{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:start;column-gap:16px;row-gap:16px;width:100%;padding:18px}
.opportunity-alternative:hover{background:var(--card-hover)}
.alternative-content{display:grid;gap:5px;min-width:0}
.alternative-location{font-size:17px;line-height:1.35;font-weight:500;color:var(--text)}
.alternative-schedule{font-size:var(--text-13);color:var(--muted);line-height:1.5}
.alternative-reason{font-size:var(--text-13);line-height:1.5;color:var(--muted)}
.opportunity-alternative .opportunity-weather{font-size:var(--text-12);margin-top:4px;gap:12px}
.opportunity-alternative>.icon{width:18px;height:18px;font-size:var(--text-18);color:var(--muted)}
.sample-outlook{font-size:var(--text-12);line-height:1.6;color:var(--muted);margin-top:24px}
.opportunity-detail h1{font-size:30px;margin-top:12px}
.opportunity-detail-area{margin:8px 0 16px}
.opportunity-detail>.home-section{margin-top:24px}
.opportunity-detail .home-section>p{font-size:var(--text-14);line-height:1.6;margin-top:10px}
.opportunity-detail .metrics{margin-top:14px}
.opportunity-detail>.primary{margin-top:20px}
@media(max-width:360px){.opportunity-featured,.trip-change-summary{padding:20px 16px 20px}.opportunity-schedule{font-size:var(--text-12)}.opportunity-alternative{padding:14px}.opportunity-weather{gap:12px}}

/* Score-led weekly recommendations, with location as secondary context. */
.opportunity-location-badge{display:inline-flex;align-items:center;gap:5px;align-self:start;justify-self:start;max-width:100%;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.07);font-size:var(--text-12);line-height:1.5;color:var(--muted);font-weight:400}
.opportunity-location-badge .icon{font-size:var(--text-14);width:14px;height:14px;flex-shrink:0;color:var(--accent)}
.opportunity-featured .window-score-gauge{margin:8px auto 10px;width:220px}
.opportunity-featured h3{font-size:var(--text-18);line-height:1.45;margin:20px 0 8px;letter-spacing:-.015em}
.opportunity-featured .opportunity-reason{margin:0}
.opportunity-alternative .opportunity-location-badge{margin:0;font-size:var(--text-12);padding:4px 8px;grid-column:1;grid-row:1}
.alternative-score{display:grid;gap:9px;min-width:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.alternative-score strong{font-size:var(--text-32);line-height:1;font-weight:400}
.alternative-score small{font-size:var(--text-12);color:var(--muted);margin-left:2px}
.alternative-score-track{display:block;height:4px;border-radius:4px;background:rgba(151,209,243,.14);overflow:hidden}
.alternative-score-track>span{display:block;height:100%;background:var(--accent);border-radius:inherit}

/* Featured opportunity: stacked location and date above the gauge. */
.opportunity-card-details{display:grid;grid-template-columns:1fr;gap:6px;margin-top:0}
.opportunity-header-item{display:flex;align-items:center;gap:10px;min-width:0}
.opportunity-header-item>.icon{width:20px;height:20px;font-size:var(--text-20);flex-shrink:0;margin-top:0;color:var(--accent)}
.opportunity-header-date>.icon{color:var(--amber)}
.opportunity-header-item>div{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;column-gap:12px;row-gap:2px;flex:1;min-width:0}
.opportunity-header-item strong{font-size:var(--text-15);font-weight:500;line-height:1.35;color:var(--text)}
.opportunity-header-item span{font-size:var(--text-13);line-height:1.5;color:var(--muted)}
@media(max-width:360px){.opportunity-card-details{gap:6px}.opportunity-header-item{gap:6px}.opportunity-header-item>.icon{width:16px;height:16px;font-size:var(--text-16)}.opportunity-header-item strong{font-size:var(--text-15)}}

/* Home already has top padding; avoid a second gap above its first heading. */
.opportunity-home>.home-section:first-of-type>.section-heading{margin-top:0}

/* Featured card polish: aligned detail rows and a balanced, full-width action. */
.opportunity-featured .opportunity-open{margin-top:20px;padding:16px 0 0;min-height:var(--control-height-compact);text-align:left;border-radius:0}
.opportunity-featured .opportunity-open:active{color:var(--text)}
.opportunity-featured .opportunity-open:focus-visible{border-radius:4px;outline-offset:4px}
.opportunity-card-details .opportunity-header-item span{font-variant-numeric:tabular-nums}


/* Subtle dividers frame the recommendation copy. */
.opportunity-summary-card{margin-top:16px;padding:8px 0 12px;border-radius:0;background:transparent;border:0;}
.opportunity-featured .opportunity-summary-card h3{margin:0 0 6px;font-size:var(--text-15);line-height:1.4}
.opportunity-featured .opportunity-open{border-top:0;margin-top:8px;padding:4px 0 0;min-height:44px}

.opportunity-summary-card .opportunity-why-title{display:flex;align-items:center;gap:8px}
.opportunity-why-title>.icon{width:20px;height:20px;font-size:var(--text-20);color:var(--accent)}

/* Alternatives: compare day and score first, then scan the place and reason. */
.alternative-footer{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 18px;row-gap:8px;column-gap:12px;align-items:center}
.alternative-footer .alternative-reason{grid-column:1;grid-row:2}
.alternative-footer>.icon{grid-column:2;grid-row:1/3;width:18px;height:18px;font-size:var(--text-18);color:var(--muted)}
.opportunity-alternative:active{background:var(--card-hover)}
.opportunity-alternative:focus-visible{outline-offset:3px}


/* A distinct outlined action completes the featured recommendation. */
.opportunity-featured .opportunity-open{min-height:var(--control-height-compact);margin-top:8px;padding:12px 16px;border:1px solid rgba(18,207,250,.45);border-radius:12px;justify-content:center;gap:10px;background:transparent}
.opportunity-featured .opportunity-open:hover{background:rgba(18,207,250,.08);border-color:var(--accent);color:var(--accent)}
.opportunity-featured .opportunity-open:focus-visible{border-radius:12px}

/* A short qualitative label complements the numerical score. */
.opportunity-score-status{display:flex;justify-content:center;margin:0 0 14px}
.opportunity-score-status>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 16px;border-radius:999px;background:rgba(18,207,250,.16);color:var(--accent);font-size:var(--text-13);font-weight:600;line-height:18px}

.opportunity-score-status .icon{font-size:var(--text-14);width:14px;height:14px}

/* Keep the Home greeting within the content scroll area. */
.opportunity-home{padding-top:0}
.opportunity-home>.home-header{padding:15px 0 10px;margin-bottom:12px}

/* Description-led alternative recommendations. */
.opportunity-alternative{grid-template-columns:minmax(0,1fr);row-gap:16px;text-align:left}
.alternative-content{gap:6px}
.alternative-place{display:flex;align-items:center;gap:6px;font-size:var(--text-13);line-height:1.5;color:var(--muted)}
.alternative-place .icon{width:15px;height:15px;font-size:var(--text-15);color:var(--accent)}
.alternative-rating{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.alternative-rating .alternative-score{text-align:right;width:64px;flex-shrink:0;gap:7px}
.alternative-rating .alternative-score strong{font-size:28px}
.alternative-condition{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:var(--text-12);line-height:18px;font-weight:600}
.alternative-condition.is-good{color:var(--accent);background:rgba(18,207,250,.16)}
.alternative-condition.is-fair{color:var(--amber);background:rgba(239,188,112,.14)}
.alternative-condition.is-bad{color:var(--error);background:rgba(239,153,142,.14)}
.alternative-condition .icon{width:13px;height:13px;font-size:var(--text-13)}
.alternative-rating>.icon{margin-left:auto;width:18px;height:18px;font-size:var(--text-18);color:var(--muted)}

.alternative-schedule{display:flex;align-items:center;gap:6px}
.alternative-schedule>.icon{width:15px;height:15px;font-size:var(--text-15);color:var(--amber);flex-shrink:0}

/* Keep the score beside the title and its conditions label. */
.opportunity-alternative{grid-template-columns:minmax(0,1fr) 64px;column-gap:12px;row-gap:6px;padding-bottom:22px}
.alternative-heading{display:grid;justify-items:start;gap:8px;min-width:0}
.opportunity-alternative>.alternative-score{width:64px;text-align:right;gap:7px}
.opportunity-alternative>.alternative-score strong{font-size:var(--text-24)}
.opportunity-alternative>.alternative-content{grid-column:1/-1}

/* Opportunity detail: location, confidence, and geographic context. */
.opportunity-detail-screen>.step-header{display:grid;grid-template-columns:44px 1fr 44px;gap:12px;padding-bottom:12px;flex-shrink:0}
.opportunity-detail-screen>.step-header>span{text-align:center;font-size:var(--text-14)}
.opportunity-detail{min-height:0;padding-top:8px;padding-bottom:32px;scroll-padding-bottom:32px;font-size:var(--text-14)}
.opportunity-detail .detail-location-header h1{font-size:var(--text-32);line-height:1.2;margin:0;letter-spacing:-.025em;text-wrap:initial}
.opportunity-detail .opportunity-detail-area{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--text-14);margin:8px 0 12px}
.opportunity-detail-area>span{display:inline-flex;align-items:center;gap:6px}
.opportunity-detail-area .icon{color:var(--accent);width:18px;height:18px;font-size:var(--text-18)}
.opportunity-detail .opportunity-schedule{gap:8px;font-size:var(--text-16);align-items:flex-start}
.opportunity-detail .opportunity-schedule>.icon{color:var(--amber);width:18px;height:18px;font-size:var(--text-18);margin-top:1px}
.detail-confidence{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:16px;margin:24px 0;padding:20px 12px 28px;background:var(--card-background);border-radius:var(--radius-card)}
.detail-confidence .window-score-gauge{width:132px;margin:0}
.detail-confidence .daily-score strong{font-size:var(--text-40)}
.detail-confidence .daily-score>span{font-size:var(--text-13)}
.detail-confidence .daily-score{bottom:1px}
.detail-confidence-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.detail-confidence-copy h2{font-size:var(--text-15);line-height:1.4;letter-spacing:0}
.detail-confidence-copy .alternative-condition{padding:5px 8px;font-size:var(--text-12);white-space:nowrap}
.detail-map{aspect-ratio:700/450;border-radius:14px;overflow:hidden;background:var(--surface)}
.detail-route-map{display:block;width:100%;height:100%;font-family:inherit}
.detail-map-caption{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:12px;font-size:var(--text-14);color:var(--muted)}
.detail-map-caption>span{display:flex;align-items:center;gap:6px}
.detail-map-caption .icon{font-size:var(--text-14);width:14px;height:14px}
.detail-map-caption .secondary{font-size:var(--text-15)}
.detail-map-caption .detail-map-placeholder{cursor:default}
.opportunity-detail>.home-section{margin-top:28px}
.opportunity-detail .home-section h2{font-size:var(--text-20);line-height:1.35}
.opportunity-detail .home-section>p{margin-top:10px}
.opportunity-detail .detail-timing-note{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:var(--text-14);padding:14px;background:var(--info-background);border:1px solid var(--info-border);border-radius:12px}
.detail-timing-note>.icon{color:var(--amber);width:17px;height:17px;font-size:17px;margin-top:2px;flex-shrink:0}
.opportunity-detail .metrics{gap:8px;margin-top:12px}
.opportunity-detail .metric{text-align:left;min-width:0;padding:12px 10px}
.opportunity-detail .metric strong{font-size:var(--text-24)}
.opportunity-detail .metric .detail{font-size:11px;line-height:1.5}
.detail-setup dl{margin:12px 0 0}
.detail-setup dl>div{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:var(--text-14);line-height:1.5}
.detail-setup dt{display:flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}
.detail-setup dt .icon{width:16px;height:16px;font-size:var(--text-16)}
.detail-setup dd{margin:0;text-align:right;color:var(--text);overflow-wrap:anywhere}
.opportunity-detail>.primary{margin-top:12px}
.opportunity-detail>.sample-outlook{font-size:var(--text-12);line-height:1.6;margin-top:20px}
@media(max-width:360px){.detail-confidence{grid-template-columns:112px minmax(0,1fr);gap:10px;padding:20px 10px 28px}.detail-confidence .window-score-gauge{width:112px}.detail-confidence .daily-score strong{font-size:36px}.detail-confidence-copy h2{font-size:var(--text-14)}.detail-confidence-copy .alternative-condition{font-size:11px;padding:5px 7px}.opportunity-detail .metric{padding:12px 8px}.detail-setup dl>div{grid-template-columns:max-content minmax(0,1fr);gap:12px}}

/* Sample favorite-water picker: an authored map, with no map integration. */
.water-picker-body{padding-top:16px}
.water-picker-intro{margin:0 0 20px}

.water-picker-intro p{font-size:var(--text-14);line-height:1.55;margin-top:10px}
.water-search{display:flex;align-items:center;gap:10px;min-height:46px;border:1px solid var(--border);border-radius:12px;padding:0 12px;margin-bottom:12px;background:rgba(8,25,34,.4)}
.water-search>.icon{font-size:var(--text-18);width:18px;height:18px;color:var(--muted)}
.water-search input{width:100%;min-width:0;padding:12px 0;background:none;border:0;border-radius:0;color:var(--text);font-size:var(--text-13);outline:none}
.water-search input::placeholder{color:var(--muted);opacity:1}
.water-search:not(.water-search-entry):focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sample-water-map{position:relative;aspect-ratio:1.28;overflow:hidden;border-radius:var(--radius-card);background:#102f40;isolation:isolate}
.sample-water-map>img{display:block;width:100%;height:100%;object-fit:cover}
.water-pin{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:44px;height:44px;padding:5px;z-index:1;border-radius:50%;color:var(--text)}
.water-pin-number,.water-pin-check{display:grid;place-items:center;width:32px;height:32px;background:#163a4b;border:1px solid #9bb9c5;border-radius:50%;font-size:var(--text-13);font-weight:600;box-shadow:0 3px 8px #0004}
.water-pin-check{display:none}
.water-pin.selected .water-pin-number{display:none}
.water-pin.selected .water-pin-check{display:grid;color:var(--primary-ink);background:var(--accent);border-color:var(--accent)}
.water-pin .icon{font-size:17px;width:17px;height:17px}
.water-pin:hover .water-pin-number{background:#315d70}
.water-pin:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:2}
.water-pin.search-muted{opacity:.35}
.sample-map-label{position:absolute;bottom:10px;left:10px;font-size:10px;line-height:1.5;color:#d3e3e9;background:#102630e6;border-radius:5px;padding:4px 7px;pointer-events:none}
.selected-waters{margin-top:20px}
.waters-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.water-picker-body h2{font-size:17px;line-height:1.4}
#water-count{font-size:var(--text-12);color:var(--muted);white-space:nowrap}
#selected-water-list{display:flex;flex-wrap:wrap;gap:6px}
.water-empty{font-size:var(--text-13);line-height:1.5;margin:0}
.selected-water-chip{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:999px;background:rgba(18,207,250,.13);color:var(--accent);font-size:var(--text-12);text-align:left}
.selected-water-chip .icon{font-size:var(--text-14);width:14px;height:14px;flex-shrink:0}
.selected-water-chip:hover{background:rgba(18,207,250,.22)}
.water-picker-screen>.actions{background:rgba(8,20,27,.94);padding-top:12px}
.water-picker-screen>.actions .primary{min-height:var(--control-height)}
.water-picker-screen>.screen-body{scroll-padding-bottom:120px}
@media(max-width:360px){.sample-water-map{aspect-ratio:1.16}.water-picker-intro{margin-bottom:16px}.water-pin{width:40px;height:40px}.water-pin-number,.water-pin-check{width:29px;height:29px}}

.opportunity-home>.home-header{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:10px}
.home-week-summary{grid-column:1/-1;font-size:var(--text-16);line-height:1.5;color:var(--muted);margin:0}

#water-search-status{font-size:var(--text-12);line-height:1.5;color:var(--muted);margin:0 0 12px}

.home-week-summary .home-good-count{color:var(--accent)}

.opportunity-detail .detail-reason{padding:20px;background:var(--card-background);border-radius:var(--radius-card)}

/* Search-first home waters with a full-screen sample map picker. */
.water-search-entry{text-align:left;font-size:var(--text-16)}
.water-search-entry:hover{border-color:var(--accent)}
#saved-waters-section[hidden]{display:none}
#selected-water-list{display:grid;gap:10px}
.saved-water-row{display:flex;align-items:center;gap:12px;padding:16px 12px 16px 16px;background:var(--card-background);border-radius:var(--radius-card)}
.saved-water-row>.icon{color:var(--accent);width:20px;height:20px;font-size:var(--text-20);flex-shrink:0}
.saved-water-row>span{display:grid;gap:4px;flex:1;min-width:0}
.saved-water-row strong{font-size:var(--text-16);font-weight:500;line-height:1.45}
.saved-water-row small{font-size:var(--text-14);line-height:1.5;color:var(--muted)}
.water-remove{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex-shrink:0;color:var(--muted)}
.water-remove:hover{color:var(--text);background:var(--card-background)}
.water-remove .icon{font-size:var(--text-18);width:18px;height:18px}
.water-add-another{display:flex;align-items:center;gap:8px;color:var(--accent);min-height:var(--control-height-compact);padding:12px 0;margin-top:8px;font-size:var(--text-14)}
.water-add-another .icon{width:18px;height:18px;font-size:var(--text-18)}
.water-map-dialog{position:fixed;inset:auto;margin:0;max-width:none;max-height:none;padding:0;border:0;border-radius:0 0 50px 50px;background:#102f40;box-shadow:none;overflow:hidden;color:var(--text)}
.water-map-dialog[open]{display:flex;flex-direction:column}
.water-map-dialog::backdrop{background:transparent;backdrop-filter:none}
.water-map-top{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding:14px 16px;background:#173542;z-index:3}
.water-map-top .water-search{flex:1;min-width:0;margin:0;background:var(--field-background);height:var(--control-height);min-height:var(--control-height);padding:0 15px;border:1px solid var(--field-border);border-radius:12px}
.water-map-top .water-search input{font-size:var(--text-16);padding:0;height:100%}
.water-map-top .water-search:focus-within{outline-offset:4px}
.water-map-top .icon-btn{width:44px;height:44px}
#water-suggestions,#water-search-empty{position:absolute;top:calc(100% - 6px);left:16px;right:16px;background:#163440;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 24px #0003;max-height:260px;overflow:auto;margin:0;padding:6px;z-index:4}
#water-suggestions[hidden],#water-search-empty[hidden]{display:none}
#water-suggestions button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;min-height:60px;border-radius:8px}
#water-suggestions button>span{flex:1;display:grid;gap:3px}
#water-suggestions strong{font-size:var(--text-14);font-weight:500}
#water-suggestions small{font-size:var(--text-12)}
#water-suggestions .icon{color:var(--accent);width:18px;height:18px;font-size:var(--text-18)}
#water-suggestions button:hover,#water-suggestions button[aria-selected="true"]{background:#244b5b}
#water-search-empty{padding:16px;font-size:var(--text-13);line-height:1.5}
.expanded-water-map{position:relative;flex:1;min-height:150px;overflow:hidden;container-type:size}
.expanded-water-art{position:absolute;left:50%;top:50%;width:max(100cqw,66.6667cqh);height:max(150cqw,100cqh);transform:translate(-50%,-50%)}
.expanded-water-art>img{width:100%;height:100%;object-fit:cover;display:block}
.expanded-water-map .water-pin{width:44px;height:44px}
.expanded-water-map .water-pin.previewing{outline:2px solid var(--accent);outline-offset:2px}
.water-map-bottom{flex-shrink:0;padding:16px 20px 28px;background:#102630;max-height:48%;overflow:auto}
.map-selection-hint{font-size:var(--text-14);text-align:center;padding:4px 0 12px}
.water-map-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
#water-map-count{font-size:var(--text-12);color:var(--muted)}
.water-map-footer .text-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px;color:var(--accent);font-weight:600}
.water-map-footer .icon{width:16px;height:16px;font-size:var(--text-16)}
.water-place-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.water-place-title h2{font-size:var(--text-24);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.water-place-title p{font-size:var(--text-13);margin-top:6px}
.water-place-title p:first-of-type{font-size:var(--text-14)}
.water-place-title .water-remove{margin:-8px -8px 0 0}
.water-place-description{font-size:var(--text-14);line-height:1.5;margin:12px 0 16px}
.water-place-details>.primary,.water-place-details>.secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--control-height-compact);padding:12px;border-radius:12px;font-size:var(--text-14)}
.water-place-details>.primary>.icon,.water-place-details>.secondary>.icon{width:18px;height:18px;font-size:var(--text-18)}
.water-place-details{margin-bottom:8px}
@media(max-width:650px){.water-map-dialog{border-radius:0}.water-map-bottom{padding-bottom:24px}}
@media(max-height:700px){.water-map-bottom{padding-top:12px;padding-bottom:18px}.water-place-description{margin:8px 0 10px}.water-map-footer .text-btn{min-height:36px}}

.water-place-title .water-place-distance{color:var(--accent);margin-top:8px}

.opportunity-detail>.detail-map-section{margin-top:28px}

.detail-reason h2{display:flex;align-items:center;gap:8px}
.detail-reason h2>.icon{color:var(--accent);font-size:var(--text-20);width:20px;height:20px;flex-shrink:0}

.alternative-location-row{display:flex;align-items:center;gap:10px;min-width:0}
.alternative-location-row .alternative-place{flex:1;min-width:0}
.alternative-location-row .alternative-place>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alternative-location-row .alternative-place>.icon{flex-shrink:0}
.alternative-location-row>.alternative-condition{flex-shrink:0;white-space:nowrap}

/* Six-day calendar scoped to Forecast. */
.forecast-calendar{margin:4px 0 20px}
.forecast-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.forecast-calendar-heading>span{display:flex;align-items:center;gap:8px;font-size:var(--text-16);font-weight:500}
.forecast-calendar-heading .icon{color:var(--accent);font-size:var(--text-18);width:18px;height:18px}
.forecast-calendar-heading small{font-size:var(--text-13)}
.forecast-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.forecast-week button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:80px;padding:10px 0 8px;border-radius:24px;color:var(--muted)}
.forecast-week button>span{font-size:var(--text-12);line-height:18px}
.forecast-week button>strong{font-size:var(--text-18);line-height:24px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.forecast-week button>i{width:4px;height:4px;border-radius:50%;background:transparent}
.forecast-week button>i.is-today{background:var(--accent)}
.forecast-week button:hover{background:var(--surface)}
.forecast-week button[aria-pressed="true"]{background:var(--accent);color:var(--primary-ink)}
.forecast-week button[aria-pressed="true"]>strong{color:inherit}
.forecast-week button[aria-pressed="true"]>i.is-today{background:currentColor}
.forecast-week button:focus-visible{outline-offset:2px}

.forecast-screen>.home-header h1{font-size:var(--text-34)}

.forecast-week button{border:1px solid transparent}
.forecast-week button[aria-pressed="false"]{border-color:var(--border)}

.forecast-controls{flex-shrink:0;padding-bottom:8px}
.forecast-controls .home-header h1{font-size:var(--text-34)}
.forecast-controls .forecast-calendar{margin:0 24px 8px}
.forecast-location-trigger{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--control-height);margin-top:16px;padding:0 15px;border:1px solid var(--field-border);border-radius:12px;background:var(--field-background);text-align:left;font-size:var(--text-16)}
.forecast-location-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forecast-location-trigger>.icon{color:var(--accent);font-size:var(--text-18);width:18px;height:18px;flex-shrink:0}
.forecast-location-trigger>.icon:last-child{transform:rotate(90deg)}
.forecast-screen>.home-scroll{padding-top:8px}
.forecast-location-option{display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;text-align:left;border-bottom:1px solid var(--border)}
.forecast-location-option>span{flex:1;display:grid;gap:4px}
.forecast-location-option strong{font-size:var(--text-16);font-weight:500}
.forecast-location-option .icon{color:var(--accent)}
.forecast-sheet-label{font-size:var(--text-14);font-weight:600}
.forecast-location-sheet .secondary{margin-top:20px}
.detail-forecast-link{margin-top:20px}
.water-place-details .forecast-preview-action{margin-top:10px}

.forecast-controls .home-header>div{width:100%;min-width:0}

.forecast-screen .metric strong{font-size:var(--text-24)}

.forecast-screen .tide-heading>strong{font-size:var(--text-14)}

.forecast-scroll .forecast-controls .home-header{padding:16px 0}
.forecast-scroll .forecast-controls .forecast-calendar{margin-left:0;margin-right:0}

.opportunity-home .opportunity-featured,.trip-change-summary{border:1px solid rgba(120,185,255,.28);box-shadow:0 8px 24px rgba(32,143,230,.14),0 0 16px rgba(18,207,250,.07)}

.forecast-screen .tide svg{height:88px}

.alternative-score.is-fair{color:var(--amber)}
.alternative-score.is-fair .alternative-score-track>span{background:var(--amber)}

/* Authentication uses the shared field/button sizes at every viewport. */
.auth-top{display:flex;align-items:center;gap:12px;padding:8px 24px;color:var(--muted);font-size:var(--text-14);flex-shrink:0}
.auth-body{padding:0 24px 32px}.auth-body .intro{margin-bottom:24px}.auth-body h1{font-size:var(--text-32);line-height:1.2;letter-spacing:-1px}.auth-body .intro p{margin-top:10px;font-size:var(--text-14);line-height:1.6}.auth-body .auth-logo{display:block;width:67.2px;height:67.2px;object-fit:contain;margin-bottom:16px;}
.auth-social{display:grid;gap:10px}.auth-provider{border-color:#46616d;background:#162f3c;color:var(--text)}.auth-provider svg{width:22px;height:22px;flex-shrink:0}.auth-provider:hover{background:#214152}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:var(--text-12)}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--border)}
.auth-body .field{display:block;margin:0 0 16px}.auth-body .field>span{display:block;margin-bottom:8px;font-size:var(--text-13)}.auth-password{position:relative}.auth-password input{padding-right:52px}.auth-reveal{position:absolute;right:4px;top:4px;width:44px;height:44px;display:grid;place-items:center;color:var(--muted)}.auth-forgot{display:block;margin:-8px 0 0 auto;padding-top:0;padding-bottom:0;min-height:32px;font-size:var(--text-13)}.auth-submit{width:100%;margin-top:8px}.auth-switch{text-align:center;font-size:var(--text-13);margin-top:20px;color:var(--muted)}.auth-switch .text-btn{font-size:var(--text-13);min-height:44px;padding:8px 4px;color:var(--accent)}

/* Profile: identity first, then boat and grouped preferences. */
.profile-scroll{padding-top:20px}.profile-heading h1{font-size:var(--text-34)}.profile-identity{display:flex;align-items:center;gap:16px;width:100%;padding:24px 0 28px;text-align:left;border-bottom:1px solid var(--border)}.profile-avatar{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;border-radius:50%;background:#193e4e;border:1px solid #3e6777;color:var(--accent);font-size:28px;font-weight:500}.profile-identity-copy{display:grid;gap:6px;flex:1;min-width:0}.profile-identity-copy strong{font-size:var(--text-24);line-height:1.25;font-weight:600;overflow-wrap:anywhere}.profile-identity-copy>span{font-size:var(--text-13);color:var(--accent)}.profile-identity>.icon{font-size:var(--text-18);color:var(--muted)}
.profile-section{margin-top:26px}.profile-section h2{font-size:var(--text-20);font-weight:500;line-height:1.35;margin-bottom:12px}.profile-boat{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:20px 16px;background:var(--card-background);border-radius:var(--radius-card)}.profile-boat-symbol>.icon{font-size:var(--text-32);color:var(--accent)}.profile-row-copy{display:grid;gap:5px;flex:1;min-width:0}.profile-row-copy strong{font-size:var(--text-16);line-height:1.35;font-weight:500}.profile-row-copy>span{font-size:var(--text-14);line-height:1.5;color:var(--muted);overflow-wrap:anywhere}.profile-boat>.icon,.profile-setting>.icon:last-child{font-size:var(--text-16);color:var(--muted);flex-shrink:0}.profile-settings{background:rgba(22,47,60,.65);border-radius:var(--radius-card);padding:0;overflow:hidden}.profile-setting{display:flex;align-items:center;gap:12px;width:100%;min-height:78px;padding:16px 0;text-align:left}.profile-setting+.profile-setting{border-top:1px solid var(--border)}.profile-setting>.icon:first-child{font-size:22px;color:var(--accent);flex-shrink:0}.profile-alert-status{font-size:var(--text-12);color:var(--muted);flex-shrink:0}.profile-alert-status.is-on{color:var(--accent)}.profile-identity:hover .profile-identity-copy>span{color:var(--text)}.profile-boat:hover,.profile-setting:hover{background-color:rgba(35,77,95,.35)}

.detail-map-section>h2{font-size:var(--text-20);font-weight:500;line-height:1.35;margin-bottom:12px}

.forecast-conditions>h2{font-size:var(--text-20);font-weight:500;line-height:1.35;margin-bottom:12px}
.forecast-scroll>.section-heading{margin-bottom:12px}
.forecast-scroll>.section-heading+.summary{margin-top:0}

.trips-empty-title,.trips-empty-description{text-align:center}
.screen-body>.trips-empty-title{font-size:var(--text-24)}
.screen-body>.trips-empty-title+.trips-empty-description{font-size:var(--text-14)}

/* Shared section rhythm; compact map-sheet actions retain their 48px variant. */
.forecast-scroll .section-heading h2{line-height:1.35}
.forecast-conditions>h2,.detail-map-section>h2,.profile-section h2{margin-bottom:var(--section-content-gap)}
.ds-type-row{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--border)}
.ds-type-row>span{font-weight:400;line-height:1.25;color:var(--text)}
.ds-type-row>small{font-size:var(--text-12)}
.ds-type-display{font-size:var(--text-40)}.ds-type-page{font-size:var(--text-34)}.ds-type-flow{font-size:var(--text-32)}.ds-type-title{font-size:var(--text-24)}.ds-type-section{font-size:var(--text-20);font-weight:500!important}.ds-type-body{font-size:var(--text-14)}.ds-type-label{font-size:var(--text-13);font-weight:600!important}
.ds-tabs button{padding:8px 12px;min-height:44px;border-radius:var(--radius-field);border:1px solid var(--border);font-size:var(--text-13)}
.ds-caption{font-size:var(--text-13);line-height:1.5}.ds-status-row{display:flex;gap:12px;flex-wrap:wrap}.ds-samples>.alternative-condition{justify-self:start}

.modal-body h3[id]{scroll-margin-top:92px}

/* Session 3: offshore Welcome and onboarding-end trial. */
.welcome-brand{top:8px;gap:14px;font-size:var(--text-24)}
.welcome-brand img{width:88px;height:88px}
.trial-body{padding-top:36px}
.trial-body h1{font-size:var(--text-32);line-height:1.2}.trial-intro{font-size:var(--text-14);line-height:1.6;margin:16px 0 32px}
.trial-body h2{font-size:var(--text-20);font-weight:500;line-height:1.35;margin-bottom:16px}.trial-timeline{list-style:none;padding:0;margin:0 0 24px}.trial-timeline li{position:relative;display:flex;gap:12px;padding-bottom:28px}.trial-timeline li:last-child{padding-bottom:0}.trial-timeline li:not(:last-child):before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:1px;background:var(--border)}.trial-timeline-icon{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;background:var(--accent-dim);border-radius:50%;color:var(--accent)}.trial-timeline strong{font-size:var(--text-16);font-weight:600}.trial-timeline p{font-size:var(--text-13);line-height:1.5;margin-top:4px}
.screen.trial-screen>.screen-body{padding-bottom:212px;scroll-padding-bottom:212px}.trial-actions{display:grid;gap:4px}.trial-actions>.text-btn{min-height:44px;font-size:var(--text-14)}

.phone-shell:has(.welcome-screen){background:linear-gradient(180deg,rgba(8,20,27,.22) 0%,rgba(8,20,27,.05) 38%,rgba(8,20,27,.6) 64%,rgba(8,20,27,.95) 100%),url("assets/welcome-offshore.png") center top/cover no-repeat,var(--bg)}

.trial-actions .trial-action-price{font-size:var(--text-13);text-align:center;margin:0 0 6px;color:var(--muted)}


/* Login and registration: centered brand and a coastal image fading through the upper third. */
.phone-shell:has(.auth-branded,.trial-screen){background:linear-gradient(180deg,rgba(8,20,27,.5) 0%,rgba(8,20,27,.58) 16%,rgba(8,20,27,.88) 30%,var(--bg) 40%),url("assets/welcome-offshore.png") center top/100% auto no-repeat,var(--bg)}
.auth-branded .auth-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;padding-bottom:24px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);font-size:var(--text-20);font-weight:600;letter-spacing:-.6px;white-space:nowrap}
.auth-brand img{width:44px;height:44px;object-fit:contain;}

.auth-branded .auth-body{padding-top:32px}

.trial-details-card{padding:20px 20px 28px;background:var(--card-background);border-radius:var(--radius-card)}
.trial-details-card .trial-timeline{margin-bottom:0}

.phone-shell:has(#auth-form[data-mode="register"],.trial-screen){background-image:linear-gradient(180deg,rgba(8,20,27,.5) 0%,rgba(8,20,27,.58) 16%,rgba(8,20,27,.88) 30%,var(--bg) 40%),url("assets/welcome-boat.webp")}

/* Login is a solid, dismissible sheet within the phone preview. */
.phone-shell:has(.flow-dialog){background:var(--bg)}
.flow-dialog{position:fixed;inset:auto;margin:0;padding:0;max-width:none;border:1px solid var(--border);border-radius:24px;background:var(--bg);color:var(--text);box-shadow:0 20px 60px #0008;overflow:auto;backdrop-filter:none}
.flow-dialog::backdrop{background:rgba(0,0,0,.45)}
.flow-dialog .auth-screen{height:auto;animation:none}
.flow-dialog .auth-top{display:grid;padding:16px 20px;grid-template-columns:44px minmax(0,1fr) 44px}
.flow-dialog .auth-top>.icon-btn{grid-column:3;grid-row:1}
.flow-dialog .auth-brand{grid-column:1 / 3;grid-row:1;justify-content:flex-start;font-size:var(--text-18)}
.flow-dialog .auth-body{padding:12px 20px 24px;overflow:visible;flex:none}
.flow-dialog .auth-switch{margin-top:12px}

.flow-dialog .trial-screen{height:auto;animation:none}
.flow-dialog .trial-screen>.trial-body{margin-top:-24px;padding:0 16px 32px;overflow:visible;flex:none;scroll-padding-bottom:24px}
.flow-dialog .trial-screen>.trial-actions{position:static;padding:0 20px 24px;background:none;backdrop-filter:none}

#flow-dialog.phone-modal:has(.trial-screen){background:radial-gradient(ellipse 290px 260px at 105% 0%,rgba(45,137,235,.3),transparent 75%),var(--card-background)}

.trial-body>h1,.trial-body>.trial-intro{text-align:center}

.trial-hero-icon{display:block;width:56px;height:56px;margin:0 auto 20px;color:var(--accent)}

.flow-dialog:has(.trial-screen){padding-bottom:32px}

/* Departure selection reuses the shared sheet, fields, and whole-row controls. */
.launch-point-control{display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);margin:0 0 16px}
.launch-point-control>span,.launch-option>span{display:grid;gap:4px;flex:1;min-width:0}
.launch-point-control strong,.launch-option strong{font-size:var(--text-16);font-weight:600}
.launch-point-control small,.launch-option small{font-size:var(--text-13);line-height:1.5}
.launch-point-control>.icon:first-child,.launch-option>.icon{color:var(--accent);font-size:22px}
.launch-option{display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:80px;padding:14px 12px;border:1px solid var(--border);border-radius:var(--radius-field);background:var(--surface)}
.launch-option[aria-pressed=true]{border-color:var(--accent);background:var(--accent-dim)}
#launch-results{display:grid;gap:8px}.launch-picker-body .field{margin:20px 0 16px}.launch-picker-body .launch-none{display:block;width:100%;margin-top:16px;min-height:44px;font-size:var(--text-14)}
#launch-dialog.phone-modal[open]{display:flex;flex-direction:column;overflow:hidden}
#launch-dialog .modal-header{flex-shrink:0}
#launch-dialog .launch-picker-body{overflow-y:auto;min-height:0;padding-bottom:12px}
.launch-picker-footer{flex-shrink:0;margin:0;padding:12px 20px 32px;border-top:1px solid var(--border);background:var(--bg);letter-spacing:normal}
.launch-picker-footer .launch-save{width:100%;margin:0}.launch-empty{padding:16px 0}.saved-launch-point{display:flex;align-items:center;gap:8px}


.forecast-assessment{padding:20px;margin:8px 0 24px;background:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-card)}
.forecast-assessment-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.forecast-assessment h2{font-size:var(--text-20);font-weight:500;line-height:1.35}
.forecast-assessment-heading small{font-size:var(--text-12);white-space:nowrap}
.forecast-assessment>p{font-size:var(--text-14);line-height:1.6;margin:12px 0 16px}
.forecast-assessment>.secondary{width:100%}
@media(max-width:360px){.forecast-assessment{padding:16px}.forecast-assessment-heading{align-items:flex-start;flex-direction:column;gap:4px}}

.launch-search-input{position:relative}.launch-search-input>.icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none}.field .launch-search-input input{padding-left:48px}

.forecast-assessment-heading{flex-direction:row;align-items:center}.forecast-assessment-heading h2{min-width:0}.forecast-assessment-heading>.alternative-condition{margin-left:auto;text-align:right;white-space:normal;flex-shrink:0;max-width:55%}

/* Keep touch, wheel, and keyboard scrolling without visible preview scrollbars. */
.phone-shell,.phone-shell *,dialog.phone-modal,dialog.phone-modal *,.water-map-dialog,.water-map-dialog *{scrollbar-width:none}
.phone-shell::-webkit-scrollbar,.phone-shell *::-webkit-scrollbar,dialog.phone-modal::-webkit-scrollbar,dialog.phone-modal *::-webkit-scrollbar,.water-map-dialog::-webkit-scrollbar,.water-map-dialog *::-webkit-scrollbar{display:none}

/* Trial-only accent: larger, brighter ripples for the subscription invitation. */
.trial-hero-ripple{position:relative;isolation:isolate;width:72px;height:72px;padding:8px;margin:0 auto 28px;pointer-events:none}
.trial-hero-ripple .trial-hero-icon{position:relative;z-index:1;margin:0}
.trial-hero-ripple::before,.trial-hero-ripple::after{content:"";position:absolute;inset:14px;border:2px solid var(--accent);border-radius:50%;background:radial-gradient(circle,transparent 48%,rgba(18,207,250,.14) 100%);box-shadow:0 0 14px rgba(18,207,250,.35),inset 0 0 10px rgba(18,207,250,.18);opacity:0;animation:trial-compass-ripple 3.6s cubic-bezier(.2,.6,.4,1) infinite}
.trial-hero-ripple::after{animation-delay:1.8s}
@keyframes trial-compass-ripple{0%{transform:scale(.9);opacity:0}15%{opacity:.7}85%,100%{transform:scale(2.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.trial-hero-ripple::before,.trial-hero-ripple::after{animation:none;display:none}}

/* Trip collection extends the existing marine card and control styles. */
.trips-scroll{padding:0 24px 120px}
.trips-screen .home-header{display:block;padding:24px 0 20px}
.trips-screen .home-header p{margin-top:8px;font-size:var(--text-14)}
.trips-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:20px}
.trips-tabs button{flex:1;min-height:48px;padding:10px 4px;color:var(--muted);font-size:var(--text-14);border-bottom:2px solid transparent}
.trips-tabs button[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.trips-tabs button span{font-size:var(--text-12);margin-left:6px}
.trips-context{font-size:var(--text-13);line-height:1.6;margin-bottom:16px}
.trip-list{display:grid;gap:12px}
.trip-record{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;padding:20px;background:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-card)}
.trip-record:hover{border-color:var(--accent)}
.trip-record-date{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:var(--text-12);color:var(--muted)}
.trip-sample{font-size:var(--text-12);color:var(--muted)}
.trip-record-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:10px}
.trip-record-heading strong{font-size:var(--text-18);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.trip-record-heading>.icon{flex-shrink:0;color:var(--muted)}
.trip-record-time{font-size:var(--text-13);color:var(--muted);margin:6px 0 14px}
.trips-empty{padding:24px 0;text-align:center}
.trips-empty h2{font-size:var(--text-24)}
.trips-empty p{margin-top:12px}
.trip-details-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 24px;color:var(--muted)}
.trip-detail-title{font-size:var(--text-32);overflow-wrap:anywhere}
.trip-detail-date{font-size:var(--text-14);margin:12px 0 24px}
.trip-schedule{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trip-schedule>div{display:flex;gap:10px;align-items:flex-start}
.trip-schedule .icon{color:var(--accent);margin-top:2px}
.trip-schedule span{font-size:var(--text-13);color:var(--muted)}
.trip-schedule strong{display:block;color:var(--text);font-size:var(--text-18);font-weight:500;margin-top:6px}
.trip-launch{padding:12px 0 28px}
.trip-briefing h2{font-size:var(--text-20);line-height:1.35}
.trip-launch-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0;min-height:44px}
.trip-launch-heading h2{font-size:var(--text-16);line-height:1.4}
.trip-launch-heading .text-btn{display:flex;align-items:center;gap:4px;width:auto;min-height:44px;padding:8px 0 8px 12px;margin:0;color:var(--accent);font-size:var(--text-14)}
.trip-launch-place{display:flex;align-items:flex-start;gap:12px}
.trip-launch-place>.icon{color:var(--accent);flex-shrink:0;margin-top:3px}
.trip-launch-place>div{min-width:0}
.trip-launch-place strong{font-size:var(--text-16);line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.trip-launch-place p{margin-top:4px;font-size:var(--text-13);line-height:1.6;color:var(--muted)}
.trip-briefing{padding:20px;background:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-card)}
.trip-briefing-heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.trip-briefing p{margin-top:14px;line-height:1.65}
.trip-conditions{margin:20px 0 0}
.trip-conditions>div{padding:14px 0;border-top:1px solid var(--border)}
.trip-conditions dt{font-size:var(--text-14);font-weight:600}
.trip-conditions dd{margin:6px 0 0;color:var(--muted);font-size:var(--text-14);line-height:1.65}
.trip-source,.trip-history-note{font-size:var(--text-12);line-height:1.65;color:var(--muted)}
.trip-history-note{margin:20px 0}
.trip-details-screen .primary,.trip-details-screen .secondary{width:100%}
.trip-briefing .secondary,.trip-edit{margin-top:16px}
.trip-detail-actions>.trip-edit{margin-top:12px}
.trip-form-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trip-form-times input{min-width:0;width:100%}
#trip-form-error:empty{display:none}
#trip-form-error{margin:0 0 16px}
@media(max-width:360px){.trips-scroll{padding-left:16px;padding-right:16px}.trip-record,.trip-briefing{padding:16px}.trip-form-times{grid-template-columns:1fr;gap:0}}

.timing-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:16px 0 0}
.timing-summary .timing-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--text-13)}
.timing-heading{display:flex;align-items:center;gap:8px}.timing-heading>div{min-width:0}.timing-heading>.icon{font-size:var(--text-20);color:var(--accent);flex-shrink:0}.timing-heading strong{white-space:nowrap}
.timing-summary strong{display:block;margin-top:6px;font-size:var(--text-20);font-weight:500}
.opportunity-timing .timing-weather{margin-top:10px;font-size:var(--text-13);line-height:1.65;color:var(--muted)}
.timing-warning{padding:16px;margin-bottom:16px;background:var(--info-background);border:1px solid var(--info-border);border-radius:12px}.timing-warning p{margin:0}.timing-warning .text-btn{color:var(--accent);margin-top:8px;text-align:left}

.opportunity-timing .timing-setup{margin-top:16px;padding-top:0;border-top:0}
.timing-setup dl{margin:0}
.timing-setup dl>div{padding:9px 0;gap:12px;font-size:var(--text-13);border-bottom:0}
@media(max-width:360px){.timing-summary{gap:12px}}

.timing-setup dd{font-size:var(--text-14)}

/* Paired departure and return recommendation cards. */
.opportunity-timing .timing-summary{gap:12px}
.timing-summary>div{min-width:0;padding:12px;background:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-card)}
.timing-summary .timing-heading{gap:6px}
.timing-summary .timing-heading strong{font-size:22px}
@media(max-width:360px){.opportunity-timing .timing-summary{grid-template-columns:1fr}.timing-summary>div{padding:16px}.timing-summary .timing-heading strong{font-size:22px}}

.forecast-assessment [data-save-forecast]{border-color:var(--accent);color:var(--accent);background:transparent}
.forecast-assessment [data-save-forecast]:hover{background:var(--accent-dim)}

.forecast-assessment-heading>.alternative-condition{min-width:0;white-space:nowrap;text-align:left}
.forecast-condition-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forecast-assessment-heading>.alternative-condition>.icon{flex-shrink:0}

/* Trip details: plan actions and historical context share the marine visual system. */
.trip-saved-window{margin-top:24px}
.trip-saved-window h2{font-size:var(--text-20);line-height:1.35}
.trip-saved-window>p{margin-top:12px;font-size:var(--text-14);line-height:1.65}
.trip-saved-window .trip-conditions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.trip-saved-window .trip-conditions>div{padding:12px;background:var(--card-background);border:1px solid var(--border);border-radius:var(--radius-card)}
.trip-vessel{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--muted);font-size:var(--text-13)}
.trip-vessel strong{display:block;color:var(--text);font-size:var(--text-14);font-weight:500;margin-top:6px}
.trip-outlook-conditions{font-size:var(--text-13)}
.trip-outlook-change{padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:360px){.trip-saved-window .trip-conditions{grid-template-columns:1fr}}

.trip-vessel + .trip-detail-actions,.trip-saved-window + .trip-detail-actions,.trip-briefing + .trip-detail-actions{margin-top:24px}

/* AM/PM stays readable while the hour carries the visual emphasis. */
small.time-period{font-size:clamp(12px,.7em,16px);font-weight:inherit;line-height:inherit;color:inherit;display:inline}

/* Session 4: branded navigation, membership and launch access details. */
.nav-plan-icon img{position:absolute;left:50%;top:50%;width:63.888px;height:63.888px;max-width:none;object-fit:contain;mix-blend-mode:multiply;clip-path:inset(0 0 24% 0);transform:translate(-50%,-40%);margin:0}
.nav-plan-icon{background:radial-gradient(circle at center,rgba(255,255,255,.96) 0%,rgba(255,255,255,.68) 28%,rgba(255,255,255,0) 72%),var(--accent);position:relative;isolation:isolate;overflow:hidden}
.nav-plan:hover .nav-plan-icon{background:radial-gradient(circle at center,#fff 0%,rgba(255,255,255,.78) 28%,rgba(255,255,255,0) 76%),var(--primary-hover)}
.membership-entry{width:100%;padding:20px 16px;gap:14px;background:var(--card-background);border-radius:var(--radius-card)}
.membership-entry>.icon:first-child{font-size:var(--text-32)}
.membership-screen h1{font-size:var(--text-32)}
.membership-top-spacer{width:44px}
.membership-intro{margin:12px 0 24px;line-height:1.6;font-size:var(--text-14)}
.membership-plan{padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--card-background)}
.membership-plan-heading{display:flex;align-items:center;gap:12px}
.membership-brand{display:grid;place-items:center;width:44px;height:44px;color:var(--accent);flex-shrink:0}
.membership-brand .icon{font-size:36px}
.membership-plan-heading h2{font-size:var(--text-20)}
.membership-plan-heading p{font-size:var(--text-13);margin-top:4px}
.membership-status{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--accent);font-size:var(--text-13)}
.membership-status .icon{font-size:16px}
.membership-status.is-inactive{color:var(--muted)}
.membership-facts{margin:16px 0 20px}
.membership-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--border);font-size:var(--text-14)}
.membership-facts dt{color:var(--muted)}
.membership-facts dd{margin:0;text-align:right;font-weight:500}
.membership-facts small{font-size:var(--text-12);font-weight:400;white-space:nowrap}
.membership-terms{font-size:var(--text-12);line-height:1.6;color:var(--muted);margin-top:12px}
.membership-included{margin-top:28px}
.membership-included h2{font-size:var(--text-18)}
.membership-benefits{list-style:none;padding:0;margin:12px 0 0}
.membership-benefits li{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:var(--text-14)}
.membership-benefits .icon{color:var(--accent);font-size:20px}
.membership-screen .primary,.membership-screen .secondary,.membership-restore{width:100%}
.membership-restore{display:flex;justify-content:space-between;align-items:center;text-align:left;margin-top:20px;min-height:52px;border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:var(--text-14)}
.membership-restore:hover{color:var(--accent)}
.membership-message{font-size:var(--text-13);line-height:1.6;margin-top:12px}
.membership-message:empty{display:none}
@media(max-width:360px){.membership-plan{padding:16px}.membership-facts>div{gap:12px;font-size:var(--text-13)}}
.launch-option>span{min-width:0}
.launch-option strong{overflow-wrap:anywhere}

/* Profile-only form sheets: native controls provide draft state and keyboard support. */
.profile-edit-group{border:0;padding:0;margin:0 0 24px;min-width:0}
.profile-edit-group legend{font-size:var(--text-13);font-weight:600;padding:0;margin-bottom:12px;color:var(--muted)}
.profile-edit-choices{display:grid;gap:8px}
.profile-edit-choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-card);cursor:pointer}
.profile-edit-choice:has(input:checked){background:var(--surface);border-color:var(--accent)}
.profile-edit-choice input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex-shrink:0}
.profile-edit-choice>span{min-width:0}
.profile-edit-choice strong{font-size:var(--text-16);font-weight:500;line-height:1.35}
.profile-edit-choice small{display:block;font-size:var(--text-14);font-weight:400;margin-top:6px;line-height:1.5}
.profile-edit-choice[hidden]{display:none}
.profile-edit-actions{margin-top:24px}
.profile-edit-actions .primary,.profile-edit-actions .text-btn{width:100%}
.profile-edit-actions .text-btn{min-height:44px;margin-top:8px}
.profile-edit-error:empty{display:none}
.profile-edit-error{margin-top:16px}

/* Shared native selection inputs, styled to the marine palette. */
:is(.profile-edit-choice,.check-row) input:is([type="checkbox"],[type="radio"]){appearance:none;display:inline-grid;place-content:center;padding:0;border:1px solid var(--border);background:var(--raised);border-radius:4px;cursor:pointer}
:is(.profile-edit-choice,.check-row) input[type="radio"]{border-radius:50%}
:is(.profile-edit-choice,.check-row) input:checked{background:var(--accent);border-color:var(--accent)}
:is(.profile-edit-choice,.check-row) input[type="checkbox"]:checked::after{content:"";width:5px;height:9px;border:solid var(--primary-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
:is(.profile-edit-choice,.check-row) input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary-ink)}
@media(forced-colors:active){:is(.profile-edit-choice,.check-row) input:is([type="checkbox"],[type="radio"]){appearance:auto}:is(.profile-edit-choice,.check-row) input:checked::after{content:none}}

.trip-location-picker{position:relative}
.trip-location-picker input{cursor:pointer;padding-right:44px}
.trip-location-picker>.icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}

.forecast-calendar-heading{margin-bottom:0}
.forecast-calendar-heading>span{font-size:var(--text-14)}
.forecast-today{min-height:44px;color:var(--accent);font-size:var(--text-13)}
.forecast-week-navigation{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--muted);font-size:var(--text-13)}
.forecast-week-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border)}
.forecast-week-arrow:hover:not(:disabled){background:var(--surface)}
@media(max-width:360px){.forecast-week{gap:3px}.forecast-week button>span{font-size:11px}.forecast-week button>strong{font-size:var(--text-16)}}

.account-back{width:100%;min-height:44px;margin-top:12px}
.account-delete{color:var(--error);min-height:44px;margin-top:16px}
.account-current{overflow-wrap:anywhere;font-size:var(--text-14)}
[data-account-form]>.primary{width:100%}

.profile-signout{width:100%;margin-top:28px;flex-shrink:0}

.account-delete.secondary{width:100%}

.forecast-week-navigation{gap:8px}
.forecast-week-range{font-size:var(--text-14);font-weight:500;color:var(--text);text-align:center}
.forecast-week-arrow{flex-shrink:0}

#modal.restart-modal{width:min(420px,calc(100vw - 32px))}

.profile-settings>.profile-setting{position:relative;padding-inline:16px}
.profile-settings>.profile-setting+.profile-setting{border-top:0}
.profile-settings>.profile-setting+.profile-setting::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--border)}
.profile-settings>.profile-setting:focus-visible{outline-offset:-3px}

/* Alert history */
.home-alerts{position:relative;flex-shrink:0;color:var(--text)}
.alert-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.alerts-header{display:flex;align-items:center;gap:14px;padding:12px 24px 4px}
.alerts-header h1{font-size:var(--text-24);margin:0}
.alerts-scroll{padding-top:16px}
.alerts-group{margin-bottom:28px}
.alerts-group h2{font-size:var(--text-16);margin:0 0 12px}
.alert-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:18px 14px;text-align:left;border:1px solid var(--border);border-radius:16px;background:transparent;color:var(--text);margin-bottom:10px}
.alert-row.is-unread{background:var(--surface);border-color:var(--accent)}
.alert-row:hover{background:var(--raised)}
.alert-symbol{color:var(--accent);padding-top:3px;flex-shrink:0}
.alert-copy{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.alert-copy strong{font-size:var(--text-16);font-weight:600;line-height:1.45}
.alert-copy>span:not(.alert-meta){font-size:var(--text-14);line-height:1.55;color:var(--muted)}
.alert-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:var(--text-12);color:var(--muted)}
.alert-unread-label{color:var(--accent);font-weight:600}
.alert-row>.icon{width:14px;flex-shrink:0;align-self:center;color:var(--muted)}
.alert-detail-time{font-size:var(--text-12);color:var(--muted)}

.trip-change-summary{border-radius:var(--radius-card);margin:20px 0}
.trip-change-label{display:flex;align-items:center;gap:8px;font-size:var(--text-12);color:var(--accent)}
.trip-change-summary h2{font-size:var(--text-20);margin:14px 0 10px}
.trip-change-summary p{font-size:var(--text-14);line-height:1.6}
.trip-change-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.trip-change-comparison dt{font-size:var(--text-12);color:var(--muted);margin-bottom:6px}
.trip-change-comparison dd{font-size:var(--text-16);margin:0}
.trip-change-comparison small{display:block;font-size:var(--text-12);color:var(--muted);margin-top:5px;line-height:1.5}

.trip-update-button{margin-top:16px;width:100%}

.phone-dialog-backdrop{position:fixed;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.phone-dialog-backdrop[hidden]{display:none}