styles.css

/* styles.css */

/* =========================================================================
   DESIGN TOKENS — OKLCH two-tier layer (lane ux-p1)
   -------------------------------------------------------------------------
   Tier 1: a primitive OKLCH ramp (--ramp-*). Perceptually-uniform lightness
           steps, tinted toward the FlowRunner brand hue (~262, blue) so
           neutrals never land on pure #000 / #fff.
   Tier 2: semantic tokens (--surface, --text, --accent, --run-* …) that map
           roles onto ramp stops. UI should consume the SEMANTIC tier only.

   The DEFAULT theme is LIGHT and tuned for PROJECTOR legibility: an SE
   mirrors a live API attack/defense flow to a projector in a LIT room, so
   surfaces stay bright, text stays high-contrast, and run-state colors are
   saturated enough to read from across the room.

   Dark is opt-in two ways: [data-theme="dark"] (explicit) and
   @media (prefers-color-scheme: dark) when no explicit choice is set.
   Contract is documented in docs/design-tokens.md — both renderers and a
   future React island consume it. Evolve additively; do not rename tokens.
   ========================================================================= */
:root {
    /* ---- Tier 1: primitive OKLCH ramp (brand-tinted neutrals, hue 262) ---- */
    --ramp-neutral-0:  oklch(0.995 0.004 262);  /* near-white, faint brand tint */
    --ramp-neutral-50: oklch(0.985 0.006 262);
    --ramp-neutral-100: oklch(0.965 0.008 262);
    --ramp-neutral-200: oklch(0.925 0.010 262);
    --ramp-neutral-300: oklch(0.870 0.012 262);
    --ramp-neutral-400: oklch(0.740 0.014 262);
    --ramp-neutral-500: oklch(0.620 0.016 262);
    --ramp-neutral-600: oklch(0.520 0.018 262);
    --ramp-neutral-700: oklch(0.400 0.020 262);
    --ramp-neutral-800: oklch(0.300 0.022 262);
    --ramp-neutral-900: oklch(0.210 0.022 262);
    --ramp-neutral-1000: oklch(0.150 0.020 262); /* near-black, brand tint */

    /* Brand accent ramp (blue) */
    --ramp-accent-400: oklch(0.680 0.170 262);
    --ramp-accent-500: oklch(0.600 0.190 262);
    --ramp-accent-600: oklch(0.530 0.195 262);
    --ramp-accent-700: oklch(0.470 0.180 262);

    /* Run-state ramps — projector-saturated */
    --ramp-success-500: oklch(0.640 0.170 150);
    --ramp-success-600: oklch(0.560 0.160 150);
    --ramp-error-500:   oklch(0.620 0.230 27);
    --ramp-error-600:   oklch(0.550 0.220 27);
    --ramp-warning-500: oklch(0.780 0.170 75);
    --ramp-running-500: oklch(0.720 0.180 60);
    --ramp-skipped-500: oklch(0.620 0.014 262);

    /* ---- Tier 2: semantic tokens (LIGHT / projector default) ---- */
    --surface: var(--ramp-neutral-50);         /* app/window background */
    --surface-raised: var(--ramp-neutral-0);   /* panels, cards, headers */
    --surface-sunken: var(--ramp-neutral-100); /* wells, list backgrounds */
    --text: var(--ramp-neutral-900);           /* primary text */
    --text-muted: var(--ramp-neutral-600);     /* secondary / meta text */
    --accent: var(--ramp-accent-500);          /* primary/brand action */
    --accent-hover: var(--ramp-accent-600);
    --accent-contrast: var(--ramp-neutral-0);  /* text on accent fills */
    --border: var(--ramp-neutral-200);         /* default hairline border */
    --border-strong: var(--ramp-neutral-300);

    --run-success: var(--ramp-success-500);
    --run-error: var(--ramp-error-500);
    --run-skipped: var(--ramp-skipped-500);
    --run-running: var(--ramp-running-500);

    --focus-ring: oklch(0.600 0.190 262 / 0.35);

    /* ---- Tier 2 additions (UX overhaul): extra semantic roles ---- */
    --surface-overlay: var(--ramp-neutral-0);   /* floating dialogs/menus above all */
    --accent-soft:   color-mix(in oklab, var(--accent) 14%, var(--surface-raised)); /* selected/active wash */
    --accent-softer: color-mix(in oklab, var(--accent) 8%,  var(--surface));        /* hover wash */
    --text-faint:    var(--ramp-neutral-500);    /* tertiary text: placeholders, hints */
    --scrim:         oklch(0.16 0.02 262 / 0.55); /* dialog backdrop (projector-legible) */

    /* Run-state background tints + hairlines — auto-flip with --surface */
    --run-success-bg:   color-mix(in oklab, var(--run-success) 15%, var(--surface));
    --run-error-bg:     color-mix(in oklab, var(--run-error)   15%, var(--surface));
    --run-running-bg:   color-mix(in oklab, var(--run-running) 16%, var(--surface));
    --run-skipped-bg:   color-mix(in oklab, var(--run-skipped) 12%, var(--surface));
    --run-success-line: color-mix(in oklab, var(--run-success) 42%, var(--border));
    --run-error-line:   color-mix(in oklab, var(--run-error)   42%, var(--border));
    --run-running-line: color-mix(in oklab, var(--run-running) 42%, var(--border));

    /* ---- Structural scales (space / radius / elevation / motion / type) ---- */
    --space-2xs: 2px;  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;
    --space-lg: 16px;  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;

    --radius-xs: 4px;   /* small chips, code refs */
    --radius-sm: 6px;   /* buttons, inputs */
    --radius-md: 10px;  /* cards, panels, step rows, dropdowns */
    --radius-lg: 14px;  /* dialogs, floating surfaces */
    --radius-pill: 999px;
    --radius-round: 50%;

    --shadow-xs: 0 1px 2px oklch(0.40 0.04 262 / 0.06);
    --shadow-sm: 0 1px 3px oklch(0.40 0.04 262 / 0.09), 0 1px 2px oklch(0.40 0.04 262 / 0.06);
    --shadow-md: 0 4px 10px oklch(0.40 0.05 262 / 0.10), 0 2px 4px oklch(0.40 0.05 262 / 0.06);
    --shadow-lg: 0 12px 28px oklch(0.35 0.05 262 / 0.14), 0 4px 8px oklch(0.35 0.05 262 / 0.08);
    --shadow-overlay: 0 20px 56px oklch(0.28 0.06 262 / 0.24), 0 6px 16px oklch(0.28 0.06 262 / 0.14);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
    --ease-out-soft: cubic-bezier(0.16, 1, 0.30, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

    --fs-caption: 12px; --fs-body: 13px; --fs-base: 14px; --fs-label: 15px;
    --fs-h4: 16px; --fs-h3: 19px; --fs-h2: 24px; --fs-display: 30px;
    --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* ---- Step-type + HTTP-method identity hues (theme-stable, projector-saturated) ----
       Consumed as icon-chip accents and soft badge fills (color-mix wash), never as
       side-stripes. Mid-lightness so they read on both light and dark surfaces. */
    --type-request:   oklch(0.605 0.132 205);  /* teal   */
    --type-condition: oklch(0.700 0.150 75);   /* amber  */
    --type-loop:      oklch(0.590 0.165 305);  /* violet */
    --type-transform: oklch(0.620 0.140 262);  /* blue   */

    --method-get:     oklch(0.600 0.135 150);  /* green  */
    --method-post:    oklch(0.600 0.150 250);  /* blue   */
    --method-put:     oklch(0.680 0.150 65);   /* orange */
    --method-patch:   oklch(0.720 0.150 95);   /* amber  */
    --method-delete:  oklch(0.600 0.225 27);   /* red    */
    --method-neutral: var(--ramp-neutral-500); /* OPTIONS/HEAD/etc */

    /* ---- Sentinel shell structural tokens (no new colors; run-state ramp owns state) ---- */
    --icon-slot: 24px;                 /* sidebar icon-gutter column width (scannable spine) */
    --pip-size: 8px;                   /* System Status Pip + command-bar dirty pip */
    --spine-w: 3px;                    /* squared active-selection bar + segmented thumb accent */
    --status-idle: var(--text-faint);  /* theme-aware idle pip, no hardcoded grey */
    --eyebrow-tracking: 0.06em;        /* uppercase section eyebrows (RECENT FLOWS) */
    --track-height: 28px;              /* segmented-control track height */

    /* -------- Legacy variables (aliased to semantic tokens in the overhaul) ---- */
    /* Each legacy var now points at a semantic token, so all ~410 existing
       call sites become theme-aware for free. New work should use the
       semantic tokens directly. */
    --primary-color: var(--accent);
    --primary-hover-color: var(--accent-hover);
    --secondary-color: var(--text-muted);       /* .btn-secondary is reclassed below */
    --secondary-hover-color: var(--text);
    --success-color: var(--run-success);
    --success-hover-color: var(--ramp-success-600);
    --danger-color: var(--run-error);
    --danger-hover-color: var(--ramp-error-600);
    --warning-color: var(--ramp-warning-500);
    --warning-hover-color: oklch(0.700 0.170 75);
    --info-color: var(--accent);
    --light-bg-color: var(--surface);
    --medium-bg-color: var(--surface-sunken);
    --dark-text-color: var(--text);
    --medium-text-color: var(--text-muted);
    --light-text-color: var(--text-muted);
    --border-color-light: var(--border);
    --border-color-medium: var(--border);
    --border-color-dark: var(--border-strong);
    --focus-ring-color: var(--focus-ring);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-code: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Courier New", Courier, monospace;
    --base-font-size: 14px;
    --border-radius: var(--radius-sm);
    --box-shadow-light: var(--shadow-sm);
    --box-shadow-medium: var(--shadow-md);
    --box-shadow-overlay: var(--shadow-overlay);
}

/* ---- Semantic tokens: DARK theme ----
   Shared remap used by both the explicit opt-in and the automatic
   prefers-color-scheme path below. Neutrals stay brand-tinted (hue 262),
   never pure black; run-state hues nudge lighter for contrast on dark
   surfaces. Only the semantic tier flips — the primitive ramp is stable. */
[data-theme="dark"] {
    --surface: var(--ramp-neutral-1000);
    --surface-raised: var(--ramp-neutral-900);
    --surface-sunken: var(--ramp-neutral-800);
    --text: var(--ramp-neutral-50);
    --text-muted: var(--ramp-neutral-400);
    --accent: var(--ramp-accent-400);
    --accent-hover: var(--ramp-accent-500);
    --accent-contrast: var(--ramp-neutral-1000);
    --border: var(--ramp-neutral-800);
    --border-strong: var(--ramp-neutral-700);

    --run-success: oklch(0.720 0.170 150);
    --run-error:   oklch(0.700 0.220 27);
    --run-skipped: var(--ramp-neutral-500);
    --run-running: oklch(0.780 0.170 60);

    --focus-ring: oklch(0.680 0.170 262 / 0.45);

    /* Overhaul additions flipped for dark surfaces */
    --surface-overlay: var(--ramp-neutral-800);
    --text-faint: var(--ramp-neutral-500);
    --scrim: oklch(0 0 0 / 0.66);
    --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.34);
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.40), 0 1px 2px oklch(0 0 0 / 0.30);
    --shadow-md: 0 4px 10px oklch(0 0 0 / 0.44), 0 2px 4px oklch(0 0 0 / 0.32);
    --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.52), 0 4px 8px oklch(0 0 0 / 0.34);
    --shadow-overlay: 0 20px 56px oklch(0 0 0 / 0.64), 0 6px 16px oklch(0 0 0 / 0.40);
}

/* Automatic dark when the OS prefers it AND no explicit theme is set.
   [data-theme="light"] on <html> opts back into the projector default. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: var(--ramp-neutral-1000);
        --surface-raised: var(--ramp-neutral-900);
        --surface-sunken: var(--ramp-neutral-800);
        --text: var(--ramp-neutral-50);
        --text-muted: var(--ramp-neutral-400);
        --accent: var(--ramp-accent-400);
        --accent-hover: var(--ramp-accent-500);
        --accent-contrast: var(--ramp-neutral-1000);
        --border: var(--ramp-neutral-800);
        --border-strong: var(--ramp-neutral-700);

        --run-success: oklch(0.720 0.170 150);
        --run-error:   oklch(0.700 0.220 27);
        --run-skipped: var(--ramp-neutral-500);
        --run-running: oklch(0.780 0.170 60);

        --focus-ring: oklch(0.680 0.170 262 / 0.45);

        --surface-overlay: var(--ramp-neutral-800);
        --text-faint: var(--ramp-neutral-500);
        --scrim: oklch(0 0 0 / 0.66);
        --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.34);
        --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.40), 0 1px 2px oklch(0 0 0 / 0.30);
        --shadow-md: 0 4px 10px oklch(0 0 0 / 0.44), 0 2px 4px oklch(0 0 0 / 0.32);
        --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.52), 0 4px 8px oklch(0 0 0 / 0.34);
        --shadow-overlay: 0 20px 56px oklch(0 0 0 / 0.64), 0 6px 16px oklch(0 0 0 / 0.40);
    }
}

/* --- Basic Reset & Defaults --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    line-height: 1.5;
    background-color: var(--surface);
    color: var(--text);
    overflow: hidden; /* Prevent body scrollbars */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}

button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

input, select, textarea {
    font-family: inherit;
    font-size: 1em;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface-raised);
    color: var(--text);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

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

code {
    font-family: var(--font-family-code);
    background-color: var(--medium-bg-color);
    padding: 2px 5px;
    border-radius: var(--border-radius);
    font-size: 0.9em;
}

/* --- General Button Styles --- */
.btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
    display: inline-flex; /* Align icons/text */
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    letter-spacing: -0.005em;
}
.btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.992); }

/* ---- Inline SVG icon system (Lucide-style, currentColor, one stroke width) ---- */
.icon {
    width: 16px; height: 16px;
    display: inline-block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.18em;
    pointer-events: none;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* Icon-only button: square target, centered glyph */
.btn-icon { padding: 0; width: 32px; height: 32px; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
.theme-toggle .theme-toggle-icon { font-size: 15px; line-height: 1; display: block; }

.btn-primary { background-color: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

/* Instrument secondary: a quiet tinted-neutral surface, not a grey fill */
.btn-secondary { background-color: var(--surface-raised); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background-color: var(--surface-sunken); border-color: var(--border-strong); color: var(--text); }

.btn-success { background-color: var(--run-success); color: var(--accent-contrast); border-color: var(--run-success); }
.btn-success:hover { background-color: var(--success-hover-color); border-color: var(--success-hover-color); }

.btn-danger { background-color: var(--run-error); color: var(--accent-contrast); border-color: var(--run-error); }
.btn-danger:hover { background-color: var(--danger-hover-color); border-color: var(--danger-hover-color); }

/* LOCKED: amber (--warning-color) is for genuine validation/condition affordances only, never a topbar file/run control. Save uses --accent when dirty (see .needs-save). Keeps amber meaning 'attention/running', not decoration. */
.btn-warning { background-color: var(--warning-color); color: var(--accent-contrast); border-color: var(--warning-color); }
.btn-warning:hover { background-color: var(--warning-hover-color); border-color: var(--warning-hover-color); }

.btn-sm {
    padding: 5px 10px;
    font-size: 0.875em;
}

.copy-btn {
    margin-top: 5px;
    float: right;
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: var(--surface-sunken) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

/* Highlight save button when changes need persisting */
.needs-save:not(:disabled) {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
/* --- Main Application Layout --- */
.app-container {
    display: flex;
    height: 100vh; /* Full viewport height */
    background-color: var(--surface-sunken);
}

/* --- Branding Element --- */
.app-branding {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.ase-logo {
    width: 60px;
    height: auto;
    margin-top: -2px;
    filter: drop-shadow(0 2px 3px color-mix(in oklab, var(--accent) 10%, transparent));
}

.app-name-text {
    font-size: 2em;
    font-weight: 700;
    /* Single solid brand color — gradient background-clip:text removed
       (lane ux-p1): it rendered soft/low-contrast on projectors. */
    color: var(--accent);
    letter-spacing: -0.5px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    margin-left: 0;
    line-height: 1;
}

@media (max-width: 600px) {
  .app-name-text { font-size: 1.1em; }
  .ase-logo { width: 36px; }
}

.sidebar.collapsed .app-branding {
    display: none;
}

/* --- Sidebar --- */
.sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--surface-raised);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    clip-path: inset(0 -24px 0 0); /* let the shadow spill right, not left */
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-actions {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-actions button {
    width: 100%;
}

.flow-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.flow-list-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1px var(--space-sm);
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    color: var(--text-muted);
}

.flow-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.flow-item-name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    color: var(--dark-text-color);
}

.btn-remove-recent-file {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--light-text-color);
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.6;
    flex-shrink: 0;
}

.btn-remove-recent-file:hover {
    background: var(--medium-bg-color);
    color: var(--danger-color);
    opacity: 1;
}

.btn-remove-recent-file:active {
    transform: scale(0.92);
}

.flow-list-item:hover .btn-remove-recent-file {
    opacity: 1;
}

.flow-list-item:hover {
    background-color: var(--accent-softer);
    color: var(--text);
}

.flow-list-item.selected {
    background-color: var(--accent-soft);
    font-weight: var(--fw-medium);
    color: var(--text);
}

/* Leading active bar for the selected flow (an inset marker, not a side-stripe) */
.flow-list-item.selected::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: var(--radius-pill);
    background-color: var(--accent);
}

.flow-list-item.dragging {
    opacity: 0.5;
    background-color: var(--medium-bg-color);
}

.flow-item-actions {
    margin-top: 5px;
    display: flex;
    gap: 8px;
}

.flow-item-actions button {
    background: none;
    border: none;
    color: var(--light-text-color);
    font-size: 1em;
    padding: 2px 4px;
    line-height: 1;
}
.flow-item-actions button:hover {
    color: var(--dark-text-color);
}

.loading-flows, .no-flows {
    padding: 15px 20px;
    color: var(--light-text-color);
    font-style: italic;
}

/* --- Workspace --- */
.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background-color: var(--surface-sunken);
}

.workspace-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    gap: 12px 20px;
}

