/* dashboard/static/review.css — Design system for Tempa.
   Warm parchment palette. Borders-only depth. Ember accent (one per screen).
   Designed for busy founders who want to approve and move on. */


/* ================================================================== */
/* DESIGN TOKENS                                                       */
/* ================================================================== */

:root {
    /* Backgrounds */
    --bg:           #F5F2EC;  /* Page — warm parchment */
    --surface:      #FFFFFF;  /* Cards, panels, all content surfaces */
    --dune-light:   #F0EDE8;  /* Subtle fills, inactive tabs, alt table rows */

    /* Text */
    --ink:          #1C1917;  /* Primary — warm near-black. Never use #000. */
    --stone:        #57534E;  /* Secondary — labels, metadata, placeholder */
    --ink-mid:      #44403C;  /* Mid — body text, descriptions, secondary content */

    /* Accent — ONE USE PER SCREEN ONLY */
    --ember:        #E8520A;  /* The single most important action. Logo dot. Launch CTA. Nothing else. */

    /* Borders */
    --dune:         #E5E0D8;  /* All borders, dividers, inactive chrome */

    /* Semantic — calm, never alarming */
    --review-bg:    #FFF5F0;  /* "Ready for review" badge background */
    --review-text:  #C04000;  /* "Ready for review" badge text */
    --review-border:#FDDCC8;  /* "Ready for review" badge border */
    --failed-bg:    #FDF0EE;  /* Failed state background */
    --failed-text:  #A05040;  /* Failed state text — warm rose, not red */
    --failed-border:#DDB8AE;  /* Failed left border on campaign rows */
    --passed-bg:    #F0F4EE;  /* Passed/success — warm sage, not electric green */
    --passed-text:  #3D5A38;  /* Passed/success text */
    --passed-border:#C4D4BF;  /* Passed/success border */
    --info-bg:      #EEF2F7;  /* Info — warm slate-blue, not cold Tailwind blue */
    --info-text:    #3B5070;  /* Info text */
    --info-border:  #C0CDDD;  /* Info border */
    --blocked-bg:   #FFF8F0;  /* Blocked/warning — warm amber */
    --blocked-text: #7A4A1A;  /* Blocked/warning text */
    --blocked-border:#E8D0B0; /* Blocked/warning border */

    /* Radius */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:  12px;
    --r-pill:20px;

    /* Spacing — 4px base */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10:40px;

    /* Legacy aliases — map old token names used in inline template styles */
    --surface-page: var(--bg);
    --surface-primary: var(--surface);
    --surface-secondary: var(--dune-light);
    --surface-tertiary: var(--dune);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-mid);
    --text-tertiary: var(--stone);
    --text-muted: var(--stone);
    --brand: var(--ink);
    --brand-light: var(--dune-light);
    --brand-hover: #2d2b28;
    --approve: var(--stone);
    --approve-bg: var(--dune-light);
    --approve-border: var(--dune);
    --approve-hover: var(--ink-mid);
    --warn: var(--review-text);
    --warn-bg: var(--review-bg);
    --warn-border: var(--review-border);
    --error: var(--failed-text);
    --error-bg: var(--failed-bg);
    --error-border: var(--failed-border);
    --border: var(--dune);
    --border-strong: var(--dune);
    --border-focus: var(--ink);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-full: 999px;

    /* Typography */
    --font-2xs:  0.5625rem; /* 9px  — tiny field labels, table headers */
    --font-xs:   0.625rem;  /* 10px — metadata labels ONLY, always uppercase */
    --font-sm:   0.6875rem; /* 11px */
    --font-label:0.75rem;   /* 12px — nav links, badges, UI labels */
    --font-base: 0.8125rem; /* 13px — default body */
    --font-md:   0.875rem;  /* 14px */
    --font-lg:   1.125rem;  /* 18px — page titles */
    --font-xl:   1.375rem;  /* 22px — large titles */
    --font-heading-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}


/* ================================================================== */
/* FOUNDATIONS                                                          */
/* ================================================================== */

.review-body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
}

.review-body.campaign-body {
    background: var(--bg);
}


/* ================================================================== */
/* CONTENT ENTRANCE                                                    */
/* ================================================================== */

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

.review-content {
    animation: fadeInUp 0.3s ease-out;
}


/* ================================================================== */
/* HEADER                                                              */
/* ================================================================== */

.review-header {
    background: var(--surface);
    color: var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--dune);
}

.review-header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-6) 0;
}

.header-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Tempa wordmark — Syne 800, ember dot */
.tempa-wordmark {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--ink);
}

.tempa-wordmark em {
    font-style: normal;
    color: var(--ember);
}

.review-header h1 {
    font-family: var(--font-heading-family);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink);
}

.client-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.client-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 48px;
    max-width: 180px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--dune);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(11, 16, 22, 0.05);
}

.client-logo-image {
    display: block;
    max-height: 28px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.review-header .subtitle {
    color: var(--stone);
    font-size: var(--font-base);
    margin-top: 4px;
    font-weight: 400;
}


/* ================================================================== */
/* STATUS BADGES                                                       */
/* ================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-badge.approved {
    background: var(--dune-light);
    color: var(--stone);
}

.status-badge.changes-requested {
    background: var(--review-bg);
    color: var(--review-text);
}

.status-badge.awaiting {
    background: var(--bg);
    color: var(--stone);
}

/* Campaign-list status badges */
.status-badge.assets_ready,
.status-badge.ready-for-review {
    background: var(--review-bg);
    color: var(--review-text);
    border: 1px solid var(--review-border);
}

.status-badge.strategy_ready,
.status-badge.queued {
    background: var(--bg);
    color: var(--stone);
}

.status-badge.failed {
    background: var(--failed-bg);
    color: var(--failed-text);
}

.status-badge.running {
    background: var(--bg);
    color: var(--stone);
}


/* ================================================================== */
/* IMAGE REVIEW STATE PILLS — replaces inline hardcoded colours       */
/* ================================================================== */

.image-state-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    font-size: var(--font-sm);
    font-weight: 600;
}

.image-state-pill.state-blocked {
    background: var(--blocked-bg);
    color: var(--blocked-text);
}

.image-state-pill.state-ready {
    background: var(--passed-bg);
    color: var(--passed-text);
}

.image-state-pill.state-passed {
    background: var(--passed-bg);
    color: var(--passed-text);
}

.image-state-pill.state-accepted {
    background: var(--info-bg);
    color: var(--info-text);
}

.image-state-pill.state-placeholder {
    background: var(--failed-bg);
    color: var(--failed-text);
}

.image-state-pill.state-needs-review {
    background: var(--blocked-bg);
    color: var(--blocked-text);
}


/* ================================================================== */
/* REUSABLE PATTERNS — extracted from repeated inline styles          */
/* ================================================================== */

/* Uppercase metadata label — "Step 1", "Goal", "Operator Review", etc. */
.meta-label {
    margin: 0 0 4px 0;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Trust cue / info card — bordered box for step-by-step info */
.trust-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--dune-light);
}

.trust-card-title {
    margin: 0;
    font-size: var(--font-base);
    color: var(--ink);
    font-weight: 600;
}

.trust-card-body {
    margin: 6px 0 0 0;
    font-size: var(--font-sm);
    color: var(--ink-mid);
    line-height: 1.6;
}

/* Section divider — separates feedback from main content */
.section-divider {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}


/* ================================================================== */
/* ALERT PANELS — token-backed alternatives to inline hex             */
/* ================================================================== */

.alert-panel {
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid;
    font-size: var(--font-sm);
    line-height: 1.6;
}

.alert-panel-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

.alert-panel-info .alert-label {
    color: var(--info-text);
}

.alert-panel-blocked {
    background: var(--blocked-bg);
    border-color: var(--blocked-border);
    color: var(--blocked-text);
}

.alert-panel-blocked .alert-label {
    color: var(--blocked-text);
}

.alert-panel-warn {
    background: var(--review-bg);
    border-color: var(--review-border);
    color: var(--review-text);
}

.alert-panel-failed {
    background: var(--failed-bg);
    border-color: var(--failed-border);
    color: var(--failed-text);
}

.alert-panel-passed {
    background: var(--passed-bg);
    border-color: var(--passed-border);
    color: var(--passed-text);
}

.alert-label {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Confirm-style button inside alert panels */
.alert-btn {
    padding: 10px 18px;
    background: var(--blocked-text);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s;
}

.alert-btn:hover {
    opacity: 0.9;
}

/* Accept-override button on image cards */
.btn-accept-override {
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    color: var(--info-text);
}
.btn-accept-override:disabled {
    opacity: 0.5;
    cursor: wait;
}


.copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--sp-3);
    border-radius: var(--r-md);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.copy-link-btn:hover {
    background: var(--dune-light);
    color: var(--ink);
}


/* ================================================================== */
/* STEP NAVIGATION                                                     */
/* ================================================================== */

.step-nav {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-6) var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.step-pill-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
}

/* Active step */
.step-pill.active {
    background: var(--ink);
    color: #fff;
}

.step-pill.active .step-pill-number {
    background: #fff;
    color: var(--ink);
}

/* Completed step — stone grey, NOT green */
.step-pill.completed {
    background: var(--dune-light);
    color: var(--stone);
    cursor: pointer;
}

.step-pill.completed:hover {
    background: var(--dune);
}

.step-pill.completed .step-pill-number {
    background: var(--stone);
    color: #fff;
}

/* Pending step */
.step-pill.pending {
    color: var(--stone);
    cursor: pointer;
}

.step-pill.pending:hover {
    color: var(--ink);
    background: var(--bg);
}

.step-pill.pending .step-pill-number {
    background: var(--dune-light);
    color: var(--stone);
}

/* Locked step */
.step-pill.locked {
    color: var(--stone);
    cursor: not-allowed;
    pointer-events: none;
}

.step-pill.locked .step-pill-number {
    background: var(--bg);
    color: var(--stone);
}

/* Connector */
.step-connector {
    width: 20px;
    height: 1.5px;
    background: var(--dune);
    border-radius: 1px;
    flex-shrink: 0;
}


/* ================================================================== */
/* CARDS — borders only, no shadows                                    */
/* ================================================================== */

.review-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.review-card:hover {
    border-color: #D4D0CA;
}

.review-card-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--dune);
}

.review-card-body {
    padding: var(--sp-5);
}


/* ================================================================== */
/* SECTION HEADINGS                                                    */
/* ================================================================== */

.section-heading {
    font-family: var(--font-heading-family);
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-4);
    letter-spacing: -0.015em;
}

/* Field-level label — sentence case, not uppercase */
.section-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--stone);
    margin-bottom: var(--sp-3);
}

/* Sub-labels */
.sub-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--stone);
    margin-bottom: 6px;
}


/* ================================================================== */
/* THESIS HIGHLIGHT — replaces the old pull-quote                      */
/* Clean left-border accent. No gradient. No italic.                   */
/* ================================================================== */

.pull-quote,
.thesis-highlight {
    border-left: 4px solid var(--ink);
    padding: var(--sp-5) var(--sp-6);
    background: var(--dune-light);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    margin: var(--sp-2) 0;
}

