/*
 * Wizard design tokens — mirrored from docs/orchestrator/assets/mockups/tokens.css so the
 * unified-campaign wizard (Flow 2) matches the approved mockups verbatim.
 *
 * Imported by Campaigns/Wizard/CampaignCreate.vue (the wizard shell) at the
 * non-scoped level so every child step inherits these CSS variables.
 */

.wizard-root {
    --n-0: #ffffff; --n-25: #fbfaf9; --n-50: #f6f4f2; --n-100: #eeebe7;
    --n-200: #dedad4; --n-300: #c4bfb8; --n-400: #9b958d; --n-500: #706b64;
    --n-600: #4f4b45; --n-700: #36332e; --n-800: #201e1b; --n-900: #14161a;

    --p-50: #fdf2f0; --p-100: #fadad4; --p-200: #f2ada3; --p-300: #e8796c;
    --p-400: #dd5244; --p-500: #c93a2b; --p-600: #b3281a; --p-700: #942014;
    --p-800: #731a10; --p-900: #541912;

    --ink: #14161a;

    --ok-50: #e8f5ee; --ok-500: #1a7f4e; --ok-700: #0f5633;
    --warn-50: #fdf3df; --warn-500: #b78414; --warn-700: #8a6010;
    --err-50: #fbe9e7; --err-500: #c23826; --err-700: #8a2618;

    --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --sh-1: 0 1px 2px rgba(17, 20, 26, .04), 0 1px 1px rgba(17, 20, 26, .03);
    --sh-2: 0 2px 4px rgba(17, 20, 26, .05), 0 1px 2px rgba(17, 20, 26, .04);
    --sh-3: 0 8px 16px rgba(17, 20, 26, .06), 0 2px 4px rgba(17, 20, 26, .04);

    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 999px;

    color: var(--n-800);
    font-family: var(--f-sans);
}

/* Shared visual primitives used inside scoped <style> blocks via :deep() or
 * via direct class application on plain HTML nodes inside .wizard-root. */
.wizard-root .w-card {
    background: var(--n-0);
    border: 1px solid var(--n-100);
    border-radius: var(--r-md);
    padding: 20px;
    box-shadow: var(--sh-1);
}
.wizard-root .w-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}
.wizard-root .w-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--n-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.wizard-root .w-card-sub {
    font-size: 12px;
    color: var(--n-500);
    margin: 0;
}
.wizard-root .w-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--n-700);
    margin-bottom: 6px;
}
.wizard-root .w-help {
    font-size: 11px;
    color: var(--n-500);
    margin: 6px 0 0;
}
.wizard-root .w-error {
    font-size: 11px;
    color: var(--err-700);
    margin-top: 4px;
    font-family: var(--f-sans);
}
.wizard-root .w-input,
.wizard-root .w-select,
.wizard-root .w-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: inherit;
    background: var(--n-0);
    color: var(--n-900);
    transition: border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-sizing: border-box;
}
.wizard-root .w-input:focus,
.wizard-root .w-select:focus,
.wizard-root .w-textarea:focus {
    outline: none;
    border-color: var(--p-500);
    box-shadow: 0 0 0 3px var(--p-50);
}
/* claude-task--006 AC-14 — the targeting pickers (Countries / Cities /
   Exclude) wrap a borderless text input inside a `.chip-input` container.
   Their inner inputs already drop the native outline (scoped CSS), but the
   container carried no focus treatment, so Chrome rendered its default blue
   ring on the focused input. Mirror the rust ring used on .w-input here so
   no wizard field ever shows the native blue outline. */
.wizard-root .chip-input:focus-within {
    outline: none;
    border-color: var(--p-500);
    box-shadow: 0 0 0 3px var(--p-50);
}
/* The inner input drops BOTH the native outline AND the @tailwindcss/forms
   focus ring. The forms plugin paints a blue-600 (#2563eb) box-shadow ring on
   [type='text']:focus-visible — outline:none alone doesn't touch it, so a blue
   ring rendered inside our rust container ring. Kill the box-shadow too; the
   container's :focus-within rust ring is the only focus affordance we want. */
.wizard-root .chip-input input:focus,
.wizard-root .chip-input input:focus-visible {
    outline: none;
    box-shadow: none;
}
.wizard-root .w-field {
    margin-bottom: 16px;
}
.wizard-root .w-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.wizard-root .w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--n-200);
    background: var(--n-0);
    color: var(--n-800);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}
.wizard-root .w-btn:hover:not(:disabled) {
    background: var(--n-50);
}
.wizard-root .w-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.wizard-root .w-btn-primary {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.wizard-root .w-btn-primary:hover:not(:disabled) {
    background: var(--n-800);
}
.wizard-root .w-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}
.wizard-root .w-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--n-600);
}
.wizard-root .w-btn-ghost:hover:not(:disabled) {
    background: var(--n-50);
    color: var(--n-900);
}
.wizard-root .w-link {
    color: var(--p-700);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}
.wizard-root .w-link:hover {
    color: var(--p-800);
    text-decoration: underline;
}
.wizard-root .w-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--f-mono);
}
.wizard-root .w-badge-neutral { background: var(--n-100); color: var(--n-700); }
.wizard-root .w-badge-primary { background: var(--p-50); color: var(--p-700); }
.wizard-root .w-badge-ok { background: var(--ok-50); color: var(--ok-700); }
.wizard-root .w-badge-warn { background: var(--warn-50); color: var(--warn-700); }
.wizard-root .w-badge-err { background: var(--err-50); color: var(--err-700); }

/* Stepper — pill row, ink-bg on active, red number bubble. */
.wizard-root .w-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wizard-root .w-stepper .w-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    color: var(--n-500);
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
.wizard-root .w-stepper .w-step .w-n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--n-100);
    color: var(--n-600);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
}
.wizard-root .w-stepper .w-step.is-active {
    background: var(--ink);
    color: #fff;
}
.wizard-root .w-stepper .w-step.is-active .w-n {
    background: var(--p-500);
    color: #fff;
}
.wizard-root .w-stepper .w-step.is-done {
    color: var(--ok-700);
}
.wizard-root .w-stepper .w-sep {
    width: 12px;
    height: 1px;
    background: var(--n-200);
    flex-shrink: 0;
}

/* Chip filter used in targeting + headlines. */
.wizard-root .w-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--n-100);
    color: var(--n-700);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 500;
}
.wizard-root .w-chip.w-chip-exclude {
    background: var(--n-50);
    color: var(--n-600);
    border: 1px dashed var(--n-300);
}
.wizard-root .w-chip .w-chip-x {
    color: var(--n-500);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 0;
}
.wizard-root .w-chip .w-chip-x:hover {
    color: var(--n-900);
}

/* Banner — info / warn / err. */
.wizard-root .w-banner {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.wizard-root .w-banner-info { background: var(--p-50); color: var(--p-700); }
.wizard-root .w-banner-ok { background: var(--ok-50); color: var(--ok-700); }
.wizard-root .w-banner-warn { background: var(--warn-50); color: var(--warn-700); }
.wizard-root .w-banner-err { background: var(--err-50); color: var(--err-700); }

/* Kicker / lede / page title. */
.wizard-root .w-kicker {
    font-size: 11px;
    color: var(--p-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin: 0 0 4px;
}
.wizard-root .w-h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--n-900);
}
.wizard-root .w-lede {
    color: var(--n-600);
    font-size: 14px;
    max-width: 56ch;
    margin: 0 0 24px;
    line-height: 1.5;
}