/* Mystify Developer Portal - UI components.
 * Vendored from the Mystify Design System hi-fi handoff. Composes on
 * tokens.css. Section ordering follows the design's portal.css. */


/* =====================================================================
   APP SHELL
===================================================================== */

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

main#app-root {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.loading-shell {
    padding: 60px 24px;
    text-align: center;
    color: var(--fg-muted);
}

a {
    color: var(--accent-hover);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-out);
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Icons - lucide-style SVG painted via mask so they inherit currentColor. */
.icon {
    display: inline-block;
    background: currentColor;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}


/* =====================================================================
   TOP BAR
===================================================================== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    height: 52px;
}

.topbar__left { display: flex; align-items: center; gap: 22px; }
.topbar__right { display: flex; align-items: center; gap: 12px; }

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-strong);
    font-weight: 600;
    text-decoration: none;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand img { height: 24px; display: block; }
.topbar__brand-wordmark {
    /* Mask-image wordmark: SVG paths are `fill="currentColor"` so they
     * carry no embedded colour; the consumer (here) drives the tint via
     * `background`. We paint a multi-stop brand gradient through the
     * mask so the wordmark reads as a vivid ramp -- mirrors the
     * original three-shade purple gradient, retoned into orange.
     * Width/height are explicit because mask-image can't derive them
     * from the SVG viewBox the way `<img>` does. */
    display: inline-block;
    width: 122px;   /* preserves the source 155x28 aspect at h=22 */
    height: 22px;
    background: var(--gradient-brand);
    -webkit-mask: url("/static/assets/logo-wordmark.svg") no-repeat center / contain;
            mask: url("/static/assets/logo-wordmark.svg") no-repeat center / contain;
    transition: filter var(--dur-hover);
}
.topbar__brand:hover .topbar__brand-wordmark {
    filter: brightness(1.08);
}
.topbar__nav { display: flex; align-items: center; gap: 4px; }

.topbar__navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--fg-muted);
    font-size: var(--fs-13);
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
}
.topbar__navlink:hover {
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    text-decoration: none;
}
.topbar__navlink--active {
    color: var(--color-text-strong);
    background: var(--color-surface-2);
}
.topbar__navlink .icon { width: 14px; height: 14px; }

.topbar__workspace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    color: var(--fg-muted);
    cursor: default;
}
.topbar__workspace-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF8A55, #E85510);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar__workspace strong { color: var(--color-text-strong); font-weight: 500; }

/* Modal - generic centered dialog with backdrop. Used by the
 * change-password flow today; reusable for any future "this is a
 * focused action, dim the rest" interaction. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
.modal__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 24px 48px -16px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}
.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 12px;
}
.modal__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
    margin: 0;
}
.modal__close {
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.modal__close:hover {
    color: var(--color-text-strong);
    background: var(--color-surface-2);
}
.modal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 22px 22px;
}
.modal__lede {
    margin: 0;
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.55;
}
.modal__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-strong);
    font-family: var(--font-mono);
    margin-bottom: 6px;
}
.modal__hint {
    display: block;
    margin-top: 6px;
    color: var(--fg-dim);
    font-size: 11.5px;
}
.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.modal__actions .btn { padding: 9px 14px; font-size: 13px; }

/* Account dropdown - wraps the workspace chip + the popover panel. The
 * chip itself is the trigger; clicking it toggles ``hidden`` on the
 * panel. JS adds ``account-menu--open`` on the wrapper while open so
 * the caret can flip via CSS without juggling inline styles. */
.account-menu {
    position: relative;
}
.account-menu__trigger {
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
}
.account-menu__trigger:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-3, var(--color-surface-2));
}
.account-menu__caret {
    background: currentColor;
    color: var(--fg-dim);
    margin-left: 4px;
    transition: transform var(--dur-hover) var(--ease-out);
}
.account-menu--open .account-menu__caret {
    transform: rotate(180deg);
    color: var(--color-text-strong);
}
.account-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 14px 32px -12px rgba(0, 0, 0, 0.55);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-menu__panel[hidden] { display: none; }
.account-menu__head {
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-menu__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-strong);
}
.account-menu__email {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-menu__item {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--dur-hover) var(--ease-out),
                color var(--dur-hover) var(--ease-out);
}
.account-menu__item:hover {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
}
.account-menu__item .icon {
    background: currentColor;
    color: var(--fg-muted);
}
.account-menu__item:hover .icon {
    color: var(--color-text-strong);
}


/* =====================================================================
   WORKSPACE - module rail + canvas grid
===================================================================== */

.wizard-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}


/* =====================================================================
   MODULE RAIL (left)
===================================================================== */

.wizard-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 20px 16px 16px;
    gap: 16px;
}

.rail__head { display: flex; flex-direction: column; gap: 10px; }

.rail__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
}

.rail__overall { display: flex; flex-direction: column; gap: 8px; }

.rail__overall-row { display: flex; justify-content: space-between; align-items: baseline; }

.rail__overall-pct {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
}

.rail__overall-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}

.rail__overall-bar {
    height: 4px;
    background: var(--ink);
    border-radius: 2px;
    overflow: hidden;
}

.rail__overall-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--aurora-teal));
    border-radius: 2px;
    transition: width 400ms var(--ease-out);
}

.rail__modules { display: flex; flex-direction: column; gap: 6px; }

.rail__group-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-dim);
    font-weight: 600;
    padding: 8px 8px 4px;
}

.mod {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-hover) var(--ease-out),
                border-color var(--dur-hover) var(--ease-out);
    align-items: center;
    position: relative;
}
.mod:hover { background: var(--color-surface-2); text-decoration: none; }

.mod--active {
    background: var(--accent-bg);
    border-color: var(--accent-border);
}
.mod--active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.mod--locked { opacity: 0.6; }
.mod--configured .mod__icon-box { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.mod--in_progress .mod__icon-box { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-hover); }
.mod--skipped .mod__icon-box { background: var(--color-surface-2); border-color: var(--color-border); color: var(--fg-muted); }
.mod--locked .mod__icon-box { background: var(--color-surface-2); border-color: var(--color-border); color: var(--fg-dim); }

/* When a user marks an optional module not applicable (e.g. answers "no"
 * to the gating decision inside the module), the row stays clickable -
 * they can re-enter and change their mind - but visually steps back:
 * dashed border, dimmed, no progress bar, "Not needed" badge instead of
 * any status badge (rendered by sidebar.ts). */
.mod--not_applicable {
    border: 1px dashed var(--color-border);
    background: transparent;
    opacity: 0.7;
}
.mod--not_applicable:hover {
    opacity: 1;
    background: var(--color-surface-2);
}
.mod--not_applicable .mod__icon-box {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--fg-muted);
    filter: grayscale(1);
}
.mod--not_applicable .mod__title       { color: var(--fg-muted); }
.mod--not_applicable .mod__status-chev { color: var(--fg-dim); }
/* Opted-out rows keep the progress bar visible (rendered full-width +
 * gray) so the row stays the same height as its neighbours - the old
 * hide-the-meta-entirely approach broke the rail's vertical rhythm.
 * The ``N/M`` count is dropped server-side via the markup; there's no
 * denominator to show for a module the user explicitly skipped. */
.mod--not_applicable .mod__progress-mini {
    background: var(--color-surface-2);
}
.mod--not_applicable .mod__progress-mini-fill {
    /* !important guards against ``.mod--configured`` colouring a row
     * that ends up flipped to not-applicable later. */
    background: var(--fg-dim) !important;
    opacity: 0.5;
}

.mod__icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mod__icon-box .icon { width: 16px; height: 16px; }

.mod__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Status badge sits on its own row above the title, flush-right.
 * ``min-height`` reserves the slot even when the row has no badge
 * (mandatory + not_started state) so titles stay vertically aligned
 * across the rail as statuses change. */
.mod__badge-row {
    display: flex;
    justify-content: flex-end;
    min-height: 18px;
}
.mod__badge-row .badge { flex-shrink: 0; }

