/* ============================================================
   Wizard Step Counter — ui-refresh two-tier header
   All rules are scoped under body.ui-refresh to guarantee zero
   impact on the legacy experience.
   All colour / surface values come exclusively from tokens.css;
   no literal hex values or surface-tone-specific selectors here.
   ============================================================ */

/* ===== Outer container ===== */
/* overflow must stay visible: Tier 2's secondary slot hosts ButtonDropdown
   menus (Add Tracks) and Bootstrap 3 dropdowns render inline, so a clip here
   would swallow them. Nothing needs clipping — .wsc-header paints no
   background of its own; the rounded surface is .wsc-steps-cluster. */
body.ui-refresh .wsc-header {
    border-radius: var(--radius-md);
    overflow: visible;
    margin: var(--space-5) 0;
}

/* ===== Tier 1 — step indicator row ===== */
body.ui-refresh .wsc-tier1 {
    padding: var(--space-4) 0;
    display: flex;
    align-items: center;
}

/* Step cluster: wraps all step items + separators.
   Starts invisible (but laid out, so the header keeps its height) until
   wizard-step-counter.js has measured the row and applied the condensed
   state — this prevents a flash of the expanded/clipped row before the
   condense decision is made. The cluster is then revealed via `--ready`
   with a soft fade. The fallback animation reveals it anyway after a short
   delay if JS never runs (or errors), so it can't stay hidden. */
body.ui-refresh .wsc-steps-cluster {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 4px;
    gap: 0;
    opacity: 0;
    animation: wsc-cluster-reveal 1ms linear 0.5s forwards;
}

body.ui-refresh .wsc-steps-cluster--ready {
    opacity: 1;
    animation: none;
    transition: opacity var(--transition-fast) ease-out;
}

@keyframes wsc-cluster-reveal {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-refresh .wsc-steps-cluster--ready {
        transition: none;
    }
}

/* Individual step item wrapper */
body.ui-refresh .wsc-step__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px 6px 10px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background var(--transition-fast);
}

body.ui-refresh a.wsc-step__inner {
    cursor: pointer;
}

body.ui-refresh .wsc-step--complete .wsc-step__inner {
    background: transparent;
}

body.ui-refresh .wsc-step--complete a.wsc-step__inner:hover {
    background: var(--bg-subtle);
}

body.ui-refresh .wsc-step--active .wsc-step__inner {
    background: var(--accent-primary);
    padding-right: 16px;
}

body.ui-refresh .wsc-step--future span.wsc-step__inner {
    background: transparent;
    cursor: default;
}

/* Step number / check badge (circular) */
body.ui-refresh .wsc-step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-family), sans-serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

body.ui-refresh .wsc-step--complete .wsc-step__badge {
    background: var(--accent-primary);
    color: var(--fg-on-accent);
    font-size: 11px;
}

body.ui-refresh .wsc-step--active .wsc-step__badge {
    background: var(--bg-surface);
    color: var(--fg-default);
}

body.ui-refresh .wsc-step--future .wsc-step__badge {
    background: var(--bg-subtle);
    color: var(--fg-muted);
    border: 1px solid var(--border-default);
}

/* Step text label */
body.ui-refresh .wsc-step__label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

body.ui-refresh .wsc-step--complete .wsc-step__label {
    color: var(--fg-default);
}

body.ui-refresh .wsc-step--active .wsc-step__label {
    color: var(--fg-on-accent);
}

body.ui-refresh .wsc-step--future .wsc-step__label {
    color: var(--fg-muted);
}

/* Chevron separator between steps */
body.ui-refresh .wsc-step__sep {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    color: var(--fg-muted);
    font-size: 11px;
    flex-shrink: 0;
}

/* ===== Tier 2 — sub-toolbar ===== */
body.ui-refresh .wsc-tier2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-default);
}

/* Left side: optional context label + secondary controls */
body.ui-refresh .wsc-tier2__secondary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Page-scoped actions in the Tier 2 left slot (Create Page, Add Tracks) line up
   with the wsc-btn group opposite them: the base .btn rule sets height but not
   box-sizing, so a bordered anchor and a ButtonDropdown toggle both need
   pinning. Same fix as .subpage-head .setup-actions in components.css. */