.workspace-header h2 {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-width: 150px;
}

.workspace-file-controls {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.workspace-view-controls {
    display: flex;
    gap: 10px;
    margin-left: 15px;
}

.workspace-view-controls .btn {
    background-color: var(--surface-sunken);
    border-color: var(--border-color-medium);
    color: var(--medium-text-color);
}
.workspace-view-controls .btn:hover {
    background-color: var(--medium-bg-color);
    border-color: var(--border-color-dark);
    color: var(--dark-text-color);
}
.workspace-view-controls .btn-toggle-info,
.workspace-view-controls .btn-toggle-variables {
    min-width: 110px;
    justify-content: space-between;
}

.workspace-view-controls .btn-toggle-info .toggle-icon,
.workspace-view-controls .btn-toggle-variables .toggle-icon {
    font-size: 0.9em;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
    margin-left: 5px;
}

/* Workspace Content Area */
.workspace-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: var(--surface-sunken);
    background-image: radial-gradient(circle at center, color-mix(in oklab, var(--text) 8%, transparent) 1px, transparent 1.2px);
    background-size: 22px 22px;
    background-position: -1px -1px;
    display: flex;
    flex-direction: column;
}

.placeholder-message {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-text-color);
    font-size: 1.1em;
    padding: 40px;
}

/* --- Overlay Common Styles --- */
.flow-info-overlay,
.variables-panel {
    position: absolute; /* Positioned relative to .workspace-content */
    top: 0;
    left: 0;
    right: 0;
    background: var(--light-bg-color);
    border-bottom: 1px solid var(--border-color-medium);
    box-shadow: var(--box-shadow-medium);
    padding: 0 25px; /* Start with horizontal padding, vertical applied when open */
    overflow: hidden;
    max-height: 0;    /* Start closed */
    opacity: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;  /* Both panels should have same z-index */
}

/* Class to open/show the overlays */
.flow-info-overlay.open,
.variables-panel.visible { /* .visible is used by JS for variables panel */
    max-height: 70vh; /* Max height when open, can be adjusted */
    opacity: 1;
    overflow-y: auto; /* Allow scrolling for content */
    padding-top: 20px;    /* Add vertical padding when open */
    padding-bottom: 20px; /* Add vertical padding when open */
}

/* Specifics for Info Overlay internals (Collapsibles) */
.flow-info-overlay .form-group {
    margin-bottom: 18px;
}
.flow-info-overlay textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.flow-info-overlay input[type="text"] {
    width: 100%;
}
.flow-info-overlay .collapsible-header,
.variables-panel .collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--surface-raised);
  color: var(--dark-text-color);
  border: 1px solid var(--border-color-medium);
  border-radius: var(--border-radius);
  padding: 10px 15px;
  cursor: pointer;
  text-align: left;
  font-size: 1em;
  font-weight: 600;
  transition: background-color 0.2s, border-radius 0.3s ease-in-out;
  margin-bottom: 5px;
}
.flow-info-overlay .collapsible-header:hover,
.variables-panel .collapsible-header:hover {
    background-color: var(--medium-bg-color);
}
.flow-info-overlay .collapsible-header .toggle-icon,
.variables-panel .collapsible-header .toggle-icon {
  margin-left: 10px;
  transition: transform 0.3s ease-in-out;
  font-weight: bold;
  color: var(--primary-color);
}
.flow-info-overlay .collapsible-header.active,
.variables-panel .collapsible-header.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--medium-bg-color);
}
.flow-info-overlay .collapsible-header.active .toggle-icon,
.variables-panel .collapsible-header.active .toggle-icon {
    transform: rotate(180deg);
}
.flow-info-overlay .collapsible-content,
.variables-panel .collapsible-content {
     border: none;
     padding: 0 15px; /* Horizontal padding, vertical added on open */
     max-height: 0;
     overflow: hidden;
     transition: opacity 0.2s ease-out;
}
.flow-info-overlay .collapsible-header.active + .collapsible-content,
.variables-panel .collapsible-header.active + .collapsible-content {
    border: 1px solid var(--border-color-light);
    border-top: none;
    background-color: var(--surface-raised);
    margin-top: -1px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding-top: 15px; /* Vertical padding when open */
    padding-bottom: 15px;
    max-height: 350px; /* Max height for scrollable content inside collapsible */
    overflow-y: auto;
}


/* Variables Panel Header */
.variables-panel .variables-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
}

.variables-panel .variables-header h4 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
}

#actual-close-variables-btn {
    margin-left: auto;
}

/* Variables Panel Content Container */
.variables-panel .variables-container {
  flex: 1;
  overflow-y: auto;
}


/* Info Overlay Header */
.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
}

.info-header h4 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
}

#actual-close-info-btn {
    margin-left: auto;
}

/* View Mode Styling */
.view-mode {
    display: none;
    flex: 1;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.view-mode.active {
    display: flex;
    flex-direction: column;
}

#flow-builder-mount {
     position: relative;
}

#flow-visualizer-mount {
    position: relative;
    overflow: hidden;
    /* Same sunken dotted canvas as the list view: one canvas vocabulary. */
    background-color: var(--surface-sunken);
    background-image: radial-gradient(circle at center, color-mix(in oklab, var(--text) 8%, transparent) 1px, transparent 1.2px);
    background-size: 22px 22px;
    background-position: -1px -1px;
    cursor: grab;
}
#flow-visualizer-mount:active {
    cursor: grabbing;
}
#flow-visualizer-mount.is-panning {
    cursor: grabbing;
}

.visualizer-canvas {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.visualizer-minimap {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 180px;
    height: 140px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-overlay);
    border: 1px solid var(--border-color-medium);
    box-shadow: var(--box-shadow-light);
    z-index: 1000;
}
.visualizer-minimap .minimap-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Minimap fade-in & Retina crispness */
.visualizer-minimap {
    transition: opacity .25s ease, transform .15s ease;
    cursor: pointer;
    opacity: 0;
}
.visualizer-minimap[style*="display: none"] {
    opacity: 0;
}
.visualizer-minimap:not([style*="display: none"]) {
    opacity: 1;
}

/* Sharper lines inside miniature SVG */
.visualizer-minimap svg {
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;   /* keep strokes 1 px regardless of scale */
}

.visualizer-minimap path {
    stroke: var(--border-color-dark);
    stroke-width: 1;
}

.minimap-viewport {
    box-sizing: border-box;
    background: color-mix(in oklab, var(--accent) 22%, transparent);
}

/* --- Runner Panel --- */
.runner-panel {
    width: 350px;
    flex-shrink: 0;
    background-color: var(--surface-raised);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    clip-path: inset(0 0 0 -24px); /* let the shadow spill left, not right */
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Pane Minimization Styles */
.collapsible-pane {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-header, .runner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.sidebar-header h2, .runner-header h2 {
    margin: 0;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease-out;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    color: var(--text);
}
.runner-header h2 {
    font-size: var(--fs-h4);
}

.runner-header {
    gap: 10px;
}
.runner-header .btn-toggle-collapse {
    order: -1;
}

.sidebar-content, .runner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.2s ease-out;
    width: 100%;
}


.btn-toggle-collapse {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.btn-toggle-collapse:hover {
    background-color: var(--surface-sunken);
    color: var(--text);
}

.btn-toggle-collapse svg {
    transition: transform var(--dur-2) var(--ease-out);
}

.btn-toggle-collapse:active {
    transform: scale(0.95);
}

.collapsed .btn-toggle-collapse svg {
    transform: rotate(180deg);
}

.sidebar .btn-toggle-collapse {
    color: var(--text-muted);
}

.runner-panel .btn-toggle-collapse {
    color: var(--text-muted);
}

.collapsible-pane.collapsed {
    width: 45px;
    overflow: hidden;
    border-right-color: var(--border-color-light);
    border-left-color: var(--border-color-light);
}
.collapsible-pane.collapsed .sidebar-header,
.collapsible-pane.collapsed .runner-header {
    padding: 15px 10px;
    justify-content: center;
}
.collapsible-pane.collapsed .sidebar-header h2,
.collapsible-pane.collapsed .runner-header h2,
.collapsible-pane.collapsed .sidebar-content,
.collapsible-pane.collapsed .runner-content,
.collapsible-pane.collapsed .runner-header #clear-results-btn
{
    display: none;
}

/* --- Updated Runner Controls Spacing --- */
.runner-controls {
    padding: 12px 18px; /* Reduced padding */
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced gap between control groups */
}
.control-group {
    display: flex;
    gap: 8px; /* Reduced gap within control groups */
    align-items: center;
    flex-wrap: wrap;
}
/* --- End Updated Runner Controls --- */

.delay-group label {
    font-weight: 500;
    color: var(--medium-text-color);
}
.delay-group input[type="number"] {
    width: 80px;
    padding: 5px 8px;
}

/* --- Runner Status Messages (Updated) --- */
.runner-status-messages {
    padding: 8px 18px; /* Reduced padding */
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
    max-height: 80px; /* Defined max-height */
    overflow-y: auto; /* Allow scroll if content exceeds height */
    background-color: var(--surface-raised); /* Slightly different background */
}

.runner-status-messages .flow-message {
    box-shadow: none;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    padding: 6px 10px; /* compact */
    display: flex; /* Ensure flex for icon/text alignment */
    align-items: center; /* Align icon and text vertically */
    gap: 8px; /* Space between icon and text */
    background: color-mix(in oklab, var(--msg, var(--accent)) 10%, var(--surface-raised));
    border-color: color-mix(in oklab, var(--msg, var(--accent)) 24%, var(--border));
}
 .runner-status-messages .flow-message:last-child {
     margin-bottom: 0;
 }
.runner-status-messages .flow-message .message-icon {
    padding: 0; /* Remove padding */
    background: transparent; /* no chip in the compact inline variant */
    font-size: 1.05em;
    flex-shrink: 0;
    color: var(--msg, var(--accent));
}
 .runner-status-messages .flow-message .message-body {
    padding: 0; /* Remove padding */
    flex: 1; /* Allow text to take remaining space */
    line-height: 1.3; /* Adjust line height for compactness */
}
/* Hide the inner header/close button for status messages */
.runner-status-messages .flow-message .message-header {
    display: none;
}
/* --- End Runner Status Messages --- */


.runner-results-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.runner-results-container h3 {
    padding: 10px 20px;
    font-size: 1.1em;
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
    margin: 0;
    background-color: var(--surface-raised);
    color: var(--dark-text-color);
}

.results-filter {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color-light);
    background-color: var(--surface-raised);
    align-items: center;
    flex-wrap: wrap;
}
.results-filter input[type="text"] {
    flex: 1;
    padding: 5px 8px;
}
.results-filter select {
    flex: 0 0 120px;
    padding: 5px 8px;
}
.results-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.runner-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
    background-color: var(--surface-raised);
}

.result-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color-light);
}
.result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.result-step-name {
    font-weight: 600;
    color: var(--dark-text-color);
}
.result-status {
    padding: 2px 6px;
    border-radius: var(--border-radius);
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Run-status pip (lane ux-p1 proof surface): a solid, token-driven dot that
   reads at projector distance. Legacy pastel badge backgrounds below remain
   until Wave 2 migrates the badges wholesale. */
.result-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--run-skipped);
}
/* Status class lives on the parent .result-item; drive both the pip and the
   soft-chip fill from there (the .result-status span carries no modifier). */
.result-item.success .result-status::before { background-color: var(--run-success); }
.result-item.error   .result-status::before { background-color: var(--run-error); }
.result-item.running .result-status::before { background-color: var(--run-running); }
.result-item.skipped .result-status::before { background-color: var(--run-skipped); }
.result-item.warning .result-status::before,
.result-item.stopped .result-status::before { background-color: var(--run-skipped); }
.result-item.success .result-status { background-color: var(--run-success-bg); color: color-mix(in oklab, var(--run-success) 58%, var(--text)); }
.result-item.error   .result-status { background-color: var(--run-error-bg);   color: color-mix(in oklab, var(--run-error) 58%, var(--text)); }
.result-item.running .result-status { background-color: var(--run-running-bg); color: color-mix(in oklab, var(--run-running) 52%, var(--text)); }
.result-item.skipped .result-status { background-color: var(--run-skipped-bg); color: color-mix(in oklab, var(--run-skipped) 45%, var(--text)); }
.result-item.pending .result-status { background-color: var(--accent-soft);    color: color-mix(in oklab, var(--accent) 58%, var(--text)); }
.result-item.warning .result-status,
.result-item.stopped .result-status { background-color: var(--run-skipped-bg); color: color-mix(in oklab, var(--run-skipped) 45%, var(--text)); }

@keyframes pulse-orange {
  0% { background-color: var(--run-running-bg); }
  50% { background-color: color-mix(in oklab, var(--run-running) 28%, var(--surface)); }
  100% { background-color: var(--run-running-bg); }
}

.result-body {
    background-color: var(--surface-raised);
    border: 1px solid var(--medium-bg-color);
    border-radius: var(--border-radius);
    padding: 10px;
    max-height: 200px;
    overflow: auto;
    margin-top: 5px;
}
.result-body pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-family-code);
    font-size: 0.9em;
    color: var(--dark-text-color);
    line-height: 1.4;
}
.result-error {
    color: var(--danger-color);
    font-weight: 500;
    margin-top: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 5px 8px;
    background-color: var(--run-error-bg);
    border-radius: var(--border-radius);
    font-size: 0.9em;
}

.result-extraction-failures {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: var(--run-running-bg);
    border: 1px solid color-mix(in oklab, var(--warning-color) 30%, var(--border));
    border-radius: var(--border-radius);
    font-size: 0.9em;
    color: color-mix(in oklab, var(--warning-color) 55%, var(--text));
}
.result-extraction-failures strong {
    color: color-mix(in oklab, var(--warning-color) 55%, var(--text));
    display: block;
    margin-bottom: 5px;
}
.result-extraction-failures ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.result-extraction-failures li {
    margin-bottom: 4px;
}
.result-extraction-failures li:last-child {
    margin-bottom: 0;
}
.result-extraction-failures code {
    background-color: var(--run-running-bg);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-family-code);
    font-size: 0.95em;
}