.mod__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.005em;
    /* Single line - longer section titles ellipsis-truncate rather than
     * wrap to a second line, so the row height stays stable across all
     * sections. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mod__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.mod__progress-mini {
    height: 3px;
    flex: 1;
    background: var(--ink);
    border-radius: 999px;
    overflow: hidden;
    min-width: 40px;
}
.mod__progress-mini-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 300ms var(--ease-out);
}
.mod--configured .mod__progress-mini-fill { background: var(--ok); }

.mod__progress-text {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-dim);
}

.mod__status-chev {
    color: var(--fg-dim);
    width: 16px;
    height: 16px;
    align-self: center;
}
.mod--active .mod__status-chev { color: var(--accent-hover); }


/* nested step list shown under the active section in the module rail */

.sidebar-section__steps { list-style: none; margin: 0; padding: 0; }

.sidebar-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 18px;
    border-radius: 6px;
    color: var(--fg);
    font-size: 12px;
    text-decoration: none;
    position: relative;
    transition: background var(--dur-hover) var(--ease-out),
                color var(--dur-hover) var(--ease-out);
}
.sidebar-step:hover {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
    text-decoration: none;
}
.sidebar-step--active {
    background: var(--accent-bg);
    color: var(--color-text-strong);
}
.sidebar-step--active::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.sidebar-step--locked { color: var(--fg-dim); }
.sidebar-step--completed .sidebar-step__icon { color: var(--ok); }
.sidebar-step--active .sidebar-step__icon { color: var(--accent-hover); }
.sidebar-step__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-step__icon .icon { width: 12px; height: 12px; }
.sidebar-step__title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}
.sidebar-step__optional-tag {
    font-size: 9px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}


/* =====================================================================
   CANVAS (right) - backdrop gradient + chrome + stage
===================================================================== */

.wizard-main {
    overflow: hidden;
    position: relative;
    /* Transparent base so the ambient aurora layer (rendered behind #app
     * by ambient.js) shows through the work area. The radial gradient is
     * left in as a soft topbar-meets-canvas accent. */
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, rgba(255, 106, 44, 0.22), transparent 70%);
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: none;
    min-height: 0;
}

.canvas__chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.canvas__chrome-mod {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.canvas__chrome-mod-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--accent-hover);
    border: 1px solid var(--accent-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.canvas__chrome-mod-icon .icon { width: 16px; height: 16px; }

.canvas__chrome-mod-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }

.canvas__chrome-mod-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canvas__chrome-mod-eta {
    font-size: 11px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
}

.canvas__chrome-spacer { flex: 1; }

.canvas__chrome-steps {
    display: flex;
    gap: 6px;
    align-items: center;
}

.canvas__chrome-step-dot {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--dur-hover),
                border-color var(--dur-hover),
                width var(--dur-state);
    display: block;
}
.canvas__chrome-step-dot--done { background: var(--ok); border-color: var(--ok-border); }
.canvas__chrome-step-dot--active {
    background: var(--accent);
    border-color: var(--accent);
    width: 36px;
}
.canvas__chrome-step-dot--skipped { background: transparent; border-style: dashed; }

.canvas__chrome-counter {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    margin-left: 8px;
}

/* stage - scrolling step container */

.stage {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 36px 32px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}
.stage__inner {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stage::-webkit-scrollbar-track,
.wizard-sidebar::-webkit-scrollbar-track {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.015));
}


/* =====================================================================
   STEP CARD - body that fills the stage
===================================================================== */

.step-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .step-card--enter-next { animation: stepEnterNext 280ms var(--ease-out); }
    .step-card--enter-prev { animation: stepEnterPrev 280ms var(--ease-out); }
}

@keyframes stepEnterNext {
    0%   { opacity: 0; transform: translateX(28px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes stepEnterPrev {
    0%   { opacity: 0; transform: translateX(-28px); }
    100% { opacity: 1; transform: translateX(0); }
}

.step-card__intro { display: flex; flex-direction: column; gap: 8px; }

.step-card__pre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
}

.step-card__pre-num {
    color: var(--accent-hover);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    padding: 2px 8px;
    border-radius: 999px;
}

.step-card h1 {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

.step-card__lede {
    font-size: 17px;
    color: var(--fg);
    line-height: 1.55;
    text-wrap: pretty;
    margin: 0;
}

.step-card__body {
    font-size: 14px;
    color: var(--fg);
    line-height: 1.6;
}
.step-card__body p { margin: 0 0 10px; color: var(--fg-muted); text-wrap: pretty; }
.step-card__body p:last-child { margin-bottom: 0; }
.step-card__body code, .step-card__body__inline-code {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-text-strong);
    background: transparent;
    padding: 0;
}

.step-card__locked-notice {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    color: var(--fg-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.step-card__locked-notice h2 {
    margin: 0;
    color: var(--warn);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-card__locked-notice h2 .icon { width: 16px; height: 16px; }
.step-card__locked-notice code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
}


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

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-surface-2);
    color: var(--fg-muted);
    border-color: var(--color-border);
}
.badge .icon { width: 11px; height: 11px; }
.badge--ok       { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-border); }
.badge--fail     { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-border); }
.badge--warn     { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.badge--info     { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge--pending  { background: var(--color-surface-2); color: var(--fg-muted); border-color: var(--color-border); }
.badge--locked   { background: transparent; color: var(--fg-dim);   border-color: var(--color-border); }
.badge--mandatory{ background: var(--accent-bg); color: var(--accent-hover); border-color: var(--accent-border); }
.badge--optional { background: transparent; color: var(--fg-dim);   border-color: var(--color-border); }
.badge--skipped  { background: transparent; color: var(--fg-muted); border-color: var(--color-border); border-style: dashed; }
.badge--kind {
    background: transparent;
    color: var(--fg-muted);
    border-color: var(--color-border);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 10px;
    font-weight: 600;
}

/* legacy "section-badge" - used in the rail; matches .badge sizing */
.section-badge { /* alias preserved for old call sites */
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--color-surface-2);
    color: var(--fg-muted);
}
.section-badge--ok     { background: var(--ok-bg); color: var(--ok); }
.section-badge--hidden { background: transparent; color: var(--fg-dim); }


/* =====================================================================
   BUTTONS
===================================================================== */

.btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    transition: background var(--dur-hover) var(--ease-out),
                border-color var(--dur-hover) var(--ease-out),
                color var(--dur-hover) var(--ease-out);
    white-space: nowrap;
}
.btn .icon, button .icon { width: 14px; height: 14px; }

button:hover:not(:disabled),
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
button:active:not(:disabled),
.btn--primary:active:not(:disabled) { background: var(--accent-press); }
button:disabled, .btn:disabled {
    background: var(--color-surface-2);
    color: var(--fg-dim);
    cursor: not-allowed;
    border-color: var(--color-border);
}

.btn--primary { background: var(--accent); color: #fff; }

.btn--secondary, button.secondary {
    background: var(--color-surface);
    color: var(--fg);
    border-color: var(--color-border);
}
.btn--secondary:hover:not(:disabled),
button.secondary:hover:not(:disabled) {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
}

.btn--ghost {
    background: transparent;
    color: var(--fg-muted);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--color-surface);
    color: var(--color-text-strong);
}

.btn--danger, button.danger {
    background: transparent;
    color: var(--fail);
    border-color: var(--fail-border);
}
.btn--danger:hover:not(:disabled),
button.danger:hover:not(:disabled) { background: var(--fail-bg); }

.btn--sm { padding: 6px 11px; font-size: 12px; }
.btn--lg { padding: 12px 22px; font-size: 14px; }


/* =====================================================================
   FIELDS / INPUTS
===================================================================== */

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label-row { display: flex; gap: 6px; align-items: baseline; }
.field__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-strong);
    font-family: var(--font-mono);
}
.field__required { font-family: var(--font-mono); color: var(--accent); font-size: 11px; }
.field__hint {
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.4;
    margin-top: 2px;
}
.field__hint code {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-text-strong);
}

.input, input[type="text"], input[type="password"], input:not([type]) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--color-text-strong);
    font-family: var(--font-sans);
    font-size: 13px;
    transition: border-color var(--dur-hover), box-shadow var(--dur-hover);
    width: 100%;
}
.input--mono { font-family: var(--font-mono); font-size: 12.5px; }

