/* ═══════════════════════════════════════════════════════════
   BUNDLED FONTS — zero-trust, no CDN required
   ═══════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/DMSans-Latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Latin.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Wing Spectrum
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Font stacks */
    --font-display: 'Satoshi', -apple-system, sans-serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Type scale */
    --text-h1: 700 32px/1.2 var(--font-display);
    --text-h2: 700 22px/1.3 var(--font-display);
    --text-body: 400 15px/1.5 var(--font-body);
    --text-ui: 400 13px/1.4 var(--font-body);
    --text-label: 500 11px/1.2 var(--font-mono);
    --text-mono: 400 13px/1.4 var(--font-mono);
    --text-small: 400 12px/1.4 var(--font-mono);

    /* Letter spacing */
    --ls-h1: -0.02em;
    --ls-h2: -0.01em;
    --ls-label: 0.08em;

    /* Brand — purple anchor */
    --purple: #6c5ce7;
    --purple-hover: #7f6ff0;
    --purple-muted: rgba(108, 92, 231, 0.12);
    --purple-glow: rgba(108, 92, 231, 0.25);

    /* Wing spectrum — semantic */
    --teal: #2ec4a0;
    --gold: #f0a030;
    --coral: #e8706a;
    --blue: #5098e0;
    --rose: #e060a0;

    /* Semantic aliases */
    --accent: var(--purple);
    --accent-hover: var(--purple-hover);
    --success: var(--teal);
    --warning: var(--gold);
    --error: var(--coral);
    --info: var(--blue);

    /* Spacing */
    --sp-2xs: 2px;
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;

    /* Layout */
    --sidebar-width: 64px;
    --header-height: 76px;
    --status-height: 28px;
    --topbar-height: 36px;
    --phase-dot-size: 6px;
    --block-max-width: 600px;

    --dot-grid-color: rgba(255, 255, 255, 0.045); /* overridden per theme below */
    --dot-grid-size: 24px;
    --sys-green: #00d9a6;
    --sys-green-glow: rgba(0, 217, 166, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE (default)
   ═══════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --bg-0: #0c0b14;
    --bg-1: #151420;
    --bg-2: #1f1e2e;
    --bg-3: #2a2940;
    --text-1: #eeeef2;
    --text-2: #9494a8;
    --text-3: #6a6a80;
    --border: #2c2b40;
    --border-subtle: #222136;

    /* fg-0 alias — primary foreground text */
    --fg-0: #eeeef2;

    /* Surface tokens for cards */
    --surface-card-bg: rgba(255,255,255,0.03);
    --surface-card-hover: rgba(255,255,255,0.05);
    --surface-card-border: rgba(255,255,255,0.08);
    --surface-card-border-hover: rgba(255,255,255,0.14);

    /* Muted text for DIDs and secondary labels */
    --text-muted-rgb: 255,255,255;

    /* Short aliases used by inline styles in components */
    --bg-primary: var(--bg-0);
    --bg-secondary: var(--bg-1);
    --bg-tertiary: var(--bg-2);
    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);

    --dot-grid-color: rgba(255, 255, 255, 0.045);

    /* Topbar / status-bar chrome */
    --chrome-bg: rgba(12, 11, 20, 0.95);
    --chrome-border: rgba(255, 255, 255, 0.08);
    --chrome-text: rgba(255, 255, 255, 0.4);
    --chrome-sep: rgba(255, 255, 255, 0.15);
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-hover-bg: rgba(255, 255, 255, 0.04);

    color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --bg-0: #faf9fc;
    --bg-1: #f0eff5;
    --bg-2: #e6e5ee;
    --bg-3: #d8d7e2;
    --text-1: #1a1928;
    --text-2: #5c5b70;
    --text-3: #8888a0;
    --border: #d0cfdc;
    --border-subtle: #e2e1ec;

    /* fg-0 alias used by card/agent components — maps to primary text in light mode */
    --fg-0: #1a1928;

    /* Surface tokens for cards that use rgba(255,255,255,...) in dark mode */
    --surface-card-bg: rgba(0,0,0,0.03);
    --surface-card-hover: rgba(0,0,0,0.05);
    --surface-card-border: rgba(0,0,0,0.08);
    --surface-card-border-hover: rgba(0,0,0,0.14);

    /* Muted text for DIDs and secondary labels */
    --text-muted-rgb: 26,25,40;

    --bg-primary: var(--bg-0);
    --bg-secondary: var(--bg-1);
    --bg-tertiary: var(--bg-2);
    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);

    --dot-grid-color: rgba(0, 0, 0, 0.04);

    /* Topbar / status-bar chrome */
    --chrome-bg: rgba(240, 239, 245, 0.95);
    --chrome-border: rgba(0, 0, 0, 0.08);
    --chrome-text: rgba(26, 25, 40, 0.5);
    --chrome-sep: rgba(0, 0, 0, 0.15);
    --input-bg: rgba(0, 0, 0, 0.04);
    --input-border: rgba(0, 0, 0, 0.1);
    --input-hover-bg: rgba(0, 0, 0, 0.04);

    color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════
   AUTO THEME — follow system preference
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg-0: #faf9fc;
        --bg-1: #f0eff5;
        --bg-2: #e6e5ee;
        --bg-3: #d8d7e2;
        --text-1: #1a1928;
        --text-2: #5c5b70;
        --text-3: #8888a0;
        --border: #d0cfdc;
        --border-subtle: #e2e1ec;

        --fg-0: #1a1928;
        --surface-card-bg: rgba(0,0,0,0.03);
        --surface-card-hover: rgba(0,0,0,0.05);
        --surface-card-border: rgba(0,0,0,0.08);
        --surface-card-border-hover: rgba(0,0,0,0.14);

        --bg-primary: var(--bg-0);
        --bg-secondary: var(--bg-1);
        --bg-tertiary: var(--bg-2);
        --text-primary: var(--text-1);
        --text-secondary: var(--text-2);

        --dot-grid-color: rgba(0, 0, 0, 0.04);

        --chrome-bg: rgba(240, 239, 245, 0.95);
        --chrome-border: rgba(0, 0, 0, 0.08);
        --chrome-text: rgba(26, 25, 40, 0.5);
        --chrome-sep: rgba(0, 0, 0, 0.15);
        --input-bg: rgba(0, 0, 0, 0.04);
        --input-border: rgba(0, 0, 0, 0.1);
        --input-hover-bg: rgba(0, 0, 0, 0.04);

        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-0: #0c0b14;
        --bg-1: #151420;
        --bg-2: #1f1e2e;
        --bg-3: #2a2940;
        --text-1: #eeeef2;
        --text-2: #9494a8;
        --text-3: #6a6a80;
        --border: #2c2b40;
        --border-subtle: #222136;

        --fg-0: #eeeef2;
        --surface-card-bg: rgba(255,255,255,0.03);
        --surface-card-hover: rgba(255,255,255,0.05);
        --surface-card-border: rgba(255,255,255,0.08);
        --surface-card-border-hover: rgba(255,255,255,0.14);

        --bg-primary: var(--bg-0);
        --bg-secondary: var(--bg-1);
        --bg-tertiary: var(--bg-2);
        --text-primary: var(--text-1);
        --text-secondary: var(--text-2);

        --dot-grid-color: rgba(255, 255, 255, 0.045);

        --chrome-bg: rgba(12, 11, 20, 0.95);
        --chrome-border: rgba(255, 255, 255, 0.08);
        --chrome-text: rgba(255, 255, 255, 0.4);
        --chrome-sep: rgba(255, 255, 255, 0.15);
        --input-bg: rgba(255, 255, 255, 0.06);
        --input-border: rgba(255, 255, 255, 0.1);
        --input-hover-bg: rgba(255, 255, 255, 0.04);

        color-scheme: dark;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Force font inheritance on form elements — browsers default to system fonts */
button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* Global focus-visible ring */
:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* Inputs and selects get the glow treatment */
input:focus, select:focus, textarea:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-glow);
    outline: none;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg-0);
    color: var(--text-1);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════
   APP SHELL — sidebar layout
   ═══════════════════════════════════════════════════════════ */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr var(--status-height);
    height: 100vh;
    width: 100vw;
}

.header {
    grid-column: 1 / -1;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-md);
    gap: var(--sp-sm);
    -webkit-app-region: drag;
}

.header h1 {
    font: var(--text-ui);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--purple);
    letter-spacing: 0.5px;
}

/* The .status-bar footer and its .status-indicator dots were removed here
   (papillon#55). No `.rs` file rendered either family — `git log -S status-bar
   -- frontend/src` is empty, so this footer never existed in the Leptos shell,
   which is `.app-shell-canvas` → <TopBar/> + `.app-content` (app.rs:461) with no
   footer at all. Their only other mention in the repo was three e2e assertions
   (app.spec.ts, ollama-config.spec.ts, edge-cases.spec.ts) that could therefore
   never pass; those now assert the topbar chrome that carries these readouts.
   `--status-height` is kept: the unused `.main-content` grid above still names
   it, and unpicking that is a separate job. */

/* ═══════════════════════════════════════════════════════════
   ADDRESS BAR
   ═══════════════════════════════════════════════════════════ */

.address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    -webkit-app-region: no-drag;
}

.address-bar input {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 6px var(--sp-sm);
    color: var(--text-1);
    font: var(--text-mono);
    font-family: var(--font-mono);
    outline: none;
}

.address-bar input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-glow);
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════ */

.page-title {
    font: var(--text-h2);
    font-family: var(--font-display);
    letter-spacing: var(--ls-h2);
    margin-bottom: var(--sp-md);
}

/* ═══════════════════════════════════════════════════════════
   CARDS & BADGES
   ═══════════════════════════════════════════════════════════ */

.card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    margin-bottom: var(--sp-sm);
}

.badge {
    display: inline-block;
    padding: var(--sp-2xs) var(--sp-sm);
    border-radius: var(--r-sm);
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.badge-accent {
    background: var(--purple-muted);
    color: var(--purple);
}

.badge-success {
    background: rgba(46, 196, 160, 0.15);
    color: var(--teal);
}

/* The negative of `badge-success`, for a fact that is false. A receipt whose
   co-signatures did not verify used to say "No" in `badge-success` green. */
.badge-error {
    background: rgba(255, 92, 92, 0.15);
    color: var(--error);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn {
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--r-md);
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    min-height: 44px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--purple);
    color: white;
}

.btn-primary:hover {
    background: var(--purple-hover);
    box-shadow: 0 0 0 3px var(--purple-glow);
}

.btn-run {
    background: var(--teal);
    color: white;
    padding: var(--sp-sm) 20px;
    border-radius: var(--r-md);
    border: none;
    font: var(--text-ui);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-run:hover:not(:disabled) {
    background: #36d4ae;
    box-shadow: 0 0 0 3px rgba(46, 196, 160, 0.25);
}

.btn-run:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scenario-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.scenario-card:hover {
    border-color: var(--purple);
    background: var(--bg-2);
    box-shadow: 0 0 0 1px var(--purple-glow);
}

/* ═══════════════════════════════════════════════════════════
   HANDSHAKE STEPPER
   ═══════════════════════════════════════════════════════════ */

.handshake-stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.handshake-step {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) 0;
    border-left: 2px solid var(--border);
    margin-left: 11px;
    padding-left: var(--sp-md);
    position: relative;
}

.handshake-step:first-child {
    padding-top: 0;
}

.handshake-step:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.handshake-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--text-label);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-2);
    position: absolute;
    left: -13px;
}

.handshake-step-label {
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-2);
    margin-left: var(--sp-sm);
}

.handshake-step.completed {
    border-left-color: var(--teal);
}

.handshake-step.active {
    border-left-color: var(--purple);
}

.handshake-step.failed {
    border-left-color: var(--coral);
}

.handshake-step-number.completed {
    background: var(--teal);
    border-color: var(--teal);
    color: white;
}

.handshake-step-number.active {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
    animation: pulse 1.2s ease-in-out infinite;
}

.handshake-step-number.failed {
    background: var(--coral);
    border-color: var(--coral);
    color: white;
}

.handshake-step.completed .handshake-step-label {
    color: var(--text-1);
}

.handshake-step.active .handshake-step-label {
    color: var(--purple);
    font-weight: 600;
}

/* The query step 4 exchanges. The walkthrough had no input at all, so every run
   of the search and knowledge cards reached step 4 with nothing to send and
   reported "No query provided" — papillon#61. */
.scenario-query-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.scenario-query-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 7px 10px;
    color: var(--text-1);
    font-family: var(--font-mono);
    font-size: 12px;
    box-sizing: border-box;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════
   SETUP WIZARD
   ═══════════════════════════════════════════════════════════ */

.setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above every other overlay, because this one gates signing and the others
       are surfaces that ask for a signature: .agent-picker-overlay (1100)
       dispatches, .approval-toast (2000) approves a mandate,
       .registry-auth-overlay (2100) enrols. At 1000 it was under all of them,
       so the gate that says "nothing can sign yet" rendered beneath the things
       asking to sign, and under .settings-overlay (1200) it was invisible and
       unreachable — a locked profile could not be unlocked from the settings
       page at all (papillon#106).

       Raising it costs nothing below, because the backdrop is pointer-events:
       none and only .setup-wizard takes clicks. The rest of the screen stays
       live, which is what the gate's own copy promises: reading and browsing
       keep working while the profile is locked. */
    z-index: 2200;
    pointer-events: none; /* Don't block clicks outside wizard */
}

.setup-wizard {
    background: var(--chrome-bg);
    border: 1px solid var(--chrome-border);
    border-radius: var(--r-lg);
    padding: var(--sp-lg);
    max-width: 560px;
    width: 90%;
    background-image: radial-gradient(var(--dot-grid-color) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: auto; /* Re-enable clicks on wizard itself */
}

/* Setup inputs */
.setup-inputs {
    margin-top: var(--sp-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.setup-inputs label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    font-weight: 500;
}

.setup-inputs input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
    padding: var(--sp-sm) var(--sp-sm);
    color: var(--text-1);
    font-family: var(--font-mono);
    font-size: 13px;
    outline: none;
}

.setup-inputs input:focus {
    border-color: var(--sys-green, #00d9a6);
    box-shadow: 0 0 0 2px rgba(0, 217, 166, 0.15);
}

.setup-inputs select {
    width: 100%;
    background: var(--bg-2, var(--bg-tertiary));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 8px;
    color: var(--text-1, var(--text-primary));
    font-size: 13px;
    font-family: var(--font-mono);
}

.setup-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

.setup-error {
    color: var(--error, var(--coral));
    font-size: 12px;
    margin-top: 12px;
    font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS — LEFT NAV LAYOUT
   ═══════════════════════════════════════════════════════════ */

.settings-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

.settings-nav {
    width: 200px;
    flex-shrink: 0;
    background: var(--bg-0);
    border-right: 1px solid var(--border-subtle);
    padding: 16px 0;
    overflow-y: auto;
}

.settings-nav-group-label {
    padding: 10px 16px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-3);
    font-family: var(--font-mono);
}

.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    height: 32px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.12s;
    border-left: 2px solid transparent;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}

.settings-nav-link:hover {
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.03);
}

.settings-nav-link.active {
    color: var(--text-1);
    font-weight: 500;
    border-left-color: var(--purple);
    background: rgba(108, 92, 231, 0.08);
}

.settings-nav-icon {
    width: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-nav-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 0;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 36px;
    background: var(--bg-0);
}

.settings-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.settings-section-desc {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ── Profile card ────────────────────────────────────────────── */
.profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin-bottom: 8px;
}
.profile-card-info {
    flex: 1;
    min-width: 0;
}
.profile-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
}
.profile-card-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    font-family: var(--font-mono);
}
.profile-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.profile-badge-active {
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    background: rgba(46, 196, 160, 0.15);
    color: var(--teal);
    border: 1px solid rgba(46, 196, 160, 0.3);
    padding: 3px 9px;
    border-radius: 999px;
}
.profile-action-btn {
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-1);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.profile-action-btn:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: var(--text-1);
    background: rgba(108, 92, 231, 0.06);
}
.profile-action-btn--danger {
    color: var(--coral, #e17055);
    border-color: rgba(225, 112, 85, 0.25);
}
.profile-action-btn--danger:hover {
    background: rgba(225, 112, 85, 0.08);
    border-color: rgba(225, 112, 85, 0.5);
    color: var(--coral, #e17055);
}

.settings-group {
    margin-bottom: 20px;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-label {
    flex: 1;
}

.settings-row-label strong {
    display: block;
    font-size: 13px;
    color: var(--text-1);
    font-weight: 500;
    margin-bottom: 2px;
}

.settings-row-label span {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.4;
}

.settings-row-control {
    flex-shrink: 0;
}

/* Appearance: theme pills */
.appearance-theme-pills {
    display: flex;
    gap: 3px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 3px;
}

.appearance-theme-pill {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
    font-family: var(--font-mono);
    background: none;
    border: none;
    transition: all 0.12s;
}

.appearance-theme-pill.active {
    background: var(--purple);
    color: white;
}

/* Appearance: accent swatches */
.appearance-swatches {
    display: flex;
    gap: 8px;
}

.appearance-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.12s, border-color 0.12s;
    background: none;
    padding: 0;
}

.appearance-swatch:hover {
    transform: scale(1.1);
}

.appearance-swatch.active {
    border-color: var(--text-1);
    transform: scale(1.15);
}

/* Appearance: toggle switch */
.appearance-toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--border);
    position: relative;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
    flex-shrink: 0;
}

.appearance-toggle.on {
    background: var(--purple);
}

.appearance-toggle::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: left 0.15s;
}

.appearance-toggle.on::after {
    left: 19px;
}

/* Appearance: font size select */
.appearance-select {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 12px;
    padding: 4px 28px 4px 10px;
    font-family: var(--font-body);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c5b70' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

[data-reduce-motion="true"] * {
    transition: none !important;
    animation: none !important;
}

[data-compact="true"] .settings-row {
    padding: 9px 16px;
}

.settings-session-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-2);
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: var(--sp-xs) 0;
    transition: color 0.15s ease;
}

.settings-session-toggle:hover { color: var(--text-1); }

.settings-session-body {
    margin-top: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}

.intent-kv { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.intent-key { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; min-width: 80px; flex-shrink: 0; }
.intent-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-1); }
.intent-val-status { color: var(--teal); }
.intent-section { margin-bottom: 8px; }
.intent-section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.intent-divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 8px 0; }
.intent-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); margin-bottom: 2px; }

/* Step detail text */
.step-detail {
    font: var(--text-label);
    font-family: var(--font-mono);
    color: var(--text-2);
    margin-top: var(--sp-2xs);
    word-break: break-all;
}

/* Backup warning banner */
.backup-warning {
    background: rgba(240, 160, 48, 0.1);
    border: 1px solid var(--gold);
    border-radius: var(--r-md);
    padding: var(--sp-sm) var(--sp-md);
    margin-bottom: var(--sp-md);
}

.backup-warning strong {
    color: var(--gold);
    font: var(--text-ui);
    font-family: var(--font-body);
    font-weight: 600;
}

.backup-warning p {
    color: var(--text-2);
    font: var(--text-small);
    font-family: var(--font-body);
    margin-top: var(--sp-xs);
}

/* Key display */
.key-display {
    display: block;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px var(--sp-sm);
    font: var(--text-mono);
    font-family: var(--font-mono);
    color: var(--text-1);
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}

/* Receipt URL */
.receipt-url {
    font: var(--text-small);
    font-family: var(--font-mono);
    color: var(--purple);
    text-decoration: underline;
    text-decoration-color: var(--purple-glow);
    text-underline-offset: 2px;
    user-select: all;
    -webkit-user-select: all;
}

/* ═══════════════════════════════════════════════════════════
   CANVAS APP SHELL — replaces sidebar layout
   ═══════════════════════════════════════════════════════════ */

.app-shell-canvas {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-0);
    background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px);
    background-size: var(--dot-grid-size) var(--dot-grid-size);
}

.app-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
}

