/* =============================================================================
   Model Catalog Editor — reusable editor UI (ME-4.4)
   Self-contained, CSP-safe. The editor internals use the system font stack; the
   standalone landing wears the Krista Design System 2.0 look with Nunito/Roboto
   VENDORED locally as woff2 (assets/fonts/) — same-origin, no web-font CDN, so the
   bundle stays offline-safe and the zero-console-error test gate stays green.
   Carries forward the Playground catalog surface's visual language (tokens, badges,
   cards, wizard, probe rows, icon preview) while severing its shared-DOM IDs.
   ============================================================================= */

/* ---- Vendored fonts for the Krista-aligned standalone landing (Phase B2) ----
   Latin subset woff2 (~16–22 KB each) served by StaticFileHandler as font/woff2.
   `swap` so text paints immediately in the fallback and upgrades when the font
   arrives — the editor internals never reference these families, so this is
   scoped entirely to the .landing-* / .kr-* surfaces below. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/roboto-700.woff2') format('woff2'); }

/* ---- KLAG-aligned design tokens ---- */
:root {
    --bg: #f6f8fa;
    --surface: #ffffff;
    --surface-2: #f2f5f8;
    --surface-3: #edf1f4;
    --text: #17191d;
    --text-2: #59616b;
    --text-3: #8b96a1;
    --border: #dfe3e7;
    --border-strong: #cdd4db;
    --accent: #0673c9;
    --accent-hover: #045b9f;
    --accent-weak: #edf5fc;
    --accent-ring: rgba(6, 115, 201, 0.25);
    --success: #176c38;
    --success-weak: #e6f7eb;
    --danger: #9b321c;
    --danger-weak: #ffebe5;
    --amber: #765300;
    --amber-weak: #fff2c8;
    --neutral-weak: #f0f2f4;
    --shadow: 0 1px 2px rgba(23, 25, 29, 0.06), 0 5px 14px rgba(23, 25, 29, 0.05);
    --shadow-lg: 0 24px 70px rgba(23, 25, 29, 0.22);
    --radius: 11px;
    --radius-sm: 7px;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;
    --header-h: 84px;

    /* ---- Krista Design System 2.0 tokens (values verbatim from klag/ui/src/styles.css) ----
       Additive: new names that the editor internals never reference, so they change nothing above.
       Consumed only by the standalone landing/challenge surfaces (.landing-* / .kr-* / .admin-*). */
    --kr-color-primary: #0169be;
    --kr-color-primary-light: #eaf2fa;
    --kr-color-primary-dark: #015ca7;
    --kr-color-border: #e4e4e4;
    --kr-text-color-darker: #0f0f0f;
    --kr-text-color-primary: #212121;
    --kr-text-color-secondary: #545c64;
    --kr-text-color-light: #a3adb5;
    --kr-surface-bg-primary: #f5f5f5;
    --kr-surface-bg-white: #ffffff;
    --kr-color-error: #dc3d41;
    --kr-color-error-light: #fdf2f2;
    --kr-border-radius-sm: 4px;
    --kr-border-radius-md: 8px;
    --kr-border-radius-lg: 12px;
    --kr-border-radius-xl: 16px;
    --kr-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --kr-elevation-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --kr-ring: 0 0 0 3px rgba(1, 105, 190, 0.22);
    --kr-font-family-sans: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --kr-font-family-heading: 'Nunito', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.app-root { min-height: 100vh; display: flex; flex-direction: column; }

/* min-height:0 on nested flex so inner scroll areas work (project CSS guideline). */
.editor-shell { display: flex; flex-direction: column; min-height: 100vh; }
.editor-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 26px clamp(18px, 3vw, 44px) 44px; }
.zone { flex: 1 1 auto; min-height: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 .6em; }
a { color: var(--accent); }
code, pre, textarea.code { font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
.btn {
    font: inherit;
    font-weight: 550;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    /* A button's height must NOT depend on whether it happens to carry an icon. With
       `line-height: 1` a text-only button is 9+~15+9+2 = 34px while an icon button is
       9+16+9+2 = 36px, so `Validate` sat 2px shorter than its icon-bearing neighbours. The floor
       is the icon-button height, which makes every button in a row agree by construction. */
    min-height: 36px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-probe {
    color: var(--accent); border-color: #a9d3ef; background: var(--accent-weak);
}
.btn-probe:hover { color: var(--accent-hover); border-color: var(--accent); background: #e2f1fb; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-weak); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-3); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-link { border: none; background: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.btn-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 4px; }

.icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
/* A TEXT glyph used where a sibling button uses an `.icon` must occupy the same box, or the
   character's own line metrics set the button's height and one cell of a segmented control ends up
   taller than its neighbours. Same 16px box, its line-height neutralised. */
.btn-glyph {
    width: 16px; height: 16px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; vertical-align: -3px; font-size: 15px;
}

/* ---------- Inputs ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
input[type=text], input[type=url], input[type=number], input[type=date],
input[type=password], select, textarea {
    font: inherit;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease;
}
input[readonly] {
    color: var(--text-2); background: var(--surface-2); cursor: default;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-weak);
}
textarea.code { min-height: 220px; resize: vertical; font-size: 12.5px; line-height: 1.55; white-space: pre; tab-size: 2; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }

/* ---------- Badges & chips ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 650; line-height: 1;
    padding: 4px 9px; border-radius: 999px;
    background: var(--neutral-weak); color: var(--text-2);
    border: 1px solid transparent; white-space: nowrap;
}
.badge .glyph { font-size: 12px; }
.badge-valid { background: var(--success-weak); color: var(--success); }
.badge-invalid { background: var(--danger-weak); color: var(--danger); }
.badge-warn { background: var(--amber-weak); color: var(--amber); }
.badge-neutral { background: var(--neutral-weak); color: var(--text-2); }
.badge-editable { background: var(--accent-weak); color: var(--accent); }
.badge-readonly { background: var(--amber-weak); color: var(--amber); }
.badge-source { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }

.kv-chip { display: inline-flex; flex-direction: column; gap: 3px; }
.kv-chip .kv-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Session Header (Zone A) ---------- */
.session-header {
    position: sticky; top: 0; z-index: 30;
    display: grid; grid-template-columns: minmax(270px, auto) minmax(360px, 1fr) auto;
    align-items: center; gap: 24px;
    padding: 12px clamp(18px, 3vw, 44px); min-height: var(--header-h);
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.header-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
.session-header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.session-header .brand-mark {
    width: 38px; height: 38px; object-fit: contain; flex: none;
    border: 1px solid var(--border); border-radius: 9px; background: #fff;
}
.session-header .brand-kicker,
.fact-label,
.eyebrow {
    display: block; color: var(--text-2); font-size: 10.5px; font-weight: 750;
    letter-spacing: .055em; text-transform: uppercase;
}
.session-header .brand strong { display: block; font-size: 15px; line-height: 1.25; }
.workspace-context {
    min-width: 0; padding-left: 20px; border-left: 1px solid var(--border);
}
.workspace-context strong {
    display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis;
    white-space: nowrap; max-width: 240px;
}
.header-status { display: flex; align-items: center; justify-content: center; gap: 22px; min-width: 0; }
.session-facts { display: flex; align-items: center; gap: 18px; min-width: 0; }
.session-fact strong { display: block; font-size: 12.5px; white-space: nowrap; }
.read-only-text { color: var(--amber); }
.session-header .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.validity-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.validity-chip:hover { background: var(--surface-2); }
.validity-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.validity-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--success); }
.validity-chip.invalid .validity-dot { background: var(--danger); }
.validity-title, .validity-detail { display: block; white-space: nowrap; }
.validity-title { font-size: 12.5px; font-weight: 700; }
.validity-detail { color: var(--text-3); font-size: 10.5px; }
.probe-marker {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--accent);
    background: var(--accent-weak); padding: 5px 9px; border: 1px solid #cfe5f5;
    border-radius: var(--radius-sm); cursor: pointer;
}
.probe-marker.complete { color: var(--success); border-color: #b5e2c2; background: var(--success-weak); }
.probe-marker.failed { color: var(--danger); border-color: #efc4ba; background: var(--danger-weak); }
.probe-marker.stopped { color: var(--amber); border-color: #ead18a; background: var(--amber-weak); }
.probe-marker:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- Cards / panels ---------- */
.panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 16px; }
.panel-body { padding: 18px; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }

.overview-wrap { max-width: 1080px; margin: 0 auto; width: 100%; }
.overview-lead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.overview-lead h1 { font-size: 22px; }
.catalog-meta { font-size: 12.5px; color: var(--text-3); }

.kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.kind-card {
    text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
    transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
    font: inherit; color: inherit;
}
.kind-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.kind-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.kind-card .kind-name { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); }
.kind-card .kind-count { font-size: 30px; font-weight: 700; line-height: 1; }
.kind-card .kind-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.kind-card .open-arrow { color: var(--text-3); font-size: 13px; }

.overview-actions { margin-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.empty-note {
    margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--border-strong);
    border-radius: var(--radius); color: var(--text-2); background: var(--surface-2);
}

/* ---------- Catalog container (G1) ---------- */
.catalog-shell { width: min(1420px, 100%); margin: 0 auto; }
.entity-nav {
    display: inline-grid; grid-template-columns: repeat(4, minmax(150px, 1fr));
    max-width: 900px; gap: 4px; padding: 5px; margin-bottom: 22px;
    border: 1px solid var(--border); border-radius: 13px; background: #eef0f2;
}
.entity-tab {
    min-height: 62px; padding: 9px 16px; border: 1px solid transparent;
    border-radius: 9px; background: transparent; color: var(--text-2);
    text-align: left; font: inherit; cursor: pointer;
}
.entity-tab:hover { color: var(--text); background: rgba(255, 255, 255, .58); }
.entity-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.entity-tab.active {
    color: var(--accent); background: var(--surface); border-color: #e3e6e8;
    box-shadow: var(--shadow);
}
.entity-tab-label { display: block; font-size: 14px; font-weight: 700; }
.entity-tab-count { display: block; margin-top: 3px; color: var(--text-3); font-size: 10.5px; }
.entity-tab.active .entity-tab-count { color: #467592; }
.catalog-workspace {
    min-height: 360px; overflow: hidden; background: var(--surface);
    border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow);
}
.catalog-workspace:focus { outline: none; }
.catalog-workspace:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow); }
.catalog-heading {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    padding: 26px 28px 24px; border-bottom: 1px solid var(--border);
}
.catalog-heading h1 {
    margin: 3px 0 5px; color: var(--text); font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2; letter-spacing: -.025em;
}
.catalog-description { max-width: 690px; margin: 0; color: var(--text-2); font-size: 14px; }
/* Wraps at EVERY width, not only under the 650px breakpoint. Every control here is `white-space:
   nowrap`, so without a wrap the row simply cannot shrink: in the shipped build it already pushed
   past the workspace's right edge below ~1264px, and adding a seventh control moved that onset up
   past 1500px. Wrapping trades a second row of buttons for controls that stay reachable — and the
   heading copy beside them stops being crushed to its longest word. */
.catalog-heading-actions {
    display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
    gap: 8px; padding-top: 8px;
}
/* Segmented group for the three catalog-file actions. Purely visual grouping: each child keeps its
   own tab stop, accessible name and single click — nothing moves behind a menu. Adjacent siblings
   share one border and only the outer ends stay rounded, so the trio reads as one object in a row
   that would otherwise be seven equal-weight buttons. Written off :first-child/:last-child so the
   two-control shape (view-only, no Import…) is correct without a second rule. */
/* Segments are EQUAL WIDTH. A segmented control whose cells differ by a few pixels because their
   labels differ in length reads as sloppy rather than as one control, so every segment takes the
   width of the widest: `flex: 1 1 0` divides the group evenly, and the group sizes to content so
   the widest label still sets that shared width. */
/* Segments are EQUAL WIDTH and EQUAL HEIGHT. Grid, not flex: in a shrink-wrapped inline-flex the
   container's width is already the sum of the items' content, so `flex: 1 1 0` has nothing left to
   equalise and the cells keep their label widths (measured: 17px apart). `grid-auto-columns: 1fr`
   sizes every column to the widest, which is the segmented-control idiom. `align-items: stretch`
   makes every cell the height of the tallest. */
.header-action-group {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch;
}
.header-action-group > .btn { border-radius: 0; justify-content: center; }
.header-action-group > .btn + .btn { margin-left: -1px; }
.header-action-group > .btn:first-child {
    border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm);
}
.header-action-group > .btn:last-child {
    border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
}
/* The negative margin puts the shared border underneath its neighbour, so hover and the focus ring
   have to be lifted to stay whole. */
.header-action-group > .btn:hover, .header-action-group > .btn:focus-visible { z-index: 1; }
.header-action-group > .btn:focus-visible { position: relative; }
.catalog-state {
    min-height: 245px; display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 30px; color: var(--text-2); text-align: left;
}
.catalog-state strong { display: block; color: var(--text); font-size: 15px; }
.catalog-state p { margin: 3px 0 0; }
.catalog-state.error { justify-content: space-between; max-width: 700px; margin: 0 auto; color: var(--danger); }
.catalog-state.error strong { color: var(--danger); }
.catalog-state.empty { justify-content: space-between; max-width: 780px; margin: 0 auto; }
.catalog-state-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.compatibility-panel { padding: 0; }
.compatibility-head {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 17px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.compatibility-head h2 { font-size: 14px; }
.compatibility-head p { margin: 2px 0 0; color: var(--text-2); font-size: 12px; }
.access-note {
    flex: none; color: var(--text-2); font-size: 11px; font-weight: 750;
    letter-spacing: .04em; text-transform: uppercase;
}
.entity-summary-list { display: flex; flex-direction: column; }
.entity-summary-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center; gap: 16px; min-height: 76px; padding: 14px 24px;
    border-bottom: 1px solid var(--border);
}
.entity-summary-row:last-child { border-bottom: none; }
.entity-summary-icon {
    width: 34px; height: 34px; display: grid; place-items: center;
    color: var(--accent); background: var(--accent-weak); border: 1px solid #d5e8f7;
    border-radius: 8px; font-size: 12px; font-weight: 800;
}
.entity-summary-copy strong { display: block; }
.entity-summary-copy span { display: block; margin-top: 2px; color: var(--text-2); font-size: 12px; }
.entity-summary-count {
    min-width: 42px; color: var(--text); font-size: 24px; font-weight: 700; text-align: right;
}
.compatibility-note {
    margin: 0; padding: 13px 24px; color: var(--text-2); background: var(--surface-2);
    border-top: 1px solid var(--border); font-size: 12px;
}