.input:focus, input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.input-affix { display: flex; align-items: stretch; gap: 6px; }
.input-affix .input { flex: 1; }


/* =====================================================================
   PANELS / CODE
===================================================================== */

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}
.panel__head h2 {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-muted);
    margin: 0;
    font-family: var(--font-mono);
}
.panel__head-icon { color: var(--fg-muted); display: inline-flex; }
.panel__head-icon .icon { width: 14px; height: 14px; }
.panel__head-spacer { flex: 1; }
.panel__body { padding: 14px; }
.panel__body p { margin: 0 0 10px; font-size: 14px; color: var(--fg); line-height: 1.6; }
.panel__body p:last-child { margin-bottom: 0; }

pre, .code {
    margin: 0;
    padding: 14px 18px;
    font-family: var(--font-mono);
    /* Disable programming ligatures on code blocks. Geist Mono (and the
       JetBrains Mono / SF Mono fallbacks) collapse `=>`, `===`, `!=`,
       `<=` etc. into single glyph ligatures by default, which makes
       arrows / equality operators ambiguous when readers are pattern-
       matching against a wire spec ("is that `==` or `===`?"). Both
       `liga` and `calt` go: discretionary ligatures and contextual
       alternates are both involved in OpenType ligature substitution. */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fg);
    overflow-x: auto;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

code, kbd, samp {
    font-family: var(--font-mono);
}
:where(p, li, td, span) > code,
.step-card__body code,
.step-view__description code {
    font-weight: 500;
    color: var(--color-text-strong);
    background: transparent;
    padding: 0;
}

.t-comment { color: var(--fg-dim); }
.t-kw      { color: var(--accent-hover); }
.t-str     { color: var(--ok); }
.t-num     { color: var(--warn); }
.t-key     { color: var(--info); }


/* =====================================================================
   DECISION OPTIONS
===================================================================== */

.decision-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decision-form h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0;
}

.decision-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.decision-row--three  { grid-template-columns: 1fr 1fr 1fr; }
.decision-row--single { grid-template-columns: 1fr; }

.decision-opt {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.decision-opt:hover { border-color: var(--color-border-strong); }
.decision-opt--selected { border-color: var(--accent); background: var(--accent-bg); }
/* Optimistic-update pending state: card flipped to selected on click
 * before the server confirms. Subtle pulse so the user knows the click
 * registered AND a request is in flight. */
.decision-opt--pending {
    animation: decision-opt-pending 1.2s ease-in-out infinite;
}
@keyframes decision-opt-pending {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-bg-strong, rgba(255, 138, 85, 0.0)); }
    50%      { box-shadow: 0 0 0 4px var(--accent-bg-strong, rgba(255, 138, 85, 0.15)); }
}

/* Mystify-pinned option (e.g. cart_withdrawal_required): visible so the
 * operator knows it exists, but greyed-out + non-clickable. */
.decision-opt--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--color-surface);
}
.decision-opt--disabled:hover { border-color: var(--color-border); }
.decision-opt__hint {
    font-size: 12px;
    color: var(--fg-dim);
    font-style: italic;
    line-height: 1.5;
}

.decision-opt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.decision-opt__head-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.decision-opt__label { font-weight: 600; font-size: 14px; color: var(--color-text-strong); }
.decision-opt__value { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.decision-opt__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.55; }

.decision-opt__check {
    align-self: flex-start;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--color-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all var(--dur-hover);
    flex-shrink: 0;
}
.decision-opt__check .icon { width: 12px; height: 12px; }
.decision-opt--selected .decision-opt__check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}


/* =====================================================================
   DIAGRAM (request flow - optional, available for impl steps)
===================================================================== */

.diagram {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 1.2fr) 1fr;
    align-items: stretch;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.diagram__node {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.diagram__node-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
}
.diagram__node-name { font-size: 13px; font-weight: 500; color: var(--color-text-strong); }
.diagram__node-mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
.diagram__arrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    min-width: 0;
}
.diagram__arrow-label {
    align-self: center;
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-hover);
    background: var(--color-surface);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--accent-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diagram__arrow-line-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.diagram__arrow-line { height: 1px; background: var(--color-border-strong); flex: 1; }
.diagram__arrow-head { color: var(--color-border-strong); margin-left: -6px; width: 16px; height: 16px; }


/* =====================================================================
   MERMAID DIAGRAM (```mermaid fences in step + protocol markdown)
   Shared by the wizard step view and the MPC library page. Card matches
   `.diagram` above; the participant/note fills come from the token-driven
   theme in lib/mermaid-render.ts.
===================================================================== */

.mermaid {
    /* Top rhythm is left to the host — `.mpc-body > * + *` and the wizard's
       paragraph margins already space their own blocks, and both load rules
       that would win over a `margin-top` set here anyway. */
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* mermaid stamps `width:100%; max-width:<intrinsic>px` on the <svg>, so a
       diagram scales down to the column instead of overflowing. This is the
       backstop for a diagram type that opts out of that, and it keeps the
       overflow inside the card so the page body never scrolls sideways. */
    overflow-x: auto;
    text-align: center;
}

.mermaid > svg {
    max-width: 100%;
    height: auto;
    /* `text-align: center` on the card only centres a diagram narrower than
       the column; `inline-block` is what makes the svg respond to it. */
    display: inline-block;
    vertical-align: middle;
}

/* mermaid stamps `data-processed` on each node it converts to SVG. Until then
   the div still holds the raw fence text, which would flash as prose — more
   visible now that the render waits on webfonts. `.mermaid--error` is the
   render-failure escape hatch set by renderMermaidIn: keep those visible, since
   showing the source beats showing nothing. */
.mermaid:not([data-processed]):not(.mermaid--error) {
    visibility: hidden;
}

.mermaid--error {
    border-color: var(--fail-border);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--fg-muted);
    text-align: left;
    white-space: pre-wrap;
}


/* =====================================================================
   VERIFIER PANEL + RESULT
===================================================================== */

.verifier-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.verifier-block h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0;
}

.verifier-block__placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.verifier-block__placeholder h2 {
    color: var(--warn);
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
}
.verifier-block__placeholder p {
    color: var(--fg-muted);
    font-size: 13px;
    line-height: 1.5;
}
.verifier-block__placeholder p code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
}

.verifier-input { display: flex; flex-direction: column; gap: 5px; }
.verifier-input label { display: flex; flex-direction: column; gap: 4px; }
.verifier-input__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-strong);
    font-family: var(--font-mono);
}
.verifier-input__description {
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.4;
}

.verifier-block__run { align-self: flex-start; }

.verifier-prior {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--fg-muted);
}
.verifier-prior--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-border); }
.verifier-prior--fail { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-border); }

.verifier-result-container { display: flex; flex-direction: column; gap: 12px; }

/* `.vresult` is the polished version of the verifier-result card. */
.verifier-result, .vresult {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.verifier-result--pass, .vresult--pass {
    background: var(--ok-bg);
    border-color: var(--ok-border);
}
.verifier-result--fail, .vresult--fail {
    background: var(--fail-bg);
    border-color: var(--fail-border);
}
.verifier-result--transport {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}

.vresult__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.vresult__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--fg-muted);
}
.vresult__icon .icon { width: 18px; height: 18px; }
.vresult--pass .vresult__icon { background: rgba(61, 214, 138, 0.16); color: var(--ok); }
.vresult--fail .vresult__icon { background: rgba(255, 94, 115, 0.16); color: var(--fail); }
.vresult__title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vresult__status { font-weight: 600; font-size: 14px; color: var(--color-text-strong); }
.vresult__summary { font-size: 12px; color: var(--fg-muted); }
.vresult__chip {
    background: var(--color-surface);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.vresult__checks {
    padding: 6px 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}
.vresult__check, .check {
    display: grid;
    grid-template-columns: 18px 200px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--color-border);
    list-style: none;
}
.vresult__check:last-child, .check:last-child { border-bottom: 0; }
.vresult__check-icon, .check__icon {
    font-family: var(--font-mono);
    text-align: center;
}
.check--pass .check__icon, .vresult__check--pass .vresult__check-icon { color: var(--ok); }
.check--fail .check__icon, .vresult__check--fail .vresult__check-icon { color: var(--fail); }
.vresult__check-name, .check__name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}
.vresult__check-msg, .check__message {
    font-size: 12px;
    color: var(--fg);
}
.check__details {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.check__details summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 11px;
}
.check__details pre {
    margin-top: 8px;
    font-size: 11px;
}

