.fp-tide { margin:28px 0; padding:24px; border:1px solid #cbdde4; border-radius:18px; background:#fff; color:#133346; }
.fp-tide-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fp-tide-heading h2 { font-size:24px; line-height:1.4; margin:0; }
.fp-tide-kind { border:1px solid #c4dadd; border-radius:6px; padding:4px 8px; color:#365d64; font-size:12px; }
.fp-tide-port { margin:10px 0 16px; color:#52687b; font-size:13px; line-height:1.8; }
.fp-tide-status { background:#f0f5f8; border-left:3px solid #7894a3; padding:12px 14px; font-size:14px; line-height:1.8; }
.fp-tide[data-state="stale"] .fp-tide-status { background:#fff5e6; border-color:#b77712; color:#735016; }
.fp-tide-retry { min-height:44px; margin:0 0 14px; padding:10px 14px; border:1px solid #8cb9bc; border-radius:8px; background:#fff; color:#155e64; font-size:14px; font-weight:700; cursor:pointer; }
.fp-tide-retry:focus-visible { outline:3px solid #2377e8; outline-offset:3px; }
.fp-tide-retry:disabled { cursor:wait; opacity:.6; }
.fp-tide-phase { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid #e0eaed; }
.fp-tide-phase > strong { white-space:nowrap; border-radius:8px; padding:8px 12px; background:#e3f3f1; color:#0c625e; font-size:22px; }
.fp-tide-phase > p { margin:0; font-size:14px; line-height:1.8; }
.fp-tide-selection { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 18px; padding:16px; background:#eff7f7; border-radius:10px; }
.fp-tide-selection > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.fp-tide-selection > div + div { border-left:1px solid #c9deda; padding-left:16px; }
.fp-tide-selection strong { font-size:20px; line-height:1.6; font-variant-numeric:tabular-nums; }
.fp-tide-caption { color:#4b6874; font-size:12px; line-height:1.7; }
.fp-tide-plot { display:grid; grid-template-columns:48px minmax(0,1fr); margin:16px 0 6px; }
.fp-tide-scale { display:flex; flex-direction:column; justify-content:space-between; padding:6px 6px 18px 0; text-align:right; color:#52687b; font-size:11px; font-variant-numeric:tabular-nums; }
.fp-tide-chart-box { min-width:0; }
.fp-tide-svg { display:block; width:100%; height:158px; overflow:visible; }
.fp-tide-grid { stroke:#d9e7e9; stroke-width:1; vector-effect:non-scaling-stroke; }
.fp-tide-line { fill:none; stroke:#127d78; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.fp-tide-now { stroke:#254e6b; stroke-width:1.5; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.fp-tide-selected-dot { fill:#127d78; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
.fp-tide-extreme { fill:#fff; stroke:#127d78; stroke-width:2; vector-effect:non-scaling-stroke; }
.fp-tide-axis { display:flex; justify-content:space-between; color:#52687b; font-size:12px; font-variant-numeric:tabular-nums; margin-top:5px; }
.fp-tide-curve-note { font-size:12px; color:#52687b; line-height:1.8; margin:8px 0 18px; }
.fp-tide-events-caption { margin:16px 0 10px; color:#52687b; font-size:13px; }
.fp-tide-events { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:0; padding:0; }
.fp-tide-events > li { display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid #d9e7e9; border-radius:8px; background:#f8fbfb; min-width:0; }
.fp-tide-events > li[data-kind="low"] { background:#f5f7fa; border-color:#dde4ec; }
.fp-tide-event-type { display:flex; align-items:center; gap:6px; color:#44636e; font-size:12px; }
.fp-tide-event-type svg { color:#127d78; flex-shrink:0; }
.fp-tide-events time { font-size:22px; font-weight:700; line-height:1.5; font-variant-numeric:tabular-nums; }
.fp-tide-event-level { color:#52687b; font-size:12px; }
.fp-tide-footnote { font-size:12px; color:#52687b; line-height:1.8; margin:12px 0 0; }
.fp-tide-explain { font-size:13px; line-height:1.9; margin:18px 0 0; padding-top:14px; border-top:1px solid #e0eaed; color:#4b6375; }
.fp-tide-explain strong { color:#25465d; }
.fp-tide-reading { margin-top:10px; font-size:13px; color:#4b6375; }
.fp-tide-reading summary { cursor:pointer; min-height:44px; padding:12px 0; color:#215c76; font-weight:700; }
.fp-tide-reading summary:focus-visible { outline:3px solid #2377e8; outline-offset:3px; }
.fp-tide-reading p { margin:8px 0 12px; line-height:1.9; }
.fp-tide-reading a { display:inline-block; padding:10px 0; color:#135bbe; }
@media (max-width:600px) {
 .fp-tide { padding:18px 16px; margin:22px 0; border-radius:14px; }
 .fp-tide-heading h2 { font-size:21px; }
 .fp-tide-phase { gap:12px; align-items:flex-start; }
 .fp-tide-phase > strong { font-size:20px; padding:8px 10px; }
 .fp-tide-selection { padding:12px; gap:10px; }
 .fp-tide-selection > div + div { padding-left:10px; }
 .fp-tide-selection strong { font-size:17px; }
 .fp-tide-events { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .fp-tide-events > li { padding:10px 12px; }
 .fp-tide-svg { height:140px; }
 .fp-tide-plot { grid-template-columns:42px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .fp-tide * { scroll-behavior:auto; } }