/* ============================================================
   Chief of Staff — design tokens & base
   ============================================================ */
:root {
  /* Set to pixels by the shared viewport guard. The fallbacks keep first paint
     stable before JavaScript runs. */
  --app-height: 100dvh;
  --visual-viewport-height: 100dvh;
  --visual-viewport-top: 0px;
  --keyboard-inset: 0px;

  /* surfaces (cool near-black) */
  --bg-0: oklch(0.155 0.012 264);
  --bg-1: oklch(0.205 0.013 266);
  --bg-2: oklch(0.245 0.014 266);
  --glass: oklch(0.25 0.014 266 / 0.65);
  --glass-2: oklch(0.285 0.015 266 / 0.6);
  --hair: oklch(1 0 0 / 0.13);
  --hair-2: oklch(1 0 0 / 0.08);
  --hair-bright: oklch(1 0 0 / 0.22);

  /* text */
  --t-hi: oklch(0.975 0.004 264);
  --t-mid: oklch(0.74 0.012 266);
  --t-low: oklch(0.56 0.013 266);
  --t-dim: oklch(0.45 0.012 266);

  /* accents */
  --accent: oklch(0.62 0.22 262);
  --accent-bright: oklch(0.70 0.20 262);
  --accent-deep: oklch(0.42 0.22 262);
  --accent-soft: oklch(0.62 0.22 262 / 0.12);
  /* r,g,b twin of the accent for rgba() alpha compositing where color-mix is impractical */
  --accent-rgb: 91,140,255;

  --green: oklch(0.70 0.08 158);
  --green-soft: oklch(0.70 0.08 158 / 0.10);
  --amber: oklch(0.74 0.075 78);
  --amber-soft: oklch(0.74 0.075 78 / 0.10);
  --danger: oklch(0.68 0.13 28);
  --danger-soft: oklch(0.68 0.13 28 / 0.10);
  --weather: oklch(0.72 0.055 78);
  --weather-soft: oklch(0.72 0.055 78 / 0.08);

  /* platform brand identity (external logos), as r,g,b triples for rgba() alpha compositing.
     The one legitimate exception to the token palette — kept here so it is documented and
     never scattered as ad-hoc hex through the Clip Engine. */
  --platform-instagram: 245,105,153;
  --platform-tiktok: 65,221,218;
  --platform-youtube: 255,92,92;
  --platform-facebook: 82,153,246;
  --platform-linkedin: 80,163,224;

  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.07) inset, 0 24px 60px -32px oklch(0 0 0 / 0.85);
  --shadow-pop: 0 1px 0 0 oklch(1 0 0 / 0.08) inset, 0 30px 70px -24px oklch(0 0 0 / 0.9);

  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;

  /* ---- spacing scale (4px base) ----
     Adopted by Dashboard surfaces. Content Studio and Clip Engine still carry
     their own literals; convert those separately, not as a side effect here. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- dashboard shell ---- */
  --dash-page-pad-x: clamp(16px, 3vw, 40px);
  --dash-page-pad-top: var(--space-5);
  --dash-page-pad-bottom: var(--space-10);
  --dash-section-gap: var(--space-6);
  --dash-grid-gap: var(--space-4);
  --dash-max-width: 1440px;
  --dash-header-pad-y: 14px;

  /* ---- widget internals. Padding tiers are chosen by container width,
     not viewport width, so a narrow widget on a wide screen stays readable. */
  --widget-pad-sm: var(--space-4);
  --widget-pad-md: var(--space-5);
  --widget-pad-lg: var(--space-6);
  --widget-header-h: 32px;
  --widget-body-gap: var(--space-3);

  /* ---- control heights. --tap-min is the WCAG 2.5.8 target floor. ---- */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 44px;
  --tap-min: 44px;

  /* ---- type scale. No fractional sizes: the old 9.5/10.5/11.5/12.5/13.5px
     values rendered on subpixel boundaries and never formed a scale. */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 25px;
  --text-3xl: 32px;

  /* ---- focus. Near-white rather than accent: it has to read against the accent
     fill on primary buttons as well as against the dark surfaces. ---- */
  --focus-ring-color: var(--t-hi);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- layering. Replaces the ad hoc 0..4001 spread. ---- */
  --z-base: 1;
  --z-raised: 20;
  --z-sticky: 80;
  --z-header: 200;
  --z-launcher: 260;
  --z-drawer: 400;
  --z-modal: 600;
  --z-toast: 800;

  /* ---- breakpoints. Kept in sync with DASH_BREAKPOINTS in ui.jsx.
     Values are documentation only: CSS cannot use var() in media queries. ---- */
  --bp-sm: 560px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; width: 100%; background: var(--bg-0); overscroll-behavior: none; }
body {
  font-family: var(--font-ui);
  color: var(--t-hi);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#root { height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); width: 100%; max-width: 100%; overflow-x: clip; animation: fadeIn 0.3s var(--ease) both; }

.seg-shell { margin-right: 2px; }
.seg-btn { text-decoration: none; }

/* ============================================================
   Content Studio
   ============================================================ */
.cs-input, .cs-textarea, .cs-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--font-ui);
  color: var(--t-hi);
  background: oklch(0.19 0.014 266 / 0.8);
  border: 1px solid var(--hair-bright);
  border-radius: var(--radius-xs);
  color-scheme: dark; /* native date/time pickers render dark + readable */
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.cs-input::placeholder, .cs-textarea::placeholder { color: color-mix(in oklch, var(--t-dim) 76%, var(--t-mid)); }
.cs-input:focus, .cs-textarea:focus, .cs-select:focus {
  outline: none;
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: oklch(0.225 0.014 266 / 0.8);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 18%, transparent);
}
.cs-textarea { resize: vertical; line-height: 1.65; }
.cs-select { cursor: pointer; }
/* Full-viewport scrim — makes the filter read as an overlay floating over
   everything, and nothing in the page reflows. Portaled to <body>. */
.cs-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: oklch(0.12 0.01 266 / 0.5);
  animation: csFade 0.15s var(--ease) both;
}
@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes csPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cs-mini-seg .seg-btn { padding: 7px 12px; font-size: 12px; min-height: 34px; }
/* An open select must out-stack its sibling selects, or a later select's button
   paints over this one's popover (both are position:relative with auto z-index). */
.cs-menu.open {
  z-index: 40;
}
/* Multi-select rows: leading checkbox, left-aligned, no trailing check. */
.cs-menu-popover.multi {
  max-height: 260px;
  overflow-y: auto;
}

/* table view — quiet, editorial, not a BI grid */
.cs-table-wrap {
  display: grid;
  gap: 10px;
}

/* stage pip — derived stage as a small progress reading, no color-coding overload */
.cs-stage-track { display: inline-flex; gap: 3px; align-items: center; }

/* ---- Clip Engine ---- */
.clip-engine {
  display: grid;
  gap: 18px;
  padding-top: 12px;
}
.clip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 34%),
    linear-gradient(135deg, oklch(0.19 0.018 258 / 0.92), oklch(0.13 0.012 270 / 0.96));
  box-shadow: 0 24px 70px -48px oklch(0 0 0 / 0.9);
}
.clip-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}
.clip-hero h1 {
  margin: 0;
  color: var(--t-hi);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.94;
  letter-spacing: 0;
}
.clip-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--t-mid);
  font-size: 15px;
  line-height: 1.55;
}
.clip-eyebrow {
  font: 700 10.5px var(--font-mono);
  color: var(--accent-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.clip-primary-btn {
  background: var(--accent);
  border-color: transparent;
  color: var(--t-hi);
  font-weight: 700;
}
.clip-action-btn {
  font-size: 12.5px;
  font-weight: 650;
}
.clip-hermes-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hair-bright);
  border-radius: 12px;
  background: oklch(1 0 0 / 0.055);
}
.clip-orb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 30%, transparent);
  color: var(--t-hi);
  box-shadow: 0 0 36px color-mix(in oklch, var(--accent) 42%, transparent);
  font: 800 22px var(--font-serif);
}
.clip-hermes-card div:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.clip-hermes-card span,
.clip-hermes-card small {
  color: var(--t-dim);
  font-size: 12px;
}
.clip-hermes-card strong {
  color: var(--t-hi);
  font-size: 15px;
  line-height: 1.35;
}
.clip-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.clip-stat {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-stat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--accent-bright);
  background: var(--accent-soft);
}
.clip-stat div:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.clip-stat span,
.clip-stat small {
  color: var(--t-dim);
  font-size: 11.5px;
  line-height: 1.35;
}
.clip-stat strong {
  color: var(--t-hi);
  font: 760 22px var(--font-mono);
}
.clip-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  gap: 16px;
  align-items: start;
}
.clip-main,
.clip-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.clip-section,
.clip-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.clip-panel {
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: oklch(1 0 0 / 0.035);
}
.clip-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.clip-section-head h2 {
  margin: 3px 0 0;
  color: var(--t-hi);
  font-size: 17px;
  letter-spacing: 0;
}
.clip-contract-pill,
.clip-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t-dim);
  background: oklch(1 0 0 / 0.04);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.clip-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.clip-campaign-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.clip-provider {
  color: var(--t-low);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-campaign-card h3,
.clip-approval h3 {
  margin: 3px 0 0;
  color: var(--t-hi);
  font-size: 15px;
  line-height: 1.25;
}
.clip-status.active,
.clip-status.approval,
.clip-status.ready {
  color: var(--green);
  border-color: color-mix(in oklch, var(--green) 35%, transparent);
  background: color-mix(in oklch, var(--green) 10%, transparent);
}
.clip-status.review,
.clip-status.reasoning,
.clip-status.rendering,
.clip-status.needs-review {
  color: var(--accent-bright);
  border-color: color-mix(in oklch, var(--accent) 36%, transparent);
  background: var(--accent-soft);
}
.clip-status.failed {
  color: oklch(0.76 0.18 28);
  border-color: oklch(0.58 0.16 28 / 0.45);
  background: oklch(0.58 0.16 28 / 0.12);
}
.clip-status.paused {
  color: var(--t-low);
}
.clip-campaign-meta,
.clip-card-economics,
.clip-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--t-dim);
  font-size: 11.5px;
}
.clip-campaign-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.clip-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clip-platforms span {
  padding: 4px 7px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t-mid);
  background: oklch(1 0 0 / 0.035);
  font-size: 11px;
}
.clip-profile-assignment {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hair-2);
  border-radius: 9px;
  background: oklch(1 0 0 / 0.035);
}
.clip-profile-assignment div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.clip-profile-assignment strong,
.clip-profile-assignment small {
  overflow-wrap: anywhere;
}
.clip-profile-assignment strong {
  color: var(--t-hi);
  font-size: 12px;
}
.clip-profile-assignment small {
  color: var(--t-low);
  font-size: 11.5px;
}
.clip-profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t-hi);
  background: oklch(1 0 0 / 0.04);
  font: 800 10px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.clip-profile-badge.creator {
  color: oklch(0.78 0.16 42);
  border-color: oklch(0.66 0.15 42 / 0.45);
  background: oklch(0.66 0.15 42 / 0.11);
}
.clip-profile-badge.brand {
  color: var(--accent-bright);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}
.clip-profile-badge.authority {
  color: oklch(0.78 0.08 292);
  border-color: oklch(0.64 0.1 292 / 0.45);
  background: oklch(0.64 0.1 292 / 0.12);
}
.clip-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.clip-card-grid div {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--hair-2);
}
.clip-card-grid span {
  color: var(--t-low);
  font-size: 10.5px;
}
.clip-card-grid strong {
  color: var(--t-hi);
  font: 720 17px var(--font-mono);
}
.clip-profile-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.clip-profile-card {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-profile-card p {
  margin: 0;
  color: var(--t-dim);
  font-size: 12.5px;
  line-height: 1.45;
}
.clip-param-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.clip-param-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: oklch(1 0 0 / 0.03);
}
.clip-param-grid span {
  color: var(--t-low);
  font-size: 10px;
}
.clip-param-grid strong {
  color: var(--t-hi);
  font: 720 13px var(--font-mono);
}
.clip-classification-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--accent) 34%, transparent);
  border-radius: 11px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 42%),
    oklch(1 0 0 / 0.04);
}
.clip-classification-card div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.clip-classification-card span,
.clip-classification-card small {
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.4;
}
.clip-classification-card strong {
  color: var(--t-hi);
  font-size: 17px;
}
.clip-confidence-ring {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklch, var(--accent) 48%, transparent);
  border-radius: 999px;
  color: var(--accent-bright);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  box-shadow: 0 0 28px color-mix(in oklch, var(--accent) 22%, transparent);
  font: 800 14px var(--font-mono);
}
.clip-table {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.clip-table-row {
  display: grid;
  grid-template-columns: 92px minmax(180px, 1fr) 118px minmax(150px, 0.9fr) 70px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border-top: 1px solid var(--hair-2);
  color: var(--t-mid);
  font-size: 12px;
}
.clip-table-row:first-child {
  border-top: 0;
}
.clip-table-head {
  color: var(--t-low);
  background: oklch(1 0 0 / 0.035);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-table-row strong,
.clip-table-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.clip-table-row strong {
  color: var(--t-hi);
  font-size: 12.5px;
}
.clip-table-row small {
  color: var(--t-low);
  margin-top: 2px;
}
.clip-mono {
  font-family: var(--font-mono);
}
.clip-progress {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.08);
}
.clip-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}
.clip-failure {
  color: oklch(0.76 0.18 28) !important;
}
.clip-approval-list {
  display: grid;
  gap: 10px;
}
.clip-approval {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-preview {
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--accent-bright);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.08), oklch(1 0 0 / 0.025));
}
.clip-preview span {
  color: var(--t-dim);
  font: 700 10px var(--font-mono);
}
.clip-approval-main {
  min-width: 0;
}
.clip-approval-actions {
  grid-column: 2;
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}
.clip-approve-btn {
  background: color-mix(in oklch, var(--green) 22%, transparent);
  border-color: color-mix(in oklch, var(--green) 40%, transparent);
  color: var(--t-hi);
  font-weight: 700;
}
.clip-pipeline {
  display: grid;
  gap: 8px;
}
.clip-stage {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--glass);
}
.clip-stage-index {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-bright);
  background: var(--accent-soft);
  font: 800 11px var(--font-mono);
}
.clip-stage strong,
.clip-stage span {
  display: block;
}
.clip-stage strong {
  color: var(--t-hi);
  font-size: 12.5px;
}
.clip-stage span {
  margin-top: 2px;
  color: var(--t-dim);
  font-size: 11.5px;
  line-height: 1.35;
}

/* upload progress + errors. An upload error is a plain failure to report,
   not something waiting on Michael, so it stays red rather than amber
   (DESIGN.md One Voice Rule). */
.cs-upload-progress { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }

/* which connected channels are Michael's own */
/* Reads its own width, not the viewport: the chat pane narrows this
   column without narrowing the window (DESIGN.md Container Rule). */
.cs-publishing-accounts-rows { container-type: inline-size; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }

/* a stopped run, visible from the list without opening the project */
.cs-row-failed {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 1px 7px 1px 5px; border-radius: 999px;
  font: 600 11px/1.6 var(--font-ui); letter-spacing: 0.01em;
  color: var(--danger); background: var(--danger-soft);
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
}

/* layout */
/* Header zones carry explicit shrink priority. The mode switcher is the most
   important control in the shell, so it never shrinks; the module nav is the
   least important, so it degrades first (labels, then icons, then it hands off
   to the logo launcher popover). Before this, all three zones were unshrinkable
   and the header simply overflowed: at 1280 it needed 1361px, which pushed the
   settings gear off-screen with no way to scroll to it. */
.app-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--dash-header-pad-y) var(--dash-page-pad-x);
  padding-top: max(var(--dash-header-pad-y), calc(var(--dash-header-pad-y) + env(safe-area-inset-top)));
  border-bottom: 1px solid var(--hair-2);
  position: relative;
  z-index: var(--z-header);
}
/* `flex: 1 1 0` on both side zones is what centres the mode switcher: equal
   basis plus equal grow means both sides end up the same width. `min-width:
   max-content` then stops either side from being squeezed narrower than its own
   contents, which is what used to make the module nav and the weather chip spill
   out of their boxes and paint over the mode labels. When the total genuinely
   does not fit, the collapse ladder removes content rather than letting anything
   overflow. */
.app-header-brand {
  flex: 1 1 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

/* ---- header collapse ladder ----
   Each step removes the least valuable thing next, so the mode switcher and the
   settings gear stay reachable at every width. Measured intrinsic widths at the
   default type scale: logo 66, module nav 500 with labels / 180 icon-only,
   mode switcher 480 with labels / 160 icon-only, weather chip 110, gear 44. */

/* 1. Module nav drops its labels. Frees ~320px. The active module is still
      identifiable by the seg thumb, and the logo launcher lists all of them. */
@media (max-width: 1420px) {
  .seg-shell .seg-label { display: none; }
  .seg-shell .seg-btn { padding: 9px 12px; }
}

/* 2. Weather loses its city name. The temperature is the part that is glanced at.
      Measured need with the city shown: 930px of content. */
@media (max-width: 1140px) {
  .weather-chip-city { display: none; }
}

/* 3. Module nav hands off to the logo launcher popover, which already exists and
      lists every module with labels. Threshold comes from measurement, not taste:
      logo 74 + nav 172 + mode 470 + controls 124 + 32 of gaps is 872px of content,
      and with the shell's 3vw side padding that stops fitting just under 1000px.
      The `.app-header` prefix is load-bearing: `.seg { display: flex }` is
      declared later in this file, so a bare `.seg-shell` selector loses to it. */
@media (max-width: 1000px) {
  .app-header .seg-shell { display: none; }
}

/* 4. Without the nav the row needs 700px of content, which stops fitting just
      under 760px. Past that the mode switcher takes its own full-width row rather
      than truncating: losing the labels costs more than one extra header row. */
@media (max-width: 760px) {
  .app-header {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    /* Paint-only hiding: changing margins here resizes the native scrollport
       during momentum, moving the reading position by the header's full height. */
    position: absolute;
    inset: 0 0 auto;
    background: var(--bg-0);
    transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
    will-change: transform;
  }
  .app-header.is-mobile-hidden {
    transform: translateY(calc(-100% - env(safe-area-inset-top)));
    opacity: 0;
    pointer-events: none;
  }
  .shell > .scroll {
    /* This inset belongs to the scrolling content, so the scrollport keeps the
       same top and height whether the overlay header is visible or hidden. */
    padding-top: calc(var(--mobile-header-height, 134px) + var(--dash-page-pad-top));
    scroll-padding-top: calc(var(--mobile-header-height, 134px) + var(--space-4));
  }
  .shell.has-pinned-header > .app-header { position: relative; transform: none; opacity: 1; pointer-events: auto; }
  .shell.has-pinned-header > .scroll { padding-top: var(--dash-page-pad-top); scroll-padding-top: var(--space-4); }
  .app-header-brand { flex: 1 1 auto; min-width: 0; }
  .app-header-controls { flex: 0 0 auto; }
  .app-header-mode { flex: 1 0 100%; order: 3; min-width: 0; }
  .app-header-mode .seg { width: 100%; }
  .app-header-mode .seg-btn { flex: 1 1 0; justify-content: center; padding: 9px 10px; }
}

/* 5. Narrowest tier: the mode icons go so the labels keep their room. Labels are
      the wayfinding, icons are decoration. */
@media (max-width: 460px) {
  .app-header-mode .seg-btn > svg { display: none; }
  .app-header-mode .seg-btn { padding: 9px 6px; }
}

/* Logo is a wide wordmark inside a 1:1 image with large transparent padding.
   Crop to the mark by scaling the image up inside a clipped box. */
.brand-logo {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 66px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.brand-logo img {
  height: 88px;
  width: 88px;
  flex-shrink: 0;
  object-fit: contain;
  transform: translateY(2px);
}

/* icon-only button — guaranteed 44×44px touch target */
.btn-icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 12px;
}

/* micro ghost pill — contextual inline action adjacent to eyebrow labels and data rows */
.btn-micro {
  background: oklch(1 0 0 / 0.07);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 4px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--t-low);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  line-height: 1;
  font-family: inherit;
}
.btn-micro:hover,
.btn-micro:focus-visible {
  background: oklch(1 0 0 / 0.13);
  color: var(--t-mid);
  outline: none;
}

.shell { position: relative; z-index: 1; height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); display: flex; flex-direction: column; width: 100%; min-width: 0; }
.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  /* Was `4px ... 64px`, which put 4px between the header and the first card while
     cards sat 18px apart, inverting the hierarchy. The bottom 64px was also dead:
     a second `.scroll` rule 270 lines later overrode it with 32px. */
  padding: var(--dash-page-pad-top) var(--dash-page-pad-x) var(--dash-page-pad-bottom);
  box-sizing: border-box;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.08); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.16); background-clip: padding-box; }
/* Was a flat 1280px, which left 315px of dead gutter on each side at 1920 and used
   only 67% of the viewport. Widened moderately rather than to full bleed: the real
   fix for ultrawide is more grid columns, not wider cards, because the briefing
   prose is already near its comfortable measure at this width. */
.wrap { width: 100%; max-width: var(--dash-max-width); margin: 0 auto; min-width: 0; box-sizing: border-box; }

