/* ============================================================
   NUEFORM CONTENT OS — operator shell visual layer (v2.1)
   - Flush, end-to-end top app bar with glass backdrop
     (crumb left · pill-shaped tabs middle · search/util right)
   - Ideas tab: single-column full-width list of independent cards
     with subtle accent-tint border on hover
   - Library + Workshop + Strategy adopt the same SaaS card
     visual language so chrome reads consistently across tabs
   - Fonts: Inter Tight (display) + Manrope (body) + JetBrains Mono
   ============================================================ */

:root {
  --bg: #0a0a0c;
  --bg-elev: #111114;
  --bg-elev-2: #18181d;
  --bg-overlay: #22222a;
  --pill: rgba(22,22,28,0.78);
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.13);
  --text: #f4f4f5;
  --text-2: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-dim: #8a8a93;
  --accent: #ff5b1f;
  --accent-hover: #ff7a45;
  --accent-soft: rgba(255,91,31,0.10);
  /* Category tag colour (pillar / audience / filter active) — cool-blue
     so orange stays reserved for primary actions only. */
  --tag: #7fbdec;
  --tag-soft: rgba(127,189,236,0.10);
  --tag-strong: rgba(127,189,236,0.32);
  /* Semantic taxonomy tokens — one hue per axis so chip colour answers
     "what kind of thing is this?" at a glance. Tints kept low so chips
     read as labels, not buttons. */
  --pillar: #7fbdec;
  --pillar-bg: rgba(127,189,236,0.10);
  --pillar-border: rgba(127,189,236,0.32);
  --audience: #c39ce8;
  --audience-bg: rgba(195,156,232,0.10);
  --audience-border: rgba(195,156,232,0.32);
  --format: #6fd6b3;
  --format-bg: rgba(111,214,179,0.10);
  --format-border: rgba(111,214,179,0.32);
  --status-pending: #fbbf24;
  --status-pending-bg: rgba(251,191,36,0.08);
  --status-pending-border: rgba(251,191,36,0.32);
  --status-changes: #ff8a7a;
  --status-changes-bg: rgba(255,138,122,0.08);
  --status-changes-border: rgba(255,138,122,0.32);
  --status-approved: #34d399;
  --status-approved-bg: rgba(52,211,153,0.08);
  --status-approved-border: rgba(52,211,153,0.32);
  --success: #34d399;
  --warn: #fbbf24;
  --danger: #ff5e74;
  --grid-line: rgba(255,255,255,0.025);
  --radius: 10px;
  --radius-2: 14px;
  --t: 0.16s ease;
  --display: 'Inter Tight', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'Manrope', system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.4);
  --shadow-pill: 0 12px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --nav-h: 60px;
  --nav-clear: 92px;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--sans); font-size: 14px; }

/* ===== Login (canonical SaaS) ===== */
.login-card {
  width: 420px; padding: 48px 44px;
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.login-eyebrow { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; }
.login-title { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1.05; }
.input { border-radius: var(--radius); }
.btn-primary { border-radius: var(--radius); font-family: var(--display); font-weight: 600; letter-spacing: 0; text-transform: none; }
.btn-secondary { border-radius: var(--radius); font-family: var(--display); }

/* =============================================================
   TOP NAV BAR — premium glass, three-zone layout.
   Left: Nueform mark + brand pill (with switcher popover).
   Middle: workspace tabs, grouped by spacing not dividers.
   Right: command-palette button + operator avatar (signs out
   and switches brands via menu). All zones share one design
   language so the bar reads as a single, coherent surface.
   ============================================================= */
header.appbar {
  position: fixed; left: 0; right: 0; top: 0;
  transform: none; bottom: auto;
  width: auto; max-width: none;
  padding: 0 22px;
  background: linear-gradient(180deg,
              rgba(10,10,12,0.85) 0%,
              rgba(10,10,12,0.72) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  display: flex; align-items: center; gap: 20px;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 8px 32px rgba(0,0,0,0.18);
  height: var(--nav-h);
}

/* -- LEFT: crumb (mark + brand pill) -- */
.appbar > .crumb {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.appbar .nueform-mark {
  /* The ●●▶ Nueform brand mark — wide horizontal logo. Sized to a
     consistent 18px tall band and given enough breathing room left/right
     so it doesn't crash into the brand pill. */
  width: 60px; height: 36px;
  border: 0; padding: 0 4px;
  background-image: url("nueform-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px auto;
  background-color: transparent;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--t), transform var(--t), opacity var(--t);
}
.appbar .nueform-mark:hover {
  background-color: rgba(255,255,255,0.04);
  opacity: 0.92;
}
.appbar .nueform-mark:active { transform: scale(0.96); }
/* Picker uses the same mark but as a static badge (no click handler) */
#picker-shell .appbar .nueform-mark { cursor: default; }
#picker-shell .appbar .nueform-mark:hover { background-color: transparent; opacity: 1; }

/* Brand pill — the dominant left-side element. Logo + name + chevron.
   Click opens the brand-switcher popover. */
.appbar .brand-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px;
  padding: 4px 12px 4px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
  min-width: 0;
}
.appbar .brand-pill:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.appbar .brand-pill.is-open {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
/* When the Strategy page (Brand settings) is the current view, the pill
   itself reflects the active state — Strategy isn't in the tab row. */
.appbar .brand-pill.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.appbar .brand-pill.is-active .brand-pill-chevron { color: var(--accent); }
.appbar .brand-pill-logo {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--bg-elev-2);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.appbar .brand-pill-logo:empty {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
}
.appbar .brand-pill-logo svg,
.appbar .brand-pill-logo img { max-width: 20px; max-height: 20px; display: block; }
.appbar .brand-pill-name {
  white-space: nowrap; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
}
.appbar .brand-pill-chevron {
  color: var(--text-muted);
  transition: transform var(--t), color var(--t);
  flex-shrink: 0;
}
.appbar .brand-pill:hover .brand-pill-chevron { color: var(--text-2); }
.appbar .brand-pill.is-open .brand-pill-chevron { transform: rotate(180deg); color: var(--text); }

/* Hide the legacy crumb labels (kept in DOM for click handlers) */
.appbar .crumb-back,
.appbar .crumb-label,
.appbar .crumb-brand,
.appbar .crumb-zone-divider,
.appbar .crumb-brand-block { display: none; }

/* -- MIDDLE: tabs row, spacing-grouped -- */
.appbar > .tabs {
  display: flex; flex-direction: row; align-items: center; gap: 2px;
  margin: 0; padding: 0; flex-wrap: nowrap;
}
.appbar > .tabs > .tab-group-gap { width: 18px; flex-shrink: 0; }
.appbar > .tabs > .tab {
  position: relative;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.appbar .tab .tab-icon {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  opacity: 0.68;
  transition: opacity var(--t), color var(--t);
}
.appbar > .tabs > .tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.appbar > .tabs > .tab:hover .tab-icon { opacity: 0.95; }
.appbar > .tabs > .tab.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.appbar > .tabs > .tab.active .tab-icon {
  opacity: 1;
  color: var(--accent);
}
.appbar > .tabs > .tab.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Tab label — wrapped so we can collapse to icon-only at narrow widths */
.appbar .tab-label { white-space: nowrap; }

/* Numeric count badge — accent-tinted, only visible when populated */
.appbar > .tabs > .tab .tab-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  letter-spacing: 0;
  margin-left: 2px;
  line-height: 1;
}
.appbar > .tabs > .tab .tab-count[data-empty="true"] { display: none; }
.appbar > .tabs > .tab.active .tab-count {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* "New since last visit" indicator — small accent dot, sits beside the count */
.appbar > .tabs > .tab .tab-new {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.appbar > .tabs > .tab .tab-new[data-new="true"] { display: inline-block; }

/* Old divider — present in DOM still for picker-shell, hide universally */
.appbar > .tabs > .tab-divider { display: none; }

/* -- RIGHT: util cluster (cmdk + avatar) -- */
.appbar > .util {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Command palette trigger — looks like a search input */
.appbar .cmdk-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px;
  padding: 0 8px 0 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  min-width: 220px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.appbar .cmdk-trigger:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-2);
}
.appbar .cmdk-trigger svg { flex-shrink: 0; color: var(--text-muted); }
.appbar .cmdk-trigger:hover svg { color: var(--text-2); }
.appbar .cmdk-trigger-text { flex: 1; text-align: left; }
.appbar .cmdk-trigger-kbd {
  display: inline-flex; gap: 2px;
  flex-shrink: 0;
  padding: 3px 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.appbar .cmdk-trigger-kbd kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  padding: 0 3px;
  background: transparent;
  border: 0;
  line-height: 1.5;
}

/* Avatar trigger */
.appbar .user-menu-trigger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t);
}
.appbar .user-menu-trigger:hover,
.appbar .user-menu-trigger.is-open {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.appbar .user-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 80%, #000),
              color-mix(in srgb, var(--accent) 40%, #000));
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 6px 14px rgba(0,0,0,0.25);
}

/* Picker-shell uses the same appbar but only shows the Nueform mark. */
#picker-shell .appbar .brand-pill,
#picker-shell .appbar .cmdk-trigger,
#picker-shell .appbar .user-menu-trigger { display: none; }

/* =============================================================
   APPBAR POPOVERS — brand switcher + operator menu.
   ============================================================= */
.popover {
  position: fixed;
  top: calc(var(--nav-h) + 6px);
  left: 70px;
  z-index: 200;
  min-width: 260px; max-width: 320px;
  padding: 8px;
  background: linear-gradient(180deg,
              rgba(20,20,26,0.96) 0%,
              rgba(16,16,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 56px rgba(0,0,0,0.55),
              0 1px 0 rgba(255,255,255,0.05) inset;
  display: flex; flex-direction: column; gap: 2px;
  animation: popover-in 0.14s ease-out;
}
.popover--right { left: auto; right: 22px; }
@keyframes popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.popover-section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 10px 4px;
  letter-spacing: 0;
}
.popover-list { display: flex; flex-direction: column; gap: 1px; }
.popover-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background var(--t);
}
.popover-item:hover { background: rgba(255,255,255,0.06); }
.popover-item svg { color: var(--text-muted); flex-shrink: 0; }
.popover-item:hover svg { color: var(--text); }
.popover-item > span:first-of-type:not(.popover-brand-swatch):not(.popover-item-kbd) { flex: 1; }
.popover-item--ghost { color: var(--text-2); }
.popover-item--danger { color: var(--status-changes); }
.popover-item--danger svg { color: var(--status-changes); }
.popover-item--danger:hover { background: color-mix(in srgb, var(--status-changes) 12%, transparent); }
.popover-item-kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  color: var(--text-muted);
}
.popover-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 4px;
}
.popover-brand-swatch {
  width: 20px; height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
.popover-brand-name { flex: 1; }
.popover-check { color: var(--accent); flex-shrink: 0; }
.popover-empty {
  padding: 12px 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Brand header at the top of the brand-pill popover — shows which
   brand context the menu items below operate on. */
.popover-brand-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.popover-brand-header .popover-brand-swatch {
  width: 24px; height: 24px;
  border-radius: 7px;
}
/* Brand mark, painted by the shared paintBrandMark() (same as the sidebar): a
   recolored SVG mark (or monogram fallback) sits on the popover surface. Ink
   follows the theme so the recolor (white -> currentColor) stays visible. */
.popover-brand-swatch--mark {
  background: transparent;
  box-shadow: none;
  color: #131316;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
[data-theme="dark"] .popover-brand-swatch--mark { color: #f7f7f8; }
.popover-brand-swatch--mark svg,
.popover-brand-swatch--mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.popover-brand-meta {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.popover-brand-header .popover-brand-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.popover-brand-slug {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* External-link glyph on the right of items that open outside the app */
.popover-item-extlink {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
}
.popover-item:hover .popover-item-extlink { color: var(--text-2); }

/* =============================================================
   APPBAR — responsive collapse. At narrower widths, hide the
   cmdk-trigger text + tab labels so the bar stays usable.
   ============================================================= */
@media (max-width: 1240px) {
  .appbar .cmdk-trigger-text { display: none; }
  .appbar .cmdk-trigger { min-width: 0; padding: 0 8px; }
}
@media (max-width: 1080px) {
  .appbar > .tabs > .tab .tab-label { display: none; }
  .appbar > .tabs > .tab { padding: 8px; gap: 0; }
  .appbar > .tabs > .tab .tab-count { margin-left: 4px; }
  .appbar > .tabs > .tab-group-gap { width: 10px; }
}

/* Main content sits below the floating pill */
#picker-shell::before { display: none; }
#picker { padding: var(--nav-clear) 36px 96px; max-width: 1400px; margin: 0 auto; }
#app > main { padding: var(--nav-clear) 36px 96px; max-width: 1400px; margin: 0 auto; }
#app > .bulk-bar { top: calc(var(--nav-h) + 8px); }

/* Approval needs a wider canvas — three kanban columns + the cards inside
   them get cramped at 1600px. Break the panel out of main's max-width and
   span the full viewport, re-applying the same horizontal padding so the
   board doesn't run into the edge. */
#app > main > #tab-approval {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-left: 36px;
  padding-right: 36px;
  max-width: none;
  box-sizing: border-box;
}

/* ===== Page typography ===== */
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--accent); }
.eyebrow::before { width: 14px; height: 2px; background: var(--accent); border-radius: 1px; }
.h1 { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: -0.025em; line-height: 1.06; }
.h1 em { font-style: normal; color: var(--text-2); font-weight: 500; }
.h2 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.page-head { margin-bottom: 32px; }
.page-head .lead { font-size: 15.5px; }

/* ===== Picker — keep brand grid (auto-fill) ===== */
.picker-eyebrow { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; }
.picker-title { font-family: var(--display); font-size: 56px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; }
.picker-meta { border-radius: var(--radius-2); border-color: var(--border-strong); }
.brands-grid { gap: 14px; }
.brand-tile {
  border-radius: var(--radius-2); padding: 26px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  min-height: 240px; box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.brand-tile:hover {
  transform: translateY(-2px); background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--tile-accent) 40%, var(--border-strong));
  box-shadow: var(--shadow-md);
}
.brand-tile .tile-name { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.brand-tile.add-tile { border-radius: var(--radius-2); border-style: dashed; }

/* Hover-revealed archive icon, top-right corner of each brand tile.
   Sits above the tile content so the click doesn't bubble to enterBrand
   (the click handler stops propagation). */
.brand-tile { position: relative; }
.brand-tile .tile-archive {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-muted);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), background var(--t), color var(--t), border-color var(--t);
}
.brand-tile:hover .tile-archive,
.brand-tile .tile-archive:focus-visible { opacity: 1; }
.brand-tile .tile-archive:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.brand-tile.add-tile .tile-archive { display: none; }

/* Archive-brand modal: a tighter version of the create modal. The danger
   variant of btn-primary uses --danger for a clearly destructive action. */
.btn-primary.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-primary.btn-danger:hover { filter: brightness(0.92); }

/* =============================================================
   IDEAS TAB — single column, full-width, V1 card behaviour
   ============================================================= */
.ideas-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.idea-card {
  position: relative;
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  padding: 26px 30px 28px;
  gap: 14px;
  display: flex; flex-direction: column;
  transition: border-color var(--t), background var(--t);
  cursor: default;
}
.idea-card:hover {
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
}
.idea-card.has-asset {
  border-left: 3px solid var(--success);
  padding-left: 27px;
  opacity: 0.3;
  transition: opacity var(--t), border-color var(--t), background var(--t);
}
.idea-card.has-asset:hover { opacity: 1; }
.idea-card .title {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.28;
  /* leave room for the button on the right so long titles don't overrun it */
  padding-right: 160px;
}
.idea-card .core {
  font-size: 15px; color: var(--text-2);
  line-height: 1.6;
  max-width: 960px; /* readable line length even when card is full-width */
}
.idea-card .meta-date { font-family: var(--mono); }

/* Expand link → actual button, anchored bottom-right of the card */
.idea-card .actions {
  position: absolute;
  bottom: 20px; right: 22px;
  margin: 0;
}
.idea-card .expand {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--display); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), gap var(--t);
}
.idea-card .expand:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  gap: 10px;
}

/* =============================================================
   MOBILE GUARD — shown for viewports under 900px wide. Hides the
   real workspace and shows a single advisory card instead.
   ============================================================= */
#mobile-guard {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  align-items: center; justify-content: center;
  padding: 24px;
}
#mobile-guard .mobile-guard-card {
  max-width: 360px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  padding: 32px 28px;
  text-align: center;
  color: var(--text-2);
  display: flex; flex-direction: column; align-items: center;
}
#mobile-guard svg { color: var(--accent); margin-bottom: 18px; }
#mobile-guard .mobile-guard-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
#mobile-guard .mobile-guard-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
}
#mobile-guard .mobile-guard-text {
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 899px) {
  #mobile-guard { display: flex; }
  #splash, #login, #picker-shell, #app, #progress { display: none !important; }
}

/* =============================================================
   APPROVAL KANBAN — per-column tint + empty-state placeholder
   ============================================================= */
