/* ===========================================================================
   DIRECTION 4 · EDITORIAL  -  the house design system, applied to v2
   (ops\design-kits\system\stellation-design.md, Black + Carbon, 2026-09-08)

   Derek 2026-09-19: "update the ui / ux of this with our current design".
   The v2 mocks were built on their own "less edges" direction (20px cards,
   pills, shadows, blur, an ambient lime field). The house system is the
   opposite, so this is a FOURTH direction on the switcher, not an edit to the
   other three: flip Editorial / Midnight to compare, nothing else moves.

   What it changes, and the law behind each:
     radius 0 everywhere; dots, avatars and play/cue objects stay round  law 1
     no shadows, glows, gradients or backdrop blur                       ban 2
     true black ground; a card is a HAIRLINE on the ground, not a slab   1.2
     lime is type, strokes and solid buttons, never a low-alpha fill     1.3
     text greys are the solid ramp #b0b5aa / #81877a                     1
   What it deliberately does NOT change:
     - the header variation (Derek cut folios + explanations: "remove 01")
     - the five data colours (pink/cyan/orange/violet): chart + data only
       per ui-revamp-sop, and the likes colour is his open call
     - layout, copy, behaviour. CSS only; the review bars are left alone.

   Loaded LAST, only by pages that opt in (targeting.html). v2-shell.js shows
   the Editorial button only when this file is on the page.
   =========================================================================== */

[data-theme="editorial"]{
  /* ground + surfaces · section 1 */
  --ground:#000000; --rail-bg:#000000;
  --card:#000000;                    /* surfaces are the ground (1.2)        */
  --card-up:#0a0b0a;                 /* hover / on only                      */
  --card-shadow:none;
  --r-card:0; --r-sm:0; --r-tile:0; --r-ctl:0;
  --hair:#1b1d19; --hair-soft:#1b1d19;
  --rule-bg:#2b2f29;                 /* hairline rules between sections      */
  --fill-1:rgba(255,255,255,.04);    /* hover wash, 3-5% white (1.2)         */
  --fill-2:rgba(255,255,255,.08);
  --g-soft:rgba(255,255,255,.06);    /* was lime 12%: reads olive (1.3)      */
  /* ink ramp */
  --ink:#ffffff; --ink-2:#b0b5aa; --ink-3:#81877a;
  /* the system's own names, for anything written against them */
  --bg:#000000; --panel:#0a0b0a; --cell:#121410;
  --line:#1b1d19; --line-2:#2b2f29;
  --muted:#b0b5aa; --muted-2:#81877a; --muted-3:#545a4f;
  --accent:#b4ff3c;
}

/* ── law 1 · square everything, then give the true circles back ────────── */
[data-theme="editorial"] body *,
[data-theme="editorial"] body *::before,
[data-theme="editorial"] body *::after{border-radius:0 !important}
/* avatars */
[data-theme="editorial"] .pic,
[data-theme="editorial"] .picw,
[data-theme="editorial"] .spic,
[data-theme="editorial"] .acc .av img,
[data-theme="editorial"] .reconn,
/* dots */
[data-theme="editorial"] .acc .av i,
[data-theme="editorial"] .sep,
[data-theme="editorial"] .side-genre i,
[data-theme="editorial"] .rank b,
[data-theme="editorial"] .fbpd-dot,
[data-theme="editorial"] .tagmark,
/* objects that are genuinely round: play buttons, cue points, the (i) glyph */
[data-theme="editorial"] .edu-pl,
[data-theme="editorial"] .fbpd-play,
[data-theme="editorial"] .cue,
[data-theme="editorial"] .tipi{border-radius:50% !important}
/* the review toolbars are not the design; leave their pills alone */
[data-theme="editorial"] :is(.sw,.heads,.states),
[data-theme="editorial"] :is(.sw,.heads,.states) *{border-radius:999px !important}

/* ── ban 2 · no glow, no gradient, no blur ─────────────────────────────── */
[data-theme="editorial"] .amb{display:none}
[data-theme="editorial"] .acc .av i{box-shadow:0 0 0 2.5px var(--ground)}   /* ring kept, glow cut */
[data-theme="editorial"] :is(.dlg,.rc-toast,.v2tip){box-shadow:none;border:1px solid var(--line-2)}
[data-theme="editorial"] .dlg{background:var(--ground)}
[data-theme="editorial"] .rc-toast{background:var(--ground)}
[data-theme="editorial"] .v2tip{background:var(--ground)}
[data-theme="editorial"] :is(.tabbar,.fbpd){backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--ground)}
[data-theme="editorial"] .fbpd{border-color:var(--line-2)}
/* the video card's scrims were gradients; a solid strip carries the caption */
[data-theme="editorial"] .edu-th{background:var(--ground)}
[data-theme="editorial"] .edu-cap{background:rgba(0,0,0,.78)}