.vresult--pass-fresh::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 0% 50%,
                rgba(255, 106, 44, 0.32) 0%,
                rgba(61, 217, 207, 0.16) 40%,
                transparent 70%);
    animation: aurora 700ms ease-out forwards;
}
@keyframes aurora {
    0%   { opacity: 0; transform: translateX(-6%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(0); }
}


/* =====================================================================
   MOD-INTRO - module landing card (shown on #/section/<id>).
   Vendored from the design's portal.css mod-intro block; was missed in
   the initial port which made the page render as plain text.
===================================================================== */

.mod-intro {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.mod-intro::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse 50% 50% at center,
                rgba(255, 106, 44, 0.10), transparent 70%);
    pointer-events: none;
}

.mod-intro__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-bg);
    color: var(--accent-hover);
    border: 1px solid var(--accent-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.mod-intro__icon .icon { width: 28px; height: 28px; }

.mod-intro__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    position: relative;
}

.mod-intro__lede {
    font-size: 16px;
    color: var(--fg-muted);
    line-height: 1.55;
    margin: 0;
    position: relative;
}

.mod-intro__stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    position: relative;
}

.mod-intro__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mod-intro__stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
}

.mod-intro__stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-strong);
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}


/* =====================================================================
   EMBED STEP - snippet + live preview iframe + complete button
   Used by Section C's widget embedding step. The snippet panel shows
   the iframe HTML the operator pastes into their site; the preview
   panel renders the actual widget inline so they can validate the
   embed flow before marking the step done.
===================================================================== */

.embed-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.embed-step__snippet pre.code {
    margin: 0;
    max-height: 240px;
    overflow: auto;
    border: none;
    border-radius: 0;
    font-size: 12px;
    line-height: 1.55;
}
.embed-step__snippet code { color: var(--fg); }

.embed-step__snippet-hint {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.55;
}
.embed-step__snippet-hint code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
}
.embed-step__snippet-hint--live {
    color: var(--ok);
    display: flex;
    align-items: center;
    gap: 6px;
}

.embed-step__preview-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.embed-step__preview-fields {
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.embed-step__preview-fields .field { gap: 4px; }
.embed-step__preview-fields .field__hint code {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10.5px;
}
.field__optional {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-dim);
    font-weight: 500;
}
.field__optional code {
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg-muted);
    font-size: 10px;
}
@media (max-width: 720px) {
    .embed-step__preview-fields { grid-template-columns: 1fr; }
}

.embed-step__preview-stage {
    /* Empty by default; renderPreviewIframe fills it with the viewport. */
}
.embed-step__preview-hint {
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.55;
    margin: 0;
}
/* W3 round-trip verdict strip below the live preview iframe. */
.embed-step__roundtrip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-13);
    line-height: var(--lh-snug);
}
.embed-step__roundtrip .icon { flex-shrink: 0; margin-top: 2px; }
.embed-step__roundtrip code {
    font-family: var(--font-mono);
    color: var(--fg-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 4px;
}
.embed-step__roundtrip--waiting { color: var(--fg-muted); }
.embed-step__roundtrip--waiting .icon { color: var(--accent); animation: blink 1s infinite; }
.embed-step__roundtrip--ok {
    color: var(--ok);
    border-color: var(--ok-border);
    background: var(--ok-bg);
}
.embed-step__roundtrip--ok .icon { color: var(--ok); }
.embed-step__preview-hint code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11.5px;
}

/* Viewport box for the scaled iframe. Aspect ratio set to match the
 * 1280×900 virtual dimensions so letterboxing on either axis stays
 * minimal. Bounded height so the preview doesn't push the rest of the
 * page off-screen on tall monitors. */
.embed-step__preview-viewport {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.embed-step__preview-iframe {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
}

.embed-step__preview .panel__head .iframe-pane__url {
    /* Truncate long URLs in the panel head. */
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.embed-step__footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}


/* =====================================================================
   TRANSCRIPT STEPS - rich per-step result card (smoke test only)
   Each step is a <details> so the body expands on click; the header is
   the <summary> and stays visible while collapsed.
===================================================================== */

.vresult__checks:has(.transcript-step) {
    /* When the check list is rich transcript steps, reset the legacy
     * dashed-row padding so each card has clean spacing. */
    padding: 8px;
    gap: 6px;
    border-top: none;
}

.transcript-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--fg-dim);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--dur-hover) var(--ease-out);
}
.transcript-step--pass { border-left-color: var(--ok); }
.transcript-step--fail { border-left-color: var(--fail); }

.transcript-step > summary {
    display: grid;
    grid-template-columns: 18px 1fr auto 16px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--dur-hover) var(--ease-out);
}
.transcript-step > summary::-webkit-details-marker { display: none; }
.transcript-step > summary::marker { content: ""; }
.transcript-step > summary:hover { background: var(--color-surface-2); }

.transcript-step__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-dim);
}
.transcript-step--pass .transcript-step__icon { color: var(--ok); }
.transcript-step--fail .transcript-step__icon { color: var(--fail); }

.transcript-step__name-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.transcript-step__name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-strong);
}
.transcript-step__path {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transcript-step__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.transcript-step__chip {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--fg-muted);
    white-space: nowrap;
}
.transcript-step__chip--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-border); }
.transcript-step__chip--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.transcript-step__chip--fail { background: var(--fail-bg); color: var(--fail); border-color: var(--fail-border); }

/* "expected" / "wrong" tags appended to the HTTP-status chip when the
 * check's verdict disagrees with what the raw status code would suggest.
 * 4xx-but-passed = "expected" (operator rejected a duplicate, good);
 * 2xx-but-failed = "wrong" (operator returned success but the body
 * indicated a real bug, like a double credit). */
.transcript-step__chip-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.transcript-step__chip-tag--bad {
    background: rgba(255, 80, 80, 0.18);
}

.transcript-step__chev {
    color: var(--fg-dim);
    transition: transform var(--dur-state) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.transcript-step[open] .transcript-step__chev {
    transform: rotate(180deg);
}

.transcript-step__body {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.transcript-step__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.transcript-step__panel {
    min-width: 0;
}
.transcript-step__panel pre.code {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    border: none;
    border-radius: 0;
    font-size: 11.5px;
    line-height: 1.5;
}
.transcript-step__panel .panel__head {
    padding: 8px 12px;
}

/* Single-column on narrow stages (760px - panel padding ~ <600px content). */
@media (max-width: 720px) {
    .transcript-step__panels {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   IDENTITY FORM (A.1 / A.2 / E.2 single-field forms)
===================================================================== */

.identity-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.identity-form h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0;
}

.identity-form form { display: flex; flex-direction: column; gap: 14px; }
.identity-form label { display: flex; flex-direction: column; gap: 6px; }
.identity-form label > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-strong);
}
.identity-form label > small {
    color: var(--fg-muted);
    font-size: 12px;
    line-height: 1.4;
}
.identity-form label > small code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
}
.identity-form button[type="submit"] { align-self: flex-start; }

.identity-form__secret-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.identity-form__secret-row input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 12px;
}
.identity-form__secret-row button { flex-shrink: 0; }

.identity-form__hint {
    color: var(--fg-muted);
    font-size: 12px;
}


/* =====================================================================
   CONFIGURATION FORM (generic K/V step)
===================================================================== */

.configuration-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.configuration-form h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0;
}
.configuration-form p {
    color: var(--fg-muted);
    font-size: 13px;
    line-height: 1.5;
}
.configuration-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}
.configuration-form hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}
.configuration-form__complete { align-self: flex-start; }

/* =====================================================================
   BANNERS
===================================================================== */