.result-extracted-values {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: var(--accent-soft);
    border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
    border-radius: var(--border-radius);
    font-size: 0.9em;
    color: color-mix(in oklab, var(--accent) 55%, var(--text));
}
.result-extracted-values strong {
    color: color-mix(in oklab, var(--accent) 55%, var(--text));
    display: block;
    margin-bottom: 5px;
}
.result-extracted-values ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.result-extracted-values li {
    margin-bottom: 4px;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
}
.result-extracted-values li:last-child {
    margin-bottom: 0;
}
.result-extracted-values li .copy-btn {
    margin-top: 4px;
    align-self: flex-end;
}
.result-extracted-values code {
    background-color: var(--accent-soft);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-family-code);
    font-size: 0.95em;
}

.no-results {
    color: var(--light-text-color);
    font-style: italic;
    padding: 15px 0;
    text-align: center;
}

/* --- Builder Component Styles --- */
.form-group {
  margin-bottom: 15px;
}
.form-group:last-child { margin-bottom: 0; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--medium-text-color); }
.form-hint { color: var(--light-text-color); font-size: 0.9em; margin-top: 5px; margin-bottom: 0; line-height: 1.3; }
.json-validation-error { color: var(--danger-color); margin-top: 5px; font-size: 0.9em; display: none; }
.loop-var-validation-error { color: var(--danger-color); margin-top: 5px; font-size: 0.9em; display: none; }

/* Main Builder Layout (Steps List + Editor Panel) */
.flow-builder-section{
    --steps-width: 28rem;
    --steps-height: 45vh;
    --gutter: .25rem;
    display: grid;
    grid-template-columns: var(--steps-width) var(--gutter) 1fr;
    height: 100%;
  }
.flow-steps-panel {
  border-right: 1px solid var(--border-color-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-raised);
}
.flow-steps-panel h3 {
  margin: 0;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 1.1rem;
  flex-shrink: 0;
  background-color: var(--light-bg-color);
  color: var(--dark-text-color);
}
.flow-steps-container {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  overflow-x: auto;
  min-width: 100%;
  position: relative;
}
.empty-flow-message { padding: 20px; text-align: center; color: var(--light-text-color); font-style: italic; }
.flow-steps-actions {
  padding: 14px 18px;
  border-top: 1px solid var(--border-color-light);
  text-align: center;
  flex-shrink: 0;
  background-color: var(--light-bg-color);
}
.flow-steps-actions .btn-add-step { width: 100%; }

/* Editor Panel */
.step-editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-raised);
}
.step-editor-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--medium-text-color); font-size: 1.1em; padding: 20px; }
.step-editor-container { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.step-editor-container.visible { display: flex; }
.step-editor { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.step-editor-content { flex: 1; overflow-y: auto; padding: 18px 24px; }
.editor-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color-light); }
.editor-header h3 { margin: 0; color: var(--dark-text-color); font-size: 1.2em; }
.step-save-message { display: none; color: color-mix(in oklab, var(--run-success) 58%, var(--text)); background-color: var(--run-success-bg); padding: 8px 12px; border-radius: var(--border-radius); margin: 10px 0; font-weight: bold; font-size: 0.95em; }
.step-editor-actions { flex-shrink: 0; padding: 15px 20px; background: var(--light-bg-color); border-top: 1px solid var(--border-color-light); display: flex; justify-content: flex-end; gap: 10px; }

.variables-table { width: 100%; border-collapse: collapse; }
.variables-table th, .variables-table td { padding: 8px 15px; text-align: left; border-bottom: 1px solid var(--border-color-light); font-size: 13px; vertical-align: top; }
.variables-table th { font-weight: 600; color: var(--dark-text-color); background-color: var(--surface-raised); position: sticky; top: 0; z-index: 1; }
.variables-table tr:last-child td { border-bottom: none; }
.var-name { font-family: var(--font-family-code); font-weight: 500; color: color-mix(in oklab, var(--accent) 55%, var(--text)); word-break: break-all; }
.var-origin { color: var(--medium-text-color); }
.var-path { font-family: var(--font-family-code); color: var(--light-text-color); word-break: break-all; }
.no-variables-message { padding: 20px; text-align: center; color: var(--medium-text-color); font-style: italic; }

/* --- Flow Step Styling (List View) --- */
.flow-step {
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  position: relative;
  box-shadow: var(--shadow-xs);
}
.flow-step:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}
.flow-step.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

/* Step-type identity lives in the leading icon chip, never a side-stripe. */
.flow-step-request   { --step-type: var(--type-request); }
.flow-step-condition { --step-type: var(--type-condition); }
.flow-step-loop      { --step-type: var(--type-loop); }
.flow-step-transform { --step-type: var(--type-transform); }

.flow-step-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: background-color var(--dur-1) var(--ease-out);
}
.flow-step.selected .flow-step-header { background: var(--accent-softer); border-bottom-color: var(--border); }
.flow-step-drag-handle { cursor: grab; color: var(--text-faint); margin-right: 8px; font-size: 16px; line-height: 1; padding: 2px; }
.flow-step-drag-handle:active { cursor: grabbing; }
.flow-step-icon {
  margin-right: 10px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--step-type, var(--accent)) 15%, var(--surface-raised));
  color: var(--step-type, var(--accent));
}
.flow-step-icon svg { width: 16px; height: 16px; fill: var(--step-type, var(--accent)); }

.flow-step-title { flex: 1; font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-step-actions { display: flex; gap: 4px; margin-left: auto; padding-left: 12px; flex-shrink: 0; }
.flow-step-actions button { background: transparent; border: none; cursor: pointer; color: var(--text-faint); font-size: 15px; padding: 4px; border-radius: var(--radius-sm); transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); line-height: 1; display: flex; align-items: center; }
.flow-step-actions button:hover { color: var(--text); background: var(--surface-sunken); }
.flow-step-actions .btn-delete:hover { color: var(--run-error); background: var(--run-error-bg); }
.flow-step-content { padding: 10px 14px; font-size: var(--fs-body); color: var(--text-muted); background-color: transparent; }
.flow-step-header + .flow-step-content { border-top: 1px solid var(--border); }

@keyframes step-running-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--run-running) 42%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--run-running) 20%, transparent); }
}
.flow-step.step-running {
    border-color: var(--run-running-line);
    background-color: var(--run-running-bg);
    animation: step-running-pulse 1.8s infinite var(--ease-out);
}
.flow-step.step-running .flow-step-header {
    background-color: var(--run-running-bg);
    border-bottom-color: var(--run-running-line);
}
.flow-step.step-success {
    border-color: var(--run-success-line);
    background-color: var(--run-success-bg);
}
.flow-step.step-success .flow-step-header {
    background-color: var(--run-success-bg);
    border-bottom-color: var(--run-success-line);
}
.flow-step.step-error {
    border-color: var(--run-error-line);
    background-color: var(--run-error-bg);
}
.flow-step.step-error .flow-step-header {
    background-color: var(--run-error-bg);
    border-bottom-color: var(--run-error-line);
}
.flow-step.step-stopped {
    border-color: var(--border-strong);
    background-color: var(--run-skipped-bg);
    opacity: 0.85;
}
.flow-step.step-skipped {
    border-color: var(--border);
    background-color: var(--run-skipped-bg);
    opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
    .flow-step.step-running { animation: none; }
}

.request-info { display: flex; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 5px 10px;}
.request-method {
    font-weight: var(--fw-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    margin-right: 4px;
    font-size: 0.74em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: inline-block;
    font-family: var(--font-family-code);
    background: color-mix(in oklab, var(--rm, var(--method-neutral)) 16%, var(--surface-raised));
    color: var(--rm, var(--method-neutral));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rm, var(--method-neutral)) 32%, transparent);
}
.request-method.GET { --rm: var(--method-get); }
.request-method.POST { --rm: var(--method-post); }
.request-method.PUT { --rm: var(--method-put); }
.request-method.PATCH { --rm: var(--method-patch); }
.request-method.DELETE { --rm: var(--method-delete); }
.request-method.OPTIONS { --rm: var(--method-neutral); }
.request-method.HEAD { --rm: var(--type-loop); }
.request-method.TRANSFORM { --rm: var(--type-transform); }
.request-url { font-family: var(--font-family-code); color: var(--dark-text-color); word-break: break-all; flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; vertical-align: bottom; }
.request-details { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85em; color: var(--light-text-color); margin-top: 5px; }
.request-extractions span, .request-headers-badge, .request-body-badge { background-color: var(--medium-bg-color); padding: 2px 6px; border-radius: 3px; display: inline-block; }
.request-extractions .extraction-badge { font-family: var(--font-family-code); background-color: var(--run-success-bg); color: color-mix(in oklab, var(--run-success) 58%, var(--text)); margin-left: 4px; }
.condition-expression { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.condition-if { font-weight: 600; color: var(--warning-hover-color); margin-right: 5px; }
.condition-code { font-family: var(--font-family-code); background-color: var(--run-running-bg); padding: 3px 6px; border-radius: 3px; color: color-mix(in oklab, var(--warning-color) 55%, var(--text)); word-break: break-word; flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; vertical-align: bottom; }
.condition-branches { margin-top: 10px; padding-left: 15px; border-left: 2px solid var(--border); }
.branch { margin-bottom: 10px; }
.branch-header { font-weight: 600; margin-bottom: 5px; font-size: 0.95em; }
.then-branch .branch-header { color: var(--success-hover-color); }
.else-branch .branch-header { color: var(--danger-hover-color); }
.branch-steps { margin-left: 15px; padding: 5px 0 5px 15px; border-left: 2px dashed var(--border-color-medium); margin-top: 5px; min-height: 20px; min-width: 400px; width: max-content; overflow-x: auto; display: block; }
.empty-branch { color: var(--text-muted); font-style: italic; padding: 5px 0; font-size: 0.9em; }
.branch .btn-add-step { margin-top: 5px; font-size: 0.85em; padding: 3px 8px; background-color: var(--light-bg-color); border: 1px solid var(--border-color-light); color: var(--primary-color); }
.branch .btn-add-step:hover { background-color: var(--medium-bg-color); }
.loop-config { margin-bottom: 10px; }
.loop-source-row, .loop-variable-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; flex-wrap: wrap;}
.loop-label { font-weight: 600; color: var(--type-loop); margin-right: 5px;}
.loop-source, .loop-variable { font-family: var(--font-family-code); background-color: color-mix(in oklab, var(--type-loop) 15%, var(--surface-raised)); padding: 3px 6px; border-radius: 3px; color: color-mix(in oklab, var(--type-loop) 60%, var(--text)); word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; vertical-align: bottom; }
.loop-body { margin-top: 10px; padding-left: 15px; border-left: 2px solid var(--border); }
.loop-header { font-weight: 600; margin-bottom: 5px; font-size: 0.95em; color: var(--type-loop); }
.loop-steps { margin-left: 15px; padding: 5px 0 5px 15px; border-left: 2px dashed var(--border-color-medium); margin-top: 5px; min-height: 20px; min-width: 400px; width: max-content; overflow-x: auto; display: block; }
.loop-body .btn-add-loop-step { margin-top: 5px; font-size: 0.85em; padding: 3px 8px; background-color: var(--light-bg-color); border: 1px solid var(--border-color-light); color: var(--primary-color); }
.loop-body .btn-add-loop-step:hover { background-color: var(--medium-bg-color); }

/* --- Step Editor Styles --- */
.form-tabs { margin-top: 20px; }
.tab-buttons { display: flex; border-bottom: 1px solid var(--border-color-medium); margin-bottom: 15px; flex-wrap: wrap; }
.tab-button { padding: 10px 15px; cursor: pointer; border: none; background: var(--medium-bg-color); border-radius: var(--border-radius) var(--border-radius) 0 0; margin-right: 5px; position: relative; bottom: -1px; border: 1px solid var(--border-color-light); border-bottom-color: var(--border-color-medium); color: var(--medium-text-color); font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s; margin-bottom: -1px; }
.tab-button.active { background: var(--surface-raised); border-color: var(--border); border-bottom-color: transparent; color: var(--accent); font-weight: var(--fw-semibold); }
.tab-content { display: none; padding-top: 5px; }
.tab-content.active { display: block; }
.btn-add-step, .btn-add-global-header, .btn-add-flow-var, .btn-add-header, .btn-add-extract, .btn-add-loop-step { padding: 5px 10px; background: var(--surface-raised); border: 1px solid var(--border-color-medium); border-radius: var(--border-radius); color: var(--primary-color); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.btn-add-step:hover, .btn-add-global-header:hover, .btn-add-flow-var:hover, .btn-add-header:hover, .btn-add-extract:hover, .btn-add-loop-step:hover { background-color: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 24%, var(--border)); }
.btn-remove-header, .btn-remove-extract, .btn-remove-flow-var, .btn-remove-global-header { background: transparent; border: none; color: var(--danger-color); cursor: pointer; font-size: 16px; padding: 2px 5px; line-height: 1; }
.btn-remove-header:hover, .btn-remove-extract:hover, .btn-remove-flow-var:hover, .btn-remove-global-header:hover { color: var(--danger-hover-color); }
.var-ref { font-family: monospace; display: inline-block; padding: 1px 4px; border-radius: 3px; background: var(--accent-soft); color: color-mix(in oklab, var(--accent) 55%, var(--text)); font-size: 0.95em; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); }
.var-ref.invalid { background: var(--run-error-bg); color: color-mix(in oklab, var(--run-error) 58%, var(--text)); border-color: color-mix(in oklab, var(--run-error) 30%, var(--border)); text-decoration: line-through; font-weight: bold; }

.headers-list, .extracts-list, .global-headers-list, .flow-vars-list {
    margin-bottom: 10px;
}
.header-row, .extract-row, .global-header-row, .flow-var-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 2fr) minmax(90px, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color-light); }
.header-row:last-child, .extract-row:last-child, .global-header-row:last-child, .flow-var-row:last-child { border-bottom: none; margin-bottom: 0; }
.header-row input, .extract-row input, .global-header-row input, .flow-var-row input { min-width: 0; width: 100%; }
.header-row .btn-insert-var, .extract-row .btn-insert-var, .global-header-row .btn-insert-var, .flow-var-row .btn-insert-var { padding: 0; width: 40px; height: 26px; font-size: 12px; border: 1px solid var(--border-color-medium); background: var(--light-bg-color); border-radius: 3px; color: var(--primary-color); line-height: 24px; text-align: center; align-self: center; justify-self: center; }
.header-row .btn-insert-var:hover, .extract-row .btn-insert-var:hover, .global-header-row .btn-insert-var:hover, .flow-var-row .btn-insert-var:hover { background: var(--medium-bg-color); }
.header-row .btn-remove-header, .extract-row .btn-remove-extract, .global-header-row .btn-remove-global-header, .flow-var-row .btn-remove-flow-var { justify-self: end; align-self: center; }
.header-row-no-items, .extract-row-no-items, .global-header-row-no-items, .flow-var-row-no-items { color: var(--text-muted); font-style: italic; padding: 10px 5px; font-size: 0.9em; }

.input-with-vars { position: relative; display: flex; align-items: center; gap: 5px; }
.input-with-vars input, .input-with-vars textarea { flex: 1; min-width: 0; }
.input-with-vars .btn-insert-var { flex-shrink: 0; min-width: 44px; background: var(--light-bg-color); color: var(--primary-color); border: 1px solid var(--border-color-medium); padding: 5px 8px; font-size: 12px; font-weight: bold; border-radius: 3px; height: auto; line-height: 1.5; text-align: center; }
.input-with-vars .btn-insert-var:hover { background-color: var(--medium-bg-color); }
.body-actions { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.body-actions { display: flex; gap: 8px; margin-top: 10px; }

/* --- Drag and Drop Indicators --- */
.flow-step.dragging { opacity: 0.4; background: var(--medium-bg-color); box-shadow: 0 4px 10px color-mix(in oklab, var(--text) 20%, transparent); border-style: dashed !important; }
.flow-step.drop-before::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 4px; background-color: var(--primary-color); border-radius: 2px; z-index: 1; box-shadow: 0 1px 3px color-mix(in oklab, var(--text) 20%, transparent); }
.flow-step.drop-after::after { content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 4px; background-color: var(--primary-color); border-radius: 2px; z-index: 1; box-shadow: 0 1px 3px color-mix(in oklab, var(--text) 20%, transparent); }
body.flow-step-dragging { cursor: grabbing !important; }

