/* ============================================================================
 * /viz/design workspace chrome (plan rrp:pl:rthmdnqx1, item 5.4 — the
 * UX-AESTHETIC-REQUIREMENT-001 §3 dogfood surface).
 *
 * The dashboard has NO Tailwind pipeline: utility-class names on viz pages are
 * inert (verified 2026-08-16 — `bg-slate-50` computed to transparent). This
 * stylesheet is the REAL carrier of the design page's chrome. It is
 * config-driven: `DesignPageChrome` (ux-layout-service, resolving
 * `ux.layout.design_page.config`) maps the config enums to data-attributes on
 * the page root, and the closed rule sets below key off those values. The one
 * continuous knob (`accent_hue`) arrives as an inline HSL style on the primary
 * action. Palette choices cascade as CSS custom properties (the DTCG
 * alias-rebind lesson in plain CSS) — a palette swap rebinds tokens, it never
 * edits rules.
 * ========================================================================== */

/* ── Design tokens + the slate default palette ─────────────────────────── */
[data-rr-design-page] {
    /* Palette tokens (slate default). Muted text tokens are chosen at WCAG
     * 2.2 §1.4.3 AA or better against their surface token (≥ 4.5:1). */
    --rr-design-border: #cbd5e1;          /* slate-300 */
    --rr-design-border-strong: #94a3b8;   /* slate-400 */
    --rr-design-surface: #f8fafc;         /* slate-50  */
    --rr-design-surface-raised: #ffffff;  /* white     */
    --rr-design-muted: #475569;           /* slate-600 — 7.1:1 on slate-50 */
    --rr-design-heading: #1e293b;         /* slate-800 */
    --rr-design-field-border: #cbd5e1;
    --rr-design-accent-ring: #4f46e5;     /* indigo-600 */
    --rr-design-selected-bg: #eef2ff;     /* indigo-50 */
    --rr-design-selected-border: #818cf8; /* indigo-400 */
    --rr-design-selected-text: #3730a3;   /* indigo-800 */
    --rr-design-danger-border: #fda4af;   /* rose-300 */
    --rr-design-danger-bg: #fff1f2;       /* rose-50  */
    --rr-design-danger-text: #9f1239;     /* rose-800 */
    --rr-design-code-bg: #0f172a;         /* slate-900 */
    --rr-design-code-text: #f1f5f9;       /* slate-100 */
    --rr-design-applied-bg: #f1f5f9;      /* slate-100 */

    /* Rhythm tokens (the gap/padding/density config values rebind these). */
    --rr-design-gap: 1rem;
    --rr-design-padding: 1rem;
    --rr-design-rail-gap: 1rem;

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rr-design-gap);
    padding: var(--rr-design-padding);
    color: var(--rr-design-heading);
}

/* ── Rail presets (the lg arrangement: canvas / config column — the
 * central window shows ONLY the composed layout; the panels live in the
 * shared sidebar-nav compound (plan `viz-design-sidebar-consume-sidebar-nav`).
 * `--rr-design-config-col` flips between the collapsed icon rail and the
 * expanded panel width via :has() on the compound's state attribute) */
[data-rr-design-page] {
    --rr-design-config-col: 3.25rem; /* collapsed icon rail */
}

[data-rr-design-page]:has([data-rr-sidebar-nav][data-rr-sidebar-nav-state="expanded"]) {
    --rr-design-config-col: 22rem;
}

@media (min-width: 1024px) {
    [data-rr-design-page][data-rr-design-rails="standard"],
    [data-rr-design-page][data-rr-design-rails="wide_canvas"],
    [data-rr-design-page][data-rr-design-rails="balanced_rails"] {
        grid-template-columns: 1fr var(--rr-design-config-col);
    }
}

/* ── Gap / padding / density (the closed spacing value sets) ───────────── */
[data-rr-design-page][data-rr-design-gap="compact"]     { --rr-design-gap: 0.5rem; }
[data-rr-design-page][data-rr-design-gap="comfortable"] { --rr-design-gap: 1rem; }
[data-rr-design-page][data-rr-design-gap="spacious"]    { --rr-design-gap: 1.5rem; }