.pull-quote .section-heading,
.thesis-highlight .section-heading {
    color: var(--ink);
    font-size: var(--font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
}

.pull-quote p,
.thesis-highlight p {
    font-size: var(--font-md);
    line-height: 1.65;
    color: var(--ink);
    font-weight: 500;
    font-style: normal;
}


/* ================================================================== */
/* SECTION DIVIDER — see extracted definition near design tokens       */
/* (Duplicate removed; canonical rule is above, near .trust-card)      */
/* ================================================================== */


/* ================================================================== */
/* EDITABLE FIELD                                                      */
/* ================================================================== */

.editable-field .field-display {
    position: relative;
    cursor: default;
    padding: 6px 8px;
    margin: -6px -8px;
    border-radius: var(--r-md);
    transition: background-color 0.15s ease;
}

.editable-field .field-display:hover {
    background-color: var(--bg);
}

.editable-field .edit-trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.editable-field .field-display:hover .edit-trigger {
    opacity: 1;
}

.edit-hint {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--stone);
    white-space: nowrap;
}

/* Edit form inputs */
.editable-field textarea,
.editable-field input[type="text"] {
    font-family: 'Inter', system-ui, sans-serif;
    border: 1.5px solid var(--dune);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-base);
    line-height: 1.6;
    width: 100%;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface);
    color: var(--ink);
}

.editable-field textarea:focus,
.editable-field input[type="text"]:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--dune-light);
}

.editable-field textarea {
    min-height: 64px;
    resize: vertical;
}

/* Save / Cancel */
.edit-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.btn-save {
    padding: 6px 14px;
    background: var(--ink);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

.btn-save:hover {
    background: #2d2b28;
}

.btn-cancel {
    padding: 6px 14px;
    background: transparent;
    color: var(--stone);
    font-size: var(--font-sm);
    font-weight: 500;
    border-radius: var(--r-md);
    border: 1px solid var(--dune);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.btn-cancel:hover {
    background: var(--bg);
    color: var(--ink);
}


/* ================================================================== */
/* SAVE FLASH                                                          */
/* ================================================================== */

@keyframes saveFlash {
    0%   { background-color: var(--dune-light); }
    100% { background-color: transparent; }
}

.save-flash {
    animation: saveFlash 2s ease-out forwards;
    border-radius: var(--r-md);
}

.saved-label {
    color: var(--stone);
    font-size: 0.75rem;
    font-weight: 600;
    animation: fadeInUp 0.3s ease-out;
}


/* ================================================================== */
/* PROOF POINTS — simple numbered marker, no decorative dot            */
/* ================================================================== */

.proof-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
    margin-top: 7px;
}


/* ================================================================== */
/* VARIATION CARD                                                      */
/* ================================================================== */

.variation-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--dune);
}

.variation-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-base);
    font-weight: 700;
    flex-shrink: 0;
}


/* ================================================================== */
/* ACTION BUTTONS — ink primary, ember launch, ghost changes           */
/* ================================================================== */

.btn-approve,
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 20px;
    background: var(--ink);
    color: #fff;
    font-size: var(--font-base);
    font-weight: 600;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

.btn-approve:hover,
.btn-primary:hover {
    background: #2d2b28;
}

.btn-changes,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: none;
    color: var(--stone);
    font-size: var(--font-sm);
    font-weight: 500;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: color 0.15s;
    font-family: 'Inter', sans-serif;
}

.btn-changes:hover,
.btn-ghost:hover {
    color: var(--ink);
}

.btn-comment,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px 16px;
    background: transparent;
    color: var(--stone);
    font-size: var(--font-label);
    font-weight: 500;
    border-radius: var(--r-md);
    border: 1px solid var(--dune);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-family: 'Inter', sans-serif;
}

.btn-comment:hover,
.btn-secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.btn-launch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 12px 28px;
    background: var(--ember);
    color: #fff;
    font-size: var(--font-md);
    font-weight: 800;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font-heading-family);
    letter-spacing: -0.01em;
}

.btn-launch:hover {
    background: #D04A09;
}


/* ================================================================== */
/* FEEDBACK FLOW — one-click approve, expandable change request        */
/* ================================================================== */

.feedback-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
}

.feedback-expand {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg);
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
}

.feedback-expand textarea {
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-sm);
    width: 100%;
    min-height: 56px;
    resize: vertical;
    background: var(--surface);
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s;
}

.feedback-expand textarea:focus {
    border-color: var(--ink);
}

.feedback-expand textarea::placeholder {
    color: var(--stone);
}

.feedback-expand-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}


/* ================================================================== */
/* INTERNAL STRATEGY — admin-only, neutral border accent               */
/* ================================================================== */

.internal-strategy-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    border-left: 3px solid var(--dune);
    overflow: hidden;
}

.internal-strategy-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background 0.15s;
    text-align: left;
}

.internal-strategy-toggle:hover {
    background: var(--bg);
}


/* ================================================================== */
/* FORM INPUTS                                                         */
/* ================================================================== */

.form-input {
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-base);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}

.form-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--dune-light);
}

.form-input::placeholder {
    color: var(--stone);
}

/* Compact variant for onboarding / dense forms */
.form-input-sm {
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--dune);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: var(--font-sm);
    outline: none;
    transition: border-color 0.15s;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}

.form-input-sm:focus {
    border-color: var(--ink);
}

.form-input-sm::placeholder {
    color: var(--stone);
}

/* Select elements matching .form-input */
select.form-input,
select.form-input-sm {
    cursor: pointer;
}

/* Textarea variant */
textarea.form-input {
    resize: vertical;
}

/* Form layout helpers */
.form-group {
    margin-bottom: var(--sp-6);
}

.form-label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-label-sm {
    display: block;
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--ink-mid);
    margin-bottom: 4px;
}

.form-hint {
    font-size: var(--font-xs);
    color: var(--stone);
    margin: 6px 0 0 0;
}

.form-hint-sm {
    font-size: 11px;
    color: var(--stone);
    margin: 3px 0 0 0;
}

/* Primary submit button */
.btn-submit {
    width: 100%;
    padding: var(--sp-3);
    background: var(--ink);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-submit:hover {
    background: var(--brand-hover);
}

/* Compact save button (used in onboarding steps) */
.btn-save {
    padding: 10px 24px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save:hover {
    background: var(--brand-hover);
}

/* Onboarding step circle (numbered indicator) */
.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.step-circle.is-complete {
    background: var(--stone);
    color: white;
}

.step-circle.is-partial {
    background: var(--review-text);
    color: white;
}

.step-circle.is-pending {
    background: var(--dune-light);
    color: var(--stone);
}

/* Access grant checkbox row */
.access-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s;
}

/* Data table (leads, sessions) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.data-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--ink-mid);
    font-size: var(--font-xs);
    background: var(--dune-light);
    border-bottom: 1px solid var(--dune);
}

.data-table td {
    padding: 12px 16px;
    color: var(--ink);
    border-bottom: 1px solid var(--dune);
}

.data-table td.is-muted {
    color: var(--stone);
}

.data-table td.is-secondary {
    color: var(--ink-mid);
}

.data-table th.text-right,
.data-table td.text-right {
    text-align: right;
}

/* Ghost button — border-only action buttons used across campaign detail */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: none;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    color: var(--ink-mid);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.btn-ghost.is-danger:hover {
    border-color: var(--failed-text);
    color: var(--failed-text);
}

/* Filled action button (primary CTA in campaign detail) */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-action:hover {
    background: var(--brand-hover);
}

/* Secondary action button / link (outline style) */
.btn-action-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--dune-light);
    color: var(--ink);
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}

.btn-action-secondary:hover {
    border-color: var(--ink);
}

/* Back link — subtle breadcrumb-style nav */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--stone);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.15s;
}

.back-link:hover {
    color: var(--ink-mid);
}

/* Client card — hover lift on client list */
.client-card {
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.client-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Campaign metadata row (detail text below campaign cards) */
.campaign-meta-row {
    margin: 0;
    font-size: var(--font-xs);
    color: var(--ink-mid);
    line-height: 1.5;
}

.campaign-meta-row strong {
    color: var(--ink);
}

.campaign-meta-row.is-muted {
    color: var(--stone);
}


/* ================================================================== */
/* COMMENTS                                                            */
/* ================================================================== */

.comment-bubble {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
}

.comment-bubble.approval {
    background: var(--dune-light);
    border-color: var(--dune);
}

.comment-bubble.change-request {
    background: var(--review-bg);
    border-color: var(--review-border);
}

.comment-bubble.feedback {
    background: var(--bg);
    border-color: var(--dune);
}

.comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.comment-avatar.avatar-approve { background: var(--stone); }
.comment-avatar.avatar-change  { background: var(--review-text); }
.comment-avatar.avatar-feedback { background: var(--stone); }

.comment-author {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--ink);
}

.comment-time {
    font-size: var(--font-xs);
    color: var(--stone);
}

.comment-type-badge {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-sm);
}

.comment-type-badge.type-approved {
    background: var(--dune-light);
    color: var(--stone);
}

.comment-type-badge.type-change {
    background: var(--review-bg);
    color: var(--review-text);
}

.comment-text {
    font-size: var(--font-base);
    color: var(--ink-mid);
    line-height: 1.6;
}

.review-approval-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--dune-light);
    border: 1px solid var(--dune);
    color: var(--stone);
    font-size: var(--font-sm);
    font-weight: 600;
}

.review-approval-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(92, 78, 55, 0.12);
    color: var(--stone);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* ================================================================== */
/* PHONE FRAME — keeps shadow (represents a physical device)           */
/* ================================================================== */

.phone-frame {
    width: min(100%, 248px);
    margin: 0 auto;
    padding: 10px;
    background: #2D2D30;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.phone-frame img {
    border-radius: 18px;
}

.story-preview-shell {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 9 / 16;
    background: #0c0c0e;
}

.story-preview-media {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.story-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-preview-topbar,
.story-preview-bottombar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

.story-preview-topbar {
    top: 0;
    padding: 12px 12px 0;
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.68) 0%, rgba(12, 12, 14, 0.18) 72%, rgba(12, 12, 14, 0) 100%);
}

.story-preview-progress {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    overflow: hidden;
}

.story-preview-progress-fill {
    display: block;
    width: 44%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.92);
}

.story-preview-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.story-preview-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fdc468 0%, #df4996 55%, #4f5bd5 100%);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.story-preview-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
}

.story-preview-avatar-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.story-preview-brand {
    min-width: 0;
    flex: 1 1 auto;
}

.story-preview-name {
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.story-preview-sponsored {
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.64rem;
    line-height: 1.1;
}

.story-preview-top-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
}

.story-preview-top-action {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-preview-top-action svg {
    width: 100%;
    height: 100%;
    display: block;
}

.story-preview-top-action-dots {
    width: auto;
    gap: 3px;
}

.story-preview-top-action-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}

.story-preview-bottombar {
    bottom: 0;
    padding: 0 12px 14px;
    display: flex;
    justify-content: center;
    background: linear-gradient(0deg, rgba(12, 12, 14, 0.82) 0%, rgba(12, 12, 14, 0.16) 74%, rgba(12, 12, 14, 0) 100%);
}