/* --- Variable Insertion Dropdown --- */
.var-dropdown { background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--border-radius); box-shadow: var(--box-shadow-overlay); z-index: 11000; width: 280px; font-size: 13px; display: none; }
.var-dropdown-header { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border-color-light); background-color: var(--light-bg-color); }
.var-search { flex: 1; padding: 6px 8px; border: 1px solid var(--border-color-medium); border-radius: 3px; font-size: 13px; }
.var-close { background: transparent; border: none; color: var(--light-text-color); cursor: pointer; font-size: 16px; margin-left: 8px; padding: 0 4px; }
.var-close:hover { color: var(--dark-text-color); }
.var-list { max-height: 220px; overflow-y: auto; }
.var-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--medium-bg-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.var-item:last-child { border-bottom: none; }
.var-item:hover { background: var(--accent-soft); color: color-mix(in oklab, var(--accent) 55%, var(--text)); }
.no-results-msg { padding: 8px 12px; color: var(--text-muted); text-align: center; display: none; }

/* --- Step Type Selection Dialog --- */
.step-type-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 10100; padding: 20px; }
.step-type-container { background: var(--surface-raised); border-radius: 8px; width: 100%; max-width: 650px; box-shadow: var(--box-shadow-overlay); overflow: hidden; }
.step-type-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-color-light); }
.step-type-header h3 { margin: 0; font-size: 1.2em; }
.step-type-close { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--light-text-color); }
.step-type-options { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 15px; }
.step-type-option { border: 1px solid var(--border-color-medium); border-radius: 6px; padding: 20px 15px; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; background-color: var(--surface-raised); }
.step-type-option:hover { border-color: var(--primary-color); background: var(--accent-softer); box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 10%, transparent); transform: translateY(-2px); }
.type-icon { width: 48px; height: 48px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
.type-icon svg { width: 36px; height: 36px; }
.request-icon svg { fill: var(--success-color); }
.condition-icon svg { fill: var(--warning-color); }
.loop-icon svg { fill: var(--type-loop); }
.step-type-option h4 { margin: 0 0 5px 0; font-size: 1.1em; color: var(--dark-text-color); }
.step-type-option p { margin: 0; font-size: 0.9em; color: var(--medium-text-color); line-height: 1.4; }

/* --- In-app confirm dialog (replaces native confirm(); see dialogs.js) --- */
.app-confirm-dialog { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 12500; padding: 20px; }
.app-confirm-container { background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; padding: var(--space-xl); }
.app-confirm-title { margin: 0 0 var(--space-sm); font-size: var(--fs-h4); font-weight: 600; color: var(--text); }
.app-confirm-message { margin: 0 0 var(--space-xl); font-size: var(--fs-base); color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

.app-input-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 96px;
    margin: 0 0 var(--space-xl);
    padding: 10px 12px;
    font-size: var(--fs-body);
    color: var(--text);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}
.app-input-textarea.mono { font-family: var(--font-family-code); }
.app-input-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* --- Node Editor Modal --- */
.node-editor-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    z-index: 10120;
    padding: 24px;
}
.node-editor-dialog {
    width: min(920px, 100%);
    max-height: 90vh;
    background: var(--surface-raised);
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    box-shadow: var(--box-shadow-overlay);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.node-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color-light);
}
.node-editor-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark-text-color);
}
.node-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.node-editor-meta {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color-light);
    background: var(--light-bg-color);
    display: grid;
    gap: 10px;
}
.node-editor-meta-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: center;
}
.node-editor-meta-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--medium-text-color);
}
.node-editor-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.node-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color-light);
    background: var(--surface-raised);
    font-size: 0.85rem;
}
.node-editor-chip-role {
    color: var(--medium-text-color);
    font-weight: 600;
}
.node-editor-chip-name {
    color: var(--dark-text-color);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.node-editor-empty {
    color: var(--light-text-color);
    font-size: 0.85rem;
}
.node-editor-body {
    flex: 1;
    min-height: 0;
    display: flex;
    background: var(--surface-raised);
}
.node-editor-body .step-editor {
    flex: 1;
    min-height: 0;
}

/* --- Flash Messages / Toasts (Builder Area) ---
   Bottom-center of the workspace: never overlaps the editor header (Basic|Power)
   or the runner panel, and reads fine at projector distance. */
.flow-messages { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 40px)); z-index: 10200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.flow-message { pointer-events: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; animation: toast-rise 0.25s var(--ease-out) forwards; background-color: var(--surface-overlay); border: 1px solid var(--border); color: var(--text); display: flex; }
@keyframes toast-rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.flow-message .message-icon { padding: 14px 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--msg, var(--accent)); background: color-mix(in oklab, var(--msg, var(--accent)) 14%, var(--surface-overlay)); }
.flow-message .message-icon .icon { width: 18px; height: 18px; }
.flow-message .message-body { flex: 1; min-width: 0; padding: 10px 36px 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.flow-message .message-content { overflow-wrap: anywhere; }
.flow-message .message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.flow-message .message-header strong { font-size: 1.05em; font-weight: 600; }
.flow-message .message-content, .flow-message .validation-errors { padding: 0; font-size: 0.95em; line-height: 1.4; }
.flow-message .validation-errors { list-style: disc; padding-left: 20px; margin-top: 5px; }
.flow-message .validation-errors li { margin-bottom: 3px; }
.flow-message { position: relative; }
.flow-message .btn-close-message { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 2px; line-height: 0; border-radius: var(--radius-xs); }
.flow-message .btn-close-message:hover { opacity: 1; }
/* --- End Flash Messages (Builder Area) --- */

/* --- Specific Message Styles --- */
.flow-message.info    { --msg: var(--accent); }
.flow-message.success { --msg: var(--run-success); }
.flow-message.error   { --msg: var(--run-error); }
.flow-message.warning { --msg: var(--warning-color); }
/* --- End Specific Message Styles --- */

/* --- Global Loading Indicator --- */
.loading-overlay.global-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: color-mix(in oklab, var(--surface) 85%, transparent); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10300; }
.loading-overlay.global-loading.visible { display: flex; }
.loading-spinner { width: 45px; height: 45px; border: 4px solid var(--medium-bg-color); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-text { margin-top: 15px; font-weight: 500; color: var(--dark-text-color); font-size: 1.1em; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Condition Builder Styles (in Step Editor) --- */
.condition-builder { background-color: var(--surface-sunken); border: 1px solid var(--border); border-radius: 4px; padding: 15px; margin-bottom: 15px; }
.condition-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.condition-item { flex: 1; min-width: 180px; }
.condition-item label { display: block; margin-bottom: 5px; color: var(--medium-text-color); font-weight: 500; font-size: 0.9em; }
.condition-item select, .condition-item input { width: 100%; padding: 8px 10px; }
.condition-item#cond-val-cont { display: none; } /* Initially hidden, JS shows if needed */
.condition-preview { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; margin-top: 10px; }
.condition-preview label { display: block; margin-bottom: 5px; color: var(--text); font-weight: 600; font-size: 0.9em; }
.condition-preview pre { margin: 0; padding: 5px 0; background: transparent; border: none; color: var(--text); font-family: 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 0.95em; word-break: break-word; line-height: 1.4; white-space: pre-wrap;}
#condition-operator optgroup { font-weight: 600; color: var(--dark-text-color); background-color: var(--light-bg-color); padding: 4px 0; margin-top: 5px; }
#condition-operator optgroup:first-of-type { margin-top: 0; }
#condition-operator option { padding: 5px 10px; font-weight: normal; }
.branches-info { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.branch-info { padding: 12px 15px; background: var(--light-bg-color); border: 1px solid var(--border-color-light); border-radius: 4px; }
.then-info { border: 1px solid var(--run-success-line); }
.else-info { border: 1px solid var(--run-error-line); }
.branch-info h4 { margin: 0 0 8px 0; font-size: 1em; color: var(--medium-text-color); font-weight: 600; }
.branch-info p { margin: 0; color: var(--light-text-color); font-size: 0.95em; }

/* --- Visualizer Styles --- */
.drawflow {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    user-select: none;
    z-index: 1;
}

.drawflow .drawflow-node {
    position: absolute;
    display: block;
    align-items: stretch;
    width: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
}

.drawflow-delete {
    display: none;
}

.drawflow .drawflow-node.selected {
    background: transparent !important;
}

.flow-node {
    position: absolute;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 0;
    min-width: 220px;
    max-width: 280px;
    cursor: grab;
    transition: transform 0.15s ease;
    font-size: 13px;
    user-select: none;
    display: block;
    overflow: visible;
    z-index: 10;
    min-height: var(--node-min-height, 140px);
    --node-accent: var(--primary-color);
}
.drawflow .drawflow-node.flow-node {
    padding: 0;
}
.flow-node:hover .flow-node-inner { border-color: var(--border-color-dark); box-shadow: var(--box-shadow-medium); }
.flow-node.dragging { opacity: 0.85; cursor: grabbing; z-index: 1001 !important; transform: scale(1.02); }
.flow-node.dragging .flow-node-inner { border-style: dashed; border-color: var(--primary-color); box-shadow: 0 10px 24px color-mix(in oklab, var(--text) 20%, transparent); }
.flow-node.selected .flow-node-inner { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color), 0 4px 12px color-mix(in oklab, var(--accent) 20%, transparent); }

.flow-node-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color-medium);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.node-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-color-light); background: var(--surface-raised); flex-shrink: 0; }
.node-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--node-accent); }
.node-icon svg { width: 18px; height: 18px; }
.node-name { font-weight: 600; color: var(--dark-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 13px; }
.node-actions { display: flex; gap: 6px; margin-left: auto; align-items: center; opacity: 0; transition: opacity var(--dur-1, 120ms) ease-out; }
.flow-node:hover .node-actions,
.flow-node.selected .node-actions,
.node-actions:focus-within { opacity: 1; }
html.demo-mode .node-actions { display: none; }
.node-runtime-details:empty { display: none; }
.node-actions button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--light-text-color); font-size: 12px; line-height: 1; border-radius: 6px; }
.node-actions button:hover { color: var(--dark-text-color); background-color: var(--medium-bg-color); border-color: var(--border-color-light); }
.node-actions .btn-delete-node:hover { color: var(--danger-color); background-color: var(--run-error-bg); border-color: color-mix(in oklab, var(--run-error) 30%, var(--border)); }

.node-content {
    padding: 10px 12px 12px;
    background: var(--light-bg-color);
    color: var(--medium-text-color);
    font-size: 0.92em;
    word-wrap: break-word;
    flex-grow: 1;
    line-height: 1.4;
    overflow: hidden;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.node-content code { background-color: var(--surface-raised); padding: 2px 5px; border-radius: 3px; font-size: 0.9em; color: var(--dark-text-color); border: 1px solid var(--border-color-light); word-break: break-word; }
.node-content .request-method { font-weight: 600; padding: 2px 6px; border-radius: 3px; margin-right: 5px; background: color-mix(in oklab, var(--rm, var(--method-neutral)) 16%, var(--surface-raised)); color: var(--rm, var(--method-neutral)); font-size: 0.85em; text-transform: uppercase; display: inline-block; }
.node-content .request-method.GET { --rm: var(--method-get); }
.node-content .request-method.POST { --rm: var(--method-post); }
.node-content .request-method.PUT { --rm: var(--method-put); }
.node-content .request-method.PATCH { --rm: var(--method-patch); }
.node-content .request-method.DELETE { --rm: var(--method-delete); }
.node-content .request-method.OPTIONS { --rm: var(--method-neutral); }
.node-content .request-method.HEAD { --rm: var(--type-loop); }
.node-content .request-method.TRANSFORM { --rm: var(--type-transform); }
.node-content .node-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.node-content .node-line .request-method { flex-shrink: 0; }
.node-content .request-url { font-family: var(--font-family-code); font-size: 0.85em; color: var(--text-muted); background: none; border: none; padding: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-content .condition-code { font-family: var(--font-family-code); background-color: var(--run-running-bg); padding: 3px 6px; border-radius: 3px; color: color-mix(in oklab, var(--warning-color) 55%, var(--text)); word-break: break-word; flex: 1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; vertical-align: bottom; }
.node-content .loop-source { font-family: var(--font-family-code); background-color: color-mix(in oklab, var(--type-loop) 15%, var(--surface-raised)); padding: 3px 6px; border-radius: 3px; color: color-mix(in oklab, var(--type-loop) 60%, var(--text)); word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: inline-block; vertical-align: bottom; }
.flow-node.type-request { --node-accent: var(--success-color); }
.flow-node.type-condition { --node-accent: var(--warning-color); }
.flow-node.type-loop { --node-accent: var(--type-loop); }
.flow-node.type-transform { --node-accent: var(--type-transform); }

.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}
.drawflow .drawflow-node .inputs { left: 0; }
.drawflow .drawflow-node .outputs { right: 0; }

.drawflow .drawflow-node .drawflow_content_node {
    width: 100%;
    height: 100%;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    pointer-events: auto;
    position: relative;
    width: 12px;
    height: 12px;
    margin: 0;
    left: 0;
    right: auto;
    top: 0;
    border: 2px solid var(--border-color-dark);
    background-color: var(--surface-raised);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--surface-raised);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: crosshair;
}
.drawflow .drawflow-node .input {
    transform: translateX(-50%);
}
.drawflow .drawflow-node .output {
    left: auto;
    right: 0;
    transform: translateX(-50%);
}
.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.drawflow .drawflow-node .input:hover {
    transform: translateX(-50%) scale(1.1);
}
.drawflow .drawflow-node .output:hover {
    transform: translateX(-50%) scale(1.1);
}
.drawflow .drawflow-node.flow-node.type-condition .output.output_2 {
    border-color: var(--success-color);
}
.drawflow .drawflow-node.flow-node.type-condition .output.output_3 {
    border-color: var(--danger-color);
}
.drawflow .drawflow-node.flow-node.type-loop .output.output_2 {
    border-color: var(--type-loop);
}

.drawflow .drawflow-node .output::after,
.drawflow .drawflow-node .input::after {
    position: absolute;
    font-size: 9px;
    font-weight: 600;
    color: var(--light-text-color);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-raised);
    border: 1px solid var(--border-color-light);
    border-radius: 999px;
    padding: 1px 6px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.drawflow .drawflow-node .input::after {
    content: 'In';
    left: 14px;
    top: -7px;
}
.drawflow .drawflow-node .output.output_1::after {
    content: 'Next';
    right: 16px;
    top: -7px;
}
.drawflow .drawflow-node.flow-node.type-condition .output.output_2::after {
    content: 'Then';
    color: var(--success-color);
}
.drawflow .drawflow-node.flow-node.type-condition .output.output_3::after {
    content: 'Else';
    color: var(--danger-color);
}
.drawflow .drawflow-node.flow-node.type-loop .output.output_2::after {
    content: 'Loop';
    color: var(--type-loop);
}
.drawflow .drawflow-node.flow-node.type-condition .output.output_2::after,
.drawflow .drawflow-node.flow-node.type-condition .output.output_3::after,
.drawflow .drawflow-node.flow-node.type-loop .output.output_2::after {
    opacity: 1;
    transform: translateX(0);
}
.drawflow .drawflow-node:hover .output::after,
.drawflow .drawflow-node:hover .input::after {
    opacity: 1;
    transform: translateX(0);
}

.node-runtime-details {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color-light);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--medium-text-color);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    overflow: visible;
}

.node-runtime-details .info-item {
    white-space: nowrap;
    padding: 1px 4px;
    border-radius: 3px;
    background-color: var(--medium-bg-color);
}

