/* DESIGN3-BUILD-1019 SHARED (S1) — fs-d3-shared.css: the Design 3 shared pieces, KIT v1.3.1 translated (the kit itself is never installed).
   One drawer layer BELOW the 64px top bar (z 1089/1090 < .fslh 1100) · round faces · 8px buttons/chips/search on the periwinkle catalog.
   Prefix fs-/--fs3- only. Dark keys on html.fs-dark. Byte-identical twin: Network /static/fs-d3-shared.css. Spec: areas/shared/SPEC.md §5. */
/* SMALLAREAS2-R4-BUILD-1022 S1: the Design 3 display face. Mission Control hosts /assets/fonts/inter_tight/ but nothing declared it, so every
   "Inter Tight" heading fell back to Inter. Declared ONCE here, the weights the designs load (700, 800). The Network twin never requests it (no rule there names it). */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter_tight/inter_tight-700.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter_tight/inter_tight-800.woff2) format("woff2")}
:root{--fs3-r:8px;--fs3-r-seg:10px;--fs3-r-card:12px;--fs3-topbar-h:64px;--fs3-drawer-w:460px;
 --fs3-primary:#ccccff;--fs3-primary-hover:#c4c4f5;--fs3-on-primary:#1d1e2b;--fs3-create:#615dfa;
 --fs3-page:#f4f5fb;--fs3-surface:#fff;--fs3-surface-2:#f8f9fd;--fs3-sunk:#eff0f7;--fs3-line:#e6e8ef;--fs3-line-2:#dbdbea;
 --fs3-ink:#16171f;--fs3-ink-2:#3f4054;--fs3-ink-3:#62647c;--fs3-violet:#615dfa;--fs3-violet-ink:#4f4ae6;--fs3-violet-soft:#ebeafe;
 --fs3-pink:#e5006f;--fs3-pink-ink:#c4005f;--fs3-pink-soft:#ffddee;--fs3-green:#0d7a43;--fs3-green-dot:#16a34a;--fs3-green-soft:#e3f6ea;
 --fs3-amber:#8a5300;--fs3-amber-soft:#fdf1dc;--fs3-red:#b42318;--fs3-red-soft:#fdebe9;
 --fs3-seg-line:#e3e4ee;--fs3-seg-active:#eae9fd;--fs3-rail-active-ink:#514dfa;
 --fs3-scrim:rgba(22,23,40,.28);--fs3-drawer-shadow:-24px 0 48px -24px rgba(22,23,31,.28);
 --fs3-ease:cubic-bezier(.2,.8,.2,1);--fs3-t:.25s;--fs3-t-drawer:.32s}