body.ui-refresh .wsc-tier2__secondary > .btn,
body.ui-refresh .wsc-tier2__secondary > .btn-group > .btn {
    box-sizing: border-box;
    height: var(--btn-height);
}

/* "Previewing" label */
body.ui-refresh .wsc-context-label {
    font-family: var(--font-family), sans-serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-muted);
    white-space: nowrap;
}

/* Right side: action buttons */
body.ui-refresh .wsc-tier2__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ===== Wizard action buttons ===== */
/* Base button — resets Bootstrap, sets shared geometry */
body.ui-refresh .wsc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--btn-height);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

body.ui-refresh .wsc-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

body.ui-refresh .wsc-btn:disabled,
body.ui-refresh .wsc-btn[aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — filled accent (purple by default, user-themeable) */
body.ui-refresh .wsc-btn--primary {
    background: var(--accent-primary);
    color: var(--fg-on-accent);
    border: 1px solid transparent;
}

body.ui-refresh .wsc-btn--primary:hover,
body.ui-refresh .wsc-btn--primary:focus {
    background: var(--accent-hover);
    color: var(--fg-on-accent);
    text-decoration: none;
}

/* Secondary — outlined accent (border + text use accent, transparent bg) */
body.ui-refresh .wsc-btn--secondary {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

body.ui-refresh .wsc-btn--secondary:hover,
body.ui-refresh .wsc-btn--secondary:focus {
    background: var(--accent-subtle);
    color: var(--accent-on-tint);
    border-color: var(--accent-primary);
    text-decoration: none;
}

/* Tertiary — neutral ghost (outline with default border, default text) */
body.ui-refresh .wsc-btn--tertiary {
    background: var(--bg-surface);
    color: var(--fg-default);
    border: 1px solid var(--border-default);
}

body.ui-refresh .wsc-btn--tertiary:hover,
body.ui-refresh .wsc-btn--tertiary:focus {
    background: var(--bg-subtle);
    color: var(--fg-default);
    text-decoration: none;
}

/* Danger modifier: layers over a variant (e.g. `wsc-btn wsc-btn--primary
   wsc-btn--danger`) for destructive confirm actions such as a final delete
   step in a wizard. Declared after the variant rules so equal-specificity
   class selectors resolve in the danger modifier's favor. */
body.ui-refresh .wsc-btn--danger {
    background: var(--danger-primary);
    color: var(--fg-on-accent);
    border-color: transparent;
}

body.ui-refresh .wsc-btn--danger:hover,
body.ui-refresh .wsc-btn--danger:focus {
    background: var(--danger-primary);
    filter: brightness(0.9);
    color: var(--fg-on-accent);
    text-decoration: none;
}

/* ===== Condensed state =====
   When the step row can't fit its labels, the cluster gets the
   `--condensed` modifier (added by wizard-step-counter.js when the row
   overflows). Completed/upcoming steps collapse to just their badge
   circle; the active step always keeps its label so the user never
   loses their place. Collapsed steps expose their label via `title`. */
body.ui-refresh .wsc-steps-cluster--condensed .wsc-step--complete .wsc-step__label,
body.ui-refresh .wsc-steps-cluster--condensed .wsc-step--future .wsc-step__label {
    display: none;
}

body.ui-refresh .wsc-steps-cluster--condensed .wsc-step--complete .wsc-step__inner,
body.ui-refresh .wsc-steps-cluster--condensed .wsc-step--future .wsc-step__inner {
    padding: 6px 8px;
}

/* ===== Narrow / split-screen responsive behaviour =====
   No-JS fallback: at ≤ 640 px always collapse non-active labels even
   if wizard-step-counter.js hasn't run (or ResizeObserver is missing). */
@media (max-width: 640px) {
    body.ui-refresh .wsc-step--complete .wsc-step__label,
    body.ui-refresh .wsc-step--future .wsc-step__label {
        display: none;
    }

    body.ui-refresh .wsc-step--complete .wsc-step__inner,
    body.ui-refresh .wsc-step--future .wsc-step__inner {
        padding: 6px 8px;
    }

    /* Sub-toolbar wraps: secondary controls stack above action buttons */
    body.ui-refresh .wsc-tier2 {
        gap: var(--space-3);
    }
}