/*
 * Creative show page — Mark-2 layout (2026-06-01).
 *
 * Loaded on top of campaign_page.css. Carries:
 *   - The Mark-2 work-column blocks (subject, workflow status-object,
 *     campaigns w/ nested sends, please-revise reason callout).
 *   - The facts-column Google Doc primary-action + Verticals chip.
 *   - The workflow_state badge + dot palette used by the head's state menu.
 *   - The `creative-picker-anchor` overlay rule for the facts-column
 *     Template/Concept/Event/Topic pickers.
 *   - The quick-add Campaign editor chrome (chip row + date input + notes
 *     textarea overrides).
 *
 * Legacy creative-hero-* / creative-workflow-* / creative-content-* /
 * creative-send-row / creative-notes-panel--revise selectors were
 * removed in the Mark-2 cleanup pass; the rebuilt show.html.erb +
 * partials don't reference them.
 *
 * All selectors are scoped under .cpv1-body so they don't leak.
 */

/* ============================================================
   Facts-column overlay anchor for the picker turbo-frames
   (Template / Concept / Events / Topics).
   ============================================================ */
.cpv1-body .creative-picker-anchor {
  position: relative;
}
.cpv1-body .creative-picker-anchor > turbo-frame > .cpv1-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 480px;
  width: max-content;
  max-width: calc(100vw - 60px);
  margin-top: 4px;
  padding: 10px 14px;
  background: var(--cp-surface);
  border: 1px solid var(--tint-200);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
              0 1px 3px rgba(0, 0, 0, 0.04);
  max-height: 360px;
  overflow: auto;
}

/* ============================================================
   Quick-add Campaign editor (still used from the Campaigns panel
   on the Creative page — chip rows, native date input override,
   fixed-height notes textarea).
   ============================================================ */
.cpv1-body .cpv1-quick-add-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.cpv1-body .cpv1-quick-add-row input[type="date"] {
  width: auto;
  justify-self: start;
}

.cpv1-body .cpv1-quick-add-row textarea.cpv1-quick-add-notes {
  width: 100%;
  resize: none;
  padding: 5px 8px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  font-size: 12.5px;
  font-family: inherit;
  background: white;
  line-height: 1.4;
}
.cpv1-body .cpv1-quick-add-row textarea.cpv1-quick-add-notes:focus {
  outline: none;
  border-color: var(--tint-800, var(--cp-accent));
  box-shadow: 0 0 0 2px var(--tint-100, transparent);
}

/* ============================================================
   Workflow-state badge palette + dot palette
   (used by the head's state-change menu).
   ============================================================ */