.node-runtime-details .info-item strong {
    font-weight: 600;
}

.node-runtime-details .info-item.status-success { background-color: var(--run-success-bg); color: color-mix(in oklab, var(--run-success) 58%, var(--text)); }
.node-runtime-details .info-item.status-error { background-color: var(--run-error-bg); color: color-mix(in oklab, var(--run-error) 58%, var(--text)); }
.node-runtime-details .info-item.status-warn { background-color: var(--run-running-bg); color: color-mix(in oklab, var(--run-running) 58%, var(--text)); }
.node-runtime-details .info-item.extract-success { background-color: var(--run-success-bg); color: color-mix(in oklab, var(--run-success) 58%, var(--text)); }
.node-runtime-details .info-item.extract-error { background-color: var(--run-error-bg); color: color-mix(in oklab, var(--run-error) 58%, var(--text)); }
.node-runtime-details .info-item.extract-neutral { background-color: var(--surface-sunken); color: var(--text-muted); }

@keyframes pulse-border-amber { 0% { border-color: var(--run-running); box-shadow: 0 0 0 0px color-mix(in oklab, var(--run-running) 30%, transparent); } 50% { border-color: var(--run-running); box-shadow: 0 0 0 3px color-mix(in oklab, var(--run-running) 10%, transparent); } 100% { border-color: var(--run-running); box-shadow: 0 0 0 0px color-mix(in oklab, var(--run-running) 30%, transparent); } }
.flow-node.active-step .flow-node-inner { border-color: var(--warning-color) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--run-running) 40%, transparent); animation: pulse-border-amber 1.8s infinite ease-in-out; }
.flow-node.success .flow-node-inner { border-color: var(--success-color) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--run-success) 30%, transparent); }
.flow-node.error .flow-node-inner { border-color: var(--danger-color) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--run-error) 30%, transparent); }
.flow-node.stopped .flow-node-inner { border-color: var(--secondary-color) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--run-skipped) 30%, transparent); }

.flow-connector { z-index: 1; }
.drawflow .connection .main-path {
    stroke: var(--border-strong);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
    vector-effect: non-scaling-stroke;
}
.drawflow .connection { z-index: 0; }
.drawflow .connection .main-path.selected { stroke: var(--primary-color); }
.drawflow .connection .point { display: none; }
.drawflow .connection.connector-then .main-path { stroke: var(--success-color); }
.drawflow .connection.connector-else .main-path { stroke: var(--danger-color); }
.drawflow .connection.connector-loop .main-path { stroke: var(--type-loop); }
.connector-path {
    stroke: var(--border-color-dark);
    stroke-width: 2;
    fill: none !important;
    vector-effect: non-scaling-stroke;   /* crisp 1 px at any zoom */
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}
.connector-path:hover {
    stroke: var(--primary-color);
    stroke-width: 3;
}
.connector-arrowhead {
    fill: var(--border-color-dark);
    transition: fill 0.2s ease;
}
.connector-arrowhead.hover {
    fill: var(--primary-color);
}

@keyframes dash-animation { to { stroke-dashoffset: -20; } }
.connector-path.active-connector {
    stroke-dasharray: 8 4;
    animation: dash-animation 0.6s linear infinite;
}
.connector-path.status-active,
.connector-arrowhead.status-active {
    stroke: var(--warning-color);
    fill: var(--warning-color);
    stroke-width: 2.5;
}
.connector-path.status-success,
.connector-arrowhead.status-success {
    stroke: var(--success-color);
    fill: var(--success-color);
    stroke-width: 2.5;
    stroke-dasharray: none;
    animation: none;
}
.connector-path.status-error,
.connector-arrowhead.status-error {
    stroke: var(--danger-color);
    fill: var(--danger-color);
    stroke-width: 2.5;
    stroke-dasharray: 2 3;
    animation: dash-animation 0.3s linear infinite;
}
.connector-path.status-stopped,
.connector-arrowhead.status-stopped {
    stroke: var(--secondary-color);
    fill: var(--secondary-color);
    stroke-width: 2;
    stroke-dasharray: none;
    animation: none;
}

.connector-path.status-active,
.connector-path.status-success,
.connector-path.status-error,
.connector-path.status-stopped {
    fill: none !important;
}

/* --- Responsive Overrides --- */
@media (max-width: 1200px) {
    .runner-panel:not(.collapsed) { width: 300px; }
    .sidebar:not(.collapsed) { width: 250px; }
     .variables-panel.visible { /* Max height for smaller screens */
        max-height: 60vh;
    }
}

@media (max-width: 1024px) {
    .app-container { flex-direction: column; height: auto; min-height: 100vh; }
    .sidebar, .sidebar.collapsed { width: 100%; height: auto; max-height: 35vh; border-right: none; border-bottom: 1px solid var(--border-color-light); }
    .runner-panel, .runner-panel.collapsed { width: 100%; height: auto; max-height: 45vh; border-left: none; border-top: 1px solid var(--border-color-light); order: 3; }
    .workspace { order: 2; min-height: 500px; }
    .flow-messages { bottom: 10px; left: 50%; width: calc(100% - 20px); }
    .workspace-header { flex-wrap: wrap; }
    .workspace-file-controls { order: 1; margin-left: 0; }
    .workspace-view-controls { order: 2; margin-left: 0; }
    .workspace-header h2 { order: 0; width: 100%; text-align: center; margin-bottom: 10px; flex-grow: 0; min-width: auto; }
    .collapsible-pane.collapsed { max-height: 60px; }
    .collapsible-pane.collapsed .sidebar-header,
    .collapsible-pane.collapsed .runner-header { padding: 10px; }

    .flow-info-overlay.open,
    .variables-panel.visible {
        max-height: 40vh; /* Or a suitable max height for stacked layout */
    }
}

@media (max-width: 768px) {
    .flow-info-overlay.open { max-height: 40vh; }
    .flow-builder-section{
        grid-template-columns: 1fr;
        grid-template-rows: var(--steps-height) var(--gutter) 1fr;
      }
      .pane-resizer{
        cursor: row-resize;
      }
      .pane-resizer::before{
        background:
          linear-gradient(transparent 45%,var(--border) 45%,var(--border) 55%,transparent 55%);
        background-size:100% 4px;
      }
    .header-row, .extract-row, .global-header-row, .flow-var-row { grid-template-columns: 1fr auto auto auto; }
    .header-row input, .extract-row input, .global-header-row input, .flow-var-row input { grid-column: 1 / 2; }
    .header-row input:nth-of-type(2), .extract-row input:nth-of-type(2), .global-header-row input:nth-of-type(2), .flow-var-row input:nth-of-type(2) { margin-top: 5px; }
    .header-row .btn-insert-var, .extract-row .btn-insert-var, .global-header-row .btn-insert-var, .flow-var-row .btn-insert-var { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
    .header-row .btn-remove-header, .extract-row .btn-remove-extract, .global-header-row .btn-remove-global-header, .flow-var-row .btn-remove-flow-var { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
    .condition-row { flex-direction: column; gap: 10px; }
    .condition-item { width: 100%; min-width: unset; }
    .branches-info { grid-template-columns: 1fr; gap: 10px; }
    .runner-controls .control-group { justify-content: center; }
}

/* Utility */
.hidden { display: none !important; }

/* --- Button Alignment & Style Tweaks --- */
.flow-step-header, .step-editor-actions, .sidebar-header, .runner-header, .tab-buttons {
  display: flex;
  align-items: center;
}
.flow-step-actions, .step-editor-actions, .tab-buttons {
  gap: 8px;
}
.flow-step-actions button, .step-editor-actions button, .tab-buttons button {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-step-actions button {
  min-width: 32px;
  min-height: 32px;
}
.step-editor-actions {
  justify-content: flex-end;
}
.tab-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.sidebar-header button, .runner-header button {
  align-self: center;
}

.flow-step-actions button:last-child, .step-editor-actions button:last-child, .tab-buttons button:last-child {
  margin-right: 0;
}

.transform-op-row {
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--surface-raised);
}
.transform-op-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.transform-op-index {
  font-weight: 600;
  color: var(--medium-text-color);
}
.transform-op-type {
  flex: 1;
}
.transform-op-actions {
  display: flex;
  gap: 6px;
}
.transform-op-actions button {
  border: 1px solid var(--border-color-light);
  background: var(--surface-sunken);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
}
.transform-op-body .form-group {
  margin-bottom: 8px;
}
.transform-ops-list .empty-branch {
  color: var(--light-text-color);
  padding: 6px 0;
}

.flow-steps-container {
  overflow-x: auto;
  min-width: 100%;
  position: relative;
}
.branch-steps, .loop-steps {
  min-width: 400px;
  width: max-content;
  overflow-x: auto;
  display: block;
}
.pane-resizer{
    cursor: col-resize;
    position: relative;
    touch-action: none;
  }
  .pane-resizer::before{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(90deg,transparent 45%,var(--border) 45%,var(--border) 55%,transparent 55%);
    background-size:4px 100%;
    opacity:.4;
    transition:opacity .15s;
  }
  .pane-resizer:hover::before{opacity:.9}

/* --- Update Info Dialog Styles --- */
.update-info-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim);
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    z-index: 10150; /* Higher than other modals */
    padding: 20px;
}

.update-info-container {
    background: var(--surface-raised);
    border-radius: 8px;
    width: 100%;
    max-width: 500px; /* Adjust width as needed */
    box-shadow: var(--box-shadow-overlay);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.update-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color-light);
    background-color: var(--light-bg-color);
}

.update-info-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--dark-text-color);
}

.update-info-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--light-text-color);
    padding: 0 4px;
}
.update-info-close:hover {
     color: var(--dark-text-color);
}

.update-info-body {
    padding: 25px 20px;
    line-height: 1.6;
    max-height: 60vh;
    overflow-y: auto;
}

.update-info-message {
    margin: 0;
    white-space: pre-wrap; /* Respect newlines in messages */
}

/* Style for the button link inside the dialog */
.update-info-message a.btn {
    display: inline-block;
    margin-top: 15px;
    text-decoration: none;
}

/* --- FlowVisualizer minimap enhancements --- */
.visualizer-minimap rect {
    shape-rendering: crispEdges;            /* pixel-perfect hairlines       */
}

.visualizer-minimap rect:hover {
    stroke-width: 2;                        /* hint the user can click / pan */
}

.visualizer-minimap .minimap-node-frame {
    stroke: var(--accent);        /* blue-500 – easy to spot           */
    stroke-width: 2.25;     /* thicker than connector hairlines  */
    filter: drop-shadow(0 0 1px var(--accent));          /* light glow */
    vector-effect: non-scaling-stroke;               /* stays ≥2 px no matter zoom */
}

.visualizer-minimap .minimap-node-frame.highlighted {
    stroke: var(--run-running);        /* optional – orange when a node is  */
    filter: drop-shadow(0 0 2px var(--run-running));   /*   hovered / selected        */
}

.visualizer-canvas.nodes-dragging {
    cursor: grabbing !important;            /* keep hand cursor on drag      */
}

/* === WAVE2 LANE inspector === */
/* Inline step inspector: Basic/Power progressive disclosure + at-a-glance
   summary + read-only ##VAR## body-marker preview. Consumes OKLCH semantic
   tokens only (docs/design-tokens.md) — no hardcoded colors, no #000/#fff. */

.inspector .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Basic/Power segmented toggle */
.inspector-disclosure {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.inspector-disclosure-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.inspector-disclosure-btn:hover {
    color: var(--text);
}

.inspector-disclosure-btn.active {
    background: var(--accent);
    color: var(--accent-contrast);
}

.inspector-disclosure-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* === WAVE2 LANE canvas ===
   "Tidy Up" relayout animation + on-node run-error badges.
   Consumes semantic tokens only (docs/design-tokens.md); no hardcoded colors.
   The relayout animation touches transform/opacity ONLY (FLIP), so it stays on
   the compositor and never triggers layout thrash during the ~200ms ease-out. */

.drawflow-node.flow-node.tidy-relayout {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .drawflow-node.flow-node.tidy-relayout {
        transition: none;
    }
}

/* --- On-node error badges (surface per-step run failures on the node) --- */
.drawflow-node.flow-node.has-run-error {
    border-color: var(--run-error);
    box-shadow: 0 0 0 1px var(--run-error);
}

/* The node header hosts the badge; anchor it to the top-right corner pip. */
.drawflow-node.flow-node.has-run-error .node-header {
    position: relative;
}

.node-error-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--surface-raised);
    border-radius: 50%;
    background: var(--run-error);
    color: var(--accent-contrast);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 3px var(--focus-ring);
}

.node-error-badge:hover {
    filter: brightness(1.08);
}

.node-error-badge:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

/* At-a-glance summary chips (visible primarily in Basic mode) */
.inspector-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 0.65rem;
}

.inspector-summary:empty {
    display: none;
}

.inspector-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text);
}

.inspector-chip-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.66rem;
    font-weight: 600;
}

.inspector-chip-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Progressive disclosure: hide Power-only blocks while in Basic mode. */
.inspector.inspector-mode-basic .power-only {
    display: none !important;
}

/* In Power mode the summary is redundant with the expanded fields; keep it
   subtle rather than removing it (so the author never loses their bearings). */
.inspector.inspector-mode-power .inspector-summary {
    opacity: 0.65;
}

/* Read-only ##VAR## marker preview — visually distinct from an editable field
   so no one mistakes it for the body input. */
.raw-body-markers {
    width: 100%;
    background: var(--surface-sunken);
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    cursor: default;
    resize: vertical;
}

.raw-body-markers:focus {
    outline: none;
    border-color: var(--border-strong);
}
/* === /WAVE2 LANE inspector === */
.node-error-badge-icon {
    pointer-events: none;
}
/* === WAVE2 LANE node-features === */
/* Reusable command/search palette overlay (palette.js) + read-only
   View-as-JSON panel (jsonView.js). Consumes OKLCH semantic tokens only —
   no hardcoded colors, no #000/#fff. */

/* --- Palette overlay --- */
.palette-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: color-mix(in oklab, var(--text) 45%, transparent);
    z-index: 12000;
}

.palette-overlay.open {
    display: flex;
}

.palette-panel {
    width: min(640px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 48px color-mix(in oklab, var(--text) 30%, transparent);
    overflow: hidden;
}

.palette-search-wrap {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}

.palette-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}

.palette-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* === WAVE2 LANE file-features === */
/* Fuzzy-search boxes (recent files + steps) and undo/redo search-hidden rows.
   Consumes Wave 1 OKLCH semantic tokens only — no hardcoded colors. */

.sidebar-search {
    padding: 0 8px 8px;
}

.sidebar-search-input,
.steps-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 4px);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-search-input::placeholder,
.steps-search-input::placeholder {
    color: var(--text-muted);
}

.sidebar-search-input:focus,
.steps-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.palette-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.palette-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
}

.palette-item .palette-item-label {
    font-size: 14px;
    font-weight: 500;
}

.palette-item .palette-item-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.palette-item.active,
.palette-item:hover {
    background: color-mix(in oklab, var(--accent) 16%, var(--surface-raised));
}

.palette-item.active {
    box-shadow: inset 2px 0 0 var(--accent);
}

.palette-item .palette-match {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
}

.palette-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* --- View-as-JSON read-only panel --- */
.jsonview-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    color: var(--text);
}

.jsonview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}

.jsonview-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.jsonview-status {
    font-size: 12px;
    color: var(--text-muted);
}

.jsonview-status.changed {
    color: var(--run-running);
    font-weight: 600;
}

.jsonview-status.saved {
    color: var(--run-success);
}

.jsonview-mode-toggle {
    margin-left: auto;
}

.jsonview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 0;
    background: var(--surface-sunken);
}

.jsonview-raw,
.jsonview-diff {
    margin: 0;
    padding: 4px 0;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
}

.jsonview-raw code {
    display: block;
    padding: 0 14px;
    white-space: pre;
}

.jsonview-line {
    display: flex;
    gap: 8px;
    padding: 0 14px;
    white-space: pre;
}