.banner {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--fg);
}
.banner--ok    { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok); }
.banner--error { background: var(--fail-bg); border-color: var(--fail-border); color: var(--fail); }
.banner--warn  { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.banner--muted { background: var(--color-surface-2); border-style: dashed; color: var(--fg-muted); }


/* =====================================================================
   TOASTS - transient bottom-right feedback (design-system alert())
===================================================================== */

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    /* Never let a pile-up or a huge message escape the viewport. */
    max-height: calc(100vh - 40px);
    max-width: calc(100vw - 40px);
    overflow: hidden;
}
.toast {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 360px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--fg);
    font-size: 13px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
    animation: toast-in var(--dur-state) var(--ease-out);
}
.toast__icon { display: inline-flex; flex: 0 0 auto; }
.toast__msg { line-height: var(--lh-snug); overflow-wrap: anywhere; }
.toast--ok    { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok); }
.toast--error { background: var(--fail-bg); border-color: var(--fail-border); color: var(--fail); }
.toast--warn  { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.toast--info  { background: var(--color-surface-3); border-color: var(--color-border); color: var(--fg); }
.toast--leaving { animation: toast-out var(--dur-state) var(--ease-in-out) forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}


/* =====================================================================
   WELCOME / MODULES OVERVIEW (home route, #/)
===================================================================== */

/* The welcome step-card lives inside .stage__inner, so it gets the same
 * 760px max-width treatment as the other step cards. */

.welcome-badge {
    align-self: flex-start;
}
.welcome-badge strong { color: inherit; }

.welcome__title {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.welcome__lede {
    font-size: 18px;
    color: var(--fg-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 660px;
    text-wrap: pretty;
}

.welcome-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.welcome-progress__label {
    font-size: 13px;
    color: var(--fg-muted);
    margin-bottom: 6px;
}
.welcome-progress__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.welcome-progress__bar {
    flex: 1;
    height: 6px;
    background: var(--ink);
    border-radius: 3px;
    overflow: hidden;
}
.welcome-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--aurora-teal));
    border-radius: 3px;
    transition: width 400ms var(--ease-out);
}
.welcome-progress__pct {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-strong);
}

.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.overview-mod {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
}
.overview-mod:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-2);
    text-decoration: none;
}
.overview-mod--locked { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.overview-mod__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.overview-mod__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 12px;
}
.overview-mod__icon .icon { width: 18px; height: 18px; }
.overview-mod--configured .overview-mod__icon {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    color: var(--ok);
}
.overview-mod--in_progress .overview-mod__icon {
    background: var(--accent-bg);
    border-color: var(--accent-border);
    color: var(--accent-hover);
}
.overview-mod__title-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.overview-mod__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.005em;
}
.overview-mod__chev {
    color: var(--fg-dim);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.overview-mod__chev .icon { width: 16px; height: 16px; }
.overview-mod__desc {
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.5;
    margin: 0;
}
.overview-mod__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.overview-mod__progress {
    flex: 1;
    height: 3px;
    background: var(--ink);
    border-radius: 999px;
    overflow: hidden;
}
.overview-mod__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 300ms var(--ease-out);
}
.overview-mod--configured .overview-mod__progress-fill { background: var(--ok); }
.overview-mod__count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-dim);
}


/* =====================================================================
   STEP NAV - sibling of .stage, sits below it in the canvas column
===================================================================== */

.step-nav {
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 30%);
    padding: 18px 32px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.step-nav__inner {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-nav__left { flex: 1; }

/* Inline hint next to a disabled Continue button - small, muted, with an
 * info icon. Helps users see WHY they can't proceed without having to
 * hover the button for the tooltip. */
.step-nav__blocked-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-muted);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.step-nav__blocked-hint .icon {
    width: 12px;
    height: 12px;
    color: var(--warn);
}

/* The stage already has bottom padding (100px) so its last content scrolls
 * above the nav even though nav sits below. With the nav now outside the
 * scroller, tighten the stage's bottom padding so we don't double-pad. */
.wizard-main > .stage { padding-bottom: 40px; }

/* Anchor-styled buttons inherit text-decoration: underline on hover from
 * the global a:hover rule - undo for buttons. */
.step-nav a.btn:hover, .canvas__chrome a.btn:hover { text-decoration: none; }


/* =====================================================================
   STEP VIEW HEADER (legacy - used inside step-card now)
===================================================================== */

.step-view__header { display: contents; }
.step-view__header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.step-view__id {
    font-family: var(--font-mono);
    color: var(--fg-dim);
    font-size: 11px;
}
.step-view__description {
    font-size: 15px;
    color: var(--fg);
    line-height: 1.6;
}
.step-view__description p { margin-bottom: 10px; text-wrap: pretty; }
.step-view__description p:last-child { margin-bottom: 0; }
.step-view__description code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12.5px;
}

/* GFM tables inside step descriptions - same frame as the
   request/response code blocks above them: --color-surface-2 fill,
   --color-border outline, --radius-md outer corners. Inner separators
   are 1px lines of the same border token, drawn only between cells via
   right/bottom borders + a clip on the last column/row so the outer
   radius stays clean. */
.step-view__description .md-table {
    width: 100%;
    margin: 10px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 13px;
    color: var(--fg);
}
.step-view__description .md-table th,
.step-view__description .md-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.step-view__description .md-table th:last-child,
.step-view__description .md-table td:last-child { border-right: 0; }
.step-view__description .md-table tbody tr:last-child td { border-bottom: 0; }
.step-view__description .md-table thead th {
    background: var(--color-surface-3);
    color: var(--fg-strong);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.step-view__description .md-table tbody tr:hover { background: var(--color-surface-3); }
.step-view__description .md-table code {
    /* Cell-scoped `code` keeps the inline-mono look but stays tight so a
       3-4 backtick'd field name per row doesn't push column widths
       around. */
    font-size: 12px;
    padding: 1px 5px;
}

/* Code block paired with a parameter table renders the table behind a
   small (i) icon button in the top-right corner instead of inline.
   ``.code--with-params`` is the same primitive as ``pre, .code`` but
   adds the relative positioning + reserves padding for the button so
   it never overlaps the JSON's first line. */
.step-view__description pre.code.code--with-params {
    position: relative;
    padding-right: 48px;
}
.step-view__description pre.code.code--with-params .code__params-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 120ms ease, border-color 120ms ease,
                background 120ms ease;
}
.step-view__description pre.code.code--with-params .code__params-info:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--color-surface-2);
}
.step-view__description pre.code.code--with-params .code__params-info:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Modal that surfaces the parameter table on (i) click. Wider than the
   confirm modal because parameter tables carry four columns with prose
   restrictions. Reuses the design-system modal__backdrop / modal__card
   primitives + the .md-table from the inline render so the table inside
   the modal styles identically to the (legacy) inline placement. */
.modal--params .modal__card--params {
    max-width: min(960px, 92vw);
    max-height: min(85vh, 720px);
    padding: 0;
    overflow: hidden;
}
.params__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.params__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-strong);
    letter-spacing: 0.01em;
}
.params__close {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 120ms ease, border-color 120ms ease;
}
.params__close:hover {
    color: var(--fg-strong);
    border-color: var(--color-border-strong);
}
.params__body {
    padding: 16px 20px 20px;
    overflow-y: auto;
}
/* The table inside the modal scopes its own copy of the inline rules so
   it doesn't depend on the step-view selector. */
.params__body .md-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 13px;
    color: var(--fg);
}
.params__body .md-table th,
.params__body .md-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.params__body .md-table th:last-child,
.params__body .md-table td:last-child { border-right: 0; }
.params__body .md-table tbody tr:last-child td { border-bottom: 0; }
.params__body .md-table thead th {
    background: var(--color-surface-3);
    color: var(--fg-strong);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.params__body .md-table tbody tr:hover { background: var(--color-surface-3); }
.params__body .md-table code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: transparent;
    padding: 1px 5px;
    font-size: 12px;
}


/* =====================================================================
   SETTINGS / WORKSPACE INSPECTOR
===================================================================== */

.settings-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 40px 80px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
}
.settings-page h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.settings-page h1 .icon { width: 20px; height: 20px; color: var(--accent-hover); }
.settings-page__lede {
    font-size: 15px;
    color: var(--fg-muted);
    margin: 0 0 28px;
    max-width: 660px;
    line-height: 1.55;
}
.settings-page__lede code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}
.settings-page__loading {
    color: var(--fg-muted);
    font-size: 14px;
}