.kanban-col { position: relative; }
.kanban-col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border-strong);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.kanban-col--awaiting::before { background: var(--status-pending); }
.kanban-col--changes::before  { background: var(--status-changes); }
.kanban-col--approved::before { background: var(--status-approved); }
.kanban-col--awaiting header span:first-child { color: var(--status-pending); }
.kanban-col--changes header span:first-child  { color: var(--status-changes); }
.kanban-col--approved header span:first-child { color: var(--status-approved); }

.kanban-col-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-col-empty-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.kanban-col-empty-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* =============================================================
   MODERN DRIFT — global. Drops mono from non-numeric labels,
   sentence-cases the eyebrows, and softens chip/badge radii.
   Mono is kept where it's actual data (tab counts, kanban column
   counts, system readouts) so the precision feel survives where
   it earns its keep.
   ============================================================= */
.eyebrow,
.page-head .eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.eyebrow::before { display: none; }

/* Library / Approval / Idea empty-state eyebrows */
.empty-cta .empty-eyebrow,
.kanban-col-empty-eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
}
.empty-cta .empty-eyebrow::before { display: none; }

/* Picker page eyebrow ("Brand portfolio") + leading line */
.picker-eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted);
}
.picker-eyebrow::before { display: none; }

/* Mobile guard advisory */
#mobile-guard .mobile-guard-eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
}

/* Workshop banner eyebrow */
.ws-banner .ws-banner-eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
}

/* NB: the column-header font is set lower down in the "modern drift"
   block (.kanban-col header, ~line 1158) which wins on source order —
   that rule is the real source of truth. The count stays tabular. */
.kanban-col .count {
  /* counts stay tabular for at-a-glance reading */
  font-family: var(--mono);
}

/* Strategy section labels — sentence-case the title; the small
   accent line was set on hybrid's strategy-section-label::before
   earlier — clear it so the icon (rendered as a child) carries
   the visual marker on its own. */
.strategy-section-label {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.strategy-section-label::before { display: none; }

/* Chips + filter chips — softer radius, drop tracking */
.chip {
  border-radius: 10px;
  letter-spacing: 0;
  font-size: 12px;
  padding: 5px 11px;
}
.filter-chip {
  border-radius: 10px;
  letter-spacing: 0;
}

/* Idea card meta date — was JetBrains Mono 10px. Sans, slightly
   bigger reads as a casual "2h ago" stamp instead of a syslog row. */
.idea-card .meta-date {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Kanban card date stamp + library tile tags — same treatment */
.kanban-card .card-date,
.pv-library-tile-tags {
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Card / kanban-card / library cards inherit --radius automatically.
   Idea cards have a hand-set 4px in the base CSS; bump to soft. */
.idea-card { border-radius: 12px; }
.idea-card.is-featured { border-radius: 14px; }
.idea-card.is-featured::before {
  content: "Top pick";
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

/* Approval kanban card platform line — was uppercase tracked.
   Keep the channel colour but ease the typographic stress. */
.kanban-card .platform {
  font-family: var(--sans);
  letter-spacing: 0;
  font-size: 11px;
  text-transform: none;
  font-weight: 600;
}

/* Calendar day numbers + small inline pills are still mono — they
   are tabular figures and we want them legible at a glance.
   No override needed; left here as a note. */

/* =============================================================
   IDEAS — featured card treatment (top pick) breaks the brick of
   uniform cards by tinting the first undrafted idea slightly.
   ============================================================= */
.idea-card.is-featured {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-soft), transparent 35%);
  position: relative;
}
.idea-card.is-featured::before {
  content: "TOP PICK";
  position: absolute;
  top: -1px; left: 16px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0c;
  line-height: 1.4;
}
.idea-card.is-featured:hover { border-color: var(--accent); }

.chip { border-radius: 999px; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 11px; padding: 4px 10px; }
/* Semantic chip variants — one hue per taxonomy axis so a card's meta
   row reads at a glance. Orange stays reserved for primary actions. */
.chip.pillar, .chip.accent {
  background: var(--pillar-bg);
  border-color: var(--pillar-border);
  color: var(--pillar);
}
.chip.audience {
  background: var(--audience-bg);
  border-color: var(--audience-border);
  color: var(--audience);
}
.chip.format {
  background: var(--format-bg);
  border-color: var(--format-border);
  color: var(--format);
}
.chip.status-pending {
  background: var(--status-pending-bg);
  border-color: var(--status-pending-border);
  color: var(--status-pending);
}
.chip.status-changes {
  background: var(--status-changes-bg);
  border-color: var(--status-changes-border);
  color: var(--status-changes);
}
.chip.status-approved, .chip.success {
  background: var(--status-approved-bg);
  border-color: var(--status-approved-border);
  color: var(--status-approved);
}
.filter-chip { border-radius: 999px; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; }
/* Active pillar/audience filter — cool-blue */
.filter-chip.active {
  background: var(--pillar-bg);
  border-color: var(--pillar-border);
  color: var(--pillar);
}
/* When a filter row is filtering audiences, use the audience hue
   for the active chip so the row colour matches what it filters. */
.filter-chip[data-axis="audience"].active {
  background: var(--audience-bg);
  border-color: var(--audience-border);
  color: var(--audience);
}

/* =============================================================
   LIBRARY TAB — denser browse grid for "every drafted asset"
   Cards reuse the .expand pill from .idea-card so the click
   affordance is consistent across the workspace.
   ============================================================= */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
/* Vertical stack of time-bucketed sections (This week / Last week / etc).
   Each section holds its own .library-grid of cards. */
.library-sections { display: flex; flex-direction: column; gap: 44px; }
.library-section { display: flex; flex-direction: column; gap: 12px; }
.library-section-head {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.library-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
.library-section-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.7;
}
/* Collapsible groups (Scheduled & approved, Older saved ideas) — clickable head
   with a chevron; collapsed hides the grid/list. */
.library-section--collapsible .library-section-head { cursor: pointer; user-select: none; }
.library-section--collapsible .library-section-head:hover .library-section-title { color: var(--text); }
.library-section-chevron { font-size: 10px; color: var(--text-muted); line-height: 1; transition: transform 0.15s ease; }
.library-section.is-collapsed .library-section-chevron { transform: rotate(-90deg); }
.library-section.is-collapsed .library-grid,
.library-section.is-collapsed .library-list { display: none; }
.library-section-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-left: auto;
}
.library-loading { padding: 56px 0; text-align: center; font-size: 14px; }

/* Toolbar above the grid: search input on the left, status filter chips
   in the middle, result count on the right. Wraps cleanly on narrow screens. */
.library-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 28px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
}
.library-time-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.library-toolbar .library-search {
  flex: 1 1 240px; min-width: 200px;
  padding: 8px 12px;
  font-size: 13.5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.library-toolbar .library-search:focus-visible { border-color: var(--accent); outline: none; }
.library-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.library-result-count {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px;
}

.library-card {
  position: relative;
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  padding: 22px 24px 64px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  outline: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.library-card:hover,
.library-card:focus-visible {
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  transform: translateY(-1px);
}
.library-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.library-card-time {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}
.library-card-title {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.012em; line-height: 1.3;
  color: var(--text);
}
/* Cached carousel render shown as the card hero, slide-1 only. The card
   absorbs more height when it carries a thumb — this is intentional, the
   visual signal is worth it. */
.library-card-thumb {
  margin-top: 4px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  aspect-ratio: 1 / 1;
  max-height: 220px;
}
.library-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-card.has-thumb { padding-bottom: 70px; }
.library-card-actions {
  position: absolute;
  bottom: 16px; right: 18px;
}
.library-card-actions .expand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--text);
  transition: background var(--t), border-color var(--t), color var(--t), gap var(--t);
}
.library-card:hover .library-card-actions .expand,
.library-card:focus-visible .library-card-actions .expand {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  gap: 10px;
}

/* =============================================================
   Other tabs — keep their original grids (Workshop 12-col,
   Approval kanban, Strategy 2-col) but adopt the same SaaS
   card visual language so the chrome reads consistently.
   ============================================================= */
.panel, .kanban-col, .strategy-cell, .empty-cta {
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
}
.panel { border-radius: var(--radius-2); padding: 22px; }
.panel-title {
  font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.04em; text-transform: none;
  color: var(--accent);
}
.list .item, .li-frame, .x-frame, .variant { border-radius: var(--radius); background: var(--bg-elev-2); }

.kanban-col { border-radius: var(--radius-2); padding: 18px; }
.kanban-col header {
  font-family: var(--display); font-weight: 500; font-size: 16px;
  letter-spacing: -0.01em; text-transform: none; color: var(--text);
}
.kanban-card { border-radius: var(--radius); background: var(--bg-elev-2); }
.kanban-card .card-title { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.kanban-card .card-cta { font-family: var(--display); font-size: 12px; letter-spacing: 0; text-transform: none; }

.strategy-section-label {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-transform: none; color: var(--accent);
}
.strategy-section-label::before { background: var(--accent); height: 2px; border-radius: 1px; }
.strategy-cell { padding: 26px; }
.strategy-cell .label {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-transform: none;
}

.modal-card, .cmdk-card, .cheats-card, #toast {
  border-radius: var(--radius-2);
  background: var(--bg-elev);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.modal-card h2 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }

.empty-cta { border-radius: var(--radius-2); padding: 56px 32px; }
.empty-cta .empty-title { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.skeleton-phase { border-radius: var(--radius); }
.inline-editor textarea, .inline-editor input[type="text"], .input, .strategy-cell textarea.edit-textarea, .select { border-radius: var(--radius); }

/* Toast lifts above any bottom-of-screen content */
#toast { bottom: 28px; }

/* =============================================================
   v2.3 WORKSHOP — Building Blocks + Platform Posts sections
   ============================================================= */

/* Section divider between Building Blocks and Platform Posts */
.ws-section-header {
  grid-column: span 12;
  margin: 28px 0 8px;
  padding-bottom: 10px;
}
.ws-section-title {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.012em;
  color: var(--text);
}
.ws-section-subtitle {
  margin-top: 6px;
  font-size: 13px; color: var(--text-2);
  line-height: 1.55;
  max-width: 1000px;
}
/* Workshop builds two grids; the section headers sit above each grid. They
   need to break out of the 12-col flow when placed between grids. */
#workshop-content > .ws-section-header { grid-column: auto; }

/* ============================================================
   Section-locked card — shown in a platform sub-tab before the
   operator clicks Activate to generate that variant's content.
   ============================================================ */
.section-locked {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 48px 28px;
  border: 1px dashed var(--aur-edge-strong, rgba(255,255,255,0.14));
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.02) 0%,
      transparent 100%),
    rgba(20,20,26,0.32);
  min-height: 240px;
}
.section-locked-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.section-locked-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.section-locked-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto 6px;
}
.section-locked-btn {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-locked-btn:disabled { opacity: 0.65; cursor: wait; }

/* Platform panel container */
.platform-panel { padding: 22px 24px; }
.platform-panel-head {
  align-items: center;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 14px;
  margin-bottom: 18px;
  gap: 24px;
}
.platform-panel-title {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
}

/* Tab bar inside platform panel */
.platform-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-left: auto;
}
.platform-tab-button {
  padding: 6px 12px;
  border-radius: 8px;
  background: #f7f7f8;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.platform-tab-button:hover { color: var(--text); border-color: var(--text-muted); }
.platform-tab-button.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

/* Tab content area — keeps inactive tabs in DOM (preserves textarea state) */
.platform-tab-body { display: block; }
.platform-tab-content { display: block; }
.platform-tab-content[hidden] { display: none; }

/* Tab variants share a vertical-stack layout */
.tab-text, .tab-image, .tab-carousel {
  display: flex; flex-direction: column; gap: 14px;
}
.tab-actions {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
}

/* Single-card visual area */
.single-card-area {
  display: flex; flex-direction: column; gap: 12px;
}
.single-card-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.single-card-hint {
  flex: 1 1 100%;
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 4px;
}
.single-card-visual {
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* aspect-ratio set inline by buildSingleCardArea per platform/aspect.
     Defaults to 1:1 here for the brief moment before the JS runs. */
  aspect-ratio: 1 / 1;
  /* Keep the on-screen card comfortable across aspects:
     - max-width caps 1:1 / landscape shapes to a sane width
     - max-height stops 4:5 portrait (1080×1350) from overflowing on
       laptop viewports — modern browsers shrink width to maintain ratio. */
  max-width: 560px;
  max-height: 62vh;
}
/* Aspect-select sits inline with the Generate/Download buttons in the toolbar. */
.aspect-select { font-family: var(--mono); }
.single-card-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.single-card-visual.empty {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
}
.single-card-empty {
  font-size: 13px; color: var(--text-muted);
  text-align: center; padding: 24px;
  max-width: 360px;
}

/* Carousel area inside a tab */
.carousel-area {
  display: flex; flex-direction: column; gap: 12px;
}
.carousel-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Caption editor (image + carousel tabs) */
.caption-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--bg-elev-2);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.caption-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.caption-editor-label {
  font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.caption-editor-actions { display: inline-flex; gap: 8px; align-items: center; }
.caption-editor-text {
  font-size: 14px; line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.caption-editor-text.muted { color: var(--text-muted); font-style: italic; }

/* =============================================================
   ADD-BRAND MODAL FORM
   Two-up rows on wide modal, color picker swatches paired with
   hex text inputs, callout block at the bottom for next-step copy.
   ============================================================= */
.brand-form { display: flex; flex-direction: column; gap: 22px; }
.bf-section { display: flex; flex-direction: column; gap: 12px; }
.bf-section-label {
  font-family: var(--display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.bf-section-label::before {
  content: ""; width: 14px; height: 2px; background: var(--accent); border-radius: 1px;
}
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bf-row > .bf-field-color { min-width: 0; }
.bf-row:has(> .bf-field-color:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.bf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-field-narrow { max-width: 320px; }
.bf-label {
  font-family: var(--display); font-weight: 500; font-size: 12.5px;
  color: var(--text);
}
.bf-label em {
  font-style: normal;
  margin-left: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.bf-help { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.bf-help.bf-pack-error { color: var(--danger); }
.bf-help code {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px;
}
.brand-form .input { padding: 10px 12px; font-size: 13.5px; background: var(--bg-elev-2); border: 1px solid var(--border-strong); }
.brand-form .input:focus-visible { border-color: var(--accent); outline: none; }
.brand-form textarea.input { font-family: var(--sans); resize: vertical; min-height: 64px; line-height: 1.5; }

.bf-color-row { display: flex; align-items: stretch; gap: 0; }
.bf-swatch {
  flex: 0 0 36px; width: 36px; height: 36px;
  padding: 0; border: 1px solid var(--border-strong); border-right: 0;
  background: transparent; cursor: pointer;
  border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius);
}
.bf-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.bf-swatch::-webkit-color-swatch { border-radius: 3px; border: 0; }
.bf-color-text {
  flex: 1; min-width: 0;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  font-family: var(--mono); font-size: 12.5px;
}

.bf-callout {
  background: rgba(255,91,31,0.06);
  border: 1px solid rgba(255,91,31,0.24);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.bf-callout strong { color: var(--text); font-family: var(--display); }
.bf-progress {
  font-size: 12.5px;
  font-family: var(--display);
  color: var(--text-2);
}

@media (max-width: 720px) {
  .bf-row, .bf-row:has(> .bf-field-color:nth-child(3)) { grid-template-columns: 1fr; }
}


/* ============================================================
   AURORA-RAIL DESIGN — folded in from variant-aurora-rail.css.
   Was a [data-variant="aurora-rail"] overlay; now the default.
   ============================================================ */

/* ============================================================
   VARIANT — AURORA RAIL
   Aurora's atmospheric premium treatment + Sidebar's vertical
   rail navigation. The workspace feels like a tool (left rail
   anchors you, brand context is always on screen) while every
   surface keeps Aurora's glow, motion, and ambient color washes.

   Self-contained: doesn't depend on variant-aurora.css or
   variant-sidebar.css being loaded. Every rule is scoped to
    so the other variants stay
   completely untouched.

   Loaded on top of hybrid.css when ?variant=aurora-rail is set.
   ============================================================ */

:root {
  --aur-glass:         rgba(20,20,26,0.62);
  --aur-glass-strong:  rgba(20,20,26,0.78);
  --aur-edge:          rgba(255,255,255,0.08);
  --aur-edge-strong:   rgba(255,255,255,0.14);
  --aur-glow-accent:   color-mix(in srgb, var(--accent) 50%, transparent);
  --aur-glow-pillar:   color-mix(in srgb, var(--pillar) 50%, transparent);
  --aur-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --aur-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);

  --rail-w:            216px;
  --rail-pad:          12px;
}

/* ============================================================
   AMBIENT BACKGROUND — same drifting gradient mesh as Aurora
   ============================================================ */
html {
  background: #06070A;
}
html body {
  background:
    radial-gradient(800px 560px at 8% -8%,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 60%),
    radial-gradient(720px 520px at 100% 105%,
      rgba(160, 110, 235, 0.16),
      transparent 60%),
    radial-gradient(620px 480px at 92% 18%,
      rgba(80, 150, 230, 0.12),
      transparent 60%),
    radial-gradient(1200px 800px at 50% 30%,
      #0E1018 0%,
      #06070A 70%);
  background-attachment: fixed;
  background-size: 100% 100%;
}
html body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 20% 30%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 70%);
  opacity: 0.6;
  animation: aur-rail-drift 38s ease-in-out infinite alternate;
  z-index: 0;
}
html body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(380px 340px at 80% 70%,
      rgba(180, 120, 240, 0.18),
      transparent 70%);
  opacity: 0.55;
  animation: aur-rail-drift-2 52s ease-in-out infinite alternate;
  z-index: 0;
}
html #app,
html #picker-shell { position: relative; z-index: 1; }

@keyframes aur-rail-drift {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    opacity: 0.6; }
  50%  { transform: translate3d(40px, 20px, 0)  scale(1.08); opacity: 0.75; }
  100% { transform: translate3d(-30px, 60px, 0) scale(0.95); opacity: 0.55; }
}
@keyframes aur-rail-drift-2 {
  0%   { transform: translate3d(0, 0, 0)         scale(1);    opacity: 0.45; }
  50%  { transform: translate3d(-50px, -30px, 0) scale(1.1);  opacity: 0.6; }
  100% { transform: translate3d(30px, -10px, 0)  scale(0.96); opacity: 0.4; }
}

/* ============================================================
   LEFT RAIL — vertical workspace nav, Aurora glass on the rail
   ============================================================ */
html header.appbar {
  /* convert from horizontal bar to vertical rail */
  top: 0; bottom: 0; left: 0; right: auto;
  width: var(--rail-w);
  height: 100vh;
  padding: 18px var(--rail-pad);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 18px;

  /* Aurora's glass treatment, applied to the rail surface */
  background:
    linear-gradient(180deg,
      rgba(12,12,16,0.82) 0%,
      rgba(12,12,16,0.66) 100%);
  border-bottom: 0;
  border-right: 1px solid transparent;
  background-clip: padding-box;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    1px 0 0 rgba(255,255,255,0.06) inset,
    4px 0 32px rgba(0,0,0,0.32);
}
/* Faint accent shimmer along the right edge of the rail —
   the rail's version of Aurora's bottom shimmer line. */
html header.appbar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--accent) 36%, transparent) 25%,
    color-mix(in srgb, #b87cf0 28%, transparent) 50%,
    color-mix(in srgb, var(--accent) 36%, transparent) 75%,
    transparent);
  opacity: 0.4;
  background-size: 100% 200%;
  animation: aur-rail-edge-shimmer 16s linear infinite;
}
@keyframes aur-rail-edge-shimmer {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 200%; }
}