.jsonview-line .jsonview-gutter {
    flex: 0 0 auto;
    width: 1ch;
    color: var(--text-muted);
    user-select: none;
}

.jsonview-line .jsonview-text {
    flex: 1 1 auto;
    white-space: pre;
}

.jsonview-line.add {
    background: color-mix(in oklab, var(--run-success) 18%, transparent);
}

.jsonview-line.add .jsonview-gutter {
    color: var(--run-success);
}

.jsonview-line.remove {
    background: color-mix(in oklab, var(--run-error) 18%, transparent);
}

.jsonview-line.remove .jsonview-gutter {
    color: var(--run-error);
}

.jsonview-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
/* === END WAVE2 LANE node-features === */
.steps-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.steps-search-input {
    flex: 1 1 auto;
}

.steps-search-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Rows filtered out by a live search are hidden but kept in the DOM so drag
   order / selection / open editors survive clearing the query. */
.search-hidden {
    display: none !important;
}

/* Placeholder shown when a file search yields nothing. */
.flow-list .search-no-matches {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Subtle emphasis on a step that directly matches the steps search. */
.flow-step.search-match > .flow-step-header {
    box-shadow: inset 3px 0 0 0 var(--accent);
}
/* === END WAVE2 LANE file-features === */

/* === WAVE3 demo-mode === */
/* Two features share this block:
   (A) DEMO MODE — a projector presentation view, activated by `html.demo-mode`
       (toggled by demoMode.js). It hides authoring chrome, enlarges nodes + the
       run-status readout, and makes pass/fail the visual focus. Status is
       conveyed by a GLYPH as well as hue (WCAG 1.4.1 — legible when projected
       and for colour-blind viewers). Keeps the light-default projector theme and
       consumes ONLY the OKLCH semantic tokens.
   (B) GUIDED FIRST-RUN — teaching empty-states + the dismissible onboarding
       overlay (firstRun.js).
   No hardcoded colours; no #000/#fff; semantic tokens only. */

/* Demo-Mode toolbar toggle: show its active (pressed) state distinctly. */
#demo-mode-btn[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

/* ---- (A) DEMO MODE: hide authoring chrome --------------------------------- */
/* Collapse the side panels and per-step editing chrome so the graph + status
   fill the projected screen. Left additive/reversible: removing the class
   restores every panel. */
html.demo-mode .sidebar,
html.demo-mode .runner-panel,
html.demo-mode .workspace-file-controls,
html.demo-mode #file-search-wrap,
html.demo-mode #steps-search-wrap,
html.demo-mode .flow-info-overlay,
html.demo-mode .variables-panel,
html.demo-mode #toggle-info-btn,
html.demo-mode #toggle-variables-btn,
html.demo-mode #tidy-up-btn,
html.demo-mode #next-error-btn,
html.demo-mode #import-curl-btn,
html.demo-mode #import-har-btn {
    display: none !important;
}

/* Give the workspace the full width once the flex side panes are hidden. */
html.demo-mode .workspace {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* Bigger, calmer header; the flow title becomes the headline. */
html.demo-mode .workspace-header {
    background: var(--surface-raised);
    border-bottom: 2px solid var(--border-strong);
    padding: 14px 22px;
}
html.demo-mode #workspace-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
}

/* ---- (A) DEMO MODE: enlarge nodes + make status the focus ----------------- */
html.demo-mode .flow-node {
    transform: scale(1.12);
    transform-origin: center;
}
html.demo-mode .node-name {
    font-size: 17px;
}
html.demo-mode .flow-node-inner {
    border-width: 2px;
}

/* Thicker, higher-contrast status rings on run outcome. */
html.demo-mode .flow-node.success .flow-node-inner {
    border-color: var(--run-success) !important;
    box-shadow: 0 0 0 4px var(--run-success);
}
html.demo-mode .flow-node.error .flow-node-inner {
    border-color: var(--run-error) !important;
    box-shadow: 0 0 0 4px var(--run-error);
}
html.demo-mode .flow-node.stopped .flow-node-inner {
    border-color: var(--run-skipped) !important;
    box-shadow: 0 0 0 4px var(--run-skipped);
}
html.demo-mode .flow-node.active-step .flow-node-inner {
    border-color: var(--run-running) !important;
    box-shadow: 0 0 0 4px var(--run-running);
}

/* GLYPH-not-hue: a large status glyph badge on each run-state node so pass/fail
   reads without relying on colour. The glyph text is set per-state below. */
html.demo-mode .flow-node.success .flow-node-inner::before,
html.demo-mode .flow-node.error .flow-node-inner::before,
html.demo-mode .flow-node.stopped .flow-node-inner::before,
html.demo-mode .flow-node.active-step .flow-node-inner::before {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-contrast);
    background: var(--text-muted);
    box-shadow: 0 2px 6px var(--focus-ring);
    z-index: 2;
}
html.demo-mode .flow-node.success .flow-node-inner::before {
    content: "\2713"; /* check mark */
    background: var(--run-success);
}
html.demo-mode .flow-node.error .flow-node-inner::before {
    content: "\2715"; /* multiplication x */
    background: var(--run-error);
}
html.demo-mode .flow-node.stopped .flow-node-inner::before {
    content: "\25A0"; /* filled square (stop) */
    background: var(--run-skipped);
}
html.demo-mode .flow-node.active-step .flow-node-inner::before {
    content: "\25B6"; /* right-pointing triangle (running) */
    background: var(--run-running);
}
/* The node-inner is the positioning context for the badge. */
html.demo-mode .flow-node-inner {
    position: relative;
    overflow: visible;
}

/* ---- (B) GUIDED FIRST-RUN: teaching empty-states -------------------------- */
.guided-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    max-width: 440px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    color: var(--text);
}
.guided-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: var(--space-2xs);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}
.guided-empty-title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    color: var(--text);
}
.guided-empty-body {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.5;
}
.guided-empty-actions {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}
.guided-empty-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
                transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.guided-empty-action::after {
    content: "\2192"; /* → */
    position: absolute;
    right: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 1.15rem;
    transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.guided-empty-action:hover {
    border-color: var(--accent);
    background: var(--accent-softer);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.guided-empty-action:hover::after {
    color: var(--accent);
    transform: translate(3px, -50%);
}
.guided-empty-action:active { transform: translateY(0); }
.guided-empty-action:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.guided-action-label {
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.guided-action-hint {
    font-size: var(--fs-body);
    color: var(--text-muted);
}

/* ---- (B) GUIDED FIRST-RUN: onboarding overlay ----------------------------- */
.guided-onboarding {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--focus-ring);
}
.guided-onboarding-card {
    width: min(480px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 12px 40px var(--focus-ring);
    padding: 22px 24px;
}
.guided-onboarding-header h3 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    color: var(--text);
}
.guided-onboarding-intro {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.guided-onboarding-steps {
    list-style: none;
    counter-reset: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.guided-onboarding-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: baseline;
}
.guided-onboarding-num {
    grid-row: 1 / span 2;
    align-self: center;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-contrast);
    background: var(--accent);
}
.guided-onboarding-label {
    font-weight: 600;
    color: var(--text);
}
.guided-onboarding-hint {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.guided-onboarding-footer {
    display: flex;
    justify-content: flex-end;
}
/* === END WAVE3 demo-mode === */

/* === WAVE3 assertions === per-step assertion editor, result rows + test-summary panel.
   Consumes semantic tokens only (docs/design-tokens.md); no hardcoded colors. */

/* ---- Power-mode assertion editor ---- */
.assertions-editor .assertions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.assertion-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1.2fr) auto auto;
    gap: 6px;
    align-items: center;
}
.assertion-row .assertion-target,
.assertion-row .assertion-value,
.assertion-row .assertion-operator {
    min-width: 0;
}
.assertion-row .assertion-critical {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.85em;
    color: var(--text-muted);
}
.assertion-row .btn-remove-assertion {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--text-muted);
    border-radius: 4px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}
.assertion-row .btn-remove-assertion:hover {
    color: var(--run-error);
    border-color: var(--run-error);
}
.assertions-editor .assertions-empty {
    padding: 6px 2px;
}

/* ---- Per-step assertion results (inside a result item) ---- */
.result-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.result-assert-badge {
    font-size: 0.78em;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.result-assert-badge.assert-pass {
    color: var(--run-success);
    border-color: color-mix(in oklch, var(--run-success) 45%, var(--border));
    background: color-mix(in oklch, var(--run-success) 12%, var(--surface-raised));
}
.result-assert-badge.assert-fail,
.result-assert-badge.assert-critical {
    color: var(--run-error);
    border-color: color-mix(in oklch, var(--run-error) 45%, var(--border));
    background: color-mix(in oklch, var(--run-error) 12%, var(--surface-raised));
}
.result-assertions {
    margin: 6px 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
}
.result-assertions.has-fail {
    border-color: color-mix(in oklch, var(--run-error) 40%, var(--border));
}
.result-assertions > strong {
    display: block;
    font-size: 0.85em;
    margin-bottom: 4px;
    color: var(--text-muted);
}
.result-assertions ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.assert-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--text);
}
.assert-row .assert-mark {
    width: 1em;
    font-weight: 700;
    flex: 0 0 auto;
}
.assert-row.assert-pass .assert-mark { color: var(--run-success); }
.assert-row.assert-fail .assert-mark { color: var(--run-error); }
.assert-row .assert-label {
    background: transparent;
    padding: 0;
}
.assert-row .assert-actual {
    color: var(--run-error);
    font-size: 0.92em;
}
.assert-row .assert-crit-tag {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--run-error);
    border: 1px solid color-mix(in oklch, var(--run-error) 45%, var(--border));
    border-radius: 3px;
    padding: 0 4px;
}

/* ---- Aggregate test-summary panel ---- */
.runner-test-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
}
.runner-test-summary .test-summary-verdict {
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 12px;
    border-radius: 6px;
    color: var(--accent-contrast);
}
.runner-test-summary.summary-pass {
    border-color: color-mix(in oklch, var(--run-success) 45%, var(--border));
}
.runner-test-summary.summary-pass .test-summary-verdict {
    background: var(--run-success);
}
.runner-test-summary.summary-fail,
.runner-test-summary.summary-critical {
    border-color: color-mix(in oklch, var(--run-error) 45%, var(--border));
}
.runner-test-summary.summary-fail .test-summary-verdict,
.runner-test-summary.summary-critical .test-summary-verdict {
    background: var(--run-error);
}
.runner-test-summary .test-summary-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.88em;
    color: var(--text-muted);
}
.runner-test-summary .test-summary-count.pass strong { color: var(--run-success); }
.runner-test-summary .test-summary-count.fail strong { color: var(--run-error); }
.runner-test-summary .test-summary-count.critical {
    color: var(--run-error);
    font-weight: 600;
}
/* === END WAVE3 assertions === */

/* =========================================================================
   SENTINEL SHELL — "the defense console" (UX Wave 3.6)
   Thesis: STATE BEFORE LABEL. --accent means only "actionable / selected";
   the four run-state hues own all meaning. Hierarchy = scale + weight.
   Icons inherit their row's color. Semantic tokens only, no hardcoded colors.
   ========================================================================= */

/* Icons inside buttons/rows inherit the label color (dim/lift together). */
.btn .icon, .sidebar-actions .btn .icon, .flow-list-item .icon { color: inherit; }

/* ---- Tertiary / ghost button: quiet until touched ---- */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--accent-softer); color: var(--text); border-color: transparent; }
.btn-ghost:active:not(:disabled) { background: var(--accent-soft); }

/* ---- Mode toggle (Demo Mode): ghost at rest, armed = accent-soft + live dot ---- */
.btn-toggle { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-toggle:hover:not(:disabled) { background: var(--accent-softer); color: var(--text); }
.btn-toggle[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
    color: var(--accent);
}

/* ---- LOCKED run-state button sub-family. DO NOT recolor from generic button
       work — these carry the app's semantic vocabulary (run-state = meaning). ---- */
.btn-run-go { background: var(--run-success); border-color: var(--run-success); color: var(--accent-contrast); box-shadow: var(--shadow-xs); }
.btn-run-go:hover:not(:disabled) { background: color-mix(in oklab, var(--run-success) 88%, black); border-color: color-mix(in oklab, var(--run-success) 88%, black); }
/* Quiet run-control family: neutral at rest, intent color only on hover, so
   Run (the solid green primary) is the single loud element in the cluster. */
.btn-run-step, .btn-run-bg { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-run-step:hover:not(:disabled), .btn-run-bg:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-run-stop { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-run-stop:hover:not(:disabled) { background: var(--run-error-bg); border-color: var(--run-error); color: var(--run-error); }

/* ---- Segmented control (List | Visual) — replaces the legacy single toggle ---- */
#toggle-view-btn { display: none !important; }
.segmented {
    position: relative; display: inline-flex; align-items: center; flex: none;
    height: var(--track-height); padding: 3px;
    background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.segmented__cell {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
    height: calc(var(--track-height) - 6px); padding: 0 12px;
    border: none; background: transparent; color: var(--text-muted);
    font-size: var(--fs-body); font-weight: var(--fw-medium); font-family: inherit;
    border-radius: calc(var(--radius-sm) - 2px); white-space: nowrap; cursor: pointer;
    transition: color var(--dur-1) var(--ease-out);
}
.segmented__cell[aria-selected="true"] { color: var(--accent); }
.segmented__cell:hover:not([aria-selected="true"]) { color: var(--text); }
.segmented__cell .icon { width: 15px; height: 15px; }
.segmented__thumb {
    position: absolute; z-index: 0; top: 3px; left: 3px;
    height: calc(var(--track-height) - 6px);
    background: var(--surface-raised); border-radius: calc(var(--radius-sm) - 2px); box-shadow: var(--shadow-xs);
    transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}

/* ---- System Status Pip (THE signature) + command-bar dirty pip ---- */
.status-pip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-family-code); font-size: 11px; font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--status-idle); white-space: nowrap;
}
.status-pip .status-dot { width: var(--pip-size); height: var(--pip-size); color: var(--status-idle); border-radius: 50%; }
.status-pip[data-state="running"], .status-pip[data-state="running"] .status-dot { color: var(--run-running); }
.status-pip[data-state="success"], .status-pip[data-state="success"] .status-dot { color: var(--run-success); }
.status-pip[data-state="error"],   .status-pip[data-state="error"]   .status-dot { color: var(--run-error); }
.status-pip[data-state="running"] .status-dot { animation: pip-ring 1.4s var(--ease-out) infinite; }
.runner-header .status-pip .status-dot { width: 10px; height: 10px; }

@keyframes pip-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--run-running) 50%, transparent); }
    70%  { box-shadow: 0 0 0 5px color-mix(in oklab, var(--run-running) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--run-running) 0%, transparent); }
}

/* ---- Brand lockup: wordmark stays --text so the PIP is the dominant mark ---- */
.app-branding { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 var(--space-lg); }
.ase-logo { width: 22px; margin-top: 0; }
.app-name-text { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: 0.2px; line-height: 1; font-family: var(--font-family); }
.app-branding .status-pip { margin-left: auto; }

/* ---- Action rack: ONE primary + a quiet ghost cluster with an icon gutter ---- */
.sidebar-actions { padding: var(--space-md); gap: 2px; }
.sidebar-actions .btn { width: 100%; justify-content: flex-start; }
.sidebar-actions .btn-primary { height: 36px; gap: 10px; margin-bottom: 6px; font-size: var(--fs-body); }
.sidebar-actions .btn-ghost { position: relative; height: 34px; padding: 0 10px; gap: 10px; border-radius: var(--radius-sm); font-weight: var(--fw-medium); }
.sidebar-actions .btn-ghost .icon { color: var(--text-muted); transition: color var(--dur-1) var(--ease-out); }
.sidebar-actions .btn-ghost:hover .icon { color: var(--accent); }
/* Spine marker: a hover-state channel cue (not a resting-row stripe) */
.sidebar-actions .btn-ghost::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--spine-w);
    border-radius: 0 2px 2px 0; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-out);
}
.sidebar-actions .btn-ghost:hover::before { transform: scaleX(1); }