.settings-page__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Empty-state for a staff session with no brand selected (no_active_brand).
 * Replaces the raw "400: Pick a brand..." error with a friendly prompt. */
.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-14) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.settings-empty__icon { color: var(--fg-dim); }
.settings-empty__title {
    font-size: var(--fs-18);
    color: var(--fg-strong);
    margin: 0;
}
.settings-empty__desc {
    max-width: 460px;
    font-size: 13px;
    line-height: var(--lh-body);
    color: var(--fg-muted);
    margin: 0;
}
.settings-empty__link { color: var(--accent); }

.settings-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.settings-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.settings-section__icon {
    color: var(--accent-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.settings-section__icon .icon { width: 16px; height: 16px; }
.settings-section h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.settings-section__body { padding: 8px 0; }
.settings-section__body--steps { padding: 0; }
.settings-section__head-spacer { flex: 1; }
.settings-section__action { display: inline-flex; align-items: center; }

/* Sync-to-Mystify retry surface (v7). */
.settings-sync-summary { margin: 8px 16px 14px; }
.settings-sync-list { display: flex; flex-direction: column; padding: 0 16px 8px; }
.settings-sync-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.settings-sync-row:last-child { border-bottom: 0; }
.settings-sync-step {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--fg-muted);
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 2px 0; text-align: center;
}
.settings-sync-field {
    font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-sync-detail { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.settings-sync-row--failed .settings-sync-field { color: var(--warn); }
.settings-section__hint {
    padding: 8px 16px 12px;
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.5;
}
.settings-section__hint code {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
}
.settings-section__empty {
    padding: 16px;
    font-size: 13px;
    color: var(--fg-muted);
    text-align: center;
}
.settings-section__details {
    padding: 12px 16px;
}
.settings-section__details summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--accent-hover);
    font-weight: 500;
}
.settings-section__details pre.code {
    margin-top: 12px;
    max-height: 480px;
    overflow: auto;
    font-size: 11.5px;
}

.kv-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 8px 16px;
    border-bottom: 1px dashed var(--color-border);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row__key {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.kv-row__key--link {
    color: var(--accent-hover);
    text-decoration: none;
}
.kv-row__key--link:hover { text-decoration: underline; }
.kv-row__value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-strong);
    overflow-wrap: anywhere;
}
.kv-row__value i {
    color: var(--fg-dim);
    font-style: italic;
    font-family: var(--font-sans);
}
.kv-row__secret {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.kv-row__secret-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-dim);
}

.step-record {
    padding: 10px 16px;
    border-bottom: 1px dashed var(--color-border);
}
.step-record:last-child { border-bottom: 0; }
.step-record__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.step-record__id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-hover);
    text-decoration: none;
}
.step-record__id:hover { text-decoration: underline; }
.step-record__ts {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-dim);
    margin-left: auto;
}
.step-record__summary {
    font-size: 12px;
    color: var(--fg-muted);
    margin-top: 6px;
    line-height: 1.5;
    padding-left: 4px;
}


/* =====================================================================
   PLACEHOLDER PAGES (docs / settings - until they're filled in)
===================================================================== */

.placeholder-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    height: 100%;
}
.placeholder-page h1 {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}
.placeholder-page p {
    color: var(--fg);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    max-width: 660px;
    text-wrap: pretty;
}
.placeholder-page ul {
    margin: 0;
    padding-left: 22px;
    color: var(--fg);
    font-size: 15px;
}
.placeholder-page li {
    margin-bottom: 8px;
    line-height: 1.55;
}


/* =====================================================================
   TEST INTEGRATION PAGE
===================================================================== */

main#app-root:has(.test-integration-page) {
    /* Transparent base + just the radial gradient on top so the
     * ambient aurora is visible. */
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, rgba(255, 106, 44, 0.22), transparent 70%);
}

.test-integration-page {
    /* Full-width scroll container so the scrollbar sits at the viewport
     * edge, not floating in the middle of a centred max-width box.
     * Horizontal padding grows past 40px on wide screens so the actual
     * content stays inside the same ~1320px reading box as before. */
    padding-block: 28px 60px;
    padding-inline: max(40px, calc((100% - 1320px) / 2));
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
}

.test-integration-page h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}
.test-integration-page__h1-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.test-integration-page__h1-icon .icon { width: 14px; height: 14px; }

.test-integration-page h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-strong);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.test-integration-page__lede {
    font-size: 16px;
    color: var(--fg-muted);
    margin-bottom: 24px;
    max-width: 720px;
    text-wrap: pretty;
}

.test-integration-page__section-heading {
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 24px 0 12px;
    font-weight: 600;
}

.test-integration-page__subheading {
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.scenario-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
}
.scenario-card:hover { border-color: var(--color-border-strong); }
.scenario-card--mandatory { border-color: var(--accent-border); }

.scenario-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.scenario-card__header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0;
}
.scenario-card__description {
    color: var(--fg-muted);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}
.scenario-card__endpoints {
    font-size: 12px;
    color: var(--fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.scenario-card__endpoints code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--color-text-strong);
}
.scenario-card__start { align-self: flex-start; margin-top: 4px; }

.test-running-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    margin-bottom: 16px;
    gap: 12px;
}
.test-running-header__scenario {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.test-running-header__scenario h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0;
}

.test-instructions {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.test-instructions summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-strong);
}
.test-instructions__steps {
    margin: 12px 0 0 22px;
    line-height: 1.7;
    color: var(--fg);
}
.test-instructions__steps li { margin-bottom: 10px; }
.test-instructions__proxy-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0;
    font-family: var(--font-mono);
    font-size: 11px;
}

.copy-btn {
    background: var(--color-surface-2);
    color: var(--fg);
    border: 1px solid var(--color-border);
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 4px;
}
.copy-btn:hover:not(:disabled) {
    background: var(--color-surface-3);
    color: var(--color-text-strong);
}

.launch-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.launch-form h3 {
    font-size: 11px;
    margin: 0;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
}
.launch-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.launch-form label { display: flex; flex-direction: column; gap: 4px; }
.launch-form label > span {
    font-size: 12px;
    color: var(--fg-muted);
    font-weight: 500;
}

.iframe-and-trace {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 12px;
    margin-top: 12px;
    height: calc(100vh - 280px);
    min-height: 320px;
}

.iframe-pane {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.iframe-pane__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}
.iframe-pane__url {
    flex: 1;
    background: var(--ink);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iframe-pane__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
    flex-shrink: 0;
}
.iframe-pane__dot--error {
    background: var(--fail);
    box-shadow: 0 0 8px var(--fail);
}

.iframe-pane__loading,
.iframe-pane__launch-error {
    margin: auto;
    padding: 20px;
    text-align: center;
    max-width: 500px;
}
.iframe-pane__launch-form {
    margin: auto;
    padding: 20px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.iframe-pane__launch-form h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.iframe-pane__launch-form p {
    color: var(--fg-muted);
    font-size: 13px;
    margin-bottom: 4px;
}
.iframe-pane__loading {
    color: var(--fg-muted);
    font-size: 13px;
}
.iframe-pane__hint {
    color: var(--fg-muted);
    text-align: center;
    font-size: 13px;
}
.iframe-pane__launch-error h3 {
    color: var(--fail);
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}
.iframe-pane__launch-error p {
    margin-bottom: 12px;
    color: var(--fg-muted);
}

.widget-iframe-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-surface);
    flex: 1;
}

.widget-iframe {
    width: 1280px;
    height: 900px;
    border: 0;
    background: white;
    transform-origin: top left;
    transform: scale(0.5);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.trace-pane {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.trace-pane__head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.trace-pane h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted);
    font-weight: 600;
    margin: 0;
    flex: 1;
}
.trace-pane__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--fail);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.trace-pane__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--fail);
    animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.35; } }

.trace-pane__empty {
    font-size: 12px;
    color: var(--fg-muted);
    padding: 14px 16px;
    text-align: center;
}