.app-content {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.app-main {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Page content area — inset from viewport edges, scrollable.
 *
 * `height: 100%` is what makes `overflow-y: auto` above mean anything. Without
 * it this box grows to fit its content, so it never overflows and never
 * scrolls — and its parent chain does not scroll either: `.app-shell-canvas`,
 * `.app-content` and `.app-main` are all `overflow: hidden`, deliberately, for
 * the canvas. So every `.page` route was simply cut off at the fold.
 *
 * `/login` is the one long enough to prove it. At 1280x720 the agent-registry
 * row sat at y=874 against a 720px document: the address field and the Connect
 * button were unreachable by any means, and the whole e2e suite was green
 * (papillon#83). `/scenario/:id` is the other `.page` route and had the same
 * cut, further down.
 *
 * Sibling routes already do this — `.canvas-page`, `.ledger-page`,
 * `.history-page` and `.settings-layout` each set `height: 100%` and own their
 * scrolling. This class declared the intent in a comment and never got the
 * height. `box-sizing: border-box` comes from the `*` reset, so the padding is
 * inside the 100%.
 */
.page {
    padding: var(--sp-xl) var(--sp-2xl);
    height: 100%;
    overflow-y: auto;
    max-width: 960px;
    width: 100%;
}

/* Top bar */
.topbar {
    min-height: var(--header-height);
    background: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-border);
    display: flex;
    align-items: center;
    /* No padding — each zone controls its own spacing so the brand
       aligns flush with the sidebar column below it. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-app-region: drag;
    z-index: 100;
    gap: var(--sp-sm);
    padding: 8px 14px;
}

/* Center zone — grows to fill remaining width; holds the address bar. */
.topbar-address {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0;
    -webkit-app-region: no-drag;
    min-width: 0;
}

/* Wrapper for the input + floating suggestions (position: relative anchor). */
.topbar-address-inner {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pill-shaped address input — browser-style. */
.topbar-address-input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 14px;
    padding: 11px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-1);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.topbar-address-input::placeholder {
    color: var(--text-3);
}

.topbar-address-input:focus {
    border-color: var(--purple);
    background: rgba(108, 92, 231, 0.08);
}

/* Floating suggestions panel anchored below the address bar. */
.topbar-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 300;
}

/* The navigation menu's button. Styled before the control existed and orphaned
   until papillon#69 put the menu in the top chrome. */
.topbar-menu-btn {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: var(--sp-sm);
    border-radius: var(--r-sm);
    font-size: 16px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
    /* The topbar is a drag region in the Tauri shell; without this the button
       moves the window instead of opening the menu. */
    -webkit-app-region: no-drag;
}

.topbar-menu-btn:hover {
    background: var(--bg-2);
    color: var(--text-1);
}

.topbar-identity {
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* Empty canvas — inspiration lines */
.canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--sp-lg);
    padding: var(--sp-2xl) var(--sp-lg);
}

/* ─── Registry Quickstart ─── */

.registry-quickstart {
    padding: var(--sp-xl) var(--sp-lg);
    max-width: 480px;
    margin: 0 auto;
}

.quickstart-section {
    margin-bottom: var(--sp-lg);
}

.quickstart-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: var(--sp-xs);
}

.quickstart-desc {
    font: var(--text-ui);
    color: var(--text-2);
    line-height: 1.5;
}

.quickstart-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--sp-sm);
}

.quickstart-options {
    display: flex;
    gap: var(--sp-sm);
}

.quickstart-btn {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    color: var(--text-1);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.quickstart-btn:hover {
    border-color: var(--purple);
    background: var(--purple-muted);
}

.quickstart-btn-desc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3);
    margin-top: 2px;
}

.quickstart-hint {
    font: var(--text-ui);
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
}

.quickstart-hint code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 3px;
}

.palette-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-2);
    padding: var(--sp-sm) var(--sp-md);
    font: var(--text-ui);
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.15s ease;
}

.palette-suggestion:hover {
    background: var(--bg-2);
    color: var(--text-1);
}

.palette-suggestion::before {
    content: "\2192  ";
    opacity: 0.4;
}

/* pap:// autocomplete row — removes the arrow glyph; uses inline spans instead */
.palette-suggestion-pap::before {
    content: "";
}

/* Keyboard-selected suggestion (Up/Down navigation) */
.palette-suggestion--active {
    background: var(--bg-2);
    color: var(--text-1);
}

.pap-suggestion-scheme {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--purple);
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.pap-suggestion-name {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-1);
}

/* PAP discovery suggestion — "Check for PAP agents at domain" */
.palette-suggestion-pap-discovery {
    border-color: rgba(108,92,231,0.3);
    background: rgba(108,92,231,0.04);
}
.palette-suggestion-pap-discovery:hover,
.palette-suggestion-pap-discovery.palette-suggestion--active {
    background: rgba(108,92,231,0.1);
    border-color: var(--purple);
}
.pap-discovery-icon {
    color: var(--purple);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   CANVAS BLOCKS
   ═══════════════════════════════════════════════════════════ */

.canvas-block {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    max-width: var(--block-max-width);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.canvas-block:hover {
    border-color: rgba(108, 92, 231, 0.3);
}

.canvas-block:focus-within {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

.canvas-block.resolving {
    border-color: var(--purple);
    box-shadow: 0 0 0 1px var(--purple-glow);
    animation: block-pulse 2s ease-in-out infinite;
}

.canvas-block.failed {
    border-color: var(--coral);
    box-shadow: 0 0 0 1px rgba(232, 112, 106, 0.2);
}

@keyframes block-pulse {
    0%, 100% { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple-glow); }
    50% { border-color: rgba(108, 92, 231, 0.3); box-shadow: none; }
}

/* Phase dots — handshake progress inside blocks */
.phase-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: var(--sp-sm);
}

.phase-dot {
    width: var(--phase-dot-size);
    height: var(--phase-dot-size);
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

/* Wing spectrum phase dots: completed=teal, active=purple, failed=coral */
.phase-dot.completed {
    background: var(--teal);
    border-color: var(--teal);
}

.phase-dot.active {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 4px var(--purple-glow);
    animation: pulse 1.2s ease-in-out infinite;
}

.phase-dot.failed {
    background: var(--coral);
    border-color: var(--coral);
}

.phase-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--sp-xs);
}

/* Block content — typed components */
.block-content {
    font: var(--text-ui);
    font-family: var(--font-body);
}

/* Skeleton block (resolving) */
.block-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.skeleton-line {
    height: 12px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line:nth-child(1) { width: 70%; }
.skeleton-line:nth-child(2) { width: 90%; }
.skeleton-line:nth-child(3) { width: 50%; }

@keyframes skeleton-shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Live inference stream (resolving, on-device answer typing in) */
.block-streaming {
    font: var(--text-ui);
    font-family: var(--font-body);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.streaming-cursor {
    display: inline-block;
    margin-left: 1px;
    color: var(--brand, #6c5ce7);
    animation: streaming-blink 1s step-end infinite;
}

@keyframes streaming-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Orchestrator plan forming live (schema.org actions streaming in) */
.forming-plan {
    list-style: none;
    margin: 0 0 var(--sp-sm) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.forming-plan-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-sm);
    border-left: 2px solid var(--brand, #6c5ce7);
    background: var(--bg-2);
    border-radius: var(--r-sm);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.forming-plan-action {
    font-family: var(--font-mono);
    font-size: 0.8em;
    letter-spacing: var(--ls-label);
    color: var(--brand, #6c5ce7);
    white-space: nowrap;
}

.forming-plan-query {
    font-family: var(--font-body);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Failed block */
.block-failed-info {
    display: flex;
    /* Top, not centre: a reason can run to several lines now that a refusal
       explains itself, and a centred Retry floats into the middle of the
       sentence (papillon#50). */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-sm);
}

.block-failed-msg {
    font: var(--text-small);
    font-family: var(--font-body);
    color: var(--coral);
    /* A flex item defaults to min-width: auto, so without this the sentence
       pushes the row wider than the block instead of wrapping inside it. */
    min-width: 0;
}

.btn-retry {
    background: none;
    border: 1px solid var(--coral);
    color: var(--coral);
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: var(--r-sm);
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.btn-retry:hover {
    background: rgba(232, 112, 106, 0.1);
}

.block-failed-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    flex-shrink: 0;
}

/* Inline re-prompt input */
.block-reprompt {
    margin-top: var(--sp-sm);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-sm);
}

.block-reprompt input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 6px var(--sp-sm);
    color: var(--text-1);
    font: var(--text-small);
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s ease;
}

.block-reprompt input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-glow);
}

.block-reprompt input::placeholder {
    color: var(--text-3);
}

/* Preference-guided hint — shown when the orchestrator used local preference
   history to select an agent. Zero network calls produced this data. */
.preference-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-xs, 4px);
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent);
    font: var(--text-small);
    font-family: var(--font-body);
    color: var(--purple);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}

.preference-hint-icon {
    font-size: 0.7em;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   GHOST BLOCKS — plan preview, dashed outline
   ═══════════════════════════════════════════════════════════ */

.canvas-block.ghost {
    border: 2px dashed var(--purple-muted);
    background: transparent;
    opacity: 0.75;
}

.canvas-block.ghost:hover {
    opacity: 1;
    border-color: var(--purple);
}

/* `.ghost` used to be the whole story, and it covered two opposite states: an
   offer being made, and a prompt with nowhere to go. The dashed outline is right
   for both — neither has run — so it stays on the base rule, and the two now say
   which they are.

   `.advertising` is a choice waiting on the principal, so it reads at full
   strength: the candidate cards inside are controls, and dimming a control
   suggests it is not ready to be pressed. */
.canvas-block.ghost.advertising {
    opacity: 1;
    border-color: var(--purple);
}

/* `.discovering` has nothing on offer yet — `resolve_destination` found no agent
   that advertised a matching action. It stays dim and loses the solid border
   colour, because there is nothing to act on. */
.canvas-block.ghost.discovering {
    border-color: var(--purple-muted);
}

.ghost-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
}

/* .ghost-agent, .ghost-action, .ghost-scope and .ghost-scope-label were removed
   here (papillon#55). No .rs file emitted any of them; their only other mention
   anywhere in the repo was in advertiser-phase.spec.ts, which asserted them and
   so could never pass. A style rule for a class nothing renders reads as evidence
   that the markup exists. */

/* ═══════════════════════════════════════════════════════════
   SCOPE BADGES — mandate disclosure/returns indicators
   ═══════════════════════════════════════════════════════════ */

.scope-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.scope-badge {
    font: var(--text-small);
    font-family: var(--font-mono);
    padding: 2px var(--sp-xs);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    color: var(--text-2);
    background: var(--bg-2);
}

.scope-badge.disclosure {
    border-color: rgba(240, 160, 48, 0.3);
    color: var(--gold);
    background: rgba(240, 160, 48, 0.08);
}

.scope-badge.returns {
    border-color: rgba(46, 196, 160, 0.3);
    color: var(--teal);
    background: rgba(46, 196, 160, 0.08);
}

.scope-badge.receipt {
    border-color: rgba(108, 92, 231, 0.3);
    color: var(--purple);
    background: var(--purple-muted);
}

/* ═══════════════════════════════════════════════════════════
   OUTCOME BLOCKS — synthesized user-facing results
   ═══════════════════════════════════════════════════════════ */

.canvas-block.outcome {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(46, 196, 160, 0.15);
}

.canvas-block.outcome:hover {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(46, 196, 160, 0.2);
}

/* ── Provenance entry card ── */
.provenance-entry {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--sp-sm);
    background: var(--bg-1);
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
}

/* Header row: name + action badge + decay state */
.prov-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}

.provenance-agent {
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-1);
}

.provenance-action {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--purple);
    background: var(--purple-muted);
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: var(--r-sm);
    padding: 1px var(--sp-xs);
}

/* DID display rows */
.prov-did-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.prov-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
    min-width: 64px;
}

.prov-did {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

/* Scope rows */
.prov-scope-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}

.prov-ondevice {
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-3);
    font-style: italic;
}

/* Zero-disclosure badge variant */
.scope-badge.zero-disclosure {
    border-color: rgba(46, 196, 160, 0.3);
    color: var(--teal);
    background: rgba(46, 196, 160, 0.08);
    font-style: italic;
}

/* Receipt row */
.prov-receipt-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}

.prov-receipt-link {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: color 0.15s ease;
    cursor: pointer;
}

.prov-receipt-link:hover {
    color: var(--purple);
}

.prov-receipt-arrow {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Mandate decay state badges ── */
.decay-badge {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 1px var(--sp-xs);
    border-radius: var(--r-sm);
    border: 1px solid;
}

.decay-active {
    color: var(--teal);
    background: rgba(46, 196, 160, 0.08);
    border-color: rgba(46, 196, 160, 0.25);
}

.decay-degraded {
    color: var(--gold);
    background: rgba(240, 160, 48, 0.08);
    border-color: rgba(240, 160, 48, 0.25);
}

.decay-readonly {
    color: var(--blue);
    background: rgba(80, 152, 224, 0.08);
    border-color: rgba(80, 152, 224, 0.25);
}

.decay-suspended {
    color: var(--coral);
    background: rgba(232, 112, 106, 0.08);
    border-color: rgba(232, 112, 106, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   SEMANTIC LINK GROUPS — shared container for linked blocks
   ═══════════════════════════════════════════════════════════ */

.block-group {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.block-group > .canvas-block {
    flex: 1 1 280px;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   TYPED COMPONENTS — JSON-LD @type renderers
   ═══════════════════════════════════════════════════════════ */

/* FlightReservation */
.typed-flight {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.typed-flight-route {
    font: var(--text-h2);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--text-1);
}

.typed-flight-date {
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-2);
}

.typed-flight-price {
    font: var(--text-body);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--teal);
    margin-top: var(--sp-xs);
}

.typed-flight-carrier {
    font: var(--text-small);
    font-family: var(--font-body);
    color: var(--text-3);
}

/* LodgingReservation */
.typed-hotel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.typed-hotel-name {
    font: var(--text-body);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-1);
}

.typed-hotel-dates {
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-2);
}

.typed-hotel-price {
    font: var(--text-body);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--teal);
}

/* SearchResult */
.typed-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.typed-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-sm);
    padding-bottom: var(--sp-xs);
    border-bottom: 1px solid var(--border-subtle);
}

.typed-search-kicker,
.typed-search-count {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.typed-search-kicker {
    color: var(--text-3);
}

.typed-search-count {
    color: var(--teal);
}

.typed-search-empty {
    font: var(--text-small);
    color: var(--text-3);
}

.typed-search-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--sp-sm);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
}

.typed-search-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.typed-search-title {
    font: var(--text-body);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--purple);
}

.typed-search-url {
    font: var(--text-label);
    font-family: var(--font-mono);
    color: var(--text-3);
}

.typed-search-snippet {
    font: var(--text-small);
    font-family: var(--font-body);
    color: var(--text-2);
    line-height: 1.4;
}

.typed-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
}

.typed-search-action {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    font: var(--text-label);
    font-family: var(--font-mono);
    padding: 6px 9px;
    cursor: pointer;
}

.typed-search-action:hover {
    color: var(--text-1);
    border-color: rgba(108,92,231,0.5);
}

/* ── Typed template shared pattern ───────────────────────────── */
/* All typed blocks use: container → title/headline → meta row → description */

.typed-movie, .typed-tv-series, .typed-video-game,
.typed-music-recording, .typed-music-group,
.typed-book, .typed-news-article, .typed-scholarly-article,
.typed-person, .typed-organization,
.typed-weather, .typed-geocoords,
.typed-product, .typed-event, .typed-sports-event,
.typed-course, .typed-nutrition, .typed-job-posting,
.typed-visual-artwork, .typed-defined-term, .typed-quotation,
.typed-webpage {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

/* Titles / headings */
.typed-movie-title, .typed-tv-title, .typed-game-title,
.typed-music-title, .typed-music-group-name,
.typed-book-title, .typed-news-headline, .typed-paper-title,
.typed-person-name, .typed-org-name,
.typed-weather-location, .typed-geo-name,
.typed-product-name, .typed-event-name, .typed-sports-name,
.typed-course-name, .typed-nutrition-name, .typed-job-title,
.typed-artwork-title, .typed-term-word{
    font: var(--text-body);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-1);
}

/* Meta rows — inline chips */
.typed-movie-meta, .typed-tv-meta, .typed-game-meta,
.typed-music-meta, .typed-music-group-meta,
.typed-book-meta, .typed-news-meta, .typed-paper-meta,
.typed-person-meta, .typed-org-meta,
.typed-weather-details, .typed-geo-coords,
.typed-product-meta, .typed-event-dates, .typed-sports-matchup,
.typed-sports-meta, .typed-nutrition-macros, .typed-job-meta,
.typed-artwork-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    font: var(--text-small);
    font-family: var(--font-mono);
    color: var(--text-3);
}

/* Description / abstract / bio paragraphs */
.typed-movie-description, .typed-tv-description, .typed-game-description,
.typed-music-group-description,
.typed-book-description, .typed-news-description, .typed-paper-abstract,
.typed-person-bio, .typed-org-description,
.typed-weather-conditions,
.typed-product-description, .typed-event-description,
.typed-course-description, .typed-job-description,
.typed-artwork-description {
    font: var(--text-body);
    font-family: var(--font-body);
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
}

/* Secondary labels: artist, author, director, company, provider */
.typed-book-author, .typed-movie-director, .typed-paper-authors,
.typed-music-artist, .typed-artwork-artist,
.typed-course-provider, .typed-job-company,
.typed-org-type, .typed-person-title {
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-2);
}

/* URL / link fields */
.typed-person-url, .typed-org-url, .typed-course-url,
.typed-news-url, .typed-webpage-url {
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--purple);
    text-decoration: underline;
    text-decoration-color: rgba(108,92,231,0.3);
    word-break: break-all;
}

/* Weather temperature — large display */
.typed-weather-temp {
    font: var(--text-body);
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-1);
}

/* Sports matchup */
.typed-sports-vs {
    color: var(--text-3);
    font-weight: 600;
}
.typed-sports-home, .typed-sports-away {
    font-weight: 600;
    color: var(--text-1);
}

/* Quotation */
.typed-quote-text {
    font: var(--text-body);
    font-size: 15px;
    font-style: italic;
    color: var(--text-1);
    border-left: 3px solid var(--purple);
    padding-left: var(--sp-sm);
    margin: 0;
    line-height: 1.5;
}
.typed-quote-attribution {
    display: flex;
    gap: var(--sp-xs);
    font: var(--text-small);
    font-family: var(--font-mono);
    color: var(--text-3);
}

/* DefinedTerm */
.typed-term-pos {
    font: var(--text-label);
    font-family: var(--font-mono);
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.typed-term-definition {
    font: var(--text-body);
    font-family: var(--font-body);
    color: var(--text-2);
    line-height: 1.5;
}

/* Nutrition macros */
.typed-nutrition-calories {
    color: var(--teal);
    font-weight: 600;
}

/* Web page block */
.typed-webpage-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-2xs) var(--sp-xs);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}
.typed-webpage-favicon { font-size: 14px; }

/* ── Generic renderer — recursive schema.org field rendering ── */

.typed-generic {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.typed-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: var(--sp-xs);
}

.typed-fields {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.typed-field {
    display: flex;
    gap: var(--sp-sm);
    font: var(--text-small);
    font-family: var(--font-body);
    align-items: baseline;
}

.typed-key {
    font: var(--text-label);
    font-family: var(--font-mono);
    color: var(--text-3);
    min-width: 100px;
    flex-shrink: 0;
}

.typed-val {
    color: var(--text-1);
    word-break: break-word;
}

/* Semantic field kinds */
.typed-date {
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 13px;
}

.typed-price {
    color: var(--teal);
    font-weight: 600;
    font-family: var(--font-display);
}

.typed-url {
    color: var(--purple);
    font-family: var(--font-mono);
    font-size: 12px;
    text-decoration: underline;
    text-decoration-color: rgba(108, 92, 231, 0.3);
}

.typed-did {
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ── Form fields rendered from PropertyValueSpecification ─────────────────
 *
 * `generic.rs::render_form_field` has emitted these five class names since the
 * PVS renderer was written, and not one of them had a rule — so every
 * agent-delivered form was a row of unstyled browser controls laid out by
 * `.typed-field`'s baseline flex, with the label and the input side by side and
 * the description wrapping under whichever was taller. The markup was right and
 * the surface was unusable (papillon#45).
 *
 * A form field is the one kind of typed field that stacks: label above control
 * above help text. `.typed-field-form` therefore overrides the row direction it
 * inherits rather than fighting it field by field. */
.typed-field-form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-sm);
}

.typed-form-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-2);
}