/* glass card */
.card {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
/* Unchanged global default: Content Studio uses `.card card-pad` in 23 places and
   is out of scope for this pass. */
.card-pad { padding: clamp(20px, 2.4vw, 30px); min-width: 0; max-width: 100%; box-sizing: border-box; }

/* The existing grid slot is the container for its widget, including composite
   bodies. No window breakpoint decides dashboard padding or control layout. */
.dash-grid-item { container: dashboard-widget / inline-size; --brief-font-size: 19px; --widget-body-gap: 12px; }
#mode-panel .card-pad { padding: var(--widget-pad-md); }
@container dashboard-widget (max-width: 480px) {
  #mode-panel .card-pad { padding: var(--widget-pad-sm); }
  .info-trigger { min-width: 44px; min-height: 44px; position: relative; border-color: transparent !important; background: transparent !important; }
  .info-trigger::before { content: ''; position: absolute; width: 19px; height: 19px; border: 1px solid var(--hair-2); border-radius: 50%; pointer-events: none; }}
@container dashboard-widget (min-width: 1100px) {
  #mode-panel .card-pad { padding: var(--widget-pad-lg); }}

/* Communication shares the task cards' selection → copy → action hierarchy.
   Each group uses the height-class list budget, including when stacked. */
.communication-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

/* eyebrow / labels */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-low); font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.num { font-variant-numeric: tabular-nums; }

/* generic button */
.btn {
  font-family: var(--font-ui); font-weight: 550; font-size: 14px;
  color: var(--t-hi); background: var(--bg-2);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.25s var(--ease);
}
.btn:hover { border-color: var(--hair-bright); background: oklch(0.3 0.015 266); transform: translateY(-1px); }
.btn-ghost { background: transparent; }

/* animations */
/* transform-only so content stays visible even if animations are paused offscreen */
@keyframes fadeUp { from { transform: translateY(14px); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0.001; transform: scale(0.9) translateY(8px); } 100% { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 0.7s var(--ease) both; }
.enter > * { animation: fadeUp 0.65s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}

::selection { background: var(--accent-soft); color: var(--t-hi); }

/* ---- AI orb ---- */
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes ring-out { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-icon svg { animation: spin-slow 1s linear infinite; opacity: 0.6; }
@keyframes bar-dance { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes ring-pulse { 0%,100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.04); } }
@keyframes orb-interrupt { 0% { opacity: 1; } 40% { opacity: 0.35; } 100% { opacity: 1; } }

/* ---- Dashboard card highlight on voice update ---- */
@keyframes card-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent-bright), 0 0 18px 0 var(--accent-soft); }
  50%  { box-shadow: 0 0 0 2px var(--accent), 0 0 28px 4px var(--accent-soft); }
  100% { box-shadow: none; }
}
.card-updated { animation: card-flash 1.6s var(--ease) both; }

/* ---- "Now Speaking" + per-type narration cue personalities ---- */
@keyframes now-dot-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }
.now-dot { animation: now-dot-pulse 1.3s var(--ease) infinite; }

/* habit: scale pop + green fill */
@keyframes cue-habit-pop { 0% { transform: scale(1); } 38% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* task / priority: full outline + glow around the whole row, with a subtle lift */
@keyframes cue-task-frame {
  0%   { box-shadow: 0 0 0 0 oklch(0.62 0.22 262 / 0); transform: translateY(0); }
  28%  { box-shadow: 0 0 0 1.5px var(--accent-bright), 0 0 30px -4px var(--accent-soft); transform: translateY(-2px); }
  72%  { box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--accent) 70%, transparent), 0 0 24px -6px var(--accent-soft); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.22 262 / 0); transform: translateY(0); }
}
@container dashboard-widget (max-width: 480px) {
  [data-tour="top-3"] > .eyebrow { display: flex; width: 100%; justify-content: center; }}

/* Prose written by Chief of Staff has no length limit, so any card that renders it
   would otherwise take its footprint from whatever was written that morning. Clamp to
   a line count the height class affords and offer the rest in place. `--prose-lines`
   is set inline by the card from its `listItems` budget.

   Expansion is explicit and tracked by the containing widget frame. Its natural
   block size participates in the grid, keeping the following row clear. */
.card-prose {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--prose-lines, 3);
}
.card-prose-toggle {
  margin-top: var(--space-2);
  /* justify-self, because several of these cards are grid containers and a stretched
     full-width ghost button reads as a primary action rather than a quiet affordance. */
  justify-self: start;
  align-self: start;
  width: fit-content;
}

/* meeting: expanding pulse ring */
@keyframes cue-ring { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 70% { box-shadow: 0 0 0 12px oklch(0.62 0.22 262 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.62 0.22 262 / 0); } }

/* KPI: glow (digits count up via JS) */
@keyframes cue-kpi-glow { 0%,100% { text-shadow: none; color: var(--t-hi); } 50% { text-shadow: 0 0 18px var(--accent-bright); color: var(--accent-bright); } }

/* attention item: focused danger glow on just the element — ramps up, then lingers longer before fading */
@keyframes cue-attention-glow {
  0%   { background: transparent; box-shadow: none; }
  12%  { background: oklch(0.68 0.13 28 / 0.16); box-shadow: 0 0 0 1.5px oklch(0.68 0.13 28 / 0.55), 0 0 28px -6px oklch(0.68 0.13 28 / 0.7); }
  78%  { background: oklch(0.68 0.13 28 / 0.13); box-shadow: 0 0 0 1px oklch(0.68 0.13 28 / 0.42), 0 0 24px -8px oklch(0.68 0.13 28 / 0.5); }
  100% { background: transparent; box-shadow: none; }
}

/* verse: four soft shimmer sweeps. Each iteration sweeps across in the first ~58%,
   then waits off-screen — so the four passes stay distinct (a short gap, no overlap). */
@keyframes cue-verse-pop {
  0% {
    transform: translateY(0) scale(1);
    background: var(--glass);
    box-shadow: var(--shadow-card);
    border-color: var(--hair);
  }
  12% {
    transform: translateY(-5px) scale(1.018);
    background:
      radial-gradient(circle at 24% 18%, oklch(0.70 0.20 262 / 0.20), transparent 44%),
      linear-gradient(145deg, oklch(0.62 0.22 262 / 0.14), var(--glass) 58%);
    box-shadow:
      var(--shadow-card),
      0 0 32px oklch(0.70 0.20 262 / 0.24),
      0 18px 46px oklch(0.20 0.08 262 / 0.24);
    border-color: oklch(0.70 0.20 262 / 0.34);
  }
  68% {
    transform: translateY(-3px) scale(1.01);
    background:
      radial-gradient(circle at 24% 18%, oklch(0.70 0.20 262 / 0.14), transparent 46%),
      linear-gradient(145deg, oklch(0.62 0.22 262 / 0.10), var(--glass) 62%);
    box-shadow:
      var(--shadow-card),
      0 0 24px oklch(0.70 0.20 262 / 0.18);
    border-color: oklch(0.70 0.20 262 / 0.26);
  }
  100% {
    transform: translateY(0) scale(1);
    background: var(--glass);
    box-shadow: var(--shadow-card);
    border-color: var(--hair);
  }
}
@keyframes cue-shimmer {
  0%   { transform: translateX(-120%); }
  58%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* conversation dock */
@keyframes dockUp { from { opacity: 0; transform: translateX(-50%) translateY(28px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.dock { animation: dockUp 0.5s var(--ease-spring) both; }
@keyframes caret { 50% { opacity: 0; } }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--accent-bright); margin-left: 2px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes typingDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 35% { transform: translateY(-4px); opacity: 1; } }

/* mode switcher */
.seg { position: relative; display: flex; padding: 4px; gap: 2px; background: oklch(0.2 0.013 266 / 0.7); border: 1px solid var(--hair); border-radius: 999px; backdrop-filter: blur(12px); min-width: 0; max-width: 100%; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--hair-bright); box-shadow: 0 8px 22px -10px oklch(0 0 0 / 0.7); transition: left 0.45s var(--ease-spring), width 0.45s var(--ease-spring); z-index: 0; }
.seg-btn { position: relative; z-index: 1; border: none; background: transparent; cursor: pointer; padding: 9px 18px; border-radius: 999px; color: var(--t-low); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.01em; transition: color 0.3s var(--ease); display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; min-width: 0; overflow: hidden; }
/* Truncation is a backstop only, never the primary responsive mechanism. The
   collapse ladder below removes labels deliberately before it can trigger. */
.seg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seg-btn.on { color: var(--t-hi); }

/* hover lift for interactive cards */
.lift { transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.lift:hover { transform: translateY(-2px); border-color: var(--hair-bright); }

/* workout cell */
.wk-cell { transition: transform 0.25s var(--ease-spring), background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.wk-cell:hover { transform: translateY(-3px); }

/* drag handle */
.drag-handle { opacity: 0; transition: opacity 0.2s; }
.card:hover .drag-handle, [draggable]:hover .drag-handle { opacity: 1; }
[draggable] { cursor: default; }

/* form/tap resets */
input, textarea, select, button {
  font-family: inherit;
  box-sizing: border-box;
}
button,
[role="button"],
a.btn,
.btn,
.btn-micro,
.seg-btn,
.attach-btn,
.attach-chip-remove {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select {
  -webkit-text-size-adjust: 100%;
}

/* modest clearance for the bottom-right chat launcher */
/* Removed: this silently overrode the bottom padding in the `.scroll` shorthand
   above. Bottom spacing now comes from --dash-page-pad-bottom in one place. */

/* config panel slide-in */
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* mode crossfade */
@keyframes modeEnter { from { transform: translateY(10px); } to { transform: none; } }

/* ---- responsive grid helpers ---- */
@media (max-width: 1060px) {
  .scroll {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .wrap > *,
  .card > *,
  .card-pad > *,
  .mode-enter,
  .mode-enter > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .eyebrow {
    max-width: 100%;
    white-space: normal;
    /* `anywhere` broke card titles mid-word. `break-word` keeps word boundaries and
       only splits a word that genuinely cannot fit on a line of its own. */
    overflow-wrap: break-word;
  }
  /* Header zone layout deliberately lives in the collapse ladder near the
     .app-header base rules, not here. The grid that used to be forced at this
     breakpoint gave the two least important zones non-shrinking `auto` tracks
     and squeezed the mode switcher into what was left, which made all three
     mode tabs unclickable between 641px and 1060px. */
  .brand-logo {
    height: 22px;
    width: 56px;
  }
  .brand-logo img {
    height: 74px;
    width: 74px;
  }
  .app-header-controls .weather-chip {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /* Prevent mobile browser auto-zoom on focus without disabling pinch zoom. */
  input, textarea, select { font-size: 16px !important; }
  /* The shell stays at its pre-keyboard height. Extra scroll runway lets
     fields near the bottom move above Safari's keyboard instead of being
     clipped behind it. */
  html.is-keyboard-open .scroll {
    padding-bottom: calc(32px + var(--keyboard-inset));
    scroll-padding-top: 16px;
    scroll-padding-bottom: calc(20px + var(--keyboard-inset));
  }
  .seg-btn { padding: 8px 10px; font-size: var(--text-sm); min-height: var(--tap-min); }
  /* Mode labels stay: the collapse ladder gives the mode switcher its own row at
     this width, so there is room. Only the module nav sheds labels, and it has
     already been replaced by the logo launcher by now. */
  .seg-shell .seg-btn .seg-label { display: none; }
  .hide-sm { display: none !important; }
  .scroll { padding-left: 12px !important; padding-right: 12px !important; }
  .card-pad { padding: 16px; }}
@media (max-width: 1060px) {
  .hide-md { display: none !important; }}
@media (max-width: 860px) {
  .hide-sm { display: none !important; }}

/* Demo mobile CTA bar — hidden on desktop, revealed ≤860px above */
.demo-mobile-bar { display: none; }

@media (max-width: 1080px) {
  .wrap [style*="grid-template-columns"] { }}
.pill-user  { justify-self: end; }
.pill-assistant { justify-self: start; }

@media (max-width: 760px) {
  .clip-hero,
  .clip-layout {
    grid-template-columns: 1fr;
  }
  .clip-hero {
    padding: 18px;
  }
  .clip-hero h1 {
    font-size: 38px;
  }
  .clip-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clip-profile-list {
    grid-template-columns: 1fr;
  }
  .clip-section-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  .clip-table {
    overflow-x: auto;
  }
  .clip-table-row {
    min-width: 680px;
  }
  .clip-approval-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }}

@media (max-width: 520px) {
  .clip-stats-grid,
  .clip-card-grid,
  .clip-param-grid {
    grid-template-columns: 1fr 1fr;
  }
  .clip-classification-card {
    grid-template-columns: 1fr;
  }
  .clip-confidence-ring {
    width: 56px;
    height: 56px;
  }
  .clip-hermes-card,
  .clip-stat {
    align-items: flex-start;
  }
  .clip-approval {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .clip-preview {
    min-height: 74px;
  }}

/* ---- Clip Engine live operations override ---- */
.clip-engine-live {
  display: grid;
  gap: 14px;
  padding-top: 10px;
}
.clip-ops-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}
.clip-ops-topbar h1 {
  margin: 3px 0 0;
  color: var(--t-hi);
  font-size: 28px;
  letter-spacing: 0;
}
.clip-cap-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.clip-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t-dim);
  background: oklch(1 0 0 / 0.035);
  font: 750 10px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-cap i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--t-low);
}
.clip-cap em {
  color: var(--t-low);
  font-style: normal;
  text-transform: lowercase;
}
.clip-cap.ready i { background: var(--green); box-shadow: 0 0 10px color-mix(in oklch, var(--green) 60%, transparent); }
.clip-cap.degraded i { background: var(--amber); box-shadow: 0 0 10px color-mix(in oklch, var(--amber) 60%, transparent); }
.clip-cap.unavailable i { background: var(--danger); box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 60%, transparent); }
.clip-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.clip-summary-strip span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--t-dim);
  background: var(--glass);
  font-size: 12px;
}
.clip-summary-strip strong {
  color: var(--t-hi);
  font-family: var(--font-mono);
}
.clip-ops-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.1fr) minmax(320px, 0.9fr);
  gap: 14px;
  align-items: start;
}
.clip-left-rail,
.clip-center-stage,
.clip-right-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.clip-engine-live .clip-panel {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: oklch(1 0 0 / 0.035);
}
.clip-form-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hair-bright);
  border-radius: 10px;
  background: oklch(0.19 0.014 266 / 0.88);
}
.clip-form-head,
.clip-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clip-form-head strong {
  color: var(--t-hi);
  font-size: 14px;
}
.clip-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.clip-form-grid label,
.clip-form-panel label,
.clip-source-form label {
  display: grid;
  gap: 5px;
  color: var(--t-dim);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.workspace-error,
.clip-alert {
  padding: 9px 10px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--t-mid);
  background: oklch(1 0 0 / 0.04);
  font-size: 12px;
  line-height: 1.45;
}
.clip-alert.failed,
.workspace-error {
  color: oklch(0.78 0.14 28);
  border-color: color-mix(in oklch, var(--danger) 46%, transparent);
  background: var(--danger-soft);
}
.clip-alert.degraded {
  color: var(--amber);
  border-color: color-mix(in oklch, var(--amber) 42%, transparent);
  background: var(--amber-soft);
}
.clip-campaign-list,
.clip-source-list,
.clip-event-log,
.clip-approval-stack {
  display: grid;
  gap: 8px;
}
.clip-campaign-row,
.clip-source-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--t-mid);
  background: var(--glass);
  text-align: left;
}
.clip-campaign-row {
  cursor: pointer;
}
.clip-campaign-row.on,
.clip-campaign-row:hover {
  border-color: color-mix(in oklch, var(--accent) 42%, transparent);
  background: var(--accent-soft);
}
.clip-campaign-row span,
.clip-source-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.clip-campaign-row strong,
.clip-source-row strong {
  color: var(--t-hi);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.clip-campaign-row small,
.clip-source-row small {
  color: var(--t-low);
  font-size: 11.5px;
}
.clip-campaign-row em {
  flex: 0 0 auto;
  color: var(--accent-bright);
  font: 750 10px var(--font-mono);
  font-style: normal;
  text-transform: uppercase;
}
.clip-profile-control {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--hair-2);
}
.clip-profile-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clip-profile-control-head div {
  display: grid;
  gap: 2px;
}
.clip-profile-control-head span {
  color: var(--t-low);
  font: 750 10px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.clip-profile-control-head strong {
  color: var(--t-hi);
  font-size: 14px;
}
.clip-recommendation,
.clip-profile-details {
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.45;
}
.clip-recommendation strong {
  color: var(--t-hi);
}
.clip-recommendation span {
  margin-left: 7px;
  color: var(--accent-bright);
  font-family: var(--font-mono);
}
.clip-profile-details {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.clip-profile-details p {
  flex-basis: 100%;
  margin: 0;
}
.clip-profile-details span {
  padding: 4px 7px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: oklch(1 0 0 / 0.035);
}
.clip-source-form {
  display: grid;
  gap: 8px;
}
.clip-stage-graph {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}
.clip-stage-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--t-low);
  background: oklch(1 0 0 / 0.03);
  font: 700 10px var(--font-mono);
  text-transform: uppercase;
}
.clip-stage-node i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--t-dim);
}
.clip-stage-node.done,
.clip-stage-node.complete {
  color: var(--green);
  border-color: color-mix(in oklch, var(--green) 34%, transparent);
}
.clip-stage-node.done i,
.clip-stage-node.complete i { background: var(--green); }
.clip-stage-node.running,
.clip-stage-node.waiting,
.clip-stage-node.waiting-approval {
  color: var(--amber);
  border-color: color-mix(in oklch, var(--amber) 38%, transparent);
}
.clip-stage-node.running i,
.clip-stage-node.waiting i,
.clip-stage-node.waiting-approval i { background: var(--amber); }
.clip-stage-node.failed,
.clip-stage-node.cancelled {
  color: var(--danger);
  border-color: color-mix(in oklch, var(--danger) 40%, transparent);
}
.clip-stage-node.failed i,
.clip-stage-node.cancelled i { background: var(--danger); }
.clip-job-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.clip-job-meta span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  color: var(--t-low);
  background: var(--glass);
  font-size: 11px;
}
.clip-job-meta strong {
  color: var(--t-hi);
  font: 760 13px var(--font-mono);
  overflow-wrap: anywhere;
}
.clip-job-actions {
  display: flex;
  gap: 7px;
}
.clip-event-row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) 64px;
  gap: 9px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--hair-2);
}
.clip-event-row:first-child {
  border-top: 0;
}
.clip-event-row span,
.clip-event-row em {
  color: var(--t-low);
  font: 700 10px var(--font-mono);
  font-style: normal;
}
.clip-event-row strong {
  color: var(--t-mid);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.clip-candidate {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-candidate video,
.clip-video-empty {
  width: 100%;
  aspect-ratio: 9 / 12;
  max-height: 360px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: oklch(0.14 0.012 266);
}
.clip-video-empty {
  display: grid;
  place-items: center;
  color: var(--t-low);
}
.clip-candidate-body {
  display: grid;
  gap: 9px;
}
.clip-candidate-head,
.clip-candidate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clip-candidate-head strong {
  color: var(--t-hi);
  font-size: 14px;
  line-height: 1.3;
}
.clip-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.clip-score-grid span {
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--hair-2);
  border-radius: 7px;
  color: var(--t-low);
  font-size: 10px;
  text-transform: capitalize;
}
.clip-score-grid strong {
  color: var(--t-hi);
  font: 750 12px var(--font-mono);
}
.clip-explanation {
  display: grid;
  gap: 4px;
}
.clip-explanation p {
  margin: 0;
  color: var(--t-dim);
  font-size: 11.5px;
  line-height: 1.4;
}
.clip-loading {
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--t-dim);
  background: var(--glass);
}

@media (max-width: 1180px) {
  .clip-ops-layout {
    grid-template-columns: 1fr;
  }
  .clip-ops-topbar {
    grid-template-columns: 1fr;
  }
  .clip-cap-strip {
    justify-content: flex-start;
  }}

@media (max-width: 760px) {
  .clip-summary-strip,
  .clip-job-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clip-stage-graph {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .clip-form-grid,
  .clip-event-row {
    grid-template-columns: 1fr;
  }
  .clip-event-row em {
    display: none;
  }
  .clip-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}

/* ---- Clip Engine focused workbench ---- */
.clip-engine-live {
  display: grid;
  gap: 14px;
  padding-top: 10px;
}
.clip-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 16px;
  align-items: end;
}
.clip-workbench-head h1 {
  margin: 3px 0 0;
  color: var(--t-hi);
  font-size: 30px;
  letter-spacing: 0;
}
.clip-workbench-head p {
  margin: 5px 0 0;
  color: var(--t-dim);
  font-size: 13px;
}
.clip-system-line {
  justify-self: end;
  width: min(100%, 520px);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: oklch(1 0 0 / 0.035);
}
.clip-system-line summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.clip-system-line summary::-webkit-details-marker {
  display: none;
}
.clip-system-line span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--t-hi);
  font: 760 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-system-line span i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}
.clip-system-line.degraded span i {
  background: var(--amber);
}
.clip-system-line.blocked span i {
  background: var(--danger);
}
.clip-system-line summary em {
  min-width: 0;
  color: var(--t-low);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}
.clip-system-grid span {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px 8px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: var(--t-dim);
  background: var(--glass);
  font: 700 10px var(--font-mono);
  text-transform: lowercase;
}
.clip-system-grid strong {
  color: var(--t-low);
  font-weight: 700;
}
.clip-system-grid .ready strong { color: var(--green); }
.clip-system-grid .degraded strong { color: var(--amber); }
.clip-system-grid .unavailable strong { color: var(--danger); }