/* ── 1.2 · a card is a hairline on the ground ──────────────────────────── */
[data-theme="editorial"] :is(.card,.auto,.pack,.cmp,.rfoot,.bsum,.edu-v,.edu .q,details.q,
  .tier,.pkg,.plan,.bsfig){
  background:var(--ground);border:1px solid var(--line-2);box-shadow:none}
[data-theme="editorial"] :is(.card,.auto,.pack,.rfoot,.edu-v,.edu .q,details.q,.tier,.pkg,.plan):hover{
  background:var(--card-up)}
[data-theme="editorial"] .card.flat:hover{background:var(--ground)}
/* the rail sits on the same black, split from the page by one hairline */
[data-theme="editorial"] .side{border-right:1px solid var(--line)}
[data-theme="editorial"] .side-foot{border-top-color:var(--line)}

/* ── controls: outlined on the ground, the lime marks what is ON ────────── */
[data-theme="editorial"] :is(.pack-tog,.cmp-in,.rng,.secnav,.gtype,#gAdd,.xbtn,.dlg-x,.fbpd-ico,
  .fbpd-mode,.fbpd-skip,.fbpd-tag){
  background:transparent;border:1px solid var(--line-2);box-shadow:none}
/* .secnav is the mobile section switcher and is .rng's twin, so it is listed
   above rather than styled apart - that is what let it keep a filled track
   here while .rng went outlined (2026-09-22).

   Its ON state is deliberately NOT given the lime line that .cmp button.on
   gets: .rng marks ON with its .ind slab at --fill-2 and no lime, and these
   two sit on the same page, so the switcher copies the filter it stands next
   to rather than the composer it does not. v2.css already says --fill-2, so
   there is nothing to override here - measured equal to .rng .ind. */
[data-theme="editorial"] :is(.pack-tog,.xbtn,.dlg-x,.fbpd-tag,#gAdd):hover{
  background:var(--fill-1);border-color:var(--muted-3)}
[data-theme="editorial"] .cmp-in:focus-within{border-color:var(--accent-line, rgba(180,255,60,.3))}
/* composer type buttons (Followers / Likers / Hashtag): selected = lime line */
[data-theme="editorial"] .cmp :is(button:not(.cmp-go)){background:transparent;
  border:1px solid var(--line-2);box-shadow:none}
[data-theme="editorial"] .cmp button.on:not(.cmp-go){border-color:var(--accent);background:var(--fill-1)}
[data-theme="editorial"] .fbpd-tag.on{border-color:var(--accent)}

/* the switch: a square track, a square knob, lime when on */
[data-theme="editorial"] .swx i{background:transparent;border:1px solid var(--line-2)}
[data-theme="editorial"] .swx i::after{top:4px;left:4px;width:17px;height:17px;background:var(--muted-2)}
[data-theme="editorial"] .swx input:checked + i{background:var(--accent);border-color:var(--accent)}
[data-theme="editorial"] .swx input:checked + i::after{transform:translateX(19px);background:#000}
[data-theme="editorial"] .eng2 input:checked + i{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--accent)}

/* ── 1.3 · lime-alpha fills, typed in rather than tokenised ────────────── */
[data-theme="editorial"] .rank.b1{background:var(--fill-2)}
[data-theme="editorial"] .psug{background:transparent;border:1px solid var(--line-2);
  border-left:2px solid var(--accent)}
[data-theme="editorial"] .gset{background:transparent;box-shadow:none;border:1px solid var(--accent)}
[data-theme="editorial"] .gset:hover{background:var(--fill-1)}
/* the active menu item: lime type + a 2px lime bar, no lime wash */
[data-theme="editorial"] .sub a.on{background:var(--fill-1)}
[data-theme="editorial"] .mod.on{background:var(--fill-1)}
/* the cut bar is a warning, not a pink-red slab: red hairline, red type */
[data-theme="editorial"] .cutbar{background:transparent;border:1px solid rgba(255,77,77,.45)}
[data-theme="editorial"] .cutbar .ic{background:transparent;border:1px solid rgba(255,77,77,.45)}

/* the remove button on a source tile was a pink disc; now a black square */
[data-theme="editorial"] .tile .act.rm{background:#000;color:var(--ink);border:1px solid var(--line-2)}
[data-theme="editorial"] .tile .act.rm:hover{background:var(--err, #ff4d4d);color:#000;border-color:var(--err, #ff4d4d)}

/* the rail's Add account row: outlined like every other card, lime only on the + */
[data-theme="editorial"] .upsell{background:transparent;border:1px solid var(--line-2)}
[data-theme="editorial"] .upsell:hover{background:var(--fill-1)}