/* ══════════════════════════════════════════════════════════════════
   🌊 OCEAN SIGNAL — INTRADAY PRO TERMINAL edition
   Additive overlay on the Sprint-11 token system.
   Rule: LIGHT = CONVICTION — glow only where information demands it.
   Cinema effects live under html.cinema (🎬 toggle, persisted).
   Light theme untouched — its override block re-skins surfaces as before.
   ══════════════════════════════════════════════════════════════════ */

/* — ocean depth background (dark theme only) — */
body:not(.theme-light){
  background:
    radial-gradient(1300px 560px at 50% -10%, #0A3050 0%, transparent 62%),
    radial-gradient(1000px 640px at 100% 100%, #062B47 0%, transparent 55%),
    var(--bg-0) !important;
}

/* — CINEMA atmosphere: scanline + vignette (3% max, dark theme only) — */
html.cinema body:not(.theme-light)::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
html.cinema body:not(.theme-light)::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9989;
  background:radial-gradient(120% 90% at 50% 40%,transparent 62%,rgba(0,0,0,.38) 100%);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* — display font on identity + structure (Chakra Petch, HUD voice) — */
.brand__name, .brand__sub,
.navitem, .topnav .btn--tab,
.panel__title, .widget__title, .card__title,
h1, h2, h3,
.mcell__name, .kpi__label, .stat__label{
  font-family:var(--font-disp) !important;
  letter-spacing:.04em;
}

/* — market bar: pulse strip treatment + radar sweep — */
.marketbar, .market-bar, .mbar{position:relative;overflow:hidden}
html.cinema .marketbar::after,
html.cinema .market-bar::after,
html.cinema .mbar::after{
  content:"";position:absolute;top:0;bottom:0;width:140px;
  background:linear-gradient(90deg,transparent,rgba(63,185,255,.09),transparent);
  animation:oceanSweep 7s linear infinite;pointer-events:none;
}
@keyframes oceanSweep{from{left:-140px}to{left:100%}}
.mcell__chg.up, .mcell__chg.pos{color:var(--up)}
.mcell__chg.down, .mcell__chg.neg{color:var(--down)}
html.cinema .mcell__chg.up{text-shadow:0 0 10px var(--glow-up)}
html.cinema .mcell__chg.down{text-shadow:0 0 10px var(--glow-dn)}

/* — conviction glow: confidence & signal states — */
html.cinema .setup__side.up{box-shadow:0 0 12px rgba(46,229,200,.25);border-radius:5px}
html.cinema .setup__side.down{box-shadow:0 0 12px rgba(255,107,138,.22);border-radius:5px}
.setup__side.up{color:var(--up)} .setup__side.down{color:var(--down)}

/* live dot pulse */
@keyframes oceanPulse{0%,100%{opacity:1}50%{opacity:.45}}
html.cinema .status-chip.st-live .status-dot,
html.cinema .dotstat.on .dot{box-shadow:0 0 8px var(--glow-up)}

/* — active nav: ocean gradient rail — */
.navitem.active{
  background:linear-gradient(90deg,rgba(63,185,255,.16),transparent 72%) !important;
  color:var(--teal-2) !important;
}
html.cinema .navitem.active{box-shadow:inset 0 0 18px rgba(63,185,255,.07)}

/* — tables: hover scan + header voice — */
table th{font-family:var(--font-disp) !important;letter-spacing:.14em;
  text-transform:uppercase;font-size:10px}
tbody tr:hover td{background:rgba(63,185,255,.045) !important}

/* — alerts / toasts: full drama allowed here only — */
html.cinema .toast{
  box-shadow:0 0 30px rgba(46,229,200,.2), inset 0 0 24px rgba(46,229,200,.04);
  animation:oceanArrive .45s cubic-bezier(.2,.9,.3,1.15);
}
html.cinema .toast--short{box-shadow:0 0 30px rgba(255,107,138,.2)}
@keyframes oceanArrive{from{transform:translateY(14px) scale(.97);opacity:0}}

/* — hexagon-cut grade/score chips (matches OCPA family look) — */
.grade, .score-chip, .badge--grade{
  clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);
}

/* — scrollbars: ocean — */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-inset)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--teal-2)}

/* — 🎬/🎯 toggle button (injected by ocean.js) — */
.ocean-toggle{background:transparent;border:1px solid var(--line);color:var(--text-1);
  border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.ocean-toggle:hover{border-color:var(--teal);color:var(--text-0)}