.weather-page{margin:0;background:#edf3f6;color:#223b4c;font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;font-size:14px;line-height:1.55;--wx-blue:#176b9b;--wx-line:#dce6eb;--wx-muted:#617784;--wx-sea:#e3eff3}
.weather-page *{box-sizing:border-box}.weather-page .page-masthead{display:none}.weather-page button,.weather-page input{font:inherit}.weather-page button{cursor:pointer}.weather-page button:disabled{cursor:default;opacity:.4}.wx-symbols{position:absolute;width:0;height:0}.wx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wx-quota{position:absolute;top:151px;left:76px;right:350px;z-index:750;background:#fff6e8;border:1px solid #ead0a3;border-radius:7px;padding:12px 14px;color:#78511c;font-size:11px;box-shadow:0 2px 8px #65451715}.wx-quota strong{font-size:12px}.wx-quota p{margin:5px 0}.wx-quota small{font-size:10px}.wx-quota[hidden]{display:none}
.wx-map-tools button{padding:0;white-space:nowrap}
#weather-map{z-index:0}
.wx-app{height:100vh;height:100dvh;display:grid;grid-template-rows:82px minmax(0,1fr) 136px;overflow:hidden}.wx-header{display:flex;align-items:center;gap:30px;background:#fff;padding:0 28px;border-bottom:1px solid var(--wx-line);z-index:1001}.wx-heading{flex-shrink:0}.wx-heading h1{font-size:23px;letter-spacing:-1px;margin:0;font-weight:800;line-height:1.3}.wx-heading>span{font-size:11px;color:var(--wx-muted)}
#wx-search{position:relative;max-width:460px;flex:1;margin:auto;display:flex;border:1px solid #d4e0e6;background:#f4f8fa;border-radius:8px;height:43px}#wx-query{width:100%;min-width:0;background:transparent;border:0;padding:0 14px;color:#243e4e;outline-offset:-3px}#wx-search>button{border:0;background:transparent;width:45px;flex-shrink:0;color:#506c7c}#wx-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.wx-text-button{border:0;background:none;color:#557180;white-space:nowrap;font-size:12px!important}
#wx-results{position:absolute;top:49px;left:0;right:0;max-height:310px;overflow:auto;box-shadow:0 10px 30px #25495b24;border:1px solid var(--wx-line);background:white;border-radius:8px;padding:6px}#wx-results button{width:100%;padding:12px;border:0;background:#fff;text-align:left;display:block}#wx-results button:hover{background:#edf5f8}#wx-results small{display:block;color:var(--wx-muted)}#wx-results p{padding:8px}
.wx-stage{position:relative;min-height:0;isolation:isolate}#weather-map{position:absolute;inset:0;background:var(--wx-sea)}.wx-layers{position:absolute;z-index:700;top:18px;left:22px;display:flex;gap:4px;background:#fff;padding:5px;border:1px solid #d6e2e7;border-radius:12px;box-shadow:0 3px 12px #2c4c6014;max-width:calc(100% - 368px);overflow-x:auto;scrollbar-width:thin}.wx-layers button{border:0;min-width:58px;padding:9px 11px 7px;border-radius:8px;display:flex;align-items:center;flex-direction:column;gap:4px;color:#4d6572;background:white;font-size:11px;font-weight:650;white-space:nowrap}.wx-layers svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.wx-layers button:hover{background:#eff5f7}.wx-layers [aria-pressed=true]{background:#e8f3fa;color:#09659c;box-shadow:inset 0 -2px #167aad}
.wx-map-tools{position:absolute;z-index:700;left:22px;top:114px;display:grid;gap:7px}.wx-map-tools button{width:40px;height:40px;background:#fff;border:1px solid #d0dfe5;border-radius:7px;color:#34576b;box-shadow:0 2px 6px #29485b10;font-size:11px}.wx-map-tools button:first-child{font-size:25px}.wx-map-tools [aria-pressed=true]{background:#176b9b;color:#fff}.wx-status{position:absolute;z-index:600;top:108px;left:76px;max-width:calc(100% - 426px);font-size:11px;color:#496373;background:#fffffff0;padding:7px 11px;border-radius:5px;line-height:1.5;box-shadow:0 1px 6px #26455a0a}.wx-status button{border:0;color:#076d9f;background:none;text-decoration:underline;margin-left:6px}
.wx-detail{position:absolute;z-index:800;top:18px;right:20px;width:306px;max-height:calc(100% - 36px);overflow:auto;background:#fff;border:1px solid #d7e3e9;border-radius:12px;box-shadow:0 6px 26px #28495a20;scrollbar-width:thin}.wx-detail[hidden]{display:none}#wx-detail-content{padding:27px 23px 20px}#wx-detail-close{position:absolute;top:7px;right:9px;width:32px;height:32px;border:0;background:transparent;font-size:23px;color:#8295a0}.wx-detail h2{margin:5px 0 8px;font-size:26px;letter-spacing:-1px;line-height:1.45}.wx-detail p{color:#617784;font-size:13px;margin:9px 0}.wx-detail small{color:#617784;font-size:11px}.wx-empty-icon{width:56px;height:56px;margin:12px 0 25px;background:#e9f4f8;display:grid;place-items:center;border-radius:50%;color:#267a9f}.wx-empty-icon svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:1.4}.wx-overline{color:#127299!important;font-weight:650;font-size:11px!important}.wx-onboarding{border-top:1px solid var(--wx-line);border-bottom:1px solid var(--wx-line);padding:21px 0;margin:23px 0;font-size:12px}.wx-onboarding p{margin:6px 0 0;font-size:12px}
.wx-location-title{font-size:22px!important;padding-right:12px}.wx-kind{display:inline-block;font-size:10px;color:#437084;background:#eef5f8;border-radius:3px;padding:3px 7px}.wx-detail-time{font-size:12px!important}.wx-primary{padding:16px 0 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;border-bottom:1px solid var(--wx-line);color:#176b9b}.wx-primary strong{font-size:38px;letter-spacing:-1.6px;line-height:1.3;font-weight:750;font-variant-numeric:tabular-nums}.wx-primary>span{font-size:15px}.wx-primary small{width:100%;color:#617784;font-size:11px}.wx-metrics{display:grid;grid-template-columns:1fr 1fr;margin:0}.wx-metrics>div{padding:14px 0;border-bottom:1px solid #e7edf0}.wx-metrics dt{font-size:11px;color:#6a7e89}.wx-metrics dd{margin:4px 0 0;font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}.wx-metrics dd small{font-weight:400;font-size:10px;margin-left:3px}.wx-source-note{border-top:1px solid var(--wx-line);padding-top:12px;margin-top:16px;font-size:10px!important;line-height:1.7!important}.wx-source-note a{color:#33799b}.wx-unavailable{padding:12px;background:#f3f6f8;border-radius:5px;font-size:12px;color:#526c79}.wx-stale{color:#a46210!important}.wx-chart-title{font-size:12px;font-weight:650;margin:18px 0 10px}.wx-chart{display:flex;align-items:stretch;gap:5px;height:106px}.wx-chart button{position:relative;flex:1;min-width:0;border:0;background:#f4f8fa;border-radius:4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:4px 1px;font-size:9px;color:#677f8e}.wx-chart button[aria-pressed=true]{background:#e0f0f8;color:#086493}.wx-chart b{font-size:10px;z-index:1;font-variant-numeric:tabular-nums}.wx-chart i{display:block;background:#79b7d0;width:64%;min-height:2px;border-radius:3px 3px 0 0;margin-top:4px;margin-bottom:4px}.wx-chart button[aria-pressed=true] i{background:#247ea7}.wx-chart span{white-space:nowrap;line-height:1.45}.wx-tide-events{padding:0;list-style:none}.wx-tide-events li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--wx-line);font-size:12px}.wx-tide-events b{color:#176b9b}.wx-detail-action{margin-top:16px;width:100%;min-height:39px;border:1px solid #d4e3eb;background:#f4f9fc;color:#226886;border-radius:5px}
.wx-legend{position:absolute;z-index:600;bottom:23px;left:22px;width:224px;background:#ffffffed;padding:12px 15px;border:1px solid #dbe5e9;border-radius:8px;box-shadow:0 2px 8px #1d48630c}.wx-legend>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.wx-legend strong{font-size:12px}.wx-legend span{font-size:11px;color:#60798a}#wx-color-scale{height:6px;border-radius:3px;background:linear-gradient(90deg,#6fadc7,#287db7,#666ec1,#b45f96,#d98759)}#wx-scale-labels{display:flex;justify-content:space-between;font-size:10px;color:#536e7c;margin-top:5px}.wx-legend p{font-size:10px;margin:7px 0 0;color:#69808b}
.wx-pin{background:none;border:0}.wx-pin-face{display:flex;align-items:center;justify-content:center;gap:4px;border:2px solid white;border-radius:18px;background:var(--pin-color,#257ea8);color:#fff;box-shadow:0 1px 5px #294a6650;min-height:29px;padding:3px 8px;font:700 12px/1.2 "Malgun Gothic",sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}.wx-pin-face svg{width:13px;height:16px;fill:currentColor;flex-shrink:0}.wx-pin-selected .wx-pin-face{outline:3px solid #193e5c;outline-offset:2px}.wx-pin-caption{display:block;text-align:center;color:#274658;font:650 10px/1.4 "Malgun Gothic",sans-serif;white-space:nowrap;margin-top:4px;text-shadow:0 1px white,1px 0 white,-1px 0 white,0 -1px white}.wx-pin:focus{outline:3px solid #196da0!important;outline-offset:4px}.wx-picked{border-radius:50%;width:16px;height:16px;background:#116d9f;border:3px solid white;box-shadow:0 0 0 6px #197db833}.wx-toast{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);padding:12px 18px;background:#23495fee;color:#fff;border-radius:7px;font-size:12px;z-index:950;box-shadow:0 3px 15px #1d3d5220}
.wx-timeline{background:#fff;border-top:1px solid var(--wx-line);padding:14px 26px 8px;z-index:900}.wx-time-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.wx-time-top>div{display:flex;align-items:center;gap:10px}.wx-time-top strong{font-size:15px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}.wx-time-top span:last-child{color:#6d8390;font-size:11px}.wx-live-dot{width:7px;height:7px;border-radius:50%;background:#1c83a6;display:inline-block}.wx-time-top button{font-size:11px;color:#356d87;border:1px solid #d6e4eb;padding:4px 11px;background:#f6fafc;border-radius:4px}.wx-time-controls{display:flex;align-items:center;gap:13px;margin:8px 0 5px}.wx-time-controls>button{border:0;background:#f1f6f8;color:#326e8a;min-width:32px;height:32px;font-size:24px;border-radius:5px}.wx-range-wrap{width:100%;min-width:0}#wx-time{width:100%;margin:0;height:20px;accent-color:#167aab;cursor:pointer}#wx-time-labels{display:flex;justify-content:space-between;font-size:10px;color:#6d8390;padding:0 4px}.wx-footer-note{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#738895}.wx-footer-note button{border:0;background:none;padding:0;color:#577387;font-size:10px}.weather-page .leaflet-control-zoom{border:1px solid #cfdfe7;box-shadow:0 1px 6px #27495b14;margin:0 0 125px 22px}.weather-page .leaflet-control-zoom a{width:38px;height:36px;line-height:36px;color:#3f657b;font-size:20px}.weather-page .leaflet-control-attribution{font-size:9px;background:#ffffffb8}
.weather-page dialog{border:1px solid #d7e3e9;border-radius:12px;max-width:560px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;padding:30px;color:#294858;line-height:1.8}.weather-page dialog::backdrop{background:#193e5266}.weather-page dialog h2{font-size:23px;margin:0 0 14px}.weather-page dialog p,.weather-page dialog dd{font-size:13px;color:#5c7481}.weather-page dialog dt{font-size:14px;font-weight:700;margin-top:18px}.weather-page dialog dd{margin:5px 0 0}.weather-page dialog a{color:#0d73a6}.wx-dialog-close{position:absolute;right:12px;top:10px;font-size:24px;width:36px;height:36px;background:none;border:0;color:#607d8b}#wx-warning-content{white-space:pre-wrap;font-size:12px}#wx-detail-open{position:absolute;z-index:700;right:20px;bottom:26px;background:#fff;color:#16698c;border:1px solid #d1e1e8;border-radius:6px;padding:10px 15px}
@media(max-width:1200px){.wx-header{gap:16px;padding:0 20px}.wx-detail{width:276px;right:14px}.wx-layers{max-width:calc(100% - 320px);left:16px}.wx-layers button{min-width:52px;padding:9px 8px 7px}.wx-status{max-width:calc(100% - 375px)}#wx-detail-content{padding:25px 19px 18px}}
@media(max-width:900px) and (min-width:721px){.wx-heading>span{display:none}.wx-header{gap:10px;padding:0 15px}.wx-heading h1{font-size:20px}.wx-detail{width:245px}.wx-layers{max-width:calc(100% - 280px)}.wx-status{max-width:calc(100% - 338px)}.wx-primary strong{font-size:32px}.wx-time-top span:last-child{display:none}.wx-legend{width:195px}}
@media(max-width:720px){.weather-page{padding-bottom:calc(72px + env(safe-area-inset-bottom))}.wx-app{height:calc(100dvh - 72px - env(safe-area-inset-bottom));grid-template-rows:64px minmax(0,1fr) 128px}.wx-header{gap:10px;padding:0 14px}.wx-heading h1{font-size:19px}.wx-heading>span{display:none}.wx-header .wx-text-button{font-size:10px!important;padding:5px 0}#wx-search{height:37px}#wx-query{padding:0 10px;font-size:11px}#wx-query::placeholder{font-size:11px}#wx-search>button{width:32px}.wx-layers{top:12px;left:12px;right:12px;max-width:none;gap:2px;padding:4px;border-radius:9px}.wx-layers button{flex:1;min-width:43px;padding:7px 6px 5px;font-size:10px;gap:3px}.wx-layers svg{width:20px;height:20px}.wx-map-tools{top:112px;left:12px;gap:6px}.wx-map-tools button{width:34px;height:34px}.wx-status{top:84px;left:12px;max-width:calc(100% - 24px);padding:4px 8px;font-size:10px;max-height:44px;overflow:auto}.wx-legend{bottom:20px;left:12px;width:177px;padding:9px 11px}.wx-legend p{font-size:9px}.wx-legend strong{font-size:11px}.weather-page .leaflet-control-zoom{margin-left:12px;margin-bottom:119px}.weather-page .leaflet-control-zoom a{width:32px;height:31px;line-height:31px}.wx-detail{top:auto;bottom:12px;right:12px;left:12px;width:auto;max-height:calc(100% - 90px);border-radius:12px;z-index:850}.wx-detail:not(.wx-has-selection){display:none}#wx-detail-content{padding:20px}.wx-detail h2{font-size:21px!important;margin:3px 0}.wx-primary{padding:10px 0}.wx-primary strong{font-size:31px}.wx-metrics{grid-template-columns:repeat(3,1fr)}.wx-metrics>div{padding:10px 0}.wx-metrics dd{font-size:14px}.wx-chart{height:84px}.wx-source-note{margin-top:12px}.wx-time-top strong{font-size:12px}.wx-time-top span:last-child{font-size:9px}.wx-time-top>div{gap:6px}.wx-timeline{padding:11px 13px 6px}.wx-time-top button{font-size:10px;padding:4px 8px}.wx-time-controls{gap:6px;margin:7px 0 5px}.wx-time-controls>button{min-width:28px;height:31px}.wx-footer-note{font-size:9px;gap:6px}.wx-footer-note button{font-size:9px}.wx-footer-note>span{max-width:66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wx-toast{bottom:20px}.weather-page dialog{padding:25px}.wx-pin-face{font-size:11px;min-height:27px;padding:3px 6px}#wx-detail-open{right:12px;bottom:24px;font-size:11px}}
@media(max-width:380px){.wx-layers button{min-width:40px}.wx-heading h1{font-size:17px}.wx-time-top span:last-child{display:none}.wx-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.wx-quota{top:120px;left:56px;right:12px;padding:10px;font-size:10px;max-height:130px;overflow:auto}.wx-layers button{min-width:40px}.wx-layers{scrollbar-width:none}}
@media(prefers-reduced-motion:reduce){.weather-page *{scroll-behavior:auto!important}}
.wx-extra-tools{position:absolute;z-index:710;top:150px;left:76px;right:350px;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none}.wx-extra-tools button{pointer-events:auto;border:1px solid #cadce5;border-radius:5px;background:#fff;color:#31566c;padding:8px 11px;min-height:38px;font-size:11px;box-shadow:0 2px 7px #26465b13}.wx-extra-tools button[aria-pressed=true]{background:#184e6b;color:white;border-color:#184e6b}.wx-quota{top:246px}.wx-history-chart{display:block;width:100%;height:auto;background:#f2f7fa;border-radius:5px}.wx-history-range{display:flex;justify-content:space-between;font-size:10px;color:#5c7481;gap:15px}.wx-table-scroll{max-height:340px;overflow:auto;margin:16px 0}.weather-page table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;font-variant-numeric:tabular-nums}.weather-page th,.weather-page td{padding:10px 8px;border-bottom:1px solid #dce6eb;white-space:nowrap}.weather-page thead{background:#edf5f9}.weather-page caption{text-align:left;padding-bottom:8px;color:#617784}.wx-trip-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wx-trip-form label{font-size:12px}.wx-trip-form input{display:block;margin-top:5px;padding:9px 6px;border:1px solid #c8dbe5;border-radius:4px;max-width:100%;width:100%;min-width:0}.wx-trip-form button{grid-column:1/-1;margin:0}.wx-point-choice{display:block;text-align:left;width:100%;padding:13px 8px;border:0;border-bottom:1px solid #dce6eb;background:#fff;color:#25465a}.wx-point-choice:hover{background:#edf5f9}.wx-point-choice small{display:block;color:#617784;margin-top:5px}.weather-page :focus-visible{outline:3px solid #257dab;outline-offset:3px}#wx-analysis{max-width:680px}#wx-analysis h3{font-size:16px;margin-top:24px}.wx-heading h1{font-size:21px;white-space:nowrap}
@media(max-width:1200px){.wx-extra-tools{right:310px}.wx-heading h1{font-size:19px}}
@media(max-width:900px) and (min-width:721px){.wx-extra-tools{right:278px}.wx-extra-tools button{padding:7px}.wx-heading h1{font-size:17px}}
@media(max-width:720px){.wx-app{grid-template-rows:94px minmax(0,1fr) 128px}.wx-header{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:9px 14px}.wx-heading h1{font-size:18px}.wx-header #wx-search{grid-row:2;grid-column:1/-1;width:100%;max-width:none;margin:0;height:32px}.wx-header .wx-text-button{grid-row:1;grid-column:2}.wx-extra-tools{top:135px;left:56px;right:12px;gap:4px}.wx-extra-tools button{font-size:10px;padding:6px 8px;min-height:34px}.wx-quota{top:216px}.wx-trip-form{gap:8px}.wx-trip-form input{font-size:12px}#wx-analysis{padding:24px 18px}.wx-table-scroll{max-height:280px}}

.wx-frame-image{display:block;width:100%;height:auto;background:#f3f7fa}.wx-frame-image[hidden]{display:none}.wx-imagery-controls{display:flex;gap:12px;align-items:center}.wx-imagery-controls label{flex:1;font-size:12px}.wx-imagery-controls input{display:block;width:100%;accent-color:#176b9b}.wx-imagery-controls button{width:38px;height:38px;border:1px solid #c8dbe5;background:#f3f8fa;color:#176b9b;border-radius:4px;font-size:22px}

.wx-observation-pin{border:3px solid white;border-radius:50%;background:#163f58;box-shadow:0 0 0 2px #163f5860}

.wx-trip-form{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-trip-form label{min-width:0}@media(max-width:480px){.wx-trip-form{grid-template-columns:minmax(0,1fr)}}

/* Sea tide bubble only. The brand pin tip stays at the official coordinate at every zoom. */
.tide-marker{--tide-color:#71828b;box-sizing:border-box;width:166px!important;height:90px!important;background:none;border:0;border-radius:0;padding:0;box-shadow:none;color:#173f53;font-family:inherit;white-space:normal;overflow:visible}
.tide-up{--tide-color:#dc303b}.tide-down{--tide-color:#0878d1}
.tide-bubble{position:absolute;left:0;bottom:26px;box-sizing:border-box;width:max-content;min-width:136px;max-width:166px;height:54px;padding:4px 8px;background:#fff;border:1px solid #bfd4df;border-top:3px solid var(--tide-color);border-radius:12px 12px 12px 5px;box-shadow:0 3px 10px #002b4650}
.tide-bubble:after{content:"";position:absolute;left:17px;bottom:-8px;border:7px solid transparent;border-bottom:0;border-top:8px solid #fff}
.tide-heading{display:flex;align-items:center;gap:4px;height:18px;margin-bottom:2px}.tide-heading b{flex:1;min-width:0;font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tide-heading>span{background:#edf5fb;color:#527487;border-radius:6px;padding:1px 4px;font-size:10px;white-space:nowrap}
.tide-reading{display:flex;align-items:center;gap:3px;height:22px;white-space:nowrap}.tide-reading em{color:var(--tide-color);font-family:"Segoe UI Symbol",Arial,sans-serif;font-size:23px;line-height:24px;font-style:normal;font-weight:700;flex-shrink:0}.tide-reading strong{color:var(--tide-color);font-size:14px}.tide-reading>span{margin-left:4px;color:#526d7c;font-size:10px}.tide-reading time{color:#173f53;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.tide-pin{position:absolute;left:8.7px;top:62.4px;width:26px;height:26px;background:var(--tide-color);-webkit-mask:url("favicon.svg") center/contain no-repeat;mask:url("favicon.svg") center/contain no-repeat;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px #002b46)}
.tide-marker:hover,.tide-marker:focus{z-index:2000!important}.tide-marker:focus .tide-bubble{outline:2px solid var(--tide-color);outline-offset:2px}

/* Keep the pin anchored; only its sea-facing label changes sides. */
.tide-south .tide-bubble{left:24px;top:97px;bottom:auto;transform:translateX(-50%);border-radius:12px}
.tide-east .tide-bubble{left:44px;top:47px;bottom:auto;border-radius:12px}
.tide-west .tide-bubble{left:0;top:47px;bottom:auto;transform:translateX(-100%);border-radius:12px}
.tide-south .tide-bubble:after{left:50%;top:-10px;bottom:auto;transform:translateX(-50%);border:7px solid transparent;border-top:0;border-bottom:8px solid var(--tide-color)}
.tide-east .tide-bubble:after{left:-8px;top:19px;bottom:auto;border:7px solid transparent;border-left:0;border-right:8px solid #fff}
.tide-west .tide-bubble:after{left:auto;right:-8px;top:19px;bottom:auto;border:7px solid transparent;border-right:0;border-left:8px solid #fff}
.wx-tide-options{display:block;margin-top:10px;font-size:11px;color:#496373}.wx-tide-options[hidden]{display:none}.wx-tide-options select{display:block;width:100%;margin-top:5px;padding:5px;border:1px solid #d6e2e7;border-radius:5px;background:#fff;color:#264d63;font:inherit}
.wx-app{grid-template-columns:minmax(0,1fr)}.wx-header,.wx-stage,.wx-timeline{min-width:0}.wx-stacked-pin .wx-pin-face{margin-bottom:2px;min-height:27px;border-radius:6px;font-size:12px}.wx-stacked-pin .wx-pin-face small{font-size:9px;font-weight:400}.wx-stacked-pin .wx-pin-face small:first-child{margin-right:auto}.wx-stacked-pin .wx-pin-face small:last-child{min-width:17px;text-align:right}.wx-legend{max-height:42%;overflow:auto}#wx-enabled-legends:empty{display:none}#wx-enabled-legends>div{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:10px}#wx-enabled-legends b{font-weight:600;min-width:66px}#wx-enabled-legends i{flex:1;height:5px;border-radius:2px}#wx-enabled-legends small{font-size:9px;white-space:nowrap}#wx-color-scale[hidden],#wx-scale-labels[hidden]{display:none}

/* Readable weather controls; secondary tools stay available on demand. */
.wx-more-tools{display:contents}.wx-more-tools>summary{display:none}
@media(min-width:721px){
 .weather-page .site-nav .nav-links>a,.weather-page .site-nav .nav-links>button{font-size:16px;min-height:52px;line-height:1.5}
 .wx-layers button{font-size:15px;min-width:64px;min-height:64px;padding:8px}
 .wx-map-tools button{font-size:14px;width:44px;height:44px}
 .wx-extra-tools button{font-size:14px;min-height:44px}
 .wx-status,.wx-heading>span{font-size:14px}
 .wx-legend strong{font-size:16px}.wx-legend p,.wx-tide-options{font-size:13px}
}
@media(max-width:720px){
 .wx-app{grid-template-rows:94px minmax(0,1fr) 112px}
 .wx-header{padding:8px 12px;gap:6px;flex-wrap:wrap}.wx-heading h1{font-size:20px}
 .wx-header .wx-text-button{font-size:13px!important;margin-left:auto;min-height:36px}
 #wx-search{order:3;flex:1 0 100%;height:40px;margin:0;max-width:none}
 #wx-query,#wx-query::placeholder{font-size:16px}
 .wx-layers{top:8px;left:8px;right:8px;gap:2px;border-radius:6px}
 .wx-layers button{flex:0 0 auto;min-width:54px;min-height:52px;font-size:13px;padding:5px 7px}
 .wx-status{top:74px;left:8px;max-width:calc(100% - 16px);font-size:12px;max-height:36px}
 .wx-map-tools{top:120px;left:8px;gap:6px}.wx-map-tools button{width:44px;height:44px;font-size:13px}
 .wx-legend{display:none}
 .weather-page .leaflet-control-zoom{margin-left:8px;margin-bottom:12px}
 .wx-more-tools{display:block;position:absolute;top:120px;right:8px;z-index:710;max-width:calc(100% - 68px)}
 .wx-more-tools>summary{display:block;min-height:44px;padding:10px 12px;background:white;border:1px solid #cadce5;border-radius:6px;color:#234b62;font-size:14px;cursor:pointer}
 .wx-more-tools[open]{background:white;border:1px solid #cadce5;border-radius:6px;padding:4px;box-shadow:0 3px 12px #234b6233}
 .wx-more-tools .wx-extra-tools{position:static;display:grid;grid-template-columns:1fr 1fr;padding:6px;gap:6px}
 .wx-extra-tools button{font-size:14px;min-height:44px;padding:8px}
 .wx-time-top strong{font-size:14px}.wx-time-top span:last-child{display:none}
 .wx-time-top button{font-size:13px;min-height:36px}
 .wx-timeline{padding:7px 12px}.wx-footer-note{font-size:11px}.wx-footer-note button{font-size:11px}
 .weather-page .site-nav .nav-links>a,.weather-page .site-nav .nav-links>button{font-size:13px;min-width:94px}
}

.weather-page #wx-country,.weather-page .wx-legend[hidden]{display:none}
#wx-about .wx-tide-options{margin-top:20px;font-size:15px}#wx-about .wx-tide-options select{min-height:44px}

.wx-switch-view{color:#176b9b;white-space:nowrap;text-decoration:none;font-weight:650;padding:8px}.wx-marine-tools{position:absolute;top:145px;left:16px;z-index:720;display:flex;gap:8px;align-items:flex-start}.wx-marine-tools>details,.wx-marine-tools>a{background:white;color:#31566c;border:1px solid #cadce5;border-radius:5px;padding:10px 12px;box-shadow:0 2px 7px #26465b13}.wx-marine-tools summary{cursor:pointer;font-weight:650}.wx-marine-tools label{display:block;padding:7px 0;cursor:pointer}.wx-marine-tools input{width:18px;height:18px;vertical-align:middle;accent-color:#176b9b}.wx-marine-tools p{max-width:220px;font-size:12px;margin:8px 0 0}.wx-marine-tools>a{text-decoration:none}.marine-facility span{display:grid;place-items:center;width:32px;height:32px;border:2px solid white;border-radius:50%;color:white;font-size:13px;font-weight:700;box-shadow:0 1px 5px #163f5860}.weather-page[data-weather-mode=weather] #wx-observed{display:none}.weather-page[data-weather-mode=marine] .wx-extra-tools{top:210px}.weather-page[data-weather-mode=marine] .wx-quota{top:270px}
@media(max-width:720px){.wx-switch-view{font-size:12px;grid-row:1;grid-column:2;padding-right:70px}.wx-marine-tools{top:118px;left:56px;gap:6px}.wx-marine-tools>details,.wx-marine-tools>a{font-size:12px;padding:8px}.weather-page[data-weather-mode=marine] .wx-more-tools{top:164px}.wx-marine-tools p{max-width:210px}.wx-marine-tools>details[open]{max-width:250px}.weather-page[data-weather-mode=weather] .wx-layers button{font-size:13px;min-height:52px}}

.wx-marine-tools select{max-width:220px;min-height:44px;font:inherit;border:1px solid #cadce5;border-radius:4px;background:white;color:#31566c}.wx-marine-tools small{display:block;max-width:220px;font-size:11px}.marine-current-arrow span{display:grid;place-items:center;width:44px;height:44px;font:bold 36px Arial;text-shadow:0 1px white,1px 0 white,-1px 0 white,0 -1px white}.wx-marine-tools{flex-wrap:wrap;max-width:calc(100% - 350px)}@media(max-width:720px){.wx-marine-tools{max-width:calc(100% - 64px);top:120px}.weather-page[data-weather-mode=marine] .wx-more-tools{top:220px}}

.marine-facility{display:grid;place-items:center;width:44px!important;height:44px!important}.weather-page[data-weather-mode=weather] #wx-about .wx-tide-options{display:none}

/* Marine controls have their own column, outside the usable map canvas. */
.weather-page #weather-map{left:132px}
.marine-rail{position:absolute;z-index:750;inset:0 auto 0 0;width:132px;background:#fff;border-right:1px solid #d2dfe5;overflow-y:auto;padding:12px 8px;scrollbar-width:thin}
.marine-rail-heading{display:block;padding:9px 8px 5px;color:#73828b;font-size:11px;font-weight:700}
.marine-rail .wx-layers,.marine-rail .wx-marine-tools,.marine-rail .wx-extra-tools,.marine-rail .wx-map-tools{position:static;display:flex;flex-direction:column;max-width:none;width:100%;padding:0;gap:3px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;flex-wrap:nowrap}
.marine-rail button,.marine-rail .wx-layers button,.marine-rail .wx-map-tools button,.marine-rail .wx-extra-tools button{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:8px;width:100%;min-width:0;min-height:44px;height:auto;padding:10px 9px;border:0;border-radius:5px;box-shadow:none;background:#fff;color:#304d5d;font-size:14px;font-weight:650;text-align:left;white-space:normal}
.marine-rail .wx-map-tools button:first-child{font-size:16px}
.marine-rail button:hover{background:#f1f6f9}.marine-rail button[aria-pressed=true]{color:#006cae;background:#e5f2fb;box-shadow:inset 3px 0 #087cc3}
.marine-rail .wx-layers svg{width:18px;height:18px;flex-shrink:0}
.marine-facility-filters{display:none;padding:0 7px}.wx-marine-tools:has(#marine-facilities-toggle[aria-pressed=true]) .marine-facility-filters{display:block}
.marine-rail .wx-marine-tools label{font-size:12px;padding:5px 0}.marine-rail .wx-marine-tools p{font-size:11px;line-height:1.6;margin:4px 7px 9px;overflow-wrap:anywhere;color:#506775}.marine-rail [hidden]{display:none!important}
.weather-page .wx-status{top:auto;bottom:12px;left:144px;max-width:calc(100% - 360px)}
.weather-page .wx-legend{left:auto;right:12px;bottom:12px;width:180px}
.weather-page .wx-stage:has(.wx-detail:not([hidden])) .wx-legend{display:none}
.weather-page .wx-detail{top:12px;right:12px;width:min(306px,calc(100% - 150px));max-height:calc(100% - 24px)}
.weather-page #wx-detail-open{top:12px;bottom:auto;right:12px}
.marine-cluster-count{position:absolute;right:0;top:0;background:#fff;border:1px solid #31566c;color:#163f56;border-radius:12px;min-width:19px;padding:0 3px;font-size:11px;text-align:center}
.marine-cluster-list{max-height:220px;overflow-y:auto;padding-left:20px}
@media(max-width:720px){
 .weather-page .marine-rail .wx-layers{display:flex;flex-direction:column;grid-template-columns:none}
 .weather-page .marine-rail button,.weather-page .marine-rail .wx-layers button{font-size:13px;padding:9px 7px;white-space:nowrap}
 .weather-page .marine-rail .wx-marine-tools p{font-size:11px;line-height:1.6}
 .weather-page #weather-map{left:94px}.marine-rail{width:94px;padding:6px 4px}
 .marine-rail button,.marine-rail .wx-layers button,.marine-rail .wx-map-tools button,.marine-rail .wx-extra-tools button{font-size:12px;padding:9px 7px;gap:5px;min-height:44px}
 .marine-rail .wx-layers svg{display:none}.marine-rail-heading{font-size:10px;padding:8px 7px 4px}
 .weather-page .wx-status{left:102px;bottom:8px;max-width:calc(100% - 114px)}
 .weather-page .wx-legend{width:140px;right:8px;bottom:42px;padding:7px;font-size:10px}
 .weather-page .wx-detail{width:calc(100% - 110px);right:8px;max-height:calc(100% - 16px);top:8px}
 .weather-page #wx-detail-content{padding:32px 14px 14px}
}

/* Two-column marine tools; location and basemap stay at the map's upper left. */
.weather-page .marine-rail{width:228px}
.weather-page #weather-map{left:228px}
.weather-page .marine-rail :is(.wx-layers,.wx-marine-tools,.wx-extra-tools){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.weather-page .marine-rail :is(p,.marine-facility-filters){grid-column:1/-1}
.weather-page .wx-map-tools{left:240px;top:12px;display:flex;gap:6px}
.weather-page .wx-map-tools button{width:48px;height:44px;font-size:13px}
.weather-page #wx-location{font-size:25px}
.weather-page .wx-status{left:240px;max-width:calc(100% - 450px)}
@media(max-width:720px){
 .weather-page .marine-rail{width:164px}
 .weather-page #weather-map{left:164px}
 .weather-page .wx-map-tools{left:172px;top:8px}
 .weather-page .marine-rail button{white-space:normal;font-size:12px;padding:8px 5px}
 .weather-page .wx-status{left:172px;max-width:calc(100% - 184px)}
}

/* Individual map controls share one treatment in both left rails. */
.weather-page .marine-rail{padding:12px 10px;background:#f8fafc}
.weather-page .marine-rail :is(.wx-layers,.wx-marine-tools,.wx-extra-tools){gap:7px}
.weather-page .marine-rail button{border:1px solid #cbdbe5;border-radius:7px;background:#fff;box-shadow:0 1px 1px #173e5210;min-height:46px;padding:9px 7px;font-size:13px;line-height:1.4;word-break:keep-all;justify-content:center;gap:5px}
.weather-page .marine-rail .wx-layers svg{width:16px;height:16px}
.weather-page .marine-rail button:hover{background:#edf5fa;border-color:#8eb5cc}
.weather-page .marine-rail button[aria-pressed=true]{background:#dff0fc;border-color:#1683c3;color:#005e96;box-shadow:inset 0 0 0 1px #1683c3;font-weight:750}
.weather-page .marine-rail button:focus-visible{outline:3px solid #176b9b;outline-offset:2px}
.weather-page .marine-rail button:disabled{opacity:.6;cursor:wait}
.weather-page .marine-rail-heading{padding:14px 2px 8px;color:#526b7b;font-size:12px}
.weather-page .marine-rail-heading:first-child{padding-top:4px}
.weather-page .marine-rail .wx-layers button{white-space:nowrap}
.weather-page .wx-quota{left:240px;right:12px;top:68px;max-width:calc(100% - 252px)}
@media(max-width:720px){
 .weather-page .marine-rail{padding:8px 6px}
 .weather-page .marine-rail :is(.wx-layers,.wx-marine-tools,.wx-extra-tools){gap:6px}
 .weather-page .marine-rail button,.weather-page .marine-rail .wx-layers button{font-size:12px;padding:8px 3px;min-height:48px}
 .weather-page .marine-rail-heading{font-size:11px}
 .weather-page .wx-quota{left:172px;right:8px;top:60px;max-width:calc(100% - 180px)}
}
/* Weather-only mobile tools: preserve the existing buttons and their handlers. */
@media(max-width:720px){
 .weather-page[data-weather-mode=weather] .marine-rail{inset:0 0 auto;width:100%;height:64px;display:flex;align-items:center;gap:8px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;background:#fff;border-bottom:1px solid #dce6eb}
 .weather-page[data-weather-mode=weather] .marine-rail-heading{display:none}
 .weather-page[data-weather-mode=weather] .marine-rail :is(.wx-layers,.wx-extra-tools){display:contents}
 .weather-page[data-weather-mode=weather] .marine-rail button,.weather-page[data-weather-mode=weather] .marine-rail .wx-layers button{flex:0 0 auto;width:auto;min-width:64px;min-height:44px;padding:10px 15px;font-size:16px;line-height:1.4;white-space:nowrap;border-radius:24px;color:#254454}
 .weather-page[data-weather-mode=weather] .marine-rail button[aria-pressed=true]{background:#076daf;color:#fff;border-color:#076daf;box-shadow:none}
 .weather-page[data-weather-mode=weather] #weather-map{left:0;top:64px}
 .weather-page[data-weather-mode=weather] .wx-map-tools{left:8px;top:76px}
 .weather-page[data-weather-mode=weather] .wx-status{left:8px;top:auto;bottom:8px;max-width:calc(100% - 16px)}
 .weather-page[data-weather-mode=weather] .wx-quota{left:8px;right:8px;top:128px;max-width:calc(100% - 16px)}
 .weather-page[data-weather-mode=weather] .wx-detail{top:auto;bottom:0;left:0;right:0;width:100%;max-height:65%;border-radius:16px 16px 0 0}
 .weather-page[data-weather-mode=weather] #wx-detail-open{top:76px;right:8px}
 .weather-page[data-weather-mode=weather] #wx-detail-close{width:44px;height:44px;background:#fff;color:#254454}
 .weather-page[data-weather-mode=weather] #wx-detail-content{padding:42px 18px 18px}
}