.coverage-strip, .coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.coverage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--fg-muted);
    border: 1px solid var(--color-border);
}
.coverage-pill--seen {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok-border);
}
.coverage-pill__icon { font-weight: bold; }

.trace-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.trace-list::-webkit-scrollbar-thumb {
    background-color: var(--fg-dim);
    background-clip: padding-box;
}
.trace-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--fg-muted);
    background-clip: padding-box;
}

.call {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 14px;
    border-left: 2px solid transparent;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--dur-hover) var(--ease-out);
}
.call:hover { background: var(--color-surface-2); }
.call--pass { border-left-color: var(--ok); }
.call--auth_fail,
.call--http_error,
.call--malformed_response,
.call--error_envelope { border-left-color: var(--fail); }
.call--transport_error { border-left-color: var(--warn); }

.call__header {
    display: grid;
    grid-template-columns: 16px 1fr auto auto;
    gap: 10px;
    align-items: center;
}
.call__seq {
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    text-align: right;
}
.call__icon {
    font-family: var(--font-mono);
    font-weight: bold;
    text-align: center;
}
.call--pass .call__icon { color: var(--ok); }
.call__method {
    font-family: var(--font-mono);
    color: var(--color-text-strong);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.call__status, .call__latency {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    text-align: right;
    min-width: 36px;
}
.call--fail .call__status,
.call--auth_fail .call__status,
.call--http_error .call__status,
.call--malformed_response .call__status,
.call--error_envelope .call__status { color: var(--fail); }
.call__message {
    font-size: 11px;
    color: var(--fg-muted);
    padding-left: 26px;
}
.call__details summary {
    cursor: pointer;
    font-size: 10px;
    color: var(--fg-dim);
    padding-left: 26px;
}
.call__body h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-dim);
    margin: 6px 0 4px;
    font-weight: 600;
}
.call__body pre {
    font-size: 11px;
    max-height: 200px;
    padding: 10px;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.test-result-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--fg-dim);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.test-result-summary--ok   { border-left-color: var(--ok); }
.test-result-summary--fail { border-left-color: var(--fail); }
.test-result-summary h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--color-text-strong);
    font-weight: 600;
}

.coverage-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 20px;
}
.coverage-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 12px;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--fg-dim);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
}
.coverage-row--seen       { border-left-color: var(--ok); }
.coverage-row--missing    { border-left-color: var(--fail); }
.coverage-row--unexpected { border-left-color: var(--warn); }
.coverage-row__icon {
    font-family: var(--font-mono);
    font-weight: bold;
    text-align: center;
}
.coverage-row--seen .coverage-row__icon       { color: var(--ok); }
.coverage-row--missing .coverage-row__icon    { color: var(--fail); }
.coverage-row--unexpected .coverage-row__icon { color: var(--warn); }
.coverage-row__status {
    font-size: 11px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
}

.trace-list--ended { max-height: none; overflow: visible; }
.test-actions { margin-top: 24px; }

.proxy-setup {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 24px;
}
.proxy-setup summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-hover);
    font-size: 13px;
}
.proxy-setup__body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.proxy-setup__body p { color: var(--fg); font-size: 13px; line-height: 1.5; }
.proxy-setup__url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.proxy-setup__hint { font-size: 12px; color: var(--fg-muted); }


/* ---------- MCP screen ----------------------------------------------------
   Ported from the Mystify Design System MCP-page handoff. Composes on
   existing tokens + .btn / .badge / .code / .panel primitives. All
   selectors namespaced under `.mcp-*` to avoid collisions.
--------------------------------------------------------------------------- */

/* `.canvas` is a structural wrapper the renderer drops between #app-root
 * (a flex column) and `.stage` so the page can scroll independently.
 * Other pages skip this layer; here we need it to claim the full flex slot. */
.canvas {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Transparent base so the ambient aurora layer (rendered behind #app via
     * ambient.js) is visible. An older version had var(--color-bg) here,
     * which silently blocked the aurora on every canvas-using page. */
    background:
        radial-gradient(ellipse 100% 70% at 50% -10%, rgba(255, 106, 44, 0.18), transparent 70%);
}

.mcp-stage {
    /* The wizard `.stage` defaults to a 760px max - this page wants more
     * breathing room for code snippets and the tools grid. */
    padding: 48px 40px 100px;
}
.mcp-inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mcp-hero { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.mcp-hero__title {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-strong);
    margin: 0;
    text-wrap: balance;
    line-height: 1.15;
}
.mcp-hero__lede {
    font-size: 16px;
    color: var(--fg);
    line-height: 1.6;
    max-width: 700px;
    text-wrap: pretty;
    margin: 0;
}

/* Card shell - shared by Install / Verify / Tools / Prompts */
.mcp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mcp-card__head { display: flex; gap: 14px; align-items: flex-start; }
.mcp-card__step {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-hover);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}
.mcp-card__step-num { line-height: 1; }
.mcp-card__step-icon { color: var(--accent-hover); }
.mcp-card__title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-strong);
    margin: 0 0 4px;
}
.mcp-card__sub {
    font-size: 13.5px;
    color: var(--fg-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
    text-wrap: pretty;
}
.mcp-card__post {
    font-size: 12px;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-top: 2px;
}
.mcp-card__post .icon { color: var(--fg-dim); }

.mcp-inline-code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--color-text-strong);
}

/* ---------- Tabs (client picker) ---------- */

.mcp-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-surface-2);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    width: fit-content;
}
.mcp-tab {
    background: transparent;
    border: 0;
    padding: 7px 14px;
    border-radius: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    color: var(--fg-muted);
    transition: background var(--dur-hover) var(--ease-out),
                color var(--dur-hover) var(--ease-out);
}
.mcp-tab:hover { color: var(--color-text-strong); }
.mcp-tab--active {
    background: var(--color-bg);
    color: var(--color-text-strong);
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.mcp-tab__label { font-size: 13px; font-weight: 500; }
.mcp-tab__sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mcp-tab--active .mcp-tab__sub { color: var(--accent-hover); }

/* ---------- Snippet panel ---------- */

.mcp-snippet {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mcp-snippet__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.mcp-snippet__lang {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-hover);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    padding: 2px 7px;
    border-radius: 4px;
}
.mcp-snippet__lang[hidden] { display: none; }

/* Inline variant tabset that replaces the .lang badge when a client
   has multiple snippets (bash / powershell). Each tab is a tiny
   segmented-control button; the active one paints in accent. */
.mcp-snippet__variants {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.mcp-snippet__variants[hidden] { display: none; }
.mcp-variant {
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    cursor: pointer;
    transition: background var(--dur-hover), color var(--dur-hover);
}
.mcp-variant + .mcp-variant { border-left: 1px solid var(--color-border); }
.mcp-variant:hover:not(.mcp-variant--on) {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
}
.mcp-variant--on {
    background: var(--accent-bg);
    color: var(--accent-hover);
}
.mcp-snippet__file {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}
.mcp-snippet__code {
    background: transparent !important;
    border-radius: 0;
    line-height: 1.65;
    padding: 16px 18px;
}
.mcp-copy {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mcp-copy--ok {
    color: var(--ok) !important;
    border-color: var(--ok-border) !important;
    background: var(--ok-bg) !important;
}

/* ---------- Verify card ---------- */

.mcp-verify {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mcp-verify__dot {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--fg-dim);
    box-shadow: 0 0 0 4px transparent;
    transition: background var(--dur-state, 200ms) var(--ease-out),
                box-shadow var(--dur-state, 200ms) var(--ease-out);
}
.mcp-verify--checking .mcp-verify__dot {
    background: var(--warn);
    box-shadow: 0 0 0 4px var(--warn-bg);
    animation: mcp-pulse 1s ease-in-out infinite;
}
.mcp-verify--ok .mcp-verify__dot {
    background: var(--ok);
    box-shadow: 0 0 0 4px var(--ok-bg);
}
.mcp-verify--ok {
    background: var(--ok-bg);
    border-color: var(--ok-border);
}
.mcp-verify__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mcp-verify__text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-strong);
}
.mcp-verify__text span {
    font-size: 12px;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes mcp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ---------- Tools list ---------- */

.mcp-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mcp-tool {
    padding: 12px 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--dur-hover) var(--ease-out);
}
.mcp-tool:hover {
    border-color: var(--color-border-strong);
}
.mcp-tool__sig {
    font-family: var(--font-mono);
    font-size: 12.5px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}
.mcp-tool__name { color: var(--accent-hover); font-weight: 500; }
.mcp-tool__args { color: var(--fg-dim); }
.mcp-tool__desc {
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1.5;
    margin: 0;
}
.mcp-tool--coming-soon {
    /* Aspirational tools planned for later phases - visually de-emphasized
     * so agents don't try to call them. */
    opacity: 0.55;
}
.mcp-tool--coming-soon .mcp-tool__name { color: var(--fg-muted); }
.mcp-tool__badge {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
    line-height: 1.2;
    align-self: center;
}

/* end of design v3 additions */

/* ---------- MCP diagnostics (v7) ---------- */

.mcp-tool--diag { border-style: dashed; }
.mcp-tool__tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--info);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    margin-left: auto;
    align-self: center;
}