/* Main canvas slides right to clear the rail */
html #app > main {
  padding-left: calc(var(--rail-w) + 36px);
  padding-top: 36px;
  max-width: none;
}
html #app > main > #tab-approval {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
html #app > .bulk-bar {
  left: var(--rail-w);
  right: 0;
  top: 0;
  width: auto;
}

/* ============================================================
   CRUMB SECTION — top of rail, Nueform mark + Brand pill
   ============================================================ */
html .appbar > .crumb {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html .appbar .nueform-mark {
  align-self: flex-start;
  background-size: 48px auto;
  width: 56px; height: 30px;
  padding: 0;
}

/* Top row of the rail-crumb: Nueform mark on the left, theme toggle
   pinned to the right. The brand-pill renders on the row below. */
html #app .appbar .crumb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
html #app .appbar .crumb-top .theme-toggle { margin-left: auto; }

/* Brand pill — full-rail-width, Aurora's halo on hover */
html .appbar .brand-pill {
  width: 100%;
  height: 44px;
  padding: 4px 12px 4px 6px;
  border-radius: 12px;
  justify-content: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.24s var(--aur-ease),
              border-color 0.24s var(--aur-ease),
              box-shadow 0.24s var(--aur-ease);
}
html .appbar .brand-pill:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    0 0 0 1px var(--aur-edge) inset,
    0 0 28px var(--aur-glow-accent);
}
html .appbar .brand-pill.is-open,
html .appbar .brand-pill.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset,
    0 0 32px var(--aur-glow-accent);
}
html .appbar .brand-pill-name { flex: 1; }
html .appbar .brand-pill-chevron { margin-left: auto; }
html .appbar .brand-pill-logo:empty {
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--accent) 90%, white),
      var(--accent) 60%,
      color-mix(in srgb, var(--accent) 50%, #000));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 6px 18px var(--aur-glow-accent);
}

/* ============================================================
   TABS — vertical rows. Active state gets Aurora's halo + a
   left-edge glowing accent bar (instead of bottom underline).
   ============================================================ */
html .appbar > .tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  flex: 0 0 auto;
  padding: 0;
}
html .appbar > .tabs > .tab-group-gap {
  height: 12px;
  width: auto;
}
html .appbar > .tabs > .tab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  text-align: left;
  transition: color 0.18s var(--aur-ease),
              background 0.18s var(--aur-ease),
              border-color 0.18s var(--aur-ease),
              transform 0.4s var(--aur-spring);
}
html .appbar > .tabs > .tab:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(2px);
}
/* Label expands to fill, text starts hard at the left edge of its column.
   min-width:0 prevents flex shrinking from blowing out long labels. */
html .appbar > .tabs > .tab .tab-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .appbar > .tabs > .tab .tab-icon {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  display: block;
}
html .appbar > .tabs > .tab .tab-count {
  flex: 0 0 auto;
  margin-left: 0;  /* gap from parent handles spacing */
}

html .appbar > .tabs > .tab.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset,
    0 0 32px var(--aur-glow-accent);
}
/* Left-edge accent bar with glow — the sidebar's version of
   Aurora's bottom underline */
html .appbar > .tabs > .tab.active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: auto;
  top: 8px;
  bottom: 8px;
  width: 3px;
  height: auto;
  background: var(--accent);
  border-radius: 3px;
  box-shadow:
    0 0 12px var(--accent),
    0 0 24px var(--aur-glow-accent);
}

/* ============================================================
   UTIL CLUSTER — bottom of rail. Cmdk + avatar with "Operator"
   label. Same glass + halo treatment as Aurora.
   ============================================================ */
html .appbar > .util {
  margin-top: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
html .appbar .cmdk-trigger {
  width: 100%;
  height: 40px;
  justify-content: flex-start;
  min-width: 0;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  transition: background 0.22s var(--aur-ease),
              border-color 0.22s var(--aur-ease),
              box-shadow 0.22s var(--aur-ease);
}
html .appbar .cmdk-trigger:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 24px rgba(255,255,255,0.06);
}
html .appbar .cmdk-trigger-text { display: inline; flex: 1; }

html .appbar .user-menu-trigger {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 10px;
  transition: transform 0.4s var(--aur-spring),
              background 0.22s var(--aur-ease),
              border-color 0.22s var(--aur-ease);
}
html .appbar .user-menu-trigger:hover { transform: scale(1.01); }
html .appbar .user-menu-trigger::after {
  content: attr(data-user-name);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
}
html .appbar .user-avatar {
  background:
    radial-gradient(circle at 35% 30%, #ff8a4a, var(--accent) 55%, color-mix(in srgb, var(--accent) 30%, #000));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 0 0 1px rgba(255,255,255,0.06),
    0 8px 18px rgba(0,0,0,0.32),
    0 0 28px var(--aur-glow-accent);
}

/* ============================================================
   POPOVERS — anchored from the rail (right of the trigger)
   instead of from below. Same Aurora glass.
   ============================================================ */
html .popover {
  background:
    linear-gradient(180deg,
      rgba(28,28,38,0.92) 0%,
      rgba(20,20,28,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 64px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
  left: calc(var(--rail-w) - 4px);
  top: auto;
}
html #brand-switcher { top: 100px; }
html #user-menu {
  bottom: 18px;
  top: auto;
  right: auto;
  left: calc(var(--rail-w) - 4px);
}
html .popover-item { transition: background 0.16s var(--aur-ease); }
html .popover-item:hover { background: rgba(255,255,255,0.08); }
html .popover-item--danger:hover {
  background: color-mix(in srgb, var(--status-changes) 14%, transparent);
}

/* ============================================================
   PAGE TYPOGRAPHY — gradient text, decorative orb behind H1
   ============================================================ */
html .page-head {
  position: relative;
  isolation: isolate;
}
html .page-head::before {
  content: "";
  position: absolute;
  left: -80px; top: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    transparent 65%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
html .h1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #C9CFD9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.028em;
  /* With background-clip:text + a tight line-height (1.06), descenders
     fall outside the gradient fill box and render as text-fill-color
     (transparent — i.e. invisible). Extend the box vertically so the
     gradient covers the full glyph rendering, including y/g/p/q tails. */
  line-height: 1.15;
  padding-bottom: 0.06em;
}
html .page-head .lead {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}
html .picker-head { position: relative; }
html .picker-head::before {
  content: "";
  position: absolute;
  left: -120px; top: -160px;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    transparent 65%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}
html .picker-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #B3BAC6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   PRIMARY BUTTON — Aurora's premium tactile press + glow
   ============================================================ */
html .btn-primary {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 95%, white 5%) 0%,
      var(--accent) 100%);
  border-radius: 12px;
  border: 0;
  font-weight: 600;
  letter-spacing: 0;
  color: #1a0a02;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset,
    0 8px 24px var(--aur-glow-accent),
    0 2px 6px rgba(0,0,0,0.32);
  transition: transform 0.18s var(--aur-ease),
              box-shadow 0.22s var(--aur-ease),
              filter 0.2s var(--aur-ease);
}
html .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.40) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 70%, #000) inset,
    0 12px 32px color-mix(in srgb, var(--accent) 60%, transparent),
    0 2px 8px rgba(0,0,0,0.36);
}
html .btn-primary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset,
    0 4px 12px var(--aur-glow-accent);
}
html .btn-secondary,
html .btn-ghost {
  border-radius: 12px;
  transition: background 0.18s var(--aur-ease),
              border-color 0.18s var(--aur-ease);
}

/* ============================================================
   CARDS — Aurora glass + lift + glow on hover
   ============================================================ */
html .idea-card,
html .kanban-card,
html .library-card,
html .empty-cta,
html .strategy-cell {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.015) 40%,
      transparent 100%),
    var(--aur-glass);
  border: 1px solid var(--aur-edge);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 32px rgba(0,0,0,0.22);
  transition: transform 0.35s var(--aur-spring),
              border-color 0.22s var(--aur-ease),
              box-shadow 0.32s var(--aur-ease),
              background 0.22s var(--aur-ease);
}
html .idea-card:hover,
html .kanban-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--aur-edge-strong));
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 40%,
      transparent 100%),
    var(--aur-glass-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 18px 48px rgba(0,0,0,0.34),
    0 0 60px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Featured idea — dramatic orange orb */
html .idea-card.is-featured {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      transparent 50%),
    var(--aur-glass-strong);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 16px 48px rgba(0,0,0,0.28),
    0 0 80px color-mix(in srgb, var(--accent) 18%, transparent);
}
html .idea-card.is-featured::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    transparent 65%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}
html .idea-card.is-featured::before {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 95%, white) 0%,
      var(--accent) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.40) inset,
    0 4px 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
html .idea-card .title { letter-spacing: -0.018em; }

/* ============================================================
   KANBAN — atmospheric. Drop the hard top stripes; each column
   gets an ambient glow inside its top edge in its status hue,
   plus a small breathing dot beside the column name. Brings
   the Approval board in line with Aurora's "atmosphere, not
   stickers" language. Approved column threads the brand orange
   instead of green so the page still earns a brand moment.
   ============================================================ */
html .kanban-col {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      transparent 100%),
    var(--aur-glass);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* Repurpose ::before as a fade-down ambient glow inside the top
   of each column (90px tall, fading to transparent). Hue per status. */
html .kanban-col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.025) 0%,
    transparent 100%);
  box-shadow: none;
}
html .kanban-col--awaiting::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--status-pending) 12%, transparent) 0%,
    transparent 100%);
}
html .kanban-col--changes::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--status-changes) 12%, transparent) 0%,
    transparent 100%);
}
/* Approved column top-bar uses the base green (var(--status-approved))
   like the other columns — no charcoal-gradient override — so the bar,
   the breathing dot, and the status all read green together. */

/* Reset the colored column-header text back to neutral muted; the
   status hue moves into a small breathing dot beside the text. */
html .kanban-col--awaiting header span:first-child,
html .kanban-col--changes  header span:first-child,
html .kanban-col--approved header span:first-child {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
html .kanban-col--awaiting header span:first-child::before,
html .kanban-col--changes  header span:first-child::before,
html .kanban-col--approved header span:first-child::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: aur-kanban-dot 2.8s ease-in-out infinite;
}
html .kanban-col--awaiting header span:first-child::before {
  background: var(--status-pending);
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-pending) 60%, transparent);
}
html .kanban-col--changes header span:first-child::before {
  background: var(--status-changes);
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-changes) 60%, transparent);
}
html .kanban-col--approved header span:first-child::before {
  background: var(--status-approved);
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-approved) 60%, transparent);
}
@keyframes aur-kanban-dot {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* All column counts stay uniformly muted (matching the Library
   section-title count); the status hue lives in the dot alone. */
html .kanban-col--approved .count { color: var(--text-muted); }

html .kanban-col-empty {
  background: rgba(255,255,255,0.015);
  border-color: var(--aur-edge);
}

/* ============================================================
   CHIPS — hover transitions, filter-active glow
   ============================================================ */
html .chip,
html .filter-chip {
  transition: background 0.18s var(--aur-ease),
              border-color 0.18s var(--aur-ease),
              box-shadow 0.18s var(--aur-ease);
}
html .filter-chip.active {
  box-shadow: 0 0 18px color-mix(in srgb, var(--pillar) 32%, transparent);
}
html .filter-chip[data-axis="audience"].active {
  box-shadow: 0 0 18px color-mix(in srgb, var(--audience) 32%, transparent);
}

/* ============================================================
   MODAL CARD — Aurora glass treatment.
   Was a flat var(--bg-elev) fill — same flat material as the
   old calendar containers. Same glass formula now so opening
   the Send-to-Approval (and any other modal) keeps the depth
   language of the rest of the workspace.
   ============================================================ */
html .modal-card {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.012) 30%,
      transparent 100%),
    var(--aur-glass-strong);
  border: 1px solid var(--aur-edge);
  border-radius: 16px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 32px 96px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
}

/* ============================================================
   CALENDAR CONTAINERS — match the Approval kanban-col glass.
   Both the unscheduled rail (cal-sidebar) and the month panel
   (cal-panel) were sitting on a flat var(--bg-elev) fill, which
   made the page feel like a different design layer than the rest
   of the workspace. Same glass formula as .kanban-col now —
   subtle inset highlight gradient + Aurora glass tint + backdrop
   blur — so the Calendar reads as a continuation of Approval.
   ============================================================ */
html .cal-sidebar,
html .cal-panel,
html .cal-detail {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      transparent 100%),
    var(--aur-glass);
  border: 1px solid var(--aur-edge);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 24px rgba(0,0,0,0.18);
}

/* ============================================================
   CALENDAR — atmospheric day cells, softer today pulse
   Day cells pick up Aurora's glass language (inset top highlight,
   subtle gradient, hover glow halo) so the grid stops feeling flat
   compared to Approval/Strategy. Today stays as the page's brand
   moment but pulls back ~20% in amplitude so it's present without
   demanding attention.
   ============================================================ */
html .cal-day {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.012) 30%,
      transparent 100%),
    rgba(20,20,26,0.5);
  border-color: var(--aur-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.18);
  transition: border-color 0.22s var(--aur-ease),
              background 0.22s var(--aur-ease),
              box-shadow 0.28s var(--aur-ease),
              transform 0.32s var(--aur-spring);
}
html .cal-day:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--aur-edge-strong));
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.018) 30%,
      transparent 100%),
    rgba(28,28,36,0.62);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 24px rgba(0,0,0,0.28),
    0 0 32px color-mix(in srgb, var(--accent) 12%, transparent);
}
html .cal-day.today .cal-day-num {
  background: var(--accent);
  color: #1a0a02;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset,
    0 0 12px var(--accent),
    0 0 24px color-mix(in srgb, var(--accent) 36%, transparent);
  animation: aur-rail-today-pulse 4s ease-in-out infinite;
}
@keyframes aur-rail-today-pulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.32) inset,
      0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset,
      0 0 10px var(--accent),
      0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.32) inset,
      0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000) inset,
      0 0 14px var(--accent),
      0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

/* ============================================================
   STRATEGY — gradient section dividers + glyph drop-shadow
   ============================================================ */
html .strategy-section-head {
  border-bottom: 0;
  position: relative;
}
html .strategy-section-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 40%, transparent) 0%,
    var(--border) 25%,
    var(--border) 75%,
    transparent 100%);
}
html .strategy-section-glyph {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent));
}

/* ============================================================
   LIVE INDICATORS — breathing pulse
   ============================================================ */