[data-rr-design-page][data-rr-design-padding="compact"]     { --rr-design-padding: 0.5rem; }
[data-rr-design-page][data-rr-design-padding="comfortable"] { --rr-design-padding: 1rem; }
[data-rr-design-page][data-rr-design-padding="spacious"]    { --rr-design-padding: 1.5rem; }

[data-rr-design-page][data-rr-design-density="compact"]     { --rr-design-rail-gap: 0.5rem; }
[data-rr-design-page][data-rr-design-density="comfortable"] { --rr-design-rail-gap: 1rem; }

/* ── Palette value sets (token rebinds — rules below never change) ─────── */
[data-rr-design-page][data-rr-design-palette="ocean"] {
    --rr-design-border: #bae6fd;          /* sky-200 */
    --rr-design-border-strong: #7dd3fc;   /* sky-300 */
    --rr-design-surface: #f0f9ff;         /* sky-50  */
    --rr-design-muted: #075985;           /* sky-800 — AA on sky-50 */
    --rr-design-heading: #0c4a6e;         /* sky-900 */
    --rr-design-field-border: #7dd3fc;
}

[data-rr-design-page][data-rr-design-palette="violet"] {
    --rr-design-border: #ddd6fe;          /* violet-200 */
    --rr-design-border-strong: #c4b5fd;   /* violet-300 */
    --rr-design-surface: #f5f3ff;         /* violet-50  */
    --rr-design-muted: #5b21b6;           /* violet-800 — AA on violet-50 */
    --rr-design-heading: #4c1d95;         /* violet-900 */
    --rr-design-field-border: #c4b5fd;
}

/* ── Rails ─────────────────────────────────────────────────────────────── */
.rr-design-center {
    min-width: 0;
}

/* The shared sidebar-nav compound wrapper (the ONE sidebar implementation
 * — crates/ux/compound/sidebar-nav). The RIGHT-EDGE divider is
 * compound-owned (`rr-sidebar-nav--right` + the
 * `--rr-sidebar-nav-divider-width` token — plan
 * viz-sidebar-nav-side-placement item 2.2): the wrapper keeps ONLY the
 * surface token overrides, not a duplicated border rule. */
.rr-design-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--rr-design-surface-raised);
}

.rr-design-sidebar .rr-sidebar-nav {
    /* Embedded-in-flow consumer: the placement classes (--fixed/--dvh) are
       neutralized — the grid column owns the rail's box (round-2: the
       placement subconfig made them compound-emitted, and an embedded rail
       must not pin to the viewport). */
    position: static;
    height: 100%;
    width: 100%;

    /* THIN TOKEN OVERRIDES only (COMPOSITION-CATALOG-001): the compound owns
       the chrome (crates/ux/compound/sidebar-nav/styles/sidebar-nav.css);
       the design page rebinds its light-palette tokens. */
    --rr-sidebar-nav-surface: var(--rr-design-surface-raised);
    --rr-sidebar-nav-ink: var(--rr-design-heading);
    --rr-sidebar-nav-muted: var(--rr-design-muted);
    --rr-sidebar-nav-border: var(--rr-design-border);
    --rr-sidebar-nav-item-hover: var(--rr-design-surface);
    --rr-sidebar-nav-item-active: var(--rr-design-border-strong);
    --rr-sidebar-nav-toggle-border: var(--rr-design-border);
    /* The right-edge divider the compound's `--right` class draws (the
       wrapper's border-left is GONE — compound-owned chrome). */
    --rr-sidebar-nav-divider-width: 1px;
    --rr-sidebar-nav-radius: 0;
    --rr-sidebar-nav-item-font-size: 0.85rem;
}

/* The design page's config rail keeps its top-right toggle placement (no
   brand header here) with the design palette's border. */
.rr-design-sidebar .rr-sidebar-nav:not(:has(.rr-sidebar-nav__header)) .rr-sidebar-nav__toggle {
    align-self: flex-end;
    margin: 0.25rem;
    padding: 0.25rem;
}

