/* Swell charts: one live North Atlantic tile, then a grid of other oceans (coming soon). */
#charts .ph small{color:var(--sand);white-space:nowrap}
.oceans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--navy)}
.ocean{position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--navy);text-decoration:none;min-width:0}
.ocean.big{grid-column:1/-1}
.ocean canvas{display:block;width:100%;aspect-ratio:4/3;background:var(--navy2)}
.ocean.big canvas{aspect-ratio:16/10}
.ocean .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px 10px;border-top:2px solid var(--navy);min-height:52px}
.ocean .cap b{font:800 13px/1.15 var(--body);text-transform:uppercase;letter-spacing:.06em}
.ocean.big .cap b{font:400 clamp(24px,5vw,34px)/1 var(--display);text-transform:none;letter-spacing:0}
.ocean .cap small{display:block;font:600 12px var(--narrow);color:var(--muted);text-transform:none;letter-spacing:0;margin-top:2px}
.ocean .chev{flex:none;width:22px;height:22px;color:var(--navy)}
.ocean.soon .chev{color:var(--muted);opacity:.5}
.ocean.soon .cap b{color:var(--ink)}
.ocean .tag{position:absolute;top:10px;left:10px;font:800 11px var(--body);text-transform:uppercase;letter-spacing:.1em;padding:5px 9px;border-radius:999px;border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy)}
.ocean .tag.live{background:var(--mustard);color:var(--navy)}
.ocean .tag.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rust);margin-right:6px;vertical-align:1px}
.ocean .tag.cs{background:var(--cream);color:var(--rust)}
.ocean.big:hover .cap,.ocean.big:focus-visible .cap{background:var(--sand)}
.ocean.big:hover .chev{transform:translateX(3px)}
.ocean .chev{transition:transform .15s}
.ocean .key{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:6px;font:700 11px var(--narrow);color:var(--cream);background:rgba(31,48,68,.8);padding:4px 8px;border-radius:4px}
.ocean .key i{display:block;width:70px;height:8px;border-radius:2px}
@media (min-width:860px){
  .oceans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ocean.big canvas{aspect-ratio:21/9}
}