.clip-workbench-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.35fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: start;
}
.clip-left-rail,
.clip-center-stage,
.clip-right-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.clip-work-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: oklch(1 0 0 / 0.035);
}
.clip-card-headline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.clip-card-headline div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.clip-card-headline span,
.clip-field,
.clip-form-panel label {
  color: var(--t-low);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.clip-card-headline strong {
  color: var(--t-hi);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.clip-card-headline > em {
  color: var(--t-low);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.clip-field {
  display: grid;
  gap: 6px;
}
.clip-form-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hair-bright);
  border-radius: 10px;
  background: oklch(0.19 0.014 266 / 0.9);
}
.clip-form-head,
.clip-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clip-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.clip-profile-compact {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hair-2);
}
.clip-profile-compact > div {
  display: grid;
  gap: 3px;
}
.clip-profile-compact span {
  color: var(--t-low);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.clip-profile-compact strong {
  color: var(--t-hi);
  font-size: 14px;
}
.clip-profile-compact em {
  color: var(--t-dim);
  font-size: 12px;
  font-style: normal;
}
.clip-profile-compact details {
  display: grid;
  gap: 8px;
}
.clip-annotation-style-picker {
  display: grid;
  gap: 9px;
}
.clip-annotation-style-picker p {
  margin: 0;
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.4;
}
.clip-annotation-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.clip-annotation-preview span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  font: 850 10px var(--font-ui);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.clip-annotation-preview.classic-white span {
  color: white;
  border: 1px solid oklch(1 0 0 / 0.35);
  text-shadow: 0 2px 0 black, 0 0 4px black;
  background: transparent;
}
.clip-annotation-preview.viral-pop .hook,
.clip-annotation-preview.viral-pop .callout {
  color: white;
  border: 1px solid oklch(1 0 0 / 0.18);
  text-shadow: 0 2px 0 black, 0 0 5px black;
  background: oklch(0.22 0.08 255 / 0.7);
}
.clip-annotation-preview.viral-pop .callout {
  color: oklch(0.83 0.12 210);
}
.clip-annotation-preview.viral-pop .cta {
  color: black;
  background: var(--amber);
}
.clip-annotation-preview.premium-glow span {
  color: oklch(0.94 0.018 82);
  border: 1px solid oklch(0.9 0.04 82 / 0.28);
  text-shadow: 0 0 8px oklch(0.76 0.08 82 / 0.55), 0 2px 0 black;
  background: oklch(0.16 0.02 266 / 0.6);
}
.clip-profile-compact summary,
.clip-log-details summary {
  color: var(--accent-bright);
  cursor: pointer;
  font: 740 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-source-composer {
  display: grid;
  gap: 8px;
}
.clip-upload-progress {
  position: relative;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  border-radius: 7px;
  background: oklch(1 0 0 / .035);
}
.clip-upload-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: oklch(.7 .12 205 / .2);
  transition: width .18s ease;
}
.clip-upload-progress > strong {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--t-mid);
  font: 650 9.5px var(--font-mono);
}
.clip-source-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--glass);
}
.clip-source-mode button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  color: var(--t-dim);
  background: transparent;
  cursor: pointer;
  font: 760 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-source-mode button.on {
  color: var(--t-hi);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent);
}
.clip-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in oklch, var(--accent) 30%, var(--hair));
  border-radius: 10px;
  background: color-mix(in oklch, var(--panel) 72%, transparent);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.clip-attach:hover {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--hair));
  background: var(--accent-soft);
}
.clip-attach:focus-within {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--hair));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 18%, transparent);
}
.clip-attach.has-file {
  border-style: solid;
  border-color: color-mix(in oklch, var(--accent) 40%, var(--hair));
  background: var(--accent-soft);
}
.clip-attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.clip-attach > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--hair-2);
  color: var(--accent-bright);
  background: var(--glass);
}
.clip-attach > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.clip-attach strong {
  color: var(--t-hi);
  font-size: 13px;
  font-weight: 580;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-attach em {
  color: var(--t-low);
  font-size: 11.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.clip-attach .btn {
  flex: none;
}
.clip-input-hint {
  color: var(--t-low);
  font-size: 11.5px;
  line-height: 1.35;
}
.clip-source-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.clip-source-stack,
.clip-review-stack,
.clip-final-stack,
.clip-event-log {
  display: grid;
  gap: 8px;
}
.clip-source-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--glass);
}
.clip-source-line div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.clip-source-line strong {
  color: var(--t-hi);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.clip-source-line span {
  color: var(--t-low);
  font-size: 11.5px;
}
.clip-job-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-job-status span {
  color: var(--t-low);
  font: 760 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-job-status strong {
  color: var(--t-hi);
  font: 760 34px var(--font-mono);
  line-height: 1;
}
.clip-job-status em {
  grid-column: 1 / -1;
  color: var(--t-dim);
  font-style: normal;
  font-size: 13px;
}
.clip-job-status.failed strong,
.clip-job-status.cancelled strong {
  color: var(--danger);
}
.clip-job-status.waiting-approval strong,
.clip-job-status.running strong,
.clip-job-status.queued strong {
  color: var(--amber);
}
.clip-stage-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.clip-stage-rail span {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--t-low);
  font: 700 9px var(--font-mono);
  text-transform: uppercase;
}
.clip-stage-rail i {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.12);
}
.clip-stage-rail .done i,
.clip-stage-rail .complete i {
  background: var(--green);
}
.clip-stage-rail .running i,
.clip-stage-rail .waiting i,
.clip-stage-rail .waiting-approval i,
.clip-stage-rail .queued i {
  background: var(--amber);
}
.clip-stage-rail .failed i,
.clip-stage-rail .cancelled i {
  background: var(--danger);
}
.clip-stage-rail .clip-stage-dur {
  font: 700 8px var(--font-mono);
  font-style: normal;
  color: var(--t-mid);
  letter-spacing: 0.02em;
}
/* Run-time badge (clock glyph + duration), used in job rows and current-job card. */
.clip-runtime {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  color: var(--t-mid);
  background: var(--glass);
  font: 700 10px var(--font-mono);
  white-space: nowrap;
}
.clip-runtime svg {
  opacity: 0.7;
}
.clip-runtime.live {
  color: var(--amber);
  border-color: color-mix(in oklch, var(--amber) 46%, var(--hair));
  background: color-mix(in oklch, var(--amber) 12%, transparent);
}
/* Explicit per-stage duration breakdown in the expanded job body. */
.clip-stage-timings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.clip-stage-timings span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: var(--t-low);
  background: var(--glass);
  font: 700 9px var(--font-mono);
  text-transform: uppercase;
}
.clip-stage-timings strong {
  color: var(--t-mid);
}
.clip-stage-timings em {
  font-style: normal;
  color: var(--t-low);
  text-transform: none;
  opacity: 0.8;
}
.clip-log-details {
  display: grid;
  gap: 8px;
}
.clip-warning-details {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--amber) 34%, transparent);
  border-radius: 9px;
  background: var(--amber-soft);
}
.clip-warning-details summary {
  color: var(--amber);
  cursor: pointer;
  font: 740 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-warning-details .clip-alert {
  margin-top: 8px;
}
.clip-event-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 54px;
  gap: 9px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--hair-2);
}
.clip-event-row:first-child {
  border-top: 0;
}
.clip-event-row span,
.clip-event-row em {
  color: var(--t-low);
  font: 700 10px var(--font-mono);
  font-style: normal;
}
.clip-event-row strong {
  color: var(--t-mid);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.clip-review-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-final-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-review-card video,
.clip-final-card video,
.clip-video-empty {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 420px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: oklch(0.13 0.012 266);
}
.clip-video-empty {
  display: grid;
  place-items: center;
  color: var(--t-low);
}
.clip-final-card video,
.clip-final-card .clip-video-empty {
  max-height: 154px;
}
.clip-review-body {
  display: grid;
  gap: 9px;
}
.clip-final-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.clip-final-meta,
.clip-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.clip-final-meta span {
  color: var(--t-low);
  font: 700 10px var(--font-mono);
}
.clip-final-body p {
  margin: 0;
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.35;
}
.clip-review-title,
.clip-review-actions,
.clip-job-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.clip-review-title strong {
  color: var(--t-hi);
  font-size: 14px;
  line-height: 1.3;
}
.clip-score-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.clip-score-pills span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--hair-2);
  border-radius: 7px;
  color: var(--t-low);
  font-size: 10px;
  text-transform: capitalize;
}
.clip-score-pills strong {
  color: var(--t-hi);
  font-family: var(--font-mono);
}
.clip-review-body p {
  margin: 0;
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.42;
}
.clip-effect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clip-effect-chips span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  color: var(--t-low);
  font-size: 10px;
}
.clip-effect-chips strong {
  color: var(--t-mid);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}
.clip-effect-chips .is-rendered {
  border-color: color-mix(in oklch, var(--green) 45%, var(--hair));
}
.clip-effect-chips .is-rendered strong {
  color: var(--green);
}
.clip-effect-chips .is-skipped {
  border-color: color-mix(in oklch, var(--amber) 50%, var(--hair));
}
.clip-effect-chips .is-skipped strong {
  color: var(--amber);
}
.clip-decision-drawer {
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  padding: 8px;
  background: oklch(0.14 0.012 266 / 0.6);
}
.clip-decision-drawer summary {
  cursor: pointer;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.clip-decision-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 10px;
  margin-top: 9px;
  font-size: 12px;
}
.clip-decision-grid span,
.clip-decision-block span {
  color: var(--t-low);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-decision-grid strong {
  min-width: 0;
  color: var(--t-mid);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.clip-decision-block {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}
.clip-decision-block ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.35;
}
.clip-decision-block p {
  color: var(--t-dim);
  overflow-wrap: anywhere;
}
.clip-loading {
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--t-dim);
  background: var(--glass);
}

.clip-command-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: oklch(0.16 0.014 266 / 0.74);
}
.clip-command-select span,
.clip-mode-head span,
.clip-inspector-head span {
  color: var(--t-low);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-command-select {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--glass);
  width: min(440px, 100%);
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.clip-command-select:hover {
  border-color: color-mix(in oklch, var(--accent) 42%, var(--hair));
  background: var(--accent-soft);
}
.clip-command-select:focus-within {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--hair));
}
.clip-command-select span {
  flex: none;
}
.clip-command-select .cs-select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  padding: 8px 28px 8px 0;
  border: 0;
  border-radius: 0;
  color: var(--t-hi);
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%238a8f9e" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 10px center / 12px;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-command-select .cs-select:focus {
  outline: none;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
.clip-system-chip,
.clip-action-menu {
  position: relative;
}
.clip-system-chip summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  color: var(--t-hi);
  background: var(--glass);
  cursor: pointer;
  list-style: none;
}
.clip-system-chip summary::-webkit-details-marker,
.clip-action-menu summary::-webkit-details-marker {
  display: none;
}
.clip-system-chip > div {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 8px);
  width: min(420px, 80vw);
  padding: 12px;
  border: 1px solid var(--hair-bright);
  border-radius: 10px;
  background: oklch(0.14 0.012 266 / 0.98);
  box-shadow: var(--shadow-lg);
}
.clip-job-meta-strip span,
.clip-approved-card span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  color: var(--t-low);
  background: var(--glass);
  font: 700 10px var(--font-mono);
}
.clip-command-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: end;
}
.clip-action-menu summary {
  list-style: none;
}
.clip-action-menu > div {
  position: absolute;
  z-index: 25;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--hair-bright);
  border-radius: 10px;
  background: oklch(0.14 0.012 266 / 0.98);
  box-shadow: var(--shadow-lg);
}
.clip-action-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  color: var(--t-dim);
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 7px 9px;
  font: 720 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-action-menu button:hover:not(:disabled) {
  color: var(--t-hi);
  background: var(--accent-soft);
}
.clip-action-menu button.danger {
  margin-top: 4px;
  border-top: 1px solid var(--hair);
  border-radius: 0 0 7px 7px;
  color: var(--danger);
}
.clip-action-menu button.danger:hover:not(:disabled) {
  background: color-mix(in oklch, var(--danger) 12%, transparent);
}
.clip-action-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.clip-system-chip summary {
  min-height: 30px;
  color: var(--t-dim);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-system-chip summary i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
}
.clip-system-chip.degraded summary i { background: var(--amber); }
.clip-system-chip.blocked summary i { background: var(--danger); }
.clip-mode-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: var(--glass);
}
.clip-mode-nav button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: var(--t-dim);
  background: transparent;
  cursor: pointer;
  font: 760 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.clip-mode-nav button.on {
  color: var(--t-hi);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent);
}
.clip-mode-nav strong {
  color: var(--t-low);
  font-weight: 800;
}
.clip-scope-nav {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--glass);
}
.clip-scope-nav button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  color: var(--t-dim);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.clip-scope-nav button.on {
  color: var(--t-hi);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
}
.clip-scope-nav strong {
  color: var(--t-low);
  font-weight: 800;
  font-size: 11px;
}
.clip-schedule-awaiting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--glass);
}
.clip-schedule-awaiting-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.clip-schedule-awaiting-head span {
  font: 760 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-hi);
}
.clip-schedule-awaiting-head em {
  font-style: normal;
  font-size: 12px;
  color: var(--t-dim);
}
.clip-schedule-awaiting-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.clip-schedule-awaiting-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--t-hi);
  cursor: pointer;
  font-size: 12.5px;
  max-width: 260px;
}
.clip-schedule-awaiting-chip strong {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-schedule-awaiting-chip span {
  font: 760 10px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.clip-schedule-awaiting-chip:hover {
  border-color: var(--accent-soft);
}
.clip-mode-surface,
.clip-review-workspace,
.clip-settings-grid {
  min-width: 0;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: oklch(1 0 0 / 0.03);
}
.clip-mode-surface {
  display: grid;
  gap: 14px;
  padding: 14px;
}
.clip-intake-mode { display: grid; gap: 10px; min-width: 0; }
.clip-intake-switch { display: inline-flex; justify-self: start; gap: 3px; padding: 3px; border: 1px solid var(--hair); border-radius: 9px; background: var(--glass); }
.clip-intake-switch button { display: inline-flex; gap: 7px; align-items: center; min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--t-dim); cursor: pointer; font: 740 10px var(--font-mono); text-transform: uppercase; }
.clip-intake-switch button.on { color: var(--t-hi); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent); }
.clip-intake-switch strong { display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 6px; background: color-mix(in oklch, var(--accent) 28%, transparent); color: var(--accent-bright); font-size: 9px; }
.clip-intake-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(240px, 300px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.clip-import-workspace { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--hair); border-radius: 12px; background: oklch(0.155 0.014 266 / .6); }
.clip-import-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; }
.clip-import-head > div { display: grid; gap: 3px; }
.clip-import-head span, .clip-import-review-head span { color: var(--accent-bright); font: 740 10px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.clip-import-head strong { color: var(--t-hi); font-size: 18px; }
.clip-import-head p { max-width: 740px; margin: 0; color: var(--t-dim); font-size: 12px; }
.clip-discovery-status { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(260px, 1.3fr); gap: 6px 18px; align-items: center; padding: 11px 13px; border: 1px solid var(--hair-2); border-radius: 10px; background: oklch(1 0 0 / .025); }
.clip-discovery-status > div:first-child { display: grid; gap: 2px; }
.clip-discovery-status > div:first-child span { color: var(--accent-bright); font: 720 9px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.clip-discovery-status > div:first-child strong { color: var(--t-hi); font-size: 12px; }
.clip-discovery-status p { margin: 0; color: var(--t-low); font-size: 11px; line-height: 1.4; }
.clip-discovery-status.running { border-color: color-mix(in oklch, var(--accent) 42%, var(--hair)); background: var(--accent-soft); }
.clip-discovery-status.error, .clip-discovery-status.degraded { border-color: color-mix(in oklch, var(--amber) 42%, var(--hair)); }
.clip-discovery-times { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 14px; padding-top: 6px; border-top: 1px solid var(--hair-2); color: var(--t-dim); font: 620 9px var(--font-mono); }
.clip-import-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.clip-import-methods details { min-width: 0; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--glass); }
.clip-import-methods summary { padding: 10px 11px; color: var(--t-mid); cursor: pointer; font-size: 11px; font-weight: 700; }
.clip-import-methods details > div { display: flex; gap: 7px; padding: 0 10px 10px; }
.clip-import-methods .cs-input { min-width: 0; }
.clip-import-methods .clip-import-paste, .clip-import-methods .clip-import-pair { display: grid; }
.clip-import-pair p { margin: 0; color: var(--t-dim); font-size: 10px; line-height: 1.45; }
.clip-import-pair code, .clip-import-workspace code { color: var(--accent-bright); font: 10px var(--font-mono); }
.clip-import-pair strong { justify-self: start; padding: 8px 12px; border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--hair)); border-radius: 8px; color: var(--accent-bright); font: 800 22px var(--font-mono); letter-spacing: .14em; }
.clip-import-pair em { color: var(--t-low); font-size: 9px; font-style: normal; }
.clip-import-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.clip-import-filters .cs-select { width: auto; min-width: 150px; }
.clip-import-health { display: flex; flex: 1 1 340px; flex-wrap: wrap; gap: 6px; align-items: center; }
.clip-import-health span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--hair); border-radius: 999px; color: var(--t-dim); font: 650 9px var(--font-mono); }
.clip-import-health i { width: 6px; height: 6px; border-radius: 50%; background: var(--t-dim); }
.clip-import-health i.ready { background: var(--green); }
.clip-import-health i.degraded, .clip-import-health i.error { background: var(--amber); }
.clip-import-layout { display: grid; grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.clip-import-list { display: grid; align-content: start; gap: 6px; min-width: 0; max-height: 780px; overflow-y: auto; }
.clip-import-list > button { display: grid; gap: 4px; width: 100%; padding: 10px; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--glass); color: inherit; cursor: pointer; text-align: left; }
.clip-import-list > button.on { border-color: color-mix(in oklch, var(--accent) 46%, var(--hair)); background: color-mix(in oklch, var(--accent) 10%, var(--glass)); }
.clip-import-list span { display: flex; gap: 6px; align-items: center; color: var(--t-low); font: 700 8px var(--font-mono); text-transform: uppercase; }
.clip-import-list strong { color: var(--t-hi); font-size: 12px; line-height: 1.3; }
.clip-import-list em { color: var(--t-dim); font-size: 9px; font-style: normal; }
.clip-import-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.clip-import-dot.approved { background: var(--green); }.clip-import-dot.ignored, .clip-import-dot.stale { background: var(--t-low); }.clip-import-dot.error { background: var(--danger); }
.clip-import-review { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 13px; border: 1px solid var(--hair-2); border-radius: 10px; background: oklch(1 0 0 / .025); }
.clip-import-review-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: start; }
.clip-import-review-head > div { display: grid; gap: 3px; }
.clip-import-review-head > div:last-child { display: flex; flex-wrap: wrap; }
.clip-import-review-head strong { color: var(--t-hi); font-size: 17px; }
.clip-import-review-head em { color: var(--t-low); font-size: 9px; font-style: normal; }
.clip-import-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clip-import-fields label:nth-child(2), .clip-import-fields label:nth-child(5), .clip-import-fields label:nth-child(6), .clip-import-fields label:nth-child(7) { grid-column: 1 / -1; }
.clip-import-fields small { display: flex; flex-wrap: wrap; gap: 5px; }
.clip-import-fields small a { color: var(--accent-bright); font-size: 9px; text-transform: none; }
.clip-import-acknowledgements { display: flex; flex-wrap: wrap; gap: 12px; color: var(--t-dim); font-size: 10px; }
.clip-import-acknowledgements label { display: flex; gap: 6px; align-items: center; }
.clip-import-resources { display: grid; gap: 7px; }
.clip-import-resources > p { margin: 0; color: var(--t-dim); font-size: 10px; }
.clip-import-resources > label { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 9px; border: 1px solid var(--hair-2); border-radius: 8px; opacity: .62; }
.clip-import-resources > label.usable { opacity: 1; }
.clip-import-resources label > div { display: grid; gap: 2px; }
.clip-import-resources strong { color: var(--t-mid); font-size: 11px; }.clip-import-resources span { color: var(--t-low); font-size: 9px; }.clip-import-resources a { color: var(--accent-bright); font-size: 9px; }
.clip-import-changes { border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--hair)); border-radius: 8px; padding: 9px; }
.clip-import-changes summary { color: var(--amber); cursor: pointer; font-size: 10px; font-weight: 700; }
.clip-import-changes > div { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; padding-top: 7px; color: var(--t-dim); font-size: 9px; overflow-wrap: anywhere; }
.clip-import-approval { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid var(--hair); }
.clip-import-approval p { max-width: 620px; margin: 0; color: var(--t-dim); font-size: 10px; line-height: 1.45; }
.clip-intake-form {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: oklch(0.155 0.014 266 / 0.6);
}
.clip-intake-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.clip-intake-section h3 {
  margin: 0;
  color: var(--t-hi);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.01em;
}
.clip-intake-summary {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: var(--glass);
  position: sticky;
  top: 12px;
}
.clip-intake-summary > span {
  color: var(--t-low);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-intake-summary > strong {
  color: var(--t-hi);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.clip-intake-facts {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.clip-intake-fact {
  display: grid;
  gap: 2px;
}
.clip-intake-fact span {
  color: var(--t-low);
  font-size: 11px;
}
.clip-intake-fact strong {
  color: var(--t-dim);
  font-size: 13px;
  font-weight: 560;
  overflow-wrap: anywhere;
}
.clip-intake-fact.expired strong {
  color: var(--danger);
}
.clip-intake-profile {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.clip-intake-profile span {
  color: var(--t-low);
  font-size: 11px;
}
.clip-intake-profile strong {
  color: var(--t-hi);
  font-size: 14px;
}
.clip-intake-profile em {
  color: var(--t-low);
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
}
.clip-settings-note {
  margin: 0;
  color: var(--t-dim);
  font-size: 13px;
  line-height: 1.5;
}
.clip-setup-advanced {
  display: grid;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--glass);
}
.clip-setup-advanced summary {
  cursor: pointer;
  color: var(--accent-bright);
  font: 740 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-setup-advanced > *:not(summary) {
  margin-top: 12px;
}
.clip-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.clip-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}
.clip-mode-head div {
  display: grid;
  gap: 3px;
}
.clip-mode-head strong,
.clip-inspector-head strong {
  color: var(--t-hi);
  font-size: 18px;
  line-height: 1.2;
}
.clip-sources-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 14px;
  align-items: start;
}
.clip-add-source-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
}
.clip-source-table,
.clip-job-table {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.clip-source-table-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) 72px 70px minmax(128px, auto) minmax(115px, 0.8fr) 50px 76px minmax(120px, auto);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hair-2);
  border-radius: 9px;
  background: var(--glass);
}
.clip-source-table-row.head {
  color: var(--t-low);
  background: transparent;
  font: 740 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-source-table-row strong,
.clip-source-table-row span,
.clip-job-row summary strong,
.clip-job-row summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.clip-source-table-row strong {
  color: var(--t-hi);
  font-size: 13px;
}
.clip-source-table-row span {
  color: var(--t-low);
  font-size: 12px;
}
.clip-source-table-row .clip-status {
  justify-self: start;
  max-width: 100%;
}
.clip-source-table-row > button {
  justify-self: end;
  width: max-content;
  min-width: 82px;
  max-width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.clip-source-table-row.head > span:last-child {
  justify-self: end;
}
.clip-upload-result {
  padding: 9px 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--hair));
  border-radius: 8px;
  color: var(--t-mid);
  background: var(--accent-soft);
  font-size: 11px;
  line-height: 1.45;
}
.clip-job-row {
  padding: 11px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--glass);
}
.clip-job-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.clip-job-row summary::-webkit-details-marker {
  display: none;
}
.clip-job-row summary > div:first-child {
  display: grid;
  gap: 3px;
}
.clip-job-row summary strong {
  color: var(--t-hi);
  font-size: 14px;
}
.clip-job-row summary em {
  color: var(--t-hi);
  font: 760 24px var(--font-mono);
  font-style: normal;
}
.clip-job-row > .clip-stage-rail,
.clip-job-row > .clip-alert,
.clip-job-row > .clip-event-log,
.clip-job-meta-strip {
  margin-top: 12px;
}
.clip-job-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.clip-job-meta-strip strong {
  margin-left: 6px;
  color: var(--t-mid);
}
.clip-review-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 0.62fr) minmax(360px, 1.18fr) minmax(280px, 0.78fr);
  gap: 0;
  overflow: hidden;
}
.clip-queue-panel,
.clip-decision-inspector {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: oklch(1 0 0 / 0.025);
}
.clip-queue-panel {
  border-right: 1px solid var(--hair);
}
.clip-decision-inspector {
  border-left: 1px solid var(--hair);
}
.clip-review-controls {
  display: grid;
  gap: 8px;
}
.clip-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--glass);
}
.clip-filter-row button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  color: var(--t-dim);
  background: transparent;
  cursor: pointer;
  font: 740 10px var(--font-mono);
  text-transform: uppercase;
}
.clip-filter-row button.on {
  color: var(--t-hi);
  background: var(--accent-soft);
}
.clip-queue-list {
  display: grid;
  gap: 7px;
  max-height: min(760px, 72vh);
  overflow: auto;
  padding-right: 2px;
}
.clip-queue-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--hair-2);
  border-radius: 9px;
  color: inherit;
  background: var(--glass);
  cursor: pointer;
  text-align: left;
}
.clip-queue-item.on {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--hair));
  background: var(--accent-soft);
}
.clip-queue-item.invalid {
  border-color: color-mix(in oklch, var(--danger) 55%, var(--hair));
}
.clip-queue-item video,
.clip-queue-item .clip-video-empty {
  width: 42px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}
