/* GrowFleet instance UI - navy command sidebar over a warm light deck.
   Token-matched to growfleet.ai (light theme values + brand navy/amber/mint). */

/* The `hidden` attribute must ALWAYS hide, even when the element also carries a
   class that sets `display` (e.g. .bulkbar{display:flex}). Without this, a class
   selector out-specifies the UA [hidden] rule and the element leaks into view -
   which is exactly why the bulk-rename bar showed before it was clicked. One
   global guard beats patching every class by hand. */
[hidden] { display: none !important; }

:root {
  --navy: #070b14; --navy2: #0c1220; --navy-line: #1d2739; --navy-line2: #2a3852;
  --navy-text: #e9eef8; --navy-muted: #93a1b8; --navy-dim: #5b6880;
  --bg: #f7f5f0; --card: #ffffff; --card2: #faf8f4;
  --line: #e4dfd4; --line2: #d2ccbe;
  --well: #efece4;   /* sunken tab-pane surface: warm greige ~4% below --bg so white .panel/.kpi/.kcard pop; amber-deep bare text stays 4.74:1 AA - do NOT deepen past this */
  /* Text colours. Per request, the two secondary greys that drove the "faded"
     look - --muted (secondary text) and --dim (labels, meta, chips) - are now
     the SAME near-black as primary text, so labels and secondary copy read bold
     and high-contrast instead of grey. --neutral keeps the old label grey ONLY
     for non-text uses (the "published" status dots), so those stay grey rather
     than turning into black blobs. (dark theme overrides these separately.) */
  --text: #131a2a; --muted: #131a2a; --dim: #131a2a; --neutral: #565f73;
  /* --amber-bright (#ffad33) is THE brand amber - kept for buttons/logo/large.
     --amber and --amber-deep are the small-TEXT accents (links, chip text, labels)
     and were 2.7-3.5:1 on white; darkened just enough to clear WCAG AA 4.5:1 while
     staying clearly amber. (dark theme overrides these separately.) */
  --amber: #e08900; --amber-bright: #ffad33; --amber-deep: #995800;
  --amber-soft: rgba(224, 137, 0, 0.10);
  /* Selected-segment fill: a deep amber kept CONSTANT across light + dark (do NOT
     override in the dark block) so white label text stays AA - white/#995800 = 5.6:1.
     --amber and --amber-deep both brighten in dark, which drops white below 4.5:1. */
  --amber-sel: #995800;
  /* Post Mix selected fill: the approve GREEN (matches the row approve toggle), kept
     CONSTANT across light + dark so white label text stays AA - white/#0e7857 = 5.5:1.
     (--green is exactly this in light but brightens to #2fbd8a in dark, dropping white
     to 2.4:1, so pin the deep value here rather than reuse --green.) */
  --green-sel: #0e7857;
  /* ONE focus ring, reused by every input/textarea/select focus rule so the amber
     focus is identical site-wide: a crisp 1px solid amber (flush outside the 1px
     border = ~2px of continuous solid amber, a genuinely visible WCAG focus area,
     not a faint glow) plus a soft amber halo. */
  --focus-ring: 0 0 0 1px var(--amber), 0 0 0 4px var(--amber-soft);
  /* Corner-radius scale (fixed px, NOT rem - radius must not grow with the A-/A+
     --ui-scale text control). Subtle / more-square: buttons+inputs+pills at 7px,
     cards at 10px, cap surfaces at 12px; true circles stay 50%. */
  --r-1: 3px; --r-2: 5px; --r-3: 7px; --r-4: 10px; --r-5: 12px; --r-pill: var(--r-3);
  /* list-row thumbnail size (medium per Shopify Polaris / NN-G): one source of truth
     shared by the Posts rows (.qthumb) and the Commerce product rows (.cmthumb inline
     in dashboard.html) so they can never drift apart. */
  --thumb-list: 63px;
  --green: #0e7857; --green-soft: rgba(20, 151, 107, 0.10);  /* darkened from #14976b to clear AA as small text on white */
  --red: #d64545; --red-soft: rgba(214, 69, 69, 0.08);
  --scan: #3a63a8; --scan-soft: rgba(58, 99, 168, 0.12);  /* "from a scan" provenance - cool, distinct from amber */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --shadow: 0 4px 18px rgba(19, 26, 42, 0.07);
  --shadow-lg: 0 18px 44px rgba(19, 26, 42, 0.12);
  --ui-scale: 1;   /* reader text-size multiplier, driven by the A-/A+ control */
  /* Type scale. The app had grown ~87 ad-hoc font-sizes; these 8 steps replace
     them (nearest-snap, so most text moved <0.5px). --fs-1 is the micro tier for
     genuine UI chrome (badges, corner labels, dense pills) that must stay small;
     readable text starts at --fs-4/--fs-5. A hard 11px floor was rejected because
     it overflowed the corner badges. All in rem so the A-/A+ control scales them. */
  --fs-1: 0.6rem;    /* 9.6px  - micro: badges, tiny status chips */
  --fs-2: 0.6875rem; /* 11px   - small labels, panel headers */
  --fs-3: 0.78rem;   /* 12.5px - captions, meta */
  --fs-4: 0.875rem;  /* 14px   - secondary text, hints */
  --fs-5: 1rem;      /* 16px   - body */
  --fs-6: 1.19rem;   /* 19px   - leads, sub-headings */
  --fs-7: 1.44rem;   /* 23px   - page titles */
  --fs-8: 1.94rem;   /* 31px   - KPI figures, hero numbers */
  /* Safe areas: the status bar / notch, the home indicator and (landscape) the side
     insets. The page draws edge to edge (viewport-fit=cover), so EVERY top-fixed,
     bottom-fixed and full-height layer pads by these four - never by env() directly
     (app/tests/test_safe_areas.py holds every layer to it). Inside the phone app's own web
     view (its FULL view) the app injects the device's real insets as --gf-native-inset-*
     on <html> (mobile/src/features/fullview/bridge/inject.ts) and they win: Android WebView
     before 140 reports wrong env() values (capawesome.io/blog/capacitor-edge-to-edge-and-
     safe-areas-guide/). In a browser env() is the source (webkit.org/blog/7929/designing-
     websites-for-iphone-x/). All four are 0px on a desktop browser, so desktop never moves. */
  --gf-safe-top: var(--gf-native-inset-top, env(safe-area-inset-top, 0px));
  --gf-safe-right: var(--gf-native-inset-right, env(safe-area-inset-right, 0px));
  --gf-safe-bottom: var(--gf-native-inset-bottom, env(safe-area-inset-bottom, 0px));
  --gf-safe-left: var(--gf-native-inset-left, env(safe-area-inset-left, 0px));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* --ui-scale multiplies the browser's OWN default size (100%), so the A-/A+ control
   respects the user's OS/browser preference and layers on top of it. Every rem on the
   page keys off this one line, so all text - including the top-right toasts - scales. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: calc(100% * var(--ui-scale, 1)); }
/* No sideways scrollbar at any zoom (incl. when the A-/A+ control enlarges the topbar):
   clip horizontal overflow. clip - not hidden - so it never becomes a scroll container
   that would break position:sticky (same trick the mobile block already used). At 100%
   nothing overflows so this is a no-op; wide tables/chip rows have their own inner
   overflow-x:auto scrollers and are unaffected. */
html, body { overflow-x: clip; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); }
.mono { font-family: var(--font-mono); letter-spacing: .1em; }
a { color: var(--amber-deep); text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-1); }

/* ---------- login (navy backdrop, white card - matches the app shell) ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--navy); }
.login-wrap::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(800px 480px at 12% -5%, rgba(255,173,51,.14), transparent 60%),
              radial-gradient(700px 500px at 95% 12%, rgba(62,207,142,.09), transparent 65%); }
.login-card { position: relative; width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-5); padding: 40px 36px; box-shadow: var(--shadow-lg); }
.login-card .lmark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-card .lmark svg { width: 42px; height: 42px; border-radius: var(--r-3); }
.login-card .lmark .wm { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); color: var(--text); }
.login-card .wm b { color: var(--amber-deep); }
.login-sub { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .16em;
  color: var(--dim); margin-bottom: 26px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .14em; color: var(--muted); margin-bottom: 6px; }
.field .pwrap { position: relative; }
.field input { width: 100%; padding: 13px 15px; border-radius: var(--r-3); background: var(--card2);
  border: 1px solid var(--line2); color: var(--text); font-size: var(--fs-5); font-family: var(--font-body); }
.field input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.pwshow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--dim); font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .1em; cursor: pointer; padding: 6px; }
.pwshow:hover { color: var(--text); }
.remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 18px;
  color: var(--muted); font-size: var(--fs-4); }
.remember input { accent-color: var(--amber); width: 16px; height: 16px; }
.login-err { display: flex; gap: 8px; align-items: center; background: var(--red-soft);
  border: 1px solid rgba(214,69,69,.3); color: var(--red); border-radius: var(--r-3);
  padding: 10px 14px; font-size: var(--fs-4); margin-bottom: 16px; }
.login-ok { display: flex; gap: 8px; align-items: center; background: var(--green-soft);
  border: 1px solid rgba(20,151,107,.32); color: var(--green); border-radius: var(--r-3);
  padding: 10px 14px; font-size: var(--fs-4); margin-bottom: 16px; }
.forgot-link { display: block; margin-top: 14px; text-align: center; font-size: var(--fs-3);
  color: var(--amber-deep); text-decoration: none; }
.forgot-link:hover { color: var(--amber); text-decoration: underline; }
.reset-lead { color: var(--neutral); font-size: var(--fs-4); line-height: 1.5; margin: 0 0 18px; }
.login-note { margin-top: 20px; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); text-align: center; }
/* sign-in agreement (clickwrap) + the Terms/Privacy dialog */
.agree { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px;
  color: var(--muted); font-size: var(--fs-3); line-height: 1.45; }
.agree input { accent-color: var(--amber); width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }
/* scope beats the app's generic .linklike (defined later, same specificity) */
.agree .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--amber-deep);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.agree .linklike:hover { color: var(--amber); }
.legal-dlg { width: min(460px, 94vw); border: none; border-radius: var(--r-5); padding: 0; color: var(--text);
  background: var(--card); box-shadow: 0 24px 60px rgba(7,11,20,.4);
  margin: auto; }  /* the app reset zeroes dialog margin, killing modal auto-centering */
.legal-dlg::backdrop { background: rgba(7,11,20,.55); }
.legal-dlg-head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.legal-dlg-head b { font-size: var(--fs-5); }
.legal-x { background: none; border: none; font-size: 16px; line-height: 1; color: var(--dim); cursor: pointer; padding: 4px; }
.legal-x:hover { color: var(--text); }
.legal-dlg-body { padding: 16px 20px; font-size: var(--fs-4); line-height: 1.55; color: var(--muted); }
.legal-dlg-body p { margin: 0 0 12px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legal-links a { color: var(--amber-deep); text-underline-offset: 2px; }
.legal-ver { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.legal-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 11px 20px; border-radius: var(--r-3); font-weight: 600;
  font-size: var(--fs-4); border: 1px solid var(--line2); background: var(--card);
  color: var(--text); cursor: pointer; transition: all .18s ease; white-space: nowrap; }
.btn:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.amber { background: linear-gradient(180deg, var(--amber-bright), #f29718);
  color: #1a1206; border-color: transparent; box-shadow: 0 4px 14px rgba(242,151,24,.3); }
.btn.amber:hover { box-shadow: 0 8px 20px rgba(242,151,24,.38); }
/* Icons on amber-FILLED buttons: the house glyphs carry an amber (#f29718) accent
   stroke that all but vanishes on an amber background (fails WCAG 1.4.11's 3:1 for
   non-text). Force every stroke to the button's dark text colour so the WHOLE glyph
   reads clearly - fixes the copy, check ("I've posted this") and sparkle glyphs. */
.btn.amber .bic svg [stroke] { stroke: #1a1206; }
.btn.wide { width: 100%; text-align: center; padding: 14px; }
.btn.danger { background: #cc3c3c; border-color: transparent; color: #fff; } /* darker red so white text clears AA 4.5:1 */
.btn.danger:hover { box-shadow: 0 6px 16px rgba(214,69,69,.3); }
/* House glyphs carry an amber accent stroke that all but vanishes on the red
   danger fill (same WCAG 1.4.11 issue the amber button fixes). Force the whole
   glyph to the button's white text colour so e.g. the trash icon reads clearly. */
.btn.danger .bic svg [stroke] { stroke: #fff; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ---------- shell ---------- */
/* Sidebar is position:FIXED (not sticky) so the menu ALWAYS stays in view - it can
   never drift off when you scroll the page or open an overlay (Peter). .main is
   offset by the sidebar width; both reset on mobile (<=900 static row, <=760 hidden). */
/* The shell keeps its content off the side insets (a phone in landscape - the app turns);
   the fixed sidebar widens by the left inset so .main's 248px margin still meets its edge. */
.shell { display: block; min-height: 100vh;
  padding-left: var(--gf-safe-left); padding-right: var(--gf-safe-right); }
.side { background: var(--navy); color: var(--navy-text);
  padding: calc(20px + var(--gf-safe-top)) 18px calc(12px + var(--gf-safe-bottom)) calc(18px + var(--gf-safe-left));
  display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; top: 0;
  width: calc(248px + var(--gf-safe-left)); height: 100vh; box-sizing: border-box; overflow: hidden; z-index: 40; }
.brandmark { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.brandmark svg { width: 34px; height: 34px; border-radius: var(--r-3); flex: none; }
/* Brand mark artwork (PNG): same 34px rounded badge as the old inline SVG, on the
   --navy2 tile so the transparent icon reads as a framed mark on the dark sidebar. */
.brandmark img { width: 34px; height: 34px; border-radius: var(--r-3); flex: none;
  background: var(--navy2); object-fit: contain; }
.brandmark b { color: var(--amber-bright); }
/* menu templates: a tab hidden by the account's preset. Kept in the DOM (so search +
   deep-links still reach it), just not shown. Also hides a section with no visible tabs. */
.tabhidden { display: none !important; }
/* white-label (Scale): the customer's own logo / name in place of the GrowFleet mark */
.brandmark .wl-logo { max-height: 34px; width: auto; }
.brandmark .wl-word { font-weight: 700; color: var(--amber-bright); font-size: var(--fs-5); letter-spacing: .2px; }
/* Users & Settings -> Menu + Appearance panes */
.menuprev { margin-top: 2px; }
.usub .wlrow { margin: 0 0 18px; }
.wllogo-prev { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  margin: 6px 0 8px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card2); }
.wllogo-prev img { max-height: 40px; width: auto; }
.wlaccent { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.wlaccent input[type=color] { width: 44px; height: 34px; border: 1px solid var(--line2);
  border-radius: var(--r-1); background: var(--card); cursor: pointer; padding: 2px; }
.wlbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.pill.warn { background: rgba(190, 60, 40, .12); color: #b2331e; }
/* Customise: menu setup cards (responsive; one column on a phone -> no sideways scroll) */
.menucards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mcard { text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card);
  cursor: pointer; font: inherit; transition: border-color .12s, box-shadow .12s, background .12s; }
.mcard:hover { border-color: var(--amber); }
.mcard.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); background: var(--amber-soft); }
.mcard.saving { opacity: .55; pointer-events: none; }
.mcard-h { display: flex; align-items: center; gap: 8px; }
.mcard-h b { font-size: var(--fs-4); color: var(--text); }
.mcard-rec { margin-left: auto; font-size: var(--fs-1); color: var(--amber-deep);
  background: var(--amber-soft); padding: 1px 7px; border-radius: var(--r-pill); letter-spacing: .5px; }
.mcard-tick { color: var(--amber-deep); display: inline-flex; align-items: center; }
.mcard-h .mcard-rec + .mcard-tick { margin-left: 6px; }
.mcard-blurb { color: var(--neutral); font-size: var(--fs-3); }
.mcard-tabs { color: var(--neutral); font-size: var(--fs-2); line-height: 1.4; }
/* Customise: per-item checkbox list (grouped by capability area) */
.menuchecklist { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mchk-group { display: flex; flex-direction: column; gap: 4px; }
.mchk-glabel { font-size: var(--fs-1); letter-spacing: .12em; color: var(--neutral); margin-bottom: 2px; }
.mchk { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-2);
  cursor: pointer; font-size: var(--fs-3); color: var(--text); }
.mchk:hover { background: var(--card2); }
.mchk input { width: 16px; height: 16px; accent-color: var(--amber); flex: 0 0 auto; }
.mchk.locked { color: var(--neutral); cursor: default; }
.mchk-note { margin-left: auto; font-size: var(--fs-1); color: var(--neutral); letter-spacing: .06em; }
/* custom font dropdown: each option previewed in its own typeface (native <option>
   cannot render per-font), current selection shown in-font, click = live preview */
.wlfontpick { position: relative; max-width: 340px; margin: 4px 0 6px; }
.wlfont-btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; border: 1px solid var(--line2); background: var(--card); color: var(--text);
  border-radius: var(--r-2); padding: 9px 12px; cursor: pointer; font-size: var(--fs-5); }
.wlfont-btn:hover { border-color: var(--amber); }
.wlfont-btn svg { flex: 0 0 auto; color: var(--neutral); }
.wlfont-list { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 340px; overflow: auto; background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--r-2); box-shadow: var(--shadow-lg); padding: 4px; }
.wlfont-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; padding: 9px 11px; border-radius: var(--r-1);
  font-size: var(--fs-5); color: var(--text); }
.wlfont-opt:hover, .wlfont-opt.on { background: var(--amber-soft); }
.wlfont-kind { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--neutral); letter-spacing: .08em; }
.tagline { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .22em;
  color: var(--navy-dim); margin: -8px 0 4px 44px; }
.planchip { font-size: var(--fs-1); color: var(--amber-bright); background: rgba(255,173,51,.12);
  border-radius: var(--r-pill); padding: 5px 10px; width: fit-content; }
.slabel { font-size: var(--fs-1); color: var(--navy-dim); margin-bottom: -10px; }
.side select { background: var(--navy2); color: var(--navy-text); border: 1px solid var(--navy-line2);
  border-radius: var(--r-3); padding: 7px 10px; font-family: var(--font-body); font-size: var(--fs-4); }
/* the sidebar select is on navy - its own navy border outranks the global amber
   border-color, and a 10% ring is invisible on dark. Give it the amber focus with the
   brighter amber + a stronger ring so it reads (matches the global look on a dark bg). */
.side select:focus { outline: none; border-color: var(--amber-bright);
  box-shadow: 0 0 0 1px var(--amber-bright), 0 0 0 4px rgba(255, 173, 51, .32); }
/* flex: 0 1 auto (NOT flex:1) - the nav takes only its CONTENT height so SIGN OUT sits
   directly beneath the last item (no stretched-out gap between them); it can still
   shrink + scroll (min-height:0 + overflow-y) when the items genuinely exceed the
   sidebar height. Any leftover space falls at the very bottom, which reads as normal
   unused room rather than a broken mid-sidebar gap. */
#nav { display: flex; flex-direction: column; gap: 1px; margin-top: 0; flex: 0 1 auto;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--navy-line2) transparent; }
#nav::-webkit-scrollbar { width: 6px; }
#nav::-webkit-scrollbar-thumb { background: var(--navy-line2); border-radius: 999px; }
/* Mission Control sizes: .95rem items, 14px side padding, 10px corners. Rows are tighter
   than MC's 11px because this menu has 17-19 items, not 13 - so the whole menu still fits
   a 900px-tall window with no scrolling (Peter's standing rule for this rail) */
#nav button { text-align: left; background: none; border: none; color: var(--navy-muted);
  padding: 6px 14px; border-radius: var(--r-4); font-size: .95rem; cursor: pointer; flex: none;
  font-family: var(--font-body); transition: all .15s; }
#nav button:hover { color: #fff; background: rgba(255,255,255,.05); }
#nav button.on { color: #fff; background: var(--navy-line); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--amber-bright); }
#nav button[draggable="true"] { cursor: grab; }
#nav button.dragging { opacity: .5; cursor: grabbing; background: rgba(255,255,255,.06);
  outline: 1px dashed var(--navy-line2); }
/* nav item = icon + label on one clean row (icons shared with the Quick nav) */
#nav button { display: flex; align-items: center; gap: 10px; }
.navico { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--navy-dim); }
.navico svg { width: 16px; height: 16px; }
.navlbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav button:hover .navico, #nav button.on .navico { color: var(--amber-bright); }
/* collapsible group sections (TikTok-style headers) */
.navsec { display: flex; flex-direction: column; }
.navsec-list { display: flex; flex-direction: column; gap: 1px; }
/* group labels = Mission Control's (OPERATE / BUSINESS): small mono, wide tracking, dim.
   Still a toggle - the chevron only shows on hover/focus or when the group is folded */
/* #nav-scoped: the headers are <button>s, and the id rule `#nav button` (items) would
   otherwise outrank a bare class and blow them up to item size */
#nav .navsec-h { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; color: var(--navy-dim);
  font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  padding: 11px 14px 4px; }
#nav .navsec-h:hover { color: var(--navy-text); background: none; }
.navsec-lbl { flex: 1; }
.navsec-chev { width: 13px; height: 13px; flex: none; opacity: 0; transition: transform .15s, opacity .15s; }
.navsec-h:hover .navsec-chev, .navsec-h:focus-visible .navsec-chev, .navsec.collapsed .navsec-chev { opacity: .6; }
.navsec.collapsed .navsec-chev { transform: rotate(-90deg); }
.navsec.collapsed .navsec-list { display: none; }
.navreset { display: block; margin: 6px 6px 2px; padding: 6px 10px; font-size: var(--fs-3);
  color: var(--navy-dim); font-family: var(--font-mono, monospace); letter-spacing: .02em;
  text-decoration: none; border-radius: var(--r-3); cursor: pointer; opacity: .8; }
.navreset:hover { color: #fff; background: rgba(255,255,255,.05); opacity: 1; }
.logout { font-family: var(--font-body); font-size: var(--fs-4); color: var(--navy-muted); padding: 8px 14px; }
.logout:hover { color: #fff; }
/* sidebar foot: text size (moved from the Quick nav) above SIGN OUT, straight under the
   menu (no stretched gap). .qnfs keeps gfApplyFS updating the % here too. */
.sidefoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px;
  border-top: 1px solid var(--navy-line); }
.sidefoot .logout { padding: 6px 4px 6px 14px; }
.side .sidefs { margin-left: 0; padding: 0 0 0 8px; gap: 2px; order: 2; }
.side .qnfs .qnfs-btn, .side .qnfs .qnfs-val { color: var(--navy-muted); }
.side .qnfs .qnfs-btn:hover, .side .qnfs .qnfs-val:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.side .qnfs:not(.is-def) .qnfs-val { color: var(--amber-bright); }
.side .qnfs-dn svg { width: 15px; height: 15px; }
.side .qnfs-up svg { width: 18px; height: 18px; }
/* the connection-status dot now rides on the sidebar's Connections item */
#nav button .conndot { position: static; margin-left: auto; flex: none; box-shadow: none; }

/* ---------- top bar, Mission Control-style: brand + plan + credits, then round icons ---------- */
.tbacct { display: flex; align-items: center; gap: 8px; flex: none; }
.tbacct select { width: auto; max-width: 190px; min-width: 120px; margin: 0; padding: 7px 30px 7px 11px;
  font-size: var(--fs-4); font-weight: 600; border-radius: var(--r-4); }
.tbacct .planchip { font-size: var(--fs-1); letter-spacing: .12em; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid rgba(224, 137, 0, .3); border-radius: var(--r-4);
  padding: 9px 11px; cursor: pointer; white-space: nowrap; line-height: 1; }
.tbacct .planchip:hover { border-color: var(--amber); }
.tbacct .planchip:focus-visible, .tbacct .sidecred:focus-visible, .tbico:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; }
/* AI credits: a compact two-line chip (label + number, bar under) on the light card */
.tbacct .sidecred { width: 150px; gap: 5px; padding: 6px 11px; background: var(--card2);
  border: 1px solid var(--line2); border-radius: var(--r-4); }
.tbacct .sidecred:hover { border-color: var(--amber); background: var(--card); }
.tbacct .sc-top { gap: 8px; }
.tbacct .sc-lab { color: var(--muted); }
.tbacct .sc-top b { font-family: var(--font-body); font-size: var(--fs-3); letter-spacing: 0; color: var(--text); }
.tbacct .sidecred .credbar { height: 4px; background: var(--line); }
.tbacct .sidecred .sc-warn { display: none; }
.tbacct .sidecred.is-low { border-color: var(--amber); }
.tbacct .sidecred.is-out { border-color: var(--red); }
.tbicons { display: flex; align-items: center; gap: 6px; flex: none; }
.tbico { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card);
  color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color .15s, color .15s; }
.tbico:hover { border-color: var(--amber); }
.tbico svg { width: 18px; height: 18px; }
.tbico > span { display: inline-flex; }
.tbtips .ic-tipoff, body.gf-notips .tbtips .ic-tipon { display: none; }
body.gf-notips .tbtips .ic-tipoff { display: inline-flex; }
/* the Quick nav megamenu stays for Ctrl/Cmd+K and "/" - only its button is gone */
.topnav-kbd .tnd-btn { display: none; }
.topnav-kbd { margin: 0; width: 0; }
.topnav-kbd .tnd-mega { width: 0; height: 36px; }   /* the menu drops from here, under the header row */
/* the brand switcher shows the brand, so the title's brand tag is only needed on a phone */
@media (min-width: 761px) { .topbar .brandtag { display: none; } }
/* narrower desktops: keep the title readable - who-am-I goes first, then the credit label */
@media (max-width: 1320px) { .topbar .whoami { display: none; } }
@media (max-width: 1120px) {
  .tbacct .sc-lab { display: none; }
  .tbacct .sidecred { width: 96px; }
  .tbacct select { max-width: 150px; }
}

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; margin-left: 248px; }
.topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px;
  padding: calc(18px + var(--gf-safe-top)) 38px 18px;
  background: var(--card); border-bottom: 1px solid var(--line); }
/* Sticky top menu (Quick nav toggle, ON by default) - the topbar has an opaque card
   background so content scrolls cleanly beneath it. */
body.gfstickon .topbar { position: sticky; top: 0; z-index: 30; }
/* Scroll-to-top button: a subtle amber circle, bottom-right, shown once you scroll. */
.scrolltop { position: fixed; right: calc(22px + var(--gf-safe-right)); bottom: calc(22px + var(--gf-safe-bottom));
  z-index: 60; width: 46px; height: 46px;
  border-radius: 50%; border: none; cursor: pointer; background: var(--amber); color: var(--navy);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .16s ease, box-shadow .16s ease; }
.scrolltop svg { width: 22px; height: 22px; }
.scrolltop:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(224, 137, 0, .42); }
.scrolltop[hidden] { display: none; }
.scrolltop:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* Sticky-menu toggle in the Quick nav head */
.tnd-mega-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.tnd-mega-head > span:first-child { flex: 0 0 auto; }   /* title is content-width; the search fills the middle */
.qnstick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none;
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.qnstick svg { width: 14px; height: 14px; flex: none; }
.qnstick-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.qnstick-sw { width: 30px; height: 17px; border-radius: 9px; background: var(--line2); position: relative;
  transition: background .16s ease; flex: none; }
.qnstick-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.qnstick-cb:checked + .qnstick-sw { background: var(--amber); }
.qnstick-cb:checked + .qnstick-sw::after { transform: translateX(13px); }
.qnstick-cb:focus-visible + .qnstick-sw { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Theme (dark/light) toggle in the Quick nav head - a compact icon button */
.qntheme { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted);
  display: inline-flex; align-items: center; border-radius: var(--r-3); transition: background .16s ease, color .16s ease; }
.qntheme:hover { color: var(--amber-deep); background: var(--amber-soft); }
.qntheme:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tnd-mega-head .qntheme svg { width: 16px; height: 16px; }
/* Text-size stepper (A- / A+) at the right end of the megamenu footer: discreet + muted
   so it sits quietly on the helper line. Small house 'A' glyphs (minus / plus) around a
   compact % that resets on click; the size gap between the A's reinforces smaller vs bigger. */
.qnfs { display: inline-flex; align-items: center; gap: 1px; flex: none; margin-left: auto; }
/* .qnfs .* prefixes beat the `.tnd-menu button { font-size: var(--fs-4); color:--text }` rule
   (0,0,1,1) that otherwise wins over a bare .qnfs-val and inflates/darkens the %. */
.qnfs .qnfs-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted);
  display: inline-flex; align-items: center; border-radius: var(--r-2); transition: background .16s ease, color .16s ease; }
.qnfs .qnfs-btn:hover { color: var(--amber-deep); background: var(--amber-soft); }
.qnfs .qnfs-btn:focus-visible, .qnfs .qnfs-val:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tnd-mega-foot .qnfs-dn svg { width: 16px; height: 16px; }
.tnd-mega-foot .qnfs-up svg { width: 19px; height: 19px; }
.qnfs .qnfs-val { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-3);
  font-weight: 600; color: var(--dim); letter-spacing: 0; min-width: 36px; text-align: center; padding: 1px 2px;
  border-radius: var(--r-2); transition: background .16s ease, color .16s ease; }
.qnfs .qnfs-val:hover { color: var(--amber-deep); background: var(--amber-soft); }
.qnfs.is-min .qnfs-dn, .qnfs.is-max .qnfs-up { opacity: .3; pointer-events: none; }
.qnfs:not(.is-def) .qnfs-val { color: var(--amber-deep); }   /* off 100% -> reads as a reset affordance */
/* Support button pinned top-right in the Help page, sticky as you scroll (clears the
   sticky top menu). Carries the unread-reply highlight the topbar button used to. */
/* the bar takes no layout space; the button itself is fixed top-right, below the
   header, so it stays put as the help topics scroll (hidden with the tab when it is
   not open, since a fixed child of a display:none section does not render). */
/* the title block is the ONLY flex-growing element + min-width:0 so its subtitle
   ellipsis-truncates instead of collapsing the box into a tall word-wide column */
.topbar > .tbtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar h1 { font-size: var(--fs-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
/* right cluster: one non-shrinking, right-pinned, single-baseline unit */
.tbright { display: flex; align-items: center; gap: 10px; flex: none; }
.tbright > * { flex: none; }
.tbright .topnav { margin-right: 0; }

/* ---------- site-wide search: sits INLINE on the megamenu head row ----------
   Title (left) | search (fills the middle) | Sticky/Tooltips/theme (right). Typing
   swaps the feature columns for a grouped results list; clearing brings them back. */
.tnd-mega-head .gfsearch { position: relative; flex: 1 1 220px; min-width: 120px; margin: 0; }
.tnd-mega-head .gfsearch-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--dim); display: inline-flex; pointer-events: none; }
.tnd-mega-head .gfsearch-ic svg { width: 17px; height: 17px; }
.tnd-mega-head .gfsearch-in { width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: var(--r-pill); margin: 0;
  border: 1px solid var(--line2); background: var(--card); color: var(--text); font-family: var(--font-body);
  font-size: var(--fs-3); font-weight: 400; letter-spacing: normal; text-transform: none; }
.tnd-mega-head .gfsearch-in::placeholder { color: var(--dim); }
.tnd-mega-head .gfsearch-in:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.gfsearch-panel { padding: 2px 2px 4px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
/* while searching, the results replace the feature columns + the footer note */
.tnd-menu.searching .tnd-cols, .tnd-menu.searching .tnd-mega-foot { display: none; }
/* results styled like a modern search suggest: bold group headings, roomy rounded
   rows, prominent rounded thumbnails (Google-Photos-ish). */
.gfs-group { font: 700 13px/1 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--text); padding: 14px 10px 7px; }
.gfs-opt { display: flex; align-items: center; gap: 14px; padding: 8px 11px; border-radius: var(--r-4); cursor: pointer; margin-bottom: 2px; }
.gfs-opt:hover { background: var(--card2); }
.gfs-opt.active { background: var(--amber-soft); }
.gfs-ic { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); display: inline-flex; align-items: center;
  justify-content: center; background: var(--card2); color: var(--amber-deep); }
.gfs-ic svg { width: 22px; height: 22px; }
.gfs-thumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); object-fit: cover;
  background: var(--card2); border: 1px solid var(--line2); }
video.gfs-thumb { display: block; }
.gfs-tx { min-width: 0; flex: 1; }
.gfs-tx b { display: block; font-size: var(--fs-4); font-weight: 600; letter-spacing: normal; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the line under a result's name (where it lives / what it does): the readable secondary
   size the section bar's own rows use, up to two lines rather than cut off (Peter
   2026-10-08: it was --fs-1, too small to read) */
.gfs-tx span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  margin-top: 2px; font-size: var(--fs-3); line-height: 1.35; color: var(--muted); letter-spacing: normal;
  text-transform: none; white-space: normal; overflow: hidden; overflow-wrap: anywhere; }
.gfs-empty, .gfs-loading { padding: 18px 12px; color: var(--dim); font-size: var(--fs-2); text-align: center; }
.gfs-loading { font-family: var(--font-mono); letter-spacing: .1em; font-size: var(--fs-1); }

/* ---------- section bar (ui.js gfSecBar): sticky Sections menu + search at the top of a tab ----------
   Brand profile + Overview; the same bar as Mission Control's GrowFleet Go tab. It sticks
   just under the sticky top bar (--gf-topbar-h, kept by ui.js - 0 when the header does
   not stick) and both pop-ups hang from it. Tokens only, so the dark theme follows. */
/* at rest it starts exactly where it sits once stuck (Peter): the negative top margin
   cancels the content area's top padding (--content-top) and the bar pads by the same
   amount, so its row sits where every other tab's first panel starts - and scrolling
   never moves it (flush under the top bar from the start) */
/* the gap under the bar to the page's first section EQUALS the gap above it to the sticky
   top bar (one token, both sides, every page) - at rest and once stuck (Peter, 2026-09-30) */
.gfsecbar { position: sticky; top: var(--gf-topbar-h, 0px); z-index: 25; display: block;
  margin: calc(0px - var(--content-top, 8px)) 0 0; padding: var(--content-top, 8px) 0; background: var(--bg); }
/* whatever opens a page sits flush under the bar - its own top margin (a Flo band's 4px)
   would break the equal gap */
.tab > .gfsecbar + *, .tab > .gfsecbar + [hidden] + * { margin-top: 0; }
.gsb-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); box-shadow: var(--shadow); }
.gsb-menu { flex: 0 0 auto; max-width: 42%; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-4); border: 1px solid var(--line2); background: var(--card2);
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-4); cursor: pointer; touch-action: manipulation; }
.gsb-menu > svg { width: 18px; height: 18px; flex: none; }
.gsb-menu b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.gsb-lbl { flex: none; font-weight: 500; }
.gsb-chev { display: inline-flex; flex: none; transition: transform .15s; }
.gsb-chev svg { width: 15px; height: 15px; }
.gsb-menu:hover, .gsb-menu[aria-expanded="true"] { border-color: var(--amber); }
.gsb-menu[aria-expanded="true"] .gsb-chev { transform: rotate(180deg); }
.gsb-menu:focus-visible, .gsb-help:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.gsb-q { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-radius: var(--r-4); border: 1px solid var(--line2); background: var(--card2); }
.gsb-q:focus-within { border-color: var(--amber); background: var(--card); box-shadow: 0 0 0 3px var(--amber-soft); }
.gsb-q > svg { width: 17px; height: 17px; flex: none; color: var(--dim); }
.gfsecbar .gsb-input { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 9px 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--text); font-family: var(--font-body); font-size: max(16px, 1rem);
  touch-action: manipulation; }
.gfsecbar .gsb-input:focus, .gfsecbar .gsb-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.gsb-kbd { flex: none; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--dim);
  border: 1px solid var(--line2); border-radius: var(--r-2); padding: 1px 6px; }
.gsb-q:focus-within .gsb-kbd { display: none; }
.gsb-help { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-5); font-weight: 700;
  cursor: pointer; touch-action: manipulation; }
.gsb-help:hover { border-color: var(--amber); color: var(--amber-deep); }
.gsb-pop { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 26; padding: 8px;
  max-height: min(70vh, 580px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); box-shadow: var(--shadow-lg); }
.gsb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 4px 14px; }
.gsb-grp { min-width: 0; }
.gsb-gh { font-family: var(--font-body); font-size: var(--fs-2); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text); padding: 10px 10px 5px; }
.gsb-it, .gsb-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px 10px;
  border: 0; border-radius: var(--r-4); background: none; color: var(--text); font-family: var(--font-body);
  text-align: left; cursor: pointer; }
.gsb-ic { flex: none; width: 32px; height: 32px; border-radius: var(--r-3); display: inline-flex; align-items: center;
  justify-content: center; background: var(--card2); color: var(--text); }
.gsb-ic > svg, .gfsecbar .gsb-ic .bic { width: 18px; height: 18px; margin: 0; }
/* a post / media hit shows its own picture beside the text (the icon is the fallback) */
.gsb-ic.gsb-th { width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--line); }
.gsb-th img, .gsb-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsb-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gsb-tx b { font-size: var(--fs-4); font-weight: 600; overflow-wrap: anywhere; }
.gsb-tx > span { font-size: var(--fs-3); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.gsb-tx .gsb-desc { font-size: var(--fs-3); }
.gsb-chip { flex: none; font-style: normal; font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-2);
  border: 1px solid var(--line2); color: var(--text); white-space: nowrap; }
.gsb-chip.gsb-c-done { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.gsb-chip.gsb-c-todo { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.gsb-it:hover, .gsb-it:focus-visible, .gsb-opt:hover, .gsb-opt.active { background: var(--amber-soft); outline: none; }
.gsb-it.on { background: var(--card2); box-shadow: inset 3px 0 0 var(--amber); }
.gsb-opt mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.gsb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 8px;
  padding: 10px 10px 4px; border-top: 1px solid var(--line); font-size: var(--fs-3); color: var(--muted); }
.gsb-hint { padding: 10px; color: var(--text); font-size: var(--fs-4); line-height: 1.5; }
.gsb-exs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gsb-ex { padding: 5px 10px; border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2);
  color: var(--text); font-family: var(--font-mono); font-size: var(--fs-2); cursor: pointer; }
.gsb-ex:hover { border-color: var(--amber); }
/* the whole-site results (bindSiteSearch's .gfs-* rows) inside the bar's pop-up */
.gsb-res .gfs-group:first-child { padding-top: 6px; }
/* a landed section heading is flashed (.gf-deeplinked), so no focus ring on it */
#brandForm .fghead:focus:not(:focus-visible) { outline: none; }
@media (max-width: 760px) {
  .gfsecbar { margin: calc(0px - var(--content-top, 8px)) 0 0; padding: var(--content-top, 8px) 0; }
  .gsb-row { gap: 6px; padding: 5px; }
  .gsb-lbl, .gsb-kbd { display: none; }
  .gsb-menu { max-width: 46%; padding: 8px 10px; gap: 6px; }
  /* the bar sits at the top of every page: 44px targets (Apple HIG), menu, search and "?" */
  .gsb-menu, .gsb-q { min-height: 44px; }
  .gsb-help { width: 44px; height: 44px; }
  .gsb-pop { max-height: 62vh; }
}
.topsupport { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card);
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.topsupport svg { width: 19px; height: 19px; color: #1c2740; }
/* icon-only variant (Help): square padding so the pill reads as a round icon button */
.topsupport.topico { padding: 9px; }
.topsupport:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-1px); }
.conndot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.conndot.warn { background: var(--amber); }
.conndot[hidden] { display: none; }
@media (max-width: 640px) { .topsupport span:not(.conndot) { display: none; } .topsupport { padding: 9px 11px; } .tbright { gap: 6px; } }
.whoami { flex: none; white-space: nowrap; text-align: right; line-height: 1.3; }
.whoami b { display: block; font-size: var(--fs-5); }
.whoami span { font-size: var(--fs-3); color: var(--muted); }
/* owner/operator: the identity opens the Users section, so it looks and
   behaves like a button (padding offset by margin so the layout never shifts) */
.whoami[data-go] { cursor: pointer; border-radius: var(--r-3); padding: 3px 8px; margin: -3px -8px; transition: background .15s; }
.whoami[data-go]:hover { background: var(--amber-soft); }
.whoami[data-go]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 900px) { .whoami { display: none; } }
/* header storage meter: compact chip in the top bar, shown only on the Media tab
   (JS toggles [hidden]). Taps through to the plan tab to add storage. */
.headstore { display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; }
.headstore[hidden] { display: none; }
.headstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.headstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); }
.headstore .hs-lab { font-size: var(--fs-1); letter-spacing: .13em; color: var(--muted); }
.headstore .hs-bar { width: 90px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.headstore .hs-bar > i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.headstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.headstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.headstore .hs-val { font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.headstore.warn .hs-val { color: var(--amber-deep); }
.headstore.full .hs-val { color: var(--red); }
:root[data-theme="dark"] .headstore .hs-bar { background: rgba(255, 255, 255, .10); }
/* phone: the top bar sheds its right cluster, so the meter wraps to its own slim
   full-width row under the title (no pill), never forcing sideways scroll. */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .headstore { order: 2; flex: 1 1 100%; justify-content: flex-start;
    border: 0; background: transparent; padding: 4px 0 0; }
  .headstore:hover { background: transparent; }
  .headstore .hs-bar { flex: 1 1 auto; width: auto; max-width: 260px; }
}
/* desktop: the storage meter sits on the YOUR LIBRARY asset-count row (a compact
   chip, right-aligned next to the count) instead of the top bar; mobile keeps the
   top-bar chip. .libstore mirrors .headstore's look. */
/* count on the left (grows with the library); storage meter RIGHT-aligned as a compact,
   ONE-LINE progress bar + percentage, so the count keeps room as file counts grow. */
.libstatrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.libstatrow #mediaCount { color: var(--muted); flex: 1 1 auto; min-width: 0; }
/* the same meter, centred, as a clean spacer between two Overview>Setup sections */
.ovstorewrap { display: flex; justify-content: center; margin: 16px 0; }
.libstore { display: inline-flex; align-items: center; gap: 8px; flex: none;
  white-space: nowrap; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; }
.libstatrow .libstore { margin-left: auto; }   /* right-align in the media library row */
.libstore[hidden] { display: none; }
.libstore:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.libstore:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 173, 51, .25); }
.libstore .hs-lab { font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted); }
/* a real progress bar with its percentage, sized to stay on one line */
.libstore .hs-bar { width: 130px; height: 9px; border-radius: var(--r-pill); background: var(--line);
  overflow: hidden; flex: none; }
.libstore .hs-bar > i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.libstore.warn .hs-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.libstore.full .hs-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.libstore .hs-pct { font-size: var(--fs-2); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.libstore.warn .hs-pct { color: var(--amber-deep); }
.libstore.full .hs-pct { color: var(--red); }
.libstore .hs-val { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
.libstore.warn .hs-val { color: var(--amber-deep); }
.libstore.full .hs-val { color: var(--red); }
/* the "click to add media" affordance inside the meter */
.libstore .hs-add { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-deep);
  font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding-left: 9px; border-left: 1px solid var(--line2); }
.libstore .hs-add svg { width: 12px; height: 12px; display: block; }
.libstore:hover .hs-add { color: var(--amber); }
:root[data-theme="dark"] .libstore .hs-bar { background: rgba(255, 255, 255, .10); }
/* pick ONE per width: desktop = in-panel chip, mobile = top-bar chip (unchanged) */
@media (min-width: 761px) { .headstore { display: none; } }
@media (max-width: 760px) { .libstore { display: none; } .libstatrow { margin-bottom: 10px; } }
/* "Gathering storage" loader: shown INSIDE the meter pill while /api/media/storage is in
   flight (loadStorageMeter toggles .loading). It reuses the pill's own footprint so swapping
   in the real meter causes no vertical layout shift. No in-house vertical dot-bounce existed
   (only fcdArrowBounce, horizontal), so hsLoadBounce is a new primitive built from house
   tokens; the reduced-motion block mirrors the .qskel .sk convention (animation off, static). */
.hs-load { display: none; align-items: center; gap: 9px; line-height: 1; min-height: 12px; }   /* min-height matches the loaded meter's content box so the pill height is identical (no swap-in CLS) */
.headstore.loading > :not(.hs-load), .libstore.loading > :not(.hs-load) { display: none; }
.headstore.loading .hs-load, .libstore.loading .hs-load { display: inline-flex; }
.hs-load-lab { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-load-dots { display: inline-flex; align-items: center; gap: 4px; }
.hs-load-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); opacity: .4;
  animation: hsLoadBounce 1.05s ease-in-out infinite both; }
.hs-load-dots i:nth-child(1) { animation-delay: -.32s; }
.hs-load-dots i:nth-child(2) { animation-delay: -.16s; }
.hs-load-dots i:nth-child(3) { animation-delay: 0s; }
@keyframes hsLoadBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hs-load-dots i { animation: none; opacity: .7; } }
/* --content-top = where every tab's FIRST panel starts under the top bar: the same spot
   on every tab and every screen size, and the same spot a section bar row sits in when
   stuck (Peter: consistent, higher start). --content-inset-top stays for the spacing
   rules that scale off it (banner gaps). */
.content { --content-inset-top: 30px; --content-top: 8px; padding: var(--content-top) 38px 48px; max-width: 1200px; width: 100%; }
.tab { display: none; }
.tab.on { display: block; }
.tab > h1 { display: none; } /* page title lives in the topbar */

/* ---------- panels + cards ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5);
  overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow); }
/* deep-link arrival flash: a brief amber ring on the panel a data-scroll link dropped you
   at (e.g. the Shoot List from "See what Flo can do"), so it is obvious where you landed. */
.gf-deeplinked { animation: gfDeepLink 1.8s ease-out both; }
@keyframes gfDeepLink { 0%, 12% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .gf-deeplinked { animation: none; box-shadow: 0 0 0 3px var(--amber); } }
/* deep-link arrival flash for a TABLE ROW (e.g. the product a commerce post came from).
   Mirrors the .qrow-new "just landed" cue: an amber-soft wash across the cells PLUS an
   inset amber left-bar - the bar is the unmissable part. A box-shadow ring does not paint
   on a <tr>, so the wash goes on every > td and the bar on the first cell (box-shadow does
   paint on a <td>, in either border model). Same 0-62% hold then fade as qNewPulse; JS
   removes the class after the pulse. */
.gf-rowflash > td { animation: gfRowFlash 1.8s ease-out both; }
@keyframes gfRowFlash { 0%, 62% { background-color: var(--amber-soft); } 100% { background-color: transparent; } }
/* the first cell keeps the wash AND adds the left-bar (both animations, so :first-child
   does not drop the wash by overriding the single animation property). */
.gf-rowflash > td:first-child { animation: gfRowFlash 1.8s ease-out both, gfRowBar 1.8s ease-out both; }
@keyframes gfRowBar { 0%, 62% { box-shadow: inset 4px 0 0 var(--amber); } 100% { box-shadow: inset 4px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .gf-rowflash > td { animation: none; background-color: var(--amber-soft); }
  .gf-rowflash > td:first-child { animation: none; background-color: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); } }
.gf-rowflash { outline: none; }   /* the row takes focus (tabindex -1) for keyboard/AT - no focus ring, the wash + bar are the cue */
.phead { font-family: var(--font-body); font-size: var(--fs-2); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text);
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--card2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px; margin-bottom: 22px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5);
  padding: 18px 20px; box-shadow: var(--shadow); position: relative; }
.kcard b { display: block; font-family: var(--font-display); font-size: var(--fs-7); padding-right: 22px; }
.kcard span { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); }
/* the "?" tip sits in the card's top-right corner (not inline with the label) */
.kcard .tipdot { position: absolute; top: 15px; right: 17px; margin: 0; }
/* feature glyph - stacked in the right margin directly under the "?" tip, so it can
   never change the card height or touch the value/label. The value is capped by its
   padding-right (22px) and the label is a row below, so this right-margin lane is empty
   on every card regardless of value width or A-/A+ text scale. Subtle + muted. */
.kcard .kico { position: absolute; right: 17px; top: 34px; color: var(--dim); opacity: .55;
  pointer-events: none; line-height: 0; }
.kcard .kico .bic, .kcard .kico svg { width: 16px; height: 16px; display: block; }
/* ---- Overview sub-tabs (Today / Performance / Setup) --------------------------
   In-page tablist that folds the old long scroll into three sections. Built on a
   flex-WRAP layout (like .stfmt), never overflow-x:auto (that would sideways-scroll
   on mobile, breaking the no-sideways-scroll rule). Active tab = a raised white card
   (Reference A look) with a deep-amber label + an amber-sel icon tile; all AA on white.
   Content swap reuses the .tab semantics via .ovpane / .ovpane.on (named .ovpane, not
   .ovsub, to avoid the pre-existing .ovcard .ovsub progress bar). */
.ovtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ovtab { position: relative; flex: 1 1 150px; min-width: 130px; display: flex; align-items: center; gap: 11px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 11px 14px; cursor: pointer; font-family: var(--font-body); color: var(--text);
  text-align: left; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.ovtab:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: var(--shadow); }
.ovtab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ovtab-ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--r-3); display: flex;
  align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line);
  color: var(--amber-deep); }
.ovtab-ic svg { width: 19px; height: 19px; display: block; }
.ovtab-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ovtab-tx b { font-size: var(--fs-4); font-weight: 700; }
.ovtab-tx span { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  text-transform: uppercase; color: var(--neutral); }
.ovtab[aria-selected="true"] { background: var(--card); border-color: var(--amber); box-shadow: var(--shadow); }
.ovtab[aria-selected="true"] .ovtab-tx b { color: var(--amber-deep); }
.ovtab[aria-selected="true"] .ovtab-ic { background: var(--amber-sel); border-color: var(--amber-sel); color: #fff; }
.ovpane { display: none; }
.ovpane.on { display: block; }
/* Phone: stack icon over label, drop the sub-line, keep one row (wraps if it truly
   cannot fit - it never sideways-scrolls). */
@media (max-width: 560px) {
  .ovtab { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 10px 11px; }
  .ovtab-tx b { font-size: var(--fs-3); }
  .ovtab-tx span { display: none; }
}
/* per-tab attention badge (e.g. Today has drafts awaiting you); hidden on the active tab */
.ovtab-badge { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--amber); color: #fff; font-family: var(--font-mono);
  font-size: var(--fs-1); font-weight: 600; line-height: 18px; text-align: center; }
.ovtab[aria-selected="true"] .ovtab-badge { display: none; }
/* Growth Tools has FIVE tabs (one per tool). The base @560 rule forces one row (flex:1 1 0),
   which is too cramped for five at phone width, so wrap them 2-up instead - it never
   sideways-scrolls. The lone final tab simply stretches to fill its row. */
@media (max-width: 560px) {
  .gttabs .ovtab { flex: 1 1 44%; }
}
/* Per-tab plan lock: a small padlock top-right of a tab whose tool this plan does not
   include, so the customer sees what is available before clicking (the panel inside still
   carries the full upsell). Muted, never alarming; hidden on the active tab like the badge. */
.ovtab-lock { position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; display: flex;
  align-items: center; justify-content: center; color: var(--neutral); }
.ovtab-lock svg { width: 13px; height: 13px; display: block; }
.ovtab.gt-locked .ovtab-ic { opacity: .72; }
.ovtab[aria-selected="true"] .ovtab-lock { display: none; }
/* Phones: the KPI cards are ONE sideways row like the web's (Peter, 2026-09-30: "make
   the Overview options scroll like web") - they were a 2-up grid, five rows deep. The
   third card peeks in at the edge (the scroll cue) with the same fades; no arrows (a
   finger swipes; the 34px arrows are under the 44px tap size). */
@media (max-width: 560px) {
  .kstripwrap { margin-bottom: 18px; }
  #ovCards.cards { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 10px;
    margin: 0 -4px; padding: 4px 4px 10px; scroll-snap-type: x proximity; scroll-padding: 0 4px;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  #ovCards.cards::-webkit-scrollbar { display: none; }
  #ovCards .kcard { flex: 0 0 9.25rem; min-width: 0; scroll-snap-align: start; }
  #ovCards.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  #ovCards.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
    mask-image: linear-gradient(90deg, transparent, #000 44px); }
  #ovCards.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
}
/* Overview KPI cards = ONE row on desktop (Peter): the row scrolls sideways inside itself
   (never the page), snapping card by card, with soft edge fades + arrows only on a side
   that has more; a vertical mouse wheel scrolls it too (gfScrollStrip in ui.js). The
   padding keeps the cards' shadows and hover lift inside the scroll box. Phones get the
   same row above, without the arrows. */
.kstripwrap { position: relative; }
.kstripnav { display: none; }
@media (min-width: 561px) {
  .kstripwrap { margin-bottom: 22px; }
  #ovCards.cards { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 16px;
    margin: 0 -4px; padding: 6px 4px 14px; scroll-snap-type: x proximity; scroll-padding: 0 4px;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  #ovCards.cards::-webkit-scrollbar { display: none; }
  #ovCards .kcard { flex: 0 0 200px; min-width: 0; scroll-snap-align: start; }
  #ovCards.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
  #ovCards.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px);
    mask-image: linear-gradient(90deg, transparent, #000 64px); }
  #ovCards.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
  .kstripnav { position: absolute; top: calc(50% - 4px); z-index: 3; transform: translateY(-50%);
    width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--line2);
    background: var(--card); color: var(--text); box-shadow: var(--shadow); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .kstripnav[hidden] { display: none; }
  .kstripnav.l { left: -6px; }
  .kstripnav.r { right: -6px; }
  .kstripnav:hover { border-color: var(--amber); color: var(--amber-deep); }
  .kstripnav:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .kstripnav svg { width: 16px; height: 16px; }
}
/* Analytics sub-tabs: reuse the Overview .ovtabs / .ovtab look. There are FIVE tabs, so
   on narrower widths they WRAP into tidy rows (never a sideways scroll - .ovtabs is
   flex-wrap). Panes swap exactly like .ovpane. */
.antabs { margin: 0 0 8px; }
.anpane { display: none; }
/* the selected tab's content sits in a bounded, recessed "well" (warm greige, a step
   DEEPER than the page) so the white .panel/.kpi/.kcard cards float above it and the bare
   verdict/kpi/filter content gains a home - it reads as one grouped panel, not floating on
   the page. NO box-shadow: a recessed surface must not read as raised (that is the cards'
   job). Bottom inset comes from the last in-flow .panel's own margin, trapped by the border. */
/* Shared across ALL icon-card tab surfaces (Analytics .anpane + Overview / Content Drop /
   Growth Tools .ovpane) so no section floats while another is grouped. */
.anpane.on, .ovpane.on {
  display: block;
  background: var(--well);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);   /* echoes the active tab's amber border so the pane
    reads as attached to whichever tab is selected - works at any wrap (depends on no tab
    position), reinforced by the tightened strip gap above (common region + proximity). */
  border-radius: var(--r-5);
  padding: 17px 18px 0;                  /* 17 not 18 top: the 2px amber edge keeps the block ~19px in */
}
/* bare top block (the verdict / first panel / action row) flush to the top inset - no
   doubled gap under the amber tie; Summary ends on a bare digest strip that has no card
   margin to supply the bottom inset, so give it one. */
.anpane.on > :first-child, .ovpane.on > :first-child { margin-top: 0; }
.anpane.on > .andigest:not(:empty) { margin-bottom: 18px; }
/* an unconnected brand shows ONLY the connect box (renderAnalytics): its tab strip is hidden,
   and on a phone so is the selected pane - it stood under the box as an empty bordered well */
@media (max-width: 760px) { #anEmpty:not([hidden]) ~ .anpane { display: none; } }
/* an empty sub-tab (every panel in it hidden because there is no data yet) shows one
   honest line instead of a blank pane. */
.anpane-empty { color: var(--dim); font-size: var(--fs-2); text-align: center;
  padding: 30px 20px; border: 1px dashed var(--line2); border-radius: var(--r-4);
  background: var(--card); }   /* --card not --card2: on the dark well (#0e1626 ~= --card2) a card2 fill would vanish */
/* In dark, the well (#0e1626) sits ~= --card2, so the card2-filled Summary sub-cards would
   flatten into border-only. Lift them to --card so they still pop off the well (goalcard is
   already --card, so it is not listed). */
:root[data-theme="dark"] .goalset,
:root[data-theme="dark"] .digcard,
:root[data-theme="dark"] .anstat { background: var(--card); }
/* a sub-tab with no data yet is dimmed (but still openable - the empty line inside
   explains what will appear). The active tab is never dimmed. */
.antabs .ovtab.antab-nodata:not([aria-selected="true"]) { opacity: .55; }
.antabs .ovtab.antab-nodata:not([aria-selected="true"]):hover { opacity: 1; }
/* Tablet: 5 tabs no longer fit one comfortable row - let them wrap 3 + 2 (keep the
   sub-line, it still reads). */
@media (max-width: 860px) { .antabs .ovtab { flex: 1 1 30%; min-width: 140px; } }
/* Phone: a clean 2-column grid (2 + 2 + 1) instead of a flex row whose lone 5th tab
   would stretch full-width. Icon over label, sub-line dropped (inherits the <=560 ovtab
   rule). Grid = no sideways scroll, ever. */
@media (max-width: 560px) {
  .antabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .antabs .ovtab { flex: none; width: auto; min-width: 0; }
  /* trim the well inset on phones so the pane padding + page gutter + each card's own
     padding do not crush the 2-up kpi/kcard grid (no sideways scroll). */
  .anpane.on, .ovpane.on { padding: 13px 13px 0; }
}

/* Campaigns sub-tabs (Create / Your campaigns / Calendar) reuse the .ovtabs strip + the
   .ovpane well. THREE tabs fit one row like Overview; the base .ovtab (flex:1 1 150px) and
   the <=560 column layout both hold them with no sideways scroll. Small tab gap to match. */
.crtabs { margin: 0 0 8px; }
/* at-a-glance strip: one quiet, readable line of the vital few sitting just above the tabs -
   compact clickable stats (NOT big KPI tiles, which would bury the tabs), wrapping on a
   phone, never a sideways scroll. Each stat routes to the sub-tab that owns it. */
.crglance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 2px 0 12px; }
.crgstat { display: inline-flex; align-items: baseline; gap: 5px; border: none; background: none;
  cursor: pointer; font: inherit; color: var(--text); padding: 3px 6px; border-radius: var(--r-2); }
.crgstat:hover, .crgstat:focus-visible { background: var(--amber-soft); color: var(--amber-deep); outline: none; }
.crgstat b { font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.crgstat span { font-size: var(--fs-2); color: var(--dim); }
.crgstat:hover span, .crgstat:focus-visible span { color: var(--amber-deep); }
.crgsep { color: var(--line2); font-size: var(--fs-2); user-select: none; }
/* the Calendar sub-tab is never blank: when no campaign has dated posts yet, this friendly
   panel stands in for the month grid, with a one-tap route to the Create tab. */
.crcalempty { text-align: center; padding: 30px 20px; border: 1px dashed var(--line2);
  border-radius: var(--r-4); background: var(--card); }
.crcalempty .hint { margin: 0 auto 14px; max-width: 46ch; }
/* Setup action buttons (Brand profile / Customize experience / Customize appearance) -
   text + a house-glyph icon. The amber Brand profile button keeps its icon readable on
   the amber fill (currentColor = the button's dark ink); the plain ones use amber-deep. */
.ovsetupacts { flex-wrap: wrap; }
.ovactbtn { display: inline-flex; align-items: center; gap: 7px; }
.ovact-ic { display: inline-flex; }
.ovact-ic svg { width: 16px; height: 16px; display: block; }
.ovactbtn:not(.amber) .ovact-ic { color: var(--amber-deep); }
.btn.amber .ovact-ic { color: currentColor; }
.kcard .up { color: var(--green); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
/* Posts toolbar quick-nav: compact shortcuts to the three sources (replaced the
   flow diagram). Compact so they hold the toolbar's one row; the labels collapse
   to icon-only on tighter viewports so nothing wraps, and on mobile the toolbar
   wraps normally (no sideways scroll). */
.qgo-div { align-self: center; flex: none; width: 1px; height: 22px; background: var(--line2); margin: 0 2px; }
.btn.qgo { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; font-size: var(--fs-2); }
.btn.qgo .bic { display: inline-flex; }
.btn.qgo .bic svg { width: 15px; height: 15px; }
#qActions { gap: 8px; }   /* keep the whole Posts toolbar (incl. Auto-approve) on one row */
@media (max-width: 1300px) { .btn.qgo { padding: 9px 10px; gap: 0; } .btn.qgo .qgolab { display: none; } }
/* Post-editor action bar (SPEC_POST_FROM_PHONE feedback). Research-backed hierarchy:
   the amber primary leads; the destructive Remove stays danger-coded but is OUTLINED,
   not a filled block that competes with the primary. */
.detail .actions .btn.danger { background: transparent; color: var(--red);
  border-color: rgba(214, 69, 69, .3); box-shadow: none; }
.detail .actions .btn.danger:hover { background: var(--red-soft); border-color: var(--red);
  transform: translateY(-1px); }
/* On a phone the buttons form a clean 2-col grid instead of a ragged flex-wrap: the
   amber primary + the long publish actions each take a full row; Save + Remove share
   the last row. Every button is full-bleed within its cell, so nothing wraps ragged. */
@media (max-width: 760px) {
  .detail .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
  .detail .actions .btn { width: 100%; margin: 0; }
  .detail .actions .btn.amber,
  .detail .actions #dPostNow,
  .detail .actions #dPhonePost,
  .detail .actions #dRecall,
  .detail .actions .btn[disabled] { grid-column: 1 / -1; }
  /* Campaign card actions: the same clean grid, buttons a touch smaller so the longer
     labels pair 2-across - Approve full-width, then Show-in-calendar | Open-in-Posts and
     Details | Delete in two tidy rows (3 rows total, not a ragged 4-5). */
  .crplan[data-planid] .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crplan[data-planid] .actions .btn { width: 100%; margin: 0; padding: 10px 10px; font-size: var(--fs-4); }
  .crplan[data-planid] .actions .btn .bic { width: 14px; height: 14px; margin-right: 5px; }
  .crplan[data-planid] .actions .btn.amber { grid-column: 1 / -1; }
  /* Your plan > YOUR DATA: "Delete my account & data" is too long to pair 2-across
     (at 375px it ran 50px off the card and was clipped), so these two stack */
  #dataRightsBox .detail .actions .btn { grid-column: 1 / -1; }
}
.hint { color: var(--muted); font-size: var(--fs-4); margin-top: 10px; }
.empty { color: var(--dim); font-size: var(--fs-2); padding: 34px; text-align: center; }
.statusbars { padding: 18px 20px; display: grid; gap: 11px; }
.sbar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); }
.sbar .track { height: 10px; border-radius: var(--r-2); background: var(--bg); overflow: hidden; }
.sbar .fill { height: 100%; border-radius: var(--r-2); background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.sbar.g .fill { background: linear-gradient(90deg, #2fbf87, var(--green)); }

/* ---------- queue ---------- */
.filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
/* Posts filter row = two zones so the search + sort + view-toggle cluster NEVER
   drops the toggle to its own line: the status chips wrap in their own zone, the
   right cluster stays put on the top row. (The old single-row flex let qsearch's
   margin-left:auto glue itself to the edge, orphaning sort + toggle - they wrapped
   in a ~950-1100px band.) On mobile the cluster goes full-width and wraps inside. */
#qFilters { flex-wrap: wrap; align-items: center; gap: 12px 14px; }
/* status chips NEVER wrap on desktop (strict one row). If the whole thing can't fit,
   the controls cluster wraps BELOW the chips as a unit - no chip ever drops on its
   own, and there is no fragile viewport breakpoint (chip widths vary with counts +
   the A-/A+ text scale). Chips wrap only at mobile so 375px never sideways-scrolls. */
#qFilters .qfilterchips { display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; min-width: 0; }
#qFilters .qfilterchips button { padding: 8px 12px; }   /* a touch tighter so more fits */
#qFilters .qbar-right { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
  flex: 0 0 auto; margin-left: auto; }
#qFilters .qbar-right .qsearch, #qFilters .qbar-right .viewtoggle { margin-left: 0; }
/* Collapsible search: compact by default, expands over the chips on focus (overlaps,
   never pushes) so the row stays one line. max-width:none defeats the global
   :where(input){max-width:100%} which would otherwise clamp it to the wrap width. */
.qsearchwrap { position: relative; width: 150px; height: 40px; flex: 0 0 auto; }
#qFilters .qbar-right .qsearch { position: absolute; right: 0; top: 0; width: 150px; height: 40px;
  min-width: 0; max-width: none; margin: 0; transition: width .18s ease, box-shadow .18s ease; }
#qFilters .qbar-right .qsearch:focus { width: 300px; z-index: 40; box-shadow: var(--focus-ring), 0 8px 26px rgba(16,24,40,.18); }
/* ONE LINE at any width, count or text size (Peter, when STORIES pushed the cluster onto
   a second row): the chips fill what the right cluster leaves and scroll SIDEWAYS inside
   their own strip - never the page - with soft edge fades + small arrows where there is
   more; a vertical mouse wheel scrolls it too, and the picked chip always slides into
   view. The search is a magnifier that opens over the chips (wider while it holds a
   query). Phones keep the wrapping rows below (no inner sideways scroller there). */
@media (min-width: 641px) {
  #qFilters { flex-wrap: nowrap; }
  #qFilters .qchipwrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
  #qFilters .qfilterchips { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px 1px; }
  #qFilters .qfilterchips::-webkit-scrollbar { display: none; }
  #qFilters .qfilterchips button { flex: none; padding: 8px 11px; letter-spacing: .06em; }
  #qFilters .qfilterchips.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  #qFilters .qfilterchips.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
    mask-image: linear-gradient(90deg, transparent, #000 56px); }
  #qFilters .qfilterchips.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  #qFilters .qchipnav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid var(--line2);
    background: var(--card); color: var(--text); box-shadow: var(--shadow); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  #qFilters .qchipnav.l { left: 0; }
  #qFilters .qchipnav.r { right: 0; }
  #qFilters .qchipnav:hover { border-color: var(--amber); color: var(--amber-deep); }
  #qFilters .qchipnav svg { width: 14px; height: 14px; }
  /* search = a magnifier until used */
  .qsearchwrap { width: 40px; transition: width .18s ease; }
  .qsearch-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 41;
    display: inline-flex; color: var(--text); pointer-events: none; }
  .qsearch-ic svg { width: 17px; height: 17px; }
  /* collapsed: padding + border = exactly the 40px box (more would widen it past the wrap) */
  #qFilters .qbar-right .qsearch { width: 40px; padding: 8px 0 8px 38px; cursor: pointer; }
  #qFilters .qbar-right .qsearch::placeholder { color: transparent; }
  #qFilters .qbar-right .qsearch:focus, #qFilters .qbar-right .has-q .qsearch { cursor: text; padding-right: 10px; }
  #qFilters .qbar-right .qsearch:focus::placeholder { color: var(--dim); }
  #qFilters .qbar-right .qsearch::-webkit-search-cancel-button { display: none; }
  #qFilters .qbar-right .qsearch:focus::-webkit-search-cancel-button { display: block; }
  .qsearchwrap.has-q, #qFilters .qbar-right .qsearchwrap.has-q .qsearch { width: 170px; }
  #qFilters .qbar-right .qsearchwrap.has-q .qsearch:focus { width: 300px; }
  #qSrcSel { max-width: 150px; }
}
@media (max-width: 640px) {
  #qFilters .qchipwrap { flex: 1 1 100%; min-width: 0; }
  #qFilters .qchipnav, .qsearch-ic { display: none !important; }
  #qFilters .qfilterchips { flex-wrap: wrap; flex: 1 1 100%; }
  #qFilters .qbar-right { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
  .qsearchwrap { width: 100%; height: auto; flex: 1 1 auto; }
  #qFilters .qbar-right .qsearch { position: static; width: 100%; }
}
.filters button { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; }
.filters button.on { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; }
/* minmax(0,1fr) not 1fr: plain 1fr tracks default to min-width:auto, so a wide
   child (e.g. the ticket form) blows out its track and crushes the other to a
   sliver - that made the support thread render 2px wide ("nothing happens"). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start; }
.listpane { max-height: 62vh; overflow-y: auto; }
/* Two .listpane surfaces keep their own (non-62vh) desktop caps. Scoped here
   rather than inline so the <=760px de-cap (search #auditList) can override them
   on a phone - an inline style would win and re-trap the nested scroll. */
#auditList { max-height: 52vh; }
#archList { max-height: 60vh; }
.qrow { display: flex; gap: 12px; align-items: center; padding: 15px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.qrow:last-child { border-bottom: 0; }
/* "showing one campaign" banner atop the list */
.qplanbar { display: flex; align-items: center; gap: 9px; margin: 12px 14px; padding: 10px 14px;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); }
.qplanbar .bic { color: var(--amber-deep); }
.qplanbar-k { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); }
.qplanbar-t { font-size: var(--fs-4); color: var(--text); }
.qplanbar-n { font-size: var(--fs-2); color: var(--muted); }
.qrow:hover { background: var(--card2); }
.qrow.sel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
/* a post that just landed here (Post now / campaign build): a brief amber pulse
   so it is unmissable at the top of the list, then it settles to normal */
.qrow.qrow-new { animation: qNewPulse 2.6s ease both; }
@keyframes qNewPulse {
  0%, 62% { background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber), 0 0 0 1px var(--amber-soft); }
  100% { background: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qrow.qrow-new { animation: none; background: var(--amber-soft); box-shadow: inset 4px 0 0 var(--amber); } }
.qrow .t { flex: 1; min-width: 0; }
.qrow .t b { display: block; font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .t span { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); letter-spacing: .08em; }
/* The meta line (source/format pills + dates) stays on ONE line: the direct child span
   is nowrap + ellipsis, so a long date can never grow a second row. Dates are already
   short (relative "Created", compact scheduled with the year dropped) so it rarely
   truncates; the full date lives on the .qdate hover tooltip. */
.qrow .t > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The date run switches out of the mono chip font into the proportional body font (no
   letter-spacing): it reads as a date rather than a code, and takes ~1/3 less width than
   mono - the width saving that keeps "Created ... for ..." on one line at laptop widths.
   .qdate = the value (emphasised); .qrel = the muted "(in 4h)" note by a scheduled time. */
.qrow .t .qwhen { font-family: var(--font-body); letter-spacing: normal; }
.qrow .t .qdate { color: var(--text); }
.qrow .t .qrel { opacity: .6; }
/* a due/just-posted scheduled post is going OUT now (not "X ago") - amber to read as
   in-progress. Same treatment wherever the label appears. */
.qpublishing, .qwhen .qpublishing { color: var(--amber-deep); font-weight: 600; }
.pill { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  color: var(--muted); white-space: nowrap; background: var(--card); }
.pill.idea { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; }
.pill.approved, .pill.scheduled { color: var(--green); background: var(--green-soft); border-color: transparent; }
.pill.published { color: var(--green); border-color: transparent; background: var(--card); }

/* ---------- bulk select + delete on the queue ---------- */
/* The contextual toolbar reuses .bulkbar (amber band); it swaps into the actions
   row's spot, so it sits at the bottom with the same margin as .actions. */
.qbulkbar { margin: 18px 0; animation: qbulkIn .18s ease both; }
@keyframes qbulkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qbulkbar { animation: none; } }
.qbulkbar #qBulkCount { color: var(--amber-deep); }

/* ---- Users > Archive view ---- */
/* the Users & Settings sub-nav has 5 pills - it WRAPS rather than overflow; on a phone it
   is the one sideways-scrolling row instead (.gf-orow, the phone one-row rule) */
.usersub { margin: 0 0 18px; flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
.usub { display: block; }
.archnote { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 12px 15px;
  border: 1px solid var(--amber); background: var(--amber-soft); border-radius: var(--r-3); }
.archnote .archnote-ic { color: var(--amber-deep); width: 20px; height: 20px; flex: none; margin: 0; }
.archnote p { margin: 0; font-size: .9rem; color: var(--text); }
.archrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.archrow:last-child { border-bottom: 0; }
.archrow .qthumb.none { display: grid; place-items: center; color: var(--dim); }
.archrow .qthumb.none .bic { width: 20px; height: 20px; margin: 0; }
.archrow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.archrow .t b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archrow .t > span { font-size: .6rem; color: var(--dim); letter-spacing: .06em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.archrow.tomb { opacity: .64; }
.archrow.tomb .t b { font-style: italic; color: var(--muted); }
.archnets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.archnetlink { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-deep);
  border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 2px 8px; }
.archnetlink:hover { border-color: var(--amber); background: var(--amber-soft); }
.archnetlink .bic { width: 11px; height: 11px; margin: 0; }
.archacts { display: flex; flex-wrap: wrap; gap: 7px; flex: none; align-items: center; }
@media (max-width: 640px) { .archrow { flex-wrap: wrap; } .archacts { width: 100%; } }
/* Mobile: the mobile layout scrolls the whole page (.qfull drops its desktop
   fixed-height scroller), so the select-mode action bar would otherwise sit at the
   very bottom of a long list - you'd scroll past every post to reach Delete/Recall.
   Stick it to the viewport, just above the .mbar tab bar (same offset .postwrap
   uses), so the actions are always in thumb reach (research: mobile bulk actions
   need a reachable/sticky bottom bar). position:sticky keeps it in normal flow so
   it never hides the last row (no content-padding hacks); a SOLID bg stops scrolled
   content bleeding through the amber-soft band; full-bleed to the screen edges. */
@media (max-width: 760px) {
  #qBulkBar.qbulkbar {
    position: sticky; z-index: 44;
    bottom: calc(76px + var(--gf-safe-bottom));
    margin: 12px -12px 0; padding: 10px 12px;
    border: 0; border-top: 2px solid var(--amber); border-radius: 0;
    background: var(--card); box-shadow: 0 -4px 16px rgba(19, 26, 42, .14);
  }
}
/* row tick-box: 22px rounded square on the left, house look. The hit area is the
   whole row (in selmode), but the box itself clears the 24px min target with padding. */
.qcheck { flex: none; width: 22px; height: 22px; margin-right: 2px; border-radius: var(--r-3);
  border: 2px solid var(--line2); background: var(--card); display: inline-flex;
  align-items: center; justify-content: center; color: #fff; transition: all .14s ease; }
.qcheck .qcheck-tick { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: all .14s ease; }
.qrow.qselable { cursor: pointer; }
.qrow.qselable:hover { background: var(--card2); }
.qrow.qselable:hover .qcheck { border-color: var(--amber); }
.qrow.qsel { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
.qrow.qsel .qcheck { background: var(--amber); border-color: var(--amber); }
.qrow.qsel .qcheck .qcheck-tick { opacity: 1; transform: none; }
/* ineligible rows (scheduled/published/recalled): visible but plainly not-selectable,
   with a small lock instead of a tick, so Select-all + the count stay honest (NN/g). */
.qrow.qsel-off { cursor: default; opacity: .62; }
.qrow.qsel-off .qcheck { border-style: dashed; border-color: var(--line2); background: var(--card2);
  color: var(--dim); cursor: help; }
.qrow.qsel-off .qcheck .bic { width: 13px; height: 13px; margin: 0; color: var(--dim); }
/* while selecting, the per-row approve toggle + network icons are muted and inert -
   the row is about selection now, so those controls don't compete or misfire. */
#qList.selmode .qapp, #qList.selmode .qnets { pointer-events: none; opacity: .3; }
.qcheck:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* keyboard focus for the row opener and the row approve switch (both are keyboard
   reachable now, so they must show where focus is) */
.qrow:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.qapp input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.detail { padding: 18px 20px; }
.detail label { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); margin: 11px 0 4px; }
/* compact editor: the first comment is a one-liner most of the time */
.detail textarea.dfc { min-height: 58px; }
.detail input[type=text], .detail input[type=email], .detail input[type=url],
.detail input[type=number], .detail input[type=password], .detail input[type=datetime-local],
.detail textarea, .detail select {
  width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-3); padding: 10px 12px; font-family: var(--font-body); font-size: var(--fs-4); }
.detail input:focus, .detail textarea:focus { outline: none; border-color: var(--amber); background: var(--card); }
.detail textarea { min-height: 110px; resize: vertical; }
.netchips { display: flex; flex-wrap: wrap; gap: 6px; }
.netchip { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  padding: 6px 11px; border-radius: var(--r-3); border: 1px solid var(--line2);
  color: var(--dim); cursor: pointer; user-select: none; background: var(--card); }
.netchip.sel { color: var(--green); background: var(--green-soft); border-color: transparent; font-weight: 700; }
.netchip.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
/* campaign-type pills (Create hub "make a campaign") - bigger + clearer */
#crRecipes { display: flex; gap: 10px; flex-wrap: wrap; }
#crRecipes .netchip { font-size: var(--fs-3); letter-spacing: .04em; padding: 11px 16px;
  border-radius: var(--r-3); display: inline-flex; align-items: center; gap: 8px; }
#crRecipes .netchip svg { width: 18px; height: 18px; }
/* Choose-step outcome tiles ("What do you want to post?") - big, icon-led, one per card */
.cropts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-top: 4px; }
.cropt { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 16px;
  border: 1.5px solid var(--line2); border-radius: var(--r-4); background: var(--card); cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.cropt:hover { border-color: var(--amber); box-shadow: var(--shadow); transform: translateY(-2px); }
.cropt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cropt.on { border-color: var(--amber); background: var(--amber-soft); }
.cropt .croptic { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); background: var(--amber-soft);
  display: flex; align-items: center; justify-content: center; color: var(--text); }
.cropt .croptic svg { width: 25px; height: 25px; }
.cropt .croptx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cropt .croptx b { font-size: var(--fs-5); font-weight: 700; color: var(--text); line-height: 1.15; }
.cropt .croptx small { font-size: var(--fs-3); color: var(--muted); line-height: 1.25; }
@media (max-width: 560px) { .cropts { grid-template-columns: 1fr; } }
/* trade chips carry a house glyph */
#crPacks .netchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: var(--fs-2); }
#crPacks .netchip .bic, #crPacks .netchip svg { width: 16px; height: 16px; margin: 0; }
/* the create-flow ribbon: the whole journey, ending at the calendar */
.crflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;
  padding: 12px 14px; background: var(--card2); border: 1px dashed var(--line2); border-radius: var(--r-3);
  font-size: var(--fs-4); color: var(--muted); }
.crflow-s { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.crflow-s i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--amber); }
.crflow-x { color: var(--line2); font-weight: 700; }
.crflow-land { color: var(--amber-deep); font-weight: 700; }
/* inline "scan first" prompt shown inside Make a campaign before items exist */
.crscanfirst { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 17px; border: 1.5px dashed var(--amber); border-radius: var(--r-4); background: var(--amber-soft); }
.crscanfirst .crsfico { flex: none; width: 44px; height: 44px; border-radius: var(--r-3); background: var(--card);
  display: flex; align-items: center; justify-content: center; }
.crscanfirst .crsfico .bic, .crscanfirst .crsfico svg { width: 24px; height: 24px; margin: 0; }
.crscanfirst .crsftx { flex: 1 1 220px; min-width: 0; }
.crscanfirst .crsftx b { font-size: var(--fs-5); }
.crscanfirst [data-cr-goscan] { flex: none; }
/* E1 - the campaign calendar (every campaign's posts, in its colour) */
.crcalbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crcalmonth { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); min-width: 150px; }
.crcalnav { padding: 6px 12px; font-size: var(--fs-5); line-height: 1; }
.crcalfilter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.crcalfpill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); font-weight: 600;
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 999px; padding: 4px 5px 4px 10px; }
.crcalfpill .crcalfsw { width: 10px; height: 10px; border-radius: var(--r-1); flex: none; }
.crcalfpill button { border: none; background: var(--card); width: 18px; height: 18px; border-radius: 999px;
  cursor: pointer; color: var(--dim); line-height: 1; font-size: var(--fs-3); }
.crcalfclear { border: none; background: none; color: var(--amber-deep); font: inherit; font-weight: 600;
  font-size: var(--fs-3); text-decoration: underline; cursor: pointer; }
#crPlans [data-cr-showcal].incal { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 700; }
.crcalnote { margin-bottom: 10px; padding: 9px 13px; background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: var(--r-3); font-size: var(--fs-3); color: var(--amber-deep); font-weight: 600; }
.crcalscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.crcaldow, .crcalgrid { display: grid; grid-template-columns: repeat(7, 1fr); min-width: 640px; }
.crcaldow { background: var(--card2); border-bottom: 1px solid var(--line); }
.crcaldow span { padding: 7px 9px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); }
.crcalcell { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 5px 5px 7px; overflow: hidden; }
.crcalcell:nth-child(7n) { border-right: none; }
.crcalcell.out { background: var(--card2); }
.crcaldn { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--dim); display: block; margin-bottom: 4px; }
.crcalcell.today .crcaldn { background: var(--amber-bright); color: #231603; font-weight: 700; border-radius: var(--r-2); padding: 1px 6px; display: inline-block; }
.crcalchip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: var(--r-2); background: var(--card);
  border: 1px solid var(--line); margin-bottom: 4px; font-size: var(--fs-2); cursor: pointer;
  transition: opacity .18s, border-color .12s, box-shadow .12s; }
.crcalchip:hover { border-color: var(--amber); box-shadow: 0 2px 8px rgba(19,26,42,.10); }
.crcalchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.crcalchip .crcaldot { width: 6px; height: 6px; border-radius: var(--r-pill); flex: none; }
.crcalchip .crcaltm { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); flex: none; }
.crcalchip .crcalct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.crcalgrid.filtered .crcalchip.dimd { opacity: .16; }
.crcallegend { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.crleg-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.crleg-c { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); font-weight: 600; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 10px 3px 8px; cursor: pointer; font-family: inherit; }
.crleg-c:hover { border-color: var(--line2); }
.crleg-c.on { border-color: var(--amber); background: var(--amber-soft); }
.crleg-c .crleg-sw { width: 12px; height: 12px; border-radius: var(--r-1); flex: none; }
.crleg-st { font-size: var(--fs-3); color: var(--muted); }
.crleg-s { display: inline-flex; align-items: center; gap: 6px; }
.crleg-s i { width: 8px; height: 8px; border-radius: 999px; }
.mediarow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mth { width: 74px; height: 74px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card2) center/cover; position: relative; cursor: pointer; }
/* smart-fit keep-whole asset: contain the thumbnail so a baked title shows, not a crop */
.mth.mth-fit { background-size: contain; background-repeat: no-repeat; }
/* brief highlight when an in-page summary link scrolls you to a control */
.cmflash { animation: cmflash 1.5s ease; border-radius: var(--r-3); }
@keyframes cmflash {
  0% { box-shadow: 0 0 0 0 rgba(242,151,24,.55); }
  100% { box-shadow: 0 0 0 9px rgba(242,151,24,0); } }
@media (prefers-reduced-motion: reduce) { .cmflash { animation: none; } }
.mth.vid::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mth.sel { outline: 2px solid var(--amber); }
.mth:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mednorm { flex-basis: 100%; margin-top: 8px; padding: 9px 12px; border-radius: var(--r-3); font-size: var(--fs-3); line-height: 1.4;
  background: var(--amber-soft); color: var(--amber-deep); }
.mednorm.err { background: rgba(190, 40, 40, .1); color: #a33; }
/* "Add to a post" hand-off banner: sits at the top of Posts after the media popup
   sends an asset over, until the user drops it in, starts a new post, or cancels.
   Wraps on narrow screens so it never forces sideways scroll. */
.pendattach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-3);
  background: var(--amber-soft); border: 1px solid var(--amber); box-shadow: var(--shadow); }
.pendattach .pathumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-3);
  overflow: hidden; background: var(--card2); border: 1px solid var(--line); }
.pendattach .pathumb img, .pendattach .pathumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pendattach .patext { flex: 1 1 240px; min-width: 0; font-size: var(--fs-3); line-height: 1.4; color: var(--text); }
.pendattach .patext b { color: var(--amber-deep); }
.pendattach .paacts { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.btn.medpend { font-weight: 600; }
.mth .mthx { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; border: none; cursor: pointer; font-size: var(--fs-3); line-height: 1;
  background: rgba(7, 11, 20, .72); color: #fff; padding: 0; opacity: 0;
  transition: opacity .12s; }
.mth:hover .mthx, .mth .mthx:focus-visible { opacity: 1; }
@media (hover: none) { .mth .mthx { opacity: 1; } }
.mth .mthx:hover { background: rgba(200, 40, 40, .92); }
.mpkwrap .mpk { position: relative; max-width: min(880px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mpk img, .mpk video { max-width: 100%; max-height: 80vh; border-radius: var(--r-4);
  box-shadow: var(--shadow-lg); background: #000; }
.mpkname { color: #fff; font-size: var(--fs-2); letter-spacing: .1em;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.mpk .mlbclose { position: absolute; top: -14px; right: -14px; }
.mth .ord { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono);
  font-size: var(--fs-1); color: #fff; background: var(--amber); border-radius: var(--r-2); padding: 1px 5px; }

/* ---------- media grid ---------- */
.uprow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5);
  padding: 16px 20px; box-shadow: var(--shadow); }
.uprow input[type=file] { color: var(--muted); font-size: var(--fs-4); }
.uprow input[type=email], .uprow input[type=password], .uprow select {
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-3); padding: 10px 12px; font-family: var(--font-body); }
.mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.masset { border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow); }
/* grouped library view (P4-6): a creative's native sizes collapse into one card. The
   group spans the whole grid row so its expanded size strip sits directly beneath it. */
.minigroup { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.minigroup em { font-style: normal; font-size: var(--fs-1); color: var(--muted); letter-spacing: .04em; }
.mgroup { grid-column: 1 / -1; display: block; }
.mgroup .mgrouprep { position: relative; max-width: 220px; }
.msizes { position: absolute; left: 6px; bottom: 6px; z-index: 5; display: inline-flex;
  align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill);
  border: 0; cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .05em; background: rgba(11,18,32,.82); color: #fff; }
.msizes svg { width: 13px; height: 13px; }
.msizes svg:last-child { transition: transform .2s ease; }
.mgroup.open .msizes svg:last-child { transform: rotate(180deg); }
.msizes-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin: 8px 0 4px; padding: 8px; border: 1px dashed var(--line2);
  border-radius: var(--r-4); background: var(--card2); }
.msizes-more { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-1);
  letter-spacing: .04em; align-self: center; }
.masset .img { height: 112px; background: var(--card2); position: relative; overflow: hidden; }
/* slick load: a shimmer holds the tile until the real image decodes, then it
   fades + gently settles in (scale 1.03 -> 1). Overlays stay above via z-index. */
.masset .img::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.masset .img.loaded::before { display: none; }
.masset .mimg, .masset .img video { position: absolute; inset: 0; z-index: 1; width: 100%;
  height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.masset .mimg { transition: opacity .4s ease, transform .55s ease; transform: scale(1.03); }
.masset .img.loaded .mimg, .masset .img.loaded video { opacity: 1; }
.masset .img.loaded .mimg { transform: none; }
.masset .img .aibadge, .masset .img .mact, .masset .img.vid::after { z-index: 4; }
/* non-image library tiles: a PDF (print output, thumbnailed) + an audio track */
.masset .mkbadge { position: absolute; left: 6px; bottom: 6px; z-index: 4; background: rgba(11,18,32,.82); color: #fff; padding: 2px 7px; border-radius: var(--r-2); font-size: var(--fs-1); letter-spacing: .05em; }
.masset .maudio { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; color: var(--amber-deep); }
.masset .maudio svg { width: 34px; height: 34px; }
.masset .maudio .mono { font-size: var(--fs-1); color: var(--muted); letter-spacing: .07em; }
@media (prefers-reduced-motion: reduce) {
  .masset .img::before { animation: none; }
  .masset .mimg { transition: none; transform: none; } }
.masset .img.vid::after { content: "▶"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: var(--fs-6);
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* library load-in skeleton: shimmering .img tiles + placeholder meta bars */
.masset.mskel { pointer-events: none; }
.mskb { display: inline-block; height: 8px; width: 58%; border-radius: var(--r-1);
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.mskb.sm { width: 26%; }
@media (prefers-reduced-motion: reduce) { .mskb { animation: none; } }
.masset .meta { padding: 9px 12px; font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--dim); letter-spacing: .06em; display: flex; justify-content: space-between; }

/* Growth Tools: Post Agent - full-width brief + the what-happens flow line */
.agflow { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep);
  margin-bottom: 10px; }
#agentBox .agbrief, #agentBox #agBody { width: 100%; max-width: 760px; }
#agentBox .actions { align-items: center; flex-wrap: wrap; }
#agentBox .actions .hint { flex: 1 1 320px; }

/* Posts: the how-it-flows strip - bank -> posts -> media -> published */
.qflow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line2);
  border-radius: var(--r-4); background: var(--card2); }
.qflow-node { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 1 1 150px; min-width: 140px; padding: 10px 14px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); text-align: left;
  font-family: var(--font-body); color: var(--text); transition: all .18s ease; }
button.qflow-node, .qflow-node[role="button"] { cursor: pointer; }
button.qflow-node:hover, .qflow-node[role="button"]:hover {
  border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.qflow-node.here { border-color: var(--amber); background: var(--amber-soft); }
.qflow-node b { font-size: var(--fs-4); }
.qflow-node em { font-style: normal; font-size: var(--fs-2); color: var(--dim); line-height: 1.35; }
/* the active ("here") node sits on amber-soft, where --dim drops below AA; its
   caption should be more prominent anyway - lift it to --muted. */
.qflow-node.here em { color: var(--muted); }
.qflow-node .qfico { font-size: var(--fs-5); display: inline-flex; }
.qflow-node .qfico svg { width: 21px; height: 21px; }
.qflow-node .qfn { font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep); }
/* stage illustration - grows to fill the tall Posts / Published cards and
   centres itself in the space below the label (house line-art language) */
.qflow-node .qfart { flex: 1 1 auto; align-self: stretch; display: flex;
  align-items: center; justify-content: center; min-height: 96px; padding: 14px 6px 4px; }
.qflow-node .qfart svg { width: 100%; max-width: 172px; height: auto; opacity: .8; }
@media (max-width: 900px) { .qflow-node .qfart { min-height: 78px; } }
.qflow-arrow { align-self: center; color: var(--dim); font-size: var(--fs-6); flex: none; }
.qflow-srcs { display: flex; flex-direction: column; gap: 2px; flex: 1 1 170px;
  min-width: 150px; align-items: stretch; }
.qflow-srcs .qflow-node { flex: 1; min-width: 0; }
.qflow-bidi { align-self: center; color: var(--amber-deep); font-size: var(--fs-5);
  line-height: 1; padding: 1px 6px; cursor: help; }
.qcarwrap { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1);
  letter-spacing: .1em; color: var(--dim); }
@media (max-width: 900px) { .qflow-arrow { display: none; } }

/* bank: the ideas card grid - three columns of clean, scannable cards */
.bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 4px 2px 12px; }
.bkcard { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-4); background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; transition: border-color .18s ease; }
.bkcard:hover { border-color: var(--amber); }
.bkcard b { font-size: var(--fs-4); line-height: 1.35; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the title is a clamped (overflow:hidden) flex item, so its automatic minimum height is 0:
   it must never shrink, or a crowded card cuts its lines mid-glyph - two whole lines or one */
.bkcard > b { flex: none; }
.bkcard p { font-size: var(--fs-3); color: var(--muted); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1; }
.bkc-top { display: flex; align-items: center; gap: 8px; }
.bkc-cat { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep);
  background: var(--amber-soft); border-radius: var(--r-pill); padding: 3px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
/* bulk-import provenance chip: sits beside the topic label, icon sized to match */
.bkc-imported { display: inline-flex; align-items: center; gap: 4px; max-width: none;
  color: var(--amber-deep); background: var(--amber-soft); }
.bkc-imported svg { width: 12px; height: 12px; flex: none; }
.bkc-st { font-size: var(--fs-1); letter-spacing: .1em; padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap; }   /* a status like "IN QUEUE" stays on one line, never wraps */
.bkc-st.ready { color: var(--green); background: var(--green-soft); }
.bkc-st.queued { color: var(--amber-deep); background: var(--amber-soft); }
.bkc-st.retired { color: var(--dim); background: var(--card2); }
.bkc-pin { display: flex; align-items: center; gap: 9px; }
.bkc-pin img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-3);
  border: 2px solid var(--amber); background: var(--card2); flex: none; }
.bkc-pin span { font-size: var(--fs-1); letter-spacing: .09em; color: var(--amber-deep); }
/* wrap the action row (voice label + buttons) so a 3-4 button footer never clips on a
   narrow 2-col card - matches the .bktrail wrap pattern; gap gives wrapped lines spacing. */
.bkc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.bkc-foot .bkc-plat { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
/* each button stays intact on one line; the ROW wraps, not the label inside a button */
.bkc-foot .btn { padding: 4px 10px; font-size: var(--fs-2); white-space: nowrap; }
.bkc-foot .hlink { font-size: var(--fs-1); letter-spacing: .06em; }
/* Per-idea lifecycle trail: Ready > In queue > Scheduled > Published. A clickable button
   that names the pipeline, marks where THIS idea is, and opens Posts. It WRAPS (never a
   fixed stepper that could overflow a narrow card); the compact list view drops it. */
.bktrail { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; width: 100%;
  margin: 6px 0 0; padding: 7px 0 1px; background: none; border: none; border-top: 1px solid var(--line);
  cursor: pointer; text-align: left; font-family: var(--font-mono); }
.bktrail:hover { border-top-color: var(--line2); }
.bktrail:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-2); }
.bktrail-node { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1);
  letter-spacing: .05em; color: var(--dim); }
.bktrail-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid var(--line2);
  background: var(--card2); display: inline-flex; align-items: center; justify-content: center; }
.bktrail-dot svg { width: 7px; height: 7px; color: #fff; }
.bktrail-sep { color: var(--line2); font-style: normal; font-size: var(--fs-2); }
.bktrail-node.done .bktrail-dot { background: var(--green); border-color: var(--green); }
.bktrail-node.done { color: var(--muted); }
.bktrail-node.on .bktrail-dot { background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 2.5px var(--amber-soft); }
.bktrail-node.on { color: var(--text); font-weight: 700; }
.bktrail-node.todo { color: var(--dim); }
/* "posts <when>" for a queued/scheduled idea: its own line under the nodes, quiet but clear */
.bktrail-when { flex: 1 0 100%; margin-top: 1px; font-size: var(--fs-1); letter-spacing: .05em;
  color: var(--amber-deep); }
#bankList.aslist .bktrail { display: none; }   /* the compact rows show the status pill instead */

/* ---------- Ideas: LIST display mode ----------
   The SAME idea cards (#bankList .bkcard), reflowed into compact scannable rows via a
   single .aslist class - identical DOM, so every card action still works; only the
   layout changes. Detail (body copy, film brief) is hidden in the list to keep one
   clean line per idea; the hook stays as the headline, and clicking the row opens the
   full idea to read/edit everything. Wraps on mobile - never a sideways scroll. */
#bankList.aslist .bkgrid { display: flex; flex-direction: column; gap: 7px; }
#bankList.aslist .bkcard { flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: 4px 12px; padding: 8px 12px 8px 15px; border-radius: var(--r-3); position: relative; }
/* status-colour spine down the left edge: ready/queued/retired at a glance */
#bankList.aslist .bkcard::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--line2); }
#bankList.aslist .bkcard:has(.bkc-st.ready)::before { background: var(--green); }
#bankList.aslist .bkcard:has(.bkc-st.queued)::before { background: var(--amber); }
#bankList.aslist .bkcard:has(.bkc-st.retired)::before { background: var(--line); }
/* left cluster (select + topic + status): a fixed width so the status pill and the
   hook after it line up down the whole list - the eye scans a straight column. The
   topic ellipsises within; the spacer pushes the status to the cluster's right edge. */
#bankList.aslist .bkc-top { flex: 0 0 202px; gap: 7px; min-width: 0; }
#bankList.aslist .bkc-top .spacer { display: block; }
#bankList.aslist .bkc-cat { flex: 0 1 auto; min-width: 0; max-width: none; }
/* the hook is the row's readable label: one line, fills the middle, ellipsis if long */
#bankList.aslist .bkcard > b { flex: 1 1 240px; min-width: 120px; margin: 0;
  -webkit-line-clamp: 1; font-size: var(--fs-3); line-height: 1.4; }
/* body + film brief are detail - hidden in the scannable list (open the idea to read) */
#bankList.aslist .bkcard > p, #bankList.aslist .bkc-brief { display: none; }
#bankList.aslist .bkc-meta { flex: 0 0 auto; margin: 0; white-space: nowrap; font-size: var(--fs-1); }
/* pinned photo shrinks to a small thumb; its long label drops in the tight row */
#bankList.aslist .bkc-pin { flex: 0 0 auto; gap: 0; }
#bankList.aslist .bkc-pin img { width: 30px; height: 30px; border-width: 1.5px; }
#bankList.aslist .bkc-pin span { display: none; }
/* right cluster (platform voice + actions) stays together and does not grow */
#bankList.aslist .bkc-foot { flex: 0 0 auto; margin: 0; gap: 6px; }
#bankList.aslist .bkc-foot .spacer { display: none; }
/* narrow screens: give the hook its own line so nothing clips; drop the voice label */
@media (max-width: 560px) {
  #bankList.aslist .bkcard > b { flex-basis: 100%; -webkit-line-clamp: 2; }
  #bankList.aslist .bkc-foot .bkc-plat { display: none; }
}

/* ---------- Your Topics: LIST display mode ----------
   The SAME topic cards (#bankCards .bcard), reflowed into compact scannable rows via a
   single .aslist class - identical DOM, so every topic action still works; only the
   layout changes. Deliberately mirrors the Ideas list view (spine, one clean row each)
   so the two panels read as one system. Reads left-to-right in DOM order:
   [spine] name .......... [provenance] [usable/total ready] [bar] [actions]. */
.bcard-frac { display: none; }        /* compact count is for the LIST row only */
.cards.aslist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 0; }
.cards.aslist .bcard { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
  gap: 4px 14px; padding: 9px 14px 9px 16px; border-radius: var(--r-3);
  position: relative; min-height: 44px; box-shadow: none; }
.cards.aslist .bcard:hover { transform: none; background: var(--card2); }
/* the topic you clicked to filter the ideas below stays clearly marked in the list too
   (the grid's inset-shadow cue does not read on a compact row, so use an amber fill) */
.cards.aslist .bcard.sel, .cards.aslist .bcard.sel:hover { background: var(--amber-soft); border-color: var(--amber); }
/* provenance colour spine down the left edge (matches the Ideas list spine) */
.cards.aslist .bcard::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--line2); }
.cards.aslist .bcard:has(.prov-rotation)::before { background: var(--amber); }
.cards.aslist .bcard:has(.prov-scanned)::before { background: var(--scan); }
.cards.aslist .bcard:has(.prov-removed)::before { background: var(--line2); }
.cards.aslist .bcard:has(.prov-own)::before { background: var(--neutral); }
/* the topic NAME grows to absorb the free space, so the fixed-width metric slots after it
   (count, bar, actions) pin to the same columns down the whole list; it ellipsises when a
   long name would otherwise crowd them. The badge floats just before the count. */
.cards.aslist .bcat-name { flex: 1 1 auto; min-width: 0; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards.aslist .prov-badge { flex: 0 0 auto; margin: 0; }
/* card-only detail is hidden in the scannable row (the fraction carries the count) */
.cards.aslist .bcard > b, .cards.aslist .bcard-readylbl, .cards.aslist .bbar-sub { display: none; }
/* count in a FIXED-width, right-aligned slot: usable / total ever written (M3 slot model) */
.cards.aslist .bcard-frac { display: inline-flex; align-items: baseline; justify-content: flex-end;
  gap: 3px; flex: 0 0 84px; margin: 0; font-size: var(--fs-1);
  letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.cards.aslist .bcard-frac b { display: inline; font-family: var(--font-mono);
  font-size: var(--fs-3); color: var(--text); padding: 0; }
.cards.aslist .bcard-frac .bcard-fracof { color: var(--dim); }
/* thin progress bar in a fixed slot, then the action icons at the trailing edge. The
   action slot reserves a fixed width (topics carry 1-3 icons), so the count + bar columns
   stay aligned down the whole list whatever actions a given topic offers. */
.cards.aslist .bbar { flex: 0 0 92px; margin: 0; }
.cards.aslist .bcard-acts { flex: 0 0 auto; margin: 0; justify-content: flex-end; min-width: 106px; }
.cards.aslist .btn.icob { width: 30px; height: 30px; }
/* narrow: allow a 2-row wrap - the name takes its own line, the meta row sits below it,
   so nothing clips or scrolls sideways on a phone. Above this the row stays one line and
   the name ellipsises instead (the metric columns never wrap). */
@media (max-width: 560px) {
  .cards.aslist .bcard { flex-wrap: wrap; }
  .cards.aslist .bcat-name { flex-basis: 100%; }
  .cards.aslist .bcard-frac { margin-left: auto; }
  .cards.aslist .bbar { flex-basis: 64px; }
}

/* Overview: YOUR CREATIONS strip */
.crncard { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-3); margin-bottom: 10px;
  background: var(--card2); flex-wrap: wrap; }
.crncard.need { border-left: 3px solid var(--amber); }
.crnico { flex: none; display: inline-flex; }
.crnico .bic { width: 22px; height: 22px; margin-right: 0; }
.crnbody { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crnbody b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crnmeta { font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); }
/* "Type of generation" filter row above the creations grid. Mirrors the house pill
   look (.filterchips) but WRAPS (never a mobile sideways scroll). */
.crnfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.crnfilter { background: none; border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim); cursor: pointer; }
.crnfilter.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
.crnfilter .crnfn { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.crnfilter.on .crnfn { opacity: .8; }
.crnvisuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 4px 0 10px; }
.crnmore { margin: 2px 0 12px; font-size: var(--fs-2); }
.crnvis { position: relative; border: 1px solid var(--line2); border-radius: var(--r-3);
  overflow: hidden; background: var(--card); display: flex; flex-direction: column;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.crnvis.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
/* the whole card opens the creation (role=button) - signal it: hand cursor + hover lift */
.crnvis:hover { border-color: var(--amber-bright); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.crnvis img, .crnvis video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  position: relative; z-index: 1; opacity: 0; transition: opacity .4s ease; }
.crnvis.loaded img, .crnvis.loaded video { opacity: 1; }
/* shimmer covers only the image box (the 4/3 top) until the thumb decodes */
.crnvis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3;
  z-index: 0; background: linear-gradient(100deg, #1c2740 30%, #2b3a58 50%, #1c2740 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.crnvis.loaded::before { display: none; }
.crnvis .crnord, .crnvis .crnsrc { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .crnvis::before { animation: none; } .crnvis img, .crnvis video { transition: none; } }
.crnord { position: absolute; top: 6px; left: 6px; background: var(--amber); color: #1a1206;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-2); font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.crnsrc { position: absolute; top: 6px; right: 6px; font-size: var(--fs-1); letter-spacing: .08em;
  background: rgba(7,11,20,.66); color: #fff; border-radius: var(--r-pill); padding: 2px 7px; }
.crnname { font-size: var(--fs-2); color: var(--muted); padding: 6px 8px 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.crnacts { display: flex; gap: 6px; padding: 4px 8px 8px; }
.crnbtn { font-size: var(--fs-2); padding: 4px 8px; flex: 1; }
.crntpl { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); margin: 2px 0 6px; }
/* section dividers inside YOUR CREATIONS - give the panel clear rhythm so each
   group (campaigns / run-another) reads as its own labelled band */
.crnsec { font-size: var(--fs-1); letter-spacing: .13em; color: var(--dim);
  text-transform: uppercase; font-weight: 700; margin: 16px 0 8px;
  padding-top: 12px; border-top: 1px solid var(--line2); }
.crnsec:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }
/* the "this is a campaign" tag that sits above each campaign name */
/* NOTE: .crpkind is the 40px kind-icon SQUARE (see dashboard.html <style>), used on the
   Campaigns-tab card. The crn "Your campaigns" card's one-line title uses .crptitle-line
   + .crpeyebrow instead - it must never reuse .crpkind or the text gets squashed into the
   square. */
/* RUN ANOTHER: larger, tappable replay cards (Peter: make them bigger) */
.crnruns { display: flex; gap: 10px; flex-wrap: wrap; }
.crnrun { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 16px; font: inherit; font-size: var(--fs-4); font-weight: 600;
  color: var(--ink, inherit); background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--r-3); transition: border-color .12s, background .12s, transform .06s; }
.crnrun .cic { width: 20px; height: 20px; margin: 0; flex: none; }
.crnrun:hover { border-color: var(--amber); background: var(--amber-soft);
  transform: translateY(-1px); }
.crnrun:active { transform: translateY(0); }
.crnrunlbl { white-space: nowrap; }

/* bulk AI rename: selection mode states + bar + why-names-matter explainer */
.masset.mselable { cursor: pointer; }
.masset.mselable:hover { border-color: var(--amber); }
.masset.msel { outline: 2px solid var(--amber); outline-offset: 1px;
  border-color: var(--amber); }
.masset.mdim { opacity: .38; pointer-events: auto; }
.masset .mtick { position: absolute; top: 6px; right: 6px; z-index: 5; width: 24px;
  height: 24px; border-radius: 50%; border: 2px solid #fff; display: flex;
  align-items: center; justify-content: center; font-size: var(--fs-2);
  background: rgba(7,11,20,.45); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.masset.msel .mtick { background: var(--amber); }
.masset .needname { position: absolute; bottom: 5px; left: 5px; z-index: 3;
  font-size: var(--fs-1); letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--amber); color: #1a1206; font-weight: 700; }
/* content-flow flags: queued as post-next (★) / pinned to a bank idea (📌).
   bottom-right so they never collide with the aibadge (top-left), the action
   buttons (top-right) or NAME ME (bottom-left) */
.masset .mflag { position: absolute; bottom: 5px; right: 5px; z-index: 3;
  font-size: var(--fs-1); letter-spacing: .08em; padding: 3px 7px; border-radius: var(--r-pill);
  background: rgba(7, 11, 20, .78); color: #ffd28a; font-weight: 700; }
.masset .mflag.pin { bottom: 26px; color: #9ad1ff; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--amber); background: var(--amber-soft);
  border-radius: var(--r-3); padding: 8px 12px; margin: 0 0 12px; }
.bulkbar .spacer { flex: 1; }
.bulkbar #bulkCount { font-size: var(--fs-4); }
/* Media folder bar: flat folders (chips) + breadcrumb when inside one */
/* nested folder bar: a breadcrumb row, the current folder's subfolders as chips,
   then the manage-actions for the folder you're inside */
.mfolders { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 0 0 14px; }
.mfolders:empty { display: none; }
.mflabel { font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin-right: 2px; }
.mfcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: var(--fs-3); }
.mfcrumb-b { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit;
  padding: 3px 8px; border-radius: var(--r-3); }
.mfcrumb-b:hover { background: var(--amber-soft); color: var(--amber-deep); }
.mfcrumb-b.on { color: var(--text); font-weight: 650; }
.mfsep { color: var(--dim); }
.mfchips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.mfchip { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-pill);
  padding: 6px 13px; font-size: var(--fs-3); cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; color: var(--text); }
.mfchip:hover { border-color: var(--amber); }
.mfchip.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 600; }
.mfchip.mfnew { border-style: dashed; color: var(--muted); }
/* drag a media tile onto a folder chip OR a breadcrumb step to file it */
.mfchip.mfdrop, .mfcrumb-b.mfdrop { outline: 2px solid var(--amber); outline-offset: 1px;
  background: var(--amber-soft); color: var(--amber-deep); }
.masset.mdragging { opacity: .5; }
.mfn { font-size: var(--fs-1); color: var(--muted); background: var(--card2); border-radius: var(--r-pill);
  padding: 0 7px; min-width: 18px; text-align: center; }
.mfchip.on .mfn { background: var(--card); color: var(--amber-deep); }
.mfsub { font-size: var(--fs-1); color: var(--amber-deep); margin-left: 1px; }   /* "N subfolders" cue */
.mfacts { display: flex; align-items: center; gap: 7px; }
.mfempty { font-size: var(--fs-2); color: var(--dim); align-self: center; padding: 4px 0; }
.movemenu-empty { font-size: var(--fs-3); color: var(--dim); padding: 8px 10px; }
/* Move-to popover menu */
.movemenu { position: fixed; z-index: 1300; width: 216px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: 0 14px 40px rgba(19, 26, 42, .28);
  padding: 6px; max-height: 60vh; overflow-y: auto; }
.movemenu-h { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); padding: 6px 10px 4px; }
.movemenu-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0;
  background: none; border-radius: var(--r-3); padding: 9px 10px; font-size: var(--fs-4); cursor: pointer; color: var(--text); }
.movemenu-i:hover { background: var(--amber-soft); color: var(--amber-deep); }
.movemenu-i .mfn { margin-left: auto; }
.movemenu-i.mvnew { border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); }
/* logo position picker dimmed when the logo is toggled off (Titled Photo) */
.poswrap.mutedctl { opacity: .4; pointer-events: none; }
.namesnote { border: 1px solid var(--line2); border-left: 3px solid var(--amber);
  background: var(--card2); border-radius: var(--r-3); margin: 0 0 12px;
  font-size: var(--fs-4); color: var(--muted); line-height: 1.55; }
.namesnote b { color: var(--text); }
/* collapsed by default: just a one-line header the customer can expand */
.namesnote-head { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  padding: 11px 15px; color: var(--text); }
.namesnote-head .spacer { flex: 1; }
.namesnote-ic { width: 17px; height: 17px; color: var(--amber-deep); flex: none; }
.namesnote-hint { font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim);
  text-transform: uppercase; }
.namesnote-chev { width: 16px; height: 16px; color: var(--muted); flex: none;
  transition: transform .18s ease; }
.namesnote.open .namesnote-chev { transform: rotate(180deg); }
.namesnote-head:hover .namesnote-hint,
.namesnote-head:hover .namesnote-chev { color: var(--amber-deep); }
.namesnote-body { padding: 2px 16px 13px 42px; }
.namesnote-body .namesflow { display: block; font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--amber-deep); margin: 2px 0 8px; }
.namesnote-tip { margin: 12px 0 0; color: var(--dim); }
@media (max-width: 640px) {
  .namesnote-hint { display: none; }
  .namesnote-body { padding-left: 16px; }
}
.bulkres { display: flex; flex-direction: column; gap: 6px; max-height: 46vh;
  overflow-y: auto; }
.bulkrow { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line2); border-radius: var(--r-3); font-size: var(--fs-3); }
.bulkrow.bad { border-color: var(--red, #c0392b); }
.bulkrow .bulkold { color: var(--dim); text-decoration: line-through;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bulkrow .bulkarr { color: var(--amber-deep); flex: none; }
.bulkrow .bulknew { color: var(--text); font-weight: 600; flex: 1; }
.bulkrow.bad .bulknew { color: var(--red, #c0392b); font-weight: 400; }

/* ---------- outreach ---------- */
.oritem { border: 1px solid var(--line); border-radius: var(--r-5); background: var(--card);
  padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.oritem .top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.oritem .top b { flex: 1; font-size: var(--fs-4); }
.ordraft { border: 1px dashed var(--line2); background: var(--card2); border-radius: var(--r-3);
  padding: 11px 13px; color: var(--muted); font-size: var(--fs-4); margin: 8px 0; }
.oritem .actions { margin: 8px 0 0; }
.orbar { display: flex; gap: 10px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.orbar input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; font-size: var(--fs-5); color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.orbar input:focus { outline: none; border-color: var(--amber); }
.orbar .btn { flex: 0 0 auto; }
.ornets { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: -6px 0 18px; font-size: var(--fs-4); color: var(--muted); }
.ornets-lbl { font-weight: 600; }
.ornets label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ornets input { accent-color: var(--amber); }

/* Flo intro band + suggested-topic chips */
.floband { display: flex; gap: 12px; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--r-4); padding: 14px 16px; margin: 4px 0 16px; }
.floband-body { flex: 1; min-width: 0; }
.floband-say { margin: 3px 0 0; font-size: var(--fs-5); line-height: 1.5; color: var(--text); }
.floband-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
/* positive-targeting quick actions under the topic chips (add a rival / a community) */
.floband-acts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; }
.floband-acts:empty { display: none; }
.floact-link { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-2);
  font-weight: 600; color: var(--amber-deep); background: none; border: 0; padding: 0; cursor: pointer; }
.floact-link:hover { text-decoration: underline; }
.floact-link svg { width: 14px; height: 14px; }
/* collapse the intro band to a slim, restorable strip (progressive disclosure) */
.floband-x { flex: none; align-self: flex-start; margin: -3px -5px 0 6px; padding: 6px; line-height: 0;
  background: none; border: 0; color: var(--dim); cursor: pointer; border-radius: var(--r-2); }
.floband-x:hover { color: var(--amber-deep); background: var(--amber-soft); }
.floband-x svg { width: 16px; height: 16px; display: block; }
.orflo-mini { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 16px; padding: 7px 13px;
  font: inherit; font-size: var(--fs-3); font-weight: 600; color: var(--amber-deep); background: var(--card);
  border: 1px solid var(--amber); border-radius: var(--r-pill); cursor: pointer; max-width: 100%; }
.orflo-mini:hover { background: var(--amber-soft); }
.orflo-mini-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.orflo-mini .bic { flex: none; }
.orflo-mini svg { width: 15px; height: 15px; }
.orchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: var(--fs-3); font-weight: 600; color: var(--amber-deep); background: var(--card);
  border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 6px 13px;
  transition: background .15s, transform .1s; }
.orchip:hover { background: var(--amber-soft); }
.orchip:active { transform: scale(.97); }
.orchip svg { width: 15px; height: 15px; }

/* Outreach thread cards */
.orcard { border: 1px solid var(--line); border-radius: var(--r-5); background: var(--card);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s; }
.orcard:hover { border-color: var(--amber); }
.orcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ornet { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: var(--r-pill); padding: 4px 10px; }
.ornet svg { width: 15px; height: 15px; }
.ormatch { margin-left: auto; font-size: var(--fs-2); font-weight: 600; color: var(--muted); }
.orthread { display: flex; align-items: flex-start; gap: 10px; text-decoration: none;
  color: var(--text); border-radius: var(--r-3); padding: 2px; margin-bottom: 12px; }
.orthread:hover .orquote { color: var(--amber-deep); }
.orthread:hover .ororb { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.orquote { flex: 1; font-size: var(--fs-5); line-height: 1.45; font-weight: 600; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ororb { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-3);
  font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 10px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.ororb svg { width: 14px; height: 14px; }
.orreply { border: 1px dashed var(--line2); background: var(--card2); border-radius: var(--r-3); padding: 11px 13px; }
.orreply-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 5px; }
.orreply-lbl svg { width: 15px; height: 15px; }
.orreply-text { font-size: var(--fs-4); line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.ordim { color: var(--dim); font-style: italic; }
.orcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.orcard-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.orcard-actions .btn svg { width: 16px; height: 16px; }
.orcard-actions .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.orcard-actions .btn.ghost:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.orcard-actions .orskip { margin-left: auto; }
.orcard-actions .btn.copied { background: var(--amber-soft) !important; color: var(--amber-deep) !important;
  border-color: var(--amber) !important; transition: none; }
.orcard-actions .btn.sm { padding: 6px 11px; font-size: var(--fs-3); }
/* #8 account-safety nudge under a drafted reply */
.orsafe { margin-top: 8px; font-size: var(--fs-3); line-height: 1.4; color: var(--muted);
  border-left: 2px solid var(--amber); padding: 4px 0 4px 9px; }
/* #9 per-lead outcome capture (shown on Done leads) */
.oroutcome { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px;
  padding-top: 11px; border-top: 1px dashed var(--line2); }
.oroc-lbl { font-size: var(--fs-2); font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.orcard .oroc.oroc-on { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
/* #9 outcome funnel banner on the Done tab */
.orfunnel { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; padding: 12px 15px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-4); }
.orfun-c { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-3); color: var(--muted); }
.orfun-c b { font-size: var(--fs-6); color: var(--text); font-weight: 700; }

/* Outreach toolbar: status tabs + sort/filter/brand-link */
.ortoolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 4px 0 14px; }
.ortabs { display: inline-flex; gap: 4px; background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 4px; }
.ortab { font: inherit; font-size: var(--fs-4); font-weight: 600; color: var(--muted); background: transparent;
  border: 0; border-radius: var(--r-3); padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ortab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.orcount { font-size: var(--fs-2); font-weight: 700; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: var(--r-pill); padding: 1px 7px; }
.orctrls { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.orbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); color: var(--muted); cursor: pointer; }
.orbl input { accent-color: var(--amber); }
.orbl input:disabled { opacity: .4; cursor: not-allowed; }
.orctrls select { font: inherit; font-size: var(--fs-3); color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3); padding: 7px 10px; cursor: pointer; }
.orctrls select:focus { outline: none; border-color: var(--amber); }
/* card meta row + status badges + notes */
.ormeta { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--muted); }
.ormeta-i { display: inline-flex; align-items: center; gap: 4px; }
.ormeta-i svg { width: 13px; height: 13px; }
.ordot { opacity: .45; }
.orstat { font-size: var(--fs-1); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 3px 9px; }
.orstat-actioned { color: var(--green); background: var(--green-soft); }
.orstat-dismissed { color: var(--muted); background: var(--card2); }
.orstat-new, .orstat-drafted { color: var(--amber-deep); background: var(--amber-soft); }
.ornotes { display: block; width: 100%; margin-top: 11px; font: inherit; font-size: var(--fs-4); color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px;
  resize: none; overflow: hidden; line-height: 1.45; }
.ornotes::placeholder { color: var(--dim); }
.ornotes:focus { outline: none; border-color: var(--amber); background: var(--card); }
/* listening v2: budget line + daily toggle, scoreboard, why-it-matched chips,
   highlighted terms, editable reply + redraft tones, mute, error state */
.orscan-status { display: flex; align-items: flex-start; gap: 9px; margin: -8px 0 14px; padding: 10px 13px;
  font-size: var(--fs-4); line-height: 1.45; color: var(--text); background: var(--amber-soft);
  border: 1px solid var(--amber); border-radius: var(--r-4); }
.orscan-status[hidden] { display: none; }
.orsc-spin { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
  border: 2px solid var(--amber); border-top-color: transparent; animation: orspin .8s linear infinite; }
@keyframes orspin { to { transform: rotate(360deg); } }
.orchip:disabled { opacity: .45; cursor: wait; transform: none; }
.ordrafting { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-style: italic; }
.ordrafting .orsc-spin { margin-top: 0; }
.orbar .btn:disabled { opacity: .7; cursor: wait; }
.orrow2 { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: -8px 0 14px; }
.orbudget { font-size: var(--fs-3); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.orbudget[hidden] { display: none; }
.orbudget b { color: var(--text); }
.orbudget .orbi svg, .orerr .orbi svg { width: 15px; height: 15px; }
.orautol { font-size: var(--fs-4); color: var(--text); }
.orstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 0 0 14px; }
.orstats:empty { display: none; }
.orstat-t { font: inherit; text-align: left; cursor: pointer; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-4); padding: 10px 12px; min-width: 0;
  transition: border-color .15s, background .15s; }
.orstat-t:hover { border-color: var(--amber); background: var(--amber-soft); }
.orstat-t b { display: block; font-size: var(--fs-7); line-height: 1.1; font-weight: 700; }
.orstat-t span { display: block; font-size: var(--fs-2); color: var(--muted); margin-top: 3px; line-height: 1.3; }
.orstat-t.warn b { color: var(--amber-deep); }
.orchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 10px; }
.orintent { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 9px;
  background: var(--card2); color: var(--muted); border: 1px solid var(--line); }
.orintent-comparison, .orintent-recommendation { color: var(--green); background: var(--green-soft); border-color: transparent; }
.orintent-question { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; }
.orintent-complaint { color: var(--red); background: var(--red-soft); border-color: transparent; }
/* first-responder advantage: a still-fresh thread worth an early reply */
.orfresh { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 9px;
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid transparent; }
.orcomp { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); font-weight: 600; color: var(--amber-deep); }
.orcomm { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); color: var(--muted); }
.orcomm a { color: var(--amber-deep); text-decoration: underline dotted; }
.orchips .orci svg, .orcomp .orci svg, .orcomm .orci svg, .orfresh .orci svg { width: 13px; height: 13px; }
.orquote mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.orterms { display: flex; flex-wrap: wrap; gap: 5px; margin: -6px 0 10px; }
.orterm { font-size: var(--fs-2); color: var(--muted); background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px 8px; }
.orreply-lbl { width: 100%; }
.orreply-edit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1);
  letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--muted); }
.orreply-edit svg { width: 12px; height: 12px; }
.orreplyedit { display: block; width: 100%; font: inherit; font-size: var(--fs-4); line-height: 1.5; color: var(--text);
  background: transparent; border: 0; padding: 0; resize: none; overflow: hidden; min-height: 44px; }
.orreplyedit:focus { outline: none; }
.orreply.editing { border-style: solid; border-color: var(--amber); background: var(--card); }
.orredraft { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.orredraft select { font: inherit; font-size: var(--fs-3); color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3); padding: 5px 8px; cursor: pointer; }
.orredraft select:focus { outline: none; border-color: var(--amber); }
.orredraft .btn.ghost, .orctrls .btn.ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent;
  color: var(--muted); border: 1px solid var(--line); text-decoration: none; }
.orredraft .btn.ghost:hover, .orctrls .btn.ghost:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.orredraft .btn.sm, .orctrls .btn.sm { padding: 6px 11px; font-size: var(--fs-3); }
.orredraft .btn svg, .orctrls .btn svg { width: 14px; height: 14px; }
.orask { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-3); font-weight: 600; color: var(--amber-deep); }
.orask svg { width: 14px; height: 14px; }
.orerr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid var(--amber); border-radius: var(--r-5); background: var(--amber-soft); color: var(--text); }
.orerr > div { flex: 1 1 240px; font-size: var(--fs-4); line-height: 1.45; }
/* v3: reply checks, snippets, follow-ups, topics, summary panel */
.orchecks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.orchecks[hidden] { display: none; }
.orchk { display: inline-flex; align-items: flex-start; gap: 5px; font-size: var(--fs-2); line-height: 1.35;
  border-radius: var(--r-3); padding: 4px 8px; background: var(--amber-soft); color: var(--amber-deep); }
.orchk-info { background: var(--card2); color: var(--muted); }
.orchk svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.orredraft .orsnip { max-width: 180px; }
.orsave { font-size: var(--fs-2); margin-left: 2px; }
.orstat-due { color: var(--amber-deep); background: var(--amber-soft); }
.orfu .orfu-on { font-size: var(--fs-2); color: var(--amber-deep); font-weight: 600; }
.ortopics { margin: -4px 0 14px; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--card); }
.ortopics[hidden] { display: none; }
.ortp-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit;
  font-size: var(--fs-4); font-weight: 600; color: var(--text); background: transparent; border: 0; padding: 10px 14px; cursor: pointer; }
.ortp-head .orci svg { width: 14px; height: 14px; }
.ortp-sub { font-size: var(--fs-2); font-weight: 500; color: var(--muted); }
.ortp-wrap { overflow-x: auto; padding: 0 14px 12px; }
.ortp { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.ortp th { text-align: left; font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 6px 0; }
.ortp td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line); }
.ortp-dead td { color: var(--muted); }
.orpanel { padding: 0 0 18px; }
.orpanel h2 { margin: 12px 0 6px; }
.orpanel h3 { margin: 18px 0 6px; font-size: var(--fs-5); }
.orpanel p, .orpanel .orsum-list { font-size: var(--fs-4); line-height: 1.5; color: var(--text); }
.orsum-list { padding-left: 18px; }
.orsum-list li { margin: 4px 0; }
.orsum-prev { border: 1px solid var(--line); border-radius: var(--r-4); padding: 12px 14px; margin: 10px 0 12px; background: #fff; color: #1a1a2e; max-height: 46vh; overflow: auto; }
.orsn-list { margin-top: 12px; display: grid; gap: 10px; }
.orsn { border: 1px solid var(--line); border-radius: var(--r-4); padding: 10px 12px; background: var(--card2); }
.orsn-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.orsn-net, .orsn-uses { font-size: var(--fs-2); color: var(--muted); }
.orsn-body { font-size: var(--fs-4); line-height: 1.45; white-space: pre-wrap; }
.orsn .btn.ghost { display: inline-flex; align-items: center; gap: 4px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.orsn .btn.ghost svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .orcard-head { flex-wrap: wrap; row-gap: 6px; }
  .ormatch { margin-left: 0; }
  .orcard-actions .orskip { margin-left: 0; }
  .orcard-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* a long community name ("Mute groups/queenslandsmallbusiness") cut the card at 375px:
     the button now shrinks to the card and the name ends in an ellipsis (the confirm
     dialog still shows it in full) */
  .orcard-actions .btn.ormute { min-width: 0; max-width: 100%; }
  .orcard-actions .ormuteterm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ortoolbar { flex-direction: column; align-items: stretch; }
  .ortabs { justify-content: space-between; }
  .ortab { flex: 1 1 auto; justify-content: center; padding: 7px 8px; }
  .orctrls { justify-content: flex-start; }
  .orctrls select { flex: 1 1 130px; min-width: 0; max-width: 100%; }
  .orstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- inbox (inbound - Flo sorts + drafts, you send) ---------- */
/* Social Inbox freshness + refresh row - always visible above the tabs, wraps at 375px */
.ibfresh { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ibfresh-when { font-size: var(--fs-3); color: var(--dim); }
.ibfresh-when.ibfresh--stale { color: var(--amber-deep); }
.ibrefresh { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: var(--fs-3); font-weight: 600; padding: 6px 13px; border-radius: 999px;
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid var(--amber); }
.ibrefresh:hover { background: var(--amber); color: #fff; }
.ibrefresh:disabled { opacity: .6; cursor: default; }
.ibrefresh svg { width: 15px; height: 15px; }
.ibrefresh.spinning svg { animation: ibspin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes ibspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ibrefresh.spinning svg { animation: none; } }
/* per-account coverage chips: honest states so a quiet or gated account never looks broken */
.ibcov-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 6px; }
.ibcov { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-2);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card2); color: var(--dim); text-align: left; }
.ibcov svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ibcov-perm { cursor: pointer; color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); }
.ibcov-perm:hover { background: var(--amber); color: #fff; }
/* sort toggle row (Newest / Oldest / Needs you first + Unread only) - wraps at 375px */
.ibsortrow { align-items: center; }
.ibsort-lbl { font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-right: 2px; }
/* optimistic remove: a dismissed / handled card fades at once, reconciled by the reload */
.ibcard.ibremoving { opacity: .35; pointer-events: none; transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) { .ibcard.ibremoving { transition: none; } }
/* first-run "how your inbox works" explainer (dismissible, shown once per viewer) */
.ibintro { position: relative; margin: 0 0 14px; padding: 14px 42px 14px 16px;
  background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--r-3); }
.ibintro-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text);
  font-size: var(--fs-4); margin-bottom: 8px; }
.ibintro-h svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ibintro-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-3); line-height: 1.5; }
.ibintro-list li { margin: 3px 0; }
.ibintro-x { position: absolute; top: 8px; right: 10px; background: none; border: none;
  font-size: 20px; line-height: 1; color: var(--dim); cursor: pointer; padding: 2px 6px; }
.ibintro-x:hover { color: var(--amber-deep); }
.ibnotice { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 10px 14px;
  font-size: var(--fs-4); line-height: 1.4; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid var(--line); border-radius: 12px; }
.ibnotice .bic svg { width: 16px; height: 16px; }
/* Fix 3: advisory brand-coherence banner - calm, dismissible, never blocking. Its
   own class (not .ibnotice) so the mobile column-override below can't reflow it. */
.gfcohbar { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; padding: 10px 14px;
  font-size: var(--fs-4); line-height: 1.4; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid var(--line); border-radius: 12px; }
.gfcohbar .bic svg { width: 16px; height: 16px; flex: 0 0 auto; }
.gfcohbar .gfcoh-t { flex: 1 1 auto; }
.gfcohbar .gfcoh-x { background: none; border: 0; cursor: pointer; color: var(--muted);
  display: inline-flex; padding: 4px; border-radius: 8px; flex: 0 0 auto; }
.gfcohbar .gfcoh-x:hover { color: var(--amber-deep); background: var(--amber); }
.gfcohbar .gfcoh-x svg { width: 15px; height: 15px; }
.ibfilters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ibfilter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: var(--fs-3); padding: 5px 11px; border-radius: 999px; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); }
.ibfilter:hover { border-color: var(--amber); }
.ibfilter.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 600; }
.ibfilter.ibf-needs_human { color: var(--red); }
.ibfilter.ibf-needs_human.on { color: var(--red); background: var(--red-soft); border-color: var(--red); }
.ibfilter .orcount { font-weight: 700; }
.ibfilter.ibf-net.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); }
/* account (channel) filter row sits above the bucket row, lightly divided */
.ibfilters.ibaccts { margin-top: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
/* notice can carry several stacked rows (regulated + per-account permission) */
.ibnotice { flex-direction: column; align-items: stretch; gap: 6px; }
.ibnrow { display: flex; align-items: center; gap: 8px; }
/* unread signal on an open card */
.ibunread { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: 0 0 auto; }
.orcard-head.ibcard-unread { position: relative; }
.ibbucket { font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: var(--muted); background: var(--card2); }
.ibbucket.ibb-needs_human { color: var(--red); background: var(--red-soft); }
.ibbucket.ibb-needs_answer, .ibbucket.ibb-lead { color: var(--amber-deep); background: var(--amber-soft); }
.ibbucket.ibb-praise { color: var(--green); background: var(--green-soft); }
.ibstars { color: var(--amber); letter-spacing: 1px; font-size: var(--fs-4); }
.ibwin { font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ibwin.ibwin-closing { color: var(--amber-deep); background: var(--amber-soft); }
.ibwin.ibwin-closed { color: var(--red); background: var(--red-soft); }
.ibsearch { position: relative; max-width: 340px; margin: 8px 0 2px; }
.ibsearch input { width: 100%; font: inherit; font-size: var(--fs-4); color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 32px 7px 14px; }
.ibsearch input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.ibsearch-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ibsearch-x:hover { color: var(--text); background: var(--card); }
.ibquote { margin: 10px 0 0; font-size: var(--fs-5); line-height: 1.5; color: var(--text);
  padding: 11px 13px; background: var(--card2); border-radius: 12px; border: 1px solid var(--line);
  overflow-wrap: anywhere; word-break: break-word; }
.iblink { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--fs-3);
  color: var(--amber-deep); text-decoration: none; white-space: nowrap; }
.iblink svg { width: 14px; height: 14px; }
/* author name -> their profile (comments only, where the handle is a real username) */
.ibauthor { color: var(--amber-deep); font-weight: 600; text-decoration: none; }
.ibauthor:hover { text-decoration: underline; }
.ibauthor svg { width: 12px; height: 12px; opacity: .8; }
.ibcard-human { border-color: rgba(214, 69, 69, 0.3); }
.ibneed { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-4);
  line-height: 1.4; color: var(--red); background: var(--red-soft); border-radius: 10px; padding: 9px 12px;
  overflow-wrap: anywhere; word-break: break-word; }
.ibneed .bic svg { width: 16px; height: 16px; }
/* the brand's own comment (parity): a quiet neutral card, clearly not a customer waiting */
.ibbucket.ibb-own { color: var(--dim); background: var(--card2); }
.ibcard-own { border-style: dashed; }
.ibownnote { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-2);
  line-height: 1.4; color: var(--dim); overflow-wrap: anywhere; }
.ibownnote svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ibreplywrap { margin-top: 12px; }
.ibreply { display: block; width: 100%; margin-top: 8px; font: inherit; font-size: var(--fs-4); color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  resize: none; overflow: hidden; line-height: 1.5; min-height: 46px; }
.ibreply::placeholder { color: var(--dim); }
.ibreply:focus { outline: none; border-color: var(--amber); background: var(--card); }
.ibguard { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 9px 12px;
  font-size: var(--fs-4); line-height: 1.4; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 10px; }
.ibguard .bic svg { width: 16px; height: 16px; }
.ibsent { margin-top: 10px; font-size: var(--fs-4); line-height: 1.5; color: var(--text);
  padding: 10px 12px; background: var(--card2); border-radius: 10px; border: 1px solid var(--line);
  overflow-wrap: anywhere; word-break: break-word; }
.ibsent-lbl { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------- forms ---------- */
.kvform { padding: 16px 20px; display: grid; gap: 11px; }
.kvform .kv { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
.kvform .kv > div { min-width: 0; width: 100%; }
.kvform .kv label { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); overflow-wrap: anywhere; }
/* one look for every control: full width, same skin (color/checkbox excepted) */
.kvform .kv input:not([type="color"]):not([type="checkbox"]),
.kvform .kv textarea,
.kvform .kv select {
  width: 100%; background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-3); padding: 11px 14px; font-size: var(--fs-4); font-family: var(--font-body);
  min-width: 0; }
.kvform .kv textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.kvform .kv input:focus, .kvform .kv textarea:focus, .kvform .kv select:focus {
  outline: none; border-color: var(--amber); background: var(--card); }
@media (max-width: 760px) { .kvform .kv { grid-template-columns: 1fr; gap: 5px; } }
.kvform .kv .cfgd { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--green); }
/* social-account field: the input + its inline connection control share ONE row */
.socrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.socrow > input { flex: 1 1 160px; width: auto; }
.socconn { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.socconn .connpill, .socconn .sm-act { white-space: nowrap; }
.urow { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-4); align-items: center; }
.urow:last-child { border-bottom: 0; }
.urow span { color: var(--dim); font-family: var(--font-mono); font-size: var(--fs-1); }
/* team-activity rows: identity + role on top, the person's activity below */
.uactrow { flex-direction: column; align-items: stretch; gap: 7px; }
.uacthead { display: flex; align-items: center; gap: 10px; }
.uacthead b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.uacthead .youtag { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  background: var(--green-soft); color: var(--green); border-radius: var(--r-pill); padding: 1px 8px; flex: none; }
/* owner: the compact "Username" edit beside the role badge (never widens the row) */
.uacthead .uedit { flex: none; padding: 5px 10px; font-size: var(--fs-2); }
.uacthead .uedit .bic { width: 13px; height: 13px; margin-right: 4px; color: inherit; }
.uactstats { display: flex; flex-wrap: wrap; gap: 5px 18px; }
.uactrow .uactstats span { color: var(--neutral); cursor: default; }
.uactrow .uactstats b { color: var(--text); font-weight: 600; }

/* ---------- skeleton loading ---------- */
.skel { height: 15px; border-radius: var(--r-2); margin: 13px 18px;
  background: linear-gradient(90deg, var(--bg) 25%, #efe9dd 50%, var(--bg) 75%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* queue cold-load skeleton: rows shaped like a real .qrow (reuses .qrow/.qthumb/
   .t/.pill) so the list reserves its TRUE height and posts swap in with no layout
   shift - the fix for the pop-in "messy load". Opacity pulse is theme-independent
   (works light+dark) and disables under reduced-motion (web.dev CLS, NN/g). */
.qskel { pointer-events: none; }
.qskel .sk { color: transparent; border-color: transparent; border-radius: var(--r-2);
  background: var(--line); animation: qskelpulse 1.3s ease-in-out infinite; }
/* heights sum to a real row (.t ~=50 + pill line matches the loaded 108px mobile
   row) so the skeleton->posts swap does not nudge the rows above the fold. */
.qskel .t b.sk-l1 { height: 14px; width: 58%; }
.qskel .t span.sk-l2 { display: block; height: 10px; width: 90%; margin-top: 10px; }
.qskel .t span.sk-l3 { display: block; height: 10px; width: 66%; margin-top: 6px; }
.qskel .pill.sk { width: 76px; height: 26px; padding: 0; }
@keyframes qskelpulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .qskel .sk { animation: none; opacity: .7; } }
.qsearch { margin-left: auto; background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--r-pill); padding: 8px 16px; font-family: var(--font-body); font-size: var(--fs-4);
  color: var(--text); min-width: 180px; }
.qsearch:focus { outline: none; border-color: var(--amber); }
.qsort { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 8px 14px; font-family: var(--font-body); font-size: var(--fs-3); color: var(--text); cursor: pointer; }
.qsort:focus { outline: none; border-color: var(--amber); }
.empty .btn { margin-top: 14px; }

/* ---------- typed form controls ---------- */
.rowlink { cursor: pointer; }
.klink { cursor: pointer; transition: transform .15s, box-shadow .15s; display: block; color: inherit; }
.klink:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.colorrow { display: flex; gap: 14px; flex-wrap: wrap; }
.cpick { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); cursor: pointer; }
.cpick input[type=color] { width: 46px; height: 34px; border: 1px solid var(--line2);
  border-radius: var(--r-3); padding: 2px; background: var(--card); cursor: pointer; }
label.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  position: relative; margin: 0; font-family: var(--font-body); }
.switch input { position: absolute; opacity: 0; }
.switch em { font-family: var(--font-body); }
/* the "I'll post this myself" toggle sits right under the schedule field - give it
   clear separation so it reads as its own choice, not part of the date row. */
.switch.pfpmode { margin: 18px 0 6px; }
/* the pill is the DIRECT-child span only - a descendant selector would also style an
   icon wrapper (span.bic) inside the label's <em> as a second pill (the TikTok-music
   double-switch bug). Scope to > span so labels can carry an icon safely. */
.switch > span { width: 44px; height: 25px; border-radius: 999px; background: #cfc8ba;
  border: 1px solid var(--line2); box-sizing: border-box;
  position: relative; transition: background .2s; flex: none; }
.switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #f5f7fb; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { left: 21px; }
/* keyboard focus ring on the pill (the real <input> is opacity:0) - the .switch had
   none, so keyboard users could not see which toggle was focused. Mirrors .fic-tog. */
.switch input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch em { font-style: normal; font-size: var(--fs-3); color: var(--dim); }
/* short toggle caption (the long ON/OFF detail lives in the field's "?" tip) - stays on
   one line beside the pill, wraps cleanly if long, never a paragraph under the switch. */
.switch em.switchsub { line-height: 1.35; overflow-wrap: anywhere; }

/* TikTok auto-music: a conditional photo-post option (only shows when TikTok is
   selected and the media is a photo). Grouped in its own subtle card so it does not
   jump the layout as it appears/disappears, with a faint brand-amber tint. */
.tikmusicwrap { margin: 8px 0 12px; padding: 9px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: rgba(224,137,0,.06); }
.tikmusicwrap .switch { margin: 0; }
.switch.tikmusic em { display: inline-flex; align-items: center; gap: 7px; }
.switch.tikmusic em .bic { display: inline-flex; margin: 0; }
.switch.tikmusic em .bic svg, .switch.tikmusic em svg { width: 16px; height: 16px;
  flex: none; color: var(--amber-deep); }

/* TikTok publish options: a conditional cluster shown whenever TikTok is a selected
   network (any media type). Same subtle amber card as the auto-music option, but it
   stacks who-can-view + allow comment/duet/stitch + the "Your brand" disclosure. The
   who-can-view row wraps so the select never forces sideways scroll on a phone. */
.tikoptswrap { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: rgba(224,137,0,.06); }
.tikoptswrap .tikopthead { font-family: var(--font-body); font-size: var(--fs-3);
  color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tikoptswrap .tikoptsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font-size: var(--fs-3); color: var(--dim); margin-bottom: 6px; }
.tikoptswrap .tikoptsel select { flex: 1 1 150px; max-width: 260px; }
.tikoptswrap .tikoptrow { display: flex; align-items: center; margin: 6px 0; }
.tikoptswrap .switch { margin: 0; }
.tikoptswrap .switch em { display: inline-flex; align-items: center; gap: 7px; }
.tikoptswrap .switch em .bic { display: inline-flex; margin: 0; }
.tikoptswrap .switch em .bic svg, .tikoptswrap .switch em svg { width: 16px; height: 16px;
  flex: none; color: var(--amber-deep); }

/* TikTok sound (inside the TikTok options card): the chosen trending track, and on a
   video its start point + the two levels. A track is thumb + title/artist + actions; on
   a narrow card the actions drop under the track as ONE row (never sideways scroll).
   Scoped under .tikoptswrap (0,2,0) so the broad ".detail label" (0,1,1) can't flatten
   the slider rows into mono caps blocks. */
.tikoptswrap .tiksnd { margin: 8px 0 10px; padding: 9px 0 10px; border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2); }
.tikoptswrap .tiksnd-h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-3);
  font-weight: 600; color: var(--text); margin-bottom: 7px; }
.tikoptswrap .tiksnd-h .bic { display: inline-flex; margin: 0; }
.tikoptswrap .tiksnd-h .bic svg { width: 16px; height: 16px; flex: none; color: var(--amber-deep); }
.tikoptswrap .tiksnd-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tikoptswrap .tiksnd-thumb, .npmodal.tsmodal .tsthumb { width: 44px; height: 44px; flex: none;
  border-radius: var(--r-2); object-fit: cover; background: var(--card2); border: 1px solid var(--line2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); box-sizing: border-box; }
.tikoptswrap .tiksnd-thumb .bic svg, .npmodal.tsmodal .tsthumb .bic svg { width: 18px; height: 18px; }
.tikoptswrap .tiksnd-meta { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tikoptswrap .tiksnd-meta b { font-size: var(--fs-4); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tikoptswrap .tiksnd-meta span { font-size: var(--fs-3); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tikoptswrap .tiksnd-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 100%; }
.tikoptswrap .tiksnd-x { padding-left: 10px; padding-right: 10px; }
.tikoptswrap .tiksnd-x .bic { margin: 0; }
.tikoptswrap .tiksnd-note { margin: 6px 0 0; font-size: var(--fs-3); color: var(--dim); }
.tikoptswrap .tiksnd-mix { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.tikoptswrap .tiksnd-row { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 36px;
  font-family: var(--font-body); font-size: var(--fs-3); letter-spacing: 0; color: var(--dim); }
.tikoptswrap .tiksnd-lbl { flex: 0 0 76px; }
.tikoptswrap .tiksnd-row input[type=range] { flex: 1 1 auto; min-width: 0; width: auto; margin: 0;
  accent-color: var(--amber); }
.tikoptswrap .tiksnd-val { flex: 0 0 42px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text); font-size: var(--fs-3); }

/* TikTok sound picker - an np-modal like the bank picker: search + country + genre, then
   the trending list (thumb, title/artist, a compact Play, Use). Scoped under .tsmodal so
   ".npbody label" can't flatten it; the two filters share one row. */
.npmodal.tsmodal .tshint { padding: 0 0 10px; }
.npmodal.tsmodal .tstools .tsfilters { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.npmodal.tsmodal .tstools .tsfilters .bksort { flex: 1 1 0; min-width: 0; }
.npmodal.tsmodal .tsrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); }
.npmodal.tsmodal .tsrow.cur { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.npmodal.tsmodal .tsmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.npmodal.tsmodal .tsmeta b { font-size: var(--fs-4); font-weight: 700; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; }
.npmodal.tsmodal .tsmeta span { font-size: var(--fs-3); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.npmodal.tsmodal .tsplay { flex: none; width: 40px; height: 40px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; }
.npmodal.tsmodal .tsplay .bic { margin: 0; }
.npmodal.tsmodal .tsplay svg { margin: 0 !important; }
.npmodal.tsmodal .tsuse { flex: none; min-width: 64px; height: 40px; }
.npmodal.tsmodal .tsmsg { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 14px 2px; font-size: var(--fs-4); color: var(--dim); line-height: 1.5; }
.npmodal.tsmodal .tsmsg b { color: var(--text); }
.npmodal.tsmodal .tsmsg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.npmodal.tsmodal .tstools[hidden] { display: none; }

/* AI-content disclosure line (per-post): shown only for AI-media posts, sits with the
   caption fields. Full-width input inherits the .detail input styling (mobile-safe). */
.aicapwrap { margin: 8px 0 10px; }
.aicapwrap .opt { font-size: var(--fs-1); color: var(--amber-deep); letter-spacing: .08em; }
/* Post-level "This post uses AI-generated media" toggle - the manual AI declaration
   for every network. Sits just above the disclosure line it reveals. */
.aiflagwrap { margin: 10px 0 6px; }
.aiflagwrap .switch { margin: 0; }
.aiflagwrap .switch em { display: inline-flex; align-items: center; gap: 7px; }
.aiflagwrap .switch em svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* inline WYSIWYG hint under the caption: the AI disclosure line that gets appended */
.dcapainote { margin: 6px 0 2px; padding: 7px 11px; border-radius: var(--r-3);
  background: var(--amber-soft); color: var(--amber-deep); font-size: var(--fs-3); line-height: 1.4; }
.dcapainote b { color: var(--text); font-weight: 600; }

/* Published read-only "TikTok settings used" read-out (forensics): a compact card
   surfaced with the performance panel so a reach change is debuggable. */
.ttused { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); }
.ttused-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-body);
  font-size: var(--fs-3); color: var(--muted); margin-bottom: 6px; }
.ttused-h .bic svg, .ttused-h svg { width: 15px; height: 15px; flex: none; color: var(--amber-deep); }
.ttused-r { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-3);
  padding: 3px 0; border-top: 1px solid var(--line2); }
.ttused-r span { color: var(--dim); }
.ttused-r b { color: var(--text); font-weight: 600; }

/* ============ Post Mix panel (SPEC_POST_TYPE_SEQUENCE.md) ============ */
.postmix { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-5); margin: 16px 0 6px; overflow: hidden; }
.pmhead { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 18px; background: var(--card2); border: 0; cursor: pointer;
  font-family: inherit; color: var(--text); }
.pmttl { display: inline-flex; align-items: center; gap: 9px; font-weight: 700;
  font-size: var(--fs-6); flex: none; }
.pmttl .bic svg { width: 22px; height: 22px; color: var(--amber-deep); }
.pmsum { flex: 1 1 auto; min-width: 0; color: var(--dim); font-size: var(--fs-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmbadge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill);
  background: rgba(224,137,0,.12); color: var(--amber-deep); font-size: var(--fs-3); white-space: nowrap; }
.pmchev { flex: none; display: inline-flex; color: var(--dim); transition: transform .2s; }
.pmchev .bic svg { width: 18px; height: 18px; }
.pmhead[aria-expanded="true"] .pmchev { transform: rotate(90deg); }
.pmbody { padding: 16px 18px 20px; border-top: 1px solid var(--line); }
.pmintro { margin: 0 0 14px; color: var(--dim); font-size: var(--fs-5); line-height: 1.5; }
.pmnetline { margin-bottom: 12px; }
.pmnetsw { font-size: var(--fs-4); }

/* per-network tabs (tablist) */
.pmtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.pmtab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; min-height: 34px;
  border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--card2);
  color: var(--text); cursor: pointer; font-family: inherit; font-size: var(--fs-4); }
.pmtab svg { width: 16px; height: 16px; flex: none; }
.pmtab.on { border-color: var(--amber); background: var(--card); box-shadow: inset 0 0 0 1px var(--amber); }
.pmpill { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; }
.pmpill.cust { color: var(--amber-deep); }
.pmpill.same { color: var(--muted); }

/* mode radiogroup (segmented) */
.pmmode { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pmmodelbl { font-size: var(--fs-4); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.pmseg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-3); overflow: hidden;
  align-self: flex-start; max-width: 100%; }
.pmsegbtn { padding: 10px 18px; min-height: 44px; border: 0; border-right: 1px solid var(--line2);
  background: var(--card2); color: var(--dim); cursor: pointer; font-family: inherit;
  font-size: var(--fs-4); }
.pmsegbtn:last-child { border-right: 0; }
.pmsegbtn.on { background: var(--green-sel); color: #fff; font-weight: 700; }
.pmsegbtn:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: -2px; }
.pmsegbtn.on:focus-visible { outline-color: #fff; }

/* format behaviour accents (cheap = ready, paid = credits, manual = held) */
.pmseqrow, .pmwrow, .pmchip, .pmprevchip { --pmac: var(--green); }
.paid { --pmac: var(--amber-deep); }
.manual { --pmac: var(--dim); }

/* Take turns: ordered sequence */
.pmseq { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pmseqrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line2); border-left: 3px solid var(--pmac); border-radius: var(--r-3); background: var(--card2); }
.pmord { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
.pmname { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-4); min-width: 0; }
.pmname svg { width: 16px; height: 16px; flex: none; color: var(--pmac); }
.pmseqacts { flex: none; display: inline-flex; gap: 4px; }
.pmmini { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); color: var(--dim); cursor: pointer; }
.pmmini svg { width: 14px; height: 14px; }
.pmmini:disabled { opacity: .35; cursor: default; }
.pmmini.pmrm:hover { border-color: #c0392b; color: #c0392b; }

/* add-format chips */
.pmadd { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pmchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 38px;
  border: 1px dashed var(--line2); border-radius: var(--r-pill); background: var(--card); color: var(--text);
  cursor: pointer; font-family: inherit; font-size: var(--fs-4); }
.pmchip svg { width: 15px; height: 15px; flex: none; color: var(--pmac); }
.pmchip .pmplus svg { width: 13px; height: 13px; color: var(--dim); }
.pmchip:hover { border-color: var(--pmac); border-style: solid; }
.pmempty, .pmoff { padding: 12px 14px; border: 1px dashed var(--line2); border-radius: var(--r-3);
  background: var(--card2); color: var(--dim); font-size: var(--fs-4); line-height: 1.5; margin: 0 0 8px; }
.pmnote { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-4); }

/* Mix it up: presets + weighted steppers + proportion bar */
.pmpresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pmpreset { padding: 9px 15px; min-height: 40px; border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; font-size: var(--fs-4); }
.pmpreset:hover { border-color: var(--amber); }
.pmbar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; margin-bottom: 12px;
  border: 1px solid var(--line2); }
.pmbarseg { min-width: 3px; }
.pmbarseg.cheap { background: var(--green); }
.pmbarseg.paid { background: var(--amber-deep); }
.pmbarseg.manual { background: var(--dim); }
.pmweights { display: flex; flex-direction: column; gap: 4px; }
.pmwrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-3); }
.pmwrow.on { background: var(--card2); border-left: 3px solid var(--pmac); }
.pmwrow:not(.on) .pmname { color: var(--muted); }
.pmwrow:not(.on) .pmname svg { color: var(--muted); }
.pmstep { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.pmwval { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-4); color: var(--dim); }

/* live preview */
.pmprev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px dashed var(--line2); }
.pmprevlbl { flex: none; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-size: var(--fs-4); }
.pmprevseq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pmprevchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--card2); border: 1px solid var(--line2); border-left: 3px solid var(--pmac);
  font-size: var(--fs-4); }
.pmprevchip svg { width: 13px; height: 13px; flex: none; color: var(--pmac); }
.pmprevchip em { font-style: normal; color: var(--muted); }
.pmarrow { display: inline-flex; color: var(--line2); }
.pmarrow svg { width: 12px; height: 12px; }

/* iteration polish: undo line, cadence hint, reset link, focus-visible a11y */
.pmundo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: var(--r-3); background: var(--card2); border: 1px solid var(--line2);
  color: var(--dim); font-size: var(--fs-4); }
.pmcadence { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-4); line-height: 1.5; }
.pmreset { align-self: flex-start; margin-top: 4px; font-size: var(--fs-4); }
.pmtab:focus-visible, .pmmini:focus-visible, .pmchip:focus-visible,
.pmpreset:focus-visible, .pmhead:focus-visible, .pmreset:focus-visible,
.pmundo .hlink:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }

/* brand-profile cross-reference: read-only Post Mix summary + status + deep-link.
   One editor (below Posts); this is the "you are here / it's set" awareness in the
   cadence group (single source of truth for state = the chip). */
.pmxref { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 6px;
  padding: 13px 15px; border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2);
  cursor: pointer; }
.pmxref:hover { border-color: var(--amber); }
.pmxref:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.pmxlabel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-5); }
.pmxlabel svg { width: 20px; height: 20px; flex: none; color: var(--amber-deep); }
.pmxstate { flex: none; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.pmxstate.on { background: rgba(20,151,107,.14); color: var(--green); }
.pmxstate.off { background: var(--card); border: 1px solid var(--line2); color: var(--muted); }
.pmxsum { flex: 1 1 220px; min-width: 0; color: var(--dim); font-size: var(--fs-4); line-height: 1.5; }
.pmxedit { flex: none; color: var(--amber-deep); font-weight: 700; font-size: var(--fs-4); white-space: nowrap; }

/* Post Mix x Visuals conflict warning (amber, icon+text, aria-live) + blocked format */
.pmconflict, .pmxwarn { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px;
  padding: 11px 13px; border-radius: var(--r-3); font-size: var(--fs-4); line-height: 1.5;
  background: rgba(224,137,0,.10); border: 1px solid var(--amber); color: var(--amber-deep); }
.pmxwarn { margin: 10px 0 0; }
.pmconflict .bic, .pmxwarn .bic { flex: none; display: inline-flex; margin-top: 1px; }
.pmconflict svg, .pmxwarn svg { width: 18px; height: 18px; color: var(--amber-deep); }
.pmconflict .hlink, .pmxwarn .hlink { color: var(--amber-deep); font-weight: 700; white-space: nowrap; }
.pmchip.pmblocked { opacity: .55; cursor: help; border-style: dashed; }
.pmchip.pmblocked svg { color: var(--muted); }

@media (max-width: 480px) {
  .pmhead { flex-wrap: wrap; }
  .pmsum { flex-basis: 100%; white-space: normal; }
  .pmseg { width: 100%; }
  .pmsegbtn { flex: 1 1 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pmchev { transition: none; }
}

/* ---------- tooltips (every input explains itself) ---------- */
.tipdot { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--card); color: var(--dim);
  font-size: var(--fs-1); font-weight: 700; cursor: help; position: relative;
  vertical-align: middle; padding: 0; font-family: var(--font-body); }
.tipdot:hover, .tipdot:focus { color: #1a1206; background: var(--amber-bright); border-color: transparent; }
/* Tooltips switched off (Quick nav > Tooltips): a "?" that shows nothing is just
   noise, so hide the standalone help dots. The tipEngine already suppresses the
   hover bubbles; this only removes the now-dead triggers. */
body.gf-notips .tipdot { display: none; }
/* the bubble itself is a single body-level fixed element (#gfTip, ui.js) so
   NO panel, modal or scroll container can ever clip it - do not reintroduce
   ::after bubbles here, they break inside anything with overflow */
#gfTip { position: fixed; z-index: 1000; max-width: 300px; background: var(--navy);
  /* soft top-light so the bubble reads as a raised surface, not a flat black box */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%);
  color: var(--navy-text); font-size: var(--fs-3); font-weight: 400; line-height: 1.5;
  text-align: left; padding: 10px 13px; border-radius: var(--r-3);
  white-space: pre-line;   /* honour \n in data-tip for multi-line tips (e.g. subscriber list) */
  border: 1px solid rgba(255, 255, 255, .11);          /* hairline edge - defines it on any backdrop */
  box-shadow: 0 12px 30px rgba(10, 14, 27, .34), 0 3px 8px rgba(10, 14, 27, .24);
  pointer-events: none; text-transform: none; letter-spacing: .01em;
  font-family: var(--font-body); opacity: 0;
  transform: translateY(5px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease, transform .14s cubic-bezier(.2, .8, .3, 1); }
#gfTip.on { opacity: 1; transform: translateY(0) scale(1); }
/* a keyword/inline-code accent inside tips reads as a chip, not raw text */
#gfTip b, #gfTip strong { color: var(--amber-bright); font-weight: 600; }
.kvform .fieldrow label { display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; }
.formsec { grid-column: 1 / -1; font-size: var(--fs-1); letter-spacing: .16em; color: var(--amber-deep);
  border-bottom: 2px solid var(--amber-soft); padding: 14px 0 5px; margin-top: 6px; }
.formsec:first-child { padding-top: 0; margin-top: 0; }
/* brand-profile accordion: each section folds so the long form is easy to scan */
.fgmaster { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; margin: 0 0 2px; }
.fgmaster .hlink { font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-mono); }
.fgm-sep { color: var(--dim); }
.formgroup { grid-column: 1 / -1; }
/* header ROW = the collapse toggle (flex:1) + a per-section Save on the right; the
   full-width divider lives on the row so it spans under both. */
.fghead-row { display: flex; align-items: center; gap: 10px;
  border-bottom: 2px solid var(--amber-soft); margin-top: 8px; }
.formgroup:first-child .fghead-row { margin-top: 0; }
.fghead { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0;
  cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: var(--fs-3);
  font-weight: 600; letter-spacing: .1em; color: var(--amber-deep); padding: 16px 0 9px; }
.formgroup:first-child .fghead { padding-top: 2px; }
.fght { flex: 1; min-width: 0; }                 /* the section title (icon/status/unsaved are their own spans) */
/* leading house icon - .bic.cic (later in file, equal specificity) would force 11px, so
   raise specificity here to size the section-header icon up to lead the title */
.fghead > .bic.cic { width: 20px; height: 20px; flex: none; margin: 0; }
.fghead:hover { color: var(--amber-deep); }
/* completion chip in the header: green tick when done, quiet amber "To add" for an
   essential still empty, low-key "Optional" (opacity, never a grey token - contrast rule). */
.fgstat { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fgstat .bic { width: 12px; height: 12px; margin: 0; }
.fgstat.done { color: var(--green); }
.fgstat.todo { color: var(--amber-deep); }
.fgstat.opt { color: var(--muted); opacity: .68; font-weight: 500; }
/* "Unsaved" marker: shown only while the section has pending edits; supersedes the chip.
   Dot + word (never colour alone - WCAG 1.4.1). */
.fgunsaved { display: none; flex: none; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-deep); }
.fgunsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.formgroup.fgdirty .fgunsaved { display: inline-flex; }
.formgroup.fgdirty .fgstat { display: none; }
/* top bar: an honest essentials meter (left) + Expand/Collapse all (right) */
.fgtop { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 6px; }
.fgprogwrap { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fgprog-txt { font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; }
.fgprog-txt b { color: var(--amber-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.fgprog-txt .bic { width: 12px; height: 12px; margin: 0; }
.fgprog-count { color: var(--amber-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fgprog-bar { display: block; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fgprog-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-bright), var(--amber)); transition: width .35s ease; }
.fgtop .fgmaster { flex: none; margin: 0; }
@media (prefers-reduced-motion: reduce) { .fgprog-fill { transition: none; } }
/* FOCUS MODE: one section open -> dim the collapsed others so attention is fully on the
   open one; hover/keyboard-focus a dimmed row brings it back (still fully usable). */
#brandForm.fgfocus .formgroup.gcol { opacity: .4; transition: opacity .2s ease; }
#brandForm.fgfocus .formgroup.gcol:hover,
#brandForm.fgfocus .formgroup.gcol:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #brandForm.fgfocus .formgroup.gcol { transition: none; } }
.fgchev { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .18s ease; }
.fghead:hover .fgchev { color: var(--amber-deep); }
.formgroup.gcol .fghead-row { border-bottom-color: var(--line2); }
.formgroup.gcol .fghead { color: var(--muted); }
/* per-section Save pill - identical placement/look on every section */
/* Save pill: QUIET when there's nothing to save, EMPHASISED (solid amber) when this
   section has unsaved edits, a brief GREEN "Saved" on success. Never disabled (a11y). */
.fgsave { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.fgsave:hover { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.formgroup.fgdirty .fgsave { border-color: var(--amber); background: var(--amber); color: #fff; }
.formgroup.fgdirty .fgsave:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
/* the check glyph's baked-in amber accent would vanish on the amber button - force the
   whole tick white for contrast (mirrors the .btn.danger .bic pattern) */
.formgroup.fgdirty .fgsave svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.formgroup.fgdirty .fgsave svg [fill]:not([fill="none"]) { fill: #fff; }
.fgsave.saved { border-color: var(--green); background: transparent; color: var(--green); }
.fgsave:disabled { opacity: .5; cursor: default; }
.fgsave .bic, .fgsave svg { width: 14px; height: 14px; flex: none; }
.formgroup.gcol .fgchev { transform: rotate(-90deg); }
.fgbody { display: grid; gap: 11px; padding-top: 11px; }
.formgroup.gcol .fgbody { display: none; }
@media (prefers-reduced-motion: reduce) { .fgchev { transition: none; } }
.opchip { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 7px; margin-left: 6px;
  white-space: nowrap; flex: 0 0 auto; }
/* "Use my own track" reveal: a grouped sub-card under the Music menu (progressive
   disclosure) so it reads as a child of that choice, not a separate setting */
.musicownpanel { grid-column: 1 / -1; margin: 2px 0; padding: 12px 14px; border-radius: var(--r-3);
  background: var(--card2); border: 1px solid var(--line2); }
.musicownpanel > label { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.musicownpanel .musictrackhint { margin-top: 8px; }
.pagesub { display: block; font-size: var(--fs-3); color: var(--dim); margin-top: 1px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upmodal.wide { max-width: 560px; max-height: 86vh; overflow-y: auto; }
.stagefields { padding: 6px 0 0; }
.stagefields .kv { grid-template-columns: 200px 1fr; }
.cfgd { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--green); }

/* ---------- growth-engine pipeline diagram ---------- */
.pipeline { padding: 20px; display: grid; gap: 14px; }
.prow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pnode { flex: 1 1 150px; min-width: 148px; background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: 13px 14px; cursor: pointer; position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.pnode:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--amber); }
.picon { width: 42px; height: 42px; border-radius: var(--r-4); display: flex; align-items: center;
  justify-content: center; color: #1c2740; margin-bottom: 9px; flex: none;
  background: linear-gradient(150deg, var(--amber-soft), var(--card2) 80%);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.picon svg { width: 24px; height: 24px; display: block; }
.pnode:hover .picon { border-color: var(--amber); }
.uplab-row { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.uplab-row .picon { margin-bottom: 0; width: 40px; height: 40px; }
.pnode b { display: block; font-size: var(--fs-4); }
.pnode > span:not(.picon):not(.plock) { font-size: var(--fs-3); color: var(--dim); display: block; }
.pnode.locked { opacity: .95; background: repeating-linear-gradient(45deg, var(--card2), var(--card2) 8px, #f1ede4 8px, #f1ede4 16px);
  border-style: dashed; }
.pnode.locked .picon, .pnode.locked b, .pnode.locked > span { filter: grayscale(1); opacity: .55; }
.pnode.locked:hover { border-color: var(--amber); }
.plock { display: inline-block; margin-top: 7px; font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--amber-deep); background: var(--amber-soft); border-radius: var(--r-pill); padding: 3px 9px; }
.parrow { align-self: center; color: var(--line2); font-size: var(--fs-7); font-weight: 700; flex: none; }
#nav button.navlocked { color: var(--navy-dim); }
#nav button.navlocked::after { content: " 🔒"; font-size: var(--fs-2); }

/* ---------- slide-out panels (stage settings + upgrade prompts) ---------- */
/* above the post editor (.postwrap 220): a stage panel opened from inside it (its "Fill
   carousel..." -> Creative Studio settings) opened BEHIND it; still under the lightbox (300),
   the modals (600), tooltips and toasts */
.upmodal-overlay { position: fixed; inset: 0; z-index: 230; display: none;
  justify-content: flex-end; background: rgba(7,11,20,.5); backdrop-filter: blur(3px); }
.upmodal-overlay.show { display: flex; }
/* full height from the top of the screen: the insets join the padding, and the sticky
   .paneltop / .actions below cancel exactly that padding (so they still meet the edges) */
.upmodal { position: relative; height: 100%; width: min(600px, 96vw); background: var(--card);
  border-left: 1px solid var(--line); border-radius: 0;
  padding: calc(34px + var(--gf-safe-top)) calc(36px + var(--gf-safe-right)) calc(44px + var(--gf-safe-bottom)) 36px;
  box-shadow: var(--shadow-lg); overflow-y: auto; animation: panelIn .24s ease; }
@keyframes panelIn { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
.upmodal.wide { width: min(680px, 97vw); max-width: none; max-height: none; }
.upmodal h2 { font-family: var(--font-display); margin: 4px 0 8px; }
.upmodal p { color: var(--muted); font-size: var(--fs-5); margin-bottom: 10px; }
.uplab { font-size: var(--fs-1); letter-spacing: .14em; color: var(--amber-deep); }
.paneltop { position: sticky; top: calc(-34px - var(--gf-safe-top)); z-index: 5; display: flex; align-items: center;
  gap: 12px; background: var(--card);
  margin: calc(-34px - var(--gf-safe-top)) calc(-36px - var(--gf-safe-right)) 16px -36px;
  padding: calc(18px + var(--gf-safe-top)) calc(24px + var(--gf-safe-right)) 18px 24px;
  border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px rgba(19,26,42,.04); }
.paneltop .spacer { flex: 1; }
.paneltop .uplab { font-size: var(--fs-2); }
.upclose { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-3);
  color: var(--dim); font-size: var(--fs-4); cursor: pointer; padding: 6px 11px; flex: none; }
.upclose:hover { color: var(--text); border-color: var(--amber); }

/* drag + drop */
.dropcard { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 44px 24px; margin-bottom: 22px; text-align: center; cursor: pointer;
  background: var(--card); border: 2px dashed var(--line2); border-radius: var(--r-5);
  transition: border-color .18s, background .18s, transform .18s; }
.dropcard svg { width: 44px; height: 44px; color: #1c2740; margin-bottom: 6px; }
.dropcard b { font-family: var(--font-display); font-size: var(--fs-6); }
.dropcard > span { color: var(--muted); font-size: var(--fs-4); }
.dropcard .droplimits { font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin-top: 10px; }
.dropcard:hover, #tab-media.dropping .dropcard {
  border-color: var(--amber); background: var(--amber-soft); transform: translateY(-2px); }
#tab-media.dropping .mediagrid {
  outline: 2px dashed var(--amber); outline-offset: 4px; border-radius: var(--r-5); }
.mth.dragging { opacity: .45; }
.mth.dragover { outline: 3px solid var(--amber); outline-offset: 1px; }
.mth[draggable="true"] { cursor: grab; }

/* stage-panel fields: stacked labels, generous inputs for real typing */
.stagefields { padding: 10px 0 0; }
.stagefields .kv, .upmodal .fieldrow { grid-template-columns: 1fr; gap: 6px; align-items: start; }
.upmodal .fieldrow { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.upmodal .fieldrow:last-of-type { border-bottom: 0; }
.upmodal .fieldrow input:not([type=color]):not([type=checkbox]),
.upmodal .fieldrow textarea, .upmodal .fieldrow select {
  width: 100%; padding: 14px 16px; font-size: var(--fs-5); border-radius: var(--r-3); }
.upmodal .fieldrow textarea { min-height: 140px; }
.upmodal .actions { position: sticky; bottom: calc(-44px - var(--gf-safe-bottom)); background: var(--card);
  padding: 14px 0 calc(10px + var(--gf-safe-bottom)); margin: 14px 0 0; border-top: 1px solid var(--line); }
/* (tooltip bubbles are body-level - see #gfTip above - so panels and
   slide-outs need no special-casing and can never clip them) */

/* ---------- plan tab ---------- */
.planhero { display: flex; align-items: center; gap: 20px; justify-content: space-between;
  background: var(--navy); color: var(--navy-text); border-radius: var(--r-5); padding: 26px 30px;
  margin-bottom: 22px; flex-wrap: wrap; box-shadow: var(--shadow); }
.planhero h2 { font-family: var(--font-display); color: #fff; font-size: var(--fs-8); margin: 2px 0; }
.planhero p { color: var(--navy-muted); font-size: var(--fs-4); }
.planhero .uplab { color: var(--amber-bright); }
.planbig { font-family: var(--font-display); font-size: var(--fs-8); color: var(--amber-bright); }
.planbig span { font-size: var(--fs-3); color: var(--navy-muted); }
.planhero .planrenew { margin: 9px 0 0; font-size: var(--fs-2); letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-muted); }
.planhero .planrenew.is-ending { color: #ff9a9a; }
.planhero .planrenew[hidden] { display: none; }
.tiercards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.tiercard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5);
  padding: 24px 22px; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); }
.tiercard.current { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), var(--shadow-lg); }
.curtag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #1a1206;
  font-size: var(--fs-1); letter-spacing: .12em; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); }
.tiercard h3 { font-family: var(--font-display); font-size: var(--fs-6); }
.tierprice { font-family: var(--font-display); font-size: var(--fs-8); margin: 4px 0 12px; }
.tierprice small { font-size: var(--fs-4); color: var(--muted); font-weight: 500; }
.tiercard ul { list-style: none; margin: 0 0 18px; flex: 1; display: grid; gap: 6px; }
.tiercard li { padding-left: 22px; position: relative; color: var(--muted); font-size: var(--fs-4);
  text-transform: capitalize; }
.tiercard li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.tiercard li.no { color: var(--dim); opacity: .55; }
.tiercard li.no::before { content: "🔒"; font-size: var(--fs-2); }
/* plan-card metrics block (SPEC_PLANS_STORAGE.md) */
.tiertag { color: var(--muted); font-size: var(--fs-3); margin: 2px 0; min-height: 2.2em; line-height: 1.35; }
.tmetrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0; margin: 2px 0 14px; display: grid; gap: 9px; }
.tm-row .tm-main { font-size: var(--fs-4); }
.tm-row .tm-main b { font-weight: 700; }
.tm-row .tm-main span { color: var(--muted); }
.tm-row em { display: block; font-style: normal; font-size: var(--fs-2); color: var(--dim); margin-top: 1px; }
.tincluded { font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted); margin: 2px 0 6px; }
.tbase { font-size: var(--fs-3); color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
@media (max-width: 900px) { .tiercards { grid-template-columns: 1fr; } .parrow { display: none; } }

/* ---------- support tickets ---------- */
.tkmsg { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px;
  margin-bottom: 10px; font-size: var(--fs-4); background: var(--card2); }
.tkmsg.operator { background: var(--amber-soft); border-color: transparent; }
.tkmsg b { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .1em; color: var(--dim); margin-bottom: 5px; }
.tkmsg.operator b { color: var(--amber-deep); }

/* ---------- notification bar ----------
   Full-width bar that slides down from the top, carries one message, then
   slides back up. It is always dismissable via its close button, and the
   auto-hide timer pauses while the pointer is over the bar so there is time
   to read. Success = green accent + check, error = red accent + warning.
   The bar spans edge to edge and the message is centred across the FULL
   width (a balanced 1fr | message | 1fr grid) so normal messages stay on
   one line, with the close pinned hard right. Font is the readable sans
   (not mono) at a comfortable size - the old corner pill was too small. */
.toast { position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  display: flex; padding: var(--gf-safe-top) calc(14px + var(--gf-safe-right)) 0 calc(14px + var(--gf-safe-left));
  background: var(--card); color: var(--text);
  border-bottom: 2px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .36s cubic-bezier(.22, .61, .36, 1), visibility 0s .36s; }
.toast.show { transform: translateY(0); visibility: visible;
  transition: transform .36s cubic-bezier(.22, .61, .36, 1), visibility 0s 0s; }
/* 1fr | auto | 1fr centres the message optically while the close sits hard
   right; the equal side tracks collapse first so the message gets the full
   width before it ever needs to wrap. */
.toast .tin { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 10px; width: 100%; padding: 13px 0; }
.toast .tbody { grid-column: 2; min-width: 0; display: flex; align-items: center;
  justify-content: center; gap: 9px; }
.toast .tmsg { min-width: 0; overflow-wrap: anywhere; text-align: center;
  font-size: var(--fs-4); line-height: 1.45; font-weight: 500; }
/* a section name in the message is a link to that tab; underline it at rest
   since it sits mid-sentence, and give it a clear keyboard focus ring */
.toast .tmsg .hlink { text-decoration: underline; text-underline-offset: 2px; }
.toast .tmsg .hlink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-1); }
.toast .tico { flex: 0 0 auto; }
.toast .tico .bic { width: 20px; height: 20px; margin: 0; }
.toast.ok  { border-bottom-color: var(--green); } .toast.ok  .tico { color: var(--green); }
.toast.err { border-bottom-color: var(--red); }   .toast.err .tico { color: var(--red); }
/* info = a calm heads-up, not a warning: brand amber-deep (theme-aware, no blue token
   exists) - clearly distinct from green success + red error, and amber is unclaimed
   here because "warn" lives inside .err (red), so it never reads as a warning */
.toast.info { border-bottom-color: var(--amber-deep); } .toast.info .tico { color: var(--amber-deep); }
.toast .tico svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.toast .tico svg [fill]:not([fill="none"]) { fill: currentColor; }
.toast .tclose { grid-column: 3; justify-self: end; width: 32px; height: 32px; padding: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-3); background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s; }
.toast .tclose:hover { background: var(--line); color: var(--text); }
.toast .tclose:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.toast .tclose .bic { width: 17px; height: 17px; margin: 0; }
.toast .tclose svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .toast { transform: translateY(0); opacity: 0;
    transition: opacity .14s linear, visibility 0s .14s; }
  .toast.show { opacity: 1; transition: opacity .14s linear, visibility 0s 0s; }
}
/* Auto-update banner - shown when a newer build is deployed while the tab is open */
.gfupdatebar { position: fixed; left: 50%; bottom: max(18px, var(--gf-safe-bottom));
  transform: translateX(-50%); z-index: 1700; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: var(--r-pill);
  background: var(--card); color: var(--text); border: 1px solid var(--amber);
  box-shadow: 0 10px 34px rgba(0,0,0,.24); font-size: var(--fs-3); }
.gfupdatebar .btn { padding: 7px 16px; flex: 0 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: calc(20px + var(--gf-safe-top)) 18px 12px; }   /* in the shell's flow: its padding holds the sides */
  .main { margin-left: 0; }   /* the fixed-sidebar offset is desktop-only */
  .tagline { display: none; }
  #nav { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  .topbar { padding: 16px 18px; }
  .content { --content-inset-top: 20px; padding: var(--content-top, 8px) 16px 40px; }
  .split, .row2 { grid-template-columns: 1fr; }
}

/* ---------- onboarding checklist ---------- */
.pheadflex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; white-space: nowrap; }
.pheadflex .spacer { flex: 1; }
/* the header title is a bare text node: nowrap on the row keeps it on one line
   (it can't be targeted directly); re-enable wrapping only inside the chip/status
   areas so long status chips still break instead of overflowing */
.pheadflex #pipeSched, .pheadflex .chips { white-space: normal; }

/* YOUR BRANDS panel body: a card per brand, click to switch (collapses with the panel) */
.brandgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.brandcard { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card2); cursor: pointer;
  flex: 1 1 170px; min-width: 0; max-width: 100%; text-align: left; font: inherit; color: var(--text); }
.brandcard:hover { border-color: var(--amber); }
.brandcard.on { border-color: var(--amber); background: var(--amber-soft); }
.brandcard .bgc-logo, .brandcard .bgc-mono { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brandcard .bgc-logo { object-fit: cover; background: #fff; }
.brandcard .bgc-mono { display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #fff; font-weight: 700; }
.brandcard .bgc-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.brandcard .bgc-now { margin-left: auto; padding-left: 8px; font-size: var(--fs-1);
  color: var(--amber-deep); letter-spacing: .1em; flex: none; }

/* clickable numbers: a figure with data-go links back to its source (delegated
   handler in ui.js). Gives the pointer + a light hover so it reads as clickable. */
[data-go] { cursor: pointer; }
.perftile[data-go] { transition: background .12s, border-color .12s; }
.perftile[data-go]:hover { background: var(--amber-soft); border-color: var(--amber); }

/* Overview CONNECTIONS panel: social accounts only + total-posts + Connect */
.ovconn-total { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-4); }
.ovconn-total b { font-family: var(--font-display); font-size: var(--fs-6); color: var(--text); }
.ovconn-total b.hlink { color: var(--amber-deep); }
.ovhandle, .ovcount { margin-right: 10px; }
.ovcount { color: var(--dim); }
.ovconnect { padding: 6px 14px; border-radius: var(--r-3); border: 1px solid var(--amber);
  background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; font-size: var(--fs-3);
  cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: all .15s; }
.ovconnect:hover { background: var(--amber-bright); color: #1a1206; border-color: transparent; }
.obpanel { border-color: var(--amber); }
.obbar { width: 120px; height: 8px; border-radius: var(--r-2); background: var(--bg); overflow: hidden; display: inline-block; }
.obbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.obsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 20px; }
.obsteps > * { min-width: 0; }
@media (max-width: 1100px) { .obsteps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .obsteps { grid-template-columns: 1fr; } }
.obstep { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--r-3); padding: 11px 14px; font-size: var(--fs-4);
  color: var(--text); cursor: pointer; font-family: var(--font-body); transition: border-color .15s, transform .15s; }
.obstep:hover { border-color: var(--amber); transform: translateY(-1px); }
.obstep { align-items: flex-start; }
.obtxt { display: block; min-width: 0; }
.obtxt b { display: block; font-size: var(--fs-4); }
.obtxt small { display: block; color: var(--dim); font-size: var(--fs-3); line-height: 1.4; margin-top: 2px; }
.obstep.done { opacity: .75; }
.obstep.done .obtxt b { text-decoration: line-through; color: var(--muted); }
.obstep.done .obgo { color: var(--green); }
.obtick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700;
  background: var(--bg); border: 1px solid var(--line2); color: var(--dim); }
.obstep.done .obtick { background: var(--green); border-color: transparent; color: #fff; }
.obgo { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); margin-left: auto; }
/* phone: "GO >" never splits onto two lines in the narrow card (desktop keeps its layout) */
@media (max-width: 760px) { .obgo { flex: none; white-space: nowrap; } }

/* ---------- media-required warning ---------- */
.medwarn { margin-top: 8px; padding: 10px 13px; border-radius: var(--r-3); font-size: var(--fs-4);
  background: var(--amber-soft); border: 1px solid rgba(224,137,0,.35); color: var(--amber-deep); }

/* ---------- motion + accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .upmodal, .skel, .klink, .pnode, .obstep, .btn { animation: none !important; transition: none !important; }
}

/* ---------- designed empty states + panel padding ---------- */
.emptybox { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 44px 24px; }
.emptybox .picon { width: 52px; height: 52px; margin-bottom: 12px; }
.emptybox .picon svg { width: 30px; height: 30px; }
.emptybox b { font-family: var(--font-display); font-size: var(--fs-6); }
.emptybox > span { color: var(--muted); font-size: var(--fs-4); max-width: 420px; margin-top: 4px; }
.panelpad { padding: 20px; }
.phead .sm-act { padding: 7px 14px; font-size: var(--fs-3); border-radius: var(--r-3); letter-spacing: 0; }

/* unread support reply badge */
.hasreply { position: relative; }
.hasreply::after { content: ""; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 0 2px #fff; }
#nav button.hasreply::after { top: 12px; right: 12px; box-shadow: 0 0 0 2px var(--navy); }

/* media source chips on the dropzone */
.medmix { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.medmix em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: var(--r-pill); padding: 5px 12px; }
.dropcard b .tipdot { vertical-align: 2px; }

/* ---------- help docs ---------- */
.helpdoc h3 { font-family: var(--font-display); font-size: var(--fs-5); margin: 22px 0 6px; }
.helpdoc h3:first-child { margin-top: 0; }
.helpdoc p { color: var(--muted); font-size: var(--fs-4); max-width: 76ch; }
.hlink { background: none; border: none; color: var(--amber-deep); font-weight: 600;
  font-size: inherit; font-family: inherit; cursor: pointer; padding: 0; }
.hlink:hover { text-decoration: underline; }
/* Campaigns "removed bin": a header row (label + Delete all) over a wrapping list of
   removed items, each offering Put it back OR a permanent Delete. Permanent delete =
   the "purged" status server-side (kept only as a name tombstone so re-scans can't
   resurrect it). The strip previously had no styling; this makes it read as a real bin. */
.crbgone { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--card); }
.crbgonetop { display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.crbgonehead { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.crbgonelist { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.crbgoneitem { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  max-width: 100%; color: var(--muted); font-size: var(--fs-3); }
/* the name shrinks + ellipsises first (flex:0 1 auto, min-width:0) so a very long item
   name can never push the chip - and the row - past a narrow phone's width. */
.crbgonename { flex: 0 1 auto; min-width: 0; text-decoration: line-through; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.crbgoneitem .hlink { white-space: nowrap; }
.crbgonedel, .crbgoneclear { color: var(--red); }
.crbgonedel:hover, .crbgoneclear:hover { color: var(--red); }
.crbgoneclear { display: inline-flex; align-items: center; gap: 5px; }
.crbgoneclear svg { width: 14px; height: 14px; }
/* the inline "Connections" link sits inside a running warning sentence, so it
   is always underlined - a mid-sentence link needs the affordance at rest */
.gf-connlink { text-decoration: underline; text-underline-offset: 2px; }
.gf-connlink:hover { color: var(--amber); }

/* ---------- Ask Flo + knowledge base (Help) ----------
   The Help page is data-driven from /api/help/kb and searched locally. This
   styles the "Ask Flo" hero, the answer card and the browseable one-pager. */
.askflo { display: flex; align-items: flex-start; gap: 14px;
  background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--r-5); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.askflo .flomark.lg { flex: none; margin-top: 2px; }
.askflo-field { flex: 1; min-width: 0; }
.askflo-lab { display: block; font-size: var(--fs-1); line-height: 1.2; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber-deep); margin-bottom: 8px; }
.askflo-inputwrap { position: relative; display: flex; align-items: center; }
.askflo-mag { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
#kbAsk { width: 100%; min-width: 0; padding: 13px 42px; font-size: var(--fs-5); font-family: inherit;
  color: var(--text); background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-3); }
#kbAsk:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
#kbAsk::-webkit-search-cancel-button { display: none; }
.askflo-clear { position: absolute; right: 8px; width: 28px; height: 28px; border: none;
  background: none; color: var(--dim); cursor: pointer; border-radius: var(--r-3); font-size: var(--fs-4); line-height: 1; }
.askflo-clear:hover { color: var(--text); background: var(--amber-soft); }
.askflo-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kbchip { font-size: var(--fs-3); padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line2); background: var(--card); color: var(--muted); font-family: inherit; }
.kbchip:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
/* the "Raise a support request" action sits as the last chip in the row - amber-accented so
   it reads as an action, not a search suggestion; .hasreply rings it when support has replied. */
.kbchip-support { color: var(--amber-deep); border-color: var(--amber); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; }
.kbchip-support svg { width: 15px; height: 15px; flex: none; }
.kbchip-support.hasreply { box-shadow: 0 0 0 2px var(--amber-soft); }

.kbanswer { margin-bottom: 16px; }
.kbanswer-title { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-6); color: var(--text); }
.kbanswer-body p { color: var(--text); font-size: var(--fs-5); line-height: 1.6; max-width: 76ch; }
.kbanswer-body p + p { margin-top: 10px; }
.kbanswer-foot { margin-top: 12px; }
.kbmiss .floban-body p { color: var(--text); max-width: 76ch; }

.kbcat-h { font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  margin: 26px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.kbresults > .kbcat-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.kbart { scroll-margin-top: 80px; }
.kbart h3 { font-family: var(--font-display); font-size: var(--fs-5); margin: 18px 0 6px; }
.kbresults .kbart p + p { margin-top: 9px; }
.helpdoc mark, .kbanswer-body mark { background: var(--amber-soft); color: var(--amber-deep);
  border-radius: var(--r-1); padding: 0 2px; }
.kbloading { color: var(--dim); padding: 20px 0; }

@media (max-width: 760px) {
  .askflo { padding: 14px 15px; gap: 11px; }
  #kbAsk { font-size: var(--fs-5); }   /* 16px stops iOS zoom-on-focus */
}

/* media groups in the post editor */
.medgrp { flex-basis: 100%; font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim);
  margin: 6px 0 2px; }
.lockednote { font-size: var(--fs-1); color: var(--dim); letter-spacing: .1em; margin-left: 8px; }
.bkrow { cursor: pointer; align-items: flex-start; }
.bkrow .btn.sm-act { flex: none; margin-left: 10px; }
/* reusable Content-bank idea picker: search + sort + clean cards */
.npmodal.bkmodal { width: min(640px, 94vw); }
/* One shared 42px control height keeps the search box and both dropdowns on a
   clean baseline. NOTE: .bksearch is a <label>, and ".npbody label" (0,1,1)
   would otherwise force display:block + a 12px margin onto it - so every rule
   here is scoped under .bktools (0,2,0) to WIN that cascade, the margin is
   reset, and heights are pinned so a stray margin-box can never stretch a
   neighbour. */
.bktools { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.bktools .bksearch { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 42px;
  min-height: 0; margin: 0; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-3);
  background: var(--card); box-sizing: border-box; font-size: var(--fs-4); }
.bktools .bksearch:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.bktools .bksearch .bkico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); display: flex; }
.bktools .bksearch .bkico svg { width: 100%; height: 100%; display: block; }
.bktools .bksearch input { flex: 1; border: 0; background: transparent; font-size: var(--fs-4); line-height: 1.2;
  color: inherit; outline: none; box-shadow: none; padding: 0; margin: 0; min-width: 0; height: 100%; }
.bktools .bksort { flex: 0 0 auto; height: 42px; min-height: 0; margin: 0; padding: 0 32px 0 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); font-size: var(--fs-3);
  color: inherit; cursor: pointer; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; }
.bktools .bksort:focus { border-color: var(--amber); outline: none; }
.bkcount { font-size: var(--fs-1); letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.bkpick { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.bkpick .bkrow { text-align: left; display: block; border: 1px solid var(--line2); border-radius: var(--r-3); padding: 12px 14px; background: var(--card); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bkpick .bkrow:hover { border-color: var(--amber); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.bkpick .bkrow .bkcat { align-self: flex-start; font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep); background: var(--amber-soft); padding: 2px 8px; border-radius: var(--r-pill); margin-bottom: 3px; }
.bkpick .bkrow b { display: block; margin-bottom: 3px; font-size: var(--fs-4); font-weight: 700; line-height: 1.3; }
.bkpick .bkrow span { display: block; font-size: var(--fs-3); color: var(--muted); line-height: 1.45; }
.bkempty { text-align: center; color: var(--muted); padding: 30px 0; font-size: var(--fs-4); }
/* grouped-by-category view: each group is its own column (its own class .bkpgrp,
   NOT .bkgroup - that class is the bank-tab #bankList sticky HEADER BAR, whose
   global rule (position:sticky) would otherwise pin the picker's whole wrapper
   and stop its rows scrolling); only the inner .bkgrouphd header sticks to the
   top of the scroll area so you always know which category you are in */
.bkpick .bkpgrp { display: flex; flex-direction: column; gap: 8px; }
.bkpick .bkgrouphd { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2;
  font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
  padding: 7px 2px 5px; margin: 2px 0 -2px; background: var(--card2); }
.bkpick .bkgrouphd .bkgn { flex: none; background: var(--amber-soft); color: var(--amber-deep);
  border-radius: var(--r-pill); padding: 1px 8px; font-size: .92em; letter-spacing: .04em; }
/* parts mode: the card becomes a non-clickable summary with a row of insert
   buttons (Title / Caption / On-screen hook) so the user drops just the piece
   they want - each button shows only when that part of the idea exists */
.bkpick .bkrow-parts { cursor: default; }
.bkpick .bkrow-parts:hover { border-color: var(--line2); box-shadow: none; }
.bkparts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.bkpart { flex: none; font-size: var(--fs-2); font-weight: 600; letter-spacing: .01em;
  padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.bkpart:hover { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); }
/* parts-mode card: a header over each insertable part + the on-screen hook line, so it
   is obvious which button drops in which text. One quiet small-caps label idiom (.bklbl)
   borrows the category chip's mono + tracking but is fill-less and AA --muted, so it
   reads as a different, quieter tag family than the amber category chip. */
.bkpick .bkrow .bklbl { display: inline-block; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.25; }
/* headline + body bracketed as ONE block = the Caption (headline + body) that the Caption
   button inserts, giving it a visible two-line referent. --line2 is a non-semantic rule. */
.bkpick .bkrow .bkcap { display: flex; flex-direction: column; gap: 2px;
  border-left: 2px solid var(--line2); padding-left: 9px; }
.bkpick .bkrow .bkfield-title { display: flex; flex-direction: column; gap: 1px; }
.bkpick .bkrow .bkfield-title b { font-size: var(--fs-4); font-weight: 700; line-height: 1.3; }
.bkpick .bkrow .bkcap .bkbody { font-size: var(--fs-3); color: var(--muted); line-height: 1.45; }
/* on-screen hook: its header + the exact video_hook the On-screen hook button burns on -
   heavier --text so it reads as overlay copy, no second amber accent. */
.bkpick .bkrow .bkfield-vhook { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.bkpick .bkrow .bkvh { font-size: var(--fs-2); font-weight: 600; color: var(--text);
  line-height: 1.35; overflow-wrap: anywhere; }
/* Insert lead-in reframes the pills from filters into insert-into-field actions */
.bkpick .bkrow .bkins { margin-top: 9px; }
.bkpick .bkrow .bkins .bklbl-lead { display: block; margin-bottom: 5px; }
.bkpick .bkrow .bkins .bkparts { margin-top: 0; }
.dcapacts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
/* the secondary caption actions, revealed on demand by the "Options" toggle. Its own
   full-width row so it drops cleanly under the primary buttons; hidden collapses it
   (the :not([hidden]) guard keeps display:flex from overriding the hidden attribute). */
.dcapmore { flex-basis: 100%; gap: 8px; margin-top: 4px; }
.dcapmore:not([hidden]) { display: flex; flex-wrap: wrap; }
/* the "Options" disclosure is a compact, secondary affordance - smaller than the
   action buttons it reveals, since it is just the way in to them. */
.dcapmore-btn { padding: 6px 13px; font-size: var(--fs-3); }
.dcapmore-btn .bic svg { width: 14px; height: 14px; }
.dcapmore-chev { display: inline-flex; margin-left: 3px; transition: transform .18s; }
.dcapmore-chev .bic svg { width: 13px; height: 13px; }
.dcapmore-btn.open .dcapmore-chev { transform: rotate(90deg); }
/* the inline panel under the caption actions (variants / translate choices) */
.dcappanel { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
/* small full-width lead-in above the choices ("Translate the caption into:") -
   its own row, quiet and compact so it labels the options without shouting */
.dcaphint { flex-basis: 100%; margin: 2px 0 1px; font-size: var(--fs-2); opacity: .7;
  letter-spacing: .04em; }
/* target-language buttons: a round SVG flag (Windows-safe - Unicode flag emoji
   don't render on Windows Chrome/Edge) sits before the language name, which stays
   the real label. alt="" - the flag is decorative, the name carries the meaning. */
.dcapvar-lang { display: inline-flex; align-items: center; gap: 7px; }
.capflag { width: 18px; height: 18px; border-radius: 50%; flex: none; display: block;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .28); }
.bkfull { margin-top: 10px; padding: 12px 14px; background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--r-3); }
.bkfull p { margin: 6px 0; font-size: var(--fs-4); white-space: pre-wrap; }
.bkmeta { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.qthumb { flex: none; width: var(--thumb-list); height: var(--thumb-list); border-radius: var(--r-4); margin-right: 12px;
  background-color: var(--card2); background-size: cover; background-position: center;
  border: 1px solid var(--line); position: relative; }
.qthumb.none::after { content: "TXT"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); }
/* video posts get a real poster-frame thumbnail (the 1s mark = the branded hook)
   with a small play glyph, instead of the "TXT" placeholder */
.qthumb .qthumb-vid { width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  display: block; }
.qthumb.qvid::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%, -50%); border-style: solid; border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .95);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); pointer-events: none; }
/* media-count badge: white numeral (Peter's call) kept legible on the bright amber
   with a soft dark text-shadow, and a card-colour ring so it reads as a clean chip
   punched onto the thumbnail corner rather than melting into a busy photo. */
.qthumb .ord { position: absolute; right: -5px; bottom: -5px; background: var(--amber);
  color: #fff; font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, .5);
  border-radius: 999px; min-width: 17px; height: 17px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--card); }

/* create-with-AI row + library actions */
.genrow textarea { width: 100%; min-height: 64px; margin-bottom: 12px; }
.genopts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stylechips { display: flex; gap: 8px; flex-wrap: wrap; }
.genfrombank { margin-left: auto; }   /* group From-bank + Generate to the right */
#genGo { white-space: nowrap; }         /* never wrap the label to two lines */
/* "Change an image" (image-to-image): mode toggle + reference slot + presets */
.genmode { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.genmodechip { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  padding: 7px 13px; border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: none; color: var(--muted); cursor: pointer; }
.genmodechip.on { color: var(--amber-deep); background: var(--amber-soft);
  border-color: var(--amber); font-weight: 700; }
.genrefslot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#genRefThumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); }
.genrefbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.genpresets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.genconsentwrap { margin-bottom: 12px; }
.genconsent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-2);
  color: var(--dim); line-height: 1.4; cursor: pointer; }
.genconsent input { margin-top: 3px; flex: 0 0 auto; }
/* Creative Studio > AI Image pane (own ids; reuses .genmode/.genrefslot/.genconsent) */
.staimode { margin-bottom: 12px; }
.stAichips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* Multi-select SIZES tray in "Change an image" - reuses the .collcheck tick pill
   (Ad Engine / collage SIZES precedent). flex-wrap so it never scrolls the page
   sideways at 375px; the tick + label carry state, so labels stay static. */
.stAisizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.stAisizes .collcheck { min-height: 32px; }
.stAisizes .collcheck small { opacity: .6; font-family: var(--font-mono); font-size: .82em; }
.stAisizes .collcheck input:disabled { opacity: .5; }
.stAisizes .collcheck:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.staisizehint { margin: 2px 0 10px; min-height: 1.1em; }
/* BRAND LOOK row (AI Image -> Make new): surfaces the brand reference kit that the
   generate endpoint already applies. flex-wrap so status+switch sit on line one and
   thumbnails wrap below at 375px - never a sideways scroll. */
.staikitrow { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: rgba(127,140,170,.05); }
.staikit-head { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  color: var(--dim); margin-bottom: 6px; }
.staikit-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staikit-sw { flex: 0 0 auto; }
.staikit-status { flex: 1 1 200px; min-width: 0; font-size: var(--fs-3); }
.staikit-link { flex: 0 0 auto; white-space: nowrap; }
.staikit-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.staikit-thumbs img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); }
.staikit-help { margin-top: 6px; }
.stAibankrow { margin: 12px 0; }
#stAiRefThumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); }
.stairefs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stairefs:empty { display: none; }
.stairef-thumb { position: relative; display: inline-flex; }
.stairef-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); }
.stairef-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--card); color: var(--dim); cursor: pointer; }
.stairef-x .bic, .stairef-x svg { width: 12px; height: 12px; margin: 0; }
.stairefadd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.staiconsent { margin-top: 12px; }
.filterchips { display: inline-flex; gap: 6px; margin-right: 12px; }
.filterchips button { background: none; border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 3px 11px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); cursor: pointer; }
.filterchips button.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
/* Content-bank topic filter: its OWN full-width row that WRAPS, so every topic is
   visible at once (no clipped/overflowing header, no sideways scroll on mobile).
   ID beats the mobile .filterchips{overflow-x:auto} rule so it wraps everywhere. */
#bankCatChips { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 20px 10px;
  margin: 0; overflow: visible; }
.filterchips button .bccount { opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.filterchips button.on .bccount { opacity: .8; }
/* Media-library header on ONE line (>=1024px desktop): filters sit left by the title,
   Refresh/Select/search/sort on the right. It never wraps to a second line - the
   search shrinks and, only if truly tight, the filter chips scroll horizontally to
   absorb overflow. Below 1024px it falls back to the base wrap (the <=760px mobile
   rules still win). Verified by measurement: 1 line + no overflow from ~620px up to
   the .content 1200px cap (~1088px inner), which is why it wrapped even on wide screens. */
/* The panel is .nofold (no chevron to reserve) and the text groups run one step smaller
   (buttons, search, sort, GROUP SIZES, chip padding) so every filter chip - VIDEOS
   included - shows in full at a normal desktop width instead of hiding in the scroll. */
@media (min-width: 1024px) {
  .libhead { flex-wrap: nowrap; gap: 5px; }
  .libhead .btn { padding: 6px 10px; font-size: var(--fs-2); border-radius: var(--r-3); }
  .libhead #mediaRefresh .bic { width: 13px; height: 13px; margin-right: 4px; }
  .libhead #mediaSearch { flex: 0 6 140px; min-width: 64px; width: auto; margin-right: 0;
    font-size: var(--fs-2); padding: 6px 10px; }
  .libhead #mediaSort { flex: 0 0 auto; margin-right: 0; font-size: var(--fs-2); padding: 6px 8px; }
  .libhead .minigroup { gap: 6px; margin-left: 0; }
  .libhead .minigroup em { font-size: var(--fs-2); letter-spacing: .02em; }
  .libhead #mediaFilters { flex: 0 .01 auto; min-width: 0; margin-right: 0; gap: 3px;   /* search shrinks first */
    overflow-x: auto; scrollbar-width: none; }
  .libhead #mediaFilters button { padding: 3px 8px; letter-spacing: .06em; }
  .libhead #mediaFilters::-webkit-scrollbar { height: 0; }
  .libhead .libtitle, .libhead .tipdot { flex: 0 0 auto; }
  .libhead .spacer { flex: 1 1 8px; min-width: 0; }
}
.masset { position: relative; }
.masset .img { position: relative; }
.aibadge { position: absolute; left: 8px; top: 8px; background: rgba(7,11,20,.72); color: #ffad33;
  font-size: var(--fs-1); letter-spacing: .12em; border-radius: var(--r-2); padding: 2px 7px; }
.mact { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0;
  transition: opacity .18s; }
.masset:hover .mact, .masset:focus-within .mact { opacity: 1; }
/* touch has no hover: reveal the asset actions permanently (mirrors .mth .mthx) */
@media (hover: none) { .masset .mact { opacity: 1; } }
.mbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r-3); background: rgba(255,255,255,.92); border: 1px solid var(--line2);
  /* fixed dark glyph - the button is always a light chip, so var(--text) turned
     the icon white-on-white (invisible blank box) in dark mode. */
  color: #1c2740; font-size: var(--fs-4); cursor: pointer; text-decoration: none; }
.mbtn:hover { border-color: var(--amber); }
.mbtn.del:hover { border-color: var(--red); color: var(--red); }
.masset .meta .hlink { font-size: var(--fs-1); }
.genph .img { background: linear-gradient(100deg, var(--card2) 40%, #fff 50%, var(--card2) 60%);
  background-size: 200% 100%; animation: genshimmer 1.2s infinite linear; }
@keyframes genshimmer { to { background-position: -200% 0; } }

/* ticket attachments */
.tkattrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.tkattrow .btn.dragover { border-color: var(--amber); background: var(--amber-soft); }
.tkatts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.tkatt { position: relative; display: inline-block; }
.tkatt img, .tkmsg .tkatts img { width: 74px; height: 74px; object-fit: cover;
  border-radius: var(--r-3); border: 1px solid var(--line2); display: block; }
.tkmsg .tkatts { margin-top: 8px; }
.tkmsg .tkatts a:hover img { border-color: var(--amber); }
.tkattdel { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--red);
  font-size: var(--fs-2); cursor: pointer; line-height: 1; }
.notifyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.notifyrow input[type=email] { flex: 1; min-width: 220px; }

/* ideas bank: how-it-works strip, clickable topic cards, grouped list */

.bcard { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bcard:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.bcard.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), var(--shadow); }
/* Topic cards (grid view): roomy + clean, not congested. A provenance EMBLEM heads each
   card beside its name, the ready-count is the hero figure, and a generous vertical rhythm
   with clear grouping keeps it uncluttered. */
.bcard { padding: 16px 18px 15px; border-radius: var(--r-5); }
#bankCards { gap: 16px; }
/* header: round emblem + topic name on one line; the emblem is tinted by provenance */
.bcard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.bcard-ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-soft); color: var(--amber-deep);
  box-shadow: inset 0 0 0 1px rgba(242, 151, 24, .16); }
.bcard-ico svg, .bcard-ico .bic { width: 19px; height: 19px; }
.bcard-ico.prov-scanned { background: var(--scan-soft); color: var(--scan);
  box-shadow: inset 0 0 0 1px var(--scan); }
.bcard-ico.prov-removed { background: var(--card2); color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line2); }
.bcard .bcat-name { margin: 0; font-size: var(--fs-5); line-height: 1.25; min-width: 0;
  overflow-wrap: anywhere; }   /* a long single-word topic (SocialMediaMarketing) must break, never overflow */
.bcard .prov-badge { margin: 0 0 14px; }
.bcard > b { font-size: var(--fs-7); line-height: 1; padding-right: 0; }   /* hero ready-count */
.bcard .bcard-readylbl { display: block; margin-top: 3px; }
.bcard .bbar { margin-top: 13px; height: 6px; }
.bcard .bbar-sub { margin-top: 6px; }
.bcard .bcard-acts { margin-top: 15px; }

/* ===== "Your Topics" GRID redesign: clean, notification-style, easy to read =====
   Cleaner + simpler per Peter (the old cards were "too hard to read"), modelled on a
   Fluent notification card: emblem tile + one clear proportional TITLE, a quiet source
   label, the ready-count spoken as one plain sentence, a thin bar with a plain caption,
   and a hairline-set-off action row. Every rule is scoped to #bankCards:not(.aslist) so
   it NEVER touches the shared .kcard KPI cards (Overview/Analytics) NOR the compact LIST
   view (#bankCards.aslist) - the id lets these cleanly beat the .kcard span/.kcard b
   inheritance that set prose in mono micro-type (the main "hard to read" cause), while the
   :not(.aslist) fence keeps every existing list rule working verbatim. Tokens only, so
   dark mode flips for free. */
/* flex column so the action row bottom-aligns (margin-top:auto below); the grid already
   stretches every card in a row to equal height, so the options line up across cards */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard { padding: 18px 18px 16px; display: flex; flex-direction: column; }
/* header: the topic NAME is the sole hero - top-aligned and full width. The emblem tile
   was removed: it centred each title against its 40px height, so a 1-line title floated
   mid-height while a 3-line one started at the top - titles never lined up. Provenance
   still reads from the dotted "Rotation topic" label below (dot/ring + words, WCAG 1.4.1).
   A 2-line min-height reserves consistent title space so the count + bar line up across
   cards whatever the title length; full width lets normal titles wrap at spaces (no more
   emblem-squeezed mid-word breaks like "Automatio n"). */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard-head { display: block; margin-bottom: 8px; }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard-ico { display: none; }
/* title = a compact tinted band (smaller fs-4, amber-soft wash, rounded), FIXED height so
   every card's band is identical and the provenance + count + bar + actions all line up.
   The title is clamped to 2 lines with an ellipsis (-webkit-line-clamp) and vertically
   CENTRED in the band (-webkit-box-pack:center), so 1-line and 2-line titles both sit
   centred and keep the rest aligned. overflow-wrap:anywhere + overflow:hidden mean a long
   single word (e.g. SocialMediaMarketing) breaks and, if still too long, is cut with "..."
   inside the band - it can never overflow the card. Height in EM so it scales with A-/A+. */
:is(#bankCards:not(.aslist), #bankArchCards) .bcat-name { display: flex; align-items: center; box-sizing: border-box; height: 3.9em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-5); line-height: 1.3;
  color: var(--text); text-align: left; overflow: hidden;
  background: var(--amber-soft); padding: 8px 12px; border-radius: var(--r-3); }
/* inner clamp: 2 lines max + ellipsis; the flex band above vertically CENTRES this block,
   so a 1-line and a 2-line title both sit centred in the same fixed-height band.
   font-* set EXPLICITLY here: this span otherwise matches the shared ".kcard span" rule
   (mono, 0.6rem, tracked) and rendered the title as tiny monospace - the id-scoped
   selector beats .kcard span so the title reads as the proper proportional body font. */
:is(#bankCards:not(.aslist), #bankArchCards) .bcat-clamp { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; width: 100%; min-width: 0;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-5); line-height: 1.3;
  letter-spacing: normal; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
/* provenance demoted: the shouty bordered UPPERCASE-MONO pill becomes a quiet body-text
   source line. Non-hue cue (WCAG 1.4.1): filled dot for active kinds, hollow ring for
   "removed" - on top of the per-kind emblem glyph (cycle/search/pause) and the label words. */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge { display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 0; border: 0; background: none; border-radius: 0; white-space: normal; cursor: help;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-2);
  letter-spacing: normal; text-transform: none; color: var(--neutral); }
/* real per-kind glyph (cycle / search / pause) instead of a generic dot, coloured to the
   kind so provenance reads at a glance without relying on hue alone (glyph + words). */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge .bic { flex: none; margin: 0; }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge .bic svg { width: 15px; height: 15px; }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge.prov-rotation .bic { color: var(--amber-deep); }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge.prov-scanned .bic { color: var(--scan); }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge.prov-removed .bic { color: var(--neutral); }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge.prov-own .bic { color: var(--neutral); }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .prov-badge.prov-archived .bic { color: var(--neutral); }
/* the ready-count as ONE plain sentence: amber-deep figure emphasised inline, the rest in
   proportional body text - killing the mono micro-type .bcard-readylbl inherited from .kcard span */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard > b { display: inline; font-family: var(--font-display);
  font-size: var(--fs-6); font-weight: 700; line-height: 1; color: var(--amber-deep); padding: 0; }
:is(#bankCards:not(.aslist), #bankArchCards) .bcard-readylbl { display: inline; margin: 0 0 0 .35em;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-4);
  letter-spacing: normal; text-transform: none; color: var(--text); }
/* thin bar + ONE calm plain-language caption (the second de-mono'd line) */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard .bbar { margin-top: 13px; }
:is(#bankCards:not(.aslist), #bankArchCards) .bbar-sub { margin-top: 8px; font-family: var(--font-body);
  font-weight: 400; font-size: var(--fs-2); letter-spacing: normal; text-transform: none; color: var(--neutral); }
/* actions: a quiet icon row set off by a hairline, pinned to the BOTTOM (margin-top:auto)
   so the options line up across the equal-height cards regardless of title length */
:is(#bankCards:not(.aslist), #bankArchCards) .bcard-acts { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
/* the YOUR TOPICS toolbar buttons carry a house glyph (data-bic, hydrated at boot); lay
   out the icon + label as a centred row like the Overview action buttons */
#bankManageTopics, #bankFromImages, #bankFromUrl, #bankGen { display: inline-flex; align-items: center; gap: 7px; }
#bankManageTopics .bic svg, #bankFromImages .bic svg, #bankFromUrl .bic svg, #bankGen .bic svg { width: 16px; height: 16px; }
/* Topics-tab subtitle: says what a topic IS (a theme written in your brand's voice) in a
   calm secondary line under the header, so the tab reads clean without extra chrome */
.bksub-note { margin: 0 0 14px; font-size: var(--fs-3); line-height: 1.5; color: var(--neutral); }

/* list view: make the header wrapper transparent so the name stays a direct flex child of
   the compact row (the emblem is a grid-card flourish, dropped in the list) */
.cards.aslist .bcard-head { display: contents; }
.cards.aslist .bcard-ico { display: none; }
.cards.aslist .bcat-name { font-size: var(--fs-3); }
.bcat-name { display: block; font-weight: 600; font-size: var(--fs-4); color: var(--text); margin-bottom: 4px; }
/* provenance badge: where a topic's ideas came from (rotation / scan / extra) */
.prov-badge { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  border: 1px solid transparent; vertical-align: middle; white-space: nowrap; cursor: help; }
/* the provenance glyph sits inline before the label wherever the badge is a pill (Manage
   topics modal, etc.); sized small so it never blows out the pill. The grid card + list
   scope this differently (grid shows a bigger coloured glyph; list hides it). */
.prov-badge .bic { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.prov-badge .bic svg { width: 13px; height: 13px; }
.cards.aslist .prov-badge .bic { display: none; }   /* list pill stays label-only, unchanged */
/* variants are doubled (.prov-badge.prov-x) so their colour beats the generic
   ".kcard span" rule (0,1,1) when a badge sits inside a topic card. */
.prov-badge.prov-rotation { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.prov-badge.prov-scanned { background: var(--scan-soft); color: var(--scan); border-color: var(--scan); }
/* removed = out of rotation: muted + dashed border reads as "paused / set aside" */
.prov-badge.prov-removed { background: var(--card2); color: var(--dim); border-color: var(--line2); border-style: dashed; }
/* own = ideas you saved / added / imported yourself, outside your rotation: neutral, solid */
.prov-badge.prov-own { background: var(--card2); color: var(--muted); border-color: var(--line2); }
/* archived = a whole topic you set aside (the Show archived topics fold) */
.prov-badge.prov-archived { background: var(--card2); color: var(--dim); border-color: var(--line2); border-style: dashed; }
/* "Show archived topics" fold under the topic cards: the house .foldbtn disclosure, but in
   readable body type (a mono micro-label is too easy to miss for the one way back to them) */
#bankArchived { margin-top: 14px; }
.foldbtn.bkarch-tog { gap: 7px; padding: 6px 12px 6px 9px; font-family: var(--font-body); font-size: var(--fs-3);
  font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text); }
.bkarch-n { min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--card2);
  border: 1px solid var(--line2); font-size: var(--fs-2); line-height: 1.4; text-align: center; color: var(--muted); }
#bankArchBody { margin-top: 12px; }
#bankArchCards { gap: 16px; margin-bottom: 0; }
/* an archived topic's title band is neutral, not the live amber - it is set aside */
#bankArchCards .bcard-arch .bcat-name { background: var(--card2); }
.bkarch-empty { margin: 0; text-align: left; }

/* Tag/pill input (Content categories = rotation topics): looks like an input box
   holding removable pills styled like the ROTATION TOPIC badges + an inline field. */
.tagfield { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: text;
  background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-3); padding: 8px 10px; min-height: 46px; }
.tagfield:focus-within { border-color: var(--amber); box-shadow: var(--focus-ring); }
.tagchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; background: var(--amber-soft);
  color: var(--amber-deep); border: 1px solid var(--amber); border-radius: var(--r-pill);
  padding: 4px 6px 4px 11px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em; }
.tagchip .taglabel { min-width: 0; overflow-wrap: anywhere; }   /* long single topic wraps, never clips its x */
.tagchip .tagx { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  background: none; border: none; cursor: pointer; color: inherit; font-size: 12px; line-height: 1; border-radius: 50%; opacity: .7; }
.tagchip .tagx:hover { opacity: 1; background: var(--amber); color: #fff; }
.taginput { flex: 1 1 120px; min-width: 90px; border: none; background: none; padding: 4px 2px;
  font: inherit; color: var(--text); outline: none; }
.taginput:focus { outline: none; box-shadow: none; }
.bcard .prov-badge { margin: 0 0 6px; font-size: var(--fs-1); letter-spacing: .07em; }
/* Topic-card action icons: sparkle = write 10 ideas into THIS topic, archive =
   retire this topic's unused ideas. Compact icon-only buttons sit bottom-right so
   the card stays tidy; they reuse .btn (colours + hover) via the .icob size mod. */
.bcard-acts { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.btn.icob { padding: 0; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; }
.btn.icob .bic { display: inline-flex; margin: 0; }
.btn.icob .bic svg { width: 16px; height: 16px; }
/* Post-preview density toggle (Posts actions row): OFF hides each row's media
   preview for a tighter, quicker-to-scan list; the icon swaps to a struck image. */
.qpreview-tog svg { width: 16px; height: 16px; display: block; }
.qpreview-tog .ic-preoff { display: none; }
.qpreview-tog .ic-preon { display: inline-flex; }
body.gf-nopreview .qpreview-tog .ic-preon { display: none; }
body.gf-nopreview .qpreview-tog .ic-preoff { display: inline-flex; }
body.gf-nopreview #qList .qthumb { display: none; }
body.gf-nopreview #qList .qrow { padding-top: 11px; padding-bottom: 11px; }
/* legend under the topic cards - names the three badges + where each comes from */
.prov-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2);
  font-size: var(--fs-3); line-height: 1.55; color: var(--muted); }
.prov-legend > b { color: var(--text); font-size: var(--fs-3); flex-basis: 100%; margin-bottom: 2px; }
.prov-legend .hlink { font-size: inherit; }
/* legend markers mirror the redesigned cards: the shouty bordered UPPERCASE-MONO pill
   becomes a quiet dotted label (filled dot for active kinds, hollow ring for "extra"),
   kept inline so the legend still reads as sentences - so the key matches the cards it
   explains. Scoped to .prov-legend so the pill stays wherever else .prov-badge is used. */
.prov-legend .prov-badge { display: inline; padding: 0; border: 0; background: none; border-radius: 0;
  font-family: var(--font-body); font-weight: 600; font-size: inherit; letter-spacing: normal;
  text-transform: none; color: var(--text); white-space: normal; }
.prov-legend .prov-badge::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px; position: relative; top: 1px; }
.prov-legend .prov-badge.prov-rotation::before { background: var(--amber); }
.prov-legend .prov-badge.prov-scanned::before { background: var(--scan); }
.prov-legend .prov-badge.prov-own::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--neutral); }
.bbar { height: 6px; border-radius: var(--r-pill); background: var(--line); margin-top: 8px; overflow: hidden; }
.bbar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.bbar-sub { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .08em; color: var(--dim); margin-top: 5px; }
.bkgroup { position: sticky; top: 0; z-index: 5; background: var(--card2);
  border-bottom: 1px solid var(--line); padding: 8px 16px; font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--muted); }
/* per-group wrapper (bank tab grouped/archived view): confines each sticky
   .bkgroup header to its own group so the next group pushes it out of view,
   instead of every header pinning at top:0 of #bankList at once and stacking
   (which pokes a taller earlier header out below a shorter current one). */
.bkgroupwrap { display: flow-root; }

/* media search + names */
.minisearch { width: 190px; padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-3);
  font-family: var(--font-body); border: 1px solid var(--line2); background: var(--card);
  color: var(--text); margin-right: 10px; }
.minisearch:focus { outline: none; border-color: var(--amber); }
.mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
  font-size: var(--fs-2); color: var(--text); }

/* media lightbox + sort + unused chip */
.minisort { padding: 7px 10px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-3);
  margin-right: 10px; }
.freechip { font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep);
  background: var(--amber-soft); border-radius: var(--r-pill); padding: 3px 9px;
  white-space: nowrap; flex: none; align-self: center; }
.hlink.mono[data-mgo] { white-space: nowrap; flex: none; }
.masset { cursor: pointer; }
.masset:hover { box-shadow: var(--shadow); }
.mlb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.mlbdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.62); }
.mlbcard { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) 320px;
  gap: 0; width: min(980px, 94vw); max-height: 88vh; background: var(--card);
  border-radius: var(--r-5); overflow: hidden; box-shadow: var(--shadow-lg); }
.mlbmediawrap { position: relative; overflow: hidden; background: #0c1220; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.mlbmediawrap::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #0c1220 34%, #1b2942 50%, #0c1220 66%); background-size: 200% 100%;
  animation: mlbshim 1.15s linear infinite; }
.mlbmediawrap.loaded::before { display: none; }
@keyframes mlbshim { to { background-position: -200% 0; } }
.mlbimg { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 88vh; object-fit: contain;
  display: block; opacity: 0; transition: opacity .3s ease; }
.mlbmediawrap.loaded .mlbimg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mlbmediawrap::before { animation: none; } .mlbimg { transition: none; } }
.mlbside { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px; min-width: 0;
  overflow-y: auto; max-height: 88vh; }
/* the NAME + Save row is the TOP row of the side panel, and the close (X) floats at
   top:12/right:12 (34px) over the card's top-right - i.e. over this row. Reserve its
   footprint (46px) on the right so the amber Save button never sits under the X. */
.mlbnamerow { display: flex; gap: 8px; padding-right: 40px; }
.mlbnamerow input { flex: 1; min-width: 0; }
.mlbnamerow .btn { flex: none; }
/* Selecting the NAME expands the input to the full panel width (Save wraps neatly below) so a
   long AI-generated name is readable + editable instead of the truncated ~15 chars. The row's
   right padding keeps the widened input's end clear of the close (X) at the top-right. */
.mlbnamerow:focus-within { flex-wrap: wrap; }
.mlbnamerow:focus-within input { flex: 1 1 100%; }
.mlbside .mlbslim { font-size: var(--fs-3); padding: 6px 10px; align-self: flex-start; }
/* Download + Share: two equal, centred buttons; the download is an <a>, kill its underline */
.mlbget { display: flex; gap: 8px; margin: 2px 0; }
.mlbget .btn { flex: 1; justify-content: center; text-decoration: none; }
.mlbgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mlbgrid .btn { width: 100%; font-size: var(--fs-3); padding: 8px 10px; }
.mlbgrid .mlbspan2 { grid-column: 1 / -1; }
/* Edit image / Edit video LEAD their editing group: amber fill (the main emphasis) + one step
   up the type scale (--fs-3 -> --fs-4, the app's standard .btn size) with a touch more height,
   so the primary edit action reads clearly above its compact grey siblings without shouting.
   Both twins share .mlbedit so they never drift; .btn.amber .bic keeps the crop glyph dark. */
.mlbgrid .btn.mlbedit { font-size: var(--fs-4); padding: 10px 12px; }
.mlbside label { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em; color: var(--muted); }
.mlbside input { width: 100%; padding: 11px 13px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); font-size: var(--fs-5); font-family: var(--font-body); }
.mlbside input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.mlbmeta { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
/* media properties card: dimensions, size, aspect, network fit, default match */
.mlbprops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 6px 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2); }
.mlbprop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mlbprop-wide { grid-column: 1 / -1; }
.mlbprop-k { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.mlbprop-v { font-size: var(--fs-4); font-weight: 600; color: inherit; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
/* media lightbox: where the image is filed + a one-click Move (mirrors bulk move) */
.mlbfolder { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; flex-wrap: wrap; }
.mlbfolder .mlbprop-k { flex: none; }
.mlbfolder-name { font-size: var(--fs-4); font-weight: 600; color: var(--text); }
.mlbmovebtn { margin-left: auto; padding: 5px 12px; font-size: var(--fs-2); }
.movemenu-i.on { color: var(--amber-deep); font-weight: 700; }   /* the folder it's already in */
.mlbdim2 { font-weight: 500; font-size: var(--fs-2); color: var(--dim); text-transform: capitalize; }
.mlbtag { display: inline-block; font-size: var(--fs-2); font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: rgba(20,151,107,.12); color: var(--green, #14976b); }
.mlbtag.warn { background: var(--amber-soft); color: var(--amber-deep); }
.mlbfit { font-size: var(--fs-3); font-weight: 600; }
.mlbfit.ok { color: var(--green, #14976b); }
.mlbfit.warn { color: var(--amber-deep); }
.mlbside .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mlbclose { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; font-size: var(--fs-5);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.mlbclose:hover { border-color: var(--amber); }
.mlbclose .bic { width: 16px; height: 16px; margin: 0; }
.mlbcard:focus { outline: none; }   /* the card takes initial focus (tabindex -1) - no ring on the container */
/* Bottom action bar hierarchy: the destructive Delete stays danger-CODED but OUTLINED, so
   the amber primary (Add to a post) leads and Delete stops out-shouting it. Mirrors the
   documented .detail .actions treatment. */
.mlbside .actions .btn.danger { background: transparent; color: var(--red);
  border-color: rgba(214, 69, 69, .3); box-shadow: none; }
.mlbside .actions .btn.danger:hover { background: var(--red-soft); border-color: var(--red);
  transform: translateY(-1px); }
/* the global .btn.danger rule whitens icon accent-strokes for the FILLED red button; on this
   OUTLINED (light-bg) danger that would make them invisible, so keep the whole glyph red */
.mlbside .actions .btn.danger .bic svg [stroke] { stroke: var(--red); }
.mlbdelnote { font-size: var(--fs-2); color: var(--dim); align-self: center; margin: 0; }
/* Section rule: a hairline above each section header groups the dense panel into zones
   (Common Region). The headers carry inline margin-top, so use padding-top for the gap
   BELOW the rule (margin would be overridden by the inline style). NAME is first -> exempt. */
.mlbside > label:not(:first-child) { border-top: 1px solid var(--line); padding-top: 12px; }
/* Prev/Next paging over the media stage - a translucent dark chip reads on any photo */
.mlbnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(12, 18, 32, .55); color: #fff; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s, border-color .15s; }
.mlbnav:hover { background: rgba(12, 18, 32, .82); border-color: rgba(255, 255, 255, .6); }
.mlbnav.prev { left: 12px; } .mlbnav.next { right: 12px; }
.mlbnav .bic { width: 20px; height: 20px; margin: 0; }
/* A media file that fails to load reads as a legible message, not a broken-image glyph */
.mlbmediawrap.failed .mlbimg { display: none; }
.mlbmediamsg { position: relative; z-index: 2; max-width: 320px; padding: 0 24px; line-height: 1.4;
  text-align: center; color: rgba(255, 255, 255, .78); font-size: var(--fs-3); }
@media (max-width: 760px) {
  /* Full-screen scrolling sheet: the WHOLE card scrolls as ONE column. Was a
     cramped ~44vh nested scroll inside .mlbside (image ate the top half), which
     iOS could not reliably scroll - the action buttons below were unreachable.
     Now .mlb is the single scroll container (block + overflow-y:auto), the card
     fills at least the screen and grows with content, and the last button clears
     the bottom bar + home indicator via padding. Close stays pinned. */
  .mlb { display: block; bottom: auto; height: 100vh; height: 100dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .mlbcard { grid-template-columns: 1fr; width: 100%; min-height: 100%;
    max-height: none; border-radius: 0; overflow: visible; }
  .mlbimg { max-height: 44vh; }
  .mlbside { overflow-y: visible; max-height: none;
    padding-bottom: calc(28px + var(--gf-safe-bottom)); }
  .mlbclose { position: fixed; top: calc(10px + var(--gf-safe-top));
    right: calc(16px + var(--gf-safe-right)); z-index: 10; width: 44px; height: 44px;
    /* fixed over a bright image, a near-white chip vanished: dark translucent + white glyph
       reads on ANY background it overlaps (WCAG 1.4.11 non-text contrast) */
    background: rgba(12, 18, 32, .72); color: #fff; border-color: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  /* HARD rule (no sideways scroll): base .btn is white-space:nowrap, so a long label like
     "Voiced video (upgrade)" forces its grid track wider than the 375px card. Let grid/get
     buttons wrap, and give every control a 44px comfortable touch target. */
  .mlbgrid .btn, .mlbget .btn { white-space: normal; min-width: 0; text-align: center;
    line-height: 1.25; overflow-wrap: anywhere; }
  .mlbgrid .btn, .mlbget .btn, .mlbside .mlbslim, .mlbmovebtn { min-height: 44px; }
  .mlbgrid .btn { display: flex; align-items: center; justify-content: center; }
  .mlbnamerow { padding-right: 0; }   /* close is fixed to the viewport on mobile - the row needs no clearance */
}
.mlbposts { display: flex; flex-wrap: wrap; gap: 8px; }
.mth { position: relative; }
.mth .aibadge { left: 4px; top: 4px; font-size: var(--fs-1); padding: 1px 5px; }

/* checkbox network chips + per-network preview + voice picker */
.netchip2 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 1px solid var(--line2); border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); background: var(--card); transition: all .15s; }
.netchip2:hover { border-color: var(--amber); }
.netchip2.sel { border-color: var(--green); color: var(--green); background: var(--green-soft); }
/* the tick + name are real <button>s now (keyboard + SR operable); strip the native
   button chrome so they read exactly as the old <i>/<b> did. */
.netchip2 .ncbox { width: 16px; height: 16px; border-radius: var(--r-2); border: 1.5px solid var(--line2);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-1);
  font-style: normal; background: var(--card); color: var(--green); flex: none; padding: 0; cursor: pointer; }
.netchip2 .ncbox svg { width: 11px; height: 11px; }
.netchip2 .ncbox:focus-visible, .netchip2 .ncname:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.netchip2 .ncbox:disabled { cursor: default; }
.netchip2.sel .ncbox { border-color: var(--green); background: var(--green-soft); }
.netchip2 .ncname { border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; font-weight: 600; }
.netchip2.ncoff .ncname { text-decoration: underline dotted; text-underline-offset: 3px; }
.connline { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); margin: 6px 0 2px; }
.netprev { border: 1px solid var(--line); border-radius: var(--r-3); margin: 8px 0; background: var(--card2); }
.netprev .npbody { padding: 12px 16px; }
.netprev .nptext { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 12px 14px; font-size: var(--fs-4); white-space: normal; margin-bottom: 8px; }
.voicerow { display: flex; gap: 10px; align-items: center; }
.voicerow select { flex: 1; }

/* one-screen queue: full-width list, editor in a slide-out, previews in popups */
/* Fixed height so the Posts pane is the SAME size with 0 posts or 121: min == max.
   The list scrolls when it overflows; the onboarding / empty state is centred in the
   reserved space - so switching between empty and full never changes the pane height
   (reserve-space pattern, no layout shift; web.dev CLS / Carbon empty-states) and the
   empty content never sits as a lone fragment at the top of a tall box. margin:auto
   centres it yet still lets it scroll from the top when a short screen makes it taller
   than the pane (unlike justify-content:center, which would clip the top). */
.qfull { min-height: calc(100vh - 211px - var(--gf-secbar-h, 0px)); max-height: calc(100vh - 211px - var(--gf-secbar-h, 0px));
  overflow-y: auto; display: flex; flex-direction: column; }
/* The section bar sits above the Posts list: the list gives up exactly the bar's height
   (--gf-secbar-h) and the gaps under the filters and the list tighten, so the New post
   row is ON SCREEN on load (measured: a 1440x900 window ends New post 14px above the
   bottom edge). Phones scroll the whole page, so their own rules stand. */
@media (min-width: 641px) {
  #tab-queue > #qFilters { margin-bottom: 10px; }
  #tab-queue > #qListWrap, #tab-queue > #qCalWrap { margin-bottom: 12px; }
  #tab-queue > #qActions { margin-top: 12px; }
}
.qfull > div { flex: 1 0 auto; display: flex; flex-direction: column; }
.qfull .qflow, .qfull .empty { margin: auto; }
.postwrap { position: fixed; inset: 0; z-index: 220; }
.postwrap[hidden] { display: none; }
.postdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.55); }
.postpanel { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(640px, 50vw, 96vw); max-width: 100vw;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: ppin .22s ease; }
@keyframes ppin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the panel runs from the very top of the screen: its header clears the status bar */
.postpanel header { display: flex; align-items: center; gap: 12px;
  padding: calc(16px + var(--gf-safe-top)) calc(22px + var(--gf-safe-right)) 16px 22px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.postpanel header b { font-size: var(--fs-2); letter-spacing: .14em; color: var(--muted); }
.ppclose { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); cursor: pointer; font-size: var(--fs-4); flex: none;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.ppclose .bic { width: 15px; height: 15px; margin: 0; }
.ppclose:hover { border-color: var(--amber); }
/* in-panel "?" - start the contextual walkthrough from inside the editor overlay */
.pphelp { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.pphelp svg { width: 18px; height: 18px; }
.pphelp:hover, .pphelp[aria-expanded="true"] { border-color: var(--amber); color: var(--text); }
.pphelp:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Top-right quick-action icons: reach Save / Post now / Approve|Schedule without
   scrolling to the footer. Mirror the footer buttons; delegate to them on click. */
.ppactions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ppico { width: 34px; height: 34px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card); color: var(--text); cursor: pointer; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.ppico .bic { width: 18px; height: 18px; margin: 0; }
.ppico:hover { border-color: var(--amber); background: var(--card2); }
.ppico.ppico-pri { background: var(--amber); border-color: var(--amber); color: #fff; }
.ppico.ppico-pri .bic svg [stroke="#f29718"] { stroke: #fff; }
.ppico.ppico-pri:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
/* overflow-x:hidden is REQUIRED, not cosmetic: with only overflow-y set, the x-axis
   computes to auto (MDN: a visible axis becomes auto when the other scrolls), so any
   child wider than the panel grows a sideways scrollbar - forbidden in the panel and
   on mobile. overflow-wrap:anywhere breaks long unbroken strings (a caption URL, a
   raw worker error, a pasted hashtag wall) so they never force that width. */
.ppbody { flex: 1; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere;
  padding: 20px calc(24px + var(--gf-safe-right)) calc(32px + var(--gf-safe-bottom)) 24px; }
.ppbody .detail { max-width: none; }
.ppbody .btn { max-width: 100%; }
.btn.medpend { white-space: normal; overflow-wrap: anywhere; }
.fmtaltitem { min-width: 0; }
.medwarn, .mednorm, .dcapainote, .connline, .statusnote { min-width: 0; overflow-wrap: anywhere; }
/* dialogs sit ABOVE the media lightbox (.mlb, 300) - else a form opened from inside
   it (e.g. "+ New folder" in the move menu) renders behind it - but below the tooltip
   layer (1000+), so tipdots inside a form still show on top */
.npwrap { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; }
.npdim { position: absolute; inset: 0; background: rgba(7, 11, 20, 0.45); }
@media (max-width: 760px) {
  /* .npwrap is the SHARED base for ~every modal/sheet overlay (network preview,
     upgrade, media picker, crop, connection popup...). Centered content taller
     than the screen was clipped top+bottom with no way to scroll to it - the same
     bug as the media-detail sheet. Make the wrapper a scroll container and stop the
     clip: modern engines keep small content centred (safe center) but top-align it
     the moment it would overflow; older engines just top-align (flex-start). The
     dim is pinned so it keeps covering the screen while the sheet scrolls.
     (research: flexbox align-items + overflow clip, overscroll-behavior.) */
  .npwrap { align-items: flex-start; align-items: safe center;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-block: calc(14px + var(--gf-safe-top)) calc(18px + var(--gf-safe-bottom)); }
  .npdim { position: fixed; }
}
.npmodal { position: relative; width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
  background: var(--card); border-radius: var(--r-5); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); animation: ppin .18s ease; }

/* gfConfirm inline settings link: a plain text link on its own line under the message */
.gfdlglink { display: inline-block; margin: -4px 0 14px; padding: 0; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; }

/* gfForm footer stamp: e.g. "Created ... . Last saved ..." under the buttons */
.gffoot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-1); color: var(--dim); letter-spacing: .03em; }

/* gfForm pills: click a chip to fill the field with an exact value (e.g. Move to a topic) */
.gfpills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; max-height: 30vh; overflow-y: auto; }
.gfpill { cursor: pointer; border: 1px solid var(--line); background: var(--card2); color: var(--text);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-1); line-height: 1.2; white-space: nowrap; }
.gfpill:hover { border-color: var(--amber); }
.gfpill.sel { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 700; }

/* ---------- platform-true preview frames ---------- */
.npmodal { width: 420px; }
.npmodal.tall { width: 320px; }
/* Commerce -> Studio "Create from product" chooser (body-level modal) */
.cmchprod { display: flex; align-items: center; gap: 12px; padding: 2px 0 16px; }
.cmchprod img, .cmchph { width: 52px; height: 52px; border-radius: var(--r-3); object-fit: cover; flex: 0 0 auto; background: var(--card2); }
.cmchph { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); }
.cmchph .bic { width: 24px; height: 24px; margin: 0; }
.cmchmeta { min-width: 0; }
.cmchmeta b { font-size: var(--fs-4); font-weight: 650; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmchprice { display: block; font-size: var(--fs-3); color: var(--amber-deep); font-weight: 700; margin-top: 2px; }
.cmfmts { display: flex; flex-direction: column; gap: 9px; }
.cmfmt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; }
.cmfmt:hover, .cmfmt:focus-visible { border-color: var(--amber); background: var(--amber-soft); outline: none; }
.cmfmtic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--r-3); background: var(--amber-soft); color: var(--amber-deep); }
.cmfmtic .bic { width: 19px; height: 19px; margin: 0; }
.cmfmttx { flex: 1 1 auto; min-width: 0; }
.cmfmttx b { display: block; font-size: var(--fs-4); font-weight: 650; }
.cmfmttx span { display: block; font-size: var(--fs-3); color: var(--muted); line-height: 1.4; margin-top: 1px; }
.cmfmtgo { flex: 0 0 auto; color: var(--dim); }
.cmfmtgo .bic { width: 16px; height: 16px; margin: 0; }
.cmquick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; margin-top: 12px;
  padding: 12px 14px; border-radius: var(--r-3); border: 1px dashed var(--line2); background: transparent; color: var(--text); cursor: pointer; }
.cmquick:hover, .cmquick:focus-visible { border-color: var(--amber); outline: none; }
.cmquick .bic { width: 18px; height: 18px; margin: 0; color: var(--amber-deep); flex: 0 0 auto; }
.cmquick span { font-size: var(--fs-3); color: var(--muted); line-height: 1.4; }
.cmquick span b { display: block; font-size: var(--fs-4); font-weight: 650; color: var(--text); }
/* Create split-button jump menu - body-level (position:fixed) so the overflow-x
   table wrapper never clips it. Mirrors the chooser cards, one line each. */
.cmcreatemenu { position: fixed; z-index: 1600; min-width: 216px; max-width: 300px; margin: 0; padding: 6px;
  list-style: none; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-4);
  box-shadow: var(--shadow-lg); }
.cmcreatemenu li { margin: 0; }
.cmcreatemenu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--text); cursor: pointer; padding: 9px 10px;
  border-radius: var(--r-2); font-size: var(--fs-3); font-weight: 600; }
.cmcreatemenu button:hover, .cmcreatemenu button:focus-visible { background: var(--amber-soft); outline: none; }
.cmcreatemenu .cmcmic { flex: 0 0 auto; display: inline-flex; color: var(--amber-deep); }
.cmcreatemenu .cmcmic .bic { width: 17px; margin: 0; }
.cmcreatemenu .cmcmic .bic svg { width: 17px; height: 17px; display: block; }
.cmcreatemenu .cmcml { flex: 1 1 auto; min-width: 0; }
.cmcreatemenu .cmbadge2 { margin-left: 0; flex: 0 0 auto; }
/* Create popup: effort badges, "where it goes" footer, and the modal states */
.cmbadge2 { display: inline-block; margin-left: 8px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-2); vertical-align: middle; }
.cmbadge2.instant { background: var(--amber-soft); color: var(--amber-deep); }
.cmbadge2.design { background: var(--card2); color: var(--dim); border: 1px solid var(--line2); }
.cmbadge2.ai { background: var(--scan-soft); color: var(--scan); }
.cmchfoot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: var(--fs-3);
  color: var(--muted); line-height: 1.5; }
.cmchfoot b { color: var(--text); font-weight: 650; }
.cmbadge2.ad { background: var(--amber-soft); color: var(--amber-deep); }
/* Advertise-this-product flow (create popup = body-level .cmchoose modal). Everything
   is scoped under .cmchoose so the broad ".npbody label" (0,1,1) rule can't flatten the
   checkbox rows (which are <label>s) into mono/uppercase/block. */
.cmchoose .cmadintro { font-size: var(--fs-3); color: var(--muted); line-height: 1.5; margin: 4px 0 14px; }
.cmchoose .cmadintro b { color: var(--text); font-weight: 650; }
.cmchoose .cmadnets, .cmchoose .cmadress { display: flex; flex-direction: column; gap: 8px; }
.cmchoose .cmadnet { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); }
.cmchoose label.cmadnet { font-family: var(--font-body); font-size: var(--fs-4); text-transform: none;
  letter-spacing: 0; margin: 0; cursor: pointer; }
.cmchoose .cmadnet-l { flex: 1 1 auto; min-width: 0; font-size: var(--fs-4); color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmchoose .cmadsel { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.cmchoose .cmadpill { flex: 0 0 auto; font-size: var(--fs-1); font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); background: var(--card2);
  color: var(--neutral); border: 1px solid var(--line2); }
.cmchoose .cmadpill.on { background: var(--green-soft); color: var(--green); border-color: transparent; }
.cmchoose .cmadpill.warn { background: var(--amber-soft); color: var(--amber-deep); border-color: transparent; }
.cmchoose .cmadres { padding: 11px 13px; border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2); }
.cmchoose .cmadres.ok { border-color: var(--green-soft); }
.cmchoose .cmadres.bad { border-color: var(--red-soft); background: var(--red-soft); }
.cmchoose .cmadres-h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-4); font-weight: 600;
  color: var(--text); margin-bottom: 8px; }
.cmchoose .cmadres-h .bic { width: 17px; height: 17px; flex: 0 0 auto; }
.cmchoose .cmadres.ok .cmadres-h .bic { color: var(--green); }
.cmchoose .cmadres.bad .cmadres-h { margin-bottom: 4px; }
.cmchoose .cmadres.bad .cmadres-h .bic { color: var(--red); }
.cmchoose .cmadres .btn { margin-top: 2px; white-space: normal; text-align: left; }
.cmchoose .cmaddisc, .cmchoose .cmadwarn { display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-2);
  color: var(--amber-deep); background: var(--amber-soft); border-radius: var(--r-3); padding: 9px 11px; line-height: 1.45; margin-top: 10px; }
.cmchoose .cmaddisc .bic, .cmchoose .cmadwarn .bic { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.cmchoose .cmadwarn { margin-top: 8px; }
.cmgen { padding: 8px 0 4px; }
.cmgen-sk { display: flex; flex-direction: column; gap: 10px; }
.cmgen-img { height: 150px; border-radius: var(--r-3); }
.cmgen-l { height: 13px; border-radius: var(--r-2); }
.cmgen-l.s { width: 55%; }
.cmgen-img, .cmgen-l { background: linear-gradient(90deg, var(--card2) 25%, var(--line2) 37%, var(--card2) 63%);
  background-size: 400% 100%; animation: cmshim 1.3s ease infinite; }
@keyframes cmshim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.cmgen-status { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: var(--fs-4);
  font-weight: 600; color: var(--text); }
.cmspin { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--line2);
  border-top-color: var(--amber); animation: cmspin .7s linear infinite; flex: 0 0 auto; }
@keyframes cmspin { to { transform: rotate(360deg); } }
.cmres { padding: 6px 0 4px; }
.cmres-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-5); font-weight: 700;
  color: var(--text); margin-bottom: 12px; }
.cmres-h .bic { width: 20px; height: 20px; margin: 0; color: var(--amber-deep); flex: 0 0 auto; }
.cmres-img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--r-3); background: var(--card2); }
.cmres-cap { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-3); background: var(--card2); font-size: var(--fs-3);
  color: var(--muted); line-height: 1.5; max-height: 120px; overflow-y: auto; white-space: pre-wrap; }
.cmres-dest { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; font-size: var(--fs-3); color: var(--muted); }
.cmres-dest .bic { width: 15px; height: 15px; margin: 2px 0 0; color: var(--green, #16a34a); flex: 0 0 auto; }
.cmres-dest b, .cmres-p b { color: var(--text); font-weight: 650; }
.cmres-p { margin: 0 0 4px; font-size: var(--fs-4); color: var(--muted); line-height: 1.55; }
.cmres-acts, .cmconf-acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cmconf-p { margin: 4px 0 0; font-size: var(--fs-4); color: var(--text); line-height: 1.6; }
.cmconf-p b { font-weight: 650; }
/* in-modal Post image preview (no Studio detour) */
.cmimg { margin-top: 8px; border-radius: var(--r-3); overflow: hidden; background: var(--card2); border: 1px solid var(--line); }
.cmimg-prev { display: block; width: 100%; max-height: 46vh; object-fit: contain; }
.cmimg-note { margin-top: 10px; font-size: var(--fs-1); color: var(--dim); line-height: 1.5; }
.cmimg-note b { color: var(--neutral); font-weight: 600; }
/* source-photo picker in the Create popup (a product with more than one photo) */
.cmsrc { margin: 2px 0 14px; }
.cmsrc-h { font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .04em; opacity: .6; font-weight: 700; margin-bottom: 7px; }
.cmsrc-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.cmsrc-t { padding: 0; border: 2px solid transparent; border-radius: var(--r-3); background: none; cursor: pointer; width: 54px; height: 54px; overflow: hidden; flex: 0 0 auto; }
.cmsrc-t img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-3); }
.cmsrc-t.on, .cmsrc-t:focus-visible { border-color: var(--amber); outline: none; }
.cmsrc-hint { font-size: var(--fs-3); color: var(--muted); opacity: .7; margin-top: 7px; }
/* AI video: advert-style shot picker + live build stepper + inline result */
.cmai-lead { margin: 2px 0 12px; font-size: var(--fs-3); color: var(--muted); line-height: 1.5; }
.cmai-lead b { color: var(--text); font-weight: 650; }
.cmaiacc { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.cmaiacc-lab { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.cmaiacc-sel { border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2);
  color: var(--text); padding: 9px 12px; font-size: var(--fs-3); font-family: var(--font-body); }
.cmaiacc-sel:focus { outline: none; border-color: var(--amber); }
.cmaiacc-hint { font-size: var(--fs-1); color: var(--dim); line-height: 1.4; }
/* compact single-row brand-outro opt-in. SCOPED as ".cmaiout X" (0,2,0 / 0,2,1) so it BEATS
   the modal's ".gfdlg label {display:block}" and ".gfdlg input {width:100%}" (0,1,1) rules -
   those stretched the checkbox to full width (it then rendered centred on its own line) and
   blocked the label. Checkbox sits AFTER the label text, all on one line. */
.cmaiout { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.cmaiout .cmaiout-main { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0;
  margin: 0; letter-spacing: normal; cursor: pointer; }
.cmaiout .cmaiout-tx { font-size: var(--fs-3); font-weight: 600; color: var(--text);
  letter-spacing: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmaiout .cmaiout-main input { width: 16px; height: 16px; margin: 0; accent-color: var(--amber);
  flex: none; cursor: pointer; }
.cmaiout-link { flex: none; border: 0; background: none; padding: 4px 2px; font-size: var(--fs-1);
  color: var(--amber-deep); font-weight: 600; cursor: pointer; white-space: nowrap; }
.cmaiout-link:hover { text-decoration: underline; }
.cmaishots { display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--fs-3); min-height: 64px; }
.cmaishots.ready { align-items: stretch; justify-content: flex-start; min-height: 0; }
.cmaishot { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px;
  border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; }
.cmaishot:hover, .cmaishot:focus-visible { border-color: var(--amber); background: var(--amber-soft); outline: none; }
.cmaishot-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--r-3); background: var(--scan-soft); color: var(--scan); }
.cmaishot-ic .bic { width: 18px; height: 18px; margin: 0; }
.cmaishot-tx { flex: 1 1 auto; min-width: 0; }
.cmaishot-tx b { display: block; font-size: var(--fs-4); font-weight: 650; }
.cmaishot-tx span { display: block; font-size: var(--fs-2); color: var(--muted); line-height: 1.4; margin-top: 1px; }
/* per-style accent so the shot rows read as distinct choices (theme-safe soft tints;
   inset shadow survives the amber hover border) */
.cmaishots.ready .cmaishot:nth-child(3n+1) { box-shadow: inset 3px 0 0 var(--amber); }
.cmaishots.ready .cmaishot:nth-child(3n+1) .cmaishot-ic { background: var(--amber-soft); color: var(--amber-deep); }
.cmaishots.ready .cmaishot:nth-child(3n+2) { box-shadow: inset 3px 0 0 var(--scan); }
.cmaishots.ready .cmaishot:nth-child(3n+2) .cmaishot-ic { background: var(--scan-soft); color: var(--scan); }
.cmaishots.ready .cmaishot:nth-child(3n+3) { box-shadow: inset 3px 0 0 var(--green); }
.cmaishots.ready .cmaishot:nth-child(3n+3) .cmaishot-ic { background: var(--green-soft); color: var(--green); }
.cmsteps { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.cmstep { display: flex; align-items: center; gap: 11px; padding: 9px 4px; font-size: var(--fs-4);
  color: var(--dim); transition: color .2s; }
.cmstep.on { color: var(--text); font-weight: 600; }
.cmstep.done { color: var(--muted); }
.cmstep-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.cmstep-ic .bic { width: 17px; height: 17px; margin: 0; color: var(--green, #16a34a); }
.cmstep-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); display: block; }
.cmstep-note { font-size: var(--fs-2); color: var(--amber-deep); margin: 2px 0 0; }
.cmstep-note:empty { display: none; }
.cmstep-hint { margin: 12px 0 0; font-size: var(--fs-2); color: var(--muted); line-height: 1.5; }
.cmai-vid { margin-top: 8px; border-radius: var(--r-3); overflow: hidden; background: #000; border: 1px solid var(--line); }
.cmai-vid video { display: block; width: 100%; max-height: 46vh; background: #000; }
.pv { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--card); border: 1px solid #e3e6ea; border-radius: var(--r-3); overflow: hidden;
  margin-bottom: 6px; color: #101418; }
.pvhead { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.pvhead b { font-size: var(--fs-4); font-weight: 600; }
.pvav { width: 34px; height: 34px; border-radius: 999px; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-4); flex: none; }
.pvnames { display: flex; flex-direction: column; line-height: 1.25; }
.pvnames b { font-size: var(--fs-4); }
.pvdim { color: #7a8794; font-size: var(--fs-3); display: inline-flex; align-items: center; gap: 4px; }
.pvdim svg { width: 12px; height: 12px; }
.pvimg { position: relative; background: #0c1220 center/cover no-repeat; }
.pvimg.sq { aspect-ratio: 4 / 5; }
.pvimg.rnd { aspect-ratio: 16 / 9; border-radius: var(--r-4); margin: 0 13px 10px; }
.pvimg.flat { aspect-ratio: 4 / 5; max-height: 420px; }
.pvfit { padding: 6px 12px 0; color: var(--amber-deep); }
.pvimg.wide { aspect-ratio: 16 / 9; }
.pvimg.gbp { aspect-ratio: 4 / 3; }   /* Google Business post image (Search/Maps feed) */
.pvgmbg { margin-left: auto; display: inline-flex; }
.pvgmbg svg { width: 18px; height: 18px; display: block; }
.pvimg video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Smart-fit CONTAIN preview: the whole image over a blurred fill of itself - mirrors
   the publisher's media._contain_blurfill, so a keep-whole/text-baked asset shows the
   way it actually posts, never a cover-crop that clips a baked title. */
.pvcon { position: relative; overflow: hidden; background: #0c1220; }
.pvcon-bg { position: absolute; inset: 0; z-index: 0; background-size: cover;
  background-position: center; filter: blur(16px) brightness(.55); transform: scale(1.12); }
.pvcon-fg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; display: block; }
.pvttfill { position: absolute; inset: 0; z-index: 0; }   /* TikTok single-image contain layer */
.pvplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pvplay svg { width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
/* click-to-play preview video: poster + play button until the user clicks, then
   native controls take over (Bunny serves the clip over HTTP Range) */
.pv-canplay { cursor: pointer; }
.pv-canplay .pvplay { z-index: 2; }
.pv-canplay.playing { cursor: default; }
.pv-canplay.playing .pvplay, .pv-canplay.playing .pvdur { display: none; }
.pv-canplay video { pointer-events: none; }
.pv-canplay.playing video { pointer-events: auto; }
.pv-tt.playing::after, .pv-tt.playing .pvttside { display: none; }   /* clear TikTok chrome for the controls */
.pvdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff;
  font-size: var(--fs-2); padding: 1px 5px; border-radius: var(--r-1); }
.pvcount { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff;
  font-size: var(--fs-2); padding: 2px 9px; border-radius: var(--r-pill); }
.pvdots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; gap: 4px; justify-content: center; }
.pvdots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.5); }
.pvdots i.on { background: var(--card); }
.pvacts { display: flex; justify-content: space-between; padding: 10px 13px 6px; }
.pvacts svg { width: 23px; height: 23px; margin-right: 12px; color: #101418; }
.pvacts.pvx { justify-content: space-between; color: #7a8794; font-size: var(--fs-3);
  padding: 4px 13px 12px; }
.pvacts.pvx svg { width: 17px; height: 17px; margin-right: 3px; vertical-align: -3px; color: #7a8794; }
.pvlikes { padding: 0 13px; font-size: var(--fs-4); }
.pvcap { padding: 4px 13px 2px; font-size: var(--fs-4); line-height: 1.45; }
.pvwhen { padding: 4px 13px 12px; font-size: var(--fs-2); color: #7a8794; letter-spacing: .03em; }
.pvmore { background: none; border: none; color: #7a8794; cursor: pointer; font-size: inherit; padding: 0; }
.pvtext { padding: 2px 13px 10px; font-size: var(--fs-4); line-height: 1.45; }
.pvtextx { padding: 2px 13px 10px; font-size: var(--fs-4); line-height: 1.4; }
.pvbar { display: flex; border-top: 1px solid #e3e6ea; }
.pvbar span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; font-size: var(--fs-3); color: #5b6673; font-weight: 600; }
.pvbar svg { width: 17px; height: 17px; }
/* TikTok vertical dark frame */
.pv-tt { aspect-ratio: 9 / 16; background: #000 center/cover no-repeat; position: relative;
  color: #fff; border: none; }
.pvttvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pvttside { position: absolute; right: 10px; bottom: 86px; display: flex; flex-direction: column;
  gap: 14px; align-items: center; z-index: 2; }
.pvttside span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pvttside svg { width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.pvttside i { font-style: normal; font-size: var(--fs-1); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.pvttcap { position: absolute; left: 12px; right: 58px; bottom: 12px; z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.pvttcap b { font-size: var(--fs-4); }
.pvttcap p { font-size: var(--fs-3); line-height: 1.4; margin: 3px 0; }
.pvttcap .pvmore { color: #d9dde2; }
.pvttmusic { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); }
.pvttmusic svg { width: 13px; height: 13px; }
.pv-tt::after { content: ""; position: absolute; inset: 40% 0 0 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)); }
.pv-yt .pvythead { display: flex; gap: 10px; padding: 11px 13px; align-items: flex-start; }
.pv-skip { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; color: #7a8794; }
.pv-skip svg { width: 34px; height: 34px; }
.pv-skip b { color: #101418; }
/* Pinterest pin card: tall 2:3 media, rounded, title + save row */
.pv-pin .pvimg.pin, .pv-pin .pvvid.pin { aspect-ratio: 2 / 3; max-height: 440px;
  border-radius: var(--r-5); margin: 10px 12px 0; }
.pv-pin .pvpinbody { padding: 10px 14px 12px; }
.pv-pin .pvpintitle { display: block; font-size: var(--fs-5); color: #101418; margin-bottom: 4px; }
.pv-pin .pvhead { padding: 8px 0 0; }
.pv-pin .pvpinsave { margin-left: auto; background: #e60023; color: #fff;
  border-radius: var(--r-pill); padding: 7px 15px; font-weight: 700; font-size: var(--fs-3); }

/* preview polish: phone-scale card, breathing room, viewport-safe.
   width is viewport-capped so the fixed box never overflows a narrow phone
   (was a hard 430px = ~55px off-screen at 375px). Desktop still renders 430. */
.npmodal { width: min(430px, calc(100vw - 24px)); max-height: 90vh; display: flex; flex-direction: column; }
.npmodal .phead { flex: none; }
.npmodal .npbody { background: var(--card2); padding: 22px 24px; overflow-y: auto; }
/* Bank / wide list pickers: ONE fluid scroll region (the tkmodal pattern). The
   modal body is a fixed flex column - header, hint, search + filters stay put -
   and ONLY the list scrolls, filling the modal's height instead of a small fixed
   420px window. That removes the nested npbody+list double-scroller that made the
   scroll feel sticky, leaving a single smooth scrollbar. */
.npmodal.bkmodal .npbody,
.npmodal.mpmodal .npbody,
.npmodal.ovmodal .npbody { display: flex; flex-direction: column; overflow: hidden; }
.npmodal.bkmodal .bkpick,
.npmodal.mpmodal .mpgrid,
.npmodal.ovmodal .ovgrid { flex: 1 1 auto; min-height: 0; max-height: none;
  overflow-y: auto; overscroll-behavior: contain; }
/* "Collect from anyone" - INLINE panel (top of Overview + Media library).
   Generate row, fresh-link result (QR beside details), then manage rows. */
.clgen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clgenlab { font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim); }
.clopts { margin-top: 10px; }
.clopt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3);
  cursor: pointer; border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 5px 12px; background: var(--card); }
.clopt input { accent-color: var(--amber); }
.cltagopts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cltagopts select, .cltagopts input { font-size: var(--fs-3); padding: 5px 8px; }
.cltagopts input { width: 220px; }
.clmodechip { font-size: var(--fs-1); letter-spacing: .08em; border: 1px solid var(--amber);
  color: var(--amber-deep); border-radius: var(--r-pill); padding: 2px 8px;
  background: var(--amber-soft); }
.clres { position: relative; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--amber); background: var(--amber-soft);
  border-radius: var(--r-3); padding: 12px 14px; margin-top: 12px; }
.clres img { width: 148px; height: 148px; border-radius: var(--r-3); background: #fff;
  padding: 6px; flex: none; }
.clresmeta { flex: 1 1 240px; min-width: 0; padding-right: 30px; }
.clresurl { font-size: var(--fs-1); word-break: break-all; color: var(--dim);
  padding: 6px 0 2px; }
/* dismiss the fresh-link card: icon-only, top-right, out of flow (never steals a slot
   in the action row). Padded to a comfortable tap target; glyph stays small. */
.clresx { position: absolute; top: 3px; right: 3px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: none; background: none; color: var(--dim); cursor: pointer; border-radius: var(--r-2); }
.clresx:hover { color: var(--amber-deep); }
.clresx svg { width: 16px; height: 16px; }
/* the result card's name line: name + rename pencil + hint sit inline and wrap;
   right gutter keeps them clear of the close button */
.clresname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 30px 4px 0; font-size: var(--fs-4); }
.clresname .clresnametext { color: var(--text); }
.clresname .clresnamehint { font-size: var(--fs-1); color: var(--dim); }
.clresname .clpen { border: none; background: none; cursor: pointer; padding: 2px 6px;
  color: var(--dim); font-size: 1rem; line-height: 1; border-radius: var(--r-2); }
.clresname .clpen:hover { color: var(--amber-deep); }
.clresname .clnamein { flex: 1 1 180px; max-width: 320px; font-size: var(--fs-4);
  padding: 5px 8px; border: 1px solid var(--line2); border-radius: var(--r-2);
  background: var(--card); color: var(--text); }
.clresname .clnamein[aria-invalid="true"] { border-color: var(--red, #c22f2f); }
.clresname .clmeta { font-size: var(--fs-1); letter-spacing: .06em; color: var(--amber-deep); }
/* back / forward chevrons: subtle, always present, disabled when there is
   nowhere to go */
.navhist { display: inline-flex; gap: 6px; margin-right: 8px; }
.navhist button { width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.navhist button svg { width: 15px; height: 15px; }
.navhist button:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-deep); }
.navhist button:disabled { opacity: .35; cursor: default; }
/* Refresh: one clockwise turn on click as feedback (an in-app section refresh, not a
   browser full-page reload). transform-origin centres the spin on the glyph. */
.navhist button.spin svg { animation: navspin .6s ease; transform-origin: 50% 50%; }
@keyframes navspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* while an actual refresh is IN FLIGHT: spin continuously until the section finishes,
   so the feedback reflects the real load (not a fixed one-turn timer) */
.navhist button.spinning svg { animation: navspin .8s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .navhist button.spin svg, .navhist button.spinning svg { animation: none; }
}
/* HOUSE ICONS on buttons/controls (.bic): 15px inline, inherits text colour,
   one amber accent - same recipe as the Quick nav. Never emoji on controls. */
.bic { display: inline-flex; width: 15px; height: 15px; margin-right: 6px;
  vertical-align: -2.5px; flex: none; }
.bic svg { width: 100%; height: 100%; }
.bic.cic { width: 11px; height: 11px; margin-right: 3px; vertical-align: -2px; }
/* post provenance chip: HOW this post was born (autopilot / campaign / preset
   / agent / hand-written...). Clickable when it has a home to jump to. */
/* Origin chip (AUTOPILOT / CAMPAIGN / FLO / PRESET ...). inline-flex so the house
   icon sits centred beside the label with an even gap (was an inline hack), a bit
   more breathing room than the old 1px padding, and a slightly heavier label. */
.qsrc { font-style: normal; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .09em;
  border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 3px 9px;
  color: var(--muted); background: var(--card2); white-space: nowrap;
  vertical-align: middle; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.qsrc .bic { margin-right: 0; }   /* the flex gap spaces the icon; it inherits the pill colour */
/* AI-born posts (the daily autopilot + Flo) get a subtle amber ICON cue - a quiet
   "automated for you" brand signal that stays calm even when a column of autopilot
   drafts stacks up (icon only; the pill itself keeps its neutral fill) */
.qsrc[data-src="daily"] .bic, .qsrc[data-src="agent"] .bic { color: var(--amber); }
.qsrc.golink { cursor: pointer; }
.qsrc.golink:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.detailtop .qsrc { font-size: var(--fs-1); padding: 4px 11px; gap: 5px; }
/* grouped uploads strip: what arrived through ONE link */
.cluploads { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 8px; }
.cluploads[hidden] { display: none; }
/* clickable button (opens the item in the media popup) styled like a plain thumb */
.clupthumb { width: 64px; text-decoration: none; color: var(--dim);
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: center; }
.clupthumb img, .clupthumb video { width: 64px; height: 48px; object-fit: cover;
  border-radius: var(--r-3); display: block; background: var(--card2);
  border: 1px solid var(--line2); }
.clupthumb:hover img, .clupthumb:hover video,
.clupthumb:focus-visible img, .clupthumb:focus-visible video { border-color: var(--amber); }
.clupthumb em { display: block; font-style: normal; font-size: var(--fs-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.clshare { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 8px; }
.clshare[hidden] { display: none; }
.clshare .btn { font-size: var(--fs-2); padding: 5px 9px; }
.clrow.clfocus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(224, 137, 0, .25); }
.clrow { border: 1px solid var(--line2); border-radius: var(--r-3); padding: 8px 10px;
  margin-bottom: 8px; background: var(--card); }
/* zebra stripe a long list of links so rows are easy to tell apart */
.clrow:nth-of-type(even) { background: var(--card2); }
.clrow .clrowtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 6px; }
.clrow .clname { font-size: var(--fs-4); color: var(--text); }
.clrow .clpen { border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--dim); font-size: var(--fs-3); line-height: 1; }
.clrow .clpen:hover { color: var(--amber-deep); }
.clrow .clmeta { font-size: var(--fs-1); letter-spacing: .06em; color: var(--amber-deep);
  margin-left: auto; }
.clrow .clnamein { flex: 1 1 180px; max-width: 320px; font-size: var(--fs-4);
  padding: 5px 9px; }
.clresname { padding: 0 0 4px; font-size: var(--fs-4); }
.clrow .clrowbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.clrow .clrowbtns .btn { font-size: var(--fs-2); padding: 5px 9px; }
.clrow .clrowbtns select { font-size: var(--fs-2); padding: 4px 6px; max-width: 140px; }
.npmodal .pv { width: 320px; margin: 0 auto 4px; border-radius: var(--r-4);
  box-shadow: 0 10px 30px rgba(19, 26, 42, 0.14); }
.npmodal.tall { width: 340px; }
.npmodal.tall .pv-tt { width: 250px; border-radius: var(--r-5); }
.npmodal .hint { max-width: 320px; margin: 0 auto; }
.pvhead { padding: 9px 12px; gap: 8px; }
.pvav { width: 30px; height: 30px; font-size: var(--fs-3); }
.pvhead b { font-size: var(--fs-3); }
.pvnames b { font-size: var(--fs-3); }
.pvdim { font-size: var(--fs-2); }
.pvacts { padding: 8px 12px 4px; }
.pvacts svg { width: 20px; height: 20px; margin-right: 10px; }
.pvlikes { font-size: var(--fs-3); }
.pvcap { font-size: var(--fs-3); padding: 3px 12px 2px; }
.pvwhen { font-size: var(--fs-1); padding: 3px 12px 10px; }
.pvtext, .pvtextx { font-size: var(--fs-3); padding: 2px 12px 9px; }
.pvbar span { font-size: var(--fs-2); padding: 8px 0; }
.pvbar svg { width: 15px; height: 15px; }
.pvacts.pvx { font-size: var(--fs-2); padding: 2px 12px 10px; }
.pvacts.pvx svg { width: 15px; height: 15px; }

/* top quick-nav: grouped dropdowns mirroring the sidebar */
.topnav { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.tnd { position: relative; }
/* Quick nav matches the neutral topbar pills (.topsupport): a white card pill with a
   line border and text-colour label + caret, amber only on hover/open - so the whole
   toolbar reads as one consistent row instead of one button shouting. Theme-aware via
   tokens (the hamburger + caret use currentColor, so both flip with --text in dark). */
.tnd-btn { background: var(--card); border: 1px solid var(--line2); cursor: pointer; padding: 9px 14px;
  border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-4);
  color: var(--text); display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s, box-shadow .18s, transform .18s; }
.tnd-btn::after { content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s; }
/* hover + open share the sibling-pill treatment: amber border + soft shadow (lift on hover only) */
.tnd-btn:hover, .tnd.open .tnd-btn { border-color: var(--amber); box-shadow: var(--shadow); }
.tnd-btn:hover { transform: translateY(-1px); }
.tnd.open .tnd-btn::after { transform: rotate(225deg); margin-top: 3px; }
.tnd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: var(--shadow-lg); padding: 7px; display: none; flex-direction: column;
  z-index: 120; }
/* Megamenu: a clean, faint amber-to-card gradient tint adds depth + warmth without
   touching readability (the feature labels sit on the near-card lower half). A soft
   white top sheen keeps it crisp. Theme-aware via tokens + color-mix. */
.tnd-mega .tnd-menu { background:
  linear-gradient(180deg, color-mix(in srgb, var(--amber) 7%, var(--card)) 0%, var(--card) 42%),
  var(--card); }
.tnd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.tnd.open .tnd-menu { display: flex; }
@media (hover: hover) { .tnd:hover .tnd-menu { display: flex; }
  .tnd:hover .tnd-btn { border-color: var(--amber); box-shadow: var(--shadow); } }
.tnd-menu button { text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 13px; border-radius: var(--r-3); font-family: var(--font-body); font-size: var(--fs-4);
  color: var(--text); white-space: nowrap; }
.tnd-menu button:hover { background: var(--amber-soft); }
/* ---- "Quick nav" MEGAMENU: grouped columns, an icon per feature, a one-line
   description each. Built on the .tnd base above; opens on click or hover, and
   JS pins the right edge to the viewport so the wide panel never overflows. ---- */
@keyframes tndMegaIn {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* fill-mode left at default (none): if the animation runs it plays the entrance,
   and the panel always rests in its natural state - never stuck mid-keyframe. */
.tnd-mega.open .tnd-menu { animation: tndMegaIn .17s cubic-bezier(.16,.8,.3,1); }
@media (hover: hover) { .tnd-mega:hover .tnd-menu { animation: tndMegaIn .17s cubic-bezier(.16,.8,.3,1); } }
/* hover-intent: JS owns hover open/close with a close delay, so suppress the
   base .tnd:hover auto-open for the megamenu - only the .open class shows it,
   otherwise moving off the button would close it before you reach the items */
@media (hover: hover) { .tnd-mega:hover:not(.open) .tnd-menu { display: none; } }

.tnd-mega .tnd-menu {
  right: 0; /* JS re-pins the right edge to the viewport gutter on open (keep 940 in sync) */
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 88px); overflow-y: auto;
  flex-direction: column;
  padding: 20px 22px 6px;
}

.tnd-mega-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-2); letter-spacing: .14em; color: var(--dim);
  padding: 0 2px 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.tnd-mega-head::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-1);
  background: var(--amber); flex: 0 0 auto;
}

.tnd-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
.tnd-col  { display: flex; flex-direction: column; gap: 20px; padding: 0 18px; }
.tnd-col:first-child { padding-left: 4px; }
.tnd-col:last-child  { padding-right: 4px; }
.tnd-col + .tnd-col  { border-left: 1px solid var(--line); }

.tnd-mega .tnd-sec { display: block; padding: 0; border: none; }
.tnd-mega .tnd-sec-h {
  display: block; padding: 0 12px 11px; color: var(--text);
  /* match the app's panel headers (.phead - e.g. "YOUR BRANDS"): bold body font,
     uppercase, NOT the mono the section header used to fall through to. */
  font-family: var(--font-body); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.tnm-list { display: flex; flex-direction: column; gap: 4px; }

.tnd-mega .tnm-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-3); color: var(--text);
  white-space: normal; transition: background .15s ease;
}
.tnd-mega .tnm-item:hover { background: var(--amber-soft); }

.tnm-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-3);
  display: grid; place-items: center;
  background: var(--card2); border: 1px solid var(--line);
  color: var(--muted);
  transition: color .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.tnm-ic svg { width: 18px; height: 18px; }
.tnm-item:hover .tnm-ic {
  color: var(--amber); border-color: var(--amber); background: var(--card);
  transform: translateY(-1px) scale(1.04); box-shadow: 0 5px 12px rgba(224, 137, 0, .18);
}

.tnm-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tnm-lb {
  font-weight: 600; font-size: var(--fs-4); color: var(--text);
  /* wrap to a 2nd line rather than ever truncating a feature name */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tnm-de {
  font-size: var(--fs-3); color: var(--dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tnm-item.is-active { background: var(--amber-soft); }
.tnm-item.is-active .tnm-ic { color: var(--amber); border-color: var(--amber); background: var(--card); }
.tnm-item.is-active .tnm-lb { color: var(--amber-deep); }

.tnd-mega-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 14px 6px 16px;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: var(--fs-2);
}
.tnd-mega-foot svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }

/* keyboard focus: rounded amber ring that follows the item radius */
.tnd-mega .tnm-item:focus-visible { outline: none; background: var(--amber-soft); box-shadow: 0 0 0 2px var(--amber); }
.tnd-mega .tnm-item:focus-visible .tnm-ic { color: var(--amber); border-color: var(--amber); background: var(--card); }

/* dark: brighten the active label for contrast */
:root[data-theme="dark"] .tnm-item.is-active .tnm-lb { color: var(--amber-bright); }

/* responsive: 2 columns between 760-900px (top nav hides below 760) */
@media (max-width: 900px) {
  .tnd-mega .tnd-menu { width: min(560px, calc(100vw - 32px)); }
  .tnd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; }
  .tnd-col { padding: 9px 16px; }
  .tnd-col + .tnd-col { border-left: 1px solid var(--line); }
  .tnd-col:nth-child(2n + 1) { border-left: none; }
  .tnd-col:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .tnd-mega.open .tnd-menu, .tnd-mega:hover .tnd-menu { animation: none; }
  .tnd-mega .tnm-item, .tnm-ic { transition: none; }
  .tnm-item:hover .tnm-ic { transform: none; }
}
/* the sidebar always shows the full menu, so this quick-nav is a convenience -
   drop it on small screens where the header needs the room */
@media (max-width: 760px) { .topnav { display: none; } }
/* clickable brand + plan chip in the rail */
.brandmark { cursor: pointer; border-radius: var(--r-3); }
.brandmark:hover b { color: #fff; }
.brandmark:hover { opacity: .92; }
button.planchip { border: none; cursor: pointer; text-align: left; transition: all .15s; }
button.planchip:hover { background: rgba(255,173,51,.22); color: #ffc46b; }
.tophelp svg circle:first-child { stroke: currentColor; }

/* half-screen slide-outs + drag-resize left edge (.postpanel width lives on its
   base rule above - one owner, no dead duplicate) */
.upmodal, .upmodal.wide { width: clamp(600px, 50vw, 96vw); max-width: 100vw; }
.presize { position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; z-index: 30; }
.presize::after { content: ""; position: absolute; left: 3px; top: 50%; height: 56px;
  width: 4px; border-radius: 999px; background: var(--line2); transform: translateY(-50%);
  opacity: 0; transition: opacity .15s; }
.presize:hover::after { opacity: 1; background: var(--amber); }
body.resizing { cursor: ew-resize; user-select: none; }
body.resizing .postpanel, body.resizing .upmodal { animation: none; transition: none; }

/* true carousel + collage + grid inside previews */
.pvcar { overflow: hidden; touch-action: pan-y; }
.pvstrip { display: flex; height: 100%; width: 100%; transition: transform .28s ease; }
.pvimg.pvcar .pvstrip { position: absolute; inset: 0; }
.pv-tt .pvstrip { position: absolute; inset: 0; z-index: 0; }
.pvslide { flex: 0 0 100%; height: 100%; background: #0c1220 center/cover no-repeat; }
.pvnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: var(--r-pill); border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #101418; font-size: var(--fs-6); line-height: 1;
  box-shadow: 0 1px 6px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.pvnav.prev { left: 8px; }
.pvnav.next { right: 8px; }
.pvnav:hover { background: var(--card); }
.pv-tt .pvnav { background: rgba(0,0,0,.45); color: #fff; }
.pvdots.tt { position: absolute; bottom: 96px; left: 0; right: 0; z-index: 2; }
.pv-tt .pvcount { z-index: 2; }
.pvcollage { display: grid; gap: 2px; aspect-ratio: 16 / 10; }
.pvcollage.two { grid-template-columns: 1fr 1fr; }
.pvcollage.three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pvcollage.three .big { grid-row: 1 / 3; }
.pvcollage > div { background: #0c1220 center/cover no-repeat; position: relative; }
.pvgrid { display: grid; gap: 2px; border-radius: var(--r-4); overflow: hidden;
  margin: 0 13px 10px; aspect-ratio: 16 / 10; }
.pvgrid.n2 { grid-template-columns: 1fr 1fr; }
.pvgrid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pvgrid.n3 > div:first-child { grid-row: 1 / 3; }
.pvgrid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pvgrid > div { background: #0c1220 center/cover no-repeat; position: relative; }
.pvmoreimg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,.45); color: #fff;
  font-size: var(--fs-6); font-weight: 700; }

/* ---------- queue calendar ---------- */
/* Compact icon segmented control - used for Posts (list/calendar) and Ideas (cards/list).
   Icon-only keeps it narrow so it never drops to its own line in a busy toolbar. */
.viewtoggle { display: inline-flex; gap: 0; margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--line2); border-radius: var(--r-pill); overflow: hidden; }
.viewtoggle button { background: var(--card); border: none; cursor: pointer; padding: 6px 12px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.viewtoggle button + button { border-left: 1px solid var(--line2); }
.viewtoggle button svg { width: 18px; height: 18px; display: block; }
.viewtoggle button.on { background: var(--amber-soft); color: var(--amber-deep); }
.qcalwrap { padding: 18px 20px; max-height: calc(100vh - 211px - var(--gf-secbar-h, 0px)); overflow-y: auto; }
.calhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.calhead b { font-family: var(--font-display); font-size: var(--fs-6); min-width: 150px; text-align: center; }
.callegend { font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim);
  display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }   /* buttons carry their own padding */
/* legend items are clickable filters - read like the old inline key, hover = amber */
.calleg { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--dim);
  padding: 3px 6px; border-radius: var(--r-2); transition: background .12s, color .12s; }
.calleg:hover, .calleg:focus-visible { background: var(--amber-soft); color: var(--amber-deep); outline: none; }
.calleg.on { background: var(--amber-soft); color: var(--amber-deep); }
.callegend .calleg i { margin: 0 5px 0 0; }   /* dot hugs its label inside the button */
.calnote.calleg { color: var(--amber-deep); font-size: var(--fs-1); }
.callegend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-left: 8px; }
.calnote { font-size: var(--fs-1); color: var(--amber-deep); }
/* calendar key hint: one clean, always-on helper line by the legend, replacing the
   old per-cell hover bubble. Right-aligned so it reads as part of the key. */
.calhint { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: var(--fs-1); letter-spacing: .04em; color: var(--muted); }
.calhint .bic { width: 13px; height: 13px; margin-right: 0; }
.calhint-mid { color: var(--line); margin: 0 3px; }
.st-idea { background: var(--amber-bright); }
.st-approved { background: #5b8def; }
.st-scheduled { background: var(--green); }
.st-published { background: var(--neutral); }
.st-notposted { background: var(--red); }
.calleg-key { cursor: default; }
.calleg-key:hover { background: none; color: var(--dim); }
/* minmax(0,1fr) - not 1fr - so the 7 tracks can shrink below the chips' nowrap
   min-content and always fit the width; otherwise the last column (Sun) clips off */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.caldow { text-align: center; font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); padding: 2px 0 6px; }
.calday { min-height: 96px; background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.calday.out { opacity: .45; }
.calday.today { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.calday.today .caldate { color: var(--amber-deep); font-weight: 700; }
.caldate { font-size: var(--fs-2); color: var(--muted); }
.calchip { display: flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  background: var(--card); border-radius: var(--r-3); padding: 4px 6px; font-size: var(--fs-2);
  font-family: var(--font-mono); color: var(--text); text-align: left;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(19,26,42,.08); }
.calchip:hover { box-shadow: 0 2px 8px rgba(19,26,42,.16); }
.calchip i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.calchip.st-idea i { background: var(--amber-bright); }
.calchip.st-approved i { background: #5b8def; }
.calchip.st-scheduled i { background: var(--green); }
.calchip.st-published i { background: var(--neutral); }
.calchip.st-notposted i { background: var(--red); }
/* chip layout: time + title, optional trailing lock for non-movable posts */
.calchip-tm { flex: none; color: var(--muted); font-size: var(--fs-1); }
.calchip-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.calchip.drag { cursor: grab; }
.calchip.drag:active { cursor: grabbing; }
.calchip.drag:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(19, 26, 42, .20); }
.calchip-lock { width: 11px; height: 11px; flex: none; margin-left: auto; opacity: .5; }
.calchip.dragging { opacity: .35; }
.calchip.swapok { outline: 2px solid var(--amber); outline-offset: 1px;
  background: var(--amber-soft); }   /* drop here to swap the two posts' slots */
/* "+N more" overflow control - keeps every day cell the same height */
.calmore { border: 0; background: none; color: var(--amber-deep); font-size: var(--fs-1);
  letter-spacing: .04em; cursor: pointer; padding: 3px 5px; text-align: left;
  align-self: flex-start; border-radius: var(--r-2); }
.calmore:hover { background: var(--amber-soft); }
/* weekends a touch greyer than weekdays so the week reads at a glance (theme-safe wash) */
.calday.wknd { background-image: linear-gradient(0deg, rgba(120, 124, 140, .06), rgba(120, 124, 140, .06)); }
/* per-day "+N more" popover: the full day's posts, body-level + viewport-clamped */
.calpop { position: fixed; z-index: 1150; width: 264px; max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: 0 14px 40px rgba(19, 26, 42, .28); padding: 8px; }
.calpop-h { font-size: var(--fs-1); letter-spacing: .08em; color: var(--muted); padding: 4px 8px 8px; }
.calpop-list { display: flex; flex-direction: column; gap: 4px; }
.calpop-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0;
  background: var(--card2); border-radius: var(--r-3); padding: 8px 10px; color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-2); overflow: hidden; white-space: nowrap; }
.calpop-row:hover { background: var(--amber-soft); }
.calpop-row i { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; }
.calpop-row.st-idea i { background: var(--amber-bright); }
.calpop-row.st-approved i { background: #5b8def; }
.calpop-row.st-scheduled i { background: var(--green); }
.calpop-row.st-published i { background: var(--neutral); }
.calpop-row.st-notposted i { background: var(--red); }
.calpop-row .calchip-tt { overflow: hidden; text-overflow: ellipsis; }
/* Campaign cards: make the expand header obviously clickable + reorder cue.
   Applies to BOTH surfaces (Overview "Your campaigns" + the Campaigns tab). */
.crplan-h { cursor: pointer; border-radius: var(--r-3); transition: background .12s; padding: 4px 6px; margin: -4px -6px 0; }
.crplan-h:hover { background: var(--amber-soft); }
.crplan-h:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.crpseemore { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-deep);
  font-size: var(--fs-1); letter-spacing: .04em; white-space: nowrap; }
.crpseemore::after { content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; }
.crplan-h[aria-expanded="true"] .crpseemore::after { transform: rotate(-135deg); }
/* post rows read as clickable + previewable */
.crppost { cursor: pointer; }
.crppost:hover { border-color: var(--amber); background: var(--amber-soft); }
.crppost .crptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* approval progress bar - a scannable "how ready" cue on each campaign card */
.crpprog { display: block; height: 5px; max-width: 340px; margin: 8px 0 2px;
  background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.crpprog i { display: block; height: 100%; background: var(--amber); border-radius: var(--r-pill); transition: width .3s; }
.crpprog.done i { background: var(--green); }
.calchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.calday.dropok { border-color: var(--amber); background: var(--amber-soft);
  box-shadow: inset 0 0 0 2px var(--amber); }
.calghost { position: fixed; z-index: 1200; left: 0; top: 0; pointer-events: none;
  background: var(--card); color: var(--text); border: 1px solid var(--amber);
  border-radius: var(--r-3); padding: 5px 9px; font-size: var(--fs-2); max-width: 220px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(19, 26, 42, .28); transform: rotate(-1.5deg); }
/* rich hover preview - body-level fixed so .qcalwrap's overflow can't clip it */
.calcard { position: fixed; z-index: 1100; left: 0; top: 0; width: 280px; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px;
  box-shadow: 0 14px 40px rgba(19, 26, 42, .28); opacity: 0; transform: translateY(4px);
  transition: opacity .14s, transform .14s; }
.calcard.on { opacity: 1; transform: translateY(0); }
.calcard-row { display: flex; gap: 10px; align-items: flex-start; }
.calcard-media { flex: none; width: 64px; height: 64px; border-radius: var(--r-3); overflow: hidden;
  position: relative; background: var(--card2); }
.calcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.calcard-more { position: absolute; right: 3px; bottom: 3px; background: rgba(10, 14, 24, .78);
  color: #fff; font-size: var(--fs-1); padding: 1px 5px; border-radius: var(--r-2); }
.calcard-headw { min-width: 0; flex: 1; }
.calcard-metaline { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.calcard-pill { font-size: var(--fs-1); letter-spacing: .08em; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: var(--r-pill); background: var(--neutral); }
.calcard-pill.st-idea { background: var(--amber-deep); }
.calcard-pill.st-approved { background: #3b6fd4; }
.calcard-pill.st-scheduled { background: #2f7d55; }
.calcard-pill.st-published { background: var(--neutral); }
.calcard-pill.st-notposted { background: var(--red); }
.calcard-when { font-size: var(--fs-1); color: var(--muted); }
.calcard-title { font-weight: 650; font-size: var(--fs-4); line-height: 1.28; word-break: break-word; }
.calcard-body { margin-top: 8px; font-size: var(--fs-2); color: var(--muted); line-height: 1.4; }
.calcard-fc { margin-top: 6px; font-size: var(--fs-1); color: var(--amber-deep); }
.calcard-nets { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.calcard-nets .qnet { width: 24px; height: 24px; pointer-events: none; }
.calcard-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: var(--fs-1); letter-spacing: .06em; color: var(--dim); }
/* published-post performance strip in the hover card: views · likes · comments */
.calcard-stats { display: flex; align-items: center; gap: 15px; margin-top: 9px;
  font-size: var(--fs-3); color: var(--muted); }
.calcard-stat { display: inline-flex; align-items: center; gap: 5px; }
.calcard-stat b { font-weight: 700; color: var(--text); }
.calcard-stat .bic { width: 13px; height: 13px; margin-right: 0; }
.calcard-statspend { margin-top: 9px; font-size: var(--fs-2); color: var(--dim); }
/* per-network performance rows in the hover card: each platform's OWN numbers on
   its own line, so a figure can never be shown under the wrong network */
.calcard-pernet { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.cpn-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--muted); }
.cpn-net { width: 16px; height: 16px; flex: none; color: var(--text); }
.cpn-net svg { width: 16px; height: 16px; display: block; }
.cpn-name { flex: none; min-width: 62px; letter-spacing: .05em; }
.cpn-nums { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.cpn-stat { display: inline-flex; align-items: center; gap: 4px; }
.cpn-stat b { font-weight: 700; color: var(--text); }
.cpn-stat .bic { width: 12px; height: 12px; margin-right: 0; }

/* -------- per-network publish status: failure warnings + fix guidance ------- */
/* compact red chip shown on the list row, calendar card and post detail header */
.netwarn { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 3px 9px; border-radius: var(--r-pill); font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .04em; white-space: nowrap; cursor: help;
  color: var(--red); background: var(--red-soft); border: 1px solid rgba(214,69,69,.3); }
.netwarn .bic, .netwarn .bic svg { width: 13px; height: 13px; }
.cpn-warn { margin: 8px 0 2px; }
/* a rejected network row inside the hover card / calendar card */
.cpn-row.fail .cpn-name { color: var(--red); }
.cpn-fail { display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  color: var(--red); font-weight: 700; cursor: help; }
.cpn-fail .bic, .cpn-fail .bic svg { width: 12px; height: 12px; }
/* failed network icon in the list row gets a small red badge dot (no tooltip) */
.qnet.fail { position: relative; }
.qnet.fail::after { content: ""; position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  border: 1.5px solid var(--card); }
.qnet.fail svg { color: var(--red); }
.qnet.pend svg { opacity: .5; }
/* the "N networks didn't post" block in the post detail: reason + next action */
.netissues { margin: 2px 0 14px; border: 1px solid rgba(214,69,69,.32);
  border-radius: var(--r-3); background: var(--red-soft); overflow: hidden; }
.netissues-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid rgba(214,69,69,.22); }
.netissues-head .bic { color: var(--red); width: 17px; height: 17px; flex: none; }
.netissues-head b { font-size: var(--fs-4); color: var(--text); }
.netissues-head > span { flex: 1 1 100%; font-size: var(--fs-3); color: var(--muted); line-height: 1.45; }
.nfix-row { display: flex; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--line);
  background: var(--card); }
.nfix-row:first-of-type { border-top: 0; }
.nfix-net { flex: none; display: flex; align-items: center; gap: 7px; min-width: 118px;
  font-size: var(--fs-3); color: var(--text); }
.nfix-net svg { width: 18px; height: 18px; }
.nfix-net b { font-weight: 600; }
.nfix-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nfix-why { font-size: var(--fs-3); color: var(--text); }
.nfix-fix { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3);
  color: var(--amber-deep); font-weight: 700; }
.nfix-fix .bic { width: 14px; height: 14px; flex: none; }
.nfix-raw { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted);
  opacity: .8; word-break: break-word; cursor: help; }
.nfix-row.pend .nfix-net b, .nfix-row.pend .nfix-why { color: var(--muted); }
.nfix-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid var(--line); background: var(--card); }
.nfix-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.nfix-actnote { font-size: var(--fs-3); color: var(--muted); }
@media (max-width: 520px) {
  .nfix-row { flex-direction: column; gap: 6px; }
  .nfix-net { min-width: 0; }
  .netwarn { margin-left: 0; margin-top: 4px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* usage meter */
.ubar-big { height: 14px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ubar-big i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.ubar-big i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.ubar-big i.hot { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.urow-meta { font-size: var(--fs-1); letter-spacing: .1em; color: var(--muted); margin-top: 8px; }

/* ---- media-library storage meter (SPEC_PLANS_STORAGE.md) ------------------- */
.storemeter { margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--card2); }
.storemeter .sm-top { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 8px; }
.storemeter .sm-lab { font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted); }
.storemeter .sm-val { font-size: var(--fs-3); font-weight: 600; color: var(--text); }
.storemeter .sm-mut { color: var(--muted); font-weight: 400; }
.storemeter .sm-bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.storemeter .sm-bar > i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.storemeter.warn .sm-bar > i { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.storemeter.full .sm-bar > i { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.storemeter .sm-note { margin-top: 8px; font-size: var(--fs-3); color: var(--muted); }
.storemeter.full .sm-note { color: var(--red); }

/* ---- AI credit meters: sidebar (permanent navy rail) + Quick-nav strip -------
   Single source: /api/usage. Fuel-gauge fill = credits LEFT, so a short bar
   reads as "nearly out"; colour + copy escalate green -> amber -> red as the
   balance depletes. Both are one click from the top-up packs on Your plan. */
.credbar { display: block; height: 6px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden; }
.credbar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .45s ease; }
.credbar i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.credbar i.hot  { background: linear-gradient(90deg, #f07b7b, var(--red)); }

/* an attribute selector so [hidden] always beats the display below */
.sidecred[hidden], .qncred[hidden] { display: none; }

/* sidebar meter - on the dark navy rail, so it uses the navy palette */
.sidecred { display: flex; flex-direction: column; gap: 4px; width: 100%;
  text-align: left; cursor: pointer; font-family: var(--font-body);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--navy-line);
  border-radius: var(--r-3); padding: 8px 11px; transition: border-color .15s, background .15s; }
.sidecred:hover { border-color: var(--amber); background: rgba(255, 173, 51, .07); }
.sidecred:focus-visible { outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(242, 151, 24, .5); }
.sidecred .credbar { background: rgba(255, 255, 255, .10); }
.sc-top { display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-1); letter-spacing: .13em; line-height: 1; }
.sc-lab { color: var(--navy-dim); }
.sc-cta { color: var(--amber-bright); opacity: 0; transition: opacity .15s; }
.sidecred:hover .sc-cta,
.sidecred.is-low .sc-cta, .sidecred.is-out .sc-cta { opacity: 1; }
.sc-num { color: var(--navy-text); font-size: var(--fs-4); letter-spacing: -.01em; }
.sc-num b { font-weight: 700; }
.sc-unit { color: var(--navy-muted); font-size: var(--fs-3); }
.sc-warn { display: none; font-size: var(--fs-2); line-height: 1.3; color: var(--amber-bright); }
.sidecred.is-low .sc-warn, .sidecred.is-out .sc-warn { display: block; }
.sidecred.is-low { border-color: rgba(255, 173, 51, .42); }
.sidecred.is-out { border-color: rgba(214, 69, 69, .55); }
.sidecred.is-out .sc-warn { color: #ff9a9a; }

/* Quick-nav credit card - a compact VERTICAL card that lives in the Account
   column's spare space (keeps the whole megamenu on one screen, no scroll) */
.qncred { display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding: 12px 13px; border-radius: var(--r-4);
  border: 1px solid var(--line); background: var(--card2); cursor: pointer;
  transition: border-color .15s, background .15s; }
.qncred:hover { border-color: var(--amber); }
.qncred.is-low { border-color: rgba(224, 137, 0, .5); background: var(--amber-soft); }
.qncred.is-out { border-color: rgba(214, 69, 69, .5); background: var(--red-soft); }
.qnc-top { display: flex; align-items: center; gap: 9px; }
.qnc-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-3);
  display: grid; place-items: center; color: var(--amber);
  background: var(--card); border: 1px solid var(--line); }
.qnc-ic svg { width: 19px; height: 19px; }
.qnc-lb { font-size: var(--fs-2); letter-spacing: .04em; color: var(--dim);
  font-weight: 600; text-transform: uppercase; }
.qnc-num { font-size: var(--fs-6); color: var(--text); line-height: 1; }
.qnc-num b { font-weight: 700; }
.qnc-num span { font-size: var(--fs-3); color: var(--muted); }
.qnc-sub { font-size: var(--fs-2); color: var(--dim); line-height: 1.25; }
.qncred.is-low .qnc-sub { color: var(--amber-deep); font-weight: 600; }
.qncred.is-out .qnc-sub { color: var(--red); font-weight: 600; }
/* scoped under .tnd-menu so text-align:center beats the ".tnd-menu button{text-align:left}" rule */
.tnd-menu .qnc-btn { width: 100%; text-align: center; padding: 9px 10px; font-size: var(--fs-3); margin-top: 2px; }

/* brief amber pulse when a meter jumps you to the usage panel */
@keyframes gfFlash {
  0% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); }
  30% { box-shadow: 0 0 0 3px rgba(224, 137, 0, .30); }
  100% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); }
}
.gf-flash { animation: gfFlash 1.3s ease; border-radius: var(--r-5); }
@media (prefers-reduced-motion: reduce) { .gf-flash { animation: none; } }

/* ---- AI Credit usage guide (Your plan page): grouped, table-like list of
   what each feature costs. Responsive grid (feature | cost) - never scrolls
   sideways. Costs from credits.py; daily caps live per plan. */
.cg-colhead { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim);
  padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.cg-group { margin-top: 6px; }
.cg-gh { display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-1); letter-spacing: .13em; color: var(--amber-deep);
  padding: 14px 2px 6px; }
.cg-gh::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-1);
  background: var(--amber); flex: 0 0 auto; }
.cg-row { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px 14px; padding: 9px 4px; border-top: 1px solid var(--line);
  border-radius: var(--r-3); transition: background .12s; }
.cg-group .cg-row:first-of-type { border-top: none; }
.cg-row:hover { background: var(--amber-soft); }
.cg-feat { min-width: 0; }
.cg-feat b { display: block; font-size: var(--fs-4); font-weight: 600; color: var(--text); }
.cg-feat span { display: block; font-size: var(--fs-3); color: var(--dim);
  margin-top: 2px; line-height: 1.3; }
.cg-cost { text-align: right; white-space: nowrap; font-size: var(--fs-3);
  font-weight: 700; color: var(--amber-deep); }
.cg-cost.cg-free { color: var(--green); }
.hint.cgfoot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: var(--fs-2); }
@media (max-width: 560px) {
  .cg-feat span { font-size: var(--fs-2); }
  .cg-cost { font-size: var(--fs-3); }
}

/* audit trail */
.audrow { align-items: center; cursor: default; }
.audrow.rowlink { cursor: pointer; }
/* clickable rows read as clickable at a GLANCE, not only on hover: a always-on
   "Open" affordance + a lift on hover, so the jump-to-the-work is discoverable */
.audrow.rowlink:hover { border-color: var(--amber); background: var(--amber-soft, rgba(224,137,0,.06)); }
.audrow .audgo { flex: none; margin-right: 10px; display: inline-flex; align-items: center;
  gap: 5px; font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim);
  opacity: .55; transition: opacity .15s, color .15s; }
.audrow.rowlink:hover .audgo { opacity: 1; color: var(--amber-deep, #c67700); }
.audrow .audgo .bic { width: 13px; height: 13px; margin: 0; }
/* inbound phone uploads: content arriving, visually set apart from actions */
.audrow.audinbound { background: var(--amber-soft, rgba(224,137,0,.05)); }
.audrow.audinbound:hover { background: var(--amber-soft, rgba(224,137,0,.1)); }
.audup { flex: none; margin-right: 12px; width: 26px; height: 26px; border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-soft, rgba(224,137,0,.16)); }
.audup .bic { width: 15px; height: 15px; margin: 0; }
.audrow.audinbound .audgo { opacity: .8; color: var(--amber-deep, #c67700); }
.auddot { width: 9px; height: 9px; border-radius: 999px; flex: none; margin-right: 12px; }
.audhint { font-weight: 400; color: var(--muted); font-size: var(--fs-4); }
/* activity design pass: sticky day dividers, calmer rows, aligned time column */
.auddayhead { position: sticky; top: 0; z-index: 2; background: var(--card);
  padding: 10px 18px 6px; font-size: var(--fs-1); letter-spacing: .16em; color: var(--dim);
  border-bottom: 1px solid var(--line); }
.audrow { border-bottom: 1px solid var(--line); transition: background .12s; }
.audrow:hover { background: var(--card2); }
.audrow .t b { white-space: normal; }        /* let long action + hint wrap, not clip */
.audrow .audtime { flex: none; width: 46px; text-align: right; color: var(--dim);
  font-size: var(--fs-2); letter-spacing: .04em; }
.audctlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 4px 4px; }
.audstat { color: var(--dim); font-size: var(--fs-1); letter-spacing: .08em; }

/* user roles: colour-coded badges + a plain-language legend */
.rolebadge { font-family: var(--font-mono); font-size: var(--fs-1) !important; letter-spacing: .1em;
  padding: 3px 9px; border-radius: var(--r-pill); cursor: help; }
.role-owner { background: var(--amber-soft); color: var(--amber-deep); }
.role-operator { background: rgba(58,123,213,.16); color: #2f66b0; }
.role-client { background: rgba(63,157,95,.16); color: #2e7d4f; }
.urolehint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-3); }
.urolehint .bic { flex: none; }
.roledefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 14px; }
.roledef { border: 1px solid var(--line2); border-left: 3px solid var(--line2);
  border-radius: var(--r-3); padding: 12px 14px; background: var(--card2); }
.roledef:nth-child(1) { border-left-color: var(--amber); }
.roledef:nth-child(2) { border-left-color: #3a7bd5; }
.roledef:nth-child(3) { border-left-color: #3f9d5f; }
.roledef b { display: block; margin-bottom: 4px; font-size: var(--fs-5); }
.roledef span { color: var(--muted); font-size: var(--fs-3); line-height: 1.45; }

/* performance tiles + billing table */
.perfrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.perftile { flex: 1; min-width: 110px; background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 12px 14px; text-align: center; }
.perftile b { display: block; font-family: var(--font-display); font-size: var(--fs-6); }
.perftile span { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); }
.perfnote { font-style: normal; font-size: var(--fs-1); opacity: .7; }

/* per-network performance matrix (post detail) - network rows x metric cols */
.perfnetwrap { margin: 4px 0 10px; overflow-x: auto; }   /* contained scroll: page never shakes sideways */
.perfnet { width: 100%; border-collapse: collapse; }
.perfnet caption { text-align: left; }
.perfnet th, .perfnet td { padding: 8px 8px; border-bottom: 1px solid var(--line); }
.perfnet thead th { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--dim); font-weight: 700; }
.perfnet .perfnetnm { text-align: left; white-space: nowrap; }
.perfnet thead th.perfnetnm { color: var(--dim); }
.perfnet tbody th.perfnetnm { font-weight: 600; box-shadow: inset 3px 0 0 var(--net-c, var(--line2)); }
.perfnet .perfcell-nm { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.perfnet .perfcell-nm b { font-weight: 600; font-size: var(--fs-4); color: var(--text); }
/* the network NAME is the link to its live post (replaces the old LIVE ON strip).
   Research-driven: name-as-link, always-visible affordance (persistent subtle
   underline + trailing external arrow - never hover-only), a real focus ring,
   and a >=24px tap target. Only PUBLISHED networks get the anchor, so the arrow
   doubles as a coverage indicator; unpublished names stay plain text. */
.perfnet .perfnetlink { text-decoration: none; color: inherit; border-radius: var(--r-3);
  padding-top: 7px; padding-bottom: 7px; transition: color .12s; }
.perfnet .perfnetlink b { text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .12s, text-decoration-color .12s; }
.perfnet .perfnetlink:hover, .perfnet .perfnetlink:focus-visible { color: var(--amber-deep); }
.perfnet .perfnetlink:hover b, .perfnet .perfnetlink:focus-visible b {
  color: var(--amber-deep); text-decoration-color: var(--amber-deep); }
.perfnet .perfnetlink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.perfnet .perfext { color: var(--muted); font-size: .8em; margin-left: -3px; flex: none;
  transition: color .12s, transform .12s; }
.perfnet .perfnetlink:hover .perfext, .perfnet .perfnetlink:focus-visible .perfext {
  color: var(--amber-deep); transform: translate(1px, -1px); }
.perfhint { padding: 0 0 8px; margin: 0; }
.perfnet .perfic { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: var(--r-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--card2); }
.perfnet .perfic svg { width: 100%; height: 100%; }
.perfnet .perfic.instagram { color: #d6336c; background: rgba(214,51,108,.12); }
.perfnet .perfic.facebook { color: #1877f2; background: rgba(24,119,242,.12); }
.perfnet .perfic.linkedin { color: #0a66c2; background: rgba(10,102,194,.12); }
.perfnet .perfic.youtube { color: #e23b2e; background: rgba(226,59,46,.12); }
.perfnet .perfic.pinterest { color: #e60023; background: rgba(230,0,35,.12); }
.perfnet .perfic.gmb { color: #1a73e8; background: rgba(26,115,232,.12); }
.perfnet .perfic.tiktok, .perfnet .perfic.twitter { color: var(--text); background: rgba(19,26,42,.08); }
.perfnet td, .perfnet th { vertical-align: middle; }
.perfnet th.perfn, .perfnet td.perfn { text-align: right; white-space: nowrap; min-width: 54px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.perfnet td.perfn { font-size: var(--fs-5); color: var(--text); }
.perfnet .perfna { color: var(--dim); }
.perfnet tbody tr { transition: background .12s; }
.perfnet tbody tr:hover { background: var(--card2); }
.perfnet tfoot th, .perfnet tfoot td { border-bottom: none; border-top: 2px solid var(--line2);
  background: var(--card2); }
.perfnet tfoot th.perfnetnm { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--dim); font-weight: 700; }
.perfnet tfoot td.perfn { font-weight: 700; color: var(--text); }
/* mobile: the drawer is full-width, so stack each network into a mini-card
   rather than a cramped 5-column grid or a sideways scroll */
@media (max-width: 520px) {
  .perfnetwrap { overflow-x: visible; }
  .perfnet, .perfnet tbody, .perfnet tfoot, .perfnet tr, .perfnet th, .perfnet td { display: block; }
  .perfnet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .perfnet tr { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px;
    margin-bottom: 8px; background: var(--card2); }
  .perfnet tbody tr.perfnetrow { border-left: 3px solid var(--net-c, var(--line)); }
  .perfnet th, .perfnet td { border-bottom: none; padding: 0; }
  .perfnet tbody th.perfnetnm { margin-bottom: 6px; padding-bottom: 6px; padding-left: 0;
    border-bottom: 1px solid var(--line); box-shadow: none; }
  .perfnet tbody .perfcell-nm { padding-left: 0; }
  .perfnet td.perfn { display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0; font-size: var(--fs-5); }
  .perfnet td.perfn::before { content: attr(data-label); font-family: var(--font-mono);
    font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); text-transform: uppercase;
    align-self: center; }
  .perfnet tfoot tr { background: transparent; }
  .perfnet tfoot th.perfnetnm { border-bottom: 1px solid var(--line2); }
}

.billtbl { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
.billtbl th { text-align: left; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.billtbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.billtbl a { text-decoration: none; }
.nplive { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px auto 2px; max-width: 320px; }
.nplivestats { font-size: var(--fs-1); letter-spacing: .08em; color: var(--muted); }
.dropopts { display: flex; gap: 10px; margin-top: 12px; }
.dropopts .btn { font-size: var(--fs-4); padding: 9px 16px; }

/* page-image import picker */
.ippick #ipChips { flex-wrap: wrap; row-gap: 8px; overflow: visible; }
.ippick #ipChips .btn.amber { margin-left: auto; }
.ipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
  max-height: 56vh; overflow-y: auto; }
.iptile { position: relative; border: 1px solid var(--line2); border-radius: var(--r-3);
  overflow: hidden; cursor: pointer; background: var(--card2); padding: 0; height: 96px; }
.iptile img, .iptile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iptile span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,11,20,.72);
  color: #fff; font-size: var(--fs-1); letter-spacing: .1em; padding: 3px 0; text-align: center; }
.iptile:hover { border-color: var(--amber); }
.iptile[disabled] { cursor: default; }
/* video candidates: a light play-glyph placeholder (never mount 40 <video>s) */
.iptile.ipvid { display: flex; align-items: center; justify-content: center; }
.iptile.ipvid .ipplay { color: var(--muted); }
.iptile.ipvid .ipplay .bic svg { width: 28px; height: 28px; }
.iptile.done { border-color: var(--green); }
.iptile.done span { background: var(--green); }
.iptile.failed { border-color: var(--red); }
.iptile.failed span { background: var(--red); }

/* Import-from-a-link modal (multi-URL paste + clipboard + progress) */
.urlimport .uifield { display: flex; gap: 8px; align-items: stretch; }
.urlimport textarea { flex: 1 1 auto; min-width: 0; resize: vertical; min-height: 70px;
  font: inherit; font-size: var(--fs-5); line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2);
  color: var(--text); }
.urlimport textarea:focus { outline: none; border-color: var(--amber); background: var(--card); }
.urlimport .uipaste { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }
/* scan-mode toggle: reuses the house .filterchips look but WRAPS on narrow screens */
.urlimport .uimode { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
  margin: 10px 0 2px; }
.urlimport .uimode button .bic svg { width: 15px; height: 15px; }
.urlimport .uimode button[disabled] { opacity: .45; cursor: not-allowed; }
.urlimport .uimode-hint { margin: 0; flex-basis: 100%; color: var(--dim); }
@media (min-width: 520px) { .urlimport .uimode-hint { flex-basis: auto; margin-left: 8px; } }
.urlimport .uibar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.urlimport .uibar .hint { margin: 0; }
.urlimport .uibar .hint.bad { color: var(--red); }
/* shared progress bar (import modal + page picker) */
.uiprog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.uiprog-track { flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: var(--line2); overflow: hidden; }
.uiprog-track i { display: block; height: 100%; width: 0;
  background: var(--amber); border-radius: 999px; transition: width .25s ease; }
/* indeterminate mode for the whole-site scan (unknown duration) */
.uiprog.indet .uiprog-track { position: relative; overflow: hidden; }
.uiprog.indet .uiprog-track i { width: 35%; transition: none;
  animation: uiindet 1.15s ease-in-out infinite; }
@keyframes uiindet { 0% { transform: translateX(-115%); } 100% { transform: translateX(330%); } }
.uiprog .hint { margin: 0; white-space: nowrap; }
.urlimport .uiresult { margin-top: 12px; }
.urlimport .uiresult .hint { margin: 6px 0; }
.urlimport .uiresult .hint.bad { color: var(--red); }
.urlimport .uifails { list-style: none; margin: 4px 0 0; padding: 0;
  max-height: 180px; overflow-y: auto; }
.urlimport .uifails li { display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-4); color: var(--muted); padding: 4px 0; word-break: break-word; }
.urlimport .uifails li .bic { color: var(--red); flex: 0 0 auto; margin-top: 1px; }

/* Stock library picker (search -> pick free photos into the library) */
.stock-modal { width: min(820px, 95vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; }
.stock-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.stock-searchrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stock-q { flex: 1 1 220px; min-width: 0; font-size: var(--fs-5); padding: 9px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); color: var(--text); }
.stock-q:focus { outline: none; border-color: var(--amber); background: var(--card); }
.stock-grid { flex: 1; min-height: 140px; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; align-content: start; }
.stktile { margin: 0; }
.stktile-pick { position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--line2); border-radius: var(--r-3); overflow: hidden; background: var(--card2);
  aspect-ratio: 4 / 3; }
.stktile-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stktile-pick:hover { border-color: var(--amber); }
.stktile-add { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,11,20,.72);
  color: #fff; font-size: var(--fs-1); letter-spacing: .1em; padding: 4px 0; text-align: center; }
.stktile-pick.in { border-color: #14976b; cursor: default; }
.stktile-pick.in .stktile-add { background: #14976b; }
.stktile-pick[disabled] { cursor: default; }
.stktile-by { font-size: var(--fs-1); color: var(--muted); margin: 3px 2px 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-foot { display: flex; align-items: center; gap: 10px; }
.stock-credit { margin-left: auto; font-size: var(--fs-1); color: var(--muted); letter-spacing: .08em; }
.stock-empty { grid-column: 1 / -1; text-align: center; padding: 26px 8px; color: var(--muted); }


/* Creative Studio tab + modal dialogs */
.studiocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 14px; }
.studiocard .stform label { display: block; font-size: var(--fs-1); letter-spacing: .1em;
  font-weight: 700; font-family: var(--font-mono); color: var(--muted); margin: 12px 0 5px; }
/* Full width for real text fields only. A checkbox/radio/color must NOT be forced
   to 100% - the new voice/captions .stvoice-opt toggles put a checkbox inside a flex
   label with flex-shrink:0, so a 100% checkbox stayed 560px and shoved its label off
   screen. Mirrors the checkbox-aware rule at .stpane .stform below (and .kvform/.detail). */
.studiocard .stform input:not([type=checkbox]):not([type=radio]):not([type=color]),
.studiocard .stform textarea, .studiocard .stform select {
  width: 100%; }
.strow { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
/* Animated Video background-image sliders (zoom + opacity) */
.strange { width: 100%; accent-color: var(--amber, #e08900); margin: 4px 0 2px; }
.stanbgopts { grid-template-columns: 1fr 1fr; }
.stanbgval { font-family: var(--font-mono); color: var(--dim); font-size: .9em; }
#stAnBgThumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card); }
/* Animated Video background LIVE PREVIEW - a CSS mirror of motion.py _bg_image_layer
   (brand gradient -> cover-fit photo scaled by zoom at opacity -> scrim above 0.5 op).
   Instant, driven by CSS vars from stBgPvSync(); height-capped + max-width:100% so a
   landscape (16:9) preview never scrolls the page sideways at 375px. */
.stbgpv { margin: 8px 0 14px; }
/* Sized so the box HUGS the frame in either orientation without a sideways scroll:
   width follows the height cap * the aspect ratio, itself capped at 100% of the column.
   Portrait -> tall box at the height cap; landscape -> wide box the column caps, height
   shrinking to suit (no fixed height fighting the aspect, so no letterbox bands). */
.stbgpv-frame { position: relative; overflow: hidden; border-radius: 10px; margin-inline: auto;
  aspect-ratio: var(--stbgpv-ar, 9 / 16);
  width: min(100%, calc(min(46vh, 520px) * var(--stbgpv-arn, 0.5625)));
  background: linear-gradient(180deg, var(--stbgpv-top, #0b1220), var(--stbgpv-bottom, #070b14));
  /* draggable to reposition the photo: grab affordance; touch-action:none so a touch-drag
     repositions instead of scrolling the page; no text/selection getting in the way. */
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.stbgpv-frame.dragging { cursor: grabbing; }
.stbgpv-frame:focus-visible { outline: 3px solid var(--amber, #f29718); outline-offset: 2px; }
/* The img holds the FULL server-rendered frame (real per-effect text, font, layout + your
   photo + legibility scrim, all baked in by the same renderer that makes the video). It is
   drawn at the format's aspect, so contain fills the matching box exactly and never crops.
   pointer-events:none so the frame (not the img) owns the drag, and no native image-drag ghost. */
#stAnBgPvImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 1; transition: opacity .18s ease; pointer-events: none; -webkit-user-drag: none; user-select: none; }
#stAnBgPvImg:not([src]), #stAnBgPvImg[src=""] { opacity: 0; }
.stbgpv-frame.loading #stAnBgPvImg { opacity: .4; }   /* keep the last frame, dimmed, while the next renders */
.stbgpv-spin { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: stspin .8s linear infinite; pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.stbgpv-msg { position: absolute; inset: auto 8% 10% 8%; text-align: center; color: #fff; font-size: 12px;
  line-height: 1.35; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); pointer-events: none; }
.stbgpv-badge { position: absolute; top: 8px; right: 8px; font-size: 9px; letter-spacing: .08em;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 20px; padding: 3px 8px; }
.stbgpv-drag { position: absolute; left: 8px; bottom: 8px; font-size: 9px; letter-spacing: .08em;
  color: #fff; background: rgba(0, 0, 0, .5); border-radius: 20px; padding: 3px 8px; pointer-events: none;
  opacity: .9; transition: opacity .15s ease; }
.stbgpv-frame.dragging .stbgpv-drag { opacity: 0; }   /* get out of the way while dragging */
.stpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.sttile { border: 2px solid var(--line2); border-radius: var(--r-3); overflow: hidden; padding: 0;
  cursor: pointer; height: 72px; background: var(--card2); }
.sttile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sttile:hover { border-color: var(--amber); }
.sttile.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.costchip { font-size: var(--fs-1); letter-spacing: .08em; font-family: var(--font-mono);
  border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap;
  background: var(--amber-soft); color: var(--amber-deep); }
.costchip.free { background: rgba(20, 151, 107, .12); color: var(--green); }
/* publication cost meter chip in the composer (advisory). Wraps cleanly at 375px
   (unlike .costchip's nowrap); green->amber->red by the monthly guide. */
.pubrow { margin: 6px 0 2px; }
.pubchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  white-space: normal; font-size: var(--fs-1); letter-spacing: .06em;
  font-family: var(--font-mono); border-radius: var(--r-pill); padding: 3px 10px;
  background: var(--green-soft); color: var(--green); cursor: default; }
.pubchip.warn { background: var(--amber-soft); color: var(--amber-deep); }
.pubchip.over { background: var(--red-soft); color: var(--red); }
.gfdlg .gfmsg { padding: 0 0 14px; white-space: pre-line; }

/* Any VISIBLE file input wears a styled browse button (the site prefers hidden
   inputs behind a .btn, but a bare one must never ship the raw grey control). */
input[type=file]:not([hidden]) { font-family: var(--font-body); font-size: var(--fs-4);
  color: var(--dim); max-width: 100%; }
input[type=file]:not([hidden])::file-selector-button {
  font-family: var(--font-body); font-size: var(--fs-4); cursor: pointer; margin-right: 10px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line2);
  padding: 8px 13px; border-radius: var(--r-3); transition: all .18s ease; }
input[type=file]:not([hidden])::file-selector-button:hover {
  border-color: var(--amber); box-shadow: var(--shadow); }

/* Reusable media-associator popup (pick one photo; add via upload or phone QR) */
.mpmodal { width: min(700px, 94vw); }
.mpmodal .mpbody { padding: 16px 18px; }
.mpbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mpbar .mpsearch { flex: 1 1 180px; min-width: 140px; }
/* honest "showing N of M" count above the picker grid - never silently hide media */
.mpnote { margin: -4px 0 10px; padding: 0; }
.mpbar .spacer { flex: 1; }
.mpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; max-height: 52vh; overflow-y: auto; }
/* Square tile via the padding-bottom hack (NOT aspect-ratio): a <button> with
   aspect-ratio + absolute children doesn't resolve height on iOS Safari, so the
   thumbnails collapsed into overlapping slivers. padding-bottom:100% gives a real
   in-flow square height on every browser; the media absolute-fills it. */
.mptile { position: relative; height: 0; padding-bottom: 100%; aspect-ratio: auto; }
.mptile img, .mptile video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.mptile.vid::after { content: "\25B6"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: var(--fs-7); color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
/* Video play BADGE (picker .mptile + library .masset): a neutral dark circle with a
   white triangle, centred and ABOVE the poster frame. Two bugs it fixes: (1) the
   picker glyph had NO z-index so once the poster reveals (opacity 0->1, z-index:1)
   it painted OVER the glyph = no way to tell a video from a photo; (2) a bare white
   glyph washes out on bright/busy posters. The badge reads on ANY frame. */
.mptile.vid::after, .masset .img.vid::after {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; padding-left: 3px;
  font-size: var(--fs-3); text-shadow: none;
  background: rgba(12, 18, 32, .6);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.mptname { position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--fs-1);
  padding: 4px 6px; color: #fff; text-align: left; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: linear-gradient(transparent, rgba(7,11,20,.82)); }
/* Smooth picker load: skeleton tiles hold the grid's FULL height from the first
   paint, so the centred modal opens at its final size instead of collapsing to a
   one-line "Loading..." then ballooning into a 52vh grid (the jump). Each real
   thumbnail then fades in on decode over a shimmer, mirroring .mlbmediawrap - no
   pop, no flash of an empty square. */
.mpgrid { min-height: 216px; align-content: start; }
.mpskel { position: relative; height: 0; padding-bottom: 100%; border: 2px solid var(--line2);
  border-radius: var(--r-3); overflow: hidden; background: linear-gradient(100deg,
  var(--card2) 34%, var(--line2) 50%, var(--card2) 66%); background-size: 200% 100%;
  animation: shimmer 1.15s linear infinite; }
.mptile::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--card2) 34%, var(--line2) 50%, var(--card2) 66%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.mptile.loaded::before { display: none; }
.mptile img, .mptile video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.mptile.loaded img, .mptile.loaded video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mpskel, .mptile::before { animation: none; }
  .mptile img, .mptile video { transition: none; } }
/* Selection made OBVIOUS on busy photos: a scrim + inset amber ring over the whole
   thumbnail, plus a bright numbered badge showing tap order - a lone border is easy
   to miss (research: Material check-mark+scrim, NN/g colour+icon, ordered badges). */
.mpsel { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-3); pointer-events: none;
  opacity: 0; transition: opacity .15s ease; box-shadow: inset 0 0 0 3px var(--amber);
  background: rgba(224, 137, 0, .18); }
.mptile.on .mpsel { opacity: 1; }
.mptick { position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: var(--r-pill); display: none; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700;
  background: var(--amber-bright); color: #1a1206;
  box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .35); }
.mptile.on .mptick { display: flex; }
@media (prefers-reduced-motion: reduce) { .mpsel { transition: none; } }
.mpphonebox { text-align: center; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line2); }
.mpphonebox img { width: 200px; height: 200px; border-radius: var(--r-3); background: #fff; padding: 8px; }
.mpphonebox .hint { max-width: 340px; margin: 8px auto 0; }
.mpphonebox .mpwait { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--dim); margin-top: 6px; }
.mpfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2); }

/* "From products" panel: browse a connected shop's catalogue, pick a product then its photo(s),
   and they import into the library (then behave as normal media). Mirrors the media grid look. */
.mpprodbox { max-height: 56vh; overflow-y: auto; }
.mpprodhead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.mpprodhead .mpprodtitle { margin-left: 4px; font-size: var(--fs-4); }
.mpprodhead .mpprodfolder { margin-left: auto; }
.mpprodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mpprodgrid.imgs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mpprodtile { position: relative; height: 0; padding-bottom: 100%; border: 1px solid var(--line2);
  border-radius: var(--r-3); overflow: hidden; background: var(--card2); cursor: pointer;
  transition: box-shadow .15s ease; }
.mpprodtile:hover { box-shadow: var(--shadow); }
.mpprodtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mpprodtile.on { box-shadow: inset 0 0 0 3px var(--amber); }
.mpprodtile .mptick { top: 6px; right: 6px; }
.mpprodtile.on .mptick { display: flex; }
.mpprodn { position: absolute; top: 5px; left: 5px; z-index: 2; font-family: var(--font-mono);
  font-size: var(--fs-1); background: rgba(12,18,32,.72); color: #fff; padding: 2px 6px;
  border-radius: var(--r-pill); }
.mpprodname { position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--fs-1); padding: 4px 6px;
  color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(7,11,20,.82)); }
.mpprodfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2); }

/* RULE: every text input, textarea and select ANYWHERE in the app wears the
   site field style by default - :where() keeps specificity at zero so scoped
   styles still win, but a browser-default input can never ship again. */
:where(input:not([type]), input[type=text], input[type=email], input[type=url],
  input[type=number], input[type=password], input[type=search],
  input[type=datetime-local], input[type=date], input[type=time], textarea, select) {
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-3); padding: 10px 12px; font-family: var(--font-body);
  font-size: var(--fs-4); max-width: 100%; }
/* ONE canonical focus style for every text input/textarea/select site-wide: the
   amber border of the composer's TITLE field PLUS a soft amber ring (WCAG 2.2 focus
   appearance - a clear, >=2px, high-contrast indicator). Uses :where (0 specificity)
   for the ring so it layers under every per-component amber-border rule without a
   fight - those never set box-shadow, so the ring shows uniformly on click + keyboard. */
:where(input, textarea, select):focus { outline: none; border-color: var(--amber);
  background: var(--card); box-shadow: var(--focus-ring); }
/* the ring is for TEXT fields; toggles/pickers keep only the amber border (a halo
   around a tiny checkbox/colour swatch reads as a bug). :focus-visible still gives
   keyboard users the global outline on these. */
:where(input[type=checkbox], input[type=radio], input[type=range], input[type=color],
  input[type=file]):focus { box-shadow: none; }
:where(textarea) { resize: vertical; }
.gfdlg label { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); margin: 12px 0 5px; }
.gfdlg input, .gfdlg textarea, .gfdlg select { width: 100%; }

/* Ideas Bank import preview (the gfForm confirm dialog): a scannable icon-led stat strip
   + tidy status lines, so the summary reads at a glance instead of as a run-on sentence.
   All scoped to .gfimp-* / .gfacts so no other dialog is touched. */
.gfimp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gfimp-stat { display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2); }
.gfimp-stat.hi { border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--card)); }
.gfimp-ic { display: inline-flex; flex: 0 0 auto; color: var(--amber-deep); }
.gfimp-ic .bic svg { width: 18px; height: 18px; }
.gfimp-n { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.gfimp-l { font-size: var(--fs-3); color: var(--neutral); }
.gfimp-media, .gfimp-seq { display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0; font-size: var(--fs-3); color: var(--text); line-height: 1.45; }
.gfimp-media .bic, .gfimp-seq .bic { flex: 0 0 auto; margin-top: 1px; }
.gfimp-media .bic svg, .gfimp-seq .bic svg { width: 16px; height: 16px; }
/* the message is ONE flex item (so an inline <b> can't collapse into its own narrow
   column on a phone); it shrinks + wraps normally beside the icon. */
.gfimp-media .gfimp-tx, .gfimp-seq .gfimp-tx { min-width: 0; flex: 1 1 auto; }
.gfimp-seq { padding: 9px 11px; border-radius: var(--r-3);
  background: color-mix(in srgb, var(--amber) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); }
.gfimp-err { margin: 12px 0 4px; color: var(--red); font-size: var(--fs-3); }
.gfimp-errlist { margin: 0 0 4px; padding-left: 18px; font-size: var(--fs-3);
  color: var(--neutral); max-height: 140px; overflow: auto; }
.gfimp-errlist li { margin: 2px 0; }
/* leading house glyphs on the gfForm action buttons + the work-progress result screen */
.gfacts .btn, .bp-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.gfacts .btn .bic svg, .bp-actions .btn .bic svg { width: 16px; height: 16px; }

/* Meta ad-account picker (multi-account): rows scoped under .gfdlg so they beat the
   generic ".gfdlg label{display:block}" + ".gfdlg input{width:100%}" rules above. */
.malist { display: flex; flex-direction: column; gap: 6px; }
.gfdlg .marow { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.gfdlg .marow.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--card)); }
.gfdlg .macheck { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  margin: 0; font-family: inherit; letter-spacing: normal; cursor: pointer; }
.gfdlg .maprim { display: flex; align-items: center; gap: 5px; margin: 0; flex: none;
  font-family: inherit; letter-spacing: normal; font-size: var(--fs-3); color: var(--neutral);
  white-space: nowrap; cursor: pointer; }
.gfdlg .marow input[type="checkbox"], .gfdlg .marow input[type="radio"] { width: auto; margin: 0; flex: none; }
/* Plan-a-drop dialog: the launch-discount checkbox must not be stretched by the generic
   ".gfdlg input{width:100%}" rule above (it sits in a flex label with its text). */
.cmdropdlg input[type="checkbox"] { width: auto; margin: 0 6px 0 0; flex: none; accent-color: var(--amber); }
/* Searchable thumbnail product picker (Plan-a-drop dialog). The modal is appended to
   <body>, OUTSIDE #tab-commerce, so these live here in ui.css, not the scoped inline block.
   WAI-ARIA editable-combobox: a text field + a listbox of product rows with thumbnails. */
.cmdropdlg .cmpicklbl { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); margin: 12px 0 5px; }
.cmpick { position: relative; }
.cmpick-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); padding: 0 11px 0 8px; }
.cmpick-field:focus-within { border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.cmpick-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none;
  background: var(--card); }
.cmpick-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0;
  font: inherit; font-size: var(--fs-4); color: var(--text); }
.cmpick-in:focus { outline: none; }
.cmpick-caret { width: 9px; height: 9px; flex: none; margin: -3px 2px 0 0; opacity: .7;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); }
.cmpick-list { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; max-height: 288px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.cmpick-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 44px;
  border-radius: 8px; cursor: pointer; color: var(--text); }
.cmpick-list li.active, .cmpick-list li[aria-selected="true"] {
  background: color-mix(in srgb, var(--amber) 14%, var(--card)); }
.cmpick-list li.active { box-shadow: inset 0 0 0 1px var(--amber); }
.cmpick-opt-thumb { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none;
  background: var(--card2); }
.cmpick-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-4); }
.cmpick-empty, .cmpick-more { padding: 10px 8px; min-height: 0; color: var(--dim);
  font-size: var(--fs-3); cursor: default; }
.cmpick-more { border-top: 1px solid var(--line); margin-top: 2px; }
.gfdlg .maname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfdlg .maid { color: var(--neutral); font-size: var(--fs-3); margin-left: auto; }
.gfdlg .maprim input:disabled { opacity: .35; }
.gfdlg .maprim input:disabled + span { opacity: .45; }
.gfdlg .malbl { margin: 14px 0 4px; }


/* Studio: visual effect picker + multi-select order badges + toggles */
.fxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fxtile { position: relative; border: 2px solid var(--line2); border-radius: var(--r-3);
  overflow: hidden; padding: 0; cursor: pointer; background: var(--card2); }
.fxtile img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.fxtile span { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(7,11,20,.78); color: #fff; font-size: var(--fs-1);
  letter-spacing: .06em; padding: 3px 2px; text-align: center; }
.fxtile:hover { border-color: var(--amber); }
.fxtile.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.sttile { position: relative; }
.stord { position: absolute; top: 4px; right: 4px; background: var(--amber);
  color: #1a1206; font-size: var(--fs-1); width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.stoggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.stog { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1);
  letter-spacing: .08em; color: var(--muted); cursor: pointer; }
.stog input { width: auto; }

/* overlay style pickers (captions / end-card / retention bar) + chooser */
.ovpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin: 12px 0 4px; }
.ovpick { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
.ovpick:hover { border-color: var(--amber); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ovpick-l { flex: 0 0 auto; font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.ovpick-v { flex: 1; font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.ovpick-go { flex: 0 0 auto; font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep); }
.ovmodal { width: min(760px, 95vw); }
.ovmodal .npbody { padding: 14px 18px 18px; }
/* Wide pickers: help text FLOWS left-aligned, full width - never the centred
   320px block ".npmodal .hint" would otherwise force, which wastes vertical
   space on ragged line breaks. Applies to the style/bank/media choosers. */
.ovmodal .hint, .bkmodal .hint, .mpmodal .hint {
  max-width: none; margin: 0 0 12px; text-align: left; font-size: var(--fs-3); line-height: 1.5; }
.ovgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px; max-height: 64vh; overflow-y: auto; padding: 2px; }
.ovopt { text-align: left; border: 2px solid var(--line2); border-radius: var(--r-3); overflow: hidden;
  background: var(--card); cursor: pointer; padding: 0 0 8px; display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s; }
.ovopt:hover { border-color: var(--amber); }
.ovopt.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.ovopt-l { font-size: var(--fs-3); font-weight: 700; padding: 6px 8px 0; }
.ovopt-d { font-size: var(--fs-1); color: var(--muted); padding: 1px 8px 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the 9:16 mini-preview canvas each style draws itself into - height-driven so
   every card is the same height and the grid stays tidy */
.ovmini { position: relative; aspect-ratio: 9/16; height: 100px; width: auto; margin: 0 auto 6px;
  background: linear-gradient(150deg, #24344c, #131d2e); border-radius: 0 0 var(--r-1) var(--r-1); overflow: hidden; }
.ovmini-off { display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #2a3346 0 6px, #232b3c 6px 12px); }
.ovmini-off span { font-size: var(--fs-1); color: #9aa3b4; letter-spacing: .08em; }
.ovmini .ovb { position: absolute; border-radius: var(--r-1); }               /* bar fill/base */
.ovcap { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  border-radius: var(--r-1); font-size: var(--fs-1); font-weight: 800; padding: 2px 5px; line-height: 1; }
.ovcap.big { font-size: var(--fs-1); padding: 3px 6px; }
.ovcard { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; }
.ovcard .ovname { height: 5px; width: 62%; border-radius: var(--r-1); }
.ovcard .ovsub { height: 3px; width: 34%; border-radius: var(--r-1); background: var(--amber); opacity: .85; }
.ovcard .ovsub.big { height: 5px; width: 50%; }
.ovcard .ovdiv { height: 2px; width: 20px; border-radius: var(--r-1); background: var(--amber); }
.ovcard .ovcta { height: 8px; width: 44%; border-radius: var(--r-2); background: var(--amber); }
.ovcard .ovcta.wide { width: 100%; margin-left: -8px; border-radius: 0; box-sizing: content-box; padding: 0 8px; }
.ovfoot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line2); flex-wrap: wrap; }
.ovdef { display: flex; align-items: center; gap: 7px; font-size: var(--fs-3); color: var(--text); cursor: pointer; }
.ovdef input { width: auto; }


/* talking avatar: tap-to-place mouth */
.mouthbox { position: relative; border: 1px solid var(--line2); border-radius: var(--r-3);
  overflow: hidden; cursor: crosshair; margin-bottom: 6px; }
.mouthbox { max-width: 680px; }
.mouthbox img { width: 100%; max-height: 380px; object-fit: contain; display: block;
  background: var(--card2); }
.mouthzone { position: absolute; border: 1px dashed rgba(242, 151, 24, .55);
  pointer-events: none; }
.mouthfoot { position: absolute; border: 2px solid var(--amber); border-radius: 50%;
  pointer-events: auto; cursor: grab; touch-action: none;
  background: rgba(224, 137, 0, .12); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mouthfoot:active { cursor: grabbing; }
.mflip { position: absolute; left: 8%; right: 8%; top: -1px; height: 2px;
  background: rgba(255,255,255,.85); border-radius: var(--r-1); pointer-events: none; }
.mfgrab { position: absolute; right: -11px; top: 50%; width: 20px; height: 20px;
  margin-top: -10px; border-radius: 50%; background: var(--amber);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--amber);
  pointer-events: auto; cursor: ew-resize; touch-action: none; }
.mflabel { position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  background: rgba(7,11,20,.85); color: #fff; font-size: var(--fs-1); letter-spacing: .06em;
  border-radius: var(--r-pill); padding: 2px 8px; pointer-events: none; }
.mouthdot { position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--amber);
  pointer-events: none; }
/* tilt knob on top of the oval - a child of .mouthfoot so it rotates WITH it,
   always sitting "above" the mouth in mouth-space; drag it to slant the mouth */
.mfrot { position: absolute; left: 50%; top: -24px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--amber);
  box-shadow: 0 0 0 2px var(--amber); pointer-events: auto; cursor: grab; touch-action: none; }
.mfrot::before { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 11px;
  margin-left: -1px; background: var(--amber); }
.mfrot:active { cursor: grabbing; }
.mouthbox:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mouthctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mouthtilt { font-size: var(--fs-1); letter-spacing: .06em; color: var(--amber-deep); font-weight: 600; }
#stTalkPreview.on { background: var(--amber-sel); border-color: var(--amber-sel); color: #fff; }
/* a field paired with its own "From bank" button (titled-photo headline) */
.stbankrow { display: flex; gap: 8px; align-items: center; }
.staiwritebank { margin: 8px 0 16px; }   /* breathing room under the prompt buttons, above the next block */
.stbankrow input { flex: 1; min-width: 0; }
.stbankrow .btn { flex: none; }
/* hook / value ad lines carry an input + two AI buttons; let them wrap so the
   field keeps a usable width and the buttons drop below when space is tight
   (the input's flex-basis drives it - no magic breakpoint). */
.stbankrow.adline { flex-wrap: wrap; }
.stbankrow.adline > input { flex: 1 0 220px; }
/* a bank row with TWO actions (Write with AI + From bank) wraps the buttons below
   the input on narrow screens instead of overflowing */
.stbankrow.stbwrap { flex-wrap: wrap; }
.stbankrow.stbwrap > input { flex: 1 1 180px; }
/* short helper caption under a Studio field label (e.g. the NAME row): why a good
   filename matters (Post now matches it to the right Ideas bank idea) */
.stnamehint { font-size: var(--fs-2); color: var(--muted); line-height: 1.4; margin: 2px 0 6px; }

/* video tiles show a real frame (media fragment #t=1.2), play badge on top */
.masset .img video, .mth video { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; pointer-events: none; }
.masset .img.vid::after, .mth.vid::after, .mptile.vid::after { z-index: 2; }   /* play glyph ABOVE the poster (video is z-index:1) - the picker was missing here */
.masset .img.vid .aibadge, .mth.vid .aibadge, .masset .img.vid .mact { z-index: 3; }


/* Studio tabs + inline build status */
.studiotabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 18px; gap: 6px;
  scrollbar-width: none; -ms-overflow-style: none; }
.studiotabs::-webkit-scrollbar { height: 0; }
.studiotabs > button { flex: 0 0 auto; white-space: nowrap; }
.studiotabs button { font-family: var(--font-mono); font-size: var(--fs-2);
  letter-spacing: .04em; padding: 9px 13px; border-radius: var(--r-3);
  border: 2px solid var(--line2); background: var(--card); color: var(--text);
  cursor: pointer; font-weight: 700; }
.studiotabs button:hover { border-color: var(--amber); }
.studiotabs button.on { background: var(--amber-bright); border-color: var(--amber-bright);
  color: #1a1206; box-shadow: var(--shadow); } /* bright fill so dark label clears AA */
.studiotabs button.dragging { opacity: .5; cursor: grabbing; }   /* the tab being moved */
/* Studio tab strip scroller: a relative wrapper so the left/right arrows overlay the
   edges of the (already overflow-x:auto) strip. Arrows fade the tabs beneath and hide
   when there is nothing more to scroll to (set [hidden] by studioTabArrows). */
.sttabscroll { position: relative; margin-bottom: 18px; }
.sttabscroll .studiotabs { margin-bottom: 0; scroll-behavior: smooth; }
.sttabarrow { position: absolute; top: 0; bottom: 0; width: 44px; display: flex; align-items: center;
  border: none; cursor: pointer; z-index: 2; padding: 0; color: var(--text); }
.sttabarrow svg { width: 22px; height: 22px; }
.sttabarrow-l { left: 0; justify-content: flex-start; padding-left: 2px;
  background: linear-gradient(to right, var(--bg) 52%, transparent); }
.sttabarrow-r { right: 0; justify-content: flex-end; padding-right: 2px;
  background: linear-gradient(to left, var(--bg) 52%, transparent); }
.sttabarrow:hover { color: var(--amber-deep); }
.sttabarrow[hidden] { display: none; }
/* Edit Video pane: the choose-a-video CTA row + a recent-videos quick-pick grid */
.stedit-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 4px; }
.stedit-lead .hint { padding: 0; flex: 1 1 220px; min-width: 0; }
/* phone: the lead button stacks under the intro - room above it (it sat 4px under the words,
   its glow touching them) */
@media (max-width: 760px) { .stedit-lead { margin: 14px 0 10px; } }
.stedit-recent { margin-top: 14px; }
.stedit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 6px; }
.stedit-thumb { position: relative; border: 1px solid var(--line2); border-radius: var(--r-3); overflow: hidden;
  background: #0b0b0b; cursor: pointer; padding: 0; aspect-ratio: 4 / 5; }
.stedit-thumb video, .stedit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stedit-thumb:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.stedit-thumbname { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 7px 4px; font-size: var(--fs-1);
  color: #fff; background: linear-gradient(to top, rgba(0,0,0,.74), transparent); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* reorder helper line under the tabs: quiet hint + a reset that only shows once
   a custom order is saved. Wraps on narrow screens so it never scrolls sideways. */
.streorder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: -8px 0 15px; font-size: var(--fs-2); color: var(--muted); }
.streorder-reset { color: var(--amber-deep); text-decoration: none; font-weight: 700;
  border-bottom: 1px dashed currentColor; }
.streorder-reset:hover { color: var(--amber); }
.stpanes { grid-template-columns: 1fr; }
.stpane .stform { max-width: none; }
.stpane .stform input:not([type=checkbox]), .stpane .stform select,
.stpane .stform textarea { max-width: 680px; }
/* AI Video: optional guide images first, then numbered 2-up steps, then the
   optional outro + music side by side - so the whole creator fits one screen.
   The numbers give the explicit order that keeps a 2-column form unambiguous. */
.clipform .clipintro { margin-bottom: 12px; }
.clipguide { margin-bottom: 13px; }                       /* optional guide images sit first, up top */
.clipguide .stfold { margin-top: 0; }                     /* sit tight under the intro - no double gap */
.clipguide .stfold-body { padding-top: 10px; }
.clipguide .stfold-body .stselstrip { margin-top: 0; }    /* editing-from strip hugs the head, neater */
.clipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; align-items: start; }
.clipgrid .ststep { min-width: 0; }
.clipgrid .clipdesc { grid-column: 1 / -1; }              /* the prompt is the hero - full width */
/* OUTPUT row: Premium + Versions lifted out of the numbered cells so cells 1-4 stay equal-height
   selects (no diagonal grid gaps). One compact full-width flex row; wraps (never scrolls) on mobile. */
.clipform .clipoutput { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px 12px;
  flex-wrap: wrap; margin: 2px 0 0; }
.clipform .clipoutput .spacer { flex: 1 1 auto; }
.clipform .clipoutput label.switch { margin: 0; }
/* FORMAT toggle inside the grid: drop its 16px bottom margin so cell 4 height matches the LENGTH
   select beside it (closes the residual row-2 gap); the grid's own row-gap handles the spacing. */
.clipgrid .stfmt { margin-bottom: 0; }
/* DESCRIBE (step 5) is the hero writing zone - lift its label one size step so the eye lands here. */
.clipgrid .cliphero > label { font-size: var(--fs-2); }
.clipform .ststep > label, .clipform .clipoutrofield > label { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; }
/* White numerals on a FIXED deep amber (#995800 = light-theme --amber-deep). Not
   var(--amber): white on #e08900 is only 2.71:1 (fails AA), and --amber-deep flips
   lighter in dark mode where white would fail again. #995800 holds white at 5.6:1
   and stays >=3:1 against both light and dark cards - AA in both themes. */
.stnum { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  flex: none; border-radius: 50%; background: #995800; color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700; }
/* fill the grid cell instead of the 680px single-column cap (beats .stpane .stform select) */
.stpane .stform.clipform select, .stpane .stform.clipform textarea,
.stpane .stform.clipform .aiprompt { max-width: none; width: 100%; }
.clipform .stnarr2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clipform .stnarr2 .aistyle { width: auto; flex: 0 0 auto; }
.clipform .stnarr2 .aiprompt { flex: 1 1 160px; width: auto; }
/* compact inline placement control (caption / hook position): a labelled select on ONE
   row, so the on-screen-text options don't stack into a tall column of white space.
   (0,3,0) beats the full-width `.studiocard .stform select` rule so the select stays auto. */
.clipform .stposrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; flex-wrap: wrap;
  font-weight: 700; }
/* mirror the .stpane .stform.clipform select ancestry (0,3,1) + one more class so width:auto wins */
.stpane .stform.clipform .stposrow .stposel { width: auto; flex: 0 1 auto; min-width: 150px;
  max-width: 100%; font-weight: 400; }
/* TOGGLE SWITCHES in the studio form. The broad `.studiocard .stform label` (block, tiny mono,
   uppercase) would flatten a `.switch` (pill + text stack, mono) - restore it to the real inline
   pill + readable body label. `.stsw` is the row that pairs a switch with its `?` tip (the tip
   sits OUTSIDE the switch label so clicking it never toggles). Descriptive copy lives in the tip,
   so the label stays a couple of words. */
.studiocard .stform label.switch { display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text); }
.studiocard .stform label.switch em { font-size: var(--fs-4); font-weight: 600; color: var(--text); }
.clipform .stsw { display: flex; align-items: center; gap: 8px; margin: 9px 0 0; }
/* tighter, more refined controls in the AI-video form (Peter: 'make inputs smaller') - trims
   the oversized 41px/16px selects + inputs to a neater ~34px/14px. Textarea (DESCRIBE) is left
   roomy for real writing. */
.clipform .clipgrid select, .clipform .clipgrid input:not([type=checkbox]):not([type=radio]),
.clipform .clipoutrofield select, .clipform .clipoutrofield .musicmoodsel {
  padding: 8px 12px; font-size: var(--fs-4); }
/* captions on ONE line: the Auto-captions switch on the left, its Position select on the right */
.clipform .stcaprow { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 9px 0 0; }
.clipform .stcaprow .stposrow { margin: 0 0 0 auto; }        /* push Position to the right of the row */
.clipform .sthookctl { margin-top: 10px; }                    /* proper gap under the hook input */
/* last row: Brand outro | Music | Brand intro, side by side. wireStudioMusic() injects the
   MUSIC label + row right after the outro <select>; the markup then adds the BRAND INTRO
   label + toggle - so a 2-row column flow lays the SIX children out as three aligned columns
   (outro | music | intro), labels on row 1 and controls on row 2. The intro column is content-
   sized so the toggle no longer floats off on its own. */
.clipform .clipoutrofield { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 18px; row-gap: 6px;
  align-items: start; margin-top: 18px; }
.clipform .clipoutrofield .stintrorow { display: flex; align-items: center; min-height: 40px; }
.clipform .clipoutrofield select, .clipform .clipoutrofield .stmusicrow { margin: 0; width: 100%; }
.clipform .clipoutrofield .stmusiclbl { margin: 0 0 5px !important; }   /* align with the outro label (row 1) */
@media (max-width: 760px) {
  .clipgrid { grid-template-columns: 1fr; }
  .clipform .clipoutrofield { display: block; }                        /* stack outro, then music */
  .clipform .clipoutrofield .stmusiclbl { margin: 12px 0 5px !important; }
}
@media (min-width: 1100px) {
  .stpane .stpick { grid-template-columns: repeat(8, 1fr); }
  .stpane .fxgrid { grid-template-columns: repeat(8, 1fr); }
}
.stpane { display: none; }
.stpane.on { display: block; }
/* ---- Full-screen (maximise) a Studio creator ----------------------------
   The header toggle (.stfs) expands a creator to fill the viewport for more
   editing room. In full screen a BRANDED BAR (logo + "Creative Studio >
   FEATURE" breadcrumb + Close) replaces the pane header, a soft brand gradient
   replaces the flat card, and a short loading cover hides the reflow/redraw
   pause. A CSS overlay (position:fixed), NOT the native Fullscreen API - works
   on iOS Safari + inside embeds, keeps our own Close control, pins the bar and
   scrolls the body. z-index 45 sits above the top bar (30) yet below toasts
   (50), the media lightbox (300) and tooltips (1000). No ancestor of .stpane
   sets transform/filter/contain, so inset:0 stays viewport-anchored (verified).
   Every bar item is in normal flex flow, so the Close control can never overlap
   the title/chip the way the earlier absolutely-positioned one did. */

/* enter control, in the normal pane header (icon only) */
.stfs { position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: transparent; border: 1px solid var(--line2); color: var(--muted);
  border-radius: var(--r-3); padding: 6px 8px; cursor: pointer; line-height: 0; }
.stfs:hover { border-color: var(--amber); color: var(--text); }
.stfs:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stfs .bic { margin: 0; width: 16px; height: 16px; }
.stfs-lab { display: none; }
/* reserve header room for [cost chip] [enter btn] [fold chevron] */
.studiocard.stpane > .phead.pheadflex { padding-right: 82px; }

/* the branded bar + loading cover live in every pane, shown only in full screen */
.stfsbar, .stfsload { display: none; }

/* ---- maximised surface: soft brand gradient (the house ambient wash) ---- */
.studiocard.stpane.stfsmax { display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 45; margin: 0; border: 0; border-radius: 0;
  max-height: 100vh; max-height: 100dvh;
  background:
    radial-gradient(1150px 640px at 6% -10%, rgba(255,173,51,.16), transparent 58%),
    radial-gradient(980px 640px at 99% 4%, rgba(62,207,142,.11), transparent 60%),
    var(--bg); }
.studiocard.stpane.stfsmax > .phead { display: none; }        /* replaced by the branded bar */
.studiocard.stpane.stfsmax > .stfsbar { display: flex; }
/* content sits on a centred "document" card so the gradient frames it */
.studiocard.stpane.stfsmax > .panelpad { flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch; width: calc(100% - 40px); max-width: 1180px;
  margin: 20px auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-5); box-shadow: 0 14px 44px -18px rgba(8,12,22,.42); }

/* branded bar: [logo] Creative Studio > FEATURE .............. [Close] */
/* the maximised creator covers the whole screen: its bar starts under the status bar */
.stfsbar { align-items: center; gap: 13px; flex: 0 0 auto;
  padding: calc(10px + var(--gf-safe-top)) calc(16px + var(--gf-safe-right)) 10px calc(16px + var(--gf-safe-left));
  border-bottom: 1px solid var(--line); background: var(--card2); }
.stfsbar-logo { display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5);
  letter-spacing: -.01em; color: var(--text); }
.stfsbar-logo svg { width: 30px; height: 30px; border-radius: var(--r-3); flex: none; }
.stfsbar-word b { color: var(--amber-deep); }
.stfsbar-div { width: 1px; height: 22px; background: var(--line2); flex: none; }
.stfsbar-crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; }
.stfsbar-crumb .cr-root { color: var(--muted); white-space: nowrap; }
.stfsbar-crumb .cr-sep { color: var(--dim); display: inline-flex; flex: none; }
.stfsbar-crumb .cr-sep .bic { margin: 0; width: 13px; height: 13px; }
.stfsbar-crumb .cr-cur { color: var(--amber-deep); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stfsbar .spacer { flex: 1 1 auto; min-width: 10px; }
.stfsclose { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-3); padding: 9px 14px; cursor: pointer; line-height: 1; }
.stfsclose:hover { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.stfsclose:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stfsclose .bic { margin: 0; width: 15px; height: 15px; }

/* loading cover: same gradient + a brand spinner, hides the enter reflow/redraw */
.studiocard.stpane.stfsmax > .stfsload { display: flex; position: absolute; inset: 0; z-index: 4;
  flex-direction: column; align-items: center; justify-content: center; gap: 15px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease, visibility .32s;
  background:
    radial-gradient(1150px 640px at 6% -10%, rgba(255,173,51,.16), transparent 58%),
    radial-gradient(980px 640px at 99% 4%, rgba(62,207,142,.11), transparent 60%),
    var(--bg); }
.studiocard.stpane.stfsmax.stfs-loading > .stfsload { opacity: 1; visibility: visible;
  pointer-events: auto; transition: opacity .12s ease; }
.stfsload-spin { width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--line2); border-top-color: var(--amber); animation: stfsSpin .7s linear infinite; }
.stfsload-txt { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
@keyframes stfsSpin { to { transform: rotate(360deg); } }

/* mobile: keep the mark, drop the wordmark + breadcrumb root so the bar never wraps */
@media (max-width: 620px) {
  .stfsbar { gap: 10px; padding: calc(9px + var(--gf-safe-top)) calc(12px + var(--gf-safe-right)) 9px calc(12px + var(--gf-safe-left)); }
  .stfsclose { min-height: 44px; }   /* the bar's one button: a 44px target */
  .stfsbar-word, .stfsbar-div, .stfsbar-crumb .cr-root, .stfsbar-crumb .cr-sep { display: none; }
  .studiocard.stpane.stfsmax > .panelpad { width: calc(100% - 20px); margin: 12px auto; border-radius: var(--r-4); }
}
/* phone: the bottom tab bar stays (as with the post editor) - the maximised creator stops
   above it, else the bar covered the end of the form and its last button could never be
   scrolled into reach; without the bar (>760px) it reaches the home indicator's inset */
@media (max-width: 760px) {
  .studiocard.stpane.stfsmax { bottom: calc(64px + var(--gf-safe-bottom)); }
}
@media (min-width: 761px) {
  .studiocard.stpane.stfsmax { padding-bottom: var(--gf-safe-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  .stfsload-spin { animation: none; }
  .studiocard.stpane.stfsmax > .stfsload { transition: none; }
}
.stbuild { margin-top: 14px; border-radius: var(--r-3); padding: 12px 16px; font-size: var(--fs-4);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stbuild.pending { background: var(--amber-soft); color: var(--amber-deep); }
.stbuild.done { background: rgba(20, 151, 107, .12); color: var(--green); }
.stbuild.err { background: rgba(190, 40, 40, .1); color: #a33; }
.stbuild .hlink { font-weight: 700; text-decoration: underline; }
/* LIVE build stepper (staged builds e.g. Ultra Sync): each stage the worker reports lights
   up in turn - a determinate checklist right inside the build card. Design (research: USWDS
   step indicator / eBay + PatternFly progress-stepper a11y): a status ICON with an accessible
   name per row (complete / in progress / upcoming), exactly one row aria-current="step", the
   list labelled, nothing focusable; status is never colour-only (check glyph, spinner, weight).
   NO connector rail: the old hairline sat off the dot centres and read as a stray faint line
   (Peter, 2026-09-11) - the rows are a checklist, the bar carries the progress. */
.stbuild.stprog { display: block; padding: 14px 16px 12px; }
.stprog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px;
  flex-wrap: wrap; font-size: var(--fs-4); line-height: 1.4; margin-bottom: 4px; }
.stprog-head b { font-size: var(--fs-5); }
.stprog-meta { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.stp-time { opacity: .78; }
.stp-elapsed { font-weight: 700; }
.stp-count { font-size: var(--fs-2); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill); background: rgba(153, 88, 0, .12); }
.stprog-sub { font-size: var(--fs-3); color: var(--muted); line-height: 1.45; margin: 0 0 10px; }
/* a slim determinate bar under the header - fills as the checklist advances */
.stp-bar { height: 5px; border-radius: var(--r-pill); background: rgba(153, 88, 0, .14);
  overflow: hidden; margin: 0 0 10px; }
.stp-bar-fill { display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--amber, #e08900); transition: width .5s ease; }
.stp-steps { list-style: none; margin: 0 -8px; padding: 0; }
.stp-step { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--r-2, 8px); }
.stp-step.now { background: rgba(224, 137, 0, .12); }
.stp-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box; }
.stp-ic.wait { border: 2px solid var(--line2); background: transparent; }
.stp-ic.now { border: 2px solid var(--amber, #e08900); background: var(--card, #fff); }
.stp-ic.now .stspin { width: 12px; height: 12px; border-width: 2px; }
.stp-ic.done { background: var(--green, #14976b); color: #fff; }
.stp-ic.done svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stp-lb { font-size: var(--fs-4); color: var(--text, #111); }
.stp-step.wait .stp-lb { opacity: .62; }   /* de-emphasised, still the near-black text token */
.stp-step.now .stp-lb { font-weight: 700; animation: stppulse 1.6s ease-in-out infinite; }
.stp-step.done .stp-lb { color: var(--dim); }
@keyframes stppulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .stp-bar-fill { transition: none; } .stp-step.now .stp-lb { animation: none; } }
.stp-sub { display: inline-block; margin-left: 7px; font-weight: 700; font-size: var(--fs-2);
  padding: 1px 8px; border-radius: var(--r-pill); background: var(--amber); color: #fff; vertical-align: 1px; }
.stspin.sm { width: 12px; height: 12px; border-width: 2px; }
.stp-note { margin-top: 8px; font-size: var(--fs-3); }
/* A/B versions: batch count beneath the shared live stepper (how many of N are done) */
.stp-versions { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line2);
  font-size: var(--fs-2); color: var(--dim); }
.stp-versions .hlink { font-size: inherit; }
/* rich instant-result card (titled photo / collage): preview + post actions */
.stbuild.stresult { display: block; position: relative; padding: 14px; color: inherit; background: var(--card2, #faf8f4); border: 1px solid var(--line, #e4dfd4); }
/* X dismiss (top-right): remove a finished card - the creation stays in the Media library */
.stres-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-3);
  background: transparent; color: var(--dim); cursor: pointer; transition: background .12s, color .12s; }
.stres-x:hover, .stres-x:focus-visible { background: var(--line2); color: var(--text); outline: none; }
.stres-x svg { width: 16px; height: 16px; display: block; }
.stres-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.stres-thumb { position: relative; flex: 0 0 auto; width: 108px; height: 108px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line2, #d2ccbe); background: var(--card, #fff); cursor: pointer; padding: 0; }
.stres-thumb img, .stres-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stres-thumb.isvid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-7); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); background: rgba(10,15,28,.18); pointer-events: none; }
.stres-body { flex: 1 1 220px; min-width: 200px; }
.stres-h { font-size: var(--fs-4); margin-bottom: 10px; color: var(--green, #14976b); font-weight: 600; padding-right: 34px; }
.stres-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stres-actions .btn { padding: 9px 13px; font-size: var(--fs-3); }
/* multi-output strip (a collage's 3 sizes): every size visible + clickable */
.stres-sizes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line2, #d2ccbe); }
.stres-sizes-l { flex: 0 0 auto; font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim, #8a8f9a); }
.stres-size { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-3); overflow: hidden; padding: 0;
  border: 1px solid var(--line2, #d2ccbe); background: var(--card, #fff); cursor: pointer; }
.stres-size img, .stres-size video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stres-size.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.stres-size:hover { border-color: var(--amber); }
/* A/B versions strip: a numbered badge per take (amber on the active one being previewed) */
.stres-vers .stver { position: relative; }
.stver-n { position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-1);
  background: rgba(0,0,0,.62); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.stres-vers .stver.on .stver-n { background: var(--amber-deep, #995800); }
.stspin { width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--amber-deep); border-top-color: transparent;
  animation: stspin 1s linear infinite; }
@keyframes stspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stspin { animation: none; } }
/* media-library Refresh: spin the icon while the library re-loads */
#mediaRefresh.spinning .bic { display: inline-flex; animation: stspin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { #mediaRefresh.spinning .bic { animation: none; } }
/* a Studio build button while its render is in flight: spinner + "Generating",
   non-clickable (also disabled in JS) so it can't be double-submitted */
.btn.stbuilding { cursor: progress; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; }
.btn.stbuilding .stspin { width: 13px; height: 13px;
  border-color: currentColor; border-top-color: transparent; }


/* EDITING FROM strip - the selection the build will actually use */
.stselstrip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-3);
  padding: 10px 14px; margin: 12px 0 4px; }
.stsel-lab { font-size: var(--fs-2); letter-spacing: .1em; color: var(--muted); flex: none; }
.stsel-name { font-size: var(--fs-5); font-weight: 600; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.stselthumb { position: relative; width: 54px; height: 54px; border-radius: var(--r-3);
  overflow: visible; flex: none; }
.stselthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-3);
  border: 2px solid var(--amber); }
.stselthumb i { position: absolute; bottom: -4px; left: -4px; background: var(--amber);
  color: #1a1206; font-style: normal; font-weight: 700; font-size: var(--fs-1);
  width: 18px; height: 18px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; }
.stselthumb button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: #1a1206; color: #fff; font-size: var(--fs-1);
  cursor: pointer; line-height: 1; }
/* EDITING FROM - clean per-image cards (thumb + its own name + remove), each
   opens the media popup on click. Used everywhere the strip appears. */
.stselstrip { align-items: flex-start; }
.stsel-cards { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.stselcard { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px 6px 6px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); cursor: pointer;
  max-width: 250px; transition: border-color .12s, box-shadow .12s; }
.stselcard:hover { border-color: var(--amber); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.stselcard:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.stselcard-thumb { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-3); overflow: hidden; background: var(--card2); }
.stselcard-thumb img, .stselcard-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stselcard-thumb.isvid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-3); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.stselord { position: absolute; top: 2px; left: 2px; background: var(--amber); color: #1a1206; font: 700 9px/1 ui-monospace, monospace; padding: 2px 4px; border-radius: var(--r-2); }
.stselcard-name { font-size: var(--fs-3); font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.stselcard-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-5); line-height: 1; cursor: pointer; padding: 0 3px; border-radius: var(--r-2); }
.stselcard-x:hover { color: #d33; background: rgba(211, 51, 51, .1); }


/* gfForm inline aux action (e.g. AI name beside the NAME field) */
.gfauxrow { display: flex; gap: 8px; align-items: stretch; }
.gfauxrow input { flex: 1; }
.gfauxrow .btn { flex: none; white-space: nowrap; }


/* Studio collapsible media folds */
.stfold { border: 1px solid var(--line2); border-radius: var(--r-3); margin: 12px 0 6px;
  overflow: hidden; }
.stfold-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  cursor: pointer; user-select: none; background: var(--card2);
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); }
.stfold-head:hover { color: var(--text); }
.stfold-t { font-weight: 700; }
.stfold-sum { color: var(--amber-deep); letter-spacing: .04em; text-transform: none;
  font-size: var(--fs-1); }
.stfold-chev { flex: none; transition: transform .18s ease; text-transform: lowercase;
  font-family: var(--font-body); font-size: var(--fs-3); }
.stfold:not(.open) .stfold-chev { transform: rotate(-90deg); }
.stfold-body { padding: 12px 14px; }
.stfold:not(.open) .stfold-body { display: none; }
@media (prefers-reduced-motion: reduce) { .stfold-chev { transition: none; } }

/* ---- STEP FORMS in the Creative Studio (Peter 2026-10-01): a creator whose form is .stwiz
   uses the Content Drop "Create a link" builder's own classes (.cdwiz-grid, .cdstep, .cdpcard,
   .cdx rows, .cdside + .cdsum) so the two read as one product. What follows only undoes the
   Studio's broad form rules inside it and places the Studio-only parts. ---- */
/* the panel's overflow:hidden would stop the side panel sticking (same fix as Content Drop) */
.studiocard.stpane:has(.stwiz) { overflow: clip; }
/* the creators sit in a 1fr grid (.stpanes), whose track never shrinks below an item's
   min-content - a step form's wide rows stretched Split screen to 629px on a 375px phone.
   min-width:0 lets the pane take the column's width (its content already wraps to fit) */
.stpanes > .stpane { min-width: 0; }
.stwiz .clipintro { margin: 0 0 18px; }
/* the broad `.studiocard .stform label` (block, tiny mono caps) must not flatten the step
   form's labels: a field label, a switch row and a small inline label */
.studiocard .stform.stwiz label.cdlab { display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0; color: var(--text); }
.stwiz span.cdlab { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.studiocard .stform.stwiz label.cdx-row { display: flex; margin: 0; font-family: var(--font-body);
  font-size: inherit; font-weight: inherit; letter-spacing: 0; color: inherit; }
.studiocard .stform.stwiz label.stwinl { display: inline-flex; align-items: center; margin: 0;
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0; color: var(--text); }
.stwiz .cdx-row .tipdot { flex: none; }
/* controls: the Content Drop size (~36px, 14px text); the description stays roomy */
.stpane .stform.stwiz select, .stpane .stform.stwiz input:not([type=checkbox]):not([type=radio]):not([type=color]) {
  padding: 8px 12px; font-size: var(--fs-4); }
.stpane .stform.stwiz textarea { max-width: none; width: 100%; font-size: var(--fs-4); }
.stpane .stform.stwiz .stposel { width: auto; min-width: 170px; max-width: 100%; flex: 0 1 auto; }
.stpane .stform.stwiz .stwnarrow { max-width: 420px; }
.stwiz .stwsrc[hidden] { display: none; }
/* step 1 choice cards: three across (six types = two tidy rows) */
.stwiz .stwcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* step 2: tone + note + AI buttons above the description, guide photos folded under it */
.stwiz .stnarr2 { margin: 0 0 8px; }
.stpane .stform.stwiz .stnarr2 .aistyle { width: auto; flex: 0 0 auto; }
.stpane .stform.stwiz .stnarr2 .aiprompt { flex: 1 1 180px; width: auto; }
/* the voiced slideshow's older .stnarr tool row: one wrapping row like .stnarr2 */
.stwiz .stnarr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.stpane .stform.stwiz .stnarr select { width: auto; flex: 0 0 auto; }
.stpane .stform.stwiz .stnarr input { flex: 1 1 200px; width: auto; min-width: 0; }
.stwiz .stnarr .btn { flex: none; }
.stwiz .clipguide { margin: 14px 0 0; }
/* step 3: the style (long, worded options) across the top, then length | shape */
.stwgrid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: start; }
.stwgrid3 > .stwcell:first-child { grid-column: 1 / -1; }
.stpane .stform.stwiz .stwgrid3 > .stwcell:first-child select { max-width: 520px; }
.stwcell { min-width: 0; }
.stwgrid3 .stfmt { margin: 0; }
.stwgrid3 .stfmt button { padding: 5px 8px; }
/* size tick pills: the broad studio label rule flattens .collcheck into tiny mono caps -
   restore the pill (padding, border, amber when ticked) in body type */
.studiocard .stform.stwiz label.collcheck { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 12px; font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0;
  color: var(--text); text-transform: none; }
.stwiz .stovsizes { margin: 0; }
/* two cells: a select beside a wider shape toggle */
.stwgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px 18px; align-items: start; }
.stwgrid2 .stfmt { margin: 0; }
/* breathing room between the fields inside one step */
.studiocard .stform.stwiz label.cdlab.stwgap { margin-top: 16px; }
.stwiz .strow.stwgap, .stwiz .stwgrid2.stwgap { margin-top: 16px; }
.stwiz .strow .cdlab { margin-top: 0; }
/* two mode cards (Make new / Change an image) side by side */
.stwiz .stwcards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a photo picker fold uses the full width (its thumbnails need the room) */
.stwiz .stwpickfold > .stfold-body { padding-left: 0; }
.stwiz .stselstrip:empty { display: none; }
/* the AI Image brand-look row (stAiRenderKit) as a plain row, like the AI Video one */
.stwiz .staikitrow { margin: 0 0 12px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.stwiz .staikitrow[hidden] { display: none; }
.stwiz .staikitrow .staikit-head { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; letter-spacing: 0;
  text-transform: lowercase; color: var(--text); margin-bottom: 4px; }
.stwiz .staikitrow .staikit-head::first-letter { text-transform: uppercase; }
/* labels inside a "Font and branding" fold (FONT, MUSIC and BRAND OUTRO are written in caps by
   the code that injects them) read in sentence case like every other step-form label */
.studiocard .stform.stwiz .stfold-body label { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600;
  letter-spacing: 0; color: var(--text); text-transform: lowercase; }
.studiocard .stform.stwiz .stfold-body label::first-letter { text-transform: uppercase; }
.studiocard .stform.stwiz .stfold-body label .outro-setup-link { font: inherit; text-transform: lowercase; }
.studiocard .stform.stwiz .stfold-body label .outro-setup-link::first-letter { text-transform: uppercase; }
.studiocard .stform.stwiz .stfold-body label .costchip, .studiocard .stform.stwiz .stfold-body label .tipdot { text-transform: none; }
.studiocard .stform.stwiz .stfold-body .stfontrow:first-child > label { margin-top: 0 !important; }
/* a label that follows another field in the same step gets room above it */
.studiocard .stform.stwiz .cdstep > :not(.cdstep-h) + label.cdlab, .stwiz .cdstep > :not(.cdstep-h) + span.cdlab { margin-top: 16px; }
/* the Font row (injected with a caps FONT label) sitting straight in a step: a plain row */
.stwiz .cdstep > .stfontrow { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.studiocard .stform.stwiz .cdstep > .stfontrow > label { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600;
  letter-spacing: 0; color: var(--text); text-transform: lowercase; }
.studiocard .stform.stwiz .cdstep > .stfontrow > label::first-letter { text-transform: uppercase; }
.studiocard .stform.stwiz .cdstep > .stfontrow > label .tipdot { text-transform: none; }
.stwiz .stwintro { margin-top: 10px; }
.stwiz .stwfieldrow > .netchip { margin-left: auto; flex: none; }
/* rows: a switch reveals its details only when on; a field row holds its control on the right */
.stwiz .cdstep-h + select, .stwiz label.cdlab + select { display: block; }
.stwiz select + .cdx, .stwiz .hint + .cdx { margin-top: 14px; }
.stwiz .cdx.stwreveal:not(:has(> .cdx-row input:checked)) > .cdx-body { display: none; }
.stwiz .cdx-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.stwiz .cdx-body.stwhook { display: block; }
.stwiz .stwfieldrow { cursor: default; flex-wrap: wrap; }
.stwiz .stwfieldrow > .stposel { margin-left: auto; }
.stwiz .stwpush { margin-left: auto !important; }
/* the brand-look row (rendered by stClipRenderKit, shared look with AI Image) as one more
   plain row: a sentence-case heading, then its status, switch and link */
.stwiz .staikit { border-top: 1px solid var(--line); padding: 12px 0 2px 44px; }
.stwiz .staikit[hidden] { display: none; }
.stwiz .staikit-head { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; letter-spacing: 0;
  text-transform: lowercase; color: var(--text); margin-bottom: 4px; }
.stwiz .staikit-head::first-letter { text-transform: uppercase; }
.stwiz .staikit-status { color: var(--dim); }
/* the Studio's collapsible folds, drawn as Content Drop "more" rows (icon, words, chevron) */
.stwiz .stwfold { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; overflow: visible; }
.stwiz .clipguide .stwfold { border-top: 1px solid var(--line); }
.stwiz .stwfold > .stfold-head { gap: 12px; padding: 12px 0; background: none; font-family: var(--font-body);
  font-size: inherit; letter-spacing: 0; color: var(--text); }
.stwiz .stwfold > .stfold-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-3); }
.stwiz .stwfold .stfold-t { font-size: var(--fs-4); font-weight: 600; }
.stwiz .stwfold .stfold-sum { margin-left: auto; font-size: var(--fs-2); letter-spacing: 0; }
.stwiz .stwfold .stfold-chev { color: var(--dim); }
.stwiz .stwfold > .stfold-body { padding: 0 0 14px 44px; }
/* the side panel: the summary, the file name and Create */
.stwiz .cdside .actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
.stwiz .cdside .stwlib { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-3); }
.stwiz .cdside .stwlib .bic { width: 14px; height: 14px; margin: 0; }
.stwiz .cdside .stnamewrap { margin: 0; }
.studiocard .stform.stwiz .cdside .stnamewrap > label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0; color: var(--text); }
.stwiz .cdside .stnamehint { display: none; }
.stwiz .cdside .stbankrow { flex-wrap: wrap; }
.stwiz .cdside .stbankrow input { flex: 1 1 100%; }
.stwiz .cdside .stbankrow .btn { flex: 1 1 auto; justify-content: center; }
.stwiz .cdside .stbuild { margin-top: 0; }
.stwiz .cdside .stbuild:empty { display: none; }
/* ads: a mode-gated block (.admodepane) the mode switch hides with the hidden attribute -
   a .btn sets its own display, which would beat [hidden], so say it outright */
.stwiz .admodepane[hidden] { display: none !important; }
/* side panel: two secondary actions side by side (print Preview + Save), the ad launch */
.stwiz .stwpair { display: flex; gap: 8px; }
.stwiz .stwpair .btn { flex: 1 1 0; justify-content: center; }
.stwiz .cdside .adlaunch { margin: 0; padding-top: 10px; }
.stwiz .cdside .adlaunch .btn { flex: 1 1 100%; justify-content: center; }
/* a mid-step action (web demo: Let AI plan the tour) */
.stwiz .stwplan { margin: 12px 0 4px; }
/* ad copy is a step of its own now: no sub-panel rule above it */
.stwiz .adcopy { margin: 0; border-top: 0; padding-top: 0; }
.stwgrid2.stwgrid2eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stwiz .cdstep > .ultrasec { margin-top: 0; }
.stwiz .stwoutro { margin-bottom: 8px; }
/* the older Studio blocks carried inside a step (collage / split / ultra / print) write their
   labels in caps - read them in sentence case like the rest of the step form */
.studiocard .stform.stwiz .collopt > label, .studiocard .stform.stwiz .ultralbl,
.studiocard .stform.stwiz .sp-durlab, .studiocard .stform.stwiz .prphoto > label,
.studiocard .stform.stwiz .prsaved > label {
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0;
  color: var(--text); text-transform: lowercase; line-height: 1.3; }
.studiocard .stform.stwiz .collopt > label::first-letter, .studiocard .stform.stwiz .ultralbl::first-letter,
.studiocard .stform.stwiz .sp-durlab::first-letter, .studiocard .stform.stwiz .prphoto > label::first-letter,
.studiocard .stform.stwiz .prsaved > label::first-letter { text-transform: uppercase; }
.studiocard .stform.stwiz .collopt > label .tipdot, .studiocard .stform.stwiz .ultralbl .tipdot,
.studiocard .stform.stwiz .prsaved > label .tipdot { text-transform: none; }
.stwiz #adVidPickLbl { display: inline-block; text-transform: lowercase; }
.stwiz #adVidPickLbl::first-letter { text-transform: uppercase; }
.stwiz .colldur-lbl { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text); }
.stwiz #prResult:not([hidden]), .stwiz #prSaved:not([hidden]) { margin-top: 18px; }
/* AI image: what is only for "Change an image" (quick changes, the change settings step) hides
   with its mode - #stAiEditOpts carries the hidden attribute stAiRenderMode sets */
.stpane[data-spane="aiimg"]:has(#stAiEditOpts[hidden]) .stwaiedit { display: none !important; }
.stwiz .stwaiquick { margin: 0 0 12px; }
/* the brand look sits FIRST (Write with AI and the build both follow it) - under the step's cards */
.stwiz .stwaikit .staikitrow { margin: 14px 0 0; padding: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.stwiz .clipguide + .staikit { margin-top: 2px; }
/* a ONE-ROW option strip that scrolls sideways (collage layouts) + the Studio tab-strip arrows */
.stwrowscroll { position: relative; }
.stwiz .stwonerow { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth;
  overscroll-behavior-x: contain; margin: 0; padding: 2px 2px 4px; }
.stwiz .stwonerow::-webkit-scrollbar { display: none; }
.stwiz .stwonerow > * { flex: 0 0 auto; }
.stwrowscroll .sttabarrow-l { background: linear-gradient(to right, var(--card) 55%, transparent); }
.stwrowscroll .sttabarrow-r { background: linear-gradient(to left, var(--card) 55%, transparent); }
/* collage: the compact editor canvas keeps its tips + a Preview pill under it */
.collpvfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; line-height: 1.3; }
.collpvfoot .collcrophint { margin: 0; text-align: left; }
.collpvbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font: inherit;
  font-size: var(--fs-2); font-weight: 600; cursor: pointer; }
.collpvbtn:hover { border-color: #ffad33; color: #ffad33; }
.collpvbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.collpvbtn[hidden] { display: none; }
.collpvbtn .bic { width: 14px; height: 14px; margin: 0; }
/* the collage Preview popup (the bar + hint reuse the Content Drop preview's classes) */
.collpv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 12px 16px; border-radius: var(--r-5); background: var(--card2); box-shadow: 0 18px 48px rgba(7, 11, 20, .32); }
.collpv .cdpv-bar { width: 100%; }
.collpv-canvas { display: block; max-width: 100%; height: auto; border-radius: var(--r-3); box-shadow: 0 6px 22px rgba(0, 0, 0, .22); }
@media (max-width: 520px) { .collpv { padding: 10px; } }
/* full screen: the pane itself scrolls, so the side panel sticks to its top */
.studiocard.stpane.stfsmax .stwiz .cdwiz-side { top: 12px; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
@media (max-width: 1180px) {
  .stwiz .cdside { display: flex; }
}
@media (max-width: 760px) {
  .stwiz .stwcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stwgrid3 { grid-template-columns: minmax(0, 1fr); }
  .stwgrid2 { grid-template-columns: minmax(0, 1fr); }
  .stwiz .stwfold > .stfold-body, .stwiz .cdx-body { padding-left: 0; }
}


/* Voiced narration AI tools */
.stnarr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.stnarr select { width: auto; flex: none; }
.stnarr input { flex: 1; min-width: 200px; }
.stnarr .btn { flex: none; }
/* NB: the idea-picker's .bkpick / .bkrow styling lives with the picker (search
   ".bkpick .bkrow" ~line 2719). A stray duplicate block used to sit here under the
   wrong comment; its only load-bearing declarations (.bkrow b/span display:block +
   the headline margin) are now folded into the scoped picker rules. */


/* Support: richer ticket rows + thread navigation */
.tkrow { align-items: flex-start; }
.tkrow .t { flex: 1; min-width: 0; }
.tkrow .tkmeta { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--muted); margin-top: 3px; }
.tkrow .tksnip { display: block; font-size: var(--fs-3); color: var(--dim); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkrow:focus { outline: 2px solid var(--amber); outline-offset: -2px; }
.tkthead { gap: 8px; }
.tkthead .tktitle { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex;
  align-items: center; gap: 8px; }
.tkalert { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  color: var(--green); background: rgba(20,151,107,.12); padding: 2px 7px; border-radius: var(--r-pill); }
.tkscroll { max-height: 62vh; overflow-y: auto; }
.tkclosed { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.btn.sm[disabled] { opacity: .4; cursor: default; }


/* RULE: every panel section header collapses/expands. Click the header (not a
   control inside it) to fold the panel; state persists per header. Modals and
   nested non-panel pheads are excluded. */
.panel > .phead { cursor: pointer; }
.panel > .phead > * { cursor: auto; }
/* ...but real controls in the header stay clickable-looking (the reset is only
   meant for text/labels, not buttons or the sort select) */
.panel > .phead button:not(:disabled),
.panel > .phead select,
.panel > .phead a[href] { cursor: pointer; }
.panel > .phead::after { content: "\25be"; margin-left: 10px; flex: none;
  font-family: var(--font-body); font-size: var(--fs-4); color: var(--muted);
  transition: transform .18s ease; }
.panel > .phead:not(.pheadflex)::after { float: right; }
.panel.pcol > .phead::after { transform: rotate(-90deg); }
/* a pheadflex header can wrap its chips onto a 2nd line; pin the expand/collapse
   chevron to the header's top-right so it stays in the SAME spot whether the
   header is one line or two, expanded or collapsed (never drops with the chips) */
.panel > .phead.pheadflex { position: relative; padding-right: 44px; }
.panel > .phead.pheadflex::after { position: absolute; top: 14px; right: 18px; margin: 0; line-height: 1; }
.panel.pcol > .phead.pheadflex::after { transform: rotate(-90deg); }
/* header-only bands (e.g. the Growth-page Flo banner) have no body to fold, so they
   must NOT advertise a fold: drop the chevron, the pointer and the reserved padding
   - otherwise a click looks broken (toggles an invisible state and does nothing) */
.panel.nofold > .phead { cursor: default; }
.panel.nofold > .phead.pheadflex { padding-right: 16px; }
.panel.nofold > .phead::after { content: none; }
.panel.pcol > :not(.phead) { display: none !important; }
/* ROOT FIX for "collapse leaves a big empty box": in any grid/flex row of panels (e.g.
   Overview .row2, Analytics .antwocol) the default align stretches every panel to the
   tallest sibling - so a COLLAPSED panel stayed tall with empty space under its header.
   align-self:start makes a collapsed panel take only its header height, whatever the
   container; expanded panels keep the container's alignment (still equal-height). */
.panel.pcol { align-self: start; }
@media (prefers-reduced-motion: reduce) { .panel > .phead::after { transition: none; } }
/* Explicit Show/Hide disclosure for a panel whose crowded header should NOT collapse on a
   stray click (e.g. the Ideas panel, marked .nofold). The caret rotates FROM aria-expanded
   so the glyph can never drift from the announced state; the label swaps Hide <-> Show. */
.foldbtn { display: inline-flex; align-items: center; gap: 5px; background: var(--card);
  border: 1px solid var(--line2); border-radius: var(--r-pill); cursor: pointer;
  padding: 5px 11px 5px 9px; color: var(--muted); font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; }
.foldbtn:hover { border-color: var(--amber); color: var(--amber-deep); }
.foldbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.foldbtn .foldcaret { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.foldbtn[aria-expanded="false"] .foldcaret { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .foldbtn .foldcaret { transition: none; } }
/* the whole-panel Ideas control is an icon-only chevron (no word) - square + symmetric */
.foldbtn.foldicon { padding: 6px 7px; }
/* a lighter, in-place fold for JUST the topic filter chips, sat directly above them */
.pillfoldrow { padding: 8px 20px 0; }
.foldbtn.pillfold { padding: 4px 11px 4px 8px; }
#bankCatChips.pillhidden { display: none; }
/* the selected view-toggle segment carries a non-colour cue (inset underline) as well as
   the amber fill, so the active layout is clear in greyscale too (WCAG 1.4.1). */
#bankTopicsToggle button.on, #bankDisplayToggle button.on { box-shadow: inset 0 -2px 0 var(--amber); }
/* Add-media: a clean button reveals the upload options INLINE in the page (drag +
   drop on the page still works without opening it) */
.addmediabar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.addmedia-open { display: inline-flex; align-items: center; gap: 8px; }
.addmedia-open .bic svg { width: 18px; height: 18px; }
.createai-open { display: inline-flex; align-items: center; gap: 8px; }
.createai-open .bic svg { width: 18px; height: 18px; }
.contentdrop-open { display: inline-flex; align-items: center; gap: 8px; }
.contentdrop-open .bic svg { width: 18px; height: 18px; }
.addmedia-hint { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.addmedia-inline { margin: 0 0 14px; }


/* support thread: clear active focus + comfortable scroll target */
#tkThread { scroll-margin-top: 84px; }
#tkThread .tkthead { border-bottom: 1px solid var(--line2); }
@media (min-width: 901px) {
  /* wide layout: keep the thread beside the list and in view as you scroll,
     so clicking any ticket shows the conversation right there */
  .split #tkThread { position: sticky; top: calc(var(--gf-topbar-h, 0px) + var(--gf-secbar-h, 0px) + 12px); align-self: start;
    max-height: calc(100vh - var(--gf-topbar-h, 0px) - var(--gf-secbar-h, 0px) - 26px); overflow-y: auto; }   /* below both sticky bars */
}
@media (max-width: 900px) {
  /* stacked layout: the open thread is the focus, lift it visually */
  #tkThread:not(:empty) { box-shadow: 0 0 0 2px var(--amber-soft); }
}


/* voice select + preview as a tight pair (button next to the input) */
.voicerow { display: flex; gap: 8px; align-items: stretch; max-width: 680px; }
.voicerow select { flex: 1; min-width: 0; }
.voicerow .btn { flex: none; white-space: nowrap; }
/* compact AI-write toolbar reused across studio panes */
.stnarr2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 8px; max-width: 680px; }
.stnarr2 select { width: auto; flex: none; }
.stnarr2 input { flex: 1; min-width: 180px; }
.stnarr2 .btn { flex: none; }
/* phone: the prompt shares the tone's row only when its placeholder fits, else it takes its
   own row (Studio full screen at 390 squeezed it to 180px and cut the text) */
@media (max-width: 760px) { .stnarr2 .aiprompt { min-width: 200px; } }


/* Support: single-column form+list; the thread opens in a modal popup */
.tksupport { max-width: 900px; }
.tkmodal { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.tkmodal .npbody.tkscroll { overflow-y: auto; flex: 1; }
.tkmodal .tkthead .tktitle { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-5); }


/* RULE: form fields inside any modal body match the rest of the app - block
   labels above the control, textareas fill the width. Complements the global
   :where(input...) appearance rule so a raw modal never ships bare fields. */
.npbody label { display: block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--dim); margin: 12px 0 5px; }
/* the house .switch component inside any np-modal: the .npbody label rule above (0,1,1)
   would otherwise flatten a switch to a mono block. Re-assert the switch layout at 0,2,1
   so toggles read the same in a modal as they do in Studio (Commerce AI-video chooser). */
.npbody label.switch { display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text); }
.npbody label.switch em { font-size: var(--fs-4); font-weight: 600; color: var(--text); letter-spacing: 0; }
.cmaisw { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.npbody textarea { width: 100%; }
.tkreply { padding-top: 6px; }
.tkreply textarea { min-height: 100px; }


/* web-demo: the frame the AI saw (plan preview) */
.wdshot { max-width: 100%; max-height: 240px; border-radius: var(--r-3);
  border: 1px solid var(--line2); margin: 4px 0 10px; display: block; }

/* ============================ Analytics tab ============================ */
.pagelede { color: var(--muted); max-width: 900px; line-height: 1.55; margin: -4px 0 18px; }
.pagelede b { color: var(--text); }
/* Growth Tools: header-only Flo band + a visible per-tool "what it does + why it grows you" line */
.gflowpanel .phead { border-bottom: 0; margin-bottom: 0; }
.growthwhy { margin: 0; padding: 4px 16px 14px; font-size: var(--fs-3); color: var(--muted); line-height: 1.5; max-width: 940px; }
/* Content Coach (SPEC_CONTENT_COACH.md) - Flo's creative analysis on Growth Tools */
.coachhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.coachcompers { margin-bottom: 12px; }
.coachcomphead { font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.coachcomplist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.coachcomp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 10px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); font-size: var(--fs-3); }
.coachaddrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coachaddrow select, .coachaddrow input { height: 38px; padding: 0 10px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); color: var(--text); font: 500 16px var(--font-body); }
.coachaddrow input { flex: 1; min-width: 140px; }
.coachrep { display: grid; gap: 10px; }
.coachrephead { font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.provchip { font-size: var(--fs-1); padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  color: var(--muted); background: var(--card2); cursor: help; }
.coachpost { display: grid; grid-template-columns: auto auto auto 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line2); font-size: var(--fs-4); }
.coachrank { color: var(--muted); }
.coachx { color: var(--amber-deep, var(--amber)); font-weight: 700; }
.coachhook { text-transform: capitalize; color: var(--text); font-weight: 600; }
.coachwhy { color: var(--muted); line-height: 1.4; min-width: 160px; }
.coachnums { color: var(--muted); white-space: nowrap; }
.coachlink { color: var(--amber-deep, var(--amber)); text-decoration: none; }
.coachpat, .coachrecs { border-top: 1px solid var(--line2); padding-top: 10px; }
.coachpat b, .coachrecs b { display: block; font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.coachpat ul { margin: 0; padding-left: 18px; color: var(--text); font-size: var(--fs-4); line-height: 1.6; }
.coachrec { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 6px 0; font-size: var(--fs-4); }
.coachrec > span { flex: 1; min-width: 200px; }
.coachnote { font-size: var(--fs-3); margin-top: 6px; line-height: 1.5; }
.linklike { background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 .78rem var(--font-body); text-decoration: underline; padding: 0; }
@media (max-width: 560px) {
  .coachpost { grid-template-columns: auto auto 1fr; }
  .coachpost .coachwhy, .coachpost .coachnums { grid-column: 1 / -1; }
  .coachpost .coachacts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ==== Content Coach extensions: Script Writer + Viral Radar (Discover) ==== */
/* the trailing actions cluster on each winner row (open/view + Turn into a script) */
.coachacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.btn.small.coachscript, .btn.small.discexplain, .btn.small.discscript { display: inline-flex; align-items: center; gap: 5px; }
.coachscript .bic svg, .discacts .btn .bic svg, .scacts .btn .bic svg { width: 15px; height: 15px; }

/* Script preview (rendered inside the shared .wasubmodal body) */
.scmeta { font-size: var(--fs-2); letter-spacing: .03em; margin: 2px 0 12px; }
.scmeta .scplat { text-transform: capitalize; color: var(--amber-deep, var(--amber)); font-weight: 700; }
.sclab { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }
.scin { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); color: var(--text); font: 500 16px var(--font-body); line-height: 1.4; }
textarea.scin { resize: vertical; min-height: 40px; }
.scin:focus { outline: none; border-color: var(--amber); }
.scvary { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.scvbtn { display: inline-flex; padding: 2px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.scvbtn .bic svg { width: 16px; height: 16px; }
.scvn { font-size: var(--fs-2); color: var(--dim); }
.scbeats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; touch-action: pan-y; }
.scbeat { border: 1px solid var(--line2); border-radius: var(--r-3); padding: 10px 12px; background: var(--card2); }
.scbtop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.scbn { font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.scbsecwrap { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.scbsec { width: 66px; text-align: right; }
.scblab { display: block; font-size: var(--fs-1); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin: 7px 0 3px; }
.scprov { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-3); line-height: 1.5; margin: 12px 0 4px; color: var(--dim); }
.scprov .bic svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.scacts { margin-top: 14px; }

/* Discover (Viral Radar) - the niche-sweep section inside Content Coach */
.coachdiscover { margin-top: 18px; }
.coachdivider { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); letter-spacing: .04em;
  color: var(--muted); padding-top: 14px; margin-bottom: 12px; border-top: 1px solid var(--line2); }
.coachdivider .bic svg { width: 16px; height: 16px; }
.discform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.discsel, .discin { height: 42px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-3);
  background: var(--card2); color: var(--text); font: 500 16px var(--font-body); }
.discin { flex: 1 1 220px; min-width: 0; }
.discseeds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.discseedlab { font-size: var(--fs-3); }
.discchip { padding: 4px 10px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--card2);
  color: var(--text); font-size: var(--fs-3); cursor: pointer; }
.discchip:hover { border-color: var(--amber); }
.discout { margin-top: 12px; touch-action: pan-y; }
.discconfirm { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.disccost { color: var(--amber-deep, var(--amber)); font-weight: 700; }
.dischint { flex: 1 1 100%; font-size: var(--fs-3); line-height: 1.4; }
.disccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.disccard { border: 1px solid var(--line2); border-radius: var(--r-4); overflow: hidden; background: var(--card2);
  display: flex; flex-direction: column; }
.disccover { position: relative; aspect-ratio: 4 / 5; background: var(--line2); overflow: hidden; }
.disccover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disccover.noimg::after { content: "no preview"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-2); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.discplay { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: var(--r-pill);
  background: rgba(7, 11, 20, .55); display: flex; align-items: center; justify-content: center; color: #fff; }
.discplay .bic svg { width: 15px; height: 15px; }
.discbody { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; }
.dischead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.dischandle { font-weight: 600; color: var(--text); font-size: var(--fs-4); word-break: break-word; }
.discx { color: var(--amber-deep, var(--amber)); font-weight: 700; font-size: var(--fs-4); }
.discvs { font-size: var(--fs-1); }
.discfoll { font-size: var(--fs-3); display: flex; align-items: center; gap: 6px; }
.disccap { font-size: var(--fs-3); color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.discnums { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-2); color: var(--muted); }
.discnum { display: inline-flex; align-items: center; gap: 4px; }
.pubchip { font-size: var(--fs-1); padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  color: var(--dim); background: var(--card); letter-spacing: .03em; text-transform: uppercase; }
.discacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.discexpl { margin-top: 4px; padding: 8px 10px; border-radius: var(--r-3); background: var(--card); border: 1px solid var(--line2);
  font-size: var(--fs-3); line-height: 1.5; display: grid; gap: 4px; }
.discexpl b { color: var(--text); }
@media (max-width: 480px) {
  .discform { flex-direction: column; align-items: stretch; }
  .discsel, .discin, .discform > .btn { width: 100%; }
  .disccards { grid-template-columns: 1fr 1fr; }
  .discacts .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 375px) {
  .disccards { grid-template-columns: 1fr; }
}

.antoolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.anfilter { height: 42px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r-3);
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-4); }
.anfilter:focus { outline: none; border-color: var(--amber); }
.angrow { flex: 1 1 220px; min-width: 180px; }
.btn.ghost { background: transparent; }
.anmeta { color: var(--dim); margin: 0 0 14px; font-size: var(--fs-3); }
.anlabel { color: var(--muted); font-size: var(--fs-3); letter-spacing: .04em; margin: 18px 0 10px; }
.anmuted { color: var(--dim); font-weight: 400; }
.anengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.engtile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 16px 16px 14px; box-shadow: var(--shadow); }
.engtile b { display: block; font-family: var(--font-display); font-size: var(--fs-8); line-height: 1;
  color: var(--text); margin-bottom: 7px; }
.engtile span { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .05em; color: var(--muted);
  display: flex; align-items: center; gap: 3px; }
.kcard b.bad { color: var(--red); }
/* top performing post banner */
.antop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 6px;
  padding: 16px 20px; border-radius: var(--r-5); border: 1px solid var(--amber);
  background: var(--card); }
.antop-badge { font-family: var(--font-mono); font-size: var(--fs-3); font-weight: 600; color: var(--amber-deep);
  white-space: nowrap; }
.antop b { font-family: var(--font-display); font-size: var(--fs-5); color: var(--text); flex: 1 1 260px; }
.antop-meta { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; }
/* network badges */
.annet { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
  border-radius: var(--r-2); color: #fff; flex: none; }
.annet svg { width: .875rem; height: .875rem; display: block; }
.annet.tiktok { background: #111; } .annet.instagram { background: #d6336c; }
.annet.facebook { background: #1877f2; } .annet.twitter { background: #111; }
.annet.linkedin { background: #0a66c2; } .annet.youtube { background: #e23b2e; }
.annet.pinterest { background: #e60023; } .annet.gmb { background: #1a73e8; }
.annet.clik:hover, .annet.clik:focus-visible { filter: brightness(1.15); outline-offset: 2px; }
/* post list */
.anlist { display: flex; flex-direction: column; }
.anpager { display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--line); }
.anpager:empty { display: none; }
.anpager .anmuted { font-size: var(--fs-3); letter-spacing: .04em; }
.anpager button[disabled] { opacity: .4; cursor: default; }
.anrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 13px 16px;
  border-top: 1px solid var(--line); }
.anrow:first-child { border-top: 0; }
.anrow-main { flex: 1 1 300px; min-width: 0; }
.anrow-main b { display: block; color: var(--text); font-size: var(--fs-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.anrow-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px;
  font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted); }
.anrow-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.anchip { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.anchip b { font-weight: 700; color: var(--text); }
/* saves + shares: the value signals, given a quiet amber emphasis over likes */
.anchip.val { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.anchip.val b { color: var(--amber-deep); }
.anchip-warn { color: var(--red); border-color: rgba(214, 69, 69, .35); background: var(--red-soft); }
/* "x0.4 your usual" - quiet, dashed: a fact, not an alarm */
.anchip.low { color: var(--muted); border-style: dashed; }
.anrow-open .bic, .kpidelta .bic, .cxdelta .bic { width: .9em; height: .9em; margin-right: 3px; vertical-align: -.1em; }
.andelta-ic { display: inline-flex; }
.antop-sub .anchip { font-size: var(--fs-1); padding: 1px 7px; }
.antop-sub .anchip, .anrow-metrics .anchip { white-space: nowrap; }
.antoprow .mltbtn { flex: none; }
/* WHO FOLLOWS YOU - audience demographics (age/gender/location per network) */
.demoseg span { cursor: pointer; }
.demhead { padding: 2px 2px 12px; font-size: var(--fs-5); }
.demgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .demgrid { grid-template-columns: 1fr; } }
.demblk .demlbl { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 11px; }
.demrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.demrow .demk { width: 96px; font-size: var(--fs-3); color: var(--muted); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demrow .demtrack { flex: 1; height: 12px; background: var(--card2); border-radius: var(--r-1); overflow: hidden; }
.demrow .demfill { height: 100%; border-radius: var(--r-1); background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright)); }
.demrow .demv { width: 42px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.demdonutwrap { display: flex; align-items: center; gap: 14px; }
.demdonut { width: 90px; height: 90px; flex: none; }
.demlegend { font-size: var(--fs-2); line-height: 1.95; }
.demdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* WHEN YOUR AUDIENCE ENGAGES heatmap (7 x 24, own posts) */
.heatwrap { display: block; }
.heatgrid { display: block; max-width: 44rem; }
.heatgrid .hrow { display: grid; grid-template-columns: 2.4rem repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heatgrid .hrow + .hrow { margin-top: 3px; }
.heatgrid .hday { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.heatgrid .hhr { grid-column: span 3; font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim); }
.heatgrid .hcell { display: block; min-width: 0; aspect-ratio: 1; border-radius: var(--r-1); }
.heatgrid .hcell:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.heatcap { margin-top: 11px; font-size: var(--fs-3); color: var(--muted); letter-spacing: .03em; }
/* REACH OVER TIME - inline SVG area chart (house idiom, extends cxSpark) */
.antsvg { width: 100%; height: auto; display: block; }
.antgrid { stroke: var(--line); stroke-width: 1; }
.antarea { fill: var(--amber-soft); }
.antline { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.antline-prior { fill: none; stroke: var(--line2); stroke-width: 2; stroke-linejoin: round; }
.antmark { fill: var(--card); stroke: var(--amber); stroke-width: 2; }
.antdot { fill: var(--amber); }
.antlab { font-family: var(--font-mono); font-size: var(--fs-1); fill: var(--dim); }
.antlabs { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim); }
.trendleg[hidden] { display: none; }
/* trend + scoreboard two-column band */
.antwocol { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
@media (max-width: 760px) { .antwocol { grid-template-columns: 1fr; } }
.trendleg i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
.trendleg .legthis { background: var(--amber); } .trendleg .leglast { background: var(--line2); }
.scrow { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.scrow .scname { width: 74px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: none; }
.scrow .sctrack { flex: 1; height: 16px; background: var(--card2); border-radius: var(--r-2); overflow: hidden; }
.scrow .scfill { display: block; height: 100%; border-radius: var(--r-2); background: linear-gradient(90deg, var(--amber), var(--amber-bright)); }
.scrow .scval { width: 54px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.scrow .scdelta { width: 44px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-1); flex: none; }
.scrow .scdelta.up { color: var(--green); } .scrow .scdelta.dn { color: var(--red); }
.scrow[role="button"] { cursor: pointer; border-radius: var(--r-2); }
.scrow[role="button"]:hover .scname, .scrow[role="button"]:focus-visible .scname { color: var(--amber-deep); }
.scrow[role="button"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* KPI tiles that drill to their detail */
.kpi.kpiclik { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpi.kpiclik:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi.kpiclik:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kpi { position: relative; }
.kpi .kspark { position: absolute; right: 12px; bottom: 12px; opacity: .85; width: 2.9rem; height: 1.15rem; }
.kpibench { display: block; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); margin-top: 4px; cursor: help; }
/* "none yet" / "needs 3 more posts" - a small honest placeholder, never a dash that reads as broken */
.kpinum.ksm, .kcard b.ksm { font-size: var(--fs-4); line-height: 1.3; font-weight: 600; color: var(--muted); padding-top: .35em; }
/* clickable numbers in the verdict sentence drill to their source */
.anvnum { color: var(--amber-deep); font-weight: 700; cursor: pointer; border-radius: 2px; }
.anvnum:hover { text-decoration: underline; }
.anvnum:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.engtile.klink:focus-visible, .kcard.klink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ancard-stats [data-anjump] { cursor: pointer; }
.ancard-stats [data-anjump]:hover b { color: var(--amber-deep); }
/* CONSISTENCY tiles + read line */
.anconsist { margin: 0 0 16px; }
.anconsist .anconsist-h { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.anconsist .cards { margin-bottom: 10px; }
.anconsist-read { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: var(--fs-4); color: var(--muted); }
/* "Plan my week" - white action button with a calendar glyph (house white-btn idiom, like
   .fu-cta / .ovactbtn): amber-deep icon, 7px icon-to-label gap; centred so it reads right
   when it goes full-width on mobile. */
.anplanbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.anplanbtn .anplan-ic { display: inline-flex; color: var(--amber-deep); margin: 0; }
.anplanbtn .anplan-ic svg { width: 15px; height: 15px; display: block; }
/* weak-signal caption on a bar group title */
.insh .insweak { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: var(--fs-2); }
/* WHICH FORMAT WINS WHERE - the format x network matrix scrolls inside its own box */
/* Analytics "which format wins where" matrix. Named in the an- namespace (its
   siblings are .annet/.anmuted) so it can NEVER share a selector with the post
   editor's .fmtnet label (ui.css ~L7506) - that collision made the editor's ALT
   TEXT label 100% wide and grew a sideways scrollbar. */
.anfmtwrap { overflow-x: auto; }
.anfmt { width: 100%; border-collapse: collapse; }
.anfmt th, .anfmt td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.anfmt thead th { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.anfmt .anfmt-f { text-align: left; font-size: var(--fs-3); color: var(--text); white-space: nowrap; font-weight: 600; }
.anfmt .anfmt-c { font-family: var(--font-mono); font-size: var(--fs-4); color: var(--text); font-variant-numeric: tabular-nums; }
.anfmt .anfmt-c [data-anjump] { cursor: pointer; }
.anfmt .anfmt-c [data-anjump]:hover { color: var(--amber-deep); }
.anfmt thead .annet { margin: 0 auto; }
/* TRAFFIC */
.antraffic-cta { margin-top: 12px; }
/* HOW THIS POST GREW - the per-sync curve (post detail + the hover card) */
.pfgrowth { margin: 4px 0 12px; }
.pfgrowth.compact { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.pfgrowth-h { font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin-bottom: 4px; }
.pfgrowth-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; font-size: var(--fs-4); }
.pfgrowth-top b { color: var(--text); }
.pfgrowth-svg { width: 100%; height: 3.5rem; display: block; }
.pfgrowth.compact .pfgrowth-svg { height: 2.4rem; }
.pfgrowth-labs { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim); margin-top: 3px; }
.pfgrowth-note { font-size: var(--fs-3); margin: 2px 0 10px; }
.demnone { font-size: var(--fs-4); }
/* Flo leads the What's-working panel with her top next-steps */
.floverdict { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r-3); padding: 13px 16px; margin-bottom: 16px; }
.floverdict .flov-h { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 7px; }
.floverdict .flov-rec { font-size: var(--fs-5); color: var(--text); margin: 5px 0; line-height: 1.5; }
.floverdict .flopostlink { color: var(--amber-deep); cursor: pointer; font-weight: 600; }
/* Flo's read - prominent banner leading the Analytics tab */
/* Flo's live recommendation cards inside the Analytics read band. Spacing is matched
   to the "Top posts" list (.inslist/.insrow) directly below so the two card stacks
   read as one system: 6px row gap, 8px/10px card padding, 12px column gap, 8px top
   margin. Scoped to .anflorecs + #tab-analytics so the shared Flo band (Overview,
   upgrade modal, kbmiss) keeps its own rhythm. */
.floban-body .anflorecs { margin-top: 0; gap: 4px; }
.floban-body .anflorecs .florow { background: var(--card); padding: 8px 10px; }
.floban-body .anflorecs .floact .sm-act { padding: 6px 12px; }
/* Below the lede: the read (cards) on the left, Flo's "posting window" utility on the
   right, filling what would otherwise be dead space on a wide screen. */
.floban-split { display: flex; gap: 14px; align-items: stretch; margin-top: 9px; }
.floban-split .anflorecs { flex: 1 1 auto; min-width: 0; }
.floban-util { flex: 0 0 288px; display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; }
.fu-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); }
.fu-head svg { width: 14px; height: 14px; flex: none; }
.fu-hero { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.fu-hero b { font-family: var(--font-display); font-size: var(--fs-7); color: var(--text); }
.fu-hero span { font-size: var(--fs-5); color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-count { display: flex; align-items: center; gap: 7px; font-size: var(--fs-4); color: var(--text); flex-wrap: wrap; }
.fu-count b { font-variant-numeric: tabular-nums; }
.fu-count em { color: var(--muted); font-style: normal; font-size: var(--fs-3); }
.fu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none;
  animation: fuPulse 2.6s ease-out infinite; }
@keyframes fuPulse { 0% { box-shadow: 0 0 0 0 rgba(224,137,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(224,137,0,0); } 100% { box-shadow: 0 0 0 0 rgba(224,137,0,0); } }
@media (prefers-reduced-motion: reduce) { .fu-dot { animation: none; } }
.fu-strip { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin: 3px 0 16px; }
.fu-bar { flex: 1; min-height: 3px; border-radius: var(--r-1) var(--r-1) 0 0; background: var(--line2); position: relative; }
.fu-bar.best { background: linear-gradient(180deg, var(--amber-bright), #f29718); }
.fu-bar > i { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: var(--fs-1);
  font-style: normal; letter-spacing: .04em; color: var(--muted); }
.fu-bar.best > i { color: var(--amber-deep); font-weight: 700; }
.fu-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; }
/* the house glyph on the white "Draft a post" button wears the amber-deep accent, matching
   the other white action buttons (.ovactbtn:not(.amber) .ovact-ic) */
.fu-cta .fu-cta-ic { color: var(--amber-deep); display: inline-flex; margin: 0; }
.fu-cta .fu-cta-ic svg { width: 15px; height: 15px; display: block; }
.fu-empty { font-size: var(--fs-4); line-height: 1.45; color: var(--muted); }
@media (max-width: 900px) {
  .floban-split { flex-direction: column; }
  .floban-util { flex-basis: auto; }
}
/* Readability: cap the reading measure to ~62 characters per line (Bringhurst /
   Baymard 50-75, ~66 optimal; WCAG max 80). The card text was running ~110 CPL on a
   wide screen; the action button stays right, so the buttons form one aligned column
   down the read. */
.floban-body .anflorecs .flotext { max-width: 62ch; }
.florecs-empty { margin: 11px 0 0; font-size: var(--fs-5); line-height: 1.5; color: var(--text); }
.upmodal .floban { margin-bottom: 16px; }  /* stage-panel lede: tighter than the page inset */
.floban { display: flex; align-items: flex-start; gap: 13px; margin-bottom: calc(var(--content-inset-top, 30px) * 0.75); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r-4); padding: 16px 18px; box-shadow: var(--shadow); }
.floban-who { font-size: var(--fs-1); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 6px; }
.floban-body p { font-size: var(--fs-5); line-height: 1.55; color: var(--text); margin: 0; max-width: none; }
/* dismissible brand "why this page matters" band: a ghost close button + the body takes
   the freed width; a "Why this page matters" link brings it back. */
.floban[data-flonote] .floban-body { flex: 1 1 auto; min-width: 0; }
.floban-x { flex: none; align-self: flex-start; margin: -4px -6px 0 4px; padding: 6px; line-height: 0;
  background: none; border: 0; color: var(--dim); cursor: pointer; border-radius: var(--r-2); }
.floban-x:hover { color: var(--amber-deep); background: var(--amber-soft); }
.floban-x svg { width: 16px; height: 16px; display: block; }
.floban-reopen { display: inline-block; margin: -4px 0 14px; font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; }
/* brand-profile footer: primary Save-all on the left + quick links to put the brand to
   work on the right (wraps under on mobile). */
.brandnext { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.brandnext-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.brandnext-lbl { color: var(--muted); font-size: var(--fs-1); letter-spacing: .08em;
  text-transform: uppercase; margin-right: 2px; }
@media (max-width: 760px) { .brandnext-links { margin-left: 0; width: 100%; } }
/* Analytics "your read" band: tighter frame + lede than the shared band base, so the
   whole read sits in less vertical space (Peter: too much spacing). Scoped by
   #tab-analytics id so the modal/kbmiss reuses of .floban keep their own rhythm. */
#tab-analytics .floban { gap: 12px; padding: 13px 16px; margin-bottom: calc(var(--content-inset-top, 30px) * 0.5); }
#tab-analytics .floban-who { margin-bottom: 4px; }
/* body fills the band so the lede runs the full width (one line on desktop); the
   read + the utility split the space below it. */
#tab-analytics .floban-body { flex: 1 1 auto; min-width: 0; }
#tab-analytics .floban-body p { font-size: var(--fs-5); line-height: 1.45; }
/* Flo tools: the five on-demand assistant tools under the read */
.flotools { margin-bottom: calc(var(--content-inset-top, 30px) * 0.5); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: var(--r-3); background: var(--card); padding: 12px 14px; box-shadow: var(--shadow); }
.ft-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); margin-bottom: 10px; }
.ft-head .flomark { width: 20px; height: 20px; flex: none; }
.ft-sub { color: var(--muted); letter-spacing: .03em; text-transform: none; font-size: var(--fs-2); }
.ft-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ft-tab { border: 1px solid var(--line2); background: var(--bg); color: var(--text); border-radius: var(--r-pill);
  padding: 6px 13px; font-size: var(--fs-3); cursor: pointer; white-space: nowrap; }
.ft-tab:hover { border-color: var(--amber); }
.ft-tab.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); font-weight: 600; }
.ft-body { min-height: 44px; }
.ft-form { display: flex; gap: 8px; align-items: stretch; }
.ft-form.col { flex-direction: column; }
.ft-in { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); border-radius: var(--r-3); padding: 9px 12px;
  font: inherit; font-size: var(--fs-4); background: var(--bg); color: var(--text); resize: vertical; }
.ft-in:focus { outline: none; border-color: var(--amber); box-shadow: var(--focus-ring); }
.ft-out { margin-top: 10px; }
.ft-hint { color: var(--muted); font-size: var(--fs-4); }
.ft-err { color: #c0392b; font-size: var(--fs-4); }
.ft-answer { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-5); line-height: 1.5; color: var(--text);
  background: var(--amber-soft); border-radius: var(--r-3); padding: 11px 13px; }
.ft-answer .ft-aic { width: 18px; height: 18px; flex: none; color: var(--amber-deep); margin-top: 1px; }
.ft-plan { display: flex; flex-direction: column; gap: 4px; }
.ft-planrow { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-3); }
.ft-pday { color: var(--amber-deep); font-size: var(--fs-3); white-space: nowrap; }
.ft-pmain { font-size: var(--fs-4); color: var(--text); min-width: 0; }
.ft-pwhy { font-size: var(--fs-3); color: var(--muted); text-align: right; }
.ft-cta { margin-top: 8px; }
.ft-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ft-lines li { font-size: var(--fs-4); line-height: 1.45; color: var(--text); }
.ft-score { display: flex; align-items: baseline; gap: 6px; }
.ft-score b { font-family: var(--font-display); font-size: var(--fs-7); color: var(--amber-deep); }
.ft-score span { color: var(--muted); font-size: var(--fs-4); }
.ft-why { color: var(--muted); font-size: var(--fs-4); margin: 3px 0 0; }
.ft-rewrite, .ft-bio { border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; margin-top: 8px; }
.ft-rlbl { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 5px; display: flex; gap: 6px; }
.ft-rlbl span { color: var(--muted); }
.ft-rtxt { font-size: var(--fs-4); line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.ft-copy { margin-top: 8px; }
@media (max-width: 640px) {
  .ft-planrow { grid-template-columns: 1fr auto; }
  .ft-pwhy { grid-column: 1 / -1; text-align: left; }
}
/* flo_persona OFF: hide the typed Flo header strips for this brand */
.flo-persona-off .flohead { display: none; }
/* Shoot List cards (Ideas bank): Flo's ready-to-film video ideas */
.flomark.sm { width: 18px; height: 18px; }
.shootgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.shootcard { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px; }
.sc-hook { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); line-height: 1.25; color: var(--text); }
.sc-block { font-size: var(--fs-4); line-height: 1.4; }
.sc-lbl { display: block; font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 2px; }
.sc-val { color: var(--text); white-space: pre-wrap; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* Shoot List steer row: topic input + rotation-topic chips + format + length. Wraps on
   narrow screens (never scrolls sideways); chips reuse the house .filterchips look. */
.shootsteer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.shootsteer .steer-lbl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase; flex: none; }
.shootsteer .steer-in { flex: 1 1 220px; min-width: 0; padding: 7px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-3); font-family: inherit; }
.shootsteer .filterchips { margin-right: 0; flex-wrap: wrap; }
.shootsteer .steer-grp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* card extras: why-this-now badge, format + runtime meta, the storyboard list, refine row */
.sc-angle { display: inline-block; align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .06em; color: var(--amber-deep); background: var(--amber-soft); border-radius: var(--r-pill);
  padding: 2px 9px; }
.sc-meta { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; }
.sc-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-board li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: var(--fs-4); line-height: 1.4; }
.sc-board .sc-n { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--amber-deep);
  padding-top: 3px; letter-spacing: .05em; }
.sc-board .sc-cam { color: var(--muted); }
.sc-board .sc-os { display: block; color: var(--dim); font-style: italic; }
.sc-refine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.sc-refine .sc-rl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  color: var(--muted); margin-right: 2px; }
.sc-refine .btn { padding: 4px 9px; font-size: var(--fs-2); }
/* Flo header: whole-line reveal (fade, not char-by-char) + inline feature links */
@keyframes floReveal { from { opacity: 0; } to { opacity: 1; } }
.flo-reveal { animation: floReveal .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .flo-reveal { animation: none; } }
.flolink { border: 0; background: none; padding: 0; font: inherit; color: var(--amber-deep);
  font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; }
.flolink:hover { text-decoration-color: var(--amber); }
/* "See what Flo can do for your brand" - show/hide reference on the Overview */
.flocando { border-top: 1px solid var(--line); }
/* Disclosure header: a full-width button. It carries the soft-amber highlight at REST
   (not only on hover) so the "see what Flo can do" reference always stands out as the
   Flo discovery entry point. The caret sits in an amber chip so it reads as a tappable
   control, and on hover/focus the chip fills amber and the caret nudges the way it will
   open - down when closed, up when open - which is the hover affordance now that the row
   itself is always tinted. */
.flocando-toggle { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--amber-soft); border: 0; cursor: pointer; padding: 11px 16px; font: inherit; font-size: var(--fs-4);
  font-weight: 600; color: var(--amber-deep); text-align: left; transition: background .16s ease; }
.flocando-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.flocando-chevwrap { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber-deep);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .18s ease; }
.flocando-chev { width: 15px; height: 15px; display: block; transition: transform .2s ease; }
.flocando-toggle.open .flocando-chev { transform: rotate(180deg); }
.flocando-toggle:hover .flocando-chevwrap, .flocando-toggle:focus-visible .flocando-chevwrap {
  background: var(--amber); border-color: var(--amber); color: var(--navy); transform: translateY(2px); }
.flocando-toggle.open:hover .flocando-chevwrap, .flocando-toggle.open:focus-visible .flocando-chevwrap {
  transform: translateY(-2px); }
/* "AI magic" attention treatment. Research (IxDF signifiers; web.dev/WCAG motion): a
   hidden affordance needs an unmissable but SELF-LIMITING signifier. JS adds
   .flocando-magic to .flocando on the first 3 signed-in page loads and removes it the
   moment the reference is opened (localStorage gf-flocando-loads / -seen). While on:
   the words shimmer gold, two sparkles twinkle around them, the row glows and a
   bouncing arrow points at the caret chip - impossible to miss - then it stops for
   good. Reduced-motion users get a STATIC highlight (lit row, gold words, still
   arrow), no movement. */
.flocando { position: relative; }
.flocando-point { display: none; }
.flocando.flocando-magic .flocando-toggle { animation: fcdGlow 2.2s ease-in-out infinite; }
.flocando.flocando-magic .flocando-label {
  position: relative;
  background: linear-gradient(100deg, var(--amber-deep) 18%, #ffd884 40%, var(--amber-deep) 62%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fcdShimmer 2.6s linear infinite; }
.flocando.flocando-magic .flocando-label::before,
.flocando.flocando-magic .flocando-label::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffe6a8, var(--amber) 55%, transparent 72%);
  box-shadow: 0 0 6px 1px rgba(224, 137, 0, .65); pointer-events: none;
  animation: fcdSparkle 1.7s ease-in-out infinite; }
.flocando.flocando-magic .flocando-label::before { left: -13px; top: 0; animation-delay: .1s; }
.flocando.flocando-magic .flocando-label::after { right: -13px; bottom: 1px; animation-delay: .85s; }
.flocando.flocando-magic .flocando-point {
  display: block; position: absolute; right: 50px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; color: var(--amber-deep);
  animation: fcdArrowBounce 1s ease-in-out infinite; }
.flocando.flocando-magic .flocando-point svg { width: 100%; height: 100%; display: block; }
.flocando.flocando-magic .flocando-chevwrap {
  background: var(--amber); border-color: var(--amber); color: var(--navy);
  animation: fcdHintRing 1.4s ease-out infinite; }
@keyframes fcdGlow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(224, 137, 0, 0); background-color: transparent; }
  50% { box-shadow: inset 0 0 0 2px rgba(224, 137, 0, .3); background-color: var(--amber-soft); } }
@keyframes fcdShimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes fcdSparkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50% { opacity: 1; transform: scale(1.15); } }
@keyframes fcdArrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); } }
@keyframes fcdHintRing {
  0% { box-shadow: 0 0 0 0 rgba(224, 137, 0, .5); }
  60% { box-shadow: 0 0 0 8px rgba(224, 137, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 137, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .flocando-chevwrap, .flocando-chev { transition: background .16s ease, border-color .16s ease, color .16s ease; }
  .flocando-toggle:hover .flocando-chevwrap, .flocando-toggle:focus-visible .flocando-chevwrap,
  .flocando-toggle.open:hover .flocando-chevwrap, .flocando-toggle.open:focus-visible .flocando-chevwrap { transform: none; }
  /* no motion - static emphasis: lit row, gold words, filled chip, a still arrow */
  .flocando.flocando-magic .flocando-toggle,
  .flocando.flocando-magic .flocando-label,
  .flocando.flocando-magic .flocando-point,
  .flocando.flocando-magic .flocando-label::before,
  .flocando.flocando-magic .flocando-label::after,
  .flocando.flocando-magic .flocando-chevwrap { animation: none; }
  .flocando.flocando-magic .flocando-toggle { background: var(--amber-soft); }
  .flocando.flocando-magic .flocando-label { -webkit-text-fill-color: var(--amber-deep); color: var(--amber-deep); }
  .flocando.flocando-magic .flocando-label::before, .flocando.flocando-magic .flocando-label::after { opacity: 1; }
  .flocando.flocando-magic .flocando-point { display: block; }
  .flocando.flocando-magic .flocando-chevwrap { background: var(--amber); border-color: var(--amber); color: var(--navy); }
}
.flocando-body { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 6px; }

/* "Meet Flo" intro: a pill in the Flo panel header that opens a 30s video modal */
.flointro { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 6px;
  border: 1px solid var(--line2); background: var(--amber-soft); color: var(--text);
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease; }
.flointro:hover { border-color: var(--amber); }
.flointro:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.flointro-ic { display: inline-flex; color: var(--amber-deep); }
.flointro-ic svg { width: 13px; height: 13px; display: block; }
.npmodal.flointro-modal { width: min(400px, 92vw); }
.flointro-head .flomark { width: 26px; height: 26px; flex: none; }
.flointro-head .flomark svg { width: 100%; height: 100%; }
.flointro-title { letter-spacing: .06em; }
.npmodal .flointro-body { padding: 16px; }
.flointro-vidwrap { border-radius: var(--r-4); overflow: hidden; background: #000; aspect-ratio: 1 / 1; max-height: 58vh; }
.flointro-vid { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.flointro-cap { margin: 12px 4px 0; font-size: .86rem; line-height: 1.5; color: var(--muted); text-align: center; }
.flointro-cap b { color: var(--text); }
@media (max-width: 560px) { .flointro-tx { display: none; } .flointro { padding: 6px 8px; margin-right: 4px; } }
.fcd-row { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.fcd-txt { min-width: 0; }
.fcd-txt b { display: block; font-size: var(--fs-4); color: var(--text); }
.fcd-txt span { font-size: var(--fs-3); color: var(--muted); }
/* The destination pill reads as clickable at rest (amber ring + soft fill), then
   lifts, fills and throws a single clean "sparkle" glint on hover/focus. */
.fcd-link { position: relative; overflow: hidden; border: 1px solid var(--amber); background: var(--amber-soft);
  color: var(--amber-deep); border-radius: var(--r-pill); padding: 6px 13px; font-size: var(--fs-3); font-weight: 600;
  cursor: pointer; white-space: nowrap; flex: none;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.fcd-link .fcd-lbl, .fcd-link .fcd-arrow { position: relative; z-index: 1; }
.fcd-link .fcd-arrow { display: inline-block; margin-left: 5px; transition: transform .18s ease; }
.fcd-link:hover, .fcd-link:focus-visible { background: var(--amber); color: var(--navy); border-color: var(--amber);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224, 137, 0, .28); }
.fcd-link:hover .fcd-arrow, .fcd-link:focus-visible .fcd-arrow { transform: translateX(3px); }
.fcd-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fcd-link::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.fcd-link:hover::after, .fcd-link:focus-visible::after { animation: fcdShine .6s ease forwards; }
@keyframes fcdShine { 0% { left: -75%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.fcd-foot { font-size: var(--fs-4); color: var(--muted); margin-top: 4px; line-height: 1.5; }
.fcd-inlink { border: 0; background: none; padding: 0; font: inherit; color: var(--amber-deep); font-weight: 600;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px; }
.fcd-inlink:hover, .fcd-inlink:focus-visible { text-decoration-color: var(--amber); }
@media (max-width: 640px) {
  .fcd-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fcd-link { align-self: flex-start; }
}
/* Reduced motion: keep the instant colour/fill affordance, drop the movement + glint. */
@media (prefers-reduced-motion: reduce) {
  .fcd-link, .fcd-link .fcd-arrow { transition: none; }
  .fcd-link:hover, .fcd-link:focus-visible { transform: none; }
  .fcd-link:hover .fcd-arrow, .fcd-link:focus-visible .fcd-arrow { transform: none; }
  .fcd-link:hover::after, .fcd-link:focus-visible::after { animation: none; }
}
/* Ideas bank: idea search + Manage-topics panel */
.bank-search { border: 1px solid var(--line2); border-radius: var(--r-3); padding: 6px 11px; font: inherit;
  font-size: var(--fs-4); background: var(--bg); color: var(--text); width: 180px; max-width: 42vw; }
.bank-search:focus { outline: none; border-color: var(--amber); box-shadow: var(--focus-ring); }
.topchips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; margin-bottom: 12px; }
.topchip { display: inline-flex; align-items: center; gap: 4px; background: var(--amber-soft);
  color: var(--amber-deep); border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 5px 6px 5px 12px;
  font-size: var(--fs-4); font-weight: 600; }
.topchip button { border: 0; background: none; color: var(--amber-deep); cursor: pointer; font-size: var(--fs-4);
  line-height: 1; padding: 2px 5px; border-radius: 50%; opacity: .7; }
.topchip button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.topadd { display: flex; gap: 8px; }
.topadd input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); border-radius: var(--r-3);
  padding: 8px 11px; font: inherit; font-size: var(--fs-4); background: var(--bg); color: var(--text); }
.topadd input:focus { outline: none; border-color: var(--amber); box-shadow: var(--focus-ring); }
/* Manage-topics: section labels, the "also in your bank" rows, footer + reset link */
.topsec-lbl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--muted);
  margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; }
.topsec-lbl:first-child { margin-top: 4px; }
.topextras { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; }
.topextra { border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; background: var(--card2); }
.topextra-h { display: flex; align-items: center; gap: 8px; }
.topextra-h b { font-size: var(--fs-4); color: var(--text); }
.topextra-n { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.topextra-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.topfoot { justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; flex-wrap: wrap; }
.topfoot-r { display: flex; gap: 8px; }
.linkdanger { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: var(--fs-3); font-weight: 600;
  color: var(--red); cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.linkdanger:hover, .linkdanger:focus-visible { text-decoration-color: var(--red); }
@media (max-width: 640px) { .bank-search { width: 100%; max-width: none; } }
/* Saved Shoot List idea: its shots + script show as a film brief on the card */
.bkc-brief { margin: 2px 0 4px; padding: 8px 10px; border-radius: var(--r-3); background: var(--amber-soft);
  font-size: var(--fs-3); line-height: 1.4; color: var(--text); white-space: pre-wrap; }
.bkc-brief .mono { display: block; font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); margin-bottom: 4px; }
/* idea performance + freshness line (posted count, recency, engagement, season) */
.bkc-meta { margin: 4px 0 0; font-size: var(--fs-1); letter-spacing: .06em; color: var(--dim); }
/* multi-select bulk action bar + per-card tick */
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
  margin: 0 0 12px; border: 1px solid var(--amber); border-radius: var(--r-3); background: var(--amber-soft); }
.bulkbar b { color: var(--amber-deep); letter-spacing: .08em; }
.bksel { margin-right: 8px; display: inline-flex; align-items: center; cursor: pointer; }
.bksel input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--amber); }
.bkcard.selected { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
/* topic-balance nudge: rotation topics running low on ideas */
.bankbal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  margin: 0 0 14px; border: 1px solid var(--amber); border-radius: var(--r-3); background: var(--amber-soft); }
.bankbal span { display: flex; align-items: center; gap: 4px; color: var(--amber-deep); }
.bankbal .bic { width: 18px; height: 18px; color: var(--amber-deep); }
.bankbal .spacer, .bankbal button { margin-left: auto; }
.floban-body .flopostlink { color: var(--amber-deep); font-weight: 600; cursor: pointer; }
.floban-body .flosteps { list-style: none; counter-reset: flostep; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.floban-body .flosteps li { counter-increment: flostep; position: relative; padding-left: 30px;
  font-size: var(--fs-5); line-height: 1.5; color: var(--text); }
.floban-body .flosteps li::before { content: counter(flostep); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber-deep);
  font: 700 .72rem/20px var(--font-mono); text-align: center; }
.floban-body .flosteps .hlink { font-size: inherit; }
/* .flolist - a scannable list of PARALLEL tools inside a Flo band (Growth Tools).
   No numerals (unlike .flosteps): these are options, not sequential steps. */
.floban-body .flolist { list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.floban-body .flolist li { position: relative; padding-left: 16px;
  font-size: var(--fs-5); line-height: 1.5; color: var(--text); }
.floban-body .flolist li::before { content: ""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.floban-body .flolist .hlink { font-size: inherit; font-weight: 700; }
/* FOLLOWER GOAL + pace-to-goal */
.angoal { margin: 0 0 16px; }
.goalcard { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: var(--r-3); padding: 13px 16px; }
.goalcard.ontrack, .goalcard.done { border-left-color: var(--green); }
.goalcard.behind { border-left-color: var(--amber); }
.goaltop { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.goaltop .goallbl { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.goaltop .goalnum { font-size: var(--fs-5); color: var(--text); } .goaltop .goalnum b { font-size: var(--fs-6); }
.goaltop .goaledit { margin-left: auto; background: none; border: 1px solid var(--line2); border-radius: var(--r-3); padding: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.goaltop .goaledit:hover { border-color: var(--amber); color: var(--amber-deep); }
.goaltrack { height: 12px; background: var(--card2); border-radius: var(--r-2); overflow: hidden; margin-bottom: 8px; }
.goalfill { display: block; height: 100%; border-radius: var(--r-2); background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright)); }
.goalcard.ontrack .goalfill, .goalcard.done .goalfill { background: linear-gradient(90deg, var(--green), #35b98a); }
.goalpace { font-size: var(--fs-4); color: var(--muted); }
.goalpace.ontrack, .goalpace.done { color: var(--green); } .goalpace.behind { color: var(--amber-deep); }
.goalset { background: var(--card2); border: 1px dashed var(--line2); border-radius: var(--r-3); padding: 10px 16px; font-size: var(--fs-4); color: var(--muted); cursor: pointer; }
.goalset:hover { border-color: var(--amber); color: var(--amber-deep); }
.goalform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.goalform label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-3); color: var(--muted); }
.goalform input, .goalform select { padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); color: var(--text); font-family: var(--font-body); font-size: var(--fs-5); }
.goalform label[hidden] { display: none; }
/* #20 Analytics on phones: no sideways scroll, comfortable layout (<=760px, the
   verified mobile breakpoint). Scoped to analytics classes only - zero desktop risk. */
@media (max-width: 760px) {
  .ankpis { grid-template-columns: 1fr 1fr; gap: 9px; }
  .annetgrid { grid-template-columns: 1fr; }          /* was minmax(288px) -> could overflow */
  .anengrid { grid-template-columns: 1fr 1fr; }
  .antoolbar { gap: 8px; }
  .antoolbar .anfilter { height: 40px; }
  .antoolbar .anfilter.angrow { flex: 1 1 100%; }     /* search input full width, not a sliver */
  .anrow { padding: 12px 13px; gap: 6px 10px; }
  .anrow .anrow-main { flex: 1 1 100%; min-width: 0; }
  .anrow .anrow-main b { white-space: normal; overflow-wrap: anywhere; }   /* long captions/URLs wrap, never overflow */
  .anrow-metrics { width: 100%; }
  .goaltop { flex-wrap: wrap; }
  .goalform label { flex: 1 1 100%; }                 /* stacked inputs, easy to tap */
  .demgrid { gap: 16px; }
  .digrow input { flex: 1 1 100%; }
  .anconsist .cards, #anVideo .cards, #anTraffic .cards,
  .anvidrow .cards, #anDropPanel .cards, #anInboxPanel .cards, .anadsum .cards { grid-template-columns: 1fr 1fr; gap: 9px; }
  .anacttile .ancreatile { max-width: none; }
  .anads-open, #anDropPanel .phead .btn, #anInboxPanel .phead .btn { width: 100%; }
  /* each weekday folds into two rows of 12 hours (00-11 above 12-23, the hour axis
     folds the same way): a cell is a real tap target and the grid never grows past
     the page width - no sideways scroll */
  .heatgrid .hrow { gap: 2px; grid-template-columns: 2rem repeat(12, minmax(0, 1fr)); }
  .heatgrid .hrow .hday { grid-row: span 2; }
  .heatgrid .hrow + .hrow { margin-top: 7px; }
  .anfmt th, .anfmt td { padding: 6px 5px; }
  .antraffic-cta .btn, .anconsist-read .btn { width: 100%; }
  .antoprow { flex-wrap: wrap; }
}
/* WEEKLY DIGEST + ALERTS opt-in control */
.andigest { margin-top: 20px; }
.digcard { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 15px 18px; }
.digtop { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.digtop .diglbl { font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.digstate { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted); }
.digstate.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.digsub { font-size: var(--fs-4); color: var(--muted); margin-bottom: 12px; }
.digrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.digrow input { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); color: var(--text); font-family: var(--font-body); font-size: var(--fs-5); }
.digmsg { font-size: var(--fs-3); margin-top: 8px; min-height: 1em; }
.digmsg.ok { color: var(--green); } .digmsg.err { color: var(--red); }
.digalert { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-4); color: var(--muted); }
.digalert .bic { flex: none; width: 1.1rem; height: 1.1rem; margin: .1em 0 0; color: var(--amber-deep); }
/* thumbnail on analytics rows (posts carry p.thumb) - makes the list scannable */
.anthumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-3); overflow: hidden; background: var(--card2); }
.anthumb.sm { width: 40px; height: 40px; border-radius: var(--r-3); }
.anthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* every clickable analytics row reads the same way */
.anrow.clik, .antoprow.clik, .insrow.clik { cursor: pointer; }
.insrow.clik:hover { background: var(--amber-soft); }
.anrow-links { display: flex; gap: 10px; }
.anlink { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--amber-deep); white-space: nowrap; }
.anlink:hover { text-decoration: underline; }

/* analytics: averages strip + per-network + sort */
.anstrip { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
.anstat { flex: 1 1 200px; background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: 14px 18px; }
.anstat b { font-family: var(--font-display); font-size: var(--fs-7); color: var(--amber-deep); margin-right: 4px; }
.anstat span { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .05em; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px; }
.ansort { height: 34px; font-size: var(--fs-3); padding: 0 10px; }
.anbynet { display: flex; flex-direction: column; }
.bnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.bnrow:first-child { border-top: 0; }
.bnhead { display: flex; align-items: center; gap: 9px; flex: 0 0 180px; }
.bnhead b { color: var(--text); font-size: var(--fs-4); }
.bnmetrics { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }

/* -------- analytics redesign: headline verdict + hero KPIs -------- */
.anhead { margin: 6px 0 18px; }
.anverdict { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-6); line-height: 1.5;
  color: var(--text); margin: 0 0 14px; max-width: 66ch; }
.anverdict b { color: var(--amber-deep); font-weight: 700; }
.anverdict:empty { display: none; }
.ankpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-5); padding: 15px 17px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi:first-child { border-color: var(--line2); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow); }
.kpitop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 22px; }
.kpinum { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-8); line-height: 1;
  color: var(--text); }
.kpidelta { font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700; white-space: nowrap; }
.kpidelta.up { color: var(--green); } .kpidelta.dn { color: var(--red); }
.kpilbl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .05em; text-transform: uppercase;
  color: var(--dim); display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; }
/* the "?" tip must never drop to its own line: the label text truncates (rare, only
   when a card is very narrow) and the tip is pinned so it always stays on the row. */
.kpilbltxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the "?" tip sits in the card's top-right corner (not inline with the label),
   so the label always has the full card width and the tip never competes with it */
.kpi .kpilbl .tipdot { position: absolute; top: 13px; right: 15px; margin: 0; }

/* -------- analytics redesign: BY NETWORK cards (the hero) -------- */
.annetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px;
  padding: 14px 16px 16px; }
.ancard { border: 1px solid var(--line2); border-radius: var(--r-5); background: var(--card);
  padding: 16px 16px 14px; display: flex; flex-direction: column; }
.ancard-h { display: flex; align-items: center; gap: 11px; }
.ancard-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-3); color: #fff; }
.ancard-ic svg { width: 22px; height: 22px; }
.ancard-ic.instagram { background: #d6336c; } .ancard-ic.facebook { background: #1877f2; }
.ancard-ic.tiktok { background: #111; } .ancard-ic.linkedin { background: #0a66c2; }
.ancard-ic.youtube { background: #e23b2e; } .ancard-ic.twitter { background: #111; }
.ancard-ic.pinterest { background: #e60023; } .ancard-ic.gmb { background: #1a73e8; }
.ancard-nm { flex: 1 1 auto; min-width: 0; }
.ancard-nm b { display: block; font-size: var(--fs-4); color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ancard-nm span { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--dim); }
.anrate { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700;
  color: var(--green); background: var(--green-soft); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.ancard-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 15px 0 2px; }
.ancard-heronum { min-width: 0; }
.ancard-heronum b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-8); line-height: 1;
  color: var(--text); }
.ancard-heronum span { display: block; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-top: 5px; }
.ancard-hero .cxdelta { margin-left: 0; margin-top: 6px; display: inline-block; }
.ancard-hero .cxspark { width: 104px; height: 30px; flex: 0 0 auto; }
.ancard-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 9px 0 3px;
  font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted); }
.ancard-stats b { color: var(--text); font-weight: 700; }
.ancard-stats i { color: var(--line2); font-style: normal; }
.ancard-mix { margin: 7px 0 3px; }
.mixbar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--card2);
  gap: 1.5px; }
.mixbar .mixseg { display: block; height: 100%; }
.mixseg-likes, .mixdot-likes { background: #e08900; }
.mixseg-comments, .mixdot-comments { background: #1877f2; }
.mixseg-shares, .mixdot-shares { background: #0e7857; }
.mixseg-saves, .mixdot-saves { background: #8250df; }
.mixlegrow { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .03em; color: var(--muted); }
.mixleg { display: inline-flex; align-items: center; gap: 5px; }
.mixleg i { width: 8px; height: 8px; border-radius: var(--r-1); display: inline-block; flex: 0 0 auto; }
.ancard-top { display: flex; align-items: center; gap: 9px; margin: 11px 0 2px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2); cursor: pointer; }
.ancard-top:hover { border-color: var(--amber); background: var(--amber-soft); }
.ancard-topk { flex: 0 0 auto; font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); }
.ancard-topt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-3); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancard-tops { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-3); }
.ancard-tops b { color: var(--text); font-weight: 700; }
.ancard-more { margin-top: 12px; align-self: flex-start; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .06em; color: var(--amber-deep); padding: 2px 0; }
.ancard-more::after { content: " \25be"; }
.ancard-more.open::after { content: " \25b4"; }
.ancard-content { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
/* A3: the "not enough data yet" rate chip - neutral, never the green rate look */
.anrate.anrate-off { color: var(--dim); background: var(--card2); border: 1px solid var(--line2);
  font-weight: 600; }
/* A7: the true-span label riding beside a follower delta ("+12 in 30 days") */
.cxdspan { font-style: normal; font-weight: 600; color: var(--dim); font-size: var(--fs-1); letter-spacing: .02em; }
/* A9: per-card + headline "as of" freshness (never "loaded at") */
.ancard-asof { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); cursor: help; }
.ancard-await { margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em;
  color: var(--muted); line-height: 1.4; }
.anhead-asof { margin: 10px 0 0; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); }
/* A5: scheduled-only networks - a chip row, never a full card with a fake posts hero */
.annetsched { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.annetsched-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--fs-2); color: var(--muted); background: var(--card2); border: 1px dashed var(--line2);
  border-radius: var(--r-pill); padding: 5px 11px; cursor: help; }
.annetsched-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: var(--r-1); color: #fff; flex: 0 0 auto; }
.annetsched-ic svg { width: 12px; height: 12px; }
.annetsched-ic.instagram { background: #d6336c; } .annetsched-ic.facebook { background: #1877f2; }
.annetsched-ic.tiktok { background: #111; } .annetsched-ic.linkedin { background: #0a66c2; }
.annetsched-ic.youtube { background: #e23b2e; } .annetsched-ic.twitter { background: #111; }
.annetsched-ic.pinterest { background: #e60023; } .annetsched-ic.gmb { background: #1a73e8; }
.anlistlead { margin: 22px 0 9px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }

/* -------- B2 compact VIDEO summary row (jumps to the full watch-time panels) -------- */
.anvidrow { margin: 0 0 16px; }
.anvidrow-h { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.anvidrow-cards { margin-bottom: 0; }
/* -------- B1/B3/B4/B5 feature tie-ins (real activity, deep-linked one click) -------- */
.antiein { margin-bottom: 16px; }
.antiein .cards, .anadsum .cards { margin-bottom: 0; }
.ankstat { cursor: help; }
.antie-top { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.antie-topk { font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin-bottom: 8px; }
.antie-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line); }
.antie-toprow:last-child { border-bottom: 0; }
.antie-topwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-4); color: var(--text); }
.antie-topn { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted); }
.antie-topn b { color: var(--text); font-weight: 700; }
/* B4 creations: a single modest tile, not a full grid */
.anacttile { margin: 0 0 16px; }
.anacttile .ancreatile { max-width: 260px; }
/* B5 ads: a labelled divider makes the paid block unmistakably separate from organic */
.anadsum { margin: 22px 0 0; }
.anadsum-div { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-deep); }
.anadsum-div::before, .anadsum-div::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line2); }

/* -------- ads scorecard: compact, goal-first KPI tiles -------- */
.adkpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
  margin-bottom: 12px; }
.adkpis-goal { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 10px; }
.adkpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adkpi b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); line-height: 1.05;
  color: var(--text); }
.adkpi b.bad { color: var(--red); } .adkpi b.good { color: var(--green); }
.adkpi span { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); display: inline-flex; align-items: center; gap: 3px; }
.adkpi.pri { border-color: var(--line2); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow); }
.adkpi.pri b { font-size: var(--fs-8); }
.adsublabel { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin: 4px 2px 8px; }

/* -------- ads breakdowns: demographics + placement -------- */
.adsdemo-h { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim);
  margin: 14px 0 8px; }
.adsdemo-h:first-child { margin-top: 2px; }
.adsage { display: flex; flex-direction: column; gap: 7px; }
.adsage-row { display: flex; align-items: center; gap: 10px; }
.adsage-l { flex: 0 0 66px; font-family: var(--font-mono); font-size: var(--fs-3); color: var(--text); }
.adsbar { flex: 1 1 auto; height: 9px; background: var(--card2); border-radius: var(--r-pill); overflow: hidden; }
.adsbar-fill { display: block; height: 100%; background: var(--amber-bright); border-radius: var(--r-pill); }
.adsbar-fill.c { background: #1877f2; }
.adsage-v { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted);
  min-width: 44px; text-align: right; }
.adsgender { display: flex; flex-wrap: wrap; gap: 8px; }
.adsg { font-family: var(--font-mono); font-size: var(--fs-3); padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line2); background: var(--card2); color: var(--muted); }
.adsg b { color: var(--text); }
.adsg.g-f { border-color: rgba(214, 69, 105, .4); }
.adsg.g-m { border-color: rgba(24, 119, 242, .4); }
.adsdemo-note { margin: 13px 0 0; font-size: var(--fs-1); letter-spacing: .02em; }

/* -------- ads video completion funnel -------- */
.vidverdict { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5); line-height: 1.45;
  color: var(--text); margin: 0 0 16px; max-width: 64ch; }
.vidverdict b { color: var(--amber-deep); font-weight: 700; }
.vidfunnel { display: flex; flex-direction: column; gap: 8px; }
.vidstage { display: flex; align-items: center; gap: 10px; }
.vidstage-l { flex: 0 0 52px; font-size: var(--fs-3); color: var(--text); }
.vidbar { flex: 1 1 auto; height: 12px; background: var(--card2); border-radius: var(--r-pill); overflow: hidden; }
.vidbar-fill { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber-bright), var(--amber)); }
.vidstage-v { flex: 0 0 auto; font-size: var(--fs-2); color: var(--muted); min-width: 82px; text-align: right; }
.vidstage-v b { color: var(--text); }
/* the stage where the most viewers are lost - drawn to the eye so the funnel and
   the plain-English verdict point at the same leak */
.vidstage.leak .vidstage-l { color: var(--red); font-weight: 700; }
.vidstage.leak .vidbar { box-shadow: inset 0 0 0 1.5px rgba(214, 69, 69, .45); }
.vidstats { margin-top: 15px; }

/* -------- ads targeting tips (educational; collapses via the system-wide
   .panel > .phead fold mechanism, NOT a native <details> - the two collided and
   .pcol's display:none won, so the body could never open). -------- */
.aetip { padding: 11px 0; border-top: 1px solid var(--line); }
.aetip:first-child { border-top: 0; padding-top: 0; }
.aetip b { display: block; color: var(--text); font-size: var(--fs-4); margin-bottom: 3px; }
.aetip span { color: var(--muted); font-size: var(--fs-3); line-height: 1.5; }
.aetip-acts { margin-top: 9px; display: flex; gap: 10px; flex-wrap: wrap; }
.aetip-acts .btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); padding: 7px 13px; }
.aetip-acts .btn svg { width: 15px; height: 15px; }
.aetip-ok { margin-top: 8px; display: flex; align-items: center; gap: 7px; color: var(--green); font-size: var(--fs-3); font-weight: 600; }
.aetip-ok svg { width: 17px; height: 17px; flex: none; }
.aetip-todo { margin-top: 8px; color: var(--amber-deep); font-size: var(--fs-3); line-height: 1.5; }

/* ============================ Dark theme ============================ */
:root[data-theme="dark"] {
  --bg: #0a0e18; --card: #121a2b; --card2: #0e1524;
  --line: #212c40; --line2: #30405d;
  --well: #0e1626;   /* dark: sits ABOVE --bg, just below --card - recessed reads lighter than page in dark */
  /* --dim was #6b7890 = only ~3.9:1 on the dark cards (below WCAG AA 4.5); lifted
     to clear 4.5:1 on both dark surfaces while staying dimmer than --muted. */
  --text: #e9eef8; --muted: #e9eef8; --dim: #e9eef8; --neutral: #7f8ba2;
  /* Saturated accents are lightened for dark (Material-3 tonal guidance) so the
     amber/green chip TEXT clears AA on the dark -soft chip backgrounds (deep amber
     #c67700 gave only ~4.1:1). Light theme keeps the deeper values. */
  --amber-deep: #e0951f; --green: #2fbd8a; --amber: #e8a13a;  /* --amber lightened for dark too (links were 3.75:1) */
  --amber-soft: rgba(224, 137, 0, 0.16);
  --green-soft: rgba(20, 151, 107, 0.18);
  --red-soft: rgba(214, 69, 69, 0.18);
  --scan: #8fb2ec; --scan-soft: rgba(120, 160, 230, 0.18);  /* lightened for AA on dark -soft chip */
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .switch > span { background: var(--line2); }
:root[data-theme="dark"] .side { border-right: 1px solid var(--navy-line); }
/* theme toggle button icon swap */
.tptheme .ic-sun { display: none; }
.tptheme .ic-moon { display: inline-flex; }
:root[data-theme="dark"] .tptheme .ic-sun { display: inline-flex; }
:root[data-theme="dark"] .tptheme .ic-moon { display: none; }
.tptheme svg { width: 18px; height: 18px; }

/* dark mode: topbar icons go white (amber accents drop away). The outline
   strokes sit on the <svg> itself as stroke="currentColor", so target the svg
   AND its children; keep fill-only accents (the dot) via the fill rule. */
:root[data-theme="dark"] .topsupport { color: #fff; }
:root[data-theme="dark"] .topsupport svg,
:root[data-theme="dark"] .topsupport svg *:not([stroke="none"]) { stroke: #fff; }
:root[data-theme="dark"] .topsupport svg [fill]:not([fill="none"]) { fill: #fff; }

/* analytics: segmented Organic/Ads switch */
.anseg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-3);
  background: var(--card2); border: 1px solid var(--line); margin: 0 0 16px;
  /* never wider than its column: between the phone breakpoint and ~1000px a long strip
     (Commerce has 6 tabs) used to run past the screen with Revenue unreachable */
  max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.anseg > * { flex: 0 0 auto; }
.anseg::-webkit-scrollbar { height: 0; }
.anseg button { font-family: var(--font-mono); font-size: var(--fs-3); letter-spacing: .04em;
  padding: 8px 18px; border-radius: var(--r-3); border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-weight: 600; white-space: nowrap; }
.anseg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="dark"] .anseg button.on { background: var(--line2); color: #fff; }
/* Shared video-FORMAT segmented control (every Creative Studio video build).
   Wraps to 2x2 on phones rather than scrolling sideways, so no option is ever
   hidden off-screen (mobile no-sideways rule). */
.stfmt { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: var(--r-3);
  background: var(--card2); border: 1px solid var(--line); margin: 0 0 16px; }
.stfmt button { flex: 1 1 0; min-width: 76px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 6px; border-radius: var(--r-3); border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  font: 600 13px/1 var(--font-mono); letter-spacing: .03em; }
.stfmt button small { font-size: var(--fs-1); font-weight: 600; letter-spacing: .01em;
  color: var(--muted); opacity: .85; text-transform: none; font-family: var(--font-mono); }
.stfmt button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.stfmt button.on small { color: inherit; opacity: .9; }
:root[data-theme="dark"] .stfmt button.on { background: var(--line2); color: #fff; }
@media (max-width: 760px) { .stfmt button { flex: 1 1 40%; } }
/* clickable affordances */
.clik { cursor: pointer; }
.anrow.clik:hover, .antoprow:hover { background: var(--amber-soft); }
.anrow { position: relative; transition: background .12s; }
.anrow-open { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--amber-deep);
  opacity: 0; transition: opacity .12s; white-space: nowrap; align-self: center; }
.anrow.clik:hover .anrow-open, .antoprow:hover .anrow-open { opacity: 1; }
.annet.clik { text-decoration: none; }
.annet.clik:hover { outline: 2px solid var(--amber); outline-offset: 1px; }
.kcard b.good { color: var(--green); }
/* top 5 posts */
.antoprow { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.antoprow:first-child { border-top: 0; }
.antop-rank { flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-mono); background: var(--card2); color: var(--muted);
  border: 1px solid var(--line2); }
.antop-rank.r1 { background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #3a2600; border-color: transparent; }
.antop-rank.r2 { background: #c9cfdb; color: #2a3140; border-color: transparent; }
.antop-rank.r3 { background: #e0b083; color: #3a2600; border-color: transparent; }
.antop-body { flex: 1 1 auto; min-width: 0; }
.antop-body b { display: block; color: var(--text); font-size: var(--fs-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.antop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted); }
.antop-score { flex: none; text-align: right; }
.antop-score b { display: block; font-family: var(--font-display); font-size: var(--fs-6); color: var(--text); }
.antop-score em { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .05em;
  color: var(--dim); font-style: normal; }

/* account: change-password form */
.pwform { max-width: 380px; }
.pwform label { display: block; font-family: var(--font-mono); font-size: var(--fs-2);
  letter-spacing: .05em; color: var(--muted); margin: 12px 0 5px; }
.pwform input { width: 100%; }

/* active-brand cues: topbar chip + overview banner */
.brandtag { display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 3px 12px; border-radius: var(--r-pill); font-family: var(--font-mono);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid var(--amber);
  position: relative; top: -2px; }
.brandtag:empty { display: none; }

/* ==================== Fill-from-website + draft review modal ==================== */
/* URL row on the Brand profile panel */
.furow { display: flex; gap: 10px; flex-wrap: wrap; }
.furow input { flex: 1 1 260px; min-width: 200px; }
/* "or use a picture" divider + row under the website box */
.fuor { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--dim);
  font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; }
.fuor::before, .fuor::after { content: ""; height: 1px; flex: 1; background: var(--line2); }
.fupicrow { align-items: center; gap: 12px; }

/* brand-profile logo field (DESIGN section) */
.logofield { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.logoprev { width: 96px; height: 68px; border: 1px solid var(--line2); border-radius: var(--r-3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-conic-gradient(var(--card2) 0% 25%, transparent 0% 50%) 0 / 16px 16px, var(--card); }
.logoprev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logoprev.empty { color: var(--dim); font-size: var(--fs-1); letter-spacing: .08em; background: var(--card2); }
.logoact { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.logohint { grid-column: 1 / -1; margin: 2px 0 0; color: var(--dim); font-size: var(--fs-3); line-height: 1.5; }
.logohint b { color: var(--muted); }
@media (max-width: 560px) { .logofield { grid-template-columns: 1fr; } }

/* Brand reference-image kit (Brand Reference Images) */
.refkit { display: flex; flex-direction: column; gap: 10px; }
.refkit-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.reftile { position: relative; width: 76px; height: 76px; border-radius: var(--r-3);
  overflow: hidden; border: 1px solid var(--line2); background: var(--card2); flex: none; }
.reftile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reftile.ai { border-color: var(--amber); }
.reftile-ai { position: absolute; left: 4px; top: 4px; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; color: #3a2600;
  background: var(--amber-bright); border-radius: var(--r-1); padding: 1px 4px; cursor: help; }
.reftile-x { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(10,14,24,.66); color: #fff; line-height: 0; }
.reftile-x .bic { width: 12px; height: 12px; margin: 0; }
.reftile-x:hover { background: var(--amber-deep); }
.refkit-empty { font-size: var(--fs-4); line-height: 1.5; color: var(--text);
  padding: 12px 14px; background: var(--card2); border: 1px dashed var(--line2); border-radius: var(--r-3); }
.refkit-empty b { color: var(--amber-deep); }
.refkit-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.refkit-hint { margin: 0; color: var(--dim); font-size: var(--fs-3); line-height: 1.5;
  display: inline-flex; align-items: center; gap: 5px; }
.refkit-hint .bic { width: 13px; height: 13px; margin: 0; color: var(--green); }
.refkit-grid { display: flex; flex-direction: column; gap: 5px; }
.refgrid-lbl { font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.refkit-grid img { max-width: 220px; border-radius: var(--r-3); border: 1px solid var(--line2); }
.refsample-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.refsample-pair figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.refsample-pair img { width: 240px; max-width: 42vw; border-radius: var(--r-3); border: 1px solid var(--line2); }
.refsample-pair figcaption { font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Media mix "See how it works" preview: a small trigger next to the select + an
   animated source-ladder popup that reflects the chosen mix + the brand's settings. */
.mixdemo-btn { margin-top: 7px; }
.mixdemo-modal { width: min(560px, 94vw); }
.mixdemo-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.mixdemo-sub { font-size: var(--fs-3); line-height: 1.5; color: var(--dim); }
.mixdemo-sub b { color: var(--amber-deep); }
.mixdemo-flow { display: flex; flex-direction: column; gap: 0; }
.mdconn { align-self: flex-start; margin: 3px 0 3px 20px; font-size: var(--fs-1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity .3s ease; }
.mdconn.in { opacity: 1; }
.mdconn::before { content: "\2193 "; }
.mdrung { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-3);
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.mdrung.in { opacity: 1; transform: none; }
.mdrung-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line2); color: var(--amber-deep); }
.mdrung-ic .bic { width: 16px; height: 16px; margin: 0; }
.mdrung-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mdrung-txt b { font-size: var(--fs-4); color: var(--text); }
.mdrung-d { font-size: var(--fs-3); line-height: 1.45; color: var(--dim); }
.mdrung.idea .mdrung-ic { color: var(--amber-deep); }
.mdrung.attach { border-color: var(--green); }
.mdrung.attach .mdrung-ic { color: var(--green); border-color: var(--green); }
/* a "scanning / creating" pulse while a work rung resolves, then it settles */
.mdrung.work:not(.done) .mdrung-ic { animation: mdpulse .8s ease-in-out infinite; }
.mdrung.work:not(.done) .mdrung-d { color: var(--muted); }
@keyframes mdpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,151,24,.45); }
  50% { box-shadow: 0 0 0 5px rgba(242,151,24,0); } }
.mixdemo-foot { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mdrung, .mdconn { transition: none; }
  .mdrung.work:not(.done) .mdrung-ic { animation: none; }
}

/* special panel heading (the growth-engine "How GrowFleet works"). ONLY the title
   text gets the gradient - the phead also holds #pipeSched chips, and a transparent
   text-fill on the whole header would make those chips invisible. */
.howtitle { font-size: var(--fs-3); letter-spacing: .1em; font-family: var(--font-mono);
  background: linear-gradient(90deg, var(--amber-deep) 0%, #c0398a 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--amber-deep); }
.howsub { color: var(--dim); font-size: var(--fs-1); letter-spacing: .12em; margin-left: 10px; }

/* "no posts yet" - compact plain-English flow (fits with no scroll) */
.qflow { max-width: 760px; margin: 4px auto; padding: 10px 16px 12px; text-align: left; }
.qflow-head { text-align: center; margin: 0 0 9px; }
.qflow-head .picon { display: inline-flex; width: 30px; height: 30px; }
.qflow-head b { display: block; font-size: var(--fs-5); margin: 4px 0 2px; color: var(--text); }
.qflow-head span { color: var(--muted); font-size: var(--fs-3); }
.qflow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
  grid-template-columns: 1fr 1fr; }
.qflow-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
/* step 5 spans full width ONLY when the Build button has been removed (empty
   bank); with a button present, step 5 and the button share the last row */
.qflow-steps li.qfspan { grid-column: 1 / -1; }
.qfstepn { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--amber);
  color: #fff; font-weight: 700; font-size: var(--fs-3); display: flex; align-items: center;
  justify-content: center; margin-top: 1px; }
.qflow-steps b, .qflow-steps .hlink { display: inline-block; font-size: var(--fs-4); color: var(--text); }
.qflow-steps .hlink { font-family: var(--font-body); font-weight: 600; }
.qflow-steps small { display: block; color: var(--muted); font-size: var(--fs-3); margin-top: 1px; line-height: 1.35; }
/* the Build CTA lives in the final grid cell (beside step 5), not a separate
   row - a dashed frame marks it as the action rather than another step */
.qflow-cta { display: flex; align-items: center; justify-content: center; margin: 0;
  border: 1px dashed var(--line2); border-radius: var(--r-3); padding: 8px 11px; }
.qflow-cta .btn { width: 100%; }
@media (max-width: 620px) { .qflow-steps { grid-template-columns: 1fr; } }

/* live logo preview: a mock design showing position + border, updates on change */
.logostage { position: relative; width: 210px; height: 262px; border-radius: var(--r-3); overflow: hidden;
  border: 1px solid var(--line2);
  background: linear-gradient(135deg, #5b2a8a 0%, #c0398a 55%, #7a3d63 100%); }
.logostage.nologo { background: var(--card2); }
.logostage.nologo::after { content: "Upload a logo to preview it"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: var(--dim);
  font-size: var(--fs-2); text-align: center; padding: 0 22px; }
.logostage.nologo .logostage-hl, .logostage.nologo .logostage-logo { display: none; }
.logostage-hl { position: absolute; left: 12px; bottom: 14px; display: flex; flex-direction: column;
  gap: 6px; transition: bottom .16s ease; }
.logostage-hl i { display: block; height: 9px; border-radius: var(--r-1); background: rgba(255, 255, 255, .92); }
.logostage-hl i:nth-child(1) { width: 118px; }
.logostage-hl i:nth-child(2) { width: 84px; }
.logostage[data-pos="bl"] .logostage-hl, .logostage[data-pos="br"] .logostage-hl { bottom: 70px; }
.logostage-logo { position: absolute; max-width: 45%; max-height: 22%; object-fit: contain;
  transition: all .16s ease; }
.logostage[data-pos="tl"] .logostage-logo { top: 10px; left: 10px; }
.logostage[data-pos="tr"] .logostage-logo { top: 10px; right: 10px; }
.logostage[data-pos="bl"] .logostage-logo { bottom: 10px; left: 10px; }
.logostage[data-pos="br"] .logostage-logo { bottom: 10px; right: 10px; }
.logostage[data-pos="c"] .logostage-logo { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 40%; }
.logostage-cap { display: block; margin-top: 6px; font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim); }

/* logo crop + resize modal */
.lcrop-modal { width: min(560px, 94vw); }
.lcrop-hold { display: flex; justify-content: center; padding: 4px 0 2px; }
.lcrop-stage { position: relative; user-select: none; touch-action: none; overflow: hidden;
  border: 1px solid var(--line2); border-radius: var(--r-3);
  background: repeating-conic-gradient(#e9e5dc 0% 25%, #ffffff 0% 50%) 0 / 18px 18px; }
.lcrop-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.lcrop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--amber);
  box-shadow: 0 0 0 100vmax rgba(10, 15, 25, .45); cursor: move; }
.lch { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--amber);
  border-radius: var(--r-1); touch-action: none; }
.lch[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.lch[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.lch[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.lch[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.lcrop-tools { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; flex-wrap: wrap; }

/* image editor (media library): crop & rotate / adjust / text -> new asset */
.ied-modal { width: min(640px, 96vw); }
/* Inline video editor (Studio "Edit Video" pane): the SAME editor as the media popup,
   rendered IN-PAGE - no overlay, no modal box, no scroll-trap; it flows in the pane. */
/* FULL-WIDTH form: the inline editor fills the whole Studio pane (per Peter: use the
   page width, do NOT reduce it). Only the 9:16 PREVIEW is capped + centred - a full-width
   portrait preview would be absurd - while the form below uses the entire pane so the
   Finishing controls can sit side-by-side on the same line (see the .vfingroup grid). */
.ied-inline .npmodal.ied-modal { position: static; display: block; width: auto; max-width: none;
  margin: 0;
  max-height: none; overflow: visible; background: transparent; border: none; border-radius: 0;
  box-shadow: none; animation: none; }
.ied-inline .npmhead { padding: 2px 0 10px; background: transparent; }
.ied-inline .npmbody { padding: 10px 0 0; overflow: visible; }
.ied-inline .npmfoot { padding: 10px 0 2px; background: transparent; }
.ied-inline .ied-stagewrap { max-width: 620px; margin-left: auto; margin-right: auto; }   /* only the portrait preview stays capped + centred */
/* Inline editor: readable but COMPACT controls. Typed fields keep 16px (no iOS focus-zoom)
   but heights + spacing are tight so Finishing Touches reads dense, not spread out. Scoped
   to .ied-inline so the media-library MODAL is untouched. Stays fluid (min-width:0 +
   max-width:100%, rows wrap) -> no 375px sideways scroll. Two-class selectors (0,0,2,0)
   beat the single-class @560px shrink. */
.ied-inline .vselect { font-size: var(--fs-5); padding: 7px 12px; min-height: 36px; min-width: 0; max-width: 100%; }
/* the short position / mood selects sit INLINE next to their label (not full-width);
   the hook input (.vhookin, inside .stbankrow) is exempt so it still grows to fill */
.ied-inline .vfinrow > .vselect { max-width: 230px; }   /* short options (Auto/Top/Bottom...) - keep them tidy, not sprawling */
.ied-inline .icrop-name, .ied-inline .ied-textinput { padding: 8px 12px; min-height: 36px; }
.ied-inline .wamini { font-size: var(--fs-4); padding: 6px 12px; min-height: 34px; }
.ied-inline .vchk { font-size: var(--fs-4); min-height: 30px; padding: 1px 0; }
.ied-inline .vchk input { width: 18px; height: 18px; }
.ied-inline .ied-tab { min-height: 38px; }
.ied-inline .icrat, .ied-inline .vchip { font-size: var(--fs-3); padding: 6px 12px; min-height: 32px; }
.ied-inline .ied-adjr, .ied-inline .ied-textsize { height: 8px; }
.ied-inline .ied-adj label { font-size: var(--fs-2); }
/* Finishing touches = one defined inset panel spanning the FULL pane width. Each group
   (On-screen text / Brand & sound) is a RESPONSIVE GRID so its short control clusters sit
   SIDE-BY-SIDE on the wide pane -> the section is much shorter vertically (Peter: put the
   inputs on the same line to cut HEIGHT, don't reduce the width). The min(100%,460px) guard
   is load-bearing: below ~460px it clamps each track to 100% so the grid collapses to ONE
   column at 375px with NO sideways scroll. Base .vfingroup stays flex-column (index base
   rule) so the media-library MODAL is untouched. Each Brand row + its "Set up" reveal are
   wrapped in a .vfincell so the pop stays glued under its own row AND row.nextElementSibling
   === pop keeps the toggle JS working. Sub-headers + the wide hook-input row span all cols. */
.ied-inline .ied-finish { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--card2); }
.ied-inline .vfinhead { margin: 0 0 9px; }
.ied-inline .vfingroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 10px 18px; align-items: start; }
.ied-inline .vfingroup > .vfinsub,
.ied-inline .vfingroup > .vfinhookrow { grid-column: 1 / -1; }
.ied-inline .vfingroup > .vfinrow, .ied-inline .vfincell { min-width: 0; }
.ied-inline .vfincell { display: flex; flex-direction: column; gap: 6px; }
.ied-inline .vfingroup .vfinrow > .vselect { max-width: min(230px, 100%); }
.ied-inline .vfingroup + .vfingroup { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ied-inline .vfinsub { font-size: var(--fs-2); margin: 0 0 3px; }
.ied-inline .vfinrow { gap: 6px 10px; }
.ied-inline .icrop-lbl { margin-bottom: 3px; }
.ied-inline .icrop-namerow { margin-bottom: 2px; }
.ied-tabs { display: flex; gap: 6px; margin-bottom: 12px; padding: 4px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); }
.ied-tab { flex: 1; padding: 8px 10px; border: none; background: transparent; border-radius: var(--r-3);
  font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .03em; color: var(--muted);
  cursor: pointer; transition: all .12s; }
.ied-tab:hover { color: var(--text); }
.ied-tab.on { background: var(--card); color: var(--amber-deep); font-weight: 700; box-shadow: var(--shadow); }
.ied-stagewrap { display: flex; justify-content: center; padding: 2px 0 6px; }
.ied-stage { position: relative; overflow: hidden; touch-action: none; user-select: none;
  max-width: 100%; border: 1px solid var(--line2); border-radius: var(--r-3); background: #0e1218; }
.ied-canvas-hold { position: absolute; inset: 0; }
.ied-canvas { display: block; width: 100%; height: 100%; }
.ied-texts { position: absolute; inset: 0; pointer-events: none; }
.ied-text { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display);
  line-height: 1.05; white-space: pre; text-align: center; cursor: move; padding: 2px 6px; max-width: 94%;
  touch-action: none; text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.5); }
.ied-text:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 4px; }
.ied-text.sel { outline: 1.5px dashed var(--amber-bright); outline-offset: 4px; border-radius: var(--r-1); }
/* image / sticker overlays on the video stage */
.ied-overlays { position: absolute; inset: 0; pointer-events: none; }
.ied-ov { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: grab; touch-action: none; }
.ied-ov img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ied-ov.sel { outline: 1.5px dashed var(--amber-bright); outline-offset: 3px; }
.ied-ov-h { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber-bright); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: nwse-resize; display: none; touch-action: none; }
.ied-ov.sel .ied-ov-h { display: block; }
/* curated sticker picker: a "Stickers" button reveals a compact, self-contained
   scrollable panel of the set (kept collapsed so the tab stays tidy) */
.ied-ovbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ied-stickbtn .ied-stickcar { display: inline-block; margin-left: 5px; font-size: .8em; transition: transform .15s; }
.ied-stickbtn[aria-expanded="true"] { border-color: var(--amber-bright); }
.ied-stickbtn[aria-expanded="true"] .ied-stickcar { transform: rotate(180deg); }
.ied-stickpop { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--card, #fff); box-shadow: 0 6px 20px rgba(0,0,0,.10);
  padding: 10px; max-height: 216px; overflow-y: auto; }
.ied-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.ied-stick { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--card, #faf8f3); border: 1px solid var(--line); border-radius: var(--r-3); cursor: pointer; padding: 6px;
  transition: border-color .12s, transform .08s; }
.ied-stick:hover { border-color: var(--amber-bright); transform: translateY(-1px); }
.ied-stick img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.ied-stick-gif { position: absolute; bottom: 3px; right: 3px; font-size: 8px; letter-spacing: .04em;
  background: var(--amber-deep); color: #fff; padding: 1px 4px; border-radius: var(--r-1); line-height: 1.3; }
/* image editor: draggable/resizable sticker overlays on the stage */
.ied-stkrs { position: absolute; inset: 0; pointer-events: none; }
.ied-stk { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  cursor: grab; touch-action: none; }
.ied-stk:active { cursor: grabbing; }
.ied-stk img { display: block; width: 100%; height: 100%; -webkit-user-drag: none;
  user-select: none; pointer-events: none; }
.ied-stk.sel { outline: 1.5px dashed var(--amber-bright); outline-offset: 3px; border-radius: 4px; }
.ied-stk-h { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber-bright); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: nwse-resize; display: none; touch-action: none; }
.ied-stk.sel .ied-stk-h { display: block; }
/* sticker rotate grip (clone of .ied-rothandle): round amber grip on a stem above the box */
.ied-stk-rh { position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--amber);
  display: none; align-items: center; justify-content: center; cursor: grab; touch-action: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4); z-index: 4; }
.ied-stk-rh::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 12px;
  background: var(--amber); transform: translateX(-50%); }
.ied-stk-rh::after { content: ""; position: absolute; inset: -10px; }   /* bigger touch target */
.ied-stk-rh .bic { width: 15px; height: 15px; margin: 0; color: var(--amber-deep); }
.ied-stk.sel .ied-stk-rh { display: flex; }
.ied-stk.ied-stk-hbelow .ied-stk-rh { top: auto; bottom: -34px; }
.ied-stk.ied-stk-hbelow .ied-stk-rh::before { top: auto; bottom: 100%; }
@media (pointer: coarse) { .ied-stk-rh { width: 32px; height: 32px; } }
/* image editor: categorised sticker picker (search + category chips + grid) */
.ied-stksearchrow { margin-bottom: 8px; }
.ied-stksearch { width: 100%; box-sizing: border-box; padding: 8px 11px; font-size: var(--fs-3);
  font-family: var(--font-body); color: var(--text); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--r-3); }
.ied-stksearch:focus { outline: none; border-color: var(--amber-bright); background: var(--card); }
.ied-stkcats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 9px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ied-stkcats::-webkit-scrollbar { display: none; }
.ied-stkchip { flex: 0 0 auto; white-space: nowrap; padding: 5px 12px; font-size: .82rem; font-weight: 600;
  color: var(--neutral); background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.ied-stkchip:hover { border-color: var(--amber-bright); color: var(--text); }
.ied-stkchip.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-deep); }
.ied-stkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px;
  max-height: 232px; overflow-y: auto; }
.ied-stktile { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  padding: 7px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3);
  cursor: pointer; transition: border-color .12s, transform .08s; }
.ied-stktile:hover { border-color: var(--amber-bright); transform: translateY(-1px); }
.ied-stktile img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
/* inline "From bank" idea list (options inline, no nested modal over the editor) */
.ied-bankideas { display: flex; flex-direction: column; gap: 8px; }
.ied-bankidea { border: 1px solid var(--line); border-radius: var(--r-3); padding: 7px 9px; }
.ied-bktitle { font-size: var(--fs-3); line-height: 1.35; margin-bottom: 5px; }
.ied-bkparts { display: flex; flex-wrap: wrap; gap: 6px; }
.ied-bkpart { font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent;
  cursor: pointer; transition: border-color .12s, background .12s; }
.ied-bkpart:hover { border-color: var(--amber); background: var(--amber-soft); }
/* compact inline "Set up" reveal (outro/intro/music) - deep design stays an opt-in link */
.vsetuppop p { line-height: 1.4; }
.ied-panel { margin-top: 4px; }
.ied-panel[hidden] { display: none; }
.ied-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* crop frame + handles (shared look with the logo cropper's dimmed exterior) */
.icrop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--amber-bright);
  box-shadow: 0 0 0 100vmax rgba(8, 12, 20, .55); cursor: move; touch-action: none; }
.icrop-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.45) 0 0), linear-gradient(rgba(255,255,255,.45) 0 0),
    linear-gradient(rgba(255,255,255,.45) 0 0), linear-gradient(rgba(255,255,255,.45) 0 0);
  background-repeat: no-repeat; background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 33.33% 0, 66.67% 0, 0 33.33%, 0 66.67%; }
.icrop-size { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(12, 16, 24, .82); border: 1px solid rgba(255,255,255,.14);
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; pointer-events: none; }
.ich { position: absolute; width: 14px; height: 14px; background: #fff; box-sizing: border-box;
  border: 2px solid var(--amber-bright); border-radius: var(--r-1); touch-action: none; }
.ich::after { content: ""; position: absolute; inset: -9px; }   /* bigger touch target */
.ich[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.ich[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.ich[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ich[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ich[data-h="n"] { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ich[data-h="s"] { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ich[data-h="w"] { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ich[data-h="e"] { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
/* On touch devices grow the invisible grip to a comfortable ~44px (WCAG 2.5.8) and give
   the tabs a full-height tap target - the visible chrome stays the same size. */
@media (pointer: coarse) {
  .ich::after { inset: -15px; }
  /* both the inline AND the media-popup modal editor tabs (the inline's own 38px rule is the
     more specific one, so it is named here too - it kept 38px tabs on a phone) */
  .ied-tab, .ied-inline .ied-tab { min-height: 44px; }
}
.icrop-ratios { display: flex; flex-wrap: wrap; gap: 6px; }
.icrat { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .03em; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--muted);
  cursor: pointer; transition: all .12s; }
.icrat:hover { border-color: var(--amber); color: var(--text); }
.icrat.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
/* adjust sliders */
.ied-adj { margin: 10px 0; }
.ied-adj label { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ied-adj output { color: var(--amber-deep); font-weight: 700; }
.ied-adjr, .ied-textsize { width: 100%; height: 6px; accent-color: var(--amber); cursor: pointer; }
/* text tool */
.ied-textctl { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ied-textinput { width: 100%; font-size: var(--fs-5); padding: 9px 12px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-family: var(--font-body); }
.ied-textinput:focus { outline: none; border-color: var(--amber); background: var(--card); }
.ied-textrow { display: flex; align-items: center; gap: 10px; }
.ied-textrow label { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.ied-textrow .ied-textsize { flex: 1; }
/* font picker row: reuse the app-wide <select> (Brand default + bundled + custom fonts);
   the label stays fixed and the select fills the rest without forcing sideways scroll */
.ied-fontrow .ied-fontsel { flex: 1; min-width: 0; max-width: 100%; min-height: 34px; }
/* rotate row: slider fills, a small degree readout on the right (double-click resets) */
.ied-rotrow .ied-textrot, .ied-rotrow .ied-stkrot { flex: 1; }
.ied-rotout, .ied-stkrotout { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--amber-deep);
  min-width: 44px; text-align: right; cursor: pointer; user-select: none; }
/* on-image rotate handle (Canva-style): a round amber grip on a short stem above the
   SELECTED text block; it rides inside the rotated box so it always sits "above" the text */
.ied-rothandle { position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--amber);
  display: none; align-items: center; justify-content: center; cursor: grab; touch-action: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4); z-index: 4; }
.ied-rothandle::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 12px;
  background: var(--amber); transform: translateX(-50%); }
.ied-rothandle::after { content: ""; position: absolute; inset: -10px; }   /* bigger touch target */
.ied-rothandle .bic { width: 15px; height: 15px; margin: 0; color: var(--amber-deep); }
.ied-text.sel .ied-rothandle { display: flex; }
/* text near the top of the stage: put the handle BELOW the block (stem points up) so it
   is not clipped by the stage's overflow:hidden */
.ied-text.ied-hbelow .ied-rothandle { top: auto; bottom: -34px; }
.ied-text.ied-hbelow .ied-rothandle::before { top: auto; bottom: 100%; }
@media (pointer: coarse) { .ied-rothandle { width: 32px; height: 32px; } }
/* the on-screen-text AI actions (Write with AI + From bank) share the row and wrap on a
   narrow editor panel so neither button is clipped */
.ied-textai { flex-wrap: wrap; }
.ied-textai .btn { flex: 1 1 120px; justify-content: center; }
.ied-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ied-swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2);
  cursor: pointer; padding: 0; transition: transform .1s; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ied-swatch:hover { transform: scale(1.1); }
/* selected ring works on ANY swatch colour: a card-coloured gap then an amber ring
   (never relies on the swatch's own colour to show selection) */
.ied-swatch.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--amber); }
/* custom "+" tile = rainbow, white plus; eyedropper tile = neutral, amber pipette */
.ied-swcustom { background: conic-gradient(from 90deg, #ff3b3b, #ffb020, #ffe600, #35d07f, #22b8ff, #7c5cff, #ff5cc8, #ff3b3b); }
.ied-swplus { width: 15px; height: 15px; filter: drop-shadow(0 0 1px rgba(0,0,0,.55)); }
.ied-sweye { background: var(--card2); }
.ied-sweye .bic { width: 15px; height: 15px; margin: 0; color: var(--amber-deep); }
.ied-colorinput { position: absolute; width: 1px; height: 1px; }   /* the OS picker is opened via the "+" tile */
/* recent custom colours */
.ied-recents { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ied-recentlbl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
@media (pointer: coarse) { .ied-swatch { width: 32px; height: 32px; } }
.btn.sm-act.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 700; }
/* multi-line caption input */
textarea.ied-textinput { min-height: 52px; line-height: 1.35; resize: vertical; }
/* text-tool square icon buttons (bold, italic, outline, align, duplicate): >=40px tap
   target (>=44 on touch), icon centred, no text label; the row flex-wraps at 375px so it
   never scrolls sideways */
.ied-txtools { flex-wrap: wrap; gap: 8px; }
.iesq { min-width: 40px; min-height: 40px; padding: 8px; justify-content: center; }
.iesq .bic { margin: 0; width: 18px; height: 18px; }
.ied-align { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill);
  background: var(--card2); border: 1px solid var(--line2); }
.ied-align .iesq { min-width: 38px; min-height: 34px; padding: 6px; border: none; background: transparent; }
.ied-align .iesq.on { background: var(--amber-soft); }
.ied-align .iesq:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: -2px; }
.ied-delwide { width: 100%; display: flex; align-items: center; justify-content: center; }
@media (pointer: coarse) { .iesq { min-width: 44px; min-height: 44px; } .ied-align .iesq { min-height: 40px; } }
/* save-as name + footer hint */
.icrop-lbl { display: block; margin: 14px 0 6px; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.icrop-namerow { display: flex; }
.icrop-name { width: 100%; font-size: var(--fs-5); padding: 10px 12px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-family: var(--font-body); }
.icrop-name:focus { outline: none; border-color: var(--amber); background: var(--card); }
/* Smart-fit toggle: one compact row (icon + checkbox + short label + info dot); the full
   explanation lives in the info dot's #gfTip. Explicit font stack + rem so the label can
   never inherit a mono/oversized ancestor. */
/* smart-fit: toggle on row 1, a VISIBLE one-line-ish description on row 2 (no tooltip).
   font-family set EXPLICITLY on the text elements (not just inherited) so the label and
   description can never render in a mono/oversized ancestor font. */
.icrop-keepwhole { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.icrop-kwtoggle { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; align-self: flex-start; }
.icrop-kwtoggle input { width: 18px; height: 18px; accent-color: var(--amber); flex: none; margin: 0; }
.icrop-kwlbl { margin-left: 2px; }   /* belt-and-braces: clear space even if flex-gap is not honoured */
.icrop-kwlbl { font-family: var(--font-body); font-size: var(--fs-4); line-height: 1.3;
  font-weight: 600; color: var(--text); }
.icrop-kwdesc { font-family: var(--font-body); font-size: var(--fs-2); line-height: 1.4;
  color: var(--muted); max-width: 100%; }
.ied-foothint { margin-right: auto; padding: 0; }
/* video editor: native <video> preview, trim bar, chips, finish toggles */
.ied-video { background: #000; object-fit: contain; }
.vtrim { padding: 8px 2px 2px; }
.vtrim-track { position: relative; height: 30px; border-radius: var(--r-3); background: var(--card2);
  border: 1px solid var(--line2); touch-action: none; cursor: pointer; }
.vtrim-sel { position: absolute; top: 0; bottom: 0; background: var(--amber-soft);
  border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); pointer-events: none; }
.vtrim-play { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.7); pointer-events: none; transform: translateX(-1px); }
.vtrim-handle { position: absolute; top: 50%; width: 16px; height: 26px; transform: translate(-50%, -50%);
  background: var(--amber); border: 1px solid #fff; border-radius: var(--r-2); cursor: ew-resize;
  touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.45); z-index: 2; }
.vtrim-handle::after { content: ""; position: absolute; inset: -12px; }   /* bigger touch target */
.vtrim-handle:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }
.vtrim-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.vtrim-time { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted); }
.vtrim-time b { color: var(--amber-deep); }
.vsub { display: block; margin: 14px 0 7px; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .03em; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--muted);
  cursor: pointer; transition: all .12s; }
.vchip:hover { border-color: var(--amber); color: var(--text); }
.vchip.on { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); font-weight: 700; }
.vbadge { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--amber-deep); background: var(--amber-soft); border: 1px solid var(--amber);
  padding: 4px 10px; border-radius: var(--r-pill); }
.vchk { display: flex; align-items: center; gap: 9px; font-size: var(--fs-3); color: var(--text);
  cursor: pointer; padding: 3px 0; }
.vchk input { width: 16px; height: 16px; accent-color: var(--amber); flex: none; }
.ied-finish { margin-top: 12px; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.vfinrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* finish section grouping: a section title + two labelled groups (On-screen text /
   Brand & sound), so the block reads as intentional rather than a flat list */
.vfinhead { font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.vfingroup { display: flex; flex-direction: column; gap: 6px; }
.vfingroup + .vfingroup { margin-top: 14px; }
.vfinsub { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 2px; }
.vfinhookrow { margin-top: 1px; }   /* input + From bank + Write with AI (stbankrow stbwrap) */
.vselect { font-family: var(--font-body); font-size: var(--fs-3); padding: 5px 9px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; }
.vselect:disabled { opacity: .45; cursor: not-allowed; }
.vselect:focus { outline: none; border-color: var(--amber); }
.vhookin { flex: 1 1 140px; min-width: 0; cursor: text; }   /* on-screen hook text: grows, never overflows 375 */
/* video-editor text fonts - served from the SAME bundled TTFs the worker renders, so
   the on-video preview is true WYSIWYG */
@font-face { font-family: "gfvf-montserrat"; src: url("/api/font/montserrat"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-montserrat"; src: url("/api/font/montserrat?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfvf-oswald"; src: url("/api/font/oswald"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-oswald"; src: url("/api/font/oswald?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfvf-anton"; src: url("/api/font/anton"); font-display: swap; }
@font-face { font-family: "gfvf-bebasneue"; src: url("/api/font/bebasneue"); font-display: swap; }
@font-face { font-family: "gfvf-playfair"; src: url("/api/font/playfair"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfvf-playfair"; src: url("/api/font/playfair?w=bold"); font-weight: 700; font-display: swap; }
.vfonts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vfont { font-size: var(--fs-4); padding: 5px 12px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card); color: var(--text); cursor: pointer; line-height: 1.15; }
.vfont:hover { border-color: var(--amber); }
.vfont.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); }

/* Brand-font picker preview (Brand profile) - each of the 10 bundled families served
   from the SAME TTFs the worker burns in, so the preview is true WYSIWYG. One @font-face
   per family (bold weight where the family ships one) named gfbf-<key>. */
@font-face { font-family: "gfbf-montserrat"; src: url("/api/font/montserrat"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-montserrat"; src: url("/api/font/montserrat?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-poppins"; src: url("/api/font/poppins"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-poppins"; src: url("/api/font/poppins?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-worksans"; src: url("/api/font/worksans"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-worksans"; src: url("/api/font/worksans?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-roboto"; src: url("/api/font/roboto"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-roboto"; src: url("/api/font/roboto?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-oswald"; src: url("/api/font/oswald"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-oswald"; src: url("/api/font/oswald?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-bebasneue"; src: url("/api/font/bebasneue"); font-display: swap; }
@font-face { font-family: "gfbf-anton"; src: url("/api/font/anton"); font-display: swap; }
@font-face { font-family: "gfbf-playfair"; src: url("/api/font/playfair"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-playfair"; src: url("/api/font/playfair?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-lora"; src: url("/api/font/lora"); font-weight: 400; font-display: swap; }
@font-face { font-family: "gfbf-lora"; src: url("/api/font/lora?w=bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "gfbf-dmserif"; src: url("/api/font/dmserif"); font-display: swap; }
.fontpick { display: flex; flex-direction: column; gap: 10px; }
.fontpick select { width: 100%; }
/* the live preview card - fills with the chosen family via a data-attr class on change */
.fontprev { border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2);
  padding: 14px 16px; overflow: hidden; }
.fontprev-name { font-size: clamp(22px, 6vw, 34px); font-weight: 700; line-height: 1.1; color: var(--text);
  word-break: break-word; }
.fontprev-sample { margin-top: 6px; font-size: var(--fs-4); color: var(--muted); line-height: 1.35;
  word-break: break-word; }
.fontprev-cap { margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
  color: var(--dim); }
/* upload-your-own-font control + the removable list of a brand's custom fonts */
.fontup { display: flex; flex-direction: column; gap: 8px; }
.fontup-hint { font-size: var(--fs-2); color: var(--muted); line-height: 1.3; }
/* upload reveal-form: regular (required) + optional bold weight */
.fontup-form { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.fontup-field { display: flex; flex-direction: column; gap: 5px; }
.fontup-flabel { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); text-transform: uppercase; }
.fontup-flabel em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.fontup-pickrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fontup-fname { font-size: var(--fs-4); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fontup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fontlist-badge { flex: none; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .04em; color: var(--amber-deep, #9a6b12); background: var(--amber-soft, #f6e8cf);
  border-radius: var(--r-pill); padding: 2px 9px; }
.fontlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fontlist-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.fontlist-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-5); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fontlist-x { flex: none; border: none; background: transparent; color: var(--muted);
  font-size: var(--fs-4); line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: var(--r-2); }
.fontlist-x:hover { color: var(--danger, #e8483d); background: var(--card); }
.vsetup { margin-left: auto; font-size: var(--fs-3); white-space: nowrap; flex: none; }
.gfvresume { position: fixed; left: 50%; bottom: calc(20px + var(--gf-safe-bottom)); transform: translateX(-50%); z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 18px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--amber); box-shadow: var(--shadow-lg);
  font-size: var(--fs-4); color: var(--text); max-width: calc(100vw - 24px); animation: ppin .18s ease; }
.gfvresume span { color: var(--muted); }
.gfvresume-x { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-6);
  line-height: 1; cursor: pointer; padding: 0 2px; }
.gfvresume-x:hover { color: var(--text); }
/* Our outro resume pill (.gfoutro-resume, scoped so the existing #gfVResume
   video-editor pill is untouched) must never run past a narrow screen: allow it
   to wrap, and drop the context prefix on phones so "Resume <creator>" + close
   always fit. Centre with left/right/margin - NOT translateX(-50%) - so the pop
   animation (which drives transform) can't knock it off-centre. */
.gfoutro-resume { flex-wrap: wrap; justify-content: center; row-gap: 6px;
  left: 12px; right: 12px; margin: 0 auto; width: fit-content;
  transform: none; animation: gfResumeIn .18s ease; }
@keyframes gfResumeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .gfoutro-resume > span { display: none; } }
/* "BRAND OUTRO" section labels in the video creators are links to the outro
   setup (Brand profile). font:inherit keeps the tiny mono label look; the
   underline + up-right arrow mark it as a link that opens the setup elsewhere. */
.outro-setup-link { font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--amber-deep); background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.outro-setup-link:hover { color: var(--amber); }
.outro-setup-link::after { content: " ↗"; text-decoration: none; display: inline-block; }
.gfvresume .gfvr-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-4);
  width: 26px; height: 26px; border-radius: 50%; flex: none; }
.gfvresume .gfvr-x:hover { background: var(--card2); color: var(--text); }
@media (max-width: 560px) { .gfvresume span { display: none; } }
@media (max-width: 560px) {
  .ied-foothint { display: none; }
  .ied-tab { font-size: var(--fs-1); padding: 8px 6px; }
  /* each tab as wide as its label, on one line ("Crop & rotate" broke in two at 360) */
  .ied-tab { flex: 1 1 auto; white-space: nowrap; }
  .vchip, .icrat { font-size: var(--fs-1); padding: 6px 10px; }
}

/* modal shell - sticky header/footer, scrollable body, on theme */
/* GPU-raster fix (root cause of the "Fill from website goes white" report,
   verified live on kalondental 2026-09-15): scrolling this modal's overflow:auto
   body inside the position:fixed .npwrap overlay dropped the WHOLE panel's raster
   and painted it solid white/blank - the large "what we read" screenshot hero in
   the body is what promotes, then fails to repaint, the compositor layer on scroll.
   Pinning the panel AND its scroller to their own stable compositor layers keeps the
   raster alive across the scroll (repro: scroll down to the logo checkbox). */
.fumodal { width: min(720px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden; transform: translateZ(0); }
.fumodal .npmbody { transform: translateZ(0); }
.npmhead { display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--card); }
.npmh-ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-3); display: inline-flex;
  align-items: center; justify-content: center; font-size: var(--fs-5); color: #3a2600;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber)); box-shadow: 0 4px 12px var(--amber-soft); }
.npmh-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.npmh-t b { font-family: var(--font-display); font-size: var(--fs-6); color: var(--text); }
.npmh-t span { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npmx { flex: none; width: 34px; height: 34px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; font-size: var(--fs-5); transition: all .15s; }
.npmx:hover { color: var(--text); border-color: var(--amber); transform: rotate(90deg); }
/* editor undo/redo toolbar (image + video editors, modal + inline) */
.ied-histbar { flex: none; display: inline-flex; gap: 6px; }
.ied-histbtn { width: 34px; height: 34px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: color .15s, border-color .15s, opacity .15s; }
.ied-histbtn .bic { width: 18px; height: 18px; margin: 0; }   /* neutralise the base .bic wrapper (6px margin) so the glyph centres */
.ied-histbtn svg { width: 18px; height: 18px; }
.ied-histbtn:hover:not(:disabled) { color: var(--text); border-color: var(--amber); }
.ied-histbtn:disabled { opacity: .34; cursor: default; }
@media (max-width: 600px) { .ied-histbtn { width: 38px; height: 38px; } }
/* phone: a modal head's close and undo / redo are 44px targets (the generic modal close,
   the image editor, the stage slide-out; the brand wizard's sit after its own rules) */
@media (max-width: 760px) {
  .npmx, .ied-histbtn { width: 44px; height: 44px; }
  /* tighter gaps keep the title on one line beside them ("Edit image" at 360) */
  .npmhead { gap: 8px; }
  .ied-histbar { gap: 4px; }
  .upclose { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
.npmbody { padding: 20px 22px; overflow-y: auto; flex: 1; }
.npmbody::-webkit-scrollbar { width: 12px; }
.npmbody::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; border: 4px solid var(--card); }
.npmfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; flex: none;
  border-top: 1px solid var(--line); background: var(--card2); }

/* hero screenshot of the site we read */
.fuhero { position: relative; border-radius: var(--r-4); overflow: hidden; border: 1px solid var(--line2); margin-bottom: 16px; }
.fushot { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: top; }
.fuhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(transparent, rgba(7, 11, 20, 0.78)); }
.fuhero-cap { position: absolute; left: 13px; bottom: 10px; z-index: 1; color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; }

/* intro + toolbar */
.fulead { color: var(--muted); font-size: var(--fs-4); line-height: 1.55; margin: 0 0 16px; }
.fulead b { color: var(--text); }
.futools { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.fulink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--amber-deep);
  font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 600; letter-spacing: .03em; }
.fulink:hover { text-decoration: underline; }
.futools-sep { color: var(--line2); }
.fucount-chip { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; }

/* field cards */
.fugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ficard { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 13px 15px 15px; transition: border-color .15s, opacity .15s; }
.ficard.big { grid-column: 1 / -1; }
.ficard:hover { border-color: var(--line2); }
.ficard.off { opacity: .6; }
.ficard.off:hover { opacity: 1; }
.fic-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.fic-lab { flex: 1; font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fic-badge { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-pill); flex: none; }
.fic-badge.new { color: var(--green); background: var(--green-soft); }
.fic-badge.chg { color: var(--amber-deep); background: var(--amber-soft); }
.fic-badge.same { color: var(--dim); background: transparent; border: 1px solid var(--line); }
.fic-cur { font-size: var(--fs-3); color: var(--dim); margin: -2px 0 9px; }
.fic-cur span { color: var(--muted); }
.fic-sw { display: flex; gap: 6px; margin: 0 0 10px; }
.fic-sw .fusw { width: 26px; height: 26px; border-radius: var(--r-3); border: 1px solid var(--line2); }
.fic-input { width: 100%; font-family: var(--font-body); }
textarea.fic-input { resize: vertical; min-height: 58px; line-height: 1.5; }
/* the include toggle (pill switch) */
.fic-tog { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; }
.fic-tog input { position: absolute; opacity: 0; margin: 0; }
.fic-tog span { position: absolute; inset: 0; border-radius: 999px; background: var(--line2); transition: background .18s; }
.fic-tog span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.fic-tog input:checked + span { background: var(--amber); }
.fic-tog input:checked + span::after { left: 21px; }
.fic-tog input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* logo option */
.fulogo { display: flex; align-items: center; gap: 11px; margin: 16px 0 0; padding: 13px 15px;
  border: 1px dashed var(--line2); border-radius: var(--r-3); color: var(--muted); font-size: var(--fs-4); cursor: pointer; }
.fulogo:hover { border-color: var(--amber); }
.fulogo input { position: absolute; opacity: 0; }
.fulogo-sw { flex: none; width: 20px; height: 20px; border-radius: var(--r-2); border: 2px solid var(--line2); position: relative; }
.fulogo input:checked + .fulogo-sw { background: var(--amber); border-color: var(--amber); }
.fulogo input:checked + .fulogo-sw::after { content: "✓"; position: absolute; inset: 0; color: #fff;
  font-size: var(--fs-3); display: flex; align-items: center; justify-content: center; }
.fusw { display: inline-block; }

@media (max-width: 560px) {
  .fugrid { grid-template-columns: 1fr; }
  .npmhead, .npmfoot { padding-left: 16px; padding-right: 16px; }
  .npmbody { padding: 16px; }
}

/* draft field source tag (parsed vs AI) */
.fic-src { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fic-src.parsed { color: var(--green); }
.fic-lab { min-width: 0; }

/* ============= Posts row: network icons + approval switch ============= */
.qnets { display: flex; gap: 5px; align-items: center; flex: none; }
.qnet { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--muted); cursor: pointer; padding: 0; transition: all .14s;
  display: inline-flex; align-items: center; justify-content: center; }
.qnet svg { width: 15px; height: 15px; }
.qnet:hover { color: var(--amber-deep); border-color: var(--amber); transform: translateY(-1px); }
.qnet.instagram:hover { color: #d6336c; border-color: #d6336c; }
.qnet.facebook:hover { color: #1877f2; border-color: #1877f2; }
.qnet.linkedin:hover { color: #0a66c2; border-color: #0a66c2; }
.qnet.youtube:hover { color: #e23b2e; border-color: #e23b2e; }
.qnet.tiktok:hover, .qnet.twitter:hover { color: var(--text); border-color: var(--text); }
/* the row approval switch */
.qapp { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; margin: 0 2px; }
.qapp input { position: absolute; opacity: 0; margin: 0; }
.qapp span { position: absolute; inset: 0; border-radius: 999px; background: var(--line2); transition: background .18s; }
.qapp span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.qapp input:checked + span { background: var(--green); }
.qapp input:checked + span::after { left: 21px; }
.qapp:hover span { filter: brightness(1.05); }
/* detail: top approve row */
/* detailtop: two aligned groups (metadata pills, then actions). flex-wrap keeps
   them side by side on desktop and stacks to exactly 2 rows on a phone. Each group
   holds ONE control height so nothing wraps ragged (Post-from-Phone feedback). */
.detailtop { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.dtacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* metadata is ONE never-wrapping row: status + format stay their natural size, the
   source chip is the only one that shrinks (ellipsis) to take whatever space is left.
   So the three pills are always on a single line - no pixel-fragile width caps - and
   the block stays 2 rows on any phone (measured, Post-from-Phone feedback). */
.dtmeta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.dtmeta > .pill, .dtmeta > .qfmt { flex: none; }
.dtmeta > .qsrc { flex: 0 1 auto; min-width: 0; }
/* every metadata pill snaps to one height + vertical-centre, so status/source/format
   line up cleanly regardless of their own font size or padding */
.dtmeta > .pill, .dtmeta > .qsrc, .dtmeta > .qfmt {
  height: 28px; margin: 0; box-sizing: border-box; display: inline-flex; align-items: center; }
.dtacts > .btn.sm-act { margin: 0; }
.qsrc-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Phones are narrow (~287px of content): compact each group a touch so the three
   metadata pills sit on one line with the source at its natural size, and the two
   action buttons fit the next line - exactly 2 rows, never 3. */
@media (max-width: 760px) {
  .detailtop { gap: 8px; }
  .dtmeta { gap: 6px; }
  .dtmeta > .pill, .detailtop .dtmeta .qsrc, .detailtop .dtmeta .qfmt {
    height: 25px; font-size: var(--fs-1); padding-left: 7px; padding-right: 7px; }
  .detailtop .dtmeta .qsrc { gap: 4px; }
  .dtacts { gap: 8px; }
  .dtacts > .btn.sm-act { padding: 8px 10px; font-size: var(--fs-3); }
}
/* detail: collapsible attach library */
.medlib-head { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.medlib-head:hover { color: var(--amber-deep); }
.medchev { margin-left: auto; font-size: var(--fs-2); }
.medlib { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.medlib[hidden] { display: none; }

/* ============= Post lifecycle timeline + status note ============= */
.lifecycle { display: flex; align-items: center; gap: 4px; margin: 6px 0 12px; flex-wrap: wrap; }
.lc-step { display: flex; align-items: center; gap: 8px; }
.lc-dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid var(--line2); background: var(--card); }
.lc-step.done .lc-dot { background: var(--green); border-color: var(--green); }
.lc-step.active .lc-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.lc-txt { display: flex; flex-direction: column; line-height: 1.2; }
.lc-txt b { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim); }
.lc-step.done .lc-txt b { color: var(--text); }
.lc-step.active .lc-txt b { color: var(--amber-deep); }
.lc-txt span { font-size: var(--fs-2); color: var(--dim); white-space: nowrap; }
.lc-step.done .lc-txt span, .lc-step.active .lc-txt span { color: var(--muted); }
.lc-sep { flex: 1 1 18px; min-width: 12px; height: 2px; background: var(--line); border-radius: var(--r-1); }
.lc-step.done + .lc-sep { background: var(--green); }
.statusnote { margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r-3); background: var(--card2);
  border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-4); line-height: 1.5; }
.statusnote b { color: var(--text); }

/* SYSTEM STATUS board: the engine's live operational state, lifted out of the "How
   GrowFleet works" header into its own standout section. Each tile is a glanceable stat
   that clicks through to the AREA where you change it; a green/amber dot flags health. */
.sysstat-title { font-size: var(--fs-3); letter-spacing: .1em; font-family: var(--font-mono);
  background: linear-gradient(90deg, var(--amber-deep) 0%, #c0398a 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--amber-deep); }
.sysstat-health { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.sysstat-health .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft); }
.sysstat-health.warn { color: var(--amber-deep); }
.sysstat-health.warn .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.sysstat-body { padding: 16px 18px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.systile { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-4); background: var(--card2); border: 1px solid var(--line); min-width: 0; }
.systile.wide { grid-column: 1 / -1; }
.systile.clickable { cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.systile.clickable:hover { border-color: var(--amber); transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .10); }
.systile.clickable:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* health dot, top-right: green = good, amber = needs you. The wide "today" tile omits it. */
.systile::after { content: ""; position: absolute; top: 11px; right: 11px; width: 8px; height: 8px;
  border-radius: var(--r-pill); background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.systile.warn::after { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.systile.wide::after { display: none; }
.sysico { width: 38px; height: 38px; border-radius: var(--r-3); flex: none; display: inline-flex;
  align-items: center; justify-content: center; background: var(--amber-soft); color: var(--amber-deep); }
.sysico .bic, .sysico svg { width: 20px; height: 20px; }
.systxt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.syslab { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }
.sysval { font-size: var(--fs-4); color: var(--text); font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.systile.wide .sysval { white-space: normal; }
/* "all times in your timezone" note under the post lifecycle */
.tznote { color: var(--dim); font-size: var(--fs-2); letter-spacing: 0; text-transform: none;
  margin: -2px 0 14px; }
.tznote b { color: var(--muted); }
.tznote .hlink { font-size: var(--fs-2); }

/* ---------- Ad Engine ---------- */
.aeplat { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.aeplat-card { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-4); padding: 10px 14px; min-width: 220px; }
.aeplat-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line2); flex: none; }
.aeplat-card.on .aeplat-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
/* saved creds the network refused (expired / invalidated session): amber, like .aecmp-card.action */
.aeplat-card.warn { border-color: var(--amber); }
.aeplat-card.warn .aeplat-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.aeplat-card.warn .aeplat-txt span { color: var(--amber-deep); }
.aeplat-txt { display: flex; flex-direction: column; line-height: 1.25; }
.aeplat-txt b { font-size: var(--fs-4); color: var(--text); }
.aeplat-txt span { font-size: var(--fs-2); color: var(--dim); font-family: var(--font-mono); }
.aeplat-card .btn { margin-left: auto; padding: 5px 12px; font-size: var(--fs-3); }

.aerecs, .aecamps { display: flex; flex-direction: column; }
.aefpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.aefp { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; background: var(--card); }
.aefp-media { position: relative; width: 46px; height: 46px; border-radius: var(--r-3); overflow: hidden; background: var(--line2); flex: 0 0 auto; }
.aefp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aefp-ph { display: block; width: 100%; height: 100%; }
.aefp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(10, 14, 22, .35); }
.aefp-play .bic svg { width: 18px; height: 18px; }
.aefp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aefp-main b { font-size: var(--fs-4); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aefp-sub { font-size: var(--fs-2); color: var(--neutral); }
.aefp-go { flex: 0 0 auto; padding: 6px 12px; font-size: var(--fs-3); }
.aerec { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-top: 1px solid var(--line); border-left: 3px solid var(--line2); }
.aerec:first-child { border-top: none; }
.aerec.good { border-left-color: var(--green); }
.aerec.bad { border-left-color: var(--red); }
.aerec.warn { border-left-color: var(--amber); }
.aerec-main { flex: 1; min-width: 0; }
.aerec-main b { display: block; font-size: var(--fs-4); color: var(--text); }
.aerec-sub { font-size: var(--fs-3); color: var(--muted); }
.aerec-sub i { font-style: normal; color: var(--text); font-weight: 600; }
.aerec-ctrl .btn, .aecamp-ctrl .btn { padding: 6px 12px; font-size: var(--fs-3); }

.aecamp { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.aecamp:first-child { border-top: none; }
.aecamp-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.aecamp-head:hover { background: var(--card2); }
.aecamp-toggle { flex: none; background: none; border: 0; cursor: pointer; padding: 3px; display: flex; color: var(--muted); border-radius: var(--r-2); }
.aecamp-toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.aecamp.open .aecamp-toggle svg { transform: rotate(90deg); }
.aecamp-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.aecamp-main { flex: 1; min-width: 0; }
.aecamp-main b { display: block; font-size: var(--fs-4); color: var(--text); }
.aecamp-sub { font-size: var(--fs-3); color: var(--muted); font-family: var(--font-mono); }
.aestatus { display: inline-block; font-size: var(--fs-1); letter-spacing: .08em; padding: 2px 7px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--dim); }
.aestatus.on { color: var(--green); border-color: var(--green); }
.aestatus.paused { color: var(--amber-deep); border-color: var(--amber); }
.aecamp-ctrl { display: flex; gap: 8px; flex: none; }

/* ---------- Ad Command Centre (multi-network) ---------- */
.aecmd .panelpad { display: flex; flex-direction: column; gap: 18px; }
.aecmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.aecmp-card { position: relative; border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 13px 15px; background: var(--card); display: flex; flex-direction: column; gap: 4px;
  border-top: 3px solid var(--net, var(--line2)); }
.aecmp-card.best { box-shadow: 0 0 0 2px var(--green-soft); border-color: var(--green); }
.aecmp-card.action { border-color: var(--amber); }
.aecmp-head { display: flex; align-items: center; gap: 8px; }
.aecmp-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--net, var(--line2)); flex: none; }
.aecmp-head b { font-size: var(--fs-4); color: var(--text); }
.aecmp-best { margin-left: auto; font-size: var(--fs-1); letter-spacing: .08em; color: var(--green);
  border: 1px solid var(--green); border-radius: var(--r-pill); padding: 1px 7px; font-family: var(--font-mono); }
.aecmp-roas { font-size: var(--fs-6); font-weight: 700; color: var(--text); line-height: 1.1; }
.aecmp-sub { font-size: var(--fs-2); color: var(--muted); font-family: var(--font-mono); }
.aecmp-bar { height: 5px; border-radius: var(--r-pill); background: var(--line2); overflow: hidden; margin-top: 3px; }
.aecmp-bar span { display: block; height: 100%; background: var(--net, var(--amber)); }
.aecmp-fix { font-size: var(--fs-2); color: var(--amber-deep); font-family: var(--font-mono); }
.aecmp-card.blend { background: var(--card2); border-top-color: var(--amber); }
.aenet-meta { --net: #1877f2; } .aenet-google { --net: #ea4335; }
.aenet-tiktok { --net: #ff0050; } .aenet-linkedin { --net: #0a66c2; }

/* compare cards double as a single-select network filter: normalise button chrome,
   add an active ring in the network's own colour, and a visible focus outline. */
button.aecmp-card { width: 100%; text-align: left; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.aecmp-card:hover { border-color: var(--net, var(--amber)); }
.aecmp-card.is-active { box-shadow: 0 0 0 2px var(--net, var(--amber)); border-color: var(--net, var(--amber)); }
.aecmp-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.aecmp-sel { margin-left: auto; font-size: var(--fs-1); letter-spacing: .08em; color: var(--amber-deep);
  border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 1px 7px; font-family: var(--font-mono); }
/* header scope chip "Viewing Meta [x]" */
.aecmd-scope { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-2); color: var(--muted); background: var(--amber-soft);
  border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 2px 6px 2px 10px; white-space: nowrap; }
.aecmd-scope b { color: var(--amber-deep); }
.aescope-x { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--amber-deep); }
.aescope-x svg { width: 15px; height: 15px; }
.aescope-x:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-radius: var(--r-1); }

.aecmd-brief { display: flex; flex-direction: column; gap: 8px; }
.aebrief-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r-3); background: var(--card); }
.aebrief-item.absorb { border-left-color: var(--line2); }
.aebrief-main { flex: 1; min-width: 0; }
.aebrief-main b { display: block; font-size: var(--fs-4); color: var(--text); }
.aebrief-sub { font-size: var(--fs-3); color: var(--muted); }
.aebrief-sub .aenet-tag { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 1px 6px; margin-right: 6px; text-transform: uppercase; }
.aebrief-item .btn { flex: none; padding: 6px 12px; font-size: var(--fs-3); }
.aecmd-empty { font-size: var(--fs-3); color: var(--neutral); font-family: var(--font-mono); padding: 6px 2px; }

.aecmd-ai { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.aecmd-aihead { font-size: var(--fs-2); letter-spacing: .07em; color: var(--muted); margin-bottom: 7px; }
.aecmd-ask, .aecmd-coach { border: 1px solid var(--line); border-radius: var(--r-4); padding: 14px; background: var(--card); }
.aecmd-askrow { display: flex; gap: 8px; }
.aecmd-askrow input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: var(--fs-4); color: var(--text);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; }
.aecmd-askrow input:focus { outline: none; border-color: var(--amber); }
.aecmd-askout { margin-top: 10px; font-size: var(--fs-4); color: var(--text); line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: 10px; }
.aecmd-coach .btn { margin-top: 4px; }
.aecmd-coachout { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.aecoach-sum { font-size: var(--fs-4); color: var(--text); font-weight: 600; }
.aecoach-grp b { display: block; font-size: var(--fs-1); letter-spacing: .07em; text-transform: uppercase;
  font-family: var(--font-mono); color: var(--muted); margin-bottom: 4px; }
.aecoach-grp.win b { color: var(--green); }
.aecoach-grp.fix b { color: var(--amber-deep); }
.aecoach-grp ul { margin: 0; padding-left: 17px; }
.aecoach-grp li { font-size: var(--fs-3); color: var(--text); line-height: 1.45; margin: 2px 0; }
.aecoach-src { font-size: var(--fs-1); color: var(--neutral); font-family: var(--font-mono); }

.aecmd-tl { display: flex; align-items: flex-end; gap: 3px; height: 60px; padding: 4px 2px 0;
  border-top: 1px solid var(--line); overflow: hidden; }
.aetl-col { flex: 1 1 0; min-width: 2px; display: flex; flex-direction: column-reverse; height: 100%; }
.aetl-seg { display: block; width: 100%; }
.aetl-seg.meta { background: #1877f2; } .aetl-seg.google { background: #ea4335; }
.aetl-seg.tiktok { background: #ff0050; } .aetl-seg.linkedin { background: #0a66c2; }

.aecmd-camps .aecamp .aenet-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .06em; color: var(--dim); border: 1px solid var(--line2); border-radius: var(--r-pill);
  padding: 1px 7px; margin-right: 7px; text-transform: uppercase; }
.aecamp-metrics { font-size: var(--fs-2); color: var(--neutral); font-family: var(--font-mono); }
.aecamp-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.aecamp-link:hover, .aecamp-link:focus-visible { color: var(--amber-deep); text-decoration: underline; }
.aecamp-link svg { width: 14px; height: 14px; opacity: .5; flex: none; }
.aecamp-link:hover svg, .aecamp-link:focus-visible svg { opacity: 1; }
.aecamp-body { padding: 2px 16px 14px 46px; }
.aecb-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; max-width: 420px; }
.aecb-k { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.aecb-v { font-size: var(--fs-3); color: var(--text); font-family: var(--font-mono); text-align: right; }
.aecb-none { font-size: var(--fs-3); color: var(--neutral); font-family: var(--font-mono); }
.aecb-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.aecb-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.aecb-foot .btn svg { width: 14px; height: 14px; }
.aecb-ai { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber-deep); border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 2px 8px; }

/* ALL CAMPAIGNS: section collapse toggle + search / status filter bar */
.aecamp-sectog { flex: none; background: none; border: 0; cursor: pointer; padding: 2px; margin: -2px 2px -2px -4px; display: inline-flex; color: var(--muted); border-radius: var(--r-2); }
.aecamp-sectog svg { width: 16px; height: 16px; transition: transform .15s; }
.aecamp-sectog[aria-expanded="true"] svg { transform: rotate(90deg); }
.aecamp-sectog:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.aecmd-campfilter { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.aecmd-campsearch { flex: 1; min-width: 150px; font-family: var(--font-body); font-size: var(--fs-3); color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 8px 12px; }
.aecmd-campsearch:focus { outline: none; border-color: var(--amber); }
.aecmd-campstatus { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; flex: none; }
.aecmd-campstatus button { background: none; border: 0; cursor: pointer; padding: 7px 15px; font-size: var(--fs-2); font-family: var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.aecmd-campstatus button:hover { color: var(--text); }
.aecmd-campstatus button.on { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.aecmd-campstatus button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* whole header row toggles the list: signal it's clickable, and don't select the
   text on a toggle click. The chevron button keeps its own focus ring for keyboards. */
.aecmd-campshead { user-select: none; }
.aecmd-campshead:hover { background: var(--card2); }
/* ad-account filter: a pill button that opens a checkbox popover (multi-account) */
.aecmd-acctfilter { position: relative; flex: none; }
.aecmd-acctbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; padding: 7px 12px; font-size: var(--fs-2); font-family: var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.aecmd-acctbtn:hover { color: var(--text); }
.aecmd-acctbtn svg { width: 15px; height: 15px; }
.aecmd-acctbtn::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 2px; opacity: .7; }
.aecmd-acctbtn[aria-expanded="true"] { color: var(--amber-deep); border-color: var(--amber); }
.aecmd-acctbtn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.aecmd-acctpop { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 220px; max-height: 280px; overflow-y: auto; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-3); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 6px; }
.aecmd-acctpop label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-3); cursor: pointer; font-size: var(--fs-3); font-family: var(--font-body); letter-spacing: normal; color: var(--text); }
.aecmd-acctpop label:hover { background: var(--card2); }
.aecmd-acctpop input[type="checkbox"] { flex: none; margin: 0; width: auto; }
.aecmd-acctall { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 8px; font-weight: 600; }
#aeCreateCamp { display: inline-flex; align-items: center; gap: 6px; }
#aeCreateCamp svg { width: 16px; height: 16px; }
/* headers: bold the AI-panel headers to match the bold .phead section headers */
.aecmd-aihead { font-weight: 700; color: var(--text); }

/* ---------- Create-campaign wizard ---------- */
.awwiz .swbody { min-height: 210px; }
.aw-goals { display: flex; flex-direction: column; gap: 8px; }
.aw-opt { text-align: left; border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.aw-opt:hover { border-color: var(--amber); }
.aw-opt.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.aw-opt b { font-size: var(--fs-4); color: var(--text); }
.aw-opt span { font-size: var(--fs-2); color: var(--muted); }
.aw-nets { display: flex; gap: 8px; flex-wrap: wrap; }
.aw-net { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 16px; background: var(--card); cursor: pointer; font-size: var(--fs-3); color: var(--text); }
.aw-net:hover { border-color: var(--amber); }
.aw-net.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
.awf { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.awf-l { font-size: var(--fs-2); color: var(--muted); font-family: var(--font-mono); letter-spacing: .03em; text-transform: uppercase; }
.awf-h { font-size: var(--fs-2); color: var(--dim); }
.awin { font-family: var(--font-body); font-size: var(--fs-4); color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; width: 100%; }
.awin:focus { outline: none; border-color: var(--amber); }
textarea.awin { resize: vertical; }
.awcheck { flex-direction: row; align-items: flex-start; gap: 9px; }
.awcheck input { margin-top: 3px; accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.aw-adv { margin-top: 10px; }
.aw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.awmoney { display: flex; align-items: center; }
.awmoney span { padding: 9px 11px; background: var(--card); border: 1px solid var(--line); border-right: 0; border-radius: var(--r-3) 0 0 var(--r-3); color: var(--muted); font-family: var(--font-mono); }
.awmoney .awin { border-radius: 0 var(--r-3) var(--r-3) 0; }
.awhint { font-size: var(--fs-2); color: var(--muted); margin: 12px 0 0; }
.aw-media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aw-media .btn, .aw-aicopy, .aw-success .btn { display: inline-flex; align-items: center; gap: 6px; }
.aw-media .btn svg, .aw-aicopy svg { width: 15px; height: 15px; }
.aw-airow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; margin-top: 12px; }
.aw-airow .btn { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.aw-airow .btn svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 560px) { .aw-airow { grid-template-columns: 1fr; } }
.aw-aicopy { margin-top: 10px; }
.aw-review { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.aw-rev-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px; border-top: 1px solid var(--line); }
.aw-rev-row:first-child { border-top: 0; }
.aw-rev-row span { color: var(--muted); font-size: var(--fs-3); }
.aw-rev-row b { color: var(--text); font-size: var(--fs-3); text-align: right; }
.aw-success { text-align: center; padding: 10px 4px; }
.aw-tick { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 999px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; }
.aw-tick svg { width: 26px; height: 26px; }
.aw-success p { color: var(--muted); font-size: var(--fs-4); margin: 6px 0 14px; }
.aw-aiwarn { color: var(--amber-deep); font-size: var(--fs-3); background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); padding: 10px 12px; margin: 0 0 14px; text-align: left; }
.aw-angles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.aw-angle { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; background: var(--card); cursor: pointer; font-size: var(--fs-2); color: var(--muted); font-family: var(--font-mono); }
.aw-angle:hover, .aw-angle:focus-visible { border-color: var(--amber); color: var(--amber-deep); outline: none; }
.aw-linkrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; }
.aw-linklink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--amber-deep); font-size: var(--fs-2); text-decoration: underline; }
.aw-linklink:hover, .aw-linklink:focus-visible { color: var(--amber); outline: none; }
.aw-count { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--dim); letter-spacing: .02em; }
.aw-count.over { color: var(--red, #d64545); font-weight: 700; }
@media (max-width: 720px) {
  .aecmd-ai { grid-template-columns: 1fr; }
  .aebrief-item { flex-wrap: wrap; }
  .aecamp { flex-wrap: wrap; }
}

.aecopy { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 24px; align-items: start; }
.aecopy-form { display: flex; flex-direction: column; gap: 12px; }
.aefield { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2); color: var(--muted);
  font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.aefield input, .aefield select { font-family: var(--font-body); font-size: var(--fs-4); text-transform: none;
  letter-spacing: 0; color: var(--text); background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 9px 11px; }
.aefield input:focus, .aefield select:focus { outline: none; border-color: var(--amber); }
.aeopt { color: var(--dim); text-transform: none; }
.aecopy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aecopy-form .btn { align-self: flex-start; }
.aehint { color: var(--dim); font-size: var(--fs-2); margin: 2px 0 0; letter-spacing: 0; }
.aecopy-out { min-width: 0; }
.aecopy-head { color: var(--dim); font-size: var(--fs-1); letter-spacing: .12em; margin-bottom: 10px; }
.aevar { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-4);
  padding: 14px 16px; margin-bottom: 12px; }
.aevar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aevar-head .mono { color: var(--dim); font-size: var(--fs-1); letter-spacing: .1em; }
.aevar-head .btn { margin-left: auto; padding: 4px 12px; font-size: var(--fs-3); }
.aescore { font-family: var(--font-mono); font-size: var(--fs-2); padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line2); color: var(--muted); }
.aescore.good { color: var(--green); border-color: var(--green); }
.aescore.bad { color: var(--red); border-color: var(--red); }
.aevar-line { display: flex; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.aevar-line:first-of-type { border-top: none; }
.aevar-line span { flex: none; width: 96px; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .06em; color: var(--dim); text-transform: uppercase; padding-top: 3px; }
.aevar-line b { font-weight: 500; color: var(--text); font-size: var(--fs-4); line-height: 1.4; }
.aevar-warn { color: var(--amber-deep); font-size: var(--fs-2); margin-top: 8px; }
@media (max-width: 780px) { .aecopy { grid-template-columns: 1fr; } }

/* ---------- Connections (full catalog) ---------- */
.connsummary { display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-5); padding: 16px 18px; margin-bottom: 20px; }
.connsum-txt b { display: block; font-size: var(--fs-5); color: var(--text); }
.connsum-txt span { font-size: var(--fs-3); color: var(--muted); }
.connsum-bar { flex: none; width: 120px; height: 8px; border-radius: var(--r-pill); background: var(--line);
  overflow: hidden; margin-left: auto; }
.connsum-bar i { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); transition: width .3s; }
.conngroup { margin-bottom: 22px; }
.conghead { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: var(--fs-1);
  letter-spacing: .12em; margin: 0 0 10px; }
.congcount { color: var(--muted); }
.conncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.conncard { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line2);
  border-radius: var(--r-5); padding: 15px 16px; display: flex; flex-direction: column; }
.conncard.live { border-left-color: var(--green); }
.conncard.warn { border-left-color: var(--amber); }
.conncard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.connpill { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em; padding: 2px 9px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--dim); text-transform: uppercase; }
.connpill.live { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.connpill.warn { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.connpill.sm { font-size: var(--fs-1); padding: 1px 7px; }
.connscope { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); text-transform: uppercase; }
.connscope.fleet { color: var(--amber-deep); }
.conncard-name { font-size: var(--fs-5); color: var(--text); margin: 2px 0; }
.conncard-hint { font-size: var(--fs-3); color: var(--muted); line-height: 1.45; margin: 0 0 8px; }
.conncard-detail { font-size: var(--fs-2); color: var(--dim); margin: 0 0 10px; word-break: break-word;
  font-family: var(--font-mono); }
.conncard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.conncard-actions .btn { padding: 6px 12px; font-size: var(--fs-3); }
/* per-network connect-status strip on the Social accounts card */
.connnets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.connnet { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); font-size: var(--fs-2);
  color: var(--dim); background: var(--card2); }
.connnet svg { width: 13px; height: 13px; }
.connnet.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- Social connect hero (the request -> 72h link -> analytics cycle) ---------- */
.shero { background: linear-gradient(180deg, var(--card), var(--card2)); border: 1px solid var(--line);
  border-left: 3px solid var(--line2); border-radius: var(--r-5); padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); }
.shero.live { border-left-color: var(--green); }
.shero.warn { border-left-color: var(--amber); }
.shero.off { border-left-color: var(--line2); }
.shero-top { display: flex; align-items: flex-start; gap: 12px; }
.shero-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--amber-soft);
  color: var(--amber-deep); display: flex; align-items: center; justify-content: center; }
.shero-ic .bic { width: 22px; height: 22px; margin: 0; }
.shero-txt { min-width: 0; flex: 1 1 auto; }
.shero-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.shero-h b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); color: var(--text); }
.shero-exp { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em; color: var(--amber-deep); }
.shero-txt p { color: var(--muted); font-size: var(--fs-4); margin: 4px 0 0; max-width: 64ch; }
.shero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.shsteps { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line2); }
.shstep { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.shstep i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: 0 0 auto; }
.shstep.on { color: var(--amber-deep); } .shstep.on i { background: var(--amber); }
.shstep.done { color: var(--green); } .shstep.done i { background: var(--green); }
@media (max-width: 640px) {
  .shero-top { flex-wrap: wrap; }
  .shero-cta { align-items: stretch; width: 100%; }
  .shero-cta .btn { justify-content: center; }
}

/* branded connect handoff (Option A): the secure sign-in framed in GrowFleet -
   partner page opens in a popup, the result is confirmed and shown here. */
.cxhand-lead { display: flex; align-items: flex-start; gap: 12px; }
.cxhand-lead p { margin: 0; color: var(--muted); font-size: var(--fs-4); line-height: 1.55; }
.cxhand-lead p b { color: var(--text); }
.cxhand-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-3);
  background: var(--amber-soft); color: var(--amber-deep);
  display: flex; align-items: center; justify-content: center; }
.cxhand-ic .bic { width: 20px; height: 20px; margin: 0; }
.cxhand-ic.ok { background: var(--green-soft); color: var(--green); }
.cxhand-ic.warn { background: var(--amber-soft); color: var(--amber-deep); }
.cxhand-spin { flex: 0 0 auto; width: 26px; height: 26px; margin: 3px 6px 0; border-radius: 999px;
  border: 2.5px solid var(--amber); border-top-color: transparent; animation: bpspin .8s linear infinite; }
.cxhand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.cxhand-chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-3); color: var(--text);
  border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 5px 12px; background: var(--card); }
.cxhand-gl { flex: 0 0 auto; display: inline-flex; }
.cxhand-gl svg { width: 15px; height: 15px; }
.cxhand-rows { display: grid; gap: 8px; margin: 14px 0 2px; }
.cxhand-row { display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 12px; }
.cxhand-net { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-4); color: var(--text); }
.cxhand-net .cxhand-gl svg { width: 18px; height: 18px; }
.cxhand-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: var(--fs-3); }
.cxhand-ok .bic { width: 14px; height: 14px; margin: 0; }
.cxhand-cta { flex-wrap: wrap; margin-top: 16px; }
.cxhand-foot { margin: 14px 0 0; font-size: var(--fs-3); color: var(--dim); }

/* WLI iframe connect: the partner's white-label connect surface embedded in a
   GrowFleet modal (SPEC_WLI_IFRAME_CONNECT). Desktop / non-Safari only - the
   popup handoff covers Safari/iOS and any failure. */
.npmodal.cxframe { width: min(900px, 96vw); }
.cxframe-lead { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-4); line-height: 1.5; }
.cxframe-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r-3);
  overflow: hidden; background: var(--card2); height: min(70vh, 620px); }
.cxframe-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--card2); transition: opacity .25s ease; }
.cxframe-stage.ready .cxframe-load { opacity: 0; pointer-events: none; }
.cxframe-if { width: 100%; height: 100%; border: 0; display: block; }
.cxframe-cta { margin-top: 14px; align-items: center; gap: 14px; flex-wrap: wrap; }

/* managed-for-you line (fleet infra collapsed; no vendor names, no fields) */
.mgline { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--r-3); padding: 12px 15px; margin: 0 0 16px; }
.mgline.wait { border-left-color: var(--amber); }
.mgic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-3); background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center; }
.mgline.wait .mgic { background: var(--amber-soft); color: var(--amber-deep); }
.mgic .bic { width: 18px; height: 18px; margin: 0; }
.mgtxt b { display: block; font-size: var(--fs-4); color: var(--text); }
.mgtxt span { font-size: var(--fs-3); color: var(--muted); }

/* locked connection card + lock badge (plan gate -> upgrade) */
.conncard.locked { border-left-color: var(--amber); }
.connpill.lock { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft);
  display: inline-flex; align-items: center; gap: 3px; }
.connpill.lock .bic { width: 11px; height: 11px; margin: 0; }
.connpill.sm.lock .bic { width: 10px; height: 10px; }

/* The one connection pop-up (openConn): description + fields + how-to + where-used.
   The `.cxguide` set is container-agnostic so the WhatsApp tab reuses it verbatim. */
.connhelp .chdesc { font-size: var(--fs-4); color: var(--text); line-height: 1.55; margin: 0; }
.connhelp .cxerr { margin: 12px 0 0; padding: 9px 12px; border-radius: var(--r-3); font-size: var(--fs-3);
  line-height: 1.45; color: var(--text); background: rgba(220, 38, 38, .09); border: 1px solid rgba(220, 38, 38, .4); }
.connhelp .cxlocknote { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: var(--fs-3);
  color: var(--amber-deep); }
.connhelp .cxlocknote .bic { width: 14px; height: 14px; margin: 0; }
/* field rows */
.cxform { display: grid; gap: 3px; margin-top: 16px; }
.cxform .cxf-l { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 11px; }
.cxform .cxf-l:first-child { margin-top: 0; }
.cxform .cxf-i { width: 100%; padding: 11px 13px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); font-size: var(--fs-4);
  /* credentials are machine strings (IDs, keys, tokens, domains) - mono reads
     cleaner and makes a mistyped character obvious. Dropdowns stay in the UI font. */
  font-family: var(--font-mono); letter-spacing: .01em; }
.cxform select.cxf-i { font-family: var(--font-body); font-size: var(--fs-5); letter-spacing: 0; }
.cxform .cxf-i:focus { outline: none; border-color: var(--amber); background: var(--card); }
.cxform .cxf-i::placeholder { color: var(--dim); opacity: .7; }
.cxform .cxf-h { font-size: var(--fs-3); color: var(--dim); margin: 3px 0 0; }
/* SecretInput: a reveal toggle sits inside secret fields only (tokens, keys) */
.secwrap { position: relative; display: flex; }
.secwrap .cxf-i { padding-right: 44px; }
.secshow { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
  cursor: pointer; color: var(--dim); border-radius: var(--r-3); }
.secshow:hover { color: var(--amber-deep); background: var(--amber-soft); }
.secshow:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.secshow .bic { width: 17px; height: 17px; margin: 0; }
/* browser autofill must keep the design's field colours, not a blue/yellow tint */
.cxf-i:-webkit-autofill, .cxf-i:-webkit-autofill:hover, .cxf-i:-webkit-autofill:focus,
.kvform .kv input:-webkit-autofill, .field input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--card2) inset;
  box-shadow: 0 0 0 1000px var(--card2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
/* how-to + where-used blocks (shared with the WhatsApp form) */
.cxguide { margin-top: 18px; }
.cxguide-h { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim); margin-bottom: 9px; }
.cxsteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.cxsteps li { font-size: var(--fs-4); color: var(--muted); line-height: 1.5; }
.cxsteps li::marker { color: var(--amber-deep); font-family: var(--font-mono); font-weight: 600; }
.cxdoc { margin-top: 12px; }
.cxlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.cxactions { margin-top: 18px; }
.connhelp a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.cxgo, .cxlink { font-size: var(--fs-3); }
a.cxlink { text-decoration: none; display: inline-flex; align-items: center; }
/* the WhatsApp connect form (tab) reuses the guide blocks; give them room */
/* WhatsApp connect: form + setup guide side by side on desktop, stacked on
   mobile - a modern connect-page layout built from the existing .cxform/.cxguide. */
.waconnect { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .waconnect { grid-template-columns: minmax(0,1fr) minmax(0,340px); gap: 28px; } }
.waconnect .cxform { margin-top: 0; }
.waconnect .waguide-col { align-self: stretch; }
.waconnect .waguide-col .cxguide { margin-top: 0; }
@media (min-width: 900px) { .waconnect .waguide-col .cxguide { height: 100%; } }
/* WhatsApp panels lead with the house .phead like every other panel */
#waStatus .cxguide { margin-top: 14px; padding: 14px 16px; background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--r-3); }

/* FIX (cascade): `.npmodal .hint` (network-preview caption) was narrowing +
   centering the intro in EVERY gfForm modal. Forms are full-width, left-aligned. */
.gfdlg .hint, .connhelp .hint { max-width: none; margin-left: 0; margin-right: 0; }
/* long connection titles (e.g. "Meta Ads (Facebook + Instagram)") must wrap, not
   force the modal wider than a phone (.pheadflex is white-space:nowrap by default). */
.connhelp .pheadflex { white-space: normal; }
.connhelp .cxtt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }

/* Shopify connect wizard (openShopifyWizard): stepped onboarding modal */
/* Flex column so the action footer stays PINNED + always visible: header +
   stepper fixed, the body scrolls internally, nav pinned at the bottom. Without
   this the whole modal scrolled (base .npmodal) and Back/Connect fell off the
   bottom on a tall connector (e.g. Meta Ads' four fields). */
.connwiz { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.connwiz .swhead { flex: none; display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line); }
.connwiz .swico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-3); display: inline-flex;
  align-items: center; justify-content: center; background: var(--amber-soft); color: var(--amber-deep); }
.connwiz .swico .bic { width: 24px; height: 24px; margin: 0; }
.connwiz .swhead-t { flex: 1 1 auto; min-width: 0; }
.connwiz .swtitle { font-size: var(--fs-6); font-weight: 700; color: var(--text); line-height: 1.25; }
.connwiz .swsub { font-size: var(--fs-3); color: var(--muted); margin-top: 3px; line-height: 1.45; }
.connwiz .ppclose { flex: 0 0 auto; }
/* stepper */
.connwiz .swstepper { flex: none; display: flex; padding: 16px 22px 4px; }
.connwiz .swstep { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* connector track sits in the GAP between the circles (dot radius 13.5px + a
   4.5px breather each side), never through/behind them - so it can't overlap a
   semi-transparent "done" dot. z-index below the dots as a belt-and-braces. */
.connwiz .swstep::after { content: ""; position: absolute; top: 12.5px; left: calc(50% + 18px);
  right: calc(-50% + 18px); height: 2px; background: var(--line2); z-index: 0; }
.connwiz .swstep:last-child::after { display: none; }
.connwiz .swstep.did::after { background: var(--amber); }
.connwiz .swdot { position: relative; z-index: 1; width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2); font-weight: 700;
  background: var(--card2); color: var(--dim); border: 2px solid var(--line2); }
.connwiz .swstep.on .swdot { background: var(--amber); color: #1a1205; border-color: var(--amber); }
.connwiz .swstep.did .swdot { background: var(--amber-soft); color: var(--amber-deep); border-color: var(--amber); }
.connwiz .swlbl { font-size: var(--fs-1); color: var(--dim); text-align: center; line-height: 1.2; letter-spacing: .01em; }
.connwiz .swstep.on .swlbl { color: var(--text); font-weight: 600; }
/* body + panels */
.connwiz .swbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 22px 4px; }
.connwiz .swpanel { animation: swfade .18s ease; }
@keyframes swfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.connwiz .swh { font-size: var(--fs-5); font-weight: 700; color: var(--text); margin: 0 0 8px; outline: none; }
.connwiz .swp { font-size: var(--fs-4); color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.connwiz .swsteps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.connwiz .swsteps li { font-size: var(--fs-4); color: var(--muted); line-height: 1.5; }
.connwiz .swsteps li::marker { color: var(--amber-deep); font-weight: 600; }
/* collapsible step: clear summary collapsed, detailed true sub-steps expanded */
.connwiz .swacc { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); overflow: hidden; }
.connwiz .swacc-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: var(--fs-4); font-weight: 600; color: var(--text); line-height: 1.4; }
.connwiz .swacc-sum::-webkit-details-marker { display: none; }
.connwiz .swacc-sum:hover { background: var(--amber-soft); }
.connwiz .swacc-sum:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.connwiz .swacc-t { flex: 1 1 auto; min-width: 0; }
.connwiz .swacc-chev { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg); transition: transform .18s ease; }
.connwiz details[open] > .swacc-sum .swacc-chev { transform: rotate(-135deg); }
.connwiz details[open] > .swacc-sum { border-bottom: 1px solid var(--line); background: var(--amber-soft); }
.connwiz .swacc-det { padding: 12px 14px 14px; }
.connwiz .swacc-sub { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.connwiz .swacc-sub li { font-size: var(--fs-3); color: var(--muted); line-height: 1.5; }
.connwiz .swacc-sub li::marker { color: var(--amber-deep); }
.connwiz .swacc-det .swbtns { margin-top: 12px; }
.connwiz .swbtns { display: flex; flex-wrap: wrap; gap: 10px; }
/* generic connector wizard: section kicker label, where-used chips */
.connwiz .swkicker { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em;
  color: var(--dim); margin-bottom: 9px; }
.connwiz .swused { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.connwiz .swchip { font-size: var(--fs-3); }
.connwiz .swpanel .cxform { margin-top: 16px; }
.connwiz .swpanel + .swused { margin-top: 0; }
/* GDPR "what it uses & your data" disclosure block (connUsesBlock) - used in the
   connect wizards AND the Connections-tab "what we store" section, so unscoped. */
.swuses { margin-top: 16px; }
.swuse-row { display: grid; grid-template-columns: 116px 1fr; gap: 4px 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line); align-items: start; }
.swuse-row:last-child { border-bottom: 0; }
.swuse-k { font-size: var(--fs-1); letter-spacing: .04em; color: var(--dim);
  text-transform: uppercase; padding-top: 1px; }
.swuse-v { font-size: var(--fs-3); color: var(--muted); line-height: 1.5; }
.swuse-v code { font-family: var(--font-mono); color: var(--amber-deep); }
@media (max-width: 560px) { .swuse-row { grid-template-columns: 1fr; gap: 2px; } }
/* Connections-tab "what we store - every connection & your data" collapsible */
.conndata { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card, var(--bg)); }
.conndata > .cd-sum { padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-weight: 600; list-style: none; }
.conndata > .cd-sum::-webkit-details-marker { display: none; }
.conndata > .cd-sum .bic { width: 17px; height: 17px; flex: 0 0 auto; }
.conndata > .cd-sum > span:first-of-type { flex: 1; }
.cd-chev { width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg); transition: transform .15s ease; flex: 0 0 auto; margin-right: 4px; }
.conndata[open] > .cd-sum .cd-chev { transform: rotate(-135deg); }
.cd-body { padding: 0 16px 16px; }
.cd-intro { font-size: var(--fs-3); color: var(--muted); margin: 0 0 6px; }
.cd-cat { font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 18px 0 8px; }
.cd-card { border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--dim)); border-radius: var(--r-3);
  padding: 12px 14px 11px; margin: 8px 0; background: var(--bg); }
.cd-card.none { border-left-color: var(--green); }
.cd-card.stores { border-left-color: var(--red); }
.cd-card.outbound { border-left-color: var(--amber-deep, #b3730f); }
.cd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cd-card-h b { font-size: var(--fs-4); }
.cd-chip { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.cd-chip.good { color: var(--green); background: var(--green-soft); }
.cd-chip.crit { color: var(--red); background: var(--red-soft); }
.cd-chip.warn { color: var(--amber-deep, #b3730f); background: rgba(179,115,15,.12); }
.cd-chip.neutral { color: var(--muted); background: var(--line); }
.conndata-act { margin: 12px 0 2px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.conndata-act .bic { width: 15px; height: 15px; }
.conndata-note { font-size: var(--fs-2); color: var(--muted); flex: 1 1 240px; line-height: 1.5; }
@media (max-width: 560px) { .cd-card-h { flex-wrap: wrap; } }
.connwiz .swopen { font-size: var(--fs-3); text-decoration: none; display: inline-flex; align-items: center;
  gap: 5px; flex-wrap: wrap; white-space: normal; max-width: 100%; text-align: left; }
.connwiz .swopen .bic { width: 14px; height: 14px; margin: 0; }
/* long deep-link labels inside a collapsible step must wrap, not get clipped by the
   card's overflow:hidden, at phone width */
.connwiz .swacc-det .swbtns { display: block; }
.connwiz .swacc-det .swopen { width: 100%; }
.connwiz .swnt { font-size: var(--fs-1); color: var(--dim); }
.connwiz .swhint { font-size: var(--fs-3); color: var(--dim); margin: 12px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.connwiz .swhint .bic { width: 14px; height: 14px; margin: 0; }
.connwiz .swhint a { color: var(--amber-deep); }
.connwiz .swnote { font-size: var(--fs-3); color: var(--muted); margin: 12px 0 0; display: flex; gap: 7px;
  padding: 9px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); }
.connwiz .swnote .bic { width: 15px; height: 15px; margin: 2px 0 0; flex: 0 0 auto; color: var(--amber-deep); }
/* copy-to-clipboard scope chips */
.connwiz .swscopes { display: flex; flex-wrap: wrap; gap: 10px; }
.connwiz .swscope { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; font-size: var(--fs-3); }
.connwiz .swscope code { font-family: var(--font-mono); color: var(--amber-deep); }
.connwiz .swscope .bic { width: 14px; height: 14px; margin: 0; color: var(--dim); }
.connwiz .swscope:hover { border-color: var(--amber); }
.connwiz .swscope.copied { border-color: var(--green, #16a34a); }
.connwiz .swscope.copied .bic { color: var(--green, #16a34a); }
.connwiz .swremind { font-size: var(--fs-3); color: var(--muted); margin: 14px 0 0; display: flex; align-items: center; gap: 7px; }
.connwiz .swremind .bic { width: 15px; height: 15px; margin: 0; color: var(--green, #16a34a); }
.connwiz .swremind code { font-family: var(--font-mono); color: var(--amber-deep); }
.connwiz .cxform { margin-top: 4px; }
/* footer nav */
.connwiz .cxerr { flex: none; margin: 12px 22px 0; }
.connwiz .swnav { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 22px 18px;
  border-top: 1px solid var(--line); background: var(--card); }
.connwiz .swspacer { flex: 1 1 auto; }
/* quiet, always-visible "Need help?" link -> Support (kept low-emphasis so it never
   competes with the primary action; contextual help placement per WCAG G71) */
.connwiz .cw-help { background: none; border: 0; padding: 6px 2px; margin-right: 4px; font-family: inherit;
  font-size: var(--fs-3); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.connwiz .cw-help:hover { color: var(--amber-deep); text-decoration: underline; }
.connwiz .cw-help .bic { width: 15px; height: 15px; margin: 0; }
/* per-field inline error (message beside the field, not a toast - NN/g) */
.cxf-err { font-size: var(--fs-3); line-height: 1.4; color: var(--red); margin: 6px 0 0; }
.cxform .cxf-i.bad, .secwrap .secin.bad { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
/* success */
.connwiz .swdone { text-align: center; padding: 14px 8px 8px; }
.connwiz .swtick { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--amber-soft); color: var(--amber-deep); margin-bottom: 12px; }
.connwiz .swtick .bic { width: 30px; height: 30px; margin: 0; }
.connwiz .swdone h3 { font-size: var(--fs-5); font-weight: 700; color: var(--text); margin: 0 0 6px; }
.connwiz .swdone p { font-size: var(--fs-4); color: var(--muted); line-height: 1.55; margin: 0; }
/* success: granted scopes + what GrowFleet can do */
.connwiz .swgrantbox { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.connwiz .swglabel { font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 9px; }
.connwiz .swgrants { display: flex; flex-wrap: wrap; gap: 8px; }
.connwiz .swgrants-ro { margin-bottom: 18px; }
.connwiz .swgrant { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); font-size: var(--fs-3); }
.connwiz .swgrant code { font-family: var(--font-mono); color: var(--amber-deep); }
.connwiz .swgrant .bic { width: 13px; height: 13px; margin: 0; color: var(--green, #16a34a); }
.connwiz .swcaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.connwiz .swcaps li { display: flex; align-items: flex-start; gap: 11px; }
.connwiz .swcaps .ci { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-3); background: var(--amber-soft); color: var(--amber-deep); margin-top: 1px; }
.connwiz .swcaps .ci.ro { background: var(--card2); color: var(--dim); }
.connwiz .swcaps .ci .bic { width: 16px; height: 16px; margin: 0; }
.connwiz .swcaps b { display: block; font-size: var(--fs-4); font-weight: 650; color: var(--text); }
.connwiz .swcaps .swcd { display: block; font-size: var(--fs-3); color: var(--muted); line-height: 1.5; margin-top: 1px; }
.connwiz .swuse { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-3); background: var(--amber-soft);
  color: var(--text); font-size: var(--fs-3); line-height: 1.55; display: flex; align-items: flex-start; gap: 9px; }
.connwiz .swuse b { font-weight: 650; }
.connwiz .swuse .bic { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; color: var(--amber-deep); }
@media (max-width: 430px) {
  .connwiz .swhead, .connwiz .swstepper, .connwiz .swbody, .connwiz .swnav { padding-left: 16px; padding-right: 16px; }
  .connwiz .swlbl { font-size: 0.625rem; }
}

/* Connections quick-glance popup (from the header) */
.connpop { align-items: flex-start; justify-content: flex-end; }
.connpop-panel { position: relative; z-index: 1; width: min(360px, 94vw); max-height: 82vh; overflow-y: auto;
  margin: 60px 20px 0 0; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-5);
  box-shadow: var(--shadow); }
.connpop .phead { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.connpop-body { padding: 12px 14px; }
.connpop-sum { margin-bottom: 10px; }
.connpop-grp { margin-bottom: 12px; }
.connpop-cat { display: flex; gap: 6px; color: var(--dim); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px; }
.connpop-cat span { color: var(--muted); }
.connpop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px dashed var(--line); }
.connpop-row:first-of-type { border-top: none; }
.connpop-name { font-size: var(--fs-4); color: var(--text); }
.connpop-fleet { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--amber-deep); letter-spacing: .05em; }
.connpop-foot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.connpop-foot .btn { width: 100%; }
/* popover PRIMARY row (social publishing = the brand's real connection) + the
   managed-services line, so the popover leads with the true connection state */
.connpop-hero { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--r-3); margin-bottom: 10px; cursor: pointer; }
.connpop-hero.wait, .connpop-hero.off { border-left-color: var(--amber); }
.connpop-hero:hover { border-color: var(--line2); }
.connpop-hero .mgic { width: 28px; height: 28px; }
.connpop-hero.wait .mgic, .connpop-hero.off .mgic { background: var(--amber-soft); color: var(--amber-deep); }
.connpop-herotx { min-width: 0; }
.connpop-heroh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.connpop-heroh b { font-size: var(--fs-4); color: var(--text); }
.connpop-herotx > span { display: block; font-size: var(--fs-3); color: var(--muted); margin-top: 2px; line-height: 1.35; }
.connpop-managed { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px dashed var(--line);
  border-radius: var(--r-3); margin-bottom: 12px; }
.connpop-managed .cmic { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--green); }
.connpop-managed.wait .cmic { color: var(--amber-deep); }
.connpop-managed .cmic .bic { width: 16px; height: 16px; margin: 0; }
.connpop-mgtx { flex: 1; min-width: 0; font-size: var(--fs-3); color: var(--muted); }
.connpop-optlead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px;
  padding-top: 10px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-1); letter-spacing: .1em; text-transform: uppercase; }
.connpop-optlead span { color: var(--muted); letter-spacing: .04em; }
/* connected network glyphs in the primary hero (which accounts are live) */
.connpop-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.connpop-net { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); background: var(--card); }
.connpop-net svg { width: 15px; height: 15px; }
/* each optional add-on row is a button that opens that connection's setup */
button.connpop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px dashed var(--line);
  cursor: pointer; padding: 8px 6px; border-radius: var(--r-3); }
button.connpop-row:first-of-type { border-top: none; }
button.connpop-row:hover { background: var(--amber-soft); }
button.connpop-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.connpop-act { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap;
  font-size: var(--fs-2); font-weight: 600; }
.connpop-act.set, .connpop-act.warn, .connpop-act.lock { color: var(--amber-deep); }
.connpop-act.live { color: var(--green); }
.connpop-act .bic { width: 13px; height: 13px; }
.connpop-act .bic svg { width: 13px; height: 13px; }

/* ---------- Build-batch progress ---------- */
.bpmodal { position: relative; z-index: 1; width: min(420px, 92vw); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-5); padding: 26px 26px 22px; text-align: center;
  box-shadow: var(--shadow-lg); }
.bp-ico { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; background: var(--amber-soft); color: var(--amber-deep);
  font-size: var(--fs-7); font-weight: 700; }
.bp-ico.ok { background: var(--green-soft); color: var(--green); }
.bp-ico.warn { background: var(--red-soft); color: var(--red); }
.bp-spin { width: 22px; height: 22px; border-radius: 999px; border: 2.5px solid var(--amber);
  border-top-color: transparent; animation: bpspin .8s linear infinite; }
@keyframes bpspin { to { transform: rotate(360deg); } }
.bp-title { display: block; font-size: var(--fs-6); color: var(--text); margin-bottom: 4px; }
.bp-sub { color: var(--muted); font-size: var(--fs-4); margin: 0 0 16px; min-height: 2.4em; line-height: 1.4; }
.gfpb { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.gfpb i { display: block; height: 100%; width: 6%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber), var(--amber-bright)); transition: width .45s ease; }
.gfpb.indet::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgba(255,173,51,.55), transparent);
  transform: translateX(-100%); animation: bpshim 1.15s ease-in-out infinite; }
@keyframes bpshim { to { transform: translateX(100%); } }
.bp-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.bp-actions .btn { padding: 8px 16px; font-size: var(--fs-4); }

/* ---------- per-network caption customisation ---------- */
.opt { font-weight: 400; color: var(--dim); font-size: var(--fs-2); text-transform: none; letter-spacing: 0; }
.pnwrap { border: 1px solid var(--line); border-radius: var(--r-4); margin: 4px 0 8px; background: var(--card2); overflow: hidden; }
.pnwrap.hascustom { border-color: var(--amber); }
.pnhead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none;
  border: none; cursor: pointer; text-align: left; font-family: var(--font-body); }
.pnhead-t { font-weight: 600; color: var(--text); font-size: var(--fs-4); }
.pnstate { margin-left: auto; color: var(--dim); font-size: var(--fs-2); }
.pnwrap.hascustom .pnstate { color: var(--amber-deep); }
.pnchev { display: inline-flex; color: var(--dim); transition: transform .18s; }
.pnchev .bic svg { width: 15px; height: 15px; }
.pnwrap.open .pnchev { transform: rotate(90deg); }
/* keep the summary row on ONE line: only the long title shrinks/ellipsizes;
   the ? help dot, state label and chevron stay put and never wrap off-line */
.pnhead-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnhead .tipdot, .pnhead .pnstate, .pnhead .pnchev { flex: none; }
.pnhead .pnstate, .pnhead .pnchev { white-space: nowrap; }
/* a phone: the one-line summary squeezed the title to its first letter (375px) - the
   title keeps line 1 with its ? and chevron, the state label drops to line 2 */
@media (max-width: 760px) {
  .pnhead { flex-wrap: wrap; row-gap: 2px; }
  .pnhead-t { flex: 0 1 auto; white-space: normal; }
  .pnhead .pnchev { order: 2; margin-left: auto; }
  .pnhead .pnstate { order: 3; flex-basis: 100%; margin-left: 0; white-space: normal; }
}
.pnbody { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.pnhint { color: var(--muted); font-size: var(--fs-3); margin: 10px 0 12px; line-height: 1.45; }
.pnhint b { color: var(--text); }
.pnactions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pncard { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px; margin-bottom: 10px;
  background: var(--card); transition: border-color .15s; }
.pncard.custom { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.pncard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pnprev { font-size: var(--fs-2); }
.pncard-head b { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .1em; color: var(--text); }
.pnsame { font-size: var(--fs-1); color: var(--dim); font-family: var(--font-mono); }
.pncount { font-size: var(--fs-2); color: var(--dim); font-family: var(--font-mono); }
.pncount.warn { color: var(--amber-deep); }
.pncount.bad { color: var(--red); font-weight: 700; }
.pnreset { font-size: var(--fs-2); }
.pntext, .pnfc { width: 100%; min-height: 62px; resize: vertical; border: 1px solid var(--line2);
  border-radius: var(--r-3); padding: 8px 10px; font-family: var(--font-body); font-size: var(--fs-4);
  color: var(--text); background: var(--card2); box-sizing: border-box; }
.pnfc { min-height: 42px; margin-top: 8px; }
.pntext:focus, .pnfc:focus { outline: none; border-color: var(--amber); }
.pnfc-toggle { margin-top: 6px; font-size: var(--fs-2); display: inline-block; }
.pnnote { color: var(--dim); font-size: var(--fs-2); margin: 6px 0 0; }

/* ---------- different media per network (parallels the caption .pncard) ---------- */
.pmcard { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px; margin-bottom: 10px;
  background: var(--card); transition: border-color .15s; display: flex; flex-direction: column; gap: 8px; }
.pmcard.custom { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.pmcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmcard-head b { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: .1em; color: var(--text); }
.pmstat { font-size: var(--fs-1); color: var(--dim); font-family: var(--font-mono); }
.pmstat.on { color: var(--amber-deep); }
.pmreset { font-size: var(--fs-2); }
/* the per-network media strip mirrors the main post strip (.mth), sized for the card.
   the x removes just from THIS network, so it is always shown here (not hover-gated) -
   removing is a primary action, which is what customising a network is about. */
.pmstrip { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.pmstrip .mth { width: 52px; height: 52px; border-radius: var(--r-3); }
.pmstrip .mth .ord { top: 2px; left: 3px; font-size: var(--fs-1); padding: 0 4px; }
.pmstrip .mth .mthx { width: 18px; height: 18px; font-size: var(--fs-3); top: -7px; right: -7px; opacity: 1; }
.pmadd { align-self: center; min-height: 52px; padding: 0 12px; border-style: dashed; color: var(--dim); }
.pmadd:hover { color: var(--text); border-color: var(--amber); }
.pmreorder { flex-basis: 100%; margin-top: 2px; }
.pmnomedia { font-size: var(--fs-2); color: var(--dim); line-height: 1.4; }
/* compact (collapsed) card: one line - name + tiny preview + "customise". Only a
   network that differs from your main media opens into the full editable strip. */
.pmcard.open { border-color: var(--line); }
.pmcompact { flex-wrap: nowrap; }
.pmcompact .pmsame { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pmcompact b, .pmcompact .pmmini, .pmcompact .pmcustomise { flex: none; }
.pmministrip { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pmmini { width: 26px; height: 26px; border-radius: var(--r-2); background: var(--card2) center/cover;
  border: 1px solid var(--line2); flex: none; position: relative; }
.pmmini.vid::after { content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-1); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pmsame { font-size: var(--fs-1); color: var(--dim); font-family: var(--font-mono); }
.pmmore { align-self: center; background: var(--card2); color: var(--dim); font-family: var(--font-mono);
  font-size: var(--fs-1); line-height: 1; padding: 3px 6px; border-radius: var(--r-pill); border: 1px solid var(--line2); }
.pmcustomise { flex: none; }

/* ---------- growth tools (agent / plugs / links / sets) ---------- */
#tab-growth .panel { margin-bottom: 18px; }
.gform { display: grid; gap: 10px; margin-bottom: 14px; }
.gform input, .gform textarea, .gform select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-3);
  background: var(--card2); color: var(--text); font: 500 .9rem var(--font-body); }
.gform textarea { resize: vertical; }
.gform input:focus, .gform textarea:focus, .gform select:focus {
  outline: none; border-color: var(--amber); }
.glab { color: var(--muted); font-size: var(--fs-2); letter-spacing: .04em; margin-top: 2px; }
.gnum { max-width: 120px; }
#agResult .aglabel { display: block; color: var(--muted); font-size: var(--fs-2); margin: 12px 0 4px; }
#agResult textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); color: var(--text); font: 500 .9rem var(--font-body); }
.agnets { margin: 6px 0; }
.grow { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--card); padding: 12px 14px; margin-bottom: 10px; }
.grow.off { opacity: .6; }
.growmain { flex: 1; min-width: 0; font-size: var(--fs-4); }
.growmain b { word-break: break-word; }
.growsub { display: block; color: var(--muted); font-size: var(--fs-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow .actions { margin: 0; flex-shrink: 0; }
.gpad { padding: 10px 2px; }
/* Link Tracking manager: search + sort + filter-chip toolbar. Wraps on narrow widths so
   it never sideways-scrolls; the search grows to fill the row. */
.lktoolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.lktoolbar .minisearch { flex: 1 1 200px; min-width: 0; }
.lktoolbar .filterchips { flex: 0 1 auto; }
/* Row select checkbox for bulk actions - fixed size, never stretched by a form input rule. */
#lkList .lkcheck { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.lkbulk { margin: 0 0 12px; }
/* A link row carries five controls (clicks pill + Copy/Edit/Hide/Delete). To keep the short
   URL readable on one line at ANY content width (the panel column is far narrower than the
   viewport once the sidebar is subtracted), let the row wrap the action strip onto its own
   line rather than squeezing the URL to a char-per-line column. Scoped to #lkList so the
   shared .grow rows on Growth Plugs / Post Sets are untouched. */
#lkList .grow { flex-wrap: wrap; }
#lkList .growmain { flex: 1 1 240px; }
#lkList .growmain b { word-break: normal; overflow-wrap: anywhere; }
#lkList .grow .actions { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  #lkList .grow .actions { justify-content: flex-start; }
}
.gfireh { margin-top: 14px; }
.gfire { color: var(--muted); font-size: var(--fs-3); padding: 5px 2px; border-bottom: 1px solid var(--line); }
.gfunnel { display: grid; gap: 6px; }
.gfrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 8px;
  align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--card2); font-size: var(--fs-3); }
@media (max-width: 720px) { .gfrow { grid-template-columns: 1fr 1fr; } }
/* composer link-shortening toggle (feature E, in the post editor) */
.ppbody .dshorten { display: flex; margin: 2px 0 12px; }
/* first-comment quick actions (+ use hashtags / generate with AI) */
.fcactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }

/* ---------- per-network connection cards (Connections tab) ---------- */
.cxwrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px; margin: 6px 0 22px; }
.cxcard { border: 1px solid var(--line2); border-radius: var(--r-4); background: var(--card);
  padding: 14px 15px 12px; display: flex; flex-direction: column; min-width: 0; }
.cxcard.cxoff { background: var(--card2); }
.cxtop { display: flex; align-items: center; gap: 10px; }
.cxglyph { flex: 0 0 auto; display: inline-flex; }
.cxglyph svg { width: 26px; height: 26px; }
.cxname { min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.cxname b { display: block; font-size: var(--fs-4); color: var(--text); }
.cxname span { font-size: var(--fs-2); color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }
.cxpill { flex: 0 0 auto; font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--green); border-radius: var(--r-pill); padding: 2px 8px; }
.cxhero { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  margin: 12px 0 4px; }
.cxheronum { min-width: 0; }
.cxbig { font-size: var(--fs-8); line-height: 1; color: var(--text); }
.cxlbl { font-size: var(--fs-2); letter-spacing: .05em; color: var(--dim); margin-left: 4px; }
.cxdelta { display: inline-block; font-size: var(--fs-2); margin-left: 6px; font-weight: 600; }
.cxdelta.up { color: var(--green); }
.cxdelta.dn { color: var(--red); }
.cxspark { width: 116px; height: 32px; flex: 0 0 auto; opacity: .9; }
.cxmetrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.cxchip { font-size: var(--fs-2); color: var(--text); background: var(--card2);
  border: 1px solid var(--line2); border-radius: var(--r-3); padding: 4px 8px; }
.cxchip i { color: var(--dim); font-style: normal; margin-right: 5px; font-size: var(--fs-2);
  text-transform: uppercase; letter-spacing: .04em; }
.cxoffmsg { font-size: var(--fs-3); color: var(--dim); margin: 10px 0 12px; }
.cxfoot { font-size: var(--fs-1); letter-spacing: .03em; color: var(--dim); margin: 8px 0 0; }
/* Pinterest board control on the connected card (choose the board pins publish to) */
.cxboard { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-3); font-size: var(--fs-3); }
.cxboard.set { background: var(--green-soft); color: var(--text); }
.cxboard.unset { background: var(--amber-soft); color: var(--amber-deep); }
.cxboard > span { flex: 1; min-width: 120px; }
.cxboard .cxboardsel { flex: 1 1 140px; }
.cxit-tag { display: inline-block; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em;
  color: var(--amber-deep); border: 1px solid var(--line2); border-radius: var(--r-2); padding: 0 5px;
  margin-right: 6px; vertical-align: middle; }
.cxcard.cxoff .btn { align-self: flex-start; }
.cxmore { margin-top: 10px; align-self: flex-start; border: none; background: none; cursor: pointer;
  color: var(--amber-deep); font-size: var(--fs-3); padding: 4px 0; }
.cxmore::after { content: " ▾"; }
.cxmore.open::after { content: " ▴"; }
.cxcontent { margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; }
.cxcontent[hidden] { display: none; }
.cxitem { display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); }
.cxit-th { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-3); object-fit: cover;
  background: var(--line2); }
.cxit-noimg { display: inline-block; }
.cxit-b { min-width: 0; flex: 1 1 auto; }
.cxit-t { font-size: var(--fs-3); color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cxit-m { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-2); color: var(--dim); margin-top: 2px; }
.cxit-m b { color: var(--text); }
.cxit-w { flex: 0 0 auto; font-size: var(--fs-1); color: var(--dim); }
.cxempty { font-size: var(--fs-3); color: var(--dim); padding: 6px 2px; }
@media (max-width: 560px) {
  .cxwrap { grid-template-columns: 1fr; gap: 12px; }
  .cxbig { font-size: var(--fs-7); }
}

/* ---- Photo Collage editor (Creative Studio) ---- */
.collrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
/* Layout picker: readable, comfortably-sized chips that still sit on one desktop
   line (full names remain in each chip's tooltip); wraps on narrow/mobile. */
#collTemplates { gap: 6px; }
#collTemplates .netchip { padding: 6px 10px; letter-spacing: 0; font-size: var(--fs-1); white-space: nowrap; }
#collTemplates .netchip .bic { margin-right: 5px; }
.collstage { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin: 6px 0 12px; }
.collpvwrap { position: relative; flex: 0 0 auto; background: #0d1424; border-radius: var(--r-3); padding: 10px; line-height: 0; }
.collcanvas { max-width: 100%; height: auto; border-radius: var(--r-2); touch-action: none; cursor: grab; box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.collcanvas:active { cursor: grabbing; }
.collpvhint { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #9aa6bd; font-size: var(--fs-3); pointer-events: none; }
.collslots { flex: 1 1 220px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; align-content: flex-start; }
.collslot { border: 1px solid var(--line, #2a3550); border-radius: var(--r-3); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(127,140,170,.06); }
.collslot.sel { border-color: #f29718; box-shadow: 0 0 0 1px #f29718 inset; }
.collslot-head { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }
.collslot-pick { aspect-ratio: 1/1; border: 1px dashed var(--line2, #2a3550); border-radius: var(--r-3); overflow: hidden; background: var(--card2, #0e1524); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.collslot-pick img { width: 100%; height: 100%; object-fit: cover; }
.collslot-add { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: var(--fs-3); }
.collslot-label { font: 600 11px/1.4 inherit; text-align: center; padding: 6px; border-radius: var(--r-2); border: 1px solid var(--line, #2a3550); background: var(--card2, #0e1524); color: inherit; }
.collslot-label:focus { outline: none; border-color: var(--amber, #f29718); background: var(--card, #fff); }
.collslot-zoom { width: 100%; }
.collopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px 24px; margin: 12px 0 4px; align-items: start; }
.collopt-full { grid-column: 1 / -1; }
.collbrandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.collsigbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.collsigbtns .btn { padding: 8px 12px; font-size: var(--fs-3); }
.collmultionly { display: none; }
.collopt label { display: block; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.collopt .collrow { margin: 0; }
/* consent row - the broad `.studiocard .stform label` (tiny mono, block) captures
   this label, so override it with higher specificity: a normal left-aligned row */
.studiocard .stform label.collconsent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 2px;
  cursor: pointer; font-family: inherit; font-size: var(--fs-3); font-weight: 500; line-height: 1.45;
  letter-spacing: 0; text-transform: none; color: var(--muted); }
.studiocard .stform label.collconsent input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--amber); }
.collcheck { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line, #2a3550); border-radius: var(--r-3); font-size: var(--fs-3); cursor: pointer; background: rgba(127,140,170,.05); }
.collcheck.on { border-color: #f29718; background: rgba(242,151,24,.1); }
.collcheck input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: #f29718; margin: 0; }
/* titled-photo size checkboxes: wrap into a tidy row/grid on any width */
.stovsizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.stovsizes .collcheck { flex: 1 1 132px; }
.collmini { font-size: var(--fs-2); color: var(--muted); margin-top: 6px; }
.collembed-h { font-size: var(--fs-3); color: var(--muted); margin-bottom: 6px; }
.collembed-code { width: 100%; font: 11px/1.4 ui-monospace, monospace; padding: 8px; border-radius: var(--r-3); border: 1px solid var(--line, #2a3550); background: #0d1424; color: #cdd6e6; resize: vertical; margin-bottom: 8px; }
.collcanvas.grabbing { cursor: grabbing; }
.collcrophint { line-height: 1.3; margin-top: 9px; text-align: center; font-size: var(--fs-2); color: var(--navy-muted); } /* sits on the dark canvas - needs a light muted */
/* per-slot header + remove, filled state */
.collslot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.collslot.has .collslot-pick { border-style: solid; }
.collslot-x { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-4); line-height: 1; cursor: pointer; padding: 0 3px; border-radius: var(--r-1); }
.collslot-x:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }

/* Split-screen caption-style swatches: each chip is a LIVE preview of the look
   (mirrors core captions._render_strip), so you pick by seeing, not by name. */
#splitLooks { display: flex; flex-wrap: wrap; gap: 8px; }
.capsw { border: 1px solid var(--line, #2a3550); border-radius: var(--r-3); padding: 9px 10px;
  background: var(--card2, #0e1524); cursor: pointer; display: flex; align-items: center;
  justify-content: center; min-width: 92px; min-height: 46px; overflow: hidden;
  transition: border-color .12s, box-shadow .12s; }
.capsw:hover { border-color: var(--amber, #e08900); }
.capsw.on { border-color: var(--amber, #e08900); box-shadow: 0 0 0 1px var(--amber, #e08900) inset; }
.capsw-in { font: 800 13px/1 system-ui, -apple-system, Segoe UI, sans-serif; white-space: nowrap; }
.capsw-strip .capsw-in { background: rgba(7,11,20,.85); color: #fff; padding: 5px 10px 8px;
  border-radius: var(--r-2); border-bottom: 3px solid var(--amber, #e08900); }
.capsw-boxed .capsw-in { background: var(--amber, #e08900); color: #1a1206; padding: 5px 10px; border-radius: var(--r-2); }
.capsw-band .capsw-in { background: rgba(7,11,20,.9); color: #fff; padding: 5px 10px; border-left: 4px solid var(--amber, #e08900); }
.capsw-bold .capsw-in { background: rgba(7,11,20,.88); color: #fff; padding: 5px 10px; border-radius: var(--r-3);
  font-size: var(--fs-4); text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.capsw-outline .capsw-in { color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.capsw-impact .capsw-in { color: #fff; font: 900 15px/1 Oswald, Anton, Impact, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.capsw-gradient .capsw-in { background: linear-gradient(180deg, var(--amber, #e08900), #7a4a00);
  color: #fff; padding: 5px 10px; border-radius: var(--r-2); text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.capsw-neon .capsw-in { color: #fff; text-shadow: 0 0 5px var(--amber, #e08900), 0 0 11px var(--amber, #e08900); }
.capsw-highlight .capsw-in { background: var(--amber, #e08900); color: #1a1206; padding: 3px 6px; border-radius: var(--r-1); }

/* Split-screen live preview player + timeline/sound mixer (plays in the pane). */
/* MANUAL vs ULTRA mode: a segmented switch (#splitMode) sets the panelpad class; the two
   modes show ONLY their own controls (matching the collage/ads .collmode-is-* pattern), so
   it is unmistakable which reel you are building. The shared CELLS stay in both. */
.splitmode-is-ultra .split-manual { display: none !important; }
/* Ultra shows ONLY when the panelpad is explicitly in ultra mode. Gating on the
   POSITIVE class (not `.splitmode-is-manual`) is fail-safe: if the panelpad ever
   lacks a definitive mode class, Ultra stays hidden and the pane falls back to the
   manual view - so the two control sets can NEVER both render at once. */
.panelpad:not(.splitmode-is-ultra) .split-ultra { display: none !important; }
/* TALKING SEQUENCE (third mode): shares the media cells; shows ONLY its own controls. The
   talk section reuses .ultrasec styling but NOT the .split-ultra visibility hook, so it is
   gated on its own positive class - the same fail-safe pattern as Ultra above. */
.splitmode-is-talk .split-manual { display: none !important; }
.panelpad:not(.splitmode-is-talk) .talksec { display: none !important; }
/* per-photo spoken lines: one row per photo in the cells (blank = AI writes it) */
.talklines { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.talkline { display: flex; align-items: center; gap: 9px; }
.talkline-thumb { width: 36px; height: 36px; border-radius: var(--r-3); object-fit: cover; flex: 0 0 auto;
  background: #0b0f18; border: 1px solid var(--line, #2a3550); }
.talkline-n { font: 600 11px/1 ui-monospace, monospace; color: var(--muted); flex: 0 0 auto;
  width: 15px; text-align: center; }
.talkline input { flex: 1 1 auto; min-width: 0; }
.talklines-empty { color: var(--muted); font-size: 12px; margin: 2px 0; }
.splitmodeseg { margin: 2px 0 12px; }
/* the split hint is always ONE line - it never wraps to a second row (a computer's width; on
   a phone one line held a third of the sentence, so there it wraps like every intro) */
.splithint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 760px) { .splithint { white-space: normal; overflow: visible; } }
.splitprev-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin: 8px 0 12px; }
.splitprev { position: relative; width: 184px; aspect-ratio: 9 / 16; flex: 0 0 auto;
  border-radius: var(--r-3); overflow: hidden; background: #0b0f18; border: 1px solid var(--line, #2a3550); }
/* N-cell preview: flexbox strips - a column of rows (vertical) or a row of columns
   (horizontal); each cell flexes equally, seams are borders between adjacent cells. */
.sp-cells { position: absolute; inset: 0; display: flex; }
.sp-cells.vertical { flex-direction: column; }
.sp-cells.horizontal { flex-direction: row; }
.sp-cell { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; background: #0b0f18; }
.sp-cell img, .sp-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-cell.contain img, .sp-cell.contain video { object-fit: contain; }
.sp-cells.divon.vertical .sp-cell + .sp-cell { border-top: 2px solid rgba(255,255,255,.85); }
.sp-cells.divon.horizontal .sp-cell + .sp-cell { border-left: 2px solid rgba(255,255,255,.85); }
/* split: cell-count + orientation setup row, per-cell caption-position stack, slots */
/* split setup row: CELLS + LAYOUT sit together, not spread by the auto-fit grid */
.collopts.spsetup { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 2px 0 8px; }
/* split options: a deliberate 2-column block (media/timing left, captions right) so
   the heterogeneous controls no longer scatter across the generic auto-fit grid */
.collopts.spopts { grid-template-columns: 1fr 1fr; gap: 18px 34px; }
.spcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 680px) { .collopts.spopts { grid-template-columns: 1fr; } }
/* ULTRA SYNC: the premium AI-director panel beside the media cells */
/* Split media row: the cells stay a HORIZONTAL row (auto width); the Ultra panel
   fills the remaining space to their right (the empty area from the screenshot). */
/* cells (shared) sit on their own row, full width; the Ultra panel is a full-width block
   below them (shown only in Ultra mode) - no more awkward side-by-side overlap. */
.splitmediarow { display: block; margin: 6px 0 12px; }
.splitmediarow .splitslots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.splitmediarow .splitslots .collslot { flex: 0 0 148px; }
/* a video cell shows a play badge on its thumbnail so a clip reads at a glance */
.collslot-pick { position: relative; }
.spvidplay { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(12, 18, 32, .6);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); pointer-events: none; }
.spvidplay::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
/* ULTRA SYNC is now a PLAIN section in the house style (no amber card, no fold) - the
   Manual/Ultra segmented switch above is the only control. A subtle top rule separates
   the AI config from the shared media cells above it. */
.ultrasec { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line2); }
.ultrasec .ultradesc { margin: 0 0 2px; }         /* .hint gives the muted studio style */
.ultradesc b { color: var(--text, inherit); }
.ultralblrow { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.ultralblrow > label { margin: 0; }               /* label + Write-with-AI button share one centred row */
.ultrasec textarea { width: 100%; box-sizing: border-box; min-height: 62px; resize: vertical; }
/* Create row: left-aligned like every other studio generator, with a live readiness hint */
.ultraactions { margin: 16px 0 0; align-items: center; }
.ultraready { padding: 0; margin: 0; align-self: center; color: var(--muted); }
/* ULTRA controls redesign: labeled groups that mirror Manual Sync's .collopt system.
   SETTINGS = a responsive grid of label-above selects; OPTIONS = larger toggle chips
   grouped under section labels so each button sits directly under its heading (no more
   tiny pills floating far from the inputs). */
.ultraopts { margin: 8px 0 2px; }
.ultraopts .collopt { min-width: 0; }
.ultraopts .collopt > label { margin: 0 0 7px; }         /* tighten under the label (beats .studiocard .stform label) */
.ultraflds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; align-items: end; }
.ultraflds .ultrafield-music { grid-column: span 2; }
.ultrafield select { padding: 8px 10px; border-radius: var(--r-3); }   /* keep the app-wide select font (0.92rem) for consistency; just a larger tap target */
.ultramusicrow { display: flex; align-items: center; gap: 8px; margin: 0; }
.ultramusicrow .musicmoodsel { flex: 1 1 auto; min-width: 0; }
.ultramusicrow .musicprev, .ultramusicrow .musicsetup { flex: 0 0 auto; }
.ultratogs { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 12px; }
/* larger, tappable toggle chips (user: "make buttons larger and closer to inputs") */
.ultratogs .netchip { font-size: var(--fs-2); letter-spacing: .04em; padding: 9px 15px; border-radius: var(--r-3); }
@media (max-width: 560px) { .ultraflds .ultrafield-music { grid-column: 1 / -1; } .ultratogs { gap: 10px 20px; } }
@media (max-width: 760px) { .splitmediarow { grid-template-columns: 1fr; } }
.sp-cappos { display: flex; flex-direction: column; gap: 6px; }
.sp-cappos .sp-posrow { margin: 0; }
.splitslots { grid-template-columns: repeat(auto-fill, minmax(128px, 148px)); margin: 4px 0 6px; }
/* per-slot tools (reorder / clear), preview cell badges, layout diagrams, mixer buttons */
.splitslot .collslot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.splitslot-tools { display: inline-flex; gap: 2px; }
.spslot-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  padding: 0; border: 1px solid var(--line, #2a3550); border-radius: var(--r-2); background: var(--card2, #0e1524);
  color: var(--muted); cursor: pointer; }
.spslot-btn:hover { border-color: var(--amber, #e08900); color: inherit; }
.spslot-btn .bic { display: inline-flex; } .spslot-btn .bic svg { width: 13px; height: 13px; }
.spslot-x:hover { border-color: #d05a5a; }
.sp-cellno { position: absolute; top: 4px; left: 4px; z-index: 4; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-1);
  font: 700 10px/1 ui-monospace, monospace; color: #fff; background: rgba(7,11,20,.62); pointer-events: none; }
.splayopt { display: inline-flex; align-items: center; gap: 6px; }
.splayico { width: 15px; height: 15px; flex: 0 0 auto; }
.sp-mixbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.gfdim { opacity: .72; }
/* Create/Generate readiness: a primary Studio button is vivid amber ONLY when its form is
   complete; until then it is clearly muted so "it just turned active" is unmistakable (the old
   .72 dim was too subtle to read). It stays OPERABLE on purpose - a click explains what is
   still missing (the accessible pattern, per GOV.UK / NN-g), so it is never HTML-disabled.
   Toggled by stRefreshReady() from each generator's readiness predicate. */
.btn.stnotready { opacity: .5; filter: grayscale(.4); box-shadow: none; }
.btn.stnotready:hover { transform: none; box-shadow: none; border-color: transparent; }
@media (max-width: 560px) {
  .splitprev { width: 100%; max-width: 260px; }
  .splitprev-side { flex-basis: 100%; min-width: 0; }
  .sp-ctl, .sp-fade { flex-wrap: wrap; }
}
.sp-cap { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 4;
  max-width: 92%; text-align: center; pointer-events: none; }
.sp-cap .capsw-in { font-size: var(--fs-1); line-height: 1.15; padding: 2px 5px; white-space: normal; }
.sp-cap.pos-top { top: 6%; bottom: auto; }
.sp-cap.pos-middle { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.sp-cap.pos-bottom { top: auto; bottom: 8%; }
.sp-posrow { align-items: center; }
.sp-poslab { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .06em; color: var(--muted); flex: 0 0 64px; }
.sp-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: var(--fs-2); padding: 12px; z-index: 5; }
.splitprev-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.sp-tx { display: flex; align-items: center; gap: 12px; }
.sp-time { color: var(--muted); font-size: var(--fs-3); }
.sp-seek, .sp-slider, .sp-mixrow input[type="range"] { width: 100%; accent-color: var(--amber, #e08900); }
.sp-durlab { display: flex; justify-content: space-between; font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .08em; color: var(--muted); }
.sp-mix { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sp-mixtip { font-size: var(--fs-2); line-height: 1.4; color: var(--muted); }
.sp-mixtip b { color: var(--text, inherit); }
.sp-xfade { align-self: flex-start; padding: 4px 12px; font-size: var(--fs-3); }
.sp-mixrow { border: 1px solid var(--line, #2a3550); border-radius: var(--r-3); padding: 6px 9px;
  display: flex; flex-direction: column; gap: 4px; background: rgba(127,140,170,.05); }
.sp-mixh { display: flex; align-items: center; justify-content: space-between;
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin-bottom: 1px; }
.sp-ctl { display: flex; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--muted); }
.sp-ctl > label { flex: 0 0 36px; cursor: help; }
.sp-ctl > input[type="range"] { flex: 1; }
.sp-ctl .sp-v { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-fade { gap: 10px; }
.sp-fg { display: flex; align-items: center; gap: 4px; flex: 1; font-size: var(--fs-1); }
.sp-fg input[type="range"] { flex: 1; min-width: 30px; }
.sp-fg b { flex: 0 0 30px; text-align: right; font-weight: 600; color: var(--muted); }
.sp-mixrow .netchip { padding: 2px 9px; font-size: var(--fs-2); }
.sp-note { font-size: var(--fs-2); color: var(--muted); font-style: italic; }
/* multi before/after groups */
.collgrouphd { grid-column: 1 / -1; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); margin: 4px 0 -2px; display: flex; gap: 8px; align-items: baseline; }
.collgrouphd span { font-weight: 500; color: #6b7690; letter-spacing: 0; }
.collgroup { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
/* reveal transition picker with live motion previews */
.colltrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 2px 0 10px; }
.colltr { position: relative; border: 1px solid var(--line, #2a3550); border-radius: var(--r-3); padding: 5px; background: rgba(127,140,170,.05); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.colltr:hover { border-color: var(--line2, #40506e); }
.colltr.on { border-color: #f29718; box-shadow: 0 0 0 1px #f29718 inset; }
.colltr-l { font-size: var(--fs-2); color: var(--muted); text-align: center; }
.colltr.on .colltr-l { color: var(--amber-deep); } /* was bright #f29718 = 2.2:1 on the light tile */
.colltr-prev { position: relative; display: block; width: 100%; height: 42px; border-radius: var(--r-2); overflow: hidden; background: #e7ebf3; }
.colltr-b, .colltr-a { position: absolute; inset: 0; }
.colltr-b { background: repeating-linear-gradient(45deg, #c8cfdc, #c8cfdc 6px, #d6dce7 6px, #d6dce7 12px); }
/* REST: every tile reads as a clean before|after split (stripes | amber) */
.colltr-a { background: linear-gradient(135deg, #f29718, #f7b85a); clip-path: inset(0 0 0 50%); }
.colltr-prev::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(255,255,255,.7); z-index: 2; transition: opacity .15s; }
.colltr::after { content: "\25B6"; position: absolute; top: 6px; right: 7px; font-size: var(--fs-1); color: #fff; background: rgba(10,15,28,.5); border-radius: 50%; width: 15px; height: 15px; line-height: 15px; text-align: center; pointer-events: none; z-index: 3; transition: opacity .15s; }
/* HOVER / SELECTED: play the real motion; seam + play-cue fade away */
.colltr:hover .colltr-a, .colltr.on .colltr-a { clip-path: none; }
.colltr:hover .colltr-prev::before, .colltr.on .colltr-prev::before, .colltr:hover::after, .colltr.on::after { opacity: 0; }
.colltr:hover .colltr-wiperight .colltr-a, .colltr.on .colltr-wiperight .colltr-a { animation: trWipeR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-revealright .colltr-a, .colltr.on .colltr-revealright .colltr-a,
.colltr:hover .colltr-coverright .colltr-a, .colltr.on .colltr-coverright .colltr-a,
.colltr:hover .colltr-slideright .colltr-a, .colltr.on .colltr-slideright .colltr-a { animation: trRevealR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-slideright .colltr-b, .colltr.on .colltr-slideright .colltr-b { animation: trSlideOutR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-smoothright .colltr-a, .colltr.on .colltr-smoothright .colltr-a { animation: trSmoothR 2.6s ease-in-out infinite; }
.colltr:hover .colltr-wipedown .colltr-a, .colltr.on .colltr-wipedown .colltr-a { animation: trWipeD 2.6s ease-in-out infinite; }
.colltr:hover .colltr-circleopen .colltr-a, .colltr.on .colltr-circleopen .colltr-a { animation: trCircle 2.6s ease-in-out infinite; }
.colltr:hover .colltr-rectcrop .colltr-a, .colltr.on .colltr-rectcrop .colltr-a { animation: trRect 2.6s ease-in-out infinite; }
.colltr:hover .colltr-pixelize .colltr-a, .colltr.on .colltr-pixelize .colltr-a { animation: trFade 2.6s steps(6, end) infinite; }
.colltr:hover .colltr-dissolve .colltr-a, .colltr.on .colltr-dissolve .colltr-a { animation: trFade 2.6s ease-in-out infinite; }
@keyframes trWipeR { 0%, 100% { clip-path: inset(0 100% 0 0); } 40%, 82% { clip-path: inset(0 0 0 0); } }
@keyframes trRevealR { 0%, 100% { transform: translateX(-100%); } 40%, 82% { transform: translateX(0); } }
@keyframes trSlideOutR { 0%, 100% { transform: translateX(0); } 40%, 82% { transform: translateX(100%); } }
@keyframes trSmoothR { 0%, 100% { clip-path: inset(0 100% 0 0); filter: blur(2px); } 40%, 82% { clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes trWipeD { 0%, 100% { clip-path: inset(0 0 100% 0); } 40%, 82% { clip-path: inset(0 0 0 0); } }
@keyframes trCircle { 0%, 100% { clip-path: circle(0% at 50% 50%); } 40%, 82% { clip-path: circle(75% at 50% 50%); } }
@keyframes trRect { 0%, 100% { clip-path: inset(50%); } 40%, 82% { clip-path: inset(0); } }
@keyframes trFade { 0%, 100% { opacity: 0; } 40%, 82% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .colltr-a, .colltr-b { animation: none !important; } }
.colldur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.colldur-lbl { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--muted); }
#collGo.ready { box-shadow: 0 0 0 2px rgba(242,151,24,.28); }
.collrevrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.collrevrow .collmini { margin: 0; }
/* Collage output mode (still image vs reveal video): the MAKE toggle shows only
   the active mode's options + primary button. Elements are tagged collmode-image
   / collmode-reveal; the collage .stform carries collmode-is-image /
   collmode-is-reveal. !important beats the inline display the before/after
   (.collbaonly) layout toggle sets, so the mode gate always wins. */
.collmode-is-image .collmode-reveal { display: none !important; }
.collmode-is-reveal .collmode-image { display: none !important; }
.actions .collrevnote-inline { align-self: center; margin: 0; }
/* compact visual corner-position picker (mini frame + 5 dots) */
.poswrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.posdefault { font: 600 12px/1 inherit; padding: 8px 11px; border: 1px solid var(--line, #2a3550); border-radius: var(--r-pill); background: rgba(127,140,170,.05); color: inherit; cursor: pointer; }
.posdefault.on { border-color: #f29718; background: rgba(242,151,24,.12); color: var(--amber-deep, #f29718); }
.cornerpick { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: "tl . tr" ". c ." "bl . br"; width: 74px; height: 56px; border: 1.5px solid var(--line2, #40506e); border-radius: var(--r-3); padding: 6px; gap: 2px; background: rgba(127,140,170,.06); flex: 0 0 auto; }
.cp-cell { border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; }
.cp-tl { grid-area: tl; } .cp-tr { grid-area: tr; } .cp-c { grid-area: c; } .cp-bl { grid-area: bl; } .cp-br { grid-area: br; }
.cp-cell i { position: absolute; inset: 22%; border-radius: 50%; background: var(--mut, #9aa6bd); opacity: .45; transition: opacity .12s, background .12s, box-shadow .12s; }
.cp-cell:hover i { opacity: .85; }
.cp-cell.on i { background: #f29718; opacity: 1; box-shadow: 0 0 0 3px rgba(242,151,24,.25); }
@media (max-width: 640px) { .collpvwrap { width: 100%; text-align: center; } .colltrgrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } }

/* --- Per-network format + accessibility (SPEC_NETWORK_FORMATS.md) --- */
.fmtwrap { margin: 2px 0 12px; }
.fmtrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
/* editor row/alt label. flex:0 0 auto so it can never claim a whole flex line and
   squeeze the controls beside it to 0 width (the .fmtnet-collision failure mode);
   rem token, not px, so the A-/A+ --ui-scale control resizes it with everything else. */
.fmtnet { flex: 0 0 auto; font: 600 var(--fs-1)/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; color: var(--muted, #8b97b0); min-width: 76px; }
.fmtsegs { display: inline-flex; border: 1px solid var(--line, #e3e5e8); border-radius: var(--r-3); overflow: hidden; }
.fmtseg { border: 0; background: transparent; padding: 5px 13px; font-size: var(--fs-3); cursor: pointer; color: var(--text, var(--ink, #1c1d1f)); }
.fmtseg + .fmtseg { border-left: 1px solid var(--line, #e3e5e8); }
.fmtseg.sel { background: var(--amber, #f29718); color: #fff; }
.fmtseg:focus-visible { outline: 2px solid var(--amber, #f29718); outline-offset: -2px; }
.fmtfeed { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); color: var(--muted, #8b97b0); cursor: pointer; }
.fmthint { font-size: var(--fs-3); color: var(--muted, #8b97b0); }
.fmtcover { width: 62px; padding: 3px 6px; margin: 0 2px; }
.fmtnote { margin: 2px 0 6px; color: var(--muted, #8b97b0); font-size: var(--fs-2); line-height: 1.45; }
.fmtaltwrap { display: flex; gap: 10px; padding: 8px 0 2px; align-items: flex-start; }
.fmtaltlist { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fmtaltitem { display: flex; align-items: center; gap: 8px; }
/* neutral backing tile so the alt-text thumbnail always shows something (never a
   broken-image glyph); a video's poster frame or an image fills it */
.fmtaltthumb { width: 34px; height: 34px; border-radius: var(--r-2); flex: 0 0 auto; overflow: hidden;
  background: var(--card2); display: block; }
.fmtaltitem img, .fmtaltthumb img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--r-2); flex: 0 0 auto; display: block; }
.fmtaltfield { position: relative; flex: 1; min-width: 0; display: flex; }
.fmtaltinput { flex: 1; min-width: 0; padding: 5px 26px 5px 8px; font-size: var(--fs-3); }
.fmtaltcount { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-1); color: var(--dim); pointer-events: none; }
/* collapsible Format & Accessibility (collapsed by default) */
.fmtdetails { margin-top: 4px; border-top: 1px solid var(--line, #e3e5e8); }
.fmtsummary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; padding: 12px 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-1); letter-spacing: .14em;
  color: var(--muted, #8b97b0); user-select: none; }
.fmtsummary::-webkit-details-marker { display: none; }
.fmtsummary::before { content: "\25B8"; font-size: var(--fs-2); color: var(--dim, #9aa6bd); transition: transform .15s; }
.fmtdetails[open] .fmtsummary::before { transform: rotate(90deg); }
.fmtbody { padding: 2px 0 6px; display: flex; flex-direction: column; gap: 4px; }
/* live format badge in the summary - draws the eye to Reels even when collapsed */
.fmtbadge { text-transform: none; font-weight: 600; letter-spacing: .02em; font-size: var(--fs-2);
  color: #fff; background: var(--amber, #f29718); padding: 2px 8px; border-radius: var(--r-pill); }
.fmthint2 { text-transform: none; font-style: italic; letter-spacing: .02em; font-size: var(--fs-2);
  color: var(--dim, #9aa6bd); }
/* Post-TYPE badge on every queue row (qFmtBadge): the post's content FORMAT -
   Reel / Carousel / Video / Image / Text. Neutral + monochrome on purpose so it
   reads as a quiet descriptor and never competes with the STATUS pill's colour
   (format and status are different axes - research: Buffer/Later/Hootsuite/Sprout
   all keep format = icon+label, status = colour). An outline chip (transparent
   fill) sits a step below the filled source chip, so the eye reads the source
   first; the border keeps it legible on the card2 row-hover. */
.qfmt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 2px 8px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-1);
  letter-spacing: .09em; vertical-align: middle; white-space: nowrap;
  color: var(--muted); background: transparent; border: 1px solid var(--line2); }
.qfmt svg { width: 11px; height: 11px; flex: none; }
/* published-row view/like stats: house icon + number (not a raw glyph), with a
   screen-reader word so it never reads as "white-right-pointing-triangle 1,240" */
.qstat { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.qstat svg { width: 12px; height: 12px; flex: none; }
.detailtop .qfmt { font-size: var(--fs-1); padding: 4px 10px; }
@media (max-width: 640px) { .fmtnet { min-width: 0; } .fmtaltwrap { flex-direction: column; gap: 4px; } }
/* --- Google Business post controls (SPEC_NETWORK_FORMATS Feature F) --- */
.gbpwrap { border-top: 1px dashed var(--line, #e3e5e8); margin-top: 4px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.gbpwrap select, .gbpwrap input[type="text"], .gbpwrap input[type="url"], .gbpwrap input[type="datetime-local"] {
  flex: 1 1 150px; min-width: 120px; padding: 6px 9px; font-size: var(--fs-3);
  border: 1px solid var(--line, #e3e5e8); border-radius: var(--r-3);
  background: var(--card, #fff); color: var(--text, var(--ink, #1c1d1f)); }
.gbpwrap select { flex: 0 0 auto; }
/* .gbpwrap inputs use the global :focus amber border + ring (fires on click AND keyboard) */

/* ============================================================================
   MOBILE MODE  (docs/SPEC_MOBILE_MODE.md)
   Phone layout of the SAME dashboard: a bottom tab bar with the 4 core jobs,
   everything else one tap away, installable. Auto-activates at <=760px (keeps
   iPad-portrait 768 out; reuses the app's existing 760 tier). Desktop >760px is
   pixel-identical - every rule below is inside @media(max-width:760px) or is an
   additive component (.mbar/.gfsheet) hidden by default. Sources cited in the
   spec (WCAG 2.2, Apple HIG, Material 3, web.dev, MDN).
   ========================================================================== */

/* --- the bottom tab bar + sheet primitive: defined always, shown only <=760 --- */
.mbar { display: none; }
dialog.gfsheet { display: none; }              /* closed dialogs stay hidden    */
dialog.gfsheet[open] { display: flex; }        /* open -> the flex column below */

/* --- mobile action-overflow ("More" trigger + its bottom-sheet list) ---
   A crowded cluster of secondary action buttons collapses on a phone behind ONE
   labelled "More" trigger; the trigger opens a gfSheet listing those actions, each
   row delegating to the real (CSS-hidden) button. Desktop shows every button inline
   (the trigger is hidden), so nothing changes there. (research: M3 app-bar overflow
   / Priority+ pattern; a labelled trigger over a bare kebab, NN/g; a plain-button
   sheet rather than a fragile role=menu for touch a11y, WAI-ARIA APG disclosure.) */
.gfmore { display: none; }                     /* trigger: hidden on desktop */
.gfmore-list { display: flex; flex-direction: column; gap: 8px; }
.gfmore-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border: 1px solid var(--line2); border-radius: var(--r-4);
  background: var(--card); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; transition: background .14s, border-color .14s; }
.gfmore-row:hover, .gfmore-row:focus-visible { border-color: var(--amber); background: var(--amber-soft); }
.gfmore-row.amber { background: var(--amber); border-color: var(--amber); color: #1a1206; }
.gfmore-row .gfmore-ic { flex: none; display: inline-flex; color: var(--amber-deep); }
.gfmore-row.amber .gfmore-ic { color: currentColor; }
.gfmore-row .gfmore-ic svg { width: 18px; height: 18px; display: block; }

/* --- Posts toolbar overflow (mixed controls: buttons + a <select> + toggles) ---
   The secondary controls live in a display:contents wrapper (.qamore) so on desktop
   they flow inline exactly as before; on a phone the wrapper is hidden in the toolbar
   and the "More" trigger shows; opening it re-parents the SAME real controls (single
   source of truth - no duplicate a11y nodes) into the bottom sheet as a labelled
   column. (research: M3 bottom sheet holds settings; list-item-with-trailing-control
   rows; keep the native <select>; APG dialog focus handling.) */
.qamore { display: contents; }
.qam-lbl { display: none; }                    /* label shown only inside the sheet */
.gfsheet-body .qamore { display: flex; flex-direction: column; gap: 8px; }
.gfsheet-body .qamore > * { width: 100%; margin: 0; }
.gfsheet-body .qamore .qgo-div { display: none; }                  /* drop the divider */
.gfsheet-body .qamore .qgolab { display: inline !important; }      /* restore nav labels */
.gfsheet-body .qamore .qam-lbl { display: inline; }
.gfsheet-body .qamore .tipdot { display: none; }                   /* drop the help ? */
.gfsheet-body .qamore .btn { justify-content: flex-start; gap: 11px; padding: 13px 14px;
  font-size: var(--fs-4); }
.gfsheet-body .qamore .btn.icob { width: 100%; height: auto; }
.gfsheet-body .qamore .qcarwrap,
.gfsheet-body .qamore .switch { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r-4);
  font-size: var(--fs-4); letter-spacing: normal; }
.gfsheet-body .qamore .switch em { order: -1; margin: 0; font-style: normal; font-weight: 600; }
.gfsheet-body .qamore .qcarwrap .minisort { flex: none; }
/* group the sheet rows (flex order, so ONLY the sheet reorders - desktop's
   display:contents toolbar keeps its original left-to-right order): actions first,
   then the "go to" nav shortcuts, then the settings/toggles. */
.gfsheet-body .qamore .qgo { order: 5; }
.gfsheet-body .qamore .qcarwrap { order: 10; }
.gfsheet-body .qamore #qPreviewToggle { order: 11; }
.gfsheet-body .qamore .switch { order: 12; }

@media (max-width: 760px) {
  /* Shake/zoom lockdown (ported from the proven guest pages, MINUS their
     maximum-scale=1 which fails WCAG 1.4.4 - we use 16px inputs instead).
     overflow-x:clip (not hidden) so it never turns an ancestor into a scroll
     container that would kill position:sticky. */
  html, body { overflow-x: clip; overscroll-behavior-y: none; }
  /* 16px minimum on text inputs stops iOS zoom-on-focus (the "shake"); range/
     checkbox/radio/color don't take text so they're left alone */
  /* !important so the 16px zoom-guard beats component classes (.qsort, .minisort,
     .anfilter, .fmtaltinput...) now and for any control added later. 16px is the
     desired size on mobile anyway - bigger, tap-friendly, and iOS won't zoom. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea { font-size: max(16px, 1rem) !important; }  /* 16px floor survives the A-/A+ scale-down so iOS never re-zooms */

  /* Shell: hide the desktop sidebar, size in svh so the iOS toolbar never clips.
     .side already becomes a wrapping pile at 900 - here it's gone entirely. */
  .shell { grid-template-columns: 1fr; min-height: 100svh; }
  .side { display: none; }

  /* Top bar: slim, sticky, clears the notch. The right cluster already sheds
     labels (640) and the megamenu (760); whoami is hidden from 900. */
  .topbar { position: sticky; top: 0; z-index: 30; padding: 10px 12px;
    padding-top: calc(10px + var(--gf-safe-top)); gap: 8px; }
  .topbar h1 { font-size: var(--fs-6); }

  /* Content: single column, and pad the bottom so the fixed bar never covers
     the last row (bar height + home-indicator inset). */
  .content { --content-inset-top: 14px; padding: var(--content-top, 8px) 12px calc(78px + var(--gf-safe-bottom));
    max-width: 100%; }

  /* Scroll containers that assumed desktop chrome (calc(100vh - 275px)) flow in
     the normal page scroll instead - avoids nested-scroll + the 100vh trap. The
     reserved min-height is desktop-only: on a phone the empty state sizes to its
     content rather than forcing a near-viewport-tall box (mobile needs its own
     reserved height, not the desktop one). #bankList (Ideas bank list, .listpane
     with a 62vh desktop cap) joins them so the ideas list flows with the page on a
     phone instead of trapping in its own ~62vh scroller with only 2-3 cards in view.
     #auditList (audit log, 52vh cap) and #archList (archived posts, 60vh cap) are
     the same .listpane+cap shape and join the de-cap for the same reason. */
  .qfull, .qcalwrap, #bankList, #auditList, #archList { max-height: none; min-height: 0; }

  /* Top bar on mobile: keep ONLY back/forward, pinned top-right - the quickest
     nav a phone user reaches for. Theme, help, support and connections stay in
     the bottom bar + More sheet (Material-3: <=3 top actions). */
  .tbright { display: block; }
  .tbright > *:not(.navhist) { display: none; }
  /* pinned top-right, OUT OF FLOW so a long title can never push it to a second
     line; the title reserves its width (padding-right). topbar is sticky = a
     positioning context, so this anchors to the top bar. */
  .navhist { display: inline-flex; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
  .topbar > .tbtitle { flex: 1 1 100%; min-width: 0; padding-right: 92px; }

  /* Long panel headers are nowrap on desktop (title + controls on one line); on a
     phone they must WRAP instead of clipping off-screen, e.g.
     "YOUR CREATIONS · WHAT YOU MADE, READY TO GO". */
  .phead, .pheadflex { white-space: normal; }

  /* Posts LIST rows on mobile: a compact, desktop-faithful list item built with
     CSS GRID. The old flex-wrap starved the text column and, worse, the thumb's
     margin + row gap pushed the text basis past 100% so it DROPPED BELOW the thumb -
     orphaning the thumbnail on its own line with a tall empty band, hiding the
     networks, and sprawling to 4 lines. Grid instead pins each fixed-order child
     (thumb, .t, .qnets, .qapp, .pill) into a named slot without reordering the DOM:
     a leading thumbnail spanning the rows; title + meta stacked in the text column;
     the status pill and approve toggle trailing (lines 1-2); and ALL network icons
     on their own full-width strip - nothing hidden. This mirrors the desktop row's
     left-to-right grouping. (research: Material 3 leading-media list item; Apple HIG
     lists and tables; NN/g mobile tables; Buffer/Sprout/Metricool queue rows.)
     Select mode keeps the base flex row (checkbox + thumb + text) - you are bulk-
     ticking there, not previewing, so the strip/controls stay out of the way. */
  #qList:not(.selmode) .qrow {
    display: grid; align-items: center;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "thumb text  text    text"
      "thumb nets  toggle  status";
    column-gap: 10px; row-gap: 6px; padding: 11px 14px; }
  #qList:not(.selmode) .qrow .qthumb {
    grid-area: thumb; width: 52px; height: 52px; margin: 0; align-self: center; }
  /* text column spans the full width (like desktop, where the title/meta get the
     room) so the title reads long and the source + format pills + date sit on ONE
     tidy meta line under it. */
  #qList:not(.selmode) .qrow .t { grid-area: text; min-width: 0; }
  /* meta line = source/format PILLS + date text. A wrapping flex row - never
     -webkit-line-clamp, which slices inline-flex chips top/bottom on iOS Safari
     (WebKit bug 274308) - so the chips lay out as real flex items and never clip. */
  #qList:not(.selmode) .qrow .t > span {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; line-height: 1.35; }
  /* compact the meta chips so source + format + date read as a tight one-line unit */
  #qList:not(.selmode) .qrow .t .qsrc { padding: 2px 7px; letter-spacing: .05em; }
  #qList:not(.selmode) .qrow .t .qfmt { padding: 2px 6px; margin-left: 0; letter-spacing: .05em; }
  /* trailing controls sit on line 2 in the desktop left-to-right order:
     network strip, then approve toggle, then status pill. */
  #qList:not(.selmode) .qrow .qnets {
    grid-area: nets; display: flex; flex-wrap: wrap; gap: 5px; align-content: center; }
  #qList:not(.selmode) .qrow .qnet { width: 26px; height: 26px; }
  #qList:not(.selmode) .qrow .qnet svg { width: 14px; height: 14px; }
  /* toggle + status pin to the TOP of the control row so that when a big network
     strip wraps to a second line the controls stay aligned with the first icon
     line (not floating against the middle of a 2-line block). */
  #qList:not(.selmode) .qrow .qapp {
    grid-area: toggle; justify-self: end; align-self: start; margin: 3px 0 0; }
  #qList:not(.selmode) .qrow .pill {
    grid-area: status; justify-self: end; align-self: start; flex: none;
    padding: 3px 8px; letter-spacing: .03em; }
  /* rare failed-network warn chip: its own full-width line past the thumb */
  #qList:not(.selmode) .qrow .netwarn { grid-column: 2 / -1; justify-self: start; }
  /* select mode: base flex row + the old text-column fix (checkbox + thumb + text) */
  #qList.selmode .qrow { flex-wrap: wrap; row-gap: 8px; align-items: center; padding: 12px 14px; }
  #qList.selmode .qrow .t { flex: 1 1 calc(100% - 130px); min-width: 0; }

  /* Action overflow on a phone: hide the secondary buttons, show the "More" trigger
     (the Ideas bank Topics head). Overview Today no longer uses it - every action shows
     in one sideways row (the phone one-row block at the end of this file). */
  .gf-ovf { display: none !important; }
  .gfmore { display: inline-flex; align-items: center; gap: 6px; }

  /* Posts toolbar: collapse to ONE row - primary action(s) + the "More" trigger;
     the rest hides in the toolbar (its wrapper) and opens in the sheet. */
  #qActions > .qamore { display: none; }
  #qActions .qamore-trig { flex: 0 0 auto; }

  /* Calendar: renderCalendar() emits an AGENDA (a day-list) instead of the 7-col
     grid on mobile - the verified best pattern for dense days (10+ posts). */
  .calagenda { display: flex; flex-direction: column; gap: 16px; }
  .calagd-date { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
    color: var(--muted); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .calagd-day.today .calagd-date { color: var(--amber-deep); font-weight: 700; }
  /* agenda chips share the panel's --card bg, so on dark (where box-shadow is
     invisible) they'd blend in; a --line border delineates each row in both
     themes and signals it's tappable (research: separate dark-list items). */
  .calagenda .calchip { width: 100%; margin: 0 0 6px; padding: 11px 12px; font-size: var(--fs-4);
    border-radius: var(--r-3); border: 1px solid var(--line); white-space: normal;
    text-align: left; line-height: 1.35; box-shadow: none; }
  .calagenda .calchip i { align-self: flex-start; margin-top: 5px; }
  .calagenda .calchip-tt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .calhead { flex-wrap: wrap; column-gap: 6px; row-gap: 6px; }
  .calhead b { min-width: 0; flex: 0 1 auto; font-size: var(--fs-5); }
  .calhead .spacer { display: none; }            /* no greedy spacer at 320px */
  /* the legend is an inline-flex (= nowrap by default) so its 4 labels overrun a
     320px panel; let it wrap onto multiple rows */
  .calhead .callegend { flex-basis: 100%; margin-top: 0; font-size: var(--fs-1); flex-wrap: wrap; row-gap: 3px; }
  .calhead .calnote { flex-basis: 100%; }

  /* Grown toolbars / tab strips scroll horizontally in one row. display:flex is
     REQUIRED - the base .filterchips/.studiotabs is inline-flex (content-sized), so
     it overflowed its parent and overflow-x did nothing; block-level flex makes it a
     real scroll viewport. Children must NOT shrink or they compress instead of
     scrolling (research: flex:0 0 auto + scroll-snap; -webkit-overflow-scrolling is
     a no-op on iOS 13+). */
  .filters, .anseg, .aeplat, .studiotabs, .anstrip, .filterchips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none; }
  .filters > *, .anseg > *, .aeplat > *,
  .studiotabs > *, .anstrip > *, .filterchips > * { flex: 0 0 auto; scroll-snap-align: start; }
  .filters::-webkit-scrollbar, .anseg::-webkit-scrollbar,
  .aeplat::-webkit-scrollbar, .studiotabs::-webkit-scrollbar, .anstrip::-webkit-scrollbar,
  .filterchips::-webkit-scrollbar { height: 0; }

  /* Media-library action buttons (From phone / Collect / Import) wrap instead of
     overrunning the row and getting cut off (research: wrap for a few actions). */
  .dropopts { flex-wrap: wrap; }

  /* Media library toolbar: was ~5 stacked rows (bulk / search / sort / chips /
     count) that pushed the first thumbnail BELOW the fold. Reflow into 3 tight
     rows - [YOUR LIBRARY ? ... AI-rename] / [search  sort] / [chips  count] - so a
     row of media shows on the first screen. Search stays a visible flex-grow field
     with a leading magnifier; sort keeps its current value in the native menu; the
     low-frequency bulk action is compact but still visible. The non-zero basis on
     search + chips forces the row breaks (a 0-basis flex item would squeeze onto
     the previous row). (research: NN/g content-to-chrome + above-the-fold + keep
     search visible; Material chips single scroll row; sort = current-value menu.) */
  .libhead { column-gap: 8px; row-gap: 8px; align-items: center; }
  .libhead .libtitle { flex: 0 0 auto; }
  /* Refresh matches Select's compact size (both are .btn; Select alone was shrunk) */
  .libhead #mediaBulk, .libhead #mediaRefresh { flex: 0 0 auto; padding: 8px 12px;
    font-size: var(--fs-3); white-space: nowrap; }
  .libhead #mediaRefresh .bic { width: 14px; height: 14px; margin-right: 5px; }
  .libhead .mbulk-full { display: none; }   /* -> "✦ AI rename" (Bulk implied by the mode it opens) */
  .libhead #mediaSearch { flex: 1 1 130px; min-width: 0; width: auto; margin: 0;
    padding-left: 34px; background-repeat: no-repeat; background-position: 12px center;
    background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
  .libhead #mediaSort { flex: 0 0 auto; margin: 0; }
  /* basis 120 forces the chips to break to their own row (won't fit beside
     search+sort) yet still leaves room for the compact count beside them. */
  .libhead #mediaFilters { flex: 1 1 120px; min-width: 0; margin: 0; }
  .libhead #mediaCount { flex: 0 0 auto; margin: 0 0 0 auto; font-size: var(--fs-1); white-space: nowrap; }
  .dropopts .btn { flex: 1 1 auto; }

  /* D2: post editor becomes a full-screen sheet; drop the desktop resize handle.
     It STOPS above the bottom bar (64px + safe area) instead of covering it, so
     the tab bar stays visible while editing a post - Peter reported the new-post
     editor had "no bottom menu". Bar taps close the editor first (see gfMobileInit). */
  .postwrap { bottom: calc(64px + var(--gf-safe-bottom)); }
  .postpanel { width: 100vw; inset: 0; border-left: none; }
  /* Its header clears the status bar (Peter, 10 Oct: the title, Approve / Post now / Save
     and the close X sat under the clock and battery in the app); every button is a 44px
     target and the title takes the room left over, wrapping - never pushing a button off */
  .postpanel header { position: sticky; top: 0; z-index: 2; gap: 4px;
    padding: calc(8px + var(--gf-safe-top)) calc(10px + var(--gf-safe-right)) 8px calc(16px + var(--gf-safe-left)); }
  .postpanel header b { flex: 1 1 auto; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
  .postpanel header .spacer { display: none; }
  .postpanel header .ppactions { gap: 4px; }
  .ppico, .pphelp, .ppclose { width: 44px; height: 44px; }
  /* the editor already stops above the bar + home indicator; its body and the form inside
     it each padded the sides (24 + 20px a side: the fields got ~300 of a 390px screen) */
  .ppbody { padding: 16px calc(14px + var(--gf-safe-right)) 32px calc(14px + var(--gf-safe-left)); }
  .ppbody .detail { padding: 2px 2px 8px; }
  .presize { display: none; }

  /* D3: right slide-outs go full-width with a safe-area-aware base. */
  .upmodal, .upmodal.wide { width: 100vw; max-width: 100vw;
    padding: calc(22px + var(--gf-safe-top)) 16px calc(30px + var(--gf-safe-bottom)); }
  /* the sticky head and actions cancel THIS padding (the desktop -34/-44 overshot it: the
     head's top 12px was cut off and it stuck 12px above the screen's edge) */
  .paneltop { top: calc(-22px - var(--gf-safe-top)); margin: calc(-22px - var(--gf-safe-top)) -16px 16px;
    padding: calc(14px + var(--gf-safe-top)) 16px 14px; }
  .upmodal .actions { bottom: calc(-30px - var(--gf-safe-bottom)); }

  /* Generic centred modal: breathing room from the screen edges (its width is already
     viewport-capped at source, D1); the top and bottom keep clear of the status bar and
     the home indicator (the earlier block's padding-block sets those) */
  .npwrap { padding-inline: calc(12px + var(--gf-safe-left)) calc(12px + var(--gf-safe-right)); }

  /* D5/hover: media-asset actions already revealed via @media(hover:none). */
  /* D7: let the page scroll over the collage canvas (was touch-action:none). */
  .collcanvas { touch-action: pan-y; }

  /* D10: pull inset close-buttons back on-screen at a phone edge. */
  .mpk .mlbclose { top: 6px; right: 6px; }

  /* ---- the bottom tab bar ---- */
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 5px calc(4px + var(--gf-safe-right)) calc(5px + var(--gf-safe-bottom)) calc(4px + var(--gf-safe-left));
    justify-content: space-around; align-items: stretch;
    box-shadow: 0 -3px 14px rgba(19,26,42,.06); }
  .mbar.gf-kbd { transform: translateY(130%); }   /* slide away with the keyboard */
  :root[data-theme="dark"] .mbar { background: var(--navy2); border-top-color: var(--navy-line); }
}

/* Bottom-bar buttons: 48px targets (Material), icon + label. Defined outside the
   query since the bar only exists <=760 anyway. */
.mbar-btn { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--muted); font-family: var(--font-body); border-radius: var(--r-3); }
.mbar-btn svg { width: 23px; height: 23px; }
.mbar-btn span { font-size: var(--fs-1); letter-spacing: .01em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mbar-btn.on { color: var(--amber-deep); }
.mbar-btn.on svg { stroke: var(--amber-deep); }
:root[data-theme="dark"] .mbar-btn { color: var(--navy-muted); }
:root[data-theme="dark"] .mbar-btn.on { color: var(--amber-bright); }
.mbar-btn .mbar-plus { width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #1a1206;
  display: flex; align-items: center; justify-content: center; margin-top: -1px; }
.mbar-btn .mbar-plus svg { width: 20px; height: 20px; stroke: #1a1206; }

/* ---- the shared <dialog> sheet primitive (bottom sheet + full-screen) ---- */
dialog.gfsheet { flex-direction: column; width: 100%; max-width: 640px;
  max-height: min(86svh, calc(100svh - var(--gf-safe-top) - 12px));   /* a tall sheet stops under the status bar */
  margin: 0 auto; position: fixed; inset: auto 0 0 0; top: auto;
  border: none; border-top: 1px solid var(--line); border-radius: var(--r-4) var(--r-4) 0 0;
  padding: 0; background: var(--card); color: var(--text);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: gfSheetUp .2s cubic-bezier(.16,.8,.3,1); }
dialog.gfsheet.full { max-height: none; height: 100svh; inset: 0; border-radius: 0;
  border-top: none; animation: gfSheetFade .18s ease; }
dialog.gfsheet::backdrop { background: rgba(7,11,20,.5); backdrop-filter: blur(2px); }
@keyframes gfSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gfSheetFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.gfsheet { animation: none; } }
:root[data-theme="dark"] dialog.gfsheet { background: var(--navy2); border-color: var(--navy-line); }
/* The head of a full-screen sheet starts under the status bar: the inset is its TOP padding
   (it was added to the bottom padding, so the title and the X sat beside the clock and the
   battery inside the app - Peter, 10 Oct 2026). A bottom sheet's head is nowhere near it. */
.gfsheet-head { flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(14px + var(--gf-safe-top)) calc(16px + var(--gf-safe-right)) 14px calc(16px + var(--gf-safe-left));
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); }
dialog.gfsheet:not(.full) .gfsheet-head { padding-top: 14px; }
.gfsheet-grip { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: var(--line2); }
dialog.gfsheet.full .gfsheet-grip { display: none; }
.gfsheet-head .spacer { flex: 1; }
.gfsheet-close { width: 34px; height: 34px; border-radius: 999px; flex: none;
  border: 1px solid var(--line2); background: var(--card); color: var(--text);
  font-size: var(--fs-5); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
/* phone: the close X is a 44px target, the head as tall as it needs around it */
@media (max-width: 760px) {
  .gfsheet-head { padding: calc(8px + var(--gf-safe-top)) calc(10px + var(--gf-safe-right)) 8px calc(16px + var(--gf-safe-left)); }
  .gfsheet-close { width: 44px; height: 44px; }
}
.gfsheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px calc(12px + var(--gf-safe-right)) calc(16px + var(--gf-safe-bottom)) calc(12px + var(--gf-safe-left)); }
:root[data-theme="dark"] .gfsheet-head { border-color: var(--navy-line); }
:root[data-theme="dark"] .gfsheet-close { background: var(--navy); border-color: var(--navy-line2);
  color: var(--navy-text); }
body.gf-sheet-open { overflow: hidden; }

/* rows inside sheets (More menu items, Add actions): 48px+ tap targets */
.gf-mrow { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 12px 12px; border: none; background: none;
  border-radius: var(--r-3); cursor: pointer; text-align: left; color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-5); }
.gf-mrow:hover, .gf-mrow:focus-visible { background: var(--card2); }
.gf-mrow.on { background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }
/* Fixed 24px box on EVERY .gf-mic (menu rows AND the brand switcher), so the
   svg-sizing rule below bounds the glyph instead of letting it fill unbounded. */
.gf-mic { width: 24px; height: 24px; flex: none; display: flex;
  align-items: center; justify-content: center; }
.gf-mrow .gf-mic { color: var(--muted); }
/* iOS Safari does NOT size an <svg> from its viewBox alone (Chrome does), so
   without this the icons collapse to nothing on iPhone - size the glyph to its
   24px box, like the house-icon .bic wrapper does. */
.gf-mic svg { width: 100%; height: 100%; display: block; }
.gf-mrow .gf-msub { display: block; font-size: var(--fs-3); color: var(--muted); font-weight: 400; }
.gf-mrow .gf-lock { margin-left: auto; font-size: var(--fs-3); opacity: .7; }
:root[data-theme="dark"] .gf-mrow { color: var(--navy-text); }
:root[data-theme="dark"] .gf-mrow:hover { background: var(--navy); }
/* AI credits card pinned near the bottom of the mobile menu (mirrors the desktop
   sidebar credit meter): balance + top-up on top, a fuel-gauge bar beneath. */
.gf-mcred { align-items: stretch; }
.gf-mcred .gf-mcredbody { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.gf-mcred .gf-mcredtop { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-5); }
.gf-mcred .gf-mcredtop b { font-weight: 700; }
.gf-mcred .gf-mcredcta { margin-left: auto; font-size: var(--fs-3); color: var(--amber-deep); font-weight: 600; }
.gf-mcred .gf-mcredbar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.gf-mcred .gf-mcredbar > i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), #3ecf8e); transition: width .4s; }
.gf-mcred .gf-mcredbar > i.warm { background: linear-gradient(90deg, var(--amber-bright), #f29718); }
.gf-mcred .gf-mcredbar > i.hot { background: linear-gradient(90deg, #f07b7b, var(--red)); }
.gf-mcred.is-low .gf-mcredtop b { color: var(--amber-deep); }
.gf-mcred.is-out .gf-mcredtop b { color: var(--red); }
:root[data-theme="dark"] .gf-mcred .gf-mcredbar { background: rgba(255, 255, 255, .10); }
.gf-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* ---- mobile Menu sheet: search in the head row, the brand switch, grouped nav, settings ----
   The head row IS the search (where a title sits), the close X at its right edge (Peter,
   10 Oct 2026); the brand switch is a row under it - its picture, name and a chevron -
   that opens the account's brands in place; the nav groups follow, spaced apart. */
.gfmsheet.searching .gfmnav { display: none; }   /* a query hides the grouped nav; results panel shows */
.gfmenu .gfsheet-head { gap: 8px; padding-left: calc(12px + var(--gf-safe-left)); }
.gfmsearch { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px;
  padding: 0 6px 0 12px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--card2); }
.gfmsearch:focus-within { border-color: var(--amber); background: var(--card); box-shadow: 0 0 0 3px var(--amber-soft); }
:root[data-theme="dark"] .gfmsearch { background: var(--navy); border-color: var(--navy-line2); }
.gfmsearch-ic { flex: none; color: var(--text); display: inline-flex; }
.gfmsearch-ic svg { width: 18px; height: 18px; }
.gfmsearch-in { flex: 1 1 auto; min-width: 0; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--text); font-family: var(--font-body); font-weight: 400;
  font-size: max(16px, 1rem); -webkit-appearance: none; appearance: none; }
.gfmsearch-in:focus, .gfmsearch-in:focus-visible { outline: none; box-shadow: none; }
.gfmsearch-in::-webkit-search-cancel-button, .gfmsearch-in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
:root[data-theme="dark"] .gfmsearch-in { color: var(--navy-text); }
.gfmsearch-x { flex: none; position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation; }
.gfmsearch-x::before { content: ""; position: absolute; inset: -6px; }   /* a 44px tap area */
.gfmsearch-x .bic { width: 14px; height: 14px; margin: 0; }
:root[data-theme="dark"] .gfmsearch-x { background: var(--navy-line2); color: var(--navy-text); }
.gfmsheet > .gfsearch-panel { margin: 0 0 8px; }
/* the brand switch row and its in-place list */
.gfm-brandrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-4);
  background: var(--card2); color: var(--text); font-family: var(--font-body); text-align: left;
  cursor: pointer; touch-action: manipulation; }
.gfm-brandrow:hover, .gfm-brandrow[aria-expanded="true"] { border-color: var(--amber); }
.gfm-brandrow[aria-expanded="true"] { margin-bottom: 6px; }
.gfm-bav-logo, .gfm-bav-mono { width: 36px; height: 36px; border-radius: var(--r-4); flex: none; }
.gfm-bav-logo { object-fit: cover; background: #fff; }
.gfm-bav-mono { display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-sel); color: #fff; font-weight: 700; font-size: var(--fs-5); line-height: 1; }
.gfm-btx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gfm-btx b { font-size: var(--fs-5); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.gfm-btx span { font-size: var(--fs-3); line-height: 1.3; color: var(--muted); }
.gfm-bchev { flex: none; display: inline-flex; transition: transform .15s; }
.gfm-bchev svg { width: 20px; height: 20px; }
.gfm-brandrow[aria-expanded="true"] .gfm-bchev { transform: rotate(180deg); }
.gfm-brands { margin: 0 0 12px; padding: 6px; border: 1px solid var(--line2); border-radius: var(--r-4); background: var(--card); }
.gfm-bfilter { display: block; width: 100%; height: 44px; margin: 0 0 6px; padding: 0 12px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); color: var(--text);
  font-family: var(--font-body); font-size: max(16px, 1rem); }
.gfm-bfilter:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.gfm-blist { display: flex; flex-direction: column; gap: 2px; }
.gfm-bitem { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px;
  border: 0; border-radius: var(--r-3); background: none; color: var(--text); font-family: var(--font-body);
  font-size: var(--fs-5); text-align: left; cursor: pointer; touch-action: manipulation; }
.gfm-bitem .gfm-bav-logo, .gfm-bitem .gfm-bav-mono { width: 30px; height: 30px; border-radius: var(--r-3); font-size: var(--fs-4); }
.gfm-bname { flex: 1 1 auto; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.gfm-bitem .bic { flex: none; width: 20px; height: 20px; margin: 0; }
.gfm-bitem:hover, .gfm-bitem:focus-visible { background: var(--card2); }
.gfm-bitem.on { background: var(--amber-soft); font-weight: 600; }
.gfm-bnone { padding: 12px 10px; font-size: var(--fs-4); }
:root[data-theme="dark"] .gfm-brandrow { background: var(--navy); border-color: var(--navy-line2); color: var(--navy-text); }
:root[data-theme="dark"] .gfm-brands { background: var(--navy2); border-color: var(--navy-line2); }
:root[data-theme="dark"] .gfm-bfilter { background: var(--navy); border-color: var(--navy-line2); color: var(--navy-text); }
:root[data-theme="dark"] .gfm-bitem { color: var(--navy-text); }
:root[data-theme="dark"] .gfm-bitem:hover, :root[data-theme="dark"] .gfm-bitem:focus-visible { background: var(--navy); }
.gfm-seclbl { font: 700 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 16px 12px 6px; }
.gf-mswitch .gf-mswlbl { flex: 1; }              /* label grows, switch pins right */
.gf-msw { flex: none; width: 30px; height: 17px; border-radius: 9px; background: var(--line2);
  position: relative; transition: background .15s; }
.gf-msw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; transition: transform .15s; }
.gf-mswitch.is-on .gf-msw { background: var(--amber); }
.gf-mswitch.is-on .gf-msw::after { transform: translateX(13px); }
:root[data-theme="dark"] .gf-msw { background: rgba(255, 255, 255, .18); }
.gf-msignout { margin-top: 8px; border-top: 1px solid var(--line); }   /* separate Sign out so a mis-tap can't log you out */

.gf-ios-hint { margin: 4px 12px 12px; padding: 12px 14px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); font-size: var(--fs-4); color: var(--muted); }

/* --- "What's working" insight card (Analytics tab) --- */
#insightsPanel .insh { margin-top: 14px; }
.insnote { text-align: center; margin: 6px 0 0; }
.inslist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.insrow { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.insrow:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.insrow .institle { cursor: pointer; }
.insrow .institle:hover { color: var(--amber-deep); }
.mltbtn { font-size: var(--fs-3); padding: 4px 10px; border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: var(--card); color: var(--amber-deep); cursor: pointer; white-space: nowrap; }
.mltbtn:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.institle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insmeta { color: var(--muted); font-size: var(--fs-3); }
.insnum { white-space: nowrap; font-size: var(--fs-4); color: var(--text); }
.insviews { color: var(--muted); }
.insbars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.insbar { display: grid; grid-template-columns: 160px 1fr 52px; gap: 10px; align-items: center; }
.insbarlab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-4); }
.insbartrack { background: var(--amber-soft); border-radius: var(--r-2); height: 12px; overflow: hidden; }
.insbarfill { display: block; height: 100%; background: linear-gradient(180deg, var(--amber-bright), #f29718); }
.insbarval { text-align: right; font-size: var(--fs-4); color: var(--text); }
@media (max-width: 640px) {
  .insrow { grid-template-columns: 1fr auto auto; }
  .insrow .insmeta, .insrow .insviews { display: none; }
  .insbar { grid-template-columns: 110px 1fr 44px; }
}

/* --- Flo: the proactive assistant card at the top of Overview. A gentle amber
   wash + left edge sets her apart as "the assistant speaking" without shouting;
   every colour is a token so both themes are covered. --- */
.flopanel { border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), transparent 62%), var(--card);
  box-shadow: inset 3px 0 0 var(--amber-bright); }
.flohead { align-items: center; gap: 9px; flex-wrap: wrap; }
.floblurb { min-width: 0; display: inline-flex; align-items: baseline; flex: 0 1 auto; }
.flotype { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-left: .35em; }
.flocaret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--amber-deep); vertical-align: -0.18em; animation: flocaretblink 1.05s steps(1) infinite; }
@keyframes flocaretblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flocaret { animation: none; } }
/* prev / pause / next controls for the typed header (WCAG: pausable auto-motion).
   margin-right clears the panel's absolute fold caret (phead padding-right 44px). */
.floctrls { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-right: 8px; }
.floctrl { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: 1px solid transparent; border-radius: var(--r-3); background: none;
  color: var(--dim); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.floctrl:hover { color: var(--amber-deep); border-color: var(--line2); background: var(--card2); }
.floctrl:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.floctrl .bic { width: 16px; height: 16px; margin-right: 0; }
/* FLO MARK - the assistant's ONE identity mark, used on every Flo surface:
   panel headers, the Campaigns/Analytics ledes, the Outreach band and inline
   "Flo's reply" labels. Glyph is the #gfFloMark sprite symbol (dashboard.html).
   Chip = avatar (28, .lg 36). .bare = inline label glyph, no chip.
   The glyph is currentColor only - the house icon set bakes a #f29718 accent
   into each control glyph, which is invisible on this amber chip. */
.flomark { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #3a2600; }
.flomark svg { width: 18px; height: 18px; display: block; }
.flomark.lg { width: 36px; height: 36px; }
.flomark.lg svg { width: 22px; height: 22px; }
.flomark.bare { width: auto; height: auto; border-radius: 0; background: none;
  color: var(--amber-deep); }
.flomark.bare svg { width: 15px; height: 15px; }
/* Content Drop mark: the same chip language as the Flo mark (amber gradient, dark glyph)
   with its own phone+QR+link glyph, sized a touch larger and given a soft amber glow so it
   reads as the panel's hero icon. */
.dropmark { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(180deg, var(--amber-bright), #f29718); color: #3a2600;
  box-shadow: 0 2px 8px rgba(224, 137, 0, .38); }
.dropmark svg { width: 19px; height: 19px; display: block; }
/* sprite host - holds #gfFloMark, never painted */
.gfsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.floname { font-weight: 700; letter-spacing: .04em; }
.floblurb { font-weight: 400; }
.florows { display: flex; flex-direction: column; gap: 9px; }
.florow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card); }
.florow:hover { border-color: var(--amber); box-shadow: var(--shadow); }
.florow .floric { width: 20px; height: 20px; margin-right: 0; color: var(--amber-deep); flex: none; }
.flotext { font-size: var(--fs-4); line-height: 1.45; color: var(--text); }
.flopostlink { color: var(--amber-deep); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 2px; border-radius: var(--r-1); }
.flopostlink:hover { text-decoration-color: var(--amber); }
.flopostlink:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.floact { display: flex; }
.floact .sm-act { padding: 7px 13px; font-size: var(--fs-3); border-radius: var(--r-3);
  letter-spacing: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .florow { grid-template-columns: auto 1fr; }
  .floact { grid-column: 1 / -1; justify-content: flex-start; padding-left: 32px; }
  /* On a phone the Flo header stays ONE row: [mark FLO] | message ticker (flex, scrolls
     internally) | prev/pause/next | fold caret. The blurb is the flex:1 middle; if its
     message overflows, JS (floTick) measures the exact overflow, sets --floShift/--floDur
     and adds .floticking, and the rule below scrolls it out to reveal the end, holds, then
     back. min-width:0 is load-bearing: without it the flex item refuses to shrink below
     its content and the WHOLE PAGE scrolls sideways at 375px. */
  .flohead { flex-wrap: nowrap; }              /* override the base .pheadflex wrap so it never breaks to 3 lines */
  .flohead .spacer { display: none; }          /* the blurb owns the middle; drop the flex:1 spacer so controls pin right */
  .flohead .flomark, .flohead .floname { flex: none; }   /* mark + FLO never shrink */
  .floblurb { flex: 1 1 0; min-width: 0; display: block; overflow: hidden; white-space: nowrap; }
  .flotype { display: inline-block; white-space: nowrap; overflow: visible; text-overflow: clip;
    max-width: none; margin-left: 0; }
  .flotype.floticking { animation: floTick var(--floDur, 12s) ease-in-out infinite; will-change: transform; }
  .floblurb:active .flotype.floticking { animation-play-state: paused; }
  .flocaret { display: none; }
}
@keyframes floTick {
  0%, 10% { transform: translateX(0); }
  46%, 56% { transform: translateX(calc(-1 * var(--floShift, 0px))); }
  92%, 100% { transform: translateX(0); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .flotype { animation: none; overflow: hidden; text-overflow: ellipsis; }
}

/* -------- Creative Studio: Ads creator -------- */
.adtypeseg { margin-bottom: 12px; }
.adnets, .adengines { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.adnets .netchip small, .adengines .netchip small { opacity: .7; font-weight: 400; }
.adnote { margin: 4px 0 10px; }
.admodepane { margin-top: 6px; }
/* chosen photo preview in the ad picker - the customer SEES their selection,
   clickable to view full size (mirrors the collage slot thumbnail) */
.adpick-ths { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.adpick-th { width: 84px; height: 84px; padding: 0; line-height: 0; overflow: hidden;
  border: 2px solid var(--line2); border-radius: var(--r-3); background: none; cursor: pointer; }
.adpick-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adpick-th:hover { border-color: var(--amber); }
/* the ads photo picker is a flex row (chosen thumbs + a compact Change button),
   NOT the stretching .stpick grid that inflated the button to a big empty box. */
.stpick.adpickbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adpickbox .adpick-ths { margin-bottom: 0; }
.adpickbox .stpbtn { width: auto; padding: 8px 14px; font-size: var(--fs-3); }   /* smaller + clean, site style */
/* warn when a text-baked creative is picked as an ad BASE (its text would double up) */
.adbakewarn { flex-basis: 100%; display: flex; align-items: flex-start; gap: 7px; margin-top: 2px;
  font-size: var(--fs-2); color: var(--amber-deep); background: rgba(224, 137, 0, 0.10);
  border: 1px solid rgba(224, 137, 0, 0.35); border-radius: var(--r-3); padding: 8px 11px; line-height: 1.45; }
.adbakewarn .bic { flex: 0 0 auto; }
.adbakewarn .bic svg { width: 15px; height: 15px; }
/* ad options - deliberate rows (CTA + POSITION | SIZES full width | LOGO + SIGNATURE),
   not an auto-fit grid, so every control gets the width it actually needs */
.adopts { display: flex; flex-direction: column; gap: 18px; margin: 14px 0 6px; }
.adopts .adrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: start; }
.adopt > label { display: block; font: 600 10px/1.4 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.adopt .adsizes, .adopt .anseg, .adopt .adctarow, .adopt .collbrandrow { margin: 0; }
@media (max-width: 620px) { .adopts .adrow2 { grid-template-columns: 1fr; gap: 14px; } }
.adsizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.adsizes .collcheck small { opacity: .6; font-family: var(--font-mono); font-size: .82em; }
.adctarow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adctarow .adctasel { flex: 1 1 200px; }
.adcopy { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.adcopyhead { margin-top: 4px; }
.adcopyact { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.adcopylist { display: grid; gap: 8px; }
.adcopysrc { font-size: var(--fs-1); letter-spacing: .12em; color: var(--dim); margin: 2px 0; }
.adcopycard { position: relative; border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px; background: var(--card); }
.adcopy-h { font-weight: 700; margin-bottom: 3px; padding-right: 44px; }
.adcopy-b { font-size: .9em; color: var(--dim); margin-bottom: 4px; }
.adcopy-cta { font-size: var(--fs-1); letter-spacing: .1em; color: var(--amber-deep); }
.adcopycard .adcopyuse { margin-top: 8px; }
.adscore { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: var(--fs-2); font-weight: 700; padding: 2px 8px; border-radius: var(--r-5); background: var(--line2); color: var(--text); }
.adscore.good { background: var(--green-soft, rgba(40,180,110,.16)); color: var(--green); }
.adscore.bad { background: var(--red-soft, rgba(220,70,90,.16)); color: var(--red); }
.adresult { padding: 4px 0; }
.adthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adthumbs img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--r-3); border: 1px solid var(--line); }
.adlaunch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
/* Launch progress meter + completion / connect / error cards - all drop to a full-width
   row beneath the Launch button (the meter reuses the .stprog build-stepper look). */
.adlaunchnote { flex: 1 1 100%; }
.adlaunchnote:empty { display: none; }
.adlaunch-prog { margin: 0; }
.adlaunch-done, .adlaunch-connect, .adlaunch-err {
  flex: 1 1 100%; border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; background: var(--card2); }
.adlaunch-done { border-color: var(--green, #14976b); }
.adlaunch-connect { border-color: var(--amber); }
.adlaunch-done-h, .adlaunch-connect-h { font-size: var(--fs-5); font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.adlaunch-done-h .bic { color: var(--green, #14976b); }
.adlaunch-done-sub, .adlaunch-connect-sub { font-size: var(--fs-3); line-height: 1.5; margin: 0 0 12px; color: var(--dim); }
.adlaunch-ai { font-size: var(--fs-2); line-height: 1.45; color: var(--amber-deep); font-weight: 600;
  display: flex; gap: 7px; align-items: flex-start; margin-bottom: 10px; }
.adlaunch-ai .bic, .adlaunch-err .bic { flex: none; }
.adlaunch-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.adlaunch-err { border-color: var(--amber-deep); font-size: var(--fs-3); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start; color: var(--amber-deep); }

/* -------- Ads + Commerce template pickers --------------------------------
   Both reuse the Brand-profile slide-layout CARD verbatim (.slidegal-card /
   -thumb / -l / -eye, defined once by the slide gallery), so all three template
   grids are pixel-identical. Here we only lay the grid out IN-PANE (the slide
   gallery's own grid lives inside a modal, so its flex sizing can't be shared),
   plus the Commerce-only group headers + loading skeleton. */
.adtemplates, #cmTemplates { display: grid; grid-template-columns: repeat(auto-fill, 100px);
  justify-content: start; gap: 14px 16px; margin: 6px 0 12px; }
.adtplload, .cmtplload { grid-column: 1 / -1; color: var(--muted); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .06em; padding: 24px 2px; }
/* Commerce groups its cards under a mono section label that spans the whole row. */
.cmtpl-grouph { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 8px 0 0; }
.cmtpl-grouph:first-child { margin-top: 0; }
.cmtpl-grouph span { color: var(--muted); }
/* loading skeleton: a .slidegal-card whose 9:16 thumb + label shimmer until the
   real thumbnails decode. */
.cmskel .cmskel-th { aspect-ratio: 9 / 16; border: 0; cursor: default;
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
.cmskel .cmskel-l { height: .72rem; border-radius: var(--r-2); align-self: stretch;
  background: linear-gradient(100deg, var(--card2) 30%, var(--line2) 50%, var(--card2) 70%);
  background-size: 200% 100%; animation: shimmer 1.15s linear infinite; }
@media (max-width: 560px) { .adtemplates, #cmTemplates { grid-template-columns: repeat(auto-fill, 82px); } }
/* the ad lightbox net-picker uses text platform chips (Facebook / Instagram etc.),
   not single icons, since each ad "network" is a platform pair. */
.cmlb .adlb-netpick { gap: 6px; }
.cmlb .adlb-netpick .adlbnet { padding: 6px 10px; }

/* ---- Commerce product feed (one feed -> Google / Meta / TikTok catalogs) ---- */
.feedplats { display: flex; gap: 5px; align-items: center; }
.feedplat { font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em; padding: 3px 9px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted);
  background: var(--card2); font-family: var(--font-body); }
.feedplat.is-new { color: var(--amber-deep); border-color: var(--amber); background: var(--amber-soft); }
.feedurlrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feedurlrow input { flex: 1; min-width: 240px; padding: 11px 13px; border-radius: var(--r-3);
  background: var(--card2); border: 1px solid var(--line2); color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-3); }
.feedurlrow input:focus { outline: none; border-color: var(--amber); background: var(--card); }
.feedsetup { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.feedsetup-h { font-size: var(--fs-1); letter-spacing: .16em; color: var(--muted); margin-bottom: 9px; }
.feedplatd { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2);
  margin-bottom: 8px; }
.feedplatd + .feedplatd { margin-top: 0; }
.feedplatd > summary { cursor: pointer; padding: 11px 14px; font-size: var(--fs-4); color: var(--text);
  display: flex; align-items: center; gap: 9px; list-style: none; }
.feedplatd > summary::-webkit-details-marker { display: none; }
.feedplatd > summary b { color: var(--amber-deep); font-weight: 700; }
.feedplatd > summary::after { content: "+"; margin-left: auto; color: var(--amber-deep);
  font-weight: 700; font-size: var(--fs-6); line-height: 1; }
.feedplatd[open] > summary::after { content: "\2212"; }
.feedplatd[open] > summary { border-bottom: 1px solid var(--line); }
.feedplatd-sub { font-size: var(--fs-1); letter-spacing: .03em; color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; }
.feedplatd ol { margin: 0; padding: 8px 16px 10px 34px; }
.feedplatd li { font-size: var(--fs-4); color: var(--dim); margin: 6px 0; line-height: 1.5; }
.feedplatd li b { color: var(--text); font-weight: 600; }
.feedplatd li .mono { font-family: var(--font-mono); font-size: var(--fs-3); color: var(--amber-deep);
  background: var(--amber-soft); padding: 1px 5px; border-radius: var(--r-2); }
.feedroute { padding: 0 2px; }
.feedroute-t { font-size: var(--fs-1); letter-spacing: .12em; color: var(--amber-deep); margin: 9px 0 -2px 14px; }
.feednote { font-size: var(--fs-3); color: var(--muted); margin: 6px 14px 12px; font-style: italic; }

/* ---- Print studio (business cards + flyers) ---- */
.prtemplates { display: grid; gap: 8px; margin: 6px 0 12px; }
.prtemplates.prtpl-card { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.prtemplates.prtpl-flyer { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); }
.prtplload { color: var(--muted); font-size: var(--fs-2); padding: 8px 2px; }
.prtpl { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 2px solid var(--line2, rgba(140,140,150,.28)); border-radius: var(--r-3); background: var(--card, #fff); cursor: pointer; }
.prtpl:hover { border-color: var(--amber, #e08900); }
.prtpl.on { border-color: var(--amber-bright, #e08900); box-shadow: 0 0 0 1px var(--amber-bright, #e08900); }
.prtpl img, .prtpl-ph { width: 100%; height: auto; display: block; border-radius: var(--r-2); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.prtpl-ph { aspect-ratio: 3 / 2; background: var(--line2, #e6e6ea); }
.prtpl-l { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em; text-transform: uppercase; color: var(--dim, #6b7280); text-align: center; }
.prtpl.on .prtpl-l { color: var(--text, #111); }
/* magnify affordance on each layout thumbnail (enlarge without selecting) */
.prtpl-zoom { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: var(--r-3); background: rgba(10,14,20,.6); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .13s ease; }
.prtpl:hover .prtpl-zoom, .prtpl:focus-within .prtpl-zoom { opacity: 1; }
.prtpl-zoom .bic svg { width: 15px; height: 15px; }
@media (hover: none) { .prtpl-zoom { opacity: .9; } }
.prfields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 10px 0; }
.prfield { display: flex; flex-direction: column; gap: 3px; }
.prfield.wide { grid-column: 1 / -1; }
.prfield label { font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.prfield textarea { resize: vertical; }
.prfields-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 12px 0 0; }
.prfields-note { font-size: var(--fs-2); color: var(--muted); }
.prfields-head .btn { padding: 5px 11px; font-size: var(--fs-3); white-space: nowrap; }
#prIdeas { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.pridea { text-align: left; padding: 7px 10px; border: 1px solid rgba(140,140,150,.24); border-radius: var(--r-3); background: transparent; color: inherit; cursor: pointer; display: block; }
.pridea:hover { border-color: var(--amber, #e08900); }
.pridea b { display: block; font-size: var(--fs-3); }
.prresult-in { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.prpreview { flex: 0 0 auto; max-width: 340px; }
.prpreview img { max-width: 100%; height: auto; border-radius: var(--r-3); box-shadow: 0 4px 18px rgba(0,0,0,.16); }
.prpreview img, .prdesign-th img { cursor: pointer; }
/* enlarge-on-click lightbox for any card/flyer preview */
.prlbx { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--gf-safe-top)) calc(24px + var(--gf-safe-right)) calc(24px + var(--gf-safe-bottom)) calc(24px + var(--gf-safe-left));
  background: rgba(6,8,12,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: prlbxIn .16s ease; }
@keyframes prlbxIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .prlbx { animation: none; } }
.prlbx-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.prlbx-img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-3); background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.55); cursor: default; }
.prlbx-cap { color: rgba(255,255,255,.74); font-size: var(--fs-2); letter-spacing: .05em; text-transform: uppercase; }
.prlbx-x { position: fixed; top: calc(16px + var(--gf-safe-top)); right: calc(18px + var(--gf-safe-right)); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(20,24,32,.72); color: #fff; font-size: var(--fs-5); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.prlbx-x:hover { background: rgba(44,50,62,.92); border-color: rgba(255,255,255,.5); }
@media (max-width: 760px) { .prlbx-x { width: 44px; height: 44px; } }   /* phone: a 44px target */
.prside { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.prhandoff { display: flex; flex-wrap: wrap; gap: 6px; }
#prPhotos { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.prphoto { flex: 1 1 200px; min-width: 180px; }
.prphoto label { font-size: var(--fs-2); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
/* Bold every input head / field label site-wide (per request). These are the
   mono block labels that head form fields across every form; a bare <label>
   from the shared field builder (GF_renderField) inherits its form's rule here.
   Placed after the individual label rules so it wins on order without touching
   their other properties. */
.field label, .detail label, .kvform .kv label, .studiocard .stform label,
.musicownpanel > label, .mlbside label, .gfdlg label, .npbody label,
.pwform label, .ied-adj label, .ied-textrow label, .prfield label,
.prphoto label, .adsublabel, .adopt > label, .collopt label, .goalform label,
.clipform .ststep > label, .kvform .fieldrow label { font-weight: 700; }
/* FRONT / BACK content panels - colour-coded so it's clear which side you edit */
.prside-panel { border-radius: var(--r-3); }
.prside-panel.prside-active { background: rgba(80, 130, 200, .09); border: 1px solid rgba(80, 130, 200, .30); padding: 8px 12px 10px; margin: 6px 0; }
.prside-panel-back { background: rgba(224, 137, 0, .10); border: 1px solid rgba(224, 137, 0, .32); padding: 8px 12px 10px; margin: 8px 0; border-radius: var(--r-3); }
.prside-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; padding: 3px 11px; border-radius: var(--r-2); margin-bottom: 8px; font-weight: 700; }
.prside-tag-front { background: #3f6fb4; color: #fff; }
.prside-tag-back { background: var(--amber, #e08900); color: #1a1206; }
/* Optional QR link + My Designs saved library */
.prqr { margin: 8px 0; }
.prqr input { width: 100%; }
.prsaved { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255, 255, 255, .10)); }
.prdesigns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.prdesign { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line, rgba(255, 255, 255, .12)); border-radius: var(--r-3); background: var(--card2, rgba(255, 255, 255, .03)); }
.prdesign-th { flex: 0 0 auto; width: 92px; height: 58px; border-radius: var(--r-3); overflow: hidden; background: rgba(120, 130, 150, .14); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.prdesign-th img { width: 100%; height: 100%; object-fit: contain; }
.prdesign-th .prtpl-ph { width: 100%; height: 100%; }
.prdesign-meta { flex: 1 1 auto; min-width: 0; }
.prdesign-name { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px; border-radius: var(--r-3); color: inherit; font-weight: 600; font-size: var(--fs-4); cursor: text; }
.prdesign-nametext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.prdesign-name:hover { background: rgba(120, 130, 150, .14); }
.prdesign-name .cic { flex: 0 0 auto; color: var(--muted, #9aa3b2); }
.prdesign-name:hover .cic { color: var(--amber, #e08900); }
.prdesign-namein { width: 100%; font: inherit; font-weight: 600; padding: 3px 6px; border: 1px solid var(--amber, #e08900); border-radius: var(--r-3); background: rgba(0, 0, 0, .18); color: inherit; outline: none; }
.prdesign-sub { font-size: var(--fs-2); color: var(--muted); margin: 2px 0 0 6px; }
.prdesign-act { flex: 0 0 auto; display: flex; gap: 6px; }
.prdl { text-align: center; }
@media (max-width: 620px) { .prfields { grid-template-columns: 1fr; } .prpreview { max-width: 100%; } }

/* ---------- Post from Phone panel (SPEC_POST_FROM_PHONE.md) ----------
   Manual native-posting helper: save each media, copy the caption, open the app.
   Lives inside .gfsheet-body (vertical scroll only); everything wraps/breaks so a
   phone at 375px never scrolls sideways. gfSheet is a centred dialog on desktop and
   a bottom sheet on phones (responsive rule at the end of this block). */
.pfp { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }

/* WHY (tip): icon + sentence are ONE flex row, so the sentence never fragments */
.pfp-tip { display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: var(--fs-4); line-height: 1.5; color: var(--text);
  background: var(--amber-soft); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: 12px 14px; }
.pfp-tip .bic { flex: none; color: var(--amber-deep); margin-top: 1px; }
.pfp-tip b { color: var(--amber-deep); }

/* HOW (3-step guide chips, in the same order as the sections below) */
.pfp-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 0; }
.pfp-step { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto;
  justify-content: center; font-size: var(--fs-3); color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px 6px 6px; white-space: nowrap; }
.pfp-step b { flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-bright); color: #1a1206; font-size: var(--fs-2); font-weight: 700; }

/* sections */
.pfp-sec { display: flex; flex-direction: column; gap: 9px; }
.pfp-h { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); display: flex; align-items: center;
  gap: 8px; min-height: 30px; }
.pfp-sub { font-family: var(--font-body); letter-spacing: 0; text-transform: none;
  font-size: var(--fs-2); color: var(--dim); }
/* Caption's Copy: the section's primary action. Sits at the header's right edge,
   comfortable tap size, a clear (now dark) glyph, and a soft amber lift instead of a
   heavy glow so it reads as a tidy button, not a floating chip. */
.btn.amber.pfp-hbtn { margin-left: auto; padding: 10px 18px; font-size: var(--fs-4);
  border-radius: var(--r-3); letter-spacing: 0; box-shadow: 0 3px 9px rgba(242, 151, 24, .2); }
.btn.amber.pfp-hbtn:hover { box-shadow: 0 5px 14px rgba(242, 151, 24, .28); }
.pfp-hbtn .bic { width: 17px; height: 17px; margin-right: 7px; }

/* caption */
.pfp-text { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 11px 13px; font-size: var(--fs-4); line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-height: 210px; overflow-y: auto; }
.pfp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pfp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3);
  font-weight: 600; color: var(--amber-deep); background: var(--amber-soft);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 13px; cursor: pointer; }
.pfp-chip:hover { border-color: var(--amber); }
.pfp-chip .bic { width: 15px; height: 15px; }
.pfp-note { font-size: var(--fs-3); color: var(--dim); margin: 0; line-height: 1.4; }

/* media strip: compact tiles that WRAP (never a sideways scroll) */
.pfp-media { display: flex; flex-wrap: wrap; gap: 10px; }
.pfp-mnet { display: flex; flex-direction: column; gap: 8px; }
.pfp-nl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-deep); }
.pfp-m { display: flex; flex-direction: column; gap: 7px; width: 96px; max-width: 100%; }
.pfp-mthumb { position: relative; display: block; width: 96px; height: 96px; max-width: 100%;
  border-radius: var(--r-4); border: 1px solid var(--line2); overflow: hidden;
  background: var(--card2) center/cover no-repeat; }
.pfp-mthumb.vid { background: #000; }
.pfp-mthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfp-mvid { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; pointer-events: none; }
.pfp-mvid .bic svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.pfp-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 96px; max-width: 100%; font-size: var(--fs-3); font-weight: 600; cursor: pointer;
  color: var(--text); background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--r-3); padding: 7px 8px; font-family: var(--font-body); }
.pfp-mthumb { transition: border-color .15s, box-shadow .15s; }
.pfp-m:hover .pfp-mthumb { border-color: var(--amber); box-shadow: var(--shadow); }
.pfp-mbtn:hover { border-color: var(--amber); color: var(--amber-deep); }
.pfp-mbtn:active, .pfp-netchip:active { transform: translateY(0); }
.pfp-mbtn .bic { width: 15px; height: 15px; }
.pfp-none { font-size: var(--fs-3); color: var(--dim); margin: 0; }

/* OPEN THE APP: network chips (each copies that net's caption + opens the app) */
.pfp-open { display: flex; flex-wrap: wrap; gap: 9px; }
.pfp-netchip { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-3);
  padding: 9px 13px 9px 11px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pfp-netchip:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); }
.pfp-netchip:hover .pfp-ext { color: var(--amber-deep); }
.pfp-ext { display: inline-flex; color: var(--dim); margin-left: 1px; }
.pfp-ext .bic { width: 15px; height: 15px; }
.pfp-neti { display: inline-flex; width: 22px; height: 22px; flex: none; }
.pfp-neti svg { width: 100%; height: 100%; }
.pfp-neti.instagram { color: #d6336c; } .pfp-neti.facebook { color: #1877f2; }
.pfp-neti.linkedin { color: #0a66c2; } .pfp-neti.youtube { color: #e23b2e; }
.pfp-neti.pinterest { color: #e60023; } .pfp-neti.gmb { color: #1a73e8; }
.pfp-neti.tiktok, .pfp-neti.twitter { color: var(--text); }

/* done / posted / QR / copied-flash */
.pfp-done { display: flex; flex-direction: column; gap: 8px; margin-top: 2px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.pfp-donebtn { align-self: flex-start; font-size: var(--fs-4); padding: 11px 20px; }
.pfp-donehint { font-size: var(--fs-3); color: var(--dim); margin: 0; line-height: 1.45; }
.pfp-posted { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); font-weight: 600;
  color: var(--green); background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 13px 15px; margin: 0; }
.pfp-posted .bic { flex: none; }
.pfp-qrbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: center; margin-top: 2px; font-size: var(--fs-3); color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 6px; }
.pfp-qrbtn:hover { color: var(--amber-deep); }
.pfp-qrbtn .bic { width: 16px; height: 16px; }
.pfp-done-flash { background: var(--green) !important; border-color: var(--green) !important;
  color: #fff !important; }

/* the composer's manual toggle hint (unchanged behaviour) */
.pfpmodehint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-3);
  color: var(--amber-deep); margin: -4px 0 4px; }
.pfpmodehint .bic { flex: none; }

/* ---- responsive gfSheet: centred dialog on desktop, bottom sheet on phones ----
   NN/g + Material: bottom sheets suit small screens, centred dialogs suit large. The
   base rule (bottom-anchored) stays for phones; >=761px re-centres and enlarges it. */
@media (min-width: 761px) {
  dialog.gfsheet:not(.full) { inset: 0; margin: auto; max-width: 580px; max-height: 88vh;
    border: 1px solid var(--line); border-radius: var(--r-5); box-shadow: var(--shadow-lg);
    animation: gfSheetPop .18s cubic-bezier(.16, .8, .3, 1); }
  dialog.gfsheet:not(.full) .gfsheet-grip { display: none; }
  dialog.gfsheet:not(.full) .gfsheet-head { padding-top: 16px; }
}
@keyframes gfSheetPop { from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; } }
:root[data-theme="dark"] dialog.gfsheet:not(.full) { border-color: var(--navy-line); }

/* ---------- Brand setup wizard ---------- */
.wzwrap { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: calc(18px + var(--gf-safe-top)) calc(18px + var(--gf-safe-right)) calc(18px + var(--gf-safe-bottom)) calc(18px + var(--gf-safe-left)); }
.wzdim { position: absolute; inset: 0; background: rgba(10, 14, 22, .55); }
.wzcard { position: relative; width: min(580px, 100%); max-height: 92vh; overflow: hidden; background: var(--card);
  border-radius: var(--r-5); box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: flex; flex-direction: column;
  animation: wzin .26s cubic-bezier(.2, .7, .3, 1); }
@keyframes wzin { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.wzhead { padding: 16px 22px 13px; border-bottom: 1px solid var(--line); flex: none; }
.wzhrow { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.wzstepno { font-size: var(--fs-1); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.wzspacer { flex: 1; }
.wzdots { display: flex; gap: 7px; }
.wzdot { width: 11px; height: 11px; border-radius: 50%; background: var(--line2); border: 0; padding: 0; cursor: pointer; transition: transform .25s, background .25s; }
.wzdot:hover { transform: scale(1.3); }
.wzdot.on { background: var(--amber); transform: scale(1.2); cursor: default; }
.wzdot.done { background: var(--green); }
.wzdot.flash { background: var(--amber); animation: wzDotFlash 1.3s ease-in-out infinite; }
@keyframes wzDotFlash { 0%, 100% { opacity: .4; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }
.wzdot:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wzclose { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card);
  color: var(--muted); cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.wzclose:hover { border-color: var(--amber); color: var(--text); }
.wzclose .bic { width: 15px; height: 15px; margin: 0; }
.wznav { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card);
  color: var(--text); cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.wznav:hover:not(:disabled) { border-color: var(--amber); }
.wznav:disabled { opacity: .35; cursor: default; }
.wznav .bic { width: 16px; height: 16px; margin: 0; }
/* phone: the wizard's step arrows and close are 44px targets */
@media (max-width: 760px) { .wzclose, .wznav { width: 44px; height: 44px; } }
.wzbar { height: 8px; border-radius: var(--r-2); background: var(--card2); overflow: hidden; }
.wzbar i { display: block; height: 100%; border-radius: var(--r-2); width: 0; background: linear-gradient(90deg, #f0a838, var(--amber));
  transition: width .6s cubic-bezier(.2, .7, .3, 1); }
.wzpct { font-size: .66rem; color: var(--amber-deep); margin-top: 6px; text-align: right; font-weight: 700; }
.wzbody { padding: 16px 26px 6px; overflow-y: auto; flex: 1; }
.wzstep { animation: wzslide .34s cubic-bezier(.2, .7, .3, 1); }
@keyframes wzslide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.wzicon { width: 50px; height: 50px; border-radius: var(--r-4); background: var(--amber-soft); color: var(--amber-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.wzicon .bic { width: 26px; height: 26px; }
.wztitle { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.wztitle:focus:not(:focus-visible) { outline: none; }   /* a phone lands focus here (tabindex -1) */
.wzintro { color: var(--muted); line-height: 1.55; margin: 0 0 18px; font-size: .95rem; }
/* compact step header: icon inline beside the title, so the fields sit higher (move the header up) */
.wzhdr { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.wzhdr .wzicon { margin-bottom: 0; flex: none; }
.wzhdr-txt { min-width: 0; }
.wzhdr-txt .wztitle { margin: 0 0 4px; }
.wzhdr-txt .wzintro { margin: 0; }
@media (max-width: 560px) { .wzhdr { gap: 11px; } .wzhdr .wzicon { width: 42px; height: 42px; } }
/* reuse the real brand fields (GF_renderField -> .kv) but stack them for a clean, uncongested step */
.wzcard .wzfields.kvform { padding: 0; gap: 15px; }
.wzcard .wzfields .kv { grid-template-columns: 1fr; gap: 6px; align-items: stretch; }
.wzfoot { padding: 15px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex: none; background: var(--card); }
.wzfoot .wzskip { margin-left: auto; }
.wzcard .btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.wzcard .btn.ghost:hover { color: var(--text); border-color: var(--line); }
/* per-step success flourish */
.wzflash { position: absolute; inset: 0; background: var(--card); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 13px; z-index: 5; animation: wzfade .28s; text-align: center; padding: 20px; }
@keyframes wzfade { from { opacity: 0; } to { opacity: 1; } }
.wzflash .pop { width: 76px; height: 76px; border-radius: 50%; background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center; animation: wzpop .5s cubic-bezier(.2, 1.5, .4, 1); }
.wzflash .pop .bic { width: 38px; height: 38px; }
@keyframes wzpop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.wzflash b { font-size: 1.15rem; }
.wzflash span { color: var(--muted); }
/* completion */
.wzdone { text-align: center; padding: 18px 8px 4px; animation: wzin .4s; position: relative; }
.wzmark { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6b545, #e08900);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 12px 30px rgba(224, 137, 0, .4); animation: wzpop .6s cubic-bezier(.2, 1.5, .4, 1); }
.wzmark .bic { width: 42px; height: 42px; }
.wzdone h2 { margin: 0 0 8px; font-size: 1.45rem; }
.wzdone p { color: var(--muted); line-height: 1.6; margin: 0 auto 18px; max-width: 400px; }
.wzsummary { display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 330px; margin: 0 auto 10px; }
.wzsummary .srow { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.wzsummary .srow .t { width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center; flex: none; }
.wzsummary .srow .t .bic { width: 13px; height: 13px; }
.confetti { position: absolute; top: 0; left: 0; right: 0; height: 0; overflow: visible; pointer-events: none; }
.confetti i { position: absolute; top: -10px; width: 9px; height: 14px; opacity: .9; animation: wzfall linear forwards; }
@keyframes wzfall { to { transform: translateY(330px) rotate(360deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wzcard, .wzstep, .wzflash, .wzdone, .wzmark, .wzflash .pop { animation: none; }
  .wzbar i { transition: none; } .confetti { display: none; }
}
@media (max-width: 560px) {
  .wzbody { padding: 20px 18px 4px; }
  .wztitle { font-size: 1.16rem; }
  .wzhead { padding: 15px 18px 12px; }
  /* Header can't fit [step label][14 dots][prev][next][close] on one phone row.
     Keep the step label on ONE line, keep prev/next/close in view, and drop the
     dot strip to its own centred row below - so nothing wraps raggedly or clips. */
  .wzhrow { flex-wrap: wrap; }
  .wzhrow .wzstepno { white-space: nowrap; flex: none; order: 1; }
  .wzhrow .wzspacer { order: 2; }
  .wzhrow .wznav { order: 3; }
  .wzhrow .wzclose { order: 4; }
  .wzhrow .wzdots { order: 5; flex-basis: 100%; justify-content: center; }
  /* Footer: the primary action takes its own full-width row (never clipped);
     Back and Skip share the row above it. */
  .wzfoot { flex-wrap: wrap; padding: 13px 18px; }
  .wzfoot .wzspacer { display: none; }
  .wzfoot [data-back] { order: 1; }
  .wzfoot .wzskip { order: 2; margin-left: auto; }
  .wzfoot .btn.amber { order: 3; flex: 1 0 100%; }
}

/* ---------- Brand intro/outro inline preview + multi-format pop-out ---------- */
.outroprevwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.outroprev { width: 135px; aspect-ratio: 9 / 16; border-radius: var(--r-4); overflow: hidden;
  background: var(--panel2, #0e1626); border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 12px; text-align: center; padding: 6px; cursor: pointer; }
.outroprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outroprev-pop { padding: 6px 12px; font-size: .8rem; }
.outroprev-cap { font-size: .72rem; color: var(--muted); margin: 0; max-width: 150px; line-height: 1.4; }

/* ---------- slide-template picker (Brand profile > VISUALS) ---------- */
/* laid out like the intro/outro preview (.outroprevwrap): a framed preview, then a
   button, then a caption - so the whole Studio panel reads consistently. */
/* horizontal: a compact outro-WIDTH preview on the LEFT, name + button + caption on the
   RIGHT (one row), so it sits in proportion beside the outro preview instead of a tall
   stack. Thumb width matches .outroprev (135px); 4:5 is the slide's true shape. */
.slidepick { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
/* EXACT match of the outro preview (.outroprev): 135px wide, 9:16, same frame - the
   slide renders at 9:16 too, so the two brand-form previews are identical in size. */
.slidepick-thumb { width: 135px; aspect-ratio: 9 / 16; border-radius: var(--r-4); overflow: hidden;
  flex: 0 0 auto; background: var(--panel2, #0e1626); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-align: center; padding: 6px; }
.slidepick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slidepick-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.slidepick-name { font-weight: 700; }
.slidepick-cap { font-size: .72rem; color: var(--muted); margin: 0; max-width: 260px; line-height: 1.4; }
/* Custom outro video picker (mirrors .slidepick): a 9:16 video preview + choose/remove. */
.outrovid { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.outrovid-prev { position: relative; width: 135px; aspect-ratio: 9 / 16; border-radius: var(--r-4); overflow: hidden; background: #0b1220; flex: none; }
/* auto-detected shape badge on each outro-video slot (Wide 16:9 / Tall 9:16 / Square) */
.ovbadge { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 3px 7px; border-radius: var(--r-3);
  background: rgba(8, 12, 20, .82); color: #fff; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .6rem; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
/* CONTAIN (not cover) + black bars: a custom outro is a fixed-shape branded card, so the
   preview shows the WHOLE card letterboxed - exactly how append_outro_cmd now stitches it. */
.outrovid-prev video, .outroprev video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.outrovid-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.outrovid-cap { font-size: .72rem; color: var(--muted); margin: 0; max-width: 320px; line-height: 1.4; }
.outrovid-note { font-size: .72rem; color: var(--amber-deep); font-weight: 600; margin: 0; max-width: 320px; line-height: 1.4; }
/* the picker pop-up reuses the shared .npwrap / .npdim / .npmodal shell. It mirrors
   the Commerce template picker: a GRID of whole-slide thumbnails (always visible,
   the one scroll region) + a per-card Preview that opens the network lightbox. */
.slidegal-modal { width: min(632px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden; }
.slidegal-modal > * { flex: 0 0 auto; }
.slidegal-h { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); }
.slidegal-h b { font-size: 1rem; }
.slidegal-x { background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0; color: var(--amber); }
.slidegal-x svg { width: 22px; height: 22px; }
.slidegal-hint { margin: 0; padding: 12px 18px 6px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.slidegal-hint b { color: var(--text); }
/* fixed, outro-sized thumbs (not stretched by 1fr), centred - so all 10 layouts sit in
   a tidy 5x2 grid that fits the modal with no scroll. */
.slidegal-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, 100px); justify-content: center;
  gap: 14px 16px; padding: 8px 18px 16px;
  /* reserve the scrollbar space on both edges so the column count never flip-flops
     when the (rare, short-viewport) vertical scrollbar appears - keeps it centred. */
  scrollbar-gutter: stable both-edges; }
.slidegal-load { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; }
.slidegal-card { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100px; }
.slidegal-thumb { position: relative; border: 2px solid var(--line); border-radius: var(--r-3); overflow: hidden;
  cursor: pointer; background: var(--card2); padding: 0; display: block; width: 100%;
  transition: border-color .15s, box-shadow .15s; }
/* 9:16 - the SAME shape as the outro/inline preview, just grid-sized (100px wide). */
.slidegal-thumb img, .slidegal-ph { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--card2); }
.slidegal-thumb:hover { border-color: var(--dim); }
.slidegal-card.on .slidegal-thumb { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.slidegal-l { font-size: .76rem; font-weight: 600; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.slidegal-tag { position: absolute; top: 6px; right: 6px; background: rgba(247, 245, 240, .95);
  color: #26211a; font-size: .56rem; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); letter-spacing: .02em; }
/* preview trigger: a small icon over the thumb corner. Replaces the old full-width
   Preview button (which added a whole row per card and forced the grid to scroll). */
.slidegal-eye { position: absolute; top: 7px; left: 7px; z-index: 2; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--r-3); background: rgba(12, 16, 24, .60); color: #fff;
  opacity: .82; transition: opacity .15s, background .15s, color .15s; }
.slidegal-eye:hover { opacity: 1; background: var(--amber); color: #1a1206; }
.slidegal-eye svg { width: 15px; height: 15px; }
/* "Random mix" - a MODE selectable above the grid (a full-width card, so the 10-card
   grid below stays a clean 5x2 with no scroll). Highlights like a chosen card. */
.slidegal-random { display: flex; align-items: center; gap: 10px; width: calc(100% - 36px);
  margin: 2px 18px 0; padding: 8px 13px; text-align: left; cursor: pointer; color: var(--text);
  background: var(--card2); border: 2px solid var(--line); border-radius: var(--r-3);
  transition: border-color .15s, box-shadow .15s; }
.slidegal-random:hover { border-color: var(--dim); }
.slidegal-random.on { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.slidegal-random-ic { flex: 0 0 auto; display: inline-flex; }
.slidegal-random-ic svg { width: 22px; height: 22px; color: var(--amber); }
.slidegal-random-tx { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.slidegal-random-tx b { font-size: .85rem; }
.slidegal-random-tx small { font-size: .72rem; color: var(--muted); }
.slidepick-rand { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.slidepick-rand svg { width: 46px; height: 46px; color: var(--amber); }
.slidegal-acts { padding: 12px 18px; border-top: 1px solid var(--line); text-align: right; }
/* ---- per-layout preview lightbox: network chips + the in-feed card ---- */
.slidegal-loading { color: var(--muted); padding: 50px 0; text-align: center; }
.slidelb-modal { width: min(400px, 94vw); max-height: 92vh; display: flex; flex-direction: column;
  gap: 10px; padding: 14px; overflow: hidden; }
.slidelb-modal > * { flex: 0 0 auto; }
.slidelb-h { display: flex; align-items: center; justify-content: space-between; }
.slidelb-h b { font-size: 1rem; }
.slidelb-x { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0; color: var(--amber); }
.slidelb-x svg { width: 20px; height: 20px; }
.slidegal-nets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.slidegal-netchip { border: 1px solid var(--line); background: var(--card2); border-radius: var(--r-pill);
  padding: 5px 12px; cursor: pointer; line-height: 1.15; text-align: center; color: inherit; }
.slidegal-netchip b { display: block; font-size: .74rem; }
.slidegal-netchip span { display: block; font-size: .6rem; color: var(--muted); }
.slidegal-netchip.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.slidelb-frame { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex;
  align-items: flex-start; justify-content: center; padding: 2px 0; }
.slidelb-frame .slidegal-pv { width: 100%; max-width: 280px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  border-radius: var(--r-4); }
.slidegal-media { overflow: hidden; }
.slidegal-strip { display: flex; height: 100%; width: 100%; transition: transform .28s ease; }
.slidegal-slide { flex: 0 0 100%; background: #0c1220 center/cover no-repeat; }
/* subtle Ken Burns for a video post's branded hero in the in-feed preview (reuses the cmkb keyframes) */
.slidegal-slide.gf-kenburns { animation: cmkb 6s ease-in-out infinite alternate; transform-origin: 50% 42%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .slidegal-slide.gf-kenburns { animation: none; } }
/* Text-slide result-card carousel (cover + content slides). Reuses .slidegal-media /
   .slidegal-strip / .pvnav / .pvdots / .pvcount; the strip translates so the page never
   scrolls sideways (feedback_mobile_no_sideways). Capped so a 9:16 set is not huge. */
.stres-set { max-width: 300px; margin: 2px auto 6px; }
.stresult-set .stres-thumb { display: none; }
.stres-setfr { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.stres-setmedia { position: relative; width: 100%; }
.stres-setslide { cursor: pointer; }
.stres-setchips { justify-content: center; margin: 8px 0 0; }
.stres-sethint { text-align: center; margin: 5px 0 0; }
.slidelb-acts .btn { width: 100%; }
@media (max-width: 560px) {
  .slidegal-grid { grid-template-columns: repeat(auto-fill, 82px); }
  .slidegal-card { width: 82px; }
}
/* the pop-out (reuses .npwrap/.npmodal shell) */
.npmodal.gffmt-modal { width: min(720px, 94vw); }
.gffmt-striprow { display: flex; justify-content: center; margin: 4px 0 12px; }
.gffmt-strip { flex-wrap: wrap; }
.gffmt-strip button { flex-direction: column; align-items: center; line-height: 1.25; padding: 7px 15px; }
.gffmt-strip button small { font-size: .6rem; color: var(--dim); font-weight: 600; margin-top: 1px; }
.gffmt-strip button.on small { color: var(--amber-deep); }
.gffmt-strip button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.gffmt-chiprow { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gffmt-play { padding: 6px 14px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.gffmt-play .bic { width: 15px; height: 15px; color: var(--amber-deep); }
.gffmt-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber-deep); background: var(--amber-soft);
  border: 1px solid var(--amber); border-radius: var(--r-pill); padding: 5px 12px; }
.gffmt-chip .bic { width: 15px; height: 15px; }
.gffmt-stage { display: flex; align-items: center; justify-content: center; min-height: 300px;
  background: var(--card2); border-radius: var(--r-4); padding: 24px 20px; }
.gffmt-device { position: relative; box-sizing: border-box;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1); }
.gffmt-screen { width: 100%; height: 100%; border-radius: var(--r-3); overflow: hidden; background: var(--panel2, #0e1626);
  position: relative; display: flex; align-items: center; justify-content: center; }
.gffmt-screen img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.gffmt-screen img.in { opacity: 1; }
/* a custom-video outro is CONTAINED (whole card, letterboxed on black) to mirror the
   stitched render; the animated outro renders as an <img> and stays cover (exact aspect). */
.gffmt-screen video, .gffmt-vid { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.gffmt-none { color: var(--dim); font-size: .74rem; }
.gffmt-device.phone { padding: 9px; background: #12151c; border-radius: 26px;
  box-shadow: 0 12px 34px rgba(20, 24, 40, .30), inset 0 0 0 1.5px #2a2f3a; }
.gffmt-device.phone .gffmt-screen { border-radius: var(--r-5); }
.gffmt-device.phone::before { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 5px; border-radius: var(--r-1); background: #2a2f3a; z-index: 2; }
.gffmt-device.card { background: #12151c; padding: 6px; border-radius: var(--r-3); box-shadow: 0 12px 30px rgba(20, 24, 40, .22); }
.load { position: relative; }
.gffmt-screen.load::after, .gffmt-thumb .tb.load::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .09) 50%, transparent 70%);
  background-size: 200% 100%; animation: gffmtShim 1.1s infinite; }
@keyframes gffmtShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gffmt-caption { text-align: center; margin-top: 14px; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.gffmt-caption b { color: var(--text); }
.gffmt-rail { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 13px; }
.gffmt-rail-h { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.gffmt-thumbs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.gffmt-thumb { border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; flex-direction: column;
  align-items: center; gap: 5px; }
.gffmt-thumb .tb { border-radius: var(--r-2); overflow: hidden; background: var(--panel2, #0e1626); border: 2px solid transparent; }
.gffmt-thumb .tb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gffmt-thumb .tb video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.gffmt-thumb.on .tb { border-color: var(--amber); }
.gffmt-thumb span { font-size: .6rem; color: var(--muted); }
.gffmt-thumb.on span { color: var(--amber-deep); font-weight: 700; }
.gffmt-thumb:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) {
  .gffmt-device { transition: none; } .gffmt-screen img { transition: none; }
  .gffmt-screen.load::after, .gffmt-thumb .tb.load::after { animation: none; }
}
@media (max-width: 640px) { .gffmt-stage { min-height: 260px; padding: 16px 10px; } }
/* small clarifying note under a field (e.g. Default networks -> not the same as connecting) */
.kvform .fieldnote { font-size: .74rem; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.kvform .fieldnote .hlink { font-size: inherit; }
/* wizard v2: AI-write button, step notes, connect step, todo summary rows */
.wzfields .aiwrite { margin-top: 8px; padding: 6px 12px; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.aiwrite { padding: 6px 12px; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.aiwrite .bic { width: 15px; height: 15px; color: var(--amber-deep); }
/* main Brand-profile VOICE + CONTENT rows: Write/Improve with AI + inline Undo */
.airow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.airow .aiundo { font-size: .8rem; }
.wznote { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--muted); background: var(--card2); border-radius: var(--r-3); padding: 10px 12px; margin: 16px 0 0; line-height: 1.5; }
.wznote-tag { flex: none; font-size: .58rem; letter-spacing: .1em; color: var(--amber-deep); background: var(--amber-soft); border-radius: var(--r-2); padding: 2px 6px; margin-top: 1px; }
.wzconnect { margin: 4px 0 0; }
.wzconn-status { margin-bottom: 13px; font-size: .95rem; }
.wzconn-ok { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 600; }
.wzconn-ok .bic { width: 18px; height: 18px; }
.wzconn-none { color: var(--muted); }
.wzconn-note { font-size: .78rem; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.wzsummary .srow.todo { color: var(--muted); }
.wzsummary .srow.todo .t { background: var(--card2); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .wzdot.flash { animation: none; opacity: 1; } }
/* wizard connect step: the publish networks, connected ones lit */
.wzconn-icons { display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 16px; }
.wzconn-net { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--card); }
.wzconn-net svg { width: 20px; height: 20px; }
.wzconn-net.on { color: var(--green); border-color: var(--green); background: var(--green-soft); }
/* nav arrows inside a preview pop-out opened over the wizard (flip through step previews) */
.gffmt-nav { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card);
  color: var(--text); cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.gffmt-nav:hover:not(:disabled) { border-color: var(--amber); }
.gffmt-nav:disabled { opacity: .35; cursor: default; }
.gffmt-nav .bic { width: 16px; height: 16px; margin: 0; }

/* ============================ WhatsApp workspace ============================ */
/* Segmented sub-nav. Scrolls WITHIN itself on a narrow phone so the page never
   gains a sideways scrollbar. */
.wasub { display: flex; gap: 4px; margin: 14px 0 16px; padding: 4px; background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--r-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wasub::-webkit-scrollbar { height: 0; }
.wasub-b { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border: none; background: none; color: var(--muted); font: inherit; font-weight: 600;
  font-size: var(--fs-4); border-radius: var(--r-3); cursor: pointer; white-space: nowrap; }
.wasub-b .bic { width: 16px; height: 16px; margin: 0; }
.wasub-b:hover { color: var(--amber-deep); background: var(--amber-soft); }
.wasub-b.on { color: var(--amber-deep); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Two-column builder: form left, sticky phone preview right. Stacks under 900px. */
.wabuild { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
/* Cap the whole builder so the form + preview stay grouped (no huge void between a
   narrow field and its counter on an ultra-wide screen); the form column caps at a
   readable width and the preview sits right beside it. */
@media (min-width: 900px) { .wabuild { grid-template-columns: minmax(0,1fr) 340px; gap: 26px; max-width: 940px; } }
.wabuild-l, .wabuild-r { min-width: 0; }
.wabuild-sticky { position: sticky; top: calc(var(--gf-topbar-h, 0px) + var(--gf-secbar-h, 0px) + 14px); }   /* below both sticky bars */
.wafield { margin-bottom: 13px; min-width: 0; }
.wafield .cxf-l { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
/* Builder fields use .cxf-i but sit in .wafield (not .cxform), so the shared
   `.cxform .cxf-i` sizing never reached them - they rendered at intrinsic width with
   counters floating far right. Give them the same field look, prose font, full width. */
.wabuild .cxf-i { width: 100%; padding: 10px 12px; border-radius: var(--r-3); border: 1px solid var(--line2);
  background: var(--card2); color: var(--text); font-size: var(--fs-4); font-family: var(--font-body);
  letter-spacing: 0; }
.wabuild select.cxf-i { font-size: var(--fs-5); }
.wabuild textarea.cxf-i { resize: vertical; line-height: 1.5; }
.wabuild .cxf-i:focus { outline: none; border-color: var(--amber); background: var(--card); }
.wabuild .cxf-i::placeholder { color: var(--dim); opacity: .7; }
.wachiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.wachip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--muted); font: inherit;
  font-size: var(--fs-4); cursor: pointer; }
.wachip-btn .bic { width: 15px; height: 15px; margin: 0; }
.wachip-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-deep); }
.wachip-btn.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 700; }
.wachip-btn.soon, .wachip-btn:disabled { opacity: .55; cursor: not-allowed; }
.wasoon { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--dim);
  border: 1px solid var(--line2); border-radius: var(--r-2); padding: 1px 5px; }
.wacost { font-size: var(--fs-3); color: var(--muted); margin-top: 6px; }
.wawarn { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-3); color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); padding: 8px 11px; margin-top: 8px; }
.wawarn .bic, .warow-rej .bic { width: 15px; height: 15px; margin: 0; flex: none; }
.wacount { font-size: var(--fs-2); font-family: var(--font-mono); color: var(--dim); text-align: right;
  margin-top: 4px; font-variant-numeric: tabular-nums; }   /* tabular = no 9->10->100 jitter */
.wacount.near { color: var(--amber-deep); }
.wacount.over { color: #c0392b; font-weight: 700; }
/* a field label with its counter inline on the right (compact - saves a line each) */
.wafl { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wafl-r { display: inline-flex; align-items: center; gap: 8px; }
.wafl .wacount { margin-top: 0; font-weight: 400; color: var(--dim); }
.wafl .wacount.over { font-weight: 700; }
.wainlinebtns { display: flex; flex-wrap: wrap; gap: 8px; }
.wamini { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--amber-deep); font: inherit;
  font-size: var(--fs-2); font-weight: 600; cursor: pointer; }
.wamini .bic { width: 13px; height: 13px; margin: 0; }
.wamini:hover { border-color: var(--amber); background: var(--amber-soft); }
.wamini .flomark { width: 14px; height: 14px; }
.wasamples { display: grid; gap: 8px; margin-top: 10px; }
.wasample { display: grid; gap: 3px; }
.wasample > span { font-size: var(--fs-2); color: var(--muted); font-family: var(--font-mono); }
/* the "where it sits" context line: prose (not mono), with the blank marked as an amber [n] pill matching the preview highlight */
.wasample > .wasample-ctx { font-family: inherit; color: var(--dim); line-height: 1.35; }
.wablankmark { background: #fff3cd; color: #8a6d00; border-radius: var(--r-1); padding: 0 5px; font-family: var(--font-mono); font-size: .9em; }
.wamediapick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wamedthumb { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-3); border: 1px solid var(--line2); }
video.wamedthumb { background: #0b141a; }   /* a video's poster may lag - keep the tile dark, not an empty box */
.wamedempty { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); color: var(--dim); }
.wamedempty .bic { width: 15px; height: 15px; margin: 0; }
/* Broadcast header-media picker: thumbnail (click to view) + name + typed pick button */
.wabcmed { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.wabcmed-slot { display: inline-flex; align-items: center; gap: 8px; }
.wabcmed-view { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: var(--r-3); }
.wabcmed-view:hover .wamedthumb { border-color: var(--amber); }
.wabcmed-view:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wabcmed-name { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-4); color: var(--text); }
.wabcmed-name .bic { width: 15px; height: 15px; margin: 0; color: var(--amber-deep); }
/* Broadcast report: plain-language reasons a send failed (so it explains itself) */
.wabcfails { margin-top: 14px; }
.wabcfails > .cxf-l { margin-bottom: 6px; }
.wabcfail { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-4); color: var(--text);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); padding: 9px 12px; margin-bottom: 6px; }
.wabcfail:last-child { margin-bottom: 0; }
.wabcfail .bic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--amber-deep); }
/* "Fill from a product" button row + the confirmation note it drops into the composer */
.wabcfillrow { margin-top: 8px; }
.wabcfillnote { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-4); color: var(--text);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); padding: 9px 12px; margin: 0 0 12px; }
.wabcfillnote .bic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--amber-deep); }
.wachkline { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); color: var(--muted);
  margin: 8px 0; flex-wrap: wrap; }
.wachkline input[type=checkbox], .wachkline input[type=radio] { accent-color: var(--amber); }
/* small info affordance on a checkbox line (hover it for the styled tooltip) */
.wachkline .bic { width: 14px; height: 14px; margin: 0 0 0 -3px; color: var(--amber-deep); flex: none; cursor: help; }
.wainlineinput { display: inline-block; width: auto; max-width: 100%; margin-left: 6px; }
.waaddmenu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.waaddbtn { font-size: var(--fs-3); }
.wabtnrows { display: grid; gap: 10px; margin-bottom: 10px; }
.wabtnrow { border: 1px solid var(--line2); border-radius: var(--r-3); padding: 10px 12px; background: var(--card2); }
.wabtnrow-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wabtnrow-h .mono { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--muted); }
.wabtnrow-h .bic { width: 14px; height: 14px; margin: 0; }
.wabtnrow .cxf-i { margin-top: 6px; }
.wabtnrow .cxf-i:first-of-type { margin-top: 0; }

/* Phone-frame live preview (a device mock: intentional single WhatsApp look). */
.waphone { max-width: 300px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line2); box-shadow: 0 8px 26px rgba(0,0,0,.14); background: #e7ddd3; }
.waphone-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #075e54; color: #fff;
  font-size: var(--fs-4); font-weight: 600; }
.waphone-bar .bic { width: 18px; height: 18px; margin: 0; color: #fff; }
.waphone-scr { padding: 14px 12px; min-height: 150px;
  background-color: #e7ddd3;
  background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px); background-size: 14px 14px; }
.wamsg { background: #ffffff; border-radius: 3px var(--r-4) var(--r-4) var(--r-4); padding: 8px 10px 6px; max-width: 86%;
  box-shadow: 0 1px 1px rgba(0,0,0,.13); color: #111; font-size: var(--fs-4); line-height: 1.45; word-wrap: break-word; }
.wahdr { margin: -8px -10px 8px; }
.wahdr-img img, .wahdr-vid video { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 3px var(--r-4) 0 0; }
.wahdr-vid { position: relative; background: #000; border-radius: 3px var(--r-4) 0 0; }
/* centred play badge over a video thumbnail (preview + carousel card) */
.waplaybadge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.waplaybadge .bic { width: 15px; height: 15px; margin: 0; color: #fff; }
.wahdr-med { padding: 20px 10px; text-align: center; color: #667; background: #f0efe8; border-radius: 3px var(--r-4) 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-3); }
.wahdr-med .bic { width: 16px; height: 16px; margin: 0; }
.wahdr-txt { font-weight: 700; color: #111; margin-bottom: 4px; }
.wabody b { font-weight: 700; } .wabody i { font-style: italic; }
.wavar { background: #fff3cd; color: #8a6d00; border-radius: var(--r-1); padding: 0 3px; font-size: .95em; }
.wafoot { color: #667781; font-size: var(--fs-2); margin-top: 6px; }
.watime { text-align: right; color: #99a; font-size: var(--fs-1); margin-top: 3px; }
.wadim { color: #99a; }
.wabtns { display: grid; gap: 5px; margin-top: 7px; }
.wabtnchip { display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: #0a7cba;
  border-radius: var(--r-3); padding: 8px; font-size: var(--fs-4); font-weight: 600; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wabtnchip .bic { width: 15px; height: 15px; margin: 0; color: #0a7cba; }

/* Clickable preview + "tap to enlarge" affordance (the sticky column is centred so the
   phone mock and the hint sit under each other, no dead space). */
.wabuild-r { text-align: center; }
.wabuild-r .walint, .wabuild-r .actions { text-align: left; }
#waPreview { cursor: pointer; border-radius: 22px; display: block; }
#waPreview:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.wapvhint { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 0; padding: 4px 10px;
  border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2); color: var(--muted);
  font-size: var(--fs-2); cursor: pointer; }
.wapvhint:hover { border-color: var(--amber); color: var(--amber-deep); }
.wapvhint .bic { width: 13px; height: 13px; margin: 0; }
/* enlarge modal: a bigger phone mock, accessible dialog chrome */
.wapvmodal { position: relative; width: min(400px, calc(100vw - 24px)); max-width: none;
  padding: 30px 22px 20px; animation: none; transform: none; }   /* stay centred (opt out of the base slide) */
.wapvstage .waphone { max-width: min(360px, 78vw); margin: 0 auto; }
.wapvstage .waphone-scr { min-height: 220px; }
.wapvcap { text-align: center; max-width: none; margin: 12px auto 0; }
.wapvclose { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: var(--r-3);
  border: 1px solid var(--line2); background: var(--card2); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.wapvclose:hover { border-color: var(--amber); color: var(--amber-deep); }
.wapvclose .bic { width: 16px; height: 16px; margin: 0; }
/* Media lightbox (click a header thumbnail to view it full-size) */
.walbmodal { position: relative; width: min(760px, calc(100vw - 24px)); max-width: none;
  padding: 44px 16px 16px; animation: none; transform: none;   /* stay centred (opt out of the base slide) */
  display: flex; flex-direction: column; align-items: center; }
.walbstage { display: flex; align-items: center; justify-content: center; width: 100%; }
.walbmedia { max-width: 100%; max-height: 80vh; border-radius: var(--r-3); display: block; }

/* Starter-template gallery */
.wastbtn { font-size: var(--fs-3); }
.wastmodal { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  animation: none; transform: none; }
.wastmodal .phead { flex: none; }
.wastmodal .phead .wapvclose { position: static; }
.wastbody { padding: 14px 16px 16px; overflow-y: auto; }
.wastgroup { margin-bottom: 18px; }
.wastgroup:last-child { margin-bottom: 0; }
/* connected-card action buttons (How it works + Disconnect) group together on the right */
.wahdrbtns { display: flex; gap: 8px; flex-wrap: wrap; }
/* how-it-works guide: a scrollable dialog of collapsible <details> sections */
.waguidemodal { width: min(640px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  animation: none; transform: none; }
.waguidemodal .phead { flex: none; }
.waguidemodal .phead .wapvclose { position: static; }
.waguidebody { padding: 4px 18px 16px; overflow-y: auto; }
.waguide-s { border-bottom: 1px solid var(--line2); }
.waguide-s > summary { cursor: pointer; list-style: none; position: relative; padding: 13px 28px 13px 2px;
  font-weight: 700; color: var(--fg, #111); font-size: var(--fs-1); }
.waguide-s > summary::-webkit-details-marker { display: none; }
.waguide-s > summary::after { content: "+"; position: absolute; right: 6px; top: 11px;
  color: var(--amber-deep); font-weight: 700; font-size: 1.25em; line-height: 1; }
.waguide-s[open] > summary::after { content: "\2212"; }
.waguide-s > summary:hover { color: var(--amber-deep); }
.waguide-b { padding: 0 2px 14px; color: var(--muted); line-height: 1.5; font-size: var(--fs-2); }
.waguide-b p { margin: 0 0 8px; }
.waguide-b ul { margin: 0 0 8px; padding-left: 18px; }
.waguide-b li { margin: 3px 0; }
.waguide-b b { color: var(--fg, #111); font-weight: 700; }
/* searchable product picker (Broadcasts "Or send a product") */
.wabcprodpick { margin-top: 2px; }
.wabcprodsel { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 7px 9px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.wabcprodsel .waprodname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--fg, #111); }
.waprodthumb { position: relative; width: 44px; height: 44px; flex: none; border-radius: var(--r-3); overflow: hidden;
  background: var(--card2); border: 1px solid var(--line2); display: inline-flex; align-items: center;
  justify-content: center; color: var(--dim); }
.waprodthumb.sm { width: 38px; height: 38px; }
.waprodthumb .bic { width: 18px; height: 18px; margin: 0; }
.waprodthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.waprodmodal { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  animation: none; transform: none; }
.waprodmodal .phead { flex: none; }
.waprodmodal .phead .wapvclose { position: static; }
.waprodsearch { padding: 12px 16px 8px; flex: none; }
.waprodlist { overflow-y: auto; padding: 0 8px 10px; }
.waprodtile { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px; border: 0; background: none; border-radius: var(--r-3); color: inherit; }
.waprodtile:hover, .waprodtile:focus-visible { background: var(--amber-soft); outline: none; }
.waprodtile .waprodname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-2); color: var(--fg, #111); }
.waprodempty { padding: 14px 8px; margin: 0; }
/* one-click Embedded Signup: primary card + collapsed manual fallback */
.waes-h { font-size: var(--fs-1); }
.waes-manual { margin-top: 10px; }
.waes-manual > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: var(--fs-2); padding: 6px 2px; }
.waes-manual > summary::-webkit-details-marker { display: none; }
.waes-manual > summary:hover { color: var(--amber-deep); }
.waes-manual > summary .bic { width: 15px; height: 15px; margin: 0; }
.wastgroup > .cxf-l { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wastgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wastcard { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); cursor: pointer;
  font: inherit; color: inherit; }
.wastcard:hover { border-color: var(--amber); background: var(--amber-soft); }
.wastcard:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wastname { font-weight: 700; font-size: var(--fs-4); }
.wastpurp { font-size: var(--fs-3); color: var(--muted); line-height: 1.4; }
.wastcat { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
/* Picker category filter tabs - browse starters by category as well as by type. */
.wastfilter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.wastfilt-b { font: inherit; font-size: var(--fs-4); padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; }
.wastfilt-b:hover { border-color: var(--amber); color: var(--amber-deep); }
.wastfilt-b.on { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 700; }
.wastfilt-b:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wastempty { margin: 2px 0 0; }
/* Authentication (OTP) builder note - informational, not a warning. */
.waauthnote { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-4); color: var(--text);
  line-height: 1.45; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-3);
  padding: 10px 12px; margin: 0 0 14px; }
.waauthnote svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Connected-card WhatsApp mark (filled brand glyph before the number) */
.waconnnum { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.waglyph { display: inline-flex; line-height: 0; flex: none; }
.waglyph svg { width: 22px; height: 22px; display: block; }
/* Token-expiring notice on the connected card: amber pill + a reconnect banner. Wraps
   on narrow screens (no sideways scroll at 375px); uses the amber tokens as-is. */
.cxpill.wapill-warn { color: var(--amber); border-color: var(--amber); }
.wareconnect { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--amber);
  background: var(--amber-soft); border-radius: 10px; }
.wareconnect-msg { display: flex; align-items: center; gap: 8px; min-width: 0;
  flex: 1 1 240px; color: var(--text); }
.wareconnect-msg svg { flex: none; color: var(--amber); }
.wareconnect .btn { flex: 0 0 auto; }
/* "Start from a template" sits with the shape chips as a helper action (not a shape).
   A thin divider separates it; amber text marks it as the get-a-head-start action. */
.wachipsep { align-self: stretch; width: 1px; background: var(--line2); margin: 3px 2px; }
.wastchip { color: var(--amber-deep); font-weight: 600; }
.wastchip .bic { color: var(--amber-deep); }
.wastchip:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); }
/* sample-value helper line - kills the "will everyone get John?" worry */
.wasamphint { font-size: var(--fs-2); color: var(--dim); margin: 0 0 8px; line-height: 1.4; }
/* broadcast fill row: one blank = a mode (shared value vs each subscriber's field) + input/fallback */
.wabcrow { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line2); }
.wabcrow:first-of-type { border-top: 0; padding-top: 2px; }
.wabcrow-l { font-family: var(--font-mono); color: var(--muted); font-size: var(--fs-2); }
.wabcfb { display: grid; gap: 4px; }
.wabcfb .hint { margin: 0; }

/* Linter panel */
.walint { margin-top: 12px; }
.walint-ok { display: flex; align-items: center; gap: 7px; font-size: var(--fs-3); color: var(--green);
  background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--r-3); padding: 9px 11px; }
.walint-ok .bic { width: 15px; height: 15px; margin: 0; }
.walint-h { display: flex; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--amber-deep);
  letter-spacing: .06em; margin-bottom: 6px; }
.walint-h .bic { width: 15px; height: 15px; margin: 0; }
.walint-i { font-size: var(--fs-3); color: var(--muted); padding: 5px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.walint-i b { color: var(--text); text-transform: capitalize; }

/* Status/approval chips */
.wachip { display: inline-block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted); }
.wachip.ok { color: var(--green); background: var(--green-soft); border-color: var(--green); }
.wachip.review { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); }
.wachip.bad { color: #c0392b; background: rgba(192,57,43,.1); border-color: #c0392b; }
.wachip.warn { color: var(--amber-deep); background: var(--amber-soft); border-color: var(--amber); }
.wachip.draft { color: var(--dim); }

/* Generic list rows (templates, broadcasts, opted-out) */
.warow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--line); }
.warow:first-child { border-top: none; }
.warow-main { min-width: 0; flex: 1 1 220px; }
.warow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.warow-sub { font-size: var(--fs-3); color: var(--muted); margin-top: 4px; word-break: break-word; }
.warow-rej { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-3); color: #c0392b; margin-top: 5px; }
.warow-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wadiv { height: 1px; background: var(--line); margin: 16px 0; }
.wareach { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-4); color: var(--muted);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 8px 12px; margin-bottom: 16px;
  cursor: help; }   /* hoverable: reveals the subscriber list (name + number) */
.wareach:hover { border-color: var(--amber); }
.wareach:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wareach .bic { width: 15px; height: 15px; margin: 0; color: var(--amber-deep); }

/* Subscriber management: searchable list + row actions + manage/message modals */
.wasubsearch { position: relative; margin-bottom: 12px; }
.wasubsearch input { padding-left: 34px; }
.wasubsearchico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; margin: 0; color: var(--muted); pointer-events: none; }
.wasublist { display: flex; flex-direction: column; }
.wasubrow { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.wasubrow:first-child { border-top: none; }
.wasubrow-main { min-width: 0; flex: 1 1 200px; }
.wasubrow-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wasubrow-top b { word-break: break-word; }
.wasubrow-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
  font-size: var(--fs-3); color: var(--muted); }
.wasubtag { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 1px 9px; font-size: var(--fs-2); color: var(--text); }
.wasubrow-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wasubmore { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.wasubmodal { position: relative; width: min(460px, calc(100vw - 24px)); max-width: none;
  padding: 0; animation: none; transform: none; }   /* opt out of the base slide -> centred at 375px */
.wasubmodal .phead { padding: 15px 18px; }
.wasubmodal-body { padding: 6px 18px 20px; max-height: min(72vh, 640px); overflow-y: auto; }
.wamgdanger { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.btn.wadanger { color: #c0392b; border-color: rgba(192, 57, 43, .4); }
.btn.wadanger:hover { background: rgba(192, 57, 43, .08); }
.wamsgdiv { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted);
  font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .06em; }
.wamsgdiv::before, .wamsgdiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wamsgnote { display: flex; align-items: flex-start; gap: 7px; color: var(--amber-deep); margin: 8px 0 0; }
.wamsgnote .bic { width: 15px; height: 15px; flex: none; margin: 1px 0 0; }

/* Broadcast report stats */
.wastats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.wastat { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px; text-align: center; }
.wastat-n { font-size: var(--fs-7); font-weight: 800; color: var(--text); }
.wanum { color: var(--amber-deep); cursor: default; }
.wastat-l { font-size: var(--fs-2); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* Carousel builder: per-card editor rows + inline notes */
.wacardlist { display: grid; gap: 12px; margin-bottom: 10px; }
.wacardrow { border: 1px solid var(--line2); border-radius: var(--r-3); padding: 10px 12px; background: var(--card2); }
.wacardrow-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wacardrow-h .mono { font-size: var(--fs-2); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.wacardrow .wamediapick { margin-bottom: 8px; }
.wacardrow .wacardbody { margin-top: 0; }
.wacardnote { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-3); color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-3); padding: 8px 11px; margin-top: 8px; }
.wacardnote .bic { width: 15px; height: 15px; margin: 0; flex: none; }

/* Carousel preview: a horizontally-scrollable strip of card bubbles (scrolls
   inside its own container so the page never scrolls sideways on mobile). */
.wacarstrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.wacardbub { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; background: #fff;
  border-radius: var(--r-3); overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.13); color: #111; }
.wacardimg img, .wacardimg video { display: block; width: 100%; height: 118px; object-fit: cover; }
.wacardvid { position: relative; background: #000; }
.wacardmed { height: 118px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #f0efe8; color: #667; font-size: var(--fs-3); }
.wacardmed .bic { width: 16px; height: 16px; margin: 0; }
.wacardtxt { padding: 7px 9px 4px; font-size: var(--fs-3); line-height: 1.4; word-wrap: break-word; }
.wacardbub .wabtns { margin: 4px 6px 7px; }
.wacarcount { text-align: center; font-size: var(--fs-2); color: #667781; margin-top: 6px; }

/* Inbox */
.waconvlist { display: grid; gap: 2px; margin-bottom: 8px; }
.waconv { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-3); padding: 10px 12px; cursor: pointer; color: inherit; font: inherit; }
.waconv:hover { background: var(--amber-soft); }
.waconv-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.wadot-un { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.waconv-prev { font-size: var(--fs-3); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.waconv-win { font-size: var(--fs-2); font-family: var(--font-mono); flex: none; }
.waconv-win.open { color: var(--green); } .waconv-win.shut { color: var(--dim); }
.waesc { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #c0392b; background: rgba(192,57,43,.1);
  border-radius: var(--r-pill); padding: 1px 7px; }
.waesc .bic { width: 12px; height: 12px; margin: 0; }
.wathread { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.wathread-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wawin { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); font-family: var(--font-mono); }
.wawin .bic { width: 13px; height: 13px; margin: 0; }
.wawin.open { color: var(--green); } .wawin.shut { color: var(--dim); }
.wathread-body { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px 0; }
/* Inbox accordion: expandable conversation items (multiple open at once) */
.waconvlist { gap: 8px; }
.waconvitem { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2); overflow: hidden; }
.waconvitem.open { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.waconvitem.resolved { opacity: .72; }
.waconvhdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer; padding: 11px 14px; color: inherit; font: inherit; }
.waconvhdr:hover { background: var(--amber-soft); }
.waconvhdr-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.waconvhdr-l b { word-break: break-word; }
.waconvhdr-r { display: flex; align-items: center; gap: 10px; flex: none; }
.waconvwhen { font-size: var(--fs-2); }
.wadot-sp { width: 8px; height: 8px; flex: none; }   /* invisible spacer aligns rows with no unread dot */
.waconvcaret { display: inline-flex; transition: transform .15s; color: var(--muted); }
.waconvcaret .bic { width: 16px; height: 16px; margin: 0; }
.waconvitem.open .waconvcaret { transform: rotate(90deg); }
.waresolved { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); font-weight: 700;
  color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
.waresolved .bic { width: 12px; height: 12px; margin: 0; }
.waconvbody { padding: 0 14px 12px; }
.wathreadacts { display: flex; gap: 6px; flex-wrap: wrap; }
.wathreadacts .btn { padding: 4px 9px; font-size: var(--fs-2); }
@media (prefers-reduced-motion: reduce) { .waconvcaret { transition: none; } }
.wamrow { display: flex; } .wamrow.out { justify-content: flex-end; } .wamrow.in { justify-content: flex-start; }
.wabub { max-width: 78%; padding: 7px 11px; border-radius: var(--r-3); font-size: var(--fs-4); line-height: 1.4; word-wrap: break-word; }
.wamrow.out .wabub { background: var(--green-soft); border: 1px solid var(--green); }
.wamrow.in .wabub { background: var(--card2); border: 1px solid var(--line2); }
.wabub-meta { display: block; font-size: var(--fs-1); color: var(--dim); margin-top: 3px; }
.wareplychip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--amber-deep); }
.wareplychip .bic { width: 14px; height: 14px; margin: 0; }
.wareplybar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wareplybar .cxf-i { flex: 1 1 160px; min-width: 0; }
.wareplybar .flomark { width: 15px; height: 15px; }

/* Auto-reply rules */
.warulelist { display: grid; gap: 8px; }
.warule { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line2); border-radius: var(--r-3); padding: 11px 13px; background: var(--card2); }
.warule-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.warule-txt { min-width: 0; }
.warule-when { font-size: var(--fs-4); color: var(--text); }
.warule-then { display: flex; align-items: center; gap: 5px; font-size: var(--fs-3); color: var(--muted); margin-top: 3px; flex-wrap: wrap; }
.warule-then .bic { width: 13px; height: 13px; margin: 0; }
.warule-act .bic { width: 15px; height: 15px; margin: 0; }
/* toggle switch */
.waswitch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; }
.waswitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.waswitch span { position: absolute; inset: 0; background: var(--line2); border-radius: 999px; transition: background .15s; }
.waswitch span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.waswitch input:checked + span { background: var(--amber); }
.waswitch input:checked + span::before { transform: translateX(16px); }

/* ---- Resilient upload HUD (mobile-safe uploads) --------------------------
   A persistent, honest progress panel: bottom-right card on desktop, full-width
   bottom sheet on phones. Uses the theme vars so it adapts to light/dark. Sits
   below the toast (z 2000) so batch summaries still show over it. */
.gfup { position: fixed; z-index: 1400; right: calc(18px + var(--gf-safe-right)); bottom: calc(18px + var(--gf-safe-bottom));
  width: 340px; max-width: calc(100vw - 24px);
  box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: var(--shadow-lg); color: var(--text); font-size: 13px; overflow: hidden; }
.gfup[hidden] { display: none; }
.gfup-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.gfup-title { font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfup-wake { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--green);
  display: inline-flex; align-items: center; gap: 5px; }
.gfup-wake::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.gfup-wake[hidden] { display: none; }
.gfup-min, .gfup-x { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  color: var(--neutral); font-size: 15px; line-height: 1; cursor: pointer; border-radius: var(--r-2); }
.gfup-min:hover, .gfup-x:hover { background: var(--line); color: var(--text); }
.gfup-note { padding: 8px 12px 0; color: var(--neutral); font-size: 11.5px; }
.gfup-note[hidden] { display: none; }
.gfup-list { max-height: 42vh; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.gfup-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name pct" "bar bar" "st st"; gap: 3px 8px; }
.gfup-name { grid-area: name; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfup-pct { grid-area: pct; font-variant-numeric: tabular-nums; color: var(--neutral); }
.gfup-bar { grid-area: bar; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.gfup-bar > i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--amber); transition: width .18s ease; }
.gfup-st { grid-area: st; font-size: 11px; color: var(--neutral); }
.gfup-row[data-st="done"] .gfup-bar > i { background: var(--green); }
.gfup-row[data-st="done"] .gfup-st { color: var(--green); }
.gfup-row[data-st="failed"] .gfup-bar > i { background: var(--red); }
.gfup-row[data-st="failed"] .gfup-st { color: var(--red); }
.gfup-row[data-st="retrying"] .gfup-bar > i,
.gfup-row[data-st="paused"] .gfup-bar > i { background: var(--amber-deep); }
.gfup-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; }
.gfup-foot button { padding: 6px 12px; border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2);
  color: var(--text); font-size: 12px; cursor: pointer; }
.gfup-foot button[hidden] { display: none; }
.gfup-retry { border-color: var(--amber) !important; color: var(--amber-deep) !important; font-weight: 600; }
.gfup--min .gfup-note, .gfup--min .gfup-list, .gfup--min .gfup-foot { display: none; }
@media (max-width: 560px) {
  .gfup { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0;
    padding: 0 var(--gf-safe-right) var(--gf-safe-bottom) var(--gf-safe-left); }   /* clear of the home indicator */
  .gfup-list { max-height: 38vh; }
}

/* ---------- Content Drop tab (prefix cd - .dropcard/.dropopts/.droplimits/.dropmark
   are the Media drag-drop zone + header mark, so never reuse those). Stat tiles,
   the settings editor (fields builder + auto-queue), the link-row chips, the
   dropped-media manager (bar + grid + cards + pills) and the Overview summary.
   Every width is relative so a 375px phone never scrolls sideways. ---------- */
.cdstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  margin: 0 0 18px; }
.cdstat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-4);
  cursor: pointer; text-align: left; color: var(--text); font: inherit;
  transition: border-color .15s ease, background .15s ease; }
.cdstat:hover, .cdstat:focus-visible { border-color: var(--amber); background: var(--amber-soft); }
.cdstat b { font-family: var(--font-display); font-size: var(--fs-7); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cdstat .mono { font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim); }
/* settings editor (generator draft + inline row editor) */
.cdsettings { margin-top: 12px; }
/* Create-form progressive disclosure: advanced settings fold under "More options" so the
   generator reads short by default; a preset/default that fills them auto-opens it. */
.cdgenmore { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--card2); }
.cdgenmore > .cdgenmore-sum { cursor: pointer; list-style: none; padding: 11px 13px; font-family: var(--font-mono);
  font-size: var(--fs-2); letter-spacing: .04em; color: var(--text); display: flex; align-items: center; gap: 8px; }
.cdgenmore > .cdgenmore-sum::-webkit-details-marker { display: none; }
.cdgenmore > .cdgenmore-sum::after { content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep);
  transform: rotate(45deg); transition: transform .15s ease; }
.cdgenmore[open] > .cdgenmore-sum::after { transform: rotate(225deg); }
.cdgenmore[open] > .cdgenmore-sum { border-bottom: 1px solid var(--line); }
.cdgenmore > [data-clgenset] { padding: 6px 13px 13px; }
.cdgenmore-sum:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-3); }
/* Your-links row status badge: at-a-glance state, colour + word (never colour-only). */
.clstat { font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em;
  padding: 2px 7px; border-radius: var(--r-2); border: 1px solid currentColor; white-space: nowrap; }
.clstat-live { color: var(--green, #14976b); }
.clstat-soon { color: var(--amber-deep, #c67700); }
.clstat-full { color: var(--red, #c22f2f); }
.clstat-off { color: var(--neutral); }
.cdsechead { display: block; padding: 12px 0 6px; border-top: 1px dashed var(--line2); margin-top: 10px; }
.cdfields { display: flex; flex-direction: column; gap: 6px; }
.cdfield { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.cdfield .cdflabel { flex: 1 1 160px; min-width: 0; font-size: var(--fs-3); padding: 5px 8px; }
.cdfield select { font-size: var(--fs-3); padding: 5px 8px; max-width: 100%; }
.cdfield .cdfopts { flex: 1 1 100%; min-width: 0; font-size: var(--fs-3); padding: 5px 8px; }
.cdfield .cdfopts[hidden], .cdfield [data-cdfpubwrap][hidden] { display: none; }
.cdfield .clopt { font-size: var(--fs-2); padding: 4px 9px; }
.cdfield .cdfdel { margin-left: auto; }
.cdfield .cdfdel .bic { margin: 0; }
.cdfieldadd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cdfieldadd .btn { font-size: var(--fs-2); padding: 6px 11px; }
.cdinl { margin: 0; font-size: var(--fs-3); }
.cdprivacy, .cdcaption { flex: 1 1 240px; min-width: 0; font-size: var(--fs-3); padding: 6px 9px; }
.cdaqopts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px;
  border: 1px dashed var(--line2); border-radius: var(--r-3); }
.cdaqopts[hidden] { display: none; }
.cdaqrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdaqrow .filterchips { margin-right: 0; flex-wrap: wrap; }
.cdcaprow { align-items: flex-start; flex-direction: column; gap: 4px; }
.cdcaprow .cdcaption { width: 100%; flex: none; }
.cdgenrow { margin-top: 12px; }
.cdprinttip { padding: 0 0 4px; margin: 0; font-size: var(--fs-3); }
/* link-row chips: the NEW count is a button (opens the manager on that link) */
.cdnewchip { cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .08em; color: #1a1206; background: var(--amber-bright); border-color: var(--amber-bright); }
.cdnewchip:hover, .cdnewchip:focus-visible { filter: brightness(1.06); }
.clsettingsbox { border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 4px; }
.clsettingsbox[hidden] { display: none; }
/* manager bar: status chips, link select, type chips, search, bulk toggle */
.cdbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cdbar .filterchips { margin-right: 0; flex-wrap: wrap; }
.cdlinksel { max-width: 100%; font-size: var(--fs-3); padding: 5px 8px; }
.cdsearch { flex: 1 1 160px; min-width: 0; font-size: var(--fs-3); padding: 6px 9px; }
.cdbulkbtn { font-size: var(--fs-2); padding: 6px 11px; }
.cdbulkbtn.on { border-color: var(--amber); color: var(--amber-deep); background: var(--amber-soft); }
.cdbulkbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px;
  margin-bottom: 12px; border: 1px solid var(--amber); background: var(--amber-soft); border-radius: var(--r-3); }
.cdbulkbar[hidden] { display: none; }
.cdbulkbar .btn { font-size: var(--fs-2); padding: 5px 9px; }
.cdbulkn { font-size: var(--fs-1); letter-spacing: .12em; color: var(--amber-deep); }
/* the grid of dropped media */
.cdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cdcard { position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-4); background: var(--card); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease; }
.cdcard:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.cdcard.sel { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.cdselbox { position: absolute; top: 6px; left: 6px; z-index: 2; display: inline-flex; padding: 4px;
  background: rgba(255, 255, 255, .92); border-radius: var(--r-2); }
.cdselbox input { accent-color: var(--amber); width: 16px; height: 16px; margin: 0; }
.cdcard-thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; margin: 0;
  border: none; background: var(--card2); cursor: pointer; overflow: hidden; }
.cdcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdcard-thumb:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.cdnothumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim); }
.cdkind { position: absolute; right: 6px; bottom: 6px; font-size: var(--fs-1); letter-spacing: .12em;
  padding: 2px 7px; border-radius: var(--r-pill); background: rgba(19, 26, 42, .78); color: #fff; }
.cdmeta { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 4px; min-width: 0; }
.cdtitle { font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdlink { font-size: var(--fs-1); letter-spacing: .08em; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdwho { font-size: var(--fs-3); color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cdpills { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 4px; }
.cdpill { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; padding: 2px 7px;
  border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--muted); background: var(--card2);
  white-space: nowrap; }
.cdpill.new { color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; font-weight: 700; }
.cdpill.reviewed { color: var(--muted); }
.cdpill.queued { color: var(--green); background: var(--green-soft); border-color: transparent; }
.cdpill.used { color: var(--green); border-color: var(--green); background: var(--card); }
.cdpill.rejected { color: var(--red); background: var(--red-soft); border-color: transparent; }
.cdpill.held { color: var(--amber-deep); border-style: dashed; border-color: var(--amber); }
.cdpill.noperm, .cdpill.withdrawn { color: var(--red); border-color: var(--red); background: var(--card); }
.cdpill.cleared { color: var(--neutral); }
.cdpill.blocked { color: var(--red); border-color: var(--red); background: var(--red-soft); font-weight: 700; }
.cdpill.flood { color: var(--amber-deep); border-color: var(--amber); border-style: dashed; }
.cdconn { font-size: var(--fs-1); letter-spacing: .05em; color: var(--dim); display: inline-flex; align-items: center;
  gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdconn .bic.cic { width: 11px; height: 11px; flex: none; vertical-align: -1px; }
.cdbllist { display: flex; flex-direction: column; gap: 8px; }
.cdblrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card2); }
.cdblrow.off { opacity: .62; }
.cdblmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cdblmain b { overflow: hidden; text-overflow: ellipsis; }
.cdblmeta { font-size: var(--fs-1); letter-spacing: .05em; color: var(--dim); }
.cdblreason { font-size: var(--fs-2); color: var(--muted); word-break: break-word; }
.cdblrow > .btn { flex: none; }
.cdpill.onpost { cursor: pointer; color: var(--green); border-color: var(--green); background: var(--card); font: inherit;
  font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; }
.cdpill.onpost:hover, .cdpill.onpost:focus-visible { background: var(--green-soft); }
.cdacts { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 6px 8px; margin-top: auto; }
.cdact { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 1px solid transparent; border-radius: var(--r-3); background: none; color: var(--muted);
  cursor: pointer; }
.cdact .bic { margin: 0; width: 16px; height: 16px; }
.cdact:hover, .cdact:focus-visible { border-color: var(--line2); background: var(--card2); color: var(--amber-deep); }
.cdact[disabled] { opacity: .45; cursor: default; }
/* Overview summary card */
.cdsum-nums { font-size: var(--fs-2); letter-spacing: .1em; color: var(--dim); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.cdsum-nums .hlink.mono { font-size: var(--fs-2); letter-spacing: .1em; padding: 0; }
.cdsum-old { color: var(--amber-deep); }
@media (max-width: 640px) {
  .cdstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .cdbar .cdsearch { flex: 1 1 100%; }
  .cdbar .cdlinksel { max-width: 100%; flex: 1 1 100%; }
  .cdfield .cdflabel { flex: 1 1 100%; }
}
/* ---------- Content Drop release 2 (prefix cd): sidebar count chip, presets, the
   brief (shot rows), field placeholder, reward + invite blocks, children note,
   short link + funnel line, the N/300 meter, misuse reports, print chooser,
   manager chips + paging foot, the performance card and the privacy wording.
   Widths stay relative; the 640px block below keeps 375px free of sideways scroll. */
#nav button .navcount { margin-left: auto; flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--amber-bright); color: #1a1206; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0;
  text-align: center; font-variant-numeric: tabular-nums; line-height: 1.5; }
/* presets row */
.cdpresets { align-items: flex-start; margin-top: 12px; }
.cdpresetchips { flex-wrap: wrap; margin-right: 0; }
.cdpresetnote { flex-basis: 100%; color: var(--amber-deep); }
.cdpresetnote[hidden] { display: none; }
/* the brief: intro + shot rows (same bones as the field rows) */
.cdbrief { display: flex; flex-direction: column; gap: 6px; }
.cdintro { width: 100%; min-width: 0; font-size: var(--fs-3); padding: 6px 9px; }
.cdshots { display: flex; flex-direction: column; gap: 6px; }
.cdshot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.cdshot .cdshlabel { flex: 1 1 160px; min-width: 0; font-size: var(--fs-3); padding: 5px 8px; }
.cdshot select { font-size: var(--fs-3); padding: 5px 8px; max-width: 100%; }
.cdshot .cdshhint { flex: 1 1 100%; min-width: 0; font-size: var(--fs-3); padding: 5px 8px; }
.cdshot .clopt { font-size: var(--fs-2); padding: 4px 9px; }
.cdshot .cdfdel { margin-left: auto; }
.cdshot .cdfdel .bic { margin: 0; }
.cdfield .cdfph { flex: 1 1 100%; min-width: 0; font-size: var(--fs-3); padding: 5px 8px; }
/* permission row extras */
.cdminorswhy { margin: 6px 0 0; color: var(--amber-deep); }
.cdminorswhy[hidden] { display: none; }
.cdprivrow { margin-top: 8px; }
/* reward block */
.cdrwopts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px;
  border: 1px dashed var(--line2); border-radius: var(--r-3); }
.cdrwopts[hidden] { display: none; }
.cdrwopts select { font-size: var(--fs-3); padding: 5px 8px; max-width: 100%; }
.cdrwcode, .cdrwtext { flex: 1 1 220px; min-width: 0; font-size: var(--fs-3); padding: 6px 9px; }
.cdrwcode[hidden], .cdrwtext[hidden] { display: none; }
.cdrwhelp { margin: 0; color: var(--amber-deep); }
/* reward field = the code/message input paired with its "Required" marker; the
   marker is real text (never colour-only) in amber-deep so it reads in both themes */
.cdrwfield { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.cdrwfield[hidden] { display: none; }
.cdrwfield .cdrwcode, .cdrwfield .cdrwtext { flex: 1 1 auto; }
.cdreqmark { flex: none; font-size: var(--fs-1); font-weight: 700; letter-spacing: .03em;
  color: var(--amber-deep); text-transform: uppercase; white-space: nowrap; }
.cdreqmark[hidden] { display: none; }
.cdrwreqhint[hidden] { display: none; }
.cderr { margin: 0; font-size: var(--fs-2); font-weight: 600; color: var(--red, #c22f2f); }
.cderr[hidden] { display: none; }
.cdrwcode[aria-invalid="true"], .cdrwtext[aria-invalid="true"] {
  border-color: var(--red, #c22f2f); box-shadow: 0 0 0 2px rgba(194, 47, 47, .18); }
/* Your-links search + sort toolbar (persists above the re-rendered list) */
.cdlinktools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.cdlinktools .minisearch { flex: 1 1 220px; min-width: 0; }
.cdlinktools .minisort { flex: 0 0 auto; }
/* ---- Customize QR modal ------------------------------------------------- */
/* flex column so the header + footer stay pinned and only the controls scroll */
.qrcust-modal { width: min(780px, 94vw); display: flex; flex-direction: column; overflow: hidden; }
.qrcust-modal > .phead { flex: none; }
.qrcust-modal .npbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.qrcust-body { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.qrcust-preview { flex: 0 0 232px; max-width: 100%; text-align: center; }
.qrcust-imgwrap { width: 232px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qrcust-imgwrap img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.qrcust-scan { margin: 10px 0 4px; font-size: var(--fs-2); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.qrcust-scan .bic { width: 15px; height: 15px; margin: 0; }
.qrcust-scan-good { color: var(--green, #1f8a4c); }
.qrcust-scan-warn { color: var(--amber-deep); }
.qrcust-scan-bad { color: var(--red, #c22f2f); }
.qrcust-scan-busy { color: var(--dim); }
.qrcust-note { padding: 0; }
.qrcust-controls { flex: 1 1 320px; min-width: 0; }
.qrcust-controls .cdsechead { margin-top: 12px; }
.qrcust-controls .cdsechead:first-child { margin-top: 0; }
.qrcust-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qrcust-row input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line2);
  border-radius: var(--r-2); background: var(--card); cursor: pointer; flex: none; }
.qrcust-hex { width: 96px; font-size: var(--fs-3); padding: 5px 8px; font-family: var(--font-mono, monospace); }
.qrcust-swatches { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qrcust-sw { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line2);
  cursor: pointer; padding: 0; }
.qrcust-sw:hover { outline: 2px solid var(--amber); outline-offset: 1px; }
.qrcust-chips { flex-wrap: wrap; margin: 0 0 6px; }
.qrcust-logo { display: flex; flex-direction: column; gap: 8px; }
.qrcust-logobtns { display: flex; gap: 8px; flex-wrap: wrap; }
.qrcust-upload { cursor: pointer; }
.qrcust-logohas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card2); }
.qrcust-logohas[hidden] { display: none; }
.qrcust-logothumb { width: 40px; height: 40px; object-fit: contain; background: #fff;
  border: 1px solid var(--line2); border-radius: var(--r-2); padding: 2px; }
.qrcust-size { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 140px; }
.qrcust-size .mono { font-size: var(--fs-1); letter-spacing: .06em; color: var(--dim); }
.qrcust-size input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--amber); }
/* the action bar: pinned (never scrolls), with the same 24px side gutter as the body
   plus bottom breathing room so no button sits flush against the modal's rounded edge */
.qrcust-foot { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 14px 24px 20px; border-top: 1px solid var(--line2); background: var(--card2); }
.qrcust-foot .spacer { flex: 1 1 auto; }
@media (max-width: 640px) {
  .qrcust-preview { flex: 1 1 100%; }
  .qrcust-imgwrap { width: 180px; }
  .qrcust-foot { padding: 12px 16px 16px; }
  .qrcust-foot .btn { flex: 1 1 auto; }
  .qrcust-foot .qrcust-reset { flex: 1 1 100%; }
}
/* invite block */
.cdinvite { display: flex; flex-direction: column; gap: 6px; }
.cdinvite textarea, .cdinvite input { width: 100%; min-width: 0; font-size: var(--fs-3); padding: 6px 9px; font-family: var(--font-body); }
.cdinvite textarea { resize: vertical; line-height: 1.4; }
/* ---------- Content Drop: the Create-a-link BUILDER (.cdwiz) ----------
   Four numbered steps on the left, a sticky side panel on the right: a phone preview of
   what senders see, a summary with a jump to each step, how long it works and Create.
   Every optional extra is ONE switch row; its details show only once it is on. */
.cdwiz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
/* the panel's overflow:hidden (its rounded corners) would make it the side panel's scroll
   box, so nothing inside could stick; clip keeps the corners without that */
.panel:has(> .cdwiz) { overflow: clip; }
.cdwiz-main { min-width: 0; }
.cdstep { padding: 2px 0 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.cdwiz-main > [data-clgenset] > .cdsettings { margin-top: 0; }
.cdwiz-main > [data-clgenset] .cdstep:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 4px; }
.cdstep-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cdstep-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--amber-soft); color: var(--amber-deep); font-family: var(--font-mono);
  font-weight: 700; font-size: var(--fs-3); }
.cdstep-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cdstep-t b { font-size: var(--fs-5); font-weight: 700; color: var(--text); line-height: 1.25; }
.cdstep-t > span { font-size: var(--fs-3); color: var(--dim); }
.cdstep-ok { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill);
  color: var(--green); background: var(--green-soft); font-family: var(--font-mono); font-size: var(--fs-1);
  letter-spacing: .1em; text-transform: uppercase; }
.cdstep-ok[hidden] { display: none; }
.cdstep-ok .bic { width: 13px; height: 13px; margin: 0; }
/* choice cards: the Content Drop presets AND every Studio choice row (video type, mode, ad
   type...). Compact (Peter 2026-10-01: "too much space - half the size"): the icon sits LEFT of
   the words so a card is one short row - about a third of the old stacked card's height */
.cdpresetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cdpcard { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px;
  align-items: center; align-content: center; text-align: left; padding: 8px 10px; min-height: 48px;
  border: 1px solid var(--line2); border-radius: var(--r-3); background: var(--card); color: var(--text); cursor: pointer;
  font: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.cdpcard:hover { border-color: var(--amber); }
.cdpcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cdpcard.on { border-color: var(--amber); background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber); }
.cdpcard-ic { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: var(--r-2); display: inline-flex;
  align-items: center; justify-content: center; background: var(--card2); margin: 0; }
.cdpcard.on .cdpcard-ic { background: var(--card); }
.cdpcard-ic .bic { width: 15px; height: 15px; margin: 0; }
.cdpcard b { grid-column: 2; font-size: var(--fs-3); font-weight: 700; line-height: 1.25; }
.cdpcard > span:last-child:not(.cdpcard-ic) { grid-column: 2; font-size: var(--fs-2); color: var(--dim); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cdwiz .cdpresetnote { margin-top: 10px; }
/* labels + the intro line */
.cdlab { display: block; font-size: var(--fs-3); font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.cdstep-h + .cdlab { margin-top: 0; }
.cdopt { font-weight: 400; color: var(--dim); font-size: var(--fs-2); margin-left: 4px; }
.cdwiz .cdintro { width: 100%; font-size: var(--fs-4); padding: 9px 12px; }
/* shots + questions: one tidy card per row (name first, then its choices, remove on the right) */
.cdwiz .cdshots, .cdwiz .cdfields { gap: 8px; }
.cdwiz .cdshot, .cdwiz .cdfield { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto 34px; gap: 8px;
  align-items: center; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-4); background: var(--card2); }
.cdwiz .cdshot input[type=text], .cdwiz .cdfield input[type=text] { width: 100%; font-size: var(--fs-3); padding: 7px 10px; }
.cdwiz .cdshot [data-cdshdel], .cdwiz .cdfield [data-cdfdel] { grid-row: 1; grid-column: 5; margin: 0; justify-self: end; }
.cdwiz .cdshot .cdshhint { grid-column: 1 / 5; }
.cdwiz .cdfield .cdfopts, .cdwiz .cdfield .cdfph { grid-column: 1 / 3; }
.cdwiz .cdfield [data-cdfpubwrap] { grid-column: 3 / 5; }
.cdwiz .cdfield { grid-template-columns: minmax(0, 1fr) auto auto 0 34px; }
.cdwiz .cdfieldadd { margin-top: 10px; }
/* extras: one switch row each; details only once it is on */
.cdx { border-top: 1px solid var(--line); }
.cdfieldadd + .cdx, .cdstep-h + .cdx { margin-top: 12px; }
.cdx-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; margin: 0; }
.cdx-ic { flex: none; width: 32px; height: 32px; border-radius: var(--r-3); display: inline-flex; align-items: center;
  justify-content: center; background: var(--card2); color: var(--text); }
.cdx-ic .bic { width: 17px; height: 17px; margin: 0; }
.cdx-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cdx-tx b { font-size: var(--fs-4); font-weight: 600; color: var(--text); }
.cdx-tx > span { font-size: var(--fs-2); color: var(--dim); }
.cdx .switch { position: relative; display: inline-flex; flex: none; }
.cdx-body { padding: 0 0 14px 44px; }
.cdx-body:not(:has(> :not([hidden]))) { display: none; }
.cdx-body[hidden] { display: none; }
.cdx-body > .cdrwopts, .cdx-body > .cdaqopts { margin-top: 0; }
.cdx-body.cltagopts { display: flex; }
.cdx-body.cltagopts[hidden] { display: none; }
.cdxmore > summary { list-style: none; }
.cdxmore > summary::-webkit-details-marker { display: none; }
.cdxmore > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-3); }
.cdx-chev { flex: none; color: var(--dim); display: inline-flex; transition: transform .15s ease; }
.cdx-chev .bic { width: 16px; height: 16px; margin: 0; }
.cdxmore[open] .cdx-chev { transform: rotate(90deg); }
.cdxmore .cdx-body { display: flex; flex-direction: column; gap: 6px; }
.cdxmore .cdprivacy { width: 100%; flex: none; }
/* the side panel: preview, summary, how long, Create */
.cdwiz-side { position: sticky; top: calc(var(--gf-topbar-h, 0px) + var(--gf-secbar-h, 0px) + 12px); min-width: 0;
  max-height: calc(100vh - var(--gf-topbar-h, 0px) - var(--gf-secbar-h, 0px) - 24px); overflow-y: auto; scrollbar-width: thin; }
.cdside { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r-5); background: var(--card2); }
.cdside-h { font-size: var(--fs-1); letter-spacing: .14em; color: var(--muted); }
.cdside .cdlab { margin: 2px 0 0; }
/* the first lines they will read + the button that opens the REAL page in a phone window */
.cdpeek { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-4); background: var(--card); }
.cdpeek-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cdpeek-brand { font-weight: 700; font-size: var(--fs-3); color: var(--amber-deep); }
.cdpeek-intro { margin: 0; font-size: var(--fs-3); line-height: 1.45; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cdpeek-btn { width: 100%; justify-content: center; }
.cdpeek-btn .bic { width: 16px; height: 16px; }
/* the Preview window: a phone frame around a sandboxed iframe of the real guest page */
.cdpv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 16px 12px; border-radius: var(--r-5); background: var(--card2); box-shadow: 0 18px 48px rgba(7, 11, 20, .32); }
.cdpv-bar { width: 100%; display: flex; align-items: center; gap: 10px; }
.cdpv-t { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: var(--fs-4); color: var(--text); }
.cdpv-t .bic { width: 18px; height: 18px; margin: 0; color: var(--amber-deep); }
.cdpv-phone { display: flex; flex-direction: column; align-items: center; padding: 10px 11px 12px; border-radius: 46px;
  background: #11151f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cdpv-notch { width: 84px; height: 6px; margin: 2px 0 9px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
/* 390 = a typical phone's CSS width, so the page lays out exactly as on their phone */
.cdpv-screen { position: relative; width: 390px; height: min(760px, calc(100vh - 200px)); min-height: 360px;
  border-radius: 34px; overflow: hidden; background: #f7f5f0; }
.cdpv-frame { display: block; width: 100%; height: 100%; border: 0; background: #f7f5f0; }
.cdpv-frame[hidden] { display: none; }
.cdpv-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
  padding: 24px; text-align: center; font-size: var(--fs-3); line-height: 1.45; color: #5a6478; }
.cdpv-msg[hidden] { display: none; }
.cdpv-msg.err { color: #c93030; }
.cdpv-hint { margin: 0; max-width: 412px; text-align: center; font-size: var(--fs-2); line-height: 1.4; color: var(--dim); }
/* a phone in your hand: no frame, the page fills the screen under the title bar */
@media (max-width: 520px) {
  .cdpv { width: calc(100vw - 16px); padding: 10px 10px 8px; }
  .cdpv-phone { width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .cdpv-notch { display: none; }
  .cdpv-screen { width: 100%; height: calc(100vh - 150px); height: calc(100dvh - 150px); border-radius: var(--r-4);
    border: 1px solid var(--line); }
}
.cdsum { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cdsum li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-3); color: var(--text); }
.cdsum li:last-child { border-bottom: 0; }
.cdsum li > .bic { flex: none; width: 15px; height: 15px; margin: 0; color: var(--green); }
.cdsum li.cdsum-warn > .bic { color: var(--amber-deep); }
.cdsum li > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdsum .hlink { flex: none; font-size: var(--fs-2); }
.cdttl { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.cdttl button { padding: 5px 9px; }
.cdside .cdgo { width: 100%; justify-content: center; padding: 12px 16px; font-size: var(--fs-4); }
.cdside .cdsavedef { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-3); }
.cdside .cdsavedef .bic { width: 14px; height: 14px; margin: 0; }
/* narrower screens: one column, the side panel follows the steps (no sticky) */
@media (max-width: 1180px) {
  .cdwiz-grid { grid-template-columns: minmax(0, 1fr); }
  .cdwiz-side { position: static; }
  .cdside { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .cdside > .cdside-h, .cdside > .cdpeek { grid-column: 1; }
  .cdside > .cdpeek { grid-row: 2 / span 5; }
  .cdside > :not(.cdside-h):not(.cdpeek) { grid-column: 2; }
}
@media (max-width: 640px) {
  .cdside { display: flex; }
  .cdside > .cdside-h { display: none; }
  .cdpresetgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cdpcard { padding: 8px 9px; column-gap: 8px; }
  /* phones keep the two-line description: clamped to one line it cut almost every card's
     words a dozen letters in ("Describe any scen...") - the card stays one compact row */
  .cdwiz .cdshot, .cdwiz .cdfield { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .cdwiz .cdshot .cdshlabel, .cdwiz .cdfield .cdflabel { grid-column: 1 / 3; }
  .cdwiz .cdshot [data-cdshdel], .cdwiz .cdfield [data-cdfdel] { grid-column: 3; }
  .cdwiz .cdshot .cdshhint, .cdwiz .cdfield .cdfopts, .cdwiz .cdfield .cdfph,
  .cdwiz .cdfield [data-cdfpubwrap] { grid-column: 1 / -1; }
  .cdx-body { padding-left: 0; }
}
/* result card: the long URL under a disclosure */
.cdfull { font-size: var(--fs-1); color: var(--dim); padding: 0 0 4px; }
.cdfull summary { cursor: pointer; letter-spacing: .1em; text-transform: uppercase; }
.cdfull span { display: block; word-break: break-all; padding-top: 2px; }
/* link row: short link + funnel, the meter, misuse reports */
.cdlinkstats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--dim); padding: 4px 0 2px; }
.cdlinkstats .hlink.mono { font-size: var(--fs-1); letter-spacing: .06em; padding: 0; }
.cdlinkstats .cdshort { color: var(--amber-deep); word-break: break-all; text-transform: none; letter-spacing: 0; }
.cdmeterrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 4px; }
.cdmeter { position: relative; flex: 0 1 160px; min-width: 60px; height: 6px; border-radius: var(--r-pill); background: var(--line2); overflow: hidden; }
.cdmeter i { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); }
.cdmeter.warn i { background: var(--amber); }
.cdmeter.full i { background: var(--red); }
.cdmetern { font-size: var(--fs-1); letter-spacing: .06em; color: var(--dim); font-variant-numeric: tabular-nums; }
.cdmeterfull { font-size: var(--fs-1); letter-spacing: .08em; color: var(--red); font-weight: 700; }
.cdreports { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-1); letter-spacing: .06em;
  color: var(--red); padding: 2px 0 6px; }
.cdreports .hlink.mono { font-size: var(--fs-1); letter-spacing: .06em; padding: 0; color: var(--red); }
.cdreports .bic { margin-right: 2px; }
/* print chooser under a result card or link row */
.cdprintbox { border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 8px; }
.cdprintbox[hidden] { display: none; }
.cdprintbox .filterchips { flex-wrap: wrap; margin-right: 0; }
.cdprintbox .cdcaption { width: 100%; flex: none; }
/* manager chips + the foot under the grid */
.cdpill.shot { color: var(--amber-deep); border-color: var(--amber); background: var(--card); }
.cdpill.rewarded { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.cdpill.minor { color: var(--red); border-color: var(--red); background: var(--red-soft); font-weight: 700; }
.cdpill .bic.cic { width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; }
.cdfoot:empty { display: none; }
.cdcapped { margin: 12px 0 0; }
/* performance card */
.cdperfbar { margin-bottom: 12px; }
.cdperfgrid { display: flex; flex-direction: column; gap: 8px; }
.cdperfrow { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--card); }
.cdperflbl { font-size: var(--fs-1); letter-spacing: .14em; color: var(--dim); }
.cdperfcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdperfcell b { font-family: var(--font-display); font-size: var(--fs-7); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cdperfcell .mono { font-size: var(--fs-1); letter-spacing: .1em; color: var(--dim); }
.cdperfcell.dim b { color: var(--dim); }
/* privacy wording */
.cdprivtext { width: 100%; min-width: 0; font-size: var(--fs-3); line-height: 1.5; padding: 10px 12px; resize: vertical;
  font-family: var(--font-body); color: var(--text); background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-3); }
/* the email fallback toggle under the Telegram card */
.cddropmail { margin: 4px 0 10px; }
@media (max-width: 640px) {
  .cdshot .cdshlabel, .cdshot select, .cdrwopts select { flex: 1 1 100%; width: 100%; }
  .cdrwcode, .cdrwtext { flex: 1 1 100%; }
  .cdrwfield { flex: 1 1 100%; }
  .cdperfrow { grid-template-columns: 1fr 1fr; }
  .cdperflbl { grid-column: 1 / -1; }
  .cdmeter { flex: 1 1 100px; }
}

/* ==========================================================================
   GUIDED TOUR ("Show me around") - a first-run walkthrough that spotlights the
   real UI and says what each part does. Themed via tokens (light + dark both
   work). z:1900 sits above app chrome (lightbox 1600, update bar 1400) yet
   below toasts (2000). Built in ui.js: gfTourStart(). See gf-tour-seen-v1.
   ========================================================================== */
/* root is click-transparent (pointer-events:none) so it never blocks a click-through
   hole; the catch + popover opt back IN below. */
.gftour { position: fixed; inset: 0; z-index: 1900; pointer-events: none; }
.gftour[hidden] { display: none !important; }
/* full-screen catcher: makes the tour modal by swallowing app clicks. On a
   CENTRED step (no spotlight) it also carries the dim. On an interactive step a
   clip-path hole is cut over the target so its clicks fall through natively. */
/* NON-MODAL: on a spotlight step the catch blocks nothing, so the whole app - the
   sidebar menu included - stays clickable; a trusted click pauses the tour and shows
   the Resume chip (see gfTourS.onClick). Only the CENTRED welcome is modal. */
.gftour-catch { position: fixed; inset: 0; background: transparent; pointer-events: none; }
.gftour.is-centred .gftour-catch { background: rgba(10, 14, 24, .62); pointer-events: auto; }
/* spotlight hole: a transparent box at the target rect; the huge box-shadow
   dims the rest, the amber ring draws the eye. */
.gftour-hole { position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--amber-bright), 0 0 0 9999px rgba(10, 14, 24, .62);
  transition: top .26s cubic-bezier(.4,0,.2,1), left .26s cubic-bezier(.4,0,.2,1),
    width .26s cubic-bezier(.4,0,.2,1), height .26s cubic-bezier(.4,0,.2,1); }
.gftour.is-centred .gftour-hole { display: none; }
/* the step card (a modal dialog) */
.gftour-pop { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  box-sizing: border-box; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 17px 18px 16px; font-family: var(--font-body);
  animation: gftourpop .22s cubic-bezier(.2,.7,.3,1); }
.gftour-pop:focus { outline: none; }
.gftour-pop--centred { left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); }
@keyframes gftourpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.gftour-pop--centred { animation-name: gftourpopc; }
@keyframes gftourpopc { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.gftour-x { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border: 0;
  background: transparent; color: var(--dim); border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.gftour-x:hover { background: var(--amber-soft); color: var(--amber-deep); }
.gftour-head { display: flex; align-items: center; gap: 9px; margin: 0 26px 7px 0; }
.gftour-flo { width: 30px; height: 30px; flex: none; display: inline-flex; }
.gftour-flo svg { width: 30px; height: 30px; }
.gftour-step { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .16em;
  color: var(--amber-deep); }
.gftour-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6);
  color: var(--text); margin: 1px 0 6px; line-height: 1.2;
  overflow-wrap: anywhere; word-break: break-word; }   /* never let a long/no-space title spill the popup */
.gftour-body { font-size: var(--fs-4); color: var(--muted); line-height: 1.5; margin: 0 0 14px;
  overflow-wrap: anywhere; }
/* interactive-step hint: invites the user to click the highlighted control */
.gftour-hint { font-size: var(--fs-3); color: var(--amber-deep); font-weight: 600;
  line-height: 1.4; margin: -5px 0 13px; }
.gftour-hint[hidden] { display: none; }
/* welcome-step flow chip: a one-line pipeline Brand -> Ideas -> Media -> Posts -> Results */
.gftour-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; margin: 2px 0 15px; }
.gftour-flow[hidden] { display: none; }
.gftour-flow-node { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em;
  color: var(--amber-deep); background: var(--amber-soft); border-radius: 999px;
  padding: 4px 10px; white-space: nowrap; }
.gftour-flow-arrow { color: var(--dim); font-size: var(--fs-2); line-height: 1; }
/* footer: dots on their OWN row (order:-1, full width), then Back + Next right-
   aligned below - so the buttons always fit inside the card at any width and the
   primary button's glow never spills past the corner. */
.gftour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 8px; }
.gftour-foot .spacer { display: none; }
.gftour-dots { display: flex; gap: 5px; flex-basis: 100%; order: -1; }
.gftour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .15s; }
.gftour-dot.on { background: var(--amber); }
.gftour-foot .btn { margin: 0; min-width: 0; max-width: 100%; }
/* a tighter amber glow inside the card so it stays within the padding */
.gftour-foot .btn.amber { box-shadow: 0 3px 10px rgba(242, 151, 24, .30); }
.gftour-foot .btn.amber:hover { box-shadow: 0 5px 14px rgba(242, 151, 24, .36); }
.gftour-back--hidden { visibility: hidden; }
.gftour-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the "?" help chooser: tour vs detailed help */
.gfhelpmenu { position: fixed; z-index: 1950; width: 260px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; font-family: var(--font-body);
  animation: gftourpop .16s ease; }
.gfhm-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 10px; padding: 10px 11px; cursor: pointer;
  color: var(--text); font: inherit; }
.gfhm-item:hover, .gfhm-item:focus-visible { background: var(--amber-soft); outline: none; }
.gfhm-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--amber-soft);
  color: var(--amber-deep); display: inline-flex; align-items: center; justify-content: center; }
.gfhm-ic svg { width: 18px; height: 18px; }
.gfhm-tx { min-width: 0; }
.gfhm-tx b { display: block; font-size: var(--fs-4); color: var(--text); }
.gfhm-tx small { display: block; font-size: var(--fs-2); color: var(--dim); margin-top: 1px; }

/* Help-tab "Take the tour" call to action */
.helptour { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  margin: 0 0 16px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(90deg, var(--amber-soft), transparent);
  border: 1px solid var(--amber); border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.helptour:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.helptour-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--amber);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.helptour-ic svg { width: 22px; height: 22px; }
.helptour-tx { flex: 1; min-width: 0; }
.helptour-tx b { display: block; font-family: var(--font-display); font-size: var(--fs-5); }
.helptour-tx small { display: block; color: var(--dim); font-size: var(--fs-3); margin-top: 2px; }
.helptour-go { flex: none; color: var(--amber-deep); display: inline-flex; }

/* floating "Resume tour" chip - shown after the user tries a feature mid-tour */
.gftour-resume { position: fixed; left: calc(16px + var(--gf-safe-left)); bottom: calc(16px + var(--gf-safe-bottom)); z-index: 1850; display: flex;
  align-items: stretch; max-width: calc(100vw - 32px); background: var(--card);
  border: 1px solid var(--amber); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; font-family: var(--font-body);
  animation: gftourresume .28s cubic-bezier(.2,.7,.3,1); }
@keyframes gftourresume { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gftour-resume-go { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-width: 0;
  background: transparent; border: 0; cursor: pointer; color: var(--text); font: inherit; text-align: left; }
.gftour-resume-go:hover, .gftour-resume-go:focus-visible { background: var(--amber-soft); outline: none; }
.gftour-resume-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--amber);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.gftour-resume-ic svg { width: 17px; height: 17px; }
.gftour-resume-tx { min-width: 0; }
.gftour-resume-tx b { display: block; font-size: var(--fs-4); }
.gftour-resume-tx small { display: block; color: var(--dim); font-size: var(--fs-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gftour-resume-x { flex: none; width: 36px; min-height: 44px; border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--dim); cursor: pointer; font-size: 13px; }
.gftour-resume-x:hover, .gftour-resume-x:focus-visible { background: var(--amber-soft); color: var(--amber-deep); outline: none; }
/* lift the chip above the mobile bottom nav bar (.mbar shows at <=760px) */
@media (max-width: 760px) {
  .gftour-resume { left: calc(12px + var(--gf-safe-left)); bottom: calc(72px + var(--gf-safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .gftour-hole { transition: none; }
  .gftour-pop, .gfhelpmenu, .gftour-resume { animation: none; }
}

/* mobile: dock the step card to the bottom as a full-width sheet */
@media (max-width: 480px) {
  .gftour-pop, .gftour-pop--centred { left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important;
    border-radius: 18px 18px 0 0; padding: 18px 18px max(16px, var(--gf-safe-bottom)); }
  /* stack the footer so buttons never overflow the phone width: dots on their own
     row, then Back + Next share the width as big tap targets. */
  .gftour-foot { flex-wrap: wrap; row-gap: 12px; }
  .gftour-foot .spacer { display: none; }
  .gftour-dots { order: -1; flex-basis: 100%; justify-content: center; }
  .gftour-foot .btn { flex: 1 1 0; min-height: 46px; justify-content: center; }
  .gftour-x { top: 12px; right: 12px; width: 36px; height: 36px; }
}

/* ---- posts made OUTSIDE GrowFleet (SPEC_EXTERNAL_POSTS.md) ------------------------- */
/* the source chip: a quiet globe cue (text + icon, never colour alone - WCAG 1.4.1) */
.qsrc[data-src="external"] { border-style: dashed; }
.qsrc[data-src="external"] .bic { color: var(--amber-deep); }
/* the one-time "we found N posts" notice above the list */
.qextnote { display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r-3);
  background: var(--card2); color: var(--text); font-size: var(--fs-4); }
.qextnote[hidden] { display: none; }
.qextnote > .bic { flex: none; color: var(--amber-deep); }
.qextnote > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qextnote > div span { color: var(--muted); }
.qextnote > .btn { flex: none; }
/* the read-only detail */
.extd-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0;
  padding: 11px 13px; border-radius: var(--r-3); background: var(--card2);
  border: 1px solid var(--line2); color: var(--text); font-size: var(--fs-4); }
.extd-note > .bic { flex: none; margin-top: 2px; color: var(--muted); }
.extd-note > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.extd-note > div span { color: var(--muted); }
.extd-body { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; }
.extd-img { width: 160px; max-width: 42%; aspect-ratio: 1 / 1; object-fit: cover; flex: none;
  border-radius: var(--r-3); border: 1px solid var(--line2); background: var(--card2); }
.extd-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.extd-when { font-size: var(--fs-3); color: var(--muted); letter-spacing: .06em; }
.extd-cap { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-4);
  line-height: 1.5; color: var(--text); }
.extd-nocap { color: var(--muted); font-style: italic; }
.extd-fc { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-4);
  overflow-wrap: anywhere; color: var(--text); }
.extd-fc .mono { font-size: var(--fs-2); color: var(--muted); letter-spacing: .08em; }
.extd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .qextnote { flex-wrap: wrap; align-items: flex-start; }
  .qextnote > div { flex-basis: calc(100% - 32px); }
  .qextnote > .btn { margin-left: 30px; }
  .extd-body { flex-direction: column; }
  .extd-img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
}
/* the owner's switch on Connections */
.extsw { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line2);
  border-radius: var(--r-3); background: var(--card); }
.extsw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.extsw-row .switch em { font-style: normal; font-weight: 600; }
.extsw-sub { margin: 6px 0 0; font-size: var(--fs-3); color: var(--muted); overflow-wrap: anywhere; }
/* a calendar chip for a post made outside GrowFleet: a dashed edge (plus its label) */
.calchip.ext { outline: 1px dashed var(--neutral); outline-offset: -2px; }


/* ==========================================================================
   PHONE: ONE ROW FOR OPTIONS (Peter, 2026-09-30: "reduce the options in mobile -
   make filters scrollable and no need for search - aim for 1 row"; "ONE ROW ONLY
   for options should be the rule"). At the mobile layout (<=760px, GF_MOBILE())
   every busy options area is ONE row: several options are separate chips in a row
   that scrolls sideways INSIDE ITSELF (never the page), the chip cut off at the
   edge + a soft fade say there is more, and the picked chip slides into view
   (ui.js gfMRow*). A page's own search box goes where the section bar's search
   already covers it (a pill shows and clears any words still filtering), and a
   refresh button that repeats the top bar's refresh goes. Desktop (>=761px) is
   unchanged: every class below only styles the phone, and .gf-dc wrappers are
   display:contents on desktop so the desktop layout never sees them.
   Research: Material 3 chips (filter chips scroll horizontally in one line);
   NN/g scoped search (two search boxes on a page cost users) + mobile tables
   (arrows or cut-off elements show there is more sideways); Baymard applied
   filters (a horizontal list with the last one cut off / faded); Apple HIG
   (about 5 segments at most on iPhone, 44pt targets); axe scrollable-region
   (a scroll row of buttons is keyboard reachable through its buttons).
   ========================================================================== */
.gf-ph, .gfqpill { display: none; }                 /* phone-only pieces */
@media (min-width: 761px) {
  .gf-dc { display: contents; }                     /* a phone row wrapper, invisible on desktop */
  .panel > .phead > :where(.gf-dc) > * { cursor: auto; }   /* the same cursor as when they sat right in the head */
}
@media (max-width: 760px) {
  /* -- the top bar: title over the brand, back / forward / refresh beside it --------
     The trio sat OUT of flow at top:50% with the title reserving 92px - but the trio
     is 122px wide, so it covered the brand tag and the subtitle, and on Media it
     centred on the storage row too. It is now in flow beside the title block, so it
     can never overlap it; each circle keeps a 44px tap area. The subtitle (always
     cut short at this width) gives its line to the brand tag. */
  .topbar > .tbtitle { flex: 1 1 0; min-width: 0; padding-right: 0; }
  .tbright { display: flex; align-items: center; order: 1; flex: none; }
  .navhist { position: static; transform: none; margin-right: 0; gap: 8px; }
  .navhist button { width: 36px; height: 36px; position: relative; }
  .navhist button::before { content: ""; position: absolute; inset: -4px; }
  .topbar h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .topbar h1 > #pageTitleText { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .topbar .brandtag { margin-left: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: block; padding: 2px 10px; }
  .topbar .brandtag:empty { display: none; }
  .pagesub { display: none; }

  /* -- the shared one-row strip ---------------------------------------------------- */
  .gf-orow { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 4px; margin: -4px; scroll-padding: 0 4px; }   /* room for the focus ring + a chip's lift */
  .gf-orow::-webkit-scrollbar { display: none; }
  .gf-orow > * { flex: 0 0 auto; scroll-snap-align: start; }
  /* the fade: only on a side that has more (ui.js gfMRowSync sets .gf-fl / .gf-fr) */
  .gf-fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .gf-fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
    mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .gf-fl.gf-fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  /* one chip look on every phone row: the house filter chip (mono caps pill), 44px tall */
  .gfselchips { display: inline-flex; align-items: center; gap: 6px; }
  .gfselchips[hidden] { display: none; }
  .gfselchips::before { content: ""; flex: none; width: 1px; height: 24px; margin: 0 4px 0 2px; background: var(--line2); }
  .gfselchips button { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
    font-weight: 700; text-transform: uppercase; white-space: nowrap; min-height: 44px; padding: 0 14px;
    border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--card); color: var(--muted);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .gfselchips button[aria-checked="true"] {
    color: var(--amber-deep); background: var(--amber-soft); border-color: transparent; }
  /* the words still filtering a page whose search box is the section bar's */
  .gfqpill:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 13.75rem;
    padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--amber); background: var(--amber-soft);
    color: var(--amber-deep); font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600; cursor: pointer; }
  .gfqpill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gfqpill svg { width: 15px; height: 15px; flex: none; }
  :root[data-theme="dark"] .gfselchips button[aria-checked="true"] { color: var(--amber-bright); }

  /* -- the older phone strips (Studio creators, Commerce views...) get 44px chips ---- */
  .studiotabs > button { min-height: 44px; }
  .sttabscroll .studiotabs { padding: 4px; margin: -4px; scroll-padding: 0 4px; }   /* room for the focus ring */
  .streorder-hint { display: none; }                /* drag / Shift+arrow reordering is a desktop thing */

  /* -- icon-card sub-tabs (Overview, Campaigns, Ideas bank, Content Drop, Growth
     Tools, Analytics): ONE row of compact tabs - icon + name - that scrolls like the
     web's row, instead of tall stacked cards (Growth wrapped to 3 rows, Analytics 3). */
  .ovtabs, .antabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 4px; margin: -4px -4px 8px; scroll-padding: 0 4px; }
  .ovtabs::-webkit-scrollbar { display: none; }
  .ovtabs .ovtab, .antabs .ovtab, .gttabs .ovtab { flex: 1 0 auto; width: auto; min-width: 0; min-height: 44px;
    flex-direction: row; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; scroll-snap-align: start;
    border-radius: var(--r-pill); transform: none; }
  .ovtab:hover { transform: none; }
  .ovtab-ic { width: 32px; height: 32px; border-radius: 999px; }
  .ovtab-ic svg { width: 16px; height: 16px; }
  .ovtab-tx b { font-size: var(--fs-3); white-space: nowrap; }
  .ovtab-tx span { display: none; }
  .ovtab-badge, .ovtab-lock { position: static; margin-left: -2px; }

  /* -- Overview: Today's actions in one row (all of them - the web shows them all) -- */
  #ovsub-today .ovactions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; gap: 8px; padding: 4px; margin: -4px -4px 12px; scroll-padding: 0 4px; }
  #ovsub-today .ovactions::-webkit-scrollbar { display: none; }
  #ovsub-today .ovactions .ovactbtn { flex: 0 0 auto; width: auto; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  #ovsub-today .ovactions .ovactbtn[hidden] { display: none; }

  /* -- Media library: two buttons in the action row (Content Drop is also in Add media
     and the note above; drag and drop is not a phone thing), and the library's options
     as ONE row: filters, sort, group sizes, select. The top bar's refresh and the
     section bar's search replace the in-panel Refresh and search. ------------------- */
  .addmediabar.gf-orow { gap: 8px; margin: -4px -4px 10px; }
  .addmediabar .btn { flex: 1 0 auto; min-height: 44px; justify-content: center; white-space: nowrap; }
  .addmediabar #contentDropBtn, .addmediabar .addmedia-hint { display: none; }
  .libhead { flex-wrap: nowrap; column-gap: 6px; }
  .libhead .libtitle, .libhead .spacer, .libhead #mediaRefresh, .libhead #mediaSearch, .libhead #mediaSort { display: none; }
  .libhead .libctl { flex: 1 1 auto; }
  .libhead #mediaFilters { display: contents; }
  .libhead #mediaFilters button { min-height: 44px; padding: 0 14px; }
  .libhead #mediaBulk { min-height: 44px; padding: 0 14px; font-size: var(--fs-3); }
  /* Group sizes as a chip (the real checkbox stays inside, visually hidden) */
  .libhead label.switch.minigroup { min-height: 44px; padding: 0 14px; gap: 0; border-radius: var(--r-pill);
    border: 1px solid var(--line2); background: var(--card); margin: 0; }
  .libhead label.switch.minigroup > span { display: none; }
  .libhead label.switch.minigroup em { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em;
    font-weight: 700; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .libhead label.switch.minigroup input:checked ~ em { color: var(--amber-deep); }
  .libhead label.switch.minigroup input:checked ~ em::before { content: "\2713  "; }   /* a tick, even without :has() */
  .libhead label.switch.minigroup input:focus-visible ~ em { outline: 2px solid var(--amber); outline-offset: 6px; border-radius: 2px; }
  .libhead label.switch.minigroup:has(input:checked) { background: var(--amber-soft); border-color: transparent; }
}
@media (max-width: 640px) {
  /* Posts (<=640 is its phone row; 641-760 keeps the one-line web toolbar): status
     chips, then sort and source as chips, in ONE sideways row; the list / calendar
     toggle stays pinned at its end. No search box: the section bar finds any post
     and its "Search posts for ..." filters the list (the pill shows the words). */
  #qFilters { flex-wrap: nowrap; gap: 8px; align-items: center; overflow: visible; }   /* the strip scrolls, not the bar (it clipped the focus ring) */
  #qFilters .qchipwrap { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
  #qFilters .qfilterchips { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px; margin: -4px; gap: 6px;
    scroll-padding: 0 4px; }
  #qFilters .qfilterchips::-webkit-scrollbar { display: none; }
  #qFilters .qfilterchips > * { flex: 0 0 auto; scroll-snap-align: start; }
  #qFilters .qfilterchips button[data-f] { min-height: 44px; padding: 0 13px; }
  #qFilters .qfilterchips.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  #qFilters .qfilterchips.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
    mask-image: linear-gradient(90deg, transparent, #000 44px); }
  #qFilters .qfilterchips.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  #qFilters .qbar-right { flex: none; margin-left: 0; flex-wrap: nowrap; }
  #qFilters .qsearchwrap, #qFilters #qSrcSel, #qFilters #qSort { display: none; }
  #qFilters .viewtoggle button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* 641-760 keeps the Posts web toolbar (its own search box + selects), so its phone chips stay away */
@media (min-width: 641px) { #qFilters .gfselchips, #qFilters .gfqpill { display: none !important; } }
@media (max-width: 760px) {
  /* -- Social Inbox: status, sort, unread, accounts and kinds as ONE row of chips; the
     section bar searches the inbox (its pill shows the words) and the top bar's refresh
     checks for new messages, so the in-page box and Refresh go ("Checked ..." stays). */
  #ibToolbar, #orToolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }   /* one line: a wrapping column sizes its line to the widest row */
  #ibRow > .ortabs, #ibRow > .ibfilters, #ibRow > .ibcov-row { display: contents; }
  #ibRow .ibsearch, #ibRow .ibsort-lbl, #ibToolbar #ibRefreshBtn { display: none; }
  #ibToolbar .ibfresh { margin: 0; }
  #ibRow > .ibsortrow::before, #ibRow > .ibaccts::before, #ibRow > .ibcov-row::before,
  #ibRow > .ibfilters:last-child::before { content: ""; flex: none; width: 1px; height: 24px; margin: 0 2px; background: var(--line2); }
  /* -- Social Outreach: the networks to search as one row of chips; the results
     toolbar (status, type, sort, network, Add my link, the four tools) as ONE row --- */
  #orRow > .ortabs, #orRow > .orctrls { display: contents; }
  #orRow select { display: none; }
  #orRow .btn { min-height: 44px; }
  /* one chip look on every phone row (the house filter chip: mono caps pill, 44px) */
  #ibRow .ortab, #orRow .ortab, #ibRow .ibfilter, #ibRow .ibcov, #orRow .orbl, .ornets.gf-orow label {
    flex: 0 0 auto; position: relative; min-height: 44px; padding: 0 14px; white-space: nowrap;
    border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--card); color: var(--muted); box-shadow: none;
    font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .08em; font-weight: 700; text-transform: uppercase; }
  #ibRow .ortab.on, #orRow .ortab.on, #ibRow .ibfilter.on { background: var(--amber-soft); color: var(--amber-deep); border-color: transparent; }
  #ibRow .ibfilter.ibf-needs_human { color: var(--red); }
  #ibRow .ibfilter.ibf-needs_human.on { background: var(--red-soft); color: var(--red); }
  #ibRow .ibcov-perm { color: var(--amber-deep); border-color: var(--amber); }
  :root[data-theme="dark"] #ibRow .ortab.on, :root[data-theme="dark"] #orRow .ortab.on,
  :root[data-theme="dark"] #ibRow .ibfilter.on { color: var(--amber-bright); }
  /* the real checkbox stays visible in its chip (state + focus ring without :has()); :has()
     only adds the chip fill */
  #orRow .orbl input, .ornets.gf-orow label input { margin: 0 6px 0 0; accent-color: var(--amber); }
  #orRow .orbl:has(input:checked), .ornets.gf-orow label:has(input:checked) { background: var(--amber-soft);
    color: var(--amber-deep); border-color: transparent; }
  #orRow .orbl:has(input:disabled) { opacity: .5; }
  .ornets.gf-orow { flex-wrap: nowrap; margin-bottom: 12px; }
  .ornets.gf-orow .ornets-lbl { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .1em;
    text-transform: uppercase; color: var(--dim); font-weight: 600; }
  /* -- Ideas bank > Ideas: topics, views, sort and freshness in ONE row under the
     panel head; the head keeps its title, count and card / list toggle ------------- */
  #bankIdeasPanel .phead #bankSearch, #bankIdeasPanel .phead #bankSort, #bankIdeasPanel .phead #bankFresh,
  #bankIdeasPanel .pillfoldrow { display: none; }
  #bankIdeasPanel .phead { flex-wrap: nowrap; }
  #bkRow { margin: 8px 16px 10px; }
  #bkRow > .filterchips, #bkRow #bankCatChips.pillhidden { display: contents; }
  #bkRow .filterchips button { min-height: 44px; padding: 0 14px; }
  #bkRow > #bankViewChips::before { content: ""; flex: none; width: 1px; height: 24px; margin: 0 4px 0 2px; background: var(--line2); }
  /* -- Commerce: Sync / Import / Draft in one row, the status text on its own line ---- */
  #cmBar { flex-wrap: wrap; }
  #cmBar .cmbaracts { flex: 1 1 100%; }
  #cmBar .cmbaracts .btn { min-height: 44px; white-space: nowrap; }
  /* -- Help: the suggested questions; Growth: Flo's tools; one row each ------------- */
  #kbSugg.gf-orow { flex-wrap: nowrap; margin: 8px -4px -4px; }   /* the row's focus room, not the gap under the box */
  #kbSugg .kbchip, #ftTabs .ft-tab { min-height: 44px; white-space: nowrap; }
  #ftTabs.gf-orow { flex-wrap: nowrap; margin: -4px -4px 6px; }
  /* -- Users & Settings: its five sections in ONE row (they wrapped, ARCHIVE alone below) -- */
  .usersub.gf-orow { margin: -4px -4px 14px; }
  /* Ideas bank idea actions (Post next, Fresh hooks, Edit, Retire...): the list view gave
     the cluster its natural width, so on a phone it ran past the card and Retire was cut
     off (Peter, 2026-09-30). The whole card width, ONE sideways row. */
  /* ...but only the LIST view is a row. The card view is a flex COLUMN, where a 100% basis
     is the card's HEIGHT: the foot claimed it all and squeezed the title and body (both
     overflow:hidden, so min-height 0) until the title showed a sliver of its first line
     (Peter, 10 Oct 2026: "the idea bank text is cut off"). The card's foot takes its own
     height; the list row gets the full-width line. */
  #bankList .bkc-foot.gf-orow { flex: none; min-width: 0; margin: 0 -4px -4px; }
  #bankList.aslist .bkc-foot.gf-orow { flex: 1 1 100%; }
  #bankList .bkc-foot.gf-orow > .spacer { display: none; }
  #bankList .bkc-foot.gf-orow .btn { min-height: 44px; }
  /* Floats clear the bottom tab bar (.mbar: 52px buttons + padding + the home
     indicator) - at bottom:22px the scroll-to-top circle sat on top of More. */
  .scrolltop { right: calc(14px + var(--gf-safe-right)); bottom: calc(76px + var(--gf-safe-bottom)); }
  .gfupdatebar { bottom: calc(76px + var(--gf-safe-bottom)); }
  .gfvresume { bottom: calc(78px + var(--gf-safe-bottom)); }
  /* -- Content Drop > Dropped media: status, type and link as chips, Select, Blocked - ONE
     row (it was 7); the section bar searches the drops, its pill shows the words ------- */
  .cdbar.gf-orow { margin: -4px -4px 10px; }
  .cdbar.gf-orow > .filterchips { display: contents; }
  .cdbar.gf-orow .cdlinksel, .cdbar.gf-orow .cdsearch { display: none; }
  .cdbar.gf-orow .filterchips button, .cdbar.gf-orow .btn { min-height: 44px; }
  .cdbar.gf-orow > [data-cdkinds]::before { content: ""; flex: none; width: 1px; height: 24px; margin: 0 4px 0 2px; background: var(--line2); }
  /* -- Content Drop: the five numbers in one row, like the Overview cards ------------ */
  #dropStats.gf-orow { display: flex; margin: -4px -4px 14px; }
  #dropStats .cdstat { flex: 0 0 7.25rem; }
  /* -- Ad Engine: Create campaign, Refresh (its status line names it) and the time window
     as chips in ONE row; the status text ("Loading...", "Press Refresh...") on its own
     line under it, never off at the far end of the row ------------------------------- */
  #tab-adengine .aetools { flex-wrap: wrap; row-gap: 6px; }
  #tab-adengine .aetools .aectl { flex: 1 1 100%; }
  #tab-adengine .aetools #aeWindow { display: none; }
  #tab-adengine .aetools .btn { min-height: 44px; }
}
@media (max-width: 760px) {
  /* segmented view switchers (Commerce, Analytics): 44px segments; the snap lines up with
     the padding, so an unscrolled row never starts 4px in (and never shows a left fade) */
  .anseg { scroll-padding: 0 4px; }
  #cmSeg > button, #anSeg > button { min-height: 44px; }
}
@media (max-width: 760px) {
  .viewtoggle button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 760px) {
  /* Overview "Getting set up": the steps are one sideways row of cards on a phone (they
     stacked 8 deep, ~1000px, above Today); the row opens on the first step still to do */
  #onboard .obsteps.gf-orow { gap: 10px; margin: 0; padding: 12px 16px 14px; scroll-padding: 0 16px; align-items: stretch; }
  #onboard .obsteps.gf-orow .obtxt small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #onboard .obsteps.gf-orow > .obstep { flex: 0 0 min(15.6rem, 78%); }
}
@media (max-width: 760px) {
  /* an amber button's glow would be cut flat by its row's scroll box - flat in a row */
  .gf-orow > .btn.amber, .gf-orow .btn:hover { box-shadow: none; }   /* hover sticks after a tap */
}

/* ---- "Get the phone app": pair a phone by QR (static/mobilepair.js; spec 10) ---- */
.getapp { display: block; width: calc(100% - 20px); margin: 0 10px 8px; padding: 8px 12px;
  background: none; border: 1px solid var(--navy-line2); border-radius: 8px;
  color: var(--navy-muted); font-size: var(--fs-3); text-align: left; cursor: pointer; }
.getapp:hover, .getapp:focus-visible { color: #fff; border-color: var(--amber-bright); }
.gfpair .gfsheet-body { padding: 14px calc(18px + var(--gf-safe-right)) calc(18px + var(--gf-safe-bottom)) calc(18px + var(--gf-safe-left)); }
.gfpair-lead { margin: 4px 0 12px; font-size: var(--fs-4); }
.gfpair-note { margin: 8px 0; font-size: var(--fs-3); color: var(--muted); }
.gfpair-qr { display: block; width: 220px; max-width: 70vw; height: auto; margin: 6px auto 4px;
  padding: 8px; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.gfpair-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gfpair-digits { width: 4em; min-width: 0; font-size: 1.4rem; text-align: center;
  letter-spacing: .2em; padding: 8px 6px; }
.gfpair-phones .phead { margin-top: 18px; padding: 0 0 6px; }
.gfpair-phone { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.gfpair-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .gfpair-phone { border-color: var(--navy-line); }

/* Opened from the phone app (mobile/handoff.py, html[data-appmode]): the page is rendered
   without its plan, top-up and add-on controls; this is the backstop for any link a script
   draws that would lead to the plan page or an upgrade. */
html[data-appmode="1"] [data-go="plan"],
html[data-appmode="1"] .cx-upgrade,
html[data-appmode="1"] .connpill.lock,
html[data-appmode="1"] .connpop-act.lock,
html[data-appmode="1"] [data-golock] { display: none !important; }

/* Inside the phone app's own web view (its FULL view - embedded.py, html[data-embedded]):
   nothing that only makes sense in a browser. A QR to "your phone", a whole-folder pick and
   "drag and drop" mean nothing on the phone the page is already on; a cloud drive's sign-in
   window and printing need a browser (the phone's own photos come in through the app). */
html[data-embedded="1"] #phoneUp,
html[data-embedded="1"] #folderUp,
html[data-embedded="1"] #cloudUp,
html[data-embedded="1"] [data-clprint],
html[data-embedded="1"] .cdprintbox,
html[data-embedded="1"] .cdprinttip,
html[data-embedded="1"] .addmedia-hint,
html[data-embedded="1"] .gf-ios-hint,
html[data-embedded="1"] #gfGetApp { display: none !important; }
/* the app's upload queue (bridge "uploads"): a small chip above the bottom bar */
.gfupchip { position: fixed; z-index: 44; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--gf-safe-bottom)); max-width: calc(100% - 32px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-3); font-weight: 600;
  box-shadow: var(--shadow-lg); cursor: pointer; touch-action: manipulation; }
.gfupchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfupchip .bic { color: var(--amber-deep); flex: none; }
.gfupchip.is-failed { border-color: var(--red); }
.gfupchip.is-failed .bic { color: var(--red); }
.gfupchip[hidden] { display: none; }
:root[data-theme="dark"] .gfupchip { background: var(--navy2); border-color: var(--navy-line); }
@media (max-width: 760px) {
  .gfupchip { bottom: calc(72px + var(--gf-safe-bottom)); }
}