@keyframes aur-rail-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
html .tab-new[data-new="true"] {
  animation: aur-rail-breathe 2.4s ease-in-out infinite;
  box-shadow:
    0 0 8px var(--accent),
    0 0 16px var(--aur-glow-accent);
}
html .chip-dot { box-shadow: 0 0 6px var(--accent); }

/* ============================================================
   PROGRESS BAR — accent gradient with glow
   ============================================================ */
html #progress {
  background: linear-gradient(90deg,
    transparent,
    var(--accent),
    color-mix(in srgb, var(--accent) 50%, #b87cf0),
    var(--accent),
    transparent);
  box-shadow: 0 0 12px var(--aur-glow-accent);
  left: var(--rail-w);
}

/* ============================================================
   PICKER — keeps a top bar (no rail when there's no brand)
   so the brand-portfolio screen stays familiar. Aurora glass
   styling still applies.
   ============================================================ */
html #picker-shell header.appbar {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: var(--nav-h);
  flex-direction: row;
  padding: 0 22px;
  border-right: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 48px rgba(0,0,0,0.32);
}
html #picker-shell header.appbar::after {
  /* picker uses a horizontal shimmer (like vanilla Aurora) instead
     of the vertical right-edge one */
  top: auto; left: 0; right: 0; bottom: 0;
  width: auto; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 40%, transparent) 20%,
    color-mix(in srgb, #b87cf0 30%, transparent) 50%,
    color-mix(in srgb, var(--accent) 40%, transparent) 80%,
    transparent);
  opacity: 0.4;
  background-size: 200% 100%;
  animation: aur-rail-edge-shimmer-h 14s linear infinite;
}
@keyframes aur-rail-edge-shimmer-h {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
html #picker-shell .appbar > .crumb {
  flex-direction: row;
  border-bottom: 0;
  padding: 0;
}
html #picker {
  padding-left: 36px;
}

/* Brand tiles get Aurora's per-tile halo */
html .brand-tile {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.03) 0%,
      transparent 100%),
    var(--aur-glass);
  border: 1px solid var(--aur-edge);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 12px 32px rgba(0,0,0,0.28);
  transition: transform 0.35s var(--aur-spring),
              border-color 0.22s var(--aur-ease),
              box-shadow 0.32s var(--aur-ease);
  position: relative; overflow: hidden;
}
html .brand-tile::before {
  content: "";
  position: absolute;
  top: -60%; right: -40%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--tile-accent, var(--accent)) 22%, transparent) 0%,
    transparent 65%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.4s var(--aur-ease);
  pointer-events: none;
}
html .brand-tile:hover { transform: translateY(-3px); }
html .brand-tile:hover::before { opacity: 1; }
html .brand-tile:hover {
  border-color: color-mix(in srgb, var(--tile-accent, var(--accent)) 30%, var(--aur-edge-strong));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 24px 64px rgba(0,0,0,0.42),
    0 0 80px color-mix(in srgb, var(--tile-accent, var(--accent)) 14%, transparent);
}

/* ============================================================
   LOGIN — Aurora glass + halo
   ============================================================ */
html .login-card {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      transparent 100%),
    var(--aur-glass-strong);
  border: 1px solid var(--aur-edge);
  border-radius: 18px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 32px 96px rgba(0,0,0,0.55),
    0 0 120px color-mix(in srgb, var(--accent) 12%, transparent);
}
html .login-title {
  background: linear-gradient(180deg, #FFFFFF, #B3BAC6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   INPUTS — refined focus with accent ring + glow
   ============================================================ */
html .input {
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  transition: border-color 0.18s var(--aur-ease),
              box-shadow 0.22s var(--aur-ease),
              background 0.18s var(--aur-ease);
}
html .input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 24px var(--aur-glow-accent);
  background: rgba(255,255,255,0.05);
  outline: none;
}

/* ============================================================
   MOBILE GUARD — Aurora halo treatment
   ============================================================ */
html #mobile-guard .mobile-guard-card {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      transparent 100%),
    var(--aur-glass-strong);
  border: 1px solid var(--aur-edge);
  border-radius: 18px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 64px rgba(0,0,0,0.45),
    0 0 80px var(--aur-glow-accent);
}

/* ============================================================
   RESPONSIVE — keep tab labels visible since vertical rail
   has the room
   ============================================================ */
@media (max-width: 1080px) {
  html .appbar > .tabs > .tab .tab-label { display: inline; }
  html .appbar > .tabs > .tab { padding: 9px 12px; gap: 10px; }
}

/* ============================================================
   LIGHT THEME — Aurora glass + body mesh + surface treatments
   reworked for a light substrate. Activated via
   :root[data-theme="light"] / html[data-theme="light"], wins
   over the default dark rules below by selector specificity.

   Design intent: keep the glass language (inset highlight,
   subtle gradient overlay, soft shadow halo) but invert the
   highlight direction — dark inset on light cards reads as
   depth the same way white inset does on dark.
   ============================================================ */
:root[data-theme="light"] {
  --aur-glass:        rgba(255,255,255,0.72);
  --aur-glass-strong: rgba(255,255,255,0.92);
  --aur-edge:         rgba(10,10,12,0.08);
  --aur-edge-strong:  rgba(10,10,12,0.16);
}

html[data-theme="light"] {
  background: #EEF0F4;
}
html[data-theme="light"] body {
  background:
    radial-gradient(800px 560px at 8% -8%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 60%),
    radial-gradient(720px 520px at 100% 105%,
      rgba(160, 110, 235, 0.10),
      transparent 60%),
    radial-gradient(620px 480px at 92% 18%,
      rgba(80, 150, 230, 0.09),
      transparent 60%),
    radial-gradient(1200px 800px at 50% 30%,
      #F6F7FA 0%,
      #EEF0F4 70%);
  background-attachment: fixed;
  background-size: 100% 100%;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(420px 320px at 20% 30%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 70%);
  opacity: 0.5;
}
html[data-theme="light"] body::after {
  background:
    radial-gradient(380px 340px at 80% 70%,
      rgba(180, 120, 240, 0.10),
      transparent 70%);
  opacity: 0.5;
}

/* Calendar containers — light glass treatment. Same formula as
   dark (gradient overlay + glass base + backdrop blur + soft shadow)
   but with the highlight inverted so it reads as elevation on light. */
html[data-theme="light"] .cal-sidebar,
html[data-theme="light"] .cal-panel,
html[data-theme="light"] .cal-detail {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.35) 100%),
    var(--aur-glass);
  border: 1px solid var(--aur-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 4px 16px rgba(15,20,40,0.06);
}

/* Day cells — flatten the dark-mode atmospheric tint, use a near-white
   surface with a thin top highlight. */
html[data-theme="light"] .cal-day {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.45) 100%),
    rgba(255,255,255,0.55);
  border-color: var(--aur-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 2px rgba(15,20,40,0.05);
}
html[data-theme="light"] .cal-day:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--aur-edge-strong));
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.55) 100%),
    rgba(255,255,255,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 6px 18px rgba(15,20,40,0.10),
    0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-theme="light"] .cal-day.today .cal-day-num {
  /* Brand accent still pops on the light bg — adjust label color to
     stay legible without changing the brand hue. */
  color: #fff;
}

/* Approval kanban columns — same light glass treatment. */
html[data-theme="light"] .kanban-col {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.35) 100%),
    var(--aur-glass);
  border: 1px solid var(--aur-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 4px 16px rgba(15,20,40,0.06);
}

/* Modal cards / popovers — light glass shell. The dark mode uses
   stronger blur + dark tint; light mirrors it. */
html[data-theme="light"] .modal-card,
html[data-theme="light"] .popover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.7) 100%),
    var(--aur-glass-strong);
  border: 1px solid var(--aur-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 28px rgba(15,20,40,0.12);
}

/* Appbar — sits on the page mesh, gets its own light glass shell. */
html[data-theme="light"] .appbar {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.78) 0%,
      rgba(255,255,255,0.55) 100%);
  border-bottom: 1px solid var(--aur-edge);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Library/Ideas cards — invert the white inset highlight so cards
   still read as elevated against the page. */
html[data-theme="light"] .library-card,
html[data-theme="light"] .idea-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 6px rgba(15,20,40,0.05);
}
html[data-theme="light"] .library-card:hover,
html[data-theme="light"] .idea-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 6px 18px rgba(15,20,40,0.10);
}

/* Cal pill chips — adjust translucent backgrounds for light surface.
   Dark uses rgba(*,0.18); light needs higher saturation to stay
   legible against the brighter surface. */
html[data-theme="light"] .cal-pill--li  { background: rgba(10,102,194,0.14); color: #1F62C8; }
html[data-theme="light"] .cal-pill--x   { background: rgba(80,80,80,0.10);  color: #444; }
html[data-theme="light"] .cal-pill--ig  { background: rgba(140,60,200,0.14); color: #7748C8; }
html[data-theme="light"] .cal-pill--vid { background: rgba(200,40,40,0.14); color: #C42B2B; }

/* Pill idea-color dot — the dark mode shadow ring (0 0 0 1px rgba(10,10,12,0.85))
   becomes a white ring on light to keep the dot visible on light pills. */
html[data-theme="light"] .cal-pill-dot {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.95);
}

/* Day-cell num — dark mode uses lighter colors. In light mode the
   default --text already inverts so we don't override the base, but
   `.other-month` muted text needs a darker dim. */
html[data-theme="light"] .cal-day.other-month {
  opacity: 0.4;
}

/* Aurora overlay glows — the accent halo at 50% alpha reads as a
   bright orange smudge on white. Dial it down. */
:root[data-theme="light"] {
  --aur-glow-accent: color-mix(in srgb, var(--accent) 28%, transparent);
  --aur-glow-pillar: color-mix(in srgb, var(--pillar) 28%, transparent);
}

/* ── Next Studio layout scaffolding ──────────────────────────────────── */
/* Single source of truth for the page's horizontal extent — children
   inherit this constraint instead of each setting its own max-width,
   which previously let them drift apart (header card narrower than the
   platform nav and section bodies below). With a unified container,
   the header card, platform pills row, and section grid all align to
   the same left/right edges. */
.workshop-next {
  padding-bottom: 80px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ws-next-head — mirrors Classic's ws-header: white card, back button +
   title + Last-edited stamp on the left, action strip on the right, all
   in one tight horizontal row. max-width matches the section columns
   below (520 + 56 + 560 = 1136px) so the header aligns flush with the
   content beneath it. */
.ws-next-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  gap: 32px;
  max-width: 1400px;
  margin: 28px auto 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ws-next-head-lhs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.ws-next-title,
[data-skin="clerk"] .ws-next-head .ws-next-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
.ws-stamp {
  font-size: 12.5px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-stamp::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success, #15803d);
}
.studio-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.studio-actions .btn-primary {
  white-space: nowrap;
}

/* Sticky platform-pill nav — always visible so the operator can jump
   between platforms without losing context inside a section. */
.workshop-next .platform-nav {
  background: transparent;
}
.workshop-next .platform-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}
.workshop-next .platform-pill {
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.workshop-next .platform-pill:hover { color: var(--text); background: var(--bg-elev); }
.workshop-next .platform-pill.active {
  background: var(--text);
  color: var(--bg);
}

/* Per-platform section. Generous vertical padding so each platform reads
   as its own "slide" without scroll-snap. */
.workshop-next .platform-section {
  padding: 56px 48px;
  border-bottom: 1px solid var(--border);
}
/* Capped at mockup-col max (520) + gap (56) + controls-col max (560) so
   the section sits flush against its two columns instead of stretching
   into empty whitespace on wide viewports. */
.workshop-next .section-inner { max-width: 1400px; margin: 0 auto; }
.workshop-next .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}
.workshop-next .section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.workshop-next .section-meta {
  color: var(--text-dim);
  font-size: 13px;
  margin: 6px 0 0;
}

/* Placeholder card while per-platform controls get ported in. */
.section-body-stub {
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 40px;
}
.stub-card-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.stub-card-text {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 600px;
}

/* ── Next Studio — page-head sub line + sticky platform-pill active state ── */
.workshop-next .ws-next-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin: 4px 0 0;
}
.workshop-next .ws-next-sub .ws-next-stamp { color: var(--text-muted); }
.workshop-next .ws-next-sub .ws-stamp-edited { color: var(--text-dim); }

/* Sub-format icons now live inside each platform pill (see
   .platform-pill-formats below) — the old standalone segmented
   control was retired. Style block intentionally empty here. */

/* Carousel slide entry — tight column of "SLIDE N" label + the
   editable copy item below. Sits inside the .carousel-slide-list >
   .list white card so the existing clerk-skin .item rectangle rules
   apply (rounded white box, hairline border, hover state). */
.workshop-next .carousel-slide-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workshop-next .carousel-slide-entry-label {
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 2px;
}
/* Bump the outer slide-list card's internal padding so the entries
   don't hug the edges, and widen the gap between entries so each one
   reads as its own block instead of a tight stack. Selector matches
   the clerk-skin rule at index.html:10048 with an extra class for
   higher specificity (0,4,0 vs 0,3,0). */
[data-skin="clerk"] .workshop-next .carousel-slide-list > .list {
  padding: 24px !important;
  gap: 18px !important;
}

/* ── Two-column body — mockup left (sticky), controls right (scrolls).
   Both columns capped at the mockup's intended widths so the controls
   don't sprawl into empty whitespace on the right when the viewport is
   wide. Symmetric weighting reads as "post on the left, panel on the
   right" rather than "panel that drowns in the page." */
.workshop-next .section-body {
  display: grid;
  /* WRITE column flex-grows; PREVIEW column is fixed at a realistic
     social-post width so a 4:5 image + chrome stays above the fold on
     a typical laptop viewport. The wider WRITE side gives long captions
     room to wrap naturally instead of stacking too tall. Grid track
     order is DOM order (mockup, controls) — the `order` rules below
     flip placement so visually it reads WRITE left, PREVIEW right. */
  grid-template-columns: minmax(380px, 1fr) 420px;
  column-gap: 40px;
  row-gap: 20px;
  align-items: start;
}
/* Column order — WRITE/DESIGN controls on the left, PREVIEW mockup on
   the right. DOM order stays mockup-then-controls so JS append sites
   don't need touching; `order` flips placement in the grid. No-op for
   the single-column text + carousel section-body variants (display:
   block), which is fine since those don't use the two-column layout. */
.workshop-next .section-body > .controls-col { order: 1; }
.workshop-next .section-body > .mockup-col   { order: 2; }
/* Text sub-format has no separate controls column — the realistic post
   mockup IS the edit surface. One centered column, capped so the card
   doesn't stretch to absurd widths on big monitors. */
.workshop-next .section-body--text {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}
/* Carousel sub-format also single-column. Wider cap than Text since the
   slide deck + action row controls (source, aspect, variant pickers,
   polish / regenerate) need more horizontal room. */
.workshop-next .section-body--carousel {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}

/* Empty state for an unactivated platform/format pair — single
   centered card with the Activate CTA. Replaces the prior two-card
   layout (placeholder mockup + separate CTA) which read as cluttered
   empty state. */
.workshop-next .section-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
}
.workshop-next .section-empty-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 40px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Abstract-wireframe preview above the title — teaches what the
   format produces. SVG inside scales with the container; container is
   capped so the mockup doesn't dominate the card. */
.workshop-next .section-empty-mockup {
  width: 100%;
  max-width: 320px;
  margin-bottom: 8px;
}
.workshop-next .section-empty-mockup svg {
  width: 100%;
  height: auto;
  display: block;
}
.workshop-next .section-empty-title {
  font: 600 17px/1.25 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.workshop-next .section-empty-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 320px;
}
.workshop-next .section-empty-cta {
  margin-top: 14px;
}

/* Mockup column — sticky inside the section so the visual anchor stays
   in view while the operator scrolls through controls on the right.
   Offset is 0 because the clerk skin renders the appbar as a LEFT
   vertical rail (not a top bar) — nothing occupies the viewport's top
   edge, so the PREVIEW eyebrow sticks flush against viewport top with
   no empty gap above it. */
.workshop-next .mockup-col {
  position: sticky;
  top: 0;
}
.workshop-next .mockup-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}
.workshop-next .mockup-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.workshop-next .mockup-tool {
  height: 40px; padding: 0 18px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.workshop-next .mockup-tool:hover {
  color: var(--text);
}
.workshop-next .mockup-tool.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
/* Segmented variant — the base .mockup-toolbar rule downstream already
   gives this its rounded box, border, and the 16px gap to the post card
   below. Lives as a direct child of .section-body (the 2-col grid) and
   spans both columns so the commitment band sits above the mockup AND
   the WRITE controls. */
.workshop-next .mockup-toolbar.mockup-toolbar--segmented {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 24px 22px 22px;
  grid-column: 1 / -1;
  /* The grid row-gap handles spacing to the mockup + WRITE columns
     below. Zero out the inherited 16px margin-bottom (line 5050) so
     the gap doesn't double-stack. Class is chained for specificity. */
  margin-bottom: 0;
}
.workshop-next .mockup-toolbar-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Override the global .mockup-tool padding/height (4581) so the Long/
   Short pills can size up inside the segmented variant. */
.workshop-next .mockup-toolbar--segmented .mockup-tool {
  height: auto !important;
  line-height: 1 !important;
  padding: 12px 22px !important;
  font-size: 13px !important;
  border-radius: 8px;
}
/* Quiet caption inside the toolbar — makes it explicit which variant
   ships to the approval queue. Bold inner span carries the name so it
   reads at a glance. */
.workshop-next .mockup-commit-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  padding: 0 2px;
  line-height: 1.3;
  text-align: center;
}
.workshop-next .mockup-commit-hint strong {
  color: var(--text);
  font-weight: 600;
}