.clip-queue-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.clip-queue-item strong {
  color: var(--t-hi);
  font-size: 12.5px;
  line-height: 1.25;
}
.clip-queue-item em {
  color: var(--t-low);
  font-size: 11px;
  font-style: normal;
}
.clip-queue-item b {
  color: var(--t-hi);
  font: 800 16px var(--font-mono);
}
.clip-preview-stage {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  padding: 16px;
}
.clip-preview-video {
  display: grid;
  justify-content: center;
  min-height: 0;
}
.clip-preview-video video,
.clip-preview-video .clip-video-empty {
  width: min(100%, 430px);
  max-height: min(68vh, 720px);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: oklch(0.12 0.012 266);
}
.clip-preview-caption,
.clip-preview-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.clip-preview-caption div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.clip-preview-caption span {
  color: var(--t-low);
  font: 720 11px var(--font-mono);
}
.clip-preview-caption strong {
  color: var(--t-hi);
  font-size: 18px;
  overflow-wrap: anywhere;
}
.clip-preview-nav,
.clip-preview-actions {
  display: flex;
  gap: 8px;
}
.clip-preview-actions {
  justify-content: end;
}
.clip-review-workspace .clip-preview-caption {
  position: static;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: left;
  text-shadow: none;
  transform: none;
}
.clip-review-workspace .clip-preview-nav {
  flex-wrap: nowrap;
  justify-self: end;
}
.clip-decision-inspector .clip-decision-block p {
  margin: 0;
}
.clip-inspector-head {
  display: grid;
  gap: 3px;
}
.clip-inspector-head em {
  color: var(--t-low);
  font-style: normal;
}
.clip-score-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.clip-score-summary.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.clip-score-summary span {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  color: var(--t-low);
  background: var(--glass);
  font-size: 11px;
}
.clip-score-summary strong {
  color: var(--t-hi);
  font: 800 18px var(--font-mono);
}
.clip-note-state {
  justify-self: start;
  color: var(--green);
  font: 740 10px var(--font-mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-note-state.unsaved { color: var(--amber); }
.clip-note-state.saving { color: var(--accent); }
.clip-note-state.failed-to-save { color: var(--danger); }
.clip-invalid-action {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.clip-invalid-action span {
  min-width: 0;
}
.clip-invalid-panel {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--danger) 50%, var(--hair));
  border-radius: 9px;
  background: color-mix(in oklch, var(--danger) 11%, transparent);
}
.clip-invalid-panel strong {
  color: var(--danger);
  font-size: 13px;
}
.clip-invalid-panel span {
  color: var(--t-dim);
  font-size: 12px;
  line-height: 1.4;
}
.clip-approved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.clip-approved-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--glass);
}
.clip-approved-card video,
.clip-approved-card .clip-video-empty {
  width: 82px;
  aspect-ratio: 9 / 16;
  max-height: 146px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  object-fit: cover;
}
.clip-approved-card div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}
.clip-approved-card strong {
  color: var(--t-hi);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.clip-approved-card span {
  justify-self: start;
  border-radius: 7px;
}
.clip-approved-card em {
  color: var(--t-low);
  font-size: 11px;
  font-style: normal;
}
.clip-approved-routing { margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--hair); }
.clip-approved-routing summary { color: var(--t-mid); font-size: 11px; cursor: pointer; }
.clip-approved-routing > small { display: block; margin: 7px 0; color: var(--t-low); font-size: 10px; line-height: 1.4; }
.clip-approved-routing > div { display: grid; gap: 5px; }
.clip-approved-routing label { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; color: var(--t-mid); font-size: 10px; }
.clip-approved-routing label span, .clip-approved-routing label em { border: 0; padding: 0; background: transparent; }
.clip-settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(320px, 1fr);
  gap: 14px;
  padding: 14px;
}
.clip-hermes-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.clip-hermes-prompts span {
  padding: 7px 9px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  color: var(--t-dim);
  background: var(--glass);
  font-size: 12px;
}
.clip-notice {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--green) 34%, var(--hair));
  border-radius: 10px;
  color: var(--t-mid);
  background: color-mix(in oklch, var(--green) 9%, transparent);
  font-size: 13px;
}
.clip-notice span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.clip-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: oklch(0.08 0.012 266 / 0.74);
  backdrop-filter: blur(12px);
}
.clip-campaign-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  border: 1px solid var(--hair-bright);
  border-radius: 14px;
  background: oklch(0.145 0.014 266 / 0.98);
  box-shadow: 0 28px 90px -42px oklch(0 0 0 / 0.95);
  overflow: hidden;
}
.clip-modal-head,
.clip-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
}
.clip-modal-foot {
  border-top: 1px solid var(--hair);
  border-bottom: 0;
  justify-content: flex-end;
}
.clip-modal-head div {
  display: grid;
  gap: 3px;
}
.clip-modal-head span {
  color: var(--t-low);
  font: 740 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clip-modal-head strong {
  color: var(--t-hi);
  font-size: 19px;
}
.clip-modal-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.clip-modal-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--glass);
}
.clip-modal-section summary {
  cursor: pointer;
  color: var(--accent-bright);
  font: 740 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clip-modal-section > *:not(summary) {
  margin-top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .clip-mode-surface,
  .clip-review-workspace,
  .clip-settings-grid,
  .clip-intake-workspace,
  .clip-campaign-modal {
    animation: clipModeIn 0.18s ease-out;
  }}

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

@media (max-width: 1180px) {
  .clip-workbench-head,
  .clip-workbench-grid,
  .clip-sources-layout,
  .clip-review-workspace,
  .clip-intake-workspace,
  .clip-import-layout,
  .clip-settings-grid {
    grid-template-columns: 1fr;
  }
  .clip-import-methods { grid-template-columns: 1fr; }
  .clip-intake-summary {
    position: static;
  }
  .clip-system-line {
    justify-self: stretch;
  }
  .clip-queue-panel,
  .clip-decision-inspector {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--hair);
  }}

@media (max-width: 760px) {
  .clip-command-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .clip-command-select {
    width: 100%;
  }
  .clip-workbench-head h1 {
    font-size: 25px;
  }
  .clip-system-grid,
  .clip-form-grid,
  .clip-source-title-row,
  .clip-source-line,
  .clip-event-row,
  .clip-source-table-row,
  .clip-job-row summary,
  .clip-approved-card,
  .clip-score-summary,
  .clip-score-summary.compact {
    grid-template-columns: 1fr;
  }
  .clip-import-fields { grid-template-columns: 1fr; }
  .clip-discovery-status { grid-template-columns: 1fr; }
  .clip-discovery-times { grid-column: 1; }
  .clip-import-fields label { grid-column: 1 !important; }
  .clip-command-actions,
  .clip-preview-caption,
  .clip-preview-actions,
  .clip-invalid-action,
  .clip-setup-actions {
    justify-content: start;
    flex-wrap: wrap;
  }
  .clip-system-chip > div {
    left: 0;
    right: auto;
    width: min(100%, 88vw);
  }
  .clip-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clip-review-workspace .clip-preview-caption {
    grid-template-columns: 1fr;
  }
  .clip-review-workspace .clip-preview-nav {
    justify-self: start;
  }
  .clip-source-table-row > button,
  .clip-source-table-row.head > span:last-child {
    justify-self: start;
  }
  .clip-modal-backdrop {
    padding: 10px;
    align-items: stretch;
  }
  .clip-campaign-modal {
    max-height: calc(100vh - 20px);
    border-radius: 12px;
  }
  .clip-system-line summary {
    display: grid;
  }
  .clip-system-line summary em {
    white-space: normal;
  }
  .clip-source-mode {
    grid-template-columns: 1fr;
  }
  .clip-score-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clip-stage-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 10px;
  }
  .clip-card-headline,
  .clip-review-title,
  .clip-review-actions,
  .clip-job-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .clip-job-status strong {
    font-size: 28px;
  }
  .clip-event-row em {
    display: none;
  }}
@font-face { font-family: 'Clip Anton'; src: url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Bebas Neue'; src: url('/assets/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Archivo Black'; src: url('/assets/fonts/ArchivoBlack-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Engine Bold'; src: url('/assets/fonts/ClipEngine-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Lilita One'; src: url('/assets/fonts/LilitaOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Bangers'; src: url('/assets/fonts/Bangers-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Bungee Shade'; src: url('/assets/fonts/BungeeShade-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Atkinson Hyperlegible Next'; src: url('/assets/fonts/AtkinsonHyperlegibleNext-Variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Clip Lexend'; src: url('/assets/fonts/Lexend-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Clip Recursive Sans'; src: url('/assets/fonts/Recursive-Variable.ttf') format('truetype'); font-weight: 300 1000; font-display: swap; }
@font-face { font-family: 'Clip IBM Plex Sans Condensed'; src: url('/assets/fonts/IBMPlexSansCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Clip Literata'; src: url('/assets/fonts/Literata-Variable.ttf') format('truetype'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Clip Boldonse'; src: url('/assets/fonts/Boldonse-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Clip Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-display: swap; }

.clip-title-style-preview { margin-top: 10px; padding: 12px; border-radius: 10px; background: #151717; color: #fff; text-align: center; font-size: 25px; line-height: 1; letter-spacing: .04em; text-shadow: 2px 2px 0 #000; }
.clip-title-style-preview.bold-impact { font-family: 'Clip Anton', sans-serif; }
.clip-title-style-preview.tall-punch { font-family: 'Clip Bebas Neue', sans-serif; font-size: 32px; }
.clip-title-style-preview.block-shout { font-family: 'Clip Archivo Black', sans-serif; font-size: 20px; }
.clip-title-style-preview.match-captions { font-family: 'Hanken Grotesk', sans-serif; font-size: 18px; }

.clip-render-mode-control{display:flex;align-items:flex-start;gap:11px;margin-top:12px;padding:13px;border:1px solid var(--hair);border-radius:10px;background:color-mix(in oklch,var(--accent) 7%,transparent);cursor:pointer}
.clip-render-mode-control input{margin-top:3px;accent-color:var(--accent-bright)}
.clip-render-mode-control span{display:grid;gap:3px}.clip-render-mode-control strong{color:var(--t-hi);font-size:13px}.clip-render-mode-control em{color:var(--t-low);font-size:11.5px;font-style:normal;line-height:1.4}
.clip-render-mode-control:has(input:disabled){opacity:.58;cursor:not-allowed}
.clip-complexity-summary{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin-top:10px;padding:11px;border:1px solid var(--hair-2);border-radius:9px;background:oklch(1 0 0/.025)}
.clip-complexity-summary>span{color:var(--t-low);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}.clip-complexity-summary>strong{color:var(--t-hi);font:750 13px var(--font-mono)}
.clip-complexity-summary>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.clip-complexity-summary em{padding:4px 7px;border:1px solid var(--hair-2);border-radius:999px;color:var(--t-low);font:normal 600 9.5px var(--font-mono)}
.clip-editing-library{grid-column:1/-1}.clip-library-tabs{display:flex;gap:5px;overflow-x:auto;margin:14px 0 12px;padding-bottom:2px}.clip-library-tabs button{border:1px solid var(--hair);border-radius:999px;padding:7px 11px;background:transparent;color:var(--t-low);font:650 10.5px var(--font-mono);cursor:pointer}.clip-library-tabs button.on{border-color:color-mix(in oklch,var(--accent) 48%,transparent);background:var(--accent-soft);color:var(--accent-bright)}
.clip-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.clip-library-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;align-items:start;padding:11px;border:1px solid var(--hair);border-radius:10px;background:oklch(1 0 0/.025)}.clip-library-card.visual{grid-template-columns:130px minmax(0,1fr)}
.clip-library-card>div{display:grid;gap:4px;min-width:0}.clip-library-card strong{color:var(--t-hi);font-size:12.5px}.clip-library-card span,.clip-library-card small{color:var(--t-low);font:600 9.5px var(--font-mono);overflow-wrap:anywhere}.clip-library-card p{margin:2px 0;color:var(--t-dim);font-size:10.5px;line-height:1.35}
.clip-sound-play{width:42px;height:42px;border:1px solid color-mix(in oklch,var(--accent) 42%,transparent);border-radius:999px;background:var(--accent-soft);color:var(--accent-bright);cursor:pointer}.clip-sound-play.on{background:var(--accent);color:#101313}
.clip-capability-row{display:flex;flex-wrap:wrap;gap:5px}.clip-capability-row em{padding:3px 6px;border-radius:999px;border:1px solid var(--hair-2);font:normal 650 9px var(--font-mono)}.clip-capability-row .native{color:oklch(.79 .12 165)}.clip-capability-row .approximate{color:oklch(.81 .13 82)}.clip-capability-row .impossible,.clip-capability-row .disabled{color:var(--t-dim)}
.clip-effect-demo{position:relative;width:130px;height:88px;overflow:hidden;border:1px solid var(--hair-2);border-radius:9px;background:radial-gradient(circle at 70% 20%,color-mix(in oklch,var(--clip-effect-accent,var(--accent)) 22%,transparent),transparent 48%),#121515;color:#fff;cursor:pointer}.clip-effect-demo span{display:grid;place-items:center;height:100%;padding:8px;color:#fff!important;font:800 14px var(--font-ui)!important;text-align:center;text-transform:uppercase;text-shadow:0 2px 12px #000;animation:clipEffectDemo .7s var(--ease-spring) both}.clip-effect-demo.hook-cover span{font-size:18px!important;color:var(--clip-effect-accent,var(--accent))!important}.clip-effect-demo.display-pop span,.clip-effect-demo.callout span{animation-name:clipEffectPop}.clip-effect-demo.contrast-replace span{text-decoration:line-through;animation-name:clipEffectContrast}.clip-effect-demo.media-card span{margin:10px;height:68px;border-radius:8px;background:linear-gradient(135deg,color-mix(in oklch,var(--clip-effect-accent,var(--accent)) 45%,#20252b),#30343b);animation-name:clipEffectCard}.clip-effect-demo.icon-stack span{margin:9px;height:20px;border:1px solid var(--clip-effect-accent,var(--accent));border-radius:6px;animation-name:clipEffectStack}.clip-effect-demo.punch-zoom span,.clip-effect-demo.slow-zoom span,.clip-effect-demo.center-zoom span{animation-name:clipEffectZoom}
.clip-library-fonts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:10px}.clip-library-fonts .clip-title-style-preview{display:grid;gap:5px;margin:0}.clip-library-fonts small{color:var(--t-low);font:600 9px var(--font-mono);text-shadow:none;text-transform:none}
@keyframes clipEffectDemo{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes clipEffectPop{0%{opacity:0;transform:scale(.78)}70%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}@keyframes clipEffectContrast{0%{opacity:0}45%{opacity:1;text-decoration:line-through}100%{color:var(--clip-effect-accent,var(--accent));text-decoration:none}}@keyframes clipEffectCard{from{opacity:0;transform:translateX(90px) scale(.96)}to{opacity:1;transform:none}}@keyframes clipEffectStack{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes clipEffectZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
@media(max-width:800px){.clip-library-grid{grid-template-columns:1fr}.clip-library-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.clip-library-card.visual{grid-template-columns:1fr}.clip-effect-demo{width:100%}}
.clip-remotion-preview{margin-top:14px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid color-mix(in oklch,var(--accent) 28%,var(--hair));border-radius:16px;background:color-mix(in oklch,var(--panel) 90%,black)}
.clip-remotion-preview>div:first-child{display:grid;gap:3px}.clip-remotion-preview>div:first-child span{font-size:11px;color:var(--t-dim)}
.clip-remotion-stage{position:relative;grid-column:1/-1;width:min(100%,260px);min-height:260px;margin:auto;display:grid;place-items:center}.clip-remotion-stage>em{position:absolute;inset:0;display:grid;place-items:center;padding:22px;font-size:11px;color:var(--t-dim)}
.clip-remotion-player{width:100%;min-height:260px;overflow:hidden;border-radius:16px;background:#171615;box-shadow:0 18px 48px rgba(0,0,0,.34)}
.clip-style-swatch{width:28px;height:28px;border-radius:50%;background:var(--clip-style-accent,var(--accent));box-shadow:0 0 0 5px color-mix(in oklch,var(--clip-style-accent,var(--accent)) 16%,transparent)}.clip-style-toolbar-title span,.clip-style-toolbar-presets label>span,.clip-style-color span{font:650 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-low)}
.clip-style-workspace{display:grid;gap:12px}.clip-style-toolbar{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;align-items:center;gap:12px;padding:11px 13px;border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 34%,var(--hair));background:linear-gradient(110deg,color-mix(in oklch,var(--clip-style-accent,var(--accent)) 8%,transparent),oklch(1 0 0/.016) 50%)}.clip-style-toolbar-title{display:flex;align-items:center;gap:12px;min-width:0}.clip-style-toolbar-title>div:last-child{display:grid;gap:2px;min-width:0}.clip-style-toolbar-title strong{overflow:hidden;color:var(--t-hi);font-size:15px;text-overflow:ellipsis;white-space:nowrap}.clip-style-toolbar-presets{display:flex;align-items:flex-end;gap:6px}.clip-style-toolbar-presets label{display:grid;gap:3px}.clip-style-toolbar-presets .cs-select{width:190px;padding-top:7px;padding-bottom:7px}.clip-style-toolbar-presets .btn{white-space:nowrap}.clip-style-toolbar-presets .btn-icon{width:32px;height:32px;font-size:16px}.clip-style-toolbar-continue{white-space:nowrap}.clip-style-toolbar-save{grid-column:2/-1;justify-self:end;padding-top:2px}.clip-style-toolbar-save .cs-input{width:220px}
.clip-style-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:14px;align-items:start}.clip-style-controls{display:grid;gap:12px}.clip-style-choice{margin:0;padding:14px;border:1px solid var(--hair);border-radius:12px;background:oklch(1 0 0/.02)}.clip-style-choice legend{padding:0 6px;color:var(--t-hi);font-size:13px;font-weight:700}.clip-style-choice>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.clip-style-choice button{display:grid;gap:4px;min-height:92px;padding:12px;text-align:left;border:1px solid var(--hair);border-radius:10px;background:transparent;color:var(--t-hi);cursor:pointer}.clip-style-choice button.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 68%,white);background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--clip-style-accent,var(--accent)) 22%,transparent)}.clip-style-choice button span{color:var(--t-low);font-size:10.5px;line-height:1.35}.clip-style-choice button em{color:var(--clip-style-accent,var(--accent-bright));font:normal 650 9px var(--font-mono)}
.clip-style-color{display:flex;align-items:center;justify-content:space-between;gap:18px}.clip-style-color>div{display:grid;gap:3px}.clip-style-color p{max-width:500px;margin:2px 0 0;color:var(--t-dim);font-size:11px}.clip-style-color label{display:flex;align-items:center;gap:8px}.clip-style-color input[type=color]{width:48px;height:42px;padding:3px;border:1px solid var(--hair);border-radius:9px;background:transparent}.clip-style-color .cs-input{width:105px;font-family:var(--font-mono)}.clip-style-direction{display:grid;gap:8px}.clip-style-direction>span{font-weight:700;color:var(--t-hi)}.clip-style-direction>span em{font:normal 600 9px var(--font-mono);color:var(--t-dim);text-transform:uppercase}.clip-style-direction textarea{resize:vertical;min-height:78px}.clip-style-direction small{color:var(--t-dim);font-size:10px}.clip-style-save-line{display:flex;align-items:center;gap:12px}.clip-style-save-line span{color:var(--t-low);font-size:10.5px}
@media(max-width:1100px){.clip-style-layout{grid-template-columns:1fr}}@media(max-width:900px){.clip-style-toolbar{grid-template-columns:1fr auto}.clip-style-toolbar-title{grid-column:1/-1}.clip-style-toolbar-save{grid-column:1/-1}}@media(max-width:700px){.clip-style-choice>div{grid-template-columns:1fr}.clip-style-toolbar{grid-template-columns:1fr}.clip-style-toolbar-title,.clip-style-toolbar-save{grid-column:auto}.clip-style-toolbar-presets{align-items:stretch;flex-wrap:wrap}.clip-style-toolbar-presets label{flex:1 1 180px}.clip-style-toolbar-presets .cs-select{width:100%}.clip-style-toolbar-continue{width:100%;justify-content:center}.clip-style-color{align-items:flex-start;flex-direction:column}}

