/* ===================================================================
   FLOWTRIG — section-dark.css
   Per-section dark mode (works while the whole site is in LIGHT mode).
   `.sec-dark` on a wrapper re-asserts the dark design tokens for that
   subtree + restores the few hard-coded dark surface treatments.
   Loaded AFTER styles-v3.css / channels-viz.css so it wins by order.
   =================================================================== */

.sec-dark{
  --bg:#05080A; --bg-2:#080C0E;
  --surface:#0C1113; --surface-2:#0F1518; --surface-3:#131A1D;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05); --line-glow:rgba(43,232,129,.25);
  --tx:#E9F1EC; --tx-soft:#A7B6AD; --tx-mute:#6E7E75;
  --green-soft:rgba(43,232,129,.12);
  --shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 10px 30px -15px rgba(0,0,0,.7);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8);
  --fill:rgba(255,255,255,.04); --fill-2:rgba(255,255,255,.06);
  color:var(--tx);
  transition:background .55s ease, color .55s ease, border-color .55s ease, box-shadow .55s ease;
}
/* smooth the surfaces that animate on toggle */
.sec-dark, .sec-dark .appwin, .sec-dark .cat-tabs, .sec-dark .app-side, .sec-dark .app-top,
.sec-dark .cv-window, .sec-dark .cv-winbar, .sec-dark .app-navitem, .sec-dark .inbox,
.sec-dark .flowbuilder, .sec-dark .dsh, .sec-dark .cv-stage{ transition:background .55s ease, border-color .55s ease, color .55s ease, box-shadow .55s ease; }

/* ---- restore hard-coded DARK surface treatments (override the light ones) ---- */
.sec-dark.hero-dash .cat-tabs, .sec-dark .cat-tabs{
  background:
    radial-gradient(70% 150% at 12% -25%, rgba(43,232,129,.16), transparent 55%),
    radial-gradient(70% 150% at 90% 125%, rgba(122,108,246,.15), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 50%),
    color-mix(in oklab, var(--surface) 52%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.06), 0 22px 52px -22px rgba(0,0,0,.55);
}
.sec-dark .cat-tab{ background:color-mix(in oklab, var(--surface) 72%, transparent); }
/* paint the toggled element's OWN background with a literal (var-on-declaring-element is fragile) */
.appwin.sec-dark{ background:#0C1113 !important; }
.cv-window.sec-dark{ background:#0C1113 !important; }
.sec-dark .app-stage .flowbuilder .fb-toolkit{ background:rgba(10,14,16,.78); }
.sec-dark .cv-stage::before{ background-image:radial-gradient(rgba(43,232,129,.18) 1px, transparent 1.5px); }
.sec-dark .cv-hub{ background:linear-gradient(160deg,#0F2A1C,#08160F); }
.sec-dark .cv-hub::after{ background:conic-gradient(from 0deg, rgba(43,232,129,0), rgba(43,232,129,.4) 25%, rgba(43,232,129,0) 55%, rgba(43,232,129,0)); }

/* ===================================================================
   The glassy "section dark mode" toggle (lives in each window bar)
   =================================================================== */
.sd-toggle{
  --w:46px; position:relative; display:inline-flex; align-items:center; gap:7px;
  margin-right:4px; cursor:pointer; user-select:none; background:none; border:0; padding:0;
  animation:sd-nudge 3.4s ease-in-out infinite;
}
.sd-toggle:hover{ animation-play-state:paused; }
.sd-toggle .sd-track{
  position:relative; width:var(--w); height:24px; border-radius:999px; flex:0 0 var(--w);
  background:color-mix(in oklab, var(--tx) 14%, transparent);
  border:1px solid var(--line); transition:background .3s, border-color .3s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.sd-toggle .sd-knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(160deg,#fff,#e7ece9);
  box-shadow:0 2px 5px rgba(0,0,0,.35); transition:left .32s cubic-bezier(.4,1.3,.5,1), background .3s;
  display:flex; align-items:center; justify-content:center; color:#0A1512;
}
.sd-toggle .sd-knob svg{ width:11px; height:11px; }
.sd-toggle .sd-knob .i-sun{ display:none; } .sd-toggle .sd-knob .i-moon{ display:block; }
.sd-toggle .sd-lab{ font-size:11px; font-weight:600; color:var(--tx-mute); white-space:nowrap; letter-spacing:.02em; }
/* ON state (section is dark) */
.sd-toggle.on .sd-track{ background:linear-gradient(160deg,var(--neon),var(--green)); border-color:transparent; box-shadow:0 0 14px -3px rgba(43,232,129,.7), inset 0 1px 2px rgba(0,0,0,.2); }
.sd-toggle.on .sd-knob{ left:calc(var(--w) - 20px); background:#04140B; color:var(--neon); }
.sd-toggle.on .sd-knob .i-sun{ display:block; } .sd-toggle.on .sd-knob .i-moon{ display:none; }
.sd-toggle.on .sd-lab{ color:var(--neon); }
/* click pulse */
.sd-toggle.tap{ animation:sd-tap .5s ease; }
@keyframes sd-nudge{
  0%, 86%, 100%{ transform:translateX(0) rotate(0); }
  88%{ transform:translateX(-2px) rotate(-4deg); }
  90%{ transform:translateX(2px) rotate(4deg); }
  92%{ transform:translateX(-2px) rotate(-3deg); }
  94%{ transform:translateX(1px) rotate(2deg); }
  96%{ transform:translateX(0) rotate(0); }
}
@keyframes sd-tap{ 0%{ transform:scale(1);} 40%{ transform:scale(.9);} 100%{ transform:scale(1);} }
@media(max-width:600px){ .sd-toggle .sd-lab{ display:none; } }
@media(prefers-reduced-motion: reduce){ .sd-toggle{ animation:none; } }