html.fs-dark{--fs3-page:#0c1320;--fs3-surface:#1d1e2b;--fs3-surface-2:#191a26;--fs3-sunk:#151622;--fs3-line:#2a2b3e;--fs3-line-2:#33344b;
 --fs3-ink:#f3f3f8;--fs3-ink-2:#c5c6d6;--fs3-ink-3:#9b9db4;--fs3-violet-ink:#9a97ff;--fs3-violet-soft:#1a2041;--fs3-primary-hover:#dcdcff;
 --fs3-pink:#ff2e93;--fs3-pink-ink:#ff5aa9;--fs3-pink-soft:#41203c;--fs3-green:#4ade80;--fs3-green-dot:#22c55e;--fs3-green-soft:#12301f;
 --fs3-amber:#f5b54a;--fs3-amber-soft:#30240f;--fs3-red:#ff8a80;--fs3-red-soft:#3a1a1c;--fs3-seg-line:#2e2f44;--fs3-seg-active:#272847;
 --fs3-rail-active-ink:#a3a0ff;--fs3-scrim:rgba(4,6,14,.55);--fs3-drawer-shadow:-24px 0 64px -16px rgba(0,0,0,.65)}
/* drawer — BELOW the bar in position and stacking */
.fs-scrim{position:fixed;top:var(--fs3-topbar-h);left:0;right:0;bottom:0;background:var(--fs3-scrim);opacity:0;pointer-events:none;transition:opacity var(--fs3-t);z-index:1089}
.fs-drawer{position:fixed;top:var(--fs3-topbar-h);right:0;bottom:0;width:min(var(--fs3-drawer-w),100%);background:var(--fs3-surface);border-left:1px solid var(--fs3-line-2);box-shadow:var(--fs3-drawer-shadow);transform:translateX(102%);visibility:hidden;transition:transform var(--fs3-t-drawer) var(--fs3-ease),visibility 0s var(--fs3-t-drawer);z-index:1090;display:flex;flex-direction:column;color:var(--fs3-ink)}
.fs-drawer.open{transform:none;visibility:visible;transition:transform var(--fs3-t-drawer) var(--fs3-ease)}
.fs-scrim.open{opacity:1;pointer-events:auto}
.fs-drawer.fs-drawer-wide{--fs3-drawer-w:840px}            /* two-pane, only where a design shows it */
.fs-drawer-head{padding:24px 24px 18px;display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--fs3-line)}
.fs-drawer-head h2{font:800 21px/1.2 "Inter Display","Inter",sans-serif;letter-spacing:-.02em;margin:0}
.fs-drawer-head p{font-size:12.5px;color:var(--fs3-ink-3);margin:2px 0 0}
.fs-drawer-xwrap{margin-left:auto;flex:none;width:44px;height:44px;margin-top:-10px;margin-right:-10px;display:grid;place-items:center;background:none;border:0;cursor:pointer;border-radius:var(--fs3-r)}
.fs-drawer-xwrap:focus-visible{outline:2px solid var(--fs3-violet);outline-offset:2px}
/* the hexagon inside the wrapper is <span class="fsd2-x"> — painted by fs_closehex_css() (24x27, --fs-chx tint, X --fs-chx-x); nothing re-declared here */
/* fs_closehex_css() paints the hexagon and sizes an inner <svg>/<i>, but draws no glyph itself: an EMPTY .fsd2-x in a drawer head gets the Lucide x here (mask, so it takes the admin X colour through currentColor) */
.fs-drawer-xwrap .fsd2-x:empty::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat}
.fs-drawer-xwrap .fsd2-x{pointer-events:none;position:static;opacity:1;z-index:auto;transform:none;transition:background .15s}  /* D3-MENUS-FOLLOWUP-1020: fsd2-css (member pop-out) hid this close — re-seated here once for every page */
.fs-drawer-body{flex:1;overflow:auto;padding:22px 24px;overscroll-behavior:contain}
.fs-drawer-sec{padding:18px 0;border-top:1px solid var(--fs3-line)}.fs-drawer-sec:first-child{border-top:0;padding-top:0}
.fs-drawer-foot{padding:16px 24px;border-top:1px solid var(--fs3-line);display:flex;align-items:center;gap:8px;background:var(--fs3-surface)}
html:has(.fs-drawer.open) #fsfb-door{opacity:0;pointer-events:none}        /* the Feedback door steps aside */
html.fs-drawer-lock{overflow:hidden}
/* buttons, chips, search — 8 px, never a pill, never square */
.fs-btn{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:var(--fs3-r);font:600 13px/1 Inter,sans-serif;white-space:nowrap;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s}
.fs-btn:active{transform:translateY(1px)}.fs-btn[disabled]{opacity:.5;pointer-events:none}
.fs-btn-primary{background:var(--fs3-primary);color:var(--fs3-on-primary)}.fs-btn-primary:hover{background:var(--fs3-primary-hover);color:var(--fs3-on-primary)}
.fs-btn-secondary{border-color:var(--fs3-line-2);color:var(--fs3-ink-2);background:var(--fs3-surface)}.fs-btn-secondary:hover{background:var(--fs3-sunk)}
.fs-btn-quiet{color:var(--fs3-violet-ink);padding:0 6px;background:none}.fs-btn-quiet:hover{background:var(--fs3-violet-soft)}
.fs-btn-danger{border-color:color-mix(in srgb,var(--fs3-red) 40%,transparent);color:var(--fs3-red);background:var(--fs3-surface)}
.fs-btn-sm{height:28px;font-size:12.5px;padding:0 10px}.fs-btn-lg{height:40px;font-size:14px;padding:0 16px}
.fs-btn-icon{width:32px;padding:0;justify-content:center}.fs-btn-sm.fs-btn-icon{width:28px}
.fs-btn svg.lucide,.fs-btn i{width:14px;height:14px;flex:none}
.fs-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--fs3-r);font:600 12px/1 Inter,sans-serif;border:1px solid var(--fs3-line-2);color:var(--fs3-ink-2);background:var(--fs3-surface);white-space:nowrap;cursor:pointer}
.fs-chip:hover{background:var(--fs3-sunk)}.fs-chip[aria-pressed="true"]{background:var(--fs3-violet-soft);border-color:transparent;color:var(--fs3-rail-active-ink)}
.fs-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--fs3-r);font:600 11.5px/1 Inter,sans-serif;border:1px solid transparent;white-space:nowrap}
.fs-tag-neutral{border-color:var(--fs3-line-2);color:var(--fs3-ink-2)}.fs-tag-v{color:var(--fs3-violet-ink);border-color:color-mix(in srgb,var(--fs3-violet) 35%,transparent)}
.fs-tag-p{color:var(--fs3-pink-ink);border-color:color-mix(in srgb,var(--fs3-pink) 35%,transparent)}.fs-tag-g{color:var(--fs3-green);background:var(--fs3-green-soft)}
.fs-tag-a{color:var(--fs3-amber);background:var(--fs3-amber-soft)}.fs-tag-r{color:var(--fs3-red);background:var(--fs3-red-soft)}
.fs-search{height:36px;padding:0 12px 0 36px;border:1px solid var(--fs3-line-2);border-radius:var(--fs3-r);background:var(--fs3-surface);color:var(--fs3-ink);font:500 13px Inter,sans-serif;width:100%}
.fs-search:focus{outline:2px solid var(--fs3-violet);outline-offset:1px;border-color:transparent}
.fs-input{height:36px;padding:0 12px;border:1px solid var(--fs3-line-2);border-radius:var(--fs3-r);background:var(--fs3-surface);color:var(--fs3-ink);font:500 13px Inter,sans-serif;width:100%}
/* round face (the default everywhere) */
.fs-av{--s:34px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;background:var(--fs3-violet-soft);color:var(--fs3-violet-ink);font:700 calc(var(--s)*.36)/1 Inter,sans-serif;letter-spacing:-.01em;position:relative;overflow:hidden}
.fs-av img,.fs-av svg.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-av-xs{--s:24px}.fs-av-sm{--s:28px}.fs-av-lg{--s:44px}.fs-av-xl{--s:64px}
.fs-av .st{position:absolute;right:0;bottom:0;width:calc(var(--s)*.3);height:calc(var(--s)*.3);border-radius:50%;background:var(--fs3-green-dot);border:2px solid var(--fs3-surface)}.fs-av .st.off{background:var(--fs3-ink-3)}
.fs-avs{display:inline-flex}.fs-avs .fs-av{margin-left:-8px;border:2px solid var(--fs3-surface)}.fs-avs .fs-av:first-child{margin-left:0}
/* phone 390 */
@media (max-width:640px){.fs-drawer{width:100%;border-left:0}.fs-drawer-head{padding:18px 16px 14px}.fs-drawer-body{padding:18px 16px}.fs-drawer-foot{padding:12px 16px}.fs-drawer-foot .fs-btn{flex:1;justify-content:center;height:40px}.fs-drawer-foot .fs-btn-icon{flex:0 0 40px}}

