/* ── Design Tokens ── */

:root {
    /* Fonts */
    --font-title: 'Roboto', system-ui, sans-serif;
    --font-subtitle: 'Hind', system-ui, sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif;

    /* Primary brand */
    --color-brand: #074684;
    --color-brand-teal: #0ea5c6;
    --color-brand-accent: #a0edf7;

    /* Health state — semantic, never replace with brand */
    --color-healthy: #22c55e;
    --color-degraded: #f59e0b;
    --color-down: #ef4444;
    --color-unknown: #94a3b8;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-raised: #f8fafc;
    --color-border: #e2e8f0;

    /* Text */
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;

    /* The sticky top bar (NavMenu .top-bar). A sticky element below it offsets by this, or the bar covers its top (#1125). */
    --app-header-height: 56px;

    /* Spacing / Radius */
    --radius: 0.5rem;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Base ── */

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

body {
    background: var(--color-surface-raised);
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* ── Page layout ── */

.page-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Wizard shell breaks out of the page-content container */
.page-content:has(.wizard-shell) {
    max-width: none;
    padding: 0;
}

/* Playground shell — studio-style split layout, breaks out of the page-content container */
.page-content:has(.playground-shell) {
    max-width: none;
    padding: 0;
}

/* Rule Studio — its 3-column split needs the full app-shell width to breathe;
   keep the standard side padding so the page header still aligns with other pages. */
.page-content:has(.studio-split) {
    max-width: none;
}

/* Custom Transformations editor — Chain + Test harness side-by-side reads better
   at full width; the 1440px cap left huge empty gutters on wide displays. */
.page-content:has(.customtx-grid) {
    max-width: none;
}

/* Stationery Studio (#561) — rail + canvas + inspector need the full app-shell width;
   the 1440px cap squeezed the inspector until table properties were unreadable. */
.page-content:has(.fpd-layout) {
    max-width: none;
}

/* Flow designer (journal + data) — the node canvas + right-hand drawer read far better across the
   full app-shell width; the 1440px cap left the graph cramped and gutters empty on wide displays. */
.page-content:has(.fs-header) {
    max-width: none;
}

/* Data Studio — same reasoning: canvas + inspector should use the full app-shell width. */
.page-content:has(.ds-root) {
    max-width: none;
}

/* Brain profile wizard — Step 3's palette + canvas + test rail needs the same
   breathing room as the other studios; steps 1/2/4 cap their own width via .bw-narrow. */
.page-content:has(.bw-studio) {
    max-width: none;
}

/* Document operations console (#728) — a dense 10-column operator grid; the 1440px cap
   truncated filenames and paths on wide displays. Standard padding kept for alignment. */
.page-content:has(.ops-console) {
    max-width: none;
}

/* Pipelines home — a 9-column grid where the 1440px cap squashed Name/Sources into
   wrapped fragments; full width lets every column breathe. Standard padding kept
   for alignment. (.pl-toolbar is unique to Pipelines.razor and always rendered.) */
.page-content:has(.pl-toolbar) {
    max-width: none;
}

/* Solution Design studio (#1017) — studio pages use the full width. Standard padding kept. */
.page-content:has(.sd-studio) {
    max-width: none;
}

/* Dashboard (/work) and Live (/live) — dense fleet, metric and drill-down grids that
   read far better edge-to-edge; the 1440px cap squashed the tile rows while leaving
   wide empty gutters. Matches the Pipelines and Documents treatment above. Standard
   padding kept for alignment. (.dashboard-header is unique to those two pages and is
   always rendered.) */
.page-content:has(.dashboard-header) {
    max-width: none;
}

/* Pipeline configuration — a 240px summary rail plus a dense forms column; the
   1440px cap left the rail eating a fifth of the usable width and squeezed the
   section tables (watched folders, export handlers, stage list) into wrapping.
   Form rows keep their own 480px cap, so only the wide content spreads out.
   Standard padding kept for alignment. (.pc-shell is unique to PipelineConfig.razor.) */
.page-content:has(.pc-shell) {
    max-width: none;
}

/* Classification workbench (#937) — a document list or key editor beside a sticky page
   viewer; the 1440px cap left the viewer at half the width of a laptop screen while the
   gutters sat empty. Standard padding kept for alignment. (.wb-layout is unique to
   ClassificationWorkbench.razor and always rendered.) */
.page-content:has(.wb-layout) {
    max-width: none;
}

/* Form Intake Studio — the mapping editor and its review (#969): a workbook grid beside a question
   list or tree, squeezed by the 1440px cap until only three columns of the grid showed. Same
   treatment as the workbench. (.fi-studio-wide is on both pages' header and always rendered.) */
.page-content:has(.fi-studio-wide) {
    max-width: none;
}

.playground-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    min-height: 520px;
}

.playground-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.playground-topbar h1 {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.playground-topbar .playground-subtitle {
    font-family: var(--font-subtitle);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin: 0.15rem 0 0;
}

.playground-split {
    display: grid;
    grid-template-columns: var(--playground-left-width, 440px) 6px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.playground-pane-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface);
    overflow: hidden;
}

.playground-tabs {
    display: flex;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow-x: auto;
    flex-shrink: 0;
}

.playground-tab {
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transform: translateY(1px);
    transition: color 0.15s, background 0.15s;
}

.playground-tab:hover:not(.active) {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.playground-tab.active {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface-raised);
}

.playground-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    background: var(--color-surface-raised);
}

.playground-pane-body .card { margin-bottom: 1rem; }
.playground-pane-body .card:last-child { margin-bottom: 0; }

.playground-splitter {
    cursor: col-resize;
    background: var(--color-border);
    transition: background 0.15s;
    touch-action: none;
}

.playground-splitter:hover,
.playground-splitter.dragging {
    background: var(--color-brand-teal);
}

.playground-pane-right {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--color-surface-raised);
    min-width: 0;
}

.playground-pane-right .card { margin-bottom: 0; }

@media (max-width: 900px) {
    .playground-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .playground-splitter { display: none; }
    .playground-pane-left { border-bottom: 1px solid var(--color-border); }
}

.page-header {
    margin-bottom: 1.75rem;
}