.typed-form-description {
    font: var(--text-small);
    font-family: var(--font-body);
    color: var(--text-3);
    margin: 0;
}

/* One appearance for every control, so a text field and a dropdown do not read
 * as two different kinds of thing. `font: inherit` is load-bearing: a bare
 * `<select>` and `<textarea>` otherwise fall back to the platform UI font and the
 * form looks assembled from parts. */
.typed-field-form input[type="text"],
.typed-field-form input[type="number"],
.typed-form-select,
.typed-form-textarea {
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-1);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-sm);
    width: 100%;
    box-sizing: border-box;
}

.typed-field-form input[type="text"]:focus,
.typed-field-form input[type="number"]:focus,
.typed-form-select:focus,
.typed-form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--purple-glow);
}

/* A disabled control is what a form with no `SettingsActionSink` renders as —
 * the same document, read-only. It must look inert rather than broken. */
.typed-field-form input:disabled,
.typed-form-select:disabled,
.typed-form-textarea:disabled {
    color: var(--text-2);
    background: var(--bg-1);
    cursor: not-allowed;
}

.typed-form-textarea {
    font-family: var(--font-body);
    line-height: 1.5;
    resize: vertical;
    min-height: 96px;
}

/* The toggle keeps the row layout — a checkbox belongs beside its label, not
 * under it — so it re-establishes the direction its parent just overrode. */
.typed-form-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    cursor: pointer;
}

.typed-form-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.typed-form-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.typed-form-toggle .typed-form-label {
    text-transform: none;
    letter-spacing: normal;
    font: var(--text-ui);
    font-family: var(--font-body);
    color: var(--text-1);
}

/* ── Display adaptation (RenderHint) ─────────────────────────────────────
 *
 * Three independent adaptations a block can carry, from the principal's
 * TraitBeacon accessibility profile or from a reshape they typed ("make this
 * bigger", "high contrast", "just the price"). None of them change what the
 * block says — see `papillon_core::render_hints`.
 *
 * Every rule here is scoped to `.canvas-block`. An accessibility need that is
 * really global belongs in app settings, not in a hint attached to one result.
 */

/* Font scale. `BlockRenderer` writes `--block-font-scale` inline on the block
 * root and nothing else; the work happens here, by re-deriving the type scale
 * through it.
 *
 * Setting `font-size` on the root would have done nothing: every rule inside a
 * block sets `font: var(--text-*)`, and those shorthands carry absolute px. So
 * the block redefines the shorthands themselves, multiplying only the size term
 * and leaving weight, line-height ratio and family alone — which is what keeps a
 * scaled block in proportion rather than merely larger.
 *
 * The `, 1` fallback is what makes this unconditional: a block with no hint
 * computes `calc(15px * 1)` and renders exactly as it did before. */
.canvas-block {
    --text-h1: 700 calc(32px * var(--block-font-scale, 1)) / 1.2 var(--font-display);
    --text-h2: 700 calc(22px * var(--block-font-scale, 1)) / 1.3 var(--font-display);
    --text-body: 400 calc(15px * var(--block-font-scale, 1)) / 1.5 var(--font-body);
    --text-ui: 400 calc(13px * var(--block-font-scale, 1)) / 1.4 var(--font-body);
    --text-label: 500 calc(11px * var(--block-font-scale, 1)) / 1.2 var(--font-mono);
    --text-mono: 400 calc(13px * var(--block-font-scale, 1)) / 1.4 var(--font-mono);
    --text-small: 400 calc(12px * var(--block-font-scale, 1)) / 1.4 var(--font-mono);
}

/* The three rules inside a block that set a bare `font-size` instead of a
 * shorthand, so a scaled block leaves no islands at the old size. */
.canvas-block .typed-date {
    font-size: calc(13px * var(--block-font-scale, 1));
}

.canvas-block .typed-url {
    font-size: calc(12px * var(--block-font-scale, 1));
}

.canvas-block .typed-did {
    font-size: calc(11px * var(--block-font-scale, 1));
}

/* High contrast. Collapses the three-step text ramp onto `--text-1` and makes
 * every border a full-strength line — the subtle ones are the first thing to
 * disappear at low vision, and they are what carries a block's structure. */
.canvas-block.block-hint-contrast {
    --text-2: var(--text-1);
    --text-3: var(--text-1);
    --border-subtle: var(--text-1);
    border-color: var(--text-1);
}

.canvas-block.block-hint-contrast .typed-key {
    color: var(--text-1);
    font-weight: 700;
}

.canvas-block.block-hint-contrast .pap-link,
.canvas-block.block-hint-contrast .typed-url {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

/* Simplified — the essential result only.
 *
 * The receipt footer, DIDs and the inline meta chip rows are the three things a
 * block shows *about* its answer rather than as its answer, so they are what
 * goes. The answer itself is never hidden: a hint that could remove content
 * would stop being a display hint.
 *
 * `.provenance-footer` was the fourth and is not in this list any more: nothing
 * in `frontend/src` renders it, so papillon#57 took the rule out. Add the
 * selector back in the same breath as the markup. */

.canvas-block.block-hint-simplified .typed-receipt,
.canvas-block.block-hint-simplified .typed-field-did,
.canvas-block.block-hint-simplified .typed-movie-meta,
.canvas-block.block-hint-simplified .typed-tv-meta,
.canvas-block.block-hint-simplified .typed-game-meta,
.canvas-block.block-hint-simplified .typed-music-meta,
.canvas-block.block-hint-simplified .typed-music-group-meta,
.canvas-block.block-hint-simplified .typed-book-meta,
.canvas-block.block-hint-simplified .typed-news-meta,
.canvas-block.block-hint-simplified .typed-paper-meta,
.canvas-block.block-hint-simplified .typed-person-meta,
.canvas-block.block-hint-simplified .typed-org-meta,
.canvas-block.block-hint-simplified .typed-product-meta,
.canvas-block.block-hint-simplified .typed-sports-meta,
.canvas-block.block-hint-simplified .typed-job-meta,
.canvas-block.block-hint-simplified .typed-artwork-meta {
    display: none;
}

/* Emphasis. `render_leaf_field` adds this when the block's hints name the
 * property, so "highlight price" reaches whichever element draws the price.
 *
 * Deliberately not colour alone — a left bar and a weight change survive both
 * colour blindness and the contrast adaptation above. */
.typed-field--highlight {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    border-left: 3px solid var(--purple);
    padding: var(--sp-2xs) var(--sp-xs);
    margin-left: calc(-1 * var(--sp-xs));
    border-radius: 3px;
}

.typed-field--highlight .typed-key {
    color: var(--purple);
    font-weight: 700;
}

.typed-field--highlight .typed-val {
    font-weight: 600;
}

/* Nested typed objects — indented with left border */
.typed-nested {
    margin-left: var(--sp-md);
    padding-left: var(--sp-sm);
    border-left: 2px solid var(--border-subtle);
    margin-top: var(--sp-xs);
}

/* Lists of typed items */
.typed-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

/* Depth truncation indicator */
.typed-truncated {
    color: var(--text-3);
    font-style: italic;
}

/* Content wrapper for receipt footer */
.typed-content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Receipt metadata footer */
.typed-receipt {
    margin-top: var(--sp-sm);
    padding-top: var(--sp-xs);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--sp-sm);
    font: var(--text-label);
    font-family: var(--font-mono);
    color: var(--text-3);
}

/* Answer type — on-device AI response */
.typed-answer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.typed-answer-text {
    font: var(--text-body);
    font-family: var(--font-body);
    color: var(--text-1);
    line-height: 1.5;
    margin: 0;
}

/* ── CI / Quality Gates (schema:CheckAction) ──────────────────────────── */

.typed-check {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--sp-sm) var(--sp-md);
    border-radius: 6px;
    border-left: 3px solid var(--border-primary);
}

.typed-check--pass {
    border-left-color: var(--teal, #00b894);
    background: color-mix(in srgb, var(--teal, #00b894) 6%, transparent);
}

.typed-check--fail {
    border-left-color: var(--coral, #e17055);
    background: color-mix(in srgb, var(--coral, #e17055) 6%, transparent);
}

.typed-check-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.typed-check-status {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.typed-check--pass .typed-check-status {
    color: var(--teal, #00b894);
}

.typed-check--fail .typed-check-status {
    color: var(--coral, #e17055);
}

.typed-check-name {
    font: var(--text-label);
    font-family: var(--font-body);
    color: var(--text-1);
    flex: 1;
}

.typed-check-badge {
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-2);
}

.typed-check--pass .typed-check-badge {
    color: var(--teal, #00b894);
}

.typed-check--fail .typed-check-badge {
    color: var(--coral, #e17055);
}

.typed-check-exit {
    font: var(--text-label);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

.typed-check-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font: var(--text-label);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.typed-check-toggle:hover {
    color: var(--text-1);
}

.typed-check-output {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
    background: var(--bg-2);
    border-radius: 4px;
    padding: var(--sp-sm);
    overflow: auto;
    max-height: 240px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — desktop window resizing
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 500px) {
    .canvas-block, .block-group > .canvas-block {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .topbar-identity {
        display: none;
    }
}

@media (min-width: 501px) and (max-width: 900px) {
    .block-group {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .phase-dot.active,
    .handshake-step-number.active {
        animation: none;
    }
    .canvas-block.resolving {
        animation: none;
    }
    .skeleton-line {
        animation: none;
        opacity: 0.6;
    }
}

/* Agent cards */
.agent-card {
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-card-border);
    border-radius: var(--r-lg);
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.agent-card:hover {
    border-color: var(--surface-card-border-hover);
    background: var(--surface-card-hover);
}

/* ══════════════════════════════════════════════════════════════
   NEGOTIATION LEDGER (ACTIVITY PAGE)
   ══════════════════════════════════════════════════════════════ */

.ledger-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.ledger-header-left { display: flex; align-items: center; gap: var(--sp-md); }

.ledger-header-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: rgba(80,152,224,0.15);
    border: 1px solid rgba(80,152,224,0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue, #5098e0); flex-shrink: 0;
}

.ledger-title {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    letter-spacing: 0.06em; color: var(--fg-0, #f0f0f5);
    text-transform: uppercase;
}

.ledger-subtitle {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255,255,255,0.4); margin-top: 2px; letter-spacing: 0.02em;
}

.ledger-header-right { display: flex; align-items: center; gap: var(--sp-sm); }

.ledger-live-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 4px;
    background: rgba(0,217,166,0.12); border: 1px solid rgba(0,217,166,0.3);
    font-family: var(--font-mono); font-size: 11px; color: var(--sys-green, #00d9a6);
    letter-spacing: 0.08em;
}

.ledger-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green, #00d9a6);
    animation: ledger-pulse 1.5s ease-in-out infinite;
}

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

.ledger-event-count {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255,255,255,0.4); letter-spacing: 0.06em;
}

.ledger-body {
    display: grid; grid-template-columns: 1fr 220px;
    flex: 1; overflow: hidden;
}

.ledger-events {
    overflow-y: auto; padding: var(--sp-md) var(--sp-lg);
    display: flex; flex-direction: column; gap: var(--sp-sm);
    border-right: 1px solid rgba(255,255,255,0.06);
}

.ledger-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--sp-3xl) var(--sp-xl);
    font-family: var(--font-mono); font-size: 12px;
    color: rgba(255,255,255,0.3); text-align: center;
}

.ledger-event-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    display: flex; flex-direction: column; gap: var(--sp-sm);
}

.ledger-event-header {
    display: flex; align-items: center; gap: var(--sp-sm);
}

.ledger-event-icon {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    background: rgba(80,152,224,0.15);
    border: 1px solid rgba(80,152,224,0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue, #5098e0); flex-shrink: 0;
}

.ledger-event-type {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: var(--blue, #5098e0); letter-spacing: 0.06em;
}

.ledger-event-id {
    font-family: var(--font-mono); font-size: 11px;
    padding: 2px 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}

.ledger-event-ts {
    margin-left: auto; font-family: var(--font-mono);
    font-size: 11px; color: rgba(255,255,255,0.3);
}

.ledger-event-parties {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm);
}

.ledger-party-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.3);
    text-transform: uppercase; margin-bottom: 2px;
}

.ledger-party-name {
    font-family: var(--font-mono); font-size: 13px;
    color: var(--fg-0, #f0f0f5);
}

.ledger-event-props {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}

.ledger-props-label {
    font-family: var(--font-mono); font-size: 10px;
    color: rgba(255,255,255,0.35); letter-spacing: 0.06em;
}

.ledger-prop-tag {
    font-family: var(--font-mono); font-size: 11px;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(108,92,231,0.12); border: 1px solid rgba(108,92,231,0.25);
    color: var(--purple, #6c5ce7);
}

.ledger-event-footer { padding-top: 4px; }

.ledger-trust {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; font-weight: 600;
}

.ledger-trust.high { color: var(--sys-green, #00d9a6); }
.ledger-trust.low { color: var(--gold, #f0a030); }

.ledger-stats {
    padding: var(--sp-md);
    display: flex; flex-direction: column; gap: var(--sp-sm);
}

.ledger-stats-header {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.5);
    text-transform: uppercase; margin-bottom: var(--sp-xs);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ledger-stat-row {
    display: flex; justify-content: space-between; align-items: center;
}

.ledger-stat-label {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255,255,255,0.4); letter-spacing: 0.04em;
}

.ledger-stat-value {
    font-family: var(--font-mono); font-size: 18px;
    font-weight: 700; color: var(--fg-0, #f0f0f5);
}

/* ═══════════════════════════════════════════════════════════
   SETUP WIZARD — TERMINAL INIT SEQUENCE
   ═══════════════════════════════════════════════════════════ */

/* Boot header */
.setup-boot-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.setup-boot-line {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.setup-boot-line:first-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sys-green, #00d9a6);
    margin-bottom: 4px;
}

/* Step progress strip */
.setup-step-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.setup-step {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.setup-step.active {
    color: var(--sys-green, #00d9a6);
    border-bottom-color: var(--sys-green, #00d9a6);
}

/* Ghost button (skip) */
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--r-md);
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
}

/* Sys-green action button (initialize) */
.btn-sys {
    background: rgba(0, 217, 166, 0.1);
    border: 1px solid var(--sys-green, #00d9a6);
    border-radius: var(--r-md);
    padding: 8px 16px;
    color: var(--sys-green, #00d9a6);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-sys:hover {
    background: rgba(0, 217, 166, 0.18);
    box-shadow: 0 0 8px rgba(0, 217, 166, 0.2);
}

/* ── Intent Partitions ── */
.partitions-page { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-lg); height: 100%; overflow: hidden; }
.partitions-timeline { display: flex; flex-direction: column; overflow: hidden; }
.partitions-header { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: var(--sp-md); flex-shrink: 0; }
.partitions-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.partitions-filters { display: flex; gap: 4px; margin-left: auto; }
.partitions-filter-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 3px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 2px; background: transparent; color: rgba(255,255,255,0.4); cursor: pointer; }
.partitions-filter-btn.active { border-color: var(--sys-green); color: var(--sys-green); }
.partitions-loading, .partitions-empty { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.3); padding: var(--sp-xl) 0; }
.partitions-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--sp-sm); }

.partition-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-sm); padding: var(--sp-sm) var(--sp-md); display: flex; flex-direction: column; gap: 6px; }
.partition-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }
.partition-card-header { display: flex; align-items: center; gap: 8px; }
.partition-live-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.partition-live-dot.active { background: var(--sys-green); box-shadow: 0 0 6px var(--sys-green); }
.partition-type { font-family: var(--font-mono); font-size: 12px; color: var(--text-1, #eeeef2); font-weight: 600; letter-spacing: 0.04em; }
.partition-ts { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.3); margin-left: auto; }
.partition-card-body { display: flex; align-items: center; gap: var(--sp-md); }
.partition-agent { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
.partition-dur { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.35); margin-left: auto; }
.partition-summary { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); margin: 0; padding-left: 2px; }
.partition-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.partition-scope-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; color: rgba(255,255,255,0.4); }
.partition-decay-active { font-family: var(--font-mono); font-size: 10px; color: var(--sys-green); margin-left: auto; }
.partition-decay-degraded { font-family: var(--font-mono); font-size: 10px; color: var(--gold, #f0a030); margin-left: auto; }
.partition-decay-compressed { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); margin-left: auto; }
.partition-outcome-success { font-family: var(--font-mono); font-size: 10px; color: var(--sys-green); padding: 1px 5px; border: 1px solid rgba(0,217,166,0.3); border-radius: 2px; }
.partition-outcome-failure { font-family: var(--font-mono); font-size: 10px; color: var(--coral, #e8706a); padding: 1px 5px; border: 1px solid rgba(232,112,106,0.3); border-radius: 2px; }
.partition-outcome-rejected { font-family: var(--font-mono); font-size: 10px; color: var(--gold, #f0a030); padding: 1px 5px; border: 1px solid rgba(240,160,48,0.3); border-radius: 2px; }

/* ── Partition Stats Panel ── */
.partitions-stats { border-left: 1px solid rgba(255,255,255,0.06); padding-left: var(--sp-lg); overflow-y: auto; }
.partitions-stats-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding-bottom: var(--sp-md); border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: var(--sp-md); }
.partitions-stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.partitions-stat-label { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; text-transform: uppercase; }
.partitions-stat-value { font-family: var(--font-mono); font-size: 13px; color: var(--text-1, #eeeef2); font-weight: 600; }
.partitions-stat-div { height: 1px; background: rgba(255,255,255,0.06); margin: var(--sp-sm) 0; }
.partitions-decay-row { display: flex; align-items: center; gap: var(--sp-sm); padding: 3px 0; }
.partitions-decay-label { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); width: 80px; }
.partitions-decay-bar-wrap { flex: 1; height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; }
.partitions-decay-bar { height: 100%; border-radius: 2px; }
.partitions-decay-bar.active { background: var(--sys-green); }
.partitions-decay-bar.degraded { background: var(--gold, #f0a030); }
.partitions-decay-bar.compressed { background: rgba(255,255,255,0.2); }
.partitions-decay-count { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); width: 24px; text-align: right; }

/* 3-column layout (.canvas-workspace, .canvas-intent-panel, .canvas-ledger-panel)
   removed — renderer-first single-column canvas replaces it. */
/* ── Outcome Synthesis Panel ── */

/* Container — sits below the ledger entries in the right panel */
.outcome-summary {
    margin-top: var(--sp-md);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.outcome-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.outcome-summary-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: var(--ls-label);
    color: var(--purple);
    text-transform: uppercase;
}

.outcome-loading-indicator {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--gold);
    animation: outcome-blink 1s step-start infinite;
}

@keyframes outcome-blink {
    50% { opacity: 0; }
}

/* Principal DID row */
.outcome-principal {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    background: var(--purple-muted);
    border-radius: var(--r-sm);
}

.outcome-key {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--purple);
    font-weight: 500;
    flex-shrink: 0;
}

.outcome-did {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stats row: success / failure / active */
.outcome-stats {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}

.outcome-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: var(--r-sm);
}

.outcome-stat-icon {
    display: flex;
    align-items: center;
}

.outcome-stat-success {
    color: var(--teal);
    background: rgba(46, 196, 160, 0.1);
}

.outcome-stat-failure {
    color: var(--coral);
    background: rgba(232, 112, 106, 0.1);
}

.outcome-stat-active {
    color: var(--gold);
    background: rgba(240, 160, 48, 0.1);
}

.outcome-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* Timeline of completed episodes */
.outcome-timeline {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 240px;
    overflow-y: auto;
}

/* Individual episode entry */
.outcome-entry {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 5px 6px;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.1s;
}

.outcome-entry:hover {
    background: rgba(255, 255, 255, 0.04);
}

.outcome-entry-success {
    border-left-color: var(--teal);
}

.outcome-entry-failure {
    border-left-color: var(--coral);
}

.outcome-entry-pending {
    border-left-color: var(--gold);
}

.outcome-entry-icon {
    display: flex;
    align-items: center;
    margin-top: 1px;
    flex-shrink: 0;
}

.outcome-entry-success .outcome-entry-icon { color: var(--teal); }
.outcome-entry-failure .outcome-entry-icon { color: var(--coral); }
.outcome-entry-pending .outcome-entry-icon { color: var(--gold); }

.outcome-entry-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.outcome-entry-top {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.outcome-entry-agent {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outcome-entry-action {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.outcome-entry-intent {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outcome-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.outcome-entry-ts {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.22);
}

.outcome-entry-hash {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(108, 92, 231, 0.4);
    letter-spacing: 0.02em;
}

.outcome-error {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--coral);
    padding: 4px 5px;
    background: rgba(232, 112, 106, 0.08);
    border-radius: var(--r-sm);
}

.outcome-empty {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.18);
    text-align: center;
    padding: 8px 0;
}

/* ── Human-in-the-Loop Gate ── */
.hitl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.hitl-gate {
    background: var(--bg-1);
    border: 1px solid rgba(240,160,48,0.5);
    border-radius: 6px;
    padding: 28px 32px;
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 0 40px rgba(240,160,48,0.1);
}

.hitl-gate-critical {
    border-color: rgba(232,112,106,0.6);
    box-shadow: 0 0 40px rgba(232,112,106,0.15);
}

.hitl-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hitl-risk-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(240,160,48,0.15);
    border: 1px solid rgba(240,160,48,0.4);
    color: var(--gold, #f0a030);
}

.hitl-risk-critical {
    background: rgba(232,112,106,0.12);
    border-color: rgba(232,112,106,0.5);
    color: var(--coral, #e8706a);
}

.hitl-title {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
}

.hitl-agent-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.hitl-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    width: 60px;
    flex-shrink: 0;
}

.hitl-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

.hitl-description {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    border-left: 2px solid rgba(240,160,48,0.4);
}

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

.hitl-disclosure-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.hitl-disclosure-props {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hitl-prop-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid rgba(108,92,231,0.4);
    border-radius: 2px;
    color: var(--purple, #6c5ce7);
    background: rgba(108,92,231,0.08);
}

.hitl-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 4px;
}

.hitl-reject-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 8px 20px;
    border: 1px solid rgba(232,112,106,0.4);
    border-radius: 3px;
    background: rgba(232,112,106,0.06);
    color: var(--coral, #e8706a);
    cursor: pointer;
}
.hitl-reject-btn:hover {
    background: rgba(232,112,106,0.15);
    border-color: rgba(232,112,106,0.7);
}

.hitl-authorize-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 8px 20px;
    border: 1px solid rgba(0,217,166,0.5);
    border-radius: 3px;
    background: rgba(0,217,166,0.08);
    color: var(--sys-green, #00d9a6);
    cursor: pointer;
}
.hitl-authorize-btn:hover {
    background: rgba(0,217,166,0.18);
    border-color: rgba(0,217,166,0.8);
}

.hitl-footnote {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
}

/* ─── Canvas: single-column renderer-first layout ─── */
.canvas-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    background:
      radial-gradient(circle at top center, rgba(108,92,231,0.12), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,0.01), transparent 12%),
      var(--bg-0);
}

.canvas-flip-toggle {
    padding: var(--sp-sm) var(--sp-md);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: var(--text-ui);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.canvas-flip-toggle:hover {
    background: var(--purple-muted);
    border-color: var(--purple);
    color: var(--purple);
}

/* Inline prompt component (replaces topbar prompt within canvas) */
.inline-prompt {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.inline-prompt-input {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 14px;
    padding: 11px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-1);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.inline-prompt-input::placeholder {
    color: var(--text-3);
}

.inline-prompt-input:focus {
    border-color: var(--purple);
    background: rgba(108, 92, 231, 0.08);
}

.inline-prompt-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 50;
    overflow: hidden;
}

.canvas-stream {
    flex: 1;
    overflow-y: visible;
    min-height: 0;
    padding: 28px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.canvas-surface-head {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 2px 0 6px;
}

.canvas-title-button,
.canvas-title-input {
    width: min(100%, 560px);
    padding: 0 0 6px;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--text-1);
    font: 700 28px/1.05 var(--font-display);
    letter-spacing: -0.03em;
    text-align: left;
}

.canvas-title-button {
    cursor: text;
    transition: color 160ms ease, border-color 160ms ease;
}

.canvas-title-button:hover,
.canvas-title-button:focus-visible {
    color: var(--text-1);
    border-bottom-color: rgba(255,255,255,0.18);
    outline: none;
}

.canvas-title-input {
    border-bottom-color: rgba(108,92,231,0.75);
    outline: none;
}

.canvas-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0 0;
    gap: 22px;
}

.canvas-surface-status {
    color: var(--text-3);
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 0 4px;
}

/* Agent capability tiles shown in the canvas empty state */
/* ── How it works — 3-step horizontal strip ── */
.how-it-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}
.how-it-works-step {
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
}
.how-it-works-num {
    font: 600 11px/1 var(--font-mono);
    color: var(--teal, #2ec4a0);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.how-it-works-label {
    font: 600 15px/1.2 var(--font-display);
    color: var(--text-1);
    margin-bottom: 6px;
}
.how-it-works-copy {
    font: 500 13px/1.5 var(--font-body);
    color: var(--text-3);
}

/* ── Empty state section labels ── */
.canvas-empty-section-label {
    font: 600 11px/1 var(--font-mono);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: flex-start;
    margin-top: 4px;
}

/* ── Workflow scenario cards ── */
.scenario-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
}
.scenario-card {
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(135deg, rgba(108,92,231,0.07), transparent 60%);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.scenario-card:hover {
    border-color: rgba(108,92,231,0.4);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(108,92,231,0.14), transparent 60%);
}
.scenario-card-title {
    font: 700 15px/1.2 var(--font-display);
    color: var(--text-1);
    margin-bottom: 6px;
}
.scenario-card-desc {
    font: 500 13px/1.45 var(--font-body);
    color: var(--text-3);
    margin-bottom: 12px;
}
.scenario-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.scenario-step-name {
    font: 500 12px/1.2 var(--font-body);
    border-radius: 6px;
    padding: 3px 8px;
}
.scenario-step-start {
    color: var(--text-1);
    background: rgba(255,255,255,0.07);
}
.scenario-step-pipe {
    color: var(--teal, #2ec4a0);
    background: rgba(46,196,160,0.1);
}
.scenario-step-arrow {
    color: var(--text-3);
    font-size: 11px;
}

.agent-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.agent-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    min-height: 108px;
    justify-content: space-between;
}

.agent-tile:hover {
    background:
      radial-gradient(circle at top right, rgba(108, 92, 231, 0.18), transparent 40%),
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
    border-color: rgba(108, 92, 231, 0.45);
    transform: translateY(-2px);
}

.agent-tile-label {
    font: 700 16px/1.2 var(--font-display);
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.01em;
}

.agent-tile-example {
    font: 500 13px/1.4 var(--font-mono);
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ─── AwaitingApproval block ─── */
.canvas-block.awaiting-approval {
    border: 1px dashed var(--purple);
    border-radius: var(--r-lg);
    padding: var(--sp-md);
    background: transparent;
}

.awaiting-approval-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--sp-md);
}

.awaiting-approval-section-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    font-family: var(--font-mono);
    margin-bottom: var(--sp-xs);
}

.awaiting-approval-disclosure {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-md);
}

.awaiting-approval-mandate-note {
    font-size: 10px;
    color: var(--text-3);
    font-family: var(--font-mono);
    margin-bottom: var(--sp-md);
}

/* The standing grant (papillon#87). A whole row rather than a bare checkbox,
   and the <label> wraps the input so the words are part of the hit target —
   a 13px checkbox on its own is below every touch-target floor the usability
   gate checks. */
.approval-remember-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    min-height: 32px;
    margin-bottom: var(--sp-sm);
    cursor: pointer;
}

.approval-remember-toggle {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--teal);
    cursor: pointer;
}

.approval-remember-label {
    font: var(--text-label);
    letter-spacing: var(--ls-label);
    color: var(--text-2);
}

/* One row of the standing-approvals list in Settings → Privacy. A class rather
   than an inline style because the row is the only part of that card a user has
   to be able to aim at: the usability gate measures the Revoke button inside it,
   and a collapsed row is the way that button disappears. */
.standing-approval-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.awaiting-approval-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border-subtle);
}

.awaiting-approval-actions .hitl-reject-btn {
    flex: 0 0 auto;
}

.awaiting-approval-actions .hitl-authorize-btn {
    flex: 1;
}

.approval-agent-name {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-1);
}

.approval-action-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════
   MANDATE TTL BADGE — decay-state expiry indicator
   ═══════════════════════════════════════════════════════════ */

.mandate-ttl {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    margin-top: var(--sp-xs);
    padding-top: var(--sp-xs);
    border-top: 1px solid var(--border-subtle);
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--text-3);
    transition: color 0.3s ease;
}

