/* ══════════════════════════════════════════════════════════════════
   FANOGRAM · shared design system stylesheet (concepts2) — Job 2, CRM v2.1
   One file, every screen. Rules live in design-program/DESIGN-SYSTEM.md.
   RHYMES with concepts2/folo/folo.css by design (rule 15a): same shell,
   same shapes, same interaction grammar — FG tokens announce the product
   (accent #a78bfa · 18px radius · #08080a bg · CREATOR tag in the rail).
   ══════════════════════════════════════════════════════════════════ */
/* v2.2 GLOBAL RESTYLE (Brian 2026-08-08): the app adopts the PULSE 2 type voice —
   JetBrains Mono for labels + every money/stat figure (the green mono "+$9.00" grammar),
   Instrument Serif italic as the display counter-voice in headers (<em> inside .h1/.hsub),
   bold weights capped ~800. This supersedes "Inter only in apps" FOR FANOGRAM (owner ruling). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* body must read its own TOKENS, not literal hex — otherwise body.light flips every
   component but leaves the page itself dark (found in the V3 light-theme pass) */
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--txt);
  overflow-x:hidden;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit}
::selection{background:#a78bfa;color:#08080a}
:root{
  --bg:#08080a; --panel:#0f0f13; --card:#141418; --card2:#1b1b21; --card3:#24242b;
  --txt:#f4f4f5; --dim:#a1a1aa; --faint:#6b6b76;
  --acc:#a78bfa; --acc2:#c4b5fd; --accbg:rgba(167,139,250,.13);
  --good:#34d399; --warn:#fbbf24; --bad:#fb7185; --livec:#fb7185; --callc:#34d399;
  --r:18px;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  --serif:'Instrument Serif',Georgia,serif;
}
/* every count-up + money/stat figure speaks MONO (pulse2 grammar) */
[data-count],.statv,.money .big,.moneyrow b,.qrow .amt,.th .sp,.duo .c b,.fanrow .v,
.salest,.vi .mt b,.credits b{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* revenue figures read GREEN mono, pulse2's money voice */
.statv[data-pre="$"]{color:var(--good)}
/* serif-italic display accent — use as <em> inside .h1 / .hsub / hero lines */
.h1 em,.hsub em,.sec .t em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.h1 em{font-size:1.06em}
/* v2.2 note: the gold seen on the live agency dashboard is just that account's THEME
   PALETTE selection, not surface semantics (Brian 2026-08-08) — demos keep the standard
   purple accent on all three surfaces. Surface shells differ by NAV + content only. */

/* ══ LIGHT THEME (V3 — Mav ground rule 3: "both themes") ══════════════════
   The pack was dark-only; this flips the token ladder centrally so EVERY page
   inherits it. Two rules make it work without touching 20 pages:
     · --acc stays a mid purple used as a BACKGROUND (its text is #08080a in
       both themes — legible on the light purple pill either way);
     · --acc2 is accent TEXT, so it must go DARK in light mode, as must --good
       (money) — the dark-theme values are unreadable on white.
   A page that hard-codes a hex instead of a token will NOT theme — that is the
   one authoring rule this depends on. Toggle: account menu → Mode → Light/Dark/Auto. */
body.light{
  --bg:#f4f4f7; --panel:#ffffff; --card:#ffffff; --card2:#f0f0f4; --card3:#e3e3ea;
  --txt:#161619; --dim:#55555f; --faint:#8a8a95;
  --acc:#8b5cf6; --acc2:#6d28d9; --accbg:rgba(139,92,246,.12);
  --good:#047857; --warn:#b45309; --bad:#be123c; --livec:#be123c; --callc:#047857;
}
/* the 11 hard-coded white alphas in this file, flipped for light */
body.light .rgrp .grpline{background:rgba(0,0,0,.10)}
body.light .vis .ic{background:rgba(0,0,0,.05)}
body.light .chead .infotg{background:rgba(0,0,0,.05)}
body.light .mnav a{background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9)}
body.light .mtop a{background:rgba(255,255,255,.92);box-shadow:0 12px 36px rgba(0,0,0,.14)}
body.light .devbar{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.10);box-shadow:0 14px 46px rgba(0,0,0,.16)}
body.light .devbar button:hover,body.light .devbar a.hubl:hover{background:rgba(0,0,0,.06)}
/* floating chrome: the heavy dark shadows read as smudges on white */
body.light .acctmenu,body.light .spmenu,body.light .fanopanel,body.light .sortpop,
body.light .selbar,body.light .promptdock,body.light .upmodal .box{box-shadow:0 18px 50px rgba(0,0,0,.16)}
body.light .fanodock{box-shadow:0 14px 40px rgba(139,92,246,.30)}
body.light .chead{background:rgba(255,255,255,.86)}
body.light .comp{background:rgba(255,255,255,.94);box-shadow:0 14px 40px rgba(0,0,0,.12)}
/* media overlays stay dark on purpose — that text sits on a photo, not on the page */
@media(prefers-color-scheme:light){body.autotheme{color-scheme:light}}

/* ── shell + slide-open rail (pinnable — the Job 2 ask) ── */
.shell{display:grid;grid-template-columns:76px 1fr;min-height:100svh;
  transition:grid-template-columns .28s cubic-bezier(.3,.8,.3,1)}
.shell.withcp{grid-template-columns:76px 1fr 300px}
body.navopen .shell{grid-template-columns:236px 1fr}
body.navopen .shell.withcp{grid-template-columns:236px 1fr 300px}
@media(max-width:1240px){.shell.withcp,body.navopen .shell.withcp{grid-template-columns:76px 1fr}.cp{display:none}}
.rail{position:sticky;top:0;height:100svh;padding:16px 12px;display:flex;flex-direction:column;overflow:hidden;z-index:50;
  background:linear-gradient(180deg,rgba(167,139,250,.05),transparent 40%)}
.rail .top{display:flex;align-items:center;gap:11px;padding:4px 6px 16px;min-height:42px}
.rail .top img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.rail .top .bt{font-weight:800;font-size:15px;white-space:nowrap;opacity:0;transition:opacity .2s}
.rail .top .tg{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--faint);white-space:nowrap;opacity:0;transition:opacity .2s}
body.navopen .rail .top .bt,body.navopen .rail .top .tg{opacity:1}
.rgrp{margin:auto 0;display:flex;flex-direction:column;gap:4px;width:100%;overflow-y:auto;scrollbar-width:none}
.rgrp::-webkit-scrollbar{display:none}
.nl{display:flex;align-items:center;gap:0;justify-content:center;padding:11px 12px;border-radius:13px;color:var(--faint);
  transition:.16s;cursor:pointer;position:relative;min-height:43px}
body.navopen .nl{gap:13px;justify-content:flex-start}
.nl:hover{background:var(--card);color:var(--txt)}
.nl.on{background:var(--accbg);color:var(--acc2)}
.nl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nl .t{font-size:14px;font-weight:650;white-space:nowrap;opacity:0;width:0;overflow:hidden;transition:opacity .18s}
body.navopen .nl .t{opacity:1;width:auto}
/* margin-left:auto only when open — at width:0 it still pushed icons off-centre (v2.2 fix) */
.nl .soon{font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--warn);background:rgba(251,191,36,.13);
  border-radius:5px;padding:0;margin-left:0;opacity:0;width:0;overflow:hidden;transition:.18s}
body.navopen .nl .soon{opacity:1;width:auto;padding:2px 5px;margin-left:auto}
.rgrp .grp{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:0 12px;margin:11px 0 3px;opacity:0;height:0;overflow:hidden;transition:opacity .18s}
body.navopen .rgrp .grp{opacity:1;height:auto}
.rgrp .grpline{height:1px;background:rgba(255,255,255,.07);margin:9px 10px 7px}
body.navopen .rgrp .grpline{display:none}
/* unread count badge (live parity — count, not dot) */
.nl .cntb{position:absolute;top:6px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--acc);color:#08080a;font-size:9.5px;font-weight:800;display:grid;place-items:center}
body.navopen .nl .cntb{position:static;margin-left:auto}
.railme{display:flex;align-items:center;justify-content:center;gap:0;padding:8px;border-radius:14px;min-height:50px;cursor:pointer}
body.navopen .railme{background:var(--card);gap:11px;justify-content:flex-start}
.railme img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.railme .tx{white-space:nowrap;opacity:0;width:0;overflow:hidden;transition:opacity .18s;min-width:0}
body.navopen .railme .tx{opacity:1;width:auto}
.railme .n{font-size:13px;font-weight:700}.railme .h{font-size:11px;color:var(--faint)}
/* open/close chevron + PIN — pin keeps the rail open (body.navpin) */
.navtoggle{position:fixed;top:18px;left:62px;z-index:60;width:22px;height:22px;border-radius:7px;
  background:var(--card2);display:grid;place-items:center;opacity:0;transition:.2s;cursor:pointer}
.rail:hover .navtoggle,body.navopen .navtoggle{opacity:1}
body.navopen .navtoggle{left:222px;transform:rotate(180deg)}
.navtoggle svg{width:11px;height:11px;stroke:var(--dim);fill:none;stroke-width:2.4}
.pinbtn{position:fixed;top:46px;left:62px;z-index:60;width:22px;height:22px;border-radius:7px;
  background:var(--card2);display:grid;place-items:center;opacity:0;transition:.2s;cursor:pointer}