.rr-design-sidebar .rr-sidebar-nav__content {
    /* SCROLL PARITY with the /viz/overview right sidebars (plan
       viz-sidebar-nav-side-placement item 5.1): the whole-content-slot
       single scroll stack is GONE — the brand header (compound-owned) +
       the tab strip sit OUTSIDE the scroll region, and the ACTIVE tab's
       body (`.rr-config-rail__tabpanel`) is the single `overflow-y: auto`
       region with `overscroll-behavior: contain` (the compound's
       `--scroll-contain` policy) — the same mechanics the DevConfigPanel
       rail's per-tab bodies use. */
    flex: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* ── The standardized tabbed config rail (plan items 4.1/5.1) ─────────── */
.rr-config-rail__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rr-config-rail__tablist {
    /* Pinned OUTSIDE the scroll region (scroll parity): the strip never
       scrolls away while a tab body scrolls. */
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem 0;
    border-bottom: 1px solid var(--rr-design-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.rr-config-rail__tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 0.375rem 0.375rem 0 0;
    background: transparent;
    color: var(--rr-design-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
}

.rr-config-rail__tab:hover {
    background: var(--rr-design-surface);
}

.rr-config-rail__tab[aria-selected="true"] {
    background: var(--rr-design-surface);
    border-color: var(--rr-design-border);
    color: var(--rr-design-heading);
    font-weight: 600;
}

.rr-config-rail__tab:focus-visible {
    outline: 2px solid var(--rr-design-accent-ring);
    outline-offset: 1px;
}

.rr-config-rail__tabpanel {
    /* The SINGLE scroll region (scroll parity with the overview rails):
       long tab bodies scroll HERE, never the page, never the strip. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--rr-design-rail-gap);
}

.rr-design-sidebar .rr-sidebar-nav__rail-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
}

.rr-design-sidebar-content {
    display: flex;
    flex-direction: column;
    gap: var(--rr-design-rail-gap);
}

/* The collapsed-rail Undo icon button (the direct-manipulation loop's
 * first-class reversal — one click, no expand round-trip). */
.rr-design-config-collapsed-undo {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: var(--rr-design-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
}

.rr-design-config-collapsed-undo:not(:disabled):hover {
    background: var(--rr-design-surface);
    border-color: var(--rr-design-border);
}

.rr-design-config-collapsed-undo:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Shared panel chrome ───────────────────────────────────────────────── */
.rr-design-side-panel,
.rr-design-chat,
.rr-design-config,
.rr-design-inspector {
    display: flex;
    flex-direction: column;
    gap: calc(var(--rr-design-rail-gap) * 0.75);
}

.rr-design-side-panel h3,
.rr-design-chat h3,
.rr-design-config h3,
.rr-design-inspector h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rr-design-heading);
    margin: 0;
}

.rr-design-config h4,
.rr-design-inspector h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rr-design-muted);
    margin: 0;
}

/* Honest notes (pending panels, empty states) — the muted-on-surface token
 * pair carries the WCAG-checked contrast. */
.rr-design-pending,
.rr-design-config-empty,
.rr-design-config-slot-none,
.rr-design-inspector-empty {
    border: 1px dashed var(--rr-design-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface);
    color: var(--rr-design-muted);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

.rr-design-canvas-empty {
    display: flex;
    height: 100%;
    min-height: 10rem;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rr-design-border);
    border-radius: 0.75rem;
    background: var(--rr-design-surface);
    color: var(--rr-design-muted);
    font-size: 0.875rem;
}

/* ── Chat panel ────────────────────────────────────────────────────────── */
.rr-design-chat-input {
    width: 100%;
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--rr-design-heading);
    background: var(--rr-design-surface-raised);
    resize: vertical;
}

.rr-design-chat-input:focus-visible {
    outline: 2px solid var(--rr-design-accent-ring);
    outline-offset: 1px;
}

.rr-design-chat-submit {
    align-self: flex-end;
    border: none;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background: var(--rr-design-accent-ring); /* the inline accent style overrides */
    cursor: pointer;
}

.rr-design-chat-submit:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.rr-design-chat-submit:focus-visible {
    outline: 2px solid var(--rr-design-heading);
    outline-offset: 2px;
}

.rr-design-chat-error {
    border: 1px solid var(--rr-design-danger-border);
    border-radius: 0.5rem;
    background: var(--rr-design-danger-bg);
    color: var(--rr-design-danger-text);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

.rr-design-chat-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    border: 1px solid var(--rr-design-selected-border);
    border-radius: 9999px;
    background: var(--rr-design-selected-bg);
    color: var(--rr-design-selected-text);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    margin: 0;
}

