/* ============================================================================
   CLERK SKIN — workspace shell overrides
   Loaded AFTER variants/hybrid.css so these rules cascade over the
   dark-gradient sidebar + glassmorphism appbar that hybrid.css ships.
   Keeps the layout (left rail + main content) but restyles it monochrome.
   ============================================================================ */

/* Force light theme on the workspace. hybrid.css defaults to dark. */
:root[data-skin="clerk"] {
  --bg:             #f7f7f8;
  --bg-elev:        #ffffff;
  --bg-elev-2:      #ffffff;
  --bg-overlay:     #ffffff;
  --border:         #eeeef0;
  --border-strong:  #d9d9de;
  --text:           #131316;
  --text-2:         #42434d;
  --nav-label:      #2b2d34;
  --text-muted:     #5e5f6e;
  --text-dim:       #6e7080;
  --accent:         #131316;
  --accent-hover:   #000000;
  --grid-line:      transparent;
  --rail-w:         240px;
  --rail-pad:       16px;
}

[data-skin="clerk"] html,
[data-skin="clerk"] body { background: #f7f7f8 !important; color: #131316 !important; }

/* ── Workspace left rail (fixed vertical sidebar) ──────────────── */
[data-skin="clerk"] html header.appbar,
[data-skin="clerk"] #app header.appbar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 240px !important;
  height: 100vh !important;
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #eeeef0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 18px 14px !important;
  gap: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto;
  z-index: 100;
}
[data-skin="clerk"] html header.appbar::after,
[data-skin="clerk"] html header.appbar::before { display: none !important; content: none !important; background: none !important; }

/* Workspace main content area sits to the right of the 240px rail */
[data-skin="clerk"] #app main {
  margin-left: 240px !important;
  max-width: none !important;
  padding: 40px 48px 120px !important;
  background: #f7f7f8 !important;
  min-height: 100vh;
}

/* Crumb block (top of sidebar — Nueform mark + brand pill) */
[data-skin="clerk"] .crumb {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 6px 14px !important;
  border-bottom: 1px solid #eeeef0 !important;
  margin-bottom: 12px !important;
}
[data-skin="clerk"] .crumb .crumb-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}
/* Real Nueform mark — the orange three-shape logo (variants/nueform-logo.svg).
   hybrid.css already wires the background-image; we just need to keep its
   sizing/padding consistent across light + dark and avoid the dark hover
   tint (which made the orange logo wash out on white). */
/* When the workspace crumb is in "branded" mode (a brand logo has been
   painted in), strip the Nueform background image and let the inner
   <svg> / <img> carry the visuals. The button stays the same size so
   the appbar layout doesn't shift. The `color` is the resolution target
   for any `currentColor` fills/strokes inside the brand SVG (white text
   in the source SVG gets re-bound to currentColor by JS so it stays
   visible on the white Clerk surface). */
[data-skin="clerk"] .appbar .nueform-mark[data-branded="true"] {
  background-image: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #131316 !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .nueform-mark[data-branded="true"] {
  color: #f7f7f8 !important;
}
[data-skin="clerk"] .appbar .nueform-mark[data-branded="true"] svg,
[data-skin="clerk"] .appbar .nueform-mark[data-branded="true"] img {
  max-height: 18px;
  max-width: 100%;
  height: auto;
  width: auto;
}
/* The branded top-left button needs a bit more room than the original
   Nueform mark since brand logos are usually horizontal lockups (mark +
   wordmark) instead of a square monogram. */
[data-skin="clerk"] .appbar .nueform-mark[data-branded="true"] {
  height: 28px !important;
  width: auto !important;
  min-width: 32px;
  max-width: 140px;
  padding: 4px 6px !important;
}

/* Brand pill logo (the smaller logo in the "Bladestack ▼" pill) — same
   currentColor handling so the SVG's white text reads on the Clerk
   light surface. */
