#nrs-tide-open{box-sizing:border-box;height:30px;font-family:inherit;font-size:11px;font-weight:500;line-height:1.4;cursor:pointer;white-space:nowrap;min-height:30px;padding:6px 9px;flex:0 0 auto;background:#102837;color:#bcebf5;border:1px solid #32536b;border-radius:7px}
#nrs-tide-open:focus-visible{outline:2px solid #67d7f4;outline-offset:2px}
@media(pointer:coarse){#nrs-tide-open{height:44px;min-height:44px}}
#nrs-live-status{font:10px/1.6 inherit;color:#b8cbd6;display:block;max-width:280px;overflow-wrap:anywhere}
.masthead-clock:has(#nrs-live-status){flex-wrap:wrap;max-width:180px;gap:3px 6px}.masthead-clock #nrs-live-status{flex-basis:100%;font-size:9px;line-height:1.4}
.mobile-header #nrs-live-status{grid-column:1/-1;font-size:9px;max-width:none}
#nrs-tides{box-sizing:border-box;position:fixed;inset:16px 16px 16px auto;margin:0;width:min(540px,calc(100vw - 32px));max-width:none;height:calc(100dvh - 32px);max-height:none;padding:0;border:1px solid #32536b;border-radius:16px;background:#0b1e2b;color:#e2edf4;font:14px/1.65 'Prompt','Noto Sans Thai',sans-serif;box-shadow:0 16px 60px #0008;overflow:hidden}
#nrs-tides::backdrop{background:#020b1499}
#nrs-tides[open]{display:flex;flex-direction:column}
#nrs-tides .tide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:#132d3d;border-bottom:1px solid #32536b}
#nrs-tides h2{font-size:18px;line-height:1.4;margin:0;color:#eff9ff}
#nrs-tides button,#nrs-tides select,#nrs-tides input{box-sizing:border-box;font:inherit;min-height:44px;border:1px solid #416176;border-radius:7px;background:#102837;color:#e2edf4;padding:8px;min-width:0}
#nrs-tides button{cursor:pointer}#nrs-tides :focus-visible{outline:3px solid #67d7f4;outline-offset:2px}
#nrs-tides .tide-body{overflow:auto;min-height:0;padding:18px 20px;overscroll-behavior:contain}
#nrs-tides .tide-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
#nrs-tides label{font-size:12px;color:#b5cddc;display:flex;flex-direction:column;gap:5px}
#nrs-tides label.wide{grid-column:1/-1}
#nrs-tides h3{font-size:21px;margin:10px 0 2px}
#nrs-tides .tide-caption{font-size:12px;color:#abc4d2;margin:5px 0 12px}
#nrs-tides .tide-caution{border-left:3px solid #f4c66b;padding:8px 12px;background:#3d341f;color:#ffe0a4;font-size:12px}
#nrs-tides .tide-extremes{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-block:1px solid #29485b;margin:16px 0;padding:12px 0}
#nrs-tides .tide-extremes strong{font-size:22px;color:#6fddf2;display:block}
#nrs-tides svg{display:block;width:100%;height:auto;background:#102837;border-radius:8px}
#nrs-tides .tide-station-list{max-height:100px;overflow:auto;font-size:12px}
#nrs-tides a{color:#8cddf2;text-underline-offset:3px}
#nrs-tides .tide-observed{border-top:1px solid #29485b;margin-top:16px;padding-top:12px}
@media(max-width:700px){#nrs-tides{inset:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:12px}#nrs-tides .tide-heading{padding:12px}#nrs-tides .tide-body{padding:12px}.mobile-header #nrs-tide-open{font-size:11px;padding:5px}.masthead-clock #nrs-live-status{max-width:140px;font-size:9px}}