.rail:hover .pinbtn,body.navopen .pinbtn{opacity:1}
body.navopen .pinbtn{left:222px}
.pinbtn svg{width:11px;height:11px;stroke:var(--dim);fill:none;stroke-width:2;transition:.2s}
body.navpin .pinbtn{background:var(--acc)}
body.navpin .pinbtn svg{stroke:#08080a}

.main{padding:clamp(18px,2.6vw,36px) clamp(16px,3vw,44px) 150px;max-width:1400px;width:100%;margin:0 auto;min-width:0}
.cp{position:sticky;top:0;height:100svh;padding:24px 20px 24px 0;overflow-y:auto;scrollbar-width:none}
.cp::-webkit-scrollbar{display:none}

/* ── atoms ── */
/* v2.2 (Brian): bold weights dropped — 900 was dominating; labels go MONO small-caps (pulse2) */
.lab{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.h1{font-size:clamp(23px,2.4vw,31px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.hsub{font-size:13.5px;color:var(--faint);margin-top:5px}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:30px 0 14px;flex-wrap:wrap}
.sec .t{font-size:16.5px;font-weight:720;letter-spacing:-.02em}
.sec .s{font-size:12.5px;color:var(--faint)}
.sec a{font-size:13px;font-weight:700;color:var(--acc2)}
.card{background:var(--card);border-radius:var(--r);padding:24px}
/* one control height (v2.2 — Brian: all header buttons same aspect/height) */
.btn,.upsell,.adlab{height:40px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 20px;border-radius:11px;font-weight:750;
  font-size:13.5px;background:var(--acc);color:#08080a;transition:.2s;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(167,139,250,.32)}
.btn.q{background:var(--card2);color:var(--txt)}.btn.q:hover{box-shadow:none;background:var(--card3)}
.btn.w{background:#fff;color:#08080a}
/* [hidden] must beat every display rule below. Without this, `el.hidden = true` on a
   .pill (or any component that sets its own display) silently does NOTHING — found in
   the V3 round after it had already broken the agency Share-to-roster pills. */
[hidden]{display:none!important}
.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--card);
  font-size:13px;font-weight:650;color:var(--dim);cursor:pointer;transition:.15s;white-space:nowrap}
.pill:hover{background:var(--card2);color:var(--txt)}
.pill.on{background:var(--acc);color:#08080a}
.statv{font-weight:640;letter-spacing:-.02em;font-size:clamp(21px,2.1vw,28px);line-height:1}
.up{color:var(--good);font-size:12.5px;font-weight:700}.dnn{color:var(--bad);font-size:12.5px;font-weight:700}
/* minmax(0,…) — see .duocol: a bare 1fr floors at min-content and a single long
   unbreakable string (mono $ figure, handle) pushes the whole page wide at 375 */
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--card);border-radius:var(--r);padding:22px}
.stat .lab{display:block;margin-bottom:12px}
.stat .foot{font-size:12.5px;color:var(--dim);margin-top:9px}
.demo{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--faint);background:var(--card2);
  border-radius:5px;padding:3px 6px;vertical-align:middle}

/* ── money hero — the Meter treatment ── */
.money{position:relative;overflow:hidden;border-radius:22px;padding:clamp(26px,3.6vw,44px);text-align:center;
  background:radial-gradient(80% 130% at 50% 0%,rgba(52,211,153,.16),transparent 62%),
             radial-gradient(70% 100% at 20% 100%,rgba(167,139,250,.14),transparent 60%),var(--card)}
.money .big{font-size:clamp(38px,5.2vw,64px);font-weight:640;letter-spacing:-.02em;line-height:1;
  color:var(--good);margin:14px 0 10px;text-shadow:0 0 60px rgba(52,211,153,.28)}
.money .sub{font-size:13.5px;color:var(--dim)}
.money .live{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--good)}
.money .live i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.moneyrow{display:flex;gap:clamp(20px,4vw,52px);justify-content:center;margin-top:26px;flex-wrap:wrap}
.moneyrow div{text-align:center}
.moneyrow b{display:block;font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.01em}
.moneyrow span{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ── area chart + ratio bar ── */
.chartcard{background:var(--card);border-radius:var(--r);padding:24px}
.chartcard .ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chartcard svg.ar{width:100%;height:150px;display:block;margin-top:14px;overflow:visible}
.chartcard .xr{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--faint);margin-top:10px;text-transform:uppercase}
.ratio{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:20px;gap:3px}
.ratio i{display:block;border-radius:4px}
.rleg{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:var(--dim)}
.rleg span{display:flex;align-items:center;gap:7px}
.rleg i{width:8px;height:8px;border-radius:3px;display:block}
.rleg b{color:var(--txt);font-weight:750}

/* ── work queue rows ── */
.queue{display:flex;flex-direction:column;gap:8px}
.qrow{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:15px;padding:16px 18px;
  transition:.18s;cursor:pointer}