.mandate-ttl.active {
    color: var(--teal);
}

.mandate-ttl.degraded {
    color: var(--gold);
}

.mandate-ttl.readonly {
    color: var(--blue);
}

.mandate-ttl-refresh {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0 2px;
    opacity: 0.6;
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
}

.mandate-ttl-refresh:hover {
    opacity: 1;
    color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM SCROLLBARS — dark-mode consistent
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════
   BLOCK WIDTH — fill stream container, don't cap at 600px
   ═══════════════════════════════════════════════════════════ */

.canvas-block {
    max-width: 100%;
    position: relative; /* anchor for the absolute-positioned expand button */
}

/* ═══════════════════════════════════════════════════════════
   BROWSE BLOCK — viewport-filling expansion
   ═══════════════════════════════════════════════════════════ */

/* When a browse block (or any block with the expand toggle) fills the canvas,
   it is positioned fixed over the content area, below the topbar and to the
   right of the sidebar, mirroring the main layout grid exactly. */
.canvas-block--expanded {
    position: fixed;
    inset: var(--topbar-height, 36px) 0 0 0;
    z-index: 200;
    max-width: none;
    border-radius: 0;
    border: none;
    overflow-y: auto;
    /* Inherit the block background so it covers the canvas cleanly */
    background: var(--bg-1);
}

/* ── Block controls row ──────────────────────────────────────────────── */
/* Groups: expand toggle, save-template, dismiss ×                        */
/* Hidden until the block is hovered; always visible when expanded.       */
.block-controls {
    position: absolute;
    top: var(--sp-sm, 8px);
    right: var(--sp-sm, 8px);
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.canvas-block:hover .block-controls,
.canvas-block--expanded .block-controls,
.canvas-block.awaiting-approval .block-controls,
.canvas-block.failed .block-controls {
    opacity: 1;
}
.block-expand-btn,
.block-save-template-btn,
.block-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: var(--r-sm, 4px);
    transition: color 0.1s, background 0.1s;
}
.block-expand-btn:hover,
.block-save-template-btn:hover {
    color: var(--text-1);
    background: var(--bg-2);
}
/* Outcome of the last Save-as-template press — success, "already covered", or  */
/* the error. Without it the press was silent in every one of those three cases. */
.block-save-template-status {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-dismiss-btn {
    color: var(--text-3);
    font-size: 14px;
}
.block-dismiss-btn:hover {
    color: var(--coral, #e17055);
    background: rgba(225, 112, 85, 0.1);
}

/* ── Pipe button — route block output through a utility agent ── */
.block-pipe-wrap {
    position: relative;
}
.block-pipe-btn {
    background: none;
    border: none;
    color: var(--teal, #2ec4a0);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: var(--r-sm, 4px);
    transition: color 0.1s, background 0.1s;
}
.block-pipe-btn:hover {
    color: var(--text-1);
    background: var(--bg-2);
}
.block-pipe-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-2, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pipe-agent-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    width: 100%;
    transition: background 0.1s;
}
.pipe-agent-btn:hover {
    background: rgba(255,255,255,0.06);
}
.pipe-agent-name {
    font: 600 13px/1.2 var(--font-body, sans-serif);
    color: var(--text-1);
}
.pipe-agent-desc {
    font: 500 11px/1.3 var(--font-body, sans-serif);
    color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════
   BROWSE BAR — in-block URL navigation for browse blocks
   ═══════════════════════════════════════════════════════════ */

.canvas-block-browse-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-sm, 8px);
    padding: var(--sp-xs, 4px) var(--sp-sm, 8px);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-sm, 4px) var(--r-sm, 4px) 0 0;
}

/* ── Block slot list (provider block — multi-agent results) ── */
.block-slot-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.block-slot-list.multi {
    gap: 1px;
    background: var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
}
.block-slot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs, 4px);
}
.block-slot-list.multi .block-slot {
    background: var(--bg-1);
    padding: var(--sp-sm) var(--sp-md);
}
.slot-agent-label {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    padding-bottom: var(--sp-xs);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--sp-xs);
}

/* ── Slot inline metadata row ─────────────────────────────── */
.slot-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin-top: var(--sp-xs);
    padding-top: var(--sp-xs);
    border-top: 1px solid var(--border-subtle);
}
.preference-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font: var(--text-label);
    color: var(--teal);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}
.preference-hint-icon {
    color: var(--teal);
}
.retention-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    font: var(--text-label);
    color: var(--gold);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    cursor: help;
}
.warning-icon {
    color: var(--gold);
}

/* ── Slot trust toggle ────────────────────────────────────── */
.slot-trust-toggle {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
    margin-left: auto;
}
.slot-trust-toggle:hover {
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04);
}

/* ── LLM synthesis banner ─────────────────────────────────── */
.block-synthesis {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(108, 92, 231, 0.06);
    border-left: 2px solid var(--purple);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-sm);
}
.synthesis-icon {
    color: var(--purple);
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.5;
}
.synthesis-text {
    font: var(--text-body);
    color: var(--text-1);
    margin: 0;
    line-height: 1.5;
}

/* ── Agent candidate picker (Configuring state) ───────────── */
.block-configuring {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-sm) 0;
}
.configuring-header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm);
    margin-bottom: 2px;
}
.configuring-label {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-1);
}
.configuring-sub {
    font: var(--text-small);
    color: var(--text-3);
}
.configuring-actions {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-xs);
}
.agent-candidate-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}
.agent-candidate-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.agent-candidate-card:hover {
    border-color: rgba(108, 92, 231, 0.4);
    background: rgba(108, 92, 231, 0.06);
}
.agent-candidate-card.selected {
    border-color: var(--purple);
    background: rgba(108, 92, 231, 0.12);
}
.candidate-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}
.candidate-name {
    font: var(--text-body);
    color: var(--text-1);
    flex: 1;
}
.candidate-returns {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    color: var(--teal);
    text-transform: uppercase;
}
.candidate-disclosure-count {
    font: var(--text-label);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-label);
    color: var(--text-3);
    text-transform: uppercase;
}
.candidate-disclosure-count.needs-key {
    color: var(--gold);
}

.canvas-block--expanded .canvas-block-browse-bar {
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.browse-bar-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.browse-bar-input {
    flex: 1;
    font-size: 12px;
    font-family: var(--font-mono);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 4px);
    padding: 4px 8px;
    color: var(--text-1);
    outline: none;
    min-width: 0; /* allow flex shrink */
}

.browse-bar-input:focus {
    border-color: var(--purple, #6c5ce7);
}

/* ═══════════════════════════════════════════════════════════
   EXTERNAL URL LINKS — navigable from any block
   ═══════════════════════════════════════════════════════════ */

/* ExternalUrl field values rendered as PAP navigation links */
.typed-url-nav {
    color: var(--purple, #6c5ce7);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all;
}

.typed-url-nav:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   WEBPAGE TEMPLATE — browser-tab-style canvas block
   Rendered by WebPageTemplate for schema:WebPage blocks.
   ═══════════════════════════════════════════════════════════ */

.typed-webpage {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* URL bar — mimics a browser address bar */
.typed-webpage-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-xs, 6px);
    padding: 6px var(--sp-sm, 10px);
    background: var(--bg-3, #2a2940);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--r-sm, 4px) var(--r-sm, 4px) 0 0;
}

.typed-webpage-favicon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.7;
}

.typed-webpage-url {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--purple, #6c5ce7);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.typed-webpage-url:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   READER MODE — Firefox Reader View-style canvas block
   Applied when WebPageTemplate renders a schema:WebPage block.
   ═══════════════════════════════════════════════════════════ */

/* Outer container — centered, constrained reading width */
.reader-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Lead image — full-width banner, max 200px tall */
.reader-image {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 0 0 var(--r-sm, 4px) var(--r-sm, 4px);
    margin-bottom: 0;
}

/* Headline — large display font, tight leading */
.reader-headline {
    font-family: var(--font-display, 'Satoshi', sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-1, #eeeef2);
    margin: var(--sp-md, 14px) var(--sp-md, 14px) 0;
    padding: 0;
}

/* Byline — muted meta row: publisher · author · date */
.reader-byline {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    color: var(--text-3, #6a6a80);
    margin: var(--sp-xs, 4px) var(--sp-md, 14px) 0;
    letter-spacing: 0.03em;
}

/* Description / lead paragraph — slightly larger, muted */
.reader-lead {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2, #9494a8);
    font-style: italic;
    margin: var(--sp-sm, 8px) var(--sp-md, 14px) 0;
    padding: 0;
}

/* Article body container — readable line-height */
.reader-body {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-2, #9494a8);
    margin: var(--sp-sm, 8px) 0 0;
    padding: 0 var(--sp-md, 14px) var(--sp-md, 14px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Regular paragraph inside reader body */
.reader-para {
    margin: 0;
    padding: 0;
}

/* Empty paragraph break — provides visual spacing between blocks */
.reader-para-break {
    height: var(--sp-sm, 8px);
    display: block;
}

/* Heading within article body — promoted from "## " lines */
.reader-h3 {
    font-family: var(--font-display, 'Satoshi', sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-1, #eeeef2);
    margin: var(--sp-sm, 8px) 0 2px;
    padding: 0;
}

/* Blockquote — pull quote style, purple left border */
.reader-blockquote {
    margin: var(--sp-xs, 4px) 0;
    padding: var(--sp-xs, 4px) var(--sp-sm, 10px);
    border-left: 3px solid var(--purple, #6c5ce7);
    background: rgba(108, 92, 231, 0.06);
    border-radius: 0 var(--r-sm, 4px) var(--r-sm, 4px) 0;
    font-style: italic;
    color: var(--text-2, #9494a8);
    font-size: 13px;
    line-height: 1.6;
}

/* "On this page" mentions section */
.reader-mentions {
    padding: var(--sp-sm, 8px) var(--sp-md, 14px) var(--sp-md, 14px);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: var(--sp-xs, 4px);
}

.reader-mentions-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-3, #6a6a80);
    margin: 0 0 var(--sp-xs, 4px);
}

.reader-mentions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs, 4px);
}

/* Individual mention chip — pill style, pap:// link */
.reader-mention-chip {
    display: inline-block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    color: var(--purple, #6c5ce7);
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-radius: 999px;
    padding: 2px 10px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reader-mention-chip:hover {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   EPISODE HISTORY PAGE  (receipts.rs → /receipts route)
   ═══════════════════════════════════════════════════════════════════ */

.history-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────── */
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.history-header-left { display: flex; align-items: center; gap: var(--sp-sm); }
.history-header-icon {
    width: 34px;
    height: 34px;
    background: rgba(46,196,160,0.1);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    flex-shrink: 0;
}
.history-title {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-1);
}
.history-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-3);
    margin-top: 1px;
}
.history-header-right { display: flex; align-items: center; gap: var(--sp-xs); }
.history-stat-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
    border: 1px solid rgba(255,255,255,0.08);
}
.history-stat-badge.success {
    background: rgba(46,196,160,0.1);
    color: var(--teal);
    border-color: rgba(46,196,160,0.2);
}

/* ── Search bar ──────────────────────────────────────────────────── */
.history-search-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-lg);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.history-search-icon { color: var(--text-3); flex-shrink: 0; }
.history-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-1);
}
.history-search-input::placeholder { color: var(--text-3); }
.history-search-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
}

/* ── Body: master-detail split ───────────────────────────────────── */
.history-body {
    display: grid;
    grid-template-columns: 380px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Episode list (left) ─────────────────────────────────────────── */
.history-list {
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;
    padding: var(--sp-xs) 0;
}
.history-loading {
    padding: var(--sp-lg);
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-3);
}
.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2xl) var(--sp-lg);
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
}