[data-skin="clerk"] .brand-pill-logo { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-pill-logo { color: #f7f7f8 !important; }

/* Picker brand-tile logo — same currentColor handling so white wordmark
   text in brand SVGs flips to dark on the Clerk light tile and stays
   white in dark mode. */
[data-skin="clerk"] .brand-tile .tile-logo { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-logo { color: #f7f7f8 !important; }
[data-skin="clerk"] .cc-system-icon { color: inherit; }

[data-skin="clerk"] .crumb .nueform-mark,
[data-skin="clerk"] .appbar .nueform-mark {
  width: 56px !important;
  height: 32px !important;
  padding: 0 6px !important;
  background-image: url("variants/nueform-logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 44px auto !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--t), opacity var(--t), transform var(--t) !important;
}
[data-skin="clerk"] .crumb .nueform-mark::after { content: none !important; }
[data-skin="clerk"] .crumb .nueform-mark > * { display: revert !important; }
[data-skin="clerk"] .appbar .nueform-mark:hover { background-color: #f0f0f2 !important; opacity: 1 !important; }
[data-skin="clerk"] .appbar .nueform-mark:active { transform: scale(0.96); }

/* Theme toggle — un-hide and restyle as a clean icon button at the top
   of the sidebar (next to the Nueform mark). Two SVGs (sun + moon)
   cross-fade based on the active theme. */
[data-skin="clerk"] .appbar .theme-toggle,
[data-skin="clerk"] .theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #5e5f6e !important;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin-left: auto !important;
  transition: background var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .appbar .theme-toggle:hover { background: #f0f0f2 !important; color: #131316 !important; }
[data-skin="clerk"] .appbar .theme-toggle .theme-icon {
  position: absolute;
  transition: opacity var(--t), transform var(--t) !important;
}
/* Light mode: show moon ("switch to dark"). Dark mode: show sun. */
[data-skin="clerk"][data-theme="light"] .theme-toggle .theme-icon--moon { opacity: 1; transform: rotate(0); }
[data-skin="clerk"][data-theme="light"] .theme-toggle .theme-icon--sun  { opacity: 0; transform: rotate(40deg); }
[data-skin="clerk"][data-theme="dark"]  .theme-toggle .theme-icon--moon { opacity: 0; transform: rotate(-40deg); }
[data-skin="clerk"][data-theme="dark"]  .theme-toggle .theme-icon--sun  { opacity: 1; transform: rotate(0); }

[data-skin="clerk"] .brand-pill,
[data-skin="clerk"] .crumb .brand-pill {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 7px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .brand-pill:hover { border-color: transparent !important; background: #f0f0f2 !important; }
[data-skin="clerk"] .brand-pill * { color: inherit !important; }
[data-skin="clerk"] .brand-pill::after { color: #6e7080 !important; }
/* Gear button: opens the brand menu. Icon button pinned to the row's far right
   (the brand identity to its left is the home button → Control Center). */
[data-skin="clerk"] .brand-gear {
  margin-left: auto !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; flex: none !important; padding: 0 !important;
  background: transparent !important; border: 1px solid transparent !important; border-radius: 8px !important;
  color: #6e7080 !important; cursor: pointer;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] .brand-gear:hover,
[data-skin="clerk"] .brand-gear.is-open { background: #f0f0f2 !important; color: #131316 !important; }
/* Gear spins a full turn on hover — a small delight on the brand-menu trigger. */
[data-skin="clerk"] .brand-gear svg { transition: transform 0.5s ease !important; }
[data-skin="clerk"] .brand-gear:hover svg { transform: rotate(360deg) !important; }
[data-skin="clerk"][data-theme="dark"] .brand-gear { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-gear:hover,
[data-skin="clerk"][data-theme="dark"] .brand-gear.is-open { background: rgba(255, 255, 255, 0.07) !important; color: #f7f7f8 !important; }
/* Active = you're inside this brand's Strategy section: tint the gear with the
   brand accent (mirrors the old chevron-accent cue). Placed last so it wins the
   colour over hover/open on a tie. */
[data-skin="clerk"] .brand-gear.is-active { color: var(--accent) !important; }
[data-skin="clerk"][data-theme="dark"] .brand-gear.is-active { color: var(--accent) !important; }

/* Tabs in vertical rail */
[data-skin="clerk"] .appbar .tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  margin: 0 !important;
  width: 100% !important;
}
[data-skin="clerk"] .appbar .tab-group { display: contents; }
[data-skin="clerk"] .appbar .tab-group-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #6b6b73 !important;
  padding: 13px 10px 5px !important;
}
/* D-style collapsible group header: a caret + click-to-fold. Home has no title,
   so it stays always-visible. Collapsed state is persisted per operator
   (initSidebarGroups). */
[data-skin="clerk"] .appbar .tab-group-title.tab-group-toggle {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: color var(--t);
}
[data-skin="clerk"] .appbar .tab-group-title.tab-group-toggle:hover { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab-group-title.tab-group-toggle:hover { color: #f7f7f8 !important; }
[data-skin="clerk"] .appbar .tab-group-title.tab-group-toggle::before {
  content: '';
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  transition: transform var(--t);
}
[data-skin="clerk"] .appbar .tab-group.is-collapsed .tab-group-title.tab-group-toggle::before { transform: rotate(-90deg); }
[data-skin="clerk"] .appbar .tab-group.is-collapsed .tab { display: none !important; }
/* Section break line between each nav group (CREATE / PUBLISH / MEASURE). The
   group is display:contents (no box), so the divider sits on its title — skip
   the first group (PLAN) so there's no stray line under the brand header. */
[data-skin="clerk"] .appbar .tab-group:not(:first-child) .tab-group-title {
  border-top: 1px solid #eeeef0 !important;
  margin-top: 12px !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .tab-group:not(:first-child) .tab-group-title {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
/* In-group subdivider (sources vs workspace inside PLAN) — same hairline
   as the section breaks, slightly tighter spacing. */
[data-skin="clerk"] .appbar .tab-subdivider {
  border-top: 1px solid #eeeef0 !important;
  margin: 8px 0 6px !important;
  width: auto !important;
  height: 0 !important;
  background: none !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .tab-subdivider {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-skin="clerk"] .appbar .tab {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 7px 10px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #42434d !important;
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  transition: color var(--t), background var(--t) !important;
}
[data-skin="clerk"] .appbar .tab:hover {
  color: #131316 !important;
  background: #f0f0f2 !important;
}
[data-skin="clerk"] .appbar .tab.active {
  color: #131316 !important;
  background: color-mix(in oklab, var(--brand-accent, #ff3d00) 15%, #ffffff) !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .appbar .tab .tab-icon {
  color: currentColor !important;
  opacity: 0.85;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
[data-skin="clerk"] .appbar .tab .tab-label { flex: 1; text-align: left; }
[data-skin="clerk"] .appbar .tab .tab-count {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6e7080 !important;
  background: transparent !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .appbar .tab.active .tab-count { color: #5e5f6e !important; font-weight: 600 !important; }
[data-skin="clerk"] .appbar .tab .tab-dot,
[data-skin="clerk"] .appbar .tab .tab-new {
  background: #131316 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Util cluster (search, theme toggle, user menu) at the bottom of rail */
[data-skin="clerk"] .appbar .util {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #eeeef0 !important;
}
[data-skin="clerk"] .appbar .util .util-divider { display: none !important; }
[data-skin="clerk"] .appbar .search-trigger {
  width: 100% !important;
  justify-content: flex-start !important;
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 8px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 10px !important;
  min-width: 0 !important;
}
[data-skin="clerk"] .appbar .search-trigger:hover { border-color: #d9d9de !important; background: #ffffff !important; color: #131316 !important; }
[data-skin="clerk"] .appbar .search-trigger kbd {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 2px 5px !important;
}
/* Theme toggle is visible — see the dedicated rule block above. */

/* User menu trigger at the very bottom */
[data-skin="clerk"] .user-menu-trigger,
[data-skin="clerk"] [class*="user-trigger"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #42434d !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background var(--t), border-color var(--t) !important;
  text-align: left;
}
[data-skin="clerk"] .user-menu-trigger:hover,
[data-skin="clerk"] [class*="user-trigger"]:hover { background: #f0f0f2 !important; color: #131316 !important; }

/* ── Force light backgrounds on all panels overridden by hybrid.css ── */
[data-skin="clerk"] .tab-panel,
[data-skin="clerk"] .panel,
[data-skin="clerk"] .strategy-grid,
[data-skin="clerk"] .ideas-grid,
[data-skin="clerk"] .kanban,
[data-skin="clerk"] .ws-grid { background: transparent !important; }

[data-skin="clerk"] .panel,
[data-skin="clerk"] .strategy-cell,
/* White card chrome for these containers. NOTE: `.cal-shell` is intentionally
   NOT here — it must stay transparent (it's a layout-only grid; its children are
   the cards). It's kept transparent by the standalone `.cal-shell` rules. Adding
   it here previously flattened all these cards too (idea/approval/ws). */
[data-skin="clerk"] .idea-card,
[data-skin="clerk"] .ws-section,
[data-skin="clerk"] .ws-card,
[data-skin="clerk"] .ws-panel,
[data-skin="clerk"] .approval-card,
[data-skin="clerk"] .approval-row,
[data-skin="clerk"] .pv-row {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #131316 !important;
}
[data-skin="clerk"] .panel:hover,
[data-skin="clerk"] .strategy-cell:hover,
[data-skin="clerk"] .idea-card:hover { border-color: #d9d9de !important; }

/* Idea cards specific */
/* Actions (Discard / Save idea) → a footer BELOW the title + description, instead
   of hybrid.css's absolute bottom-right anchor. Reads top-to-bottom: tags → title
   → description → actions; keeps the base rule's right-alignment. */
.idea-card .actions { position: static !important; bottom: auto !important; right: auto !important; margin-top: 6px !important; justify-content: flex-start !important; gap: 8px !important; }
.idea-card .actions .expand { order: -1; } /* Save idea before Discard */
/* Equal-size pair: force both footer buttons to one width, centered text */
.idea-card .actions .expand,
.idea-card .actions .discard-btn { flex: 0 0 132px !important; width: 132px !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; }
/* Swap the TEXT colors: Save idea now dark, Discard now grey (heart keeps its own grey) */
[data-skin="clerk"] .idea-card .actions .expand { color: #131316 !important; }
[data-skin="clerk"] .idea-card .actions .discard-btn { color: #5e5f6e !important; }
/* Heart sits to the LEFT of "Save idea" (it's the last DOM child; order flips it) */
.idea-card .expand .save-heart { order: -1; }
.idea-card .title { padding-right: 0 !important; } /* drop the 160px reserve for the old right-anchored button */
[data-skin="clerk"] .idea-card .core,
[data-skin="clerk"] .idea-card .title,
[data-skin="clerk"] .idea-card .idea-title {
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
[data-skin="clerk"] .idea-card .meta,
[data-skin="clerk"] .idea-card .idea-meta,
[data-skin="clerk"] .idea-card .core-meta { color: #5e5f6e !important; }
[data-skin="clerk"] .idea-card .expand,
[data-skin="clerk"] .idea-card button {
  background: transparent !important;
  color: #131316 !important;
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}
[data-skin="clerk"] .idea-card .expand:hover { background: #131316 !important; color: #ffffff !important; border-color: #131316 !important; }

/* Workshop / studio panels */
[data-skin="clerk"] .ws-header h1,
[data-skin="clerk"] .ws-section-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  color: #131316 !important;
  letter-spacing: -0.02em !important;
}

/* ── Page headers (the eyebrow + headline at the top of each tab) ── */
/* Scoped to .page-head only — DO NOT include .panel-head here. The
   workshop's .platform-panel-head also matches .panel-head, and
   `align-items: end` on a column-flex parent pushes children flush-right,
   sending the Improve caption / Generate all buttons off to the right edge. */
[data-skin="clerk"] .page-head,
[data-skin="clerk"] .tab-panel > header {
  margin-bottom: 32px !important;
  align-items: end !important;
}
[data-skin="clerk"] .page-head .lhs { max-width: 720px !important; }
[data-skin="clerk"] .page-head .eyebrow,
[data-skin="clerk"] .panel-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
}

/* Universal kill-switch for the white-to-light-gray text-gradient pattern.
   It's used on every tab's headline and reads as invisible on off-white. */
[data-skin="clerk"] .h1,
[data-skin="clerk"] .page-head h1,
[data-skin="clerk"] .page-head .h1,
[data-skin="clerk"] .tab-panel > header h1,
[data-skin="clerk"] .tab-panel .h1,
[data-skin="clerk"] .panel-head h1,
[data-skin="clerk"] .strategy-h1,
[data-skin="clerk"] .picker-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: #131316 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #131316 !important;
  text-fill-color: #131316 !important;
  margin: 6px 0 6px 0 !important;
}
[data-skin="clerk"] .page-head .lead,
[data-skin="clerk"] .page-head p,
[data-skin="clerk"] .tab-panel > header p,
[data-skin="clerk"] .panel-head p,
[data-skin="clerk"] .lead { color: #5e5f6e !important; font-size: 15px !important; line-height: 1.55 !important; }

/* Page-head right-side buttons (e.g. + Add idea, Generate 10 ideas) */
[data-skin="clerk"] .page-head .rhs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto;
}

/* Filter pill rows (Ideas pillar/audience filters) */
[data-skin="clerk"] .filter,
[data-skin="clerk"] .filter-row,
[data-skin="clerk"] .filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
[data-skin="clerk"] .filter > *,
[data-skin="clerk"] .filter button,
[data-skin="clerk"] .filter-pill,
[data-skin="clerk"] .chip-filter,
[data-skin="clerk"] .filter > *:hover,
[data-skin="clerk"] .filter button:hover,
[data-skin="clerk"] .filter-pill:hover { color: #131316 !important; border-color: #d9d9de !important; }
[data-skin="clerk"] .filter > *.active,
[data-skin="clerk"] .filter button.active,
[data-skin="clerk"] .filter > *[aria-pressed="true"],
[data-skin="clerk"] .filter-pill.active,
[data-skin="clerk"] .chip-filter.active {
  background: #131316 !important;
  color: #ffffff !important;
  border-color: #131316 !important;
}

/* ── Library STATUS filter — underline tabs (matches the Campaigns filter bar).
   The per-status card hues (studio=blue … failed=red) carry into the rest-state
   dot AND the active tab's underline (both via --lfc), so the color-coding
   survives the switch from chips. ── */
/* The ROW carries the underline; status tabs sit left, the search + view toggle
   ride the right (moved up onto this row — "Option A"). flex-end keeps the active
   tab's underline on the row rule; the toolbar lifts a few px above it. */
[data-skin="clerk"] .library-time-row {
  display: flex !important; align-items: flex-end !important; flex-wrap: wrap !important;
  justify-content: flex-start !important; gap: 8px 16px !important;
  border-bottom: 1px solid var(--border) !important; margin: 0 0 16px !important;
}
[data-skin="clerk"] .library-filter-chips {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 20px !important; border-bottom: none !important; margin: 0 !important;
}
/* Toolbar — no longer a bordered card; a right-aligned, compact search + toggle. */
[data-skin="clerk"] .library-toolbar {
  margin: 0 0 0 auto !important; padding: 0 0 6px 0 !important;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important;
}
[data-skin="clerk"] .library-toolbar .library-search {
  flex: 0 0 auto !important; width: 210px !important; min-width: 0 !important;
  height: 32px !important; padding: 0 12px 0 32px !important; font-size: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 11px center !important; background-size: 15px !important;
}
/* Narrow windows: collapse the search to its magnifier instead of wrapping the
   toolbar to a second line. Expands on focus, or while it holds a query.
   900px is tunable — raise it if the toolbar wraps before the search collapses. */
@media (max-width: 900px) {
  [data-skin="clerk"] .library-toolbar .library-search {
    width: 34px !important; padding: 0 !important; background-position: center !important;
  }
  [data-skin="clerk"] .library-toolbar .library-search:focus,
  [data-skin="clerk"] .library-toolbar .library-search:not(:placeholder-shown) {
    width: 200px !important; padding: 0 12px 0 32px !important; background-position: 11px center !important;
  }
}
.library-status-chip { display: inline-flex !important; align-items: center; gap: 7px; }
.library-status-chip .lfc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--lfc, #9ca3af); }
/* Tab look — strip the pill bg/border/radius; sit a 2px underline on the row rule.
   Hover comes BEFORE active in source order so an active+hovered tab keeps it. */
[data-skin="clerk"] .library-status-chip {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
  padding: 9px 1px !important; font-size: 13px !important; font-weight: 500 !important;
  color: #5e5f6e !important; cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif !important;
  transition: color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .library-status-chip:hover { color: #131316 !important; border-bottom-color: transparent !important; }
/* Active = dark label + a status-colored underline (no fill). 'All' has no --lfc → charcoal. */
[data-skin="clerk"] .library-status-chip.active {
  background: transparent !important; color: #131316 !important;
  border-bottom-color: var(--lfc, #131316) !important;
}
/* Per-status hues feed the rest dot and the active underline via --lfc. */
[data-skin="clerk"] .library-status-chip[data-filter-status="studio"]         { --lfc: #3b82f6; }
[data-skin="clerk"] .library-status-chip[data-filter-status="in-review"]      { --lfc: #f59e0b; }
[data-skin="clerk"] .library-status-chip[data-filter-status="changes-needed"] { --lfc: #f97316; }
[data-skin="clerk"] .library-status-chip[data-filter-status="approved"]       { --lfc: #22c55e; }
[data-skin="clerk"] .library-status-chip[data-filter-status="scheduled"]      { --lfc: #8b5cf6; }
[data-skin="clerk"] .library-status-chip[data-filter-status="failed"]         { --lfc: #ef4444; }
[data-skin="clerk"] .library-status-chip[data-filter-status="building"]       { --lfc: #9ca3af; }
/* Dark mode — brighter hues + light labels (same values as the dark card chips). */
[data-skin="clerk"][data-theme="dark"] .library-status-chip { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip:hover { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip.active { color: #f7f7f8 !important; border-bottom-color: var(--lfc, #f7f7f8) !important; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="studio"]         { --lfc: #60a5fa; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="in-review"]      { --lfc: #fde047; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="changes-needed"] { --lfc: #fb923c; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="approved"]       { --lfc: #4ade68; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="scheduled"]      { --lfc: #a78bfa; }
[data-skin="clerk"][data-theme="dark"] .library-status-chip[data-filter-status="failed"]         { --lfc: #f87171; }

/* AUDIENCE / PILLARS sub-labels above pill rows */
[data-skin="clerk"] .filter-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin: 14px 0 6px !important;
}

/* Workshop platform variants — the section-locked "Not activated yet"
   surface plus the platform-panel wrapper. hybrid.css ships these as
   translucent dark overlays; we recolor to white with a soft indicator. */
[data-skin="clerk"] .panel.platform-panel,
[data-skin="clerk"] .platform-panel,
[data-skin="clerk"] .ws-platform,
[data-skin="clerk"] .ws-platform-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 18px !important;
}
[data-skin="clerk"] .platform-tab-body { background: transparent !important; }
[data-skin="clerk"] .section-locked,
[data-skin="clerk"] .platform-tab-content.section-locked,
[data-skin="clerk"] .variant-locked,
[data-skin="clerk"] .ws-section-locked {
  background: #fafafb !important;
  background-image: none !important;
  border: 1px dashed #d9d9de !important;
  border-radius: 12px !important;
  color: #5e5f6e !important;
  padding: 32px 24px !important;
  text-align: center !important;
}
[data-skin="clerk"] .section-locked .section-locked-eyebrow,
[data-skin="clerk"] .section-locked .locked-eyebrow,
[data-skin="clerk"] .variant-locked .eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin-bottom: 10px !important;
}
[data-skin="clerk"] .section-locked .section-locked-title,
[data-skin="clerk"] .section-locked-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #131316 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}
[data-skin="clerk"] .section-locked .section-locked-body,
[data-skin="clerk"] .section-locked-body {
  color: #5e5f6e !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
  max-width: 320px;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-skin="clerk"] .section-locked .btn-primary,
[data-skin="clerk"] .section-locked-btn {
  background: #131316 !important;
  color: #ffffff !important;
  border: 1px solid #131316 !important;
}

/* Platform-format pill row (Text post / Image post / Carousel) */
[data-skin="clerk"] .pv-format-toggle,
[data-skin="clerk"] .pv-format-pills,
[data-skin="clerk"] .platform-tab-pills,
[data-skin="clerk"] .platform-format-toggle {
  display: inline-flex !important;
  gap: 2px !important;
  background: #f0f0f2 !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 999px !important;
  padding: 2px !important;
}
[data-skin="clerk"] .pv-format-toggle button,
[data-skin="clerk"] .pv-format-pill,
[data-skin="clerk"] .platform-tab-pill,
[data-skin="clerk"] .platform-format-toggle button {
  background: transparent !important;
  border: none !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] .pv-format-toggle button.active,
[data-skin="clerk"] .pv-format-toggle button[aria-pressed="true"],
[data-skin="clerk"] .pv-format-pill.active,
[data-skin="clerk"] .platform-tab-pill.active {
  background: #ffffff !important;
  color: #131316 !important;
  box-shadow: 0 1px 2px rgba(19, 19, 22, 0.06) !important;
}

/* Pill-style filters sit on the faint-grey surface, not pure white — the qr
   pills used var(--bg-elev-2) (resolves to #ffffff under clerk); match the pv
   pills' #f7f7f8. The Size (aspect) tiles get it too. The LOOK/LAYOUT mockup
   tiles (.pv-layout-tile) are intentionally left WHITE so their preview art
   reads clearly. :not(.is-active) preserves each control's own dark active fill. */
[data-skin="clerk"] .qr-format-pill:not(.is-active),
[data-skin="clerk"] .qr-preview-tab:not(.is-active),
[data-skin="clerk"] .pv-aspect-tile:not(.is-active) {
  background: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .qr-format-pill:not(.is-active),
[data-skin="clerk"][data-theme="dark"] .qr-preview-tab:not(.is-active),
[data-skin="clerk"][data-theme="dark"] .pv-aspect-tile:not(.is-active) {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Selected wrapping pills turn brand-accent — same treatment as the Ideas pills
   (accent border + faint tint + darkened-accent text) instead of the dark fill.
   Placed after the existing clerk active rules so it wins; --brand-accent tracks
   the per-brand colour. Light + dark both set bg/border to beat the dark-mode
   rule that otherwise forces #fff. */
[data-skin="clerk"] .qr-format-pill.is-active,
[data-skin="clerk"] .qr-preview-tab.is-active,
[data-skin="clerk"] .pv-ai-medium-pill.is-active,
[data-skin="clerk"] .pv-style-modal-pill.is-active,
[data-skin="clerk"] .pv-aspect-tile.is-active {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 11%, var(--bg-elev)) !important;
  border-color: var(--brand-accent, #ff3d00) !important;
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316) !important;
}
[data-skin="clerk"][data-theme="dark"] .qr-format-pill.is-active,
[data-skin="clerk"][data-theme="dark"] .qr-preview-tab.is-active,
[data-skin="clerk"][data-theme="dark"] .pv-ai-medium-pill.is-active,
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-pill.is-active,
[data-skin="clerk"][data-theme="dark"] .pv-aspect-tile.is-active {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 11%, var(--bg-elev)) !important;
  border-color: var(--brand-accent, #ff3d00) !important;
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff) !important;
}

/* Selected LOOK/LAYOUT tiles: a thin brand-accent outline, no fill (their active
   was a black 2px border). Padding/text stay from the base rule. */
[data-skin="clerk"] .pv-layout-tile.is-active {
  border-color: var(--brand-accent, #ff3d00) !important;
  border-width: 1.5px !important;
}

/* Wrapping pills get a fixed height with variable width, so the icon pills
   (pv-ai-medium-pill carries a 14px glyph) line up with the text-only pills.
   border-box folds the 1px border into the height; flex-centres the content
   and zeroes vertical padding so the height is exact. */
[data-skin="clerk"] .qr-format-pill,
[data-skin="clerk"] .qr-preview-tab,
[data-skin="clerk"] .pv-ai-medium-pill,
[data-skin="clerk"] .pv-style-modal-pill {
  box-sizing: border-box !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  white-space: nowrap !important;
}

/* Workshop header card (asset title + Send to Approval Queue) */
[data-skin="clerk"] .ws-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
[data-skin="clerk"] .ws-header .lhs { flex: 1; min-width: 0; }
[data-skin="clerk"] .ws-header .rhs { flex-shrink: 0; }
[data-skin="clerk"] .ws-header .back-link,
[data-skin="clerk"] .back-link {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-bottom: none !important;
  margin-bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}
[data-skin="clerk"] .ws-header .back-link:hover { color: #131316 !important; }
[data-skin="clerk"] .ws-header h1,
[data-skin="clerk"] .ws-header .h1 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #131316 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #131316 !important;
}

/* "POLISH CAPTION" button in each platform card.
   NOTE: do NOT use [class*="polish"] here — that wildcard would also match
   `.platform-polish-host` (the container that renders the polished
   captions), causing text-transform: uppercase to inherit down into the
   variant content and forcing the polished text to render in caps. */
[data-skin="clerk"] .polish-caption,
[data-skin="clerk"] a.polish-caption,
[data-skin="clerk"] button.polish-caption,
[data-skin="clerk"] .platform-polish-btn {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
  border-bottom: none !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
  cursor: pointer;
  border-radius: 6px !important;
}
[data-skin="clerk"] .platform-polish-btn:hover { color: #131316 !important; background: #f0f0f2 !important; }
/* Head-bar polish button is now hidden — it's replaced by the inline polish
   button in each tab's action row, which delegates to the same popover.
   The head-bar button stays in the DOM so the outside-click exclusion + the
   "Improving…" loading state on it still work without code churn. */
[data-skin="clerk"] .platform-polish-btn { display: none !important; }
/* Ensure the polish-host (which contains "polish" in its class) does NOT
   inherit uppercase from any other rule. */
[data-skin="clerk"] .platform-polish-host,
[data-skin="clerk"] .platform-polish-host .variant,
[data-skin="clerk"] .platform-polish-host .variant > div { text-transform: none !important; }
[data-skin="clerk"] .polish-caption:hover { color: #131316 !important; background: #f0f0f2 !important; }

/* ── Inline polish button (lives in each tab's action row, next to the
   regen button). Styled to match the regen-btn pill so the pair reads as
   a single AI-actions group. ─────────────────────────────────────────── */
[data-skin="clerk"] .pv-inline-polish-btn {
  background: transparent !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 6px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
[data-skin="clerk"] .pv-inline-polish-btn:hover {
  color: #131316 !important;
  border-color: #d9d9de !important;
  background: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-inline-polish-btn {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-inline-polish-btn:hover {
  color: #f7f7f8 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Match the regen button styling to the inline polish button so the AI
   action pair reads as one consistent group. Scoped to the AI action row
   so the building-blocks regen buttons in the panel-head keep their
   original Inter Tight pill styling. */
[data-skin="clerk"] .pv-ai-action-row .regen-btn {
  background: transparent !important;
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 5px 10px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
/* Gray outline at rest → brand outline + translucent brand fill (8%) on hover;
   label stays grey, the icon is brand-coloured (like the ideas Save heart). */
[data-skin="clerk"] .pv-ai-action-row .regen-btn:hover {
  color: #5e5f6e !important;
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important;
}
[data-skin="clerk"] .pv-ai-action-row .regen-btn .regen-icon { font-size: 12px !important; line-height: 1; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-action-row .regen-btn {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-action-row .regen-btn:hover {
  color: #9394a1 !important;
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent) !important;
}

/* Field action buttons (.actions-row .regen-btn — Improve copy / Fresh angle /
   Match caption, plus the caption actions). Gray outline at rest → brand outline +
   translucent brand fill (8%) on hover; grey label, brand icon. */
[data-skin="clerk"] .actions-row .regen-btn {
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"] .actions-row .regen-btn:hover {
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"][data-theme="dark"] .actions-row .regen-btn {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .actions-row .regen-btn:hover {
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent) !important;
  color: #9394a1 !important;
}
/* Brand-coloured icons (SVG stroke = currentColor), full opacity, in both rest
   and hover — matching the ideas page. Covers the Quick Render + field action
   rows and the Auto-fill brief button. */
[data-skin="clerk"] .pv-ai-action-row .regen-btn .regen-btn-icon,
[data-skin="clerk"] .actions-row .regen-btn .regen-btn-icon {
  color: var(--brand-accent, var(--accent)) !important;
  opacity: 1 !important;
}

/* Shared "brand outline" treatment for the MAIN action button on the campaign,
   approval-expanded, and calendar-expanded surfaces. Opt-in via .btn-brand-outline
   (added only to the primary button of each pair; the paired secondary button —
   Request changes / Remove / campaign card actions — keeps its own quieter style).
   Gray outline + grey label at rest → brand outline + translucent brand fill (8%)
   on hover, matching the ideas Save / library Open / studio buttons. `button.` +
   :not(.approve-flash) keeps it above the base .btn-primary/.btn-ghost rules while
   leaving the Approve success-flash (green) untouched. */
[data-skin="clerk"] button.btn-brand-outline:not(.approve-flash) {
  background: transparent !important;
  border: 1px solid #d9d9de !important;
  color: #5e5f6e !important;
  box-shadow: none !important;
}
[data-skin="clerk"] button.btn-brand-outline:hover:not(:disabled):not(.approve-flash) {
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"][data-theme="dark"] button.btn-brand-outline:not(.approve-flash) {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] button.btn-brand-outline:hover:not(:disabled):not(.approve-flash) {
  border-color: var(--brand-accent, var(--accent)) !important;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent) !important;
  color: #9394a1 !important;
}

/* Button + info-icon group — keeps the help icon close to its button */
[data-skin="clerk"] .pv-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Source dropdown + info icon group — keeps the help "i" right next to
   the dropdown so the per-source description (formerly a callout below
   the mockup) is reachable in one place. */
[data-skin="clerk"] .pv-source-dropdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* The source dropdown lives in the LEFT half of the platform panel, so
   the default `right: -6px` tooltip alignment runs the tooltip off the
   left edge of the leftmost panel (LinkedIn). Flip it to anchor LEFT for
   any info-icon inside the source dropdown wrap so it extends rightward. */
[data-skin="clerk"] .pv-source-dropdown-wrap .info-icon-tip {
  left: 0 !important;
  right: auto !important;
}

/* AI actions row — Improve caption + Re-create caption grouped on their own
   row (separate from the image controls). */
[data-skin="clerk"] .pv-ai-action-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* In has-side-panel grid mode the panel-tab-content is a 2-col grid. Split
   the toolbars across the two columns so each toolbar sits above the chunk
   of content it controls: AI actions above the IMAGE COPY column (col 1,
   left), image controls above the mockup (col 2, right). */
[data-skin="clerk"] .platform-tab-content.has-side-panel:not([hidden]) .pv-ai-action-row {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}
[data-skin="clerk"] .platform-tab-content.has-side-panel:not([hidden]) .pv-action-row {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

/* ── Info "i" icon + tooltip ────────────────────────────────────────── */
[data-skin="clerk"] .info-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
[data-skin="clerk"] .info-icon-btn {
  width: 16px;
  height: 16px;
  background: transparent !important;
  border: 1px solid #d9d9de !important;
  border-radius: 50% !important;
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1;
  padding: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t), border-color var(--t), background var(--t);
}
[data-skin="clerk"] .info-icon-btn:hover {
  color: #131316 !important;
  border-color: #131316 !important;
  background: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .info-icon-btn {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .info-icon-btn:hover {
  color: #f7f7f8 !important;
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-skin="clerk"] .info-icon-tip {
  position: absolute;
  top: calc(100% + 6px);
  right: -6px;
  width: 280px;
  max-width: 80vw;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #d9d9de;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(19, 19, 22, 0.12), 0 4px 8px rgba(19, 19, 22, 0.04);
  color: #131316;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-transform: none !important;
  letter-spacing: 0 !important;
  z-index: 50;
  white-space: normal;
}
[data-skin="clerk"][data-theme="dark"] .info-icon-tip {
  background: #1a1a1f;
  border-color: rgba(255, 255, 255, 0.14);
  color: #f7f7f8;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}
[data-skin="clerk"] .info-icon-tip[hidden] { display: none !important; }

/* Building blocks expandable section */
[data-skin="clerk"] details.building-blocks,
[data-skin="clerk"] details.ws-details,
[data-skin="clerk"] #tab-workshop details {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-top: 24px;
  overflow: hidden;
}
[data-skin="clerk"] #tab-workshop details summary,
[data-skin="clerk"] details.building-blocks summary {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
  padding: 14px 18px !important;
  cursor: pointer;
  list-style: none;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] #tab-workshop details summary::-webkit-details-marker { display: none; }
[data-skin="clerk"] #tab-workshop details summary:hover { background: #fafafb !important; color: #131316 !important; }
[data-skin="clerk"] #tab-workshop details[open] summary { border-bottom: 1px solid #eeeef0; }

/* Catch-all: any element that's getting hybrid.css's dark-panel treatment
   needs the same white-card override. This sweep covers the long tail of
   surfaces beyond what we hand-targeted. */
[data-skin="clerk"] .library-card,
[data-skin="clerk"] .asset-card,
[data-skin="clerk"] .ws-meta-card,
[data-skin="clerk"] .approval-meta,
[data-skin="clerk"] .cal-event,
[data-skin="clerk"] .pillar-card,
[data-skin="clerk"] .audience-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  color: #131316 !important;
  box-shadow: none !important;
}
/* .strategy-section is the section WRAPPER, not a card — its child
   .strategy-cell elements are the cards. Giving the wrapper its own
   white background + border made a card-on-card box that visibly sat
   behind the cells and stretched the full page height. Wrapper now
   renders transparent so only the cells show as cards. */
[data-skin="clerk"] .strategy-section {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .library-card:hover,
[data-skin="clerk"] .asset-card:hover { border-color: #d9d9de !important; box-shadow: var(--shadow-sm) !important; }
[data-skin="clerk"] .library-card *,
[data-skin="clerk"] .asset-card * { color: #131316; }
[data-skin="clerk"] .library-card .meta,
[data-skin="clerk"] .asset-card .meta,
[data-skin="clerk"] .library-card .platform,
[data-skin="clerk"] .library-card .draft { color: #5e5f6e !important; }

/* Section labels like TODAY / THIS WEEK / THIS MONTH */
[data-skin="clerk"] .lib-section-title,
[data-skin="clerk"] .lib-bucket-title,
[data-skin="clerk"] .lib-when,
[data-skin="clerk"] .section-eyebrow,
[data-skin="clerk"] .group-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin: 20px 0 10px !important;
}

/* Drafted-post pill (TODAY/THIS WEEK time filter buttons in Library) */
[data-skin="clerk"] .lib-filter,
[data-skin="clerk"] .lib-filter-pill {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 999px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 11px !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .lib-filter.active,
[data-skin="clerk"] .lib-filter[aria-pressed="true"] { background: #131316 !important; color: #ffffff !important; border-color: #131316 !important; }

/* Empty-state CTAs — ONE card, with title + body + actions as typography
   inside it (NOT three stacked cards). Only target known root containers;
   children get transparent backgrounds to undo any inherited card chrome.
   When the empty container is inside a multi-column grid (e.g. .kanban
   on the Approval tab), make it span every column AND center itself. */
[data-skin="clerk"] .empty-cta,
[data-skin="clerk"] .empty-state,
[data-skin="clerk"] .empty-container,
[data-skin="clerk"] .ws-empty {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-xs) !important;
  color: #131316 !important;
  padding: 56px 40px !important;
  text-align: center !important;
  max-width: 560px !important;
  width: 100% !important;
  margin: 40px auto !important;
  justify-self: center !important;
  grid-column: 1 / -1 !important;
}
/* Children of empty containers: pure typography, no chrome */
[data-skin="clerk"] .empty-cta > *,
[data-skin="clerk"] .empty-state > *,
[data-skin="clerk"] .empty-container > *,
[data-skin="clerk"] .ws-empty > *,
[data-skin="clerk"] .empty-title,
[data-skin="clerk"] .empty-text,
[data-skin="clerk"] .empty-actions,
[data-skin="clerk"] .empty-eyebrow,
[data-skin="clerk"] .empty-body {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: auto;
  margin-right: auto;
}
[data-skin="clerk"] .empty-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #131316 !important;
  margin: 0 0 10px 0 !important;
}
[data-skin="clerk"] .empty-text,
[data-skin="clerk"] .empty-body {
  color: #5e5f6e !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 440px;
  margin: 0 auto 20px !important;
}
[data-skin="clerk"] .empty-text strong,
[data-skin="clerk"] .empty-body strong { color: #131316 !important; font-weight: 600 !important; }
[data-skin="clerk"] .empty-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin: 0 0 14px 0 !important;
}
[data-skin="clerk"] .empty-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  margin-top: 4px !important;
}

/* "Sign out" link/button at the bottom of the sidebar */
[data-skin="clerk"] .signout,
[data-skin="clerk"] #sign-out,
[data-skin="clerk"] button.signout,
[data-skin="clerk"] a.signout {
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  margin-top: 4px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
[data-skin="clerk"] .signout:hover { color: #131316 !important; background: #f0f0f2 !important; }

/* ── Approval cards ─────────────────────────────────────────────── */
[data-skin="clerk"] .approval-card { padding: 20px 22px !important; }
[data-skin="clerk"] .card-head {
  border-bottom: 1px solid #eeeef0 !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
}
[data-skin="clerk"] .platform-row,
[data-skin="clerk"] .approval-row { border-top: 1px solid #eeeef0 !important; color: #131316 !important; }

/* ── Calendar ───────────────────────────────────────────────────── */
[data-skin="clerk"] .cal-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
}
[data-skin="clerk"] .cal-grid,
[data-skin="clerk"] .cal-cells,
[data-skin="clerk"] .cal-panel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  gap: 0 !important;
  color: #131316 !important;
}
[data-skin="clerk"] .cal-month-head,
[data-skin="clerk"] .cal-head {
  background: #fafafb !important;
  border-bottom: 1px solid #eeeef0 !important;
  color: #131316 !important;
}
[data-skin="clerk"] .cal-month-head .cal-month-title { color: #131316 !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
[data-skin="clerk"] .cal-week-head { background: #fafafb !important; }
[data-skin="clerk"] .cal-dow { color: #6e7080 !important; font-family: 'Manrope', system-ui, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 10px 8px; }
[data-skin="clerk"] .cal-cell,
[data-skin="clerk"] .cal-day {
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #eeeef0 !important;
  border-bottom: 1px solid #eeeef0 !important;
  border-radius: 0 !important;
  color: #131316 !important;
  /* Row-aware fill height (mirrors the base .cal-day rule) so the clerk grid
     fills the page instead of pinning to a fixed 96px. */
  min-height: clamp(70px, calc((100vh - 213px) / var(--cal-rows, 6)), 240px);
}
[data-skin="clerk"] .cal-day.other-month {
  background: #fafafb !important;
  color: #c4c5cf !important;
}
[data-skin="clerk"] .cal-day.other-month .cal-day-num { color: #c4c5cf !important; font-weight: 400 !important; }
[data-skin="clerk"] .cal-cell:hover,
[data-skin="clerk"] .cal-day:hover:not(.other-month) { background: #ffffff !important; } /* rest color — the rounded ::after is the hover feedback now */
[data-skin="clerk"] .cal-day-num { color: #5e5f6e !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: 0 !important; padding: 6px 8px; }
[data-skin="clerk"] .cal-today { background: #f0f0f2 !important; }
[data-skin="clerk"] .cal-today .cal-day-num { color: #131316 !important; font-weight: 700 !important; }

/* Calendar left sidebar (Approved posts queue) */
[data-skin="clerk"] .cal-sidebar {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  color: #131316 !important;
}
[data-skin="clerk"] .cal-sidebar-head {
  background: #fafafb !important;
  border-bottom: 1px solid #eeeef0 !important;
  color: #131316 !important;
  padding: 14px 16px !important;
}
[data-skin="clerk"] .cal-sidebar-title {
  color: #131316 !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
[data-skin="clerk"] .cal-sidebar-count {
  background: #eeeef0 !important;
  color: #5e5f6e !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 8px !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .cal-sidebar-count.has-pending { background: #fef9c3 !important; color: #a16207 !important; }
[data-skin="clerk"] .cal-sidebar-empty {
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 24px !important;
}
[data-skin="clerk"] .cal-event {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 8px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
}

/* ── Modals — clean white card on a soft scrim ──────────────────── */
[data-skin="clerk"] .modal-overlay { background: rgba(19, 19, 22, 0.36) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-skin="clerk"] .modal,
[data-skin="clerk"] .modal-card,
[data-skin="clerk"] .dialog-card {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -12px rgba(19, 19, 22, 0.18), 0 8px 16px rgba(19, 19, 22, 0.06) !important;
  color: #131316 !important;
}
[data-skin="clerk"] .modal h1,
[data-skin="clerk"] .modal h2,
[data-skin="clerk"] .modal-title,
[data-skin="clerk"] .dialog-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #131316 !important;
}
[data-skin="clerk"] .modal-eyebrow,
[data-skin="clerk"] .dialog-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
}

/* ── Workshop top section ───────────────────────────────────────── */
[data-skin="clerk"] .ws-header {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 24px;
}
[data-skin="clerk"] .pv-row {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-bottom: 8px;
}
[data-skin="clerk"] .pv-row-select {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 8px !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .pv-ai-mode-badge {
  background: #f0f0f2 !important;
  color: #42434d !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  letter-spacing: 0 !important;
}

/* Caption editors — the core Studio interaction surface */
[data-skin="clerk"] textarea.pv-row-textarea,
[data-skin="clerk"] .pv-row textarea,
[data-skin="clerk"] .ws-caption,
[data-skin="clerk"] .ws-caption-textarea,
[data-skin="clerk"] textarea.caption {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 10px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding: 12px 14px !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"] textarea.pv-row-textarea:focus,
[data-skin="clerk"] .pv-row textarea:focus,
[data-skin="clerk"] .ws-caption:focus,
[data-skin="clerk"] textarea.caption:focus {
  border-color: #131316 !important;
  box-shadow: 0 0 0 3px rgba(19, 19, 22, 0.08) !important;
  outline: none !important;
}

/* Variant labels (LinkedIn / X / IG section headers) */
[data-skin="clerk"] .pv-platform-label,
[data-skin="clerk"] .pv-section-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
}

/* ============================================================================
   CLERK SKIN — DARK MODE
   Inverted palette with the same restraint principles: near-black surface,
   off-white ink, hairline borders, monochrome accent. Adds two atmospheric
   touches that don't fit on light:
   - A subtle orange aurora behind the picker hero (single brand moment)
   - Glass blur on the sticky left rail (depth without decoration)
   Toggled via the existing #theme-toggle which writes data-theme="dark"
   plus our nf_clerk_theme localStorage key.
   ============================================================================ */

:root[data-skin="clerk"][data-theme="dark"] {
  /* Neutral lifted-charcoal dark palette — hue colour-picked from Claude Code's
     dark theme (canvas #20201f, panel #292928, card #3a3a39): a clean neutral
     grey (red≈green≈blue), NOT the old cool blue-black and NOT a warm brown. Run
     a shade darker than CC per operator preference. Ramp:
     canvas #1a1a19 → tray #1c1c1b → elev/card #202020 → elev-2 #2a2a29. */
  --bg:             #1a1a19;
  --bg-elev:        #202020;
  --bg-elev-2:      #2a2a29;
  --bg-overlay:     #202020;
  --bg-subtle:      #212121;
  --border:         rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(255, 255, 255, 0.11);
  --border-hover:   rgba(255, 255, 255, 0.17);
  --text:           #f7f7f8;
  --text-2:         #d9d9de;
  --nav-label:      #dcdce1;
  --text-muted:     #9394a1;
  --text-dim:       #5e5f6e;
  --accent:         #ffffff;
  --accent-hover:   #f0f0f2;
  --accent-2:       #ffffff;
  --accent-soft:    rgba(255, 255, 255, 0.07);
  --success:        #4ade68;
  --success-soft:   rgba(74, 222, 104, 0.10);
  --warning:        #fde047;
  --warning-soft:   rgba(253, 224, 71, 0.10);
  --danger:         #f87171;
  --danger-soft:    rgba(248, 113, 113, 0.10);
  --status-approved:#4ade68;
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 20px 48px -8px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-skin="clerk"][data-theme="dark"] html,
[data-skin="clerk"][data-theme="dark"] body { background: #1a1a19 !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] body { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] ::selection { background: #ffffff; color: #1a1a19; }

/* ── Picker (dark) — solid dark canvas, no gradients ──────────── */
/* Clerk-dark is a pure tool theme: flat near-black surface, no aurora,
   no warm glow, no purple wash. Easier to live in for long sessions —
   the original's atmospheric gradients tire the eye over hours. */
[data-skin="clerk"][data-theme="dark"] #picker-shell,[data-skin="clerk"][data-theme="dark"] #cc-shell,
[data-skin="clerk"][data-theme="dark"] #picker { background: #1a1a19 !important; }

[data-skin="clerk"][data-theme="dark"] .picker-eyebrow { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .picker-title,
[data-skin="clerk"][data-theme="dark"] #picker h1,
[data-skin="clerk"][data-theme="dark"] #picker h2 {
  color: #f7f7f8 !important;
  -webkit-text-fill-color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .picker-lead,
[data-skin="clerk"][data-theme="dark"] #picker p { color: #9394a1 !important; }

[data-skin="clerk"][data-theme="dark"] .picker-meta {
  background: rgba(19, 19, 22, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
[data-skin="clerk"][data-theme="dark"] .picker-meta > div,
[data-skin="clerk"][data-theme="dark"] .picker-meta > p {
  color: #5e5f6e !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-skin="clerk"][data-theme="dark"] .picker-meta > * > *:last-child,
[data-skin="clerk"][data-theme="dark"] .picker-meta > * > b { color: #f7f7f8 !important; }

/* Brand tiles — translucent dark cards with hairline */
[data-skin="clerk"][data-theme="dark"] .brand-tile {
  background: rgba(19, 19, 22, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f7f7f8 !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
[data-skin="clerk"][data-theme="dark"] .brand-tile:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(26, 26, 29, 0.7) !important;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.5) !important;
}
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-name,
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-head { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-slug,
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-foot,
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-foot > * { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-foot { border-top-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-archive {
  background: rgba(19, 19, 22, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-archive:hover {
  background: rgba(248, 113, 113, 0.10) !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  color: #f87171 !important;
}
[data-skin="clerk"][data-theme="dark"] .brand-tile.add-tile {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #9394a1 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-skin="clerk"][data-theme="dark"] .brand-tile.add-tile:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #f7f7f8 !important;
}

/* ── Workspace sidebar (dark) — glass over the dark canvas ────── */
[data-skin="clerk"][data-theme="dark"] html header.appbar,
[data-skin="clerk"][data-theme="dark"] #app header.appbar {
  background: rgba(16, 16, 15, 0.72) !important;
  border-right-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
[data-skin="clerk"][data-theme="dark"] #app main { background: #1a1a19 !important; }

[data-skin="clerk"][data-theme="dark"] .crumb { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .nueform-mark:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .brand-pill {
  background: transparent !important;
  border-color: transparent !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .brand-pill:hover { border-color: transparent !important; background: rgba(255, 255, 255, 0.07) !important; }
[data-skin="clerk"][data-theme="dark"] .brand-pill::after { color: #9394a1 !important; }

/* Sidebar tabs */
[data-skin="clerk"][data-theme="dark"] .appbar .tab-group-title { color: #8b8b93 !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.04) !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab.active { color: #f7f7f8 !important; background: color-mix(in oklab, var(--brand-accent, #ff3d00) 26%, transparent) !important; box-shadow: none !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab .tab-count { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab.active .tab-count { color: #d9d9de !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .tab .tab-dot,
[data-skin="clerk"][data-theme="dark"] .appbar .tab .tab-new { background: #ffffff !important; }

/* Sidebar util block */
[data-skin="clerk"][data-theme="dark"] .appbar .util { border-top-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .search-trigger {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .search-trigger:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .search-trigger kbd {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .theme-toggle { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .appbar .theme-toggle:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .user-menu-trigger { color: #d9d9de !important; }
[data-skin="clerk"][data-theme="dark"] .user-menu-trigger:hover { background: rgba(255, 255, 255, 0.04) !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .signout { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .signout:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.04) !important; }

/* ── Universal surfaces ────────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .card,
[data-skin="clerk"][data-theme="dark"] .panel,
[data-skin="clerk"][data-theme="dark"] .strategy-cell,
[data-skin="clerk"][data-theme="dark"] .idea-card,
[data-skin="clerk"][data-theme="dark"] .ws-section,
[data-skin="clerk"][data-theme="dark"] .ws-card,
[data-skin="clerk"][data-theme="dark"] .ws-panel,
[data-skin="clerk"][data-theme="dark"] .approval-card,
[data-skin="clerk"][data-theme="dark"] .approval-row,
[data-skin="clerk"][data-theme="dark"] .pv-row,
[data-skin="clerk"][data-theme="dark"] .library-card,
[data-skin="clerk"][data-theme="dark"] .asset-card,
[data-skin="clerk"][data-theme="dark"] .ws-header,
[data-skin="clerk"][data-theme="dark"] .platform-panel,
[data-skin="clerk"][data-theme="dark"] .panel.platform-panel,
[data-skin="clerk"][data-theme="dark"] .login-card,
[data-skin="clerk"][data-theme="dark"] .mobile-guard-card {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-cell:hover,
[data-skin="clerk"][data-theme="dark"] .idea-card:hover,
[data-skin="clerk"][data-theme="dark"] .library-card:hover { border-color: rgba(255, 255, 255, 0.14) !important; }

/* Strategy cards (universal #202020) already lift cleanly off the warm section
   tray (#1c1c1b → card #202020, a clear step), so no separate card colour is
   needed here — the elevation comes from the tray sitting lower. */

/* Recessed input wells (dark). Text fields sit BELOW their card as a well
   (#171716, down near the canvas) instead of blending into it — the edit boxes
   read as deliberate wells, and nested boxes stop creeping lighter. More
   specific than the base transparent rule (adds data-skin + data-theme), so it
   wins. Warm border + warm focus to match the palette. */
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell textarea,
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell input[type="text"],
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell input:not([type]),
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell textarea.sve-body,
[data-skin="clerk"][data-theme="dark"] .st2-shell .founder-edit-textarea {
  background: #171716 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell textarea:focus,
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell input[type="text"]:focus,
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell input:not([type]):focus,
[data-skin="clerk"][data-theme="dark"] .st2-shell .strategy-cell textarea.sve-body:focus,
[data-skin="clerk"][data-theme="dark"] .st2-shell .founder-edit-textarea:focus {
  background: #1a1a19 !important;
  border-color: var(--accent) !important;
}

/* Dark-mode empty container — ONE card, children transparent. */
[data-skin="clerk"][data-theme="dark"] .empty-cta,
[data-skin="clerk"][data-theme="dark"] .empty-state,
[data-skin="clerk"][data-theme="dark"] .empty-container,
[data-skin="clerk"][data-theme="dark"] .ws-empty {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .empty-cta > *,
[data-skin="clerk"][data-theme="dark"] .empty-state > *,
[data-skin="clerk"][data-theme="dark"] .empty-container > *,
[data-skin="clerk"][data-theme="dark"] .ws-empty > *,
[data-skin="clerk"][data-theme="dark"] .empty-title,
[data-skin="clerk"][data-theme="dark"] .empty-text,
[data-skin="clerk"][data-theme="dark"] .empty-actions,
[data-skin="clerk"][data-theme="dark"] .empty-eyebrow,
[data-skin="clerk"][data-theme="dark"] .empty-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .empty-title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .empty-text { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .empty-text strong { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .empty-eyebrow { color: #5e5f6e !important; }

/* Section-locked variant cards */
[data-skin="clerk"][data-theme="dark"] .section-locked,
[data-skin="clerk"][data-theme="dark"] .variant-locked {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .section-locked-title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .section-locked-body { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .section-locked-eyebrow,
[data-skin="clerk"][data-theme="dark"] .section-locked .locked-eyebrow { color: #5e5f6e !important; }

/* ── Buttons ──────────────────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .btn-primary {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
[data-skin="clerk"][data-theme="dark"] .btn-primary:hover { background: #f0f0f2 !important; border-color: #f0f0f2 !important; }
[data-skin="clerk"][data-theme="dark"] .btn-primary:disabled { background: rgba(255, 255, 255, 0.12) !important; border-color: transparent !important; color: rgba(255, 255, 255, 0.45) !important; }

[data-skin="clerk"][data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f7f7f8 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .btn-secondary:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f7f7f8 !important; }

[data-skin="clerk"][data-theme="dark"] .btn-ghost { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }

[data-skin="clerk"][data-theme="dark"] .btn-danger { color: #f87171 !important; }
[data-skin="clerk"][data-theme="dark"] .btn-danger:hover { background: rgba(248, 113, 113, 0.10) !important; color: #fca5a5 !important; }

/* ── Inputs ───────────────────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .input,
[data-skin="clerk"][data-theme="dark"] input[type="text"],
[data-skin="clerk"][data-theme="dark"] input[type="number"],
[data-skin="clerk"][data-theme="dark"] input[type="email"],
[data-skin="clerk"][data-theme="dark"] input[type="search"],
[data-skin="clerk"][data-theme="dark"] input[type="password"],
[data-skin="clerk"][data-theme="dark"] input[type="url"],
[data-skin="clerk"][data-theme="dark"] input[type="date"],
[data-skin="clerk"][data-theme="dark"] textarea,
[data-skin="clerk"][data-theme="dark"] select {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f7f7f8 !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] input:hover:not(:focus),
[data-skin="clerk"][data-theme="dark"] textarea:hover:not(:focus),
[data-skin="clerk"][data-theme="dark"] select:hover:not(:focus) { border-color: rgba(255, 255, 255, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] input:focus,
[data-skin="clerk"][data-theme="dark"] textarea:focus,
[data-skin="clerk"][data-theme="dark"] select:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
[data-skin="clerk"][data-theme="dark"] input::placeholder,
[data-skin="clerk"][data-theme="dark"] textarea::placeholder { color: #5e5f6e !important; }

/* Caption editors specifically — the high-frequency surface */
[data-skin="clerk"][data-theme="dark"] textarea.pv-row-textarea,
[data-skin="clerk"][data-theme="dark"] .pv-row textarea,
[data-skin="clerk"][data-theme="dark"] .ws-caption,
[data-skin="clerk"][data-theme="dark"] .ws-caption-textarea,
[data-skin="clerk"][data-theme="dark"] textarea.caption {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f7f7f8 !important;
}

/* ── Chips / tags / pills ─────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .chip,
[data-skin="clerk"][data-theme="dark"] .tag,
[data-skin="clerk"][data-theme="dark"] .pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #d9d9de !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-skin="clerk"][data-theme="dark"] .status-approved,
[data-skin="clerk"][data-theme="dark"] [data-status="approved"] { background: rgba(74, 222, 104, 0.10) !important; color: #4ade68 !important; border-color: rgba(74, 222, 104, 0.32) !important; }
[data-skin="clerk"][data-theme="dark"] .status-pending,
[data-skin="clerk"][data-theme="dark"] [data-status="pending"]  { background: rgba(253, 224, 71, 0.10) !important; color: #fde047 !important; border-color: rgba(253, 224, 71, 0.32) !important; }
[data-skin="clerk"][data-theme="dark"] .status-rejected,
[data-skin="clerk"][data-theme="dark"] [data-status="rejected"],
[data-skin="clerk"][data-theme="dark"] .status-failed { background: rgba(248, 113, 113, 0.10) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.32) !important; }
[data-skin="clerk"][data-theme="dark"] .status-draft { background: rgba(255, 255, 255, 0.04) !important; color: #9394a1 !important; border-color: rgba(255, 255, 255, 0.06) !important; }

/* ── Filter pills ─────────────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .filter > *,
[data-skin="clerk"][data-theme="dark"] .filter button,
[data-skin="clerk"][data-theme="dark"] .filter-pill,
[data-skin="clerk"][data-theme="dark"] .lib-filter,
[data-skin="clerk"][data-theme="dark"] .chip-filter {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .filter > *:hover,
[data-skin="clerk"][data-theme="dark"] .filter button:hover,
[data-skin="clerk"][data-theme="dark"] .filter-pill:hover { color: #f7f7f8 !important; border-color: rgba(255, 255, 255, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] .filter > *.active,
[data-skin="clerk"][data-theme="dark"] .filter button.active,
[data-skin="clerk"][data-theme="dark"] .filter > *[aria-pressed="true"],
[data-skin="clerk"][data-theme="dark"] .filter-pill.active,
[data-skin="clerk"][data-theme="dark"] .chip-filter.active,
[data-skin="clerk"][data-theme="dark"] .lib-filter.active {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
}

/* Platform-format pills (Text/Image/Carousel) */
[data-skin="clerk"][data-theme="dark"] .pv-format-toggle,
[data-skin="clerk"][data-theme="dark"] .platform-tab-pills {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-format-toggle button,
[data-skin="clerk"][data-theme="dark"] .platform-tab-pill { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-format-toggle button.active,
[data-skin="clerk"][data-theme="dark"] .pv-format-toggle button[aria-pressed="true"],
[data-skin="clerk"][data-theme="dark"] .platform-tab-pill.active {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #f7f7f8 !important;
  box-shadow: none !important;
}

/* ── Toast — invert: light capsule on dark page ─────────────── */
[data-skin="clerk"][data-theme="dark"] #toast {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] #toast.success .toast-icon { color: #15802a !important; }
[data-skin="clerk"][data-theme="dark"] #toast.error   .toast-icon { color: #b91c1c !important; }
[data-skin="clerk"][data-theme="dark"] #toast .toast-action {
  background: #202020 !important;
  color: #ffffff !important;
  border-color: #131316 !important;
}
[data-skin="clerk"][data-theme="dark"] #toast .toast-action:hover { background: #000000 !important; color: #ffffff !important; }

/* ── Modals ─────────────────────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.6) !important; }
[data-skin="clerk"][data-theme="dark"] .modal,
[data-skin="clerk"][data-theme="dark"] .modal-card,
[data-skin="clerk"][data-theme="dark"] .dialog-card {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f7f7f8 !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6) !important;
}
[data-skin="clerk"][data-theme="dark"] .modal-title,
[data-skin="clerk"][data-theme="dark"] .modal h1,
[data-skin="clerk"][data-theme="dark"] .modal h2,
[data-skin="clerk"][data-theme="dark"] .dialog-title { color: #f7f7f8 !important; }

/* ── Page heads + headings ──────────────────────────────────── */
[data-skin="clerk"][data-theme="dark"] .page-head h1,
[data-skin="clerk"][data-theme="dark"] .page-head .h1,
[data-skin="clerk"][data-theme="dark"] .h1,
[data-skin="clerk"][data-theme="dark"] .tab-panel .h1,
[data-skin="clerk"][data-theme="dark"] .strategy-h1,
[data-skin="clerk"][data-theme="dark"] .ws-header h1,
[data-skin="clerk"][data-theme="dark"] .ws-header .h1 {
  color: #f7f7f8 !important;
  -webkit-text-fill-color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .page-head .lead,
[data-skin="clerk"][data-theme="dark"] .lead { color: #9394a1 !important; }

/* ── Brand accent, brightened for dark mode ─────────────────────────────
   --brand-accent drives ~175 UI accents (news pills, hearts, sparkles, active
   filters, "verify" text). A dark brand primary (e.g. Design Joy #0913FF) is
   near-invisible on the dark canvas. In dark mode we derive a brighter accent
   from the RAW brand colour (injected as --brand-accent-raw): oklch clamps the
   lightness up while keeping the brand hue (where supported), with a
   mix-with-white fallback. The raw brand colour is untouched, so image
   generation and light mode still use the true colour. Higher specificity than
   the runtime :root.tp-active injection, so this always wins in dark. */
:root.tp-active[data-theme="dark"] {
  --brand-accent: color-mix(in oklab, var(--brand-accent-raw, var(--brand-accent)), #ffffff 42%);
  --brand-accent: oklch(from var(--brand-accent-raw, var(--brand-accent)) clamp(0.68, l, 0.92) c h);
  --brand-accent-hover: color-mix(in oklab, var(--brand-accent-hover-raw, var(--brand-accent-hover)), #ffffff 42%);
  --brand-accent-hover: oklch(from var(--brand-accent-hover-raw, var(--brand-accent-hover)) clamp(0.68, l, 0.92) c h);
}

/* ── Studio (workshop) dark-mode fixes ──────────────────────────────────
   The studio styles live in hybrid.css and several used light-mode colours
   with no dark handling. */
/* Asset title inherited the clerk light heading colour (#131316) -> invisible. */
[data-skin="clerk"][data-theme="dark"] .ws-next-head .ws-next-title {
  color: #f7f7f8 !important;
  -webkit-text-fill-color: #f7f7f8 !important;
}
/* Inactive platform-switcher labels were --text-dim (#5e5f6e), too dim to read. */
[data-skin="clerk"][data-theme="dark"] .workshop-next .platform-pill:not(.active) {
  color: #a8a8ae !important;
}
/* X / Twitter logo used --pill-accent #000000 (invisible on dark). Flip light. */
[data-skin="clerk"][data-theme="dark"] .workshop-next .platform-pill--x {
  --pill-accent: #f7f7f8;
}
/* Design-Specs SIZE tiles: unselected text was --text-dim (#5e5f6e), faded.
   Bring up to match the Type/Quality pills (#9394a1). */
[data-skin="clerk"][data-theme="dark"] .workshop-next .pv-aspect-tile:not(.is-active) {
  color: #9394a1 !important;
}
/* Design-Style LOOK/LAYOUT thumbnails were left light (greyscale card art on a
   #f1f2f5 bg). The art is greyscale, so invert it for a dark-mode preview. */
[data-skin="clerk"][data-theme="dark"] .workshop-next .pv-layout-tile-visual {
  filter: invert(0.9) hue-rotate(180deg);
}
[data-skin="clerk"][data-theme="dark"] .page-head .eyebrow,
[data-skin="clerk"][data-theme="dark"] .strategy-section-label { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .label { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .value { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .help { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .edit { color: var(--brand-accent, var(--accent)) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .edit:hover { color: var(--brand-accent, var(--accent)) !important; background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent) !important; border-color: var(--brand-accent, var(--accent)) !important; }

/* Idea card text */
[data-skin="clerk"][data-theme="dark"] .idea-card .core,
[data-skin="clerk"][data-theme="dark"] .idea-card .title,
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card .meta { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card .expand {
  background: transparent !important;
  color: #f7f7f8 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .expand:hover { background: #ffffff !important; color: #202020 !important; border-color: #ffffff !important; }

/* Library cards */
[data-skin="clerk"][data-theme="dark"] .library-card * { color: #f7f7f8; }
[data-skin="clerk"][data-theme="dark"] .library-card .meta,
[data-skin="clerk"][data-theme="dark"] .library-card .platform,
[data-skin="clerk"][data-theme="dark"] .library-card .draft,
[data-skin="clerk"][data-theme="dark"] .library-card-time,
[data-skin="clerk"][data-theme="dark"] .lib-section-title,
[data-skin="clerk"][data-theme="dark"] .lib-bucket-title,
[data-skin="clerk"][data-theme="dark"] .group-label { color: #5e5f6e !important; }

/* Calendar */
[data-skin="clerk"][data-theme="dark"] .cal-shell,
[data-skin="clerk"][data-theme="dark"] .cal-panel,
[data-skin="clerk"][data-theme="dark"] .cal-grid {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-skin="clerk"][data-theme="dark"] .cal-month-head,
[data-skin="clerk"][data-theme="dark"] .cal-head,
[data-skin="clerk"][data-theme="dark"] .cal-week-head { background: #2a2a29 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-month-title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-dow { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .cal-cell,
[data-skin="clerk"][data-theme="dark"] .cal-day {
  background: #202020 !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .cal-day.other-month { background: #111114 !important; color: rgba(255, 255, 255, 0.16) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-day.other-month .cal-day-num { color: rgba(255, 255, 255, 0.16) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-day:hover:not(.other-month) { background: #202020 !important; } /* rest color — rounded ::after is the hover feedback */
[data-skin="clerk"][data-theme="dark"] .cal-day-num { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-today { background: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-today .cal-day-num { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar { background: #202020 !important; border-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar-head { background: #2a2a29 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar-title { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar-count { background: rgba(255, 255, 255, 0.06) !important; color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar-count.has-pending { background: rgba(253, 224, 71, 0.12) !important; color: #fde047 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-sidebar-empty { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .cal-event { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #f7f7f8 !important; }

/* Setup checklist */
[data-skin="clerk"][data-theme="dark"] .setup-check-icon.is-ok      { background: rgba(74, 222, 104, 0.12) !important; color: #4ade68 !important; }
[data-skin="clerk"][data-theme="dark"] .setup-check-icon.is-missing { background: rgba(248, 113, 113, 0.12) !important; color: #f87171 !important; }
[data-skin="clerk"][data-theme="dark"] .setup-check-group-title { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .setup-check-detail { color: #5e5f6e !important; }

/* CMDK / command palette */
[data-skin="clerk"][data-theme="dark"] .cmdk-shell,
[data-skin="clerk"][data-theme="dark"] .cmdk-trigger { background: #202020 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-input { color: #f7f7f8 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-item { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-item[aria-selected="true"],
[data-skin="clerk"][data-theme="dark"] .cmdk-item:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* Mobile guard */
[data-skin="clerk"][data-theme="dark"] #mobile-guard { background: #1a1a19 !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] #mobile-guard h1,
[data-skin="clerk"][data-theme="dark"] #mobile-guard h2 { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] #mobile-guard p { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] #mobile-guard .card,
[data-skin="clerk"][data-theme="dark"] #mobile-guard > div { background: #202020 !important; border-color: rgba(255, 255, 255, 0.08) !important; }

/* Improve caption link */
[data-skin="clerk"][data-theme="dark"] .polish-caption { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .polish-caption:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.06) !important; }

/* Building blocks expander */
[data-skin="clerk"][data-theme="dark"] #tab-workshop details { background: #202020 !important; border-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] #tab-workshop details summary { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] #tab-workshop details summary:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.04) !important; }
[data-skin="clerk"][data-theme="dark"] #tab-workshop details[open] summary { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }

/* Skeletons */
[data-skin="clerk"][data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%) !important;
  /* Re-assert background-size — the shorthand above resets it to auto, which
     would kill the shine sweep on the dark skin too (mirrors the light .skeleton). */
  background-size: 200% 100% !important;
}

/* Scrollbars */
[data-skin="clerk"][data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-color: #1a1a19; }
[data-skin="clerk"][data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); }

/* Approval card head / platform-row dividers */
[data-skin="clerk"][data-theme="dark"] .card-head { border-bottom-color: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .platform-row,
[data-skin="clerk"][data-theme="dark"] .approval-row { border-top-color: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }

/* Links */
[data-skin="clerk"][data-theme="dark"] a { color: #f7f7f8 !important; border-bottom-color: rgba(255, 255, 255, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] a:hover { border-bottom-color: #ffffff !important; }
[data-skin="clerk"][data-theme="dark"] .back-link { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .back-link:hover { color: #f7f7f8 !important; }

/* Focus ring */
[data-skin="clerk"][data-theme="dark"] :focus-visible { outline-color: #ffffff !important; }

/* ============================================================================
   END CLERK DARK MODE
   ============================================================================ */

/* ============================================================================
   CLERK SKIN — POLISH PASS
   Tightening up popovers, command palette, modal chrome, sub-tabs, and a
   handful of small things that escaped the first pass. Both themes covered
   side-by-side so it stays maintainable.
   ============================================================================ */

/* ── Popovers (brand switcher, user menu, any .popover) ──────── */
[data-skin="clerk"] .popover {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -8px rgba(19, 19, 22, 0.18), 0 4px 8px rgba(19, 19, 22, 0.06) !important;
  padding: 6px !important;
  min-width: 220px;
}
[data-skin="clerk"] .popover .popover-section {
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid #eeeef0;
  margin-bottom: 4px;
}
[data-skin="clerk"] .popover .popover-section-title,
[data-skin="clerk"] .popover-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
}
[data-skin="clerk"] .popover .popover-item,
[data-skin="clerk"] .popover button:not(.popover-close),
[data-skin="clerk"] .popover a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: none !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-align: left;
  cursor: pointer;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] .popover .popover-item:hover,
[data-skin="clerk"] .popover button:not(.popover-close):hover,
[data-skin="clerk"] .popover a:hover { background: #f0f0f2 !important; color: #131316 !important; }
[data-skin="clerk"] .popover .popover-item-shortcut,
[data-skin="clerk"] .popover kbd {
  margin-left: auto;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6e7080 !important;
  background: transparent;
  border: none;
  padding: 0;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .popover .popover-icon { color: #5e5f6e !important; flex-shrink: 0; }

/* Brand switcher header — brand logo + slug at the top */
[data-skin="clerk"] .popover .brand-switcher-current {
  padding: 10px 10px 12px !important;
  border-bottom: 1px solid #eeeef0 !important;
  margin-bottom: 4px;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
[data-skin="clerk"] .popover .brand-switcher-name {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: #131316 !important;
  letter-spacing: -0.005em !important;
}
[data-skin="clerk"] .popover .brand-switcher-slug {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
}

/* Dark mode popovers */
[data-skin="clerk"][data-theme="dark"] .popover {
  background: #2a2a29 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-skin="clerk"][data-theme="dark"] .popover .popover-section { border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-skin="clerk"][data-theme="dark"] .popover .popover-section-title,
[data-skin="clerk"][data-theme="dark"] .popover-eyebrow { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .popover .popover-item,
[data-skin="clerk"][data-theme="dark"] .popover button:not(.popover-close),
[data-skin="clerk"][data-theme="dark"] .popover a { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .popover .popover-item:hover,
[data-skin="clerk"][data-theme="dark"] .popover button:not(.popover-close):hover,
[data-skin="clerk"][data-theme="dark"] .popover a:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; }
[data-skin="clerk"][data-theme="dark"] .popover .popover-item-shortcut,
[data-skin="clerk"][data-theme="dark"] .popover kbd { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .popover .popover-icon { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .popover .brand-switcher-current { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .popover .brand-switcher-name { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .popover .brand-switcher-slug { color: #9394a1 !important; }

/* ── Command palette (CMDK) ───────────────────────────────── */
[data-skin="clerk"] #cmdk-overlay,
[data-skin="clerk"] .cmdk-overlay { background: rgba(19, 19, 22, 0.40) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-skin="clerk"][data-theme="dark"] #cmdk-overlay,
[data-skin="clerk"][data-theme="dark"] .cmdk-overlay { background: rgba(0, 0, 0, 0.65) !important; }

[data-skin="clerk"] .cmdk-shell {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px -12px rgba(19, 19, 22, 0.20), 0 8px 16px rgba(19, 19, 22, 0.08) !important;
  overflow: hidden;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-shell {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-skin="clerk"] .cmdk-input,
[data-skin="clerk"] input.cmdk-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #eeeef0 !important;
  border-radius: 0 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #131316 !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  letter-spacing: -0.005em !important;
}
[data-skin="clerk"] .cmdk-input:focus { box-shadow: none !important; border-color: #eeeef0 !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-input { color: #f7f7f8 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-input:focus { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }

[data-skin="clerk"] .cmdk-list,
[data-skin="clerk"] .cmdk-results { padding: 6px !important; max-height: 360px; overflow-y: auto; }

[data-skin="clerk"] .cmdk-section-title,
[data-skin="clerk"] .cmdk-group-heading {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  padding: 10px 10px 6px !important;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-section-title,
[data-skin="clerk"][data-theme="dark"] .cmdk-group-heading { color: #5e5f6e !important; }

[data-skin="clerk"] .cmdk-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #131316 !important;
  cursor: pointer;
  transition: background var(--t) !important;
}
[data-skin="clerk"] .cmdk-item:hover,
[data-skin="clerk"] .cmdk-item[aria-selected="true"] { background: #f0f0f2 !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-item { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-item:hover,
[data-skin="clerk"][data-theme="dark"] .cmdk-item[aria-selected="true"] { background: rgba(255, 255, 255, 0.06) !important; }

[data-skin="clerk"] .cmdk-item .cmdk-item-kind,
[data-skin="clerk"] .cmdk-item-kind {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  background: #f0f0f2 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  flex-shrink: 0;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-item .cmdk-item-kind,
[data-skin="clerk"][data-theme="dark"] .cmdk-item-kind { color: #5e5f6e !important; background: rgba(255, 255, 255, 0.05) !important; }

[data-skin="clerk"] .cmdk-item .cmdk-item-title,
[data-skin="clerk"] .cmdk-item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500 !important; color: inherit !important; }
[data-skin="clerk"] .cmdk-item .cmdk-item-sub,
[data-skin="clerk"] .cmdk-item-sub {
  color: #5e5f6e !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-item-sub { color: #9394a1 !important; }

/* Keyboard shortcut chip on the right of each cmdk item */
[data-skin="clerk"] .cmdk-item kbd,
[data-skin="clerk"] .cmdk-shortcut {
  margin-left: auto;
  display: inline-flex; align-items: center;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #5e5f6e !important;
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-item kbd,
[data-skin="clerk"][data-theme="dark"] .cmdk-shortcut { color: #9394a1 !important; background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.06) !important; }

/* CMDK footer hint bar (↑↓ navigate, ↵ open, Esc close) */
[data-skin="clerk"] .cmdk-footer,
[data-skin="clerk"] .cmdk-hints {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 14px !important;
  border-top: 1px solid #eeeef0 !important;
  background: #fafafb !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-footer,
[data-skin="clerk"][data-theme="dark"] .cmdk-hints { background: rgba(255, 255, 255, 0.02) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; color: #9394a1 !important; }
[data-skin="clerk"] .cmdk-footer kbd,
[data-skin="clerk"] .cmdk-hints kbd {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .cmdk-footer kbd,
[data-skin="clerk"][data-theme="dark"] .cmdk-hints kbd { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #d9d9de !important; }

/* ── Modal close button (top-right X) ─────────────────────── */
[data-skin="clerk"] .modal .modal-close,
[data-skin="clerk"] .modal-close,
[data-skin="clerk"] .dialog-close,
[data-skin="clerk"] .modal .close,
[data-skin="clerk"] .cal-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #6e7080 !important;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1;
  transition: background var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .modal-close:hover,
[data-skin="clerk"] .dialog-close:hover,
[data-skin="clerk"] .modal .close:hover,
[data-skin="clerk"] .cal-modal-close:hover { background: #f0f0f2 !important; color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .modal-close,
[data-skin="clerk"][data-theme="dark"] .dialog-close,
[data-skin="clerk"][data-theme="dark"] .cal-modal-close { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .modal-close:hover,
[data-skin="clerk"][data-theme="dark"] .dialog-close:hover,
[data-skin="clerk"][data-theme="dark"] .cal-modal-close:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }

/* Modal headers - eyebrow + title pattern */
[data-skin="clerk"] .modal-head,
[data-skin="clerk"] .dialog-head,
[data-skin="clerk"] .cal-modal-head {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid #eeeef0 !important;
}
[data-skin="clerk"][data-theme="dark"] .modal-head,
[data-skin="clerk"][data-theme="dark"] .dialog-head,
[data-skin="clerk"][data-theme="dark"] .cal-modal-head { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"] .modal-body,
[data-skin="clerk"] .dialog-body,
[data-skin="clerk"] .cal-modal-body { padding: 20px 24px !important; }
[data-skin="clerk"] .modal-foot,
[data-skin="clerk"] .dialog-foot,
[data-skin="clerk"] .cal-modal-foot {
  padding: 16px 24px 20px !important;
  border-top: 1px solid #eeeef0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
[data-skin="clerk"][data-theme="dark"] .modal-foot,
[data-skin="clerk"][data-theme="dark"] .dialog-foot,
[data-skin="clerk"][data-theme="dark"] .cal-modal-foot { border-top-color: rgba(255, 255, 255, 0.06) !important; }
[data-skin="clerk"] .cal-modal-card { background: #ffffff !important; border: 1px solid #eeeef0 !important; border-radius: 14px !important; box-shadow: 0 24px 48px -12px rgba(19, 19, 22, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] .cal-modal-card { background: #202020 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6) !important; }
[data-skin="clerk"] .cal-modal-overlay { background: rgba(19, 19, 22, 0.36) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-skin="clerk"][data-theme="dark"] .cal-modal-overlay { background: rgba(0, 0, 0, 0.6) !important; }

/* ── Strategy sub-tabs (Brand / Voice / Visual) ──────────── */
/* Clerk skin — unify tab rows with the canonical pill style: each pill is
   self-contained, 8px radius, light grey inactive + solid black active. */
[data-skin="clerk"] .strategy-subtabs,
[data-skin="clerk"] .subtab-row,
[data-skin="clerk"] .strategy-tab-row {
  display: inline-flex !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px;
}
[data-skin="clerk"] .strategy-subtab,
[data-skin="clerk"] .subtab,
[data-skin="clerk"] .strategy-tab {
  padding: 6px 12px !important;
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 8px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .strategy-subtab:hover,
[data-skin="clerk"] .subtab:hover,
[data-skin="clerk"] .strategy-tab:hover {
  color: #131316 !important;
  border-color: #d9d9de !important;
}
[data-skin="clerk"] .strategy-subtab.is-active,
[data-skin="clerk"] .subtab.active,
[data-skin="clerk"] .strategy-tab.active {
  background: #131316 !important;
  color: #ffffff !important;
  border-color: #131316 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-subtabs,
[data-skin="clerk"][data-theme="dark"] .subtab-row,
[data-skin="clerk"][data-theme="dark"] .strategy-tab-row {
  background: transparent !important;
  border: none !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-subtab,
[data-skin="clerk"][data-theme="dark"] .subtab,
[data-skin="clerk"][data-theme="dark"] .strategy-tab {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-subtab:hover,
[data-skin="clerk"][data-theme="dark"] .subtab:hover,
[data-skin="clerk"][data-theme="dark"] .strategy-tab:hover {
  color: #f7f7f8 !important;
  border-color: rgba(255,255,255,0.20) !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-subtab.is-active,
[data-skin="clerk"][data-theme="dark"] .subtab.active,
[data-skin="clerk"][data-theme="dark"] .strategy-tab.active {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* ── Idea card drag/thumb element ─────────────────────────── */
[data-skin="clerk"] .idea-card .idea-thumb,
[data-skin="clerk"] .idea-card .idea-preview,
[data-skin="clerk"] .idea-card .idea-drag-handle,
[data-skin="clerk"] .idea-card .idea-image,
[data-skin="clerk"] .idea-card .idea-graphic {
  background: #f0f0f2 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-thumb,
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-preview,
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-drag-handle,
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-image,
[data-skin="clerk"][data-theme="dark"] .idea-card .idea-graphic {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* "Top Pick" badge on idea cards */
[data-skin="clerk"] .idea-card .badge-top-pick,
[data-skin="clerk"] .idea-card .top-pick-badge,
[data-skin="clerk"] .top-pick {
  background: #131316 !important;
  color: #ffffff !important;
  border: 1px solid #131316 !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .badge-top-pick,
[data-skin="clerk"][data-theme="dark"] .idea-card .top-pick-badge,
[data-skin="clerk"][data-theme="dark"] .top-pick {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
}

/* ── Manual Lab drop zone (subject image upload) ──────────── */
[data-skin="clerk"] .drop-zone,
[data-skin="clerk"] .file-drop,
[data-skin="clerk"] .subject-drop,
[data-skin="clerk"] [class*="dropzone"] {
  background: #fafafb !important;
  border: 1.5px dashed #d9d9de !important;
  border-radius: 10px !important;
  color: #5e5f6e !important;
  transition: border-color var(--t), background var(--t) !important;
}
[data-skin="clerk"] .drop-zone:hover,
[data-skin="clerk"] .file-drop:hover,
[data-skin="clerk"] .subject-drop:hover,
[data-skin="clerk"] [class*="dropzone"]:hover {
  border-color: #131316 !important;
  background: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] .drop-zone,
[data-skin="clerk"][data-theme="dark"] .file-drop,
[data-skin="clerk"][data-theme="dark"] .subject-drop,
[data-skin="clerk"][data-theme="dark"] [class*="dropzone"] {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .drop-zone:hover,
[data-skin="clerk"][data-theme="dark"] .file-drop:hover,
[data-skin="clerk"][data-theme="dark"] .subject-drop:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f7f7f8 !important;
}

/* "browse" affordance inside drop zones — keep underlined */
[data-skin="clerk"] .drop-zone .browse,
[data-skin="clerk"] [class*="dropzone"] .browse,
[data-skin="clerk"] .file-drop .browse {
  color: #131316 !important;
  text-decoration: underline;
  border-bottom: none !important;
  font-weight: 500;
}
[data-skin="clerk"][data-theme="dark"] .drop-zone .browse,
[data-skin="clerk"][data-theme="dark"] [class*="dropzone"] .browse { color: #f7f7f8 !important; }

/* ── Sign out link (standalone, below the user-menu trigger) ── */
/* The sidebar has a fallback "Sign out" link that sits OUTSIDE the
   user-menu popover. Style it as a quiet ghost item that matches the
   rail rhythm — same padding, hover state, font as the other items. */
[data-skin="clerk"] .signout,
[data-skin="clerk"] a#sign-out,
[data-skin="clerk"] button#sign-out,
[data-skin="clerk"] .appbar a[href*="signout"],
[data-skin="clerk"] .appbar [data-action="signout"] {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 10px !important;
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  border-bottom: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] .signout:hover { background: #f0f0f2 !important; color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .signout { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .signout:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }

/* ── Section labels above filter rows (Pillar / Audience) ── */
[data-skin="clerk"] .filter-group .filter-label,
[data-skin="clerk"] .filter-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin: 0 0 8px 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .filter-label { color: #5e5f6e !important; }
[data-skin="clerk"] .filter-group { margin-bottom: 14px; }

/* "Hide drafted" / "Delete N undrafted" small inline controls */
[data-skin="clerk"] .ideas-controls,
[data-skin="clerk"] .ideas-inline-controls {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"][data-theme="dark"] .ideas-controls,
[data-skin="clerk"][data-theme="dark"] .ideas-inline-controls { color: #9394a1 !important; }

/* "Save idea ♥" button — clean ghost with subtle hover */
[data-skin="clerk"] .save-idea,
[data-skin="clerk"] .idea-save,
[data-skin="clerk"] [class*="save-idea"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .save-idea:hover,
[data-skin="clerk"] .idea-save:hover { background: #f0f0f2 !important; color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .save-idea,
[data-skin="clerk"][data-theme="dark"] .idea-save { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .save-idea:hover,
[data-skin="clerk"][data-theme="dark"] .idea-save:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }

/* ── Top progress bar (when running async work) ──────────── */
[data-skin="clerk"] #progress {
  background: var(--brand-accent, #FF3D00) !important;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--brand-accent, #FF3D00) 90%, transparent),
    0 0 12px color-mix(in srgb, var(--brand-accent, #FF3D00) 60%, transparent),
    0 0 22px color-mix(in srgb, var(--brand-accent, #FF3D00) 35%, transparent) !important;
}
[data-skin="clerk"][data-theme="dark"] #progress {
  background: var(--brand-accent, #FF3D00) !important;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--brand-accent, #FF3D00) 90%, transparent),
    0 0 12px color-mix(in srgb, var(--brand-accent, #FF3D00) 60%, transparent),
    0 0 22px color-mix(in srgb, var(--brand-accent, #FF3D00) 35%, transparent) !important;
}

/* ── Build badge polish ──────────────────────────────────── */
[data-skin="clerk"] body::after {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  padding: 4px 9px !important;
  bottom: 12px !important;
  left: 12px !important;
}

/* ── Splash mark sizing in case it sticks visible ────────── */
[data-skin="clerk"] .splash-mark { width: 88px; }

/* ============================================================================
   END POLISH PASS
   ============================================================================ */

/* ============================================================================
   CLERK SKIN — POLISH PASS 2
   Body-text legibility (grey for scanning), TOP PICK badge fix, semantic
   chip system consolidation (kill blue/lavender, go monochrome), and a
   sweep through library/approval/empty-state body copy.
   ============================================================================ */

/* ── TOP PICK badge — was invisible because the original CSS used
   var(--accent) for bg AND a near-black fg color, and our Clerk accent
   is itself near-black. Use real contrast. ───────────────────────── */
[data-skin="clerk"] .idea-card.is-featured::before {
  background: #131316 !important;
  color: #ffffff !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #131316 !important;
  line-height: 1.3 !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card.is-featured::before {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
}

/* TOP PICK card's own tint — soft grey wash instead of accent-orange */
[data-skin="clerk"] .idea-card.is-featured {
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #fafafb, transparent 35%) !important;
  border-color: #eeeef0 !important;
}
[data-skin="clerk"] .idea-card.is-featured:hover { border-color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card.is-featured {
  background: #202020 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card.is-featured:hover { border-color: rgba(255, 255, 255, 0.24) !important; }
/* Kill the corner radial halo on the featured idea card — it sat behind
   the Save idea button and read as ambient noise. The TOP PICK badge
   (::before) stays; only the ::after gradient is removed. */
html[data-skin="clerk"] .idea-card.is-featured::after,
html[data-skin="clerk"][data-theme="dark"] .idea-card.is-featured::after,
html[data-skin="clerk"][data-theme="light"] .idea-card.is-featured::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ── Idea card body text — grey for scanning ────────────────────── */
[data-skin="clerk"] .idea-card .core,
[data-skin="clerk"] .idea-card .body,
[data-skin="clerk"] .idea-card .description {
  color: #5e5f6e !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .core,
[data-skin="clerk"][data-theme="dark"] .idea-card .body,
[data-skin="clerk"][data-theme="dark"] .idea-card .description { color: #9394a1 !important; }

/* Title is the anchor — keep it strong, dark, headline weight */
[data-skin="clerk"] .idea-card .title {
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin-bottom: 6px;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .title { color: #f7f7f8 !important; }

/* Meta row (chips + timestamp) reads as small uppercase signal */
[data-skin="clerk"] .idea-card .meta { gap: 6px !important; margin-bottom: 10px; }
[data-skin="clerk"] .idea-card .meta-date {
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  margin-left: auto !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .meta-date { color: #5e5f6e !important; }

/* ── Semantic chip system — go monochrome across the board ───── */
/* The original Aurora paints pillar/audience chips and their matching
   filter active state with soft blue/lavender tints. In Clerk we want
   one neutral chip everywhere — kill the semantic colors. */
[data-skin="clerk"] .chip,
[data-skin="clerk"] .chip.pillar,
[data-skin="clerk"] .chip.audience,
[data-skin="clerk"] .chip.format,
[data-skin="clerk"] .chip.accent,
[data-skin="clerk"] .idea-card .meta .chip {
  background: #f0f0f2 !important;
  border: 1px solid #eeeef0 !important;
  color: #42434d !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  text-transform: none !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .chip,
[data-skin="clerk"][data-theme="dark"] .chip.pillar,
[data-skin="clerk"][data-theme="dark"] .chip.audience,
[data-skin="clerk"][data-theme="dark"] .chip.format,
[data-skin="clerk"][data-theme="dark"] .chip.accent,
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #d9d9de !important;
}
/* Ideas filter pills inherit the per-brand body font (interface:~17814) —
   unlike every other clerk chip, which is pinned to Manrope. Pin these too,
   so no brand's font (valid or Brandfetch-junk) restyles the filter rows
   (operator-reported: Lie-Nielsen's pills rendered in the system-ui
   fallback and read heavier than Bladestack's, 2026-07-19). */
[data-skin="clerk"] .ideas-pill {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Filter chips — canonical pill style: 8px radius, light grey inactive +
   solid black active. Matches the rest of the system's toggle pills. */
[data-skin="clerk"] .filter-chip,
[data-skin="clerk"] html .filter-chip {
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .filter-chip:hover { color: #131316 !important; border-color: #d9d9de !important; }
[data-skin="clerk"] .filter-chip.active,
[data-skin="clerk"] .filter-chip[data-axis="pillar"].active,
[data-skin="clerk"] .filter-chip[data-axis="audience"].active,
[data-skin="clerk"] html .filter-chip.active {
  background: #131316 !important;
  color: #ffffff !important;
  border-color: #131316 !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .filter-chip,
[data-skin="clerk"][data-theme="dark"] html .filter-chip {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .filter-chip:hover { color: #f7f7f8 !important; border-color: rgba(255, 255, 255, 0.18) !important; }
[data-skin="clerk"][data-theme="dark"] .filter-chip.active,
[data-skin="clerk"][data-theme="dark"] .filter-chip[data-axis="pillar"].active,
[data-skin="clerk"][data-theme="dark"] .filter-chip[data-axis="audience"].active,
[data-skin="clerk"][data-theme="dark"] html .filter-chip.active {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* ── Body-text legibility sweep across the system ──────────── */
/* Library cards body/preview text */
[data-skin="clerk"] .library-card .library-card-title,
[data-skin="clerk"] .library-card .title { color: #131316 !important; font-family: 'Manrope', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.4 !important; }
[data-skin="clerk"] .library-card .preview,
[data-skin="clerk"] .library-card .body,
[data-skin="clerk"] .library-card .description {
  color: #5e5f6e !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}
[data-skin="clerk"][data-theme="dark"] .library-card .library-card-title,
[data-skin="clerk"][data-theme="dark"] .library-card .title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .library-card .preview,
[data-skin="clerk"][data-theme="dark"] .library-card .body,
[data-skin="clerk"][data-theme="dark"] .library-card .description { color: #9394a1 !important; }
[data-skin="clerk"] .library-card-time,
[data-skin="clerk"] .library-card .time { color: #6e7080 !important; font-size: 11px !important; font-weight: 500 !important; }
/* Compact card (option A): a small left thumbnail + text column, with the
   actions in normal flow at the bottom-right — replaces the full-width hero
   image so several cards fit per screen. !important + clerk scope to win over
   hybrid.css's column/absolute layout. */
[data-skin="clerk"] .library-card { padding: 14px 16px !important; gap: 10px !important; }
[data-skin="clerk"] .library-card.has-thumb { padding-bottom: 14px !important; }
[data-skin="clerk"] .library-card .library-card-head {
  display: flex !important; align-items: center !important; gap: 14px !important;
}
[data-skin="clerk"] .library-card .library-card-main {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 6px !important;
}
[data-skin="clerk"] .library-card .library-card-thumb {
  width: 56px !important; height: auto !important; flex: none !important;
  /* Fixed 56px width; height follows the post's real aspect, set inline per card
     (4:5 / 1:1 / 1.91:1). Default 4:5 (not !important) so the inline value wins;
     used when the aspect is unknown (cross-device thumb, no thumbnail_aspect). */
  aspect-ratio: 4 / 5; max-height: none !important; margin: 0 !important;
  border-radius: 9px !important;
}
[data-skin="clerk"] .library-card .library-card-title {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
[data-skin="clerk"] .library-card .library-card-actions {
  /* margin-top:auto pushes the action row to the card's bottom edge so the
     "Open …" buttons line up across cards regardless of 1- vs 2-line titles
     (cards are equal-height via the .library-grid stretch). */
  position: static !important; margin: auto 0 0 !important;
  display: flex !important; align-items: center !important;
  justify-content: flex-end !important; gap: 8px !important;
}
[data-skin="clerk"][data-theme="dark"] .library-card-time,
[data-skin="clerk"][data-theme="dark"] .library-card .time { color: #5e5f6e !important; }

/* Approval cards — body text + meta */
[data-skin="clerk"] .approval-card .title,
[data-skin="clerk"] .approval-card .post-title,
[data-skin="clerk"] .approval-row .title { color: #131316 !important; font-weight: 600 !important; }
[data-skin="clerk"][data-theme="dark"] .approval-card .title,
[data-skin="clerk"][data-theme="dark"] .approval-card .post-title,
[data-skin="clerk"][data-theme="dark"] .approval-row .title { color: #f7f7f8 !important; }
[data-skin="clerk"] .approval-card .body,
[data-skin="clerk"] .approval-card .caption,
[data-skin="clerk"] .approval-card .preview,
[data-skin="clerk"] .approval-card .description,
[data-skin="clerk"] .approval-row .body { color: #5e5f6e !important; font-size: 13px !important; line-height: 1.55 !important; }
[data-skin="clerk"][data-theme="dark"] .approval-card .body,
[data-skin="clerk"][data-theme="dark"] .approval-card .caption,
[data-skin="clerk"][data-theme="dark"] .approval-card .preview,
[data-skin="clerk"][data-theme="dark"] .approval-card .description { color: #9394a1 !important; }

/* CMDK item subtitle — already greyed but make sure it's consistent */
[data-skin="clerk"] .cmdk-item-sub,
[data-skin="clerk"] .cmdk-item .cmdk-item-sub { color: #6e7080 !important; font-weight: 400 !important; }
[data-skin="clerk"][data-theme="dark"] .cmdk-item-sub { color: #5e5f6e !important; }

/* Calendar event body */
[data-skin="clerk"] .cal-event,
[data-skin="clerk"] .cal-event .title { color: #131316 !important; font-weight: 500 !important; }
[data-skin="clerk"] .cal-event .body,
[data-skin="clerk"] .cal-event .meta { color: #5e5f6e !important; font-size: 11px !important; }
[data-skin="clerk"][data-theme="dark"] .cal-event,
[data-skin="clerk"][data-theme="dark"] .cal-event .title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .cal-event .body,
[data-skin="clerk"][data-theme="dark"] .cal-event .meta { color: #9394a1 !important; }

/* Strategy cells already styled — reinforce body-text grey for the
   "value" view (when not editing) */
[data-skin="clerk"] .strategy-cell .value:not(.muted),
[data-skin="clerk"] .strategy-cell .description,
[data-skin="clerk"] .strategy-cell .help { color: #5e5f6e !important; }
[data-skin="clerk"] .strategy-cell .label { color: #6e7080 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .value:not(.muted),
[data-skin="clerk"][data-theme="dark"] .strategy-cell .description,
[data-skin="clerk"][data-theme="dark"] .strategy-cell .help { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .label { color: #5e5f6e !important; }

/* Modal body copy (form helper text, descriptions) */
[data-skin="clerk"] .modal p,
[data-skin="clerk"] .modal .help,
[data-skin="clerk"] .modal .modal-body p,
[data-skin="clerk"] .dialog p,
[data-skin="clerk"] .bf-help,
[data-skin="clerk"] .field-help,
[data-skin="clerk"] .form-help { color: #5e5f6e !important; font-size: 13px !important; line-height: 1.55 !important; }
[data-skin="clerk"][data-theme="dark"] .modal p,
[data-skin="clerk"][data-theme="dark"] .modal .help,
[data-skin="clerk"][data-theme="dark"] .modal .modal-body p,
[data-skin="clerk"][data-theme="dark"] .dialog p,
[data-skin="clerk"][data-theme="dark"] .bf-help,
[data-skin="clerk"][data-theme="dark"] .field-help,
[data-skin="clerk"][data-theme="dark"] .form-help { color: #9394a1 !important; }

/* Empty state — the body block text should be grey (it was) but
   anchor for safety + dark mode parity */
[data-skin="clerk"] .empty-text,
[data-skin="clerk"] .empty-state-body,
[data-skin="clerk"] .empty .description { color: #5e5f6e !important; font-size: 14px !important; line-height: 1.55 !important; }
[data-skin="clerk"][data-theme="dark"] .empty-text,
[data-skin="clerk"][data-theme="dark"] .empty-state-body,
[data-skin="clerk"][data-theme="dark"] .empty .description { color: #9394a1 !important; }

/* Page-head subtitle / lead text — already styled but reinforce */
[data-skin="clerk"] .page-head .lead,
[data-skin="clerk"] .tab-panel > header p,
[data-skin="clerk"] .panel-head p { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .page-head .lead,
[data-skin="clerk"][data-theme="dark"] .tab-panel > header p,
[data-skin="clerk"][data-theme="dark"] .panel-head p { color: #9394a1 !important; }

/* ── "Delete N undrafted" inline action — should look like a quiet
   destructive ghost link, not a black/heavy button ──────────── */
[data-skin="clerk"] .delete-undrafted,
[data-skin="clerk"] [data-action="delete-undrafted"],
[data-skin="clerk"] button.delete-undrafted {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #6e7080 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background var(--t), color var(--t) !important;
}
[data-skin="clerk"] .delete-undrafted:hover { color: #b91c1c !important; background: #fef2f2 !important; }
[data-skin="clerk"][data-theme="dark"] .delete-undrafted { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .delete-undrafted:hover { color: #f87171 !important; background: rgba(248, 113, 113, 0.10) !important; }

/* "Hide drafted (N)" toggle — quiet inline checkbox-ish link */
[data-skin="clerk"] .hide-drafted,
[data-skin="clerk"] [data-action="toggle-drafted"],
[data-skin="clerk"] label.hide-drafted {
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
[data-skin="clerk"] .hide-drafted:hover { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .hide-drafted { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .hide-drafted:hover { color: #f7f7f8 !important; }

/* Idea card delete button (the small ✕ on hover) */
[data-skin="clerk"] .idea-card .delete-btn {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 6px !important;
  color: #6e7080 !important;
  width: 24px; height: 24px;
  opacity: 0;
  transition: opacity var(--t), color var(--t), border-color var(--t), background var(--t) !important;
}
[data-skin="clerk"] .idea-card:hover .delete-btn { opacity: 1; }
[data-skin="clerk"] .idea-card .delete-btn:hover { color: #b91c1c !important; border-color: #fecaca !important; background: #fef2f2 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card .delete-btn { background: #202020 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card .delete-btn:hover { color: #f87171 !important; background: rgba(248, 113, 113, 0.10) !important; border-color: rgba(248, 113, 113, 0.32) !important; }

/* Selected state — thin 1px outline + tinted background so the card
   reads as clearly chosen. Just the border, no extra box-shadow ring. */
[data-skin="clerk"] .idea-card.selected {
  border-color: var(--brand-accent, #ff3d00) !important;
  background: #fafafb !important;
  box-shadow: 0 0 0 1px var(--brand-accent, #ff3d00) !important;
}
[data-skin="clerk"] .idea-card.selected:hover {
  border-color: var(--brand-accent, #ff3d00) !important;
  box-shadow: 0 0 0 1px var(--brand-accent, #ff3d00), 0 6px 18px -8px rgba(19, 19, 22, 0.18), 0 2px 6px -3px rgba(19, 19, 22, 0.12) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card.selected {
  border-color: var(--brand-accent, #ff3d00) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 0 0 1px var(--brand-accent, #ff3d00) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card.selected:hover {
  border-color: var(--brand-accent, #ff3d00) !important;
  box-shadow: 0 0 0 1px var(--brand-accent, #ff3d00) !important;
}
/* Idea cards outline with the brand primary on HOVER too — overrides the neutral
   grouped hover-border rules earlier (light #d9d9de / dark rgba-white) in both
   themes. Selection (above) uses the same primary, bolder: border + a 1px ring. */
[data-skin="clerk"] .idea-card:hover { border-color: var(--brand-accent, #ff3d00) !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card:hover { border-color: var(--brand-accent, #ff3d00) !important; }
/* Library cards outline with the brand primary on hover + focus (select) too,
   matching the idea cards. Focus adds a 1px ring so a keyboard-selected card
   reads a touch stronger than a hovered one. (Cards navigate on click, so there's
   no persistent selected state — focus is the select indicator.) */
[data-skin="clerk"] .library-card:hover { border-color: var(--brand-accent, #ff3d00) !important; }
[data-skin="clerk"][data-theme="dark"] .library-card:hover { border-color: var(--brand-accent, #ff3d00) !important; }
[data-skin="clerk"] .library-card:focus-visible,
[data-skin="clerk"][data-theme="dark"] .library-card:focus-visible {
  border-color: var(--brand-accent, #ff3d00) !important;
  box-shadow: 0 0 0 1px var(--brand-accent, #ff3d00) !important;
  outline: none !important;
}
/* TOP PICK card retains its featured tint when selected — combine
   states so the wash and outline both render. */
[data-skin="clerk"] .idea-card.is-featured.selected {
  background-image: linear-gradient(180deg, #fafafb, transparent 35%) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card.is-featured.selected {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%) !important;
}

/* Bulk-checkbox is hidden — the 1px dark outline on selected cards
   plus the floating bulk-bar at the bottom of the viewport are enough
   selection signal. The redundant checkbox indicator adds noise. */
[data-skin="clerk"] .idea-card .bulk-checkbox,
[data-skin="clerk"] .idea-card:hover .bulk-checkbox,
[data-skin="clerk"] .idea-card.selected .bulk-checkbox,
[data-skin="clerk"] .has-selection .bulk-checkbox { display: none !important; }

/* "Save idea ♥" affordance — keep the heart neutral by default; on
   hover the button bg goes dark, so the heart needs to flip to white
   (otherwise it's dark-on-dark and invisible). */
[data-skin="clerk"] .idea-card .expand,
[data-skin="clerk"] .idea-card .save-idea,
[data-skin="clerk"] .save-heart {
  color: #5e5f6e !important;
}
[data-skin="clerk"] .idea-card .expand:hover .save-heart,
[data-skin="clerk"] .idea-card .save-idea:hover .save-heart { color: #ffffff !important; }
[data-skin="clerk"] .idea-card .expand:hover .save-heart svg path,
[data-skin="clerk"] .idea-card .save-idea:hover .save-heart svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .expand,
[data-skin="clerk"][data-theme="dark"] .save-heart { color: #9394a1 !important; }
/* The "grey label" design (Save idea + Discard labels grey, heart is the accent)
   used #5e5f6e — invisible on the dark card. In dark mode lift the LABELS to a
   readable grey; the heart keeps the brand accent (more specific rules below).
   Higher specificity (.actions .expand) than the ghost/light rules, so it wins. */
[data-skin="clerk"][data-theme="dark"] .idea-card .actions .expand,
[data-skin="clerk"][data-theme="dark"] .idea-card .actions .discard-btn {
  color: #b8b8be !important;
}
/* Dark mode: button bg goes white on hover, so heart needs to flip to dark. */
[data-skin="clerk"][data-theme="dark"] .idea-card .expand:hover .save-heart,
[data-skin="clerk"][data-theme="dark"] .idea-card .save-idea:hover .save-heart { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .idea-card .expand:hover .save-heart svg path,
[data-skin="clerk"][data-theme="dark"] .idea-card .save-idea:hover .save-heart svg path {
  fill: #131316 !important;
  stroke: #131316 !important;
}

/* Save idea (per-card primary action) → brand-primary OUTLINE at rest; on hover a
   translucent brand fill (8%) appears under the outline (like a selected
   pillar/audience pill, .gen-chip.is-selected, minus the glow). It does NOT fully
   fill. Label is grey (matches Discard); the heart is brand. --brand-accent is the
   skin-agnostic brand colour (the clerk skin repurposes --accent for its own
   monochrome UI). Scoped to .idea-card .actions .expand so the Library card's
   "Open →" (also .expand) and the Discard button are untouched; higher
   specificity than the ghost rules above, so it wins without relying on order. */
[data-skin="clerk"] .idea-card .actions .expand {
  background: transparent !important;
  border-color: #d9d9de !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"] .idea-card .actions .expand:hover {
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important;
  border-color: var(--brand-accent, var(--accent)) !important;
  color: #5e5f6e !important;
}
/* Label is grey (matches the Discard button); heart is the brand primary;
   the outline and hover fill stay brand. */
[data-skin="clerk"] .idea-card .actions .expand .save-heart,
[data-skin="clerk"] .idea-card .actions .expand:hover .save-heart {
  color: var(--brand-accent, var(--accent)) !important;
}
[data-skin="clerk"] .idea-card .actions .expand .save-heart svg path,
[data-skin="clerk"] .idea-card .actions .expand:hover .save-heart svg path {
  fill: var(--brand-accent, var(--accent)) !important;
  stroke: var(--brand-accent, var(--accent)) !important;
}

/* Library card "Open →" button → brand primary, matching the Save idea button
   for a consistent "coloured outline = primary action" language across the app.
   Status is still carried by the card tint + status dot, so the button stays a
   neutral-grey label with a brand outline + translucent brand hover fill. */
[data-skin="clerk"] .library-card .expand {
  color: #5e5f6e !important;
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t) !important;
}
[data-skin="clerk"] .library-card .expand:hover {
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important;
  color: #5e5f6e !important;
  border-color: var(--brand-accent, var(--accent)) !important;
}
[data-skin="clerk"] .library-card .expand:hover span,
[data-skin="clerk"] .library-card .expand:hover * { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .library-card .expand {
  color: #9394a1 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-skin="clerk"][data-theme="dark"] .library-card .expand:hover {
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent) !important;
  color: #9394a1 !important;
  border-color: var(--brand-accent, var(--accent)) !important;
}
[data-skin="clerk"][data-theme="dark"] .library-card .expand:hover span,
[data-skin="clerk"][data-theme="dark"] .library-card .expand:hover * { color: #9394a1 !important; }

/* ============================================================================
   END POLISH PASS 2
   ============================================================================ */

/* ============================================================================
   CLERK SKIN — PICKER POLISH PASS
   Kill the leftover radial-gradient glow behind the headline. Restyle the
   top appbar so Sign out sits cleanly on the right. Unify the typography
   on the brand tiles and the stat panel — every text element to Manrope,
   no more mono / Inter Tight stragglers.
   ============================================================================ */

/* 1. Kill the soft radial glow behind the picker headline area. */
[data-skin="clerk"] .picker-head::before,
[data-skin="clerk"] .picker-head::after,
html[data-skin="clerk"] .picker-head::before,
html[data-skin="clerk"] .picker-head::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Hide just the headline + subtitle. Stat card returns as a horizontal
   full-width strip below the eyebrow (defined separately below). */
[data-skin="clerk"] .picker-title,
[data-skin="clerk"] .picker-lead,
[data-skin="clerk"] #picker .picker-title,
[data-skin="clerk"] #picker .picker-lead {
  display: none !important;
}

/* Picker head: eyebrow stacks on top, stat strip below. */
[data-skin="clerk"] .picker-head {
  display: block !important;
  margin-bottom: 32px !important;
  padding-bottom: 24px !important;
  grid-template-columns: 1fr !important;
}
[data-skin="clerk"] .picker-eyebrow {
  display: inline-block !important;
  margin-bottom: 16px !important;
}

/* Stat card — horizontal end-to-end strip with each pm-row as a flex
   item. Replaces the original vertical stat aside that sat on the right. */
[data-skin="clerk"] .picker-meta,
[data-skin="clerk"] #picker .picker-meta,
[data-skin="clerk"] #picker aside.picker-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-xs) !important;
  min-width: 0 !important;
}
[data-skin="clerk"] .picker-meta .pm-row,
[data-skin="clerk"] .picker-meta > div,
[data-skin="clerk"] .picker-meta > p {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .picker-meta {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Control Center inherits the picker's horizontal-appbar treatment from
   hybrid.css. That rule (`html #picker-shell header.appbar`) lives in
   the external stylesheet and only targets picker-shell, so the CC
   appbar would otherwise default to the workspace's vertical rail.
   Mirror it here for cc-shell. Note: must use `inset: 0 auto auto 0`
   together with explicit `right` and `width` because hybrid.css's
   vertical-rail rule uses `inset: 0 auto 0 0` (which pins right to
   auto and bottom to 0) — that overrides individual top/right/left
   overrides via shorthand cascade unless we use the shorthand here too. */
html #cc-shell header.appbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--nav-h, 60px) !important;
  flex-direction: row !important;
  padding: 0 22px !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html #cc-shell .appbar > .crumb {
  flex-direction: row !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}
/* Push the Control Center main below the fixed appbar so the heading
   isn't tucked behind it. Mirrors `#picker { padding: var(--nav-clear) ... }`
   in hybrid.css. */
#cc {
  padding: var(--nav-clear, 88px) 36px 96px;
  max-width: 1600px;
  margin: 0 auto;
}

/* ── Control Center greeting — personalized header above the cards.
   Time-of-day aware via JS; subtitle is static. Makes the home feel
   like a home instead of a directory. ────────────────────────────── */
[data-skin="clerk"] .cc-greeting-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e7080;
  margin-bottom: 12px;
}
[data-skin="clerk"] .cc-greeting-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #131316;
  margin: 0;
}
[data-skin="clerk"] .cc-greeting-sub {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  color: #5e5f6e;
  margin-top: 8px;
}
[data-skin="clerk"][data-theme="dark"] .cc-greeting-eyebrow { color: #5e5f6e; }
[data-skin="clerk"][data-theme="dark"] .cc-greeting-title { color: #f7f7f8; }
[data-skin="clerk"][data-theme="dark"] .cc-greeting-sub { color: #9394a1; }

/* ── Footer credit — quiet Nueform identity at the bottom of the home.
   Small mark + version string. Owns the surface as the platform without
   competing with the page's content. ─────────────────────────────── */
[data-skin="clerk"] .cc-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid #eeeef0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6e7080;
  max-width: 880px;
}
[data-skin="clerk"] .cc-footer-mark {
  width: 36px;
  height: 14px;
  background-size: 30px auto !important;
  opacity: 0.7;
  flex-shrink: 0;
}
[data-skin="clerk"] .cc-footer-version {
  letter-spacing: 0.02em;
}
[data-skin="clerk"][data-theme="dark"] .cc-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #5e5f6e;
}

/* ── Powered-by credit — subtle Nueform mark that lives in surfaces
   where the client's brand owns the chrome (workspace sidebar bottom)
   or where the sign-in is operator-led (login screen). Stays small,
   monochrome, and lowercase-y so it never competes with the page. ── */
.app-credit,
.login-credit {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.app-credit .ac-mark,
.login-credit .ac-mark {
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Workspace sidebar — credit is absolutely positioned at the very
   bottom so it doesn't compete with util's margin-top:auto layout.
   Light surface gets dark text (default); dark surface (dark mode
   or hybrid skin's glass rail) gets light text via overrides. */
html .appbar > .app-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  padding: 2px 6px;
  justify-content: center;
  color: rgba(19, 19, 22, 0.38);
  transition: color 0.22s var(--t, ease);
  pointer-events: auto;
}
html .appbar > .app-credit:hover {
  color: rgba(19, 19, 22, 0.6);
}
/* Dark mode → flip to light text on the dark appbar. */
html[data-theme="dark"] .appbar > .app-credit {
  color: rgba(255, 255, 255, 0.36);
}
html[data-theme="dark"] .appbar > .app-credit:hover {
  color: rgba(255, 255, 255, 0.6);
}
/* Hybrid skin keeps the dark glass rail in both themes, so force
   light text there regardless of data-theme. */
html[data-skin="hybrid"] .appbar > .app-credit {
  color: rgba(255, 255, 255, 0.36);
}
html[data-skin="hybrid"] .appbar > .app-credit:hover {
  color: rgba(255, 255, 255, 0.6);
}
/* Reserve room at the foot of util so the operator avatar/sign-out
   button doesn't collide with the absolute-positioned credit below. */
html .appbar > .util {
  padding-bottom: 22px;
}

/* Login — sits at the bottom-center of the full-screen sign-in
   shell, well below the card. Centered horizontally with
   transform translate; absolute so the card stays vertically
   centered on its own. Default = dark text for light backgrounds;
   dark mode flips to light. */
#login .login-credit {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: rgba(19, 19, 22, 0.38);
  z-index: 2;
}
html[data-theme="dark"] #login .login-credit {
  color: rgba(255, 255, 255, 0.36);
}

/* ── Control Center system cards — Clerk-style portfolio tiles.
   Each card is a self-contained surface for a Nueform product. Active
   cards are clickable and lift on hover; coming-soon cards are dimmed
   and non-interactive. Grid is responsive — fits 2–3 per row on a wide
   screen, single column on narrow. ──────────────────────────────── */
[data-skin="clerk"] .cc-systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 28px;
  max-width: 880px;
}
[data-skin="clerk"] .cc-system-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #eeeef0;
  border-radius: 14px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 188px;
  overflow: hidden;
}

/* Media slot — top-of-card header artwork. Breaks out of the card's
   padding so the image touches the rounded top edge cleanly. Stays
   invisible-by-default placeholder until a real image lands. */
[data-skin="clerk"] .cc-system-media {
  position: relative;
  width: calc(100% + 48px);
  margin: -24px -24px 6px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #fafafb 0%, #f0f0f2 100%);
  border-bottom: 1px solid #eeeef0;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  flex-shrink: 0;
}
[data-skin="clerk"] .cc-system-media img,
[data-skin="clerk"] .cc-system-media svg,
[data-skin="clerk"] .cc-system-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-skin="clerk"] .cc-system-media[data-empty="true"]::before {
  content: "Image";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c5c6cf;
  font-weight: 600;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-media {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-skin="clerk"][data-theme="dark"] .cc-system-media[data-empty="true"]::before {
  color: rgba(255, 255, 255, 0.18);
}

/* ── System artwork — Clerk-style layered mockup. A focal product
   card sits center-stage; ghost siblings (an Ideas card on the left,
   an Approvals kanban column on the right) crop off the edges at
   ~28% opacity. The whole thing reads as "a peek inside" without
   committing to real screenshots. ─────────────────────────────── */
[data-skin="clerk"] .cc-system-artwork {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fbfbfc 0%, #f3f3f5 100%);
  overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-artwork {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
}

/* Shared ghost-card styling — dimmed, hairline-bordered, hints at app. */
[data-skin="clerk"] .cc-art-ghost {
  position: absolute;
  background: #ffffff;
  border: 1px solid #eeeef0;
  border-radius: 8px;
  padding: 9px 10px;
  opacity: 0.42;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-ghost {
  background: #1c1c1f;
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.55;
}
[data-skin="clerk"] .cc-art-ghost-left {
  left: -34px;
  top: 24px;
  width: 168px;
}
[data-skin="clerk"] .cc-art-ghost-right {
  right: -28px;
  top: 18px;
  width: 124px;
  padding: 8px 9px;
}

[data-skin="clerk"] .cc-art-pill {
  display: inline-flex;
  align-items: center;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5f6e;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f7f7f8;
  border: 1px solid #eeeef0;
  align-self: flex-start;
  line-height: 1.2;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #9394a1;
}
[data-skin="clerk"] .cc-art-pill--green {
  background: #dcfce7;
  border-color: transparent;
  color: #15803d;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-pill--green {
  background: rgba(74, 222, 104, 0.16);
  color: #4ade68;
}

[data-skin="clerk"] .cc-art-bar {
  height: 5px;
  background: #d9d9de;
  border-radius: 2px;
}
[data-skin="clerk"] .cc-art-bar--short { width: 64%; }
[data-skin="clerk"] .cc-art-bar--xshort { width: 38%; }
[data-skin="clerk"][data-theme="dark"] .cc-art-bar {
  background: rgba(255,255,255,0.14);
}

/* Tiny kanban thumb inside the right-side ghost. */
[data-skin="clerk"] .cc-art-thumb {
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(135deg, #eeeef0 0%, #f7f7f8 100%);
  border: 1px solid #eeeef0;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-thumb {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(255,255,255,0.06);
}

/* Focal card — full color, centered, soft shadow so it floats above
   the ghost layer like Clerk's hero composition. */
[data-skin="clerk"] .cc-art-focal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 218px;
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(19, 19, 22, 0.10), 0 4px 10px rgba(19, 19, 22, 0.04);
  padding: 11px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-focal {
  background: #202020;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
}

/* Platform tabs row inside the focal card — tiny rounded squares,
   one active. Matches the studio's platform switcher visually. */
[data-skin="clerk"] .cc-art-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
[data-skin="clerk"] .cc-art-tab {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #f3f3f5;
  color: #6e7080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-skin="clerk"] .cc-art-tab.is-active {
  background: #131316;
  color: #ffffff;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-tab {
  background: rgba(255,255,255,0.06);
  color: #9394a1;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-tab.is-active {
  background: #ffffff;
  color: #131316;
}
[data-skin="clerk"] .cc-art-tab svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* The "post canvas" — the brand mark sits in here, watermarked,
   like an empty post waiting for content. This is the slot where
   the active brand's logo is injected at runtime. */
[data-skin="clerk"] .cc-art-canvas {
  height: 76px;
  background: #f7f7f8;
  border-radius: 6px;
  border: 1px solid #eeeef0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-canvas {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-skin="clerk"] .cc-art-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56%;
  height: 50%;
  color: #131316;
  opacity: 0.85;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-brand-mark {
  color: #f7f7f8;
}
[data-skin="clerk"] .cc-art-brand-mark svg,
[data-skin="clerk"] .cc-art-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-skin="clerk"] .cc-art-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-skin="clerk"] .cc-art-caption .cc-art-bar {
  height: 4px;
  background: #e6e6ea;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-caption .cc-art-bar {
  background: rgba(255,255,255,0.10);
}

[data-skin="clerk"] .cc-art-cta {
  align-self: flex-end;
  font-size: 9px;
  font-weight: 600;
  color: #ffffff;
  background: #131316;
  padding: 4px 9px 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  letter-spacing: 0.01em;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-cta {
  background: #ffffff;
  color: #131316;
}

/* ── Deck System artwork — mirrors Social System composition.
   Focal "slide canvas" with thumb tabs above + caption below;
   left ghost is a section outline, right ghost is a strip of
   slide thumbnails. Brand mark watermarks the slide canvas. ── */
[data-skin="clerk"] .cc-art-slide-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
[data-skin="clerk"] .cc-art-slide-tab {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: #f3f3f5;
  border: 1px solid #eeeef0;
}
[data-skin="clerk"] .cc-art-slide-tab.is-active {
  background: #131316;
  border-color: #131316;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide-tab {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide-tab.is-active {
  background: #ffffff;
  border-color: #ffffff;
}

/* The slide itself — slightly wider canvas, with internal padding
   so the title bar / content bars / brand mark have room to breathe.
   Brand mark sits bottom-right (the "footer logo" placement on a
   real slide). */
[data-skin="clerk"] .cc-art-slide {
  position: relative;
  height: 80px;
  background: #f7f7f8;
  border-radius: 6px;
  border: 1px solid #eeeef0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-skin="clerk"] .cc-art-slide-title {
  height: 6px;
  width: 58%;
  background: #131316;
  border-radius: 2px;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide-title {
  background: #f7f7f8;
}
[data-skin="clerk"] .cc-art-slide-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
[data-skin="clerk"] .cc-art-slide-body .cc-art-bar {
  height: 3px;
  background: #d9d9de;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide-body .cc-art-bar {
  background: rgba(255,255,255,0.14);
}
[data-skin="clerk"] .cc-art-slide-mark {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 32px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #131316;
  opacity: 0.85;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-slide-mark {
  color: #f7f7f8;
}
[data-skin="clerk"] .cc-art-slide-mark svg,
[data-skin="clerk"] .cc-art-slide-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

/* Deck stack — 4 slides fanned diagonally, the front one in full
   color, the rest progressively rotated and dimmed. Reads at a
   glance as "a presentation with many slides", structurally
   different from the Social card's ghost-sandwich composition. */
[data-skin="clerk"] .cc-art-deck-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 208px;
  height: 124px;
}
[data-skin="clerk"] .cc-art-deck-card {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 8px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-origin: 50% 100%;
  box-shadow: 0 6px 14px rgba(19, 19, 22, 0.06);
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-card {
  background: #202020;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

/* Stagger: each layer rotates and offsets a touch more than the
   one in front of it, with opacity decaying toward the back. */
[data-skin="clerk"] .cc-art-deck-card[data-depth="3"] {
  transform: translate(-26px, -18px) rotate(-9deg);
  opacity: 0.3;
  z-index: 1;
}
[data-skin="clerk"] .cc-art-deck-card[data-depth="2"] {
  transform: translate(-16px, -12px) rotate(-6deg);
  opacity: 0.55;
  z-index: 2;
}
[data-skin="clerk"] .cc-art-deck-card[data-depth="1"] {
  transform: translate(-7px, -6px) rotate(-3deg);
  opacity: 0.8;
  z-index: 3;
}
[data-skin="clerk"] .cc-art-deck-card[data-depth="0"] {
  /* front slide — full color, soft shadow lifts above the stack */
  transform: translate(0, 0) rotate(0);
  z-index: 4;
  box-shadow: 0 16px 36px rgba(19, 19, 22, 0.10), 0 4px 8px rgba(19, 19, 22, 0.04);
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-card[data-depth="0"] {
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.3);
}

/* Top row of the front slide: page indicator on the right. */
[data-skin="clerk"] .cc-art-deck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
[data-skin="clerk"] .cc-art-deck-title {
  height: 6px;
  width: 56%;
  background: #131316;
  border-radius: 2px;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-title {
  background: #f7f7f8;
}
[data-skin="clerk"] .cc-art-deck-page {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6e7080;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-page {
  color: #6a6b78;
}

/* Mini bar-chart inside the front slide — four vertical bars of
   ascending height, one brand-tinted to add a single color accent. */
[data-skin="clerk"] .cc-art-deck-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
  margin-top: auto;
}
[data-skin="clerk"] .cc-art-deck-chart-bar {
  width: 10px;
  border-radius: 2px 2px 1px 1px;
  background: #e6e6ea;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-chart-bar {
  background: rgba(255,255,255,0.14);
}
[data-skin="clerk"] .cc-art-deck-chart-bar.is-accent {
  background: #131316;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-chart-bar.is-accent {
  background: #f7f7f8;
}

/* Brand mark in the corner of the front slide (footer logo spot). */
[data-skin="clerk"] .cc-art-deck-mark {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #131316;
  opacity: 0.85;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-mark {
  color: #f7f7f8;
}
[data-skin="clerk"] .cc-art-deck-mark svg,
[data-skin="clerk"] .cc-art-deck-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

/* Body skeleton lines on back-stack slides — thin, gray. */
[data-skin="clerk"] .cc-art-deck-card .cc-art-bar {
  height: 4px;
  background: #e6e6ea;
}
[data-skin="clerk"][data-theme="dark"] .cc-art-deck-card .cc-art-bar {
  background: rgba(255,255,255,0.14);
}
[data-skin="clerk"] .cc-system-card--active:hover {
  border-color: #d9d9de;
  box-shadow: 0 12px 32px rgba(19, 19, 22, 0.06), 0 4px 8px rgba(19, 19, 22, 0.04);
  transform: translateY(-1px);
}
[data-skin="clerk"] .cc-system-card--coming-soon {
  cursor: default;
  background: #fafafb;
  opacity: 0.85;
}
[data-skin="clerk"] .cc-system-card--coming-soon:hover {
  border-color: #eeeef0;
}
[data-skin="clerk"] .cc-system-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f7f7f8;
  color: #5e5f6e;
  margin-bottom: 4px;
}
[data-skin="clerk"] .cc-system-card--active .cc-system-icon {
  background: #131316;
  color: #ffffff;
}
[data-skin="clerk"] .cc-system-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #131316;
  line-height: 1.3;
}
[data-skin="clerk"] .cc-system-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #5e5f6e;
  flex: 1;
}
[data-skin="clerk"] .cc-system-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f7f7f8;
  color: #5e5f6e;
  align-self: flex-start;
}
[data-skin="clerk"] .cc-system-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
[data-skin="clerk"] .cc-system-status--active {
  background: #dcfce7;
  color: #15803d;
}
[data-skin="clerk"] .cc-system-status--coming-soon {
  background: #f0f0f2;
  color: #6e7080;
}

/* Dark mode */
[data-skin="clerk"][data-theme="dark"] .cc-system-card {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-skin="clerk"][data-theme="dark"] .cc-system-card--active:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
[data-skin="clerk"][data-theme="dark"] .cc-system-card--coming-soon {
  background: rgba(255, 255, 255, 0.02);
}
[data-skin="clerk"][data-theme="dark"] .cc-system-icon {
  background: rgba(255, 255, 255, 0.06);
  color: #9394a1;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-card--active .cc-system-icon {
  background: #ffffff;
  color: #131316;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-name { color: #f7f7f8; }
[data-skin="clerk"][data-theme="dark"] .cc-system-desc { color: #9394a1; }
[data-skin="clerk"][data-theme="dark"] .cc-system-status {
  background: rgba(255, 255, 255, 0.06);
  color: #9394a1;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-status--active {
  background: rgba(74, 222, 104, 0.16);
  color: #4ade68;
}
[data-skin="clerk"][data-theme="dark"] .cc-system-status--coming-soon {
  background: rgba(255, 255, 255, 0.04);
  color: #5e5f6e;
}

/* 2. Picker appbar layout — push Sign out (util cluster) to the right.
   Also kill the heavy `0 12px 48px rgba(0,0,0,0.32)` drop shadow that
   hybrid.css applies to `#picker-shell header.appbar` — it bleeds a
   visible dark blob below the bar on the light canvas. The hairline
   border-bottom already does the job of separating the appbar from
   the content below. */
/* Picker crumb is supposed to be a single row (Nueform mark only) —
   not the column-flex with bottom padding + border that hybrid.css
   ships for the workspace rail. Override here so the picker crumb
   reads as a clean horizontal element.
   STRETCH height to match appbar so the inner mark can true-center
   without depending on appbar padding math. */
html[data-skin="clerk"] #picker-shell header.appbar > .crumb ,html[data-skin="clerk"] #cc-shell header.appbar > .crumb {
  flex-direction: row !important;
  align-items: center !important;
  align-self: stretch !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  height: auto !important;
}
/* And the Nueform mark inside the picker crumb needs to be vertically
   centered (hybrid.css pins it to flex-start for the workspace rail). */
html[data-skin="clerk"] #picker-shell .nueform-mark,html[data-skin="clerk"] #cc-shell .nueform-mark,
html[data-skin="clerk"] #picker-shell .appbar .nueform-mark ,html[data-skin="clerk"] #cc-shell .appbar .nueform-mark {
  align-self: center !important;
  width: 56px !important;
  height: 32px !important;
  padding: 0 6px !important;
  background-size: 44px auto !important;
}

/* Same hybrid.css rail-leakage on the .util block (the Sign out cluster).
   In the workspace rail it sits at the bottom of the column-flex sidebar
   with a top-border divider and padding-top. In the picker (a horizontal
   bar), that becomes a stray hairline near Sign out + the button gets
   pushed ~20px below the Nueform mark. Strip all of it. */
html[data-skin="clerk"] #picker-shell .appbar .util ,html[data-skin="clerk"] #cc-shell .appbar .util {
  flex-direction: row !important;
  align-items: center !important;
  align-self: stretch !important;
  gap: 8px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  height: auto !important;
}

/* IMPORTANT: do NOT use body:has(#picker) here — #picker stays in the
   DOM even in the workspace, so that selector would silently apply
   these rules to the workspace sidebar (a column-flex element) and
   break its layout. Only target the appbar inside #picker-shell. */
[data-skin="clerk"] #picker-shell header.appbar,[data-skin="clerk"] #cc-shell header.appbar,
html[data-skin="clerk"] #picker-shell header.appbar ,html[data-skin="clerk"] #cc-shell header.appbar {
  justify-content: space-between !important;
  align-items: center !important;
  /* Fully opaque white — keeps the bar uniformly colored edge-to-edge. */
  background: #ffffff !important;
  border-bottom: 1px solid #eeeef0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Vertical padding zeroed so the flex `align-items: center` can true-
     center the children against the full 60px appbar height. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* z-index ABOVE the MAIN page element. Both originally render at
     z-index: 1, and since MAIN comes later in the DOM, MAIN's gray bg
     was painting OVER the middle of the appbar (where MAIN's 1200px
     centered width overlapped the appbar). 100 is safe and well above
     other stacking contexts. */
  z-index: 100 !important;
}
[data-skin="clerk"][data-theme="dark"] #picker-shell header.appbar,[data-skin="clerk"][data-theme="dark"] #cc-shell header.appbar,
html[data-skin="clerk"][data-theme="dark"] #picker-shell header.appbar ,html[data-skin="clerk"][data-theme="dark"] #cc-shell header.appbar {
  /* Solid opaque — same rationale as the light theme above. */
  background: #1a1a19 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Also kill the bottom shimmer ::after the picker appbar carries — same
   reason, it draws an extra hairline that competes with the border. */
[data-skin="clerk"] #picker-shell header.appbar::after,[data-skin="clerk"] #cc-shell header.appbar::after,
html[data-skin="clerk"] #picker-shell header.appbar::after ,html[data-skin="clerk"] #cc-shell header.appbar::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
[data-skin="clerk"] #picker-shell header.appbar .util ,[data-skin="clerk"] #cc-shell header.appbar .util {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 3. Sign-out button — proper ghost styling for the PICKER's appbar
   only. The workspace's Sign out lives in the user-menu popover and
   has its own styling — don't reach into the workspace appbar with
   loose selectors like `header.appbar button.btn-ghost`. */
[data-skin="clerk"] #logout-picker,
[data-skin="clerk"] #picker-shell header.appbar button.btn-ghost,[data-skin="clerk"] #cc-shell header.appbar button.btn-ghost,
[data-skin="clerk"] #picker-shell header.appbar .signout ,[data-skin="clerk"] #cc-shell header.appbar .signout {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 7px 12px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] #logout-picker:hover,
[data-skin="clerk"] #picker-shell header.appbar button.btn-ghost:hover ,[data-skin="clerk"] #cc-shell header.appbar button.btn-ghost:hover {
  background: #f0f0f2 !important;
  color: #131316 !important;
}

/* 4 + 5. Tile footer typography — unify to Manrope; drop the mono and
   Inter Tight stragglers. */
[data-skin="clerk"] .brand-tile .tile-pack,
[data-skin="clerk"] .brand-tile .tile-cta,
[data-skin="clerk"] .brand-tile .tile-status,
[data-skin="clerk"] .brand-tile .tile-foot * {
  font-family: 'Manrope', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
[data-skin="clerk"] .brand-tile .tile-pack {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5e5f6e !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The little square marker before the pack slug — make it a clean dot */
[data-skin="clerk"] .brand-tile .tile-pack::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #131316;
  display: inline-block;
  flex-shrink: 0;
}
[data-skin="clerk"] .brand-tile .tile-cta {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #131316 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Add brand tile — sub-label / help text in Manrope sentence case */
[data-skin="clerk"] .brand-tile.add-tile .add-icon {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #6e7080 !important;
  line-height: 1 !important;
  margin-bottom: 10px;
}
[data-skin="clerk"] .brand-tile.add-tile .add-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #131316 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin-bottom: 4px;
}
[data-skin="clerk"] .brand-tile.add-tile .add-help {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* "Active" status badge on the tile — keep small but unified font */
[data-skin="clerk"] .brand-tile .tile-status,
[data-skin="clerk"] .brand-tile .tile-head .tile-status,
[data-skin="clerk"] .brand-tile [class*="tile-active"] {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  color: #5e5f6e !important;
}

/* 7. Stat panel (SYSTEM / BRANDS / VERSION) — drop the JetBrains Mono
   on the values. Keep small-caps eyebrow on the keys, but values in
   Manrope so numbers ("01", "2.0") match everything else. */
[data-skin="clerk"] .picker-meta .pm-key {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
}
[data-skin="clerk"] .picker-meta .pm-val {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #131316 !important;
  font-feature-settings: 'tnum' 1;
}
[data-skin="clerk"] .picker-meta .pm-val.pm-online {
  color: #15802a !important;
  font-weight: 600 !important;
}
[data-skin="clerk"] .picker-meta .pm-val.pm-online::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #15802a;
  box-shadow: none;
  animation: none;
}

/* Dark-mode parity for picker polish — scoped to #picker-shell only */
[data-skin="clerk"][data-theme="dark"] #logout-picker,
[data-skin="clerk"][data-theme="dark"] #picker-shell header.appbar button.btn-ghost ,[data-skin="clerk"][data-theme="dark"] #cc-shell header.appbar button.btn-ghost { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] #logout-picker:hover,
[data-skin="clerk"][data-theme="dark"] #picker-shell header.appbar button.btn-ghost:hover ,[data-skin="clerk"][data-theme="dark"] #cc-shell header.appbar button.btn-ghost:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-pack { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-pack::before { background: #ffffff !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile .tile-cta { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile.add-tile .add-icon { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile.add-tile .add-label { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .brand-tile.add-tile .add-help { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .picker-meta .pm-key { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .picker-meta .pm-val { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .picker-meta .pm-val.pm-online { color: #4ade68 !important; }
[data-skin="clerk"][data-theme="dark"] .picker-meta .pm-val.pm-online::before { background: #4ade68 !important; }

/* ============================================================================
   END PICKER POLISH PASS
   ============================================================================ */

/* ── Reserve IMAGE COPY side-panel space on every platform variant.
   Without this, the panels grow when the Image-post variant is active
   (because it adds the IMAGE COPY editor as a side column), then shrink
   back when you switch to Text/Carousel. That pushes the entire row of
   platform panels horizontally on every variant click — the "jump" the
   user experiences. Force the wider width always; narrow variants just
   leave the right column empty.
   LinkedIn / Instagram lock at 815px (380px mockup + 300px side panel +
   gap + padding + breathing room). X locks at 940px because its mockup
   max-width is 560px (vs 380px for LI/IG). */
[data-skin="clerk"] .platform-panel[data-platform="linkedin"],
[data-skin="clerk"] .platform-panel[data-platform="instagram"] {
  flex: 0 0 815px !important;
  width: 815px !important;
  min-width: 815px !important;
  max-width: 815px !important;
}
[data-skin="clerk"] .platform-panel[data-platform="x"] {
  flex: 0 0 940px !important;
  width: 940px !important;
  min-width: 940px !important;
  max-width: 940px !important;
}

/* ── Library card status — chip color + card tint per state. The chip
   carries the named state, the card tint reinforces it ambiently.
   Both share the same hue per status so they read as one signal. ── */
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="studio"] .chip {
  background: #dbeafe !important;
  color: #1e3a8a !important;
  border-color: #bfdbfe !important;
}
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="in-review"] .chip {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="approved"] .chip {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}
/* Approved stays green (passed review); Scheduled gets its own violet so a
   queued-for-the-calendar card reads as distinct at a glance — matching the
   violet Scheduled filter chip. (Posted is excluded from the Library; its
   styles below are dormant.) */
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="scheduled"] .chip {
  background: #ddd6fe !important;
  color: #5b21b6 !important;
  border-color: #c4b5fd !important;
}
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="posted"] .chip {
  background: #86efac !important;
  color: #14532d !important;
  border-color: #4ade80 !important;
}
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="changes-needed"] .chip {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border-color: #fed7aa !important;
}
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="failed"] .chip {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}
/* Saved keeps the default neutral chip (already styled monochrome). */

/* Dark-mode chip colors — translucent overlays so they stay quiet on
   the dark surface but still distinguish state. */
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="studio"] .chip {
  background: rgba(96, 165, 250, 0.16) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.32) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="in-review"] .chip {
  background: rgba(253, 224, 71, 0.14) !important;
  color: #fde047 !important;
  border-color: rgba(253, 224, 71, 0.32) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="approved"] .chip {
  background: rgba(74, 222, 104, 0.14) !important;
  color: #4ade68 !important;
  border-color: rgba(74, 222, 104, 0.32) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="scheduled"] .chip {
  background: rgba(139, 92, 246, 0.22) !important;
  color: #c4b5fd !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="posted"] .chip {
  background: rgba(74, 222, 104, 0.32) !important;
  color: #bbf7d0 !important;
  border-color: rgba(74, 222, 104, 0.6) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="changes-needed"] .chip {
  background: rgba(251, 146, 60, 0.14) !important;
  color: #fdba74 !important;
  border-color: rgba(251, 146, 60, 0.32) !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="failed"] .chip {
  background: rgba(248, 113, 113, 0.14) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
}

/* ── Library card status tints — subtle whole-card background wash per
   status. Saved stays neutral; everything else carries a barely-there
   ambient color so a quick scan tells you where each card is in the
   lifecycle. Driven by a `data-status` attribute set in JS. ──────── */
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="studio"] { background: #eaf0fb !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="in-review"] { background: #fefce8 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="approved"] { background: #f0fdf4 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="scheduled"] { background: #ede9fe !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="posted"] { background: #bbf7d0 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="changes-needed"] { background: #fff7ed !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="failed"] { background: #fef2f2 !important; }
/* Hover keeps the tint but bumps slightly toward white so the lift is
   still felt — without losing the status signal. */
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="studio"]:hover { background: #f0f4fd !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="in-review"]:hover { background: #fffdf4 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="approved"]:hover { background: #f7fef9 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="scheduled"]:hover { background: #f4f2fe !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="posted"]:hover { background: #c8f7d6 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="changes-needed"]:hover { background: #fffbf3 !important; }
[data-skin="clerk"] :is(.library-card, .library-row)[data-status="failed"]:hover { background: #fef8f8 !important; }

/* Dark mode — tints become very faint color overlays on the dark base */
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="studio"] {
  background: linear-gradient(rgba(96, 165, 250, 0.05), rgba(96, 165, 250, 0.05)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="in-review"] {
  background: linear-gradient(rgba(253, 224, 71, 0.05), rgba(253, 224, 71, 0.05)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="approved"] {
  background: linear-gradient(rgba(74, 222, 104, 0.06), rgba(74, 222, 104, 0.06)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="scheduled"] {
  background: linear-gradient(rgba(139, 92, 246, 0.10), rgba(139, 92, 246, 0.10)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="posted"] {
  background: linear-gradient(rgba(74, 222, 104, 0.16), rgba(74, 222, 104, 0.16)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="changes-needed"] {
  background: linear-gradient(rgba(251, 146, 60, 0.05), rgba(251, 146, 60, 0.05)), #202020 !important;
}
[data-skin="clerk"][data-theme="dark"] :is(.library-card, .library-row)[data-status="failed"] {
  background: linear-gradient(rgba(248, 113, 113, 0.06), rgba(248, 113, 113, 0.06)), #202020 !important;
}

/* Also rename "Empty" → "Saved" so the first-state card reads as part
   of the journey (Saved → Studio → In review → Approved). */

/* ── Bulk-action bar (appears when one or more ideas are selected).
   Float it at the bottom-center of the viewport — fixed positioning so
   it doesn't push the ideas grid down when it appears. Matches the
   Linear / Notion / Gmail multi-select pattern. ─────────────────── */
[data-skin="clerk"] .bulk-bar {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 90 !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  margin: 0 !important;
  padding: 10px 12px 10px 18px !important;
  background: #131316 !important;
  color: #f7f7f8 !important;
  border: 1px solid #131316 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -12px rgba(19, 19, 22, 0.32), 0 4px 12px rgba(19, 19, 22, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  animation: bulk-bar-in 180ms cubic-bezier(.4, 0, .2, 1) !important;
}
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
[data-skin="clerk"] .bulk-bar .bulk-count {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #f7f7f8 !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .bulk-bar .bulk-count strong {
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-right: 4px;
}
[data-skin="clerk"] .bulk-bar .bulk-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
/* Inverted button styling for the dark bar */
[data-skin="clerk"] .bulk-bar .btn-secondary,
[data-skin="clerk"] .bulk-bar .btn-primary {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .bulk-bar .btn-secondary:hover,
[data-skin="clerk"] .bulk-bar .btn-primary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}
[data-skin="clerk"] .bulk-bar .btn-ghost {
  background: transparent !important;
  color: #6e7080 !important;
  border: 1px solid transparent !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
}
[data-skin="clerk"] .bulk-bar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f7f7f8 !important;
}
/* Dark mode keeps the same dark bar (already dark on dark — but bump
   shadow so it still reads as elevated above the dark canvas). */
[data-skin="clerk"][data-theme="dark"] .bulk-bar {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
[data-skin="clerk"][data-theme="dark"] .bulk-bar .bulk-count,
[data-skin="clerk"][data-theme="dark"] .bulk-bar .bulk-count strong { color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-secondary,
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-primary {
  background: rgba(19, 19, 22, 0.08) !important;
  color: #131316 !important;
  border-color: rgba(19, 19, 22, 0.12) !important;
}
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-secondary:hover,
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-primary:hover {
  background: rgba(19, 19, 22, 0.14) !important;
  border-color: rgba(19, 19, 22, 0.20) !important;
}
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-ghost { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .bulk-bar .btn-ghost:hover { background: rgba(19, 19, 22, 0.06) !important; color: #202020 !important; }

/* ── Skeleton-phase loader bar (shows above skeletons during idea / asset
   generation). Original hardcoded `background: #111` from the aurora era,
   never overridden — rendered as a near-black bar with invisible text on
   the Clerk light canvas. Override to match the rest of the theme. ──── */
[data-skin="clerk"] .skeleton-phase {
  background: #fafafb !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
}
[data-skin="clerk"] .skeleton-phase::before {
  background: #131316 !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .skeleton-phase .skeleton-phase-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #131316 !important;
}
[data-skin="clerk"] .skeleton-phase .skeleton-phase-text {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5e5f6e !important;
  letter-spacing: 0 !important;
}

/* Dark-mode parity: dark surface, light text, light accent. */
[data-skin="clerk"][data-theme="dark"] .skeleton-phase {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-skin="clerk"][data-theme="dark"] .skeleton-phase::before { background: #ffffff !important; }
[data-skin="clerk"][data-theme="dark"] .skeleton-phase .skeleton-phase-label { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .skeleton-phase .skeleton-phase-text { color: #9394a1 !important; }

/* ── Studio side panel — "Image copy" fields (IMAGE HEADLINE / SUBTITLE
   / WEBSITE). The original sets a near-black inline background via JS
   (rgba(10,10,10,0.82) + blur). Override to a clean light card so it
   matches the theme. Carousel "Slide copy" mirrors this card chrome
   below for visual consistency between the two tabs. ──────────────── */
[data-skin="clerk"] .pv-img-slot-fields-panel,
[data-skin="clerk"] .carousel-slide-list > .list {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-img-slot-fields-panel,
[data-skin="clerk"][data-theme="dark"] .carousel-slide-list > .list {
  background: #202020 !important;
  background-color: #202020 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Carousel slide items — give them the same chrome as the IMAGE COPY
   text fields (white surface, light border, focus halo) so they read
   clearly inside the SLIDE COPY rectangle. Without this they inherit
   dark-theme defaults that vanish on the white card. */
[data-skin="clerk"] .carousel-slide-list > .list .item {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 8px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"] .carousel-slide-list > .list .item:hover {
  border-color: #131316 !important;
}
[data-skin="clerk"][data-theme="dark"] .carousel-slide-list > .list .item {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f7f7f8 !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .carousel-slide-list > .list .item:hover {
  border-color: #ffffff !important;
}

/* In Image post the source-description text is long enough to inflate
   column 1 (it's a long help string). Span it across both columns so it
   doesn't define column 1's intrinsic width — col 1 then sizes to the
   mockup only, and the toolbar / mockup line up vertically. */
[data-skin="clerk"] .tab-image.platform-tab-content.has-side-panel:not([hidden]) .pv-source-description {
  grid-column: 1 / -1 !important;
}
/* Hide the source-description when the active source has no callout text
   (e.g. brand). Otherwise the empty bordered div leaves a visible gap. */
[data-skin="clerk"] .pv-source-description:empty { display: none !important; }

/* ── Previous renders strip — clean light card matching the rest of the
   Clerk skin. Base CSS assumed dark theme (rgba(0,0,0,0.22) tint) which
   reads as near-invisible on the white skin and made the strip easy to
   miss. Width-constrained so multi-thumb wrapping doesn't blow column 1
   past the mockup width. ── */
[data-skin="clerk"] .pv-render-history {
  margin-top: 12px;
  padding: 12px 14px;
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
[data-skin="clerk"][data-theme="dark"] .pv-render-history {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-skin="clerk"] .pv-render-history-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-render-history-label { color: #9394a1 !important; }
[data-skin="clerk"] .pv-render-history-thumb {
  width: 60px !important;
  height: 60px !important;
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 8px !important;
  overflow: hidden;
  cursor: pointer;
  padding: 0 !important;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  box-shadow: var(--shadow-xs);
}
[data-skin="clerk"] .pv-render-history-thumb:hover {
  border-color: #131316 !important;
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(19, 19, 22, 0.10) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-render-history-thumb {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-render-history-thumb:hover {
  border-color: #ffffff !important;
}

/* Size column 1 to the mockup. `minmax(380px, max-content)` keeps the
   column at least 380px wide (the .pv-li / .pv-ig max-width — so the
   mockup never gets squished below its natural rendered size) while
   still allowing the column to grow when the mockup is wider (e.g.
   wider aspects). This also stops the column from collapsing on short
   viewports where the realistic-card CSS caps height via 34vh.
   `justify-content: center` centers the two grid tracks within the
   panel so the mockup + IMAGE COPY pair sits in the middle. */
[data-skin="clerk"] .tab-image.platform-tab-content.has-side-panel:not([hidden]) {
  /* Tools column (300px) on the LEFT, mockup column (sized to content) on
     the RIGHT. Swap these two track widths to flip sides; grid-area pins
     in variants/preview.css already place the right content in each. */
  grid-template-columns: 300px minmax(380px, max-content) !important;
  justify-content: center !important;
}

/* Center the mockup within column 1 so it aligns with the centered
   image-controls toolbar above it. */
[data-skin="clerk"] .tab-image.platform-tab-content.has-side-panel:not([hidden]) .pv-card-host {
  justify-self: center !important;
}

/* Field label inside the panel */
[data-skin="clerk"] .pv-img-slot-fields-panel .pv-card-text-label,
[data-skin="clerk"] .pv-slot-field-wrap .pv-card-text-label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin-bottom: 6px !important;
  display: block;
}
[data-skin="clerk"][data-theme="dark"] .pv-img-slot-fields-panel .pv-card-text-label,
[data-skin="clerk"][data-theme="dark"] .pv-slot-field-wrap .pv-card-text-label { color: #5e5f6e !important; }

/* Wrap spacing */
[data-skin="clerk"] .pv-img-slot-fields-panel .pv-slot-field-wrap { margin-bottom: 12px !important; }
[data-skin="clerk"] .pv-img-slot-fields-panel .pv-slot-field-wrap:last-child { margin-bottom: 0 !important; }

/* Inputs / textareas in the field panel — match the rest of the system */
[data-skin="clerk"] .pv-img-slot-fields-panel .pv-card-text-field,
[data-skin="clerk"] .pv-card-text-field {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 8px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-xs) !important;
  width: 100%;
  box-sizing: border-box;
}
[data-skin="clerk"] .pv-card-text-field:focus {
  border-color: #131316 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(19, 19, 22, 0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-img-slot-fields-panel .pv-card-text-field,
[data-skin="clerk"][data-theme="dark"] .pv-card-text-field {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-card-text-field:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

/* ── Polish-caption output column ─────────────────────────────────
   When Polish Caption is clicked, the variants appear as a 3rd column
   to the RIGHT of the image instructions (not as a row below the
   mockup + image copy). Layout only switches when polish-host is
   actually visible — uses :has() so the default layout is untouched. */
/* Improve caption popover — absolutely positioned inside the platform
   panel so it stays scoped to LinkedIn / Instagram / X and doesn't push
   sibling panels around. Anchored top-right, lifted with a soft shadow. */
[data-skin="clerk"] .platform-panel { position: relative; }

[data-skin="clerk"] .platform-polish-host {
  position: absolute !important;
  top: 178px !important;
  right: 16px !important;
  width: 360px !important;
  max-width: calc(100% - 32px) !important;
  max-height: 520px !important;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: 0 16px 40px rgba(19, 19, 22, 0.12), 0 4px 12px rgba(19, 19, 22, 0.06) !important;
  z-index: 40;
  animation: polishPopFade 140ms ease-out;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
[data-skin="clerk"] .platform-polish-host[hidden] { display: none !important; }

@keyframes polishPopFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Popover header — title, Re-polish, Close */
[data-skin="clerk"] .platform-polish-header {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 14px !important;
  border-bottom: 1px solid #eeeef0 !important;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-header {
  background: #202020;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-skin="clerk"] .platform-polish-title {
  flex: 1;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-title { color: #9394a1 !important; }
[data-skin="clerk"] .platform-polish-repolish {
  background: transparent !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 6px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
[data-skin="clerk"] .platform-polish-repolish:hover { color: #131316 !important; border-color: #d9d9de !important; background: #f7f7f8 !important; }
[data-skin="clerk"] .platform-polish-repolish:disabled { opacity: 0.5; cursor: wait; }
[data-skin="clerk"][data-theme="dark"] .platform-polish-repolish {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-repolish:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.04) !important; }
[data-skin="clerk"] .platform-polish-close {
  width: 24px;
  height: 24px;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: #6e7080 !important;
  font-size: 18px !important;
  line-height: 1;
  padding: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t), background var(--t);
}
[data-skin="clerk"] .platform-polish-close:hover { color: #131316 !important; background: #f0f0f2 !important; }
[data-skin="clerk"][data-theme="dark"] .platform-polish-close:hover { color: #f7f7f8 !important; background: rgba(255, 255, 255, 0.06) !important; }

/* Variants list — the scrollable column under the header */
[data-skin="clerk"] .platform-polish-variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

/* (Earlier I had a rule here that hid the sibling platform panels
   while polish was active on one platform — reverted. All three
   platforms stay visible side-by-side at all times.) */

/* Variant card inside polish-host */
[data-skin="clerk"] .platform-polish-host .variant {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  color: #131316 !important;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t) !important;
}
[data-skin="clerk"] .platform-polish-host .variant:hover {
  border-color: #d9d9de !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant:hover { border-color: rgba(255, 255, 255, 0.18) !important; }

[data-skin="clerk"] .platform-polish-host .variant-num {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin-bottom: 8px !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant-num { color: #5e5f6e !important; }

[data-skin="clerk"] .platform-polish-host .variant > div:not(.variant-num):not(.variant-actions) {
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant > div:not(.variant-num):not(.variant-actions) { color: #f7f7f8 !important; }

[data-skin="clerk"] .platform-polish-host .variant-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
[data-skin="clerk"] .platform-polish-host .variant-apply {
  background: #131316 !important;
  color: #ffffff !important;
  border: 1px solid #131316 !important;
  border-radius: 6px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  cursor: pointer;
  transition: background var(--t) !important;
}
[data-skin="clerk"] .platform-polish-host .variant-apply:hover { background: #000000 !important; }
[data-skin="clerk"] .platform-polish-host .variant-apply.applied { background: #15802a !important; border-color: #15802a !important; }
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant-apply {
  background: #ffffff !important;
  color: #131316 !important;
  border-color: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .variant-apply:hover { background: #f0f0f2 !important; }

/* Polish loading state */
[data-skin="clerk"] .platform-polish-host .loading {
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  text-align: center;
  padding: 24px !important;
}
[data-skin="clerk"] .platform-polish-host .loading .label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
  margin-bottom: 6px !important;
}
[data-skin="clerk"] .platform-polish-host .loading .text { font-size: 13px !important; color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .loading .label { color: #5e5f6e !important; }
[data-skin="clerk"][data-theme="dark"] .platform-polish-host .loading .text { color: #9394a1 !important; }

/* ============================================================================
   CLERK SKIN — PAGE HEAD STRIP-DOWN
   The sidebar already names the page (Ideas, Ideas Library, Studio, etc.).
   Repeating it as an H1 + subtitle inside the page is landing-page thinking,
   not tool thinking. Hide the title/subtitle, collapse the page-head into
   a thin right-aligned action toolbar. Content starts at the top.

   Strategy is the exception — its headline shows the active BRAND, not the
   page identity. Keep that.

   Workshop's per-asset header (.ws-header) is separate from .page-head and
   stays intact — it's per-asset metadata, not page chrome.
   ============================================================================ */

/* Default: hide the headline + subtitle, collapse the page-head into a
   thin right-aligned action toolbar. */
[data-skin="clerk"] .tab-panel .page-head {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* Hairline under the header (app-wide) to separate title + subtitle from content. */
[data-skin="clerk"] .tab-panel .page-head {
  border-bottom: 1px solid var(--border, rgba(120, 120, 120, 0.16)) !important;
  padding-bottom: 20px !important;
}
/* Hide ONLY the headline + subtitle. Keep .lhs visible so any
   navigation aids (back-link, breadcrumb) inside it still show. */
[data-skin="clerk"] .tab-panel .page-head .lhs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 640px !important;
}
/* Subtitles / leads show under the page title on every page. */
[data-skin="clerk"] .tab-panel .page-head .lhs > p,
[data-skin="clerk"] .tab-panel .page-head .lhs > .lead,
[data-skin="clerk"] .tab-panel .page-head .lhs > .subtitle,
[data-skin="clerk"] .tab-panel .page-head .lhs > .description { display: block !important; flex: 0 0 100% !important; margin-top: 5px !important; font-size: 13px !important; line-height: 1.45 !important; }
/* Page titles return app-wide for orientation, but compact (~22px) — not the
   old 36px banner that motivated hiding them. */
[data-skin="clerk"] .tab-panel .page-head .lhs > h1,
[data-skin="clerk"] .tab-panel .page-head .lhs > .h1,
[data-skin="clerk"] .tab-panel .page-head .lhs > h2 {
  display: block !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
/* Sidebar glyph in a faint-accent rounded tile, left of the page title. The
   nav keeps bare glyphs — the header tile is deliberate emphasis; the glyph
   shape still mirrors the sidebar. */
[data-skin="clerk"] .page-head .lhs > .title-icon {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 12%, transparent);
  color: var(--brand-accent, #ff3d00);
}

/* Adjust page-head to space-between so the back-link sits left and
   the action buttons sit right. */
[data-skin="clerk"] .tab-panel .page-head {
  justify-content: space-between !important;
}

[data-skin="clerk"] .tab-panel .page-head .rhs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 0 auto !important;
}

/* If page-head ends up with nothing visible (no title, no back-link, no
   buttons), collapse it so it doesn't leave dead vertical space. Now that
   page titles are shown, a visible title counts as content — so titled
   headers (every standard tab) are never collapsed; only truly empty ones are. */
[data-skin="clerk"] .tab-panel .page-head:empty,
[data-skin="clerk"] .tab-panel .page-head:not(:has(.rhs > *)):not(:has(.lhs > a)):not(:has(.lhs > .back-link)):not(:has(.lhs > button)):not(:has(.lhs > h1)):not(:has(.lhs > .h1)):not(:has(.lhs > h2)) {
  display: none !important;
}

/* Kill the decorative ambient glow on .page-head ::before / ::after that
   the original CSS rendered behind the (now-removed) headline area. */
[data-skin="clerk"] .tab-panel .page-head::before,
[data-skin="clerk"] .tab-panel .page-head::after,
[data-skin="clerk"] html .page-head::before,
[data-skin="clerk"] html .page-head::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Strategy ("Admin Panel") header is ONLY the sub-tab nav now — the pills ARE the
   page header (the same role Ideas/Library/Studio play in the main appbar),
   left-aligned and sitting on a hairline so the row reads as a real header strip.
   There is no page title; the active section's own header (accent icon + name +
   blurb) is the single contextual title below. display:flex is still required to
   defeat the generic "collapse a button-less page-head" rule above (this header
   has no .rhs/.lhs button). */
[data-skin="clerk"] #tab-strategy .page-head {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 24px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-skin="clerk"] #tab-strategy .strategy-subtabs { margin: 0 !important; }

/* Workshop top header (the per-asset card with title + Send to Approval)
   is preserved — it's not .page-head, it's .ws-header. */
[data-skin="clerk"] .ws-header .lhs { display: block !important; }

/* ============================================================================
   END PAGE HEAD STRIP-DOWN
   ============================================================================ */

/* ============================================================================
   END WORKSPACE SHELL OVERRIDES
   ============================================================================ */

/* ============================================================================
   MICRO-INTERACTIONS — hover/press feedback, loading life, entrances, delight.
   Kept in one block so the motion system lives in a single place. Clerk-scoped
   (the shipping skin). A prefers-reduced-motion guard at the very end disables
   every transform/animation here for users who opt out.
   ============================================================================ */

/* 1a. Card hover-lift — cards rise ~2px with a soft shadow, so the whole surface
   reads as clickable. Transition covers transform+shadow+border+background so
   existing border/bg hovers stay smooth. In-flight (.is-generating) cards stay
   flat — a lift would imply "ready". (.kanban-card is the approval queue card.) */
[data-skin="clerk"] .idea-card,
[data-skin="clerk"] .library-card,
[data-skin="clerk"] .asset-card,
[data-skin="clerk"] .campaign-card,
[data-skin="clerk"] .kanban-card {
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t) !important;
}
[data-skin="clerk"] .idea-card:hover,
[data-skin="clerk"] .library-card:hover,
[data-skin="clerk"] .asset-card:hover,
[data-skin="clerk"] .campaign-card:hover,
[data-skin="clerk"] .kanban-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px -8px rgba(19, 19, 22, 0.18), 0 2px 6px -3px rgba(19, 19, 22, 0.12) !important;
}
[data-skin="clerk"] .library-card.is-generating:hover { transform: none !important; box-shadow: none !important; }

/* 1b. Filter-pill press — quick scale-down on click; the active-fill already
   transitions (background) so it eases in rather than snapping. */
[data-skin="clerk"] .ideas-pill { transition: color var(--t), background var(--t), border-color var(--t), transform 0.08s ease; }
[data-skin="clerk"] .ideas-pill:active { transform: scale(0.96); }
[data-skin="clerk"] .campaign-filter { transition: color var(--t), border-color var(--t), transform 0.08s ease; }
[data-skin="clerk"] .campaign-filter:active { transform: scale(0.96); }

/* 1c. Primary-button press — subtle depress on click. */
[data-skin="clerk"] .btn-primary { transition: background var(--t), border-color var(--t), box-shadow var(--t), transform 0.08s ease !important; }
[data-skin="clerk"] .btn-primary:active:not(:disabled) { transform: translateY(1px) scale(0.99) !important; }

/* 2. Skeleton shimmer lives at the .skeleton rule (background-size fix). */
/* 2b. Studio render pulse — the in-strip live thumbnail breathes while its image
   generates (complements the full-screen logo loader's breathe). */
@keyframes thumb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
[data-skin="clerk"] .pv-render-history-thumb.is-loading { animation: thumb-breathe 1.5s ease-in-out infinite; }

/* 3a. Approve confirmation — the Approve button flashes success + pops before the
   panel rebuilds, so the action visibly "lands". Uniquely named (.approve-flash)
   so it never collides with the existing .is-approved status class. */
@keyframes approve-flash-pop { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
[data-skin="clerk"] .approve-flash { background: var(--success, #00C853) !important; border-color: var(--success, #00C853) !important; color: #ffffff !important; animation: approve-flash-pop 0.28s ease; }
/* The Approve buttons are .btn-primary and are disabled at flash time, so the
   base rule (0,2,0) loses to .btn-primary:disabled / :hover (0,3,0; dark 0,4,0).
   Re-assert the success-green at matching/higher specificity so it actually wins
   in both light and dark, whether disabled or hovered. */
[data-skin="clerk"] .btn-primary.approve-flash:hover,
[data-skin="clerk"] .btn-primary.approve-flash:disabled,
[data-skin="clerk"][data-theme="dark"] .btn-primary.approve-flash:disabled {
  background: var(--success, #00C853) !important;
  border-color: var(--success, #00C853) !important;
  color: #ffffff !important;
}

/* 3b. Count pop — a tab badge pops when its number grows (new items land). */
@keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
[data-skin="clerk"] .tab-count.badge-pop { animation: badge-pop 0.32s ease; transform-origin: center; }

/* 4a. Grid entrance — first cold paint staggers cards/rows up; re-renders (filter
   changes) swap instantly (gated in JS via gridFirstPaint). `both` holds them
   hidden until their delayed turn; --i is capped at 9 in JS. */
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-skin="clerk"] .card-in { animation: card-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }

/* 4b. Popover open — filter + brand/user menus scale-fade from their trigger
   instead of appearing instantly. Runs whenever they're shown (display un-hides). */
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
[data-skin="clerk"] #brand-switcher:not([hidden]),
[data-skin="clerk"] #user-menu:not([hidden]) { animation: menu-in 0.15s ease; transform-origin: top left; }

/* 5. Delight — per-icon sidebar hover motions (the gear already spins). Keyed off
   each tab's data-tab so only that glyph reacts. */
/* Approval: the check inside the circle strokes itself in. */
[data-skin="clerk"] .appbar .tab[data-tab="approval"] .tab-icon path:first-of-type { stroke-dasharray: 14; }
[data-skin="clerk"] .appbar .tab[data-tab="approval"]:hover .tab-icon path:first-of-type { animation: check-draw 0.45s ease forwards; }
@keyframes check-draw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
/* Library: the heart gives a soft double-beat. */
[data-skin="clerk"] .appbar .tab[data-tab="library"] .tab-icon { transition: transform var(--t); transform-origin: center; }
[data-skin="clerk"] .appbar .tab[data-tab="library"]:hover .tab-icon { animation: heart-beat 0.7s ease; }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } }
/* Ideas: the bulb pops like an idea appearing — pure motion, no glow. */
[data-skin="clerk"] .appbar .tab[data-tab="ideas"] .tab-icon { transition: transform var(--t); transform-origin: center; }
[data-skin="clerk"] .appbar .tab[data-tab="ideas"]:hover .tab-icon { animation: bulb-pop 0.5s ease; }
@keyframes bulb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 65% { transform: scale(0.94); } 100% { transform: scale(1); } }
/* Campaigns: the flag cloth flutters around its pole (path:last-of-type is the
   cloth; fill-box anchors the skew origin at the pole edge). */
[data-skin="clerk"] .appbar .tab[data-tab="campaigns"] .tab-icon path:last-of-type { transform-box: fill-box; transform-origin: left center; }
[data-skin="clerk"] .appbar .tab[data-tab="campaigns"]:hover .tab-icon path:last-of-type { animation: flag-wave 0.7s ease-in-out; }
@keyframes flag-wave { 0%, 100% { transform: skewX(0) scaleX(1); } 30% { transform: skewX(-10deg) scaleX(0.94); } 65% { transform: skewX(7deg) scaleX(1); } }
/* Studio: the level knob slides as if you're adjusting it. */
[data-skin="clerk"] .appbar .tab[data-tab="workshop"] .tab-icon circle { transform-box: fill-box; transform-origin: center; }
[data-skin="clerk"] .appbar .tab[data-tab="workshop"]:hover .tab-icon circle { animation: knob-slide 0.6s ease-in-out; }
@keyframes knob-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
/* Schedule: the calendar flips its top page (hinged at the top edge). */
[data-skin="clerk"] .appbar .tab[data-tab="calendar"] .tab-icon { transform-origin: top center; }
[data-skin="clerk"] .appbar .tab[data-tab="calendar"]:hover .tab-icon { animation: cal-flip 0.6s ease; }
@keyframes cal-flip { 0% { transform: perspective(60px) rotateX(0); } 45% { transform: perspective(60px) rotateX(-26deg); } 100% { transform: perspective(60px) rotateX(0); } }
/* Quick Render: the bolt jolts with an electric buzz — pure motion, no glow. */
[data-skin="clerk"] .appbar .tab[data-tab="quickrender"] .tab-icon { transition: transform var(--t); transform-origin: center; }
[data-skin="clerk"] .appbar .tab[data-tab="quickrender"]:hover .tab-icon { animation: bolt-jolt 0.45s ease; }
@keyframes bolt-jolt { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(7deg); } 45% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
/* Analytics (coming-soon tab): the bars grow up, staggered, like data loading in. */
[data-skin="clerk"] .appbar .tab[data-tab="analytics"] .tab-icon rect { transform-box: fill-box; transform-origin: bottom; }
[data-skin="clerk"] .appbar .tab[data-tab="analytics"]:hover .tab-icon rect { animation: bar-grow 0.5s ease both; }
[data-skin="clerk"] .appbar .tab[data-tab="analytics"]:hover .tab-icon rect:nth-of-type(2) { animation-delay: 0.08s; }
[data-skin="clerk"] .appbar .tab[data-tab="analytics"]:hover .tab-icon rect:nth-of-type(3) { animation-delay: 0.16s; }
@keyframes bar-grow { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

/* Reduced motion — honour the OS setting: kill the decorative motion above. */
@media (prefers-reduced-motion: reduce) {
  [data-skin="clerk"] .idea-card:hover,
  [data-skin="clerk"] .library-card:hover,
  [data-skin="clerk"] .asset-card:hover,
  [data-skin="clerk"] .campaign-card:hover,
  [data-skin="clerk"] .kanban-card:hover,
  [data-skin="clerk"] .brand-gear:hover svg,
  [data-skin="clerk"] .ideas-pill:active,
  [data-skin="clerk"] .campaign-filter:active,
  [data-skin="clerk"] .btn-primary:active:not(:disabled) { transform: none !important; }
  [data-skin="clerk"] .card-in,
  [data-skin="clerk"] .approve-flash,
  [data-skin="clerk"] .pv-render-history-thumb.is-loading,
  [data-skin="clerk"] #brand-switcher:not([hidden]),
  [data-skin="clerk"] #user-menu:not([hidden]),
  [data-skin="clerk"] .tab-count.badge-pop,
  [data-skin="clerk"] .appbar .tab[data-tab="approval"]:hover .tab-icon path:first-of-type,
  [data-skin="clerk"] .appbar .tab[data-tab="library"]:hover .tab-icon,
  [data-skin="clerk"] .appbar .tab[data-tab="campaigns"]:hover .tab-icon path:last-of-type,
  [data-skin="clerk"] .appbar .tab[data-tab="workshop"]:hover .tab-icon circle,
  [data-skin="clerk"] .appbar .tab[data-tab="calendar"]:hover .tab-icon,
  [data-skin="clerk"] .appbar .tab[data-tab="quickrender"]:hover .tab-icon,
  [data-skin="clerk"] .appbar .tab[data-tab="analytics"]:hover .tab-icon rect,
  [data-skin="clerk"] .appbar .tab[data-tab="ideas"]:hover .tab-icon { animation: none !important; filter: none !important; }
}

/* ============================================================================
   DASHBOARD (client home) — the sidebar's first tab. One brand-tinted hero
   ("Waiting on you" — approvals), Coming up (schedule), and a rail of
   Campaigns in motion / News radar / Recently published. Reuses the reader
   idioms (.news-section-label, .news-meta, .chip, .campaign-progress-*) so
   the clerk skin restyles most of it via existing rules; because every color
   below reads a token the clerk root re-maps (light + dark), only the tinted
   hero needs theme-specific tuning.
   ============================================================================ */
.dash-status { font-size: 15px; color: var(--text-2); margin: 0 0 22px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-card-head .news-section-label { margin-bottom: 4px; }
.dash-link { font-size: 12px; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; transition: color var(--t); }
.dash-link:hover { color: var(--brand-accent, var(--accent)); }
/* Hero — the one tinted surface on the page (same recipe family as .news-why).
   Reads --bg-elev, so the tint tracks white in clerk light and #131316 in dark. */
.dash-wait { background: color-mix(in srgb, var(--brand-accent, #ff3d00) 8%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--brand-accent, #ff3d00) 26%, transparent); border-radius: 12px; padding: 18px 20px; }
.dash-wait .news-section-label { color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316); }
[data-theme="dark"] .dash-wait .news-section-label { color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff); }
.dash-wait-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; cursor: pointer; }
.dash-wait-row + .dash-wait-row { border-top: 1px solid color-mix(in srgb, var(--brand-accent, #ff3d00) 16%, transparent); }
.dash-wait-row:hover .dash-item-title { text-decoration: underline; text-underline-offset: 2px; }
.dash-wait-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.dash-caught { font-size: 16px; font-weight: 600; color: var(--text); padding: 4px 0 2px; }
.dash-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--bg-elev-2); border: 1px solid var(--border); flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.dash-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-thumb.dash-thumb-sm { width: 34px; height: 34px; border-radius: 6px; }
.dash-item-main { flex: 1; min-width: 0; }
.dash-item-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13px; cursor: pointer; }
.dash-row + .dash-row { border-top: 1px solid var(--border); }
.dash-row .chip { flex: none; }
.dash-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.dash-row:hover .dash-row-title { text-decoration: underline; text-underline-offset: 2px; }
.dash-camp { padding: 11px 0 12px; cursor: pointer; }
.dash-camp + .dash-camp { border-top: 1px solid var(--border); }
.dash-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.dash-camp-top .dash-item-title { flex: 1; }
.dash-camp:hover .dash-item-title { text-decoration: underline; text-underline-offset: 2px; }
.dash-empty { font-size: 13px; line-height: 1.55; color: var(--text-muted); padding: 6px 0 2px; }
/* Sidebar icon micro-motion — the house "settles", matching the other tabs'
   authored hover moments. */
[data-skin="clerk"] .appbar .tab[data-tab="dashboard"]:hover .tab-icon { animation: dash-settle 0.45s ease; }
@keyframes dash-settle { 0% { transform: translateY(0); } 35% { transform: translateY(-1.5px); } 70% { transform: translateY(0.5px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-skin="clerk"] .appbar .tab[data-tab="dashboard"]:hover .tab-icon { animation: none !important; }
}