.story-preview-cta {
    min-width: 132px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    color: #14181f;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.phone-frame .flex {
    padding: 0 4px 4px;
}

.phone-frame .px-2 {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

.phone-frame .text-xs {
    color: rgba(255, 255, 255, 0.4);
}


/* ================================================================== */
/* IMAGE CARD — borders only                                           */
/* ================================================================== */

.image-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: var(--sp-3);
}

/* Social feed mockups show the actual creative inside platform-style chrome. */
.social-feed-preview {
    background: #fff;
    border: 1px solid var(--dune);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.social-feed-preview-instagram {
    border-radius: 26px;
}

.social-feed-preview-linkedin {
    border-radius: 16px;
}

.social-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
}

.social-feed-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.social-feed-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.social-feed-avatar-has-logo {
    background: transparent;
    color: transparent;
    padding: 0;
}

.social-feed-avatar-square {
    border-radius: 14px;
}

.social-feed-avatar-logo-wrap {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(18, 33, 47, 0.08);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.social-feed-avatar-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.instagram-avatar {
    background: linear-gradient(135deg, #fdc468 0%, #df4996 55%, #4f5bd5 100%);
    padding: 2px;
}

.linkedin-avatar {
    background: #0a66c2;
}

.social-feed-name {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.social-feed-meta {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.social-feed-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--surface-secondary);
    border-radius: 999px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.social-feed-copy {
    white-space: pre-wrap;
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--text-primary);
}

.social-feed-copy-block {
    padding: 0 18px 14px;
}

.social-feed-copy.is-collapsible {
    position: relative;
    overflow: hidden;
}

.social-feed-copy.is-collapsible.is-collapsed {
    max-height: calc(var(--feed-copy-lines, 3) * 1.55em);
}

.social-feed-copy.is-collapsible.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.9em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    pointer-events: none;
}

.social-feed-copy-toggle {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
}

.social-feed-copy-toggle:hover {
    color: var(--text-primary);
}

.social-feed-media {
    border-radius: 0;
}

.social-feed-engagement {
    padding: 12px 18px 10px;
    border-top: 1px solid rgba(229, 224, 216, 0.7);
    background: #fff;
}

.social-feed-engagement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.social-feed-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-feed-action-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    flex-shrink: 0;
}

.social-feed-action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.social-feed-action-icon-save {
    margin-left: auto;
}

.linkedin-feed-engagement {
    padding-bottom: 0;
}

.linkedin-feed-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.linkedin-feed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.social-feed-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--dune-light);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #ffffff 100%);
}

.linkedin-feed-footer {
    background: #fff;
}

.social-feed-footer-copy {
    min-width: 0;
}

.social-feed-destination {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.social-feed-headline {
    font-size: var(--font-sm);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.social-feed-description {
    font-size: var(--font-xs);
    line-height: 1.45;
    color: var(--text-secondary);
    margin-top: 4px;
}

.social-feed-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Platform-realistic preview sizes — match how ads appear in feed */
.image-card[data-placement="feed"],
.social-feed-preview[data-placement="feed"] { max-width: 500px; }
.image-card[data-placement="horizontal"],
.social-feed-preview[data-placement="horizontal"] { max-width: 500px; }
.image-card[data-placement="landscape"],
.image-card[data-placement="linkedin_single"],
.image-card[data-placement="linkedin_landscape"],
.social-feed-preview[data-placement="landscape"],
.social-feed-preview[data-placement="linkedin_single"],
.social-feed-preview[data-placement="linkedin_landscape"] { max-width: 500px; }
.image-card[data-placement="square"],
.image-card[data-placement="linkedin_square"],
.social-feed-preview[data-placement="square"],
.social-feed-preview[data-placement="linkedin_square"] { max-width: 400px; }


/* ================================================================== */
/* IMAGE UPLOAD OVERLAY                                                */
/* ================================================================== */

.image-upload-zone {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
}

.social-feed-preview .social-feed-media {
    border-radius: 0;
}

.image-card-actions {
    margin-top: 10px;
}

.image-review-meta-box {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    background: var(--surface-secondary);
}

.image-review-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.image-review-meta-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.image-review-meta-summary {
    margin-top: 8px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

.image-review-action-box {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--dune);
    border-radius: var(--r-pill);
    color: var(--stone);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}

.image-upload-btn:hover {
    background: var(--bg);
    border-color: var(--dune);
    color: var(--ink-mid);
}

.image-history-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    background: #fff;
}

.image-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.image-history-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
}

.image-history-subtitle {
    margin-top: 4px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

.image-history-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-secondary);
    color: var(--text-tertiary);
    font-size: var(--font-xs);
    font-weight: 600;
}

.image-history-list {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.image-history-card {
    padding: 12px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    background: var(--surface-secondary);
}

.image-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}

.image-history-stage {
    font-weight: 700;
    color: var(--ink);
}

.image-history-preview {
    margin-top: 10px;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid rgba(18, 33, 47, 0.08);
}

.image-history-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.image-history-promote-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--ink);
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}

.image-history-promote-form {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.image-history-promote-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

.image-history-promote-status {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--stone);
    font-size: var(--font-xs);
}

.image-history-promote-status.htmx-request {
    display: inline-flex;
}

.image-history-details {
    margin-top: 10px;
}

.image-history-details summary {
    cursor: pointer;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--ink);
}

.image-history-summary,
.image-history-empty,
.image-history-path {
    margin: 8px 0 0;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

.image-history-prompt {
    margin: 8px 0 0;
    padding: 10px;
    border-radius: var(--r-md);
    background: #f7f5f2;
    border: 1px solid var(--dune);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}


/* ================================================================== */
/* LANDING PAGE PREVIEW — borders only                                 */
/* ================================================================== */

.landing-page-preview {
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.browser-chrome {
    background: var(--bg);
    border-bottom: 1px solid var(--dune);
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot-red { background: #EF4444; }
.dot-yellow { background: #F59E0B; }
.dot-green { background: #22C55E; }

.browser-url {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--font-sm);
    color: var(--stone);
    font-family: 'Inter', system-ui, sans-serif;
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: var(--surface);
}

.iframe-scaled {
    position: absolute;
    top: 0;
    left: 0;
    width: 166.67%;
    height: 166.67%;
    transform: scale(0.6);
    transform-origin: top left;
    border: none;
}


/* ================================================================== */
/* LAUNCH STATUS                                                       */
/* ================================================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.launch-spinner {
    animation: spin 1s linear infinite;
    will-change: transform;
}

.launch-status-text {
    font-size: var(--font-sm);
    font-weight: 500;
}

.launch-status-text.launched { color: var(--stone); }
.launch-status-text.launching { color: var(--stone); }
.launch-status-text.failed { color: var(--failed-text); }
.launch-status-text.ready { color: var(--stone); }

.launch-platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--ink-mid);
}

.launching-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--sp-3);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--dune-light);
    color: var(--stone);
}

.failed-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--sp-3);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--failed-bg);
    color: var(--failed-text);
}

.error-box {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--failed-bg);
    border: 1px solid var(--failed-border);
    border-radius: var(--r-md);
}

.error-box p {
    font-size: var(--font-sm);
    color: var(--failed-text);
}

.retry-link {
    font-size: var(--font-sm);
    color: var(--failed-text);
    font-weight: 500;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: var(--sp-2);
    display: inline-block;
}


/* ================================================================== */
/* LANDING PAGE EDITOR TOGGLE                                          */
/* ================================================================== */

.lp-editor-toggle {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.lp-editor-toggle:hover {
    background-color: var(--bg);
}


/* ================================================================== */
/* UTILITY CLASSES — used in templates to replace inline styles         */
/* ================================================================== */

/* Page-level title */
.page-title {
    font-family: var(--font-heading-family);
    font-size: var(--font-lg);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.page-subtitle {
    font-size: var(--font-sm);
    color: var(--stone);
    margin-top: 2px;
}

/* Card stack layout */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Field divider */
.field-divider {
    border-top: 1px solid var(--dune);
    padding-top: var(--sp-4);
}

/* Copy block — inset background for ad copy fields */
.copy-block {
    background: var(--bg);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    border-left: 3px solid var(--dune);
}

.copy-block-sm {
    background: var(--bg);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}

/* Platform tag — quiet grey pill, same for all platforms */
.platform-tag {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--stone);
    background: var(--bg);
    padding: 2px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--dune);
}

/* Ad format badge */
.format-badge {
    padding: 3px 10px;
    border-radius: var(--r-md);
    font-size: var(--font-xs);
    font-weight: 600;
    background: var(--bg);
    color: var(--stone);
}

/* ================================================================== */
/* EMAIL SEQUENCE REVIEW                                               */
/* ================================================================== */

/* Persona info card — appears at the top of each sequence */
.persona-card {
    background: var(--bg);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: 20px;
}

/* Persona attribute tags (role, industry, company size) */
.persona-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--font-xs);
    font-weight: 500;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}

/* Individual email card within a sequence */
.email-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: 16px;
}

.email-card-subsequent {
    margin-top: 0;
}

/* Circular badge showing email number (1, 2, 3) */
.email-number-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Purpose tag pill (Initial Outreach, Follow Up Value, etc.) */
.email-purpose-tag {
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--font-xs);
    font-weight: 500;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}

/* Timing label (+3 days, Day 1, etc.) */
.email-timing {
    font-size: var(--font-xs);
    color: var(--stone);
    font-weight: 500;
}

/* CTA type badge (Book Demo, Reply, etc.) */
.cta-type-badge {
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-size: var(--font-xs);
    font-weight: 600;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}


/* Field text — used in editable copy/strategy fields */
.field-text {
    font-size: var(--font-base);
    color: var(--ink-mid);
    line-height: 1.65;
}

.field-text-bold {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
}

/* Link styled with brand colour */
.brand-link {
    font-size: var(--font-sm);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.brand-link:hover {
    color: var(--ink-mid);
}


/* ================================================================== */
/* STICKY ACTION BAR — fixed to bottom of viewport                     */
/* ================================================================== */

.sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--dune);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.sticky-action-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-6);
}

.sticky-action-form {
    display: flex;
    flex-direction: column;
}

.sticky-action-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.sticky-feedback-input {
    flex: 1;
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-sm);
    outline: none;
    background: var(--bg);
    color: var(--ink);
    transition: border-color 0.15s;
}

.sticky-feedback-input:focus {
    border-color: var(--ink);
    background: var(--surface);
}

.sticky-feedback-input::placeholder {
    color: var(--stone);
}

.sticky-buttons {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.review-submit-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.review-submit-label-loading,
.review-submit-progress {
    display: none;
}

.review-submit-progress {
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--stone);
    font-size: var(--font-sm);
}

.review-inline-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(92, 78, 55, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

form.htmx-request .review-submit-label-default {
    display: none;
}

form.htmx-request .review-submit-label-loading {
    display: inline-flex;
}

form.htmx-request .review-submit-progress {
    display: inline-flex;
}

.btn-approve-sm {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--font-sm);
}

.btn-changes-sm {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--font-sm);
}


/* ================================================================== */
/* COLLAPSIBLE SECTIONS — toggle buttons for expandable content        */
/* ================================================================== */