.page-header h1 {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

.page-header .subtitle,
.page-subtitle {
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Cards ── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.card-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.card-header h2 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.card-body {
    padding: 1.5rem;
}

/* ── Collapsible card ── a .card whose body folds away under a clickable
   header. The chevron rotates on expand; a collapsed card drops its header
   border so it reads as a single closed bar. */
.collapsible-card.is-collapsed .card-header {
    border-bottom: none;
}

.card-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.card-collapse-toggle:hover h2 {
    color: var(--color-brand-teal);
}

.card-collapse-toggle:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.card-collapse-chevron {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: transform 0.15s ease;
}

.collapsible-card.is-expanded .card-collapse-chevron {
    transform: rotate(90deg);
}

.card-collapse-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.card-collapse-subtitle {
    font-size: 0.8rem;
    font-weight: 400;
}

/* ── Form grid ── shared two-column form layout used by editor cards
   (entity-routing, capture-type variants, pipeline diff). Each child
   is a stacked label/control pair. Wraps to one column on narrow widths. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 480px));
    gap: 1rem 1.25rem;
    align-items: start;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-grid label > input,
.form-grid label > select,
.form-grid label > textarea {
    font-weight: 400;
    color: var(--color-text-primary);
    width: 100%;
    box-sizing: border-box;
}

.form-grid label input[type="checkbox"] {
    width: auto;
    margin-right: 0.4rem;
}

/* ── Stages card (pipeline manifest editor — backlog #55) ──
   Header flexes the title against the preset picker so the dropdown sits on
   the right without disturbing the standard card-header padding. Picker
   wraps to the next line on narrow widths so nothing gets crushed. */
.stage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.stage-preset-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stage-preset-picker label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}

.stage-preset-picker select {
    min-width: 220px;
}

.stage-preset-manage-link {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.stage-preset-manage-link:hover {
    text-decoration: underline;
}

/* ── Stage relevance + tailoring (#646) ── */

/* Badge palette shared with the stage list: muted = informational, matches the
   scoped StagePresetEdit definition so the two builders read identically. */
.badge-muted {
    background: #f1f5f9;
    color: #475569;
}

/* One derived status per stage row (#648): "runs" / "nothing to do" / "off".
   Replaces the enabled-checkbox + INACTIVE badge duality that read as a
   contradiction — the chip answers "will this stage do anything on a run?". */
.stage-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.71875rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.stage-status::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
}

.stage-status-runs {
    color: #15803d;
    background: rgba(21, 128, 61, 0.08);
}

.stage-status-runs::before {
    background: #16a34a;
}

.stage-status-idle {
    color: var(--color-text-secondary);
    background: var(--color-surface-alt, #eef2f6);
    cursor: help;
}

.stage-status-idle::before {
    background: transparent;
    border: 1.5px solid var(--color-text-secondary);
    box-sizing: border-box;
}

.stage-status-off {
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px dashed var(--color-border);
}

.stage-status-off::before {
    display: none;
}

/* Inline "why" for a nothing-to-do stage; truncates rather than wrapping the row. */
.stage-status-reason {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: help;
}

.stage-suggestion-panel {
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid #074684;
    border-radius: 6px;
    background: rgba(7, 70, 132, 0.03);
}

.stage-suggestion-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem 1.5rem;
}

.stage-suggestion-col h4 {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.stage-suggestion-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stage-suggestion-col li {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.stage-suggestion-col li strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.stage-suggestion-col li span {
    color: var(--color-text-secondary);
}

.stage-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.stage-list-disclosure {
    margin-top: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.stage-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    border-radius: 6px;
    user-select: none;
    list-style: none;
}

.stage-list-summary::-webkit-details-marker {
    display: none;
}

.stage-list-summary::before {
    content: "▸";
    display: inline-block;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
    width: 0.85rem;
    flex: 0 0 auto;
}

.stage-list-disclosure[open] > .stage-list-summary::before {
    transform: rotate(90deg);
}

.stage-list-summary:hover {
    background: rgba(7, 70, 132, 0.04);
}

.stage-list-summary-label {
    flex: 1 1 auto;
}

.stage-list-summary-meta {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.stage-list-disclosure[open] > .stage-list-summary {
    border-bottom: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
}

.stage-list-disclosure > .stage-list,
.stage-list-disclosure > .stage-add-row {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.stage-list-disclosure > .stage-list {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.stage-list-disclosure > .stage-add-row {
    padding-bottom: 0.75rem;
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.stage-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stage-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
}

.stage-row:hover {
    background: rgba(7, 70, 132, 0.04);
    border-color: var(--color-border);
}

.stage-row-disabled {
    opacity: 0.55;
}

.stage-toggle {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    cursor: pointer;
}

.stage-row-index {
    flex: 0 0 1.75rem;
    text-align: right;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.stage-row-id {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.stage-row-name {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
}

/* Per-stage help dot — hover surfaces the catalog description via the native
   `title` tooltip so authors know what each stage does. Shared by the pipeline
   config and stage-preset editors. */
.stage-row-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-title);
    line-height: 1;
    border-radius: 50%;
    background: var(--color-surface-alt, #eef2f6);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    cursor: help;
    user-select: none;
}

.stage-row-info:hover {
    background: var(--color-brand-teal, #0a8fa8);
    color: white;
    border-color: var(--color-brand-teal, #0a8fa8);
}

/* Phase band heading inside the stage list — a non-interactive label that
   groups the manifest into its high-level phases (Capture, Classify, …). It
   carries no list marker (the list is list-style:none) and is skipped by the
   manual row numbering. Shared by the pipeline config and preset editors. */
.stage-phase-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem 0.15rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.stage-phase-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

.stage-list > .stage-phase-header:first-child {
    margin-top: 0;
}

.stage-drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--color-text-secondary);
    user-select: none;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: -0.15em;
    padding: 0 0.25rem;
    opacity: 0.55;
}

.stage-row:hover .stage-drag-handle {
    opacity: 1;
}

.stage-drag-handle:active {
    cursor: grabbing;
}

/* Stage row selection + configure affordance (#723): clicking a row (or its
   ⚙ chip) in the pipeline editor focuses the settings card that owns the
   stage's configuration. The preset editor renders neither. */
.stage-row-selected,
.stage-row-selected:hover {
    background: rgba(7, 70, 132, 0.07);
    border-color: rgba(7, 70, 132, 0.35);
}

.stage-row:focus-visible {
    outline: 2px solid var(--color-brand-teal, #0a8fa8);
    outline-offset: 1px;
}

.stage-row-configure {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.71875rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface, #fff);
    color: #074684;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s, background-color 0.1s;
}

.stage-row:hover .stage-row-configure,
.stage-row:focus-within .stage-row-configure,
.stage-row-selected .stage-row-configure {
    opacity: 1;
}

.stage-row-configure:hover {
    background: rgba(7, 70, 132, 0.06);
    border-color: rgba(7, 70, 132, 0.35);
}

.stage-row-configure-none {
    flex: 0 0 auto;
    font-size: 0.71875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: help;
    opacity: 0;
    transition: opacity 0.1s;
}

.stage-row:hover .stage-row-configure-none,
.stage-row:focus-within .stage-row-configure-none {
    opacity: 0.8;
}

.stage-row-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.1rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.1s, background-color 0.1s;
}

.stage-row:hover .stage-row-remove,
.stage-row:focus-within .stage-row-remove {
    opacity: 1;
}

.stage-row-remove:hover {
    background: #fee2e2;
    color: #991b1b;
}

.stage-add-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.stage-add-row label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}

.stage-add-row select {
    flex: 0 0 320px;
}

/* ── Buttons ── */

.btn {
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* A disabled button must LOOK disabled — .btn-primary had this, the rest didn't, so e.g. a
   gated Browse… button read as clickable and clicks silently did nothing (#738). */
.btn:disabled,
.btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-brand);
    color: white;
    border: none;
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-primary:hover {
    background: #05376a;
    color: white;
}

.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-brand);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-secondary:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

/* ── Status badges (pill style) ── */

.badge {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-healthy  { background: #dcfce7; color: #166534; }
.badge-degraded { background: #fef3c7; color: #92400e; }
.badge-down     { background: #fee2e2; color: #991b1b; }
.badge-unknown  { background: #f1f5f9; color: #475569; }

/* Generic pass/fail/severity badges (Brain checklist, verdicts, tag validity, …) */
.badge-success { background: #dcfce7; color: #166534; }
.badge-danger  { background: #fee2e2; color: #991b1b; }

/* Legacy status-badge classes */
.status-badge {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.status-badge-lg {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

.status-success { background: #dcfce7; color: #166534; }
.status-error   { background: #fee2e2; color: #991b1b; }
.status-warning { background: #fef3c7; color: #92400e; }
.status-info    { background: #dbeafe; color: #1e40af; }

/* ── Form inputs ── */

input, select, textarea {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-surface);
    color: var(--color-text-primary);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
    outline: none;
}

/* ── Alerts ── */

.alert-banner {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.alert-banner p:last-child {
    margin-bottom: 0;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ── Code block (used in /deploy/init for reference CDK snippets) ── */

.code-block {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    margin: 0.5rem 0;
}

/* ── Data table ── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-surface-raised);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table-compact {
    font-size: 0.875rem;
}

.data-table-compact th {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
}

.data-table-compact td {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.data-table-compact tbody tr:hover {
    background: var(--color-surface-raised);
}

.data-table-compact .row-selected,
.data-table-compact .row-selected:hover {
    background: rgba(7, 70, 132, 0.08);
}

.data-table-compact .btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

/* Scrollable container for the DocMX browse table — caps height so a long
   list doesn't push the rest of the wizard step off-screen. */
.docmx-list-scroll {
    max-height: 22rem;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.docmx-list-scroll .data-table-compact thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
}

/* Clickable column headers for in-table sorting. The indicator slot is always
   rendered (even when empty) so toggling sort doesn't reflow the header row. */
.data-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.data-table th.sortable-header:hover {
    color: var(--color-text-primary);
}

.data-table th.sortable-header .sort-indicator {
    display: inline-block;
    width: 0.75rem;
    margin-left: 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
}

.table-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    gap: 1rem;
    flex-wrap: wrap;
}

.table-pager select {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}

.table-link {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}

.table-link:hover {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

/* A table-link is often a <button> (Clone, Export, Edit). Strip the browser's button chrome so
   it reads exactly like the link beside it, and keep every action on one line. */
.table-link {
    white-space: nowrap;
}

button.table-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
}

button.table-link:disabled {
    color: var(--color-text-secondary);
    cursor: not-allowed;
    text-decoration: none;
}

/* Destructive table-link (Delete). Several pages restate this locally; this is the default. */
.table-link-danger {
    color: #b91c1c;
}

.table-link-danger:hover {
    color: #7f1d1d;
}

/* Grid tidy: action cells never wrap, so each row stays one line tall unless a cell holds real
   prose. The action column shrinks to its content and sits on the right. */
td.row-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

td.row-actions > :not(:first-child):not(.modal-backdrop) {
    margin-left: 0.75rem;
}

/* For cells whose value must not break, such as dates, ids and counts. */
.nowrap {
    white-space: nowrap;
}

/* Ids break at their hyphens; keep them whole. */
.data-table td.mono,
.data-table td > code:only-child {
    white-space: nowrap;
}

/* Pill: a small rounded label for a status or a count ("AI · Classification", "1 pipeline").
   Used on 34 pages but only ever styled locally, so most rendered as bare text. This is the
   shared default; a page's own .pill-* rules still win. */
.pill {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
}

.pill-success { background: #dcfce7; color: #166534; }
.pill-warning { background: #fef3c7; color: #92400e; }
.pill-primary { background: rgba(7, 70, 132, 0.1); color: var(--color-brand); }

/* Fraud packs (#1183): severity, state and Try it result pills, shared by the page and its tester. */
.fp-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
}
.fp-pill-error   { background: #fee2e2; color: #991b1b; }
.fp-pill-warning { background: #fef3c7; color: #92400e; }
.fp-pill-on      { background: #dcfce7; color: #166534; }
.fp-pill-off     { background: #f1f5f9; color: #64748b; }
.fp-pill-hit     { background: #fef3c7; color: #92400e; }
.fp-pill-clear   { background: #dcfce7; color: #166534; }
.fp-pill-muted   { background: #f1f5f9; color: #475569; }
.fp-pill-kind    { background: rgba(7, 70, 132, 0.08); color: var(--color-brand); }

/* Decision engine mode pills (#994): Off, Shadow, Suggest, Live. Muted on purpose so a table of
   modes scans calmly; only Live carries a positive tone. */
.pill--mode-off { background: #f1f5f9; color: #64748b; }
.pill--mode-shadow { background: #e2e8f0; color: #334155; }
.pill--mode-suggest { background: #fdf4e3; color: #8a5a12; }
.pill--mode-live { background: #e3f4ea; color: #1f6b3d; }

/* Decision engine: the per-scope summary and the settings page tables. */
.decision-scope-summary { display: flex; flex-direction: column; gap: 0.6rem; }
.decision-scope-table { width: 100%; }
.decision-title { display: block; font-weight: 600; }
.decision-question { display: block; font-size: 0.85rem; margin-top: 0.1rem; }
.decision-scope-link { margin: 0; font-size: 0.88rem; }
.decision-model-pin { display: block; font-size: 0.78rem; margin-top: 0.15rem; }
.decision-override-modes { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.decision-override-mode { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.decision-number-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.decision-number-row input[type="number"] { max-width: 8rem; }
.decision-inherit { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; font-size: 0.85rem; }
.decision-override-grid select, .decision-override-grid input[type="number"] { max-width: 11rem; }

/* Decision monitor (/work/decisions). The health page's sys-* card and chart classes live in its
   scoped SystemHealth.razor.css, so they do not reach this page; the same look is restated here
   under the page wrapper so it cannot leak anywhere else. */
.decisions-monitor .decisions-updated { font-size: 0.85rem; white-space: nowrap; }
.decisions-monitor .decisions-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; }
.decisions-monitor .decisions-filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 9rem; }
.decisions-monitor .decisions-filter-field label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); }
.decisions-monitor .decisions-empty-card { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.decisions-monitor .decisions-empty-card p { margin: 0 0 0.35rem; }
.decisions-monitor .sys-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.decisions-monitor .sys-metric-card { padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; border-left: 3px solid var(--color-border, #e2e8f0); }
.decisions-monitor .sys-metric-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.decisions-monitor .sys-metric-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.decisions-monitor .decisions-unit { font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); }
.decisions-monitor .decisions-card-lines { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.35rem; }
.decisions-monitor .sys-metric-sub { font-size: 0.78rem; line-height: 1.4; }
.decisions-monitor .decisions-breaker { align-self: flex-start; margin-top: 0.4rem; }
.decisions-monitor .sys-tone-warn { border-left-color: #d97706; }
.decisions-monitor .sys-tone-bad { border-left-color: #dc2626; }
.decisions-monitor .sys-chart-card { padding: 0.9rem 1.1rem 0.75rem; margin-bottom: 1.25rem; }
.decisions-monitor .sys-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.decisions-monitor .sys-chart-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; }
.decisions-monitor .sys-chart-legend { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--color-text-secondary); }
.decisions-monitor .sys-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.decisions-monitor .sys-legend-swatch { width: 0.65rem; height: 0.15rem; border-radius: 999px; background: currentColor; }
.decisions-monitor .sys-chart-plot { position: relative; }
.decisions-monitor .sys-chart { width: 100%; height: 110px; display: block; overflow: visible; }
.decisions-monitor .sys-grid-line { stroke: var(--color-border, #e2e8f0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.decisions-monitor .sys-series { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.decisions-monitor .sys-series-a { stroke: #6366f1; color: #6366f1; }
.decisions-monitor .sys-series-b { stroke: #94a3b8; color: #94a3b8; }
.decisions-monitor .sys-chart-ceiling { position: absolute; top: 0; left: 0; font-size: 0.68rem; line-height: 1; color: #94a3b8; background: #fff; padding-right: 0.25rem; pointer-events: none; }
.decisions-monitor .sys-chart-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: #94a3b8; margin-top: 0.15rem; }
.decisions-monitor .sys-chart-empty { font-size: 0.8rem; min-height: 110px; display: flex; align-items: center; margin: 0; }
.decisions-monitor .sys-chart-caption { font-size: 0.72rem; line-height: 1.4; margin: 0.4rem 0 0; }
.decisions-monitor .decisions-docmx-id,
.decisions-monitor .decisions-final,
.decisions-monitor .decisions-held { display: block; font-size: 0.78rem; margin-top: 0.1rem; }
.decisions-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Spinner ── */

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Empty state ── */

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Stage accordion ── */

.stage-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.stage-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.stage-success { border-left: 4px solid var(--color-healthy); }
.stage-error   { border-left: 4px solid var(--color-down); }

.stage-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
    color: var(--color-text-primary);
}

.stage-summary::-webkit-details-marker { display: none; }

.stage-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.stage-success .stage-icon { color: var(--color-healthy); }
.stage-error   .stage-icon { color: var(--color-down); }

.stage-name { flex: 1; }

.stage-duration {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.stage-detail {
    padding: 0 1.25rem 1rem 2.75rem;
    border-top: 1px solid var(--color-surface-raised);
}

/* ── Detail list ── */

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
}

.detail-list dt {
    color: var(--color-text-secondary);
    font-weight: 500;
    padding-top: 0.5rem;
}

.detail-list dd {
    color: var(--color-text-primary);
    margin: 0;
    padding-top: 0.5rem;
}

/* ── Utilities ── */

.mono { font-family: ui-monospace, monospace; font-size: 0.875rem; }
.muted { color: var(--color-text-secondary); }
.error-text { color: var(--color-down); }

/* ── Upload page ── */

.upload-card {
    max-width: 600px;
}

.file-input {
    display: block;
    margin-bottom: 1rem;
}

.file-selected {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

.processing-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Card header row ── */

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Small / icon buttons ── */

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.btn-danger {
    color: var(--color-down);
    border-color: transparent;
}

.btn-danger:hover {
    background: #fee2e2;
    border-color: #fecaca;
}

/* ── Pipeline config form ── */

.config-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 480px;
}

.form-row label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select {
    width: 100%;
}

.form-row-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
    gap: 0.75rem;
}

.form-row-inline input[type="checkbox"],
.form-row-inline input[type="radio"] {
    width: auto;
    flex: 0 0 auto;
}

.form-row-inline label {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* ── Content extraction step cards ── */

.extraction-step {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    background: var(--color-surface-alt, #fbfbfd);
    margin-top: 0.75rem;
}

.extraction-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.extraction-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent, #0f172a);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
}

.extraction-step-description {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.extraction-step-actions {
    display: inline-flex;
    gap: 0.25rem;
}

.extraction-step-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 4px;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text-primary);
}

.btn-ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Field blocks (pipeline config editor) ── */

.field-block {
    padding: 1.25rem 1.5rem;
}

.field-block-sep {
    border-top: 1px solid var(--color-border);
}

.field-header {
    margin-bottom: 1rem;
}

.field-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.field-name-input {
    flex: 0 0 220px;
    font-weight: 600;
}

.field-desc-input {
    flex: 1 1 240px;
}

.rules-area {
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border);
}

.rules-heading {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.rules-empty {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.rule-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.rule-pattern-input {
    flex: 1 1 280px;
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
}

.zone-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zone-inputs label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.add-rule-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* ── Upload page pipeline selector ── */

.upload-pipeline-row {
    max-width: 100%;
    margin-bottom: 1rem;
}

/* ── Stats row (document detail) ── */

.stat-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Dashboard primitives (KPI tiles, range picker) ──
   Used by the cockpit (/work) and every drill-down (date, pipeline,
   capture-type, entity). Kept global so a new dashboard page doesn't
   re-render unstyled tiles or an unstyled date pill-group. */

.range-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.25rem;
    box-shadow: var(--shadow-card);
}

.range-selector button {
    border: none;
    background: transparent;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: calc(var(--radius) * 0.65);
    transition: background 0.15s, color 0.15s;
}

.range-selector button:hover {
    color: var(--color-text-primary);
}

.range-selector button.is-active {
    background: var(--color-brand);
    color: #fff;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .dashboard-cards { grid-template-columns: 1fr; }
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-brand-teal);
    opacity: 0.85;
}

.stat-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.08);
}

.stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.stat-card .stat-label {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.stat-card .stat-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(14, 165, 198, 0.1);
    color: var(--color-brand);
}

.stat-card .stat-icon svg {
    width: 16px;
    height: 16px;
}

.stat-card .stat-value {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 0.1rem;
}

.stat-card .stat-sub {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-top: 0.15rem;
}

.stat-card--alert::before { background: var(--color-down); }
.stat-card--alert .stat-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-down);
}

.stat-card--ok::before { background: var(--color-healthy); }
.stat-card--ok .stat-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-healthy);
}

.dashboard-loading,
.dashboard-empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-card);
}

.dashboard-loading .spinner {
    margin: 0 auto 0.75rem;
}

.dashboard-table-card {
    margin-bottom: 1.5rem;
}

.chart-meta {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ── Text preview ── */

.text-preview-toggle {
    margin-top: 0.5rem;
}

.text-preview-toggle summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-brand);
    font-weight: 500;
    list-style: none;
    padding: 0.25rem 0;
}

.text-preview-toggle summary::-webkit-details-marker { display: none; }

.text-preview {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text-secondary);
    max-height: 320px;
    overflow-y: auto;
}

/* ── Metadata card ── */

.metadata-card {
    margin-top: 0.5rem;
}

/* ── Home page ── */

.home-shell {
    padding: 0;
}

.hero {
    padding: 3rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--color-surface) 0%, #eef4ff 100%);
    border: 1px solid var(--color-border);
    margin-bottom: 2rem;
}

.eyebrow {
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.hero h1 {
    font-family: var(--font-title);
    font-size: 2.75rem;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--color-text-primary);
}

.hero-text {
    font-size: 1.0625rem;
    max-width: 760px;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.primary-action {
    background: var(--color-brand);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.primary-action:hover {
    background: #05376a;
    color: white;
}

.secondary-action {
    background: var(--color-surface);
    color: var(--color-brand);
    border: 1px solid var(--color-border);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.secondary-action:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.summary-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.summary-card h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-family: var(--font-title);
    font-size: 1.125rem;
    color: var(--color-text-primary);
}

.summary-card p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ── Wizard Stage 1 — Split panel layout ── */

.wizard-stage1 {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fill the available viewport below the wizard header/steps.
       The 220px accounts for the top bar, page header, step indicator, and footer log bar. */
    height: calc(100vh - 220px);
    min-height: 500px;
}

.wizard-split {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1.5rem;
    flex: 1;
    min-height: 0; /* Allow children to shrink below their content size */
    overflow: hidden;
}

.wizard-panel-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.5rem; /* space for scrollbar */
}

.wizard-panel-right {
    overflow-y: auto;
    padding-left: 0.25rem;
}

/* ── Wizard — Upload drop zone ── */

.wizard-upload-section {
    /* container */
}

.wizard-dropzone {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.wizard-dropzone:hover,
.wizard-dropzone-active {
    border-color: var(--color-brand-teal);
    background: rgba(14, 165, 198, 0.04);
}

.wizard-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wizard-dropzone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    pointer-events: none;
}

.wizard-dropzone-icon {
    font-size: 1.75rem;
}

.wizard-dropzone-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.wizard-dropzone-hint {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Wizard — File list ── */

.wizard-file-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wizard-section-heading {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
}

.wizard-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.wizard-file-item:first-of-type {
    border-radius: var(--radius) var(--radius) 0 0;
}

.wizard-file-item:last-of-type {
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.wizard-file-item:only-of-type {
    border-radius: var(--radius);
    border-bottom: 1px solid var(--color-border);
}

.wizard-file-item:hover {
    background: var(--color-surface-raised);
}

.wizard-file-selected {
    border-color: var(--color-brand-teal) !important;
    background: rgba(14, 165, 198, 0.04);
    border-bottom: 1px solid var(--color-brand-teal) !important;
}

.wizard-file-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.wizard-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-file-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wizard-file-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wizard-file-remove {
    opacity: 0;
    transition: opacity 0.1s;
}

.wizard-file-item:hover .wizard-file-remove {
    opacity: 1;
}

/* ── Wizard — Processing log ── */

.wizard-log {
    background: #1e293b;
    border-radius: var(--radius);
    overflow: hidden;
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

.wizard-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #94a3b8;
}

.wizard-log-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wizard-log-toggle {
    font-size: 0.875rem;
}

.wizard-log-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 0 0.75rem 0.5rem;
}

.wizard-log-collapsed .wizard-log-body {
    display: none;
}

.wizard-log-empty {
    color: #64748b;
    padding: 0.5rem 0;
}

.wizard-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.2rem 0;
    line-height: 1.4;
}

.wizard-log-icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.wizard-log-time {
    flex-shrink: 0;
    color: #64748b;
}

.wizard-log-msg {
    color: #e2e8f0;
    word-break: break-word;
}

.wizard-log-info .wizard-log-icon { color: #94a3b8; }
.wizard-log-success .wizard-log-icon { color: #4ade80; }
.wizard-log-success .wizard-log-msg { color: #4ade80; }
.wizard-log-warning .wizard-log-icon { color: #fbbf24; }
.wizard-log-warning .wizard-log-msg { color: #fbbf24; }
.wizard-log-error .wizard-log-icon { color: #f87171; }
.wizard-log-error .wizard-log-msg { color: #f87171; }

/* ── Wizard — Document preview ── */

.wizard-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wizard-preview-empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Wizard — Page viewer ── */

.wizard-page-viewer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wizard-page-container {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: visible;
}

.wizard-page-svg {
    display: block;
    width: 100%;
    height: auto;
}

.wizard-page-placeholder {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-text-block {
    transition: fill 0.1s;
}

/* Visual cue for the Rule Studio's click-to-create-anchor mode: pointer cursor +
   accent ring on hover so the operator knows the block is pickable. */
.wizard-text-block-clickable {
    cursor: copy;
}

.wizard-text-block-clickable:hover {
    fill: rgba(43, 108, 255, 0.35);
    stroke: rgba(43, 108, 255, 0.85);
    stroke-width: 1.5;
}

/* Rule Studio draw-zone gesture: crosshair cursor signals "drag a rectangle". */
.rule-studio-drawing {
    cursor: crosshair;
}

/* ── Studio sample library panel ──────────────────────────────────────── */
/* Two side-by-side upload zones above the sample library table:
   left = "Add to samples" (persistent library), right = "Try a document" (session-only). */
.studio-samples-dropzones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.studio-samples-dropzone {
    padding: 1rem 1.25rem;
    gap: 0.35rem;
}

.studio-samples-dropzone .dropzone-title {
    font-size: 0.95rem;
}

@media (max-width: 720px) {
    .studio-samples-dropzones {
        grid-template-columns: 1fr;
    }
}

.studio-samples-panel {
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--color-surface-alt, #f7f8fa);
}

.studio-samples-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.studio-samples-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.studio-samples-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.studio-samples-scrub {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    background: var(--color-surface, #ffffff);
}

.studio-samples-scrub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    background: var(--color-surface-alt, #f7f8fa);
    color: var(--color-text, #1f2937);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.studio-samples-scrub-btn:hover:not(:disabled) {
    background: var(--color-accent-soft, #e8efff);
    border-color: var(--color-accent, #2b6cff);
    color: var(--color-accent, #2b6cff);
}

.studio-samples-scrub-btn:focus-visible {
    outline: 2px solid var(--color-accent, #2b6cff);
    outline-offset: 1px;
}

.studio-samples-scrub-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.studio-samples-scrub-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.studio-samples-scrub-pos {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    flex-shrink: 0;
}

.studio-samples-scrub-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.studio-samples-scrub-pip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.studio-samples-scrub-pip.pip-unknown {
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-surface-alt, #f7f8fa);
    border-color: var(--color-border, #d8dde4);
}

.studio-samples-scrub-pip.pip-healthy {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.studio-samples-scrub-pip.pip-degraded {
    color: #854d0e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.studio-samples-scrub-pip.pip-down {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

.studio-samples-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 30rem;
    overflow-y: auto;
    margin-top: 0.4rem;
}

.studio-sample-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: var(--color-surface, #ffffff);
    gap: 0.5rem;
}

.studio-sample-row:hover {
    background: var(--color-surface-hover, #eef2f7);
}

.studio-sample-active {
    border-color: var(--color-accent, #2b6cff);
    background: var(--color-accent-soft, #e8efff);
}

.studio-sample-main {
    flex: 1;
    min-width: 0;
}

.studio-sample-name {
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-sample-meta {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #6b7280);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.studio-sample-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ── Sample library: view-mode segmented control ──────────────────────── */
.studio-samples-viewmode {
    display: inline-flex;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-surface, #ffffff);
}

.studio-samples-viewmode-btn {
    padding: 0.18rem 0.55rem;
    font-size: 0.75rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
}

.studio-samples-viewmode-btn + .studio-samples-viewmode-btn {
    border-left: 1px solid var(--color-border, #d8dde4);
}

.studio-samples-viewmode-btn:hover {
    background: var(--color-surface-hover, #eef2f7);
    color: var(--color-text, #1f2937);
}

.studio-samples-viewmode-btn.active {
    background: var(--color-accent-soft, #e8efff);
    color: var(--color-accent, #2b6cff);
    font-weight: 600;
}

/* ── Sample library: role filter pills + per-row role chip + kebab menu ── */
.studio-samples-rolefilter {
    display: inline-flex;
    gap: 0.3rem;
    margin: 0.35rem 0 0.4rem;
}

.studio-samples-rolepill {
    border: 1px solid var(--color-border, #d6dae0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #4a5260);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.studio-samples-rolepill .muted {
    color: var(--color-text-tertiary, #8a93a3);
    font-size: 0.68rem;
}

.studio-samples-rolepill:hover {
    background: var(--color-surface-hover, #f5f7fb);
}

.studio-samples-rolepill.active {
    border-color: var(--color-accent, #2b6cff);
    background: var(--color-accent-soft, #e8efff);
    color: var(--color-accent, #2b6cff);
    font-weight: 600;
}

.studio-samples-rolepill.active .muted {
    color: var(--color-accent, #2b6cff);
}

.studio-sample-rolechip {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.studio-sample-rolechip-train {
    background: #eef1f5;
    color: #525c6c;
}

.studio-sample-rolechip-test {
    background: #efe7fb;
    color: #6840c6;
}

.studio-sample-rolechip-unset {
    background: transparent;
    color: var(--color-text-tertiary, #8a93a3);
    border: 1px dashed var(--color-border, #d6dae0);
    font-weight: 500;
}

.studio-sample-rolemenu-wrap {
    position: relative;
    display: inline-block;
}

.studio-sample-rolemenu-btn {
    padding: 0 0.5rem;
    line-height: 1.1;
}

.studio-sample-rolemenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 14rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d6dae0);
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;
}

.studio-sample-rolemenu-item {
    background: none;
    border: 0;
    text-align: left;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: var(--color-text-primary, #1f2330);
    cursor: pointer;
}

.studio-sample-rolemenu-item:hover:not(:disabled) {
    background: var(--color-surface-hover, #f5f7fb);
}

.studio-sample-rolemenu-item:disabled {
    color: var(--color-text-tertiary, #8a93a3);
    cursor: default;
}

/* ── Ad-hoc test staging panel ────────────────────────────────────────── */
.studio-adhoc-panel {
    border: 1px dashed var(--color-border, #d6dae0);
    background: var(--color-surface, #fff);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin-top: 0.75rem;
}

.studio-adhoc-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.studio-adhoc-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.studio-adhoc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--color-surface-soft, #fafbfc);
    border: 1px solid var(--color-border, #d6dae0);
    border-radius: 0.4rem;
}

.studio-adhoc-main {
    flex: 1 1 auto;
    min-width: 0;
}

.studio-adhoc-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-primary, #1f2330);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-adhoc-meta {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #6b7280);
}

.studio-adhoc-actions {
    display: inline-flex;
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* ── Sample library: matrix (samples × fields) view ───────────────────── */
.studio-samples-matrix-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0 0.3rem;
}

.studio-samples-matrix-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    user-select: none;
}

.studio-samples-matrix-filter input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.studio-samples-matrix-wrap {
    /* The wrap is the scroll container so the sticky thead and first column anchor
       to it (not the page). Tall enough to show ~8 rows comfortably without dominating. */
    max-height: 24rem;
    overflow: auto;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    background: var(--color-surface, #ffffff);
}

.studio-samples-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.studio-samples-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface-alt, #f7f8fa);
    border-bottom: 1px solid var(--color-border, #d8dde4);
    padding: 0.45rem 0.55rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.studio-samples-matrix .matrix-field-header {
    min-width: 10rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-samples-matrix .matrix-status-header {
    min-width: 6rem;
}

.studio-samples-matrix .matrix-actions-header {
    min-width: 2.5rem;
}

.studio-samples-matrix .matrix-sticky-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    min-width: 16rem;
    border-right: 1px solid var(--color-border, #d8dde4);
}

.studio-samples-matrix tbody td,
.studio-samples-matrix tbody th {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--color-border-soft, #eef0f3);
    vertical-align: middle;
}

.studio-samples-matrix tbody tr:last-child td,
.studio-samples-matrix tbody tr:last-child th {
    border-bottom: none;
}

.studio-samples-matrix .matrix-sample-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface, #ffffff);
    border-right: 1px solid var(--color-border, #d8dde4);
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    min-width: 16rem;
    max-width: 22rem;
}

.studio-samples-matrix tbody tr:hover .matrix-sample-cell,
.studio-samples-matrix tbody tr:hover .matrix-value-cell {
    background: var(--color-surface-hover, #eef2f7);
}

.studio-samples-matrix tbody tr.matrix-row-active .matrix-sample-cell,
.studio-samples-matrix tbody tr.matrix-row-active .matrix-value-cell {
    background: var(--color-accent-soft, #e8efff);
}

.studio-samples-matrix tbody tr.matrix-row-active .matrix-sample-cell {
    box-shadow: inset 3px 0 0 0 var(--color-accent, #2b6cff);
}

.matrix-sample-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.matrix-sample-meta {
    font-size: 0.7rem;
    color: var(--color-text-secondary, #6b7280);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.studio-samples-matrix .matrix-value-cell {
    background: var(--color-surface, #ffffff);
}

.studio-samples-matrix .matrix-value-cell input {
    /* Pin-state is encoded on the cell, not the input border, so a focused empty
       cell still reads as "I'm a target" while a filled cell reads as "set". */
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
}

.studio-samples-matrix .matrix-value-cell input:focus {
    outline: none;
    border-color: var(--color-accent, #2b6cff);
    background: var(--color-surface, #ffffff);
}

.studio-samples-matrix .matrix-value-cell.is-pinned {
    box-shadow: inset 0 -2px 0 0 var(--color-accent, #2b6cff);
}

.studio-samples-matrix .matrix-value-cell.is-pinned input {
    color: var(--color-text, #1f2937);
    font-weight: 500;
}

.studio-samples-matrix .matrix-value-cell.is-empty input::placeholder {
    color: var(--color-text-tertiary, #9ca3af);
}

.studio-samples-matrix .matrix-status-cell,
.studio-samples-matrix .matrix-actions-cell {
    background: var(--color-surface, #ffffff);
    white-space: nowrap;
}

.studio-samples-matrix tbody tr:hover .matrix-status-cell,
.studio-samples-matrix tbody tr:hover .matrix-actions-cell {
    background: var(--color-surface-hover, #eef2f7);
}

.studio-samples-matrix tbody tr.matrix-row-active .matrix-status-cell,
.studio-samples-matrix tbody tr.matrix-row-active .matrix-actions-cell {
    background: var(--color-accent-soft, #e8efff);
}

/* ── Suggest-prompt popover (inside AI tab of the field editor) ──────── */
.studio-suggest-card {
    border: 1px solid var(--color-accent, #2b6cff);
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
    margin-top: 0.5rem;
    background: var(--color-accent-soft, #e8efff);
}

.studio-suggest-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.studio-suggest-reasoning {
    font-size: 0.78rem;
    margin: 0 0 0.5rem 0;
}

.studio-suggest-row {
    margin-bottom: 0.5rem;
}

.studio-suggest-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
}

.studio-suggest-value {
    white-space: pre-wrap;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    margin: 0;
}

.studio-suggest-examples {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
}

.studio-suggest-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
}

/* ── Studio: AI scan overlay (Tron/Matrix hybrid) ───────────────────────
   Layered effect that plays over the document during AI sweep / rule
   generation / value review. Layers (back→front): grid, vignette tint,
   falling glyph rain, drawn-on data trails, drifting warp lens, crossing
   scan beams, corner reticle brackets, status pill. Pure CSS/SVG so it's
   cheap; pointer-events:none. Respects prefers-reduced-motion. */
.studio-doc-ai-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0.4rem;
    z-index: 5;
    animation: studio-ai-scan-fadein 220ms ease-out;
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

.studio-doc-ai-scan-tint {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(14, 165, 198, 0.08) 0%,
            rgba(14, 165, 198, 0.02) 55%,
            transparent 100%),
        linear-gradient(to bottom,
            rgba(7, 70, 132, 0.10) 0%,
            transparent 25%,
            transparent 75%,
            rgba(7, 70, 132, 0.10) 100%);
    animation: studio-ai-scan-pulse 2.6s ease-in-out infinite;
}

.studio-doc-ai-scan-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(160, 237, 247, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 237, 247, 0.10) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
        radial-gradient(ellipse at center, #000 40%, transparent 95%);
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
        radial-gradient(ellipse at center, #000 40%, transparent 95%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    animation: studio-ai-scan-pulse 2.6s ease-in-out infinite;
}

/* Matrix-style falling glyph columns. Each column is a vertical stack of
   monospace characters with a mask gradient so the bottom char (the leading
   edge) is brightest and the trail fades up. The whole column translates
   from above the page down past the bottom on its own non-harmonic period,
   so the columns never visibly sync. */
.studio-doc-ai-scan-rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.studio-doc-ai-scan-col {
    position: absolute;
    top: -100%;
    width: 1ch;
    font-size: 0.8rem;
    line-height: 1.15;
    color: rgba(160, 237, 247, 0.55);
    text-shadow:
        0 0 4px rgba(14, 165, 198, 0.85),
        0 0 8px rgba(14, 165, 198, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.85) 80%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.85) 80%, #000 100%);
    animation-name: studio-ai-scan-rain-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Brightest character at the leading edge (the last span in the column). */
.studio-doc-ai-scan-col > span:last-child {
    color: #ffffff;
    text-shadow:
        0 0 6px #a0edf7,
        0 0 14px rgba(14, 165, 198, 0.95);
}

.studio-doc-ai-scan-col > span:nth-last-child(2) {
    color: #a0edf7;
}

/* Drawn-on data trails — short angular polylines that thread across the page
   like light-cycle traces. stroke-dasharray + dashoffset gives the "drawing
   itself" effect; vector-effect keeps stroke width constant despite the
   stretched viewBox. */
.studio-doc-ai-scan-trails {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.studio-doc-ai-scan-trail {
    fill: none;
    stroke: rgba(160, 237, 247, 0.9);
    stroke-width: 1.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 3px rgba(14, 165, 198, 0.95))
            drop-shadow(0 0 8px rgba(14, 165, 198, 0.4));
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    opacity: 0;
}

.studio-doc-ai-scan-trail-a {
    animation: studio-ai-scan-trail-draw 4.6s ease-in-out 0.2s infinite;
}

.studio-doc-ai-scan-trail-b {
    animation: studio-ai-scan-trail-draw 5.4s ease-in-out 1.7s infinite;
}

.studio-doc-ai-scan-trail-c {
    animation: studio-ai-scan-trail-draw 5.0s ease-in-out 3.1s infinite;
}

/* Crossing scan beams — a horizontal beam sweeping top→bottom and a vertical
   beam sweeping left→right, on different periods so their crossover point
   walks around the page rather than running on rails. */
.studio-doc-ai-scan-beam {
    position: absolute;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 237, 247, 0.6) 15%,
        rgba(14, 165, 198, 1) 50%,
        rgba(160, 237, 247, 0.6) 85%,
        transparent 100%);
    box-shadow:
        0 0 10px rgba(14, 165, 198, 0.9),
        0 0 22px rgba(14, 165, 198, 0.5),
        0 0 50px rgba(14, 165, 198, 0.2);
    will-change: top, left, opacity;
}

.studio-doc-ai-scan-beam-h {
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    animation: studio-ai-scan-sweep-h 2.8s ease-in-out infinite;
}

.studio-doc-ai-scan-beam-h::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -36px;
    height: 36px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(14, 165, 198, 0.16) 100%);
    pointer-events: none;
}

.studio-doc-ai-scan-beam-v {
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(160, 237, 247, 0.6) 15%,
        rgba(14, 165, 198, 1) 50%,
        rgba(160, 237, 247, 0.6) 85%,
        transparent 100%);
    animation: studio-ai-scan-sweep-v 3.7s ease-in-out infinite;
}

.studio-doc-ai-scan-beam-v::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -36px;
    width: 36px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(14, 165, 198, 0.16) 100%);
    pointer-events: none;
}

/* Tron-style corner reticle brackets — four L-shapes that snap in on
   activation, then gently pulse to sell the "target locked" feel. */
.studio-doc-ai-scan-bracket {
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    animation:
        studio-ai-scan-bracket-in 520ms cubic-bezier(0.22, 1.2, 0.36, 1) 80ms forwards,
        studio-ai-scan-bracket-pulse 2.4s ease-in-out 700ms infinite;
}

.studio-doc-ai-scan-bracket::before,
.studio-doc-ai-scan-bracket::after {
    content: "";
    position: absolute;
    background: rgba(160, 237, 247, 0.95);
    box-shadow: 0 0 6px rgba(14, 165, 198, 0.9), 0 0 14px rgba(14, 165, 198, 0.5);
}

.studio-doc-ai-scan-bracket-tl {
    top: 12px;
    left: 12px;
}
.studio-doc-ai-scan-bracket-tl::before { top: 0; left: 0; width: 100%; height: 2px; }
.studio-doc-ai-scan-bracket-tl::after  { top: 0; left: 0; width: 2px; height: 100%; }

.studio-doc-ai-scan-bracket-tr {
    top: 12px;
    right: 12px;
    animation-delay: 160ms, 760ms;
}
.studio-doc-ai-scan-bracket-tr::before { top: 0; right: 0; width: 100%; height: 2px; }
.studio-doc-ai-scan-bracket-tr::after  { top: 0; right: 0; width: 2px; height: 100%; }

.studio-doc-ai-scan-bracket-bl {
    bottom: 12px;
    left: 12px;
    animation-delay: 220ms, 800ms;
}
.studio-doc-ai-scan-bracket-bl::before { bottom: 0; left: 0; width: 100%; height: 2px; }
.studio-doc-ai-scan-bracket-bl::after  { bottom: 0; left: 0; width: 2px; height: 100%; }

.studio-doc-ai-scan-bracket-br {
    bottom: 12px;
    right: 12px;
    animation-delay: 280ms, 840ms;
}
.studio-doc-ai-scan-bracket-br::before { bottom: 0; right: 0; width: 100%; height: 2px; }
.studio-doc-ai-scan-bracket-br::after  { bottom: 0; right: 0; width: 2px; height: 100%; }

/* Status pill — same brand chip as before, now with a brief scramble flicker
   over the label every ~3.6 s. Two stacked spans (real + scrambled glyphs)
   swap opacity in lock-step so the label appears to glitch and resolve. */
.studio-doc-ai-scan-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem 0.32rem 0.55rem;
    background: rgba(7, 70, 132, 0.94);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid rgba(160, 237, 247, 0.45);
    box-shadow:
        0 4px 14px rgba(7, 70, 132, 0.30),
        0 0 0 4px rgba(14, 165, 198, 0.10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.studio-doc-ai-scan-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #a0edf7;
    box-shadow: 0 0 10px #a0edf7, 0 0 4px #ffffff;
    animation: studio-ai-scan-dot 1.2s ease-in-out infinite;
}

.studio-doc-ai-scan-label {
    position: relative;
    display: inline-block;
    min-width: 6.6em;
    text-align: left;
}

.studio-doc-ai-scan-label-real,
.studio-doc-ai-scan-label-scram {
    display: inline-block;
}

.studio-doc-ai-scan-label-real {
    animation: studio-ai-scan-label-real 3.6s steps(1) infinite;
}

.studio-doc-ai-scan-label-scram {
    position: absolute;
    top: 0;
    left: 0;
    color: #a0edf7;
    opacity: 0;
    animation: studio-ai-scan-label-scram 3.6s steps(1) infinite;
}

/* Circular lens drifting across the page. backdrop-filter applies the SVG
   displacement filter to the pixels behind it, so the page literally warps
   under the lens as it moves. The blur + saturate underneath sells the
   "magnifying / examining" feel. Two independent X/Y keyframes with
   non-harmonic periods produce a Lissajous-style path that doesn't loop
   visibly for ~30+ seconds. */
.studio-doc-ai-scan-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.studio-doc-ai-scan-lens {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    backdrop-filter: url(#studioAiLensWarp) blur(1.5px) saturate(1.15);
    -webkit-backdrop-filter: url(#studioAiLensWarp) blur(1.5px) saturate(1.15);
    box-shadow:
        inset 0 0 28px rgba(160, 237, 247, 0.45),
        inset 0 0 0 1px rgba(160, 237, 247, 0.7),
        0 0 18px rgba(14, 165, 198, 0.55),
        0 0 48px rgba(14, 165, 198, 0.25);
    animation:
        studio-ai-scan-lens-x 7.3s ease-in-out infinite,
        studio-ai-scan-lens-y 5.1s ease-in-out infinite;
    will-change: top, left;
}

.studio-doc-ai-scan-lens-ring {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(160, 237, 247, 0.55);
    animation: studio-ai-scan-lens-spin 8s linear infinite;
}

.studio-doc-ai-scan-lens-cross {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.studio-doc-ai-scan-lens-cross::before,
.studio-doc-ai-scan-lens-cross::after {
    content: "";
    position: absolute;
    background: rgba(160, 237, 247, 0.55);
    box-shadow: 0 0 4px rgba(160, 237, 247, 0.8);
    pointer-events: none;
}

.studio-doc-ai-scan-lens-cross::before {
    /* horizontal hairline */
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.studio-doc-ai-scan-lens-cross::after {
    /* vertical hairline */
    top: 22%;
    bottom: 22%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

@keyframes studio-ai-scan-lens-x {
    0%, 100% { left: 6%; }
    50%      { left: calc(94% - 160px); }
}

@keyframes studio-ai-scan-lens-y {
    0%, 100% { top: 8%; }
    50%      { top: calc(92% - 160px); }
}

@keyframes studio-ai-scan-lens-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes studio-ai-scan-sweep-h {
    0%   { top: -10px; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 100%;  opacity: 0; }
}

@keyframes studio-ai-scan-sweep-v {
    0%   { left: -10px; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { left: 100%;  opacity: 0; }
}

@keyframes studio-ai-scan-rain-fall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(220%); }
}

@keyframes studio-ai-scan-trail-draw {
    0%   { stroke-dashoffset: 260; opacity: 0; }
    10%  { opacity: 1; }
    50%  { stroke-dashoffset: 0;   opacity: 1; }
    78%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: -260; opacity: 0; }
}

@keyframes studio-ai-scan-bracket-in {
    0%   { opacity: 0; transform: scale(0.55); }
    65%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes studio-ai-scan-bracket-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@keyframes studio-ai-scan-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes studio-ai-scan-dot {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

@keyframes studio-ai-scan-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Glitch the label twice per cycle: a short scramble flash, then resolve. */
@keyframes studio-ai-scan-label-real {
    0%, 78%, 87%, 100% { opacity: 1; }
    80%, 85%           { opacity: 0; }
}

@keyframes studio-ai-scan-label-scram {
    0%, 78%, 87%, 100% { opacity: 0; }
    80%, 85%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-doc-ai-scan,
    .studio-doc-ai-scan-tint,
    .studio-doc-ai-scan-grid,
    .studio-doc-ai-scan-beam,
    .studio-doc-ai-scan-beam-h,
    .studio-doc-ai-scan-beam-v,
    .studio-doc-ai-scan-dot,
    .studio-doc-ai-scan-lens,
    .studio-doc-ai-scan-lens-ring,
    .studio-doc-ai-scan-col,
    .studio-doc-ai-scan-trail,
    .studio-doc-ai-scan-bracket,
    .studio-doc-ai-scan-label-real,
    .studio-doc-ai-scan-label-scram {
        animation: none !important;
    }
    .studio-doc-ai-scan-rain,
    .studio-doc-ai-scan-trails {
        display: none;
    }
    .studio-doc-ai-scan-bracket {
        opacity: 1;
    }
    .studio-doc-ai-scan-label-scram {
        display: none;
    }
    .studio-doc-ai-scan-beam-h {
        top: 50%;
        opacity: 0.6;
    }
    .studio-doc-ai-scan-beam-v {
        left: 50%;
        opacity: 0.6;
    }
    .studio-doc-ai-scan-lens {
        /* Park the lens mid-page, drop the warp filter (which would still
           animate via SVG <animate>), and reduce backdrop blur. */
        top: calc(50% - 80px);
        left: calc(50% - 80px);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 0.7;
    }
}

/* ── Studio AI menu (header dropdown) ──────────────────────────────────── */
/* Inline AI panel — lives inside the Control tab's AI section. */
.studio-ai-panel {
    padding: 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.studio-ai-panel-busy {
    font-size: 0.75rem;
    color: var(--color-accent, #2b6cff);
    padding: 0.25rem 0.4rem;
    background: var(--color-accent-soft, #e8efff);
    border-radius: 4px;
}

.studio-ai-menu-hint {
    font-size: 0.72rem;
}

.studio-ai-ocr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.studio-ai-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

/* The Model select sizes to its content rather than stretching to full
   panel width, which previously made it look loose and centered. */
.studio-ai-menu-select {
    align-self: flex-start;
    min-width: 14rem;
}

.studio-ai-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-alt, #f7f8fa);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.82rem;
}

.studio-ai-menu-item:not(:disabled):hover {
    background: var(--color-accent-soft, #e8efff);
    border-color: var(--color-accent, #2b6cff);
}

.studio-ai-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.studio-ai-menu-item .muted {
    font-size: 0.72rem;
    font-weight: normal;
}

.studio-ai-menu-item-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8dde4);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-secondary, #6b7280);
}

.studio-ai-menu-item:not(:disabled):hover .studio-ai-menu-item-step {
    border-color: var(--color-accent, #2b6cff);
    color: var(--color-accent, #2b6cff);
}

.studio-ai-menu-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.studio-ai-menu-run-intro {
    margin-bottom: 0.2rem;
}

.studio-ai-menu-divider {
    border-top: 1px solid var(--color-border, #d8dde4);
    margin: 0.4rem -0.75rem;
}

.studio-ai-menu-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
}

/* Approach radios stack vertically so each option can host its own sub-controls
   (OCR cascade lives under "Text" when selected) without competing for one row. */
.studio-ai-menu-radio-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.studio-ai-menu-radio-option {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.studio-ai-menu-radio-head {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

/* Indented sub-config that hangs under a chosen radio (e.g. OCR cascade under Text).
   The leading rule visually ties it to the radio above without making it look like
   a peer section. */
.studio-ai-menu-radio-sub {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-left: 1.4rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--color-border, #d8dde4);
}

.studio-ai-menu-sub-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Left-pane tab strip
   (Fields / Tables / Lookups / Run / Tests / Issues / Activity) ──────── */
.studio-pane-tabstrip {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border, #d8dde4);
    background: var(--color-surface-alt, #f7f8fa);
}

.studio-pane-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-border, #d8dde4);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
    white-space: nowrap;
}

.studio-pane-tab:hover {
    background: var(--color-surface-alt-hover, #eef0f4);
    color: var(--color-text, #111827);
}

.studio-pane-tab-active {
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #111827);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--color-accent, #2b6cff);
}

.studio-pane-tab-count {
    font-size: 0.72rem;
}

.studio-pane-tab-body {
    /* Activity / Tests / Issues bodies share the same scroll behaviour
       as the schema list — fill remaining pane height, scroll internally. */
    overflow-y: auto;
    flex: 1 1 auto;
    /* Breathing room so content doesn't bump the pane edges. Sections inside
       (.studio-control-section) handle their own internal spacing on top. */
    padding: 0.75rem 1rem;
}

/* ── Page-header action toolbar. Lives in the Rule Studio's page header next
   to the title — NOT as a banded section above the tab strip. The left pane
   reads as a single tabbed control. ─────────────────────────────────────── */
.studio-control-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    /* Drop down so the cluster sits at the title baseline rather than the
       breadcrumb's top. The header is a page-header-row flex with
       align-items: flex-start, which would otherwise pin the buttons high. */
    margin-top: 1.05rem;
    /* No background / border — the header carries the visual weight. */
}

.studio-control-action-save {
    /* Save is the dominant action; keep it first so it lands on the left of
       the right-aligned button cluster. No auto-margin — that pushed everything
       else against the right edge when this lived in its own banded toolbar,
       which we no longer have. */
}

/* ── Approach pill: compact "how the studio runs" summary in the header.
   Renders as a borderless pill (not a button) so it reads as a label/badge
   that happens to be interactive; click opens an anchored popover below it
   with the full editor. Sits before Save so it scans as context, not an
   action. ──────────────────────────────────────────────────────────────── */
.studio-approach-pill-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.studio-approach-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: var(--color-surface-subtle, #f8fafc);
    color: var(--color-text, #111827);
    font-size: 0.78rem;
    line-height: 1.15;
    cursor: pointer;
}

.studio-approach-pill:hover {
    background: var(--color-surface, #fff);
    border-color: var(--color-border-strong, #94a3b8);
}

.studio-approach-pill[aria-expanded="true"] {
    background: var(--color-surface, #fff);
    border-color: var(--color-primary, #0f766e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0f766e) 15%, transparent);
}

.studio-approach-pill-label {
    font-weight: 500;
}

.studio-approach-pill-value {
    font-weight: 600;
}

.studio-approach-pill-caret {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
}

.studio-approach-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    width: min(420px, 90vw);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    padding: 0.4rem 0.4rem 0.6rem;
}

.studio-control-autorun {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
}

.studio-control-section {
    border-bottom: 1px solid var(--color-border, #d8dde4);
}

.studio-control-section:last-child {
    border-bottom: none;
}

.studio-control-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: var(--color-surface, #ffffff);
    border: none;
    cursor: default;
    text-align: left;
    font-size: 0.82rem;
}

/* Interactive section headers — used for collapsible cards. The cursor + hover
   feedback only fires on the <button> variant so that the static <div> form
   (the majority of usages — Pipeline / AI calls / Extracted values etc.) reads
   as a heading, not a clickable card. Real buttons go through here OR the
   .btn / .btn-primary / .btn-secondary classes. */
button.studio-control-section-header {
    cursor: pointer;
}

button.studio-control-section-header:hover {
    background: var(--color-surface-alt-hover, #eef0f4);
}

button.studio-control-section-header:focus-visible {
    outline: 2px solid var(--color-accent, #2b6cff);
    outline-offset: -2px;
}

.studio-control-section-count {
    margin-left: auto;
    font-size: 0.72rem;
}

.studio-control-section-headline {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.studio-control-section-subhead {
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.25;
}

/* ── "Last sample run" results table ────────────────────────────────── */
.studio-sample-run-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.studio-sample-run-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    text-align: left;
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--color-border, #d8dde4);
    background: var(--color-surface-alt, #f7f8fa);
}

.studio-sample-run-row {
    cursor: pointer;
    transition: background 0.1s ease;
}

.studio-sample-run-row td {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--color-border, #d8dde4);
    vertical-align: middle;
}

.studio-sample-run-row:hover {
    background: var(--color-accent-soft, #e8efff);
}

.studio-sample-run-row-blank td {
    color: var(--color-text-muted, #6b7280);
}

.studio-sample-run-name {
    font-weight: 500;
    color: var(--color-text-primary, #1a1a1a);
}

.studio-sample-run-pill {
    margin-left: 0.4rem;
    font-size: 0.65rem;
}

.studio-sample-run-source {
    font-size: 0.72rem;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
}

.studio-sample-run-value code {
    background: var(--color-surface-alt, #f7f8fa);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    font-size: 0.78rem;
    word-break: break-word;
}

/* Editable extracted-value cell: a value input plus an inline pin button. The
   input lets an operator correct a value — or supply one nothing extracted —
   before pinning it as expected (ground-truth) data for training. */
.studio-run-value-edit {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.studio-run-value-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.18rem 0.45rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.78rem;
    color: var(--color-text-primary, #1a1a1a);
    background: var(--color-surface-alt, #f7f8fa);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.studio-run-value-input:hover {
    border-color: var(--color-border-strong, #c2c9d2);
}

.studio-run-value-input:focus {
    outline: none;
    background: var(--color-surface, #fff);
    border-color: var(--color-accent, #b7791f);
    box-shadow: 0 0 0 2px rgba(183, 121, 31, 0.15);
}

/* Empty cells (nothing extracted, nothing typed yet) read as a quiet prompt
   rather than a filled value, so the operator can scan what still needs data. */
.studio-run-value-input.is-empty {
    background: transparent;
    border-style: dashed;
}

.studio-run-value-input::placeholder {
    color: var(--color-text-muted, #9aa3ad);
    font-style: italic;
}

.studio-control-section-body {
    background: var(--color-surface, #ffffff);
    border-top: 1px solid var(--color-border, #d8dde4);
}

/* Compact run button used inline on Tests rows. */
.btn-xs {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.4;
}

.studio-activity-run {
    white-space: nowrap;
}

.studio-header-dirty {
    color: var(--color-warning, #b88207);
    font-weight: 500;
}

/* ── Activity rows (shared by Activity / Tests / Issues tab content) ──── */
.studio-activity {
    /* Retained as a no-op container so render fragments can stay generic.
       Previously this was the bottom strip; tab bodies are now inside the
       left pane and use studio-pane-tab-body for chrome. */
}

.studio-activity-caret {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
    width: 0.8rem;
}

.studio-activity-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.studio-activity-badge-running {
    background: var(--color-accent-soft, #e8efff);
    color: var(--color-accent, #2b6cff);
}

.studio-activity-badge-success {
    background: #e7f4ec;
    color: var(--color-success, #1f8a4c);
}

.studio-activity-badge-warning {
    background: #fbf2dc;
    color: var(--color-warning, #b88207);
}

.studio-activity-badge-error {
    background: #fbe9e7;
    color: var(--color-error, #b42318);
}

.studio-activity-info .studio-activity-icon {
    color: var(--color-text-muted, #6b7280);
}

.studio-activity-link {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--color-accent, #2b6cff);
    text-decoration: none;
}

.studio-activity-link:hover {
    text-decoration: underline;
}

.studio-activity-count {
    font-size: 0.72rem;
    margin-left: auto;
}

.studio-activity-body {
    max-height: 18rem;
    overflow-y: auto;
}

.studio-activity-empty {
    padding: 0.8rem 1rem;
    font-size: 0.78rem;
    margin: 0;
}

.studio-activity-row {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--color-border, #d8dde4);
    font-size: 0.8rem;
    align-items: start;
}

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

.studio-activity-icon {
    font-size: 0.85rem;
    line-height: 1.3;
}

.studio-activity-running .studio-activity-icon {
    color: var(--color-accent, #2b6cff);
}

.studio-activity-success .studio-activity-icon {
    color: var(--color-success, #1f8a4c);
}

.studio-activity-warning .studio-activity-icon {
    color: var(--color-warning, #b88207);
}

.studio-activity-error .studio-activity-icon {
    color: var(--color-error, #b42318);
}

.studio-activity-main {
    min-width: 0;
}

.studio-activity-line {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.studio-activity-title {
    font-weight: 500;
}

.studio-activity-summary {
    font-size: 0.76rem;
}

.studio-activity-details {
    margin: 0.3rem 0 0 0;
    padding: 0.35rem 0.6rem;
    list-style: none;
    background: var(--color-surface-alt, #f7f8fa);
    border-radius: 4px;
    font-size: 0.74rem;
    color: var(--color-text-muted, #6b7280);
}

.studio-activity-details li {
    padding: 0.1rem 0;
}

.studio-activity-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

.studio-activity-expander {
    background: transparent;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
}

.studio-activity-expander:hover {
    background: var(--color-surface-alt, #f7f8fa);
}

/* ── Sweep / rule-set review overlays ──────────────────────────────────── */
.studio-sweep-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 100;
}

.studio-sweep-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--color-surface, #ffffff);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 1rem 1.25rem;
    z-index: 101;
}

.studio-sweep-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.studio-sweep-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.studio-sweep-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.5rem 0 0.75rem;
}

.studio-sweep-item {
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    background: var(--color-surface-alt, #f7f8fa);
}

.studio-sweep-item summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.studio-sweep-item summary label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.studio-sweep-summary-prompt {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.72rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-sweep-detail {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border, #d8dde4);
}

.studio-sweep-reasoning {
    font-size: 0.78rem;
    margin: 0 0 0.5rem 0;
}

.studio-sweep-field {
    margin-bottom: 0.4rem;
}

.studio-sweep-field label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.studio-sweep-field pre {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    margin: 0;
    white-space: pre-wrap;
}

.studio-sweep-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.studio-sweep-diff-side label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: block;
}

.studio-sweep-diff-side pre {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    font-size: 0.76rem;
    margin: 0;
    white-space: pre-wrap;
    min-height: 3rem;
}

.studio-sweep-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border, #d8dde4);
}

/* ── AI Build engine: launch + run panels ──────────────────────────────── */
.studio-build-launch-panel,
.studio-build-run-panel {
    max-width: 64rem;
}

.studio-build-section {
    margin: 0.65rem 0;
}

.studio-build-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary, #1f2330);
    margin-bottom: 0.3rem;
}

.studio-build-confidence,
.studio-build-modegrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.studio-build-coverage-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.studio-build-coverage-input {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border, #d6dae0);
    border-radius: 0.4rem;
    background: var(--color-surface, #fff);
}

.studio-build-coverage-input:focus {
    outline: none;
    border-color: var(--color-accent, #2b6cff);
    box-shadow: 0 0 0 2px var(--color-accent-soft, #e8efff);
}

.studio-build-coverage-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--color-text-secondary, #6b7280);
    align-self: center;
}

.studio-build-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border, #d6dae0);
    border-radius: 0.4rem;
    background: var(--color-surface, #fff);
    cursor: pointer;
}

.studio-build-radio:hover {
    background: var(--color-surface-hover, #f5f7fb);
}

.studio-build-radio.active {
    border-color: var(--color-accent, #2b6cff);
    background: var(--color-accent-soft, #e8efff);
}

.studio-build-radio input[type="radio"] {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.studio-build-radio-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
    min-width: 0;
}

.studio-build-radio-body .muted {
    font-size: 0.7rem;
}

.studio-build-splitcard {
    border: 1px solid var(--color-border, #d6dae0);
    border-radius: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: var(--color-surface-soft, #fafbfc);
}

.studio-build-splitcounts {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.studio-build-splitchip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.studio-build-splitchip-train {
    background: #eef1f5;
    color: #525c6c;
}

.studio-build-splitchip-test {
    background: #efe7fb;
    color: #6840c6;
}

.studio-build-guardrails-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.studio-build-guardrails-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #4a5260);
}

/* ── Run panel: iteration strip + body + diff ── */
/* Live status strip — spinner + "what it's doing now" + progress bar. */
.studio-build-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    margin: 0.4rem 0 0.2rem 0;
    border: 1px solid var(--color-border, #d8dde4);
    border-radius: 8px;
    background: var(--color-surface-subtle, #f6f8fb);
}

.studio-build-status-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.studio-build-status-text {
    flex: 1;
    min-width: 0;
}

.studio-build-status-line {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-build-status-bar {
    margin-top: 0.4rem;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border, #e2e6ec);
    overflow: hidden;
}

.studio-build-status-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-brand, #2563eb);
    transition: width 0.25s ease;
}

.studio-build-iterstrip {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #d8dde4);
    margin-bottom: 0.6rem;
}

.studio-build-iterpill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #d6dae0);
    background: var(--color-surface, #fff);
    cursor: pointer;
    font-size: 0.75rem;
}

.studio-build-iterpill:hover {
    background: var(--color-surface-hover, #f5f7fb);
}

.studio-build-iterpill.active {
    border-color: var(--color-accent, #2b6cff);
    background: var(--color-accent-soft, #e8efff);
    font-weight: 600;
}

.studio-build-iterpill-pending {
    cursor: default;
    border-style: dashed;
    color: var(--color-text-tertiary, #8a93a3);
}

.studio-build-iterpill-num {
    font-weight: 600;
}

.studio-build-iterpill-rate.rate-good { color: #2c8a4a; }
.studio-build-iterpill-rate.rate-mid { color: #a76900; }
.studio-build-iterpill-rate.rate-bad { color: #b03030; }

.studio-build-run-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.8rem;
}

.studio-build-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary, #1f2330);
    margin-bottom: 0.3rem;
}

.studio-build-section-title .muted {
    font-weight: 400;
    font-size: 0.72rem;
}

.studio-build-results {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.studio-build-results th,
.studio-build-results td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--color-border, #e3e6eb);
    text-align: left;
    vertical-align: top;
}

.studio-build-results th {
    background: var(--color-surface-soft, #fafbfc);
    font-weight: 600;
    color: var(--color-text-secondary, #4a5260);
}

.studio-build-results-sample {
    font-weight: 500;
    color: var(--color-text-primary, #1f2330);
}

.studio-build-results-diff {
    font-size: 0.72rem;
}

.studio-build-results-expected,
.studio-build-results-actual {
    background: var(--color-surface-soft, #fafbfc);
    padding: 0 0.25rem;
    border-radius: 3px;
}

.studio-build-results-actual {
    background: #fbeeee;
}

.studio-build-results tr.status-pass .studio-build-results-actual {
    background: #eaf6ee;
}

.studio-build-critique,
.studio-build-feedback {
    margin: 0.25rem 0 0 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary, #4a5260);
    border-left: 3px solid var(--color-accent, #2b6cff);
    padding: 0.2rem 0.5rem;
    background: var(--color-surface-soft, #fafbfc);
}

.studio-build-feedback {
    border-left-color: #6840c6;
}

.studio-build-prompt-block {
    margin: 0.25rem 0 0.4rem 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.74rem;
    background: var(--color-surface-soft, #fafbfc);
    border: 1px solid var(--color-border, #e3e6eb);
    border-radius: 0.3rem;
    white-space: pre-wrap;
    max-height: 14rem;
    overflow-y: auto;
}

.studio-build-feedback-modal {
    position: absolute;
    bottom: 4rem;
    left: 1.25rem;
    right: 1.25rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-accent, #2b6cff);
    border-radius: 0.5rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* ── Sample pin-values inline editor ──────────────────────────────────── */
.studio-sample-pin-editor {
    border: 1px solid var(--color-accent, #2b6cff);
    background: var(--color-surface, #ffffff);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    margin: 0.25rem 0 0.35rem 0.5rem;
}

.studio-sample-pin-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
}

.studio-sample-pin-grid {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.3rem 0.5rem;
    align-items: center;
}

.studio-sample-pin-grid label {
    font-size: 0.78rem;
    font-weight: 500;
}

.studio-sample-pin-grid input {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

.studio-sample-pin-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

/* Entity tag (#926) — which business unit a sample belongs to. */
.studio-sample-pin-entity {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: max-content minmax(0, 16rem);
    align-items: center;
    gap: 0.5rem;
}

.studio-sample-pin-entity label {
    font-size: 0.78rem;
    font-weight: 500;
}

.studio-samples-matrix .matrix-entity-cell {
    min-width: 9rem;
    max-width: 14rem;
}

.studio-sample-entity {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.wizard-block-text {
    pointer-events: none;
    user-select: none;
}

.wizard-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.wizard-page-indicator {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    min-width: 3rem;
    text-align: center;
}

.wizard-view-toggle {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

/* ── Wizard — Text view ── */

.wizard-text-view {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
}

.wizard-text-view-content {
    padding: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.wizard-text-word {
    cursor: default;
}

.wizard-text-word:hover {
    background: rgba(14, 165, 198, 0.15);
    border-radius: 2px;
}

/* ── Wizard — Extracted text panel ── */

.wizard-extracted-text {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.wizard-extracted-text-toggle {
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand);
    list-style: none;
}

.wizard-extracted-text-toggle::-webkit-details-marker { display: none; }

.wizard-extracted-text-body {
    padding: 0 0.875rem 0.75rem;
}

.wizard-extracted-text-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.wizard-extracted-text-content {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text-secondary);
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

/* ── Wizard — Field suggestion panel ── */

.wizard-fields-section {
    /* container */
}

.wizard-fields-header {
    display: flex;
    justify-content: flex-start;
}

.wizard-field-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-field-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wizard-field-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 1px 4px rgba(14, 165, 198, 0.1);
}

.wizard-field-selected {
    border-left: 3px solid var(--color-brand-teal);
}

.wizard-field-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-field-top input[type="checkbox"] {
    flex-shrink: 0;
}

.wizard-confidence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.confidence-high { background: var(--color-healthy); }
.confidence-medium { background: var(--color-degraded); }
.confidence-low { background: var(--color-down); }

.wizard-field-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    flex: 1;
}

.wizard-field-name:hover {
    color: var(--color-brand-teal);
}

.wizard-field-expand {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.wizard-field-value-inline {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: ui-monospace, monospace;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    margin-left: auto;
}

.wizard-fields-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wizard-model-select {
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
    max-width: 220px;
    flex: 1;
}

.wizard-fields-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

.wizard-other-fields summary {
    list-style: none;
}

.wizard-other-fields summary::-webkit-details-marker {
    display: none;
}

.wizard-field-details {
    padding: 0.75rem 0 0.25rem 2.5rem;
    border-top: 1px solid var(--color-surface-raised);
    margin-top: 0.5rem;
}

.wizard-field-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    margin: 0;
}

.wizard-field-dl dt {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.wizard-field-dl dd {
    margin: 0;
    color: var(--color-text-primary);
}

.wizard-field-all-values {
    margin-top: 0.5rem;
}

.wizard-field-value-item {
    font-size: 0.8125rem;
    padding: 0.15rem 0;
}

/* ── Wizard — Comparison table ── */

.wizard-comparison {
    margin-top: 0.5rem;
}

.wizard-comparison-scroll {
    overflow-x: auto;
}

.wizard-comparison-table {
    font-size: 0.8125rem;
}

.wizard-comparison-sticky {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    z-index: 1;
}

.wizard-comparison-field {
    font-weight: 600;
}

.wizard-comparison-value {
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Wizard — Stage 1 nav ── */

.wizard-stage1-nav {
    padding: 1rem 0 0.5rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* ── Wizard — Footer log bar ── */

.wizard-footer-log {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #1e293b;
    border-top: 1px solid #334155;
}

.wizard-footer-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

.wizard-footer-msg {
    flex: 1;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-footer-toggle {
    color: #64748b;
    font-size: 0.875rem;
}

.wizard-footer-expanded .wizard-footer-content {
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid #334155;
}

.wizard-log-icon-sm {
    font-size: 0.75rem;
}

/* ── Wizard — Custom field form ── */

.wizard-custom-field-form .form-row {
    max-width: 100%;
}

/* ── Responsive ── */

@media (max-width: 1280px) {
    .wizard-stage1 {
        height: auto;
        min-height: 0;
    }

    .wizard-split {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .wizard-panel-left,
    .wizard-panel-right {
        overflow: visible;
    }
}

@media (max-width: 900px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 2rem 1.5rem;
    }

    .hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .page-content {
        padding: 1rem;
    }
}

/* ── PEPPOL e-invoice summary ──────────────────────────────────────────────── */

.peppol-card .peppol-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.badge-format {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.peppol-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1rem 0 1.5rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    margin-bottom: 1.5rem;
}

.peppol-headline-amount {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.peppol-amount {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-strong, #0f172a);
}

.peppol-headline-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.peppol-headline-meta .meta-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.5rem;
}

.peppol-section-heading {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.peppol-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.party-card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--surface-subtle, #f8fafc);
}

.party-role {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #475569);
}

.party-name { margin: 0; font-weight: 600; }
.party-trading { margin: 0; color: var(--text-muted, #475569); font-style: italic; }
.party-vat,
.party-reg { margin: 0.25rem 0 0; font-size: 0.875rem; }
.party-address { margin-top: 0.5rem; font-size: 0.875rem; }
.party-contact,
.party-eaddr { margin-top: 0.5rem; font-size: 0.8125rem; }

.totals-block {
    margin-top: 0.5rem;
}

.totals-table {
    width: 100%;
    max-width: 28rem;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.totals-table th {
    text-align: left;
    font-weight: 400;
    color: var(--text-muted, #475569);
    padding: 0.4rem 0.75rem 0.4rem 0;
}

.totals-table td.num {
    text-align: right;
    padding: 0.4rem 0;
    font-variant-numeric: tabular-nums;
}

.totals-table tr.totals-payable th,
.totals-table tr.totals-payable td {
    border-top: 2px solid var(--border, #e2e8f0);
    padding-top: 0.6rem;
    font-weight: 600;
    color: var(--text-strong, #0f172a);
}

.payment-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.payment-block .mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

.peppol-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 2.E.c — country-specific extensions block. */
.country-extensions {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.country-extensions dt {
    color: var(--text-muted, #5a6675);
    font-weight: 500;
}

.country-extensions dd {
    margin: 0;
}

.country-extensions code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    background: var(--surface-quiet, #f5f7fa);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
}

.line-name { font-weight: 500; }
.line-desc { font-size: 0.8125rem; }
.line-id   { font-size: 0.75rem; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Master-detail editor (used by /document-types/{id}) ───────────────── */

.master-detail {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.master-detail-nested {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.master-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 720px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.master-list-empty {
    padding: 1rem 0.5rem;
    font-size: 0.875rem;
    text-align: center;
}

.master-list-add {
    margin-top: 0.5rem;
}

.master-row {
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: block;
    width: 100%;
    font: inherit;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.master-row:hover {
    background: var(--surface-subtle, #f8fafc);
}

.master-row-selected,
.master-row-selected:hover {
    background: var(--surface-active, #eff6ff);
    border-color: var(--accent, #3b82f6);
}

.master-row-title {
    font-weight: 500;
    color: var(--text-strong, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-row-required {
    color: #dc2626;
    margin-left: 0.25rem;
    font-weight: 600;
}

.master-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.25rem;
}

.master-row-pill {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    background: var(--surface-subtle, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    color: var(--text-muted, #475569);
}

.master-row-pill-peppol {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #bfdbfe;
}

.master-row-display {
    font-size: 0.75rem;
    color: var(--text-muted, #475569);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-row-source {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-muted, #64748b);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-list-group-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #475569);
    padding: 0.75rem 0.5rem 0.375rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    margin-bottom: 0.25rem;
}

.master-list-group-heading:first-child {
    padding-top: 0.25rem;
}

.detail-pane {
    min-width: 0;
}

.detail-empty {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.95rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.875rem 1rem;
}

.detail-grid .form-row-wide {
    grid-column: 1 / -1;
}

.detail-grid .form-row-checkbox {
    grid-column: 1 / -1;
}

.detail-grid .detail-section-heading {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #475569);
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 0.75rem;
}

.detail-grid .detail-actions {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.detail-section-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-strong, #0f172a);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ── Quick start (DocumentType editor) ───────────────────────────────── */

.quick-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.quick-start-option {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem;
    background: var(--surface-subtle, #f8fafc);
    display: flex;
    flex-direction: column;
}

.quick-start-option h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.quick-start-option .muted {
    flex: 1;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.suggestions-panel {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

/* ── Document-type creation wizard ──────────────────────────────────────── */

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--border, #cbd5e1);
    border-radius: 0.5rem;
    background: var(--surface-subtle, #f8fafc);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: center;
    position: relative;
}

.dropzone:hover {
    border-color: var(--accent, #3b82f6);
    background: var(--surface-active, #eff6ff);
}

.dropzone-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.dropzone-icon {
    color: var(--text-muted, #64748b);
    margin-bottom: 0.25rem;
}

.dropzone-title {
    font-weight: 500;
    color: var(--text-strong, #0f172a);
    font-size: 1.05rem;
}

.dropzone-hint {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
}

.dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-input:disabled { cursor: not-allowed; }

.wizard-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.wizard-divider::before,
.wizard-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border, #e2e8f0);
}

.wizard-alts {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.wizard-analysing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

/* Staged-sample confirmation row — shown after a drop, before analysis starts. */
.wizard-staged-file {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--surface-subtle, #f8fafc);
}

.wizard-staged-file .dropzone-icon {
    color: var(--accent, #2563eb);
    flex: 0 0 auto;
}

.wizard-staged-name {
    font-size: 0.975rem;
    word-break: break-all;
}

.wizard-review {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr);
    gap: 1.5rem;
    align-items: start;
}

.wizard-preview {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-subtle, #f8fafc);
    max-height: 720px;
    overflow: auto;
}

.wizard-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.wizard-preview-meta {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-align: center;
}

.wizard-preview-text {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    white-space: pre-wrap;
    overflow-x: auto;
    background: var(--surface, #ffffff);
    padding: 0.75rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.25rem;
}

.wizard-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-suggestions .form-row {
    margin-bottom: 0.5rem;
}

.wizard-suggestions .data-table {
    font-size: 0.85rem;
}

.suggestions-table tr.suggestions-group-row td {
    background: var(--surface-subtle, #f1f5f9);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #475569);
    padding: 0.5rem 0.5rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.suggestions-table .source-label {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-muted, #475569);
}

.wizard-suggestions .detail-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .wizard-review {
        grid-template-columns: 1fr;
    }
    .wizard-preview {
        max-height: 480px;
    }
}

.suggestions-panel .data-table tr.muted td {
    opacity: 0.6;
}

.suggestions-panel .detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .master-detail,
    .master-detail-nested {
        grid-template-columns: minmax(0, 1fr);
    }
    .master-list {
        max-height: 320px;
    }
    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.attachments-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.5rem;
}

.attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

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

.attachment-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.attachment-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-mime {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

.attachment-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.btn-small {
    font-size: 0.8125rem;
    padding: 0.3rem 0.7rem;
}

/* ── Wizard chrome (shared by Capture Type / Pipeline / Lookup wizards) ── */

.wizard-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: var(--color-surface-raised);
}

.wizard-header-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.wizard-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wizard-back-link {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.wizard-back-link:hover {
    color: var(--color-brand);
    text-decoration: underline;
}

.wizard-title {
    font-family: var(--font-title);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
}

.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: default;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.wizard-step-label {
    white-space: nowrap;
}

.wizard-step-done {
    color: var(--color-brand);
    cursor: pointer;
}

.wizard-step-done .wizard-step-num {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
}

.wizard-step-done:hover {
    background: var(--color-surface-raised);
}

.wizard-step-active {
    background: rgba(7, 70, 132, 0.08);
    color: var(--color-brand);
    font-weight: 600;
}

.wizard-step-active .wizard-step-num {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
}

.wizard-body {
    flex: 1 1 auto;
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
    overflow: auto;
}

.wizard-main-left {
    flex: 1 1 auto;
    min-width: 0;
}

.wizard-step-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-card);
}

.wizard-step-content > h2 {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
}

.wizard-step-content > h3 {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: var(--color-text-primary);
}

.wizard-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.wizard-step-header h2 {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.wizard-step-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Cards used by source/option pickers in wizards */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.source-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.source-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: var(--shadow-card);
}

.source-card.selected {
    border-color: var(--color-brand);
    background: rgba(7, 70, 132, 0.04);
    box-shadow: 0 0 0 2px rgba(7, 70, 132, 0.15);
}

.source-card h3 {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.source-card p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Radio row used in wizard scope/mode pickers */

.radio-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.radio-row input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.radio-row span strong {
    font-weight: 600;
}

/* Review grid (definition list) on the final wizard step */

.review-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.review-grid dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.review-grid dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* Highlighted table row (e.g. selected DocMX item) */

.row-selected {
    background: rgba(7, 70, 132, 0.06);
}

.row-selected td {
    font-weight: 500;
}

/* Make form-control / form-select fall through to the base input styles */

.form-control,
.form-select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* ── Kind picker (pipeline wizard) ── */

/* Escape the 480px form-row clamp so all three tiles span the card. */
.form-row:has(> .kind-picker) {
    max-width: none;
}

.kind-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .kind-picker { grid-template-columns: 1fr; }
}

.kind-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.kind-tile:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.kind-tile.is-selected {
    border-color: var(--color-brand);
    background: #f1f6fc;
    box-shadow: 0 0 0 1px var(--color-brand) inset;
}

.kind-tile:focus-within {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.kind-tile input[type="radio"],
.kind-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kind-tile__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--color-surface-raised);
    color: var(--color-brand);
    border: 1px solid var(--color-border);
}

.kind-tile.is-selected .kind-tile__icon {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

.kind-tile__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.kind-tile__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.kind-tile__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    line-height: 1.25;
}

.kind-tile__desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.kind-tile__check {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1rem;
    height: 1rem;
    color: var(--color-brand);
    opacity: 0;
    transition: opacity 0.15s;
}

.kind-tile.is-selected .kind-tile__check {
    opacity: 1;
}

/* ── PathVariablePicker (shared) ─────────────────────────────────────────── */

.path-variable-picker {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    width: 100%;
    max-width: 38rem;
}

.path-variable-picker-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.path-variable-picker-menu {
    position: relative;
    flex: 0 0 auto;
}

.path-variable-picker-menu summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.path-variable-picker-menu summary::-webkit-details-marker {
    display: none;
}

.path-variable-picker-trigger {
    line-height: 1.4;
}

.path-variable-picker-popover {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 22rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.path-variable-picker-popover-header {
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    margin-bottom: 0.25rem;
}

.path-variable-picker-option {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    color: inherit;
    font-size: 0.825rem;
}

.path-variable-picker-option:hover,
.path-variable-picker-option:focus-visible {
    background: var(--surface-muted, #f1f5f9);
    border-color: var(--border-subtle, #e5e7eb);
    outline: none;
}

.path-variable-picker-option-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--color-brand, #2563eb);
    flex: 0 0 auto;
    min-width: 11rem;
}

.path-variable-picker-option-label {
    color: var(--text-muted, #64748b);
    flex: 1 1 auto;
}

.path-variable-picker-option-template .path-variable-picker-option-token {
    color: var(--text-default, #0f172a);
}

/* ── Scope chips (A-1.5a / A-1.5b drill landings) ─────────────────────────
   Render the active scoping filters above a WorkGrid; clicking removes them.
   Used today on /documents when arriving with ?status=, ?pipeline=, or
   ?filename= in the URL. */

.scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.scope-chip:hover {
    border-color: var(--color-brand-teal);
    background: #f0fbff;
}

/* ── Bulk action bar + confirm dialog (A-6 / A-7 / A-8 / A-9) ─────────────
   Floats above the grid when at least one row is selected. Not sticky on
   purpose — operators prefer the action sitting next to the rows it
   operates on, not floating overhead. */

.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    background: #f0fbff;
    border: 1px solid var(--color-brand-teal);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.bulk-action-bar-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.bulk-action-bar-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link-button {
    background: none;
    border: none;
    color: var(--color-brand-teal);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.link-button:hover {
    color: var(--color-brand);
}

tr.is-selected {
    background: #f0fbff;
}

.bulk-confirm-dialog {
    max-width: 36rem;
    width: 100%;
}

.bulk-confirm-subheading {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 1rem 0 0.5rem;
}

.bulk-confirm-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}

.bulk-confirm-list--mono li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    flex-basis: 100%;
}

.bulk-confirm-typed-gate,
.confirm-dialog-typed-gate {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fff8eb;
    border: 1px solid var(--color-degraded);
    border-radius: var(--radius);
}

.bulk-confirm-typed-gate code,
.confirm-dialog-typed-gate code {
    background: white;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-border);
}

.confirm-dialog {
    max-width: 30rem;
    width: 100%;
}

.callout {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-bottom: 0.5rem;
}

.callout--warning {
    border-color: var(--color-degraded);
    background: #fff8eb;
}

.callout--info {
    border-color: var(--color-brand-teal);
    background: #f0fbff;
}

.callout--danger {
    border-color: var(--color-danger-border, rgba(180, 35, 24, 0.24));
    background: var(--color-danger-surface, rgba(180, 35, 24, 0.08));
    color: var(--color-danger, #b42318);
}

/* ── Modal scaffolding (A-6 BulkConfirmDialog uses these; future dialogs reuse) ─ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.modal-close:hover {
    color: var(--color-text-primary);
}

.modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* ── #57 AI Orchestrator landing page ─────────────────────────────────────── */
.orchestrator-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.orchestrator-greeting h2 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--color-text-primary);
}
.orchestrator-narration {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    min-height: 3rem;
    margin: 0;
}
.orchestrator-caret {
    display: inline-block;
    width: 0.6em;
    color: var(--color-text-secondary);
    animation: orchestrator-caret-blink 1.1s steps(2, end) infinite;
}
@keyframes orchestrator-caret-blink {
    50% { opacity: 0; }
}
.orchestrator-tickers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.orchestrator-ticker {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.orchestrator-ticker-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.orchestrator-ticker-value {
    margin-top: 0.25rem;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.orchestrator-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}
.orchestrator-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.75rem 0;
}
.orchestrator-card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.orchestrator-pill {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.orchestrator-empty {
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0;
}
.orchestrator-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.orchestrator-list-row + .orchestrator-list-row,
.orchestrator-question + .orchestrator-question {
    border-top: 1px solid var(--color-border);
}
.orchestrator-list-link {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    color: var(--color-text-primary);
    text-decoration: none;
}
.orchestrator-list-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}
.orchestrator-list-identifier {
    font-weight: 600;
}
.orchestrator-list-reason {
    color: var(--color-text-secondary);
}
.orchestrator-list-confidence {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.orchestrator-question {
    padding: 0.75rem 0;
}
.orchestrator-question-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}
.orchestrator-question-field {
    color: var(--color-text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.orchestrator-question-text {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary);
}
.orchestrator-question-values {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}
.orchestrator-question-values code {
    background: var(--color-surface-raised);
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
}
.orchestrator-question-actions {
    display: flex;
    justify-content: flex-end;
}
.orchestrator-accept-error,
.orchestrator-accept-status {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.orchestrator-accept-error {
    color: var(--color-danger, #b42318);
    background: var(--color-danger-surface, rgba(180, 35, 24, 0.08));
    border: 1px solid var(--color-danger-border, rgba(180, 35, 24, 0.24));
}
.orchestrator-accept-status {
    color: var(--color-success, #067647);
    background: var(--color-success-surface, rgba(6, 118, 71, 0.08));
    border: 1px solid var(--color-success-border, rgba(6, 118, 71, 0.24));
}

@media (max-width: 1024px) {
    .orchestrator-panels { grid-template-columns: 1fr; }
    .orchestrator-tickers { grid-template-columns: 1fr; }
}

/* ── #57 Document Inspector ───────────────────────────────────────────────── */
.inspector-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1rem;
}
.inspector-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.inspector-toolbar-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.inspector-toggle {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
.inspector-toggle:hover { background: var(--color-surface-raised); }
.inspector-toggle.is-active {
    background: var(--color-text-primary);
    color: var(--color-surface);
    border-color: var(--color-text-primary);
}
.inspector-replay { margin-left: 0.5rem; }

.inspector-canvas-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.inspector-canvas-frame {
    background: var(--color-surface-raised);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow: hidden;
}
.inspector-canvas {
    width: 100%;
    max-height: 60vh;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: 50% 50%;
}
.inspector-canvas.is-uncorrected {
    transform: rotate(-1.4deg) skewX(-1.2deg);
}
.inspector-canvas.is-corrected {
    transform: rotate(0) skewX(0);
}
.inspector-page {
    fill: #ffffff;
    stroke: var(--color-border);
    stroke-width: 0.4;
}
.inspector-page-band {
    fill: #eef2f7;
}
.inspector-page-line {
    fill: #e2e8f0;
}
.inspector-overlay {
    fill-opacity: 0.18;
    stroke-width: 0.4;
}
.inspector-overlay-group {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.inspector-overlay-group.is-visible {
    opacity: 1;
}
.inspector-overlay-ocr {
    fill: #94a3b8;
    stroke: #64748b;
}
.inspector-overlay-identifier {
    fill: #fde68a;
    stroke: #d97706;
    stroke-width: 0.5;
}
.inspector-overlay-resolved {
    fill: #bbf7d0;
    stroke: #16a34a;
}
.inspector-overlay-low {
    fill: #fecaca;
    stroke: #dc2626;
}
.inspector-overlay-calc {
    fill: #c7d2fe;
    stroke: #6366f1;
}

.inspector-confidence-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}
.inspector-confidence-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.inspector-confidence-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.confidence-meter {
    width: 11rem;
    flex: 0 0 auto;
}
.confidence-meter svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.confidence-meter-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 8;
    stroke-linecap: round;
}
.confidence-meter-arc {
    fill: none;
    stroke: #16a34a;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.inspector-lowconf {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.inspector-lowconf-row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.inspector-lowconf-row + .inspector-lowconf-row {
    border-top: 1px solid var(--color-border);
}

.inspector-rail {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
}
.inspector-stage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.inspector-stage {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.inspector-stage.is-running {
    background: var(--color-surface-raised);
}
.inspector-stage.is-succeeded .inspector-stage-icon {
    color: #16a34a;
}
.inspector-stage.is-running .inspector-stage-icon {
    color: #2563eb;
}
.inspector-stage.is-failed .inspector-stage-icon {
    color: #dc2626;
}
.inspector-stage.is-pending {
    color: var(--color-text-secondary);
}
.inspector-stage-icon {
    font-weight: 700;
    text-align: center;
    color: var(--color-text-secondary);
}
.inspector-stage-name {
    font-weight: 500;
    color: var(--color-text-primary);
}
.inspector-stage.is-pending .inspector-stage-name {
    color: var(--color-text-secondary);
    font-weight: 400;
}
.inspector-stage-summary {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
    .inspector-layout { grid-template-columns: 1fr; }
}

/* ── Bulk progress toast (A-7) ────────────────────────────────────────────
   Bottom-right stack of in-flight bulk operations. Visible app-wide via
   MainLayout so the operator can navigate away while the job runs. */

.bulk-progress-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 90;
    max-width: 22rem;
}

.bulk-progress-toast {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 0.875rem;
}

.bulk-progress-toast--succeeded { border-left-color: var(--color-healthy); }
.bulk-progress-toast--partiallyfailed { border-left-color: var(--color-degraded); }
.bulk-progress-toast--failed { border-left-color: var(--color-down); }
.bulk-progress-toast--cancelled { border-left-color: var(--color-unknown); }

.bulk-progress-toast-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.bulk-progress-toast-head strong { font-weight: 600; }

.bulk-progress-toast-head .link-button { margin-left: auto; font-size: 0.8125rem; }

.bulk-progress-toast-meta {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}

.bulk-progress-bar {
    height: 6px;
    background: var(--color-surface-raised);
    border-radius: 999px;
    overflow: hidden;
}

.bulk-progress-bar-fill {
    height: 100%;
    background: var(--color-brand-teal);
    transition: width 250ms ease;
}

.bulk-progress-toast--succeeded .bulk-progress-bar-fill { background: var(--color-healthy); }
.bulk-progress-toast--partiallyfailed .bulk-progress-bar-fill { background: var(--color-degraded); }
.bulk-progress-toast--failed .bulk-progress-bar-fill { background: var(--color-down); }

.bulk-progress-toast-error {
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}


/* ── Pipeline Dock — global drag indicator (Backlog #59 Slice E) ────── */
/* Scoped CSS isolation can't reach `body.dock-dragging` from
   PipelineCard.razor.css, so the small page-level cue lives here.
   wwwroot/js/upload-dock.js toggles `body.dock-dragging` while a file
   from the OS is being dragged over the viewport. */

body.dock-dragging {
    cursor: copy;
}

body.dock-dragging .dock-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 3px rgba(7, 70, 132, 0.25);
    transition: box-shadow 160ms ease;
    z-index: 1;
}

/* ── Rule editor: dropdown-with-free-text combo box ──────────────────────────
   Used for the enrichment / classification rule Match column, Source column,
   Result column (data-source columns) and Match field / Target field (capture
   type fields). A <select> when options are known, a text input as a fallback. */
.combo-box {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.combo-box .combo-select,
.combo-box .combo-input {
    flex: 1 1 auto;
    min-width: 0;
}

.combo-mode-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.combo-mode-btn:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

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

/* ── Rule editor: "Preview & test" panel ─────────────────────────────────── */
.rule-preview {
    margin-top: 0.5rem;
}

.rule-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #074684);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.rule-preview-toggle:hover {
    text-decoration: underline;
}

.rule-preview-body {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.rule-preview-table {
    overflow-x: auto;
}

.rule-preview-diag {
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.82rem;
}

.rule-preview-diag dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.rule-preview-diag dd {
    margin: 0;
    min-width: 0;
}

/* ── Row action menu (#697) — one "⋯" per table row instead of a strip of buttons ── */
.row-action-menu {
    position: relative;
    display: inline-block;
}

.row-action-menu__trigger {
    min-width: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.row-action-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 60;
    min-width: 11rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.row-action-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.7rem;
    border: 0;
    background: none;
    border-radius: 6px;
    font-size: 0.875rem;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.row-action-menu__item:hover {
    background: var(--color-surface-raised, #f1f5f9);
    text-decoration: none;
}

.row-action-menu__item--danger {
    color: #b91c1c;
}

.row-action-menu__item:disabled {
    color: var(--color-text-secondary);
    cursor: not-allowed;
    background: none;
}

/* Cards hosting a row action menu must not clip the popup (.card is overflow:hidden). */
.card--menus {
    overflow: visible;
}

/* ── Maintenance page (#717) ─────────────────────────────────────────────── */
.mx-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef1f4;
    color: #4b5563;
    white-space: nowrap;
}
.mx-pill-ok    { background: #e7f6ec; color: #1a7f37; }
.mx-pill-warn  { background: #fff4e0; color: #9a6700; }
.mx-pill-error { background: #ffebe9; color: #cf222e; }
.mx-log .mx-line-error   { color: #cf222e; }
.mx-log .mx-line-warn    { color: #9a6700; }
.mx-log .mx-line-success { color: #1a7f37; }

/* ── Preparation cost badges (#759) ──────────────────────────────────────────
   Preparation ops span two orders of magnitude of CPU: strip-metadata is PDF
   object surgery, dewarp runs a UVDoc forward pass per page. These chips carry
   that from PreparationCostCatalogue into the editor, the profiles table and
   the test-run log.

   Deliberately NOT a red/green severity scale — Heavy is a legitimate choice,
   not a fault. The ramp runs slate → amber → orange so it reads as "this costs
   more", never as "this is broken". */
.prep-cost {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
    background: #f1f5f9;
    color: #475569;
}

.prep-cost-mark {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex: none;
}

.prep-cost-ms {
    font-weight: 500;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.prep-cost-light    { background: #f1f5f9; color: #475569; }
.prep-cost-moderate { background: #fef3c7; color: #92400e; }
.prep-cost-heavy    { background: #ffedd5; color: #9a3412; }

/* Whole-profile cost line above the steps list. The figure carries the weight;
   the supporting text explains what earns it. */
.prep-cost-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.prep-cost-summary-moderate { border-left-color: #f59e0b; }
.prep-cost-summary-heavy    { border-left-color: #ea580c; }

.prep-cost-summary-figure {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: none;
    min-width: 8.5rem;
}

.prep-cost-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.prep-cost-summary-unit {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.prep-cost-summary-detail {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.prep-cost-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.prep-cost-summary-sep { color: var(--color-border); }
.prep-cost-summary-heavy-count { color: #9a3412; font-weight: 600; }

.prep-cost-summary-hint {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Estimate alongside the measured time in the run log — dimmer than the actual,
   because the measurement is the fact and the estimate is the context. */
.prep-log-estimate {
    margin-left: 0.35rem;
    opacity: 0.6;
    cursor: help;
}

@media (max-width: 900px) {
    .prep-cost-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* File-type presets (#816) — pick an outcome, not a pile of codec settings. */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}
.preset-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    text-align: left;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.preset-card:hover { border-color: var(--accent, #2f6fd0); }
.preset-card-active {
    border-color: var(--accent, #2f6fd0);
    box-shadow: 0 0 0 2px rgba(47, 111, 208, 0.14);
}
.preset-name { font-weight: 600; font-size: 0.92rem; }
.preset-size { font-size: 0.78rem; color: var(--accent, #2f6fd0); font-variant-numeric: tabular-nums; }
.preset-desc { font-size: 0.82rem; color: var(--muted-text, #5b6673); line-height: 1.35; }

/* File-type sample bench (#817) — compare candidates on a real document. */
.bench-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bench-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.bench-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
}
.bench-card-recommended {
    border-color: var(--success, #2e7d52);
    box-shadow: 0 0 0 2px rgba(46, 125, 82, 0.14);
}
.bench-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bench-name { font-weight: 600; font-size: 0.9rem; }
.bench-size { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bench-size-good { color: var(--success, #2e7d52); }
.bench-size-bad { color: var(--danger, #b3261e); }
.bench-ratio { display: block; font-size: 0.75rem; font-weight: 400; color: var(--muted-text, #5b6673); }
.bench-preview {
    width: 100%;
    height: auto;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 4px;
    background: #fff;
}
.bench-text-layer { font-size: 0.8rem; color: var(--muted-text, #5b6673); margin: 0; }
.bench-sample {
    font-size: 0.75rem;
    color: var(--muted-text, #5b6673);
    margin: 0;
    max-height: 3.2em;
    overflow: hidden;
    font-style: italic;
}
.bench-error { font-size: 0.8rem; color: var(--danger, #b3261e); margin: 0; }

/* ── Form Intake Studio editor (#879) ─────────────────────────────────────────
   Two panes side by side: the workbook to bind from, the form's questions to bind
   to. They stack below a laptop width, because a narrow grid beside a narrow tree
   is worse than either one at full width. */
.fi-editor-panes {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .fi-editor-panes { grid-template-columns: minmax(0, 1fr); }
}
.fi-pane { min-width: 0; }

.fi-sheet-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fi-sheet-tab {
    background: none;
    border: 1px solid var(--border, #d7dbe0);
    border-radius: 6px 6px 0 0;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.fi-sheet-tab.is-active { background: var(--surface-2, #eef2f7); font-weight: 600; }

/* FORM-WORKBOOK (#1078): the readiness panel and the start choice on /form-intake/new. */
.fi-start-choice { display: flex; gap: 0.75rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 1rem; }
.fi-start-choice legend { font-weight: 600; margin-bottom: 0.5rem; }
.fi-start-choice label { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem 0.9rem; border: 1px solid var(--border, #d9dee5); border-radius: 0.5rem; cursor: pointer; }
.fi-start-choice label.is-active { border-color: var(--accent, #2f6fb5); background: var(--surface-2, #eef2f7); }
.fi-readiness { margin-top: 1rem; }
.fi-readiness-counts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.fi-readiness-counts div { display: flex; flex-direction: column; }
.fi-readiness-counts dt { font-size: 0.8rem; color: var(--text-muted, #5f6b7a); }
.fi-readiness-counts dd { margin: 0; font-size: 1.4rem; font-weight: 600; }
.fi-readiness-section { border-top: 1px solid var(--border, #d9dee5); padding: 0.5rem 0; }
.fi-readiness-section summary { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.fi-readiness-section-name { font-weight: 600; margin-right: 0.25rem; }
.fi-readiness-section table { margin-top: 0.5rem; }
.fi-generated { margin-top: 1rem; }
.fi-generated-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }

.fi-grid-scroll { overflow: auto; max-height: 30rem; border: 1px solid var(--border, #d7dbe0); border-radius: 6px; }
.fi-grid { border-collapse: collapse; font-size: 0.8rem; width: max-content; }
.fi-grid th {
    position: sticky;
    top: 0;
    background: var(--surface-2, #eef2f7);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border, #d7dbe0);
    z-index: 1;
}
.fi-grid-rownum { position: sticky; left: 0; z-index: 2; }
.fi-grid-corner { left: 0; z-index: 3; }
.fi-grid-cell {
    border: 1px solid var(--border, #e3e7ec);
    padding: 0.2rem 0.45rem;
    max-width: 16rem;
    cursor: pointer;
    vertical-align: top;
}
.fi-grid-cell:hover { background: var(--surface-2, #eef2f7); }
.fi-grid-cell.is-selected { outline: 2px solid var(--primary, #2f6feb); outline-offset: -2px; }
.fi-grid-cell.is-bound { background: rgba(47, 111, 235, 0.08); }
.fi-grid-cell.is-placeholder { background: rgba(240, 173, 78, 0.14); }
.fi-cell-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
.fi-cell-chip {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--primary, #2f6feb);
    color: #fff;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-tree { max-height: 34rem; overflow: auto; }
.fi-tree-legend { display: flex; gap: 0.9rem; font-size: 0.75rem; color: var(--muted, #6b7280); margin-bottom: 0.6rem; align-items: center; }
.fi-tree-section > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.fi-tree-group { margin: 0.3rem 0 0.6rem 0.75rem; border-left: 2px solid var(--border, #e3e7ec); padding-left: 0.6rem; }
.fi-tree-group-name { font-size: 0.78rem; color: var(--muted, #6b7280); margin-bottom: 0.2rem; }
.fi-tree-question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.fi-tree-question:hover:not(:disabled) { background: var(--surface-2, #eef2f7); }
.fi-tree-question:disabled { cursor: default; opacity: 0.65; }
.fi-tree-question.is-selected { border-color: var(--primary, #2f6feb); background: rgba(47, 111, 235, 0.06); }
.fi-q-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-q-value { font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-q-issue { color: var(--danger, #b3261e); font-size: 0.78rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-q-note { font-size: 0.75rem; }

.fi-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--border, #d7dbe0); }
.fi-dot.is-bound { background: var(--success, #2e7d32); }
.fi-dot.is-needs-input { background: var(--warning, #f0ad4e); }
.fi-dot.is-error { background: var(--danger, #b3261e); }
.fi-dot.is-skipped { background: var(--border, #d7dbe0); }

.fi-inspector { margin-top: 1rem; }
.fi-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fi-inspector-head h2 { margin: 0; font-size: 1.05rem; }
.fi-inspector-source { margin: 0.2rem 0 0.8rem; font-size: 0.85rem; }
.fi-valuemap { margin-top: 0.4rem; }
/* Submission settings (#917) */
.fi-submission { margin-top: 1rem; }
.fi-check { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; }
.fi-check input[type="checkbox"] { margin: 0; }

/* Form Intake editor — region authoring (#914) */
.fi-toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fi-goto { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.fi-grid-pick { all: unset; cursor: pointer; display: block; width: 100%; text-align: center; }
.fi-grid-pick:hover, .fi-grid-pick:focus-visible { text-decoration: underline; outline: 2px solid var(--primary, #2f6feb); outline-offset: -2px; }
.fi-grid tr.is-highlighted td { background: rgba(46, 125, 50, 0.08); }
.fi-grid tr.is-header-row td { background: rgba(47, 111, 235, 0.10); }
.fi-grid-rownum.is-header { background: rgba(47, 111, 235, 0.18); font-weight: 600; }
.fi-locator { border-top: 1px solid var(--border, #e3e7ec); padding-top: 0.75rem; margin: 0.5rem 0 0.75rem; }
.fi-inline { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fi-rows-read { margin: 0.5rem 0; font-size: 0.85rem; }
.fi-columns { width: 100%; margin-top: 0.4rem; }
.fi-columns td { vertical-align: top; }
.fi-keymap { max-height: 22rem; overflow: auto; margin-top: 0.4rem; }
.fi-keymap tr.is-unmapped td { background: rgba(240, 173, 78, 0.10); }
.fi-inspector-sub { font-size: 0.95rem; margin: 1rem 0 0.2rem; }

/* ── Classification workbench (#937) ─────────────────────────────────────────
   Two columns: the active step on the left, the document pinned on the right so the page stays in view
   while the operator works through keys, mapping and results. Calm by default; colour marks what needs
   attention and what a key read. */

.wb-eyebrow { margin: 0 0 0.35rem; font-size: 0.8rem; }
.wb-unsaved { font-size: 0.85rem; color: var(--color-text-secondary); margin-right: 0.75rem; }
.wb-message { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wb-list { margin: 0.35rem 0 0 1.1rem; padding: 0; }
.wb-list li { margin: 0.15rem 0; }

.wb-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
}
.wb-step {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    text-align: left;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    min-width: 0;
}
.wb-step:hover { background: var(--color-surface-hover, var(--color-surface-raised)); }
.wb-step.is-active { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.wb-step-no {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.wb-step.is-active .wb-step-no { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.wb-step-text { display: flex; flex-direction: column; min-width: 0; }
.wb-step-label { font-weight: 600; font-size: 0.9rem; }
.wb-step-summary {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-layout {
    display: grid;
    /* --wb-left-width is set in px by the splitter (playground-splitter.js) and remembered per browser. */
    grid-template-columns: var(--wb-left-width, minmax(0, 1.15fr)) 8px minmax(360px, 1fr);
    gap: 1rem;
    align-items: start;
}
.wb-main { min-width: 0; }
.wb-side { position: sticky; top: 1rem; min-width: 0; }
.wb-splitter { align-self: stretch; cursor: col-resize; background: var(--color-border); border-radius: 4px; transition: background 0.15s; touch-action: none; }
.wb-splitter:hover, .wb-splitter.dragging { background: var(--color-brand); }
.wb-viewer-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.82rem; }
.wb-viewer-zoom { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.4rem; }
.wb-viewer-zoom-level { min-width: 4.5rem; text-align: center; }
/* Fit height: the page box takes a definite height and the page keeps its aspect ratio, so the width
   follows — no measuring, and it tracks the window. */
.wb-page.wb-fit-height { height: 70vh; }
.wb-page.wb-fit-height .wizard-page-container { box-sizing: border-box; height: 100%; width: auto !important; margin-inline: auto; }
@media (max-width: 1100px) {
    .wb-layout { grid-template-columns: minmax(0, 1fr); }
    .wb-splitter { display: none; }
    .wb-side { position: static; }
    .wb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wb-panel { padding: 1.1rem 1.25rem; }
.wb-panel-head { margin-bottom: 1rem; }
.wb-panel-head h2 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.wb-panel-head p { margin: 0; font-size: 0.85rem; max-width: 60rem; }
.wb-panel-head-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.wb-subhead { font-size: 0.95rem; margin: 1.25rem 0 0.25rem; }
.wb-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--color-text-secondary); }
.wb-label-inline { font-size: 0.8rem; color: var(--color-text-secondary); margin-right: 0.35rem; }
.wb-field-error { color: var(--color-danger, #b42318); font-size: 0.82rem; margin: 0.35rem 0 0; }
.wb-attention { color: var(--color-degraded, #b54708); font-weight: 600; }
.wb-details summary { cursor: pointer; font-size: 0.82rem; color: var(--color-text-secondary); }

.wb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0 0 0.75rem;
}
.wb-toolbar-group { display: inline-flex; align-items: center; gap: 0.35rem; }
.wb-table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 6px; }
.wb-table { margin: 0; }
.wb-table thead th { position: sticky; top: 0; background: var(--color-surface-raised); z-index: 1; }
.wb-table tbody tr { cursor: pointer; }
.wb-table tbody tr.wb-map-detail { cursor: default; }
.wb-table tbody tr.wb-map-detail > td { background: var(--color-surface-raised); }
.wb-col-check { width: 2rem; }
.wb-doc-name { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.wb-doc-folder { display: block; font-size: 0.75rem; }
.wb-value, .wb-cell-value .mono { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.wb-entities { font-size: 0.8rem; }

/* Pack */
.wb-drop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 18rem); gap: 1rem; margin-bottom: 1rem; }
.wb-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1.25rem;
    border: 1.5px dashed var(--color-border-strong, var(--color-border));
    border-radius: 8px;
    background: var(--color-surface-raised);
    cursor: pointer;
}
.wb-drop-zone:hover { border-color: var(--color-brand); }
.wb-drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wb-drop-title { font-weight: 600; }

/* Keys */
.wb-key { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.85rem 1rem; margin-top: 0.75rem; }
.wb-key.is-picking { border-color: var(--color-brand); }
.wb-key-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.wb-key-name { max-width: 16rem; font-weight: 600; }
.wb-key-kind { width: auto; }
.wb-key-stats { font-size: 0.82rem; color: var(--color-text-secondary); margin-right: auto; }
.wb-key-stats.has-misses { color: var(--color-degraded, #b54708); }
.wb-locators { margin: 0.6rem 0 0.4rem 1.2rem; padding: 0; }
.wb-locator { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.88rem; }
.wb-locator-actions { display: inline-flex; gap: 0.3rem; align-items: center; }
.wb-key-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; }
.wb-key-advanced { flex-basis: 100%; }
.wb-key-advanced-body { padding: 0.5rem 0 0; max-width: 32rem; }
.wb-builtin { margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); }
.wb-builtin-heading { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 0.25rem; }
.wb-builtin-list { margin: 0.4rem 0 0; padding: 0 0 0 1.1rem; font-size: 0.88rem; }
.wb-builtin-list li { padding: 0.15rem 0; }

.wb-pick { border: 1px solid var(--color-brand); border-radius: 8px; padding: 0.9rem 1rem; background: var(--color-accent-soft, var(--color-surface-raised)); margin-bottom: 0.5rem; }
.wb-pick-hint { margin: 0 0 0.65rem; }
.wb-options { border: 0; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.wb-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
}
.wb-option.is-chosen { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.wb-option input { margin-top: 0.2rem; }
.wb-option-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.wb-option-title { font-weight: 600; }
.wb-option-hint { font-size: 0.8rem; }
.wb-option-preview { font-size: 0.82rem; overflow-wrap: anywhere; }
/* #953: a way's settings, edited in place on a proposed option or a saved way. */
.wb-locator-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.45rem; font-size: 0.82rem; }
.wb-edit-field { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.wb-edit-field .form-control-sm { width: 14rem; font-weight: 400; }
.wb-edit-field .wb-line-input { width: 5rem; }
.wb-edit-check { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; cursor: pointer; }
.wb-locator-edit-row { flex-basis: 100%; padding: 0.15rem 0 0.35rem 0; }
.wb-locator.is-editing { flex-wrap: wrap; }
.wb-readout-why { font-size: 0.78rem; }
.wb-page-text { margin-top: 0.75rem; }
.wb-page-text-hint { font-size: 0.78rem; margin: 0.35rem 0 0.5rem; }
.wb-page-text-lines { margin: 0; padding-left: 2.2rem; font-size: 0.78rem; line-height: 1.5; max-height: 22rem; overflow: auto; }
.wb-page-text-lines li { overflow-wrap: anywhere; }
.wb-pick-fields { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 0.75rem; max-width: 32rem; margin-bottom: 0.75rem; }
.wb-pick-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* Mapping */
.wb-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
    margin-bottom: 0.75rem;
}
.wb-inline-form-actions { display: flex; gap: 0.4rem; }
.wb-inline-form-hint { flex-basis: 100%; margin: 0; }
.wb-row-detail { display: grid; gap: 0.9rem; padding: 0.35rem 0.25rem; }
.wb-row-detail h4 { font-size: 0.85rem; margin: 0 0 0.35rem; }
.wb-row-detail p { margin: 0 0 0.4rem; font-size: 0.82rem; }
.wb-variations, .wb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.86rem; }
.wb-variations li, .wb-rules li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.wb-split-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.3rem 0; }
.wb-split-row .form-control, .wb-split-row .form-select { width: auto; min-width: 9rem; }
.wb-split-row input.mono { min-width: 18rem; flex: 1 1 18rem; }
.wb-split-count { font-size: 0.82rem; color: var(--color-text-secondary); min-width: 2.5rem; }
.wb-split-row.is-showing { background: var(--color-accent-soft, #e8efff); border-radius: 6px; padding: 0.2rem 0.35rem; margin-left: -0.35rem; }
.wb-split-entity { font-size: 0.82rem; margin: 0.6rem 0 0.1rem; padding-top: 0.45rem; border-top: 1px solid var(--color-border); }
.wb-split-entity:first-of-type { border-top: 0; padding-top: 0; }
.wb-split-entity-varies strong { color: var(--color-degraded, #b54708); }
.wb-split-entity-actions { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; margin-left: 0.6rem; }
.wb-split-hint { font-size: 0.82rem; color: var(--color-text-secondary); flex: 1 1 18rem; }
.wb-origin-note { font-size: 0.78rem; white-space: nowrap; }

/* Results */
.wb-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.wb-filter {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.wb-filter.is-active { border-color: var(--color-brand); color: var(--color-brand); font-weight: 600; }
.wb-filter-count { color: var(--color-text-secondary); margin-left: 0.25rem; }

/* Viewer */
.wb-viewer { padding: 0.85rem 1rem; }
.wb-viewer-empty { min-height: 16rem; display: grid; place-items: center; }
.wb-viewer-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.6rem; }
.wb-viewer-title { display: flex; flex-direction: column; min-width: 0; }
.wb-viewer-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-viewer-sub { font-size: 0.8rem; }
.wb-viewer-nav { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-size: 0.82rem; }
.wb-pick-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--color-accent-soft, var(--color-surface-raised));
    border: 1px solid var(--color-brand);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
.wb-pick-banner span { margin-right: auto; }
.wb-page { max-height: 70vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 6px; }
.wb-readout { margin: 0.75rem 0 0; display: grid; gap: 0.3rem; font-size: 0.86rem; }
.wb-readout-row { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: 0.75rem; }
.wb-readout dt { color: var(--color-text-secondary); font-weight: 600; }
.wb-readout dd { margin: 0; overflow-wrap: anywhere; }
.wb-readout-by { font-size: 0.78rem; }
.wb-readout-fail { color: var(--color-degraded, #b54708); font-size: 0.8rem; }
.wb-readout-outcome { border-top: 1px solid var(--color-border); padding-top: 0.4rem; margin-top: 0.2rem; }

/* Save check */
.wb-savecheck { padding: 1rem 1.25rem; margin-bottom: 1rem; border-color: var(--color-degraded, #b54708); }
.wb-savecheck h2 { font-size: 1rem; margin: 0 0 0.25rem; }
.wb-savecheck-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.wb-savecheck-accept .form-control { max-width: 24rem; }
.wb-steps-preview { font-size: 0.85rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.wb-misses { flex-basis: 100%; }
.wb-miss-list { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 14rem; overflow: auto; border: 1px solid var(--color-border); border-radius: 6px; }
.wb-miss {
    display: flex; justify-content: space-between; gap: 0.75rem; width: 100%;
    padding: 0.35rem 0.6rem; border: 0; border-bottom: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-primary); text-align: left; cursor: pointer; font-size: 0.84rem;
}
.wb-miss-list li:last-child .wb-miss { border-bottom: 0; }
.wb-miss:hover { background: var(--color-surface-hover, var(--color-surface-raised)); }
.wb-miss.is-selected { background: var(--color-accent-soft, var(--color-surface-raised)); font-weight: 600; }
.wb-miss-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-locator-actions .is-active { border-color: var(--color-brand); color: var(--color-brand); }
.wb-toolbar-settings { gap: 0.4rem 1.5rem; margin-bottom: 0.75rem; }
.wb-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.wb-health { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.65rem 0.9rem; margin-bottom: 0.9rem; background: var(--color-surface-raised); font-size: 0.86rem; }
.wb-health-counts { display: block; }
.wb-health-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.wb-health-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }

/* Mapping seen from one entity or group: which rule decides each row there. */
.wb-scope { margin-top: 0.25rem; }
.wb-scope-summary { font-size: 0.86rem; color: var(--color-text-secondary); }
.wb-origin {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 100px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.wb-origin-own { background: var(--color-accent-soft, #e8efff); color: var(--color-accent, #2b6cff); }
.wb-origin-group { background: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-border); }
.wb-origin-global { color: var(--color-text-secondary); border-color: var(--color-border); }
.wb-origin-none { color: var(--color-text-secondary); font-weight: 500; }
/* Tags a row sets (#956): one card per output, inherited or the scope's own. */
.wb-outputs { list-style: none; margin: 0.35rem 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.86rem; }
.wb-output { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.4rem 0.6rem; }
.wb-output-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wb-output-actions { margin-left: auto; display: inline-flex; gap: 0.75rem; flex: none; }
.wb-output-body { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--color-border); }
.wb-output-withheld > .wb-output-head > strong { text-decoration: line-through; color: var(--color-text-secondary); }
.wb-tagtype { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.wb-sent-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.84rem; }
.wb-sent-tags .mono { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.wb-sent-tag-name { color: var(--color-text-secondary); margin-right: 0.3rem; }
.wb-owncopy { font-size: 0.86rem; padding: 0.4rem 0.6rem; border-radius: 6px; background: var(--color-surface-raised); }
.wb-defaults { margin: 0.5rem 0 0.75rem; }
.wb-defaults-head { display: flex; align-items: baseline; gap: 0.75rem; }
.wb-defaults-head .wb-subhead { margin: 0; }
.wb-differs { margin-top: 0.75rem; font-size: 0.86rem; }
.wb-differs summary { cursor: pointer; color: var(--color-text-secondary); }
.wb-differs ul { margin: 0.35rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.wb-health-actions { display: inline-flex; gap: 0.75rem; flex: none; }
.wb-check-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }
.wb-entity-check { margin: 0.5rem 0 0.9rem; }
.wb-entity-check tbody tr { cursor: pointer; }
.wb-group-row td { background: var(--color-surface-raised); font-size: 0.85rem; }
.wb-group-row { cursor: default; }
.wb-live { border: 1px solid var(--color-degraded, #b54708); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.wb-live h3 { font-size: 0.95rem; margin: 0 0 0.25rem; }
.wb-live p { margin: 0 0 0.5rem; font-size: 0.85rem; }
.wb-live-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; }
.wb-live-list .wb-miss { border-bottom: 1px solid var(--color-border); }
.wb-live-list li:last-child .wb-miss { border-bottom: 0; }

/* Form Intake proposal (#883): the suggestion card, its key-map confirm grid, and the amber
   needs-input chips — deliberately unlike the green "bound" dot so a gap never reads as a match. */
.fi-proposal { margin-bottom: 1rem; border-left: 3px solid var(--primary, #2f6feb); }
.fi-proposal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fi-proposal-head h2 { margin: 0; font-size: 1.05rem; }
.fi-proposal-headline { margin: 0.5rem 0 0.4rem; }
.fi-proposal-rationale { font-size: 0.85rem; }
.fi-proposal-table { width: 100%; margin: 0.5rem 0; }
.fi-proposal-table td { vertical-align: top; font-size: 0.85rem; }
.fi-proposal-keymap { margin-top: 0.75rem; max-height: 26rem; overflow: auto; }
.fi-proposal-keymap tr.is-unmapped td { background: rgba(240, 173, 78, 0.10); }
.fi-proposal-section { margin-top: 0.6rem; }
.fi-proposal-section > summary { cursor: pointer; font-weight: 600; }
.fi-proposal-actions { margin-top: 0.9rem; border-top: 1px solid var(--border, #e3e7ec); padding-top: 0.75rem; display: grid; gap: 0.5rem; }
.fi-needs-list { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.fi-needs-list li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.fi-source-ai { background: rgba(47, 111, 235, 0.12); color: var(--primary, #2f6feb); }
.fi-chip-needs-input {
    display: inline-flex;
    align-items: center;
    border: 1px dashed #b7791f;
    background: rgba(240, 173, 78, 0.16);
    color: #7a4d00;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
button.fi-chip-needs-input:hover, button.fi-chip-needs-input:focus-visible { background: rgba(240, 173, 78, 0.30); outline: 2px solid #b7791f; outline-offset: 1px; }
.fi-chip-legend { cursor: default; }
.fi-tree-qrow { display: flex; align-items: center; gap: 0.35rem; }
.fi-tree-qrow > .fi-tree-question { flex: 1 1 auto; min-width: 0; }

/* #923 — editor UX and accessibility: search, skipped state, keyboard grid, anchor tint, drag and drop. */
.fi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fi-tree-search { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; }
.fi-tree-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.fi-tree-count { font-size: 0.75rem; margin: 0 0 0.5rem; }
.fi-dot.is-unbound { background: var(--border, #d7dbe0); }
.fi-dot.is-skipped { background: transparent; border: 1px dashed var(--muted, #6b7280); box-sizing: border-box; }
.fi-tree-question.is-skipped .fi-q-name { color: var(--muted, #6b7280); }
.fi-q-skipped { color: var(--muted, #6b7280); font-style: italic; }
.fi-group-chip { cursor: grab; padding: 0.05rem 0.4rem; border: 1px dashed var(--border, #d7dbe0); border-radius: 999px; }
.fi-group-chip:hover { border-color: var(--primary, #2f6feb); }
.fi-tree-question[draggable="true"] { cursor: grab; }
.fi-grid-cell:focus-visible, .fi-sheet-tab:focus-visible { outline: 2px solid var(--primary, #2f6feb); outline-offset: -2px; }
.fi-grid-cell.is-anchor { background: rgba(47, 111, 235, 0.22); box-shadow: inset 0 0 0 2px rgba(47, 111, 235, 0.55); }
.fi-grid-cell.is-anchor-label { background: rgba(47, 111, 235, 0.12); }
.fi-raw { color: var(--muted, #6b7280); margin-right: 0.25rem; }
.fi-inspector-actions { display: flex; gap: 0.4rem; align-items: center; }
.fi-question-panel .fi-inspector-head { margin-bottom: 0.4rem; }
.fi-suggest { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.fi-suggest-hint { flex-basis: 100%; margin: 0; }
.fi-suggest-hint.is-prominent { color: #7a4d00; font-weight: 600; }

/* Form Intake editor — versions, samples and conventions (#924) */
.fi-settings-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.fi-settings-pair > .card { margin-top: 0; }
@media (max-width: 1100px) { .fi-settings-pair { grid-template-columns: minmax(0, 1fr); } }
.fi-samples, .fi-versions { margin-top: 1rem; }
.fi-panel-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fi-file-button { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.fi-file-button:focus-within { outline: 2px solid var(--primary, #2f6feb); outline-offset: 1px; }
.fi-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fi-samples tr.is-selected td, .fi-versions tr.is-selected td, .fi-run-row.is-selected td { background: rgba(47, 111, 235, 0.06); }
.fi-version-view { border-top: 1px solid var(--border, #e3e6eb); margin-top: 1rem; }
.fi-version-diff tr.is-changed th, .fi-version-diff tr.is-changed td { font-weight: 600; }
.fi-version-bindings { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.fi-version-bindings .muted { margin-left: 0.4rem; }
.fi-token-list { margin-bottom: 0.9rem; }
.fi-token-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0.25rem 0 0.4rem; }
.fi-token-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.25rem 0.1rem 0.55rem; border: 1px solid var(--border, #d5dae1); border-radius: 999px; background: var(--surface-muted, #f5f7fa); font-size: 0.85rem; }
.fi-token-remove { border: 0; background: none; cursor: pointer; padding: 0 0.3rem; line-height: 1; font-size: 1rem; border-radius: 999px; }
.fi-token-remove:hover, .fi-token-remove:focus-visible { background: rgba(0, 0, 0, 0.08); outline: 2px solid var(--primary, #2f6feb); outline-offset: 0; }
.fi-token-add { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* #967 — the studio's text cut: a panel is a heading, at most one short sentence and its controls;
   explanations, examples and defaults sit behind an "Advanced" disclosure or a help icon's tooltip. */
.fi-panel-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.fi-panel-head h2 { margin: 0; font-size: 1.05rem; }
.fi-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
    border: 1px solid var(--border, #d7dbe0); border-radius: 50%;
    font-size: 0.7rem; font-weight: 600; line-height: 1;
    color: var(--muted, #6b7280); cursor: help; user-select: none;
}
.fi-help:hover, .fi-help:focus-visible { color: var(--primary, #2f6feb); border-color: var(--primary, #2f6feb); outline: none; }
.fi-advanced { margin-top: 0.75rem; font-size: 0.85rem; }
.fi-advanced > summary { cursor: pointer; color: var(--muted, #6b7280); font-weight: 500; width: max-content; }
.fi-advanced > summary:focus-visible { outline: 2px solid var(--primary, #2f6feb); outline-offset: 2px; }
.fi-advanced[open] > summary { margin-bottom: 0.4rem; }
.fi-advanced-body { display: grid; gap: 0.4rem; color: var(--muted, #6b7280); max-width: 48rem; }
.fi-advanced-body p { margin: 0; }

/* ── Form Intake review (#965): the question-led list and its drill-in ── */
.fi-review-bar { display: flex; gap: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.fi-review-map { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.fi-review-progress { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; min-height: 2rem; }
.fi-review-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
/* #969: list | splitter | pane, the workbench's pattern. --fi-review-left-width is set in px by the
   splitter (playground-splitter.js) and remembered per browser; by default the pane takes the larger share. */
.fi-review-panes.has-pane { grid-template-columns: var(--fi-review-left-width, minmax(0, 0.8fr)) 8px minmax(420px, 1.2fr); }
.fi-review-splitter { display: none; }
.fi-review-panes.has-pane .fi-review-splitter { display: block; }
.fi-review-splitter:focus-visible { outline: 2px solid var(--primary, #2f6feb); outline-offset: 2px; }
/* Expanded: the grid takes the whole page width under the list. */
.fi-review-panes.has-pane.is-expanded { grid-template-columns: minmax(0, 1fr); }
.fi-review-panes.is-expanded .fi-review-splitter { display: none; }
.fi-review-panes.is-expanded .fi-review-pane { position: static; }
@media (max-width: 1100px) {
    .fi-review-panes.has-pane { grid-template-columns: minmax(0, 1fr); }
    .fi-review-panes .fi-review-splitter { display: none; }
    .fi-review-pane { position: static; }
}
.fi-review-pane { position: sticky; top: 1rem; }
.fi-review-pane .fi-inspector-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* The review's grid (#969): a definite height from FormIntake:Preview, scrolling both ways under the
   sticky row numbers and column letters. */
.fi-grid-scroll.fi-grid-fit { height: var(--fi-grid-height, 70vh); max-height: none; }
.fi-sheet-pick { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fi-sheet-pick .form-label { margin: 0; }
.fi-sheet-pick select { min-width: 14rem; }
.fi-sheet-count { font-size: 0.8rem; color: var(--muted, #6b7280); }

/* The rule block (#969): a kind, its fields, what it reads, Apply rule. */
.fi-rule { border: 1px solid var(--border, #e3e7ec); border-radius: 8px; padding: 0.6rem 0.8rem 0.75rem; margin-bottom: 0.75rem; }
.fi-rule-head { display: flex; align-items: center; gap: 0.4rem; }
.fi-rule-head .fi-inspector-sub { margin: 0; }
.fi-rule-fields { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; margin-top: 0.5rem; }
.fi-rule-fields .form-label { display: block; font-size: 0.78rem; margin-bottom: 0.15rem; }
.fi-rule-fields input:not(.fi-rule-short) { min-width: 14rem; }
.fi-rule-short { width: 6rem; }
.fi-rule-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.6rem; }
.fi-rule-reads { font-size: 0.85rem; color: var(--muted, #6b7280); overflow-wrap: anywhere; }
.fi-review-pane-where { margin: 0.2rem 0 0.75rem; font-size: 0.85rem; color: var(--muted, #6b7280); }
.fi-review-tools { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fi-review-tools .fi-sheet-tabs { margin-bottom: 0; }
.fi-review-table { width: 100%; }
.fi-review-table td { vertical-align: top; font-size: 0.85rem; }
.fi-review-row { cursor: pointer; }
.fi-review-row:hover td { background: var(--surface-2, #eef2f7); }
.fi-review-row:focus-visible { outline: 2px solid var(--primary, #2f6feb); outline-offset: -2px; }
.fi-review-row.is-selected td { background: rgba(47, 111, 235, 0.08); }
.fi-review-row.is-needs-input td:first-child { box-shadow: inset 3px 0 0 var(--warning, #f0ad4e); }
.fi-review-accept { width: 2rem; }
.fi-review-eyebrow { display: block; font-size: 0.72rem; color: var(--muted, #6b7280); text-transform: none; letter-spacing: 0.01em; }
.fi-review-name { font-weight: 600; }
.fi-review-where { color: var(--muted, #6b7280); max-width: 18rem; overflow-wrap: anywhere; }
.fi-review-clip { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fi-review-why { max-width: 18rem; }
.fi-review-state { white-space: nowrap; }
.fi-review-state .fi-dot { margin-right: 0.3rem; }
.fi-confidence { display: inline-flex; gap: 0.2rem; align-items: center; }
.fi-confidence-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--border, #d7dbe0); }
.fi-confidence-dot.is-on { background: var(--primary, #2f6feb); }
.fi-review-groups { margin-top: 1rem; }
.fi-review-groups > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.fi-review-refused { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }

/* ── Form Intake review assistant (#966): beside the list, never over it ── */
.fi-review-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.fi-assist .fi-inspector-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.fi-assist-log { display: grid; gap: 0.6rem; max-height: 26rem; overflow-y: auto; margin: 0.5rem 0 0.75rem; padding-right: 0.25rem; }
.fi-assist-msg { display: grid; gap: 0.4rem; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.88rem; }
.fi-assist-msg.is-user { background: rgba(47, 111, 235, 0.07); justify-self: end; max-width: 92%; }
.fi-assist-msg.is-assistant { background: var(--surface-muted, #f5f7fa); }
.fi-assist-event { margin: 0; font-size: 0.8rem; color: var(--muted, #6b7280); text-align: center; }
.fi-assist-card { border: 1px solid var(--border, #e3e6eb); border-radius: 8px; background: var(--surface, #fff); padding: 0.5rem 0.6rem; display: grid; gap: 0.4rem; }
.fi-assist-card:focus-visible { outline: 2px solid var(--primary, #2f6feb); outline-offset: 1px; }
.fi-assist-card.is-stale { opacity: 0.75; }
.fi-assist-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fi-assist-rows > li { display: grid; gap: 0.1rem; }
.fi-assist-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.8rem; color: var(--muted, #6b7280); }
.fi-assist-why { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-assist-actions { flex-wrap: wrap; }
.fi-assist-compose { display: grid; gap: 0.4rem; }
.fi-assist-compose textarea { width: 100%; resize: vertical; font: inherit; }

/* Screen-reader-only text (#1044). Components have used class="visually-hidden" for labels and the screenshot picker,
   but no global rule defined it, so those labels and the native file input showed on screen. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}