.vdc-climate,.vdc-ocean,.vdc-booking { margin-top:24px; }
.vdc-climate { --vdc-rain:#1866B4; }
.vdc-climate h4,.vdc-booking h4 { font:750 19px/1.3 'Proxima',system-ui,sans-serif; margin:20px 0 8px; color:var(--vd-ink); }
.vdc-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:20px 0; }
.vdc-toolbar button,.vdc-load { min-height:44px; padding:10px 16px; border:1px solid #aabeb5; border-radius:8px; color:var(--vd-green); background:#f2f7f4; font-weight:700; }
.vdc-toolbar button[aria-pressed=true] { background:#17313b; color:#fff; }
.vdc-load { margin:16px 0 10px; }
.vdc-load:disabled { cursor:wait; opacity:.7; }
.vd .vdc-selection { font-size:18px; font-weight:750; line-height:1.4; }
.vdc-station-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px; margin-bottom:18px; }
.vdc-station { --vdc-island:#F27A24; padding:18px; border:1px solid var(--vd-line); border-top:4px solid var(--vdc-island); border-radius:12px; background:linear-gradient(140deg,#f7f9f7,#fff); min-width:0; }
.vdc-station[data-island=maui],.vdc-rain-row[data-island=maui] { --vdc-island:#1866B4; }
.vdc-station[data-island=kauai],.vdc-rain-row[data-island=kauai] { --vdc-island:#1D9771; }
.vdc-station[data-island=big-island],.vdc-rain-row[data-island=big-island] { --vdc-island:#C3232F; }
.vd .vdc-reading { font-size:34px; font-weight:750; line-height:1.2; letter-spacing:-.7px; margin-top:14px; font-variant-numeric:tabular-nums; }
.vdc-station-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); align-items:center; gap:22px; margin-top:20px; }
.vdc-temperature { min-width:0; }
.vdc-temp-values { display:flex; justify-content:space-between; gap:12px; margin:10px 0 16px; }
.vdc-temp-values > div:last-child { text-align:right; }
.vdc-temp-values span,.vdc-temp-values strong { display:block; }
.vdc-temp-values strong { font-size:27px; line-height:1.25; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vdc-temp-chart { margin:0 6px; }
.vdc-range { position:relative; height:18px; border-radius:9px; background:#e6ece9; border:1px solid #9aaca5; }
.vdc-temp-interval { position:absolute; top:3px; height:10px; border-radius:5px; background:var(--vdc-island); border:1px solid #17313b; }
.vdc-temp-interval::before,.vdc-temp-interval::after { content:''; position:absolute; top:50%; width:12px; height:12px; border:2px solid #17313b; background:#fff; }
.vdc-temp-interval::before { left:0; border-radius:50%; transform:translate(-50%,-50%); }
.vdc-temp-interval::after { right:0; transform:translate(50%,-50%) rotate(45deg); }
.vdc-temp-axis { position:relative; height:28px; margin-top:5px; color:var(--vd-ink); font-size:12px; line-height:1.4; }
.vdc-temp-axis span { position:absolute; padding-top:7px; transform:translateX(-50%); white-space:nowrap; }
.vdc-temp-axis span::before { content:''; position:absolute; top:0; left:50%; height:5px; border-left:1px solid #52666c; }
.vdc-temp-axis span:first-child { transform:none; }
.vdc-temp-axis span:first-child::before { left:0; }
.vdc-temp-axis span:last-child { transform:translateX(-100%); }
.vdc-temp-axis span:last-child::before { left:100%; }
.vdc-rain-summary { display:flex; align-items:center; gap:12px; min-width:0; }
.vdc-rain-gauge { display:block; flex:0 0 84px; width:84px; height:124px; overflow:visible; }
.vdc-rain-gauge text { fill:var(--vd-ink); font:13px 'Proxima',system-ui,sans-serif; }
.vdc-gauge-empty { fill:#edf3f0; }
.vdc-rain-fill { fill:var(--vdc-rain); }
.vdc-gauge-drop,.vdc-gauge-outline,.vdc-gauge-level,.vdc-gauge-tick { fill:none; stroke:#17313b; stroke-width:1.5px; }
.vd .vdc-rain-number { font-size:30px; font-weight:750; line-height:1.25; letter-spacing:-.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vdc-rain-number > span { font-size:17px; letter-spacing:0; }
.vd .vdc-notice { padding:12px 14px; border-left:3px solid #b57a23; background:#fff8eb; color:#614519; font-size:15px; line-height:1.55; margin:12px 0; }
.vdc-scroll { max-width:100%; overflow-x:auto; margin:14px 0; border:1px solid var(--vd-line); border-radius:10px; overscroll-behavior-x:contain; }
.vdc-scroll:focus-visible { outline:3px solid #17313b; outline-offset:3px; }
.vdc-rain-row { --vdc-island:#F27A24; padding:14px; min-width:625px; }
.vdc-rain-row+.vdc-rain-row { border-top:1px solid var(--vd-line); }
.vdc-rain-row>strong { display:block; margin-bottom:10px; font-size:15px; border-left:4px solid var(--vdc-island); padding-left:8px; }
.vdc-month-cells { display:grid; grid-template-columns:repeat(12,minmax(44px,1fr)); gap:5px; }
.vdc-month-cells button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:82px; min-width:44px; gap:6px; padding:8px 2px; border:1px solid #6d847a; border-radius:6px; background:#f6f9f7; color:var(--vd-ink); font-size:12px; font-variant-numeric:tabular-nums; isolation:isolate; }
.vdc-cell-fill { position:absolute; bottom:0; left:0; right:0; background:var(--vdc-rain); border-radius:0 0 5px 5px; z-index:-1; }
.vdc-cell-fill::before { content:''; position:absolute; top:0; left:0; right:0; border-top:1px solid #17313b; }
.vdc-month-cells b,.vdc-cell-value { background:#fff; border-radius:3px; padding:1px 3px; line-height:1.35; }
.vdc-month-cells button[data-value-state=zero] .vdc-cell-fill,.vdc-month-cells button[data-value-state=missing] .vdc-cell-fill { display:none; }
.vdc-month-cells button[data-value-state=missing] { border-style:dashed; background:repeating-linear-gradient(135deg,#f6f9f7 0,#f6f9f7 5px,#dbe5e1 5px,#dbe5e1 7px); }
.vdc-month-cells button[aria-pressed=true] { outline:2px solid #17313b; outline-offset:1px; border-color:#17313b; }
.vdc-scroll table { width:100%; min-width:520px; display:table; margin:0; border-collapse:collapse; font-size:14px; }
.vdc-scroll th,.vdc-scroll td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--vd-line); }
.vdc-scroll caption { text-align:left; padding:12px; font-weight:700; color:var(--vd-ink); }
.vdc-scroll thead { background:#eaf2ed; }
.vdc-scroll tr[data-selected=true] { background:#eef4f1; }
.vdc-climate details:not([open])>.vd-detail-body,.vdc-ocean details:not([open])>.vd-detail-body { display:none; }
.vdc-ocean { background:linear-gradient(135deg,#f0f7f8,#fff 70%); }
.vdc-ocean-summary { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; padding-top:22px; margin-top:20px; border-top:1px solid var(--vd-line); }
.vdc-tide-svg { display:block; width:100%; height:auto; color:#226178; margin:18px 0; }
.vdc-tide-svg text { fill:var(--vd-ink); font:13px 'Proxima',system-ui,sans-serif; }
.vdc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:14px; }
.vdc-actions a { display:inline-flex; align-items:center; gap:8px; }
.vdc-date-control { display:flex; align-items:center; gap:12px; margin:20px 0 10px; flex-wrap:wrap; }
.vdc-date-control label { font-size:16px; font-weight:750; color:var(--vd-ink); }
.vdc-date-control input { font:inherit; min-height:44px; padding:8px 12px; max-width:100%; width:220px; color:var(--vd-ink); border:1px solid #aabeb5; border-radius:8px; background:#fff; }
.vdc-date-control input:focus-visible { outline:3px solid #17313b; outline-offset:3px; }
.vd .vdc-timeline { list-style:none; padding:0 0 0 24px; margin:22px 0; border-left:2px solid var(--vd-line); }
.vdc-timeline-stop { position:relative; padding:0 0 24px 4px; }
.vdc-timeline-stop:last-child { padding-bottom:0; }
.vdc-timeline-stop::before { content:''; position:absolute; left:-32px; top:4px; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:var(--vd-accent); outline:1px solid #6d847a; }
.vdc-timeline-stop[data-attention=true]::before { background:#a86c14; }
.vdc-timeline-stop .vd-eyebrow { margin-bottom:5px; }
.vdc-timeline-stop h4 { margin:0 0 10px; }
.vd .vdc-release-dates { margin:14px 0; padding:0; display:flex; flex-wrap:wrap; gap:12px; list-style:none; }
.vdc-release-dates li { flex:1 1 210px; display:flex; flex-direction:column; gap:4px; padding:14px; background:#eff5f1; border:1px solid var(--vd-line); border-radius:9px; font-size:15px; }
.vdc-release-dates strong { font-size:20px; }
.vdc-timeline-stop .vd-source { overflow-wrap:anywhere; }
@media(max-width:700px) {
  .vdc-rain-row { min-width:0; }
  .vdc-month-cells { grid-template-columns:repeat(4,minmax(44px,1fr)); }
  .vdc-toolbar { align-items:flex-start; flex-direction:column; }
  .vdc-station-grid { grid-template-columns:minmax(0,1fr); }
  .vdc-ocean-summary { grid-template-columns:minmax(0,1fr); gap:22px; }
  .vdc-date-control { align-items:flex-start; flex-direction:column; }
  .vdc-tide-svg text { font-size:32px; }
  .vdc-tide-detail-tick { display:none; }
  .vdc-actions { align-items:flex-start; flex-direction:column; gap:4px; }
  .vdc-climate .vd-card-heading,.vdc-ocean .vd-card-heading,.vdc-booking .vd-card-heading { flex-wrap:wrap; }
}

.vdc-timeline-stop > .vd-source { display:flex; flex-wrap:wrap; gap:4px 10px; }
@media (max-width:600px) { .vdc-timeline-stop > .vd-source > span { flex-basis:100%; } }