.rr-design-chat-scope button {
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 9999px;
    padding: 0 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

/* ── Config rail ───────────────────────────────────────────────────────── */
/* The universal expandable sidebar (`DevConfigPanel` pattern), IN-FLOW on the
 * design page's grid: the shell's fixed-position overlay does not apply here —
 * the dedicated grid column (`--rr-design-config-col`) governs width, the
 * panel scrolls internally, and the visual skin is the design system's own
 * token set (palette swaps rebind tokens; the rail follows). */
[data-rr-design-page] .sidebar.rr-design-config {
    position: sticky;
    top: var(--rr-design-padding);
    align-self: start;
    height: calc(100vh - 2 * var(--rr-design-padding));
    width: 100%;
    min-width: 0;
    z-index: auto;
    background: var(--rr-design-surface-raised);
    color: var(--rr-design-heading);
    border: 1px solid var(--rr-design-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

[data-rr-design-page] .sidebar.rr-design-config .sidebar-header {
    border-bottom-color: var(--rr-design-border);
    min-height: 0;
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
}

[data-rr-design-page] .sidebar.rr-design-config .sidebar-logo {
    color: var(--rr-design-muted);
    font-size: 1rem;
    line-height: 1;
}

[data-rr-design-page] .sidebar.rr-design-config .sidebar-title {
    color: var(--rr-design-heading);
    font-size: 0.875rem;
    font-weight: 600;
}

[data-rr-design-page] .sidebar.rr-design-config .sidebar-toggle {
    color: var(--rr-design-muted);
    border: 1px solid var(--rr-design-field-border);
    background: var(--rr-design-surface);
}

[data-rr-design-page] .sidebar.rr-design-config .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

/* The collapsed icon rail: toggle + undo icon only — the content slot is
 * hidden until expanded (the compound's progressive disclosure). */
[data-rr-design-page] .rr-design-sidebar [data-rr-sidebar-nav-state="collapsed"] .rr-sidebar-nav__content {
    display: none;
}

[data-rr-design-page] .rr-design-sidebar [data-rr-sidebar-nav-state="expanded"] .rr-sidebar-nav__rail-actions {
    display: none; /* the expanded header's Undo button is the affordance */
}

[data-rr-design-page] .rr-design-config-collapsed-undo {
    margin: 0.5rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface);
    color: var(--rr-design-muted);
    font-size: 0.9375rem;
    cursor: pointer;
}

[data-rr-design-page] .rr-design-config-collapsed-undo:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Single-column (below lg): the rail is a normal block, collapse keeps the
 * header row honest instead of a sticky sliver. */
@media (max-width: 1023.98px) {
    [data-rr-design-page] .rr-design-sidebar {
        position: static;
        height: auto;
    }

    /* HANDHELD PARITY with the overview rail (plan item 5.2): the strip
       stays horizontally scrollable at narrow widths (no wrap pile-up),
       the tab body keeps its internal scroll, and the tab icons ride the
       compound's collapsed icon rail (the handheld degradation the
       compound's display defaults own — VIZ-EMBED-HOST-CHROME-001: no
       viewport-right overlay affordance under the shell chrome). */
    .rr-config-rail__tablist {
        gap: 0.125rem;
        padding: 0.25rem 0.375rem 0;
    }

    .rr-config-rail__tab {
        font-size: 0.72rem;
        padding: 0.3125rem 0.5rem;
    }

    .rr-config-rail__tabpanel {
        padding: 0.5rem;
    }
}

.rr-design-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rr-design-config-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rr-design-config-row > select,
.rr-design-config-row > input {
    flex: 1 1 auto;
    min-width: 0;
}

.rr-design-module-label {
    margin-left: 0.5rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--rr-design-muted);
}

.rr-design-config [data-rr-design-undo] {
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface-raised);
    color: var(--rr-design-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.rr-design-config [data-rr-design-undo]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.rr-design-config section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rr-design-config label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rr-design-muted);
}

.rr-design-config select,
.rr-design-config input[type="text"],
.rr-design-config input[type="number"] {
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface-raised);
    color: var(--rr-design-heading);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    max-width: 100%;
}

.rr-design-config input[type="number"] { width: 5rem; }
.rr-design-config select { min-width: 8rem; }