.clip-preset-save{display:flex;gap:8px;align-items:center}.clip-preset-save .cs-input{max-width:260px}
.clip-style-section{display:grid;gap:16px;padding:17px}.clip-style-section-head{display:flex;align-items:start;justify-content:space-between;gap:18px;padding-bottom:12px;border-bottom:1px solid var(--hair-2)}.clip-style-section-head>div{display:grid;gap:3px}.clip-style-section-head span{color:var(--clip-style-accent,var(--accent-bright));font:700 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.clip-style-section-head strong{color:var(--t-hi);font-size:16px}.clip-style-section-head p{max-width:320px;margin:0;color:var(--t-low);font-size:10.5px;line-height:1.45;text-align:right}.clip-style-section .clip-style-choice{padding:0;border:0;background:transparent}.clip-style-section .clip-style-choice legend{padding:0 0 8px;font-size:11px}.clip-style-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.clip-style-subhead strong{color:var(--t-hi);font-size:11px}.clip-style-subhead span{color:var(--t-low);font:600 9px var(--font-mono);text-transform:uppercase}
.clip-font-picker>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.clip-font-picker button{display:grid;gap:7px;min-width:0;padding:11px 8px;border:1px solid var(--hair);border-radius:9px;background:oklch(1 0 0/.02);color:inherit;cursor:pointer}.clip-font-picker button.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 62%,white);background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 11%,transparent)}.clip-font-picker button span{overflow:hidden;color:var(--t-hi);font-size:22px;line-height:1;white-space:nowrap;text-overflow:ellipsis}.clip-font-picker button em{overflow:hidden;color:var(--t-low);font:normal 600 8.5px var(--font-mono);white-space:nowrap;text-overflow:ellipsis}
.clip-caption-style-picker>div:last-child{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.clip-caption-option{display:grid;align-content:start;gap:6px;min-width:0;padding:8px;border:1px solid var(--hair);border-radius:10px;background:transparent;color:inherit;cursor:pointer;text-align:left}.clip-caption-option.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 65%,white);background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 10%,transparent)}.clip-caption-option>span{display:flex;justify-content:center;gap:4px;min-height:62px;padding:21px 5px 10px;border-radius:7px;background:#121415;color:#fff;font-size:11px;font-style:normal;font-weight:850;text-align:center;text-shadow:0 2px 6px #000}.clip-caption-option>span i{font:inherit;font-style:normal}.clip-caption-option>span b{color:var(--caption-accent,var(--accent))}.clip-caption-option.boxed>span{min-height:44px;margin:9px 2px;padding:10px 5px;background:#050606;color:#fff;text-shadow:none}.clip-caption-option.punch>span{font-size:13px;text-transform:uppercase}.clip-caption-option.elegant>span{font-size:10px;font-weight:550;letter-spacing:.03em;text-shadow:0 1px 3px #000}.clip-caption-option.clean>span b{color:#fff}.clip-caption-option>strong{color:var(--t-hi);font-size:10.5px}.clip-caption-option>em{color:var(--t-low);font-size:8.5px;font-style:normal;line-height:1.35}.clip-title-callout-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.clip-title-callout-grid>div{min-width:0;padding:12px;border:1px solid var(--hair-2);border-radius:10px;background:oklch(1 0 0/.02)}
.clip-style-advanced{padding:0;overflow:hidden}.clip-style-advanced>summary{padding:14px 16px;color:var(--t-hi);cursor:pointer;font-size:12px;font-weight:700}.clip-style-advanced[open]>summary{border-bottom:1px solid var(--hair)}.clip-style-advanced>label{margin:13px}.clip-style-advanced .clip-style-direction{display:grid;gap:8px}.clip-style-advanced>.clip-style-animation-library{margin:13px;border-color:var(--hair-2);background:var(--bg-1)}.clip-style-aside{display:grid;align-content:start;position:sticky;top:12px}.clip-style-preview{display:grid;gap:11px}.clip-style-preview>p{margin:0;color:var(--t-low);font-size:9.5px;line-height:1.4}.clip-style-phone{position:relative;width:min(100%,270px);aspect-ratio:9/16;margin:auto;overflow:hidden;border:1px solid color-mix(in oklch,var(--preview-accent,var(--accent)) 40%,var(--hair));border-radius:18px;background:radial-gradient(circle at 50% 28%,color-mix(in oklch,var(--preview-accent,var(--accent)) 30%,#22282e),#111416 58%);box-shadow:0 20px 55px rgba(0,0,0,.35)}.clip-style-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}.clip-preview-person{position:absolute;inset:0}.clip-preview-person i{position:absolute;top:21%;left:36%;width:28%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#67717d,#222a31)}.clip-preview-person span{position:absolute;left:20%;right:20%;bottom:15%;height:48%;border-radius:50% 50% 18% 18%;background:linear-gradient(160deg,#3d4852,#171b1f)}.clip-preview-title{position:absolute;top:13%;left:8%;right:8%;color:#fff;font-size:22px;line-height:.93;text-align:center;text-shadow:0 3px 12px #000}.clip-preview-title b{color:var(--preview-accent,var(--accent));font:inherit}.clip-preview-caption{position:absolute;left:7%;right:7%;bottom:18%;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;color:#fff;font-size:14px;font-weight:850;line-height:1.05;text-align:center;text-shadow:0 2px 7px #000}.clip-preview-caption b{color:var(--preview-accent,var(--accent));font:inherit}.caption-clean .clip-preview-caption b{color:#fff}.caption-boxed .clip-preview-caption{padding:7px 8px;border-radius:7px;background:rgba(6,7,8,.84);text-shadow:none}.caption-punch .clip-preview-caption{font-size:17px;text-transform:uppercase}.caption-elegant .clip-preview-caption{font-size:12px;font-weight:550;letter-spacing:.04em}.caption-activecolor .clip-preview-caption b{color:var(--preview-accent,var(--accent))}.caption-activebox .clip-preview-caption b{color:#fff;background:var(--preview-accent,var(--accent));padding:1px 5px;border-radius:6px;text-shadow:none}.caption-activepop .clip-preview-caption{font-size:16px;text-transform:uppercase}.caption-activepop .clip-preview-caption b{color:var(--preview-accent,var(--accent))}.caption-wordbyword .clip-preview-caption{font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}.clip-library-card.disabled{opacity:.55}.clip-library-card-title{display:flex!important;grid-template-columns:1fr auto;align-items:center;gap:8px}.clip-effect-toggle{min-width:54px;padding:5px 8px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--t-low);cursor:pointer;font:700 8.5px var(--font-mono);text-transform:uppercase}.clip-effect-toggle.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 50%,var(--hair));background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 12%,transparent);color:var(--clip-style-accent,var(--accent-bright))}.clip-effect-toggle:disabled{cursor:default;opacity:.72}.clip-style-animation-library .clip-library-tabs{margin:0}.clip-style-animation-library .clip-library-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}.clip-style-animation-library .clip-library-card.visual{grid-template-columns:112px minmax(0,1fr);min-height:102px}.clip-style-animation-library .clip-effect-demo{width:112px;height:78px}.clip-style-animation-library .clip-library-card.style-control p{margin-top:3px;font-size:10.5px}.clip-style-animation-library .clip-remotion-preview{margin-top:0}
@media(max-width:1180px){.clip-style-aside{position:static}}@media(max-width:760px){.clip-style-section-head{display:grid}.clip-style-section-head p{text-align:left}.clip-caption-style-picker>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}.clip-font-picker>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}.clip-title-callout-grid{grid-template-columns:1fr}.clip-preset-save{align-items:stretch;flex-direction:column}.clip-preset-save .cs-input{max-width:none}.clip-style-animation-library .clip-library-grid{grid-template-columns:1fr}}@media(max-width:520px){.clip-style-animation-library .clip-library-card.visual{grid-template-columns:1fr}.clip-style-animation-library .clip-effect-demo{width:100%}}

/* Clip Engine style v3: contained caption cards and one authoritative preview */
.clip-caption-style-picker>div:last-child{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.clip-caption-option{grid-template-rows:auto auto 1fr;min-height:164px;overflow:hidden}.clip-caption-option>span{align-content:center;align-items:center;flex-wrap:wrap;gap:3px 5px;min-width:0;min-height:72px;padding:14px 8px;overflow:hidden;overflow-wrap:anywhere;white-space:normal}.clip-caption-option>span i,.clip-caption-option>span b{min-width:0}.clip-caption-option>strong,.clip-caption-option>em{min-width:0;overflow-wrap:anywhere}.clip-caption-option.boxed>span{min-height:64px;margin:4px 0;padding:10px 7px}.clip-caption-option.punch>span{font-size:12px}
.clip-style-title-section .clip-font-picker>div:last-child{max-width:760px}.clip-font-picker button span{max-width:100%}
.clip-caption-position-picker{display:grid;gap:0}.clip-caption-position-picker>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.clip-caption-position-picker button{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr;gap:3px 10px;align-items:center;min-width:0;padding:10px;border:1px solid var(--hair);border-radius:10px;background:oklch(1 0 0/.02);color:inherit;text-align:left;cursor:pointer}.clip-caption-position-picker button.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 62%,white);background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 11%,transparent)}.clip-caption-position-picker button>span{position:relative;grid-row:1/3;width:40px;aspect-ratio:9/16;border:1px solid var(--hair-2);border-radius:5px;background:#111416}.clip-caption-position-picker button>span i{position:absolute;left:6px;right:6px;height:3px;border-radius:999px;background:var(--clip-style-accent,var(--accent));box-shadow:0 0 8px color-mix(in oklch,var(--clip-style-accent,var(--accent)) 65%,transparent)}.clip-caption-position-picker button.upper>span i{top:30%}.clip-caption-position-picker button.middle>span i{top:50%}.clip-caption-position-picker button.lower>span i{top:72%}.clip-caption-position-picker button strong{color:var(--t-hi);font-size:11px}.clip-caption-position-picker button em{min-width:0;color:var(--t-low);font-size:9px;font-style:normal;line-height:1.35;overflow-wrap:anywhere}
.clip-callout-style-picker{display:grid;gap:0;margin-top:2px;padding-bottom:14px;border-bottom:1px solid var(--hair-2)}.clip-callout-style-picker>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.clip-callout-style-picker button{display:grid;align-content:start;gap:6px;min-width:0;padding:9px;border:1px solid var(--hair);border-radius:10px;background:oklch(1 0 0/.02);color:inherit;text-align:left;cursor:pointer}.clip-callout-style-picker button.on{border-color:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 62%,white);background:color-mix(in oklch,var(--clip-style-accent,var(--accent)) 10%,transparent)}.clip-callout-style-picker button>span{display:grid;place-items:center;min-height:54px;padding:8px;border-radius:7px;background:#101314;color:#fff;font-size:11px;font-weight:850;text-align:center;overflow-wrap:anywhere}.clip-callout-style-picker button.viral-pop>span{color:var(--clip-style-accent,var(--accent));text-shadow:2px 2px 0 #000}.clip-callout-style-picker button.premium-glow>span{color:#f7f1e8;text-shadow:0 0 10px var(--clip-style-accent,var(--accent))}.clip-callout-style-picker button strong{color:var(--t-hi);font-size:10.5px}.clip-callout-style-picker button em{color:var(--t-low);font-size:8.5px;font-style:normal;line-height:1.35;overflow-wrap:anywhere}
.clip-style-phone>video{transform-origin:center;transition:transform .2s ease}.clip-style-phone.preview-punch-zoom>video{animation:clipPreviewPunch 1.15s var(--ease-spring) infinite alternate}.clip-style-phone.preview-slow-zoom>video,.clip-style-phone.preview-center-zoom>video{animation:clipPreviewSlow 3s ease-in-out infinite alternate}@keyframes clipPreviewPunch{from{transform:scale(1)}to{transform:scale(1.14)}}@keyframes clipPreviewSlow{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.clip-preview-title{left:9%;right:9%;max-width:82%;margin:auto;font-size:clamp(17px,2vw,22px);overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}.clip-preview-caption{top:72%;bottom:auto;transform:translateY(-50%);max-width:86%;margin:auto;padding-inline:2px;overflow:hidden;overflow-wrap:anywhere}.caption-position-upper .clip-preview-caption{top:30%}.caption-position-middle .clip-preview-caption{top:50%}.caption-position-lower .clip-preview-caption{top:72%}.clip-style-effect-overlay{position:absolute;z-index:6;inset:0;pointer-events:none}.clip-style-effect-overlay>div{width:100%!important;height:100%!important}.clip-preview-callout{position:absolute;z-index:7;top:27%;left:9%;right:9%;padding:8px 10px;border-radius:8px;text-align:center;font-size:14px;font-weight:900;animation:clipEffectPop .55s var(--ease-spring) both}.clip-preview-callout.classic-white{border:1px solid rgba(255,255,255,.5);background:rgba(8,10,12,.64);color:#fff;text-shadow:0 2px 6px #000}.clip-preview-callout.viral-pop{border:1px solid var(--preview-accent,var(--accent));background:rgba(8,10,12,.78);color:var(--preview-accent,var(--accent));text-shadow:2px 2px 0 #000}.clip-preview-callout.premium-glow{border:1px solid color-mix(in oklch,var(--preview-accent,var(--accent)) 60%,white);background:rgba(20,18,24,.76);color:#f7f1e8;text-shadow:0 0 12px var(--preview-accent,var(--accent))}
@media(max-width:760px){.clip-caption-style-picker>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}.clip-callout-style-picker>div:last-child{grid-template-columns:1fr}.clip-caption-option{min-height:154px}}@media(max-width:520px){.clip-caption-style-picker>div:last-child,.clip-caption-position-picker>div:last-child{grid-template-columns:1fr}.clip-caption-option{min-height:0}}
.clip-quality-summary { display: grid; gap: 3px; padding: 11px 13px; border-bottom: 1px solid var(--hair-2); font-size: 12px; }
.clip-quality-summary strong, .clip-quality-badge { color: var(--green); }
.clip-quality-summary em { color: var(--amber); font-style: normal; }
.clip-quality-badge { margin: 10px 0 0; font-size: 12px; font-weight: 700; }
.clip-queue-item.manual-review { border-left: 3px solid var(--amber); }

/* Hylo Publishing */
.clip-publishing-empty-route { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.clip-provider-capacity-banner { display: grid; gap: 3px; margin-top: 12px; padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--hair)); border-radius: var(--radius-xs); background: var(--amber-soft); }
.clip-provider-capacity-banner strong { color: var(--amber); font-size: 12px; }
.clip-provider-capacity-banner span, .clip-provider-capacity-banner em { color: var(--t-mid); font-size: 11px; font-style: normal; }
.clip-publishing-target-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.clip-publishing-target-picker label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; }
.clip-publishing-target-picker label.selected { border-color: rgba(90,220,170,.34); background: rgba(50,190,140,.08); }
.clip-publishing-target-picker input { grid-row: 1 / 3; align-self: center; }
.clip-publishing-target-picker strong, .clip-publishing-target-picker span { display: block; }
.clip-publishing-target-picker span { color: rgba(255,255,255,.48); font-size: 11px; text-transform: capitalize; }
.clip-platform-overrides .clip-form-grid { margin-top: 9px; }
.clip-destination-confirmation, .clip-rules-ready { color: rgba(255,255,255,.68); font-size: 11px; }
.clip-rules-ready { color: var(--green); }
.clip-default-destinations { display: flex; flex-wrap: wrap; gap: 7px; }
.clip-default-destinations label, .clip-destination-override label { display: grid; grid-template-columns: auto auto auto; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: rgba(255,255,255,.72); font-size: 10px; cursor: pointer; }
.clip-default-destinations label:has(input:checked), .clip-destination-override label:has(input:checked) { border-color: rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.08); }
.clip-default-destinations em, .clip-destination-override em { color: rgba(255,255,255,.36); font-size: 9px; font-style: normal; text-transform: capitalize; }
.clip-target-identity { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; align-self: center; }
.clip-platform-icon { --clip-platform-icon-ink: #17191f; display: grid !important; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.86) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.clip-platform-icon svg { display: block; }
.clip-platform-icon > span { color: inherit; font-size: 15px; font-weight: 800; }
.clip-platform-instagram { background: linear-gradient(145deg, rgba(131,58,180,.28), rgba(253,29,29,.2) 58%, rgba(252,176,69,.22)); color: #ffc1cf !important; }
.clip-platform-tiktok { background: linear-gradient(145deg, rgba(37,244,238,.14), rgba(255,255,255,.04) 48%, rgba(254,44,85,.15)); color: #f5fbff !important; }
.clip-platform-youtube { background: rgba(255,0,0,.15); color: #ff6767 !important; }
.clip-platform-facebook { background: rgba(24,119,242,.16); color: #70adff !important; }
.clip-platform-linkedin { background: rgba(10,102,194,.17); color: #70b7f2 !important; }
.clip-platform-icon-compact { width: 28px; height: 28px; border-radius: 8px; }
.clip-platform-icon-compact svg { width: 16px; height: 16px; }
.clip-schedule-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--hair-2); border-radius: 9px; background: oklch(1 0 0 / .025); }
.clip-schedule-view-switch button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--t-low); font: 700 10px var(--font-ui); cursor: pointer; }
.clip-schedule-view-switch button.on { background: var(--accent-soft); color: var(--accent-bright); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 16%, transparent); }
.clip-availability-drawer { margin: 12px 0; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.015); }
.clip-availability-drawer > summary { display: flex; gap: 8px; align-items: baseline; padding: 10px 12px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; cursor: pointer; }
.clip-availability-drawer > summary span { color: rgba(255,255,255,.38); font-size: 10px; font-weight: 500; }
.clip-availability-editor { display: grid; gap: 12px; padding: 0 12px 12px; border-top: 1px solid rgba(255,255,255,.055); }
.clip-availability-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; padding-top: 12px; }
.clip-availability-head label { display: grid; gap: 4px; color: rgba(255,255,255,.42); font-size: 10px; }
.clip-availability-head span { color: rgba(255,255,255,.4); font: 10px var(--font-mono); }
.clip-availability-days { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 7px; overflow-x: auto; padding-bottom: 3px; }
.clip-availability-days > section { display: grid; align-content: start; gap: 7px; min-width: 120px; padding: 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; }
.clip-availability-days header { display: flex; justify-content: space-between; align-items: center; }
.clip-availability-days header strong { color: rgba(255,255,255,.7); font-size: 10px; }
.clip-availability-days button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: transparent; color: rgba(255,255,255,.52); cursor: pointer; }
.clip-availability-days section > em { color: rgba(255,255,255,.25); font-size: 9px; font-style: normal; }
.clip-availability-days section > div { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 3px; align-items: center; }
.clip-availability-days input[type='time'] { min-width: 0; width: 100%; padding: 5px 3px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.7); font: 9px var(--font-mono); color-scheme: dark; }
.clip-availability-days section > div > span { color: rgba(255,255,255,.25); font-size: 9px; }
.clip-schedule-calendar-shell { display: grid; gap: 9px; }
.clip-calendar-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; }
.clip-calendar-week-nav { display: flex; gap: 7px; align-items: center; }
.clip-calendar-week-nav strong { min-width: 120px; color: rgba(255,255,255,.72); font: 11px var(--font-mono); text-align: center; }
.clip-calendar-week-nav .btn { min-width: 29px; padding-inline: 8px; }
.clip-calendar-toolbar > label { display: grid; gap: 3px; color: rgba(255,255,255,.4); font-size: 9px; }
.clip-calendar-toolbar .cs-select { min-width: 150px; }
.clip-schedule-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0; padding: 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 9px; background: rgba(255,255,255,.012); }
.clip-schedule-filters label { display: grid; gap: 3px; color: rgba(255,255,255,.38); font-size: 9px; }
.clip-schedule-filters .cs-select { min-width: 145px; }
.clip-schedule-summary { display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.012); }
.clip-schedule-summary > div { display: grid; gap: 2px; min-width: 120px; padding: 8px 11px; border-right: 1px solid rgba(255,255,255,.055); }
.clip-schedule-summary > div:last-child { border-right: 0; }
.clip-schedule-summary span { color: rgba(255,255,255,.34); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.clip-schedule-summary strong { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 600; }
.clip-calendar-scroll { overflow-x: auto; padding-bottom: 5px; }
.clip-campaign-band-lane { display: grid; grid-template-columns: 58px minmax(0,1fr); min-width: 1058px; padding: 7px 0 9px; }
.clip-campaign-band-lane > span { align-self: center; color: rgba(255,255,255,.27); font: 7px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.clip-campaign-band-lane > div { position: relative; height: 28px; }
.clip-campaign-band-lane i { position: absolute; top: 2px; display: flex; gap: 8px; align-items: center; overflow: hidden; height: 22px; padding: 0 8px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 6px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),.07)); color: var(--accent-bright); font-style: normal; white-space: nowrap; }
.clip-campaign-band-lane i strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
.clip-campaign-band-lane i em { color: rgba(255,255,255,.4); font: 7px var(--font-mono); font-style: normal; }
.clip-campaign-band-lane i.campaign-1, .clip-month-campaign-bands i.campaign-1 { border-color: rgba(80,197,175,.25); background: rgba(48,157,139,.13); color: #9fe3d4; }
.clip-campaign-band-lane i.campaign-2, .clip-month-campaign-bands i.campaign-2 { border-color: rgba(223,165,84,.25); background: rgba(190,125,47,.13); color: #e8c58d; }
.clip-campaign-band-lane i.campaign-3, .clip-month-campaign-bands i.campaign-3 { border-color: rgba(222,100,141,.25); background: rgba(190,62,112,.12); color: #efafcb; }
.clip-week-timegrid { display: grid; grid-template-columns: 58px repeat(7, minmax(142px,1fr)); min-width: 1058px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; background: rgba(13,14,20,.28); }
.clip-week-timegrid > aside { display: grid; grid-template-rows: 42px repeat(15, 48px); border-right: 1px solid rgba(255,255,255,.055); }
.clip-week-timegrid > aside time { grid-row: span 1; padding: 0 8px; color: rgba(255,255,255,.27); font: 7px var(--font-mono); transform: translateY(37px); text-align: right; }
.clip-week-timegrid > section { border-right: 1px solid rgba(255,255,255,.05); }
.clip-week-timegrid > section:last-child { border-right: 0; }
.clip-week-timegrid > section > header { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 42px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.055); }
.clip-week-timegrid > section > header span { color: rgba(255,255,255,.36); font: 8px var(--font-mono); text-transform: uppercase; }
.clip-week-timegrid > section > header strong { color: rgba(255,255,255,.72); font: 15px var(--font-serif); }
.clip-week-timegrid > section > header em { display: none; }
.clip-week-timegrid > section.today > header { background: rgba(var(--accent-rgb),.09); }
.clip-timegrid-day { position: relative; height: 720px; padding: 0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(255,255,255,.045) 48px); }
.clip-timegrid-day .clip-calendar-window { position: absolute; z-index: 0; left: 5px; right: 5px; min-height: 8px; padding: 0; border: 1px dashed rgba(var(--calendar-platform),.14); border-left: 0; border-radius: 5px; background: rgba(var(--calendar-platform),.025); pointer-events: none; }
.clip-timegrid-day article { position: absolute; z-index: 2; display: grid; gap: 2px; min-height: 44px; padding: 6px 7px; border: 1px solid rgba(var(--calendar-platform),.2); border-left: 3px solid rgba(var(--calendar-platform),.7); border-radius: 7px; background: linear-gradient(110deg, rgba(var(--calendar-platform),.14), rgba(24,25,35,.94) 70%); box-shadow: 0 7px 18px rgba(0,0,0,.22); transform: translateY(-1px); }
.clip-timegrid-day article:hover { z-index: 5; width: max(100%, 160px) !important; border-color: rgba(var(--calendar-platform),.45); }
.clip-timegrid-day article time { color: rgba(var(--calendar-platform),.9); font: 8px var(--font-mono); }
.clip-timegrid-day article strong { overflow: hidden; color: rgba(255,255,255,.84); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.clip-timegrid-day article .clip-calendar-account { color: rgba(255,255,255,.42); font-size: 8px; }
.clip-timegrid-day article .clip-delivery-badge { display: none; }
.clip-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); min-width: 1015px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.012); }
.clip-calendar-week > section { min-height: 260px; border-left: 1px solid rgba(255,255,255,.055); }
.clip-calendar-week > section:first-child { border-left: 0; }
.clip-calendar-week > section > header { display: grid; grid-template-columns: 1fr auto; gap: 2px 7px; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.055); }
.clip-calendar-week > section > header span { color: rgba(255,255,255,.38); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.clip-calendar-week > section > header strong { color: rgba(255,255,255,.76); font: 15px var(--font-serif); }
.clip-calendar-week > section > header em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent-bright); font: 9px var(--font-mono); font-style: normal; }
.clip-calendar-week > section.today > header { background: rgba(var(--accent-rgb),.08); }
.clip-calendar-week > section.today > header strong { color: var(--accent-bright); }
.clip-calendar-day-body { display: grid; align-content: start; gap: 6px; padding: 7px; }
.clip-calendar-day-body > p { color: rgba(255,255,255,.2); font-size: 9px; text-align: center; }
.clip-calendar-window { --calendar-platform: 142,232,195; display: grid; gap: 4px; padding: 6px 7px; border: 1px dashed rgba(var(--calendar-platform),.3); border-left: 3px solid rgba(var(--calendar-platform),.65); border-radius: 7px; background: rgba(var(--calendar-platform),.055); }
.clip-calendar-window time { color: rgba(var(--calendar-platform),.78); font: 9px var(--font-mono); }
.clip-calendar-window span { overflow: hidden; color: rgba(255,255,255,.38); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.clip-calendar-day-body article { display: grid; gap: 3px; padding: 8px; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 8px; background: rgba(var(--accent-rgb),.1); box-shadow: 0 7px 16px rgba(0,0,0,.09); }
.clip-calendar-day-body article time { color: var(--accent-bright); font: 9px var(--font-mono); }
.clip-calendar-day-body article strong { overflow: hidden; color: rgba(255,255,255,.82); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.clip-calendar-day-body article span, .clip-calendar-day-body article em { color: rgba(255,255,255,.4); font-size: 9px; font-style: normal; }
.clip-calendar-day-body article em { color: var(--green); text-transform: capitalize; }
.clip-calendar-day-body article.failed { border-color: rgba(242,157,146,.24); background: rgba(180,70,65,.08); }
.clip-calendar-instagram { --calendar-platform: var(--platform-instagram); }
.clip-calendar-tiktok { --calendar-platform: var(--platform-tiktok); }
.clip-calendar-youtube { --calendar-platform: var(--platform-youtube); }
.clip-calendar-facebook { --calendar-platform: var(--platform-facebook); }
.clip-calendar-linkedin { --calendar-platform: var(--platform-linkedin); }
.clip-calendar-post[class*="clip-calendar-"] { border-left: 3px solid rgba(var(--calendar-platform),.68); background: linear-gradient(90deg, rgba(var(--calendar-platform),.1), rgba(var(--accent-rgb),.08)); }
.clip-calendar-account { display: flex !important; gap: 5px; align-items: center; min-width: 0; }
.clip-calendar-account > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-platform-icon-calendar { display: grid !important; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; }
.clip-platform-icon-calendar svg { width: 11px; height: 11px; }
.clip-calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; color: rgba(255,255,255,.38); font-size: 9px; }
.clip-calendar-legend span { display: flex; gap: 5px; align-items: center; }
.clip-calendar-legend i { width: 9px; height: 9px; border-radius: 3px; }
.clip-calendar-legend i.window { border: 1px dashed rgba(142,232,195,.45); background: rgba(50,190,140,.04); }
.clip-calendar-legend i.post { border: 1px solid rgba(var(--accent-rgb),.32); background: rgba(var(--accent-rgb),.18); }

/* Guided publishing workflow */
.clip-guided-publishing { display: grid; gap: 14px; width: 100%; max-width: none; margin: 0; }
.clip-guided-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.clip-guided-head > div:first-child { display: grid; gap: 4px; }
.clip-guided-head > div:first-child > span, .clip-guided-stage-card > header > span { color: var(--t-low); font: 740 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.clip-guided-head > div:first-child > strong { color: var(--t-hi); font: 640 18px/1.2 var(--font-ui); }
.clip-guided-head p, .clip-guided-stage-card > header p { max-width: 720px; margin: 0; color: var(--t-dim); font-size: 11px; line-height: 1.5; }
.clip-guided-sync { display: grid; justify-items: end; gap: 3px; flex: 0 0 auto; }
.clip-guided-sync span { color: var(--t-low); font: 700 9px var(--font-mono); text-transform: uppercase; }
.clip-guided-sync strong { color: var(--t-mid); font-size: 11px; }
.clip-guided-sync .btn { margin-top: 5px; }
.clip-guided-progress { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.clip-guided-progress > div { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 8px; align-items: center; min-height: 58px; padding: 11px; border: 1px solid var(--hair-2); border-radius: 11px; background: var(--glass); }
.clip-guided-progress > div > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: oklch(1 0 0 / .07); color: var(--t-low); font: 700 10px var(--font-mono); }
.clip-guided-progress > div > div { display: grid; gap: 2px; min-width: 0; }
.clip-guided-progress strong { color: var(--t-mid); font-size: 12px; }
.clip-guided-progress em { overflow: hidden; color: var(--t-low); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.clip-guided-progress > div.complete { border-color: color-mix(in oklch, var(--green) 22%, var(--hair)); background: color-mix(in oklch, var(--green) 5%, var(--glass)); }
.clip-guided-progress > div.complete > span { background: color-mix(in oklch, var(--green) 16%, transparent); color: var(--green); }
.clip-guided-progress > div.complete strong { color: var(--green); }
.clip-guided-progress > div.active { border-color: color-mix(in oklch, var(--accent) 38%, var(--hair)); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 16%, transparent); }
.clip-guided-progress > div.active > span { background: color-mix(in oklch, var(--accent) 24%, transparent); color: var(--accent-bright); }
.clip-guided-progress > div.active strong { color: var(--t-hi); }
.clip-guided-progress > div.active em { color: var(--t-dim); }
.clip-guided-stage-card { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--hair); border-radius: 10px; background: oklch(1 0 0 / .035); }
.clip-guided-stage-card > header { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.clip-guided-stage-card > header > strong { color: var(--t-hi); font-size: 15px; line-height: 1.25; }
.clip-prepare-checklist { display: grid; gap: 8px; }
.clip-prepare-checklist article { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--glass); }
.clip-prepare-checklist article > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklch, var(--amber) 12%, transparent); color: var(--amber); font: 700 10px var(--font-mono); }
.clip-prepare-checklist article.complete > span { background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--green); }
.clip-prepare-checklist article > div { display: grid; gap: 2px; }
.clip-prepare-checklist strong { color: var(--t-mid); font-size: 12px; }
.clip-prepare-checklist p { margin: 0; color: var(--t-dim); font-size: 10px; }
.clip-prepare-context { gap: 12px; }
.clip-prepare-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--hair-2); border-radius: 11px; background: var(--glass); }
.clip-prepare-overview article { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 13px 14px; border-left: 1px solid var(--hair-2); }
.clip-prepare-overview article:first-child { border-left: 0; }
.clip-prepare-overview article.outcome { background: color-mix(in oklch,var(--accent) 8%,transparent); }
.clip-prepare-overview span,.clip-prepare-next header span,.clip-prepare-ready summary span { color: var(--t-low); font: 740 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.clip-prepare-overview strong { overflow: hidden; color: var(--t-hi); font: 650 18px/1.2 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.clip-prepare-overview article.outcome strong { color: var(--accent-bright); }
.clip-prepare-overview p { display: -webkit-box; overflow: hidden; min-height: 30px; margin: 0; color: var(--t-dim); font-size: 9px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.clip-prepare-next { display: grid; gap: 9px; padding: 13px; border: 1px solid color-mix(in oklch,var(--amber) 28%,var(--hair)); border-radius: 11px; background: color-mix(in oklch,var(--amber) 4%,var(--glass)); }
.clip-prepare-next > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.clip-prepare-next > header > div { display: grid; gap: 3px; }
.clip-prepare-next header strong { color: var(--t-hi); font-size: 14px; }
.clip-prepare-next > header > p { margin: 0; color: var(--t-low); font-size: 9px; }
.clip-prepare-action-list { display: grid; gap: 7px; }
.clip-prepare-action-list > article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--hair-2); border-radius: 9px; background: color-mix(in oklch,var(--bg-1) 78%,transparent); }
.clip-prepare-action-list > article > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: color-mix(in oklch,var(--amber) 15%,transparent); color: var(--amber); font: 750 9px var(--font-mono); }
.clip-prepare-action-list > article > div { display: grid; gap: 2px; min-width: 0; }
.clip-prepare-action-list strong { color: var(--t-hi); font-size: 11px; }
.clip-prepare-action-list p { margin: 0; color: var(--t-dim); font-size: 9px; line-height: 1.45; }
.clip-prepare-action-list .btn { white-space: nowrap; }
.clip-prepare-system-action { color: var(--amber); font: 700 8px var(--font-mono); text-transform: uppercase; }
.clip-prepare-ready { overflow: hidden; border: 1px solid color-mix(in oklch,var(--green) 20%,var(--hair)); border-radius: 10px; background: color-mix(in oklch,var(--green) 3%,var(--glass)); }
.clip-prepare-ready > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; }
.clip-prepare-ready > summary::-webkit-details-marker { display: none; }
.clip-prepare-ready > summary > div { display: grid; gap: 2px; }
.clip-prepare-ready summary strong { color: var(--green); font-size: 11px; }
.clip-prepare-ready summary em { color: var(--t-low); font: normal 8px var(--font-mono); }
.clip-prepare-ready > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--hair-2); }
.clip-prepare-ready article { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hair); }
.clip-prepare-ready article:nth-child(-n+2) { border-top: 0; }
.clip-prepare-ready article:nth-child(even) { border-left: 1px solid var(--hair); }
.clip-prepare-ready article > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: color-mix(in oklch,var(--green) 14%,transparent); color: var(--green); font: 700 8px var(--font-mono); }
.clip-prepare-ready article > div { display: grid; gap: 2px; }
.clip-prepare-ready article strong { color: var(--t-mid); font-size: 10px; }
.clip-prepare-ready article p { margin: 0; color: var(--t-dim); font-size: 8.5px; line-height: 1.4; }
.clip-guided-drawer, .clip-publishing-diagnostics { overflow: hidden; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--glass); }
.clip-guided-drawer > summary, .clip-publishing-diagnostics > summary { display: flex; justify-content: space-between; gap: 12px; padding: 11px; color: var(--t-mid); font-size: 11px; font-weight: 700; cursor: pointer; }
.clip-guided-drawer > summary span { color: var(--t-low); font-size: 9px; font-weight: 500; }
.clip-guided-drawer[open] > summary, .clip-publishing-diagnostics[open] > summary { border-bottom: 1px solid var(--hair-2); }
.clip-guided-drawer > .clip-default-destinations, .clip-guided-drawer > .clip-ai-plan-toggle { margin: 13px; }
.clip-guided-overrides { display: grid; gap: 7px; padding: 0 13px 13px; }
.clip-guided-overrides label { display: grid; grid-template-columns: minmax(180px,1fr) minmax(190px,.55fr); gap: 12px; align-items: center; }
.clip-guided-overrides label > span { overflow: hidden; color: var(--t-mid); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.clip-guided-primary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 12px 13px; border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--hair)); border-radius: 10px; background: var(--accent-soft); }
.clip-guided-primary > div { display: grid; gap: 3px; }
.clip-guided-primary strong { color: var(--t-hi); font-size: 13px; }
.clip-guided-primary span { margin: 0; color: var(--t-dim); font-size: 10px; line-height: 1.45; }
.clip-guided-primary > .btn { flex: 0 0 auto; min-height: 36px; white-space: nowrap; }
/* One stat-row grammar for Approve (plan facts) and Deliver (live counts). */
.clip-stat-row { display: grid; border: 1px solid var(--hair-2); border-radius: 9px; background: var(--glass); overflow: hidden; }
.clip-stat-row.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.clip-stat-row.cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.clip-stat-row article { display: grid; gap: 4px; padding: 12px 13px; border-left: 1px solid var(--hair-2); }
.clip-stat-row article:first-child { border-left: 0; }
.clip-stat-row span { color: var(--t-low); font: 700 9px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.clip-stat-row strong { overflow: hidden; color: var(--t-hi); font: 640 16px/1.2 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.clip-stat-row article.attention { background: var(--danger-soft); }
.clip-stat-row article.attention strong { color: var(--danger); }

/* Persistent Buffer-connection status element (head chip + inline action variant). */
.clip-provider-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--glass); }
.clip-provider-status .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--t-low); }
.clip-provider-status-copy { display: grid; gap: 1px; }
.clip-provider-status .label { color: var(--t-mid); font: 700 10px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.clip-provider-status .meta { color: var(--t-low); font: 9px var(--font-mono); }
.clip-provider-status .btn { margin-left: 2px; }
.clip-provider-status.verified .dot { background: var(--green); } .clip-provider-status.verified .label { color: var(--green); }
.clip-provider-status.verifying .dot { background: var(--accent-bright); animation: clipProviderPulse 1.4s var(--ease) infinite; }
.clip-provider-status.verifying .label { color: var(--accent-bright); }
.clip-provider-status.rate_limited .dot, .clip-provider-status.needs_reconnect .dot { background: var(--amber); }
.clip-provider-status.rate_limited .label, .clip-provider-status.needs_reconnect .label { color: var(--amber); }
.clip-provider-status.failed .dot { background: var(--danger); } .clip-provider-status.failed .label { color: var(--danger); }
@keyframes clipProviderPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.clip-provider-status.inline { display: flex; justify-content: space-between; gap: 20px; align-items: start; width: 100%; padding: 12px 13px; border-radius: var(--radius-xs); }
.clip-provider-status.inline > div { display: grid; gap: 3px; }
.clip-provider-status.inline .eyebrow { color: var(--t-low); font: 700 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.clip-provider-status.inline strong { color: var(--t-hi); font-size: 13px; }
.clip-provider-status.inline p { margin: 0; color: var(--t-dim); font-size: 10px; line-height: 1.45; }
.clip-provider-status.inline em { color: var(--amber); font-size: 10px; font-style: normal; line-height: 1.45; }
.clip-provider-status.inline > .btn { flex: 0 0 auto; min-height: 36px; white-space: nowrap; }
.clip-provider-status.inline.not_connected, .clip-provider-status.inline.verifying { border-color: color-mix(in oklch, var(--accent) 32%, var(--hair)); background: var(--accent-soft); }
.clip-provider-status.inline.not_connected .eyebrow, .clip-provider-status.inline.verifying .eyebrow { color: var(--accent-bright); }
.clip-provider-status.inline.rate_limited, .clip-provider-status.inline.needs_reconnect { border-color: color-mix(in oklch, var(--amber) 34%, var(--hair)); background: color-mix(in oklch, var(--amber) 7%, var(--glass)); }
.clip-provider-status.inline.rate_limited .eyebrow, .clip-provider-status.inline.needs_reconnect .eyebrow { color: var(--amber); }
.clip-provider-status.inline.failed { border-color: color-mix(in oklch, var(--danger) 40%, var(--hair)); background: var(--danger-soft); }
.clip-provider-status.inline.failed .eyebrow, .clip-provider-status.inline.failed em { color: var(--danger); }
@media(max-width:760px){ .clip-provider-status.inline { flex-direction: column; align-items: stretch; } .clip-provider-status.inline > .btn { width: 100%; }}
.clip-delivery-language { display: flex; flex-wrap: wrap; gap: 9px 18px; color: var(--t-dim); font-size: 9px; }
.clip-delivery-language span { display: flex; gap: 6px; align-items: center; }
.clip-delivery-language i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-dim); }
.clip-delivery-language i.provider { background: var(--accent-bright); }.clip-delivery-language i.posted { background: var(--green); }
.clip-guided-post-list { display: grid; gap: 7px; }
.clip-guided-post-list > article { overflow: hidden; border: 1px solid var(--hair-2); border-radius: var(--radius-xs); background: oklch(1 0 0 / .012); }
.clip-guided-post-list > article.attention { border-color: color-mix(in oklch, var(--danger) 30%, var(--hair)); }
.clip-guided-post-row { display: grid; grid-template-columns: 48px minmax(230px,1fr) auto auto auto; gap: 12px; align-items: center; width: 100%; padding: 11px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.clip-guided-post-row:hover { background: oklch(1 0 0 / .025); }
.clip-guided-post-row .clip-post-thumbnail { width: 44px; height: 54px; border-radius: 8px; }
.clip-guided-post-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 14px; min-width: 0; }
.clip-guided-post-copy strong { overflow: hidden; color: var(--t-hi); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.clip-guided-post-copy > span { color: var(--t-dim); font-size: 9px; text-transform: capitalize; }
.clip-guided-post-copy time { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--accent-bright); font: 9px var(--font-mono); white-space: nowrap; }
.clip-guided-post-copy em { grid-column: 1/-1; color: var(--green); font-size: 8.5px; font-style: normal; }
.clip-guided-post-copy em.failed { color: var(--danger); }
.clip-guided-post-row > small { color: var(--t-low); font-size: 8.5px; white-space: nowrap; }
.clip-delivery-mini-flow { display: flex; align-items: center; }
.clip-delivery-mini-flow i { position: relative; padding-right: 22px; color: var(--t-low); font-size: 8px; font-style: normal; }
.clip-delivery-mini-flow i::after { content: ''; position: absolute; top: 50%; right: 5px; width: 12px; height: 1px; background: var(--hair); }
.clip-delivery-mini-flow i:last-child { padding-right: 0; }.clip-delivery-mini-flow i:last-child::after { display: none; }
.clip-delivery-mini-flow i.done { color: var(--green); }
.clip-delivery-mini-flow i.done::after { background: color-mix(in oklch, var(--green) 42%, transparent); }
.clip-delivery-next { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px 10px 72px; color: var(--t-dim); font-size: 9px; }
.clip-delivery-next a { color: var(--accent-bright); }
.clip-guided-post-list .clip-post-editor { border-top: 1px solid var(--hair-2); }
.clip-delivery-history > div { display: grid; }
.clip-delivery-history article { display: grid; grid-template-columns: 180px 160px 1fr; gap: 12px; padding: 9px 13px; border-top: 1px solid var(--hair-2); }
.clip-delivery-history article:first-child { border-top: 0; }
.clip-delivery-history time { color: var(--t-dim); font: 9px var(--font-mono); }
.clip-delivery-history strong { color: var(--t-mid); font-size: 10px; text-transform: capitalize; }
.clip-delivery-history span { color: var(--t-dim); font-size: 9px; }
.clip-publishing-diagnostics { justify-self: end; width: min(100%,360px); }
.clip-publishing-diagnostics > summary { color: var(--t-low); font-size: 9px; }
.clip-publishing-diagnostics > p { margin: 10px 12px 4px; color: var(--t-dim); font-size: 9px; }
.clip-publishing-diagnostics > div { display: flex; gap: 7px; padding: 8px 12px 12px; }