/* D3-SMALLFIX-1020 S2 — phone Menu button above the header logo (was z 75 under header.fslh z 1100). The button keeps
   its 40px box in the header's left gutter; the logo starts after it. Inside the shell's own 820px phone query. */
@media (max-width:820px){
  html body button.mc-mobham{z-index:1101 !important;top:12px !important;left:10px !important}
  html body:has(button.mc-mobham) header.fslh .fslh-brand{margin-left:40px !important}  /* D3-SMALLFIX-2-1020 F1: only where MC's Menu button exists (not the Network header) */
  html[dir="rtl"] body button.mc-mobham{left:auto !important;right:10px !important}
  html[dir="rtl"] body:has(button.mc-mobham) header.fslh .fslh-brand{margin-left:0 !important;margin-right:40px !important}
}

/* D3-MENUS-FINAL-1020 S13 — stepper numbers (.hex .ini) in dark: the kits' --hex-ink #8683fd reads 5.25:1 on the hex fill
   (#1d1e2b, rendered) but 3.45:1 against the ring (#3a3b55) the Marketing test measured; #a3a0ff (the kit's dark lit ink) clears
   both (≈7.0 on the fill, ≈4.6 on the ring). Set on the number itself, so only the stepper digits move; cur (pink) and done (white)
   keep their own colours. */