.detail-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--stone);
    transition: color 0.15s;
}

.detail-toggle:hover {
    color: var(--ink-mid);
}

.detail-toggle .toggle-icon {
    font-size: var(--font-lg);
    color: var(--stone);
    font-weight: 300;
}


/* ================================================================== */
/* COMPACT VARIATIONS — scannable list with expand                     */
/* ================================================================== */

.variation-compact {
    overflow: hidden;
}

.variation-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background 0.15s;
}

.variation-compact-header:hover {
    background: var(--bg);
}

.variation-number-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.variation-oneliner {
    font-size: var(--font-sm);
    color: var(--ink-mid);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================== */
/* FOOTER                                                              */
/* ================================================================== */

.review-footer {
    text-align: center;
    padding: var(--sp-8) 0 var(--sp-6);
    font-size: var(--font-xs);
    color: var(--stone);
    letter-spacing: 0.03em;
}


/* ================================================================== */
/* RESPONSIVE                                                          */
/* ================================================================== */

@media (max-width: 640px) {
    .review-header-inner {
        padding: var(--sp-4) var(--sp-4) 0;
    }

    .client-brand-lockup {
        align-items: flex-start;
        gap: 12px;
    }

    .client-logo-badge {
        min-width: 64px;
        max-width: 128px;
        padding: 8px 12px;
    }

    .client-logo-image {
        max-height: 24px;
        max-width: 104px;
    }

    .step-nav {
        padding: var(--sp-2) var(--sp-4) var(--sp-2);
        gap: var(--sp-1);
        overflow-x: auto;
    }

    .step-pill {
        padding: 3px 10px;
        font-size: var(--font-xs);
    }

    .step-connector {
        width: 12px;
    }

    .phone-frame {
        width: min(100%, 220px);
    }

    .social-feed-header,
    .social-feed-copy-block,
    .social-feed-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .social-feed-engagement {
        padding-left: 14px;
        padding-right: 14px;
    }

    .social-feed-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .social-feed-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .social-feed-cta {
        width: 100%;
    }

    .linkedin-feed-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iframe-container {
        height: 320px;
    }

    .review-card-body {
        padding: var(--sp-3);
    }

    .pull-quote,
    .thesis-highlight {
        padding: var(--sp-4);
    }

    .feedback-actions {
        flex-wrap: wrap;
    }

    /* Sticky bar: stack vertically on mobile */
    .sticky-action-row {
        flex-direction: column;
        gap: 8px;
    }

    .sticky-feedback-input {
        width: 100%;
    }

    .sticky-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .sticky-buttons .btn-approve,
    .sticky-buttons .btn-changes {
        flex: 1;
        justify-content: center;
    }

    /* Variation one-liner: allow wrap on small screens */
    .variation-oneliner {
        white-space: normal;
    }

    /* Campaign nav: stack on mobile */
    .campaign-nav-inner {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
        height: auto;
    }

    /* Campaign list: stack row content vertically */
    .campaign-row-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .campaign-row-status {
        width: 100%;
        justify-content: space-between;
    }

    .campaign-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-new-campaign {
        width: 100%;
        justify-content: center;
    }

    .campaign-main {
        padding: 20px 16px;
    }

    /* Review portal: header stacks vertically */
    .review-header .header-brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Filter pills scroll horizontally */
    .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .filter-pill {
        flex-shrink: 0;
    }

    /* Feedback buttons wrap on mobile */
    .feedback-actions {
        flex-wrap: wrap;
    }

    .feedback-actions .btn-approve,
    .feedback-actions .btn-changes,
    .feedback-actions .btn-comment {
        flex: 1;
        justify-content: center;
        min-width: 100px;
    }

    /* ---------------------------------------------------------- */
    /* TOUCH TARGETS — minimum 44px tap area on mobile            */
    /* ---------------------------------------------------------- */

    /* Action buttons: ensure 44px height */
    .btn-approve,
    .btn-primary,
    .btn-comment,
    .btn-secondary,
    .btn-launch,
    .btn-save,
    .btn-cancel,
    .btn-new-campaign,
    .btn-generate-report,
    .btn-send-slack,
    .btn-copy-report,
    .btn-refresh,
    .ai-generate-btn,
    .ai-accept-btn,
    .ai-cancel-btn,
    .ai-discard-btn {
        min-height: 44px;
    }

    /* Ghost/text buttons: ensure 44px hit area */
    .btn-changes,
    .btn-ghost {
        min-height: 44px;
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    /* Pills and small interactive elements: 44px tap area */
    .filter-pill,
    .step-pill,
    .platform-tag,
    .format-badge,
    .platform-pill {
        min-height: 36px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Image upload / AI action buttons: larger tappable area */
    .image-upload-btn,
    .ai-action-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Copy link button */
    .copy-link-btn {
        min-height: 44px;
        padding: 10px var(--sp-3);
    }

    /* Variation quick links: expand from 32px to 44px */
    .variation-quick-link {
        width: 44px;
        height: 44px;
    }

    /* Platform switcher tabs */
    .platform-switcher-tab {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Sidebar items and channel items */
    .sidebar-item,
    .channel-item {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Status badges in headers: ensure tappable when interactive */
    .status-badge {
        min-height: 32px;
        padding: 6px 12px;
    }
}


/* ================================================================== */
/* CAMPAIGN MANAGEMENT — navigation, cards, progress, forms            */
/* ================================================================== */

/* Top navigation bar */
.campaign-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--dune);
    height: 50px;
}

.campaign-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.campaign-nav-brand {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
}

.campaign-nav-brand em {
    font-style: normal;
    color: var(--ember);
}

.campaign-nav-links {
    display: flex;
    gap: 24px;
}

.campaign-nav-link {
    font-size: var(--font-label);
    font-weight: 500;
    color: var(--stone);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    height: 50px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.campaign-nav-link:hover {
    color: var(--ink);
}

.campaign-nav-link.active {
    color: var(--ink);
    border-bottom-color: var(--ember);
}

/* Campaign main layout */
.campaign-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px;
}

/* Campaign page header */
.campaign-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* New campaign button — ink fill */
.btn-new-campaign {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-md);
    text-decoration: none;
    font-size: var(--font-label);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

.btn-new-campaign:hover {
    background: #2d2b28;
}

/* Filter bar — status filter pills */
.filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--stone);
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-family: inherit;
}

.filter-pill:hover {
    border-color: var(--dune);
    color: var(--ink);
}

/* IMPORTANT: active filter = outline only, NOT filled black */
.filter-pill.active {
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    font-weight: 600;
}

/* Campaign list */
.campaign-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Campaign group — company heading + child rows */
.campaign-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-group-heading {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--stone);
    letter-spacing: 0.01em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dune);
    margin: 0;
}

/* Campaign row */
.campaign-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.campaign-row {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-left: 3px solid var(--dune);
    border-radius: var(--r-md);
    padding: 14px 20px;
    cursor: pointer;
    transition: border-color 0.15s, border-left-color 0.15s, box-shadow 0.15s;
}

/* Status via left border — the entire status signal at a glance */
.campaign-row.is-running {
    border-left-color: var(--ember);
}

.campaign-row.is-strategy_ready {
    border-left-color: var(--dune);
}

.campaign-row.is-assets_ready {
    border-left-color: var(--ember);
}

.campaign-row.is-failed {
    border-left-color: var(--failed-border);
    opacity: 0.7;
}

.campaign-row:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.campaign-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.campaign-row-info {
    flex: 1;
    min-width: 200px;
}

.campaign-row-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Mode pills — ALL use the same quiet grey treatment */
.mode-pill {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--ink-mid);
    border: 1px solid var(--dune);
}

.mode-prospecting {
    background: var(--bg);
    color: var(--ink-mid);
}

.mode-retargeting {
    background: var(--bg);
    color: var(--ink-mid);
}

.campaign-row-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.campaign-row-date {
    font-size: var(--font-xs);
    color: var(--stone);
    min-width: 75px;
    text-align: right;
}

/* Empty state */
.campaign-empty-state {
    text-align: center;
    padding: 80px 20px;
}

.campaign-empty-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px 0;
}

.campaign-empty-text {
    font-size: var(--font-base);
    color: var(--ink-mid);
    margin: 0 0 24px 0;
}

.campaign-empty-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
    margin: 0 auto;
    text-align: left;
}

.campaign-empty-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-sm);
    color: var(--ink-mid);
}

.campaign-empty-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Platform pills — ALL use the same quiet grey pill. Zero colour differentiation. */
.platform-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--font-xs);
    font-weight: 500;
    line-height: 1.6;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.platform-pill-meta,
.platform-pill-linkedin,
.platform-pill-google {
    background: var(--bg);
    color: var(--stone);
}

/* Campaign status badges */
.campaign-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}

.status-queued {
    background: var(--bg);
    color: var(--stone);
}

.status-running {
    background: var(--bg);
    color: var(--stone);
}

.status-strategy-ready {
    background: var(--bg);
    color: var(--stone);
}

.status-assets-ready {
    background: var(--review-bg);
    color: var(--review-text);
    border: 1px solid var(--review-border);
}

.status-failed {
    background: var(--failed-bg);
    color: var(--failed-text);
}

.status-cancelled {
    background: var(--bg);
    color: var(--stone);
}

/* Pulsing dot for active states */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stone);
    animation: pulse-glow 1.5s ease-in-out infinite;
    will-change: opacity;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Progress bar — ink fill, never ember */
.campaign-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--dune);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.campaign-progress-fill {
    height: 100%;
    background: var(--ink);
    border-radius: var(--r-pill);
    transition: width 0.5s ease;
}

/* Animated striped pattern for running campaigns */
.campaign-progress-fill.animated {
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 16px 16px;
    animation: progressStripe 0.8s linear infinite;
    will-change: background-position;
}

@keyframes progressStripe {
    from { background-position: 0 0; }
    to { background-position: 16px 0; }
}

/* Log viewer — dark terminal-style output */
.campaign-log-viewer {
    background: #1a1a2e;
    border-radius: var(--r-md);
    padding: 16px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 12px;
}

.campaign-log-viewer pre {
    margin: 0;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--font-label);
    line-height: 1.5;
    color: #a0aec0;
    white-space: pre-wrap;
    word-break: break-word;
}

.campaign-live-preview {
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    background: var(--surface);
}

.campaign-live-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.campaign-live-preview-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 6px;
}

.campaign-live-preview-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.campaign-live-preview-text {
    margin: 6px 0 0 0;
    max-width: 56ch;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink-mid);
}

.campaign-live-preview-count {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--dune);
    background: var(--bg);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stone);
}

.campaign-live-preview-platform + .campaign-live-preview-platform {
    margin-top: 18px;
}

.campaign-live-preview-platform-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.campaign-live-preview-platform-meta {
    font-size: var(--font-xs);
    color: var(--stone);
}

.campaign-live-preview-variation + .campaign-live-preview-variation {
    margin-top: 14px;
}

.campaign-live-preview-variation-label {
    margin-bottom: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stone);
}

.campaign-live-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.campaign-live-preview-card {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--dune);
    background: var(--surface);
}

.campaign-live-preview-image-link {
    display: block;
    background: var(--bg);
}