@media(max-width:1050px){
  .clip-guided-post-row { grid-template-columns:48px minmax(210px,1fr) auto auto; }
  .clip-delivery-mini-flow { grid-column:2/5; }.clip-guided-post-row>.clip-delivery-badge{grid-column:3}.clip-guided-post-row>small{grid-column:4}}
@media(max-width:760px){
  .clip-guided-head { display:grid }.clip-guided-sync{justify-items:start}
  .clip-guided-progress { grid-template-columns:1fr 1fr }.clip-guided-progress>div:nth-child(3){border-left:0;border-top:1px solid var(--hair-2)}.clip-guided-progress>div:nth-child(4){border-top:1px solid var(--hair-2)}
  .clip-guided-stage-card { padding:14px }.clip-prepare-checklist article{grid-template-columns:30px minmax(0,1fr)}.clip-prepare-checklist article>.btn{grid-column:2;justify-self:start}
  .clip-guided-primary{align-items:stretch;flex-direction:column}.clip-guided-primary>.btn{width:100%}
  .clip-stat-row.cols-4,.clip-stat-row.cols-5{grid-template-columns:1fr 1fr}.clip-stat-row article:nth-child(2n+1){border-left:0}.clip-stat-row article:nth-child(n+3){border-top:1px solid var(--hair-2)}
  .clip-guided-post-row{grid-template-columns:42px minmax(0,1fr) auto}.clip-guided-post-copy{grid-template-columns:1fr}.clip-guided-post-copy time{grid-column:1;grid-row:auto}.clip-guided-post-copy em{grid-column:1}.clip-delivery-mini-flow{grid-column:2/4;flex-wrap:wrap}.clip-guided-post-row>.clip-delivery-badge{grid-column:2}.clip-guided-post-row>small{grid-column:3}.clip-delivery-next{padding-left:66px}
  .clip-guided-overrides label{grid-template-columns:1fr}.clip-delivery-history article{grid-template-columns:1fr;gap:3px}
  .clip-prepare-overview{grid-template-columns:1fr 1fr}.clip-prepare-overview article:nth-child(3){border-left:0;border-top:1px solid var(--hair-2)}.clip-prepare-overview article:nth-child(4){border-top:1px solid var(--hair-2)}
  .clip-prepare-next>header{align-items:start;flex-direction:column}.clip-prepare-action-list>article{grid-template-columns:26px minmax(0,1fr)}.clip-prepare-action-list>article>.btn,.clip-prepare-action-list>article>.clip-prepare-system-action{grid-column:2;justify-self:start}}