html.fs-dark .hex .ini{--hex-ink:#a3a0ff !important}

/* FULLWIDTH-D3-1021 (founder, 21 Oct: "content fluid to ~1440, 1280 unchanged") — ONE width rule for every Design 3 page.
   The kits' --content-max:932px was the 1280 design canvas (64 strip + 230 rail + 28 pad + 932), not a reading measure; every kit
   column is max-width:min(var(--content-max),calc(100vw - 386px)), so at <=1280 the column is 100vw-386 and this changes nothing
   there; above it the column follows the window to the same 64px right margin, up to 1440px. The shell's .vk cap (maxw option,
   1180 default, inline) is lifted to 1440 for Design 3 pages above 1280 only, centred beyond. Reading text keeps its own 75ch
   measure in the kits; drawers (460px) and phone are untouched. Ledger: graphify-out/fixes/FULLWIDTH-D3-1021/LEDGER.md */
:root{--fs-d3-col:min(1440px,calc(100vw - 386px))}
:is(.af3k,.asx3k,.bk3k,.cl3k,.cx3k,.em3k,.hw3k,.in3k,.kn3k,.mk3k,.rt3k,.rv3k,.sk3k,.d3s,.acx-k){--content-max:1440px !important}
@media (min-width:1281px){
html body .page-wrapper>.vk:has(:is(.af3k,.asx3k,.bk3k,.cl3k,.cx3k,.em3k,.hw3k,.in3k,.kn3k,.mk3k,.rt3k,.rv3k,.sk3k,.d3s,.acx-k,.cvd3,.cvd3r,.shg,#cw)){max-width:1440px !important;margin-left:auto !important;margin-right:auto !important}
/* the kits' wide column (.wrap.wide / .d3s-wide, a literal 1100px at (1,11,0)!important) follows the window too; max() keeps it 1100 wherever it was */
#admin-dashboard#admin-dashboard :is(.af3k,.asx3k,.bk3k,.cl3k,.cx3k,.em3k,.hw3k,.in3k,.kn3k,.mk3k,.rt3k,.rv3k,.sk3k,.d3s,.acx-k) :is(.wrap.wide,.d3s-wrap.d3s-wide):not(.rt3k-off *){max-width:max(1100px,min(1440px,calc(100vw - 386px))) !important}
/* page columns that are not kit roots, overridden here instead of in files other work owns (Conversations family, _social_honest.php):
   each keeps its own width wherever it was wider than the shared column (plus its own right padding: .cvd3r 36, .shg 26), so <=1280 is the same layout */
#admin-dashboard .cvd3{max-width:max(932px,var(--fs-d3-col))}
#admin-dashboard .cvd3r{max-width:max(1100px,calc(var(--fs-d3-col) + 36px))}
#admin-dashboard .shg{max-width:max(1080px,calc(var(--fs-d3-col) + 26px))}
}
/* PINK-CTA-1021 — founder 21 Oct: ONE main call-to-action per page in the kit pink; periwinkle stays the secondary filled button.
   A page marks its one main button data-cta="main"; a drawer marks its own main action data-cta="drawer"; a sheet over a drawer data-cta="sheet".
   While a drawer is open, the page's main steps back to periwinkle (never two pink buttons in one view).
   White text on #e5006f = 4.60:1 (AA); the dark kit pink #ff2e93 gives white only 3.46:1, so dark mode keeps #e5006f (the kit's deeper pink).
   The specificity (3 ids) is deliberate: area kits fill .btn-primary at up to (2,3,2) with !important. Create New (#615dfa) never carries the marker. */
:root{--fs3-cta:#e5006f;--fs3-cta-hover:#c4005f;--fs3-on-cta:#fff}
html.fs-dark{--fs3-cta:#e5006f;--fs3-cta-hover:#c4005f;--fs3-on-cta:#fff}
html body :is([data-cta="main"],[data-cta="drawer"],[data-cta="sheet"]):not(#fspk-a):not(#fspk-b):not(#fspk-c){background:var(--fs3-cta)!important;background-image:none!important;color:var(--fs3-on-cta)!important;border-color:var(--fs3-cta)!important;box-shadow:none!important}
html body :is([data-cta="main"],[data-cta="drawer"],[data-cta="sheet"]):not(#fspk-a):not(#fspk-b):not(#fspk-c):is(:hover,:focus-visible){background:var(--fs3-cta-hover)!important;border-color:var(--fs3-cta-hover)!important;color:var(--fs3-on-cta)!important}
html body :is([data-cta="main"],[data-cta="drawer"],[data-cta="sheet"]):not(#fspk-a):not(#fspk-b):not(#fspk-c) :is(svg,i,.ic,b,strong,em){color:inherit!important}
html body :is([data-cta="main"],[data-cta="drawer"],[data-cta="sheet"]):not(#fspk-a):not(#fspk-b):not(#fspk-c):disabled{opacity:.55}
/* a drawer is open (.fs-drawer.open — every D3 drawer; .fsm-scrim.on — the product sheet; dialog[open]): the page's main steps back to periwinkle */
html:has(:is(.fs-drawer.open,.fsm-scrim.on,dialog[open]) [data-cta="drawer"]) body [data-cta="main"]:not(#fspk-a):not(#fspk-b):not(#fspk-c){background:var(--fs3-primary)!important;color:var(--fs3-on-primary)!important;border-color:var(--fs3-primary)!important}
/* a sheet opened OVER a drawer (the contact's call / video sheets): the sheet's main is the one pink; the drawer's and the page's step back */
html:has(:is(.fs-drawer.open,.fsm-scrim.on,dialog[open]) [data-cta="sheet"]) body :is([data-cta="main"],[data-cta="drawer"]):not(#fspk-a):not(#fspk-b):not(#fspk-c){background:var(--fs3-primary)!important;color:var(--fs3-on-primary)!important;border-color:var(--fs3-primary)!important}
/* /PINK-CTA-1021 */