/* ocean.css — shared by /ocean and the /dive /surf /tidepools passion pages (extracted from ocean.html 2026-10-28). */
  /* ============ Ocean today — scoped .oc-* ============ */
  .oc { --oc-ink:#e7e5e4; --oc-muted:#a8a29e; --oc-line:rgba(255,255,255,.09); --oc-sea:#38bdf8;
        --oc-good:#22c55e; --oc-fair:#eab308; --oc-poor:#f97316; --oc-bad:#ef4444; color:var(--oc-ink); }
  .oc-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
                letter-spacing: .18em; text-transform: uppercase; color: var(--oc-sea); margin: 18px 0 6px; }
  .oc-h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 10px; }
  .oc-h1 em { font-style: normal; color: var(--oc-sea); }
  .oc-sub { font-size: 14.5px; line-height: 1.55; color: var(--oc-muted); max-width: 600px; margin: 0 0 16px; }
  .oc-alerts { margin: 0 0 14px; }
  .oc-alert { border:1px solid rgba(239,68,68,.45); background:rgba(239,68,68,.08); border-radius:12px;
              padding:10px 12px; margin-bottom:8px; font-size:13.5px; line-height:1.45; }
  .oc-alert b { color:#fca5a5; }
  .oc-calm { font-size:12.5px; color:var(--oc-muted); margin:0 0 14px; }
  .oc-buoys { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; }
  .oc-buoy { border:1px solid var(--oc-line); border-radius:12px; padding:8px 12px; font-size:13px; line-height:1.4;
             background:rgba(255,255,255,.02); flex: 1 1 260px; }
  .oc-buoy-h { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--oc-muted); }
  .oc-chips { display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 14px; position: sticky; top: 0; z-index: 5;
              padding: 8px 0; background: linear-gradient(#0c0a09 70%, rgba(12,10,9,0)); }
  .oc-chip { border:1px solid var(--oc-line); background:rgba(255,255,255,.03); color:var(--oc-ink);
             border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer; }
  .oc-chip[aria-pressed="true"] { border-color:var(--oc-sea); color:var(--oc-sea); background:rgba(56,189,248,.1); }
  .oc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
  .oc-card { border:1px solid var(--oc-line); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,.02); }
  .oc-card-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
  .oc-name { font-weight:750; font-size:15.5px; line-height:1.25; }
  .oc-area { font-size:12px; color:var(--oc-muted); white-space:nowrap; }
  .oc-badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 6px; }
  .oc-badge { font-size:11px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:3px 9px;
              border:1px solid currentColor; }
  .oc-now { font-size:13px; line-height:1.5; color:var(--oc-ink); }
  .oc-days { width:100%; border-collapse:collapse; margin:8px 0 6px; font-size:12px; }
  .oc-days th, .oc-days td { text-align:left; padding:3px 4px 3px 0; border-top:1px solid var(--oc-line);
                             font-variant-numeric: tabular-nums; }
  .oc-days th { color:var(--oc-muted); font-weight:600; }
  .oc-tides, .oc-pools { font-size:12.5px; color:var(--oc-muted); line-height:1.5; margin-top:4px; }
  .oc-pools b { color:var(--oc-good); }
  .oc-note { font-size:12.5px; color:var(--oc-muted); line-height:1.45; margin-top:6px; }
  .oc-cams { font-size:12.5px; line-height:1.6; margin-top:6px; }
  .oc-cams-h { color:var(--oc-muted); }
  .oc-cams a { color:var(--oc-sea); text-decoration:none; }
  .oc-cams a:hover { text-decoration:underline; }
  .oc-cam-paid { font-size:10.5px; color:var(--oc-muted); border:1px solid currentColor; border-radius:4px; padding:0 4px; }
  .oc-clarity, .oc-reports { font-size:13px; line-height:1.5; margin-top:6px; }
  .oc-cdip { font-size:13px; line-height:1.5; margin-top:6px; }
  .oc-foot { font-size:11.5px; margin-top:-2px; }
  .oc-muted { color:var(--oc-muted); }
  .oc-photos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .oc-photos img { width:64px; height:64px; object-fit:cover; border-radius:6px; display:block; }
  .oc-report-btn { display:block; width:100%; min-height:44px; margin-top:8px; border:1px solid var(--oc-line);
                   background:rgba(255,255,255,.03); color:var(--oc-ink); border-radius:999px; padding:7px 14px;
                   font-size:13px; cursor:pointer; }
  .oc-report-btn:hover { border-color:var(--oc-sea); color:var(--oc-sea); background:rgba(56,189,248,.1); }
  .oc-report-btn:focus-visible { outline:2px solid var(--oc-sea); outline-offset:2px; }
  .oc-strip { border:1px solid var(--oc-line); border-radius:14px; padding:12px; background:rgba(255,255,255,.02);
              margin-bottom:12px; }
  .oc-strip[hidden] { display:none; }
  .oc-strip h2 { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--oc-sea); margin:0 0 6px; }
  .oc-strip-line { font-size:13.5px; line-height:1.5; }
  .oc-rules { margin:22px 0 8px; font-size:13px; line-height:1.55; color:var(--oc-muted); }
  .oc-rules h2 { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--oc-sea); margin:0 0 6px; }
  .oc-rules li { margin-bottom:6px; }
  .oc-src { font-size:12px; color:#78716c; line-height:1.5; margin: 10px 0 24px; }
  .oc-src a { color: var(--oc-muted); }
  .oc-err { border:1px solid var(--oc-line); border-radius:12px; padding:14px; color:var(--oc-muted); }
  .oc-mapwrap { position:relative; border:1px solid var(--oc-line); border-radius:16px; overflow:hidden; margin:0 0 14px; }
  #oc-map { height: min(56vh, 460px); min-height: 300px; background:#0b1220; }
  /* below the map, not on it: on phones any corner covers pins or credits */
  .oc-map-key { display:flex; flex-wrap:wrap; gap:4px 14px; padding:7px 12px; font-size:11.5px; line-height:1.5;
                color:var(--oc-muted); border-top:1px solid var(--oc-line); background:rgba(12,10,9,.6); }
  .oc-map-key span { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
  /* ---- Report your dive dialog ---- */
  .oc-dialog { max-width:440px; width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow-y:auto; overflow-x:hidden;
               box-sizing:border-box; background:#1c1917; color:#e7e5e4; border:1px solid rgba(255,255,255,.12);
               border-radius:14px; padding:16px; }
  .oc-dialog:not([open]) { display:none; }
  .oc-dialog[open] { position:fixed; inset:12px; margin:auto; z-index:1000; height:fit-content; }
  .oc-dialog [hidden] { display:none !important; }
  .oc-dialog::backdrop { background:rgba(0,0,0,.55); }
  .oc-dialog h2 { font-size:17px; margin:0 0 10px; }
  .oc-dialog form { display:block; margin:0; }
  .oc-dialog fieldset { border:0; margin:0; padding:0; min-width:0; }
  .oc-dialog legend, .oc-dialog label.oc-field { display:block; font-size:12px; color:#a8a29e; padding:0; margin:0 0 4px; }
  .oc-field { margin:0 0 12px; }
  .oc-dialog select, .oc-dialog input[type="number"], .oc-dialog input[type="datetime-local"], .oc-dialog textarea,
  .oc-dialog input[name="handle"] { display:block; width:100%; box-sizing:border-box; min-height:40px; margin-top:4px; padding:8px 10px;
               font:inherit; font-size:16px; color:#e7e5e4; background:rgba(255,255,255,.05);
               border:1px solid rgba(255,255,255,.14); border-radius:10px; }
  .oc-dialog input[name="handle"] { margin:0 0 12px; }
  .oc-dialog input[type="file"] { max-width:100%; font-size:13px; color:#a8a29e; }
  .oc-dialog input[type="datetime-local"] { margin-top:8px; }
  .oc-row { display:flex; gap:8px; margin:0 0 12px; }
  .oc-row input { flex:1; min-width:0; margin-top:0 !important; }
  .oc-pills { display:flex; flex-wrap:wrap; gap:6px; }
  .oc-pill { position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 12px; box-sizing:border-box;
             border:1px solid rgba(255,255,255,.14); border-radius:999px; font-size:13px; cursor:pointer;
             color:#e7e5e4; background:rgba(255,255,255,.03); }
  .oc-pill input { position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer; }
  .oc-pill:has(:checked) { border-color:#38bdf8; color:#38bdf8; background:rgba(56,189,248,.12); }
  .oc-pill:has(:focus-visible) { outline:2px solid #38bdf8; outline-offset:2px; }
  .oc-hint { font-size:11.5px; color:#a8a29e; margin-top:4px; }
  .oc-previews { display:flex; gap:6px; flex-wrap:wrap; }
  .oc-previews:not(:empty) { margin-top:6px; }
  .oc-previews img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
  .oc-dialog-note { font-size:12px; line-height:1.45; color:#a8a29e; margin:0 0 10px; }
  .oc-dialog-err { color:#f87171; font-size:13px; margin:0 0 10px; }
  .oc-dialog-done { font-size:15px; margin:6px 0 14px; }
  .oc-dialog-btns { display:flex; gap:8px; }
  .oc-btn-primary, .oc-btn-secondary { flex:1; min-height:44px; border-radius:999px; font:inherit; font-size:14px; cursor:pointer; }
  .oc-btn-primary { border:1px solid #38bdf8; background:rgba(56,189,248,.18); color:#38bdf8; font-weight:600; }
  .oc-btn-secondary { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#e7e5e4; }
  .oc-btn-primary:disabled { opacity:.6; cursor:default; }
  .oc-dialog button:focus-visible, .oc-dialog select:focus-visible, .oc-dialog textarea:focus-visible,
  .oc-dialog input:focus-visible { outline:2px solid #38bdf8; outline-offset:2px; }