.rr-design-config select:focus-visible,
.rr-design-config input:focus-visible,
.rr-design-config button:focus-visible {
    outline: 2px solid var(--rr-design-accent-ring);
    outline-offset: 1px;
}

.rr-design-config button {
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface-raised);
    color: var(--rr-design-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.rr-design-config button:hover:not(:disabled) {
    border-color: var(--rr-design-border-strong);
    color: var(--rr-design-heading);
}

.rr-design-config button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.rr-design-config-status {
    border: 1px solid var(--rr-design-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface);
    color: var(--rr-design-muted);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

/* The slot list + editor (direct-manipulation binding, 5.3a). */
.rr-design-config-slots ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rr-design-config-slots [data-rr-design-slot-select] {
    width: 100%;
    text-align: left;
    border: 1px solid var(--rr-design-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface-raised);
    color: var(--rr-design-muted);
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
}

.rr-design-config-slots [data-rr-design-slot-select]:hover {
    border-color: var(--rr-design-border-strong);
}

.rr-design-config-slots [data-rr-design-slot-select][aria-pressed="true"] {
    border-color: var(--rr-design-selected-border);
    background: var(--rr-design-selected-bg);
    color: var(--rr-design-selected-text);
}

.rr-design-config-slot-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--rr-design-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.rr-design-wheel-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rr-design-wheel-label,
.rr-design-slot-element,
.rr-design-slot-current {
    font-size: 0.75rem;
    color: var(--rr-design-muted);
}

.rr-design-slot-element {
    font-weight: 500;
    color: var(--rr-design-heading);
}

.rr-design-slot-id {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: var(--rr-design-muted);
}

.rr-design-wheel-field input[type="color"] {
    width: 100%;
    height: 2rem;
    border: 1px solid var(--rr-design-field-border);
    border-radius: 0.5rem;
    background: var(--rr-design-surface-raised);
    cursor: pointer;
    padding: 0.125rem;
}

/* ── Inspector ─────────────────────────────────────────────────────────── */
.rr-design-inspector-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    font-size: 0.875rem;
    margin: 0;
}

.rr-design-inspector-meta dt {
    font-weight: 500;
    color: var(--rr-design-muted);
}

.rr-design-inspector-meta dd {
    color: var(--rr-design-heading);
    margin: 0;
    word-break: break-word;
}

.rr-design-inspector-typeql pre,
.rr-design-inspector-applied pre {
    margin: 0.25rem 0 0;
    overflow-x: auto;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
}

.rr-design-inspector-typeql pre {
    background: var(--rr-design-code-bg);
    color: var(--rr-design-code-text);
}

.rr-design-inspector-applied pre {
    background: var(--rr-design-applied-bg);
    color: var(--rr-design-heading);
}

/* ── Canvas slot honesty note ──────────────────────────────────────────── */
.rr-design-slot-unwired {
    border: 1px dashed #fcd34d;           /* amber-300 */
    border-radius: 0.5rem;
    background: #fffbeb;                  /* amber-50 */
    color: #92400e;                       /* amber-800 (AA) */
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* ── Chat panel progress + retry (2026-08-21 compose-502 mission) ────────── */

/* The busy spinner inside the submit button: an indeterminate ring that
 * carries the "working" signal alongside the disabled state + aria-busy. */
.rr-design-chat-spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    vertical-align: -0.125rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: rr-design-chat-spin 0.8s linear infinite;
}

@keyframes rr-design-chat-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rr-design-chat-spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.45);
    }
}

/* The slow-turn hint: honest elapsed time once a turn is non-trivially long,
 * so a proxy-timeout window reads as progress, never a frozen button. */
.rr-design-chat-progress {
    margin: 0;
    font-size: 0.75rem;
    color: var(--rr-design-muted);
}

/* The retry affordance for transient gateway failures (502-class): a quiet
 * secondary button next to the error alert — re-runs the last prompt. */
.rr-design-chat-retry {
    align-self: flex-end;
    border: 1px solid var(--rr-design-border);
    border-radius: 0.5rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--rr-design-heading);
    background: var(--rr-design-surface-raised);
    cursor: pointer;
}

.rr-design-chat-retry:hover {
    border-color: var(--rr-design-border-strong);
}

.rr-design-chat-retry:focus-visible {
    outline: 2px solid var(--rr-design-heading);
    outline-offset: 2px;
}