/* Stand-in for the rendered post. In production this is the htmlToImage
   output baked from the brand template + the prompt result. */
.workshop-next .mockup-card {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: #fff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Manrope', system-ui, sans-serif;
}
.workshop-next .mockup-card-hero {
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ff8a3d;
  text-transform: uppercase;
}
.workshop-next .mockup-card-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.workshop-next .mockup-card-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.workshop-next .mockup-card-data-block { font-size: 11px; }
.workshop-next .mockup-card-data-label  { color: rgba(255,255,255,0.5); letter-spacing: 0.08em; }
.workshop-next .mockup-card-data-value  { color: #fff; font-size: 22px; font-weight: 700; margin-top: 4px; }
.workshop-next .mockup-card-footer {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 16px;
}

.workshop-next .mockup-caption-block {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.workshop-next .mockup-caption {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}
.workshop-next .mockup-caption-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  gap: 12px;
}

/* ── Controls column ─────────────────────────────────────────────── */
.workshop-next .controls-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Two visual band groups inside the controls column: WRITE (copy +
   caption) and DESIGN (direction). Header microtype above each group;
   subsequent groups get a hairline + extra breathing room so the
   conceptual divide reads at a glance. */
.workshop-next .controls-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.workshop-next .controls-group-header {
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 4px;
  padding-left: 4px;
}
/* PREVIEW eyebrow on the mockup column — matches the 24px gap that
   .controls-group adds between WRITE and the first card, so the mockup
   card top aligns with the IMAGE COPY card top. */
.workshop-next .mockup-col-header {
  margin-bottom: 24px;
}
.workshop-next .controls-group + .controls-group {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.workshop-next .control-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
}
/* Block title sits one rung above the field labels inside the block.
   Before this it shared the field-label treatment (uppercase small-caps,
   muted gray, 11px) and blended in — operators couldn't tell what was
   the block's name vs a field inside it. Now: sentence-case, larger,
   primary text colour, so the block reads as a titled card and the
   field-labels read as its rows. */
.workshop-next .control-block-title {
  font: 600 15px/1.2 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text);
  /* Vertical breathing room so the title reads as a real header with
     space around it, not flush against the block edge above or the
     first field below. Top margin compounds with the block's 24px
     padding-top → 32px above; 32px below for clear separation from
     the first field/callout underneath. */
  margin: 8px 0 32px;
}
/* Quiet hint paragraph that can sit under a control-block-title to
   explain non-obvious behaviour (e.g. shared slides across carousels). */
.workshop-next .control-block-note {
  font: 400 12.5px/1.45 'Manrope', system-ui, sans-serif;
  color: var(--text-dim);
  margin: -10px 0 16px;
}
/* Louder version — used when the non-obvious behaviour matters enough
   that we don't want operators to skim past it. Subtle tinted background
   + link icon so it reads as a deliberate callout, not a sentence. */
.workshop-next .control-block-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 18px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--brand-accent, var(--text)) 8%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--brand-accent, var(--text)) 18%, transparent);
  border-radius: 10px;
}
.workshop-next .control-block-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-accent, var(--text)) 14%, transparent);
  color: var(--brand-accent, var(--text));
  flex-shrink: 0;
  margin-top: 1px;
}
.workshop-next .control-block-callout-body {
  font: 400 12.5px/1.45 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.workshop-next .control-block-callout-body strong {
  font-weight: 600;
  color: var(--text);
}
.workshop-next .control-block-callout-sub {
  color: var(--text-dim);
}
/* Neutral variant — same shape, no brand-accent tint. Used when the
   callout is informational rather than attention-grabbing (e.g. the
   per-platform caption note, which restates the natural default and
   shouldn't compete with the shared-slides callout). */
.workshop-next .control-block-callout--neutral {
  background: color-mix(in srgb, var(--text) 5%, var(--bg-elev));
  border-color: var(--border);
}
.workshop-next .control-block-callout--neutral .control-block-callout-icon {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-dim);
}
.workshop-next .field { display: flex; flex-direction: column; gap: 8px; }
.workshop-next .field + .field { margin-top: 22px; }
/* Actions row sitting at the bottom of a control-block (after the last
   .field) gets the same breathing room as field-to-field spacing so the
   buttons don't crowd the input above. */
.workshop-next .field + .actions-row { margin-top: 22px; }
/* Same idea for the Slides block — Regenerate slides button after the
   slide-list needs breathing room from the last slide field above. */
.workshop-next .carousel-slide-list + .actions-row { margin-top: 22px; }
.workshop-next .field-label {
  font: 600 11.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.workshop-next .field-help {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: -2px 0 0;
}

/* Pill row + pill — sub-controls used for Render style and Photo subjects. */
.workshop-next .pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.workshop-next .pill {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
  border-radius: 999px;
  cursor: pointer;
}
.workshop-next .pill.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Design style cards — locked styles defined in Brand Settings. */
.workshop-next .style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.workshop-next .style-card {
  aspect-ratio: 4/5;
  border-radius: 8px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: #ff8a3d;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.workshop-next .style-card.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px rgba(19, 19, 22, 0.05);
}
.workshop-next .style-card-hero {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.workshop-next .style-card-label {
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 4px;
  align-self: flex-start;
  font-weight: 500;
}

/* Inputs — scoped so they don't clash with the classic Studio. */
.workshop-next .input,
.workshop-next .textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}
.workshop-next .input:focus,
.workshop-next .textarea:focus { outline: none; border-color: var(--text); }
.workshop-next .textarea { min-height: 140px; }

.workshop-next .actions-row { display: flex; gap: 16px; align-items: center; }
.workshop-next .actions-row--end { justify-content: flex-end; }
.workshop-next .text-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-dim);
  font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.workshop-next .text-btn:hover { text-decoration-color: var(--text-dim); color: var(--text); }

/* Regenerate-text button — proper rounded pill with refresh icon, so
   the affordance reads as "action" rather than a footer link. Sits in
   the .actions-row beneath the Long/Short textareas. */
.workshop-next .regen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 10px;
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.workshop-next .regen-btn:hover {
  background: var(--bg);
  border-color: var(--text-dim);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}
.workshop-next .regen-btn:active {
  transform: translateY(0.5px);
}
.workshop-next .regen-btn:disabled,
.workshop-next .regen-btn.is-loading {
  cursor: progress;
  opacity: 0.7;
  pointer-events: none;
}
.workshop-next .regen-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.workshop-next .regen-btn:hover .regen-btn-icon { color: var(--text); }
.workshop-next .regen-btn.is-loading .regen-btn-icon {
  animation: regen-spin 0.9s linear infinite;
}
@keyframes regen-spin {
  to { transform: rotate(360deg); }
}

/* Polish-text modal — wide overlay with 3 variant cards side-by-side.
   Long-form posts won't fit in the inline variantsBox the captions use
   (3 × ~500 words in a 600px column is unreadable), so we dedicate the
   screen to a focused "review and pick" surface.
   The selector chains .modal-card.polish-modal-card so it outranks the
   base `.modal-card.modal-wide { width: 640px }` rule that otherwise
   wins the cascade and squeezes the variants. */
.modal-card.polish-modal-card {
  width: 96vw;
  max-width: min(1600px, 96vw);
}
.polish-modal-body {
  padding: 0 20px 24px;
}
.polish-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* Let each card grow to its own content height — the modal body has
     a single outer scroll, so we don't want per-card inner scrollbars.
     Variants of different lengths produce uneven column heights, but
     that's a fair tradeoff for one clean scroll instead of four. */
  align-items: start;
}
.polish-variant-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.polish-variant-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.polish-variant-body {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
/* Image-copy pair variant — shows Headline + Subtitle as two stacked
   labeled blocks instead of a single body, so the operator can compare
   pairs directly. */
.polish-pair-block + .polish-pair-block { margin-top: 14px; }
.polish-pair-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.polish-pair-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.polish-pair-value--headline {
  font-weight: 600;
  font-size: 16px;
}
.polish-pair-value--subtitle {
  font-weight: 400;
}
.polish-variant-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.polish-variant-apply {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font: 600 13px/1 'Manrope', system-ui, sans-serif;
}
/* On narrow screens, stack the variants. The modal is still scrollable. */
@media (max-width: 1000px) {
  .polish-modal-grid { grid-template-columns: 1fr; }
  .polish-variant-body { max-height: 40vh; }
}

/* Current-render thumb in the strip — leads the row, ringed with the
   brand accent so the operator's eye lands on it as "this is what's in
   the main slot right now". Non-clickable: cursor default, no hover
   lift. The !important values override clerk's strong thumb styling. */
.workshop-next .pv-render-history-thumb.is-current,
.pv-render-history-thumb.is-current {
  border: 2px solid var(--brand-accent, var(--accent)) !important;
  cursor: default !important;
  position: relative;
}
.workshop-next .pv-render-history-thumb.is-current:hover,
.pv-render-history-thumb.is-current:hover {
  border-color: var(--brand-accent, var(--accent)) !important;
  transform: none !important;
}
.workshop-next .pv-render-history-thumb.is-current img,
.pv-render-history-thumb.is-current img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Loading-state thumbnail for the Previous Renders strip — sits at the
   front of the strip while a render is in flight and gets wiped/replaced
   by renderStudio's re-paint when the render lands. Same dimensions as
   the real thumbs so the strip width is stable across the transition.
   Spinner uses the brand accent to match the main-slot overlay. The
   !important here overrides clerk's `background:#ffffff !important`
   thumb override (which would otherwise hide the gradient). */
.workshop-next .pv-render-history-thumb.is-loading,
.pv-render-history-thumb.is-loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}
/* Static (div) form — the operator is already viewing the in-flight
   render, so the thumb is decorative. */
div.pv-render-history-thumb.is-loading {
  cursor: default !important;
  pointer-events: none;
}
/* Button form — operator is viewing a previous thumb and the loading
   thumb is the affordance to return to the in-flight view. */
button.pv-render-history-thumb.is-loading {
  cursor: pointer !important;
  pointer-events: auto;
}
button.pv-render-history-thumb.is-loading:hover {
  border-color: var(--brand-accent, var(--accent)) !important;
}
.workshop-next .pv-render-history-thumb.is-loading:hover,
.pv-render-history-thumb.is-loading:hover {
  transform: none !important;
  box-shadow: none !important;
}
.pv-render-history-thumb-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--brand-accent, var(--accent));
  border-radius: 50%;
  animation: pv-render-thumb-spin 0.9s linear infinite;
}
@keyframes pv-render-thumb-spin { to { transform: rotate(360deg); } }

/* Previous renders strip below the mockup — no section break, sits
   close to the post chrome above it. */
.workshop-next .renders-row {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
/* Bump the thumbs from clerk's 60×60 default to a more presentable
   108×108 so operators can actually see what they're restoring without
   squinting. The clerk skin's <style> block loads AFTER hybrid.css and
   sets `[data-skin="clerk"] .pv-render-history-thumb { width:60px
   !important }` at equal specificity, so my plain `.workshop-next`
   selector loses the cascade tie. Adding `[data-skin="clerk"]` here
   bumps specificity to 0,3,0 — wins over clerk's 0,2,0. */
.workshop-next .pv-render-history-strip { gap: 12px !important; }
[data-skin="clerk"] .workshop-next .pv-render-history-thumb,
[data-skin="clerk"] .workshop-next .pv-render-history-thumb.is-current,
[data-skin="clerk"] .workshop-next .pv-render-history-thumb.is-loading {
  width: 108px !important;
  height: 108px !important;
}
.workshop-next .pv-render-history-thumb-spinner {
  width: 24px;
  height: 24px;
}
.workshop-next .renders-row-title {
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.workshop-next .renders-strip { display: flex; gap: 10px; }
.workshop-next .render-thumb {
  width: 72px;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 1px solid var(--border);
  cursor: pointer;
}

/* Unactivated platform — empty mockup card on the left, centered
   "Activate" prompt on the right. Mirrors the mockup's IG teaser. */
.workshop-next .ig-mock-card {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* ── Next Studio — LinkedIn post chrome ──────────────────────────────
   Replaces the placeholder gradient card with a proper LinkedIn-styled
   post: avatar, brand name + verified badge, timestamp, caption, image
   area, reactions, action row. The image area shows the actual cached
   render when present and an empty-state prompt when not. */
.workshop-next .li-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.workshop-next .li-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5b1a 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.workshop-next .li-post-head-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.workshop-next .li-post-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 600 14px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.workshop-next .li-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.workshop-next .li-degree { color: var(--text-muted); font-weight: 500; font-size: 12.5px; margin-left: 2px; }
.workshop-next .li-post-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.workshop-next .li-globe { font-size: 10px; }

.workshop-next .li-post-caption {
  padding: 0 16px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

.workshop-next .li-post-image {
  width: 100%;
  height: 100%;
  background: #f0f0f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.workshop-next .li-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.workshop-next .li-post-image.is-empty {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elev) 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 56px 48px;
  text-align: center;
  gap: 14px;
  position: relative;
}
/* The inner block holding glyph + copy + button is the single flex
   child of the centered container, so vertical centering of the parent
   centers the block. Explicitly center the inner content too so the
   glyph + copy + button stack stays balanced even if extra siblings
   are added later. */
.workshop-next .li-post-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Faint dashed inset border — reads as "image frame waiting to fill"
   without competing with the centered content. */
.workshop-next .li-post-image.is-empty::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  pointer-events: none;
}
/* Ghost image glyph above the copy — telegraphs "image renders here."
   The shimmer is intentionally subtle (2.4s sine, 0.55→1 opacity)
   so it reads as "ready" not "loading." */
.workshop-next .li-post-image-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-dim);
  margin-bottom: 6px;
  animation: li-post-empty-shimmer 2.4s ease-in-out infinite;
}
.workshop-next .li-post-image-empty-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes li-post-empty-shimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.workshop-next .li-post-image-empty-text {
  font: 600 16px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--text);
  letter-spacing: -0.01em;
  max-width: 320px;
}
.workshop-next .li-post-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.workshop-next .li-reaction-icons { letter-spacing: 0.04em; }
.workshop-next .li-post-actions {
  display: flex;
  justify-content: space-around;
  padding: 4px 8px 10px;
  border-top: 1px solid var(--border);
}
.workshop-next .li-post-action {
  background: none;
  border: 0;
  padding: 8px 12px;
  font: 600 12.5px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 6px;
}
.workshop-next .li-post-action:hover { background: var(--bg-elev-2); color: var(--text); }

/* ── Next Studio — toolbar selects + Generate / Re-render buttons ───── */
.workshop-next .mockup-tool--select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 24px 0 10px;
  background:
    var(--bg-elev)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5' fill='%235e5f6e'/%3E%3C/svg%3E")
    no-repeat right 8px center / 8px;
  cursor: pointer;
  max-width: 160px;
  text-overflow: ellipsis;
}
.workshop-next .mockup-tool--select:focus { outline: none; border-color: var(--text); }

/* Empty state — Render as primary CTA inside the dark image slot. Uses
   var(--accent) which is dynamically set to the active brand's primary
   color at runtime (see brand-skin injector), so the button colour
   tracks the brand the same way the design-style selected outline does. */