.campaign-live-preview-image-link img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: var(--bg);
}

.campaign-live-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}

.campaign-live-preview-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
}

.campaign-live-preview-file {
    font-size: var(--font-xs);
    color: var(--stone);
    word-break: break-word;
}

.campaign-live-preview-empty {
    padding: 16px 18px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--dune);
    background: var(--bg);
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink-mid);
}

@media (max-width: 720px) {
    .campaign-live-preview {
        padding: 16px;
    }

    .campaign-live-preview-header {
        flex-direction: column;
    }

    .campaign-live-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Platform toggle — checkbox styled as pill */
.platform-toggle input[type="checkbox"] {
    display: none;
}

.platform-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    color: var(--ink-mid);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

.platform-toggle input:checked + .platform-toggle-label {
    background: var(--dune-light);
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 500;
}

.platform-toggle-label:hover {
    border-color: var(--dune);
}

/* Mode toggle — radio styled as card */
.mode-toggle {
    flex: 1;
    cursor: pointer;
}

.mode-toggle input[type="radio"],
.mode-toggle input[type="checkbox"] {
    display: none;
}

.mode-toggle-label {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    transition: background-color 0.15s, border-color 0.15s;
}

.mode-toggle input:checked + .mode-toggle-label {
    background: var(--dune-light);
    border-color: var(--ink);
}

.mode-toggle-label strong {
    font-size: var(--font-sm);
    color: var(--ink);
}

.mode-desc {
    font-size: var(--font-xs);
    color: var(--stone);
    margin-top: 2px;
}


/* ================================================================
   Reports page — generate and send Slack performance reports
   ================================================================ */

.report-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-card {
    padding: 20px 24px;
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.report-card-company {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px 0;
}

.report-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-card-age {
    font-size: var(--font-xs);
    color: var(--stone);
}

.btn-generate-report {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--font-sm);
    font-weight: 500;
    color: #fff;
    background: var(--ink);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-generate-report:hover {
    background: #2d2b28;
}

/* Report result (after generation) */
.report-result {
    width: 100%;
}

.report-message-box {
    background: var(--bg);
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.report-message-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

.report-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-copy-report,
.btn-send-slack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--font-xs);
    font-weight: 500;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    border: 1px solid var(--dune);
    background: var(--surface);
    color: var(--ink-mid);
}

.btn-copy-report:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.btn-copied {
    border-color: var(--stone);
    color: var(--stone);
}

/* ================================================================
   Self Improve dashboard
   ================================================================ */

.self-improve-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.self-improve-summary-card {
    padding: 18px 20px;
}

.self-improve-summary-label,
.self-improve-metric-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--stone);
    margin-bottom: 8px;
}

.self-improve-summary-value,
.self-improve-metric-value {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--ink);
}

.self-improve-summary-note {
    font-size: var(--font-xs);
    color: var(--stone);
    margin-top: 6px;
    line-height: 1.5;
}

.self-improve-card {
    padding: 20px 24px;
}

.self-improve-card-header {
    align-items: flex-start;
}

.self-improve-card-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.self-improve-status-badge,
.self-improve-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}

.self-improve-mode-badge {
    background: var(--bg);
    color: var(--ink-mid);
    border: 1px solid var(--dune);
}

.self-improve-status-draft,
.self-improve-status-live_trial {
    background: var(--dune-light);
    color: var(--ink-mid);
}

.self-improve-status-offline_winner,
.self-improve-status-awaiting_approval {
    background: var(--dune-light);
    color: var(--stone);
}

.self-improve-status-promoted {
    background: var(--dune-light);
    color: var(--ink-mid);
}

.self-improve-status-rejected,
.self-improve-status-rolled_back {
    background: var(--failed-bg);
    color: var(--failed-text);
}

.self-improve-action-row {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.self-improve-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 14px;
}

.self-improve-metric {
    background: var(--bg);
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 14px 16px;
}

.self-improve-summary-box,
.self-improve-report-box {
    margin-top: 12px;
}

.self-improve-notes {
    margin-top: 12px;
}

.self-improve-notes-list {
    margin: 8px 0 0 0;
    padding-left: 18px;
    color: var(--ink-mid);
}

.self-improve-notes-list li + li {
    margin-top: 6px;
}

.self-improve-success {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--dune);
    background: var(--dune-light);
    color: var(--stone);
    font-size: var(--font-sm);
}

.btn-send-slack {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn-send-slack:hover {
    background: #2d2b28;
}

/* Slack send status badges */
.report-slack-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--font-xs);
    font-weight: 500;
    border-radius: var(--r-pill);
}

.report-slack-success {
    background: var(--dune-light);
    color: var(--stone);
}

.report-slack-error {
    background: var(--failed-bg);
    color: var(--failed-text);
}

/* Error state */
.report-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--failed-bg);
    border: 1px solid var(--failed-border);
    border-radius: var(--r-md);
    color: var(--failed-text);
    font-size: var(--font-sm);
}

.report-dismiss {
    background: none;
    border: none;
    color: var(--stone);
    cursor: pointer;
    font-size: var(--font-xs);
    padding: 4px 8px;
}

.report-dismiss:hover {
    color: var(--ink-mid);
}


/* ================================================================== */
/* AI EDITING — Rewrite with AI / Regenerate with AI                   */
/* ================================================================== */

.ai-action-container {
    margin-top: 8px;
}

.ai-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--dune);
    border-radius: var(--r-pill);
    color: var(--stone);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}

.ai-action-btn:hover {
    background: var(--dune-light);
    border-color: var(--dune);
    color: var(--ink);
}

.ai-action-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ai-feedback-form {
    margin-top: 10px;
    animation: fadeInUp 0.2s ease-out;
}

.ai-feedback-form textarea {
    width: 100%;
    min-height: 60px;
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px solid var(--dune);
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.ai-feedback-form textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--dune-light);
}

.ai-feedback-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.ai-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.ai-generate-btn:hover {
    background: #2d2b28;
}

.ai-cancel-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    color: var(--ink-mid);
    font-size: var(--font-xs);
    cursor: pointer;
}

.ai-cancel-btn:hover {
    background: var(--bg);
}

/* Spinner shown during AI generation */
.ai-spinner {
    display: none !important;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    color: var(--stone);
    font-size: var(--font-sm);
}

.ai-spinner .spinner-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--dune);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

.htmx-request .ai-spinner {
    display: flex !important;
}

.htmx-request .ai-feedback-form {
    display: none;
}

.htmx-request .ai-action-btn,
.htmx-request .ai-action-buttons {
    display: none;
}

.ai-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* AI preview card — shows rewritten copy or regenerated image */
.ai-preview-card {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg);
    border: 1.5px solid var(--ink);
    border-radius: var(--r-lg);
    animation: fadeInUp 0.25s ease-out;
}

.ai-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-preview-field {
    margin-bottom: 10px;
}

.ai-preview-field .sub-label {
    font-size: 0.65rem;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.ai-preview-field p {
    font-size: var(--font-sm);
    color: var(--ink);
    line-height: 1.5;
    white-space: pre-line;
}

.ai-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dune);
}

.ai-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.ai-accept-btn:hover {
    background: #2d2b28;
}

.ai-discard-btn {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    color: var(--ink-mid);
    font-size: var(--font-xs);
    cursor: pointer;
}

.ai-discard-btn:hover {
    background: var(--failed-bg);
    border-color: var(--failed-border);
    color: var(--failed-text);
}

/* Score badge for image regeneration */
.ai-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 600;
}

.ai-score-badge.score-good {
    background: var(--dune-light);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.ai-score-badge.score-ok {
    background: var(--review-bg);
    color: var(--review-text);
    border: 1px solid var(--review-border);
}

.ai-score-badge.score-low {
    background: var(--failed-bg);
    color: var(--failed-text);
    border: 1px solid var(--failed-border);
}

/* Error message */
.ai-error-message {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--failed-bg);
    border: 1px solid var(--failed-border);
    border-radius: var(--r-md);
    color: var(--failed-text);
    font-size: var(--font-sm);
    animation: fadeInUp 0.2s ease-out;
}

.ai-success-message {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--passed-bg);
    border: 1px solid var(--passed-border);
    border-radius: var(--r-md);
    color: var(--passed-text);
    font-size: var(--font-sm);
    animation: fadeInUp 0.2s ease-out;
}

/* Image preview within the AI preview card */
.ai-image-preview img {
    width: 100%;
    border-radius: var(--r-lg);
    display: block;
    margin-bottom: 10px;
}

/* Document ad carousel */
.document-carousel {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: 14px;
}

.document-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.document-carousel-count,
.document-carousel-position,
.document-carousel-link {
    font-size: var(--font-xs);
    color: var(--stone);
}

.document-carousel-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-carousel-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--dune);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.document-carousel-btn:hover {
    background: var(--dune-light);
}

.document-carousel-viewport {
    overflow: hidden;
    border-radius: var(--r-lg);
}

.document-carousel-track {
    display: flex;
    transition: transform 0.22s ease;
    will-change: transform;
}

.document-carousel-slide {
    min-width: 100%;
    flex: 0 0 100%;
}

.document-carousel-slide img {
    width: 100%;
    display: block;
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
}

.document-carousel-link {
    margin-top: 10px;
    text-align: center;
}


/* ================================================================== */
/* PLATFORM EXPLAINER (collapsible "why do these ads look like this") */
/* ================================================================== */

.platform-explainer summary::-webkit-details-marker { display: none; }
.platform-explainer[open] .explainer-chevron { transform: rotate(180deg); }
.platform-explainer summary:hover { background: var(--bg); border-radius: var(--r-lg); }

/* Explainer bullet items (emoji + text rows inside platform explainer) */
.explainer-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.explainer-icon {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}


/* ================================================================== */
/* GOOGLE SEARCH AD REVIEW — SERP preview, enhanced headlines          */
/* ================================================================== */

/* --- Google page-level navigation --- */

.google-variation-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.google-variation-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--dune);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    min-width: max-content;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.google-variation-chip:hover {
    border-color: #D4D0CA;
    background: var(--bg);
    transform: translateY(-1px);
}

.google-variation-chip.google-status-needs_fix {
    border-color: var(--failed-border);
    background: var(--failed-bg);
}

.google-variation-chip.google-status-warning {
    border-color: var(--review-border);
    background: var(--review-bg);
}

.google-variation-chip-number {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.google-variation-chip-text {
    font-size: var(--font-xs);
    font-weight: 600;
}

.google-variation-chip-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--failed-bg);
    color: var(--failed-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.google-variation-chip-badge-soft {
    background: var(--review-bg);
    color: var(--review-text);
}

.google-review-card.google-status-needs_fix {
    border-color: var(--failed-border);
}

.google-review-card.google-status-warning {
    border-color: var(--review-border);
}


/* --- Google summary strip --- */

.google-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    background: var(--surface);
    margin-bottom: 24px;
}

.google-summary-strip.google-status-needs_fix {
    border-color: var(--failed-border);
    background: var(--failed-bg);
}

.google-summary-strip.google-status-warning {
    border-color: var(--review-border);
    background: var(--review-bg);
}

.google-summary-intent {
    min-width: 220px;
    max-width: 440px;
}

