/* earthmoonsky — The Ocean room (paired with assets/ocean.js) */

/* --- station picker --- */
.tide-stations{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:2px 0 14px;}
.tide-st{
  font:600 12px Inter,system-ui,sans-serif;color:var(--dim);
  background:rgba(127,180,232,.06);border:1px solid #1b2440;border-radius:999px;
  padding:6px 12px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tide-st:hover{color:var(--ink);background:rgba(127,180,232,.12);}
.tide-st.is-active{color:#0a0f1c;background:#7fd4ff;border-color:#7fd4ff;}
.tide-st:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* --- next high / low chips --- */
.tide-now{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 14px;}
.tide-chip{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 18px;border-radius:12px;background:rgba(8,12,22,.5);border:1px solid var(--panel-edge);
}
.tide-chip .tc-k{font:600 10.5px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);}
.tide-chip .tc-v{font:600 18px "Source Serif 4",Georgia,serif;color:var(--ink);}
.tide-chip .tc-t{font:12px Inter,sans-serif;color:var(--dim);}
.tide-chip.is-high .tc-v{color:#7fd4ff;}
.tide-chip.is-low .tc-v{color:#e8c469;}

/* --- the tide curve (svg painted by ocean.js) --- */
#tide-chart{width:100%;height:auto;display:block;overflow:visible;}
.tide-area{fill:rgba(127,212,255,.10);stroke:none;}
.tide-line{fill:none;stroke:#7fd4ff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.tide-zero{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 4;}
.tide-xtick{stroke:rgba(255,255,255,.05);stroke-width:1;}
.tide-xlab{fill:var(--dim);font:10px Inter,sans-serif;text-anchor:middle;}
.tide-ylab{fill:var(--dim);font:10px Inter,sans-serif;text-anchor:end;}
.tide-hl{stroke:#0a0f1c;stroke-width:1.2;}
.tide-hl.is-h{fill:#7fd4ff;}
.tide-hl.is-l{fill:#e8c469;}
.tide-hllab{fill:var(--ink);font:600 10px Inter,sans-serif;text-anchor:middle;}
.tide-now-line{stroke:rgba(232,196,105,.75);stroke-width:1.3;stroke-dasharray:3 3;}

/* --- tooltip content (engine supplies the .insp-tip shell) --- */
.insp-tip .it-t{font-size:11px;color:var(--dim);}
.insp-tip .it-v{font:600 15px "Source Serif 4",Georgia,serif;color:#7fd4ff;}

/* --- Listen (hydrophone) --- */
.listen-pick{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:2px 0 16px;}
.listen-node{
  font:600 12px Inter,system-ui,sans-serif;color:var(--dim);
  background:rgba(127,180,232,.06);border:1px solid #1b2440;border-radius:999px;
  padding:6px 12px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.listen-node:hover{color:var(--ink);background:rgba(127,180,232,.12);}
.listen-node.is-active{color:#0a0f1c;background:#7fd4ff;border-color:#7fd4ff;}
.listen-deck{display:flex;align-items:center;gap:16px;justify-content:center;padding:6px 0 2px;}
.listen-play{
  flex:none;width:56px;height:56px;border-radius:50%;border:1px solid var(--panel-edge);
  background:rgba(127,212,255,.12);color:#7fd4ff;font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .08s ease;
}
.listen-play:hover:not(:disabled){background:rgba(127,212,255,.22);}
.listen-play:active:not(:disabled){transform:scale(.94);}
.listen-play:disabled{opacity:.4;cursor:default;}
.listen-play.is-playing{background:#7fd4ff;color:#0a0f1c;}
.listen-meta{min-width:170px;}
.listen-name{font:600 15px "Source Serif 4",Georgia,serif;color:var(--ink);}
.listen-status{font:12.5px Inter,sans-serif;color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:6px;}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e06c75;animation:livepulse 1.8s infinite;}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(224,108,117,.5);}70%{box-shadow:0 0 0 7px rgba(224,108,117,0);}100%{box-shadow:0 0 0 0 rgba(224,108,117,0);}}

/* --- Tsunami watch --- */
.tsu-status{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:11px;font:13.5px Inter,sans-serif;margin:2px 0 4px;border:1px solid var(--panel-edge);}
.tsu-status .tsu-dot{flex:none;width:9px;height:9px;border-radius:50%;}
.tsu-status.is-clear{background:rgba(63,158,107,.10);color:#bfe3cf;}
.tsu-status.is-clear .tsu-dot{background:#3f9e6b;}
.tsu-status.is-adv{background:rgba(232,196,105,.12);color:#f0dca0;}
.tsu-status.is-adv .tsu-dot{background:#e8c469;}
.tsu-status.is-watch{background:rgba(224,136,62,.14);color:#f0c79a;}
.tsu-status.is-watch .tsu-dot{background:#e0883e;}
.tsu-status.is-warn{background:rgba(224,108,117,.16);color:#f3c2c6;}
.tsu-status.is-warn .tsu-dot{background:#e06c75;animation:livepulse 1.6s infinite;}
.tsu-subhead{font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:16px 0 4px;}
.tsu-flag{color:#e0883e;font-weight:600;}

/* --- Buoys --- */
.buoy-pick{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:2px 0 16px;}
.buoy-btn{
  font:600 12px Inter,system-ui,sans-serif;color:var(--dim);
  background:rgba(127,180,232,.06);border:1px solid #1b2440;border-radius:999px;
  padding:6px 12px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.buoy-btn:hover{color:var(--ink);background:rgba(127,180,232,.12);}
.buoy-btn.is-active{color:#0a0f1c;background:#7fd4ff;border-color:#7fd4ff;}
.buoy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.buoy-card{background:rgba(8,12,22,.5);border:1px solid var(--panel-edge);border-radius:12px;padding:14px 16px;text-align:center;}
.bc-k{font:600 10.5px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);}
.bc-v{font:600 26px "Source Serif 4",Georgia,serif;color:#7fd4ff;margin:4px 0 1px;}
.bc-u{font-size:14px;color:var(--dim);margin-left:1px;}
.bc-na{color:var(--dim);}
.bc-s{font:11.5px Inter,sans-serif;color:var(--dim);}
.buoy-msg{text-align:center;color:var(--dim);padding:18px;font:13px Inter,sans-serif;}