.cpv1-body .cpv1-badge--workflow-placeholder {
  background: #ffffff;
  border: 1px solid #d6d3d1;
  color: #57534e;
}
.cpv1-body .cpv1-badge--workflow-placeholder.cpv1-badge--clickable:hover { background: #f5f5f4; }
.cpv1-body .cpv1-badge--workflow-drafted {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.cpv1-body .cpv1-badge--workflow-drafted.cpv1-badge--clickable:hover { background: #dbeafe; }
.cpv1-body .cpv1-badge--workflow-proofed {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}
.cpv1-body .cpv1-badge--workflow-proofed.cpv1-badge--clickable:hover { background: #dbeafe; }
.cpv1-body .cpv1-badge--workflow-second_proofed {
  background: #dbeafe;
  border: 1px solid #60a5fa;
  color: #1e3a8a;
}
.cpv1-body .cpv1-badge--workflow-second_proofed.cpv1-badge--clickable:hover { background: #bfdbfe; }
.cpv1-body .cpv1-badge--workflow-approved {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.cpv1-body .cpv1-badge--workflow-approved.cpv1-badge--clickable:hover { background: #dcfce7; }
.cpv1-body .cpv1-badge--workflow-please_revise {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.cpv1-body .cpv1-badge--workflow-please_revise.cpv1-badge--clickable:hover { background: #fee2e2; }

.cpv1-body .cpv1-state-dot--workflow-placeholder { background: #d6d3d1; border: 1px solid #a8a29e; }
.cpv1-body .cpv1-state-dot--workflow-drafted { background: #bfdbfe; border: 1px solid #60a5fa; }
.cpv1-body .cpv1-state-dot--workflow-proofed { background: #93c5fd; border: 1px solid #3b82f6; }
.cpv1-body .cpv1-state-dot--workflow-second_proofed { background: #60a5fa; border: 1px solid #2563eb; }
.cpv1-body .cpv1-state-dot--workflow-approved { background: #bbf7d0; border: 1px solid #4ade80; }
.cpv1-body .cpv1-state-dot--workflow-please_revise { background: #fecaca; border: 1px solid #f87171; }

/* ============================================================
   Mark-2 layout
   ============================================================ */

/* DS button atom — slate-900 primary (NEVER blue), DS secondary. Used in
 * the Workflow transition footer + the Google Doc primary action. */
.cpv1-body .btn {
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  border-radius: var(--r-pill, 999px);
  padding: 6px 13px; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast, 100ms ease-out), border-color var(--t-fast, 100ms ease-out), color var(--t-fast, 100ms ease-out);
}
.cpv1-body .btn--primary {
  background: var(--color-slate-900, #0f172a); color: #fff;
  border-color: var(--color-slate-900, #0f172a);
}
.cpv1-body .btn--primary:hover {
  background: var(--color-slate-700, #334155); border-color: var(--color-slate-700, #334155);
}
.cpv1-body .btn--secondary {
  background: var(--surface, #fff); color: var(--color-slate-700, #334155);
  border-color: var(--border-strong, #cbd5e1);
}
.cpv1-body .btn--secondary:hover { background: var(--surface-2, #f8fafc); }
.cpv1-body .btn--sm { padding: 4px 10px; font-size: 12px; }

/* The creative-show two-column grid uses the campaign-page primitives
 * (.cpv1-detail / .cpv1-work / .cpv1-facts) directly. This namespace
 * class is just an identity hook for any creative-specific overrides. */
.cpv1-creative-body .cpv1-detail { /* inherits campaign grid */ }

/* Subject (work-column hero) ------------------------------------------- */
.cpv1-body .creative-subject { padding: 14px 0 4px; }
.cpv1-body .creative-subject-l {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint, var(--cp-text-faint)); font-weight: 600;
}
.cpv1-body .creative-subject-v {
  font-size: 17px; font-weight: 600; line-height: 1.4;
  color: var(--fg, var(--cp-text));
  margin-top: 4px; padding: 2px 6px; margin-left: -6px;
  border-radius: var(--r-input, 3px);
  cursor: text;
}
.cpv1-body .creative-subject-v:hover {
  box-shadow: inset 0 0 0 1px var(--color-slate-200, var(--cp-border));
}
.cpv1-body .creative-subject-v--empty .cpv1-inline-field {
  color: var(--fg-faint, var(--cp-text-faint)); font-style: italic; font-weight: 400;
}

/* Workflow status object --------------------------------------------- */
.cpv1-body .creative-workflow {
  border: 1px solid var(--border, var(--cp-border));
  border-radius: var(--r-card, 4px);
  background: var(--color-slate-50, #f8fafc);
  overflow: hidden; box-shadow: var(--sh-card, 0 1px 2px rgba(15,23,42,0.04));
}
.cpv1-body .creative-wf-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--surface, var(--cp-surface));
  border-bottom: 1px solid var(--border-faint, var(--cp-border));
}
.cpv1-body .creative-wf-row:last-of-type { border-bottom: none; }
.cpv1-body .creative-wf-row--now { background: var(--color-info-bg, #dbeafe); }
.cpv1-body .creative-wf-role { font-size: 13px; font-weight: 600; color: var(--fg, var(--cp-text)); }
.cpv1-body .creative-wf-row--now .creative-wf-role { color: var(--color-info-text, #1e3a8a); }
.cpv1-body .creative-wf-name-cell { justify-self: start; min-width: 0; }
.cpv1-body .creative-wf-stat { justify-self: end; }
.cpv1-body .creative-wf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: 11px; font-weight: 500;
  border-radius: var(--r-pill, 999px); white-space: nowrap;
}
.cpv1-body .creative-wf-badge--done { background: var(--color-success-bg, #dcfce7); color: var(--color-success-text, #166534); }
.cpv1-body .creative-wf-badge--now  { background: var(--color-info-bg, #dbeafe);    color: var(--color-info-text, #1e3a8a); }
.cpv1-body .creative-wf-badge--wait { background: var(--surface-2, #f3f4f6);        color: var(--fg-muted, var(--cp-text-muted)); }
.cpv1-body .creative-wf-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--color-slate-50, #f8fafc);
  border-top: 1px solid var(--border, var(--cp-border));
}

/* Inline reason composer — swaps in for the verb footer when the
 * operator clicks "Request revision." Same surface chrome as the footer
 * (slate-50 strip, hairline border-top) so the swap reads as a mode
 * change inside one element, not a popover. */
.cpv1-body .creative-wf-composer {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: end;
  padding: 11px 14px;
  background: var(--color-slate-50, #f8fafc);
  border-top: 1px solid var(--border, var(--cp-border));
}
.cpv1-body .creative-wf-composer-input {
  font: inherit; font-size: 13px;
  width: 100%; box-sizing: border-box;
  padding: 6px 8px; resize: vertical; line-height: 1.4;
  border: 1px solid var(--border-strong, var(--cp-border-strong));
  border-radius: var(--r-input, var(--cp-radius));
  background: var(--surface, var(--cp-surface));
  color: var(--fg, var(--cp-text));
  outline: none;
}
.cpv1-body .creative-wf-composer-input:focus {
  border-color: var(--color-blue-700, var(--cp-accent));
  box-shadow: 0 0 0 2px var(--color-blue-100, transparent);
}
.cpv1-body .creative-wf-composer-actions {
  display: flex; align-items: center; gap: 6px;
}

/* please_revise reason callout — above the workflow card. */
.cpv1-body .creative-revise-callout {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-card, 4px);
  color: #991b1b; font-size: 13px; line-height: 1.5;
}
.cpv1-body .creative-revise-callout-l {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700;
}

/* Campaigns w/ nested Sends ------------------------------------------ */
.cpv1-body .creative-cmp-list { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.cpv1-body .creative-cmp {
  border: 1px solid var(--border, var(--cp-border)); border-radius: var(--r-card, 4px);
  background: var(--surface, var(--cp-surface)); overflow: hidden;
}
.cpv1-body .creative-cmp:hover { border-color: var(--border-strong, var(--cp-border-strong)); }
.cpv1-body .creative-cmp-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px;
}
.cpv1-body .creative-cmp-name { font-size: 13.5px; font-weight: 600; color: var(--fg, var(--cp-text)); }
.cpv1-body .creative-cmp-name:hover { text-decoration: underline; color: var(--color-blue-700, var(--cp-accent)); }
.cpv1-body .creative-cmp-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-muted, var(--cp-text-muted));
}
.cpv1-body .creative-cmp-sep { color: var(--border-strong, var(--cp-border-strong)); }
.cpv1-body .creative-cmp-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px;
  border-radius: 3px; background: var(--surface-2, var(--cp-surface-2));
  border: 1px solid var(--border, var(--cp-border));
  color: var(--fg-muted, var(--cp-text-muted));
}
.cpv1-body .creative-cmp-launch { color: var(--fg-muted, var(--cp-text-muted)); }
.cpv1-body .creative-cmp-state {
  display: inline-flex; align-items: center; padding: 2px 8px;
  font-size: 11px; font-weight: 500; border-radius: var(--r-pill, 999px);
  background: var(--surface-2, var(--cp-surface-2)); color: var(--fg-muted, var(--cp-text-muted));
  white-space: nowrap; margin-left: auto;
}
.cpv1-body .creative-cmp-state--approved { background: #dcfce7; color: #166534; }
.cpv1-body .creative-cmp-state--in_review { background: #fffbeb; color: #b45309; }
.cpv1-body .creative-cmp-state--revising { background: #fef2f2; color: #991b1b; }
.cpv1-body .creative-cmp-state--draft { background: #f3f4f6; color: #4b5563; }
.cpv1-body .creative-cmp-state--archived { background: #e5e7eb; color: #4b5563; }
.cpv1-body .creative-cmp-x {
  background: none; border: none; color: var(--fg-faint, var(--cp-text-faint));
  font-size: 14px; cursor: pointer; padding: 0 0 0 2px; line-height: 1;
}
.cpv1-body .creative-cmp-x:hover { color: var(--color-danger-text, #991b1b); }

/* Nested sends mini-table inside each campaign card. */
.cpv1-body .creative-cmp-sends {
  border-top: 1px solid var(--border-faint, var(--cp-border));
  background: var(--color-slate-50, #f8fafc);
  padding: 4px 13px 8px;
}
.cpv1-body .creative-cmp-sends-l {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--fg-faint, var(--cp-text-faint)); font-weight: 600;
  padding: 6px 0 2px 24px;
}
.cpv1-body .creative-snd-empty {
  font-size: 12px; color: var(--fg-faint, var(--cp-text-faint));
  font-style: italic; padding: 6px 0 6px 24px;
}
.cpv1-body .creative-snd-table {
  position: relative; padding-left: 24px;
}
.cpv1-body .creative-snd-table::before {
  content: ""; position: absolute; left: 12px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border, var(--cp-border));
}
.cpv1-body .creative-snd-head,
.cpv1-body .creative-snd {
  display: grid;
  grid-template-columns: 160px 86px 110px 1fr 88px 20px;
  align-items: center; gap: 12px;
}
.cpv1-body .creative-snd-head { padding: 4px 6px 5px; }
.cpv1-body .creative-snd-hl {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-faint, var(--cp-text-faint)); font-weight: 600;
}
.cpv1-body .creative-snd {
  padding: 7px 6px; border-top: 1px solid var(--border-faint, var(--cp-border));
  font-size: 12.5px; border-radius: 3px;
}
.cpv1-body .creative-snd:hover { background: var(--color-slate-100, var(--cp-surface-2)); }
.cpv1-body .creative-snd--sealed { color: var(--fg-muted, var(--cp-text-muted)); }
.cpv1-body .creative-snd-when {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px; white-space: nowrap;
}
.cpv1-body .creative-snd--sealed .creative-snd-when { color: var(--fg-muted, var(--cp-text-muted)); }
.cpv1-body .creative-snd-when-unset { color: var(--fg-faint, var(--cp-text-faint)); font-style: italic; }
.cpv1-body .creative-snd-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpv1-body .creative-snd-arrow {
  color: var(--color-blue-700, var(--cp-accent));
  text-align: center; text-decoration: none;
}
.cpv1-body .creative-snd-arrow:hover { text-decoration: none; opacity: 0.7; }
.cpv1-body .creative-snd-status {
  display: inline-flex; align-items: center; padding: 1px 7px;
  font-size: 10.5px; font-weight: 500; font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  border-radius: var(--r-pill, 999px); white-space: nowrap;
  background: var(--surface-2, var(--cp-surface-2)); color: var(--fg-muted, var(--cp-text-muted));
}
.cpv1-body .creative-snd-status--scheduled { background: #dbeafe; color: #1e3a8a; }
.cpv1-body .creative-snd-status--sending { background: #fffbeb; color: #b45309; }
.cpv1-body .creative-snd-status--sent { background: var(--surface-2, #f3f4f6); color: var(--fg-muted, #6b7280); }
.cpv1-body .creative-snd-status--failed { background: #fef2f2; color: #991b1b; }
.cpv1-body .creative-snd-status--cancelled { background: var(--surface-2, #f3f4f6); color: var(--fg-faint, #9ca3af); }

/* Google Doc primary action (top of facts column) -------------------- */
.cpv1-body .creative-gdoc-open {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; font-size: 13.5px; text-decoration: none;
  margin-bottom: 6px;
}
.cpv1-body .creative-gdoc-update {
  width: 100%; text-align: center;
  background: none; border: none; padding: 5px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--fg-muted, var(--cp-text-muted)); cursor: pointer;
  border-radius: var(--r-pill, 999px);
}
.cpv1-body .creative-gdoc-update:hover {
  background: var(--surface-2, var(--cp-surface-2));
  color: var(--fg, var(--cp-text));
}
.cpv1-body .creative-gdoc-empty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-blue-700, var(--cp-accent));
  background: var(--surface, var(--cp-surface));
  border: 1px dashed var(--border-strong, var(--cp-border-strong));
  border-radius: var(--r-pill, 999px); cursor: pointer;
}
.cpv1-body .creative-gdoc-empty:hover { background: var(--surface-2, var(--cp-surface-2)); }

/* Vertical chip — small subdued tag in chip-set */
.cpv1-body .cpv1-chip--vertical {
  background: var(--surface-2, var(--cp-surface-2));
  border: 1px solid var(--border, var(--cp-border));
  color: var(--fg-muted, var(--cp-text-muted));
}