.qrow:hover{background:var(--card2);transform:translateX(3px)}
.qrow .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--accbg)}
.qrow .ic svg{width:17px;height:17px;stroke:var(--acc2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qrow .ic.w{background:rgba(251,191,36,.13)}.qrow .ic.w svg{stroke:var(--warn)}
.qrow .tx{flex:1;min-width:0}
.qrow .t{font-size:14px;font-weight:660}
.qrow .s{font-size:12.5px;color:var(--faint);margin-top:3px}
.qrow .amt{font-size:15px;font-weight:900;color:var(--good)}
.qrow .go{font-size:13px;font-weight:750;color:var(--acc2);white-space:nowrap}
.fanrow{display:flex;align-items:center;gap:13px;padding:12px 4px}
.fanrow img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.fanrow .n{font-size:13.5px;font-weight:620}
.fanrow .v{margin-left:auto;font-size:14px;font-weight:900}
.fanrow .bar{width:100%;height:5px;border-radius:3px;background:var(--card2);margin-top:6px;overflow:hidden}
.fanrow .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}

/* ── filter bar (rule 5: ONE bar, never two rows of chips) ── */
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border-radius:14px;padding:10px 12px}
.fbar .seg{display:flex;gap:3px;background:var(--card2);border-radius:999px;padding:4px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.fbar .seg::-webkit-scrollbar{display:none}
.fbar .seg b{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer;transition:.15s;white-space:nowrap}
.fbar .seg b.on{background:var(--acc);color:#08080a}
/* .srch styled ANYWHERE it appears (v2.2 — it moved into pane headers too) */
.srch{display:flex;align-items:center;gap:9px;flex:1;min-width:140px;background:var(--card2);
  border-radius:10px;padding:9px 13px;font-size:13px;color:var(--faint)}
.srch input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:13px;min-width:60px}
.srch input::placeholder{color:var(--faint)}
.srch svg{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:2;flex-shrink:0}
.fbar .more{font-size:12.5px;font-weight:700;color:var(--acc2);cursor:pointer;padding:0 6px;white-space:nowrap}

/* ── platform chips + multi-lane dots (the FG signature) ── */
/* v2.2: chips are CIRCLES matching live chat — and the SAME component on every surface
   (chat, vault, publish, broadcast…), per Brian: one chip grammar everywhere */
.plats{display:flex;gap:6px}
.plat{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;
  color:#fff;position:relative;cursor:pointer;transition:.15s;flex-shrink:0}
.plat:hover{transform:translateY(-1px)}
.plat.off{opacity:.35;filter:saturate(.4)}
.plat .b{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--acc);color:#08080a;font-size:9.5px;font-weight:800;display:grid;place-items:center}
.p-tg{background:linear-gradient(135deg,#5eb6f7,#0088cc)}
.p-fo{background:linear-gradient(135deg,#8b7bff,#6d28d9)}
.p-kn{background:linear-gradient(135deg,#f43f5e,#be123c)}
.p-wa{background:linear-gradient(135deg,#4ade80,#16a34a)}
.p-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 46%,#6228d7)}
.lanedots{display:inline-flex;gap:3px;vertical-align:middle}
.lanedots i{width:7px;height:7px;border-radius:50%;display:block}
.lanedots .tg{background:#5eb6f7}.lanedots .fo{background:#8b7bff}.lanedots .kn{background:#f43f5e}
.lanedots .wa{background:#4ade80}.lanedots .ig{background:#ee2a7b}

/* ── chip CAROUSEL (Brian: groups scroll sideways, NEVER a growing box) ── */
.chiprow{position:relative;min-width:0}
.chiprow .rowscroll{display:flex;gap:8px;overflow-x:auto;padding:2px;scroll-snap-type:x proximity;scrollbar-width:none;flex-wrap:nowrap}
.chiprow .rowscroll::-webkit-scrollbar{display:none}
.chiprow .rowscroll .pill{flex-shrink:0;scroll-snap-align:start}
.chiprow .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:30px;
  border-radius:50%;background:rgba(16,16,22,.9);backdrop-filter:blur(10px);display:grid;place-items:center;
  opacity:0;transition:.2s;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.chiprow:hover .arrow{opacity:1}
.chiprow .arrow:hover{background:var(--acc)}
.chiprow .arrow:hover svg{stroke:#08080a}
.chiprow .arrow svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chiprow .arrow.l{left:-6px}.chiprow .arrow.r{right:-6px}
@media(hover:none){.chiprow .arrow{display:none}}

/* ── slider rails (arrows on hover) — same grammar as Folo ── */
.slider{position:relative}
.slider .rowscroll{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
.slider .rowscroll::-webkit-scrollbar{display:none}
.slider .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;
  border-radius:50%;background:rgba(16,16,22,.88);backdrop-filter:blur(10px);display:grid;place-items:center;
  opacity:0;transition:.2s;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.slider:hover .arrow{opacity:1}
.slider .arrow:hover{background:var(--acc)}
.slider .arrow:hover svg{stroke:#08080a}
.slider .arrow svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slider .arrow.l{left:-8px}.slider .arrow.r{right:-8px}
@media(hover:none){.slider .arrow{display:none}}

/* ── account menu (v2.2 — live parity, walk §10c; rhymes with Folo's acctmenu) ── */
.acctmenu{position:fixed;left:86px;bottom:16px;z-index:80;width:250px;max-height:calc(100svh - 32px);
  overflow-y:auto;scrollbar-width:none;background:var(--card2);
  border-radius:18px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.65);display:none}
.acctmenu::-webkit-scrollbar{display:none}
body.navopen .acctmenu{left:246px}
.acctmenu.open{display:block}
.acctmenu .id{display:flex;align-items:center;gap:10px;padding:8px 10px 12px}
.acctmenu .id img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.acctmenu .id .n{font-size:13.5px;font-weight:750}
.acctmenu .id .h{font-size:11.5px;color:var(--faint)}
.acctmenu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;font-size:13.5px;
  font-weight:650;color:var(--dim);transition:.14s;cursor:pointer}
.acctmenu a:hover{background:var(--card3);color:var(--txt)}
.acctmenu a svg{width:16px;height:16px;stroke:var(--acc2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acctmenu .grp2{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:12px 11px 6px}
.acctmenu .modeseg{display:flex;gap:3px;background:var(--card);border-radius:999px;padding:3px;margin:2px 10px 4px}
.acctmenu .modeseg span{flex:1;text-align:center;padding:7px 0;border-radius:999px;font-size:12px;font-weight:700;color:var(--dim);cursor:pointer;transition:.14s}
.acctmenu .modeseg span.on{background:var(--card3);color:var(--txt)}
.acctmenu .thdots{display:flex;gap:7px;padding:2px 11px 6px}
.acctmenu .thdots i{width:20px;height:20px;border-radius:50%;cursor:pointer;transition:.15s}
.acctmenu .thdots i.on{box-shadow:0 0 0 2.5px var(--bg),0 0 0 4.5px var(--txt)}
.acctmenu .lcrow{display:flex;gap:7px;padding:8px 10px 2px}
.acctmenu .lcrow label{flex:1;min-width:0;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;gap:5px}
.acctmenu .lcrow select{width:100%;background:var(--card);border:none;outline:none;color:var(--txt);
  font:inherit;font-size:12.5px;font-weight:650;letter-spacing:0;text-transform:none;border-radius:10px;padding:8px 9px;cursor:pointer}
.acctmenu .out{margin-top:6px;padding:10px 11px;border-radius:11px;font-size:13.5px;font-weight:650;color:var(--dim);cursor:pointer;transition:.14s;display:block}
.acctmenu .out:hover{background:var(--card3);color:var(--bad)}

/* ── chat sender stamps + sale status (v2.2 — live parity, Brian: keep the stamps) ── */
.stamp{align-self:flex-end;font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:2px 4px -4px 0}
.stamp.ag{color:var(--acc2)}
.salest{font-size:9px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px}
.salest.pend{background:rgba(251,191,36,.16);color:var(--warn)}
.salest.unlocked{background:rgba(52,211,153,.16);color:var(--good)}

/* ── no-gap stat walls (v2.2 — Brian: no gaps, always fill) ── */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px}
/* two-up card grid that actually collapses on mobile (inline 1fr 1fr never did) */
/* minmax(0,…) not 1fr — a bare 1fr floors at min-content, so one wide child
   (a table, a long mono URL) pushes the whole page wide at 375 (V3 375-pass fix) */
.duocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media(max-width:900px){.duocol{grid-template-columns:minmax(0,1fr)}}

/* ── chat (3 panes; conversation = OPEN canvas per rule 14) ── */
.chatwrap{display:grid;grid-template-columns:300px minmax(0,1fr) 290px;gap:12px;height:calc(100svh - 165px);min-height:520px}
.chatwrap.noinfo{grid-template-columns:300px minmax(0,1fr)}
@media(max-width:1320px){.chatwrap{grid-template-columns:280px 1fr}.fanpane{display:none}}
@media(max-width:880px){.chatwrap{grid-template-columns:minmax(0,1fr);height:auto}.threadpane{max-height:290px}}
.cpane{background:var(--card);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* the conversation pane is NOT a card — open canvas on the page bg */
.cpane.open{background:none;border-radius:0}
.threadlist{flex:1;overflow-y:auto;padding:6px 8px;scrollbar-width:none}
.threadlist::-webkit-scrollbar{display:none}
.th{display:flex;gap:11px;align-items:center;padding:11px;border-radius:13px;cursor:pointer;transition:.15s}
.th:hover{background:var(--card2)}.th.on{background:var(--accbg)}
.th .av{position:relative;flex-shrink:0}
.th .av img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.th .av .pl{position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:6px;display:grid;
  place-items:center;font-size:8px;font-weight:800;color:#fff;border:2px solid var(--card)}
.th .tx{flex:1;min-width:0}
.th .n{font-size:13.5px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th .p{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.th .mt{text-align:right;flex-shrink:0}
.th .tm{font-size:11px;color:var(--faint);font-weight:600}
.th .sp{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;color:var(--good)}
.th .bd{display:inline-block;min-width:18px;text-align:center;font-size:10.5px;font-weight:800;
  background:var(--acc);color:#08080a;border-radius:999px;padding:2px 6px;margin-top:5px}
.th.gold{background:linear-gradient(90deg,rgba(251,191,36,.14),transparent 70%)}
.chead{display:flex;align-items:center;gap:12px;padding:13px 16px;flex-wrap:wrap;
  background:rgba(15,15,19,.82);backdrop-filter:blur(18px);border-radius:16px}
.chead img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.chead .n{font-size:15px;font-weight:800}.chead .s{font-size:12px;color:var(--faint)}
.aimode{margin-left:auto;display:flex;align-items:center;gap:9px}
.aimode .seg{display:flex;gap:3px;background:var(--card2);border-radius:999px;padding:4px}
.aimode .seg b{padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--dim);cursor:pointer;transition:.15s}
.aimode .seg b.on{background:var(--acc);color:#08080a}
.clog{flex:1;overflow-y:auto;padding:10px 4px;display:flex;flex-direction:column;gap:9px;scrollbar-width:none}
.clog::-webkit-scrollbar{display:none}
.dv{align-self:center;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--faint);padding:12px 0 4px}
.bb{max-width:72%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.5}
.bb.in{background:var(--card2);align-self:flex-start;border-bottom-left-radius:6px}
.bb.out{background:var(--acc);color:#08080a;font-weight:550;align-self:flex-end;border-bottom-right-radius:6px}
.draft{align-self:flex-end;max-width:78%;border-radius:16px;border-bottom-right-radius:6px;padding:13px 15px;
  background:var(--accbg);outline:1px dashed rgba(167,139,250,.45);outline-offset:-1px}
.draft .dl{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--acc2);margin-bottom:7px}
.draft .dt{font-size:13.5px;line-height:1.5}
.draft .da{display:flex;gap:8px;margin-top:11px}
.draft .ap{padding:8px 16px;border-radius:9px;background:var(--acc);color:#08080a;font-weight:800;font-size:12.5px;cursor:pointer}
.draft .ed{padding:8px 14px;border-radius:9px;background:var(--card2);font-weight:700;font-size:12.5px;cursor:pointer}
.ppvc{align-self:flex-end;width:220px;border-radius:15px;overflow:hidden;background:var(--card2)}
.ppvc .art{height:94px;background:linear-gradient(135deg,#4c1d95,#7c2d7a);display:grid;place-items:center;
  font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.72)}
.ppvc .r{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;font-size:12.5px;font-weight:750}
.ppvc .r b{color:var(--good)}
.quick{display:flex;gap:7px;padding:0 2px 6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.quick::-webkit-scrollbar{display:none}
.quick .pill{font-size:12px;padding:8px 13px;background:var(--accbg);color:var(--acc2);flex-shrink:0}
.comp{display:flex;align-items:center;gap:5px;margin:8px 0 0;background:rgba(20,20,26,.92);backdrop-filter:blur(18px);
  border-radius:16px;padding:7px 7px 7px 12px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.comp .ti{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--faint);transition:.15s;cursor:pointer;flex-shrink:0}
.comp .ti:hover{color:var(--txt);background:var(--card3)}
.comp .ti svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.comp input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:13.5px;min-width:70px}
.comp input::placeholder{color:var(--faint)}
.comp .snd{width:37px;height:37px;border-radius:11px;background:var(--acc);display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.comp .snd svg{width:15px;height:15px;stroke:#08080a;fill:none;stroke-width:2.3}
.fanpane{padding:20px;overflow-y:auto;scrollbar-width:none}
.fanpane::-webkit-scrollbar{display:none}
.fanpane .fch{text-align:center;margin-bottom:16px}
.fanpane .fch img{width:68px;height:68px;border-radius:50%;object-fit:cover;margin:0 auto 10px}
.fanpane .fch .n{font-size:15.5px;font-weight:800}.fanpane .fch .h{font-size:12px;color:var(--faint)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.duo .c{background:var(--card2);border-radius:13px;padding:13px}
.duo .c .lab{display:block;margin-bottom:6px;font-size:9px}
.duo .c b{font-size:17px;font-weight:900}
.nbm{background:var(--accbg);border-radius:14px;padding:15px;margin-bottom:12px}
.nbm .t{font-size:12.5px;font-weight:700;color:var(--acc2);margin-bottom:5px}
.nbm p{font-size:12.5px;line-height:1.55;color:var(--dim)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.tagrow .pill{font-size:11px;padding:6px 11px;background:var(--card2)}

/* ── vault ── */
.folders{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.folders::-webkit-scrollbar{display:none}
.fold{flex-shrink:0;background:var(--card);border-radius:13px;padding:13px 16px;min-width:132px;cursor:pointer;transition:.15s}
.fold:hover{background:var(--card2)}.fold.on{background:var(--accbg)}
.fold .n{font-size:13px;font-weight:700;white-space:nowrap}
.fold .c{font-size:11.5px;color:var(--faint);margin-top:3px}
/* ALBUM tile (v2.2 — Brian: match Folo's album grammar EXACTLY, common surface):
   card bg, padded fanned polaroid thumbs, folder icon + name + count row below */
.vfolder{position:relative;border-radius:15px;background:var(--card);aspect-ratio:3/4;padding:16px;
  cursor:pointer;display:flex;flex-direction:column;transition:.18s}
.vfolder:hover{background:var(--card2);transform:translateY(-3px)}
.vfolder .stack{flex:1;position:relative;margin-bottom:14px}
.vfolder .stack img{position:absolute;width:64%;aspect-ratio:1;object-fit:cover;border-radius:12px;
  border:3px solid var(--card);transition:.25s;inset:auto}
.vfolder:hover .stack img{border-color:var(--card2)}
.vfolder .stack img:nth-child(1){left:0;top:8%;transform:rotate(-5deg);z-index:1}
.vfolder .stack img:nth-child(2){right:0;top:0;transform:rotate(4deg);z-index:2}
.vfolder .stack img:nth-child(3){left:16%;bottom:0;transform:rotate(-1deg);z-index:3}
.vfolder .ov{display:flex;align-items:center;gap:10px}
.vfolder .nm{font-size:13px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:8px;min-width:0}
.vfolder .ov svg{width:18px;height:18px;stroke:var(--acc2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.vfolder .mt{font-size:11px;color:var(--faint);margin-top:2px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.vi{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:3/4;background:var(--card);cursor:pointer;transition:.2s}
.vi:hover{transform:translateY(-3px)}
.vi img{width:100%;height:100%;object-fit:cover}
.vi .ov{position:absolute;inset:auto 0 0 0;padding:30px 12px 11px;background:linear-gradient(180deg,transparent,rgba(4,4,7,.94))}
.vi .nm{font-size:12.5px;font-weight:660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi .mt{font-size:11px;color:var(--dim);margin-top:3px}
.vi .mt b{color:var(--good);font-weight:800}
/* the tick lives INSIDE the square (rule 8) */
.vi .sel{position:absolute;top:9px;left:9px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:rgba(4,4,7,.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);transition:.15s;z-index:3}
.vi .sel svg{width:12px;height:12px;stroke:#08080a;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.15s}
.vi.on .sel{background:var(--acc);box-shadow:inset 0 0 0 2px var(--acc)}
.vi.on .sel svg{opacity:1}
.vi.on{outline:3px solid var(--acc);outline-offset:-3px}
.vi .pl2{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:8.5px;font-weight:800;color:#fff;z-index:3}
.vi .nsfw{position:absolute;inset:0;backdrop-filter:blur(26px);background:rgba(8,8,12,.35);display:grid;place-items:center;z-index:2}
.vi .nsfw span{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--bad);background:rgba(4,4,7,.6);border-radius:6px;padding:4px 8px}
/* v2.2 (Brian): the select bar FLOATS — a detached island centred over the grid, not a docked strip */
.selbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:rgba(24,24,30,.92);backdrop-filter:blur(20px);
  border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:75}
@media(max-width:820px){.selbar{bottom:calc(96px + env(safe-area-inset-bottom))}}
.selbar .c{font-size:13.5px;font-weight:750}.selbar .sp{flex:1}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--dim);flex-wrap:wrap}
.crumb a{color:var(--acc2);cursor:pointer}
.crumb svg{width:12px;height:12px;stroke:var(--faint);fill:none;stroke-width:2.2}

/* ── publish / forms ── */
.pubgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px}
@media(max-width:1100px){.pubgrid{grid-template-columns:minmax(0,1fr)}}
.field{margin-bottom:20px}
.field .lab{display:block;margin-bottom:10px}
.ta{width:100%;background:var(--card2);border:none;outline:none;border-radius:14px;padding:16px;
  color:var(--txt);font-size:14.5px;line-height:1.6;min-height:120px;resize:vertical}
.inp{width:100%;background:var(--card2);border:none;outline:none;border-radius:12px;padding:13px 15px;
  color:var(--txt);font-size:14px}
.inp::placeholder,.ta::placeholder{color:var(--faint)}
.attach{width:88px;height:88px;border-radius:14px;background:var(--card2);display:grid;place-items:center;
  cursor:pointer;transition:.15s}
.attach:hover{background:var(--card3)}
.attach svg{width:22px;height:22px;stroke:var(--faint);fill:none;stroke-width:1.8}
.visrow{display:flex;flex-direction:column;gap:9px}
.vis{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:14px;background:var(--card2);cursor:pointer;transition:.15s}
.vis:hover{background:var(--card3)}
.vis.on{background:var(--accbg);box-shadow:inset 0 0 0 1.5px rgba(167,139,250,.4)}
.vis .ic{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.05);display:grid;place-items:center;flex-shrink:0}
.vis .ic svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:1.9}
.vis.on .ic svg{stroke:var(--acc2)}
.vis .t{font-size:14px;font-weight:660}
.vis .s{font-size:12px;color:var(--faint);margin-top:2px}
.preview{background:var(--card);border-radius:var(--r);padding:20px;height:max-content;position:sticky;top:20px}
.phone{background:var(--bg);border-radius:16px;overflow:hidden;margin-top:12px}
.phone .ph{display:flex;align-items:center;gap:9px;padding:13px}
.phone .ph img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.phone .ph .n{font-size:13px;font-weight:750}.phone .ph .t{font-size:11px;color:var(--faint)}
.phone .art{aspect-ratio:4/5;background:var(--card2);display:grid;place-items:center;font-size:12px;color:var(--faint);overflow:hidden}
.phone .art img{width:100%;height:100%;object-fit:cover}
.phone .cap{padding:13px;font-size:13px;color:var(--dim)}
.toggle{width:38px;height:22px;border-radius:999px;background:var(--card3);position:relative;cursor:pointer;transition:.18s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:.18s}
.toggle.on{background:var(--acc)}
.toggle.on::after{left:19px;background:#08080a}

/* ── STUDIO (Higgsfield grammar: tool tabs · gen grid · prompt dock hero) ── */
.modes{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:var(--r);padding:10px;
  height:max-content;position:sticky;top:20px}
.stwrap{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px}
@media(max-width:900px){.stwrap{grid-template-columns:1fr}.modes{flex-direction:row;overflow-x:auto;position:static}}
.mode{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border-radius:13px;
  cursor:pointer;transition:.15s;color:var(--faint);position:relative;min-width:84px}
.mode:hover{background:var(--card2);color:var(--txt)}
.mode.on{background:var(--accbg);color:var(--acc2)}
.mode svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mode span{font-size:10.5px;font-weight:750;text-align:center;line-height:1.25}
.mode .soon{position:absolute;top:5px;right:5px;font-size:7.5px;font-weight:800;letter-spacing:.06em;
  color:var(--warn);background:rgba(251,191,36,.14);border-radius:5px;padding:2px 4px}
.gengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.gen{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--card);cursor:pointer}
.gen img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gen:hover img{transform:scale(1.04)}
.gen .acts{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,7,.5),transparent 30%,transparent 55%,rgba(4,4,7,.9));
  opacity:0;transition:.2s;display:flex;flex-direction:column;justify-content:space-between;padding:11px}
.gen:hover .acts{opacity:1}
.gen .arow{display:flex;gap:6px;justify-content:flex-end}
.gen .ab{width:30px;height:30px;border-radius:9px;background:rgba(4,4,7,.66);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:.15s}
.gen .ab:hover{background:var(--acc)}
.gen .ab svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.9}
.gen .ab:hover svg{stroke:#08080a}
.gen .pr{font-size:11.5px;color:rgba(255,255,255,.9);line-height:1.4}
.gen .badge{position:absolute;top:10px;left:10px;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:4px 8px;border-radius:7px;background:rgba(4,4,7,.72);backdrop-filter:blur(6px)}
.gen .badge.ad{color:var(--bad)}
.gen.pending{display:grid;place-items:center;background:var(--card2)}
.gen.pending .sp{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--card3);
  border-top-color:var(--acc);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.promptdock{position:sticky;bottom:20px;margin-top:18px;background:rgba(18,18,22,.94);
  backdrop-filter:blur(20px);border-radius:20px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:20}
.promptrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.promptrow input{flex:1;background:var(--card2);border:none;outline:none;border-radius:13px;
  padding:15px 18px;color:var(--txt);font-size:14.5px;min-width:120px}
.promptrow .enh{padding:13px 16px;border-radius:12px;background:var(--card2);font-size:13px;font-weight:750;color:var(--acc2);cursor:pointer}
.promptrow .genb{padding:14px 24px;border-radius:12px;background:var(--acc);color:#08080a;font-weight:800;font-size:14px;
  display:flex;align-items:center;gap:8px;cursor:pointer}
.promptrow .genb .cr{background:rgba(8,8,10,.2);border-radius:6px;padding:2px 7px;font-size:11.5px}
.optrow{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;align-items:center}
.optrow .pill{font-size:12px;padding:8px 13px;background:var(--card2)}
.optrow .sp{flex:1}
.credits{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--dim)}
.credits b{color:var(--acc2)}

/* ══ CALENDAR (V3 — Brian 2026-08-12: "calendar should be consistent with the rest of
   the platform, day on click, week/month timeline view; update any other calendar
   locations"). ONE primitive, used by every calendar surface (publish Calendar tab,
   chatters coverage, any future scheduler) so no surface invents its own again.
   Grammar: .cal > .calbar (title · Day|Week|Month seg · prev/today/next)
            .calgrid[.week|.month]  → cells are .caldy (click = open Day)
            .calday                 → hour rows for the single-day view
   Events are .calev chips; .calev.ai marks an autopilot-owned slot. ══ */
.cal{background:var(--card);border-radius:var(--r);padding:18px}
.calbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.calbar .ct{font-size:16px;font-weight:720;letter-spacing:-.02em;flex:1;min-width:130px}
.calbar .seg{display:flex;gap:3px;background:var(--card2);border-radius:999px;padding:4px}
.calbar .seg b{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--dim);cursor:pointer;transition:.15s}
.calbar .seg b.on{background:var(--acc);color:#08080a}
.calnav{display:flex;gap:4px;align-items:center}
.calnav span{width:30px;height:30px;border-radius:9px;background:var(--card2);display:grid;place-items:center;
  cursor:pointer;color:var(--dim);transition:.15s;font-size:13px}
.calnav span:hover{background:var(--card3);color:var(--txt)}
.calnav .today{width:auto;padding:0 13px;font-size:12px;font-weight:700}
/* week + month share one grid; month just adds rows and dims out-of-range days */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.caldow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:0 2px 6px;text-align:left}
.caldy{background:var(--card2);border-radius:13px;padding:11px;min-height:104px;cursor:pointer;
  transition:.16s;display:flex;flex-direction:column;gap:6px;min-width:0}
.caldy:hover{background:var(--card3);transform:translateY(-2px)}
.caldy .dn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--dim);display:flex;
  align-items:center;justify-content:space-between;gap:6px}
.caldy.today{box-shadow:inset 0 0 0 2px var(--acc)}
.caldy.today .dn{color:var(--acc2)}
.caldy.out{opacity:.38}
.caldy .dn .best{font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--acc2)}
.calgrid.month .caldy{min-height:82px}
@media(max-width:900px){.calgrid.month{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .calgrid.month .caldy{min-height:58px;padding:6px;border-radius:9px}
  .calgrid.month .calev{display:none}
  .calgrid.month .caldy .dot{display:block}}
@media(max-width:760px){.calgrid.week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calgrid.week .caldow{display:none}
  .calgrid.week .caldy .dn::after{content:attr(data-dow);font-family:var(--mono);font-size:9px;
    letter-spacing:.14em;color:var(--faint)}}
/* event chip — one grammar for a post, a shift, a call */
.calev{font-size:11.5px;font-weight:650;border-radius:8px;padding:5px 8px;background:var(--card3);
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.calev .tm{font-family:var(--mono);font-size:10px;color:var(--faint);flex-shrink:0}
.calev.ai{background:var(--accbg);color:var(--acc2)}
.calev.good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.calev.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.calev.ghost{background:none;box-shadow:inset 0 0 0 1px var(--card3);color:var(--faint)}
/* dots stand in for chips when a month cell is too small to read them */
.caldy .dot{display:none;gap:3px}
.caldy .dot i{width:5px;height:5px;border-radius:50%;background:var(--acc);display:block}
/* DAY view — hour rows, the click-through from any cell */
.calday{display:flex;flex-direction:column;gap:2px}
.calhr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start;
  padding:7px 0;box-shadow:0 -1px 0 rgba(255,255,255,.05)}
body.light .calhr{box-shadow:0 -1px 0 rgba(0,0,0,.07)}
.calhr:first-child{box-shadow:none}
.calhr .hh{font-family:var(--mono);font-size:11px;color:var(--faint);padding-top:5px}
.calhr .slots{display:flex;flex-direction:column;gap:5px;min-width:0}
.calhr.peak .hh{color:var(--acc2);font-weight:700}
.calhr.peak{background:linear-gradient(90deg,var(--accbg),transparent 60%);border-radius:10px}
.calempty{font-size:12px;color:var(--faint);padding:3px 0}

/* ── wizard in the RIGHT PANE with co-pilot (rule 10) ── */
.wizpane .stepline{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.wstep{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;transition:.16s;cursor:pointer}
.wstep .num{width:24px;height:24px;border-radius:50%;background:var(--card2);display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--faint);flex-shrink:0;transition:.16s}
.wstep.done .num{background:var(--good);color:#052e21}
.wstep.on{background:var(--accbg)}
.wstep.on .num{background:var(--acc);color:#08080a}
.wstep .t{font-size:13px;font-weight:700;color:var(--dim)}
.wstep.on .t,.wstep.done .t{color:var(--txt)}
.wstep .s{font-size:11px;color:var(--faint);margin-top:1px}
/* v2.2: ring sized by its container, mono figure, no dead padding (Brian: broken padding) */
.wizring{position:relative;width:96px;height:96px;flex-shrink:0}
.wizring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.wizring .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.wizring .n b{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1}
.wizring .n span{font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.14em;color:var(--faint)}

/* ── co-pilot ── */
.cph{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;margin-bottom:5px}
.cph .sp2{width:25px;height:25px;border-radius:8px;background:var(--accbg);display:grid;place-items:center}
.cph .sp2 svg{width:13px;height:13px;stroke:var(--acc2);fill:none;stroke-width:2}
.cpsub{font-size:11.5px;color:var(--faint);margin-bottom:15px}
.cpc{background:var(--card);border-radius:15px;padding:15px;margin-bottom:9px}
.cpc .t{font-size:13px;font-weight:670;margin-bottom:3px}
.cpc .s{font-size:11.5px;color:var(--dim);margin-bottom:9px;line-height:1.5}
.cpc a{font-size:12px;font-weight:750;color:var(--acc2);cursor:pointer}

/* ── upsell chips + pop-up (rule 15b — FG side: team members / platforms) ── */
.upsell{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card2);
  font-size:12.5px;font-weight:700;color:var(--dim);cursor:pointer;transition:.15s}
.upsell:hover{background:var(--card3);color:var(--txt)}
.upsell .lanedots{margin-right:2px}
.upmodal{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(4,4,8,.66);backdrop-filter:blur(6px)}
.upmodal.open{display:grid}
.upmodal .box{width:min(400px,calc(100vw - 32px));background:var(--card);border-radius:20px;padding:26px;text-align:center}
.upmodal .box .lanedots{justify-content:center;display:flex;margin-bottom:14px}
.upmodal .box .lanedots i{width:10px;height:10px}
.upmodal .box h4{font-size:18px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.upmodal .box p{font-size:13.5px;color:var(--dim);line-height:1.6;margin-bottom:6px}
.upmodal .box .pw{font-size:11.5px;color:var(--faint);margin-bottom:18px}
.upmodal .box .row{display:flex;gap:9px;justify-content:center}

/* ══ .ov — THE OVERLAY PRIMITIVE ══════════════════════════════════════════════════
   Added 2026-08-13. Brian: "were all the modal boxes (draws on mobile) updated to the
   V3 UI as dont recall seeing any … i noticed using V2 ones for vault pop up etc."

   🔑 THEY WERE NEVER UPDATED BECAUSE THEY WERE NEVER A PRIMITIVE. Before this block the
   pack had FIVE independently hand-rolled overlays — .upmodal (here), .tpl-pvm
   (templates), .lightbox + .lgen (vault), .shrsheet (mini-profile) — on FOUR different
   z-indexes (120/120/130/140/150) and three different scrims (.66/.78/.8). Nothing was
   shared, so there was nothing for a restyle to land on: "update the modals to V3" had
   no single place to happen, and each page kept whatever it was born with.

   ⚠️ AND NOT ONE OF THEM WAS A DRAWER. Every one is `place-items:center`, including the
   one literally named `.shrsheet`. On a phone they are centred boxes — the mobile sheet
   pattern Brian is asking about did not exist anywhere in the pack.

   USAGE — add `ovl` alongside whatever class the page already uses; the page keeps its
   own box styling, the primitive owns scrim, stacking, entry and the mobile drawer:
       <div class="ovl lightbox" data-lb> <div class="box"> … </div> </div>
   Size: `.ovl.sm` 400 · default 620 · `.ovl.lg` 980. Open with `.open`.
   ══════════════════════════════════════════════════════════════════════════════════ */
.ovl{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(4,4,8,.72);backdrop-filter:blur(7px);padding:20px}
.ovl.open{display:grid}
.ovl > .box{width:min(620px,100%);max-height:min(86dvh,860px);overflow:auto;scrollbar-width:none;
  background:var(--card);border-radius:20px;position:relative}
.ovl > .box::-webkit-scrollbar{display:none}
.ovl.sm > .box{width:min(400px,100%)}
.ovl.lg > .box{width:min(980px,100%)}
/* one stacking scale, stated once — a picker opens ON TOP of a modal, a toast above both */
.ovl.l2{z-index:130}.ovl.l3{z-index:140}

/* MOBILE = BOTTOM DRAWER. Not a smaller modal: thumb reach is at the bottom of a phone,
   and a centred box with a keyboard open gets pushed off-screen. Rounded top only, so
   the shape itself says "this came up from the edge and can go back down". */
@media(max-width:560px){
  .ovl{place-items:end center;padding:0}
  .ovl > .box{width:100%;max-width:none;max-height:88dvh;border-radius:22px 22px 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    animation:ovup .26s cubic-bezier(.2,.8,.3,1)}
  /* the grab handle — drawn by the primitive so no page has to remember it */
  .ovl > .box::before{content:'';position:sticky;top:0;display:block;width:38px;height:4px;
    border-radius:999px;background:var(--card3);margin:10px auto 4px;z-index:3}
}
@keyframes ovup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.ovl > .box{animation:none}}

/* ── Ask Fano dock (the FG chat dock — same grammar as Folo's, product-labelled) ── */
/* chat pages (body.nonav via {mnav:false}) park the dock ABOVE the composer — the
   promise "chat pages park it via CSS" existed as a comment for weeks with no rule
   behind it, so the dock sat on the compose bar (caught 08-22) */
body.nonav .fanodock{bottom:96px}
body.nonav .fanopanel{bottom:150px}
.fanodock{position:fixed;right:20px;bottom:24px;z-index:70;display:flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;border-radius:999px;background:linear-gradient(135deg,var(--acc),#8b5cf6);
  color:#08080a;cursor:pointer;box-shadow:0 14px 40px rgba(167,139,250,.35);transition:.2s;white-space:nowrap}
.fanodock:hover{transform:translateY(-2px)}
.fanodock svg{width:17px;height:17px;stroke:#08080a;fill:none;stroke-width:2}
.fanodock .t{font-size:13.5px;font-weight:800}
.fanopanel{position:fixed;right:20px;bottom:84px;z-index:71;width:340px;max-width:calc(100vw - 32px);
  max-height:min(520px,70vh);background:var(--card);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.65);
  display:none;flex-direction:column;overflow:hidden}
.fanopanel.open{display:flex}
.fanopanel .hd{display:flex;align-items:center;gap:10px;padding:15px 18px 11px}
.fanopanel .hd .sp2{width:26px;height:26px;border-radius:9px;background:var(--accbg);display:grid;place-items:center}
.fanopanel .hd .sp2 svg{width:14px;height:14px;stroke:var(--acc2);fill:none;stroke-width:2}
.fanopanel .hd .t{font-size:14.5px;font-weight:800}
.fanopanel .msgs{flex:1;overflow-y:auto;padding:6px 14px;display:flex;flex-direction:column;gap:7px;scrollbar-width:none;min-height:120px}
.fanopanel .bub{max-width:85%;padding:9px 13px;border-radius:15px;font-size:13px;line-height:1.45;background:var(--card2);
  border-bottom-left-radius:4px;align-self:flex-start}
.fanopanel .bub.me{background:var(--acc);color:#08080a;border-bottom-left-radius:15px;border-bottom-right-radius:4px;align-self:flex-end}
.fanopanel .sugg{display:flex;gap:6px;flex-wrap:wrap;padding:4px 14px 8px}
.fanopanel .sugg .pill{font-size:11.5px;padding:7px 11px;background:var(--accbg);color:var(--acc2)}
.fanopanel .cmp{display:flex;align-items:center;gap:9px;margin:6px 12px 12px;padding:6px 6px 6px 14px;
  border-radius:999px;background:var(--card2)}
.fanopanel .cmp input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:13px;min-width:0}
.fanopanel .cmp input::placeholder{color:var(--faint)}
.fanopanel .cmp .snd{width:32px;height:32px;border-radius:50%;background:var(--acc);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.fanopanel .cmp .snd svg{width:14px;height:14px;stroke:#08080a;fill:none;stroke-width:2.2}

/* ── mini-profile phone frame (the TG mini-app surface) ── */
.miniphone{width:100%;max-width:340px;background:var(--bg);border-radius:26px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);margin:0 auto}
.miniphone .cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.miniphone .cover img{width:100%;height:100%;object-fit:cover}
.miniphone .avwrap{display:flex;justify-content:center;margin-top:-38px;position:relative;z-index:2}
.miniphone .avwrap img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid var(--bg)}
.miniphone .idb{text-align:center;padding:10px 18px 0}
.miniphone .idb .n{font-size:17px;font-weight:900;display:inline-flex;align-items:center;gap:7px}
.miniphone .idb .badge{font-size:8px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px;
  background:linear-gradient(135deg,#fbbf24,#d97706);color:#3b2503}
.miniphone .idb .h{font-size:12px;color:var(--faint);margin-top:3px}
.miniphone .idb .bio{font-size:12.5px;color:var(--dim);line-height:1.55;margin-top:9px}
.miniphone .statstrip{display:flex;justify-content:space-around;margin:14px 14px 0;background:var(--card);
  border-radius:14px;padding:12px 8px}
.miniphone .statstrip div{text-align:center}
.miniphone .statstrip b{display:block;font-size:16px;font-weight:900}
.miniphone .statstrip span{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.miniphone .tipcard{margin:12px 14px 0;background:var(--card);border-radius:14px;padding:14px}
.miniphone .tipcard .t{font-size:13px;font-weight:800}
.miniphone .tipcard .s{font-size:11px;color:var(--faint);margin-top:2px;margin-bottom:10px}
.miniphone .tips{display:flex;gap:6px;flex-wrap:wrap}
.miniphone .tips span{padding:8px 12px;border-radius:999px;background:var(--card2);font-size:12px;font-weight:800;cursor:pointer;transition:.15s}
.miniphone .tips span:hover,.miniphone .tips span.on{background:var(--acc);color:#08080a}

/* ── mobile: FLOATING navs, same grammar as Folo (rule 15a) ── */
.mnav{display:none;position:fixed;left:0;right:0;z-index:68;
  bottom:calc(14px + env(safe-area-inset-bottom));
  transition:transform .3s cubic-bezier(.3,.8,.3,1),opacity .3s}
.mnav.hide{transform:translateY(calc(100% + 22px));opacity:0}
.mnav .in{display:flex;justify-content:center;gap:11px}
.mnav a{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:var(--dim);background:rgba(16,16,22,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);transition:.2s}
.mnav a.on{color:#08080a;background:var(--acc)}
.mnav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mnav a .b{position:absolute;top:5px;right:7px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--acc);color:#08080a;font-size:9px;font-weight:800;display:grid;place-items:center}
.mnav a.on .b{background:#08080a;color:var(--acc2)}
.mnav a.mcreate{background:var(--acc);color:#08080a;width:58px;height:58px;margin-top:-3px;
  box-shadow:0 14px 38px rgba(167,139,250,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.mnav a.me{padding:0;overflow:hidden}
.mnav a.me img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mtop{display:none;position:fixed;left:14px;right:14px;top:calc(10px + env(safe-area-inset-top));z-index:68;
  align-items:center;justify-content:space-between;pointer-events:none;
  transition:transform .3s cubic-bezier(.3,.8,.3,1),opacity .3s}
.mtop.hide{transform:translateY(calc(-100% - 18px));opacity:0}
.mtop a{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;
  background:rgba(16,16,22,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-radius:999px;box-shadow:0 12px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.mtop img.logo{width:24px;height:24px;object-fit:contain;display:block}
.mtop img.me{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block}
@media(max-width:820px){
  .mnav{display:block}
  .mtop{display:flex}
  .shell,.shell.withcp,body.navopen .shell,body.navopen .shell.withcp{grid-template-columns:1fr}
  .rail,.cp,.navtoggle,.pinbtn{display:none}
  .main{padding:calc(64px + env(safe-area-inset-top)) 15px calc(120px + env(safe-area-inset-bottom))}
  body.nonav .main{padding-top:16px;padding-bottom:110px}
  .card,.stat{padding:18px}
  .sec{margin:26px 0 12px}
  .fanodock{bottom:calc(96px + env(safe-area-inset-bottom));right:16px;padding:10px 14px 10px 12px}
  .fanodock .t{display:none}
  .chatwrap{grid-template-columns:minmax(0,1fr);height:auto}
}

/* reveals */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .65s cubic-bezier(.2,.75,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none}}

/* small print — micro ⓘ corner glyph, same grammar as Folo */
.spbtn{position:fixed;right:3px;bottom:3px;z-index:66;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:rgba(16,16,22,.7);backdrop-filter:blur(10px);
  color:var(--faint);font-size:11px;font-weight:800;cursor:pointer;opacity:.45;transition:.2s}
.spbtn:hover{opacity:1;color:var(--dim)}
.spmenu{position:fixed;right:14px;bottom:46px;z-index:82;width:225px;background:var(--card2);
  border-radius:16px;padding:9px;box-shadow:0 18px 50px rgba(0,0,0,.6);display:none}
.spmenu.open{display:block}
.spmenu a{display:block;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:650;color:var(--dim);transition:.14s}
.spmenu a:hover{background:var(--card3);color:var(--txt)}
.spmenu .cop{font-size:10.5px;color:var(--faint);padding:9px 12px 4px}
@media(max-width:820px){.spbtn{bottom:calc(10px + env(safe-area-inset-bottom))}
  .spmenu{bottom:calc(46px + env(safe-area-inset-bottom))}}

/* dev state switch (concept chrome, not product UI) */
.devbar{position:fixed;z-index:9999;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;
  gap:4px;padding:6px;background:rgba(13,13,18,.88);backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;box-shadow:0 14px 46px rgba(0,0,0,.6);
  font-size:12.5px;font-weight:600}
.devbar .tag{padding:0 10px;font-size:9.5px;font-weight:800;letter-spacing:.13em;color:var(--faint)}
.devbar button{padding:9px 15px;border-radius:999px;color:var(--dim);white-space:nowrap;transition:.15s}
.devbar button:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.devbar button.on{background:var(--acc);color:#08080a}
.devbar a.hubl{padding:9px 15px;border-radius:999px;color:var(--dim);white-space:nowrap;transition:.15s;font-weight:600}
.devbar a.hubl:hover{color:var(--txt);background:rgba(255,255,255,.06)}
body.nonav .devbar.mini{left:auto;right:20px;top:auto;bottom:20px;transform:none}
/* the devbar is CONCEPT CHROME, but it is `position:fixed` — a fixed child that is
   wider than the viewport still expands scrollWidth, so at 375 it was the single
   biggest overflow source across the whole pack. Clamp + scroll it (V3 375-pass fix). */
.devbar{max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none}
.devbar::-webkit-scrollbar{display:none}
@media(max-width:820px){.devbar{bottom:96px}body.nonav .devbar.mini{bottom:16px;right:16px}}

/* surface states (creator / agency / chatter) — devbar stamps body[data-surface];
   .ag-only shows only for agency, .ch-only only for chatter, .cr-only only for creator,
   .ag-hide hides for agency, .ch-hide hides for chatter */
body[data-surface="creator"] .ag-only,body[data-surface="creator"] .ch-only,
body[data-surface="agency"] .cr-only,body[data-surface="agency"] .ch-only,body[data-surface="agency"] .ag-hide,
body[data-surface="chatter"] .cr-only,body[data-surface="chatter"] .ag-only,body[data-surface="chatter"] .ch-hide{display:none!important}
/* .team-only = agency AND chatter (the creator-roster banner etc.) */
body[data-surface="creator"] .team-only{display:none!important}
/* creator ROSTER banner (v2.2 — live parity img: avatar chips w/ unread counts + add) */
.roster .pill{padding:6px 13px 6px 6px;gap:8px}
.roster .pill img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.roster .pill .u{min-width:16px;text-align:center;font-size:10px;font-weight:700;font-family:var(--mono);
  background:var(--card3);color:var(--txt);border-radius:999px;padding:1px 5px}
.roster .pill.on .u{background:#08080a;color:var(--acc2)}

/* ── keyboard focus (Emma-2 finding 2026-08-11, bus §: ":focus appears ZERO times") ──
   Mouse clicks stay clean; TAB gets a visible ring. A pack nobody can tab through is
   a picture of a product, not a product. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ══ P1 SHELL (2026-08-22) — grouped rail · global top bar · account-menu adds ═══════
   Injected by fg-shared.js; no page markup involved. Everything themes off tokens so
   light/dark/theme-swatch come free. */

/* — rail groups: parent row + collapsible sub-list (live's Chat ▾ …) — */
.nlwrap{display:flex;flex-direction:column}
.nl .chev{display:none;width:16px;height:16px;border-radius:6px;flex-shrink:0;opacity:.55;transition:.15s}
.nl .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s}
body.navopen .nl .chev{display:grid;place-items:center;margin-left:auto}
body.navopen .nl .cntb~.chev,body.navopen .nl .newb~.chev{margin-left:8px}
.nl .chev:hover{opacity:1;background:var(--card3)}
.nlwrap.exp .chev svg{transform:rotate(90deg)}
.nlsub{display:none}
body.navopen .nlwrap.exp .nlsub{display:flex;flex-direction:column;gap:1px;padding:2px 0 5px 46px}
.ns{font-size:13px;font-weight:640;color:var(--faint);padding:6px 10px;border-radius:9px;white-space:nowrap}
.ns:hover{background:var(--card);color:var(--txt)}
.ns.on{color:var(--acc2)}
.nl .newb{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc2);
  background:var(--accbg);border-radius:6px;opacity:0;width:0;overflow:hidden;transition:opacity .18s;flex-shrink:0}
body.navopen .nl .newb{opacity:1;width:auto;padding:2px 5px;margin-left:auto}

/* — global top bar: search · CREATORS switcher · schedule chip · + · credits — */
/* 👤 08-22: the bar sits ON THE LOGO LINE — rail logo (16px down) · this bar · the
   co-pilot heading are one row, not three heights. body.hasgtop trims the page's own
   top padding so the alignment is structural, not per-page luck. */
/* DESKTOP ONLY — unscoped this rule beat the ≤820 padding (64px for .mtop) and the
   floating mobile top sat on the H1 (👤 caught it: "on mobile your cutting off
   welcome back"). The gtop doesn't even render under 821px. */
@media(min-width:821px){
  body.hasgtop .main{padding-top:16px}
  body.hasgtop .cp{padding-top:18px}
}
.gtop{position:sticky;top:12px;z-index:40;display:flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:8px;border-radius:17px;background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 10px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}
body.light .gtop{background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.gsrch{flex:1;max-width:460px;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;
  background:var(--card);cursor:text}
.gsrch svg{width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:2;flex-shrink:0}
.gsrch input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);font:inherit;font-size:13.5px}
.gsrch input::placeholder{color:var(--faint)}
.gtop .qcbtn{position:relative;width:34px;height:34px;border-radius:11px;background:var(--acc);color:#08080a;
  display:grid;place-items:center;cursor:pointer;margin-left:auto;flex-shrink:0;transition:.15s}
.gtop .qcbtn:hover{filter:brightness(1.08)}
.gtop .qcbtn>svg{width:16px;height:16px;stroke:#08080a;fill:none;stroke-width:2.4;stroke-linecap:round}
.qcpop,.crswpop{position:absolute;top:calc(100% + 10px);right:0;z-index:82;min-width:200px;display:none;
  background:var(--card2);border-radius:15px;padding:7px;box-shadow:0 20px 60px rgba(0,0,0,.55);cursor:default}
body.light .qcpop,body.light .crswpop{box-shadow:0 18px 50px rgba(0,0,0,.16)}
.qcpop.open,.crswpop.open{display:block}
.qcpop a,.crswpop a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  font-size:13.5px;font-weight:650;color:var(--dim);white-space:nowrap;cursor:pointer}
.qcpop a:hover,.crswpop a:hover{background:var(--card3);color:var(--txt)}
.qcpop a svg,.crswpop a svg{width:16px;height:16px;stroke:var(--acc2);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.crswpop a img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.crswpop a.on{color:var(--acc2)}
.gtop .credch{display:inline-flex;align-items:center;gap:2px;padding:8px 13px;border-radius:11px;
  background:var(--card);font-size:13px;font-weight:750;color:var(--acc2);flex-shrink:0}
.gtop .credch:hover{background:var(--card3)}
.gtop .crsw{position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:11px;
  background:var(--card);cursor:pointer;flex-shrink:0;font-size:13px}
.gtop .crsw:hover{background:var(--card3)}
.gtop .crsw>svg{width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:1.9;flex-shrink:0}
.gtop .crsw .lb{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.gtop .crsw b{font-weight:750}
.gtop .crsw .cv{width:13px;height:13px;stroke:var(--faint);stroke-width:2.2}
.gtop .nosch{padding:8px 12px;border-radius:11px;font-size:12px;font-weight:750;color:var(--warn);
  background:rgba(251,191,36,.11);flex-shrink:0;white-space:nowrap}
@media(max-width:820px){.gtop{display:none}}

/* — P3b · MANAGING context bar (act-as-creator, plan A11) — injected above the top
   bar when ?managing=<slug> is present. Amber-edged on purpose: acting AS someone
   else must never look like an ordinary page state (ghost-mode lesson from live). — */
.mgbar{position:sticky;top:0;z-index:41;display:flex;align-items:center;gap:9px;margin:0 0 10px;
  padding:9px 13px;border-radius:14px;background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.28);font-size:13px}
.mgbar img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.mgbar .lb{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--warn)}
.mgbar b{font-weight:800}
.mgbar .h{color:var(--faint);font-size:12px}
.mgbar .deal{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--card);font-size:11.5px;font-weight:700;color:var(--dim);white-space:nowrap}
.mgbar .deal .demo{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--warn);
  background:rgba(251,191,36,.13);border-radius:5px;padding:1px 4px}
.mgbar .aud{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  border:1px dashed var(--faint);border-radius:7px;padding:2px 7px;opacity:.75}
.mgbar .x{font-size:12px;font-weight:800;color:var(--warn);padding:5px 10px;border-radius:9px;white-space:nowrap}
.mgbar .x:hover{background:rgba(251,191,36,.13)}
body.managing .gtop{top:56px}
@media(max-width:820px){.mgbar{position:static;flex-wrap:wrap}.mgbar .deal{margin-left:0}}
/* managing-only blocks on reused pages: visible only inside the managing context */
.mg-only{display:none}
body.managing .mg-only{display:revert}

/* — CHOOSE MEDIA picker — ONE component, every mount (rule 16). Extracted from
   publish.html 2026-08-22 (it was founder-reviewed there; publish stays mount #1,
   conversations/create/templates/storefront mount the same overlay). Shell comes
   from .ovl; this is only what is INSIDE the box. — */
.pick .box{padding:0;display:flex;flex-direction:column}
.pkhd{display:flex;align-items:center;gap:12px;padding:20px 22px 14px}
.pkhd .t{font-size:17px;font-weight:800;letter-spacing:-.02em;flex:1}
.pkhd .x{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--faint);
  cursor:pointer;flex-shrink:0}
.pkhd .x:hover{background:var(--card3);color:var(--txt)}
.toggle.sm{width:30px;height:17px;margin-left:7px}
.toggle.sm::after{width:13px;height:13px}
.toggle.sm.on::after{left:14px;transform:none} /* base .toggle.on::after's left:19px still applies here; 30 − 3 pad − 13 knob = 14 */
.pkbar{margin:0 22px 12px}
.pksel{background:var(--card2);border:none;outline:none;border-radius:999px;padding:9px 13px;
  color:var(--dim);font-size:12.5px;font-weight:700;cursor:pointer}
.pkwarn{margin:0 22px 12px;padding:11px 13px;border-radius:11px;font-size:12px;line-height:1.5;
  background:rgba(251,191,36,.11);color:var(--warn)}
.pkwarn b{font-weight:800}
.pkgrid{flex:1;overflow:auto;scrollbar-width:none;padding:0 22px 4px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;align-content:start}
.pkgrid::-webkit-scrollbar{display:none}
.pkit{position:relative;border-radius:14px;overflow:hidden;background:var(--card2);cursor:pointer;
  aspect-ratio:3/4}
.pkit img{width:100%;height:100%;object-fit:cover;display:block}
.pkit .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;font-size:11.5px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(4,4,7,.88));white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* tick INSIDE the square (rule 8) — same selection grammar as the vault grid */
.pkit .sel{position:absolute;left:9px;top:9px;width:21px;height:21px;border-radius:7px;z-index:2;
  background:rgba(8,8,12,.62);backdrop-filter:blur(4px);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5)}
.pkit .sel svg{width:12px;height:12px;stroke:#08080a;fill:none;stroke-width:3;opacity:0}
.pkit.on .sel{background:var(--acc);box-shadow:none}
.pkit.on .sel svg{opacity:1}
.pkit.on{box-shadow:inset 0 0 0 2.5px var(--acc)}
.pkit .nsfw{position:absolute;inset:0;backdrop-filter:blur(22px);background:rgba(8,8,12,.4);z-index:1}
/* UNAVAILABLE — dimmed WITH ITS REASON, never hidden */
.pkit.na{cursor:not-allowed}
.pkit.na img{opacity:.28}
.pkit.na .why{position:absolute;left:8px;right:8px;top:36px;z-index:3;font-size:10px;font-weight:750;
  line-height:1.35;color:var(--warn);background:rgba(4,4,7,.72);border-radius:7px;padding:5px 7px}
/* I3 (Infloww check): ALREADY SENT to this fan — the anti-double-send answer */
.pkit .sentb{position:absolute;right:8px;top:8px;z-index:2;font-size:8px;font-weight:800;
  letter-spacing:.08em;color:var(--warn);background:rgba(4,4,7,.78);border-radius:6px;padding:3px 6px}
.pkft{display:flex;align-items:center;gap:9px;padding:14px 22px;border-top:1px solid var(--card3)}
.pkft .c{flex:1;font-size:12.5px;color:var(--faint);font-weight:700}
@media(max-width:560px){
  .pkhd,.pkbar,.pkgrid,.pkft{padding-left:16px;padding-right:16px}
  .pkbar,.pkwarn{margin-left:16px;margin-right:16px}
  .pkgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}

/* — P8 SHIMMER primitive (plan §6). A page's skeleton MIRRORS ITS REAL GRID —
   never a spinner, never a generic block pile: stat row → 4 .shim.tile, list →
   .shim.row with avatar+lines, calendar → bar + columns. Shown behind ?loading=1
   (FG.loading() reads the flag); a build swaps the flag for real load state. — */
.shim{position:relative;overflow:hidden;background:var(--card2);border-radius:12px}
.shim::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.shim.line{height:13px;border-radius:7px}
.shim.line.w40{width:40%}.shim.line.w60{width:60%}.shim.line.w80{width:80%}
.shim.ava{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.shim.tile{height:92px;border-radius:15px}
.shim.block{height:180px;border-radius:var(--r)}
.shimrow{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:15px;padding:14px 18px}
.shimrow .tx{flex:1;display:flex;flex-direction:column;gap:8px}
/* reduced motion: static wash, no sweep — the promise (this shape is loading) holds
   without the movement */
@media(prefers-reduced-motion:reduce){.shim::after{animation:none;opacity:0}}
/* while loading, the page's real content hides and its skeleton shows.
   ⚠️ MEASURED 08-22: pages put their skeleton LAYOUT as an inline style on the
   [data-skel] element (`style="display:grid;…"`), and inline display BEATS a bare
   stylesheet `display:none` — eleven skeletons rendered permanently. So hiding is
   !important and scoped to the non-loading state; when loading, the element's own
   display (inline or default) provides the layout. And on mobile the wrapper is
   forced to stack — fixed px skeleton columns (1fr 320px) overflow a 375 screen. */
body.loading [data-real]{display:none!important}
body:not(.loading) [data-skel]{display:none!important}
@media(max-width:820px){body.loading [data-skel]{display:block!important}}

/* — account menu: Notifications dot · What's new tag · Intl proof line — */
.acctmenu .ndot{margin-left:auto;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--acc);color:#08080a;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.acctmenu .wnew{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.1em;color:var(--acc2);
  background:var(--accbg);border-radius:6px;padding:2px 6px}
.acctmenu .lcdemo{padding:7px 12px 4px;font-size:11.5px;font-weight:650;color:var(--faint);
  font-variant-numeric:tabular-nums}

/* EMBED MODE (👤 2026-08-29) — pages framed inside the marketing phone hide the
   concept surface bar and every scrollbar (set by fg-shared.js self-detection) */
.fg-embed .devbar{display:none!important}
.fg-embed *{scrollbar-width:none!important}
.fg-embed *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

/* ══════════════════════════════════════════════════════════════════
   FENN DOORS (2026-08-29) — FG skin of FENN-INTERACTION-CONTRACT v0.2
   (design-program/briefs/FENN-INTERACTION-CONTRACT-v0.1.md; the file
   carries v0.2 inside). Injected by fg-shared.js fennDoors() on every
   non-embed app page: rail "✦ Fenn" · dock pill → V2 panel (.fgfpanel)
   · credits meter + upgrade popover · the thread grammar shared by V2
   and fenn.html (V3). Class names are fn-/fgf-prefixed on purpose:
   pricing.html owns .fchips/[data-fmsgs] and channels.html owns
   [data-fin], so the Folo names would collide here.
   🔴 NO BOXED PANELS in the thread (§4): a reply is avatar + flowing
   text + bullets + action chips. 💷 Zero figures in the meter (§6).
   ══════════════════════════════════════════════════════════════════ */
.nl.nlfenn svg{stroke:var(--acc2)}
/* credits meter — BAR placeholder, DEMO-flagged, zero digits (§6) */
.cmeter{display:inline-flex;align-items:center;gap:3px;padding:5px 10px;border-radius:999px;
  background:var(--card);cursor:pointer;transition:.15s}
.cmeter:hover{background:var(--card3)}
.cmeter i{width:4px;height:11px;border-radius:2px;background:var(--acc)}
.cmeter i.e{background:rgba(255,255,255,.16)}
body.light .cmeter i.e{background:rgba(0,0,0,.14)}
.cmeter em{font-style:normal;font-size:10.5px;font-weight:750;color:var(--dim);margin-left:6px}
.fdm{font-size:8.5px;font-weight:800;letter-spacing:.14em;color:var(--faint)}
/* the meter is also the UPGRADE DOOR (§6): one line + ONE context pill, zero figures */
.fcpop{position:fixed;right:20px;bottom:96px;z-index:120;width:272px;background:var(--card);
  border-radius:var(--r);padding:16px 17px;box-shadow:0 24px 70px rgba(0,0,0,.55);display:none}
.fcpop.open{display:block}
.fcpop .l{font-size:12.5px;line-height:1.6;color:var(--dim)}
.fcpop .row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.fcpop .pill{font-size:12px;padding:8px 14px;background:var(--accbg);color:var(--acc2)}
@media(max-width:820px){.fcpop{right:12px;bottom:calc(170px + env(safe-area-inset-bottom));
  width:calc(100vw - 24px);max-width:272px}}
/* V2 · the docked thread panel the Fenn pill opens (same slot the old scripted pop held) */
.fgfpanel{position:fixed;right:20px;bottom:84px;z-index:71;width:352px;max-width:calc(100vw - 32px);
  height:min(480px,calc(100svh - 190px));background:var(--card);border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden}
.fgfpanel.open{display:flex}
body.nonav .fgfpanel{bottom:150px}
.fgfpanel .hd{display:flex;align-items:center;gap:8px;padding:14px 15px 9px}
.fgfpanel .hd .sp{color:var(--acc2);font-size:14px;line-height:1}
.fgfpanel .hd .t{font-size:14.5px;font-weight:800}
.fgfpanel .hd a{margin-left:auto;font-size:12px;font-weight:750;color:var(--acc2);cursor:pointer;white-space:nowrap}
.fgfpanel .hd .x{cursor:pointer;color:var(--faint);font-size:15px;line-height:1;padding:2px 2px 2px 4px}
@media(max-width:820px){.fgfpanel{right:12px;bottom:calc(168px + env(safe-area-inset-bottom));
  height:min(430px,calc(100svh - 250px))}}
/* — the thread grammar, ONE markup for V2 and V3 (fenn.html renders the same nodes) — */
.fnthread{flex:1;overflow-y:auto;padding:4px 15px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.fnthread::-webkit-scrollbar{display:none}
.fnumsg{align-self:flex-end;background:var(--card2);border-radius:15px 15px 4px 15px;padding:10px 14px;
  font-size:13.5px;line-height:1.5;max-width:84%}
.fnmsg{display:flex;gap:11px;max-width:680px}
.fnico{width:25px;height:25px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:12px;
  background:linear-gradient(135deg,var(--acc2),var(--acc));color:#08080a;margin-top:2px}
.fnbody{font-size:13.5px;line-height:1.65;color:var(--txt);min-width:0}
.fnbody p{margin:2px 0 6px}
.fnbody ul{margin:2px 0 8px;padding-left:18px;list-style:disc}
.fnbody li{margin:3px 0;color:var(--dim)}
.fnbody li b{color:var(--good);font:600 12.5px var(--mono)}  /* pulse2 money voice */
.fnbody .fncl{color:var(--txt)}
.fnchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.fnchips span{padding:8px 14px;border-radius:999px;background:var(--card2);font-size:12px;font-weight:750;
  cursor:pointer;transition:.15s}
.fnchips span.pri{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#08080a}
.fnchips span:not(.pri):hover{background:var(--card3)}
.fncomp{display:flex;gap:8px;padding:11px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.fncomp input{flex:1;background:var(--card2);border:0;outline:0;border-radius:999px;padding:12px 17px;
  color:var(--txt);font:inherit;font-size:13.5px;min-width:0}
.fncomp input::placeholder{color:var(--faint)}
.fncomp .snd{width:42px;height:42px;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,var(--acc2),var(--acc));display:grid;place-items:center}
.fncomp .snd svg{width:16px;height:16px;stroke:#08080a;fill:none;stroke-width:2.2;stroke-linejoin:round}
/* tiny toast for demo chip actions (nothing executes without the primary chip, §4) */
.fgtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;background:var(--card3);
  color:var(--txt);font-size:12.5px;font-weight:650;border-radius:999px;padding:10px 18px;opacity:0;
  pointer-events:none;transition:.22s;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.fgtoast.on{opacity:1;transform:translate(-50%,0)}
/* reduced motion: the doors keep their promises without movement */
@media(prefers-reduced-motion:reduce){
  .fgtoast{transition:opacity .15s;transform:translate(-50%,0)}
  .fanodock:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   FOUNDER ROUND 2026-08-29 — additive block (rule: never restructure
   the blocks above). Four asks: rail Create + Fenn-beside-Chat · the
   credit wallet drawer (V2 parity) · dock purpose doors + Emily ·
   report export menu (insights/chatters).
   ══════════════════════════════════════════════════════════════════ */

/* — rail bottom stack: [+ Create] → [account block] (live parity). Full-width
   violet pill when the rail is open; icon square when collapsed — same collapse
   grammar as .nl (opacity/width on .t). — */
.ncreate{display:flex;align-items:center;justify-content:center;gap:0;min-height:40px;margin:8px 0;
  border-radius:12px;background:var(--acc);color:#08080a;font-weight:800;font-size:13.5px;
  cursor:pointer;transition:.15s;flex-shrink:0}
.ncreate:hover{filter:brightness(1.07)}
.ncreate svg{width:17px;height:17px;stroke:#08080a;fill:none;stroke-width:2.4;stroke-linecap:round;flex-shrink:0}
.ncreate .t{white-space:nowrap;opacity:0;width:0;overflow:hidden;transition:opacity .18s}
body.navopen .ncreate{gap:8px}
body.navopen .ncreate .t{opacity:1;width:auto}

/* — the credit chip, unscoped: ONE component, N mounts (rule 16) — gtop, fenn.html's
   header, the docked Fenn composer. The .gtop-scoped rules above stay untouched. — */
.credch{display:inline-flex;align-items:center;gap:2px;padding:8px 13px;border-radius:11px;
  background:var(--card);font-size:13px;font-weight:750;color:var(--acc2);flex-shrink:0;
  cursor:pointer;transition:.15s}
.credch:hover{background:var(--card3)}
.credch b{font-family:var(--mono);font-weight:600}
.credch.mini{padding:6px 9px;font-size:11.5px;background:var(--card2);border-radius:999px}

/* — CREDIT WALLET drawer (V2 parity) — a right-panel variant of the .ovl primitive.
   Desktop+: fixed right panel sliding in; ≤560px it inherits .ovl's bottom-sheet
   grammar untouched (thumb reach), which is why these rules are min-width scoped. — */
@media(min-width:561px){
  .ovl.right{place-items:stretch end;padding:0}
  .ovl.right>.box{width:min(380px,92vw);height:100%;max-height:none;border-radius:0;
    animation:wdin .24s cubic-bezier(.2,.8,.3,1)}
}
@keyframes wdin{from{transform:translateX(44px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ovl.right>.box{animation:none}}
.wdr>.box{background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:14px}
.wdhd{display:flex;align-items:center;gap:9px}
.wdhd .t{font-size:16px;font-weight:800;letter-spacing:-.02em;flex:1}
.wdhd .x{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--faint);
  cursor:pointer;transition:.15s;flex-shrink:0}
.wdhd .x:hover{background:var(--card3);color:var(--txt)}
.wdcard{background:var(--accbg);border-radius:15px;padding:18px;display:flex;flex-direction:column;
  gap:9px;align-items:flex-start}
.wdcard .n{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--acc2)}
.wdcard p{font-size:12.5px;line-height:1.6;color:var(--dim)}
.wdcard .wdtop{opacity:.55;cursor:default;pointer-events:none}
.wdrl{padding-top:4px}
.wdempty{font-size:12.5px;color:var(--faint);line-height:1.6}

/* — dock purpose doors (Ask · Tell · Help · Support) — shown while the active
   thread is empty; [hidden] handles the off state — */
.fnpurp{display:flex;gap:6px;flex-wrap:wrap;padding:2px 15px 8px}
.fnpurp span{padding:7px 11px;border-radius:999px;background:var(--accbg);color:var(--acc2);
  font-size:11.5px;font-weight:750;cursor:pointer;transition:.15s}
.fnpurp span:hover{filter:brightness(1.12)}

/* — Emily, the in-thread support handoff (contract §4: never a different widget) — */
.fnico.em{background:linear-gradient(135deg,#f9a8d4,#ec4899);color:#fff;font-weight:800}
.fnrole{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}

/* — dock header expand-box icon (the Open-Fenn promotion control) — */
.fgfpanel .hd .exp{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;color:var(--dim);cursor:pointer;transition:.15s;flex-shrink:0}
.fgfpanel .hd .exp:hover{background:var(--card3);color:var(--txt)}
.fgfpanel .hd .exp svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* — REPORT EXPORT (concept) — download chip + drop menu beside the date pills on
   insights/chatters; mono small-caps rows, pack menu grammar — */
.xport{position:relative;width:36px;height:36px;border-radius:999px;background:var(--card);
  display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0}
.xport:hover{background:var(--card2)}
.xport>svg{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.xport:hover>svg{stroke:var(--txt)}
.xpop{position:absolute;top:calc(100% + 8px);right:0;z-index:82;min-width:214px;display:none;
  background:var(--card2);border-radius:13px;padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  cursor:default;text-align:left}
body.light .xpop{box-shadow:0 18px 50px rgba(0,0,0,.16)}
.xpop.open{display:block}
.xpop a{display:block;padding:10px 12px;border-radius:9px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;cursor:pointer;transition:.14s}
.xpop a:hover{background:var(--card3);color:var(--txt)}

/* ══════════════════════════════════════════════════════════════════
   FENN CONTRACT v0.4 (2026-08-29) — additive block. Two shapes land:
   the rail's ✦ Fenn is an OUTLINED pill directly above + Create
   (Settings left the rail for the avatar menu in the same change,
   §2 skin note), and the V3 workspace's empty state is the FOUR
   DOORS as full-size rows ("What do you need?", §2a). Skins Folo's
   .fennbtn / .fmenu shape in FG grammar; fn-prefixed names per the
   collision note at the top of the FENN DOORS block.
   ══════════════════════════════════════════════════════════════════ */

/* — the rail's ✦ Fenn: rides .ncreate for the full-width pill + collapse grammar,
   outlined identity (violet outline, transparent bg) so the stacked pair never
   reads as one control — Folo's fennbtn-above-Publish, FG skin — */
.nfenn{background:transparent;box-shadow:inset 0 0 0 1.5px var(--acc);color:var(--acc2);
  margin-bottom:0}
.nfenn:hover{background:var(--accbg);filter:none}
.nfenn svg{stroke:var(--acc2)}

/* — the workspace's empty state: the four doors as rows (§2a). Rendered only by
   fenn.html (FG.fenn.menu); the dock keeps its .fnpurp chips — */
.fnmenu{margin:6px 0 auto;width:100%;max-width:620px} /* top-aligned (👤: not the middle) */
.fnmh{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);padding:6px 2px 10px}
.fnmi{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:14px;
  background:var(--card2);cursor:pointer;transition:.15s;margin-bottom:9px}
.fnmi:hover{background:var(--card3)}
.fnmi .g{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:12.5px;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#08080a}
.fnmi .g.em{background:linear-gradient(135deg,#f9a8d4,#ec4899);color:#fff;font-weight:800}
.fnmi .tx{min-width:0}
.fnmi b{display:block;font-size:13.5px;font-weight:750}
.fnmi i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.45}
@media(prefers-reduced-motion:reduce){.nfenn,.fnmi{transition:none}}

/* Emily avatar (👤 2026-08-29): the Higgsfield-video face replaces the pink E,
   in-thread and on the Support door row */
.fnico.em img,.fnmi .g.em img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ══════════════════════════════════════════════════════════════════
   FENN CONTRACT v0.6 (2026-08-29) — FENNCAPS chips + ribbon (§4a).
   ONE 3-state shape, live | soon | off, mirroring the pack's
   ComingSoonRibbon idea in concept form. Rendered ONLY from the
   FENNCAPS registry (fg-shared.js): the co-pilot cards' state chip
   and the DO artifact's ribbon are the same component. Mono
   small-caps, quiet — a chip, never a banner (👤's slick mandate).
   ══════════════════════════════════════════════════════════════════ */
.fncap{display:inline-flex;align-items:center;margin-left:7px;padding:2.5px 7px;border-radius:6px;
  font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  vertical-align:2px;white-space:nowrap;cursor:default}
.fncap[data-state="live"]{color:var(--good);background:rgba(52,211,153,.11)}
.fncap[data-state="soon"]{color:var(--warn);background:rgba(251,191,36,.12)}
.fncap[data-state="off"]{color:var(--faint);background:var(--card2)}
body.light .fncap[data-state="live"]{background:rgba(4,120,87,.1)}
body.light .fncap[data-state="soon"]{background:rgba(180,83,9,.1)}
/* the artifact ribbon row: the chip + one honest line, above the draft */
.fnribrow{display:flex;align-items:center;gap:8px;margin:1px 0 7px;flex-wrap:wrap}
.fnribrow .fncap{margin-left:0;vertical-align:baseline}
.fnribl{font-size:11px;color:var(--faint);line-height:1.4}

/* ══ FENN CONTRACT v0.6a (👤 2026-08-29) — two quiet lines in the thread grammar.
   ① .fnfor: the addressing line a resolved clarifying turn puts on its work card
      ("For Roxy B · @roxyb") — agency/chatter surfaces only, painted by fennMsg.
   ② .fnland: the MAKE routing line ("Lands in AI Create → …") — rendered from the
      FENNROUTE half of the capability registry, so every surface names the same
      destination. Both are one line, tooltip-quiet, never a banner. ══ */
.fnfor{color:var(--acc2)}
.fnland{font-size:11.5px;color:var(--faint);margin-top:9px;line-height:1.45}

/* ══════════════════════════════════════════════════════════════════
   AFFILIATE SURFACE (design brief 2026-08-29) — additive block.
   .af-only shows ONLY on the affiliate surface; .af-hide hides there
   (the rail's ✏ Publish pill, the gtop quick-create, the mobile
   create button: affiliates never compose, brief §3).
   ⚠️ DELIBERATE ASYMMETRY vs the cr/ag/ch rules above: the affiliate
   surface does NOT hide .cr-only. A page with no af state falls back
   to its CREATOR state as-is while the rail swaps to the af set —
   acceptable for concept (build note); only team-surface content and
   .af-hide go. affiliate.html itself is ungated page content.
   ══════════════════════════════════════════════════════════════════ */
body[data-surface="creator"] .af-only,
body[data-surface="agency"] .af-only,
body[data-surface="chatter"] .af-only,
body[data-surface="affiliate"] .ag-only,
body[data-surface="affiliate"] .ch-only,
body[data-surface="affiliate"] .team-only,
body[data-surface="affiliate"] .af-hide{display:none!important}
/* walk round 2 §5.8 (2026-08-29, measured): the gtop's right-alignment rides the
   quick-create's margin-left:auto — and that button is .af-hide on this surface,
   so its auto margin left WITH it and the credit chip drifted 234px off the right
   edge (probed vs dashboard.html). The chip re-takes the auto margin here so it
   sits EXACTLY where every other surface puts it; no other surface is touched. */
body[data-surface="affiliate"] .gtop .credch{margin-left:auto}
/* same probe: the hidden 34px quick-create also set the bar's height, so the chip
   sat 0.5px higher here (24 vs 24.5). Pin the bar to the common height — delta 0. */
body[data-surface="affiliate"] .gtop{min-height:50px}
.fnland a{color:var(--acc2);font-weight:750}

/* ══ GLASS CHROME — every floating bar reads as glass, and full-width sticky bars
   go COMPACT once you scroll ══════════════════════════════════════════════════
   👤 2026-08-30: "with floating bars can we have them semi glass type blur so you
   can see it against bg's, same on all bars that float and with nav so can see
   them" + "floating bars that are full width when scrolling down make more compact
   so its not edged to edge with content".

   Appended as ONE block rather than edited into a dozen rules across the sheet, so
   the change is attributable and revertible in one cut. Later-in-sheet wins at
   equal specificity, which is exactly what we want here.

   🔑 TOKENISED, not per-bar literals. Before this, .mnav/.mtop carried HARD-CODED
   rgba(16,16,22,.85) — a dark pane that stayed dark in LIGHT MODE. Routing every
   bar through color-mix on --panel means the glass follows the theme instead of
   fighting it, and one value change restyles all of them. */
:root{
  --glass:color-mix(in srgb,var(--panel) 62%,transparent);
  --glassline:color-mix(in srgb,var(--txt) 11%,transparent);
  --glassblur:blur(26px) saturate(1.6);
}
.gtop,.rail,.mgbar,.mnav a,.mtop a,.devbar,.selbar{
  -webkit-backdrop-filter:var(--glassblur);backdrop-filter:var(--glassblur)}
.gtop{background:var(--glass);border:1px solid var(--glassline)}
/* the rail is the nav: same glass so it separates from whatever sits behind it */
.rail{background:linear-gradient(180deg,rgba(167,139,250,.06),transparent 42%),var(--glass);
  border-right:1px solid var(--glassline)}
.mnav a,.mtop a{background:var(--glass);border:1px solid var(--glassline)}
.mnav a.on,.mnav a.mcreate{background:var(--acc);border-color:transparent}
.devbar,.selbar{background:var(--glass);border:1px solid var(--glassline)}
.mgbar{background:color-mix(in srgb,var(--warn) 9%,var(--glass))}

/* COMPACT ON SCROLL — a full-width sticky bar stops being edge to edge with the
   content the moment the page moves. body.scrolled is stamped by fg-shared. */
.gtop{transition:width .22s cubic-bezier(.2,.75,.2,1),padding .22s,border-radius .22s,top .22s}
body.scrolled .gtop{width:calc(100% - 30px);margin-left:auto;margin-right:auto;
  padding:5px 6px;border-radius:14px;top:8px;
  box-shadow:0 12px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)}
@media(prefers-reduced-motion:reduce){.gtop{transition:none}}