/* ── Episode row ─────────────────────────────────────────────────── */
.history-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.history-row:hover { background: rgba(255,255,255,0.03); }
.history-row.selected { background: rgba(108,92,231,0.08); }

.history-outcome {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.history-outcome.success { color: var(--teal); }
.history-outcome.failure { color: var(--coral); }
.history-outcome.rejected { color: var(--gold); }

.history-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.history-row-query {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.history-row-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-3);
}
.history-row-agent { color: var(--purple); }
.history-row-sep { opacity: 0.4; }
.history-row-action { color: var(--text-3); }
.history-row-duration { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.history-row-ts {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 3px;
}

/* ── Detail panel (right) ────────────────────────────────────────── */
.history-detail {
    overflow-y: auto;
    padding: var(--sp-md);
}
.history-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-3);
}

/* ── Detail card ─────────────────────────────────────────────────── */
.history-detail-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    max-width: 640px;
}
.history-detail-header { display: flex; align-items: center; gap: var(--sp-sm); }

.history-detail-outcome {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--r-sm);
}
.history-detail-outcome.success {
    background: rgba(46,196,160,0.12);
    color: var(--teal);
    border: 1px solid rgba(46,196,160,0.25);
}
.history-detail-outcome.failure {
    background: rgba(232,112,106,0.12);
    color: var(--coral);
    border: 1px solid rgba(232,112,106,0.25);
}
.history-detail-outcome.rejected {
    background: rgba(240,160,48,0.12);
    color: var(--gold);
    border: 1px solid rgba(240,160,48,0.25);
}

.history-decay-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: var(--r-sm);
}
.decay-active { background: rgba(46,196,160,0.1); color: var(--teal); border: 1px solid rgba(46,196,160,0.2); }
.decay-degraded { background: rgba(240,160,48,0.1); color: var(--gold); border: 1px solid rgba(240,160,48,0.2); }
.decay-readonly { background: rgba(255,255,255,0.06); color: var(--text-3); border: 1px solid rgba(255,255,255,0.1); }
.decay-suspended { background: rgba(232,112,106,0.1); color: var(--coral); border: 1px solid rgba(232,112,106,0.2); }
.decay-unknown { background: rgba(255,255,255,0.04); color: var(--text-3); border: 1px solid rgba(255,255,255,0.08); }

.history-detail-section { display: flex; flex-direction: column; gap: 4px; }
.history-detail-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-3);
    text-transform: uppercase;
}
.history-detail-query {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-1);
    line-height: 1.5;
    padding: var(--sp-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
}
.history-detail-value {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-1);
}
.history-detail-value.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.history-detail-value.small { font-size: 10px; color: var(--text-3); word-break: break-all; }
.history-detail-note {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--coral);
    background: rgba(232,112,106,0.06);
    border: 1px solid rgba(232,112,106,0.15);
    border-radius: var(--r-sm);
    padding: var(--sp-xs) var(--sp-sm);
}
.history-detail-result {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    padding: var(--sp-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    scrollbar-width: thin;
}
.history-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm);
}
.history-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--sp-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--r-sm);
}
.history-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.history-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}
.history-tag.disclosed {
    background: rgba(108,92,231,0.12);
    color: var(--purple);
    border: 1px solid rgba(108,92,231,0.2);
}

/* ── Canvas flip ─────────────────────────────────────────────────────────── */
.canvas-flip-toggle-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px;
}
.canvas-flip-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* The container is a flex item of `.canvas-page` and the parent of whichever
     face is mounted. Both faces size themselves against it — `.canvas-stream` is
     `flex: 1; min-height: 0` and `.canvas-back-face` is `height: 100%` — so it
     has to be a column that fills the page and clamps to it. `flex: 1` sets
     `flex-basis: 0%`, which supersedes the `height: 100%` above for the main
     size; the declaration is left as written so the rule still reads as the
     stylesheet's author left it. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.canvas-flip-container.flipped {
  transform: rotateY(180deg);
}

/* ── Canvas back face tabs ────────────────────────────────────── */
.canvas-back-face {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-1, #0e0e1a);
  overflow: hidden;
  /* Undo the container's half-turn. The flip is a mirror, not a page turn — with
     no `perspective` on an ancestor, `rotateY(180deg)` is a horizontal flip — so
     a back face that did not counter-rotate would render its text reversed. Two
     half-turns compose to the identity, which also keeps every bounding box
     honest for hit-testing and for the usability gate. Exactly one face is
     mounted at a time, so `backface-visibility` has nothing to hide — and it is
     deliberately not set, because a browser that got it wrong would leave the
     back face permanently invisible. The cost is that the two rotations are only
     in step at the ends of the 0.4s transition, so the first half of a flip shows
     the map briefly mirrored. */
  transform: rotateY(180deg);
}

.back-face-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  padding: 12px 18px 10px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.015);
}