/* ---- Section eyebrow (RECENT FLOWS) ---- */
.sidebar-eyebrow, .sidebar-header h2 {
    font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking); color: var(--text-faint);
}

/* ---- Recent-file rows: file glyph + name + hover-revealed remove ---- */
.flow-list-item { gap: 10px; }
.flow-list-item .flow-item-icon { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.flow-list-item.selected .flow-item-icon { color: var(--accent); }
.flow-list-item .btn-remove-recent-file { opacity: 0; transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.flow-list-item:hover .btn-remove-recent-file, .flow-list-item.selected .btn-remove-recent-file { opacity: 1; }
/* Selected marker: squared flush spine on the accent-soft-washed active row */
.flow-list-item.selected::before {
    border-radius: 0 2px 2px 0; width: var(--spine-w); left: 0; height: auto; top: 6px; bottom: 6px; transform: none;
}
.search-field { position: relative; }
.search-field .icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
.search-field input { padding-left: 30px; font-family: var(--font-family-code); font-size: var(--fs-body); }

/* ---- Command bar: 52px instrument header, grouped + divided ---- */
.workspace-header { height: 52px; padding: 0 16px; gap: 0; flex-wrap: nowrap; align-items: center; }
.workspace-title-zone { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto; }
.workspace-header h2#workspace-title { flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: -0.01em; }
.workspace-file-controls, .workspace-view-controls { display: inline-flex; align-items: center; gap: var(--space-xs); flex: none; }
.workspace-view-controls { margin-left: auto; }
.cmd-divider { width: 1px; height: 18px; background: var(--border); margin: 0 10px; flex: none; align-self: center; }
/* Title zone keeps its natural width (title + UNSAVED); long names ellipsis at a cap */
.workspace-title-zone { flex: 0 0 auto; min-width: 0; overflow: hidden; }
.workspace-header h2#workspace-title { max-width: 240px; }
.workspace-view-controls { min-width: 0; }
/* Compact secondary command-bar actions to icon-only so the bar fits at projector
   widths. Save stays labeled (primary); Info/Variables keep icon + disclosure caret. */
#save-as-flow-btn span, #cancel-flow-btn span, #close-flow-btn span,
#toggle-info-btn .btn-text, #toggle-variables-btn .btn-text { display: none; }
#save-as-flow-btn, #cancel-flow-btn, #close-flow-btn { width: 30px; padding: 0; justify-content: center; }
#toggle-info-btn, #toggle-variables-btn { padding: 0 9px; gap: 4px; min-width: 0; }
#toggle-info-btn .toggle-icon, #toggle-variables-btn .toggle-icon { font-size: 0.7em; color: var(--text-faint); }
/* Active state for the floating toolbar toggles (e.g. Minimap on) */
.canvas-toolbar .btn.active { background: var(--accent-soft); color: var(--accent); }

/* Floating graph toolbar (Figma-style pill) — only in the Visual/node view.
   Graph tools moved here so the command bar never overflows at projector widths. */
.canvas-toolbar {
    position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
    z-index: 20; display: none; align-items: center; gap: 2px;
    padding: 4px 5px; background: var(--surface-raised);
    border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.workspace[data-view="node-graph"] .canvas-toolbar { display: inline-flex; }
.canvas-toolbar .btn-icon { width: 30px; height: 30px; }
.canvas-toolbar .ct-zoom { height: 30px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.canvas-toolbar .ct-divider { width: 1px; height: 16px; background: var(--border); margin: 0 3px; flex: none; }
/* graph tool buttons are icon-only in the floating toolbar */
#auto-layout-btn span, #tidy-up-btn span, #next-error-btn span, #toggle-minimap-btn span { display: none; }
/* Dirty caption: an instrument readout, not a bare asterisk.
   Scope display to :not([hidden]) so the `hidden` attribute still hides it
   (author `.dirty-flag{display}` would otherwise beat the UA [hidden] rule). */
.dirty-flag:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; }
.dirty-flag .status-dot { width: var(--pip-size); height: var(--pip-size); color: var(--run-running); border-radius: 50%; animation: dirty-in var(--dur-2) var(--ease-out); }
.dirty-flag .dirty-label { font-family: var(--font-family-code); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--run-running); }
@keyframes dirty-in { from { opacity: 0; } to { opacity: 1; } }

/* Disclosure carets rotate on open */
.btn .toggle-caret { transition: transform var(--dur-2) var(--ease-out); }
.btn.is-open .toggle-caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .status-pip[data-state="running"] .status-dot,
    .dirty-flag .status-dot { animation: none; }
    .sidebar-actions .btn-ghost::before,
    .segmented__thumb, .btn .toggle-caret { transition: none; }
}
/* === END SENTINEL SHELL === */


/* ============================================================================
   SENTINEL V2 SHELL — icon rail | top app bar | flows drawer | workspace |
   tabbed inspector. Overrides the legacy three-pane rules (kept above for the
   pieces that survived: sidebar internals, runner results, canvas toolbar).
   ========================================================================== */

.app-container {
    display: grid;
    grid-template-columns: 48px auto minmax(0, 1fr) auto;
    grid-template-rows: 52px minmax(0, 1fr);
    height: 100vh;
    background-color: var(--surface-sunken);
}

/* --- Icon rail --- */
.app-rail {
    grid-row: 1 / -1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    background: var(--surface-raised);
    border-right: 1px solid var(--border);
    z-index: 4;
}
.rail-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.rail-btn:hover { background: var(--surface-sunken); color: var(--text); }
.rail-btn[aria-pressed="true"] {
    color: var(--accent);
    background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.rail-btn .icon { width: 20px; height: 20px; }
.rail-divider { width: 20px; height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; }
.rail-spacer { flex: 1; }

/* --- Top app bar --- */
.app-topbar {
    grid-row: 1;
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 14px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    min-width: 0;
    z-index: 3;
}
.topbar-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.topbar-brand .ase-logo { width: 34px; margin-top: 0; }
.topbar-brand .app-name-text { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.topbar-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    border-left: 1px solid var(--border);
    padding-left: 16px;
    height: 28px;
}
.app-topbar #workspace-title {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.topbar-view { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-run { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* --- Flows drawer (the old sidebar, re-homed) --- */
#sidebar {
    grid-row: 2;
    grid-column: 2;
    width: 264px;
}
#sidebar.collapsed { display: none; }
.flows-drawer .sidebar-header h2 {
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Workspace --- */
#workspace {
    grid-row: 2;
    grid-column: 3;
    min-width: 0;
    min-height: 0;
}

/* --- Inspector (runner panel + tabs) --- */
#runner-panel {
    grid-row: 2;
    grid-column: 4;
}
.inspector-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; }
.inspector-tab {
    appearance: none;
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: var(--fs-body);
    font-weight: 500;
    font-family: inherit;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.inspector-tab:hover { color: var(--text); background: var(--surface-sunken); }
.inspector-tab[aria-selected="true"] { background: var(--surface-sunken); color: var(--text); font-weight: 600; }

#inspector-pane-results { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#inspector-pane-results .runner-results-container { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Info / Variables become inspector panes: neutralize their overlay mechanics. */
.runner-content .flow-info-overlay,
.runner-content .variables-panel {
    position: static;
    max-height: none;
    opacity: 1;
    display: none;
    box-shadow: none;
    border-bottom: none;
    background: transparent;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    transition: none;
    z-index: auto;
}
.runner-content .flow-info-overlay.open,
.runner-content .variables-panel.visible { display: flex; flex-direction: column; }
/* Tab rack replaces the panes' own headers/close buttons. */
.runner-content .info-header,
.runner-content .variables-header { display: none; }

/* --- Run options strip (inside Results pane) --- */
.runner-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.runner-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-body);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.runner-option input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.runner-option input[type="number"] { width: 68px; padding: 3px 6px; }
.runner-option-unit { color: var(--text-faint, var(--text-muted)); }
.runner-options #clear-results-btn { margin-left: auto; }

/* --- Demo mode adjustments for the new shell --- */
html.demo-mode #app-rail #sidebar-toggle-btn,
html.demo-mode #app-rail #rail-palette-btn,
html.demo-mode #app-rail #rail-runs-btn,
html.demo-mode #bg-runs-strip { display: none; }
html.demo-mode .app-topbar { padding-block: 6px; }
html.demo-mode .app-topbar #workspace-title { font-size: var(--fs-h3); }


/* ============ Round: detail polish (buttons, editor sizing, inspector IA) ============ */

/* Buttons: soft depth, quiet borders, real hover/press feedback. */
.btn {
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-1) var(--ease-out),
                transform var(--dur-1) var(--ease-out);
}
.btn-secondary {
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.btn-primary { box-shadow: var(--shadow-xs); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
.btn-sm { padding: 5px 12px; border-radius: var(--radius-sm); }
.btn:disabled { box-shadow: none; }

/* Step editor: fields own their row (Step Name was needlessly narrow). */
.step-editor .form-group > input[type="text"],
.step-editor .form-group > input[type="number"],
.step-editor .form-group > textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Node editor modal: the inner component header repeats the modal title; demote it. */
.node-editor-body .editor-header h3 {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-muted);
}

/* Inspector: more room, fields that use it. */
#runner-panel { width: 400px; }
.runner-content .flow-info-overlay input[type="text"],
.runner-content .flow-info-overlay textarea,
.runner-content .variables-panel input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}
.runner-content .flow-info-overlay textarea { min-height: 120px; resize: vertical; }

/* Flow Variables editor lives in the Variables pane now. */
.runner-content .variables-panel .flow-variables-section { margin-bottom: var(--space-lg); flex-shrink: 0; }

/* ---- Flows drawer: section head + folder tree ---- */
.drawer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 4px;
}
.drawer-section-label {
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.flow-list-section {
    padding: 10px 16px 4px;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    list-style: none;
}
.folder-item { list-style: none; }
.folder-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1px var(--space-sm);
    padding: 7px 10px 7px calc(10px + var(--depth, 0) * 14px);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
    font-weight: 500;
    font-size: var(--fs-body);
}
.folder-row:hover { background: var(--surface-sunken); }
.folder-row.drop-target {
    background: color-mix(in oklab, var(--accent) 14%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
.folder-chevron { transition: transform var(--dur-1) var(--ease-out); flex-shrink: 0; color: var(--text-muted); }
.folder-chevron.collapsed { transform: rotate(-90deg); }
.folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.folder-actions { display: none; align-items: center; gap: 2px; }
.folder-row:hover .folder-actions { display: inline-flex; }
.folder-actions button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    background: transparent; border: none; border-radius: var(--radius-xs);
    color: var(--text-muted); cursor: pointer;
}
.folder-actions button:hover { color: var(--text); background: var(--surface-raised); }
.folder-children { list-style: none; margin: 0; padding: 0; }
.folder-empty {
    list-style: none;
    padding: 4px 16px 6px calc(34px + var(--depth, 0) * 14px);
    color: var(--text-faint, var(--text-muted));
    font-size: var(--fs-caption);
    font-style: italic;
}
.recent-file-item.drop-root-target { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Single-line variant of the input dialog (folder names etc.) */
.app-input-textarea.single { min-height: 40px; height: 40px; resize: none; }


/* Variables pane: editor section above, discovered variables below a divider. */
.runner-content .variables-panel .flow-variables-section {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
}
.runner-content .variables-panel .variables-container { flex: 1; min-height: 0; overflow-y: auto; }


/* ============ Step editor v2: composite request bar + underline tabs + rhythm ============ */

/* The canonical API-tool control: [METHOD | url ......... | {{...}} | cURL] */
.request-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.request-bar:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.request-bar-method {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--surface-sunken);
    padding: 9px 26px 9px 12px;
    font-family: var(--font-family-code);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rm, var(--method-neutral));
    cursor: pointer;
    outline: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
.request-bar[data-method="GET"] .request-bar-method { --rm: var(--method-get); }
.request-bar[data-method="POST"] .request-bar-method { --rm: var(--method-post); }
.request-bar[data-method="PUT"] .request-bar-method { --rm: var(--method-put); }
.request-bar[data-method="PATCH"] .request-bar-method { --rm: var(--method-patch); }
.request-bar[data-method="DELETE"] .request-bar-method { --rm: var(--method-delete); }
.request-bar-url {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none;
    box-shadow: none !important;
    background: transparent;
    padding: 9px 12px;
    font-family: var(--font-family-code);
    font-size: var(--fs-body);
    color: var(--text);
}
.request-bar-url::placeholder { color: var(--text-faint, var(--text-muted)); }
.request-bar-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    padding: 0 12px;
    color: var(--text-muted);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    white-space: nowrap;
}
.request-bar-seg:hover { background: var(--surface-sunken); color: var(--text); }

/* Underline tabs (replace the boxed 2005-era tab strip) */
.form-tabs .tab-buttons {
    border-bottom: 1px solid var(--border);
    gap: 2px;
    margin-bottom: var(--space-lg);
    flex-wrap: nowrap;
    overflow-x: auto;
}
.form-tabs .tab-button {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin: 0;
    padding: 8px 12px 10px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--fs-body);
    position: relative;
    bottom: 0;
    white-space: nowrap;
}
.form-tabs .tab-button:hover { color: var(--text); background: var(--surface-sunken); }
.form-tabs .tab-button.active {
    background: transparent;
    border: none;
    color: var(--text);
    font-weight: 600;
}
.form-tabs .tab-button.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}

/* Editor rhythm: composed column, never a void */
.step-editor-content { max-width: 760px; }
.editor-header h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editor-header { gap: 12px; }

/* Retries controls */
.retries-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: end; }
.retries-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body);
    color: var(--text-muted);
    font-weight: 500;
}
.retries-field input[type="number"] { width: 84px; padding: 6px 8px; }
.retries-unit { color: var(--text-faint, var(--text-muted)); }

/* Step list rows: one quiet chip vocabulary */
.request-info { flex-wrap: nowrap; gap: 8px; margin-bottom: 6px; min-width: 0; }
.request-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.request-headers-badge, .request-body-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}
.request-extractions { display: inline-flex; align-items: center; gap: 5px; }
.request-extractions > span:first-child { font-size: var(--fs-caption); color: var(--text-faint, var(--text-muted)); }


/* ============ Critique round: verdict pill, inspector collapse, Power panes ============ */

/* The run verdict at projector scale. Filled soft chip, saturated word. */
.run-verdict[hidden] { display: none; }
.run-verdict {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: var(--space-md);
    border: 1px solid transparent;
}
.run-verdict .status-dot { width: 10px; height: 10px; }
.run-verdict[data-state="running"] {
    color: color-mix(in oklab, var(--run-running) 85%, var(--text));
    background: color-mix(in oklab, var(--run-running) 14%, transparent);
    border-color: color-mix(in oklab, var(--run-running) 30%, transparent);
}
.run-verdict[data-state="success"] {
    color: color-mix(in oklab, var(--run-success) 82%, var(--text));
    background: color-mix(in oklab, var(--run-success) 15%, transparent);
    border-color: color-mix(in oklab, var(--run-success) 32%, transparent);
}
.run-verdict[data-state="error"] {
    color: color-mix(in oklab, var(--run-error) 82%, var(--text));
    background: color-mix(in oklab, var(--run-error) 14%, transparent);
    border-color: color-mix(in oklab, var(--run-error) 32%, transparent);
}

/* Inspector collapse: slim strip, toggle stays reachable, chevron flips. */
#runner-panel.collapsed { width: 46px; }
#runner-panel.collapsed .inspector-tabs,
#runner-panel.collapsed .runner-content { display: none; }
#runner-panel.collapsed .runner-header {
    justify-content: center;
    padding: 10px 6px;
    border-bottom: none;
}
#runner-panel.collapsed .runner-toggle svg { transform: rotate(180deg); }
.runner-toggle svg { transition: transform var(--dur-2) var(--ease-out); }