/* ---------- Providers & Models read workspace (Task 6) ---------- */
.providers-models-body { min-width: 0; padding: 22px; }
.workspace-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface-2); color: var(--text-2);
}
.workspace-notice strong { display: block; color: var(--text); }
.workspace-notice p { margin: 2px 0 0; font-size: 12.5px; }
.workspace-notice.info { color: #375668; border-color: #b9daec; background: #eef8fd; }
.workspace-notice.invalid { color: var(--danger); border-color: #efc4ba; background: var(--danger-weak); }
.workspace-notice.invalid strong { color: var(--danger); }
.workspace-notice.warning { color: var(--amber); border-color: #ead18a; background: var(--amber-weak); }
.workspace-notice.warning strong { color: var(--amber); }

.providers-models-loading { min-height: 330px; padding: 28px; }
.providers-models-loading-copy {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 24px; color: var(--text-2);
}
.providers-models-loading-copy strong { display: block; color: var(--text); }
.providers-models-loading-copy p { margin: 2px 0 0; }
.provider-skeleton {
    max-width: 1080px; margin: 0 auto; overflow: hidden;
    border: 1px solid var(--border); border-radius: 10px;
}
.provider-skeleton-row {
    display: grid; grid-template-columns: 46px minmax(180px, 1fr) 140px 110px;
    align-items: center; gap: 16px; min-height: 72px; padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.provider-skeleton-row:last-child { border-bottom: 0; }
.skeleton-icon { width: 42px; height: 42px; }
.skeleton-copy { width: min(280px, 85%); height: 16px; }
.skeleton-chip { width: 90px; height: 24px; }

.providers-models-filters {
    display: grid;
    grid-template-columns: minmax(230px, 1.8fr) repeat(5, minmax(125px, 1fr)) auto;
    align-items: end; gap: 10px; margin-bottom: 14px; padding: 14px;
    border: 1px solid var(--border); border-radius: 10px; background: #fafbfc;
}
.providers-models-filters label {
    font-size: 10.5px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase;
}
.providers-models-filters input[type="search"],
.providers-models-filters select {
    width: 100%; min-height: 40px; padding: 8px 10px; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
    font: inherit;
}
.providers-models-filters input[type="search"]:focus,
.providers-models-filters select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.providers-models-filters select:disabled { color: var(--text-3); background: var(--surface-2); }
.filter-clear { min-height: 40px; justify-content: center; }
.providers-models-result-count {
    margin: 0 2px 12px; color: var(--text-2); font-size: 12.5px; font-weight: 650;
    text-align: right;
}
.filtered-empty, .nested-empty {
    padding: 36px 20px; color: var(--text-2); text-align: center;
}
.filtered-empty strong, .nested-empty strong { display: block; color: var(--text); }
.filtered-empty p, .nested-empty p { margin: 3px 0 14px; }

.relational-table-wrap, .model-table-wrap {
    width: 100%; min-width: 0; overflow-x: auto;
    border: 1px solid var(--border); border-radius: 10px;
}
/* The query container for the provider table's degradation tiers.
   A plain block, so its own width comes from its parent and never from its contents — which is
   what makes `container-type: inline-size` safe here and, crucially, leaves the card inside free
   to size to the table. It measures the ZONE the editor was given: in an embedded host that is the
   iframe's width, so the table degrades on the space it actually has rather than on the width of a
   browser window it may be nowhere near. Nothing inside it is position:fixed — the dialog backdrop
   and the toast region are document-level — so the containment this establishes captures nothing. */
.provider-table-frame { container-type: inline-size; container-name: provider-table; }
/* The card is exactly as wide as the table needs, and no wider. With no surplus there is nothing to
   distribute into a column that has no use for it, which is what makes the trailing dead space in
   PROVIDER ACTIONS structurally impossible instead of merely tuned away. `max-width: 100%` hands
   the overflow back to the scroll container when the table genuinely cannot fit. */
.provider-table-frame > .relational-table-wrap { width: fit-content; max-width: 100%; }
.relational-table {
    width: 100%; min-width: 1210px; border-spacing: 0; border-collapse: separate;
    color: var(--text);
}
/* ---------- Provider table sizing — intrinsic, not a pixel budget ----------
   Every column here used to carry a hardcoded pixel width under `table-layout: fixed`. That
   produces exactly ONE good layout: fixed layout ignores what a cell actually contains, so a
   column is either too narrow for its content (dialect chips wrapping mid-token) or too wide for
   it (dead space trailing the action buttons), and which one you get depends on the width you
   happen to be at. Nothing about it adapts.

   This is content-driven instead, in three parts:

   1. `table-layout: auto` lets the browser measure each column's real content, so ROUTING is
      exactly as wide as the widest dialect id and never one pixel less — the chips cannot wrap.

   2. `width: 1%` on columns 2-8 is the shrink-to-fit idiom: under auto layout it resolves to the
      column's own content width. Applied to PROVIDER ACTIONS it is what removes the trailing dead
      space for good — the column can no longer be handed surplus it has no use for.

   3. PROVIDER is the single elastic column. Its `width` is a PREFERENCE, not a floor, and
      `max-width: 0` on the cell (below) lets it yield below that preference before anything else
      gives — effectively `minmax(min-content, 20rem)` for a construct that has no minmax().

   The card wrapping all this is `width: fit-content` (below), so the table is never wider than it
   needs to be and there is no surplus to distribute anywhere. That is what makes the dead space
   structurally impossible rather than merely tuned away.

   Sizing is therefore relative to the CONTAINER at every step — the zone the editor is given,
   which in an embedded host is the iframe. No viewport width appears anywhere in it. */
.provider-table { width: auto; min-width: 0; table-layout: auto; }
.provider-table > thead > tr > th:nth-child(n+2) { width: 1%; }
.provider-table > thead > tr > th:nth-child(1) { width: 20rem; }
/* `max-width: 0` zeroes this cell's max-content contribution, which is the auto-layout idiom for
   "this column may be truncated". Without it the identity's nowrap text is a hard floor and the
   whole table is stuck at that width; with it, PROVIDER absorbs slack when there is any and
   ellipsizes first when there is none. Scoped to the provider row so the expanded models row
   (a colspan of the whole table) is untouched.

   `min-width` is the other half, and it matters as much: PROVIDER is the only elastic column, so
   without a floor it yields ALL of the shortfall and collapses to "Anthr…" while every other
   column sits at full width. Identity is the column a reader navigates by — once it is down to
   11rem the honest move is to stop taking from it and let the table scroll, which costs a
   scrollbar but keeps the sticky actions column and every name legible. */
.provider-table > tbody > tr.provider-row > td:first-child { max-width: 0; min-width: 11rem; }
.relational-table th {
    padding: 11px 13px; color: var(--text-2); background: #f0f4f8;
    border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
/* Header strings must never be what sets a column's floor — "ORIGIN & HOSTING" is wider than any
   value that column ever carries. Wrapping costs one taller header row, once, at the top. */
.provider-table > thead > tr > th { white-space: normal; }
.relational-table td {
    padding: 13px; vertical-align: middle; border-bottom: 1px solid #e8ebee;
}
.relational-table > thead > tr > th:last-child,
.relational-table > tbody > tr:not(.provider-models-row) > td:last-child {
    position: sticky; right: 0; min-width: 150px;
    border-left: 1px solid var(--border);
   
}
.relational-table > thead > tr > th:last-child {
    z-index: 3; background: #f0f4f8;
}
.relational-table > tbody > tr:not(.provider-models-row) > td:last-child {
    z-index: 2; background: var(--surface);
}
/* The sticky actions column already has a left border marking it off, so it does not need a full
   13px gutter as well. 3px a side is 6px more room for the buttons. */
.provider-table > thead > tr > th:last-child,
.provider-table > tbody > tr:not(.provider-models-row) > td:last-child { padding-inline: 10px; }
.provider-section:last-child > .provider-row:last-child td,
.provider-section:last-child > .provider-models-row:last-child td { border-bottom: 0; }
.provider-section.expanded > .provider-row td { background: var(--accent-weak); }
.provider-section.expanded > .provider-row > td:last-child { background: var(--accent-weak); }
.provider-row:hover td { background: #fbfcfd; }
.provider-row:hover > td:last-child,
.model-table tbody tr:hover > td:last-child { background: #fbfcfd; }
.provider-section.expanded > .provider-row:hover td { background: #e8f3fb; }
.provider-section.expanded > .provider-row:hover > td:last-child { background: #e8f3fb; }

/* `min-width: 0`, not a pixel floor: this flex row is what stopped the PROVIDER column shrinking.
   A 215px floor plus 26px of cell padding pinned the column at ~241px no matter how much room the
   rest of the row needed. The column is elastic now, so the identity follows it down and the two
   copy lines ellipsize instead of forcing width. */
.provider-identity, .model-identity {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.catalog-icon-frame {
    display: grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}
.model-identity .catalog-icon-frame,
.provider-identity .catalog-icon-frame { width: 36px; height: 36px; border-radius: 8px; }
.catalog-icon { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.icon-fallback {
    color: var(--accent); background: var(--accent-weak); font-size: 11px; font-weight: 800;
}
.identity-copy { min-width: 0; }
/* Both identity lines truncate. The display name used to wrap, which let one long provider name
   set the whole column's width; the record id was capped at a fixed 260px, which is wider than the
   column now is. `max-width: 100%` makes both follow the column instead of driving it, and the
   full text stays reachable in the row's Edit dialog. */
.primary-line {
    display: block; max-width: 100%; overflow: hidden; font-weight: 700;
    text-overflow: ellipsis; white-space: nowrap;
}
.record-id {
    display: block; max-width: 100%; margin-top: 2px; overflow: hidden;
    color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px;
    text-overflow: ellipsis; white-space: nowrap;
}
.secondary-line, .muted-value {
    display: block; margin-top: 4px; color: var(--text-3); font-size: 11.5px;
}
.chip-stack { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; }
.catalog-token, .lifecycle-chip, .cost-level, .capability-chip {
    display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px;
    border: 1px solid transparent; border-radius: 7px; font-size: 11.5px;
    font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.catalog-token.neutral { color: #53616f; border-color: #d4dce4; background: #edf2f6; }
.catalog-token.hosting { color: #3d5e70; border-color: #b9daec; background: #eaf6fc; }
.catalog-token.dialect {
    color: #4437b5; border-color: #d1ccff; background: #efedff;
    font-family: var(--font-mono); font-size: 10.5px;
}
/* A dialect id is a detailed label and reads as one token, so it stays on one line: ROUTING is
   shrink-to-fit, which means the column is BY CONSTRUCTION as wide as the longest chip in it. The
   one exception is the narrowest degradation tier below, where wrapping beats scrolling. */
.model-count { font-size: 17px; }
.lifecycle-active { color: var(--success); border-color: #b5e2c2; background: var(--success-weak); }
.lifecycle-disabled, .lifecycle-removed, .lifecycle-unknown {
    color: #606873; border-color: #d4d9de; background: var(--neutral-weak);
}
.lifecycle-deprecated { color: var(--amber); border-color: #ead18a; background: var(--amber-weak); }
.lifecycle-probe-failed { color: var(--danger); border-color: #efc4ba; background: var(--danger-weak); }
.cost-lowest, .cost-low { color: var(--success); border-color: #b5e2c2; background: var(--success-weak); }
.cost-moderate { color: var(--amber); border-color: #efcc6e; background: var(--amber-weak); }
.cost-high, .cost-very_high, .cost-extreme {
    color: var(--danger); border-color: #ffb49e; background: var(--danger-weak);
}
.cost-unknown { color: var(--text-2); border-color: var(--border); background: var(--neutral-weak); }
.capability-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 180px; }
.capability-chip { color: var(--success); background: var(--success-weak); font-weight: 650; }
.capability-chip.support-unsupported {
    color: var(--text-2); border-color: var(--border); background: var(--neutral-weak);
}
.capability-chip.support-partial, .capability-chip.support-conditional,
.capability-chip.support-unknown {
    color: var(--amber); border-color: #ead18a; background: var(--amber-weak);
}
.capability-more { color: var(--text-2); font-size: 11px; white-space: nowrap; }

.provider-expand { width: 100%; min-width: 0; padding-inline: 8px; justify-content: flex-start; }
.provider-expand .expand-chevron { transition: transform .14s ease; }
.provider-expand .expand-chevron.expanded { transform: rotate(90deg); }
.provider-lifecycle { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; }
.lifecycle-quick-action { min-width: 70px; justify-content: center; }
.lifecycle-explicit-note {
    color: var(--text-3); font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
/* Row actions run tighter than a free-standing .btn-sm: 8px of side padding and a 6px icon gap buy
   ~22px across the three provider controls, which is width the table gets to spend elsewhere.
   Vertical padding is untouched, so the hit target keeps its height.

   Right-anchored, not left-packed. The column is shrink-to-fit so it rarely has anything spare,
   but when a wide header or a wider sibling row does hand it some, the buttons stay against the
   sticky column's right edge instead of leaving a gap trailing after Delete. */
.provider-row-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.provider-row-actions .btn { gap: 6px; padding-inline: 8px; }
.provider-table > thead > tr > th:last-child { text-align: right; }
.provider-models-row > td {
    width: 100%; max-width: 0; padding: 0; background: #f6f9fc;
}
.provider-models-panel { min-width: 0; padding: 16px 18px 20px; }
.provider-models-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 11px;
}
.provider-models-head h2 { font-size: 14px; }
.provider-models-head p { margin: 2px 0 0; color: var(--text-2); font-size: 11.5px; }
.provider-models-head .btn { flex: none; }
.model-table-wrap { border-radius: 8px; background: var(--surface); }
.model-table { min-width: 1340px; }
.model-table tr:last-child td { border-bottom: 0; }
.model-table tbody tr:hover td { background: #fbfcfd; }
.model-row-actions { min-width: 230px; }

/* ---------- Deployments workspace ---------- */
.deployment-invalid-notice { margin: 18px 22px 0; }
.deployment-toolbar {
    display: flex; align-items: end; justify-content: space-between; gap: 20px;
    padding: 18px 22px 14px;
}
.deployment-search { width: min(620px, 100%); margin: 0; }
.deployment-search > span {
    display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 750;
    letter-spacing: .045em; text-transform: uppercase;
}
.deployment-search input {
    width: 100%; min-height: 40px; padding: 8px 10px; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
    font: inherit;
}
.deployment-search input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.deployment-result-count {
    flex: none; padding-bottom: 10px; color: var(--text-2); font-size: 12px;
}
.deployment-table-wrap {
    width: calc(100% - 44px); margin: 0 22px 22px; overflow-x: auto;
    border: 1px solid var(--border); border-radius: 10px;
}
.deployment-table {
    width: 100%; min-width: 1360px; border-spacing: 0; border-collapse: separate;
    color: var(--text);
}
.deployment-table th {
    padding: 11px 13px; color: var(--text-2); background: #f0f4f8;
    border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.deployment-table td {
    max-width: 245px; padding: 13px; vertical-align: top; border-bottom: 1px solid #e8ebee;
}
.deployment-table tbody tr:last-child td { border-bottom: 0; }
.deployment-table tbody tr:hover td { background: #fbfcfd; }
.deployment-table th:last-child,
.deployment-table td:last-child {
    position: sticky; right: 0; min-width: 170px; border-left: 1px solid var(--border);
    background: var(--surface);
}
.deployment-table th:last-child { z-index: 3; background: #f0f4f8; }
.deployment-table td:last-child { z-index: 2; }
.deployment-table tbody tr:hover td:last-child { background: #fbfcfd; }
.deployment-identity { display: flex; align-items: flex-start; gap: 10px; min-width: 190px; }
.deployment-glyph {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    color: var(--accent); border: 1px solid #d5e8f7; border-radius: 8px;
    background: var(--accent-weak); font-size: 11px; font-weight: 800;
}
.deployment-identity strong,
.deployment-identity span,
.deployment-owner strong,
.deployment-owner code,
.deployment-owner span,
.deployment-cell-value,
.deployment-cell-detail { display: block; }
.deployment-identity strong { overflow-wrap: anywhere; font-size: 13px; }
.deployment-identity span { margin-top: 3px; color: var(--text-3); font-size: 10.5px; }
.deployment-owner strong { font-size: 12.5px; }
.deployment-owner code { margin-top: 3px; color: var(--text-2); font-size: 10.5px; }
.deployment-membership {
    width: fit-content; margin-top: 6px; padding: 2px 6px; border-radius: 5px;
    color: var(--success); background: var(--success-weak); font-size: 9.5px;
    font-weight: 750; white-space: nowrap;
}
.deployment-membership.invalid { color: var(--danger); background: var(--danger-weak); }
.deployment-source {
    display: inline-flex; margin-bottom: 6px; padding: 2px 6px;
    border: 1px solid var(--border); border-radius: 999px; color: var(--text-2);
    background: var(--neutral-weak); font-size: 9.5px; font-weight: 750;
    letter-spacing: .03em; text-transform: uppercase;
}
.deployment-source.override {
    color: var(--accent); border-color: #b9daec; background: var(--accent-weak);
}
.deployment-cell-value {
    max-width: 235px; overflow: hidden; font-size: 12px; text-overflow: ellipsis;
    white-space: nowrap;
}
.deployment-cell-detail {
    max-width: 235px; margin-top: 3px; overflow: hidden; color: var(--text-3);
    font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap;
}
.deployment-model-count { font-size: 22px; font-weight: 750; line-height: 1; }
.deployment-row-actions { display: flex; align-items: center; gap: 6px; }
.deployment-filter-empty { min-height: 300px; border-top: 1px solid var(--border); }
.deployment-loading { min-height: 370px; padding: 28px; }
.deployment-skeleton {
    overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
}
.deployment-skeleton-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 150px;
    align-items: center; gap: 24px; min-height: 74px; padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.deployment-skeleton-row:last-child { border-bottom: 0; }
.deployment-skeleton-name { width: min(260px, 90%); height: 17px; }
.deployment-skeleton-value { width: min(190px, 85%); height: 14px; }
.deployment-skeleton-actions { width: 130px; height: 32px; justify-self: end; }

/* ---------- Selection profiles workspace ---------- */
.profile-default-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 16px; margin: 18px 22px 0; padding: 17px 18px;
    border: 1px solid #b9daec; border-radius: 10px; background: #f2f9fd;
}
.profile-default-card.explicit {
    border-color: #b5e2c2; background: var(--success-weak);
}
.profile-default-card.compatibility {
    border-color: #ead18a; background: var(--amber-weak);
}
.profile-default-icon {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
    color: var(--accent); background: var(--surface); box-shadow: var(--shadow);
    font-size: 15px; font-weight: 850;
}
.profile-default-card.explicit .profile-default-icon { color: var(--success); }
.profile-default-card.compatibility .profile-default-icon { color: var(--amber); }
.profile-default-card h2 { overflow-wrap: anywhere; font-size: 17px; }
.profile-default-card p:last-child {
    margin: 3px 0 0; color: var(--text-2); font-size: 12px;
}
.profile-window-large {
    color: var(--text); font-size: 17px; font-weight: 750; white-space: nowrap;
}
.profile-zero-state { padding-bottom: 22px; }
.profile-zero-state .profile-default-card { margin-bottom: 18px; }
.profile-empty { margin: 0 22px; }
.profile-toolbar {
    display: flex; align-items: end; justify-content: space-between; gap: 20px;
    padding: 18px 22px 14px;
}
.profile-search { width: min(620px, 100%); margin: 0; }
.profile-search > span {
    display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 750;
    letter-spacing: .045em; text-transform: uppercase;
}
.profile-search input {
    width: 100%; min-height: 40px; padding: 8px 10px; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
    font: inherit;
}
.profile-search input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.profile-result-count {
    flex: none; padding-bottom: 10px; color: var(--text-2); font-size: 12px;
}
.profile-table-wrap {
    width: calc(100% - 44px); margin: 0 22px 22px; overflow-x: auto;
    border: 1px solid var(--border); border-radius: 10px;
}
.profile-table {
    width: 100%; min-width: 940px; border-spacing: 0; border-collapse: separate;
    color: var(--text);
}
.profile-table th {
    padding: 11px 13px; color: var(--text-2); background: #f0f4f8;
    border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.profile-table td {
    padding: 13px; vertical-align: top; border-bottom: 1px solid #e8ebee;
}
.profile-table tbody tr:last-child td { border-bottom: 0; }
.profile-table tbody tr:hover td { background: #fbfcfd; }
.profile-table th:last-child,
.profile-table td:last-child {
    position: sticky; right: 0; min-width: 190px; border-left: 1px solid var(--border);
    background: var(--surface);
}
.profile-table th:last-child { z-index: 3; background: #f0f4f8; }
.profile-table td:last-child { z-index: 2; }
.profile-table tbody tr:hover td:last-child { background: #fbfcfd; }
.profile-identity { display: flex; align-items: flex-start; gap: 10px; min-width: 180px; }
.profile-glyph {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    color: var(--accent); border: 1px solid #d5e8f7; border-radius: 8px;
    background: var(--accent-weak); font-size: 12px; font-weight: 800;
}
.profile-glyph.default {
    color: var(--success); border-color: #b5e2c2; background: var(--success-weak);
}
.profile-identity strong,
.profile-identity span,
.profile-window-value,
.profile-cell-detail { display: block; }
.profile-identity strong { overflow-wrap: anywhere; font-size: 13px; }
.profile-identity span,
.profile-cell-detail { margin-top: 3px; color: var(--text-3); font-size: 10.5px; }
.profile-window-value { font-size: 13px; }
.profile-default-badge {
    display: inline-flex; padding: 3px 7px; border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-2); background: var(--neutral-weak);
    font-size: 10.5px; font-weight: 750; white-space: nowrap;
}
.profile-default-badge.active {
    color: var(--success); border-color: #b5e2c2; background: var(--success-weak);
}
.profile-make-default { display: flex; margin-top: 7px; }
.profile-row-actions { display: flex; align-items: center; gap: 6px; }
.profile-filter-empty { min-height: 270px; border-top: 1px solid var(--border); }
.profile-loading { min-height: 340px; padding: 28px; }
.profile-skeleton {
    margin-top: 22px; overflow: hidden; border: 1px solid var(--border);
    border-radius: 10px;
}
.profile-skeleton-row {
    display: grid; grid-template-columns: 1.2fr 1fr 150px;
    align-items: center; gap: 24px; min-height: 70px; padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.profile-skeleton-row:last-child { border-bottom: 0; }
.profile-skeleton-name { width: min(260px, 90%); height: 17px; }
.profile-skeleton-window { width: min(180px, 80%); height: 14px; }
.profile-skeleton-actions { width: 130px; height: 32px; justify-self: end; }

/* ---------- Evidence probe ledger ---------- */
.evidence-toolbar {
    display: flex; align-items: end; justify-content: space-between; gap: 20px;
    padding: 16px 22px; border-bottom: 1px solid var(--border); background: #fafbfc;
}
.evidence-search { width: min(520px, 100%); margin: 0; }
.evidence-search > span {
    display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 750;
    letter-spacing: .045em; text-transform: uppercase;
}
.evidence-search input {
    width: 100%; min-height: 40px; padding: 8px 10px; color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
    font: inherit;
}
.evidence-search input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.evidence-result-count { flex: none; padding-bottom: 10px; color: var(--text-2); font-size: 12px; }
.evidence-workspace {
    display: grid; grid-template-columns: minmax(330px, .78fr) minmax(460px, 1.22fr);
    min-height: 470px;
}
.evidence-list-panel { min-width: 0; border-right: 1px solid var(--border); }
.evidence-detail-panel { min-width: 0; padding: 22px 24px 26px; background: #fcfdfe; }
.evidence-panel-heading {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.evidence-detail-panel > .evidence-panel-heading { padding: 0 0 18px; }
.evidence-panel-heading h2 { margin: 2px 0 4px; font-size: 17px; }
.evidence-panel-heading p { margin: 0; color: var(--text-2); font-size: 12px; }
.evidence-list {
    max-height: 560px; padding: 0; margin: 0; overflow-y: auto; list-style: none;
}
.evidence-list li { margin: 0; border-bottom: 1px solid var(--border); }
.evidence-list li:last-child { border-bottom: 0; }
.evidence-list-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start; gap: 12px; width: 100%; padding: 14px 18px;
    color: var(--text); border: 0; background: var(--surface); font: inherit;
    text-align: left; cursor: pointer;
}
.evidence-list-row:hover { background: var(--surface-2); }
.evidence-list-row.active {
    background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent);
}
.evidence-list-row:focus-visible {
    position: relative; z-index: 1; outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring);
}
.evidence-list-copy { min-width: 0; }
.evidence-list-copy strong,
.evidence-list-copy span,
.evidence-list-copy code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-list-copy strong { font-size: 13px; }
.evidence-list-copy span { margin-top: 3px; color: var(--text-2); font-size: 12px; }
.evidence-list-copy code { margin-top: 5px; color: var(--text-3); font-size: 10.5px; }
.evidence-list-row time { color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.evidence-result {
    display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px;
    border: 1px solid var(--border); border-radius: 999px; color: var(--text-2);
    background: var(--neutral-weak); font-size: 10.5px; font-weight: 750; white-space: nowrap;
}
.evidence-result-accepted {
    color: var(--success); border-color: #b5e2c2; background: var(--success-weak);
}
.evidence-result-rejected {
    color: var(--danger); border-color: #efc4ba; background: var(--danger-weak);
}
.evidence-detail-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; margin: 18px 0; padding: 1px; border: 1px solid var(--border);
    border-radius: 9px; overflow: hidden; background: var(--border);
}
.evidence-fact { min-width: 0; padding: 12px 14px; background: var(--surface); }
.evidence-fact dt {
    color: var(--text-3); font-size: 10px; font-weight: 750;
    letter-spacing: .045em; text-transform: uppercase;
}
.evidence-fact dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 12.5px; }
.evidence-fact code { color: var(--text); font-size: 11.5px; }
.evidence-readonly-note {
    padding: 14px 16px; border: 1px solid #b9daec; border-radius: 9px;
    color: #375668; background: #eef8fd;
}
.evidence-readonly-note strong { display: block; }
.evidence-readonly-note p { margin: 3px 0 0; font-size: 12px; }
.evidence-detail-empty { display: grid; place-items: center; color: var(--text-2); }
.evidence-filter-empty { min-height: 340px; }

.record-health {
    display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px;
    border: 1px solid transparent; border-radius: 7px; font-size: 11.5px;
    font-weight: 700; white-space: nowrap;
}
.record-health.ok { color: var(--success); background: var(--success-weak); }
.record-health.error { color: var(--danger); border-color: #efc4ba; background: var(--danger-weak); }
.record-health.warning { color: var(--amber); border-color: #ead18a; background: var(--amber-weak); }
.row-issue-details summary { cursor: pointer; list-style-position: inside; }
.row-issue-details[open] summary { margin-bottom: 6px; }
.row-issue-popover { display: flex; align-items: stretch; flex-direction: column; gap: 5px; min-width: 170px; }
.row-issue-button {
    display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 6px 7px;
    color: var(--text-2); border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); font: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.row-issue-button:hover { border-color: var(--accent); }
.row-issue-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.row-issue-button.error { color: var(--danger); }
.row-issue-button.warning { color: var(--amber); }

.unmatched-models {
    margin-top: 18px; padding: 16px; border: 1px solid #efc4ba; border-radius: 10px;
    background: #fff9f7;
}
.unmatched-models-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    margin-bottom: 12px;
}
.unmatched-models-head h2 { margin: 2px 0 3px; font-size: 16px; color: var(--danger); }
.unmatched-models-head p { margin: 0; color: var(--text-2); font-size: 12px; }

/* ---------- Record browser (Zone C) ---------- */
.records-layout {
    display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 16px;
    min-height: 0; flex: 1 1 auto; align-items: start;
}
.records-col { min-width: 0; min-height: 0; }
.record-list { max-height: calc(100vh - var(--header-h) - 120px); overflow: auto; }
.record-list-item {
    width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border: none; border-bottom: 1px solid var(--border); background: transparent;
}
.record-list-item:hover { background: var(--surface-2); }
.record-list-item[aria-current="true"] { background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent); }
.record-list-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); }
.record-list-item .rid { font-weight: 600; word-break: break-all; }
.record-list-item .rsub { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.record-list-item .issue-dot { color: var(--danger); font-weight: 700; }
.list-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.list-search input { padding: 7px 10px; }

.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text-2); font-size: 13px; flex-wrap: wrap; }
.breadcrumb .btn-link { text-decoration: none; }

.editor-fields { display: flex; flex-direction: column; }
.disclosure { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.disclosure-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-weight: 650; color: var(--text); background: none; border: none; font: inherit; padding: 4px 0;
}
.disclosure-toggle .chev { transition: transform .15s ease; color: var(--text-3); }
.disclosure-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.raw-json-note { font-size: 12px; color: var(--text-3); margin: 6px 0 8px; }
.json-parse-error {
    margin-top: 8px; padding: 8px 11px; border-radius: var(--radius-sm);
    background: var(--danger-weak); color: var(--danger); font-size: 12.5px; font-weight: 600;
}
.record-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.record-actions .spacer { flex: 1 1 auto; }
.dirty-dot { color: var(--amber); font-size: 20px; line-height: 0; }

/* per-record validation rail */
.rail-issue {
    text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
    display: flex; gap: 9px; padding: 11px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 8px;
}
.rail-issue:hover { border-color: var(--accent); }
.rail-issue:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.rail-issue .sev { font-size: 15px; line-height: 1.2; flex: none; }
.rail-issue.error .sev { color: var(--danger); }
.rail-issue.warning .sev { color: var(--amber); }
.rail-issue .rail-body { min-width: 0; }
.rail-issue .rail-msg { font-weight: 600; }
.rail-issue .rail-loc { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 3px; word-break: break-all; }
.rail-empty { color: var(--text-3); font-size: 13px; padding: 8px 2px; }

/* icon affordance */
.icon-affordance { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 6px 0 2px; }
.icon-preview {
    width: 64px; height: 64px; flex: none; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); display: grid; place-items: center; overflow: hidden;
}
.icon-preview img { max-width: 100%; max-height: 100%; }
.icon-preview .placeholder { color: var(--text-3); font-size: 11px; text-align: center; padding: 4px; }
.icon-meta { min-width: 0; }
.icon-meta .icon-ref { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); word-break: break-all; }
.icon-buttons { display: flex; gap: 8px; margin-top: 8px; }

/* highlighted field after issue navigation */
@keyframes field-flash {
    0% { box-shadow: 0 0 0 3px var(--accent-ring); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
.field-highlight { animation: field-flash 1.6s ease-out; border-radius: var(--radius-sm); }
.field-highlight input, .field-highlight textarea, .field-highlight select { border-color: var(--accent); }

/* ---------- Validation panel (Zone E) ---------- */
.validation-wrap { max-width: 900px; margin: 0 auto; width: 100%; }
.issue-group-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.issue-group-title.errors { color: var(--danger); }
.issue-group-title.warnings { color: var(--amber); }
.issue-row {
    text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
    display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 9px;
}
.issue-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.issue-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.issue-row .sev { font-size: 17px; flex: none; line-height: 1.3; }
.issue-row.error .sev { color: var(--danger); }
.issue-row.warning .sev { color: var(--amber); }
.issue-row .issue-main { min-width: 0; flex: 1 1 auto; }
.issue-row .issue-code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.issue-row .issue-msg { font-weight: 600; margin: 2px 0; }
.issue-row .issue-loc { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); word-break: break-all; }
.issue-row .issue-go { align-self: center; color: var(--text-3); }
.validation-empty { text-align: center; padding: 48px 20px; color: var(--text-2); }
.validation-empty .big { font-size: 44px; color: var(--success); }

/* ---------- Guided wizard (Zone D) ---------- */
.wizard-wrap { max-width: 860px; margin: 0 auto; width: 100%; }
.stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.step-chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); font-weight: 650; font-size: 12.5px; }
.step-chip .num { width: 20px; height: 20px; border-radius: 999px; background: var(--border-strong); color: var(--surface); display: grid; place-items: center; font-size: 11px; }
.step-chip.active { background: var(--accent-weak); color: var(--accent); }
.step-chip.active .num { background: var(--accent); color: #fff; }
.step-chip.done { color: var(--success); }
.step-chip.done .num { background: var(--success); color: #fff; }
.step-sep { color: var(--text-3); }

.radio-line { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.radio-opt { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; cursor: pointer; }
.radio-opt input { width: auto; }
.depth-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 4px; }
.depth-card {
    text-align: left; cursor: pointer; font: inherit; color: inherit;
    border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.depth-card:hover { border-color: var(--accent); }
.depth-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.depth-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.depth-card .d-name { font-weight: 700; }
.depth-card .d-desc { font-size: 12px; color: var(--text-3); }

.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; margin-top: 6px; }
.cap-check { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; cursor: pointer; }
.cap-check input { width: auto; }

.cred-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--surface-2); }
.cred-opt { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cred-scoped-note { font-size: 11.5px; color: var(--amber); font-weight: 600; }

.readiness {
    margin: 16px 0; padding: 12px 15px; border-radius: var(--radius-sm);
    display: flex; align-items: center; gap: 10px; font-weight: 600;
    background: var(--success-weak); color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.readiness.blocked { background: var(--amber-weak); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.readiness .req-list { font-weight: 500; color: inherit; }
.wizard-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.wizard-actions .spacer { flex: 1 1 auto; }

/* probe monitor */
.monitor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.monitor-head .spinner { color: var(--accent); }
.monitor-title { font-weight: 700; }
.monitor-progress { font-size: 13px; color: var(--text-2); }
.monitor-head .spacer { flex: 1 1 auto; }
.probe-status-chip {
    display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px;
    border: 1px solid #cfe5f5; border-radius: 999px; color: var(--accent);
    background: var(--accent-weak); font-size: 11px; font-weight: 750;
}
.probe-status-chip.complete {
    color: var(--success); border-color: #b5e2c2; background: var(--success-weak);
}
.probe-status-chip.failed {
    color: var(--danger); border-color: #efc4ba; background: var(--danger-weak);
}
.probe-status-chip.stopped {
    color: var(--amber); border-color: #ead18a; background: var(--amber-weak);
}
.cap-rows { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 12px 0; }
.cap-row {
    display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.cap-row:last-child { border-bottom: none; }
.cap-row .cap-glyph { font-size: 16px; text-align: center; }
.cap-row .cap-name { font-weight: 600; }
.cap-row .cap-reason { font-size: 12px; color: var(--text-3); }
.cap-row .cap-outcome { display: flex; align-items: center; gap: 7px; justify-self: end; font-weight: 650; font-size: 12.5px; }
.cap-row.state-accepted .cap-glyph, .cap-row.state-accepted .cap-outcome { color: var(--success); }
.cap-row.state-rejected .cap-glyph, .cap-row.state-rejected .cap-outcome { color: var(--danger); }
.cap-row.state-unreachable .cap-glyph, .cap-row.state-unreachable .cap-outcome { color: var(--amber); }
.cap-row.state-fixture_invalid .cap-glyph, .cap-row.state-fixture_invalid .cap-outcome { color: var(--amber); }
.cap-row.state-inconclusive .cap-glyph, .cap-row.state-inconclusive .cap-outcome { color: var(--text-2); }
.cap-row.state-running .cap-glyph, .cap-row.state-running .cap-outcome { color: var(--accent); }
.cap-row.state-pending .cap-glyph, .cap-row.state-pending .cap-outcome { color: var(--text-3); }
.promotable-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; background: var(--accent-weak); color: var(--accent); }

.terminal-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 13px 15px; border-radius: var(--radius-sm); margin: 12px 0;
    border: 1px solid var(--border);
}
.terminal-banner.complete { background: var(--success-weak); color: var(--success); }
.terminal-banner.failed { background: var(--danger-weak); color: var(--danger); }
.terminal-banner.stopped { background: var(--amber-weak); color: var(--amber); }
.terminal-banner-copy strong,
.terminal-banner-copy span { display: block; }
.terminal-banner-copy strong { font-size: 13.5px; }
.terminal-banner-copy span { margin-top: 2px; font-size: 12px; font-weight: 500; }
.probe-outcome-tally { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.outcome-tally-item {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px;
    border: 1px solid currentColor; border-radius: 999px; background: rgba(255, 255, 255, .62);
    font-size: 10px; font-weight: 750; white-space: nowrap;
}
.outcome-tally-item.state-accepted { color: var(--success); }
.outcome-tally-item.state-rejected { color: var(--danger); }
.outcome-tally-item.state-unreachable,
.outcome-tally-item.state-fixture_invalid { color: var(--amber); }
.outcome-tally-item.state-inconclusive { color: var(--text-2); }
.outcome-tally-item.state-running { color: var(--accent); }
.outcome-tally-item.state-pending { color: var(--text-3); }
.summary-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 10px 0; }
.summary-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 8px; }
.summary-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dryrun-note { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--text-2); }
.applied-line { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--success); margin: 10px 0; }
.probe-apply-guard {
    display: flex; align-items: flex-start; flex-direction: column; gap: 2px;
    margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-2); background: var(--surface-2);
}
.probe-apply-guard strong { color: var(--text); font-size: 13px; }
.probe-apply-guard span { font-size: 12px; }
.probe-apply-guard.failed {
    color: var(--danger); border-color: #efc4ba; background: var(--danger-weak);
}
.probe-apply-guard.failed strong { color: var(--danger); }
.probe-apply-guard.stopped {
    color: var(--amber); border-color: #ead18a; background: var(--amber-weak);
}
.probe-apply-guard.stopped strong { color: var(--amber); }

/* ---------- Launcher ---------- */
.launcher-wrap { max-width: 720px; margin: 40px auto; width: 100%; padding: 0 20px; }
.launcher-hero { text-align: center; margin-bottom: 26px; }
.launcher-hero .mark {
    display: block; width: 54px; height: 54px; object-fit: contain;
    border: 1px solid var(--border); border-radius: 12px; margin: 0 auto 14px; background: #fff;
}
.launcher-hero h1 { font-size: 24px; }
.launcher-hero p { color: var(--text-2); margin-top: 6px; }
.yaml-source-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.yaml-source-tabs .btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.launcher-error { margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--danger-weak); color: var(--danger); font-weight: 600; }

/* ---------- Recovery (§3.10) ---------- */
.recovery-wrap { max-width: 640px; margin: 80px auto; width: 100%; padding: 0 20px; }
.recovery-card { text-align: center; padding: 32px; }
.recovery-card .warn-mark { font-size: 42px; color: var(--amber); }
.recovery-card h1 { font-size: 21px; margin: 12px 0; }
.recovery-card p { color: var(--text-2); }

/* ---------- Dialog ---------- */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 100; background: rgba(10, 16, 24, 0.5);
    display: grid; place-items: center; padding: 20px;
    animation: fade-in .12s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; padding: 22px;
}
.dialog h2 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.dialog .dialog-icon { font-size: 20px; }
.dialog.danger .dialog-icon { color: var(--danger); }
.dialog.warn .dialog-icon { color: var(--amber); }
.dialog p { color: var(--text-2); }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialog pre.yaml-out {
    max-height: 320px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px; font-size: 12px; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Lossless record dialog (Task 7) ---------- */
.record-dialog-backdrop {
    padding: 16px;
    background: rgba(10, 16, 24, .62);
}
.record-dialog {
    display: flex; flex-direction: column; min-height: 0;
    width: min(1040px, 100%); max-height: calc(100vh - 32px);
    overflow: hidden; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg);
}
.record-dialog-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    padding: 21px 24px 17px; border-bottom: 1px solid var(--border);
}
.record-dialog-header h2 { margin: 2px 0 4px; font-size: 21px; }
.record-dialog-header p { max-width: 720px; margin: 0; color: var(--text-2); }
.record-dialog-close { flex: none; min-width: 38px; justify-content: center; padding: 9px; }
.record-editor-tabs {
    display: flex; align-items: center; gap: 4px; padding: 0 24px;
    border-bottom: 1px solid var(--border); background: #fafbfc;
}
.record-editor-tab {
    position: relative; padding: 13px 12px 11px; color: var(--text-2);
    border: 0; background: transparent; font: inherit; font-weight: 650; cursor: pointer;
}
.record-editor-tab::after {
    position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px;
    content: ''; background: transparent;
}
.record-editor-tab:hover { color: var(--text); }
.record-editor-tab.active { color: var(--accent); }
.record-editor-tab.active::after { background: var(--accent); }
.record-editor-tab:focus-visible {
    outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--accent-ring);
}
.record-dialog-scroll {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
    padding: 22px 24px 28px;
}
.record-dialog-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 14px 24px; border-top: 1px solid var(--border); background: #fafbfc;
}
.record-dialog-footer-copy { min-width: 0; color: var(--text-2); font-size: 12px; }
.record-dialog-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.invalid-save-copy { color: var(--danger); font-weight: 650; }
.record-sections { display: flex; flex-direction: column; gap: 18px; }
.record-section {
    padding: 18px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface);
}
.record-section-heading { margin-bottom: 16px; }
.record-section-heading h3 { font-size: 15px; }
.record-section-heading p {
    max-width: 760px; margin: 3px 0 0; color: var(--text-2); font-size: 12.5px;
}
.record-section-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px;
}
.record-field { min-width: 0; }
.record-field label { margin-bottom: 6px; }
.record-field textarea:not(.code) { min-height: 82px; resize: vertical; }
.record-field-wide { grid-column: 1 / -1; }
.optional-object-field {
    padding: 14px; border: 1px solid var(--border); border-radius: 9px;
    background: #fafbfc;
}
.optional-object-heading {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.optional-object-label { display: block; font-size: 12.5px; font-weight: 700; }
.optional-object-toggle {
    display: inline-flex; align-items: center; gap: 8px; flex: none; margin: 0;
    color: var(--text); cursor: pointer;
}
.optional-object-toggle input { width: auto; margin: 0; }
.optional-object-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.optional-object-inherited {
    margin: 10px 0 0; padding: 10px 12px; color: var(--text-2);
    border: 1px dashed var(--border-strong); border-radius: 7px; background: var(--surface);
    font-size: 12px;
}
.required-mark { color: var(--danger); }
.record-field.has-error {
    padding: 10px; border: 1px solid #efc4ba; border-radius: 8px;
    background: #fff9f7;
}
.record-field-errors { margin-top: 7px; color: var(--danger); font-size: 11.5px; }
.record-field-errors p { margin: 3px 0 0; }
.record-derived-label {
    display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650;
}
.record-derived-value {
    display: flex; align-items: center; min-height: 40px; padding: 9px 11px;
    color: var(--text); border: 1px solid #c8dded; border-radius: 8px;
    background: var(--accent-weak); font-weight: 750;
}
.record-derived-value.unavailable {
    color: var(--text-2); border-color: var(--border); background: var(--surface-2);
    font-weight: 600;
}
.boolean-field {
    display: flex; align-items: flex-start; gap: 10px; min-height: 56px; margin: 0;
    padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); background: #fafbfc; cursor: pointer;
}
.boolean-field:hover { border-color: var(--border-strong); }
.boolean-field input { width: auto; margin: 3px 0 0; flex: none; }
.boolean-field strong { display: block; color: var(--text); font-size: 12.5px; }
.boolean-help {
    display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px;
    font-weight: 450;
}
.record-field-label-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 5px;
}
.record-field-label-row label { margin: 0; }
.key-value-editor, .list-value-editor {
    display: flex; flex-direction: column; gap: 7px; margin-top: 10px;
}
.key-value-row {
    display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr) auto;
    align-items: center; gap: 8px;
}
.list-value-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
}
.key-value-row .btn, .list-value-row .btn { padding: 9px; }
.record-empty-value { margin: 9px 0 0; color: var(--text-3); font-size: 12px; }
.complex-record-field > .record-field-label-row {
    padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.object-row-editor, .quality-axis-editor, .capability-claim-editor {
    display: flex; flex-direction: column; gap: 11px; margin-top: 11px;
}
.object-editor-row, .quality-axis-row, .capability-claim-row {
    position: relative; min-width: 0; margin: 0; padding: 15px;
    border: 1px solid var(--border); border-radius: 9px; background: #fafbfc;
}
.object-editor-row legend, .quality-axis-row legend, .capability-claim-row legend {
    max-width: calc(100% - 24px); padding: 0 6px; overflow: hidden;
    color: var(--text-2); font-size: 11.5px; font-weight: 750;
    text-overflow: ellipsis; white-space: nowrap;
}
.object-editor-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.object-editor-field { min-width: 0; }
.object-editor-field label {
    display: block; margin-bottom: 5px; color: var(--text-2); font-size: 11px;
}
.object-row-remove { margin-top: 10px; }
.quality-axis-grid {
    display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px;
}
.capability-claim-grid {
    display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(150px, 1fr));
    gap: 10px;
}
.capability-evidence-editor, .capability-detail-editor {
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
}
.capability-detail-editor > label {
    display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650;
}
.capability-detail-json {
    min-height: 145px; max-height: 320px; resize: vertical; font-size: 11.5px;
}
.asset-record-field { min-width: 0; }
.asset-picker {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 12px;
}
.asset-picker-preview {
    display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden;
    color: var(--text-3); border: 1px solid var(--border); border-radius: 9px;
    background:
        linear-gradient(45deg, #f2f4f6 25%, transparent 25%) 0 0 / 12px 12px,
        linear-gradient(-45deg, #f2f4f6 25%, transparent 25%) 0 6px / 12px 12px,
        linear-gradient(45deg, transparent 75%, #f2f4f6 75%) 6px -6px / 12px 12px,
        linear-gradient(-45deg, transparent 75%, #f2f4f6 75%) -6px 0 / 12px 12px,
        #fff;
    font-size: 18px; font-weight: 750;
}
.asset-picker-preview img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.asset-picker-control { min-width: 0; }
.asset-upload { margin-top: 9px; }
.asset-upload .hint { margin-top: 5px; }
.asset-upload-error { margin: 6px 0 0; color: var(--danger); font-size: 11.5px; }
.record-json-panel { max-width: 900px; margin: 0 auto; }
.record-json-textarea { min-height: 440px; max-height: calc(100vh - 330px); }
.json-parse-error.is-empty { display: none; }
.record-save-feedback, .record-dialog-warning {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    margin: 14px 24px 0; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 9px;
}
.record-save-feedback strong, .record-dialog-warning strong { display: block; }
.record-save-feedback p, .record-dialog-warning p { margin: 2px 0 0; font-size: 12px; }
.record-save-feedback.invalid {
    display: block; color: var(--danger); border-color: #efc4ba; background: var(--danger-weak);
}
.record-save-feedback.error {
    display: block; color: var(--danger); border-color: #efc4ba; background: var(--danger-weak);
}
.record-dialog-warning { color: var(--amber); border-color: #ead18a; background: var(--amber-weak); }
.record-dialog-warning-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.record-validation-summary {
    display: grid; gap: 5px; max-height: 170px; margin: 10px 0 0; padding-left: 19px;
    overflow: auto; color: var(--danger); font-size: 12px;
}
.record-validation-summary code { display: inline-block; margin-left: 7px; font-size: 10.5px; }
.delete-preflight-dialog { width: min(780px, 100%); }
.delete-preflight-body { padding-top: 18px; }
.delete-scope-callout {
    margin-bottom: 16px; padding: 13px 14px; color: var(--danger);
    border: 1px solid #efc4ba; border-radius: 9px; background: #fff9f7;
}
.delete-scope-callout strong { display: block; }
.delete-scope-callout p { margin: 3px 0 0; color: var(--text-2); font-size: 12.5px; }
.dependency-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 250px; color: var(--text-2);
}
.dependency-loading strong { display: block; color: var(--text); }
.dependency-loading p { margin: 2px 0 0; }
.dependency-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dependency-group {
    min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 9px;
    background: #fafbfc;
}
.dependency-group-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 9px;
    margin-bottom: 9px;
}
.dependency-group-heading h3 { font-size: 13px; }
.dependency-group ul {
    display: flex; flex-direction: column; gap: 7px; max-height: 250px;
    margin: 0; padding: 0; overflow: auto; list-style: none;
}
.dependency-group li {
    min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.dependency-group li:last-child { padding-bottom: 0; border-bottom: 0; }
.dependency-group li code {
    display: block; overflow: hidden; color: var(--text); font-size: 11px;
    text-overflow: ellipsis; white-space: nowrap;
}
.dependency-group li span { display: block; margin-top: 2px; color: var(--text-3); font-size: 10.5px; }
.dependency-group li .dependency-advisory { color: var(--amber); font-weight: 600; }
.dependency-repair { width: 100%; margin-top: 7px; justify-content: center; }

/* ---------- Toast ---------- */
.toast-region {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--text); color: var(--surface);
    padding: 11px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-weight: 600; display: flex; align-items: center; gap: 9px; max-width: 480px;
    animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast.warn { background: var(--amber); color: #14202c; }

/* ---------- Spinner ---------- */
.spinner {
    display: inline-block; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; vertical-align: -2px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.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;
}

/* ---------- Discover: panel + neutral per-field verdict notes ---------- */
/* The panel expands in place at the top of record-dialog-scroll, above the first section. */
/* The Discover panel is step 1 of the Discover & Probe wizard. `.discover-step-slot` is the wizard
   field that holds it; the panel keeps its own tinted card so the run still reads as a distinct
   phase of the step rather than as more form. */
.discover-step-slot { margin-bottom: 16px; }
.discover-step-slot > .discover-panel { margin-bottom: 0; }
.discover-step-slot > label {
    display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 650;
}

/* Target and credential, restated on the Depth step — settled a step earlier, not re-asked. */
.wizard-target-summary .wizard-summary-line {
    margin: 0 0 4px; font-size: 13px;
}
.wizard-target-summary .wizard-summary-line strong { font-family: var(--font-mono); }
.wizard-target-summary .wizard-summary-line .hint { font-size: 12.5px; }

.discover-panel {
    margin-bottom: 18px; padding: 16px 18px 18px;
    border: 1px solid #c8dded; border-radius: 10px; background: var(--accent-weak);
    animation: discover-expand .16s ease;
}
@keyframes discover-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.discover-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.discover-panel-head h3 { font-size: 15px; }
.discover-panel-head h3:focus-visible {
    outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--accent-ring);
}
.discover-panel-close { flex: none; min-width: 32px; justify-content: center; padding: 6px; }
.discover-target {
    margin: 3px 0 0; color: var(--text-2); font-size: 12.5px; font-family: var(--font-mono);
}
.discover-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.discover-field { display: flex; flex-direction: column; }
.discover-field-label { margin-bottom: 6px; font-size: 12.5px; font-weight: 650; }
/* The widget renders an inline trigger; its option list is a fixed-position top-layer popover, so
   it is never clipped by record-dialog-scroll and needs no fixed-height wrapper here. */
.discover-picker krista-model-select { display: block; width: 100%; max-width: 460px; }
.discover-picker .hint { margin-top: 5px; }
.discover-overwrite {
    margin: 0; padding: 10px 12px; color: var(--amber); font-size: 12px; font-weight: 600;
    border: 1px solid #e8d59a; border-radius: 7px; background: var(--amber-weak);
}
.discover-empty { margin: 0; color: var(--text-2); }
.discover-loading { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.discover-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.discover-error {
    margin: 0; padding: 10px 12px; color: var(--danger); font-size: 12.5px; font-weight: 600;
    border: 1px solid #efc4ba; border-radius: 7px; background: var(--danger-weak);
}
.discover-notice {
    margin: 0; padding: 10px 12px; color: var(--text-2); font-size: 12.5px;
    border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface);
}
.discover-status { margin: 0; }
.discover-status-line { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.discover-status .spinner { color: var(--accent); }
.discover-phase { margin: 6px 0 0; color: var(--text-2); font-size: 12px; }
.discover-phase-label { font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.discover-summary-line { margin: 0; font-size: 14.5px; }
.discover-summary-line:focus-visible {
    outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--accent-ring);
}
.discover-summary-sub { margin: 4px 0 0; color: var(--text-2); font-size: 12.5px; }
.discover-groups, .discover-group-verdicts { margin: 0; padding: 0; list-style: none; }
.discover-group-row, .discover-group-verdict {
    display: flex; align-items: baseline; gap: 12px; padding: 5px 0;
    border-top: 1px solid #c8dded; font-size: 12.5px;
}
.discover-group-name { flex: none; min-width: 92px; font-weight: 650; }
.discover-group-counts, .discover-group-verdict-text { color: var(--text-2); }

/* The neutral verdict note. Deliberately shares NOTHING with .record-field-errors: no danger
   token, no background fill, no alert semantics. FOUND is a solid accent rule; NOT FOUND and
   NOT LICENSED are dotted neutral rules. */
.record-field-note {
    margin: 7px 0 0; padding-left: 9px; color: var(--text-2); font-size: 11.5px;
    border-left: 2px solid transparent;
}
.record-field-note[data-verdict="found"] { border-left-style: solid; border-left-color: var(--accent); }
.record-field-note[data-verdict="not-found"] { border-left-style: dotted; border-left-color: var(--border-strong); }
.record-field-note[data-verdict="not-licensed"] { border-left-style: dotted; border-left-color: var(--border-strong); }

/* ---------- Provider table degradation ladder (container queries) ----------
   Intrinsic sizing handles the CONTINUOUS response: the table tracks its container with no
   breakpoint involved, which is why it behaves the same in a 1440px window and a 1440px iframe.
   These two tiers handle the DISCRETE decisions that sizing alone cannot make — what to give up,
   and in what order, once the container is genuinely too small for everything.

   They query the zone, never the viewport. An embedded host that hands the editor a narrow frame
   inside a wide monitor gets the narrow layout, which is exactly the case a media query would get
   wrong.

   The order is deliberate. First to go is decoration; last to go is the thing the product owner
   asked to fix. Below the second tier the table scrolls, and the sticky actions column keeps
   Edit / Export… / Delete whole — that is the floor, not a tier. */

/* Tier 1 — the disclosure column drops to its chevron. The button keeps its full accessible name
   ("Show models for OpenAI"), and the label is visually hidden rather than removed, so screen
   readers and text assertions see no change at all. Costs a word, buys ~75px. */
@container provider-table (max-width: 1180px) {
    .provider-expand .provider-expand-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    /* Square and centred, so the chevron reads as a deliberate disclosure control rather than a
       button someone forgot to label.

       `position: relative` is load-bearing, not cosmetic. The hidden label is absolutely
       positioned, and without a positioned ancestor its containing block is the initial one — so
       inside a table that scrolls horizontally it resolves against the DOCUMENT, lands past the
       right edge, and gives the whole page a horizontal scrollbar. Anchoring it to the button
       keeps it inside the overflow container that clips it. */
    .provider-expand {
        position: relative; width: auto; min-width: 34px;
        justify-content: center; padding-inline: 6px;
    }
}

/* Tier 2 — last resort. The dialect id is allowed to break after a hyphen, which is the very wrap
   this pass set out to remove. It is reinstated ONLY here, because at this width the alternative
   is not a tidier chip, it is a horizontal scrollbar between the reader and the routing column. */
@container provider-table (max-width: 1108px) {
    .provider-table .catalog-token.dialect { white-space: normal; text-align: left; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .spinner { animation: none; border-right-color: currentColor; opacity: .6; }
    /* The panel appears without motion; the running spinner degrades to a static glyph beside the
       word "Discovering", which the status line already carries. */
    .discover-panel { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .providers-models-filters {
        grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(140px, 1fr));
    }
    .filter-search { grid-column: span 2; }
}

@media (max-width: 900px) {
    .session-header {
        position: static; grid-template-columns: 1fr auto; gap: 14px;
        padding-top: 14px; padding-bottom: 14px;
    }
    .header-status { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .records-layout { grid-template-columns: 1fr; }
    .record-list { max-height: 240px; }
    .depth-cards { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .entity-nav { display: grid; max-width: none; overflow-x: auto; }
    .catalog-heading { flex-direction: column; }
    .catalog-heading-actions { padding-top: 0; }
    .providers-models-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-search { grid-column: 1 / -1; }
    .workspace-notice { align-items: flex-start; }
    .record-section-fields { grid-template-columns: 1fr; }
    .record-field-wide { grid-column: auto; }
    .quality-axis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .capability-claim-grid { grid-template-columns: 1fr; }
    .dependency-groups { grid-template-columns: 1fr; }
    .dependency-group ul { max-height: 160px; }
    .deployment-invalid-notice { align-items: flex-start; flex-direction: column; }
    .deployment-invalid-notice .btn { width: 100%; justify-content: center; }
    .profile-default-card { align-items: start; }
    .optional-object-fields { grid-template-columns: 1fr; }
    .evidence-workspace { grid-template-columns: 1fr; }
    .evidence-list-panel { border-right: 0; border-bottom: 1px solid var(--border); }
    .evidence-list { max-height: 340px; }
}

@media (max-width: 650px) {
    .editor-main { padding: 16px 12px 28px; }
    .session-header { display: flex; align-items: flex-start; flex-direction: column; }
    .header-identity { width: 100%; justify-content: space-between; }
    .workspace-context { margin-left: auto; }
    .header-status { width: 100%; align-items: flex-start; flex-direction: column; gap: 10px; }
    .session-facts { flex-wrap: wrap; gap: 10px 18px; }
    .session-header .header-actions { width: 100%; }
    .session-header .header-actions .btn { flex: 1 1 auto; justify-content: center; }
    .entity-nav {
        grid-template-columns: repeat(4, minmax(132px, 1fr));
        width: 100%; margin-bottom: 14px; border-radius: 10px;
    }
    .entity-tab { min-height: 58px; padding: 8px 12px; }
    .catalog-heading { padding: 20px; }
    .catalog-heading-actions { width: 100%; flex-wrap: wrap; }
    .catalog-heading-actions .btn { flex: 1 1 auto; justify-content: center; }
    .entity-summary-row {
        grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px;
    }
    .entity-summary-row .btn { grid-column: 2 / -1; justify-content: center; }
    .compatibility-head { align-items: flex-start; padding: 15px 16px; }
    .catalog-state.empty, .catalog-state.error { align-items: flex-start; flex-direction: column; }
    .providers-models-body { padding: 14px; }
    .providers-models-filters { grid-template-columns: 1fr; padding: 12px; }
    .filter-search { grid-column: auto; }
    .filter-clear { width: 100%; }
    .workspace-notice, .unmatched-models-head {
        align-items: flex-start; flex-direction: column;
    }
    .deployment-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
    .deployment-result-count { padding: 0; }
    .deployment-table-wrap { width: calc(100% - 28px); margin: 0 14px 14px; }
    .deployment-loading { padding: 20px 14px; }
    .deployment-skeleton-row { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
    .deployment-skeleton-row .deployment-skeleton-value { display: none; }
    .profile-default-card {
        grid-template-columns: auto minmax(0, 1fr); margin: 14px; padding: 15px;
    }
    .profile-window-large { grid-column: 2; }
    .profile-empty { margin: 0 14px; }
    .profile-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
    .profile-result-count { padding: 0; }
    .profile-table-wrap { width: calc(100% - 28px); margin: 0 14px 14px; }
    .profile-loading { padding: 20px 14px; }
    .profile-skeleton-row { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
    .profile-skeleton-row .profile-skeleton-window { display: none; }
    .optional-object-heading { flex-direction: column; gap: 10px; }
    .optional-object-toggle { align-items: flex-start; }
    .evidence-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
    .evidence-result-count { padding: 0; }
    .evidence-detail-panel { padding: 18px 16px 22px; }
    .evidence-detail-grid { grid-template-columns: 1fr; }
    .evidence-list-row { grid-template-columns: 1fr auto; }
    .evidence-list-row > .evidence-result { grid-column: 1 / -1; justify-self: start; }
    .terminal-banner { align-items: flex-start; flex-direction: column; }
    .probe-outcome-tally { justify-content: flex-start; }
    .workspace-notice .btn { width: 100%; justify-content: center; }
    .providers-models-result-count { text-align: left; }
    .provider-skeleton-row { grid-template-columns: 42px minmax(0, 1fr); }
    .provider-skeleton-row .skeleton-chip { display: none; }
    .record-dialog-backdrop { place-items: stretch; padding: 0; }
    .record-dialog {
        width: 100%; max-height: 100vh; border: 0; border-radius: 0;
    }
    .record-dialog-header { gap: 12px; padding: 17px 16px 14px; }
    .record-dialog-header h2 { font-size: 19px; }
    .record-editor-tabs { padding: 0 8px; }
    .record-editor-tab { flex: 1 1 50%; text-align: center; }
    .record-dialog-scroll { padding: 16px 12px 22px; }
    .record-dialog-footer {
        align-items: stretch; flex-direction: column; gap: 9px; padding: 11px 12px;
    }
    .record-dialog-actions { width: 100%; }
    .record-dialog-actions .btn { flex: 1 1 50%; justify-content: center; }
    .record-section { padding: 14px 12px; }
    .provider-models-head { align-items: flex-start; flex-direction: column; }
    .provider-models-head .btn { width: 100%; justify-content: center; }
    .key-value-row { grid-template-columns: minmax(0, 1fr) auto; }
    .key-value-row input:nth-child(2) { grid-column: 1; }
    .key-value-row .btn { grid-column: 2; grid-row: 1 / span 2; }
    .object-editor-fields, .quality-axis-grid { grid-template-columns: 1fr; }
    .object-editor-row, .quality-axis-row, .capability-claim-row { padding: 12px 10px; }
    .record-save-feedback, .record-dialog-warning {
        align-items: stretch; flex-direction: column; margin: 10px 12px 0;
    }
    .record-dialog-warning-actions { width: 100%; }
    .record-dialog-warning-actions .btn { flex: 1 1 50%; justify-content: center; }
    .record-json-textarea { min-height: 55vh; max-height: none; }
}

/* ---- Deprecation review (catalog-wide lifecycle sweep + review list) ---- */
/* Deliberately NOT accent-tinted like .discover-panel: Discover fills in a record you are already
   editing, whereas this reviews risk across the whole catalog. The amber edge carries that without
   shouting — the alarming colours are reserved for the two states that have earned them (a model
   the provider says is gone, and two sources that disagree). */
.deprecation-panel {
    margin-bottom: 18px; padding: 16px 18px 18px;
    border: 1px solid var(--border-strong); border-left: 4px solid var(--amber);
    border-radius: 10px; background: var(--surface);
    animation: discover-expand .16s ease;
}
.deprecation-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.deprecation-panel-head h2 { font-size: 16px; }
.deprecation-panel-head h2:focus-visible {
    outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--accent-ring);
}
.deprecation-panel-close { flex: none; min-width: 32px; justify-content: center; padding: 6px; }

.deprecation-setup { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.deprecation-lede { margin: 0; color: var(--text-2); font-size: 13px; max-width: 68ch; }
.deprecation-field { display: flex; flex-direction: column; }
.deprecation-field-label { margin-bottom: 6px; font-size: 12.5px; font-weight: 650; }
.deprecation-field select, .deprecation-field input { max-width: 460px; }
.deprecation-toggle { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
.deprecation-toggle .hint { display: block; margin-top: 2px; }
.deprecation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.deprecation-loading { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.deprecation-empty { margin: 14px 0 0; color: var(--text-2); }
.deprecation-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }

.deprecation-status-line {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 650;
}
.deprecation-status .spinner { color: var(--accent); }

.deprecation-error {
    padding: 11px 13px; border: 1px solid var(--danger); border-radius: var(--radius-sm);
    background: var(--danger-weak);
}
.deprecation-error strong { display: block; }
.deprecation-error p { margin: 4px 0 9px; }
.deprecation-notice {
    padding: 11px 13px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface-2);
}
.deprecation-notice.warn { border-color: var(--amber); background: var(--amber-weak); }
.deprecation-notice strong { display: block; }
.deprecation-notice p { margin: 4px 0 0; font-size: 12.5px; }

.deprecation-warnings { font-size: 12.5px; }
.deprecation-warnings summary { cursor: pointer; color: var(--text-2); font-weight: 650; }
.deprecation-warnings ul { margin: 7px 0 0; padding-left: 20px; color: var(--text-2); }
.deprecation-warnings li { margin-bottom: 3px; }

.deprecation-clean p { margin: 0 0 9px; }

/* The table owns its own horizontal scroll so the page body never does. */
.deprecation-table-wrap { overflow-x: auto; }
.deprecation-table {
    width: 100%; min-width: 940px; border-spacing: 0; border-collapse: separate; color: var(--text);
}
.deprecation-table th[scope="col"] {
    padding: 10px 12px; color: var(--text-2); background: var(--surface-2);
    border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.deprecation-table th[scope="row"] {
    padding: 12px; text-align: left; vertical-align: top; font-weight: 600;
    border-bottom: 1px solid #e8ebee;
}
.deprecation-table th[scope="row"] code { font-family: var(--font-mono); font-size: 12.5px; }
.deprecation-table td {
    padding: 12px; vertical-align: top; border-bottom: 1px solid #e8ebee; font-size: 12.5px;
}
.deprecation-provider { display: block; margin-top: 3px; color: var(--text-3); font-size: 11px; font-weight: 500; }
.deprecation-row.resolved { opacity: .62; }

/* Liveness. The three states that mean different things look different, and UNREACHABLE never
   borrows ABSENT's colour: "we could not ask" must not read as "the vendor said no". */
.deprecation-liveness { display: flex; flex-direction: column; gap: 3px; }
.deprecation-liveness-label { font-weight: 700; }
.deprecation-liveness-detail, .deprecation-unreachable-reason {
    color: var(--text-2); font-size: 11.5px;
}
.deprecation-row[data-liveness="ABSENT"] .deprecation-liveness-label { color: var(--danger); }
.deprecation-row[data-liveness="ALIVE"] .deprecation-liveness-label { color: var(--success); }
.deprecation-row[data-liveness="UNREACHABLE"] .deprecation-liveness-label { color: var(--text-2); }
.deprecation-row[data-liveness="UNREACHABLE"] .deprecation-unreachable-reason {
    margin-top: 2px; padding-left: 8px; border-left: 2px dotted var(--border-strong);
    font-family: var(--font-mono); font-size: 11px;
}
.deprecation-row[data-liveness="NOT_CHECKED"] .deprecation-liveness-label { color: var(--text-3); }

.deprecation-proposal { display: flex; flex-direction: column; gap: 3px; }
.deprecation-transition { font-weight: 700; }
.deprecation-note { color: var(--text-2); }
.deprecation-proposal .hint { margin-top: 2px; }

.deprecation-evidence { display: flex; flex-direction: column; gap: 3px; }
.deprecation-confidence { color: var(--text-2); }
.deprecation-row[data-confidence="HIGH"] .deprecation-confidence { color: var(--success); font-weight: 650; }
.deprecation-citation { color: var(--text-3); font-size: 11px; word-break: break-all; }
.deprecation-citation.none { font-style: italic; }
/* A conflict is not a weaker recommendation, so it does not look like one. */
.deprecation-conflict {
    padding: 6px 8px; border-left: 3px solid var(--amber); background: var(--amber-weak);
    border-radius: 4px; color: #4d3800; font-weight: 600;
}

.deprecation-row-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.deprecation-resolved { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.deprecation-resolved.confirmed { color: var(--success); }
.deprecation-resolved.dismissed { color: var(--text-3); }

@media (max-width: 720px) {
    .deprecation-panel { padding: 13px 14px 15px; }
    .deprecation-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ============================================================================
   Standalone landing + global-administration challenge (FR-011, W10/W11).
   Krista Design System 2.0 (Phase B2): a slim brand bar over a centred hero card
   on the Krista page grey, so the standalone entry wears the same face as the
   shipping Krista agents (klag brand mark + knowledge-agent hero-card recipe).
   Vendored Nunito/Roboto (top of file); every colour is a `--kr-*` token. The only
   animation is the shared `.spinner` (its prefers-reduced-motion fallback is
   already defined above, R-9) — no new keyframes are introduced here.
   ============================================================================ */
.landing-page {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--kr-surface-bg-primary); color: var(--kr-text-color-primary);
    font-family: var(--kr-font-family-sans);
}

/* ── Slim brand bar (56px, white, hairline) — klag app.component.topbar ── */
.landing-topbar {
    display: flex; align-items: center; gap: 10px;
    height: 56px; flex-shrink: 0; padding: 0 20px;
    background: var(--kr-surface-bg-white); border-bottom: 1px solid var(--kr-color-border);
}
.landing-wordmark { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.landing-wordmark strong {
    font-family: var(--kr-font-family-heading); font-size: 14px; font-weight: 600;
    color: var(--kr-text-color-darker);
}
.landing-wordmark-sub { font-size: 11px; color: var(--kr-text-color-light); }

/* ── The Krista "K" lettermark, two sizes: 28px bar tile + 72px hero tile ── */
.kr-brandmark, .kr-herotile {
    display: inline-grid; place-items: center; flex-shrink: 0;
    color: #fff; background: var(--kr-color-primary);
    font-family: var(--kr-font-family-heading); font-weight: 800; line-height: 1;
}
.kr-brandmark { width: 28px; height: 28px; border-radius: var(--kr-border-radius-md); font-size: 15px; }
.kr-herotile {
    width: 72px; height: 72px; border-radius: var(--kr-border-radius-lg); font-size: 34px;
    margin-bottom: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Centred content area + hero card (knowledge-agent Pattern A) ── */
.landing-wrap {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.landing-card {
    width: 100%; max-width: 520px;
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    padding: 40px 40px 36px;
    background: var(--kr-surface-bg-white);
    border: 1px solid var(--kr-color-border); border-radius: var(--kr-border-radius-xl);
    box-shadow: var(--kr-elevation-md);
}
.landing-title {
    margin: 0; font-family: var(--kr-font-family-heading);
    font-size: 28px; font-weight: 400; letter-spacing: -0.25px; line-height: 1.2;
    color: var(--kr-text-color-darker);
}
.landing-message { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kr-text-color-primary); }
.landing-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--kr-text-color-secondary); }
.landing-hint strong { color: var(--kr-text-color-primary); font-weight: 500; }

/* Low-salience admin entry (W10): a muted underlined link, no button chrome. */
.landing-admin-entry { margin-top: 8px; }
.landing-admin-link {
    color: var(--kr-text-color-light); text-decoration: underline;
    font-size: 13px; font-weight: 500; font-family: var(--kr-font-family-sans);
}
.landing-admin-link:hover { color: var(--kr-color-primary); }
.landing-admin-link:focus-visible { outline: none; box-shadow: var(--kr-ring); border-radius: 4px; }

/* ── Challenge card (kristaclient login proportions: 376px form, 40px field) ── */
.admin-challenge-title { font-size: 24px; }   /* a step down from 28px — the heading is longer */
.admin-challenge-intro { margin-bottom: 2px; }
.admin-challenge-form {
    width: 376px; max-width: 100%; margin: 6px auto 0;
    display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.admin-challenge-form .field { margin: 0; }
.admin-challenge-form label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 500; color: var(--kr-text-color-secondary);
}
.admin-key-field {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid var(--kr-color-border); border-radius: var(--kr-border-radius-sm);
    background: var(--kr-surface-bg-white); color: var(--kr-text-color-darker);
    font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em;
}
.admin-key-field:focus { outline: none; border-color: var(--kr-color-primary); box-shadow: var(--kr-ring); }
.admin-key-field:disabled { background: #f2f2f2; color: var(--kr-text-color-secondary); cursor: default; }
.admin-challenge-form .hint { margin-top: 6px; font-size: 12px; color: var(--kr-text-color-secondary); }

.admin-challenge-error {
    margin: 0; padding: 10px 12px; text-align: left; border-radius: var(--kr-border-radius-sm);
    background: var(--kr-color-error-light); color: var(--kr-color-error);
    font-weight: 500; font-size: 13px;
}

/* Stacked actions: full-width primary Continue, then a quiet full-width Cancel (Pattern B). */
.admin-challenge-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.admin-continue { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.admin-cancel { width: 100%; justify-content: center; }

/* Krista-blue buttons scoped to the landing card only — the editor's global .btn / .btn-primary
   keep the editor accent everywhere else. */
.landing-card .btn {
    border-radius: var(--kr-border-radius-md); font-weight: 500;
    border-color: var(--kr-color-border); color: var(--kr-text-color-primary);
    background: var(--kr-surface-bg-white);
}
.landing-card .btn:hover:not(:disabled) { background: #f4f5f6; border-color: var(--kr-text-color-light); }
.landing-card .btn:focus-visible,
.landing-card .btn-link:focus-visible { outline: none; box-shadow: var(--kr-ring); }
.landing-card .btn-primary { background: var(--kr-color-primary); border-color: var(--kr-color-primary); color: #fff; }
.landing-card .btn-primary:hover:not(:disabled) {
    background: var(--kr-color-primary-dark); border-color: var(--kr-color-primary-dark);
}

/* Transient loading/success chips shown before the editor mounts. */
.admin-env-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0;
    padding: 8px 12px; border-radius: var(--kr-border-radius-md);
    background: var(--kr-color-primary-light); color: var(--kr-color-primary-dark);
    font-weight: 500; font-size: 13px;
}
.admin-env-check { width: 16px; height: 16px; }
.admin-loading-note {
    margin: 0; color: var(--kr-text-color-secondary);
    display: inline-flex; align-items: center; gap: 9px;
}

/* Small screens: let the card breathe closer to the edges. */
@media (max-width: 560px) {
    .landing-card { padding: 32px 22px 28px; border-radius: var(--kr-border-radius-lg); }
    .admin-challenge-form { width: 100%; }
}

/* GLOBAL-layer header chip (replaces the workspace context in a global session). */
.layer-chip.global {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 12px; border-radius: 9px;
    background: #efeaff; border: 1px solid #cdbdf3; min-width: 0;
}
.layer-glyph { color: #5a3fbf; font-size: 15px; }
.layer-chip-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.layer-chip-kicker { font-size: 10.5px; letter-spacing: .07em; font-weight: 700; color: #5a3fbf; }
.layer-chip-text strong { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }

/* Persistent global banner (W4). Its own full-width row under the header. Colour is NOT the only
   signal — the ⬢ glyph and the literal word GLOBAL carry it; the dark treatment clears 4.5:1 easily. */
.global-banner {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 10px; padding: 11px 16px;
    background: #241d3a; color: #f4f1ff; border-radius: var(--radius-sm);
    font-size: 13px; line-height: 1.5;
}
.global-banner-glyph { color: #b7a4f0; font-size: 15px; }
.global-banner strong { color: #fff; letter-spacing: .04em; }

/* ============================================================================
   Embedded handoff boot (FR-004, R-1/R-10, W1/W2). A single centred card with a
   loading face and several failure faces. Consistent with the landing/recovery
   cards; the only animation is the shared `.spinner` (its prefers-reduced-motion
   fallback is already defined above, R-9) — no new keyframes here.
   ============================================================================ */
.boot-wrap { max-width: 560px; margin: 72px auto; width: 100%; padding: 0 20px; }
.boot-card { text-align: center; padding: 34px 30px; }
/* The loading spinner, scaled up from the shared 15px inline `.spinner`. */
.boot-spinner { margin-bottom: 6px; color: var(--accent); }
.boot-spinner .spinner { width: 30px; height: 30px; border-width: 3px; vertical-align: baseline; }
.boot-title { font-size: 20px; margin-top: 14px; line-height: 1.3; }
/* Programmatic focus (tabindex="-1") shows no default outline; keyboard focus still gets a ring. */
.boot-title:focus { outline: none; }
.boot-title:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 6px; }
.boot-sub { color: var(--text-2); margin-top: 9px; line-height: 1.55; }
.boot-warn { color: var(--amber); }
.boot-warn-icon { width: 40px; height: 40px; }
.boot-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

/* ═══ Persist outcomes — W8/W9 (studio-catalog-editor-1.0, TASK-B8) ═══════════════════════════
   The persisting face (W8a), the persisted-success card (W8b) and the three-way revision-conflict
   dialog (W9). All ride the existing recovery-card / dialog shells; the only animation is the
   shared `.spinner` (whose prefers-reduced-motion fallback is inherited). */

/* W8a — the saving face. A polite status card, sized like the recovery card it reuses. */
.persist-card .persist-spinner { color: var(--accent); margin-bottom: 4px; }
.persist-card .persist-spinner .spinner { width: 28px; height: 28px; border-width: 3px; vertical-align: baseline; }

/* W8b — the persisted result. The version + counts line is the payload; the summary is secondary. */
.persisted-card .persisted-meta { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.persisted-card .persisted-summary { font-size: 13px; }

/* W9 — the two described choices inside the conflict dialog. A bordered stack, not radios: the
   buttons themselves are the choice; these rows only explain the consequences. */
.conflict-options { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; }
.conflict-option { padding: 10px 14px; }
.conflict-option + .conflict-option { border-top: 1px solid var(--border); }
.conflict-option strong { display: block; font-size: 13px; margin-bottom: 2px; }
.conflict-option p { margin: 0; font-size: 12.5px; color: var(--text-2); }

/* Read-only header line (BRK-005) — replaces the removed `Copy to edit` control. Plain text on
   purpose: it must not look actionable, because nothing here can act. */
.read-only-hint { color: var(--text-2); font-size: 12.5px; }

/* ═══ Settings zone — W5 (studio-catalog-editor-1.0, TASK-C6, FR-007) ═════════════════════════
   Immediate control-plane state on its own tab, so the draft model and the settings model are
   never interleaved on one screen (§3.10). Wide content scrolls inside its own container; the
   page body never scrolls horizontally (UIT-021 discipline). */

.settings-zone { display: flex; flex-direction: column; gap: 18px; }
.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.settings-section-head h2 { font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
.settings-section-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

/* Readiness banner — FIRST in the zone (AC-007.8), amber because it is a condition, not a fault. */
.settings-readiness { display: flex; gap: 12px; align-items: flex-start; background: var(--amber-weak); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--radius); padding: 13px 16px; }
.settings-readiness-mark { font-size: 17px; color: var(--amber); line-height: 1.2; }
.settings-readiness strong { color: var(--amber); }
.settings-readiness-code { font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-left: 6px; color: var(--amber); }
.settings-readiness p { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }

/* Providers table */
.settings-table-wrap { overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.settings-table thead th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--border-strong); }
.settings-table tbody td, .settings-table tbody th { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.settings-table tbody tr:last-child td, .settings-table tbody tr:last-child th { border-bottom: 0; }
.settings-provider-identity { display: flex; align-items: center; gap: 10px; }
.settings-provider-icon { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: var(--surface-2); flex: none; }
.settings-provider-letter { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-2); }
.settings-provider-name { display: flex; flex-direction: column; min-width: 0; }
.settings-provider-name strong { font-weight: 650; }
.settings-provider-name code { font-size: 11.5px; color: var(--text-3); }
.settings-platform-lock { font-size: 12px; }

/* The enablement switch — a real role="switch" button, W5's pill shape. Colour is never the sole
   signal: the adjacent word states Enabled/Disabled for every row (UIT-013 discipline). */
.settings-enabled-cell { white-space: nowrap; }
.settings-switch { position: relative; width: 40px; height: 22px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface-3); cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease; vertical-align: middle; }
.settings-switch .settings-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(23,25,29,.25); transition: transform .15s ease; }
.settings-switch.on { background: var(--accent); border-color: var(--accent); }
.settings-switch.on .settings-switch-thumb { transform: translateX(18px); }
.settings-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.settings-switch[aria-busy="true"] { opacity: .6; }
.settings-enabled-word { margin-left: 8px; font-size: 12.5px; color: var(--text-2); vertical-align: middle; }

/* Credential cell: masked chip + source pill + provenance, then receipt + per-row verdict. */
.settings-credential-cell { min-width: 220px; }
.settings-credential { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.settings-credential.none, .settings-credential.platform { color: var(--text-3); }
.settings-credential-masked code { font-size: 12px; }
.settings-credential-detail { font-size: 12px; color: var(--text-3); flex-basis: 100%; }
.settings-receipt { display: block; margin-top: 6px; font-size: 12px; color: var(--success); }
.settings-verdict { display: block; margin-top: 6px; font-size: 12.5px; min-height: 1em; }
.settings-verdict[data-verdict="ok"] { color: var(--success); }
.settings-verdict[data-verdict="auth_failed"] { color: var(--danger); }
.settings-verdict[data-verdict="unreachable"] { color: var(--amber); }
.settings-verdict .spinner { width: 12px; height: 12px; }

.settings-actions-cell { white-space: nowrap; }
.settings-key-actions { display: inline-flex; gap: 6px; }
.settings-no-controls { font-size: 12.5px; color: var(--text-3); }
.btn-compact { padding: 5px 10px; font-size: 12.5px; }

/* A guarded (aria-disabled) dialog button: focusable but visibly inert until its gate opens. */
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.settings-key-dialog-body { text-align: left; }
.settings-key-field { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); letter-spacing: .12em; }
.settings-key-field:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Roles builder (R-6): each role is a named, ordered list; the footer owns the whole-block save. */
.settings-roles-list { display: flex; flex-direction: column; gap: 12px; }
.settings-role { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; }
.settings-role-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.settings-role-name code { font-size: 13.5px; font-weight: 650; }
.settings-role-models { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-role-model { display: flex; align-items: center; gap: 9px; }
.settings-role-position { color: var(--text-3); font-size: 12.5px; min-width: 18px; text-align: right; }
.settings-role-model-id { font-size: 12.5px; }
.settings-role-controls { display: inline-flex; gap: 5px; margin-left: auto; }
.settings-role-empty { color: var(--text-3); font-size: 13px; margin: 4px 0; }
.settings-role-add { display: flex; gap: 8px; margin-top: 10px; }
.settings-role-add-input { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.settings-role-add-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.settings-roles-footer { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.settings-roles-rejection { color: var(--danger); font-size: 13px; margin: 0; }
.settings-roles-actions { display: flex; justify-content: flex-end; gap: 10px; }
.settings-roles-loading, .settings-roles-empty { color: var(--text-3); font-size: 13px; }

/* Loading skeleton (shimmer inherits the global prefers-reduced-motion kill, R-9/UIT-020). */
.settings-skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 16px; }
.settings-skeleton-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 110px; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.settings-skeleton-row:last-child { border-bottom: 0; }

/* ═══ History zone — W6/W7 (studio-catalog-editor-1.0, TASK-C7, FR-010) ═══════════════════════ */

.history-zone { display: flex; flex-direction: column; gap: 14px; }
.history-warnings { display: flex; flex-direction: column; gap: 6px; }
.history-warning { margin: 0; background: var(--amber-weak); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 13px; color: var(--amber); }

.history-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.history-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.history-table thead th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid var(--border-strong); }
.history-table tbody td, .history-table tbody th { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.history-table tbody tr:last-child td, .history-table tbody tr:last-child th { border-bottom: 0; }
.history-row.current { background: var(--accent-weak); }
.history-version-cell { white-space: nowrap; }
.history-current-dot { color: var(--accent); margin-right: 6px; }
.history-current-badge { margin-left: 8px; }
.history-actor-cell { color: var(--text-2); overflow-wrap: anywhere; }
.history-summary-cell { color: var(--text-2); max-width: 320px; }
.history-actions-cell { white-space: nowrap; text-align: right; }
.history-actions-col { width: 110px; }
.history-retention { color: var(--text-3); font-size: 12.5px; text-align: right; margin: 0; }

/* The reset block — a deliberate, bordered danger zone at the FOOT of the ledger (W6/W7b). */
.history-reset { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: var(--surface); border-radius: var(--radius); padding: 16px 20px; }
.history-reset h2 { font-size: 14.5px; margin-bottom: 4px; }
.history-reset p { margin: 0; font-size: 13px; color: var(--text-2); max-width: 60ch; }
.history-reset .btn-danger { flex: none; }
.history-dirty-warning { color: var(--amber); font-weight: 600; }
.history-reset-input { width: 100%; font: inherit; font-family: var(--font-mono); padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.history-reset-input:focus-visible { outline: none; border-color: var(--danger); box-shadow: 0 0 0 3px rgba(155, 50, 28, 0.25); }

.history-skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 16px; }
.history-skeleton-row { display: grid; grid-template-columns: 90px 170px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.history-skeleton-row:last-child { border-bottom: 0; }
.history-skeleton-version, .history-skeleton-when, .history-skeleton-summary { height: 15px; }

/* Narrow frames (UIT-021 discipline): stack the section heads; tables already scroll in-wrap. */
@media (max-width: 900px) {
    .settings-section-head, .settings-role-head, .history-reset { flex-direction: column; align-items: stretch; }
    .settings-roles-actions { justify-content: stretch; }
    .settings-roles-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══ Catalog interchange — export / diff / import (studio-catalog-editor-1.0 §13.6, TASK-PC6-PC8) ═
   No animation is introduced here, so the global prefers-reduced-motion kill (R-9/UIT-020) has
   nothing to switch off and nothing to miss. Every colour pair below is an existing token pair
   already used elsewhere in this stylesheet, so the ≥ 4.5:1 discipline holds by construction. */

/* The dialogs carry a table, so they need the room a confirmation dialog does not. The `:has()`
   widening is progressive: without it the body still scrolls in place at the default 460px, which
   is the same "tables scroll in-wrap" rule the narrow-frame media query relies on. */
.dialog:has(.interchange-body) {
    max-width: min(940px, 96vw); max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
}
/* The body carries its OWN max-height as well as flexing, so the actions row stays on screen in a
   short frame even where `:has()` does not apply — and `min-height: 0` is what lets the inner
   scroll area actually shrink inside the nested flex column (project CSS guideline). */
.interchange-body {
    flex: 1 1 auto; max-height: min(58vh, 620px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; display: flex; flex-direction: column; gap: 14px; min-height: 0;
}
/* Load-bearing: the body is a flex COLUMN with a bounded height, so its children shrink by default —
   which silently squashed the delta table's scroll wrap below its content height and CLIPPED the
   bottom rows behind it (their checkboxes stopped being clickable at all). Blocks shrink; the body
   itself is the only thing that scrolls. */
.interchange-body > * { flex: 0 0 auto; }
.interchange-body > :last-child { margin-bottom: 0; }
.interchange-lede { margin: 0; color: var(--text-2); font-size: 13px; max-width: 74ch; }
.interchange-origin { margin: 0; color: var(--text-3); font-size: 12.5px; }
.interchange-origin code { color: var(--text-2); }

.interchange-field { display: flex; flex-direction: column; }
.interchange-field-label { margin-bottom: 6px; font-size: 12.5px; font-weight: 650; }
.interchange-field .hint { margin: 6px 0 0; }
.interchange-choose { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.interchange-file-name { font-size: 12.5px; color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.interchange-file-none { font-size: 12.5px; color: var(--text-3); }
.interchange-paste-label { margin: 12px 0 6px; font-size: 12.5px; font-weight: 650; }
.interchange-paste {
    width: 100%; font-size: 12px; padding: 9px 11px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); resize: vertical;
}
.interchange-paste:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.interchange-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }

/* State of the subject: new here, already here, or never writable here. */
.interchange-notice {
    padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.interchange-notice strong { display: block; font-size: 13px; margin-bottom: 3px; }
.interchange-notice p { margin: 0; font-size: 13px; color: var(--text-2); }
.interchange-notice.warn { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-weak); }
.interchange-notice.warn p, .interchange-notice.warn strong { color: var(--amber); }

/* ★ The two disclosures (PC-MUST-1 / PC-SHOULD-2). Amber, not red: nothing is broken and nothing
   is lost — a capability arrives untested and an icon arrives absent. Red here would push people
   past the one thing on this screen that genuinely deserves a pause. */
.interchange-disclosure {
    padding: 11px 13px; border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent); background: var(--amber-weak);
}
.interchange-disclosure strong { display: block; font-size: 13px; margin-bottom: 3px; color: var(--amber); }
.interchange-disclosure p { margin: 0 0 6px; font-size: 13px; color: var(--amber); }
.interchange-disclosure .hint { margin: 6px 0 0; color: var(--amber); opacity: .92; }
.interchange-disclosure.assets { border-color: var(--border-strong); background: var(--surface-2); }
.interchange-disclosure.assets strong, .interchange-disclosure.assets p { color: var(--text-2); }
.interchange-disclosure-list { margin: 0; padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.interchange-disclosure-list code { font-size: 12px; }

.interchange-error {
    padding: 11px 13px; border: 1px solid var(--danger); border-radius: var(--radius-sm);
    background: var(--danger-weak);
}
.interchange-error strong { display: block; color: var(--danger); font-size: 13px; margin-bottom: 3px; }
.interchange-error p { margin: 0 0 6px; font-size: 13px; color: var(--danger); }
.interchange-report { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--danger); }

/* Keep-both: the W7b typed-value idiom — the field is in the body, the button it gates is in the
   dialog actions and wears aria-disabled (never `disabled`, so its refusal stays perceivable). */
.interchange-newid-input {
    width: 100%; max-width: 420px; font: inherit; font-family: var(--font-mono); font-size: 12.5px;
    padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.interchange-newid-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.interchange-newid-message { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.interchange-newid-message.invalid { color: var(--danger); }
.interchange-newid-message.valid { color: var(--success); }

.interchange-skip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.interchange-row-note { font-size: 12px; color: var(--text-3); }
.interchange-immutable-reason { font-size: 12px; color: var(--danger); }

.interchange-never-persists { margin: 0; font-size: 12.5px; color: var(--text-2); }
.interchange-outcome-counts { margin: 0; font-size: 15px; font-weight: 650; }
.interchange-outcome-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.interchange-outcome-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.interchange-outcome-newid { color: var(--text-3); }

.interchange-validity { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.interchange-validity strong { display: block; font-size: 13px; }
.interchange-validity p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.interchange-validity-mark { font-size: 16px; line-height: 1.2; }
.interchange-validity.valid { border-color: color-mix(in srgb, var(--success) 34%, transparent); background: var(--success-weak); }
.interchange-validity.valid strong, .interchange-validity.valid .interchange-validity-mark { color: var(--success); }
.interchange-validity.invalid { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-weak); }
.interchange-validity.invalid strong, .interchange-validity.invalid .interchange-validity-mark { color: var(--amber); }
.interchange-validity.invalid .btn { margin-top: 8px; }

/* ---- The ONE delta rendering, shared by the diff view and the import preview (§13.3) ---- */
.delta-summary { display: flex; flex-direction: column; gap: 4px; }
.delta-summary-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.delta-count { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--neutral-weak); color: var(--text-2); }
.delta-count strong { color: var(--text); }
.delta-count-changed { background: var(--accent-weak); color: var(--accent); }
.delta-count-changed strong { color: var(--accent); }
.delta-count-added { background: var(--success-weak); color: var(--success); }
.delta-count-added strong { color: var(--success); }
.delta-count-removed { background: var(--danger-weak); color: var(--danger); }
.delta-count-removed strong { color: var(--danger); }
.delta-summary-describe { margin: 0; font-size: 12.5px; color: var(--text-2); }
.delta-identical { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.delta-identical-mark { color: var(--success); font-size: 17px; }
.delta-empty { margin: 0; font-size: 13px; color: var(--text-3); }

.delta-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.delta-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.delta-table thead th {
    text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3); padding: 9px 13px; border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
.delta-table tbody td, .delta-table tbody th { padding: 11px 13px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.delta-table tbody tr:last-child td, .delta-table tbody tr:last-child th { border-bottom: 0; }
.delta-row-context { background: var(--surface-2); }
.delta-record-cell { white-space: nowrap; }
.delta-record-id { display: block; margin-top: 3px; font-size: 12px; }
.delta-kind-chip { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--text-3); }
.delta-context-chip { display: inline-block; margin-top: 4px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--neutral-weak); color: var(--text-2); }

.delta-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.delta-change-chip, .delta-status-chip { font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
/* The neutral base comes FIRST: every variant below is the same specificity, so a later neutral
   rule would silently repaint every chip grey. */
.delta-change-chip, .delta-status-chip { background: var(--neutral-weak); color: var(--text-2); }
.delta-change-added, .delta-status-new, .delta-status-added { background: var(--success-weak); color: var(--success); }
.delta-change-removed, .delta-status-immutable { background: var(--danger-weak); color: var(--danger); }
.delta-change-changed, .delta-status-updated, .delta-status-renamed { background: var(--accent-weak); color: var(--accent); }
.delta-status-conflict { background: var(--amber-weak); color: var(--amber); }

.delta-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.delta-field { display: flex; flex-direction: column; gap: 2px; }
.delta-field-path { font-size: 12px; color: var(--text-2); }
.delta-field-values { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.delta-value { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.delta-value-before { background: var(--danger-weak); color: var(--danger); }
.delta-value-after { background: var(--success-weak); color: var(--success); }
.delta-value-absent { background: var(--neutral-weak); color: var(--text-3); font-style: italic; }
.delta-arrow { color: var(--text-3); }
.delta-whole-record { margin: 0; font-size: 12.5px; color: var(--text-2); }

/* Narrow frames: the delta table already scrolls in-wrap; the choose row stops fighting for space. */
@media (max-width: 900px) {
    .interchange-choose { flex-direction: column; align-items: stretch; }
    .interchange-body { max-height: min(64vh, 620px); }
}