/* mam-viz.css - frames and captions for the inline-SVG charts from js/lib/mam-viz.js (2026-10-29).
   The charts themselves are themed with --mv-* custom properties (see the top of mam-viz.js);
   everything here is layout. Own classes, so the prebuilt Tailwind needs no rebuild. */
.mv-box { margin: 10px 0 2px; padding: 8px 8px 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
          background: rgba(255,255,255,.015); }
.mv-box .mv { margin: 0 auto 0 0; }
.mv-box--tide-sm { padding-top: 6px; }
.mv-cap { font-size: 11.5px; line-height: 1.45; color: #a8a29e; margin: 4px 2px 0; }
.mv-sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a8a29e; margin: 12px 0 -4px; }
.mv-key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mv-key--pool { background: rgba(34,197,94,.35); border: 1px solid #22c55e; }

/* swell compass sits beside the "now" line on surf and dive cards */
.mv-nowrow { display: flex; align-items: center; gap: 10px; }
.mv-nowrow .oc-now { flex: 1 1 auto; min-width: 0; }
.mv-rose { flex: 0 0 auto; }

/* dive clarity gauge */
.mv-clar-host:empty { display: none; }
.mv-clar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; border: 1px solid rgba(255,255,255,.09);
           border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; background: rgba(255,255,255,.02); }
.mv-clar-g { flex: 0 0 168px; max-width: 100%; }
.mv-clar-g:empty { display: none; }
.mv-clar-t { flex: 1 1 220px; min-width: 0; }
.mv-clar-h { font-size: 14px; margin: 0 0 8px; }
.mv-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mv-term { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #e7e5e4; }
.mv-term-dot { width: 10px; height: 10px; border-radius: 50%; background: #57534e; flex: 0 0 auto; }
.mv-term-n { flex: 1 1 auto; min-width: 0; }
.mv-term b { font-weight: 650; }
.mv-term--clear .mv-term-dot { background: #22c55e; }
.mv-term--mixed .mv-term-dot { background: #eab308; }
.mv-term--murky .mv-term-dot { background: #ef4444; }
.mv-term--none { color: #a8a29e; }
.mv-term--none b { font-weight: 500; }
.mv-clar .mv-cap { margin: 8px 0 0; }

/* NWS surf zone */
.mv-details { margin: 10px 0 0; }
.mv-details > summary { cursor: pointer; font-size: 12.5px; color: #a8a29e; padding: 8px 0; min-height: 24px; }
.mv-details > summary:hover { color: #e7e5e4; }
.mv-details[open] > summary { margin-bottom: 4px; }
.pp-srf-viz[hidden] { display: none; }
.pp-srf-viz .pp-box .mv { margin-top: 6px; }
.pp-rips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; }
.pp-rip { display: inline-flex; align-items: center; gap: 6px; color: #e7e5e4; }
.pp-rip-dot { width: 10px; height: 10px; border-radius: 50%; background: #57534e; flex: 0 0 auto; }
.pp-rip--low .pp-rip-dot { background: #22c55e; }
.pp-rip--mod .pp-rip-dot { background: #eab308; }
.pp-rip--high .pp-rip-dot { background: #ef4444; }
.pp-rip--none { color: #a8a29e; }