.google-summary-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--dune);
    color: var(--stone);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.google-summary-theme {
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
}

.google-summary-subtitle {
    margin-top: 4px;
    font-size: var(--font-sm);
    color: var(--ink-mid);
}

.google-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.google-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--dune);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-mid);
}

.google-summary-pill.is-danger {
    color: var(--failed-text);
    border-color: var(--failed-border);
    background: var(--failed-bg);
}

.google-summary-pill.is-warning {
    color: var(--review-text);
    border-color: var(--review-border);
    background: var(--review-bg);
}

.google-summary-pill.is-success {
    color: var(--ink-mid);
    border-color: var(--dune);
    background: var(--dune-light);
}

.google-summary-pill.is-muted {
    color: var(--stone);
}


/* --- Google workbench layout --- */

.google-workbench-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "preview"
        "copy";
    gap: 24px;
}

.google-workbench-preview {
    grid-area: preview;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.google-workbench-copy {
    grid-area: copy;
    min-width: 0;
}

.google-copy-workbench {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.google-client-explainer {
    padding: 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    background: linear-gradient(180deg, rgba(245, 242, 236, 0.8) 0%, #ffffff 100%);
}

.google-client-explainer .sub-label {
    margin-bottom: 6px;
}

.google-client-explainer-title {
    margin: 0;
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

.google-client-explainer-copy {
    margin: 8px 0 0 0;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink-mid);
}

.google-copy-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.google-row-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.google-foldout {
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.google-foldout > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
}

.google-foldout > summary::-webkit-details-marker {
    display: none;
}

.google-foldout[open] > summary {
    border-bottom: 1px solid var(--dune);
}

.google-foldout-summary {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--stone);
}

.google-foldout-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.google-feedback-foldout {
    margin-top: 24px;
}

.google-empty-state {
    border-radius: var(--r-lg);
    border: 1px dashed var(--dune);
    padding: 18px;
    background: var(--bg);
}

.google-empty-title {
    margin: 0 0 6px 0;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--ink);
}

.google-empty-copy {
    margin: 0;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink-mid);
}


/* --- Google preview panel --- */

.google-preview-panel {
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    background: var(--surface);
    padding: 18px;
}

.serp-preview-section {
    margin-bottom: 28px;
}

.serp-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.serp-preview-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--stone);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.google-preview-note {
    margin: 0;
    font-size: var(--font-xs);
    line-height: 1.5;
    color: var(--ink-mid);
    max-width: 30rem;
}

.google-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--dune);
    background: var(--bg);
    color: var(--ink-mid);
}

.google-status-chip-needs_fix {
    background: var(--failed-bg);
    color: var(--failed-text);
    border-color: var(--failed-border);
}

.google-status-chip-warning {
    background: var(--review-bg);
    color: var(--review-text);
    border-color: var(--review-border);
}

.google-status-chip-healthy {
    background: var(--dune-light);
    color: var(--ink-mid);
    border-color: var(--dune);
}

.serp-preview {
    background: #ffffff;
    border: 1px solid var(--dune);
    border-radius: 18px;
    padding: 20px 24px;
    font-family: arial, sans-serif;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

.serp-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ink);
}

.serp-ad-label {
    font-size: var(--font-label);
    font-weight: 700;
    color: #202124;
    margin-bottom: 6px;
    padding-top: 4px;
}

.serp-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.serp-favicon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dune-light);
    color: var(--ink-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--dune);
}

.serp-url-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.serp-favicon-logo {
    background: rgba(255, 255, 255, 0.98);
    overflow: hidden;
}

.serp-favicon-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.serp-domain {
    font-size: var(--font-md);
    color: #202124;
}

.serp-path {
    font-size: var(--font-sm);
    color: #188038;
    margin-top: 1px;
}

.serp-headline {
    font-size: 20px;
    line-height: 1.3;
    color: #1a0dab;
    margin-bottom: 6px;
}

.serp-description {
    font-size: var(--font-md);
    line-height: 1.58;
    color: #4d5156;
}

.serp-sitelinks-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #ebebeb;
}

.serp-sitelink-item {
    padding: 4px 0;
}

.serp-sitelink-item-title {
    font-size: var(--font-md);
    color: #1a0dab;
    display: block;
    line-height: 1.3;
}

.serp-sitelink-item-desc {
    font-size: var(--font-label);
    color: #4d5156;
    display: block;
    line-height: 1.4;
    margin-top: 1px;
}

.serp-callouts-row {
    margin-top: 8px;
    font-size: var(--font-base);
    color: #4d5156;
    line-height: 1.4;
}


/* --- Google copy rows and support cards --- */

.google-headline-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--dune);
    background: var(--surface);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.google-headline-row:hover {
    border-color: #D4D0CA;
    transform: translateY(-1px);
}

.google-headline-row.pinned {
    border-left: 4px solid var(--ink);
    padding-left: 13px;
}

.google-row-near-limit {
    border-color: var(--review-border);
    background: var(--review-bg);
}

.google-row-over-limit {
    border-color: var(--failed-border);
    background: var(--failed-bg);
}

.google-headline-pos {
    font-size: var(--font-xs);
    color: var(--stone);
    min-width: 20px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
}

.google-headline-content {
    min-width: 0;
}

.google-headline-content .editable-field .field-display {
    padding: 0;
    margin: 0;
    background: transparent;
}

.google-headline-content .editable-field .field-display:hover {
    background: transparent;
}

.google-headline-content .editable-field .field-text-bold,
.google-headline-content .editable-field .field-text {
    font-size: 0.98rem;
    line-height: 1.45;
}

.google-headline-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.google-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ink-mid);
    background: var(--dune-light);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    border: 1px solid var(--dune);
}

.google-cat {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.01em;
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.google-char-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}

.google-char-count.near-limit {
    color: var(--review-text);
}

.google-char-count.over-limit {
    color: var(--failed-text);
}

.google-section-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.google-section-label .sub-label {
    margin-bottom: 0;
}

.google-section-count {
    font-size: var(--font-xs);
    color: var(--stone);
    font-weight: 500;
}

.google-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.google-sitelink-card {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.google-sitelink-card:hover {
    border-color: #D4D0CA;
    transform: translateY(-1px);
}

.google-sitelink-title {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.google-sitelink-desc {
    font-size: var(--font-xs);
    color: var(--ink-mid);
    margin-top: 5px;
    line-height: 1.5;
}

.google-sitelink-url {
    font-size: 0.65rem;
    color: var(--stone);
    margin-top: 6px;
    display: block;
}

.google-extension-card {
    min-height: 100%;
}

.google-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.google-support-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--dune);
    color: var(--ink-mid);
    font-size: 0.72rem;
    font-weight: 600;
}

.google-structured-header {
    margin: 0 0 8px 0;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--stone);
}


/* --- Google responsive --- */

@media (min-width: 980px) {
    .google-workbench-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
        grid-template-areas: "copy preview";
        align-items: start;
    }

    .google-workbench-preview {
        position: sticky;
        top: 112px;
    }
}

@media (max-width: 900px) {
    .google-summary-metrics {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .google-variation-nav {
        gap: 8px;
    }

    .google-summary-strip {
        padding: 16px;
    }

    .google-summary-theme {
        font-size: 1rem;
    }

    .google-preview-panel {
        padding: 14px;
    }

    .serp-preview {
        padding: 16px;
    }

    .serp-headline {
        font-size: 17px;
    }

    .serp-sitelinks-row,
    .google-support-grid {
        grid-template-columns: 1fr;
    }

    .google-headline-row {
        grid-template-columns: 20px 1fr;
        gap: 8px;
        padding: 12px;
    }

    .google-headline-meta {
        grid-column: 2;
        justify-content: flex-start;
    }
}


/* ================================================================== */
/* OPTIMIZATION CARDS + BANNER                                         */
/* ================================================================== */

/* Banner — top-of-page notification bar */
.opt-banner {
    padding: 14px 18px;
    border-radius: var(--r-lg);
    font-size: var(--font-sm);
    line-height: 1.5;
    border: 1px solid var(--dune);
}

.opt-banner-prompt {
    background: var(--dune-light);
    border-color: var(--dune);
}

.opt-banner-info {
    background: var(--bg);
    border-color: var(--dune);
}

.opt-banner-success {
    background: var(--dune-light);
    border-color: var(--dune);
    color: var(--stone);
    font-weight: 500;
}

.opt-banner-error {
    background: var(--failed-bg);
    border-color: var(--failed-border);
    color: var(--failed-text);
}

/* Generate button */
.opt-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.opt-generate-btn:hover {
    background: #2d2b28;
}

/* Push Live button */
.opt-push-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.opt-push-btn:hover {
    background: #2d2b28;
}

/* Suggestion card — inline per-variation */
.opt-card {
    margin-top: 16px;
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.opt-card-high {
    border-left: 3px solid var(--failed-text);
}

.opt-card-medium {
    border-left: 3px solid var(--review-text);
}

.opt-card-low {
    border-left: 3px solid var(--dune);
}

.opt-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--dune);
    flex-wrap: wrap;
}

.opt-card-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
}

/* Priority badges */
.opt-priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.opt-priority-high {
    background: var(--failed-bg);
    color: var(--failed-text);
    border: 1px solid var(--failed-border);
}

.opt-priority-medium {
    background: var(--review-bg);
    color: var(--review-text);
    border: 1px solid var(--review-border);
}

.opt-priority-low {
    background: var(--dune-light);
    color: var(--ink-mid);
    border: 1px solid var(--dune);
}