.workshop-next .li-post-image-generate {
  margin-top: 14px;
  padding: 8px 16px;
  background: #1a1a1a;
  border: 0;
  border-radius: 6px;
  color: #f7f7f8;
  font: 700 12.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.workshop-next .li-post-image-generate:hover { background: #333333; }
.workshop-next .li-post-image-generate:disabled { opacity: 0.6; cursor: wait; }
/* Dark mode: flip to a light button with dark text. */
[data-theme="dark"] .workshop-next .li-post-image-generate { background: #f0f0f2; color: #1a1a1a; }
[data-theme="dark"] .workshop-next .li-post-image-generate:hover { background: #ffffff; }

/* ── Rendering overlay contrast — when the loader is mounted on top of
   .li-post-image, the underlying brand --accent can be a dark/saturated
   colour (e.g. amber/maroon) that disappears against the rgba(0,0,0,0.74)
   backdrop. Force high-contrast values for the eyebrow + spinner, bump
   the backdrop opacity so the cached image behind doesn't compete, and
   lift the body copy to near-pure-white. Scoped to .workshop-next so
   Classic stays byte-identical. */
.workshop-next .li-post-image .pv-img-rendering-overlay {
  background: rgba(0, 0, 0, 0.86) !important;
}
.workshop-next .li-post-image .pv-img-rendering-label {
  color: #ffffff !important;
}
.workshop-next .li-post-image .pv-img-rendering-spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
}
.workshop-next .li-post-image .pv-img-rendering-text {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Filled state — Re-render hovers on top of the image. */
.workshop-next .li-post-image { position: relative; }
/* Hover overlay sits in the TOP-RIGHT corner of the image/slot —
   keeps the rendered content visible while the operator acts on it
   (the previous centered + dim backdrop blocked the slide, which is
   the thing they're often deciding about). No backdrop. Container
   passes clicks through; each button re-enables pointer-events. */
.workshop-next .li-post-image-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  pointer-events: none;
}
.workshop-next .li-post-image-overlay > * { pointer-events: auto; }
.workshop-next .li-post-image:hover .li-post-image-overlay,
.workshop-next .pv-carousel-slot:hover > .li-post-image-overlay,
.workshop-next .pv-x-grid-slot:hover > .li-post-image-overlay { opacity: 1; }
/* Action pill — icon + label, compact, white surface with a soft
   shadow so it lifts off whatever's behind. */
.workshop-next .li-post-image-action {
  padding: 7px 11px;
  background: rgba(255,255,255,0.96);
  border: 0;
  border-radius: 7px;
  color: #1a1a1a;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.14);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.workshop-next .li-post-image-action svg { flex-shrink: 0; display: block; }
.workshop-next .li-post-image-action:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.18);
}
.workshop-next .li-post-image-action:disabled { opacity: 0.6; cursor: wait; }
.workshop-next .li-post-image-action.is-primary {
  background: var(--brand-accent, var(--accent));
  color: #1a1a1a;
}
.workshop-next .li-post-image-action.is-primary:hover {
  background: var(--brand-accent-hover, var(--accent-hover));
}
/* Backward-compat: keep the old rerender class working if any cached DOM
   references it. Same look as the unified .li-post-image-action. */
.workshop-next .li-post-image-rerender {
  padding: 10px 18px;
  background: rgba(255,255,255,0.95);
  border: 0;
  border-radius: 8px;
  color: #1a1a1a;
  font: 700 12.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.workshop-next .li-post-image-rerender:hover { background: #fff; }

/* ── Reposition mode (Full (Image + Text) renders only) ──────────────────────────────
   Triggered by the "Reposition" hover button. Replaces the displayed
   image with a full-size raw image positioned via object-position;
   user drags to pan; Cancel/Apply bar at the bottom commits the offset
   via saveAiCropOffset so subsequent renders + downloads use it. */
.workshop-next .li-post-image.is-repositioning .li-post-image-overlay { display: none; }
.workshop-next .li-post-repos-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  user-select: none;
  z-index: 6;
}
.workshop-next .li-post-image.is-repositioning .li-post-repos-img:active { cursor: grabbing; }
.workshop-next .li-post-repos-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 80%);
  z-index: 7;
}
.workshop-next .li-post-repos-hint {
  color: rgba(255,255,255,0.92);
  font: 600 11.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.workshop-next .li-post-repos-bar.is-dragging .li-post-repos-hint { opacity: 0.4; }
.workshop-next .li-post-repos-bar > .li-post-image-action { padding: 8px 14px; font-size: 12px; }

/* ── Next Studio — polish variants drawer below the caption textarea ── */
.workshop-next .next-polish-variants {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workshop-next .next-polish-variants .variant {
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.workshop-next .next-polish-variants .variant:hover { border-color: var(--text); }
.workshop-next .next-polish-variants .variant-num {
  font: 600 10.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.workshop-next .next-polish-variants .variant-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.workshop-next .next-polish-variants .variant-apply {
  padding: 6px 12px;
  background: var(--text);
  border: 0;
  border-radius: 6px;
  color: var(--bg);
  font: 600 11.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.workshop-next .next-polish-variants .variant-apply:hover { opacity: 0.9; }
.workshop-next .next-polish-variants .variant-apply.applied { background: #15803d; }
.workshop-next .next-polish-variants .variant-copy-hint {
  font: 500 11px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Inline-edit affordance on the mockup caption. */
.workshop-next .li-post-caption.pv-editable { cursor: text; transition: background 0.12s ease; }
.workshop-next .li-post-caption.pv-editable:hover { background: var(--bg-elev-2); }
.workshop-next .li-post-caption.pv-editing { background: var(--bg-elev-2); padding: 8px 16px; }
.workshop-next .li-post-caption .pv-edit-area {
  width: 100%;
  border: 0;
  background: transparent;
  font: 400 13.5px/1.55 'Manrope', system-ui, sans-serif;
  color: var(--text);
  resize: none;
  outline: none;
  padding: 0;
}

/* ── Next Studio — Render setup card (Source / Aspect / Theme) ─────────
   Wraps the three per-render pill groups in a dashed-border card with
   hairline section breaks between groups, matching the visual treatment
   of the AI editor card that sits below it. */
.workshop-next .next-render-setup,
.workshop-next .pv-source-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 24px 28px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background: transparent;
  margin: 0 0 24px;
}
.workshop-next .next-render-setup {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.workshop-next .next-render-setup > .pv-ai-config-group {
  padding-block: 18px;
}
.workshop-next .next-render-setup > .pv-ai-config-group:first-child { padding-top: 0; }
.workshop-next .next-render-setup > .pv-ai-config-group:last-child { padding-bottom: 0; }
.workshop-next .next-render-setup > .pv-ai-config-group + .pv-ai-config-group {
  border-top: 1px solid var(--border);
}

/* ── Next Studio — scale-up overrides for Classic's AI editor ──────────
   Classic's editor is sized for a tight sidebar. When rendered inside
   Next (which has a roomier right column), bump everything up so it
   matches the mockup's more spacious feel. Scoped strictly under
   .workshop-next so Classic's own renders stay byte-identical. */
.workshop-next .pv-ai-editor { gap: 20px; }
.workshop-next .pv-ai-editor > .pv-ai-editor-row,
.workshop-next .pv-ai-editor > .pv-ai-subject-wrap,
.workshop-next .pv-ai-editor > .pv-ai-styles-wrap,
.workshop-next .pv-ai-editor > .pv-ai-locked-banner,
.workshop-next .pv-ai-editor > .pv-ai-infographic-form,
.workshop-next .pv-ai-editor > .pv-ai-prompt {
  padding-block: 6px;
}

/* Render style + Design layout row — each group claims an equal share of
   the row so the Design layout block reaches the right edge instead of
   clumping next to Render style and leaving a dead zone. Pills stay
   left-aligned inside their share; the vertical hairline divider sits
   naturally between them. Force side-by-side spacing (no top-of-group
   padding/margin) so the labels stay flush at the top regardless of how
   Classic's container query resolves at any given width. Bottom
   padding+margin zeroed so the pills sit close to the hairline below. */
.workshop-next .pv-ai-editor > .pv-ai-editor-row {
  width: 100%;
  align-items: flex-start;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.workshop-next .pv-ai-editor > .pv-ai-editor-row > .pv-ai-config-group {
  flex: 0 0 100%;
  min-width: 0;
}
/* Render style + Design layout always stack now that they're tile
   pickers. Each row needs the full column width — 3 tiles for Render
   style, 2 for Design layout — so the old 2:1 side-by-side flex split
   was wrapping tiles inside each group. Horizontal divider above the
   second group provides the section break. */
.workshop-next .pv-ai-editor > .pv-ai-editor-row > .pv-ai-config-group:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.workshop-next .pv-ai-editor > .pv-ai-editor-row > .pv-ai-config-group + .pv-ai-config-group {
  border-top: 1px solid var(--border, #eeeef0);
  padding-top: 14px;
  margin-top: 14px;
  border-left: 0;
  padding-left: 0;
}

/* Render style + Design layout pills — bigger touch targets, more readable font. */
.workshop-next .pv-ai-medium-pill {
  padding: 4px 11px;
  font-size: 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Inline icon glyph on each TYPE pill — image-with-text-lines for
   Full (Image + Text), image-with-mountain for Image only, stacked
   rectangles for Library. SVG inherits the pill's current text colour
   so it tracks the active/inactive state automatically. */
.workshop-next .pv-ai-medium-pill .pv-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  color: currentColor;
}
.workshop-next .pv-ai-medium-pill .pv-pill-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Design layout tile picker — mini-mockup tiles instead of text
   pills. The SVG inside each tile shows the composition (Cover = full-
   bleed photo with thin chrome overlay; Card = framed card with logo
   header + image + URL footer). Active uses an outlined treatment
   rather than dark-fill so the SVG stays readable. */
.workshop-next .pv-layout-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.workshop-next .pv-layout-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 150px;
  padding: 8px 8px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.workshop-next .pv-layout-tile:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.workshop-next .pv-layout-tile.is-active {
  border-color: var(--text);
  border-width: 2px;
  padding: 7px 7px 5px;
  color: var(--text);
}
.workshop-next .pv-layout-tile-visual {
  width: 100%;
  aspect-ratio: 100 / 75;
  display: block;
  background: #f1f2f5;
  border-radius: 6px;
  overflow: hidden;
}
.workshop-next .pv-layout-tile-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.workshop-next .pv-layout-tile-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.005em;
  padding: 9px 0 3px;
}

/* Aspect tile picker — proportionally-shaped tiles instead of text
   pills. Each tile's width matches its real aspect at shared height
   so the operator sees "tall vs square vs wide" before reading the
   label inside. Selected = standard dark fill + white text, matching
   the rest of the picker family. */
.workshop-next .pv-aspect-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.workshop-next .pv-aspect-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.workshop-next .pv-aspect-tile:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.workshop-next .pv-aspect-tile.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.workshop-next .pv-aspect-tile-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.workshop-next .pv-aspect-tile-ratio {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Config group label (MEDIUM / LAYOUT / etc.) — bump from 9–10px noise
   to a properly legible label size. */
.workshop-next .pv-ai-config-group-label,
.workshop-next .pv-ai-styles-label {
  font-size: 12px !important;
  letter-spacing: 0.10em;
  margin-bottom: 10px;
}
/* Floating chevron buttons on the cards row's edges — Netflix /
   App Store affordance for horizontally-scrollable content. Anchored
   to .pv-ai-styles-row (the inner wrapper that contains ONLY the grid
   + chevrons, not the THEME eyebrow above), so `top: 50%` lands on
   the cards' true vertical midpoint. JS toggles [hidden] on each
   chevron based on scrollLeft vs scrollWidth — neither chevron shows
   when the row has no overflow. */
.workshop-next .pv-ai-styles-row {
  position: relative;
  /* Just enough horizontal padding for the chevron to sit flush
     against the cards' edge — not so much that the button looks
     marooned in white space. The chevron's 30px width means it
     covers ~12-15px of the outermost cards' corners, which is the
     standard Netflix/App Store overlap and reads as "this row
     continues," not as a separate widget. */
  padding: 0 16px;
}
.workshop-next .pv-ai-styles-chevron {
  position: absolute;
  /* Centred on the cards row only (label is outside this wrapper). */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  box-sizing: border-box;
  /* Thin white stroke so the dark circle stays defined against both the light
     column and dark thumbnails it overlaps. */
  border: 1px solid rgba(255, 255, 255, 0.9);
  /* Dark fill + white icon — sits crisply on the light page chrome
     AND on dark theme cards underneath when it overlaps. The prior
     translucent-white treatment vanished against the light column
     background. Backdrop blur kept so the edge of the button feels
     soft when it overlaps a card thumbnail. */
  background: rgba(15, 15, 20, 0.88);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  /* One soft, tight shadow instead of two stacked layers — less chunky,
     reads as a thin floating element. */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.workshop-next .pv-ai-styles-chevron svg {
  width: 13px;
  height: 13px;
  display: block;
  /* Override the JS-injected stroke-width with a thinner line so the
     glyph reads as a refined detail rather than a heavy arrow. */
  stroke-width: 1.6 !important;
}
.workshop-next .pv-ai-styles-chevron:hover {
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  transform: translateY(-50%) scale(1.06);
}
.workshop-next .pv-ai-styles-chevron:active {
  transform: translateY(-50%) scale(0.94);
}
.workshop-next .pv-ai-styles-chevron[hidden] { display: none; }
/* Straddle the row edges — the circle sits intersected on the outermost
   card's edge (≈half over the card, half in the gutter), the classic
   carousel-arrow look, rather than floating fully on top of the card. */
.workshop-next .pv-ai-styles-chevron--left  { left: -15px; }
.workshop-next .pv-ai-styles-chevron--right { right: -15px; }

/* Design style cards — keep Classic's horizontal scroller (operator
   prefers ~2 visible at a time with right-swipe to browse the rest)
   but bump card size + name label so they read at full strength in
   the wider Next column. Correct class is .pv-ai-style-cards (plural)
   — Classic builds it at line ~18128. */
.workshop-next .pv-ai-style-cards {
  /* Three cards across, each sized to (column width - 2 gaps) / 3, so
     however wide the column ends up, exactly 3 cards fit on screen. The
     horizontal scroll still works if the brand has >3 templates.
     The right-edge fade mask that used to live here was retired —
     the floating chevron buttons (.pv-ai-styles-chevron) now carry
     the "scroll for more" affordance, and the fade was unnecessarily
     dimming the third card even when no more themes existed. */
  grid-auto-columns: calc((100% - 16px) / 3) !important;
  gap: 8px !important;
  padding: 4px 4px 12px !important;
}
.workshop-next .pv-ai-style-card {
  /* No min-height — let the thumb's 4/5 aspect ratio drive the full
     card height. Otherwise a card wider than the thumb's natural height
     leaves an empty white strip below the image, visible under the name
     overlay's gradient. */
  border-radius: 12px;
}
.workshop-next .pv-ai-style-card-thumb {
  aspect-ratio: 4 / 5;
}
.workshop-next .pv-ai-style-card-name {
  font-size: 13px;
  padding: 18px 12px 12px;
  letter-spacing: 0.02em;
  -webkit-line-clamp: 2;
}
.workshop-next .pv-ai-style-card-check {
  /* Pin to bottom-right of the card. Explicit top/left:auto override
     the base stylesheet's top-left anchor so the badge doesn't end up
     in both corners. */
  top: auto;
  left: auto;
  bottom: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  font-size: 13px;
}

/* ── Drag-and-drop reorder visuals ──────────────────────────────────
   `[draggable=true]` on each card makes the whole card grabbable; the
   cursor shifts to `grab` so operators see the affordance on hover.
   `.is-dragging` dims the source while the operator moves it. The
   drop indicator is a 3px brand-accent rule rendered via ::before
   (drop-before) or ::after (drop-after) on the target sibling. */
.workshop-next .pv-ai-style-card[draggable="true"] {
  cursor: grab;
  position: relative;
}
.workshop-next .pv-ai-style-card[draggable="true"]:active {
  cursor: grabbing;
}
.workshop-next .pv-ai-style-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.workshop-next .pv-ai-style-card.is-drop-before::before,
.workshop-next .pv-ai-style-card.is-drop-after::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-accent, #ff3d00);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
  z-index: 5;
  pointer-events: none;
}
.workshop-next .pv-ai-style-card.is-drop-before::before { left: -6px; }
.workshop-next .pv-ai-style-card.is-drop-after::after  { right: -6px; }

/* Subject upload row — bigger affordance so it doesn't read as legalese. */
.workshop-next .pv-ai-subject-link,
.workshop-next .pv-ai-subject-add {
  font-size: 13.5px;
  padding: 10px 14px;
}

/* Locked banner ("+ Add context") + prompt textarea — readable size. */
.workshop-next .pv-ai-locked-banner,
.workshop-next .pv-ai-actions-bar {
  font-size: 13px;
}
.workshop-next .pv-ai-prompt {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 12px 14px;
}

/* Preview ⓘ button — make it a real button-sized hit target. */
.workshop-next .pv-ai-preview-info-btn,
.workshop-next .pv-ai-editor-preview-row button {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* ── Next Studio — subject photo attach affordance ─────────────────────
   Classic renders this as a bare text link ("+ Attach subject photo
   (optional)"). In Next's wider column it reads as forgettable — bump
   it to a real app-style drop-zone card: dashed border, image icon
   tile on the left, label + hint on the right, full-width tap target.
   Hover lifts to solid border + filled tile so it reads as actionable
   the moment the cursor approaches. Scoped to .workshop-next so
   Classic's rendering stays byte-identical. */
.workshop-next .pv-ai-subject-wrap.is-collapsed {
  margin-top: 14px;
}
.workshop-next .pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border: 1.5px dashed var(--border-strong) !important;
  background: var(--bg-elev-2) !important;
  border-radius: 10px !important;
  font: 600 13px/1.3 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease !important;
  text-align: left !important;
}
.workshop-next .pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn::before {
  content: '';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5f6e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='M3 17l5-5 4 4 3-3 6 6'/%3E%3C/svg%3E")
    center / 22px no-repeat,
    var(--bg-elev);
  border: 1px solid var(--border);
}
.workshop-next .pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn:hover {
  border-color: var(--text) !important;
  background: var(--bg-elev) !important;
  border-style: solid !important;
  transform: translateY(-1px);
}
.workshop-next .pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn:hover::before {
  background-color: var(--bg-elev-2);
  border-color: var(--text-muted);
}

/* ── Next Studio — "+ Add context" affordance as a card under Subject
   photo ────────────────────────────────────────────────────────────
   Classic hides the locked-banner ([hidden] attr) until a style locks,
   and even then it's a slim text strip. In Next we want it always
   visible so the operator knows the affordance exists, styled to match
   the new app-style subject-photo card, and positioned directly under
   it. Use flex-order on the AI editor so the banner sits below the
   subject-wrap regardless of Classic's append order. */
.workshop-next .pv-ai-editor {
  display: flex;
  flex-direction: column;
}
.workshop-next .pv-ai-editor > .pv-ai-editor-row { order: 1; }
/* Subject section (header + context prompt + photo upload) sits ABOVE
   the theme cards so the operator defines what they're rendering
   before they pick a visual treatment for it. */
.workshop-next .pv-ai-editor > .pv-ai-subject-section-header { order: 2; }
.workshop-next .pv-ai-editor > .pv-ai-locked-banner { order: 3; }
.workshop-next .pv-ai-editor > .pv-ai-prompt { order: 4; }
/* Auto-fill brief button — sits directly below the SUBJECT box (locked
   banner contains the textarea via the body-level MO). Lands between
   the banner (order 3) and the subject photo / theme cards (5–6). Uses
   the unused 4-slot since the prompt textarea is re-parented into the
   banner and never lands as a direct child of .pv-ai-editor anymore.
   The button now lives in a right-aligned .pv-ai-autofill-row wrapper
   (matches Quick Render + the caption/copy blocks); the wrapper carries
   the order so the row sits directly under the subject box. */
.workshop-next .pv-ai-editor > .pv-ai-autofill-row { order: 4; }
.workshop-next .pv-ai-editor > .pv-ai-subject-wrap { order: 5; }
.workshop-next .pv-ai-editor > .pv-ai-styles-wrap { order: 6; }
.workshop-next .pv-ai-editor > .pv-ai-infographic-form { order: 7; }
.workshop-next .pv-ai-editor > .pv-ai-editor-preview-row { order: 8; }

/* Standalone "Define your subject" section header — JS-injected sibling
   that groups the Add-context box AND the subject photo card under one
   heading. Carries the section break (border-top) so it sits visually
   above the context card. Subject-wrap's built-in ::before label is
   hidden below to prevent duplication. */
.workshop-next .pv-ai-editor > .pv-ai-subject-section-header {
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border) !important;
  padding-top: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 0;
}
.workshop-next .pv-ai-subject-wrap::before { content: none !important; }
/* Locked-banner and subject-wrap are now inside the subject group — the
   subject-section-header above provides their section break, so they
   shouldn't carry the hairline-divider rule's 14px top margin (would
   double-stack with the parent's 20px flex gap and read as a huge
   wedge of air). The locked-banner's own 1.5px dashed card border is
   left alone — only the OUTER spacing is zeroed, not the card frame. */
.workshop-next .pv-ai-editor > .pv-ai-locked-banner {
  margin-top: 0 !important;
}
.workshop-next .pv-ai-editor > .pv-ai-subject-wrap {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Force the banner visible even when Classic sets the [hidden] attr.
   Override its base "slim chip" styling with the same dashed-border
   card aesthetic as the subject-photo affordance. Inner content (the
   "+ Add context" toggle button OR the "Pick a style above" hint)
   inherits its own styling and sits as the card's label. */
.workshop-next .pv-ai-locked-banner,
.workshop-next .pv-ai-locked-banner[hidden] {
  display: flex !important;
  align-items: center !important;
  /* Left-align the card content (the "Aa" ::before tile + the label). The banner
     also carries .pv-ai-actions-bar (justify-content:flex-end); without this the
     no-style "Pick a style above to begin" hint gets pushed to the right. The
     "+ Add context" toggle uses margin-left:auto, so it still floats right. */
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  border: 1.5px dashed var(--border-strong) !important;
  background: var(--bg-elev-2) !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.workshop-next .pv-ai-locked-banner::before {
  content: 'Aa';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.workshop-next .pv-ai-locked-banner:hover {
  border-color: var(--text) !important;
  background: var(--bg-elev) !important;
  border-style: solid !important;
  transform: translateY(-1px);
}
.workshop-next .pv-ai-locked-banner:hover::before {
  background-color: var(--bg-elev-2);
  border-color: var(--text-muted);
}
/* The "+ Add context" toggle + the hint text become the card's label. */
.workshop-next .pv-ai-locked-banner .pv-ai-add-context-toggle,
.workshop-next .pv-ai-locked-banner .pv-ai-strip-hint {
  font: 600 13px/1.3 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.workshop-next .pv-ai-locked-banner .pv-ai-strip-hint { font-weight: 500 !important; color: var(--text-dim) !important; }

/* ── Next Studio — banner + prompt visually merge into one card ────────
   The DOM is now: subject-wrap, locked-banner, prompt-textarea, styles.
   When the operator toggles "+ Add context" (or medium=Infographic with a
   locked style), the prompt textarea is .pv-ai-prompt:not([hidden]) — the
   :has() selector below detects that and unifies the two elements into
   one card visually: banner loses its bottom border + bottom radius, the
   textarea inherits the same border/background and joins flush. The
   icon tile + label hide so the textarea fills the card. */
/* Subject section (header + context prompt + photo upload) sits ABOVE
   the theme cards so the operator defines what they're rendering
   before they pick a visual treatment for it. These rules must match
   the same ordering at line ~4358 — both blocks have the same
   specificity, and the later one wins, so keeping them in sync. */
.workshop-next .pv-ai-editor > .pv-ai-subject-section-header { order: 2; }
.workshop-next .pv-ai-editor > .pv-ai-locked-banner { order: 3; }
.workshop-next .pv-ai-editor > .pv-ai-prompt { order: 4; }
.workshop-next .pv-ai-editor > .pv-ai-autofill-row { order: 4; }
.workshop-next .pv-ai-editor > .pv-ai-subject-wrap { order: 5; }
.workshop-next .pv-ai-editor > .pv-ai-styles-wrap { order: 6; }
.workshop-next .pv-ai-editor > .pv-ai-infographic-form { order: 7; }
.workshop-next .pv-ai-editor > .pv-ai-editor-preview-row { order: 8; }

/* When prompt textarea is visible directly after the banner, merge them. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden])) {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* Solid border on the merged card — dashed only for the empty/inactive
     "click to add" state; once you've activated context, it's a real
     editor surface and should read as such. */
  border-style: solid !important;
  padding-bottom: 8px !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden]))::before {
  display: none !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden])):hover {
  transform: none;
}
/* The textarea becomes the bottom half of the card — same border colour,
   no top border (the banner above provides it), corners flat at the top,
   rounded at the bottom. */
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:not([hidden]) {
  border: 1.5px solid var(--border-strong) !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  background: var(--bg-elev-2) !important;
  margin-top: 0 !important;
  padding: 0 18px 14px !important;
}

/* ── Next Studio — Add context card IS the textarea ────────────────────
   No expand/collapse. The card always contains a textarea inline; click
   anywhere on the card focuses it. The "+ Add context" / "− Hide context"
   toggle button is removed since there's nothing to toggle.

   :has() detects the "active" state (toggle button present = Classic
   considers the prompt available), then forces the textarea visible AND
   strips its standalone border so it merges seamlessly into the card. */

/* When the toggle button exists, hide it — the textarea is the affordance. */
.workshop-next .pv-ai-locked-banner .pv-ai-add-context-toggle {
  display: none !important;
}

/* When the locked-banner is in toggle-state (Photo/Conceptual + style
   locked) OR the prompt textarea is already visible (Infographic + style
   locked), the textarea becomes the card's main editable surface. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt) + .pv-ai-prompt {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font: 500 13px/1.4 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
}
/* Re-style the banner as a thin frame that wraps the textarea.
   Icon tile sits on the left; textarea takes the rest of the row. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt) {
  cursor: text !important;
  align-items: flex-start !important;
}
/* When the textarea has visible content (auto-grown past min), the
   banner gets a little more padding-bottom so the typing isn't flush
   against the border. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt) {
  padding: 14px 18px !important;
}
/* Override the earlier "merge" rules — the textarea is no longer a
   separate bottom-half of the card. It lives INSIDE the card frame, so
   the banner keeps its full border and radius. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden])) {
  border-bottom: 1.5px dashed var(--border-strong) !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-style: dashed !important;
  padding-bottom: 14px !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden]))::before {
  display: flex !important; /* keep the icon tile visible */
}
/* The textarea sits BELOW the banner visually, but we want it INSIDE.
   Use negative margin to pull it up into the card, hiding its standalone
   position. Width 100% - card padding so it fits inside the icon-tile
   indent. */
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:not([hidden]) {
  margin-top: -38px !important;
  margin-left: 72px !important; /* past icon tile (40 + 14 gap + 18 padding) */
  margin-right: 18px !important;
  margin-bottom: 0 !important;
  width: calc(100% - 90px) !important;
}

/* ── OVERRIDE — final pass for Add context card ───────────────────────
   Reset the negative-margin overlay approach above. The desired UX:
   - Card always shows icon + textarea (no expand/collapse, no toggle
     button visible).
   - Textarea sits as a borderless inline edit field where the "+ Add
     context" label used to be. Compact by default; auto-grows as the
     operator types.
   - Click anywhere on the card (icon, padding, or textarea) focuses
     the textarea so they "start typing within the same box." */
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:not([hidden]) {
  /* Wipe the negative-margin overlay so the textarea reads as a normal
     element below the banner — but borderless so it merges visually. */
  margin: 0 !important;
  width: 100% !important;
  border: 1.5px dashed var(--border-strong) !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  background: var(--bg-elev-2) !important;
  padding: 0 18px 14px !important;
  min-height: 40px !important;
  resize: none !important;
  font: 500 13px/1.5 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
  cursor: text !important;
  outline: none !important;
}
/* Banner is the top half — keeps dashed border on top sides, loses
   bottom border + corners so textarea joins flush. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt) {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-style: dashed !important;
  padding-bottom: 8px !important;
  cursor: text !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt)::before {
  display: block !important; /* icon stays visible */
}
/* When the textarea is focused, switch the whole card to solid border
   so it reads as actively-editing rather than empty placeholder. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:focus-within),
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:focus {
  border-color: var(--text) !important;
  border-style: solid !important;
  background: var(--bg-elev) !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:focus-within)::before {
  background-color: var(--bg-elev-2);
  border-color: var(--text-muted);
}

/* ── DEFINITIVE OVERRIDE — Add context as a single compact row ─────────
   Previous attempts left specificity conflicts; this block wins by
   using the same :has() chains the conflicting rules used. The card is
   one row: icon | textarea. Borders unify into one frame. Compact min
   height. */

/* Banner = top half of card. No bottom border, no bottom corners. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:not([hidden])),
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt) {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-style: dashed !important;
  padding: 12px 18px 4px !important;
  margin-bottom: 0 !important;
}
/* Textarea = bottom half of card. No top border, sits flush. */
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:not([hidden]) {
  border: 1.5px dashed var(--border-strong) !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  background: var(--bg-elev-2) !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 0 18px 12px !important;
  min-height: 28px !important;
  resize: none !important;
  font: 500 13px/1.5 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
  cursor: text !important;
  outline: none !important;
}
/* Focused state — solid border across both halves. */
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:focus) {
  border-color: var(--text) !important;
  border-style: solid !important;
  background: var(--bg-elev) !important;
}
.workshop-next .pv-ai-locked-banner + .pv-ai-prompt:focus {
  border-color: var(--text) !important;
  border-style: solid !important;
  background: var(--bg-elev) !important;
}
.workshop-next .pv-ai-locked-banner:has(+ .pv-ai-prompt:focus)::before {
  background-color: var(--bg-elev-2);
  border-color: var(--text-muted);
}

/* ── Add context — textarea is now a CHILD of the banner ──────────────
   The previous sibling-merge rules don't apply (textarea isn't a sibling
   anymore). Banner is a single card; textarea sits as a flex child to
   the right of the icon ::before tile. */
.workshop-next .pv-ai-locked-banner {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 18px !important;
}
.workshop-next .pv-ai-locked-banner > .pv-ai-prompt:not([hidden]) {
  flex: 1 1 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 24px !important;
  outline: none !important;
  resize: none !important;
  font: 500 13px/1.4 'Manrope', system-ui, sans-serif !important;
  color: var(--text) !important;
  cursor: text !important;
  border-radius: 0 !important;
}
.workshop-next .pv-ai-locked-banner > .pv-ai-prompt:focus {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
}
/* When textarea is focused, the whole card switches to solid border. */
.workshop-next .pv-ai-locked-banner:has(> .pv-ai-prompt:focus) {
  border-color: var(--text) !important;
  border-style: solid !important;
  background: var(--bg-elev) !important;
}
.workshop-next .pv-ai-locked-banner:has(> .pv-ai-prompt:focus)::before {
  background-color: var(--bg-elev-2);
  border-color: var(--text-muted);
}

/* ── Strip remaining browser defaults from the inline textarea + hide
   the icon tile once the operator starts typing (or focuses). The
   appearance:none override is the key one — macOS Safari/Chrome render
   a subtle rounded rectangle around textareas by default; without
   appearance:none it leaks through even when border + background are
   transparent. */
.workshop-next .pv-ai-locked-banner > .pv-ai-prompt {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* The "Aa" icon tile stays visible at all times — empty, focused, AND while
   typing — so the field reads consistently (it previously vanished on
   focus/type). The textarea simply sits to its right. */

/* Baseline card height so the empty and typed states read at the same size
   (a generous box rather than collapsing to the icon tile's height). */
.workshop-next .pv-ai-locked-banner {
  min-height: 68px !important;
}

/* Give the textarea the same 40px row height as the icon tile so the two sit
   on a matching baseline and the input stays a comfortable click target. */
.workshop-next .pv-ai-locked-banner > .pv-ai-prompt:not([hidden]) {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* Stop the banner from translating on hover — the hover lift is fine
   for the empty card but reads as "card moved down" when the operator
   clicks and the cursor stays in place. */
.workshop-next .pv-ai-locked-banner:hover {
  transform: none !important;
}

/* ── Infographic brief variant ────────────────────────────────────────
   When the locked-banner holds the Infographic hint (style locked +
   medium=Infographic), the textarea is the brief content — not an
   optional "add context" affordance. Different layout: bigger textarea,
   no icon tile, no hint span (the placeholder carries the guidance). */
.workshop-next .pv-ai-locked-banner.is-infographic-brief {
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 140px !important;
  padding: 14px 18px !important;
  gap: 0 !important;
}
.workshop-next .pv-ai-locked-banner.is-infographic-brief::before {
  display: none !important;
}
.workshop-next .pv-ai-locked-banner.is-infographic-brief .pv-ai-strip-hint {
  display: none !important;
}
.workshop-next .pv-ai-locked-banner.is-infographic-brief > .pv-ai-prompt {
  min-height: 100px !important;
  display: block !important;
  align-items: stretch !important;
  padding: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* ── Inject "Define your subject" label above the attach-subject-photo
   card. Classic ships a "Subject photo" label that only shows when a
   photo is attached; in Next we want a section title visible ALWAYS so
   the operator knows what the card is for. Hide Classic's label to
   avoid a duplicate when a photo gets attached. */
.workshop-next .pv-ai-subject-wrap::before {
  content: 'Define your subject';
  display: block;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.workshop-next .pv-ai-subject-label {
  display: none !important;
}

/* Bump padding-top on the subject-wrap and styles-wrap so the
   "Define your subject" / "Design style" titles aren't cramped against
   the separator line directly above them. Margin-top zeroed (Classic
   adds 14px there as part of its hairline-divider rule) so the pill rows
   above don't sit on a wide sea of empty space. */
.workshop-next .pv-ai-editor > .pv-ai-styles-wrap {
  padding-top: 18px !important;
  margin-top: 0 !important;
}
/* Subject-wrap is now inside the subject group (under the standalone
   section header), so it doesn't carry its own padding-top — the header
   above provides all the breathing room. Without this override the
   earlier rule's 18px lands inside the wrap and reads as a wedge of
   air between the context card and the photo attach card. */
.workshop-next .pv-ai-editor > .pv-ai-subject-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* More breathing room between the "Define your subject" / "Design style"
   titles and the content underneath them. */
.workshop-next .pv-ai-subject-wrap::before { margin-bottom: 18px !important; }
.workshop-next .pv-ai-styles-label,
.workshop-next .pv-ai-config-group-label { margin-bottom: 18px !important; }

/* Fix toolbar buttons + selects clipping vertically — 28px was too
   tight for the default line-height. Bump to 32px and set an explicit
   line-height so text sits centered without clipping. */
.workshop-next .mockup-tool {
  height: 32px !important;
  line-height: 30px !important;
  font-size: 12px !important;
}
.workshop-next .mockup-tool--select {
  height: 32px !important;
  line-height: 30px !important;
}
.workshop-next .mockup-toolbar { align-items: center; }

/* Final fix — selects + buttons in the mockup toolbar were clipping
   text because <select> ignores line-height for vertical centering.
   Drop the explicit height and let symmetric padding define the box;
   the text then naturally centers within the padded area. */
.workshop-next .mockup-tool {
  height: auto !important;
  line-height: 1 !important;
  padding: 8px 10px !important;
}
.workshop-next .mockup-tool--select {
  height: auto !important;
  line-height: 1 !important;
  padding: 8px 26px 8px 10px !important;
}

/* Image direction title row — title on the left, ⓘ prompt-preview
   button on the right edge of the control block. */
.workshop-next .control-block-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.workshop-next .control-block-title-row .control-block-title { margin: 0; }
.workshop-next .control-block-title-row .mockup-tool {
  flex-shrink: 0;
}
/* Post text header: the Long/Short toggle moved into the title row (replaces the
   old full-width banner). Tighten the row so the commitment caption sits just
   under it, and shrink the pills to header scale. */
.workshop-next .post-text-head { margin-bottom: 6px !important; }
.workshop-next .post-text-head .mockup-toolbar-pills { gap: 6px; }
.workshop-next .post-text-head .mockup-tool { height: 34px; padding: 0 15px; font-size: 12.5px; }
.workshop-next .post-text-commit { text-align: right; margin: 0 0 22px; }

/* Hide Classic's own prompt-preview button — we've moved that affordance
   up beside the "Image direction" title so the operator finds it
   alongside the controls that affect the prompt. Two of the same button
   would just confuse. */
.workshop-next .pv-ai-editor > .pv-ai-editor-preview-row {
  display: none !important;
}

/* Back-to-Library button — flex column stretches it full width by
   default, then the browser's user-agent button text-align centers
   the label. Align-self stops the stretch so the button hugs its text
   and sits flush with the title's left edge. */
.ws-next-head-lhs .btn-back-library {
  align-self: flex-start;
}

/* ── Platform pills — brand-coloured tabs with logos ─────────────────
   Each pill carries the platform's SVG glyph + label. The active state
   adopts the platform's brand colour so the operator instantly knows
   which platform they're editing. Inactive pills stay quiet (grey
   text, transparent background) so the active one is the focal point. */
.workshop-next .platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Brand-tinted chip behind the platform logo. Same color-mix
   treatment as activated format icons, so the pill reads as branded
   even when inactive — and the head section rhymes visually with
   the activated-format badges on the right. */
.workshop-next .platform-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 12%, transparent);
  color: var(--pill-accent, var(--text));
  flex-shrink: 0;
}
.workshop-next .platform-pill-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* LinkedIn — brand blue */
.workshop-next .platform-pill--linkedin.active {
  background: #0a66c2 !important;
  color: #ffffff !important;
}
/* X — solid black (matches its current branding) */
.workshop-next .platform-pill--x.active {
  background: #000000 !important;
  color: #ffffff !important;
}
/* Instagram — multi-stop gradient (yellow → pink → purple) */
.workshop-next .platform-pill--instagram.active {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ── Platform pills v2 — segmented control with outlined active state ─
   Full-width tab bar feel: each pill grows to fill 1/3 of the row,
   box-shaped with rounded corners. Active state is OUTLINE-only — the
   brand colour paints the border + icon + text, never a full fill.
   More mature than the prior splash-fill design. */
.workshop-next .platform-nav-inner {
  gap: 10px !important;
  padding: 14px 48px !important;
}
.workshop-next .platform-pill {
  flex: 1 1 0 !important;
  justify-content: center !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-elev) !important;
  color: var(--text-dim) !important;
  font: 500 14px/1 'Manrope', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease !important;
}
.workshop-next .platform-pill:hover {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  background: var(--bg-elev) !important;
}
/* Active = soft tint + lift (no hard ring). A faint brand-tinted wash +
   brand-colored label + a soft brand-tinted shadow raises the selected
   card. Border stays 1px so the box doesn't change size between
   active/inactive — no padding compensation needed. One rule covers all
   three platforms via --pill-accent (set per platform below). */
.workshop-next .platform-pill.active {
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--pill-accent, var(--text)) 22%, transparent) !important;
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 7%, var(--bg-elev)) !important;
  color: var(--pill-accent, var(--text)) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pill-accent, var(--text)) 18%, transparent) !important;
}
/* X's accent is pure black — keep its label theme-readable (var(--text))
   so it isn't an invisible black-on-dark in dark mode. */
.workshop-next .platform-pill--x.active {
  color: var(--text) !important;
}

/* Taller pills + force full-width stretch. The parent had overflow-x:
   auto which gave the row a "fits-content" feel rather than stretching
   to fill — overriding to visible so the flex children spread. */
.workshop-next .platform-nav-inner {
  overflow: visible !important;
  width: 100%;
}
.workshop-next .platform-pill {
  padding: 32px 22px !important;
  font-size: 14.5px !important;
  flex: 1 1 0 !important;
}
.workshop-next .platform-pill.active {
  padding: 32px 22px !important; /* match inactive — border no longer bumps */
}
/* Dark mode — a colored glow reads as neon on a dark canvas, so swap to
   a neutral depth shadow, lift the tint (7% vanishes over a dark elev),
   and brighten the brand label so it stays legible on the dark surface. */
[data-theme="dark"] .workshop-next .platform-pill.active {
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 16%, var(--bg-elev)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .workshop-next .platform-pill--linkedin.active  { color: #58a6e8 !important; }
[data-theme="dark"] .workshop-next .platform-pill--instagram.active { color: #ff6196 !important; }
[data-theme="dark"] .workshop-next .platform-pill--x.active         { color: var(--text) !important; }

/* Trim the platform-nav side padding so the pills stretch closer to
   the edges instead of sitting inset 48px from either side. */
.workshop-next .platform-nav-inner {
  padding: 14px 16px !important;
}

/* ── Format icons inside each platform pill ──
   Each pill carries logo+label on the left and a row of one icon per
   sub-format on the right. Clicking the pill body switches platform
   (preserving its remembered format); clicking a format icon jumps
   directly to that (platform, format) cell. The active format icon
   lights up with the platform's brand accent — only inside the active
   pill, so the bar reads "this cell is live" at a glance. */
.workshop-next .platform-pill {
  justify-content: space-between !important;
  gap: 14px !important;
}
.workshop-next .platform-pill-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.workshop-next .platform-pill-formats {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Segmented track — on the active pill the three format options live
   inside a soft brand-tinted rectangle so they read as one "pick a
   format" control instead of a filled chip floating beside two loose
   icons. The active chip (below) stays the loud focal point, now seated
   inside it. Scoped to .active so inactive pills keep their light
   icon-only row. */
.workshop-next .platform-pill.active .platform-pill-formats {
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 12%, transparent);
}
[data-theme="dark"] .workshop-next .platform-pill.active .platform-pill-formats {
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 22%, transparent);
}
/* Non-selected formats inside the active track — resting slots. Each gets
   a raised surface fill + a faint brand-tinted inset edge so all three
   read as distinct tappable buttons, not just the selected one. Icon
   bumps from --text-dim to --text-muted for the same reason. The selected
   chip keeps its brand fill + white icon (excluded via :not). */
.workshop-next .platform-pill.active .platform-pill-format:not(.active) {
  color: var(--text-muted);
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-accent, var(--text)) 14%, transparent);
}
.workshop-next .platform-pill.active .platform-pill-format:not(.active):hover {
  color: var(--text);
  background: color-mix(in srgb, var(--pill-accent, var(--text)) 10%, var(--bg-elev));
}
.workshop-next .platform-pill-format {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.workshop-next .platform-pill-format:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .workshop-next .platform-pill-format:hover {
  background: rgba(255, 255, 255, 0.06);
}
.workshop-next .platform-pill-format svg { display: block; width: 16px; height: 16px; }
.workshop-next .platform-pill-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Tick badge — anchored to the top-right corner of the icon, only
   visible when the section is activated. Status indicator, not a
   selection signal: doesn't compete with the `.active` cell's strong
   brand-color background. The white outer ring lifts the badge off
   the icon underneath so it reads on any background. */
.workshop-next .platform-pill-format-check {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pill-accent, var(--brand-accent, #ff3d00));
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg, #fff);
  pointer-events: none;
}
.workshop-next .platform-pill-format-check svg {
  width: 7px;
  height: 7px;
}
.workshop-next .platform-pill-format.activated .platform-pill-format-check {
  display: inline-flex;
}
/* Activated, no background tint — the corner tick is the signal.
   Icon color stays neutral so the bar reads calmly across many
   activated cells. */
.workshop-next .platform-pill-format.activated {
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
}
/* Currently-viewing format — the loud signal. Full brand-color fill
   with a white icon so your eye lands on it instantly. Wins over
   the activated treatment for the background; the tick still shows
   on top so you can see both states at once. */
.workshop-next .platform-pill-format.active {
  background: var(--pill-accent, var(--text));
  color: #fff;
  border-radius: 8px;
}
.workshop-next .platform-pill-format.active:hover {
  background: var(--pill-accent, var(--text));
  color: #fff;
}
[data-theme="dark"] .workshop-next .platform-pill-format.active {
  background: var(--pill-accent, var(--text));
  color: #fff;
}
/* When the cell is both active AND activated, the tick badge's white
   ring becomes invisible against the brand-color background — swap
   to a contrasting ring so the badge stays legible. */
.workshop-next .platform-pill-format.active .platform-pill-format-check {
  background: #fff;
  color: var(--pill-accent, var(--text));
  box-shadow: 0 0 0 2px var(--pill-accent, var(--text));
}
/* Per-platform accent var on the base selector so .activated icons
   pick up the right color whether the pill is active or not. */
.workshop-next .platform-pill--linkedin  { --pill-accent: #0a66c2; }
.workshop-next .platform-pill--x         { --pill-accent: #000000; }
.workshop-next .platform-pill--instagram { --pill-accent: #E1306C; }

/* Align the platform-nav and platform-section content edges with the
   ws-next-head card. The header has 32px internal padding; before this
   the nav-inner had 16px and the section had 48px — each starting at a
   different horizontal position. Matching to 32px puts all three on
   the same vertical edge lines (left + right). */
/* Horizontal padding dropped to 0 so the pill cards' outer edges align
   with the header card's outer edges (both at the .workshop-next
   container's left/right boundaries). Vertical padding preserved. */
.workshop-next .platform-nav-inner {
  padding: 14px 0 !important;
}
/* Top padding deliberately small — the .platform-nav-inner above already
   contributes 14px of bottom padding inside its container. With section
   top padding at 6px, the total visible gap from the platform pills to
   the Long/Short toolbar (14 + 6 = 20px) matches the 20px row-gap
   between the toolbar and the columns below it. */
.workshop-next .platform-section {
  padding: 6px 0 56px !important;
}

/* Match platform-section outer width to the header/nav so all three
   align flush. Section's border-bottom hairline sits on the same edge
   as the header card. */
.workshop-next .platform-section {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* ── Instagram post chrome ───────────────────────────────────────────
   IG-style mockup: round avatar + username + ⋯ menu on top, then the
   image (square), then ♡ 💬 ↗ action row + 🔖 bookmark, then the like
   count + caption (username bold + text) underneath. */
.workshop-next .ig-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.workshop-next .ig-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.workshop-next .ig-post-head-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.workshop-next .ig-post-username {
  font: 600 13.5px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.workshop-next .ig-post-location { font: 400 11.5px/1.2 'Manrope', system-ui, sans-serif; color: var(--text-muted); }
.workshop-next .ig-post-more { color: var(--text-dim); font-size: 18px; padding: 0 4px; cursor: pointer; }

/* IG image area is square 1:1, not 4:5 like LinkedIn. */
.workshop-next .li-post-image--instagram { aspect-ratio: 1/1; }
/* IG container honors the operator's aspect pick. The wrapper
   `.pv-ig-image` carries data-aspect set by buildInstagramPreview;
   when 4:5 portrait is picked, the inner image container needs to
   match — otherwise a portrait render gets squeezed into a 1:1 box
   with dark letterbox bars top/bottom. */
.workshop-next .pv-ig-image[data-aspect="4:5"] .li-post-image--instagram {
  aspect-ratio: 4 / 5;
}
.workshop-next .pv-ig-image[data-aspect="1:1"] .li-post-image--instagram {
  aspect-ratio: 1 / 1;
}

/* Carousel slot empty state — fills the slot and centers the label
   + Render button vertically. Without this they sit at the top of
   the now-aspect-sized slot with empty space below. */
.workshop-next .pv-carousel-slot > .pv-img-slot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* Slide image fills the slot completely so object-position has room
   to work for per-slide repositioning (ai_full source). Absolute
   positioning keeps the chrome (counter / arrows / dots / overlay)
   layered on top without affecting their positions. */
.workshop-next .pv-carousel-slot > .pv-img-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carousel slot honors the aspect picked. Without an explicit
   aspect-ratio on the slot, the rendering state collapses to the
   overlay's content size (a tiny dark box floating in the post's
   blank image area). Sizing the slot to the parent's data-aspect
   gives the rendering overlay a stable, proportional canvas to fill. */
.workshop-next .pv-li-image > .pv-carousel-slot,
.workshop-next .pv-ig-image > .pv-carousel-slot,
.workshop-next .pv-x-image  > .pv-carousel-slot {
  width: 100%;
}
.workshop-next .pv-li-image[data-aspect="4:5"]    > .pv-carousel-slot,
.workshop-next .pv-ig-image[data-aspect="4:5"]    > .pv-carousel-slot,
.workshop-next .pv-x-image[data-aspect="4:5"]     > .pv-carousel-slot { aspect-ratio: 4 / 5; }
.workshop-next .pv-li-image[data-aspect="1:1"]    > .pv-carousel-slot,
.workshop-next .pv-ig-image[data-aspect="1:1"]    > .pv-carousel-slot,
.workshop-next .pv-x-image[data-aspect="1:1"]     > .pv-carousel-slot { aspect-ratio: 1 / 1; }
.workshop-next .pv-li-image[data-aspect="1.91:1"] > .pv-carousel-slot,
.workshop-next .pv-x-image[data-aspect="1.91:1"]  > .pv-carousel-slot { aspect-ratio: 1.91 / 1; }

.workshop-next .ig-post-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
}
.workshop-next .ig-post-actions-left { display: flex; gap: 16px; }
.workshop-next .ig-action {
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.workshop-next .ig-post-likes {
  padding: 0 16px 4px;
  font: 600 13px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.workshop-next .ig-post-caption {
  padding: 4px 16px 16px;
  font: 400 13.5px/1.5 'Manrope', system-ui, sans-serif;
  color: var(--text);
  white-space: pre-wrap;
}
.workshop-next .ig-post-caption-user {
  font-weight: 600;
}

/* ── X post chrome ──────────────────────────────────────────────────
   X (Twitter) layout: avatar + name + verified + @handle + · timestamp
   in a single row up top; caption below; then image (4:5 ratio); then
   an icon row with reply / retweet / like / views / share. */
.workshop-next .x-post-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 8px;
}
.workshop-next .x-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Manrope', system-ui, sans-serif;
  flex-shrink: 0;
}
.workshop-next .x-post-head-meta { flex: 1; min-width: 0; }
.workshop-next .x-post-name-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.workshop-next .x-post-name {
  font: 700 14.5px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.workshop-next .x-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #1d9bf0;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-right: 2px;
}
.workshop-next .x-post-handle,
.workshop-next .x-post-sep,
.workshop-next .x-post-time {
  font: 400 13.5px/1.2 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
}
.workshop-next .x-post-more { color: var(--text-dim); font-size: 18px; padding: 0 4px; cursor: pointer; align-self: flex-start; }

.workshop-next .x-post-caption {
  padding: 0 16px 12px 68px;
  font: 400 14px/1.45 'Manrope', system-ui, sans-serif;
  color: var(--text);
  white-space: pre-wrap;
}

.workshop-next .x-post-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 12px 68px;
  gap: 16px;
  border-top: 1px solid var(--border);
}
.workshop-next .x-action {
  font: 500 12.5px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* ── Stretch Classic's social-platform previews to fill Next's mockup
   wrap. Classic sizes them for a tighter panel; in Next there's more
   room and the user wants the preview to actually claim it. */
.workshop-next .mockup-wrap > .pv-li,
.workshop-next .mockup-wrap > .pv-ig,
.workshop-next .mockup-wrap > .pv-x {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* X post header — name, handle, timestamp left, ⋯ menu pushed to the
   far right edge so it reads like a real Twitter/X post. */
.pv-x-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pv-x-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
/* Mockup-wrap was carrying its own border + shadow + radius (the outer
   card). When the platform preview is INSIDE it, that outer chrome
   double-stacks with the preview's own card chrome. Make mockup-wrap
   a transparent shell — only the toolbar lives in it directly, the
   preview brings its own card look. */
.workshop-next .mockup-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.workshop-next .mockup-toolbar {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  margin-bottom: 16px;
}