/* ═══════════════════════════════════════════════════════════════════
   CRYPI — theme.css
   An OVERRIDE LAYER. Loads AFTER cockpit.css and never replaces it.

   Why a layer and not a rewrite: cockpit.css drives three views and
   ~120 selectors that I cannot see rendered. Rewriting it means
   guessing. Overriding it means the original rules are still there
   underneath, so removing the one <link> tag reverts everything
   instantly with nothing lost.

   Almost all of the work is done by re-declaring the design tokens
   cockpit.css already uses — that file is fully token-driven, which is
   why a light cream/navy interface can become a vivid dark one without
   touching a single layout rule.

   THE ONE EXCEPTION: the feed previews (.pm-*) also use those tokens,
   so a naive flip would turn your Instagram and Facebook previews dark
   — and those cards exist to predict what the real post looks like. A
   preview that lies is worse than no preview. They are explicitly
   re-lit at the bottom of this file with hardcoded values so they can
   never drift with the theme again.
   ═══════════════════════════════════════════════════════════════════ */

/* ── lane accents. The cockpit retints to whatever today's brief picked,
      exactly like the landing page. ── */
html[data-lane="lifestyle"]{--lt:#FFE9A8;--lane:#FFBE0B;--lane2:#FF6A00;--dk:#5C1D00;
  --m1:#FFBE0B;--m2:#FF006E;--m3:#8338EC;--m4:#FF6A00}
html[data-lane="news"]{--lt:#CFFAFF;--lane:#00E5FF;--lane2:#3A86FF;--dk:#06205C;
  --m1:#00E5FF;--m2:#3A86FF;--m3:#8338EC;--m4:#06FFA5}
html[data-lane="edu"]{--lt:#EDE2FF;--lane:#B388FF;--lane2:#8338EC;--dk:#280A52;
  --m1:#8338EC;--m2:#3A86FF;--m3:#FF006E;--m4:#00E5FF}
html[data-lane="psych"]{--lt:#FFD6E7;--lane:#FF3D8B;--lane2:#FF006E;--dk:#55062A;
  --m1:#FF006E;--m2:#FFBE0B;--m3:#8338EC;--m4:#FF6A00}
/* fallback if the attribute is ever missing — never leave the UI unpainted */
html:not([data-lane]){--lt:#FFE9A8;--lane:#FFBE0B;--lane2:#FF6A00;--dk:#5C1D00;
  --m1:#FFBE0B;--m2:#FF006E;--m3:#8338EC;--m4:#FF6A00}

/* ── the tokens cockpit.css already consumes ── */
:root{
  --bg:#0D0221;
  --surf:rgba(255,255,255,.085);
  --surf2:rgba(255,255,255,.055);
  --surf3:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.18);
  --line2:rgba(255,255,255,.30);
  --ink:#FFFFFF;
  --ink2:#C9BFEA;
  --ink3:#9A8FC4;
  --navy:var(--lane);
  --navy-hi:var(--lane2);
  --on-navy:#0D0221;
  --gold:#FFAA1C;   --gold-soft:rgba(255,170,28,.16);
  --good:#06FFA5;   --good-soft:rgba(6,255,165,.14);
  --bad:#FF4D6D;    --bad-soft:rgba(255,77,109,.14);
  --shadow:0 22px 55px -26px rgba(0,0,0,.92);
  --serif:"Outfit",system-ui,-apple-system,sans-serif;
}

body{
  background:#0D0221;
  color:#fff;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ── vivid mesh. Four saturated fields in ONE pseudo-element rather than
      four animated divs: no extra DOM, no repaint cost, and it retints
      with the lane because the stops are variables. ── */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 48% at 6% -6%,  var(--m1) 0%, transparent 62%),
    radial-gradient(46% 42% at 94% -8%, var(--m2) 0%, transparent 60%),
    radial-gradient(48% 46% at 42% 10%, var(--m3) 0%, transparent 62%),
    radial-gradient(40% 36% at 72% -4%, var(--m4) 0%, transparent 58%);
  filter:blur(50px);opacity:.88;transition:background 1s ease;
}
/* veil: lets the colour blaze at the top and fade to solid further down,
   so long pages stay readable */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,2,33,.10) 0%, rgba(13,2,33,.52) 38%, rgba(13,2,33,.93) 74%, #0D0221 100%);
}
.app{position:relative;z-index:1}
/* The cockpit is .app — but /video and /settings use the shared shell, whose
   wrapper is .shellmain. Without lifting that too, the fixed veil above paints
   straight over those two pages: content looks progressively greyed-out toward
   the bottom, which reads as a contrast bug rather than an overlay. Both
   wrappers must be raised, and any future full-page wrapper as well. */
.shellmain{position:relative;z-index:1}

/* ── sidebar ── */
.side{
  background:rgba(13,2,33,.42);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  border-right:1px solid var(--line);
}
.side .foot{border-top-color:var(--line)}
.brand .nm{font-family:var(--serif);font-weight:800;letter-spacing:-.03em}
.brand .sb{color:var(--ink3)}
.nav a{color:var(--ink2);font-weight:700;border-radius:13px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav a.on{
  color:#0D0221;
  background:linear-gradient(100deg,var(--lane),var(--lane2));
  box-shadow:0 12px 32px -12px var(--lane);
}

/* ── glass panels ── */
.panel,.kpi,.tickcell,.card,.instr{
  background:var(--surf);
  border:1px solid var(--line);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
}
.panel{border-radius:22px}
.kpi{border-radius:18px}
.card{border-radius:16px;background:rgba(255,255,255,.07)}
.card.held{border-color:rgba(255,170,28,.45);background:var(--gold-soft)}
.ticker{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:transparent}
.tickcell{border-radius:0;backdrop-filter:blur(24px)}

/* ── type ── */
.h1{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.035em}
.sub,.crumb{color:var(--ink3)}
.ph .t{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
.kpi .v,.tickcell .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── the hero strip ── */
.hero{
  border:0;border-radius:24px;color:#0D0221;
  background:linear-gradient(135deg,var(--lane) 0%,var(--lane2) 100%);
  box-shadow:0 28px 70px -30px var(--lane);
}
.hero .htx h3{font-family:var(--serif);font-weight:800;letter-spacing:-.03em;font-size:22px;color:#0D0221}
.hero .htx p{color:rgba(13,2,33,.78);font-weight:600}
.hero .go{background:#0D0221;color:#fff;border-radius:14px;font-weight:800;padding:14px 22px}
.hero .go:hover{background:#1B0740}

/* ── buttons ── */
.btn{border-radius:12px;font-weight:800}
.approve,.btn.approve{
  background:linear-gradient(100deg,var(--lane),var(--lane2));
  color:#0D0221;box-shadow:0 12px 30px -12px var(--lane);
}
.approve:hover,.btn.approve:hover{filter:brightness(1.09);background:linear-gradient(100deg,var(--lane),var(--lane2))}
.ghost,.btn.ghost{background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff}
.ghost:hover,.btn.ghost:hover{background:rgba(255,255,255,.14)}
.reject,.btn.reject{background:rgba(255,77,109,.14);color:#FF7D93;border:1px solid rgba(255,77,109,.32)}
.reject:hover,.btn.reject:hover{background:rgba(255,77,109,.24)}

/* ── chips, pills, filters ── */
.chip,.fchip,.statuspill,.jumppill,.seg{
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink2);border-radius:100px;
}
.fchip.on,.seg.on{background:linear-gradient(100deg,var(--lane),var(--lane2));color:#0D0221;border-color:transparent;font-weight:800}
.jumppill{border-radius:13px}
.jumppill:hover{background:rgba(255,255,255,.12);color:#fff}
.chip.hold{background:var(--gold-soft);border-color:rgba(255,170,28,.4);color:var(--gold)}
.dot.live{background:var(--good);box-shadow:0 0 12px var(--good)}

/* ── banners + flashes ── */
.banner,.flash{border-radius:16px;border:1px solid var(--line);backdrop-filter:blur(20px)}
.banner.warn{background:var(--gold-soft);border-color:rgba(255,170,28,.4)}
.flash.ok{background:var(--good-soft);border-color:rgba(6,255,165,.35);color:#8CFFD6}
.flash.err{background:var(--bad-soft);border-color:rgba(255,77,109,.35);color:#FFA6B5}

/* ── kill switches ── */
.switch{background:linear-gradient(100deg,var(--lane),var(--lane2));box-shadow:0 6px 18px -8px var(--lane)}
.kill .lab{color:var(--ink3)}

/* ── gauges ── */
.gauge{background:rgba(255,255,255,.12)}
.gauge i{background:linear-gradient(90deg,var(--lane),var(--lane2))}

/* ── video / settings pages (shared shell) ── */
.shellnav a{border:1px solid var(--line);color:var(--ink2);background:rgba(255,255,255,.05);border-radius:12px;font-weight:700}
.shellnav a:hover{color:#fff;background:rgba(255,255,255,.11)}
.shellnav a.on{background:linear-gradient(100deg,var(--lane),var(--lane2));color:#0D0221;border-color:transparent}
.upload-card,.card{border-color:var(--line)}
.dropzone{border-color:var(--line2);background:rgba(255,255,255,.05)}
.sysrow{border-color:var(--line)}
select,input[type=text],textarea{
  background:rgba(255,255,255,.07)!important;border:1px solid var(--line)!important;color:#fff!important;
}
pre{background:rgba(0,0,0,.38)!important;border-color:var(--line)!important;color:#D8D2F0!important}
.instr{border-radius:16px}
.instr span{color:var(--ink2)}
.instr b{color:#fff}
.scene{background:rgba(255,255,255,.06)!important;border-color:var(--line)!important}
.scene p{color:#fff!important}
.field-note,.settings-p{color:var(--ink2)}
.eyebrow{color:var(--ink3)}
.card-title,.upload-card h3{color:#fff}
.feed-stat{border-color:var(--line)}
.feed-stat .num{color:#fff}

/* ═══════════════════════════════════════════════════════════════════
   FEED PREVIEWS — deliberately NOT themed.
   These cards exist to predict what the post will look like on
   Instagram and Facebook. If they follow the dark theme they stop
   predicting anything, and the review queue stops being trustworthy.
   Hardcoded, so no future token change can drag them dark again.
   ═══════════════════════════════════════════════════════════════════ */
.pm{background:#FFFFFF;border:1px solid #DBDBDB;color:#0D0221;border-radius:16px;
    box-shadow:0 26px 60px -28px rgba(0,0,0,.85)}
.pm-name{color:#0D0221;font-weight:700}
.pm-name span{color:#737373}
.pm-more{color:#262626}
.pm-av{background:#F0F0F0;box-shadow:0 0 0 1px #DBDBDB}
.pm-photo{background:#F0F0F0;color:#737373}
.pm-cap{color:#0D0221}
.pm-react{color:#262626;border-top:1px solid #EFEFEF}
.pm-react .pm-ic{color:#262626}
.pm-linkcard{background:#F0F2F5;border-top:1px solid #DBDBDB}
.pm-lc-dom{color:#65676B}
.pm-lc-head{color:#050505}
.pm-cta{background:#FFFFFF;border:1px solid #CED0D4;color:#050505}
.pm-firstcomment{color:#65676B;border-top:1px dashed #DBDBDB}
.pm-ytcard{border-top:1px solid #DBDBDB}
.pm-yt-foot{background:#F0F2F5;border-top:1px solid #DBDBDB}
.pm-yt-play{background:rgba(0,0,0,.62)}

/* ── motion + small screens ── */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  body::before{filter:blur(60px);opacity:.75}
  .h1{font-size:26px}
}