/* Status badges */
.opt-status-badge {
    margin-left: auto;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.opt-status-applied {
    background: var(--dune-light);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.opt-status-pushed {
    background: var(--dune-light);
    color: var(--ink-mid);
    border: 1px solid var(--dune);
}

/* Card body */
.opt-card-body {
    padding: 12px 14px;
}

.opt-rationale {
    font-size: var(--font-sm);
    color: var(--ink-mid);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Performance evidence chips */
.opt-evidence {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.opt-evidence-item {
    font-size: var(--font-sm);
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--ink-mid);
    border: 1px solid var(--dune);
}

.opt-evidence-low {
    background: var(--failed-bg);
    color: var(--failed-text);
    border-color: var(--failed-border);
}

.opt-evidence-high {
    background: var(--dune-light);
    color: var(--stone);
    border-color: var(--dune);
}

/* Current copy preview */
.opt-current {
    background: var(--bg);
    border-radius: var(--r-sm);
    padding: 10px;
    margin-top: 8px;
}

.opt-current-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.opt-current-text {
    font-size: var(--font-sm);
    color: var(--ink-mid);
    margin-top: 4px;
    line-height: 1.5;
}

/* Card actions — Apply / Skip */
.opt-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--dune);
    background: var(--bg);
}

.opt-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.opt-apply-btn:hover {
    background: #2d2b28;
}

.opt-skip-btn {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--dune);
    background: transparent;
    color: var(--stone);
    font-size: var(--font-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.opt-skip-btn:hover {
    background: var(--dune-light);
    color: var(--ink-mid);
}

/* Inline status messages after apply/skip */
.opt-card-status {
    padding: 10px 14px;
    font-size: var(--font-sm);
    font-weight: 500;
    border-radius: var(--r-lg);
}

.opt-card-applied {
    background: var(--dune-light);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.opt-card-skipped {
    background: var(--bg);
    color: var(--stone);
    border: 1px solid var(--dune);
}

.opt-card-error {
    background: var(--failed-bg);
    color: var(--failed-text);
    border: 1px solid var(--failed-border);
}


/* ================================================================== */
/* VARIATION CARD — three-column review layout                         */
/* ================================================================== */

.variation-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.variation-card.pending {
    border-color: #D4D0CA;
}

.variation-card.approved {
    opacity: 0.75;
}

/* Card header */
.variation-card-header         { background: #FAFAF9; border-bottom: 1px solid var(--dune-light); }
.variation-card-header.approved{ background: var(--bg); }

/* Variation number badge */
.variation-num {
    width: 24px; height: 24px; border-radius: 6px;
    font-size: var(--font-xs); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.variation-num.approved { background: var(--dune-light); color: var(--stone); }
.variation-num.active   { background: var(--ink); color: #fff; }

/* Status badge on card */
.variation-status.approved { background: var(--dune-light); color: var(--stone); }
.variation-status.pending  { background: var(--bg); color: var(--stone); border: 1px solid var(--dune); }

/* Headline inside copy column — the most important text on the card */
.variation-headline {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--ink); line-height: 1.2;
}

/* Field labels inside copy column */
.field-label {
    font-size: var(--font-2xs); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--stone); margin-bottom: 3px;
}

/* Meta cells (CTA, social proof) */
.meta-cell { background: var(--bg); padding: 8px 10px; border-radius: 6px; }

/* Approved state in action column */
.approved-state {
    background: var(--bg); color: var(--stone);
    border: 1px solid var(--dune);
    padding: 10px 0; font-size: var(--font-sm); font-weight: 500;
    border-radius: var(--r-md); text-align: center; width: 100%;
}

/* Creative thumbnails — these are previews of physical objects, they get a shadow */
.creative-thumb img,
.creative-preview {
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    border-radius: 3px;
}

.variation-story-kicker,
.variation-insight-label {
    margin: 0;
    font-size: var(--font-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
}

.variation-insight-card,
.variation-copy-card {
    background: linear-gradient(180deg, #fff 0%, #faf8f4 100%);
    border: 1px solid var(--dune);
    border-radius: 16px;
    padding: 16px;
}

.variation-story-shell {
    display: grid;
    gap: 24px;
}

.variation-admin-workbench {
    display: grid;
    gap: 18px;
}

.variation-admin-copy,
.variation-admin-optimizations {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, #fbf9f5 100%);
    border: 1px solid var(--dune);
    border-radius: 20px;
    padding: 18px;
}

.variation-story-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.variation-story-copy,
.variation-story-preview {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, #fbf9f5 100%);
    border: 1px solid var(--dune);
    border-radius: 20px;
    padding: 18px;
}

.variation-story-label-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.variation-story-intro {
    display: grid;
    gap: 14px;
    margin-top: 10px;
}

.variation-story-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: clamp(1.48rem, 1.7vw, 1.85rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 15ch;
    text-wrap: balance;
}

.variation-story-summary {
    margin: 0;
    max-width: 40ch;
    font-size: 0.95rem;
    line-height: 1.72;
    color: #495463;
}

.variation-support-block {
    margin-top: 20px;
    background: #fff;
    border: 1px solid var(--dune);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.variation-support-title {
    margin: 0 0 10px 0;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
}

.variation-support-list {
    display: grid;
    gap: 10px;
}

.variation-support-row {
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid #eee7de;
}

.variation-support-row:first-child {
    border-top: none;
    padding-top: 0;
}

.variation-support-row:last-child {
    padding-bottom: 0;
}

.variation-support-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
}

.variation-support-value {
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--ink-mid);
}

.placement-preview-shell {
    display: grid;
    gap: 18px;
}

.placement-tab-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: #f6f2eb;
    border: 1px solid var(--dune);
    border-radius: 999px;
}

.placement-tab-btn {
    border: none;
    background: transparent;
    color: var(--stone);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.placement-tab-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.placement-tab-btn:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

.placement-tab-btn.is-active {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.placement-preview-panel {
    display: block;
}

.variation-story-preview {
    padding: 22px;
    box-shadow: 0 16px 34px rgba(28, 25, 23, 0.06);
}


/* ================================================================== */
/* ANALYTICS PAGE                                                      */
/* ================================================================== */

/* Stat cards */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 16px;
}

/* The headline metric (ROAS) — border is the ONLY signal, no ember on the number */
.stat-card.headline { border-color: var(--ink); }
.stat-card .stat-value     { font-family: var(--font-heading-family); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card.headline .stat-value { color: var(--ink); }

/* Performance table */
.perf-table th {
    background: var(--bg); color: var(--stone);
    font-size: var(--font-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.perf-table tr:hover td { background: var(--bg); }
.perf-table td            { font-variant-numeric: tabular-nums; }
.perf-table .roas-high   { color: var(--ink); font-weight: 700; }
.perf-table .roas-mid    { color: var(--ink); font-weight: 500; }
.perf-table .roas-low    { color: var(--stone); }

/* Platform dots — muted warm tones only */
.platform-dot.google   { background: #D4C8B8; }
.platform-dot.linkedin { background: #C8C0D4; }
.platform-dot.meta     { background: #B8C8D8; }


/* ================================================================== */
/* CLIENT REVIEW PAGE — /review/[token]                                */
/* ================================================================== */

/* Time estimate — the hero element */
.time-estimate-number {
    font-family: var(--font-heading-family);
    font-size: 52px; font-weight: 800;
    letter-spacing: -0.05em; color: var(--ember);
    line-height: 0.9;
}

.time-estimate-unit {
    font-family: var(--font-heading-family);
    font-size: 28px; font-weight: 800;
    color: var(--ember); letter-spacing: -0.04em;
}

/* Progress bar — ink fill, never ember */
.progress-track { background: var(--dune); height: 5px; border-radius: 20px; }
.progress-fill  { background: var(--ink); height: 100%; border-radius: 20px; }

/* Progress pips in top bar */
.progress-pip       { background: var(--dune); width: 22px; height: 3px; border-radius: 2px; }
.progress-pip.done  { background: var(--ink); }
.progress-pip.active{ background: var(--ember); }

/* The launch button — only ember element on the page */
.btn-launch-review {
    background: var(--ember); color: #fff; border: none;
    padding: 12px 28px; border-radius: var(--r-md);
    font-family: var(--font-heading-family); font-size: var(--font-md); font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-launch-review:hover {
    background: #D04A09;
}


/* ================================================================== */
/* LAYOUT: SIDEBAR + MAIN CONTENT GRID                                 */
/* ================================================================== */

.layout-with-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: calc(100vh - 56px); /* below nav */
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--dune);
    padding: 24px 0;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.sidebar-section {
    padding: 0 20px;
    margin-bottom: 28px;
}

.sidebar-heading {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 12px;
    padding: 0 8px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--r-md);
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--ink-mid);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sidebar-item:hover {
    background: var(--dune-light);
    color: var(--ink);
}

.sidebar-item.active {
    background: var(--dune-light);
    color: var(--ink);
    font-weight: 600;
}

.sidebar-item-count {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--stone);
    min-width: 20px;
    text-align: right;
}

.sidebar-item.active .sidebar-item-count {
    color: var(--ink-mid);
}

/* Failed count in ember */
.sidebar-item-count.failed {
    color: var(--failed-text);
}

/* Client avatar circles in sidebar */
.sidebar-client {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--ink-mid);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sidebar-client:hover {
    background: var(--dune-light);
    color: var(--ink);
}

.sidebar-client.active {
    background: var(--dune-light);
    color: var(--ink);
    font-weight: 600;
}

.client-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Client avatar colors — cycle through warm palette */
.client-avatar.c0 { background: #E8520A; }
.client-avatar.c1 { background: #7C3AED; }
.client-avatar.c2 { background: #0A66C2; }
.client-avatar.c3 { background: #059669; }
.client-avatar.c4 { background: #D97706; }

@media (max-width: 768px) {
    .layout-with-sidebar {
        grid-template-columns: 1fr;
    }

    /* Admin sidebar: hidden on mobile (admin uses campaign nav) */
    .sidebar:not(.review-sidebar) {
        display: none;
    }

    /* Client review sidebar: convert from fixed side panel to
       horizontal strip above the main content.  Progress + channels
       stay visible; review-time estimate collapses. */
    .review-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--dune);
        padding: var(--sp-4) var(--sp-4) var(--sp-3);
        overflow-y: visible;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3) var(--sp-4);
        align-items: start;
    }

    /* Sidebar sections: reset spacing for horizontal layout */
    .review-sidebar .sidebar-section {
        margin-bottom: 0;
    }

    /* Review time: hide on mobile — the header already shows
       progress segments and the approved count */
    .review-sidebar .sidebar-section:first-child {
        display: none;
    }

    /* Progress section: compact inline display */
    .review-sidebar .sidebar-section:nth-child(2) {
        grid-column: 1 / -1;
    }

    /* Channels + Stage: side by side when both present */
    .review-sidebar .sidebar-heading {
        font-size: var(--font-2xs);
        margin-bottom: 8px;
    }

    /* Stage links: row layout */
    .review-sidebar .sidebar-section:last-child {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}


/* ================================================================== */
/* COLORED PLATFORM PILLS                                              */
/* ================================================================== */

.platform-pill-meta {
    color: #1877F2 !important;
    border-color: #1877F2 !important;
}

.platform-pill-linkedin {
    color: #0A66C2 !important;
    border-color: #0A66C2 !important;
}

.platform-pill-google {
    color: #EA4335 !important;
    border-color: #EA4335 !important;
}

/* Mode pills — subtle background differentiation */
.mode-pill.mode-prospecting {
    background: var(--dune-light);
    color: var(--ink);
    border-color: var(--dune);
}

.mode-pill.mode-retargeting {
    background: #FFF5F0;
    color: #C04000;
    border-color: #FDDCC8;
}


/* ================================================================== */
/* COLORED PLATFORM DOTS (analytics, tables)                           */
/* ================================================================== */

.platform-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.platform-dot.google   { background: #34A853; }
.platform-dot.linkedin { background: #0A66C2; }
.platform-dot.meta     { background: #E8520A; }

/* Larger platform indicator circles for analytics cards */
.platform-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-label);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.platform-indicator.google   { background: #34A853; }
.platform-indicator.linkedin { background: #0A66C2; }
.platform-indicator.meta     { background: #E8520A; }


/* ================================================================== */
/* ANALYTICS PAGE — stat card grid                                     */
/* ================================================================== */

.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .stat-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card .stat-label {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}

.stat-card .stat-detail {
    font-size: var(--font-sm);
    color: var(--stone);
    margin-top: 4px;
}

/* Ember ROAS highlight */
.stat-highlight {
    color: var(--ember) !important;
}

/* Platform summary cards row */
.platform-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.platform-summary-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.platform-summary-card .platform-roas {
    font-family: var(--font-heading-family);
    font-size: var(--font-xl);
    font-weight: 800;
    color: var(--ink);
    margin-left: auto;
}


/* ================================================================== */
/* ADMIN REVIEW CHROME — breadcrumb, header, client indicator          */
/* ================================================================== */

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--stone);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.12s;
}

.breadcrumb-link:hover {
    color: var(--ink);
}

.campaign-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.campaign-review-title h1 {
    font-family: var(--font-heading-family);
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.campaign-review-title .subtitle {
    font-size: var(--font-sm);
    color: var(--stone);
    margin: 4px 0 0 0;
}

.campaign-review-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.client-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--dune);
    border-radius: var(--r-pill);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
}

.client-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34A853;
}


/* ================================================================== */
/* CLIENT REVIEW SIDEBAR                                               */
/* ================================================================== */

.review-sidebar {
    padding: 32px 24px;
}

.review-sidebar .sidebar-section {
    padding: 0;
}

.review-time-number {
    font-family: var(--font-heading-family);
    font-size: 48px;
    font-weight: 800;
    color: var(--ember);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.review-time-unit {
    font-family: var(--font-heading-family);
    font-size: 24px;
    font-weight: 800;
    color: var(--ember);
    letter-spacing: -0.03em;
}

.review-time-desc {
    font-size: var(--font-sm);
    color: var(--stone);
    margin-top: 4px;
}

.review-progress-counter {
    font-family: var(--font-heading-family);
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.review-progress-total {
    font-size: var(--font-lg);
    font-weight: 500;
    color: var(--stone);
}

.review-progress-bar {
    height: 6px;
    background: var(--dune);
    border-radius: 20px;
    margin-top: 8px;
    overflow: hidden;
}

.review-progress-fill {
    height: 100%;
    background: var(--ink);
    border-radius: 20px;
    transition: width 0.3s ease;
}

.review-progress-legend {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: var(--font-xs);
    color: var(--stone);
}

.review-progress-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.review-progress-legend-dot.approved { background: var(--ink); }
.review-progress-legend-dot.pending  { background: var(--dune); }

.channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: var(--font-base);
    color: var(--ink-mid);
    text-decoration: none;
    transition: color 0.12s;
}

.channel-item:hover { color: var(--ink); }

.channel-item .channel-status {
    margin-left: auto;
    font-size: var(--font-sm);
    color: var(--stone);
}

.channel-item .channel-status.done {
    color: var(--ink);
}


/* ================================================================== */
/* ANALYTICS CONTROLS BAR                                              */
/* ================================================================== */

.analytics-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.analytics-controls select,
.analytics-controls input[type="number"] {
    padding: 8px 12px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    font-size: var(--font-sm);
    background: var(--surface);
    color: var(--ink);
}

.analytics-controls .btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s;
}

.analytics-controls .btn-refresh:hover {
    background: var(--dune-light);
}

/* Performance table in parchment design */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.analytics-table th {
    background: var(--bg);
    color: var(--stone);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--dune);
}

.analytics-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dune-light);
    color: var(--ink-mid);
    font-variant-numeric: tabular-nums;
}

.analytics-table tr:hover td {
    background: var(--bg);
}

.analytics-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.analytics-table .roas-high {
    color: var(--ember);
    font-weight: 700;
}


/* ================================================================== */
/* FOCUS VISIBLE — keyboard-accessible focus rings for all interactive */
/* elements. Uses :focus-visible so mouse clicks stay clean.          */
/* ================================================================== */

.btn-approve:focus-visible,
.btn-primary:focus-visible,
.btn-changes:focus-visible,
.btn-ghost:focus-visible,
.btn-comment:focus-visible,
.btn-secondary:focus-visible,
.btn-launch:focus-visible,
.btn-save:focus-visible,
.btn-cancel:focus-visible,
.btn-new-campaign:focus-visible,
.btn-generate-report:focus-visible,
.btn-copy-report:focus-visible,
.btn-send-slack:focus-visible,
.btn-refresh:focus-visible,
.ai-action-btn:focus-visible,
.ai-generate-btn:focus-visible,
.ai-cancel-btn:focus-visible,
.ai-accept-btn:focus-visible,
.ai-discard-btn:focus-visible,
.image-upload-btn:focus-visible,
.copy-link-btn:focus-visible,
.retry-link:focus-visible,
.filter-pill:focus-visible,
.step-pill:focus-visible,
.sidebar-item:focus-visible,
.sidebar-client:focus-visible,
.channel-item:focus-visible,
.campaign-row-link:focus-visible,
.campaign-nav-link:focus-visible,
.breadcrumb-link:focus-visible,
.brand-link:focus-visible,
.variation-compact-header:focus-visible,
.detail-toggle:focus-visible,
.internal-strategy-toggle:focus-visible,
.lp-editor-toggle:focus-visible,
.platform-toggle-label:focus-visible,
.mode-toggle-label:focus-visible,
.platform-switcher-tab:focus-visible,
.variation-quick-link:focus-visible,
.google-variation-chip:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Invert focus ring on dark backgrounds (buttons with ink fill, phone frame) */
.btn-approve:focus-visible,
.btn-primary:focus-visible,
.btn-launch:focus-visible,
.btn-save:focus-visible,
.btn-new-campaign:focus-visible,
.btn-generate-report:focus-visible,
.btn-send-slack:focus-visible,
.ai-generate-btn:focus-visible,
.ai-accept-btn:focus-visible {
    outline-color: var(--dune);
}

/* Form inputs already have :focus styles via border-color.
   Add a matching :focus-visible ring for consistency. */
.form-input:focus-visible,
.editable-field textarea:focus-visible,
.editable-field input[type="text"]:focus-visible,
.ai-feedback-form textarea:focus-visible,
.feedback-expand textarea:focus-visible,
.sticky-feedback-input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -1px;
}


/* ================================================================== */
/* PLATFORM SWITCHER TAB — replaces inline onmouseover/onmouseout     */
/* ================================================================== */

.platform-switcher-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--r-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--dune);
    background: transparent;
    color: var(--ink);
    transition: background-color 0.15s, border-color 0.15s;
}

.platform-switcher-tab:hover {
    background: var(--dune-light);
}

.platform-switcher-tab.active {
    border-color: var(--ink);
    background: var(--dune-light);
}


/* ================================================================== */
/* VARIATION QUICK-LINK — replaces inline onmouseover/onmouseout      */
/* ================================================================== */

.variation-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--dune-light);
    color: var(--ink);
    font-size: var(--font-xs);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--dune);
    transition: background-color 0.15s, transform 0.15s;
}

.variation-quick-link:hover {
    background: var(--dune);
    transform: translateY(-1px);
}


/* ================================================================== */
/* IMAGE LAB (ported from style.css with design-system tokens)         */
/* ================================================================== */

.image-lab-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.image-lab-meta-card {
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: 20px;
}

.image-lab-meta-card .card-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stone);
    margin-bottom: 4px;
}

.image-lab-meta-card .card-value {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--ink);
}

.image-lab-meta-card .card-detail {
    font-size: var(--font-sm);
    color: var(--ink-mid);
    margin-top: 4px;
}

.image-lab-list {
    display: grid;
    gap: 20px;
}

.image-lab-case {
    display: grid;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--dune);
    border-radius: var(--r-lg);
    padding: 20px;
}