@media(max-width:480px){.clip-guided-progress{grid-template-columns:1fr}.clip-guided-progress>div{border-left:0;border-top:1px solid var(--hair-2)}.clip-guided-progress>div:first-child{border-top:0}.clip-guided-post-row{grid-template-columns:38px minmax(0,1fr)}.clip-guided-post-row>.clip-delivery-badge,.clip-guided-post-row>small,.clip-delivery-mini-flow{grid-column:2}.clip-delivery-next{padding-left:12px;flex-direction:column}.clip-prepare-overview{grid-template-columns:1fr}.clip-prepare-overview article{border-top:1px solid var(--hair-2);border-left:0}.clip-prepare-overview article:first-child{border-top:0}.clip-prepare-ready>div{grid-template-columns:1fr}.clip-prepare-ready article,.clip-prepare-ready article:nth-child(even){border-top:1px solid var(--hair);border-left:0}.clip-prepare-ready article:first-child{border-top:0}}

.clip-delivery-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 9px var(--font-mono); font-style: normal; letter-spacing: .04em; white-space: nowrap; }
.clip-delivery-badge.local { color: var(--t-low); border: 1px solid var(--hair); background: oklch(1 0 0 / .03); }
.clip-delivery-badge.provider { color: var(--accent-bright); border: 1px solid color-mix(in oklch, var(--accent) 36%, transparent); background: var(--accent-soft); }
.clip-delivery-badge.posted { color: var(--green); border: 1px solid color-mix(in oklch, var(--green) 34%, transparent); background: var(--green-soft); }
.clip-delivery-badge.terminal { color: var(--t-low); border: 1px solid var(--hair-2); background: transparent; }

.clip-ai-plan-toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--t-low); font-size: 11px; cursor: pointer; }
.clip-ai-cadence-card { display: grid; gap: 6px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid color-mix(in oklch, var(--accent) 24%, var(--hair)); border-radius: var(--radius-xs); background: var(--accent-soft); }
.clip-ai-cadence-card > div span { display: block; color: var(--accent-bright); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.clip-ai-cadence-card > div strong { color: var(--t-hi); font-size: 12px; font-weight: 500; line-height: 1.45; }
.clip-ai-cadence-card > em { color: var(--t-dim); font-size: 10px; font-style: normal; }
.clip-ai-cadence-card details summary { color: var(--t-low); font-size: 10px; cursor: pointer; }
.clip-ai-cadence-card details p { margin-top: 6px; color: var(--t-mid); font-size: 11px; line-height: 1.5; }

.clip-calendar-post { cursor: pointer; position: relative; }
.clip-calendar-post:hover { border-color: rgba(var(--accent-rgb),.4); }
.clip-month-conflict { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; color: var(--bg-0); background: var(--amber); font: 700 10px var(--font-mono); }

.clip-schedule-month-shell { display: grid; gap: 9px; }
.clip-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.clip-month-dow { padding: 2px 4px; color: rgba(255,255,255,.35); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.clip-month-day { display: grid; position: relative; gap: 4px; align-content: start; min-height: 112px; padding: 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(255,255,255,.012); text-align: left; cursor: pointer; }
.clip-month-day strong { color: rgba(255,255,255,.72); font: 12px var(--font-serif); }
.clip-month-day em { position: absolute; top: 5px; right: 7px; color: var(--accent-bright); font: 9px var(--font-mono); font-style: normal; }
.clip-month-day.outside { opacity: .32; }
.clip-month-day.today { border-color: rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.07); }
.clip-month-day.selected { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.3); }
.clip-month-day.has-availability { background-image: linear-gradient(135deg, transparent 0 72%, rgba(142,232,195,.035) 72% 100%); border-bottom-style: dashed; }
.clip-month-availability { margin-top: auto; color: rgba(142,232,195,.42); font: 7px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.clip-month-day .clip-month-conflict { position: absolute; right: 6px; bottom: 6px; }
.clip-month-campaign-bands { display: grid; gap: 2px; }
.clip-month-campaign-bands i { overflow: hidden; padding: 2px 5px; border-left: 2px solid var(--accent); border-radius: 2px; background: rgba(var(--accent-rgb),.1); color: rgba(var(--accent-rgb),.76); font: 6px var(--font-mono); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.clip-month-post-chips { display: grid; gap: 2px; }
.clip-month-post-chips > i { --calendar-platform: var(--accent-rgb); display: flex; gap: 4px; align-items: center; overflow: hidden; min-height: 18px; padding: 2px 5px; border-radius: 5px; background: rgba(var(--calendar-platform),.1); color: rgba(var(--calendar-platform),.9); font: 7px var(--font-mono); font-style: normal; }
.clip-month-post-chips > i svg { width: 9px; height: 9px; flex: 0 0 auto; }
.clip-month-post-chips > i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-month-post-chips > b { color: rgba(255,255,255,.38); font: 7px var(--font-mono); }
.clip-month-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.clip-month-dots i { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 12px; border-radius: 4px; font: 700 7px var(--font-mono); font-style: normal; }
.clip-month-dots i.instagram { color: rgb(var(--platform-instagram)); background: rgba(var(--platform-instagram),.2); }
.clip-month-dots i.facebook { color: rgb(var(--platform-facebook)); background: rgba(var(--platform-facebook),.22); }
.clip-month-dots i.tiktok { color: rgb(var(--platform-tiktok)); background: rgba(var(--platform-tiktok),.2); }
.clip-month-dots i.youtube { color: rgb(var(--platform-youtube)); background: rgba(var(--platform-youtube),.22); }
.clip-month-day-detail { display: grid; gap: 6px; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.015); }
.clip-month-post { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 3px 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.clip-month-post:hover { border-color: rgba(var(--accent-rgb),.4); }
.clip-month-post time { color: var(--accent-bright); font: 10px var(--font-mono); }
.clip-month-post strong { overflow: hidden; color: rgba(255,255,255,.8); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.clip-month-post span { grid-column: 2; color: rgba(255,255,255,.42); font-size: 9px; }
.clip-month-post em { grid-column: 3; grid-row: 1 / 3; }
.clip-calendar-workspace { gap: 18px; }
.clip-calendar-mode-head > div:last-child { display: flex; gap: 12px; align-items: center; }
.clip-calendar-mode-head p { margin: 4px 0 0; color: rgba(255,255,255,.4); font-size: 11px; }
.clip-last-synced { color: rgba(255,255,255,.32); font: 7px var(--font-mono); text-align: right; text-transform: uppercase; }
.clip-last-synced strong { color: rgba(255,255,255,.65); font-size: 8px; }
.clip-calendar-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.014); overflow: hidden; }
.clip-calendar-kpis article { display: grid; gap: 3px; padding: 13px 15px; border-right: 1px solid rgba(255,255,255,.055); }
.clip-calendar-kpis article:last-child { border-right: 0; }
.clip-calendar-kpis span { color: rgba(255,255,255,.34); font: 7px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.clip-calendar-kpis strong { color: rgba(255,255,255,.84); font: 22px var(--font-serif); }
.clip-calendar-kpis article.attention { background: rgba(207,113,87,.055); }
.clip-calendar-kpis article.attention strong { color: var(--danger); }
.clip-calendar-controlbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.clip-calendar-controlbar .clip-schedule-filters { flex: 1; margin: 0; }
.clip-provider-last-check { display: block; margin-top: 6px; color: var(--t-low); font: 7px var(--font-mono); }
.clip-calendar-agenda { display: grid; gap: 14px; }
.clip-calendar-agenda > section { overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.012); }
.clip-calendar-agenda > section > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
.clip-calendar-agenda > section > header span { color: var(--accent-bright); font: 7px var(--font-mono); text-transform: uppercase; }
.clip-calendar-agenda > section > header strong { color: rgba(255,255,255,.78); font-size: 12px; }
.clip-calendar-agenda > section > header em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: rgba(255,255,255,.35); font: 8px var(--font-mono); font-style: normal; }
.clip-agenda-row { --calendar-platform: var(--accent-rgb); display: grid; grid-template-columns: 76px 24px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 13px; border: 0; border-bottom: 1px solid rgba(255,255,255,.045); border-left: 3px solid rgba(var(--calendar-platform),.55); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.clip-agenda-row:last-child { border-bottom: 0; }
.clip-agenda-row:hover { background: rgba(var(--calendar-platform),.045); }
.clip-agenda-row time { color: rgba(var(--calendar-platform),.86); font: 9px var(--font-mono); }
.clip-agenda-row > div { display: grid; gap: 2px; }
.clip-agenda-row > div strong { color: rgba(255,255,255,.82); font-size: 11px; }
.clip-agenda-row > div span { color: rgba(255,255,255,.4); font-size: 9px; text-transform: capitalize; }
.clip-delivery-badge.waiting { color: var(--amber); border: 1px solid color-mix(in oklch, var(--amber) 30%, transparent); background: var(--amber-soft); }
.clip-delivery-badge.queued { color: var(--t-mid); border: 1px solid var(--hair); background: oklch(1 0 0 / .03); }
.clip-delivery-badge.attention { color: var(--danger); border: 1px solid color-mix(in oklch, var(--danger) 32%, transparent); background: var(--danger-soft); }

.clip-post-thumbnail { display: inline-flex; width: 42px; height: 42px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.035); }
.clip-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.clip-post-thumbnail i { color: rgba(255,255,255,.46); font: 700 9px var(--font-mono); font-style: normal; }
.clip-post-editor { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 10px; background: rgba(var(--accent-rgb),.05); }
.clip-post-editor-head { display: flex; gap: 10px; align-items: center; }
.clip-post-editor-head > div { flex: 1; min-width: 0; }
.clip-post-editor-head strong { display: block; overflow: hidden; color: rgba(255,255,255,.85); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.clip-post-editor-head span { color: rgba(255,255,255,.45); font-size: 10px; }
.clip-post-editor-copy p { color: rgba(255,255,255,.6); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.clip-post-editor-copy em { display: block; margin-top: 4px; color: rgba(255,255,255,.4); font-size: 10px; font-style: normal; }
.clip-post-copy-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.clip-post-copy-fields .clip-field:nth-child(2) { grid-column: 1 / -1; }
.clip-post-editor-actions label small { max-width: 310px; color: rgba(var(--accent-rgb),.65); font: 9px var(--font-mono); }
.clip-post-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; }
.clip-post-editor-actions label { display: grid; gap: 3px; color: rgba(255,255,255,.4); font-size: 9px; }
.clip-conflict-note { color: var(--amber); font-size: 10px; }
.clip-post-editor-actions .btn.on { border-color: rgba(232,207,142,.28); color: var(--amber); background: rgba(232,207,142,.07); }
.clip-list-availability { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; padding: 9px 10px; border: 1px dashed rgba(142,232,195,.18); border-radius: 9px; background: rgba(50,190,140,.02); }
.clip-list-availability > span { flex-basis: 100%; color: rgba(142,232,195,.55); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.clip-list-availability > div { display: flex; gap: 5px; align-items: baseline; padding-right: 9px; border-right: 1px solid rgba(255,255,255,.06); }
.clip-list-availability strong { color: rgba(255,255,255,.58); font-size: 9px; }
.clip-list-availability em { color: rgba(255,255,255,.32); font-size: 8px; font-style: normal; }

@media (max-width: 880px) {
  .clip-publishing-target-picker { grid-template-columns: 1fr; }
  .clip-availability-days { grid-template-columns: repeat(7, minmax(135px, 1fr)); }}
@media (max-width: 620px) {
  .clip-schedule-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .clip-schedule-filters label:last-child { grid-column: 1 / -1; }
  .clip-schedule-filters .cs-select { width: 100%; min-width: 0; }
  .clip-month-grid { min-width: 0; gap: 2px; }
  .clip-month-dow { overflow: hidden; padding-inline: 2px; font-size: 7px; text-overflow: clip; }
  .clip-month-day { min-height: 82px; padding: 4px; border-radius: 6px; }
  .clip-month-day strong { font-size: 10px; }
  .clip-month-day em { top: 4px; right: 4px; }
  .clip-month-dots i:nth-child(n+4) { display: none; }
  .clip-month-post-chips > i:nth-child(n+3) { display: none; }
  .clip-month-campaign-bands i { font-size: 0; min-height: 3px; padding: 0; }
  .clip-month-availability { overflow: hidden; max-width: 100%; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .clip-month-day-detail { position: sticky; z-index: 7; bottom: 8px; max-height: 44vh; overflow-y: auto; background: rgba(24,25,35,.97); box-shadow: 0 -16px 36px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
  .clip-month-post { grid-template-columns: 58px minmax(0,1fr); }
  .clip-month-post em { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .clip-schedule-summary > div { flex: 1 1 45%; border-bottom: 1px solid rgba(255,255,255,.045); }
  .clip-calendar-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .clip-calendar-kpis article { border-bottom: 1px solid rgba(255,255,255,.045); }
  .clip-calendar-kpis article:last-child { grid-column: 1 / -1; }
  .clip-calendar-controlbar { display: grid; }
  .clip-calendar-controlbar .clip-schedule-view-switch { justify-self: stretch; }
  .clip-calendar-controlbar .clip-schedule-view-switch button { flex: 1; }
  .clip-agenda-row { grid-template-columns: 55px 20px minmax(0,1fr); gap: 7px; padding: 9px 8px; }
  .clip-agenda-row > .clip-delivery-badge { grid-column: 3; justify-self: start; }}
@keyframes cs-pulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes cs-refine-in{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* Modal shell (used by the Refine dialog; portalled to body) */
.modal-backdrop{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:oklch(0 0 0/.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal{background:oklch(0.175 0.012 264 / 0.98);border:1px solid var(--hair-bright);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:20px;width:min(560px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow-y:auto;display:grid;gap:14px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-head h3{margin:6px 0 0;font-size:20px;font-weight:700}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:600px){
  .modal-backdrop{place-items:end center;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));}
  .modal{width:100%;max-height:calc(100dvh - 20px);padding:16px;border-radius:16px 16px 12px 12px;gap:12px;}
  .modal-head h3,.cs-refine-dialog h3{font-size:18px;}
  .modal-actions{position:sticky;bottom:-16px;margin:0 -16px -16px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,oklch(.175 .012 264/.9),oklch(.175 .012 264));border-top:1px solid var(--hair);}
  .modal-actions .btn{min-height:42px;flex:1;justify-content:center;}}

/* Clip Engine smart campaign-rule intake */
.clip-rules-input{min-height:190px;line-height:1.55;resize:vertical}.clip-rule-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.clip-rule-actions small{color:var(--t-low);font-size:10.5px;line-height:1.45}.clip-rule-summary{display:grid;gap:14px;margin-top:4px;padding:14px;border:1px solid var(--hair-2);border-radius:12px;background:oklch(1 0 0/.018)}.clip-rule-summary-head{display:flex;align-items:start;justify-content:space-between;gap:14px;padding-bottom:11px;border-bottom:1px solid var(--hair)}.clip-rule-summary-head>div{display:grid;gap:3px}.clip-rule-summary-head span{color:var(--t-low);font:700 8.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.clip-rule-summary-head strong{color:var(--t-hi);font-size:12px}.clip-rule-summary-head em{padding:5px 8px;border:1px solid var(--hair);border-radius:999px;color:var(--t-low);font:normal 700 8px var(--font-mono);text-transform:uppercase}.clip-rule-summary-head em.ready{border-color:oklch(.72 .13 155/.35);color:var(--green)}.clip-rule-summary-head em.needs-review{border-color:oklch(.78 .13 80/.35);color:var(--amber)}.clip-rule-group{display:grid;gap:7px}.clip-rule-group h4,.clip-rule-clarifications h4{margin:0;color:var(--t-low);font:750 9px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}.clip-rule-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:9px 10px;border:1px solid var(--hair);border-radius:9px;background:oklch(1 0 0/.015)}.clip-rule-item>div{display:grid;gap:3px}.clip-rule-item>div strong{color:var(--t-hi);font-size:11px;line-height:1.4}.clip-rule-item>div span{color:var(--t-low);font:600 8px var(--font-mono);text-transform:capitalize}.clip-rule-item>button{align-self:start;border:0;background:transparent;color:var(--t-low);cursor:pointer;font-size:17px;line-height:1}.clip-rule-item details{grid-column:1/-1}.clip-rule-item summary{color:var(--accent-bright);cursor:pointer;font-size:9px}.clip-rule-item details textarea{margin-top:7px}.clip-rule-item details p{margin:7px 0 0;color:var(--t-low);font-size:9.5px;line-height:1.45}.clip-rule-clarifications{display:grid;gap:9px;padding:11px;border:1px solid oklch(.78 .13 80/.25);border-radius:10px;background:oklch(.72 .11 80/.045)}.clip-rule-clarifications label{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);align-items:center;gap:7px 10px}.clip-rule-clarifications label>span{color:var(--t-hi);font-size:10.5px;line-height:1.4}.clip-rule-clarifications label>small{grid-column:2;color:var(--amber);font:600 8px var(--font-mono);text-transform:capitalize}@media(max-width:700px){.clip-rule-actions,.clip-rule-summary-head{align-items:stretch;flex-direction:column}.clip-rule-clarifications label{grid-template-columns:1fr}.clip-rule-clarifications label>small{grid-column:1}}
.clip-copy-rules{padding:9px 10px;border:1px solid var(--hair);border-radius:9px}.clip-copy-rules summary{color:var(--accent-bright);cursor:pointer;font-size:10px}.clip-copy-rules p{display:grid;gap:2px;margin:8px 0 0}.clip-copy-rules p strong{color:var(--t-hi);font-size:10px}.clip-copy-rules p span,.clip-copy-rules p em{color:var(--t-low);font:normal 8.5px var(--font-mono)}

/* Publishing V2 — component-scoped extensions of the existing Clip Engine grammar. */
.clip-approved-library-v2{padding-bottom:88px}.clip-approved-search{display:flex;align-items:center;gap:7px;min-width:220px;padding:7px 10px;border:1px solid var(--hair-2);border-radius:9px;background:var(--glass);color:var(--t-low)}.clip-approved-search input{width:100%;border:0;outline:0;background:transparent;color:var(--t-hi);font:600 11px var(--font-ui)}.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.clip-approved-library-v2 .clip-approved-card{position:relative;display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;padding:0;border-color:var(--hair-2);border-radius:13px;background:var(--glass);cursor:pointer;outline:none;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.clip-approved-library-v2 .clip-approved-card:hover{transform:translateY(-2px);border-color:color-mix(in oklch,var(--accent) 32%,var(--hair-2));box-shadow:0 16px 34px oklch(0 0 0/.2)}.clip-approved-library-v2 .clip-approved-card.is-selected{border-color:color-mix(in oklch,var(--accent) 62%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 26%,transparent),0 16px 36px oklch(0 0 0/.2)}.clip-approved-poster{position:relative;aspect-ratio:9/16;overflow:hidden;background:radial-gradient(circle at 50% 28%,color-mix(in oklch,var(--accent) 12%,transparent),transparent 50%),var(--bg-2)}.clip-approved-poster>img{width:100%;height:100%;object-fit:cover}.clip-approved-poster .clip-video-empty{display:grid;width:100%;height:100%;place-content:center;gap:8px;border:0;border-radius:0;color:var(--t-dim);text-align:center}.clip-approved-poster .clip-video-empty span{font:650 9px var(--font-mono);letter-spacing:.05em;text-transform:uppercase}.clip-approved-check{position:absolute;top:10px;left:10px;display:grid;width:24px;height:24px;place-items:center;border:1px solid var(--hair-bright);border-radius:50%;background:oklch(.14 .01 264/.75);color:transparent;font:800 11px var(--font-ui);font-style:normal;backdrop-filter:blur(8px)}.is-selected .clip-approved-check{border-color:var(--accent);background:var(--accent);color:var(--bg-0)}.clip-approved-poster>em{position:absolute;left:10px;bottom:10px;padding:4px 7px;border:1px solid color-mix(in oklch,var(--accent) 30%,transparent);border-radius:999px;background:oklch(.14 .01 264/.76);color:var(--accent-bright);font:normal 700 8px var(--font-mono);backdrop-filter:blur(8px)}.clip-approved-overflow{position:absolute;top:8px;right:8px}.clip-approved-overflow summary{display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--hair-bright);border-radius:50%;background:oklch(.14 .01 264/.78);color:var(--t-mid);cursor:pointer;list-style:none}.clip-approved-overflow summary::-webkit-details-marker{display:none}.clip-approved-overflow>div{position:absolute;z-index:20;top:34px;right:0;display:grid;width:150px;padding:5px;border:1px solid var(--hair-bright);border-radius:10px;background:var(--bg-1);box-shadow:var(--shadow-pop)}.clip-approved-overflow a,.clip-approved-overflow button{padding:8px;border:0;border-radius:7px;background:transparent;color:var(--t-mid);font:650 10px var(--font-ui);text-align:left;text-decoration:none;cursor:pointer}.clip-approved-overflow a:hover,.clip-approved-overflow button:hover{background:oklch(1 0 0/.045);color:var(--t-hi)}.clip-approved-overflow .danger{color:var(--danger)}.clip-approved-meta{display:grid!important;gap:6px!important;padding:11px 12px 12px!important}.clip-approved-meta>strong{overflow:hidden;min-height:34px;color:var(--t-hi)!important;font-size:12px!important;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.clip-approved-meta>span{overflow:hidden;color:var(--t-low)!important;font-size:9px!important;text-overflow:ellipsis;white-space:nowrap}.clip-approved-meta>div{display:flex!important;justify-content:space-between;gap:7px!important}.clip-approved-meta em,.clip-approved-meta small{color:var(--t-dim)!important;font:normal 8px var(--font-mono)!important}.clip-approved-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px}.clip-approved-pagination span{color:var(--t-low);font:600 9px var(--font-mono)}.clip-approved-selection-band{position:sticky;z-index:40;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px;padding:12px 14px;border:1px solid color-mix(in oklch,var(--accent) 24%,var(--hair));border-radius:13px;background:color-mix(in oklch,var(--bg-1) 90%,transparent);box-shadow:0 18px 48px oklch(0 0 0/.38);backdrop-filter:blur(18px)}.clip-approved-selection-band>div:first-child{display:grid;gap:2px}.clip-approved-selection-band strong{color:var(--t-hi);font-size:12px}.clip-approved-selection-band span{color:var(--t-low);font-size:9px}.clip-approved-selection-band>div:last-child{display:flex;gap:7px;align-items:center}

.clip-proposal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.clip-proposal-toolbar>span{color:var(--t-low);font-size:9px}.clip-proposal-workspace{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:13px;align-items:start}.clip-proposal-inspector{position:sticky;top:12px;display:grid;gap:9px;padding:13px;border:1px solid var(--hair-2);border-radius:12px;background:var(--glass)}.clip-proposal-inspector>span,.clip-proposal-copy-review>header span,.clip-shared-copy-editor label>span,.clip-required-content>span,.clip-exact-preview>span{color:var(--t-low);font:750 8px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}.clip-proposal-poster{display:grid;aspect-ratio:16/8;place-items:center;overflow:hidden;border:1px solid var(--hair);border-radius:9px;background:var(--bg-2);color:var(--accent-bright)}.clip-proposal-poster img{width:100%;height:100%;object-fit:cover}.clip-proposal-poster svg{width:28px;height:28px}.clip-proposal-inspector>strong{color:var(--t-hi);font:600 15px var(--font-serif);line-height:1.35}.clip-proposal-inspector>em,.clip-proposal-inspector>time{color:var(--t-low);font:normal 9px var(--font-mono)}.clip-proposal-inspector>p{margin:0;color:var(--t-mid);font-size:10px;line-height:1.5}.clip-exact-preview{display:grid;gap:6px;padding:10px;border:1px solid var(--hair);border-radius:9px;background:oklch(0 0 0/.1)}.clip-exact-preview p{max-height:180px;overflow:auto;margin:0;color:var(--t-mid);font-size:10px;line-height:1.55;white-space:pre-wrap}.clip-proposal-copy-review{display:grid;gap:13px;margin-top:5px;padding-top:15px;border-top:1px solid var(--hair-2)}.clip-proposal-copy-review>header{display:flex;align-items:end;justify-content:space-between;gap:14px}.clip-proposal-copy-review>header>div{display:grid;gap:4px}.clip-proposal-copy-review>header strong{color:var(--t-hi);font-size:13px}.clip-shared-copy-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.36fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--hair-2);border-radius:11px;background:var(--glass)}.clip-shared-copy-editor label{display:grid;gap:6px}.clip-shared-copy-editor textarea{resize:vertical}.clip-required-content{display:grid;gap:7px;padding:11px;border:1px solid color-mix(in oklch,var(--accent) 18%,var(--hair));border-radius:10px;background:color-mix(in oklch,var(--accent) 4%,transparent)}.clip-required-content article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:7px 0;border-bottom:1px solid var(--hair)}.clip-required-content article:last-child{border-bottom:0}.clip-required-content strong{color:var(--t-hi);font-size:10px}.clip-required-content em{color:var(--accent-bright);font:normal 8px var(--font-mono)}.clip-required-content p,.clip-required-content.empty p{grid-column:1/-1;margin:0;color:var(--t-low);font-size:9px;line-height:1.45}.clip-platform-copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.clip-platform-copy-card{display:grid;gap:9px;padding:11px;border:1px solid var(--hair-2);border-radius:11px;background:var(--glass)}.clip-platform-copy-card.blocked{border-color:color-mix(in oklch,var(--danger) 35%,var(--hair))}.clip-platform-copy-card>header{display:flex;align-items:center;gap:7px}.clip-platform-copy-card>header strong{margin-right:auto;color:var(--t-hi);font-size:11px;text-transform:capitalize}.clip-platform-copy-card>header em{padding:3px 6px;border:1px solid var(--hair);border-radius:999px;color:var(--t-low);font:normal 700 7px var(--font-mono);text-transform:uppercase}.clip-platform-copy-card>header em.shared{color:var(--accent-bright)}.clip-platform-copy-card>header em.warning{color:var(--amber)}.clip-platform-copy-card>p{max-height:160px;overflow:auto;margin:0;color:var(--t-mid);font-size:10px;line-height:1.5;white-space:pre-wrap}.clip-platform-copy-card>label{display:grid;gap:5px;color:var(--t-low);font-size:9px}.clip-platform-copy-card>label small{color:var(--t-dim);font:8px var(--font-mono)}.clip-platform-copy-actions{display:flex;justify-content:flex-end}.clip-copy-issues{display:grid;gap:4px;color:var(--amber);font-size:8px}.clip-copy-issues.blocked{color:var(--danger)}.clip-rule-evidence-list{display:grid;gap:7px;padding:11px}.clip-rule-evidence-list article{display:grid;gap:3px;padding:8px;border:1px solid var(--hair);border-radius:8px}.clip-rule-evidence-list strong{color:var(--t-hi);font-size:10px}.clip-rule-evidence-list span{color:var(--accent-bright);font:8px var(--font-mono);text-transform:capitalize}.clip-rule-evidence-list p{margin:0;color:var(--t-low);font-size:9px}.clip-approval-snapshot{max-height:360px;overflow:auto;margin:0;padding:12px;color:var(--t-mid);font:9px/1.55 var(--font-mono);white-space:pre-wrap}.clip-delivery-mini-flow{grid-template-columns:repeat(5,auto)!important}

.clip-platform-copy-card>header em.fallback{color:var(--amber)}
@media(max-width:1100px){.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clip-proposal-workspace{grid-template-columns:1fr}.clip-proposal-inspector{position:static;grid-template-columns:120px minmax(0,1fr);align-items:start}.clip-proposal-poster{grid-row:1/7;aspect-ratio:9/12}.clip-shared-copy-editor{grid-template-columns:1fr 1fr}.clip-shared-copy-editor>.btn{grid-column:1/-1;justify-self:end}}
@media(max-width:720px){.clip-approved-library-v2 .clip-mode-head{align-items:stretch;flex-direction:column}.clip-approved-search{width:100%;min-width:0}.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.clip-approved-selection-band{align-items:stretch;flex-direction:column;bottom:6px}.clip-approved-selection-band>div:last-child{display:grid;grid-template-columns:1fr 1fr}.clip-proposal-toolbar,.clip-proposal-copy-review>header{align-items:stretch;flex-direction:column}.clip-platform-copy-grid,.clip-shared-copy-editor{grid-template-columns:1fr}.clip-proposal-inspector{display:grid;grid-template-columns:90px 1fr}.clip-delivery-mini-flow{display:none!important}}

/* Approved library: compact live cards instead of poster-only placeholders. */
.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(auto-fill,minmax(180px,220px));align-items:start;justify-content:start}
.clip-approved-library-v2 .clip-approved-card{align-self:start}
.clip-approved-library-v2 .clip-approved-poster{position:relative;display:block!important}
.clip-approved-library-v2 .clip-approved-poster::after{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,oklch(0 0 0/.18),transparent 18%,transparent 78%,oklch(0 0 0/.28));content:"";pointer-events:none}
.clip-approved-library-v2 .clip-approved-poster>img,
.clip-approved-library-v2 .clip-approved-poster>video{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;object-fit:cover;background:var(--bg-2)}
.clip-approved-library-v2 .clip-approved-poster .clip-video-empty{width:100%;height:100%;max-height:none}
.clip-approved-preview-state{position:absolute;z-index:2;top:12px;left:44px;display:inline-flex!important;align-items:center;gap:5px;min-height:22px!important;padding:3px 7px!important;border:1px solid oklch(1 0 0/.18)!important;border-radius:999px!important;background:oklch(.14 .01 264/.62)!important;color:oklch(.94 .02 150)!important;font:700 7px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(8px)}
.clip-approved-preview-state i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.clip-approved-library-v2 .clip-approved-check{z-index:2;pointer-events:none}
.clip-approved-library-v2 .clip-approved-overflow{z-index:3}
.clip-approved-library-v2 .clip-approved-selection-band{position:relative;bottom:auto}