.back-face-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.back-face-tab:hover {
  color: var(--text-primary, #e0e0e0);
}

.back-face-tab--active {
  color: var(--text-1);
  background: rgba(108,92,231,0.18);
  border-color: rgba(108,92,231,0.34);
}

.back-face-panel {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.back-face-panel > .ghost-run-panel {
    padding: 22px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ── Source Panel (back-face Sources tab) ───────────────────────────────── */
.source-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.source-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    flex-shrink: 0;
}

.source-panel-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #6b7280);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.source-count {
    font-size: 10px;
    font-weight: 600;
    background: rgba(108,92,231,0.15);
    color: var(--purple, #6c5ce7);
    border-radius: 9px;
    padding: 1px 7px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    min-width: 18px;
    text-align: center;
}

.source-chips {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.source-chip {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
    border-radius: 7px;
    overflow: hidden;
    cursor: grab;
    transition: border-color 0.15s, background 0.15s;
}
.source-chip:hover {
    border-color: var(--purple, #6c5ce7);
    background: rgba(108,92,231,0.08);
}
.source-chip:active {
    cursor: grabbing;
}

.source-chip-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    min-width: 0;
    cursor: pointer;
}

.source-chip-agent {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

.source-chip-type {
    font-size: 9px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--teal, #2ec4a0);
    background: rgba(46,196,160,0.08);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.source-chip-ttl {
    font-size: 9px;
    flex-shrink: 0;
}
.source-chip-ttl.decay-active  { color: var(--teal, #2ec4a0); }
.source-chip-ttl.decay-degraded { color: var(--gold, #f0a500); }
.source-chip-ttl.decay-readonly { color: var(--text-muted, #6b7280); }

.source-chip-reshape {
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    padding: 6px 9px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.source-chip-reshape:hover {
    color: var(--purple, #6c5ce7);
    background: rgba(108,92,231,0.1);
}

/* Reshape picker dropdown */
.reshape-picker {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-2, #13131f);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.reshape-picker select {
    flex: 1;
    background: var(--surface-1, #0e0e1a);
    border: 1px solid #333;
    color: #888;
    font-size: 10px;
    border-radius: 3px;
    padding: 2px 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.reshape-picker-apply {
    background: var(--purple, #6c5ce7);
    border: none;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}
.reshape-picker-apply:hover {
    background: #7d6ee0;
}

/* ── Block query label ───────────────────────────────────────────────────── */
.block-query-label {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    padding: 4px 0 8px 0;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Chat thread ─────────────────────────────────────────────────────────── */
.canvas-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border-top: none;
    overflow-y: auto;
}
.canvas-chat-thread.compact {
    max-height: 240px;
}
.canvas-chat-empty {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-2);
    font: var(--text-ui);
    background: rgba(255,255,255,0.02);
}
.chat-message-user {
    align-self: stretch;
    background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(108,92,231,0.1));
    border: 1px solid rgba(108,92,231,0.25);
    color: white;
    padding: 10px 12px;
    border-radius: 14px;
    max-width: 100%;
    font-size: 13px;
}
.chat-message-assistant {
    align-self: stretch;
    background: var(--surface-2, rgba(255,255,255,0.06));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--text-primary, #e5e7eb);
    padding: 10px 12px;
    border-radius: 14px;
    max-width: 100%;
    font-size: 13px;
}
.chat-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.chat-message-role {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}
.chat-message-body {
    line-height: 1.5;
}
.chat-block-link {
    font-size: 10px;
    opacity: 0.7;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ── Canvas flip toggle button ───────────────────────────────────────────── */
.canvas-flip-toggle {
    font-size: 11px;
    color: var(--text-1);
    background: rgba(108,92,231,0.14);
    border: 1px solid rgba(108,92,231,0.26);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.canvas-flip-toggle:hover {
    border-color: rgba(108,92,231,0.5);
    background: rgba(108,92,231,0.2);
}
.workflow-empty-state {
    padding: 24px 16px;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    text-align: center;
}
.workflow-block-card {
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.workflow-block-card .wf-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.workflow-block-card .wf-query {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.workflow-block-card .wf-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}
.workflow-block-card .wf-state-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.wf-state-badge.resolved  { background: rgba(46,196,160,0.15); color: #2ec4a0; }
.wf-state-badge.resolving { background: rgba(240,160,48,0.15);  color: #f0a030; }
.wf-state-badge.failed    { background: rgba(232,112,106,0.15); color: #e8706a; }
.wf-state-badge.ghost     { background: rgba(255,255,255,0.06); color: #9ca3af; }

/* ─── Orchestration Trace Panel ─────────────────────────────────────────── */
.wf-trace-panel {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--surface-1, #0e0e1a);
}
.wf-trace-header {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.wf-trace-title {
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-muted, #555); font-family: var(--font-mono);
    text-transform: uppercase;
}
.wf-trace-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; padding: 40px 20px;
    color: var(--text-muted, #555); font-size: 11px; text-align: center;
}
.wf-trace-empty p { margin: 0; }
.wf-trace-empty-hint { font-size: 10px; opacity: 0.6; }
.wf-trace-list {
    flex: 1; overflow-y: auto; padding: 8px;
    display: flex; flex-direction: column; gap: 6px;
}

/* ─── Trace Entry ────────────────────────────────────────────────────────── */
.wf-trace-entry {
    background: var(--surface-2); border-radius: 8px;
    border-left: 3px solid var(--border-subtle, rgba(255,255,255,0.08));
    padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
    font-size: 11px;
}
.wf-trace-entry.trace-resolving { border-left-color: var(--gold); }
.wf-trace-entry.trace-awaiting  { border-left-color: var(--purple); }
.wf-trace-entry.trace-ghost     { border-left-color: var(--purple); opacity: 0.8; }
.wf-trace-entry.trace-resolved  { border-left-color: var(--teal); }
.wf-trace-entry.trace-failed    { border-left-color: var(--coral); }
.wf-trace-entry.trace-pending   { border-left-color: #333; }

.wf-trace-entry-header {
    display: flex; align-items: flex-start; gap: 8px; justify-content: space-between;
}
.wf-trace-prompt {
    color: #c0c0c0; font-size: 11px; flex: 1; line-height: 1.4;
}
.wf-trace-state-badge {
    font-size: 8px; font-weight: 700; letter-spacing: 0.05em; flex-shrink: 0;
    text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
    font-family: var(--font-mono);
}
.trace-resolving .wf-trace-state-badge { color: var(--gold); background: rgba(240,160,48,0.1); }
.trace-awaiting  .wf-trace-state-badge { color: var(--purple); background: rgba(108,92,231,0.1); }
.trace-resolved  .wf-trace-state-badge { color: var(--teal); background: rgba(46,196,160,0.1); }
.trace-failed    .wf-trace-state-badge { color: var(--coral); background: rgba(232,112,106,0.1); }
.trace-ghost     .wf-trace-state-badge { color: var(--purple); background: rgba(108,92,231,0.08); }
.trace-pending   .wf-trace-state-badge { color: #555; background: rgba(255,255,255,0.04); }

.wf-trace-phase {
    display: flex; align-items: center; gap: 6px;
}
.wf-phase-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
}
.wf-phase-dot-pulse {
    animation: wf-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes wf-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}
.wf-trace-phase-label { font-size: 10px; color: var(--gold); font-family: var(--font-mono); }

.wf-trace-agent {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 6px; background: rgba(255,255,255,0.03); border-radius: 4px;
}
.wf-trace-did {
    font-size: 8px; color: #444; font-family: var(--font-mono);
}

/* ─── Approval Plan (inline in trace entry) ──────────────────────────────── */
.wf-approval-plan {
    background: rgba(108,92,231,0.05); border: 1px solid rgba(108,92,231,0.2);
    border-radius: 5px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.wf-plan-agent-row, .wf-plan-returns, .wf-plan-ttl {
    display: flex; align-items: center; gap: 6px;
}
.wf-plan-label {
    font-size: 9px; color: #555; text-transform: uppercase;
    letter-spacing: 0.05em; flex-shrink: 0;
}
.wf-plan-value { font-size: 10px; color: #c0c0c0; font-family: var(--font-mono); }
.wf-plan-disclosure { font-size: 9px; color: #888; padding: 2px 0; }
.wf-plan-check { color: var(--purple); }

.wf-trace-jump {
    background: transparent; border: none; color: #444; font-size: 9px;
    cursor: pointer; text-align: left; padding: 0; font-family: var(--font-mono);
    align-self: flex-end; transition: color 0.15s;
}
.wf-trace-jump:hover { color: var(--purple); }

/* ─── Inline Approval Card ───────────────────────────────────────────────── */
.wf-approval-card {
    position: absolute; z-index: 100;
    background: var(--surface-2); border: 1px solid var(--gold);
    border-radius: 10px; padding: 14px; width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.wf-approval-agent {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    background: rgba(255,255,255,0.03); border-radius: 6px; padding: 8px;
    border: 1px solid var(--border-subtle);
}
.wf-approval-icon  { font-size: 1.5rem; flex-shrink: 0; }
.wf-approval-agent-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wf-approval-agent-name { font-size: 11px; font-weight: 600; color: #e0e0e0; }
.wf-tee-badge {
    margin-left: auto; font-size: 9px; color: var(--teal);
    background: rgba(46,196,160,0.1); border: 1px solid var(--teal);
    border-radius: 3px; padding: 2px 5px;
}
.wf-approval-prompt { font-size: 10px; color: #888; margin: 0 0 8px; }
.wf-disclosure-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.wf-disclosure-item {
    background: rgba(46,196,160,0.05); border: 1px solid var(--teal);
    border-radius: 5px; padding: 6px 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.wf-disclosure-label { font-size: 10px; color: #e0e0e0; }
.wf-disclosure-path  { font-size: 8px; color: #555; font-family: var(--font-mono); }
.wf-disclosure-check { font-size: 12px; color: var(--teal); }
.wf-approval-redacted {
    background: rgba(255,255,255,0.02); border-radius: 5px; padding: 6px 10px;
    font-size: 9px; color: #555; margin-bottom: 10px; line-height: 1.5;
}
.wf-approval-actions { display: flex; gap: 6px; }
.wf-approval-btn {
    flex: 1; border-radius: 5px; padding: 6px 8px; font-size: 10px;
    font-weight: 600; cursor: pointer; text-align: center; border: 1.5px solid;
    transition: background 0.15s;
}
.wf-approval-allow-once {
    background: rgba(46,196,160,0.1); border-color: var(--teal); color: var(--teal);
}
.wf-approval-always-allow {
    background: rgba(46,196,160,0.06); border-color: var(--teal); color: var(--teal);
}
.wf-approval-deny {
    background: transparent; border-color: #444; color: #666; flex: 0 0 auto;
}

/* ── Agent Picker Modal ──────────────────────────────────────────────────── */
.agent-picker-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
}
.agent-picker-modal {
    background: var(--bg-1, #0e0e1a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px;
    padding: 24px;
    width: min(720px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.agent-picker-header {
    display: flex; align-items: center; justify-content: space-between;
}
.agent-picker-title {
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; font-family: var(--font-mono); color: var(--text-primary, #e0e0e0);
}
.agent-picker-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted, #6b7280); font-size: 18px; padding: 2px 6px;
    border-radius: 4px; transition: color 0.15s;
}
.agent-picker-close:hover { color: var(--text-primary, #e0e0e0); }
.agent-picker-search {
    width: 100%; background: var(--bg-2, #13131f);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 6px; padding: 8px 12px;
    color: var(--text-primary, #e0e0e0); font-size: 13px;
    outline: none; font-family: var(--font-body);
}
.agent-picker-search:focus { border-color: var(--purple, #6c5ce7); }
.agent-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}
.agent-picker-card {
    background: var(--bg-2, #13131f);
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: 8px; padding: 12px 14px;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
    display: flex; flex-direction: column; gap: 4px;
}
.agent-picker-card:hover {
    border-color: var(--purple, #6c5ce7);
    background: rgba(108,92,231,0.06);
}
.agent-picker-card-name {
    font-size: 12px; font-weight: 600; color: var(--text-primary, #e0e0e0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-picker-card-cap {
    font-size: 10px; color: var(--teal, #2ec4a0);
    font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-picker-card-source {
    font-size: 9px; color: var(--text-muted, #6b7280);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}
.agent-picker-empty {
    grid-column: 1 / -1; text-align: center;
    color: var(--text-muted, #6b7280); font-size: 12px; padding: 24px 0;
}
.agent-picker-count {
    font-size: 10px; color: var(--text-muted, #6b7280); text-align: right;
    font-family: var(--font-mono);
}

/* ── Settings Overlay ────────────────────────────────────────────────────── */
.settings-overlay {
    position: fixed; inset: 0;
    background: var(--bg-1, #0e0e1a);
    z-index: 1200;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.settings-overlay-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    height: 48px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
.settings-overlay-title {
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; font-family: var(--font-mono);
    color: var(--text-muted, #6b7280);
}
.settings-overlay-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted, #6b7280); font-size: 20px;
    padding: 4px 8px; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.settings-overlay-close:hover {
    color: var(--text-primary, #e0e0e0);
    background: rgba(255,255,255,0.05);
}
.settings-overlay-body {
    flex: 1; overflow: hidden; display: flex;
}
/* Settings layout inside overlay fills remaining space */
.settings-overlay .settings-layout {
    flex: 1;
    overflow: hidden;
}

.ghost-run-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
}

.ghost-run-panel.compact {
    gap: 14px;
}

.ghost-run-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(46,196,160,0.14);
    background:
    radial-gradient(circle at top right, rgba(46,196,160,0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}

.ghost-run-kicker,
.ghost-run-section-label,
.ghost-metric-label {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ghost-run-kicker {
    color: var(--teal);
    margin-bottom: 8px;
}

.ghost-run-title {
    color: var(--text-1);
    font: 700 34px/1.08 var(--font-display);
    margin-bottom: 10px;
    max-width: 720px;
}

.ghost-run-copy {
    color: var(--text-2);
    font: 500 15px/1.6 var(--font-body);
    max-width: 740px;
}

.ghost-run-status {
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.ghost-run-status.status-ready {
    color: var(--teal);
    background: rgba(46,196,160,0.12);
    border-color: rgba(46,196,160,0.2);
}

.ghost-run-status.status-disconnected,
.ghost-run-status.status-unconfigured {
    color: var(--gold);
    background: rgba(240,160,48,0.12);
    border-color: rgba(240,160,48,0.2);
}

.ghost-run-status.status-downloading {
    color: var(--purple);
    background: rgba(108,92,231,0.12);
    border-color: rgba(108,92,231,0.2);
}

.ghost-run-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ghost-metric {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border-subtle);
}

.ghost-metric-value {
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
}

.ghost-metric-label {
    color: var(--text-3);
}

.ghost-run-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ghost-run-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ghost-run-section-label {
    color: var(--text-2);
}

.ghost-run-section-count {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(108,92,231,0.12);
    color: var(--purple);
    font: var(--text-label);
}

.ghost-run-empty {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px dashed var(--border);
    color: var(--text-2);
    font: 500 14px/1.55 var(--font-body);
}

.ghost-run-approvals{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ghost-approval-card,
.ghost-trace-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.035);
}

.ghost-approval-prompt{
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.55;
}

.ghost-approval-group {
    border-radius: 14px;
    border-color: rgba(108,92,231,0.2);
    background: rgba(108,92,231,0.04);
}

.ghost-approval-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ghost-approval-kicker,
.ghost-approval-subhead,
.ghost-approval-summary-item span {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ghost-approval-kicker {
    color: var(--teal);
    margin-bottom: 4px;
}

.ghost-approval-title {
    color: var(--text-1);
    font: 700 17px/1.25 var(--font-display);
}

.ghost-approval-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.ghost-approval-summary-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(0,0,0,0.12);
}

.ghost-approval-summary-item span {
    color: var(--text-3);
}

.ghost-approval-summary-item strong {
    color: var(--text-1);
    font: 600 12px/1.35 var(--font-body);
}

.ghost-approval-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.ghost-approval-subhead {
    color: var(--text-2);
}

.ghost-agent-choice {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 9px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    cursor: pointer;
}

.ghost-agent-choice input {
    margin: 2px 0 0;
    accent-color: var(--teal);
}

.ghost-agent-choice-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ghost-agent-choice-name {
    color: var(--text-1);
    font: 600 13px/1.35 var(--font-body);
}

.ghost-agent-choice-detail {
    color: var(--text-3);
    font: var(--text-small);
    line-height: 1.45;
}

.ghost-disclosure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.ghost-disclosure-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ghost-zero-disclosure {
    color: var(--teal);
    font: var(--text-small);
    padding: 9px 10px;
    border: 1px solid rgba(46,196,160,0.18);
    border-radius: 8px;
    background: rgba(46,196,160,0.08);
}

.ghost-approval-prompts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.ghost-approval-prompts .ghost-approval-prompt {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    color: var(--text-2);
    font-size: 12px;
}

.ghost-trace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ghost-trace-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.05);
    color: var(--text-2);
}

.ghost-trace-card.trace-resolving {
    border-color: rgba(240,160,48,0.24);
}

.ghost-trace-card.trace-awaiting,
.ghost-trace-card.trace-ghost {
    border-color: rgba(108,92,231,0.24);
}

.ghost-trace-card.trace-resolved {
    border-color: rgba(46,196,160,0.24);
}

.ghost-trace-card.trace-failed {
    border-color: rgba(232,112,106,0.28);
}

@media (max-width: 900px) {
    .topbar {
    height: auto;
    align-items: stretch;
    padding: 8px 0;
    }

    .topbar-address {
    padding-right: 0;
    }

    .ghost-run-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ghost-approval-summary {
    grid-template-columns: 1fr;
    }

    .wf-design-layout {
    grid-template-columns: 1fr;
    }

    .canvas-title-button,
    .canvas-title-input {
    width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
     WORKFLOW GRAPH (back-face Workflow tab — MAP and DESIGN modes)
     ═══════════════════════════════════════════════════════════════ */

.wf-mode-toggle {
    display: flex;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px;
    margin: 10px 14px 0;
    width: fit-content;
}
.wf-mode-btn {
    background: transparent;
    border: none;
    border-radius: 3px;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.12s;
}
.wf-mode-btn.active { background: var(--bg-3); color: var(--text-1); }
.wf-graph-canvas {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wf-graph-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    color: var(--text-3);
    font-size: 12px;
    font-family: var(--font-mono);
}
.wf-graph-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 160px;
    margin-bottom: 20px;
}
.wf-node {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.15s;
}
.wf-node:hover { border-color: var(--purple); }
.wf-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px 8px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.wf-node-emoji { font-size: 13px; flex-shrink: 0; }
.wf-node-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.wf-node-uri {
    font-size: 9px;
    color: var(--text-3);
    font-family: var(--font-mono);
    padding: 0 12px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-node-section {
    padding: 5px 10px 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    font-family: var(--font-mono);
    border-top: 1px solid var(--border-subtle);
}
.wf-port-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    min-height: 24px;
}
.wf-port-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-2);
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}
.wf-port-dot.wired { background: var(--teal); border-color: var(--teal); }
.wf-port-dot.output { margin-left: auto; margin-right: 0; }
.wf-port-label {
    font-size: 11px;
    color: var(--text-2);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-port-schema {
    font-size: 9px;
    color: var(--text-3);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.wf-node-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.wf-node-badge.resolved { background: rgba(0,184,148,0.15); color: var(--teal); }
.wf-node-badge.running  { background: rgba(253,203,110,0.15); color: var(--gold); }
.wf-node-badge.failed   { background: rgba(232,112,106,0.15); color: var(--coral); }
.wf-node-badge.pending  { background: rgba(108,92,231,0.12); color: var(--purple); }
.wf-edge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
.wf-edge-line {
    width: 100%;
    height: 2px;
    background: var(--border);
    position: relative;
}
.wf-edge-line.confirmed  { background: var(--teal); }
.wf-edge-line.proposed   { background: var(--gold); }
.wf-edge-line.blocked    { background: var(--coral); }
.wf-edge-line.unconnected { background: var(--border); }
.wf-edge-memex {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1;
}
.wf-approval-card {
    background: var(--bg-1);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 14px;
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wf-approval-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    color: var(--gold);
}
.wf-approval-card-agent { font-size: 12px; color: var(--text-1); font-weight: 600; }
.wf-approval-card-disclosure { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.wf-approval-card-disclosure code {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--bg-2);
    padding: 1px 4px;
    border-radius: 3px;
}
.wf-approval-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-approval-btn {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.12s;
    font-family: var(--font-body);
}
.wf-approval-btn.allow  { background: rgba(0,184,148,0.12); border-color: var(--teal); color: var(--teal); }
.wf-approval-btn.allow:hover  { background: rgba(0,184,148,0.22); }
.wf-approval-btn.always { background: rgba(108,92,231,0.12); border-color: var(--purple); color: var(--purple); }
.wf-approval-btn.always:hover { background: rgba(108,92,231,0.22); }
.wf-approval-btn.deny   { background: rgba(232,112,106,0.1); border-color: var(--coral); color: var(--coral); }
.wf-approval-btn.deny:hover   { background: rgba(232,112,106,0.2); }
.wf-design-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wf-design-tool-btn {
    min-height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-2);
    transition: all 0.12s;
    line-height: 1;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 12px;
}
.wf-design-tool-btn:hover { background: var(--bg-3); border-color: var(--border); }
.wf-design-tool-btn.run { background: rgba(108,92,231,0.15); border-color: var(--purple); color: var(--purple); }
.wf-design-tool-btn.run:hover { background: rgba(108,92,231,0.25); }
.wf-design-tool-btn.save { border-color: var(--border); color: var(--text-2); }
.wf-design-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 14px;
    flex: 1;
    overflow: hidden;
    padding: 14px 18px 18px;
}
.wf-design-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-studio-inspector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.wf-studio-board-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.wf-studio-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
}
.wf-studio-panel-primary {
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.14), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.wf-studio-kicker {
    font: var(--text-label);
    color: var(--teal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wf-studio-title,
.wf-studio-board-title {
    color: var(--text-1);
    font: 700 18px/1.15 var(--font-display);
    letter-spacing: -0.02em;
}
.wf-studio-copy {
    color: var(--text-2);
    font: 500 13px/1.55 var(--font-body);
}
.wf-studio-copy.compact {
    font-size: 12px;
}
.wf-studio-section-header,
.wf-studio-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.wf-studio-section-title {
    color: var(--text-1);
    font: 700 12px/1.2 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-studio-pill {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(108,92,231,0.14);
    color: var(--purple);
    font: var(--text-label);
}
.wf-studio-pill.subtle {
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
}
.wf-studio-composer {
    gap: 12px;
}
.wf-studio-composer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.wf-studio-composer-meta {
    color: var(--text-3);
    font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-design-tools-inline {
    gap: 8px;
}
.wf-agent-shelf {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-agent-shelf-label {
    color: var(--text-3);
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-agent-shelf-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.wf-studio-empty {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed var(--border);
    color: var(--text-2);
    font: 500 13px/1.55 var(--font-body);
}
.wf-agent-palette,
.wf-connector-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.wf-agent-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    padding: 12px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.wf-agent-card:hover {
    border-color: rgba(108,92,231,0.35);
    background: rgba(108,92,231,0.08);
    transform: translateY(-1px);
}
.wf-agent-card-header,
.wf-connector-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wf-agent-card-name,
.wf-ghost-node-name {
    color: var(--text-1);
    font: 700 14px/1.2 var(--font-display);
}
.wf-agent-card-source,
.wf-ghost-node-kicker,
.wf-ghost-node-section-label,
.wf-connector-card-state {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-agent-card-source {
    color: var(--text-3);
}
.wf-agent-card-capability,
.wf-connector-card-path {
    color: var(--text-1);
    font: 500 12px/1.45 var(--font-mono);
}
.wf-agent-card-meta,
.wf-connector-card-meta {
    display: flex;
    gap: 10px;
    color: var(--text-2);
    font: var(--text-small);
}
.wf-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wf-studio-board-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.wf-board-guidance {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 2px;
}
.wf-board-guidance-copy {
    color: var(--text-3);
    font: 500 12px/1.45 var(--font-body);
}
.wf-studio-board {
    padding: 0;
    background:
      radial-gradient(circle at top right, rgba(46,196,160,0.05), transparent 28%),
      rgba(255,255,255,0.008);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    position: relative;
    min-height: 700px;
    overflow: hidden;
}
.wf-studio-board-canvas {
    position: relative;
    min-height: 700px;
    overflow: auto;
}
.wf-studio-board-empty {
    min-height: 320px;
}
.wf-board-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wf-board-wire {
    fill: none;
    stroke-width: 3;
    opacity: 0.9;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke-width 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
.wf-board-wire.state-manual {
    stroke: var(--teal);
}
.wf-board-wire.state-suggested {
    stroke: var(--gold);
    stroke-dasharray: 10 8;
}
.wf-board-wire.state-blocked {
    stroke: var(--coral);
    stroke-dasharray: 6 6;
}
.wf-board-wire.state-loose {
    stroke: var(--text-3);
}
.wf-board-wire.state-drafting {
    stroke: rgba(255,255,255,0.38);
    stroke-dasharray: 12 10;
}
.wf-board-wire.is-selected {
    stroke-width: 5;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.18));
}
.wf-wire-chip {
    position: absolute;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,12,24,0.82);
    color: var(--text-2);
    font: 500 11px/1.2 var(--font-mono);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.wf-wire-chip.state-manual {
    color: var(--teal);
}
.wf-wire-chip.state-suggested {
    color: var(--gold);
}
.wf-wire-chip.is-selected {
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
    color: var(--text-1);
}
.wf-wire-hud {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(8,10,20,0.92);
    box-shadow: 0 18px 36px rgba(0,0,0,0.28);
}
.wf-wire-hud-kicker,
.wf-connector-focus {
    color: var(--text-3);
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-wire-hud-title {
    color: var(--text-1);
    font: 700 14px/1.3 var(--font-display);
}
.wf-wire-hud-copy {
    color: var(--text-2);
    font: 500 12px/1.45 var(--font-mono);
}
.wf-wire-hud-remove {
    width: 100%;
    justify-content: center;
}
.wf-ghost-node {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.07);
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.08), transparent 40%),
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
    position: absolute;
    width: 248px;
    cursor: grab;
    user-select: none;
    box-shadow: 0 12px 28px rgba(4, 6, 16, 0.24);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.wf-ghost-node.is-selected {
    border-color: rgba(108,92,231,0.34);
    box-shadow: 0 18px 36px rgba(4, 6, 16, 0.34);
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.12), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
}
.wf-ghost-node-shape-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.wf-ghost-node-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.wf-ghost-node-shape {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
    font: var(--text-label);
}
.wf-ghost-node-shape-secondary {
    max-width: 136px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
    display: none;
}
.wf-ghost-node.is-selected .wf-ghost-node-shape-secondary {
    display: inline-flex;
}
.wf-ghost-node-intent {
    color: var(--text-2);
    font: 500 13px/1.5 var(--font-body);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wf-ghost-node-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wf-ghost-node-summary-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-3);
    font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.wf-ghost-node.is-selected .wf-ghost-node-summary-meta {
    display: none;
}
.wf-ghost-node-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wf-ghost-node:not(.is-selected) .wf-ghost-node-section,
.wf-ghost-node:not(.is-selected) .wf-ghost-node-actions {
    display: none;
}
.wf-ghost-node-section-label {
    color: var(--text-3);
}
.wf-ghost-port-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-ghost-port {
    padding: 6px 10px;
    border-radius: 999px;
    font: 500 10px/1.2 var(--font-mono);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
}
.wf-ghost-port-input {
    background: rgba(240,160,48,0.11);
    color: var(--gold);
    border-color: rgba(240,160,48,0.2);
}
.wf-ghost-port-output {
    background: rgba(46,196,160,0.1);
    color: var(--teal);
    border-color: rgba(46,196,160,0.2);
}
.wf-ghost-port.is-selected {
    outline: 2px solid rgba(255,255,255,0.16);
    outline-offset: 1px;
    transform: translateY(-1px);
}
.wf-ghost-node-actions {
    display: flex;
    justify-content: flex-end;
}
.wf-inspector-title {
    font-size: 20px;
}
.wf-studio-panel-focus {
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.12), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}
.wf-inspector-empty {
    background: rgba(255,255,255,0.015);
}
.wf-inspector-preview,
.wf-inspector-actions,
.wf-inspector-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-inspector-actions {
    flex-direction: row;
    flex-wrap: wrap;
}
.wf-inspector-collapse {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 6px;
    padding-top: 10px;
}
.wf-inspector-collapse summary {
    cursor: pointer;
    color: var(--text-2);
    font: 600 12px/1.2 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
}
.wf-inspector-collapse summary::-webkit-details-marker {
    display: none;
}
.wf-inspector-collapse[open] summary {
    margin-bottom: 10px;
}
.wf-manual-wire {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-wire-select {
    width: 100%;
    background: rgba(9, 11, 22, 0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-1);
    font: 500 13px/1.4 var(--font-body);
}
.wf-connector-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
}
.wf-connector-remove {
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font: var(--text-label);
    text-transform: uppercase;
}
.wf-connector-focus {
    border: none;
    background: transparent;
    cursor: pointer;
}
.wf-connector-focus:hover,
.wf-connector-remove:hover {
    color: var(--coral);
}
.wf-node-intent-input {
    width: 100%;
    background: rgba(9, 11, 22, 0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-1);
    font-family: var(--font-body);
    outline: none;
    resize: none;
}
.wf-node-intent-input:focus { background: var(--bg-3); color: var(--text-1); }
@keyframes wf-edge-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.35; }
    100% { opacity: 1; }
}
.wf-edge-line.running {
    background: var(--gold);
    animation: wf-edge-pulse 1.2s ease-in-out infinite;
}

/* Workflow board refresh: provider choice + inline reshape */
.wf-design-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    overflow: auto;
    padding: 14px 18px 18px;
}
.wf-workflow-composer {
    gap: 10px;
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.12), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.wf-workflow-composer-row,
.wf-provider-chooser-header,
.wf-selection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wf-provider-chooser-title {
    color: var(--text-1);
    font: 700 18px/1.15 var(--font-display);
    letter-spacing: -0.02em;
}
.wf-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.wf-provider-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 42%),
      rgba(255,255,255,0.02);
}
.wf-provider-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.wf-provider-card-name {
    color: var(--text-1);
    font: 700 15px/1.2 var(--font-display);
}
.wf-provider-card-capability {
    color: var(--text-2);
    font: 500 12px/1.45 var(--font-body);
}
.wf-provider-card-schema {
    color: var(--text-3);
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wf-provider-card-copy {
    color: var(--text-2);
    font: 500 12px/1.5 var(--font-body);
}
.wf-provider-card-outputs,
.wf-property-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-provider-lease-row,
.wf-selection-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-provider-lease-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    cursor: pointer;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wf-provider-lease-btn:hover,
.wf-design-tool-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-1);
}
.wf-studio-board {
    padding: 0;
    min-height: 680px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
      radial-gradient(circle at top right, rgba(46,196,160,0.06), transparent 32%),
      rgba(255,255,255,0.01);
    background-size: 32px 32px, 32px 32px, auto, auto;
}
.wf-studio-board-canvas {
    position: relative;
    min-height: 680px;
    overflow: auto;
    padding: 24px;
}
.wf-studio-board-empty {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 40px;
    text-align: center;
}
.wf-selection-tray {
    gap: 12px;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 38%),
      rgba(255,255,255,0.018);
}
.wf-selection-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.wf-selection-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-selection-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(108,92,231,0.14);
    color: var(--purple);
    font: var(--text-label);
}
.wf-selection-pill-subtle {
    background: rgba(255,255,255,0.05);
    color: var(--text-2);
}
.wf-property-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    font: 500 10px/1.2 var(--font-mono);
}
.wf-property-chip-input {
    background: rgba(240,160,48,0.11);
    color: var(--gold);
    border-color: rgba(240,160,48,0.22);
}
.wf-property-chip-output {
    background: rgba(46,196,160,0.1);
    color: var(--teal);
    border-color: rgba(46,196,160,0.22);
}
.wf-property-chip-muted {
    background: rgba(255,255,255,0.04);
    color: var(--text-3);
}
.wf-property-chip-action {
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wf-property-chip-action:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.16);
    color: var(--text-1);
}
.wf-ghost-node {
    width: 292px;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.08), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.016));
    position: absolute;
    cursor: grab;
    user-select: none;
    box-shadow: 0 12px 28px rgba(4, 6, 16, 0.24);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.wf-ghost-node:hover {
    transform: translateY(-1px);
}
.wf-ghost-node.is-selected {
    border-color: rgba(108,92,231,0.34);
    box-shadow: 0 18px 36px rgba(4, 6, 16, 0.34);
}
.wf-ghost-node.is-table {
    background:
      radial-gradient(circle at top right, rgba(46,196,160,0.09), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.016));
}
.wf-ghost-node-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.wf-ghost-node-kicker {
    color: var(--text-3);
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
}
.wf-ghost-node-shape {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
    font: var(--text-label);
}
.wf-ghost-node-intent {
    color: var(--text-2);
    font: 500 13px/1.52 var(--font-body);
}
.wf-ghost-node-summary-meta {
    color: var(--text-3);
    font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.wf-ghost-node.is-selected .wf-ghost-node-summary-meta {
    display: block;
}
.wf-ghost-node-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wf-ghost-node:not(.is-selected) .wf-ghost-node-section {
    display: flex;
}
.wf-ghost-port-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-ghost-port {
    padding: 6px 10px;
    border-radius: 999px;
    font: 500 10px/1.2 var(--font-mono);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.wf-ghost-port:hover {
    transform: translateY(-1px);
}
.wf-node-intent-input {
    padding: 12px 14px;
}
@media (max-width: 900px) {
    .wf-design-layout {
        padding: 12px;
    }
    .wf-provider-grid,
    .wf-selection-sections {
        grid-template-columns: 1fr;
    }
    .wf-studio-board {
        min-height: 560px;
    }
    .wf-studio-board-canvas {
        min-height: 560px;
        padding: 16px;
    }
}

/* Workflow map refresh: real block relationships + contextual detail tray */
.wf-map-panel {
    display: flex;
    flex: 1;
    min-height: 0;
}

.wf-map-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    padding: 14px 18px 18px;
}

.wf-map-hero,
.wf-map-empty,
.wf-detail-tray {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(circle at top right, rgba(46,196,160,0.05), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,0.034), rgba(255,255,255,0.016));
}

.wf-map-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
}

.wf-map-kicker,
.wf-detail-kicker,
.wf-map-node-source,
.wf-map-node-kind,
.wf-detail-label,
.wf-detail-technical-key {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wf-map-kicker,
.wf-detail-kicker {
    color: var(--teal);
}

.wf-map-title,
.wf-detail-title {
    color: var(--text-1);
    font: 700 20px/1.12 var(--font-display);
    letter-spacing: -0.02em;
    margin: 0;
}

.wf-map-copy,
.wf-detail-copy {
    color: var(--text-2);
    font: 500 13px/1.55 var(--font-body);
    margin: 0;
}

.wf-map-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
}

.wf-map-empty-title {
    color: var(--text-1);
    font: 700 17px/1.18 var(--font-display);
    letter-spacing: -0.02em;
}

.wf-map-empty-copy {
    color: var(--text-2);
    font: 500 13px/1.55 var(--font-body);
    margin: 0;
    max-width: 56ch;
}

.wf-map-board-shell {
    flex: 1;
    min-height: 0;
    /* The board floors at 440px. When the panel is shorter than that — which it
       is at 1280x720 with the hero and the tray both open — the board overflows
       this box downwards instead of scrolling inside it, and its edge overlay
       lands on top of `.wf-detail-tray`. Clip here so the board is forced to use
       its own scrollbar. */
    overflow: hidden;
}

.wf-map-board {
    position: relative;
    min-height: 440px;
    overflow: auto;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(circle at top right, rgba(108,92,231,0.07), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.01));
}

.wf-map-board-canvas {
    position: relative;
    min-height: 440px;
}

.wf-map-edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* The container is decoration. Only the `.wf-map-edge` hit paths take a
       click, and they re-enable it themselves. With `auto` here the whole
       board-sized box is one hit target, so every click that is not exactly on a
       node card is swallowed — including the tray buttons, which report as
       visible, enabled and stable and still never fire. */
    pointer-events: none;
}

.wf-map-edge {
    fill: transparent;
    /* `all`, not `auto`. `auto` on an SVG shape means `visiblePainted`, which ties
       hit-testing to the paint values — a rule that later sets `fill: none` here
       would silently make every wire unclickable. `all` hit-tests the geometry. */
    pointer-events: all;
    cursor: pointer;
}

.wf-map-edge-visual {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.88;
    pointer-events: none;
    transition: stroke-width 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}

.wf-map-edge-visual.state-confirmed { stroke: rgba(46,196,160,0.82); }
.wf-map-edge-visual.state-proposed { stroke: rgba(240,160,48,0.8); stroke-dasharray: 10 8; }
.wf-map-edge-visual.state-blocked { stroke: rgba(232,112,106,0.84); stroke-dasharray: 6 6; }
.wf-map-edge-visual.state-unconnected { stroke: rgba(255,255,255,0.16); stroke-dasharray: 12 10; }
.wf-map-edge-visual.is-selected {
    stroke-width: 5;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.15));
}

.wf-map-node {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 248px;
    padding: 14px 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 40%),
      linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.014));
    box-shadow: 0 14px 30px rgba(4, 6, 16, 0.24);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.wf-map-node:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.14);
}

.wf-map-node.is-selected {
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 18px 36px rgba(4, 6, 16, 0.32);
}

.wf-map-node.is-preview {
    border-color: rgba(108,92,231,0.18);
}

.wf-map-node.is-approval {
    border-color: rgba(240,160,48,0.22);
}

.wf-map-node.is-working {
    border-color: rgba(255,255,255,0.11);
}

.wf-map-node.is-result {
    border-color: rgba(46,196,160,0.18);
}

.wf-map-node.is-outcome {
    border-color: rgba(46,196,160,0.22);
    background:
      radial-gradient(circle at top right, rgba(46,196,160,0.09), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.018));
}

.wf-map-node.is-failed {
    border-color: rgba(232,112,106,0.24);
}

.wf-map-node.is-note {
    border-color: rgba(93, 155, 255, 0.2);
}

.wf-map-node-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-map-node-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
    font: var(--text-label);
}

.wf-map-node.is-preview .wf-map-node-state {
    background: rgba(108,92,231,0.14);
    color: var(--purple);
}

.wf-map-node.is-approval .wf-map-node-state {
    background: rgba(240,160,48,0.14);
    color: var(--gold);
}

.wf-map-node.is-working .wf-map-node-state {
    background: rgba(255,255,255,0.08);
    color: var(--text-2);
}

.wf-map-node.is-result .wf-map-node-state,
.wf-map-node.is-outcome .wf-map-node-state {
    background: rgba(46,196,160,0.12);
    color: var(--teal);
}

.wf-map-node.is-failed .wf-map-node-state {
    background: rgba(232,112,106,0.14);
    color: var(--coral);
}

.wf-map-node.is-note .wf-map-node-state {
    background: rgba(93, 155, 255, 0.14);
    color: #88bbff;
}

.wf-map-node-kind {
    color: var(--text-3);
}

.wf-map-node-source {
    color: var(--text-3);
}

.wf-map-node-title {
    color: var(--text-1);
    font: 700 15px/1.22 var(--font-display);
    letter-spacing: -0.02em;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wf-map-node-intent {
    color: var(--text-2);
    font: 500 12px/1.42 var(--font-body);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wf-map-node-artifact {
    color: var(--accent-1);
    font: 600 12px/1.3 var(--font-mono);
}

.wf-map-node-summary {
    color: var(--text-2);
    font: 500 12px/1.52 var(--font-body);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.wf-detail-tray {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
    /* Positioned with a z-index above the board's edge overlay (z-index 1). The
       tray is a sibling of the board, so in document order it paints first and a
       positioned overlay above it wins the hit test. */
    position: relative;
    z-index: 2;
}

.wf-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.wf-detail-close {
    min-width: 88px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    cursor: pointer;
}

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

.wf-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.wf-detail-label,
.wf-detail-technical-key {
    color: var(--text-3);
}

.wf-detail-pill-list,
.wf-detail-link-list,
.wf-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wf-detail-pill,
.wf-detail-link-chip,
.wf-detail-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.04em;
}

.wf-detail-pill {
    display: inline-flex;
    align-items: center;
}

.wf-detail-pill-share {
    background: rgba(240,160,48,0.12);
    border-color: rgba(240,160,48,0.24);
    color: var(--gold);
}

.wf-detail-pill-return {
    background: rgba(46,196,160,0.12);
    border-color: rgba(46,196,160,0.24);
    color: var(--teal);
}

.wf-detail-note {
    color: var(--text-2);
    font: 500 13px/1.52 var(--font-body);
}

.wf-detail-link-chip,
.wf-detail-btn,
.wf-detail-close {
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.wf-detail-link-chip:hover,
.wf-detail-btn:hover,
.wf-detail-close:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
}

.wf-detail-btn-primary {
    background: rgba(108,92,231,0.14);
    border-color: rgba(108,92,231,0.3);
    color: #c8c0ff;
}

.wf-detail-btn-allow {
    background: rgba(46,196,160,0.12);
    border-color: rgba(46,196,160,0.24);
    color: var(--teal);
}

.wf-detail-btn-deny {
    background: rgba(232,112,106,0.11);
    border-color: rgba(232,112,106,0.24);
    color: var(--coral);
}

.wf-detail-technical {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 2px;
    padding-top: 12px;
}

.wf-detail-technical summary {
    cursor: pointer;
    color: var(--text-2);
    font: 600 12px/1.2 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    list-style: none;
}

.wf-detail-technical summary::-webkit-details-marker {
    display: none;
}

.wf-detail-technical-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.wf-detail-technical-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wf-detail-technical-value {
    color: var(--text-1);
    font: 500 11px/1.35 var(--font-mono);
    background: rgba(255,255,255,0.035);
    padding: 4px 8px;
    border-radius: 8px;
    word-break: break-all;
}

@media (max-width: 960px) {
    .wf-map-shell {
        padding: 12px;
    }

    .wf-detail-grid {
        grid-template-columns: 1fr;
    }

    .wf-map-board {
        min-height: 360px;
    }

    .wf-map-board-canvas {
        min-width: 720px;
    }
}

/* Schema type autocomplete dropdown item hover */
.schema-suggestion:hover {
    background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   CANVAS TAB BAR
   ═══════════════════════════════════════════════════════════ */

.canvas-tab-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    height: 48px;
    padding: 0 var(--sp-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

.canvas-tab-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 150ms ease;
    margin-right: var(--sp-sm);
}

.canvas-tab-brand:hover {
    background: var(--purple-muted);
}

.canvas-tab-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.canvas-tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    flex: 1;
}

.canvas-tab {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    min-width: 120px;
    max-width: 180px;
    height: 36px;
    padding: 0 var(--sp-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-md) var(--r-md) 0 0;
    cursor: pointer;
    transition: all 150ms ease;
    font: var(--text-ui);
    color: var(--text-secondary);
}

.canvas-tab:hover {
    background: var(--purple-muted);
    color: var(--text-primary);
}

.canvas-tab.active {
    border-bottom-color: var(--purple);
    font-weight: 700;
    color: var(--text-primary);
}

.canvas-tab-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 150ms ease;
}

.canvas-tab:hover .canvas-tab-close {
    opacity: 1;
}

.canvas-tab-close:hover {
    background: var(--purple-muted);
    color: var(--text-primary);
}

.new-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    transition: all 150ms ease;
}

.new-tab-btn:hover {
    background: var(--purple-muted);
    border-color: var(--purple);
    color: var(--purple);
}

.overflow-dropdown-container {
    position: relative;
    margin-left: auto;
}

.overflow-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    transition: all 150ms ease;
}

.overflow-dropdown-toggle:hover {
    background: var(--purple-muted);
    border-color: var(--purple);
    color: var(--purple);
}

.overflow-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--sp-xs);
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.overflow-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-md);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    font: var(--text-ui);
    color: var(--text-primary);
    text-align: left;
    transition: background 150ms ease;
}

.overflow-dropdown-item:last-child {
    border-bottom: none;
}

.overflow-dropdown-item:hover {
    background: var(--purple-muted);
}

.overflow-canvas-name {
    flex: 1;
    font-weight: 500;
}

/* ========================================================================
   TAB MERGE UI — drag-and-drop merge badge, context menu
   ======================================================================== */

/* Merged-canvas provenance badge — small purple pill */
.tab-merged-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    background: var(--purple);
    color: #fff;
    font: var(--text-label);
    font-size: 10px;
    border-radius: 20px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tab being dragged — ghost effect */
.canvas-tab.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Tab that is the current drop target */
.canvas-tab.drag-over {
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 2px var(--purple-glow);
    background: var(--purple-muted);
}

/* Context menu — absolutely positioned below the tab */
.canvas-tab {
    position: relative; /* needed for the context menu and overlay */
}

.canvas-tab-ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 1998;
    cursor: default;
}

.canvas-tab-context-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 1999;
    overflow: hidden;
}

.ctx-menu-item {
    display: block;
    width: 100%;
    padding: var(--sp-sm) var(--sp-md);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    font: var(--text-ui);
    color: var(--text-primary);
    text-align: left;
    transition: background 100ms ease;
}

.ctx-menu-item:last-child {
    border-bottom: none;
}

.ctx-menu-item:hover {
    background: var(--purple-muted);
    color: var(--purple);
}

/* Nested canvas picker inside the context menu */
.ctx-merge-picker {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
}

.ctx-merge-option {
    padding-left: var(--sp-xl);
    font-size: 12px;
    color: var(--text-secondary);
}

.ctx-merge-option:hover {
    color: var(--purple);
}

/* ========================================================================
   WORKFLOW PANEL
   ======================================================================== */

/* Backdrop overlay */
.workflow-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
    pointer-events: none;
    transition: background 250ms ease;
}

.workflow-panel-backdrop.open {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

/* Panel container */
.workflow-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 250ms ease;
}

.workflow-panel.open {
    transform: translateX(0);
}

/* Panel header */
.workflow-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-lg);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.workflow-panel-header h2 {
    font: var(--heading-md);
    color: var(--text-primary);
    margin: 0;
}

.workflow-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 20px;
    transition: all 150ms ease;
}

.workflow-panel-close:hover {
    background: var(--purple-muted);
    color: var(--purple);
}

/* Panel body */
.workflow-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-lg);
}

/* Workflow sections */
.workflow-section {
    margin-bottom: var(--sp-xl);
}

.workflow-section:last-child {
    margin-bottom: 0;
}

.workflow-section-title {
    font: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
}

.workflow-section-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
}

/* Agent info display */
.workflow-agent-info {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
}

.workflow-agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--purple-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.workflow-agent-details {
    flex: 1;
    min-width: 0;
}

.workflow-agent-name {
    font: var(--text-ui);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-xs);
}

.workflow-agent-did {
    font: var(--mono-small);
    color: var(--text-secondary);
    word-break: break-all;
}

/* Disclosure list */
.workflow-disclosure-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.workflow-disclosure-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.workflow-disclosure-item:last-child {
    border-bottom: none;
}

.workflow-disclosure-icon {
    color: var(--purple);
    font-size: 16px;
    flex-shrink: 0;
}

.workflow-disclosure-field {
    flex: 1;
    font: var(--text-ui);
    color: var(--text-primary);
}

/* Returns schema display */
.workflow-returns-schema {
    font: var(--mono-small);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: var(--sp-sm);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
}

/* Mandate info */
.workflow-mandate-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.workflow-mandate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: var(--text-ui);
}

.workflow-mandate-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.workflow-mandate-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Panel footer */
.workflow-panel-footer {
    padding: var(--sp-lg);
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    display: flex;
    gap: var(--sp-md);
}

.workflow-approve-btn {
    flex: 1;
    padding: var(--sp-md) var(--sp-lg);
    background: var(--purple);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.workflow-approve-btn:hover {
    background: var(--purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.workflow-approve-btn:active {
    transform: translateY(0);
}

.workflow-reject-btn {
    padding: var(--sp-md) var(--sp-lg);
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.workflow-reject-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* No plan state */
.workflow-no-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2xl);
    font: var(--text-ui);
    color: var(--text-secondary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   WORKFLOW CHAT THREAD
   ═══════════════════════════════════════════════════════════ */

.workflow-chat {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--sp-md);
    background: var(--bg-tertiary);
    border-radius: var(--r-md);
}

.workflow-chat-empty {
    padding: var(--sp-lg);
    font: var(--text-ui);
    color: var(--text-secondary);
    text-align: center;
}

.chat-message {
    padding: var(--sp-md);
    margin-bottom: var(--sp-md);
    background: var(--bg-secondary);
    border-radius: var(--r-md);
    border-left: 3px solid var(--border);
}

.chat-message:last-child {
    margin-bottom: 0;
}

.chat-message.user {
    border-left-color: var(--purple);
}

.chat-message.assistant {
    border-left-color: var(--teal);
}

.chat-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-xs);
}

.chat-message-role {
    font: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.chat-message-time {
    font: var(--text-small);
    color: var(--text-tertiary);
}

.chat-message-content {
    font: var(--text-ui);
    color: var(--text-primary);
    line-height: 1.5;
}

.agent-card {
    padding: var(--sp-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: all 150ms ease;
}

.agent-card:hover {
    background: var(--surface-card-hover);
    border-color: var(--surface-card-border-hover);
}

.agent-card.selected {
    background: var(--purple-muted);
    border-color: var(--purple);
}

.disclosure-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.disclosure-field-label {
    font: var(--text-ui);
    font-weight: 500;
    color: var(--text-primary);
}

.disclosure-field-input {
    padding: var(--sp-sm) var(--sp-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: var(--text-body);
    color: var(--text-primary);
    transition: all 150ms ease;
}

.disclosure-field-input:focus {
    outline: none;
    border-color: var(--purple);
    background: var(--bg-secondary);
}

/* ========================================================================
   APPROVAL TOAST
   ======================================================================== */

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.approval-toast {
    position: fixed;
    bottom: var(--sp-lg);
    right: var(--sp-lg);
    width: 360px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 2000;
    animation: slideInUp 250ms ease-out;
    overflow: hidden;
}

.approval-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.approval-toast-agent {
    font: var(--text-ui);
    font-weight: 600;
    color: var(--text-primary);
}

.approval-toast-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 20px;
    transition: all 150ms ease;
}

.approval-toast-dismiss:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.approval-toast-body {
    padding: var(--sp-lg);
}

.approval-toast-action {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font: var(--text-ui);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-sm);
}

.approval-toast-risk {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font: var(--text-label);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.approval-toast-risk.high {
    background: rgba(240, 160, 48, 0.15);
    color: var(--gold);
}

.approval-toast-risk.critical {
    background: rgba(232, 72, 72, 0.15);
    color: var(--coral);
}

.approval-toast-description {
    font: var(--text-ui);
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
    line-height: 1.5;
}

.approval-toast-disclosure {
    font: var(--text-small);
    color: var(--text-secondary);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--bg-tertiary);
    border-radius: var(--r-sm);
    border-left: 2px solid var(--purple-muted);
}

.approval-toast-footer {
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.approval-toast-button {
    width: 100%;
    padding: var(--sp-md) var(--sp-lg);
    border: none;
    border-radius: var(--r-md);
    font: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.approval-toast-button.approve {
    background: var(--purple);
    color: white;
}

.approval-toast-button.approve:hover {
    background: var(--purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.approval-toast-button.details {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.approval-toast-button.details:hover {
    background: var(--purple-muted);
    border-color: var(--purple);
    color: var(--purple);
}

/* ═══════════════════════════════════════════════════════════
   GHOST BLOCK
   ═══════════════════════════════════════════════════════════ */

.ghost-block {
    padding: var(--sp-lg);
    background: var(--bg-secondary);
    border: 2px dashed var(--purple);
    border-radius: var(--r-lg);
    opacity: 0.7;
}

.ghost-header {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-md);
    border-bottom: 1px solid var(--border-subtle);
}

.ghost-schema-icon {
    font-size: 24px;
}

.ghost-schema-type {
    flex: 1;
    font: var(--text-ui);
    font-weight: 700;
    color: var(--text-primary);
}

.ghost-agent-count {
    font: var(--text-small);
    color: var(--text-secondary);
}

.ghost-skeleton {
    font-family: var(--font-mono);
}

.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.skeleton-field {
    display: flex;
    gap: var(--sp-sm);
}

.skeleton-label {
    font-weight: 700;
    color: var(--text-secondary);
}

.skeleton-value {
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Block Ports (Node Graph Wiring)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.block-port {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs);
}

.block-port-input {
  justify-content: flex-start;
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.block-port-output {
  justify-content: flex-end;
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.port-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-3);
  border: 2px solid var(--bg-secondary);
  transition: all 0.2s ease;
}

.block-port.connected .port-circle {
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.block-port:hover .port-circle {
  background: var(--purple);
  transform: scale(1.2);
  cursor: pointer;
}

.port-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.block-port-input .port-label {
  margin-left: 4px;
}

.block-port-output .port-label {
  margin-right: 4px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Agent Selector (Multi-Agent Block)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.agent-selector {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-sm);
  max-width: 300px;
}

.agent-selector-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-xs);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--border-primary);
}

.agent-selector-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  max-height: 300px;
  overflow-y: auto;
}

.agent-selector-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.agent-selector-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--brand-purple);
}

.agent-selector-item.selected {
  background: rgba(108, 92, 231, 0.1);
  border-color: var(--brand-purple);
}

.agent-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-primary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--brand-purple);
  flex-shrink: 0;
}

.agent-selector-item.selected .agent-checkbox {
  background: var(--brand-purple);
  color: white;
  border-color: var(--brand-purple);
}

.agent-info {
  flex: 1;
  min-width: 0;
}

.agent-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-provider {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Block Container (Node Graph)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.block-container {
  position: absolute;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  min-width: 200px;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.block-container:hover {
  border-color: var(--brand-purple);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
}

.block-container-body {
  padding: var(--sp-sm);
}

.block-container-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-container-types {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xs);
  flex-wrap: wrap;
}

.type-badge {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
}

.type-badge.type-input {
  border-color: var(--wing-teal);
  color: var(--wing-teal);
}

.type-badge.type-output {
  border-color: var(--wing-gold);
  color: var(--wing-gold);
}

.type-arrow {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 4px;
}

.block-agent-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--sp-xs);
  padding-top: var(--sp-xs);
  border-top: 1px solid var(--border-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Canvas Graph Mode
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.canvas-stream.graph-mode {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(var(--border-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-primary) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: auto;
}

.canvas-stream.graph-mode .block-container {
  position: absolute;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Commerce — product grid
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-grid-block { padding: 12px 0 4px; }

.product-grid-header {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px; padding: 0 2px;
  font-size: 11px; color: var(--text-tertiary);
}
.product-grid-source { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.product-grid-query { color: var(--text-primary); font-style: italic; }
.product-grid-count { margin-left: auto; }

.product-grid-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.product-card {
  background: var(--bg-secondary, #161b22);
  border: 1px solid var(--border-primary, #21262d);
  border-radius: 8px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.product-card:hover { border-color: var(--accent-blue, #388bfd); }

.product-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.product-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.product-card-brand { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.product-card-color { font-size: 11px; color: var(--text-secondary); }
.product-card-desc { font-size: 11px; color: var(--text-tertiary); line-height: 1.4; margin-top: 4px; }

.product-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 1px solid var(--border-primary, #21262d);
}
.product-card-price { font-size: 14px; font-weight: 700; color: var(--text-primary); }

.product-card-buy {
  background: var(--accent-blue, #388bfd);
  color: #fff; border: none; border-radius: 5px;
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.product-card-buy:hover { background: #58a6ff; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Commerce — order confirmation
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.order-confirmation-block {
  padding: 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.order-confirmation-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #1a3a2a; border: 2px solid #2ea043;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #2ea043;
}
.order-confirmation-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.order-confirmation-message { font-size: 13px; color: var(--text-secondary); max-width: 360px; line-height: 1.5; }

.order-confirmation-details {
  width: 100%; max-width: 360px; margin-top: 8px;
  border: 1px solid var(--border-primary, #21262d);
  border-radius: 8px; overflow: hidden;
}
.order-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border-primary, #21262d);
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-label { color: var(--text-tertiary); }
.order-detail-value { color: var(--text-primary); font-weight: 500; }

/* ── Ghost phase: the outbound (disclosure) direction ────────────────────────
 *
 * The return skeleton uses block glyphs for unknown values. The disclosure side
 * shows *known* property names, so it is never skeletonized — it is chipped, and
 * the chip's marking carries the meaning:
 *
 *   .credential      released from the vault, not a profile field
 *   .beyond-minimum  more than the leanest candidate asks for
 *   .over-disclosure exceeds the principal's authorization (pap spec §9.3)
 */

.ghost-directions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.ghost-direction {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ghost-direction-label {
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.ghost-direction-out .ghost-direction-label {
    color: var(--gold);
}

.ghost-direction-in .ghost-direction-label {
    color: var(--teal);
}

.ghost-disclosure-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.03);
    color: var(--text-2);
    font: var(--text-small);
    cursor: help;
}

.ghost-disclosure-chip-marker {
    flex-shrink: 0;
    color: var(--text-3);
    font-size: 10px;
    line-height: 1;
}

.ghost-disclosure-chip-name {
    overflow-wrap: anywhere;
}

/* A stored secret leaving the vault is not the same disclosure as a profile
 * field, so it does not look the same. */
.ghost-disclosure-chip.credential {
    border-color: rgba(108,92,231,0.28);
    background: rgba(108,92,231,0.08);
    color: var(--text-1);
}

.ghost-disclosure-chip.credential .ghost-disclosure-chip-marker {
    color: var(--purple);
}

.ghost-disclosure-chip.beyond-minimum {
    border-style: dashed;
    border-color: rgba(240,160,48,0.34);
    color: var(--text-1);
}

/* §9.3 — the principal MUST NOT be asked to over-disclose. Loudest marking on
 * the panel, because this one is a spec violation and not a preference. */
.ghost-disclosure-chip.over-disclosure {
    border-style: solid;
    border-color: var(--red, #e5484d);
    background: rgba(229,72,77,0.12);
    color: var(--text-1);
    text-decoration: line-through;
    text-decoration-color: rgba(229,72,77,0.6);
}

.ghost-disclosure-chip.over-disclosure .ghost-disclosure-chip-marker {
    color: var(--red, #e5484d);
}

.ghost-overdisclosure-warning {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(229,72,77,0.32);
    background: rgba(229,72,77,0.1);
    color: var(--text-1);
    font: 500 13px/1.55 var(--font-body);
}

.ghost-overdisclosure-warning strong {
    color: var(--red, #e5484d);
}

/* The dry run previews candidates; it never selects one. Drop the radio column
 * the interactive .ghost-agent-choice reserves. */
.ghost-agent-choice.readonly {
    grid-template-columns: minmax(0, 1fr);
    cursor: default;
}

/* The candidate asking for the least, for the same action. */
.ghost-agent-choice.leanest {
    border-color: rgba(46,196,160,0.26);
    background: rgba(46,196,160,0.05);
}

.ghost-trace-badge.stage-configuring {
    color: var(--purple);
    background: rgba(108,92,231,0.1);
}

.ghost-trace-badge.stage-awaiting {
    color: var(--gold);
    background: rgba(240,160,48,0.12);
}

.workflow-section.workflow-ghost-section {
    display: block;
}

@media (max-width: 900px) {
    .ghost-directions {
        grid-template-columns: minmax(0, 1fr);
    }
}



/* ── Profile avatar ──────────────────────────────────────────────────────
   `profile_avatar.rs` has emitted these class names since it was written and
   nothing in this stylesheet defined them, so the avatar rendered as an
   unsized coloured div with its initials at the inherited font size. */
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-family: inherit;
    /* The palette in `profile_color()` is chosen for contrast against white,
       not against the page, so the label colour is fixed rather than themed. */
    line-height: 1;
    user-select: none;
}
.profile-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}
.profile-avatar-md {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.profile-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

/* ── Topbar identity chip ────────────────────────────────────────────────
   The only navigation to /login, and the always-visible answer to "which key
   is acting for me". */
.topbar-identity-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-1);
    color: var(--text-2);
    cursor: pointer;
    flex-shrink: 0;
    /* The topbar is a drag region in the Tauri shell; without this the chip
       moves the window instead of registering the click. */
    -webkit-app-region: no-drag;
    transition: border-color 0.12s, background 0.12s;
}
.topbar-identity-chip:hover {
    border-color: rgba(108, 92, 231, 0.4);
    background: rgba(108, 92, 231, 0.06);
}
.topbar-identity-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
}
.topbar-identity-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-identity-did {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-3);
}
.topbar-identity-label {
    font-size: 12px;
    color: var(--text-2);
    padding: 2px 4px;
}
/* "No identity active" and "Create an identity" are not decoration: until one
   is resolved, nothing papillon does can be signed. */
.topbar-identity-label--warn {
    color: var(--gold, #f0a030);
    font-weight: 500;
}

/* ── Dispatch target chip ─────────────────────────────────────────────────────
   Sits beside the identity chip and answers the other half of "what am I about
   to authorize": the identity chip says who signs, this says who receives.
   Papillon inferred the receiver until papillon#28; now the user states it, so
   it has to be on screen. */
.topbar-dispatch-chip {
    display: flex;
    align-items: baseline;
    gap: 6px;
    max-width: 260px;
    padding: 5px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-1);
    cursor: pointer;
    flex-shrink: 0;
    /* Same drag-region exemption as the identity chip. */
    -webkit-app-region: no-drag;
    transition: border-color 0.12s, background 0.12s;
}
.topbar-dispatch-chip:hover {
    border-color: rgba(108, 92, 231, 0.4);
    background: rgba(108, 92, 231, 0.06);
}
.topbar-dispatch-caption {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    flex-shrink: 0;
}
.topbar-dispatch-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* First run, not a fault: prompts cannot go anywhere until this is answered. */
.topbar-dispatch-name--warn {
    color: var(--gold, #f0a030);
}
/* Read out of the principal's own episodes rather than pinned (papillon#81). It is
   a real destination, so it is not dimmed to the caption's colour — but it is
   weaker than a stated choice, so the dotted underline says "inferred from your
   history, hover for the count" and distinguishes it at a glance from the solid
   commitment above. */
.topbar-dispatch-name--suggested {
    color: var(--text-2, var(--text-1));
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* ── Navigation menu ─────────────────────────────────────────────────────────
   The way to the five routes that rendered and were reachable only by typing the
   URL — which a Tauri window, having no address bar of its own, cannot do at all
   (papillon#69). Left of the address bar, where a browser puts its own menu. */
.topbar-nav {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-app-region: no-drag;
}
.topbar-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    /* Above the topbar's own z-index: 100, or the menu renders behind the page. */
    z-index: 200;
}
.topbar-nav-group + .topbar-nav-group {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}
.topbar-nav-heading {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
}
.topbar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    text-align: left;
    cursor: pointer;
    color: var(--text-1);
}
.topbar-nav-item:hover {
    background: rgba(108, 92, 231, 0.1);
}
.topbar-nav-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}
.topbar-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.topbar-nav-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
}
/* Which agent a walkthrough hands data to, and what a page holds. Not
   decoration: "Browse agents" and "Agent registry" are otherwise guesses. */
.topbar-nav-hint {
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Page frame ──────────────────────────────────────────────────────────── */
.identity-page-subtitle {
    font-size: 13px;
    color: var(--text-2);
    margin: -4px 0 20px;
    max-width: 62ch;
    line-height: 1.5;
}
.identity-inline-code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--purple);
}
.identity-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 12px;
}
.identity-empty {
    font-size: 13px;
    color: var(--text-3);
    padding: 24px 0;
    text-align: center;
}

/* ── Messages ────────────────────────────────────────────────────────────
   Failures are rendered, never swallowed: an identity operation that silently
   did nothing leaves the user believing a different key is signing. */
.identity-alert {
    font-size: 12px;
    line-height: 1.5;
    color: var(--coral, #e8706a);
    background: rgba(232, 112, 106, 0.08);
    border: 1px solid rgba(232, 112, 106, 0.28);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 14px;
}
.identity-alert--inline {
    margin: 10px 0 0;
}
.identity-notice {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-1);
    background: rgba(240, 160, 48, 0.08);
    border: 1px solid rgba(240, 160, 48, 0.28);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 14px;
}
.identity-notice--danger {
    color: var(--coral, #e8706a);
    background: rgba(232, 112, 106, 0.06);
    border-color: rgba(232, 112, 106, 0.24);
    margin: 10px 0 0;
}

/* ── First run ───────────────────────────────────────────────────────────
   A prompt, not an empty list. Having no identity yet is the expected state on
   a fresh install. */
.identity-firstrun {
    max-width: 560px;
    margin: 32px auto;
    padding: 28px;
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    text-align: center;
}
.identity-firstrun-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 10px;
}
.identity-firstrun-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 20px;
}
.identity-firstrun .identity-create {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}
.identity-firstrun .identity-card-title {
    display: none;
}

/* ── Active identity ─────────────────────────────────────────────────────── */
.identity-active {
    margin-bottom: 16px;
}
.identity-active-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.identity-active-who {
    min-width: 0;
}
.identity-active-label {
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--teal);
}
.identity-active-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-1);
    margin-top: 2px;
}

/* ── Identifier fields ───────────────────────────────────────────────────
   The DID is shown whole and wrapped, never truncated. `user-select: all` is
   the fallback path: the clipboard API is unavailable on an insecure origin,
   so selecting by hand has to keep working. */
.identity-field {
    margin-top: 12px;
}
.identity-field-label {
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 5px;
}
.identity-field-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.identity-field-value {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-1);
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px 10px;
    /* `anywhere` rather than `break-all` so a 48-character multibase body wraps
       at the container edge instead of overflowing it. */
    overflow-wrap: anywhere;
    user-select: all;
}
.identity-field-missing {
    font-size: 12px;
    line-height: 1.5;
    color: var(--coral, #e8706a);
    margin-top: 12px;
}
.identity-copy-btn {
    flex-shrink: 0;
    /* Width is pinned so the label swapping to "COPIED" does not shift the
       field beside it. */
    min-width: 76px;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ── Profile list ────────────────────────────────────────────────────────── */
.profile-card--active {
    border-color: rgba(46, 196, 160, 0.35);
    background: rgba(46, 196, 160, 0.05);
}

/* ── Create ──────────────────────────────────────────────────────────────── */
.identity-create-row {
    display: flex;
    gap: 8px;
}
.identity-create-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-1);
    font-size: 13px;
    font-family: inherit;
}
.identity-create-input:focus {
    outline: none;
    border-color: rgba(108, 92, 231, 0.5);
}
.identity-create-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.identity-create-hint {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-3);
    margin-top: 8px;
}

/* ── Recover from shards ──────────────────────────────────────────────────
   The third door. Left-aligned inside .identity-firstrun, which centres its
   own text: a column of labelled fields reads as a form only when the labels
   start where the fields do. */
.identity-recover {
    margin-top: 16px;
    text-align: left;
}
.identity-recover-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin: 16px 0 6px;
}
.identity-recover-shard {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-1);
    font-size: 11px;
    /* Monospace because the value is JSON holding base64url: a glyph the
       principal may have to transcribe must be distinguishable from its near
       neighbours. */
    font-family: "SF Mono", "Fira Code", monospace;
    resize: vertical;
}
.identity-recover-shard:focus {
    outline: none;
    border-color: rgba(108, 92, 231, 0.5);
}
.identity-recover-shard:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.identity-recover-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 640px) {
    .identity-create-row {
        flex-direction: column;
    }
    .identity-field-row {
        flex-direction: column;
    }
    .identity-copy-btn {
        align-self: flex-start;
    }
    /* Below this width the chip's two-line text crowds the address bar out;
       the avatar alone still answers "which identity", and the page is one tap
       away. */
    .topbar-identity-text {
        display: none;
    }
}

/* ========================================================================
   CANVAS NOTICE COLUMN — link suggestions and progress (papillon#41)
   ========================================================================

   The four events papillon#41 gave listeners to need somewhere to appear.
   Three of them are advisory — a link the orchestrator noticed, a model
   downloading, a pipeline stepping — and one, the HitL approval gate, blocks
   work. `.approval-toast` is `position: fixed` at bottom-right, so the advisory
   column takes the left and nothing covers the gate.

   `pointer-events: none` on the column with `auto` on each card is what keeps
   the empty column from swallowing clicks on the canvas underneath it: the
   column is full-height so that its cards stack upward, and without this the
   left quarter of the canvas would stop responding. */

.canvas-notice-column {
    position: fixed;
    left: var(--sp-lg);
    bottom: var(--sp-lg);
    z-index: 1900;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    width: min(320px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    pointer-events: none;
}

.link-suggestion-toast-stack,
.progress-toast-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

/* ---- link suggestion -------------------------------------------------- */

.link-suggestion-toast {
    pointer-events: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 2px solid var(--blue);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: var(--sp-sm) var(--sp-md);
    animation: slideInUp 250ms ease-out;
}

.link-suggestion-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.link-suggestion-icon {
    font-size: 13px;
}

.link-suggestion-title {
    flex: 1;
    font: var(--text-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.link-suggestion-dismiss,
.registry-auth-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--sp-2xs);
}

.link-suggestion-dismiss:hover,
.registry-auth-close:hover {
    color: var(--text-primary);
}

.link-suggestion-body {
    margin-top: var(--sp-xs);
}

.link-suggestion-reason {
    margin: 0;
    font: var(--text-ui);
    color: var(--text-primary);
}

.link-suggestion-blocks {
    margin-top: var(--sp-xs);
    font: var(--text-small);
    color: var(--text-secondary);
}

/* The truncated ids are the only place the principal can tell two suggestions
   apart, so they are monospaced rather than left in the body font where a
   `1` and an `l` look the same. */
.link-suggestion-block {
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    border-radius: var(--r-sm);
    padding: 0 var(--sp-2xs);
}

.link-suggestion-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
}

.link-suggestion-button {
    font: var(--text-ui);
    font-family: var(--font-body);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    padding: var(--sp-xs) var(--sp-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.link-suggestion-button.dismiss {
    background: none;
    color: var(--text-secondary);
}

.link-suggestion-button.dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.link-suggestion-button.create {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

.link-suggestion-button.create:hover {
    background: var(--purple-hover);
}

/* ---- progress --------------------------------------------------------- */

.progress-toast {
    pointer-events: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: var(--sp-sm) var(--sp-md);
}

.progress-toast-header {
    display: flex;
    align-items: center;
}

.progress-toast-title {
    font: var(--text-small);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-bar-container {
    margin-top: var(--sp-xs);
    height: 4px;
    background: var(--bg-secondary);
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* No transition on the width. These bars are driven by an event per chunk, so
   an animation longer than the gap between events makes the fill lag the number
   printed under it. */
.progress-bar-fill {
    height: 100%;
    background: var(--teal);
}

.progress-toast-details {
    margin-top: var(--sp-2xs);
    font: var(--text-small);
    color: var(--text-secondary);
}

/* ========================================================================
   REGISTRY AUTH MODAL (papillon#41)
   ========================================================================

   The registry advertises `schema:AuthorizeAction` and the vault holds no
   credential for its DID. Without this surface the event had no listener and
   the trust agent was unreachable, so a registry that wants enrolment simply
   returned nothing. */

.registry-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    backdrop-filter: blur(4px);
}

/* `max-height` and not just `width`: the overlay centres this box, so a modal
   taller than the viewport overflows *upwards* as well as down — the header and
   its close button land at a negative `y`, where no amount of scrolling reaches
   them. That is papillon#80's class of defect, and this modal grew a trust-agent
   list, a status line, a caveat and a first-run warning, which together clear a
   620px viewport. The body scrolls instead; the header and the footer buttons
   stay put. */
.registry-auth-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-lg);
    width: min(440px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.registry-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
}

.registry-auth-title {
    font: var(--text-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* `min-height: 0` is what makes the `overflow-y` effective: a flex item's default
   `min-height: auto` refuses to shrink below its content, so the box would grow
   past the modal's `max-height` and never scroll. */
.registry-auth-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    overflow-y: auto;
    min-height: 0;
}

.registry-auth-info {
    margin: 0;
    font: var(--text-ui);
    color: var(--text-primary);
}

/* A DID is long and has no spaces, so it needs an explicit break rule or it
   widens the modal past its own `width`. */
.registry-auth-did {
    margin: 0;
    font: var(--text-small);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.registry-auth-error {
    font: var(--text-small);
    color: var(--coral);
    border-left: 2px solid var(--coral);
    padding-left: var(--sp-sm);
}

/* The trust agents by name. The modal asks the principal to let these parties be
   shown an identity credential, so the list is body copy, not a tooltip. */
.registry-auth-agents {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.registry-auth-agents-label {
    font: var(--text-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.registry-auth-agent-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

/* Abbreviated in the markup, so no ellipsis rule here — but `anywhere` stays,
   because a DID that is not `did:key:` is rendered whole and would otherwise
   widen the modal past its own `width`. */
.registry-auth-agent {
    font: var(--text-small);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* What the button will do, or why there is no button. Not `--text-secondary`:
   this is the sentence the principal is consenting to, so it reads at the same
   weight as the rest of the body. */
.registry-auth-status {
    margin: 0;
    font: var(--text-small);
    color: var(--text-primary);
}

.registry-auth-status-bad {
    color: var(--coral);
}

/* The limit of what enrolling proves. Quieter than the status it follows, and
   present in every ready state — a caveat that only appears on failure is a
   caveat nobody reads. */
.registry-auth-caveat {
    margin: 0;
    font: var(--text-small);
    color: var(--text-secondary);
}

/* `vault_open` creates the vault when there is none, so the first-run passphrase
   has no confirmation step. The warning sits under the field it applies to. */
.registry-auth-hint {
    margin: 0;
    font: var(--text-small);
    color: var(--warning);
}

.registry-auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.registry-auth-field label {
    font: var(--text-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.registry-auth-field input {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font: var(--text-ui);
    font-family: var(--font-body);
    padding: var(--sp-sm);
    min-height: 44px;
}

.registry-auth-field input:focus {
    outline: none;
    border-color: var(--purple);
    background: var(--bg-primary);
}

.registry-auth-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.registry-auth-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
}

.registry-auth-button {
    font: var(--text-ui);
    font-family: var(--font-body);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    padding: var(--sp-sm) var(--sp-md);
    min-height: 44px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.registry-auth-button.cancel {
    background: none;
    color: var(--text-secondary);
}

.registry-auth-button.cancel:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.registry-auth-button.submit {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

.registry-auth-button.submit:hover {
    background: var(--purple-hover);
    box-shadow: 0 0 0 3px var(--purple-glow);
}

.registry-auth-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}