.image-lab-case-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.image-lab-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--ink);
}

.image-lab-chip-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.image-lab-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--r-pill);
    background: var(--dune-light);
    color: var(--ink-mid);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.image-lab-note,
.image-lab-status,
.image-lab-error {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: var(--font-sm);
}

.image-lab-note {
    background: var(--info-bg);
    color: var(--info-text);
}

.image-lab-status {
    background: var(--passed-bg);
    color: var(--passed-text);
}

.image-lab-error {
    background: var(--failed-bg);
    color: var(--failed-text);
}

.image-lab-previews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.image-lab-preview {
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 14px;
    background: var(--dune-light);
    display: grid;
    gap: 10px;
}

.image-lab-preview img {
    width: 100%;
    display: block;
    border-radius: var(--r-sm);
    border: 1px solid var(--dune);
    background: var(--surface);
}

.image-lab-preview-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-lab-path {
    font-size: var(--font-xs);
    color: var(--stone);
    word-break: break-all;
}

.image-lab-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--dune);
    border-radius: var(--r-sm);
    color: var(--stone);
    background: var(--surface);
}

.image-lab-form {
    display: grid;
    gap: 10px;
}

.image-lab-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
}

.image-lab-textarea {
    min-height: 360px;
    width: 100%;
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 14px;
    font-size: var(--font-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.5;
    resize: vertical;
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
}

.image-lab-textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.image-lab-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.image-lab-actions button {
    padding: 9px 16px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    font-size: var(--font-sm);
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s;
}

.image-lab-actions button:hover {
    background: var(--brand-hover);
}

.image-lab-helper {
    font-size: var(--font-xs);
    color: var(--stone);
}

/* Platform badges (ported from style.css for review_publish page) */
.platform-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.platform-badge.google,
.badge-google { background: var(--info-bg); color: var(--info-text); }
.platform-badge.meta,
.badge-meta { background: var(--info-bg); color: var(--info-text); }
.platform-badge.linkedin,
.badge-linkedin { background: var(--info-bg); color: var(--info-text); }

/* Copy link row (used in publish and campaign detail) */
.copy-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.copy-link-value {
    flex: 1;
    background: var(--dune-light);
    border: 1px solid var(--dune);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-xs);
    word-break: break-all;
    color: var(--ink-mid);
}

.copy-link-btn-sm {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.copy-link-btn-sm:hover {
    background: var(--brand-hover);
}

@media (min-width: 980px) {
    .variation-story-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
        align-items: start;
    }

    .variation-admin-workbench.variation-admin-workbench-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 720px) {
    .variation-story-copy,
    .variation-story-preview {
        padding: 16px;
        border-radius: 18px;
    }

    .variation-story-title {
        max-width: none;
        font-size: 1.6rem;
    }

    .placement-tab-list {
        width: 100%;
        justify-content: space-between;
    }

    .placement-tab-btn {
        flex: 1 1 0;
        text-align: center;
    }

}


/* ================================================================== */
/* REDUCED MOTION — respect user preference for less animation        */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .review-content,
    .ai-feedback-form,
    .ai-preview-card,
    .ai-error-message,
    .saved-label {
        animation: none;
    }

    .review-card,
    .btn-approve, .btn-primary,
    .btn-changes, .btn-ghost,
    .btn-comment, .btn-secondary,
    .btn-launch, .btn-save, .btn-cancel,
    .filter-pill, .step-pill,
    .sidebar-item, .sidebar-client,
    .campaign-row, .form-input, .form-input-sm,
    .btn-submit, .btn-save, .btn-action, .btn-action-secondary,
    .btn-ghost, .access-check,
    .editable-field textarea,
    .editable-field input[type="text"],
    .ai-action-btn, .image-upload-btn,
    .copy-link-btn, .platform-switcher-tab,
    .variation-quick-link,
    .campaign-progress-fill {
        transition: none;
    }

    .pulse-dot,
    .launch-spinner,
    .campaign-progress-fill.animated {
        animation: none;
    }
}