@media(max-width:1100px){.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(auto-fill,minmax(170px,210px))}}
@media(max-width:720px){.clip-approved-library-v2 .clip-approved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clip-provider-metadata,.clip-metadata-defaults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.clip-provider-metadata label,.clip-metadata-defaults label{display:grid;gap:4px;color:var(--t-low);font-size:8px}.clip-provider-metadata .cs-select,.clip-metadata-defaults .cs-select{min-width:0;width:100%}.clip-metadata-defaults{padding:11px}.clip-metadata-defaults section{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:end;padding:10px;border:1px solid var(--hair);border-radius:9px}.clip-metadata-defaults section>strong{grid-column:1/-1;color:var(--t-hi);font-size:10px;text-transform:capitalize}@media(max-width:720px){.clip-provider-metadata,.clip-metadata-defaults{grid-template-columns:1fr}.clip-metadata-defaults section{grid-template-columns:1fr}}

/* ============================================================
   Keyboard focus
   ============================================================
   Several base rules strip the focus outline without substituting anything
   (styles.css:195, :648, :869, :2201, :2869, :3011, :5343), which left keyboard
   focus invisible on 36 of 40 sampled controls on the dashboard.

   Appended at the end of the file, and using :is() so the selector carries
   specificity 0,2,0, so it wins against those bare `outline: none` declarations
   regardless of source order.

   Outline rather than box-shadow: it follows border-radius, it costs no layout,
   and it does not clobber the box-shadows several of these elements already have.

   Deliberately app-wide rather than dashboard-scoped. A :focus-visible rule has
   no effect until a keyboard user focuses the element, so it cannot shift the
   resting appearance of any module. */
:is(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [role="switch"],
  [role="menuitem"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Inputs sit flush inside padded containers where a 2px offset would collide with
   the container edge, so they take the ring inside their own box instead. */
:is(input, select, textarea):focus-visible {
  outline-offset: 0;
}

/* Slim scrollbar inside a manually resized card, so the scroller reads as part of
   the card rather than as a browser artefact. */
.card-resize-scroller::-webkit-scrollbar { width: 6px; }
.card-resize-scroller::-webkit-scrollbar-track { background: transparent; }
.card-resize-scroller::-webkit-scrollbar-thumb {
  background: var(--hair-bright);
  border-radius: 999px;
}
.card-resize-scroller { scrollbar-width: thin; scrollbar-color: var(--hair-bright) transparent; }

/* Opt-in list scrolling. Preview remains the default; this surface only exists when
   the user explicitly selects Scroll while editing the dashboard layout. */
.dashboard-list-frame {
  position: relative;
  min-width: 0;
  max-height: var(--list-viewport-height, 284px);
}

/* Personal and Business use one skeleton. Their row content may wrap differently,
   but the list action and composer occupy the same tracks and stay aligned. */
.dashboard-task-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* The card behind the bar dims while its widget is being dragged, and the whole grid
   gets a faint guide so the row structure is legible while rearranging. */
.dash-grid.is-editing .dash-grid-item > .card {
  outline: 1px dashed var(--hair-bright);
  outline-offset: 3px;
}
/* Editing is a pointer-driven mode; suppress text selection while dragging. */
.dash-grid.is-editing { user-select: none; }

/* Visually hidden but announced. Used for layout-edit feedback, which has no visual
   equivalent a screen reader could otherwise pick up. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Edit-mode banner. Editing is a mode, so it needs a persistent statement that you
   are in it and a visible way out. It sits above the grid rather than in the header,
   which has no room to spare below 1420px. */
.dash-edit-banner {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 var(--dash-page-pad-x) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-1));
  backdrop-filter: blur(14px);
}

/* ---- Distribution coverage (Content Studio) ----
   Per the One Voice Rule, state is the only justification for color
   here. A platform that simply has not been scheduled is neutral: amber
   is reserved for something waiting on Michael right now, and turning
   every unscheduled platform amber would rebuild the badge-count
   anti-reference one row at a time. */
.cs-coverage-inbox,
.cs-distribution {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
/* Responsive decisions read this element's own width, never the
   window's: the chat pane narrows the content area without narrowing
   the viewport. Safe here because the query styles descendants of the
   card rather than the card itself. */
.cs-distribution { container-type: inline-size; }
/* The chat pane takes 460px without the window changing size, so this
   collapse is driven by the container, not the viewport. */
@container (max-width: 520px) {
  .cs-destination-main { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-destination-when { grid-column: 1; }
  .cs-destination-action { grid-column: 1 / -1; justify-self: start; }
}

/* Handoff panel. Shown only on the fallback route, where a destination
   uploads rather than publishes. Amber because this is genuinely waiting
   on Michael right now, which is the one thing amber is reserved for. */
.cs-handoff {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--amber-soft);
}

/* ============================================================
   Content Studio: Publish tab — destinations, timing, disclosures,
   and the one-screen schedule review. Platform names stay plain text
   throughout per the One Voice Rule; only status colour (green/amber/
   red) carries meaning here, never a brand colour.
   ============================================================ */
.cs-publish-note {
  font: 500 13px/1.5 var(--font-body);
  color: var(--t-dim);
  margin: 0;
}

/* Destination picker. Container query, not a viewport query — the chat
   pane narrows the content area without narrowing the window. */
.cs-destination-picker { container-type: inline-size; display: grid; gap: var(--space-3); }

/* Disclosures. Three states rendered as two explicit buttons rather than
   a checkbox, so "neither pressed" reads as unanswered instead of off. */
.cs-disclosures { display: grid; gap: var(--space-4); }

/* ============================================================
   Content Studio: the Edit workspace
   ------------------------------------------------------------
   A workspace, not a card. The No Nested Scroll Rule constrains
   dashboard cards, which must show what their height class
   affords; the transcript and timeline here scroll by design.

   Panel proportions are container-relative, and the stacked
   breakpoint is driven by the workspace element's own measured
   width in content-edit.jsx, never by a media query on the
   viewport. The chat pane narrows this area without narrowing
   the window (The Container Rule).

   Colour follows The One Voice Rule: blue means product, state,
   or AI. Cut and beat markers are neutral; only QA severity uses
   green/amber/red, and only as state.
   ============================================================ */

.ce-root { display: flex; flex-direction: column; gap: 12px; }
/* Selection is state, so it is the one thing here allowed to be blue. */
.ce-cut.on, .ce-beat.on, .ce-audio.on { background: var(--accent); border-color: var(--accent-bright); }
/* The diagnosis line. Dimmer than the state it qualifies, because it is the
   explanation, not the headline. */
.ce-job-warning { font: 500 11px/1.45 var(--font-ui); color: var(--amber); }

/* --- the activity log --------------------------------------------------
   A card in the sequence with a DECLARED height: twelve rows plus the header,
   the same footprint whether one event has landed or four hundred have. It
   does not scroll -- the drawer is where the full history lives -- so it can
   never become a scroll area nested inside the page's own. */
.ce-log {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--hair);
  border-radius: var(--radius-xs); background: var(--glass);
}
/* Only the drawer wraps and scrolls, because only the drawer is the place you
   go to read the whole thing. */
.ce-log-list-full { overflow-y: auto; }

/* ---- actions ----
   The empty state still uses this row for its single "Analyze footage"
   button. The main workspace does not: five peer buttons made the sequence
   unguessable, so it now leads with one named next step. */
.ce-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* A step that failed is a plain failure to report, not something waiting on
   Michael, so it stays red rather than amber (DESIGN.md One Voice Rule). */
.ce-next-error { font: 500 13px/1.5 var(--font-ui); color: var(--danger); margin: 6px 0 0; max-width: 68ch; }
/* A stopped run is a failure to report, so it carries danger rather than the
   amber reserved for "waiting on Michael" (DESIGN.md One Voice Rule). */
.ce-next-failed { border-color: color-mix(in oklch, var(--danger) 40%, var(--hair)); background: var(--danger-soft); }
/* Operator detail is available, never shouted. Collapsed by default. */
.ce-next-detail { margin: 8px 0 0; font: 500 12px/1.5 var(--font-ui); color: var(--t-low); }

/* ---- the render ladder ----
   Cheapest first. A shortcut row for when he already knows what he wants, so
   it is deliberately quieter than the step above it: no fills, no borders
   until hover. */
.ce-ladder { display: flex; align-items: center; gap: 6px; padding: 0 4px; flex-wrap: wrap; }

/* ---- Edit workspace: primary and disabled button states ----
   `.btn.primary` was never defined in this stylesheet, so a primary action
   rendered identically to a secondary one and carried no visual weight.
   Blue is correct here under The One Voice Rule: this is THE primary action.

   Disabled needs its own treatment for the same reason the approval gate
   exists at all. "Approve master" was functionally disabled while looking
   perfectly clickable, which tells Michael nothing about why he cannot
   approve yet. */
.ce-root .btn.primary, .ce-strip .btn.primary {
  background: var(--accent); border-color: var(--accent-bright); color: oklch(0.99 0 0);
}

/* Calendar coverage rail. One element, three segment kinds, sized to the
   number of destinations. Per the One Voice Rule a missing platform is
   deliberately colorless: amber means something is waiting on Michael
   right now, and painting every unscheduled platform amber would rebuild
   the badge-count anti-reference one segment at a time. */
.cs-coverage-rail {
  display: flex;
  gap: 2px;
  margin-top: var(--space-1);
  width: 100%;
}

/* Distribution lens: one row per destination, denser than the Studio
   lens on purpose, since this is the operational surface. */
.cs-calendar-event-dist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--space-2);
}

/* ---- Edit workspace: media library ----
   The trust boundary made visible. A blocked asset is shown WITH its reason
   rather than hidden, because "why didn't it use my screen recording" is the
   question this panel exists to answer. */
.ce-media {
  background: var(--glass); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
/* Amber, not red: a blocked asset is a state to resolve, not a failure. */
.ce-media-card.blocked { border-color: color-mix(in oklch, var(--amber) 40%, var(--hair)); }

/* An empty Edit tab that is empty BECAUSE the run died reads as a failure,
   not as a fresh start. */
.ce-empty-failed .ce-empty-title { color: var(--danger); }

/* Pipeline activity: a bar pinned to the bottom of the Edit tab.

   It used to be portalled into the right rail, where the rail rules hid the
   stage column and put a scroll area inside a card. A pinned bar is not a
   card, so capping its height and scrolling inside it is the right shape here
   rather than a breach of the No Nested Scroll Rule: this is the tab's one
   deliberate scroll region, and the thing it holds genuinely has no bound. */
.ce-activity {
  position: sticky; bottom: 0; z-index: 4;
  margin: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
  padding: 8px var(--space-3);
  /* Opaque, not translucent. It floats over the transcript when the tab is
     scrolled up, and at 92% the words underneath showed through the rows and
     made both unreadable. A bar that overlaps content has to be a surface. */
  background: var(--bg-1);
  border-top: 1px solid var(--hair-2);
  box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.6);
}
/* The collapsed bar carries the worst level in the recent tail, so a failure
   is visible without opening it. */
.ce-activity-warn { border-top-color: color-mix(in oklch, var(--amber) 45%, var(--hair)); }
/* One line, truncated. The bar must never change height as events land. */
.ce-activity-latest {
  display: flex; gap: 10px; min-width: 0; flex: 1 1 auto;
  font: 500 11.5px/1.4 var(--font-mono); color: var(--t-dim);
  overflow: hidden; white-space: nowrap;
}

/* QA findings: a message, and always a way out of it. */
.ce-qa-message { color: inherit; }
/* A waved-through check is reported, never hidden: reading as settled would
   be a lie, so it reads as a decision someone made. */
.ce-qa-overridden .ce-qa-message { color: var(--t-dim); text-decoration: line-through; }

/* Pacing state: settled reads green per DESIGN.md:142 ("settled rather than
   celebratory"), and the recommendation control only appears when pressing it
   would change something. */
.ce-pacing-settled {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 9px;
  font: 600 11px/1.6 var(--font-ui); color: var(--green);
  padding: 1px 7px 1px 5px; border-radius: 999px; background: var(--green-soft);
  vertical-align: middle;
}
/* What remains, by name. Neutral: a list of pending work is not a state
   signal, so the One Voice Rule forbids color here. */
.ce-next-then { font: 500 12.5px/1.55 var(--font-ui); color: var(--t-low); margin: 5px 0 0; max-width: 68ch; }
/* A step waiting behind a running job is information, not an invitation. */
.ce-next-pending { opacity: 0.82; }
/* Settled, not celebratory (DESIGN.md:142). Green states the edit is finished;
   it does not congratulate anyone for finishing it. */
.ce-next-done { border-color: color-mix(in oklch, var(--green) 35%, var(--hair)); }
/* Ties a blocker to the step that clears it. Neutral: the blocker line above
   already carries the state signal, so repeating colour here would double it. */
.ce-qa-step { display: block; margin-top: 3px; font: 500 11.5px/1.5 var(--font-ui); color: var(--t-dim); }

.task-initiative { color: var(--t-dim); font-size: 11px; line-height: 1.4; margin-top: 3px; }

/* Outcome and initiative rows use natural height. Their card reports expansion
   to the grid; the existing 48px operational rows remain compact. */
.morning-task-row[data-has-context="true"] { max-height: none; align-items: flex-start !important; }
/* Content board priority: one icon, compact color choices, accessible labels. */
.cs-card-open { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }

/* Habit history: one modal scroll surface; calendar adapts to its own container. */
.habit-history-trigger {display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:10px;color:var(--t-low);cursor:pointer}
/* Revision: fixed modal geometry, named in-place day details, routine period reviews. */
.habit-history-layer {display:flex;align-items:center;justify-content:center;isolation:isolate}

/* Off-days stay unobtrusive; full status is available to assistive technology. */
.habit-history-day.unscheduled {color:var(--t-dim);background:transparent}