.mcp-diag__preview-tag { margin-left: 8px; vertical-align: middle; }

.mcp-diag {
    margin-top: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
}
.mcp-diag__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}
.mcp-diag__op { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-hover); }
.mcp-diag__summary { font-size: 13px; color: var(--color-text-strong); }
.mcp-diag__timing { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); margin-left: auto; }
.mcp-diag__call { padding: 16px; }
.mcp-diag__call-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mcp-diag__badge {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    border-radius: var(--radius-sm); padding: 2px 8px;
}
.mcp-diag__badge--fail { background: var(--fail-bg); color: var(--fail); border: 1px solid var(--fail-border); }
.mcp-diag__method { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-strong); }
.mcp-diag__call-note { font-size: 11px; color: var(--fg-dim); margin-left: auto; }
.mcp-diag__config {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.mcp-diag__cfg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 0; }
.mcp-diag__cfg-key { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); min-width: 280px; }
.mcp-diag__cfg-val { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-strong); }
.mcp-diag__cfg-row.is-mismatch .mcp-diag__cfg-val { color: var(--warn); }
.mcp-diag__cfg-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--warn); }
.mcp-diag__exc {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 12px;
    padding: 10px 12px; background: var(--fail-bg); border: 1px solid var(--fail-border);
    border-radius: var(--radius-sm); color: var(--fail);
}
.mcp-diag__exc-type { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.mcp-diag__exc-msg { font-size: 12.5px; color: var(--color-text); }
.mcp-diag__foot {
    font-size: 12px; color: var(--fg-dim); line-height: 1.55; margin: 0;
    padding: 0 16px 16px; display: flex; gap: 8px; align-items: baseline;
}

/* ---------- Sample prompts ---------- */

.mcp-prompts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mcp-prompt {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.mcp-prompt__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.mcp-prompt__head .icon { color: var(--accent-hover); }
.mcp-prompt__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0;
}
.mcp-prompt__body {
    margin: 0;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Narrow-viewport fallback - tools grid collapses to one column. */
@media (max-width: 600px) {
    .mcp-tools { grid-template-columns: 1fr; }
}

/* =====================================================================
   Harness panel - the multi-phase "setup -> act -> auto-check" verifier
   used by W5 (withdrawal) and W8 (order control). A numbered phase
   stepper with live-watch status, per-phase result cards, and a
   completion summary. Composes on tokens + .badge / .btn / .input.
   ===================================================================== */

.harness { display: flex; flex-direction: column; gap: var(--space-3); }

/* intro hint (shown while in progress) */
.harness__intro {
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.harness__intro p { margin: 0; color: var(--fg); font-size: var(--fs-13); line-height: var(--lh-snug); }
.harness__intro .icon { color: var(--info); vertical-align: -2px; margin-right: 2px; }

/* completion summary (shown once every phase passes) */
.harness__complete {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--ok-border);
    background: var(--ok-bg);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-glow-ok);
}
.harness__complete-icon {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--ok); color: var(--ink);
}
.harness__complete-icon .icon { width: 20px; height: 20px; }
.harness__complete-body { flex: 1; min-width: 0; }
.harness__rerun { flex-shrink: 0; }
.harness__complete-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-strong); }
.harness__complete-sub { margin: 2px 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: var(--lh-snug); }

/* phase stepper */
.harness__phases { display: flex; flex-direction: column; gap: var(--space-2); }

.harness-phase {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--dur-state) var(--ease-out),
                background var(--dur-state) var(--ease-out),
                opacity var(--dur-state) var(--ease-out);
}
.harness-phase--locked { opacity: 0.5; }
.harness-phase--passed { border-color: var(--ok-border); background: var(--ok-bg); }
.harness-phase--ready,
.harness-phase--running,
.harness-phase--paused,
.harness-phase--polling { border-color: var(--accent-border); background: var(--accent-bg); }
.harness-phase--failed,
.harness-phase--timed_out { border-color: var(--fail-border); background: var(--fail-bg); }

.harness-phase__head { display: flex; align-items: center; gap: var(--space-3); }
.harness-phase__num {
    display: grid; place-items: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-3); color: var(--fg-muted);
    font-size: var(--fs-12); font-weight: var(--fw-semibold);
    border: 1px solid var(--color-border);
}
.harness-phase--ready .harness-phase__num,
.harness-phase--running .harness-phase__num,
.harness-phase--paused .harness-phase__num,
.harness-phase--polling .harness-phase__num { background: var(--accent); color: var(--ink); border-color: transparent; }
.harness-phase--passed .harness-phase__num { background: var(--ok); color: var(--ink); border-color: transparent; }
.harness-phase--failed .harness-phase__num,
.harness-phase--timed_out .harness-phase__num { background: var(--fail); color: var(--ink); border-color: transparent; }
.harness-phase__title { flex: 1; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-strong); }

/* sub-rows align under the title (past the 24px node + 12px gap) */
.harness-phase__instruction,
.harness-phase__otp,
.harness-phase__live,
.harness-phase__actions,
.harness-phase__result { padding-left: calc(24px + var(--space-3)); }
.harness-phase__instruction { margin: var(--space-2) 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: var(--lh-snug); }
/* passed / locked phases collapse to just the head row */
.harness-phase--passed .harness-phase__instruction,
.harness-phase--locked .harness-phase__instruction { display: none; }

.harness-phase__otp { margin-top: var(--space-3); }
.harness-phase__otp label { display: flex; flex-direction: column; gap: 4px; }
.harness-phase__otp-label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--fg); }

.harness-phase__live:empty,
.harness-phase__actions:empty,
.harness-phase__result:empty { padding: 0; }
.harness-phase__actions { display: flex; gap: var(--space-2); }
.harness-phase__actions:not(:empty) { margin-top: var(--space-3); }

/* live "watching" status row */
.harness-poll-status {
    display: flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--accent-hover); font-size: var(--fs-13);
}
.harness-poll-status .icon { color: var(--accent); }
.harness-poll-status__text strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }

/* per-phase evaluation result card */
.harness-eval {
    margin-top: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--ink);
    padding: var(--space-3);
}
.harness-eval--pass { border-color: var(--ok-border); }
.harness-eval--fail { border-color: var(--hairline-strong); }
.harness-eval__head { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--fg); line-height: var(--lh-snug); }
.harness-eval__head .icon { flex-shrink: 0; margin-top: 1px; }
.harness-eval--pass .harness-eval__head { color: var(--ok); }
.harness-eval--pass .harness-eval__head .icon { color: var(--ok); }
.harness-eval--fail .harness-eval__head .icon { color: var(--fg-muted); }

.harness-snapshot { margin-top: var(--space-2); display: grid; gap: 0; }
.harness-snapshot__row {
    display: flex; justify-content: space-between; gap: var(--space-3);
    padding: 5px 0; font-size: var(--fs-12);
    border-top: 1px solid var(--hairline);
}
.harness-snapshot__row:first-child { border-top: none; }
.harness-snapshot__label { color: var(--fg-muted); }
.harness-snapshot__value { color: var(--fg-strong); font-family: var(--font-mono); text-align: right; word-break: break-all; }