/* Power tab panes: same design language as the rest of the editor. */
.tab-content.active { padding-top: 4px; }
.header-row-no-items, .extract-row-no-items, .assertion-row-no-items,
.global-header-row-no-items, .flow-var-row-no-items, .no-flow-vars {
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-faint, var(--text-muted));
    font-size: var(--fs-body);
    background: var(--surface-sunken);
    margin-bottom: 10px;
}
.btn-add-header, .btn-add-extract, .btn-add-assertion,
.btn-add-global-header, .btn-add-flow-var {
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed color-mix(in oklab, var(--accent) 40%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn-add-header:hover, .btn-add-extract:hover, .btn-add-assertion:hover,
.btn-add-global-header:hover, .btn-add-flow-var:hover {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
    border-color: var(--accent);
}
.form-tabs .form-hint { margin-top: 10px; line-height: 1.55; }


/* Step editor code fields: data looks like data. */
.step-editor textarea,
.runner-content .flow-info-overlay textarea.code,
.step-editor .tab-content textarea {
    font-family: var(--font-family-code);
    font-size: var(--fs-body);
    line-height: 1.5;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.step-editor textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.step-editor textarea::placeholder { color: var(--text-faint, var(--text-muted)); }
.step-editor .raw-body-markers { background: var(--surface-sunken); color: var(--text-muted); }

/* Key/value editor rows: quiet, consistent micro-controls. */
.header-row .btn-insert-var, .extract-row .btn-insert-var,
.global-header-row .btn-insert-var, .flow-var-row .btn-insert-var {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: var(--radius-xs);
    color: var(--accent);
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.header-row .btn-insert-var:hover, .extract-row .btn-insert-var:hover,
.global-header-row .btn-insert-var:hover, .flow-var-row .btn-insert-var:hover {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.btn-remove-header, .btn-remove-extract, .btn-remove-flow-var, .btn-remove-global-header {
    border-radius: var(--radius-xs);
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-remove-header:hover, .btn-remove-extract:hover,
.btn-remove-flow-var:hover, .btn-remove-global-header:hover {
    background: color-mix(in oklab, var(--run-error) 10%, transparent);
}


/* ============ Background runs + results console grammar ============ */

/* Topbar live chips */
.bg-runs-strip { display: flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.bg-run-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 180px; padding: 4px 10px;
    background: color-mix(in oklab, var(--run-running) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--run-running) 28%, transparent);
    border-radius: var(--radius-pill);
    color: color-mix(in oklab, var(--run-running) 65%, var(--text));
    font-size: var(--fs-caption); font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.bg-run-chip .status-dot { width: 8px; height: 8px; color: var(--run-running); animation: pip-ring 1.4s ease-out infinite; }
.bg-run-chip-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bg-run-chip-iter { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Runs tab badge */
.runs-tab-badge[hidden] { display: none; }
.runs-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;
    border-radius: var(--radius-pill);
    background: var(--run-running); color: var(--accent-contrast);
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Runs pane */
.inspector-pane-runs { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.runs-pane-hint { padding: 12px 14px; color: var(--text-muted); font-size: var(--fs-body); border-bottom: 1px solid var(--border); }
.bg-runs-list { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.bg-runs-empty { color: var(--text-faint, var(--text-muted)); font-size: var(--fs-body); padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.bg-run-card {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-raised); box-shadow: var(--shadow-xs);
    padding: 10px 12px;
}
.bg-run-card[data-status="failed"] { border-color: color-mix(in oklab, var(--run-error) 35%, var(--border)); }
.bg-run-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bg-run-verdict {
    flex-shrink: 0; padding: 2px 9px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.bg-run-verdict[data-state="running"] { color: color-mix(in oklab, var(--run-running) 70%, var(--text)); background: color-mix(in oklab, var(--run-running) 14%, transparent); }
.bg-run-verdict[data-state="passed"] { color: color-mix(in oklab, var(--run-success) 60%, var(--text)); background: color-mix(in oklab, var(--run-success) 15%, transparent); }
.bg-run-verdict[data-state="failed"] { color: color-mix(in oklab, var(--run-error) 62%, var(--text)); background: color-mix(in oklab, var(--run-error) 14%, transparent); }
.bg-run-verdict[data-state="stopped"] { color: var(--text-muted); background: var(--surface-sunken); }
.bg-run-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-body); }
.bg-run-actions { flex-shrink: 0; }
.bg-run-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bg-ok { color: color-mix(in oklab, var(--run-success) 60%, var(--text)); font-weight: 600; }
.bg-bad { color: color-mix(in oklab, var(--run-error) 62%, var(--text)); font-weight: 600; }
.bg-run-error { margin-top: 6px; font-size: var(--fs-caption); color: color-mix(in oklab, var(--run-error) 62%, var(--text)); overflow-wrap: anywhere; }
.bg-run-feed { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.bg-feed-row { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--text-muted); min-width: 0; font-variant-numeric: tabular-nums; }
.bg-feed-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.bg-feed-row.success .bg-feed-dot { background: var(--run-success); }
.bg-feed-row.error .bg-feed-dot { background: var(--run-error); }
.bg-feed-row.error { color: color-mix(in oklab, var(--run-error) 55%, var(--text)); }
.bg-feed-iter { opacity: 0.7; flex-shrink: 0; }
.bg-feed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bg-feed-row .request-method { font-size: 9px; padding: 0 5px; flex-shrink: 0; }
.bg-feed-code, .bg-feed-ms { flex-shrink: 0; font-family: var(--font-family-code); }
.bg-feed-err { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Results feed: console grammar */
.result-item .result-header { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: default; }
.result-item.collapsed .result-detail, .result-item.no-detail .result-detail { display: none; }
.result-item:not(.no-detail) .result-header { cursor: pointer; }
.result-step-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.result-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.result-meta .request-method { font-size: 9px; padding: 1px 6px; }
.result-code { font-family: var(--font-family-code); font-size: var(--fs-caption); font-weight: 700; }
.result-code.ok { color: color-mix(in oklab, var(--run-success) 60%, var(--text)); }
.result-code.warn { color: color-mix(in oklab, var(--run-running) 65%, var(--text)); }
.result-code.bad { color: color-mix(in oklab, var(--run-error) 62%, var(--text)); }
.result-ms { font-family: var(--font-family-code); font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.result-header-right { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.result-chevron { color: var(--text-muted); transition: transform var(--dur-1) var(--ease-out); }
.result-item.collapsed .result-chevron { transform: rotate(-90deg); }
.result-detail .result-body pre { max-height: 260px; overflow: auto; }
.result-extracted-values ul, .result-extraction-failures ul { margin: 4px 0 0; }

/* ==========================================================================
   RUNS PAGE — dedicated background-runs mission control, toggled from the
   rail. Replaces drawer + workspace + inspector while .page-runs is set on
   the app container; topbar and rail stay live.
   ========================================================================== */

.runs-page {
    grid-row: 2;
    grid-column: 2 / -1;
    display: none;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-sunken);
}
.app-container.page-runs .flows-drawer,
.app-container.page-runs .workspace,
.app-container.page-runs .runner-panel { display: none; }
.app-container.page-runs .runs-page { display: flex; }

.runs-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
    padding: var(--space-xl) var(--space-2xl) var(--space-lg);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.runs-page-title h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.runs-page-sub { margin: 0; color: var(--text-muted); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }

/* Launcher: one quiet row — flow picker, mode, delay, go. */
.runs-launcher { display: flex; align-items: flex-end; gap: var(--space-lg); flex-wrap: wrap; }
.runs-launcher-field { display: flex; flex-direction: column; gap: 4px; }
.runs-launcher-label { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.runs-launcher-flow select {
    min-width: 260px; max-width: 380px; height: 32px;
    padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: var(--fs-body);
}
.runs-launcher-delay { position: relative; }
.runs-launcher-delay input {
    width: 96px; height: 32px; padding: 0 34px 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font-size: var(--fs-body); font-variant-numeric: tabular-nums;
}
.runs-launcher-unit { position: absolute; right: 10px; bottom: 7px; color: var(--text-muted); font-size: var(--fs-caption); pointer-events: none; }
.runs-launcher-check { display: inline-flex; align-items: center; gap: 6px; height: 32px; color: var(--text); font-size: var(--fs-body); cursor: pointer; user-select: none; }
.runs-launcher-check input { accent-color: var(--accent); }
#runs-launch-btn { height: 32px; }

/* Run cards on the page: responsive grid instead of the old inspector stack. */
.runs-page .bg-runs-list {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid;
    /* min(100%, ...) lets cards shrink below 360px instead of clipping the
       Stop/Remove actions off-screen in narrow windows (no BrowserWindow minWidth). */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    align-content: start;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
}
.runs-page .bg-run-card { margin: 0; }
.runs-page .bg-runs-empty {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 460px;
    margin-top: 10vh;
    text-align: center;
    padding: var(--space-xl) var(--space-2xl);
}

/* Rail badge: live-run count on the Runs rail button. */
.rail-btn { position: relative; }
.rail-badge[hidden] { display: none; }
.rail-badge {
    position: absolute; top: 4px; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--radius-pill);
    /* Near-black on the amber running color: 7.6:1 in light theme (white text
       was 2.56:1 — illegible at this size); dark theme's lighter amber reads
       fine with dark text too. */
    background: var(--run-running); color: var(--ramp-neutral-1000);
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--surface);
}

/* ==========================================================================
   BACKGROUND-RUN LAUNCHER (v1.4.0) — flow-list Select mode + action bar,
   reusable context menu, quick-config popover, and the full-modal run picker.
   All color via semantic tokens; all motion transform/opacity.
   ========================================================================== */

/* --- Flow list: Select mode + checkboxes + multi-selected fill --- */
.drawer-section-actions { display: inline-flex; gap: 2px; }
#flow-select-toggle.active { color: var(--accent); background: var(--accent-soft); }
.sidebar-content { position: relative; }

.flow-select-box {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    display: none;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--accent-contrast);
    background: var(--surface);
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.flow-select-box .icon { width: 12px; height: 12px; }
#flow-list.select-mode .flow-select-box { display: inline-flex; }
#flow-list.select-mode .recent-file-item { cursor: pointer; }
.recent-file-item.selected-multi .flow-select-box { background: var(--accent); border-color: var(--accent); }
.recent-file-item.selected-multi { background: var(--accent-soft); }
#flow-list.has-selection { padding-bottom: 52px; }

/* --- Contextual bulk-launch bar (slides up over the list bottom) --- */
.flowlist-actionbar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-overlay);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-md);
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-2) var(--ease-out-soft), opacity var(--dur-2) var(--ease-out);
    z-index: 5;
}
.flowlist-actionbar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.flowlist-selcount {
    flex: 0 0 auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-caption); font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.flowlist-actionbar #flowlist-clear-btn { margin-left: auto; }
.flowlist-actionbar #flowlist-run-btn { flex: 0 0 auto; white-space: nowrap; }

/* --- Topbar send-current button: quiet secondary, Run keeps the accent --- */
.btn-run-bg {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.btn-run-bg:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-run-bg:disabled { opacity: 0.5; cursor: default; }

/* --- Reusable context menu --- */
.context-menu {
    position: fixed;
    min-width: 200px; max-width: 320px;
    padding: 6px;
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    z-index: 13000;
    opacity: 0; transform: scale(0.98);
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.context-menu.open { opacity: 1; transform: scale(1); }
.context-menu-item {
    display: flex; align-items: center; gap: var(--space-sm);
    width: 100%; padding: 8px 10px;
    border: 0; background: transparent; color: var(--text);
    font-size: var(--fs-base); font-weight: 500; text-align: left;
    border-radius: var(--radius-sm); cursor: pointer;
}
.context-menu-item:hover, .context-menu-item:focus-visible {
    background: var(--accent-soft); color: var(--accent); outline: none;
}
.context-menu-item.danger:hover, .context-menu-item.danger:focus-visible {
    background: color-mix(in oklab, var(--run-error) 16%, var(--surface)); color: var(--run-error);
}
.context-menu-item[disabled] { opacity: 0.5; cursor: default; }
.context-menu-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); }
.context-menu-item:hover .context-menu-icon, .context-menu-item:focus-visible .context-menu-icon { color: inherit; }
.context-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* --- Quick launch-config popover (shared: topbar + action bar) --- */
.launch-config-pop {
    position: fixed;
    min-width: 208px;
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    z-index: 13000;
    opacity: 0; transform: scale(0.98);
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.launch-config-pop.open { opacity: 1; transform: scale(1); }
.lcp-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-body); color: var(--text); }
.lcp-check { cursor: pointer; user-select: none; }
.lcp-delay input {
    width: 84px; padding: 4px 6px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-raised); color: var(--text);
    font-variant-numeric: tabular-nums;
}
.lcp-unit { color: var(--text-muted); font-size: var(--fs-caption); }
.lcp-run { margin-top: 2px; justify-content: center; }

/* --- Full-modal run picker --- */
.run-picker-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
    background: color-mix(in oklab, var(--text) 45%, transparent);
    z-index: 12500;
}
.run-picker {
    width: min(680px, 94vw);
    max-height: 78vh;
    display: flex; flex-direction: column;
    background: var(--surface-raised); color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
}
.run-picker-head { padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--border); }
.run-picker-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.run-picker-title { margin: 0; font-size: var(--fs-h3); letter-spacing: -0.01em; }
.run-picker-folder {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; max-width: 220px;
    font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted);
    background: var(--surface-sunken); border: 1px solid var(--border);
    border-radius: var(--radius-full); cursor: pointer;
}
.run-picker-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-picker-folder:hover { color: var(--accent); border-color: var(--accent); }
.run-picker-search {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 0 12px;
    background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.run-picker-search .icon { color: var(--text-muted); flex: 0 0 auto; }
.run-picker-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.run-picker-input { flex: 1; padding: 10px 0; border: 0; background: transparent; color: var(--text); font-size: var(--fs-label); outline: none; }
.run-picker-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 6px; min-height: 140px; }
.run-picker-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.run-picker-row.active { background: var(--surface-sunken); }
.run-picker-row.checked { background: var(--accent-soft); }
.run-picker-box {
    flex: 0 0 auto; width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--accent-contrast);
}
.run-picker-row.checked .run-picker-box { background: var(--accent); border-color: var(--accent); }
.run-picker-box .icon { width: 12px; height: 12px; }
.run-picker-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.run-picker-openflag { font-size: var(--fs-caption); color: var(--accent); background: var(--accent-soft); padding: 0 6px; border-radius: var(--radius-full); }
.run-picker-hint {
    margin-left: auto; max-width: 48%;
    color: var(--text-faint); font-size: var(--fs-caption);
    font-family: var(--font-family-code, ui-monospace, monospace);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-picker-empty { padding: var(--space-xl); text-align: center; color: var(--text-muted); }
.run-picker-note { padding: 6px 16px; color: var(--text-muted); font-size: var(--fs-caption); border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.run-picker-note[hidden] { display: none; }
.run-picker-foot { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); }
.run-picker-config { display: flex; align-items: center; gap: var(--space-md); }
.run-picker-check, .run-picker-delay { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--text); }
.run-picker-delay input { width: 80px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text); font-variant-numeric: tabular-nums; }
.run-picker-unit { color: var(--text-muted); font-size: var(--fs-caption); }
.run-picker-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.run-picker-count { font-size: var(--fs-caption); font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
.run-picker-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .flowlist-actionbar, .context-menu, .launch-config-pop, .flow-select-box { transition: none; }
}

/* --- Inspector header actions + work-mode expand (v1.4.0 refinements) --- */
.runner-header-actions { display: inline-flex; align-items: center; gap: 2px; }
.btn-inspector-expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-inspector-expand:hover { background: var(--surface-sunken); color: var(--text); }
.btn-inspector-expand[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn-inspector-expand .icon { width: 16px; height: 16px; }
#runner-panel.collapsed .btn-inspector-expand { display: none; }

/* Deliberate, user-triggered pane resize (not decorative motion). */
#runner-panel { transition: width var(--dur-2) var(--ease-out); }
.app-container.inspector-expanded #runner-panel { width: min(900px, 60vw); }
.app-container.inspector-expanded #runner-panel.collapsed { width: 46px; }
@media (prefers-reduced-motion: reduce) { #runner-panel { transition: none; } }