/* OneAgent chrome (Part 5 §5.0.3, addendum L design system - docs/admin-ui-design-system.md is the reference).
   ONE source of truth: the design tokens below (light, then dark under :root[data-theme="dark"]), the shell (top bar,
   left navigation, content frame), the shared components of Components/Ui and the page rules. Deal cards live in
   oa-cards.css and read only the site theme's --oa-* variables, so every chrome token is prefixed --oa-ui-*.
   Radzen components are styled by the Radzen base theme, re-pointed at these tokens in the "Radzen" block. */

/* ==== 1. Design tokens (light, the default) ==== */

:root {
    color-scheme: light;

    /* Typography: a 14 px base, nothing below 12 px, a readable line height and a prose measure. */
    --oa-ui-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --oa-ui-font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --oa-ui-font-size: 14px;
    --oa-ui-font-size-small: 13px;
    --oa-ui-font-size-xs: 12px;
    --oa-ui-font-size-mono: 13px;
    --oa-ui-font-size-h1: 24px;
    --oa-ui-font-size-h2: 18px;
    --oa-ui-font-size-h3: 16px;
    --oa-ui-font-size-h4: 14px;
    --oa-ui-line-height: 1.5;
    --oa-ui-line-height-tight: 1.3;
    --oa-ui-measure: 75ch;
    --oa-ui-weight-medium: 500;
    --oa-ui-weight-semibold: 600;
    --oa-ui-weight-bold: 700;

    /* Spacing scale 4/8/12/16/24/32. */
    --oa-ui-space-1: 4px;
    --oa-ui-space-2: 8px;
    --oa-ui-space-3: 12px;
    --oa-ui-space-4: 16px;
    --oa-ui-space-5: 24px;
    --oa-ui-space-6: 32px;

    /* Radius and elevation. */
    --oa-ui-radius-sm: 4px;
    --oa-ui-radius: 6px;
    --oa-ui-radius-lg: 10px;
    --oa-ui-radius-pill: 999px;
    --oa-ui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
    --oa-ui-shadow-2: 0 8px 24px rgba(16, 24, 40, 0.18);

    /* Neutral palette. */
    --oa-ui-bg: #f4f6f8;
    --oa-ui-surface: #ffffff;
    --oa-ui-surface-muted: #f6f8fa;
    --oa-ui-surface-hover: #eef2f6;
    --oa-ui-border: #d0d7de;
    --oa-ui-border-soft: #e4e8ec;
    --oa-ui-text: #1f2328;
    --oa-ui-text-muted: #57606a;
    --oa-ui-text-subtle: #656d76;

    /* One accent (buttons, selection, focus) and the link colour. */
    --oa-ui-accent: #0969da;
    --oa-ui-accent-hover: #0550ae;
    --oa-ui-accent-soft: #ddf4ff;
    --oa-ui-on-accent: #ffffff;
    --oa-ui-link: #0969da;
    --oa-ui-focus: #0969da;

    /* Semantic colours: text (fg), soft fill (bg) and border per tone. Badges always add text and an icon. */
    --oa-ui-success: #1a7f37;
    --oa-ui-success-bg: #dafbe1;
    --oa-ui-success-border: #aceebb;
    --oa-ui-warning: #9a6700;
    --oa-ui-warning-bg: #fff8c5;
    --oa-ui-warning-border: #eac54f;
    --oa-ui-danger: #cf222e;
    --oa-ui-danger-bg: #ffebe9;
    --oa-ui-danger-border: #ffcecb;
    --oa-ui-info: #0969da;
    --oa-ui-info-bg: #ddf4ff;
    --oa-ui-info-border: #b6e3ff;
    --oa-ui-neutral: #57606a;
    --oa-ui-neutral-bg: #eaeef2;
    --oa-ui-neutral-border: #d0d7de;
    --oa-ui-mark-bg: #fff1a8;
    --oa-ui-mark-border: #d4a72c;
    --oa-ui-diff-added: #dafbe1;
    --oa-ui-diff-removed: #ffebe9;

    /* Filled controls per tone (a Success/Danger/Warning/Info button, a destructive confirm): the fill and its label,
       at least 4.5:1 (WCAG AA for 13-14 px labels) - success 5.1, warning 4.9, danger 5.4, info 5.2. */
    --oa-ui-success-solid: #1a7f37;
    --oa-ui-on-success: #ffffff;
    --oa-ui-warning-solid: #9a6700;
    --oa-ui-on-warning: #ffffff;
    --oa-ui-danger-solid: #cf222e;
    --oa-ui-on-danger: #ffffff;
    --oa-ui-info-solid: #0969da;
    --oa-ui-on-info: #ffffff;

    /* Layout. */
    --oa-topbar-height: 48px;
    --oa-ui-nav-width: 224px;
    --oa-ui-nav-width-collapsed: 56px;
    --oa-ui-content-max: 1440px;
    --oa-ui-page-pad-x: var(--oa-ui-space-5);
    --oa-ui-page-pad-y: var(--oa-ui-space-4);

    /* The top bar (the same dark bar in both themes). */
    --oa-chrome-bg: #1f2937;
    --oa-chrome-fg: #f9fafb;
    --oa-chrome-muted: #cbd5e1;
    --oa-chrome-hover: rgba(255, 255, 255, 0.12);

    /* Aliases kept for the page rules written before the design system (M6/M6b). */
    --oa-ui-muted: var(--oa-ui-text-muted);
    --oa-ui-ok: var(--oa-ui-success);
    --oa-ui-warn: var(--oa-ui-warning);
    --oa-ui-fail-bg: var(--oa-ui-danger-bg);
}

/* ==== 2. Dark mode (the toggle in the top bar; stored in the oa-theme cookie, rendered on <html> by App) ==== */

:root[data-theme="dark"] {
    color-scheme: dark;

    --oa-ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --oa-ui-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6);

    --oa-ui-bg: #0d1117;
    --oa-ui-surface: #161b22;
    --oa-ui-surface-muted: #1c2128;
    --oa-ui-surface-hover: #262c36;
    --oa-ui-border: #3d444d;
    --oa-ui-border-soft: #2a3038;
    --oa-ui-text: #e6edf3;
    --oa-ui-text-muted: #a3adb8;
    --oa-ui-text-subtle: #9198a1;

    --oa-ui-accent: #1f6feb;
    --oa-ui-accent-hover: #388bfd;
    --oa-ui-accent-soft: rgba(56, 139, 253, 0.18);
    --oa-ui-on-accent: #ffffff;
    --oa-ui-link: #58a6ff;
    --oa-ui-focus: #58a6ff;

    --oa-ui-success: #3fb950;
    --oa-ui-success-bg: rgba(46, 160, 67, 0.18);
    --oa-ui-success-border: rgba(46, 160, 67, 0.45);
    --oa-ui-warning: #d29922;
    --oa-ui-warning-bg: rgba(187, 128, 9, 0.18);
    --oa-ui-warning-border: rgba(187, 128, 9, 0.5);
    --oa-ui-danger: #ff7b72;
    --oa-ui-danger-bg: rgba(248, 81, 73, 0.16);
    --oa-ui-danger-border: rgba(248, 81, 73, 0.45);
    --oa-ui-info: #58a6ff;
    --oa-ui-info-bg: rgba(56, 139, 253, 0.16);
    --oa-ui-info-border: rgba(56, 139, 253, 0.45);
    --oa-ui-neutral: #a3adb8;
    --oa-ui-neutral-bg: rgba(110, 118, 129, 0.22);
    --oa-ui-neutral-border: #3d444d;
    --oa-ui-mark-bg: rgba(187, 128, 9, 0.45);
    --oa-ui-mark-border: #d29922;
    --oa-ui-diff-added: rgba(46, 160, 67, 0.22);
    --oa-ui-diff-removed: rgba(248, 81, 73, 0.2);

    /* Filled controls, dark: darker fills so the white label stays AA (4.6:1 each); outlined and text buttons use the
       light tone text colours above (section 3). */
    --oa-ui-success-solid: #238636;
    --oa-ui-on-success: #ffffff;
    --oa-ui-warning-solid: #9e6a03;
    --oa-ui-on-warning: #ffffff;
    --oa-ui-danger-solid: #da3633;
    --oa-ui-on-danger: #ffffff;
    --oa-ui-info-solid: #1f6feb;
    --oa-ui-on-info: #ffffff;

    --oa-chrome-bg: #010409;
    --oa-chrome-fg: #f0f6fc;
    --oa-chrome-muted: #b1bac4;
    --oa-chrome-hover: rgba(255, 255, 255, 0.1);

    /* Radzen's material palette, dark (values of the package's material-dark theme). */
    --rz-base: #383838;
    --rz-base-50: #e0e0e0;
    --rz-base-100: #a0a0a0;
    --rz-base-200: #6c6c6c;
    --rz-base-300: #545454;
    --rz-base-400: #383838;
    --rz-base-500: #333333;
    --rz-base-600: #2e2e2e;
    --rz-base-700: #252525;
    --rz-base-800: #1e1e1e;
    --rz-base-900: #121212;
    --rz-base-light: #a0a0a0;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #252525;
    --rz-base-darker: #000000;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #121212;
    --rz-on-base-lighter: #121212;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-grid-right-cell-border: var(--rz-border-base-600);
    --rz-grid-header-cell-border: var(--rz-border-base-600);
}

/* ==== 3. Radzen re-pointed at the tokens (both themes): no uppercase, the accent, the 14 px base ==== */

:root {
    --rz-text-font-family: var(--oa-ui-font-sans);
    --rz-primary: var(--oa-ui-accent);
    --rz-primary-light: var(--oa-ui-accent-hover);
    --rz-primary-lighter: var(--oa-ui-accent-soft);
    --rz-primary-dark: var(--oa-ui-accent-hover);
    --rz-primary-darker: var(--oa-ui-accent-hover);
    --rz-on-primary: var(--oa-ui-on-accent);
    --rz-on-primary-lighter: var(--oa-ui-link);
    --rz-secondary: var(--oa-ui-accent);
    --rz-secondary-lighter: var(--oa-ui-accent-soft);
    --rz-on-secondary-lighter: var(--oa-ui-text);
    --rz-base-background-color: var(--oa-ui-surface);
    --rz-body-background-color: var(--oa-ui-bg);
    --rz-text-title-color: var(--oa-ui-text);
    --rz-text-color: var(--oa-ui-text);
    --rz-text-secondary-color: var(--oa-ui-text-muted);
    --rz-text-tertiary-color: var(--oa-ui-text-subtle);
    --rz-outline-color: var(--oa-ui-focus);
    --rz-border-radius: var(--oa-ui-radius-sm);
    --rz-text-button-text-transform: none;
    --rz-text-button-letter-spacing: normal;
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: normal;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: normal;
    --rz-grid-cell-font-size: var(--oa-ui-font-size);
    --rz-grid-header-font-size: var(--oa-ui-font-size-small);

    /* The semantic colours (M6c fixer 3): Radzen's material palette (#4caf50 / #f44336 ... with white labels, 2.8:1 and
       3.7:1) is replaced by the tokens - a filled control uses the tone's -solid fill and its -on- label, the soft shade
       (outlined hover, notifications) the tone's soft fill and text colour; all AA in both themes. */
    --rz-success: var(--oa-ui-success-solid);
    --rz-success-light: var(--oa-ui-success-solid);
    --rz-success-lighter: var(--oa-ui-success-bg);
    --rz-success-dark: var(--oa-ui-success-solid);
    --rz-success-darker: var(--oa-ui-success-solid);
    --rz-on-success: var(--oa-ui-on-success);
    --rz-on-success-light: var(--oa-ui-on-success);
    --rz-on-success-lighter: var(--oa-ui-success);
    --rz-on-success-dark: var(--oa-ui-on-success);
    --rz-on-success-darker: var(--oa-ui-on-success);
    --rz-warning: var(--oa-ui-warning-solid);
    --rz-warning-light: var(--oa-ui-warning-solid);
    --rz-warning-lighter: var(--oa-ui-warning-bg);
    --rz-warning-dark: var(--oa-ui-warning-solid);
    --rz-warning-darker: var(--oa-ui-warning-solid);
    --rz-on-warning: var(--oa-ui-on-warning);
    --rz-on-warning-light: var(--oa-ui-on-warning);
    --rz-on-warning-lighter: var(--oa-ui-warning);
    --rz-on-warning-dark: var(--oa-ui-on-warning);
    --rz-on-warning-darker: var(--oa-ui-on-warning);
    --rz-danger: var(--oa-ui-danger-solid);
    --rz-danger-light: var(--oa-ui-danger-solid);
    --rz-danger-lighter: var(--oa-ui-danger-bg);
    --rz-danger-dark: var(--oa-ui-danger-solid);
    --rz-danger-darker: var(--oa-ui-danger-solid);
    --rz-on-danger: var(--oa-ui-on-danger);
    --rz-on-danger-light: var(--oa-ui-on-danger);
    --rz-on-danger-lighter: var(--oa-ui-danger);
    --rz-on-danger-dark: var(--oa-ui-on-danger);
    --rz-on-danger-darker: var(--oa-ui-on-danger);
    --rz-info: var(--oa-ui-info-solid);
    --rz-info-light: var(--oa-ui-info-solid);
    --rz-info-lighter: var(--oa-ui-info-bg);
    --rz-info-dark: var(--oa-ui-info-solid);
    --rz-info-darker: var(--oa-ui-info-solid);
    --rz-on-info: var(--oa-ui-on-info);
    --rz-on-info-light: var(--oa-ui-on-info);
    --rz-on-info-lighter: var(--oa-ui-info);
    --rz-on-info-dark: var(--oa-ui-on-info);
    --rz-on-info-darker: var(--oa-ui-on-info);
    --rz-notification-container-background-color: var(--oa-ui-surface);
    --rz-notification-success-color: var(--oa-ui-success);
    --rz-notification-success-background-color: var(--oa-ui-success-bg);
    --rz-notification-success-icon-color: var(--oa-ui-success);
    --rz-notification-warning-color: var(--oa-ui-warning);
    --rz-notification-warning-background-color: var(--oa-ui-warning-bg);
    --rz-notification-warning-icon-color: var(--oa-ui-warning);
    --rz-notification-error-color: var(--oa-ui-danger);
    --rz-notification-error-background-color: var(--oa-ui-danger-bg);
    --rz-notification-error-icon-color: var(--oa-ui-danger);
    --rz-notification-info-color: var(--oa-ui-info);
    --rz-notification-info-background-color: var(--oa-ui-info-bg);
    --rz-notification-info-icon-color: var(--oa-ui-info);
}

/* Outlined and text buttons of a tone write the tone's TEXT colour on the surface (the -solid fill is too dark for text
   on the dark surface); their border stays the fill (3:1 for a control's outline). */
.rz-button.rz-variant-outlined.rz-success.rz-shade-default,
.rz-button.rz-variant-text.rz-success.rz-shade-default {
    color: var(--oa-ui-success);
}

.rz-button.rz-variant-outlined.rz-warning.rz-shade-default,
.rz-button.rz-variant-text.rz-warning.rz-shade-default {
    color: var(--oa-ui-warning);
}

.rz-button.rz-variant-outlined.rz-danger.rz-shade-default,
.rz-button.rz-variant-text.rz-danger.rz-shade-default {
    color: var(--oa-ui-danger);
}

.rz-button.rz-variant-outlined.rz-info.rz-shade-default,
.rz-button.rz-variant-text.rz-info.rz-shade-default {
    color: var(--oa-ui-info);
}

.rz-button {
    font-size: var(--oa-ui-font-size);
    font-weight: var(--oa-ui-weight-medium);
    text-transform: none;
    letter-spacing: normal;
}

.rz-button.rz-button-sm,
.rz-button.rz-button-xs {
    font-size: var(--oa-ui-font-size-small);
}

.rz-button:focus-visible,
.rz-textbox:focus-visible,
.rz-dropdown:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.rz-card,
.rz-dialog,
.rz-dialog-content,
.rz-dialog-titlebar {
    background-color: var(--oa-ui-surface);
    color: var(--oa-ui-text);
}

.rz-textbox,
.rz-textarea,
.rz-dropdown,
input.rz-textbox,
select.rz-dropdown {
    background-color: var(--oa-ui-surface);
    color: var(--oa-ui-text);
    border-color: var(--oa-ui-border);
    font-size: var(--oa-ui-font-size);
}

/* ==== 4. Base ==== */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--oa-ui-font-sans);
    color: var(--oa-ui-text);
    background: var(--oa-ui-bg);
}

a,
.btn-link {
    color: var(--oa-ui-link);
}

:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.oa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==== 5. Shell: the 48 px top bar, then the left navigation (admin pages) and the content ==== */

.oa-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.oa-topbar {
    flex: 0 0 var(--oa-topbar-height);
    height: var(--oa-topbar-height);
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-4);
    padding: 0 var(--oa-ui-space-4);
    background: var(--oa-chrome-bg);
    color: var(--oa-chrome-fg);
    box-sizing: border-box;
    position: relative;
    z-index: 900;
    font-size: var(--oa-ui-font-size);
}

.oa-brand,
.oa-brand:hover {
    color: var(--oa-chrome-fg);
    font-weight: var(--oa-ui-weight-semibold);
    font-size: 17px;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.oa-nav {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-nav-link {
    display: block;
    padding: 6px 10px;
    border-radius: var(--oa-ui-radius-sm);
    color: var(--oa-chrome-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.oa-nav-link:hover,
.oa-nav-link:focus-visible,
.oa-nav-link.active {
    color: var(--oa-chrome-fg);
    background: var(--oa-chrome-hover);
}

.oa-topbar-account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-3);
    min-width: 0;
}

.oa-account-link,
.oa-account-link:hover {
    color: var(--oa-chrome-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-account-link:hover {
    color: var(--oa-chrome-fg);
}

/* On the account pages the e-mail link is the current page (M6c step 4). */
.oa-account-link[aria-current="page"] {
    padding: 4px 8px;
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-chrome-hover);
    color: var(--oa-chrome-fg);
}

.oa-logout {
    margin: 0;
}

/* The top bar's Logout (chrome colour on the dark bar; in-page text buttons use .oa-inline-link). */
.oa-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--oa-chrome-muted);
    cursor: pointer;
    font: inherit;
}

.oa-link-button:hover {
    color: var(--oa-chrome-fg);
}

/* The light/dark toggle (js/oa-shell.js flips data-theme and the oa-theme cookie). */
.oa-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--oa-ui-radius);
    background: none;
    color: var(--oa-chrome-muted);
    cursor: pointer;
}

.oa-theme-toggle:hover,
.oa-theme-toggle:focus-visible {
    color: var(--oa-chrome-fg);
    background: var(--oa-chrome-hover);
}

.oa-theme-toggle .rzi {
    font-size: 20px;
}

.oa-theme-toggle .oa-theme-icon-light {
    display: none;
}

:root[data-theme="dark"] .oa-theme-toggle .oa-theme-icon-light {
    display: inline-flex;
}

:root[data-theme="dark"] .oa-theme-toggle .oa-theme-icon-dark {
    display: none;
}

.oa-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.oa-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    position: relative;
    background: var(--oa-ui-bg);
    container-type: inline-size;
    container-name: oa-content;
}

/* The left navigation of the admin pages (Layout/AdminNav): collapsible to icons, the active item highlighted. */
.oa-sidenav {
    flex: 0 0 var(--oa-ui-nav-width);
    width: var(--oa-ui-nav-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-3) var(--oa-ui-space-2);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--oa-ui-surface);
    border-right: 1px solid var(--oa-ui-border);
    font-size: var(--oa-ui-font-size);
}

.oa-sidenav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oa-sidenav-heading {
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3) var(--oa-ui-space-1);
    color: var(--oa-ui-text-subtle);
    font-size: var(--oa-ui-font-size-xs);
    font-weight: var(--oa-ui-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.oa-sidenav-link,
.oa-sidenav-toggle {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-3);
    min-height: 36px;
    padding: 0 var(--oa-ui-space-3);
    border: 0;
    border-radius: var(--oa-ui-radius);
    background: none;
    color: var(--oa-ui-text);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.oa-sidenav-link:hover,
.oa-sidenav-toggle:hover {
    background: var(--oa-ui-surface-hover);
    color: var(--oa-ui-text);
}

.oa-sidenav-link.is-active {
    background: var(--oa-ui-accent-soft);
    color: var(--oa-ui-link);
    font-weight: var(--oa-ui-weight-semibold);
    box-shadow: inset 3px 0 0 var(--oa-ui-accent);
}

.oa-sidenav-link .rzi,
.oa-sidenav-toggle .rzi {
    flex: 0 0 auto;
    font-size: 20px;
    color: inherit;
}

.oa-sidenav-toggle {
    margin-top: auto;
    color: var(--oa-ui-text-muted);
}

.oa-sidenav-toggle .oa-sidenav-collapse-icon-closed {
    display: none;
}

:root[data-nav="collapsed"] .oa-sidenav {
    flex-basis: var(--oa-ui-nav-width-collapsed);
    width: var(--oa-ui-nav-width-collapsed);
}

:root[data-nav="collapsed"] .oa-sidenav-label,
:root[data-nav="collapsed"] .oa-sidenav-heading {
    display: none;
}

:root[data-nav="collapsed"] .oa-sidenav-link,
:root[data-nav="collapsed"] .oa-sidenav-toggle {
    justify-content: center;
    padding: 0;
}

:root[data-nav="collapsed"] .oa-sidenav-toggle .oa-sidenav-collapse-icon-open {
    display: none;
}

:root[data-nav="collapsed"] .oa-sidenav-toggle .oa-sidenav-collapse-icon-closed {
    display: inline-flex;
}

/* Narrow windows: the navigation shows icons only. */
@media (max-width: 900px) {
    .oa-sidenav {
        flex-basis: var(--oa-ui-nav-width-collapsed);
        width: var(--oa-ui-nav-width-collapsed);
    }

    .oa-sidenav-label,
    .oa-sidenav-heading,
    .oa-sidenav-toggle {
        display: none;
    }

    .oa-sidenav-link {
        justify-content: center;
        padding: 0;
    }
}

/* Template pages (Account, Error, NotFound) get the template's padding; OneAgent pages lay themselves out. */
.oa-content {
    padding: 18px var(--oa-ui-space-5);
}

.oa-placeholder {
    padding: var(--oa-ui-space-5);
}

/* ==== 6. Page frame (Ui/AppPage): breadcrumbs, header with status + key facts + actions, help, body ==== */

.oa-page,
.oa-admin-page {
    box-sizing: border-box;
    max-width: var(--oa-ui-content-max);
    min-width: 0;
    padding: var(--oa-ui-page-pad-y) var(--oa-ui-page-pad-x) var(--oa-ui-space-6);
    font-size: var(--oa-ui-font-size);
    line-height: var(--oa-ui-line-height);
    color: var(--oa-ui-text);
}

.oa-page--wide {
    max-width: none;
}

.oa-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin: 0 0 var(--oa-ui-space-2);
    padding: 0;
    list-style: none;
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-breadcrumbs li + li::before {
    content: "\203A";
    color: var(--oa-ui-text-subtle);
    padding-right: var(--oa-ui-space-1);
}

.oa-breadcrumbs a {
    color: var(--oa-ui-link);
    text-decoration: none;
}

.oa-breadcrumbs a:hover {
    text-decoration: underline;
}

.oa-breadcrumbs [aria-current="page"] {
    color: var(--oa-ui-text);
    font-weight: var(--oa-ui-weight-medium);
    overflow-wrap: anywhere;
}

.oa-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin-bottom: var(--oa-ui-space-4);
}

.oa-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-3);
    min-width: 0;
}

.oa-page-title,
.oa-page h1,
.oa-admin-page h1 {
    margin: 0;
    font-size: var(--oa-ui-font-size-h1);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: var(--oa-ui-line-height-tight);
    overflow-wrap: anywhere;
}

.oa-page-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-page-subtitle {
    grid-column: 1 / -1;
    margin: 0;
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

.oa-page-facts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-5);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    min-width: 0;
}

.oa-page-help {
    margin: 0 0 var(--oa-ui-space-4);
    max-width: var(--oa-ui-measure);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text-muted);
}

.oa-page-help > summary {
    cursor: pointer;
    color: var(--oa-ui-text);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-page-help-body {
    margin-top: var(--oa-ui-space-2);
}

.oa-page-help-body p {
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-page-body {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-4);
    min-width: 0;
}

/* Headings inside pages written before the design system. */
.oa-admin-page h2 {
    font-size: var(--oa-ui-font-size-h2);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-admin-page h3 {
    font-size: var(--oa-ui-font-size-h3);
    font-weight: var(--oa-ui-weight-semibold);
    margin: var(--oa-ui-space-3) 0 var(--oa-ui-space-2);
}

.oa-admin-page h4,
.oa-admin-page h5 {
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
    margin: var(--oa-ui-space-3) 0 var(--oa-ui-space-2);
}

/* Inline code on admin pages: the token colours, not Bootstrap's pink. */
.oa-page code,
.oa-admin-page code {
    padding: 0 4px;
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-text);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    overflow-wrap: anywhere;
}

/* Section (Ui/Section): a titled card. */
.oa-section {
    min-width: 0;
    box-sizing: border-box;
    padding: var(--oa-ui-space-4) var(--oa-ui-space-5);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface);
    box-shadow: var(--oa-ui-shadow-1);
}

.oa-section--plain {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.oa-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin-bottom: var(--oa-ui-space-3);
}

details.oa-section > summary.oa-section-header {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}

details.oa-section > summary.oa-section-header::-webkit-details-marker {
    display: none;
}

details.oa-section[open] > summary.oa-section-header {
    margin-bottom: var(--oa-ui-space-3);
}

.oa-section-heading {
    min-width: 0;
}

.oa-section-title {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: 0;
    font-size: var(--oa-ui-font-size-h2);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: var(--oa-ui-line-height-tight);
}

h3.oa-section-title {
    font-size: var(--oa-ui-font-size-h3);
}

h4.oa-section-title {
    font-size: var(--oa-ui-font-size-h4);
}

.oa-section-chevron {
    font-size: 20px;
    color: var(--oa-ui-text-muted);
    transition: transform 0.15s ease;
}

details.oa-section[open] .oa-section-chevron {
    transform: rotate(90deg);
}

.oa-section-description {
    margin: var(--oa-ui-space-1) 0 0;
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

.oa-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-section-body {
    min-width: 0;
}

/* ==== 7. Shared components (Components/Ui) ==== */

/* Status badge: one mapping status -> tone + icon + human label (StatusStyles); never colour alone. */
.oa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    max-width: 100%;
    padding: 1px 8px 1px 6px;
    border: 1px solid var(--oa-ui-neutral-border);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-neutral-bg);
    color: var(--oa-ui-neutral);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.oa-status-badge-icon.rzi {
    font-size: 16px;
    color: inherit;
}

.oa-status-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-tone-success {
    color: var(--oa-ui-success);
    background: var(--oa-ui-success-bg);
    border-color: var(--oa-ui-success-border);
}

.oa-tone-warning {
    color: var(--oa-ui-warning);
    background: var(--oa-ui-warning-bg);
    border-color: var(--oa-ui-warning-border);
}

.oa-tone-danger {
    color: var(--oa-ui-danger);
    background: var(--oa-ui-danger-bg);
    border-color: var(--oa-ui-danger-border);
}

.oa-tone-info {
    color: var(--oa-ui-info);
    background: var(--oa-ui-info-bg);
    border-color: var(--oa-ui-info-border);
}

.oa-tone-neutral {
    color: var(--oa-ui-neutral);
    background: var(--oa-ui-neutral-bg);
    border-color: var(--oa-ui-neutral-border);
}

/* A small CSS spinner (badges, loading states, progress): no animation when the user asked for reduced motion. */
.oa-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: oa-spin 0.8s linear infinite;
    vertical-align: middle;
}

.oa-spinner--large {
    width: 20px;
    height: 20px;
}

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

@media (prefers-reduced-motion: reduce) {
    .oa-spinner {
        animation-duration: 3s;
    }

    .oa-section-chevron {
        transition: none;
    }
}

/* Empty, loading and error states (Ui/EmptyState, LoadingState, ErrorState). */
.oa-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-5);
    border: 1px dashed var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text);
    min-width: 0;
}

.oa-state--compact {
    padding: var(--oa-ui-space-3) var(--oa-ui-space-4);
}

.oa-state--loading {
    flex-direction: row;
    align-items: center;
    border-style: solid;
    border-color: var(--oa-ui-border-soft);
    color: var(--oa-ui-text-muted);
}

.oa-state--error {
    border-style: solid;
    border-color: var(--oa-ui-danger-border);
    background: var(--oa-ui-danger-bg);
}

.oa-state-icon.rzi {
    font-size: 28px;
    color: var(--oa-ui-text-subtle);
}

.oa-state--error .oa-state-icon.rzi {
    color: var(--oa-ui-danger);
}

.oa-state-title {
    margin: 0;
    font-size: var(--oa-ui-font-size-h3);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-state--compact .oa-state-title {
    font-size: var(--oa-ui-font-size);
}

.oa-state-text {
    margin: 0;
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

.oa-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-top: var(--oa-ui-space-1);
}

/* Key/value facts (Ui/KeyValueList). */
.oa-kv {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin: 0;
    min-width: 0;
}

.oa-kv-row {
    display: contents;
}

.oa-kv dt {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    color: var(--oa-ui-text-muted);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-kv dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

@container oa-content (min-width: 1100px) {
    .oa-kv--2 {
        grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) minmax(8rem, max-content) minmax(0, 1fr);
    }
}

/* JSON (Ui/JsonView) and machine text (Ui/CodeText): wrapping monospace, never one long line. */
.oa-json {
    min-width: 0;
    max-width: 100%;
}

.oa-json-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-json-title {
    font-weight: var(--oa-ui-weight-semibold);
    color: var(--oa-ui-text);
}

.oa-json-pre,
.oa-code-block {
    box-sizing: border-box;
    margin: 0;
    max-width: 100%;
    max-height: 420px;
    overflow: auto;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-text);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

.oa-json-pre mark.oa-json-hl {
    background: var(--oa-ui-mark-bg);
    color: inherit;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--oa-ui-mark-border);
}

.oa-code {
    padding: 0 4px;
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-surface-muted);
    border: 1px solid var(--oa-ui-border-soft);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    overflow-wrap: anywhere;
    word-break: normal;
    color: var(--oa-ui-text);
}

/* Step wizard (Ui/StepWizard): numbered steps whose state comes from the data. */
.oa-wizard {
    min-width: 0;
}

.oa-wizard-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2);
    margin: 0 0 var(--oa-ui-space-3);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.oa-wizard-step {
    flex: 1 1 180px;
    min-width: 0;
}

.oa-wizard-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--oa-ui-space-2);
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.oa-wizard-button:hover:not(:disabled) {
    background: var(--oa-ui-surface-hover);
}

.oa-wizard-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.oa-wizard-number {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--oa-ui-border);
    color: var(--oa-ui-text-muted);
    font-weight: var(--oa-ui-weight-bold);
    font-size: var(--oa-ui-font-size-small);
}

.oa-wizard-number .rzi {
    font-size: 18px;
}

.oa-wizard-title {
    font-weight: var(--oa-ui-weight-semibold);
    overflow-wrap: anywhere;
}

.oa-wizard-state {
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
    overflow-wrap: anywhere;
}

/* M6d: what a step still needs, one line per part ("Explainer: choose a version (v1 active, v2 proposed)"). */
.oa-wizard-pending {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text);
    overflow-wrap: anywhere;
}

.oa-wizard-pending-line::before {
    content: "\2022  ";
    color: var(--oa-ui-warning);
}

.oa-wizard-step--done .oa-wizard-number {
    border-color: var(--oa-ui-success);
    background: var(--oa-ui-success-bg);
    color: var(--oa-ui-success);
}

.oa-wizard-step--running .oa-wizard-number {
    border-color: var(--oa-ui-info);
    color: var(--oa-ui-info);
}

.oa-wizard-step--failed .oa-wizard-number {
    border-color: var(--oa-ui-danger);
    background: var(--oa-ui-danger-bg);
    color: var(--oa-ui-danger);
}

.oa-wizard-step--failed .oa-wizard-state {
    color: var(--oa-ui-danger);
}

.oa-wizard-step--current .oa-wizard-number {
    border-color: var(--oa-ui-accent);
    color: var(--oa-ui-link);
}

.oa-wizard-step.is-selected .oa-wizard-button {
    border-color: var(--oa-ui-accent);
    box-shadow: inset 0 0 0 1px var(--oa-ui-accent);
    background: var(--oa-ui-accent-soft);
}

.oa-wizard-continue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: 0 0 var(--oa-ui-space-3);
    color: var(--oa-ui-text-muted);
}

/* Action button (Ui/ActionButton): busy state, result line, disabled reason. */
.oa-action {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    max-width: 100%;
}

.oa-action-result {
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-action-result--ok {
    color: var(--oa-ui-success);
}

.oa-action-result--failed {
    color: var(--oa-ui-danger);
}

/* The link to the place to fix a failed action (ActionResult.FixHref / FixText). */
.oa-action-fix {
    margin-left: var(--oa-ui-space-1);
    color: var(--oa-ui-link);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-action-reason {
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

/* Confirmation dialog (Ui/ConfirmDialog). */
.oa-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-3);
    font-size: var(--oa-ui-font-size);
    line-height: var(--oa-ui-line-height);
}

.oa-confirm-message {
    margin: 0;
    white-space: pre-line;
}

.oa-confirm-typed {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
}

.oa-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--oa-ui-space-2);
}

/* Toolbar and filter bar (Ui/Toolbar, Ui/FilterBar). */
.oa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-left: auto;
}

.oa-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--oa-ui-space-3);
    padding: var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    min-width: 0;
}

.oa-filterbar label {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-filterbar label.oa-check {
    flex-direction: row;
    align-items: center;
    padding-bottom: 6px;
}

/* Copy button (Ui/CopyButton). */
.oa-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    padding: 2px 6px;
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text-muted);
    font: inherit;
    font-size: var(--oa-ui-font-size-xs);
    cursor: pointer;
    white-space: nowrap;
}

.oa-copy:hover {
    color: var(--oa-ui-text);
    background: var(--oa-ui-surface-hover);
}

.oa-copy .rzi {
    font-size: 15px;
}

.oa-copy--done {
    color: var(--oa-ui-success);
}

/* Help tip (Ui/HelpTip): an (i) whose explanation shows on hover and keyboard focus (CSS only). */
.oa-helptip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.oa-helptip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--oa-ui-text-subtle);
    cursor: help;
}

.oa-helptip-button:hover,
.oa-helptip-button:focus-visible {
    color: var(--oa-ui-link);
}

.oa-helptip-button .rzi {
    font-size: 17px;
}

.oa-helptip-bubble {
    position: absolute;
    z-index: 950;
    top: calc(100% + 6px);
    left: -8px;
    width: max-content;
    max-width: min(340px, 80vw);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    box-shadow: var(--oa-ui-shadow-2);
    color: var(--oa-ui-text);
    font-size: var(--oa-ui-font-size-small);
    font-weight: normal;
    line-height: var(--oa-ui-line-height);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    display: none;
}

/* Shown on hover and keyboard focus. Hidden bubbles take no space (display: none), so a tip near the right edge never
   widens the page (M6c step 4: a hidden bubble gave /sites/add a horizontal scrollbar); the button's aria-describedby
   still names the hidden text. */
.oa-helptip:hover .oa-helptip-bubble,
.oa-helptip:focus-within .oa-helptip-bubble {
    display: block;
}

.oa-helptip-bubble strong {
    display: block;
    margin-bottom: 2px;
}

/* Tabs (Ui/TabStrip): headers only; the owner renders the selected tab below in .oa-tab-panel. */
.oa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--oa-ui-space-1);
    border-bottom: 1px solid var(--oa-ui-border);
    min-width: 0;
}

.oa-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    padding: 10px var(--oa-ui-space-3);
    border: 0;
    border-radius: var(--oa-ui-radius) var(--oa-ui-radius) 0 0;
    background: none;
    color: var(--oa-ui-text-muted);
    font: inherit;
    font-weight: var(--oa-ui-weight-medium);
    cursor: pointer;
    white-space: nowrap;
}

.oa-tab:hover {
    color: var(--oa-ui-text);
    background: var(--oa-ui-surface-hover);
}

.oa-tab.is-selected {
    color: var(--oa-ui-link);
}

.oa-tab.is-selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--oa-ui-accent);
}

.oa-tab-badge {
    padding: 0 6px;
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-neutral-bg);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
}

.oa-tab-panel {
    min-width: 0;
    max-width: 100%;
    padding-top: var(--oa-ui-space-4);
}

/* Live progress (Ui/ProgressPanel) and the activity list (Ui/ActivityList). */
.oa-progress-panel {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-3) var(--oa-ui-space-4);
    border: 1px solid var(--oa-ui-info-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-info-bg);
    min-width: 0;
}

.oa-progress-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    color: var(--oa-ui-text);
}

.oa-progress-head .oa-spinner {
    color: var(--oa-ui-info);
}

/* The live region of the panel: what runs and its state (the ticking elapsed time stays outside it). */
.oa-progress-live {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-progress-elapsed {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-progress-hint {
    margin: 0;
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-progress-panel .rz-progressbar {
    max-width: 420px;
}

.oa-activity {
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--oa-ui-space-3);
    align-items: center;
    padding: var(--oa-ui-space-2) 0;
    border-bottom: 1px solid var(--oa-ui-border-soft);
}

.oa-activity-what {
    min-width: 0;
    overflow-wrap: anywhere;
}

.oa-activity-detail {
    display: block;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-activity-meta {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    white-space: nowrap;
}

/* Numbers in tables and facts: right-aligned, tabular digits. */
.oa-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==== 8. Tables (Ui/DataTable): compact 14 px, wrapping cells, sticky header, scroll inside the frame ==== */

.oa-grid {
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.oa-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-2);
}

.oa-grid-search {
    width: 16rem;
    max-width: 100%;
    font-size: var(--oa-ui-font-size);
}

.oa-grid-total {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    margin-left: auto;
}

/* A small table (TableMode Auto with at most 10 rows, or Compact): no toolbar until "Table tools" is clicked. */
.oa-grid-tools-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.oa-grid-loading {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-3);
    color: var(--oa-ui-text-muted);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
}

.oa-grid-error {
    margin-bottom: var(--oa-ui-space-2);
}

.oa-grid-frame {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--oa-ui-radius);
}

.oa-grid .rz-data-grid {
    font-size: var(--oa-ui-font-size);
    min-width: 0;
    border-color: var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
}

/* Long grids scroll inside the grid with the header kept in view. */
.oa-grid .rz-data-grid-data {
    max-height: 70vh;
    overflow: auto;
}

.oa-grid .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--oa-ui-surface-muted);
}

.oa-grid {
    --rz-grid-cell-font-size: var(--oa-ui-font-size);
    --rz-grid-header-font-size: var(--oa-ui-font-size-small);
}

/* Cells wrap (long text, URLs, JSON) instead of being cut with an ellipsis or running into the next one. */
.oa-grid .rz-grid-table td .rz-cell-data,
.oa-grid .rz-grid-table td .rz-cell-data.rz-text-truncate {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: clip;
    overflow: visible;
}

.oa-grid .rz-grid-table th .rz-column-title-content.rz-text-truncate {
    white-space: normal;
    overflow-wrap: normal;
    text-overflow: clip;
}

.oa-grid .rz-grid-table th .rz-column-title-content {
    font-weight: var(--oa-ui-weight-semibold);
    color: var(--oa-ui-text);
}

/* Quiet headers: the neutral sort arrow and the filter icon show on hover/focus only (an active sort or filter always shows). */
.oa-grid .rz-grid-table th .rz-sortable-column-icon.rzi-sort {
    display: none;
}

.oa-grid .rz-grid-table th:hover .rz-sortable-column-icon.rzi-sort,
.oa-grid .rz-grid-table th:focus-within .rz-sortable-column-icon.rzi-sort {
    display: inline-block;
}

.oa-grid .rz-grid-table th .rz-grid-filter-icon {
    font-size: 16px;
    width: 20px;
    min-width: 20px;
    margin-right: 4px;
    opacity: 0;
}

.oa-grid .rz-grid-table th:hover .rz-grid-filter-icon,
.oa-grid .rz-grid-table th:focus-within .rz-grid-filter-icon,
.oa-grid .rz-grid-table th .rz-grid-filter-icon.rz-grid-filter-active {
    opacity: 1;
}

.oa-grid .rz-grid-table td,
.oa-grid .rz-grid-table th {
    vertical-align: top;
}

.oa-grid .rz-grid-table tbody tr:hover > td {
    background: var(--oa-ui-surface-hover);
}

/* One page of rows: the pager adds nothing (the total is in the toolbar). */
.oa-grid--single-page .rz-pager {
    display: none;
}

.oa-grid .rz-grid-table tr.oa-case-failed > td,
.oa-grid .rz-grid-table tr.oa-row-failed > td {
    background: var(--oa-ui-danger-bg);
}

.oa-grid .rz-grid-table tr.oa-row-highlight > td {
    background: var(--oa-ui-warning-bg);
}

/* JSON, URLs and other machine text inside a cell: wrapping monospace blocks. */
.oa-json-cell {
    margin: 0;
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    line-height: 1.4;
    color: var(--oa-ui-text);
    background: var(--oa-ui-surface-muted);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-sm);
    max-height: 320px;
    overflow: auto;
}

.oa-mono,
.oa-url {
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    overflow-wrap: anywhere;
    word-break: normal;
}

/* A wide table scrolls inside its own box, never over its neighbours. */
.oa-table-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

/* Side-by-side panels: a grid whose children may shrink (min-width: 0) and scroll inside themselves; they stack while the
   content area is narrower than ~1180 px (about a 1400 px window with the navigation). Nothing overflows a neighbour. */
.oa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oa-ui-space-4);
    align-items: start;
}

.oa-split > * {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.oa-split-1 {
    grid-template-columns: minmax(0, 1fr);
}

@container oa-content (min-width: 1180px) {
    .oa-split-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oa-split-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==== 9. Page rules written before the design system (M6/M6b); later steps move them onto the components ==== */

.oa-admin-page .rz-tabview,
.oa-admin-page .rz-tabview-panels,
.oa-admin-page .rz-tabview-panel {
    min-width: 0;
    max-width: 100%;
}

.oa-llm-badge {
    margin-left: var(--oa-ui-space-2);
}

.oa-llm-key-meta {
    font-size: var(--oa-ui-font-size-xs);
    color: var(--oa-ui-text-muted);
}

/* The cases table: fixed columns that never exceed the panel. */
.oa-cases-grid .rz-grid-table {
    table-layout: fixed;
    width: 100%;
}

.oa-case-input {
    white-space: normal;
    overflow-wrap: break-word;
}

.oa-case-current {
    margin-top: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
}

.oa-case-pass {
    color: var(--oa-ui-success);
    font-weight: var(--oa-ui-weight-bold);
}

.oa-case-fail {
    color: var(--oa-ui-danger);
    font-weight: var(--oa-ui-weight-bold);
}

.oa-case-reasons {
    margin: var(--oa-ui-space-1) 0 0;
    padding-left: 1.1rem;
    color: var(--oa-ui-danger);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

mark.oa-diff-key {
    background: var(--oa-ui-mark-bg);
    color: inherit;
    border-radius: 2px;
    outline: 1px solid var(--oa-ui-mark-border);
}

/* Long text (models, purpose lists) wraps instead of widening its column. */
.oa-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The LLM providers page (addendum D.3; M6c step 4 rules in section 9c). */
.oa-llm-timeout-warning {
    margin: var(--oa-ui-space-3) 0;
}

.oa-llm-save {
    margin-top: var(--oa-ui-space-3);
}

.oa-llm-seconds {
    width: 7.5rem;
    max-width: 100%;
}

/* Addendum O.7 (M7m): /admin/settings - the "Cards per widget" number. */
.oa-settings-cards {
    width: 7.5rem;
    max-width: 100%;
}

.oa-llm-key-input {
    width: 100%;
}

.oa-llm-key-actions {
    margin-top: var(--oa-ui-space-3);
}

.oa-not-authorized {
    padding: var(--oa-ui-space-5);
    color: var(--oa-ui-danger);
}

/* Site pages (/sites, /sites/add, /sites/{key}; Part 5 §5.4-§5.6). */

.oa-muted {
    color: var(--oa-ui-text-muted);
}

.oa-text-danger,
.oa-bad {
    color: var(--oa-ui-danger);
}

.oa-ok {
    color: var(--oa-ui-success);
}

.oa-warn,
.oa-amber {
    color: var(--oa-ui-warning);
}

/* A note or warning line right under a form field (the BASE_URL pre-fill and mismatch lines). */
.oa-field-note {
    margin-top: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-amber-link {
    color: var(--oa-ui-warning);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-break {
    overflow-wrap: anywhere;
}

.oa-subheading {
    margin: var(--oa-ui-space-4) 0 var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-actions {
    margin: var(--oa-ui-space-3) 0;
}

.oa-field-label {
    display: block;
    margin: var(--oa-ui-space-3) 0 var(--oa-ui-space-1);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-wide-input {
    width: 100%;
    max-width: 720px;
}

.oa-select {
    min-width: 160px;
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
}

.oa-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--oa-ui-space-4);
}

.oa-paste-area,
.oa-raw-input,
.oa-prompt-text {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    color: var(--oa-ui-text);
    background: var(--oa-ui-surface);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-sm);
}

.oa-prompt-counter {
    text-align: right;
    font-size: var(--oa-ui-font-size-xs);
    color: var(--oa-ui-text-muted);
}

.oa-prompt-counter.oa-over {
    color: var(--oa-ui-danger);
}

.oa-prompt-view,
.oa-json-block pre,
.oa-json-inline {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 420px;
    overflow: auto;
    margin: var(--oa-ui-space-1) 0;
    padding: var(--oa-ui-space-2);
    color: var(--oa-ui-text);
    background: var(--oa-ui-surface-muted);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
}

.oa-json-block {
    min-width: 0;
    max-width: 100%;
}

.oa-table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--oa-ui-space-2) 0;
    font-size: var(--oa-ui-font-size);
}

.oa-table th,
.oa-table td {
    border: 1px solid var(--oa-ui-border);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
}

.oa-table tr.oa-highlight td {
    background: var(--oa-ui-warning-bg);
}

.oa-table tr.oa-case-failed td {
    background: var(--oa-ui-danger-bg);
}

.oa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1);
    align-items: center;
    margin: 6px 0;
}

/* The ONE chip rule (recognised words, parameters, the test console's examples); the modifiers below come after it. */
.oa-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    max-width: 100%;
    padding: 2px var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-info-border);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-info-bg);
    color: var(--oa-ui-text);
    font-size: var(--oa-ui-font-size-small);
    min-width: 0;
}

/* Not recognised words: amber next to the blue recognised ones. */
.oa-chip.oa-chip-warn {
    background: var(--oa-ui-warning-bg);
    border-color: var(--oa-ui-warning-border);
}

.oa-errors {
    color: var(--oa-ui-danger);
}

.oa-warnings {
    color: var(--oa-ui-warning);
}

.oa-health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--oa-ui-text-subtle);
    vertical-align: middle;
}

.oa-health-green {
    background: var(--oa-ui-success);
}

.oa-health-amber {
    background: #d4a72c;
}

.oa-health-red {
    background: var(--oa-ui-danger);
}

.oa-status {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

.oa-hints li {
    margin: 6px 0;
}

.oa-empty-message {
    font-size: var(--oa-ui-font-size-h3);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin: var(--oa-ui-space-2) 0;
    font-size: var(--oa-ui-font-size-xs);
}

.oa-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.oa-swatch-color {
    width: 18px;
    height: 18px;
    border-radius: var(--oa-ui-radius-sm);
    border: 1px solid var(--oa-ui-border);
}

.oa-checklist {
    list-style: none;
    padding: 0;
}

.oa-check-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}

.oa-check-line.oa-ok {
    color: var(--oa-ui-success);
}

.oa-check-line.oa-bad {
    color: var(--oa-ui-danger);
}

.oa-check-line.oa-warn {
    color: var(--oa-ui-warning);
}

.oa-prompt-column {
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    min-width: 0;
    background: var(--oa-ui-surface);
}

.oa-prompt-column .oa-prompt-view {
    max-height: 280px;
}

.oa-prompt-column.oa-selected {
    border-color: var(--oa-ui-accent);
    box-shadow: 0 0 0 1px var(--oa-ui-accent);
}

.oa-proposal {
    padding: var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-warning-border);
    border-radius: var(--oa-ui-radius);
}

.oa-set-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.oa-report-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-3);
    align-items: center;
}

.oa-health-bar {
    margin: 6px 0;
    max-width: 640px;
}

.oa-fill {
    min-width: 90px;
}

.oa-fill-bar {
    display: block;
    height: 6px;
    background: var(--oa-ui-info);
    border-radius: 3px;
}

.oa-diff {
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    overflow: auto;
    max-height: 640px;
    background: var(--oa-ui-surface);
}

.oa-diff-row,
.oa-raw-line {
    display: grid;
    grid-template-columns: 3.5rem 3.5rem 1rem 1fr;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.oa-raw-line {
    grid-template-columns: 3.5rem 1fr;
}

.oa-raw {
    max-width: 100%;
    height: 520px;
    overflow: auto;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-xs);
    background: var(--oa-ui-surface);
}

.oa-diff-gutter {
    color: var(--oa-ui-text-subtle);
    text-align: right;
    padding-right: var(--oa-ui-space-2);
    user-select: none;
}

.oa-diff-added {
    background: var(--oa-ui-diff-added);
}

.oa-diff-removed {
    background: var(--oa-ui-diff-removed);
}

.oa-diff-collapsed {
    display: block;
    text-align: center;
    color: var(--oa-ui-text-subtle);
    background: var(--oa-ui-surface-muted);
}

.oa-attempt {
    margin: var(--oa-ui-space-2) 0;
    padding: var(--oa-ui-space-2);
    border-left: 3px solid var(--oa-ui-border);
    min-width: 0;
}

.oa-credential-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    max-width: 720px;
}

.oa-credential-form label {
    flex-basis: 100%;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-credential-input {
    min-width: min(320px, 100%);
    max-width: 100%;
}

.oa-live-confirm p {
    margin-bottom: var(--oa-ui-space-3);
}

.oa-run-detail {
    margin-top: var(--oa-ui-space-3);
    min-width: 0;
}

.oa-setting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-2) 0;
}

/* Test console examples (addendum I). */

.oa-examples-panel {
    margin: var(--oa-ui-space-2) 0 var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    min-width: 0;
    max-width: 100%;
}

.oa-examples {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-example-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
}

.oa-example-group-title {
    font-weight: var(--oa-ui-weight-semibold);
    font-size: var(--oa-ui-font-size-small);
    margin-right: var(--oa-ui-space-1);
    white-space: nowrap;
}

.oa-chip.oa-chip-good {
    background: var(--oa-ui-surface);
    border-color: var(--oa-ui-success-border);
}

.oa-chip.oa-chip-bad {
    background: var(--oa-ui-surface);
    border-color: var(--oa-ui-danger-border);
}

.oa-chip-text {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
    min-width: 0;
}

.oa-chip-text:hover:not(:disabled),
.oa-chip-text:focus-visible {
    text-decoration: underline;
}

.oa-chip-text:disabled,
.oa-chip-delete:disabled {
    cursor: default;
    opacity: 0.6;
}

.oa-chip-category {
    padding: 0 6px;
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-neutral-bg);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    white-space: nowrap;
}

.oa-chip-delete {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--oa-ui-text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.oa-chip-delete:hover:not(:disabled) {
    color: var(--oa-ui-danger);
}

/* An in-page text button (show all, [details], show fewer). Its own class: .oa-link-button is the top bar's Logout. */
.oa-inline-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--oa-ui-link);
    font: inherit;
    font-size: var(--oa-ui-font-size-small);
    cursor: pointer;
}

.oa-inline-link:hover,
.oa-inline-link:focus-visible {
    text-decoration: underline;
}

.oa-example-form {
    margin-top: var(--oa-ui-space-2);
    padding-top: var(--oa-ui-space-2);
    border-top: 1px solid var(--oa-ui-border-soft);
    max-width: 720px;
}

/* M7f item 5: "Add as test example" of a console run - the add form above the result's tabs, on the panel background. */
.oa-run-example {
    margin-bottom: var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    min-width: 0;
}

.oa-run-example .oa-example-form {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.oa-example-form-intro {
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-example-current {
    margin-bottom: var(--oa-ui-space-2);
}

.oa-run-all-refusal,
.oa-pending-refine {
    margin: var(--oa-ui-space-1) 0;
    font-size: var(--oa-ui-font-size-small);
}

.oa-example-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-3);
    margin-bottom: var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
}

.oa-example-results .rz-data-grid-table {
    table-layout: fixed;
}

.oa-verdict-manual {
    color: var(--oa-ui-warning);
}

/* The prompts wizard (addendum K, /sites/{key}?tab=prompts) and the precision badges. A precision with its colour: from
   90 % green, from 70 % amber, else red; grey when not tested. The text always says the value. */
.oa-precision {
    display: inline-block;
    padding: 0 var(--oa-ui-space-2);
    border-radius: var(--oa-ui-radius-pill);
    border: 1px solid transparent;
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
}

.oa-precision-green {
    background: var(--oa-ui-success-bg);
    border-color: var(--oa-ui-success-border);
    color: var(--oa-ui-success);
}

.oa-precision-amber {
    background: var(--oa-ui-warning-bg);
    border-color: var(--oa-ui-warning-border);
    color: var(--oa-ui-warning);
}

.oa-precision-red {
    background: var(--oa-ui-danger-bg);
    border-color: var(--oa-ui-danger-border);
    color: var(--oa-ui-danger);
}

.oa-precision-none {
    background: var(--oa-ui-neutral-bg);
    color: var(--oa-ui-text-muted);
}

.oa-precision-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1);
    text-decoration: none;
}

.oa-prompt-wizard {
    min-width: 0;
    max-width: 100%;
    font-size: var(--oa-ui-font-size);
    line-height: var(--oa-ui-line-height);
}

.oa-wizard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--oa-ui-space-3);
    margin: 0 0 var(--oa-ui-space-3);
}

.oa-wizard-summary-item {
    min-width: 0;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    background: var(--oa-ui-surface);
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
}

.oa-wizard-summary-kind {
    font-weight: var(--oa-ui-weight-bold);
}

.oa-wizard-summary-item .oa-precision {
    align-self: flex-start;
}

.oa-wizard-progress {
    max-width: 320px;
    margin-top: var(--oa-ui-space-1);
}

.oa-errored-cases {
    border: 1px solid var(--oa-ui-danger-border);
    background: var(--oa-ui-danger-bg);
    border-radius: var(--oa-ui-radius);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    margin: var(--oa-ui-space-2) 0;
    overflow-wrap: anywhere;
}

.oa-errored-cases h5 {
    margin: 0 0 var(--oa-ui-space-1);
}

.oa-errored-cases ul {
    margin: 0;
    padding-left: 1.1rem;
}

.oa-case-checks {
    margin: var(--oa-ui-space-1) 0 0;
    padding-left: 0;
    list-style: none;
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-eval-cases-grid .rz-grid-table {
    table-layout: fixed;
    width: 100%;
}

.oa-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
}

.oa-choice {
    margin-right: 0;
    white-space: normal;
}

/* An option of the Activate step: the radio with its label, then the version's test result (outside the label, so its
   buttons never toggle the radio). */
.oa-choice-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
}

/* M6d: the test result of ONE prompt version (Sites/PromptVersionResult), wherever a version is shown - the precision
   badge (a button that opens the run's cases), the date tested, live progress, or "Not tested" + "Test this version". */
.oa-version-result {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.oa-version-result-open {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: var(--oa-ui-radius-pill);
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.oa-version-result-open:hover .oa-precision {
    text-decoration: underline;
}

.oa-version-result-open:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.oa-version-result-date,
.oa-version-result-note {
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-version-result-running {
    display: inline-flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    min-width: 120px;
}

.oa-version-result-running .oa-wizard-progress {
    width: 100%;
    margin-top: 0;
}

.oa-version-result-actions {
    display: inline-flex;
}

.oa-version-result-pair {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
}

.oa-prompt-column-result {
    margin: var(--oa-ui-space-1) 0;
}

/* The Overview's active prompts with their results. */
.oa-active-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    margin: 0 0 var(--oa-ui-space-1);
    padding: 0;
    list-style: none;
}

.oa-active-prompts li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
}

.oa-active-prompt-kind {
    min-width: 7em;
    font-weight: var(--oa-ui-weight-semibold);
}

/* The cases dialog of one run (Sites/PromptRunCasesDialog). */
.oa-run-cases {
    min-width: 0;
}

.oa-run-cases-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

/* ==== 9b. Site pages (M6c step 3: /sites and /sites/{key} on the design system) ==== */

/* A second, smaller line inside a table cell or a card (key · domain, "checked 5 min ago"). */
.oa-cell-sub {
    display: block;
    margin-top: 2px;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-site-link {
    font-weight: var(--oa-ui-weight-semibold);
    text-decoration: none;
}

.oa-site-link:hover {
    text-decoration: underline;
}

/* The site kind (querySearch / structuredApi): a quiet monospace chip, never a status colour. */
.oa-kind {
    display: inline-block;
    padding: 0 var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-text-muted);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-xs);
    line-height: 20px;
    white-space: nowrap;
}

/* The open discovery run under a status badge: a small link on its own line (review defect R3: it no longer wraps). */
.oa-review-link {
    display: block;
    margin-top: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-medium);
    white-space: nowrap;
}

/* A switch with its visible label ("On" / "Off", "Enabled", "Show images"); the reason it is disabled is its tooltip. */
.oa-switch-field {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    white-space: nowrap;
}

.oa-switch-text {
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-medium);
    color: var(--oa-ui-text);
}

.oa-site-switch .oa-switch-text {
    font-size: var(--oa-ui-font-size);
}

/* "Something is running: this list updates by itself." */
.oa-live-note {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-2) 0 0;
    color: var(--oa-ui-info);
    font-size: var(--oa-ui-font-size-small);
}

/* A neutral notice line (a fact about the page, not an error): icon + text, tinted by an optional oa-tone-* class. */
.oa-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--oa-ui-space-2);
    max-width: var(--oa-ui-measure);
    margin: 0 0 var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-info-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-info-bg);
    color: var(--oa-ui-text);
}

.oa-notice .rzi {
    font-size: 18px;
    color: var(--oa-ui-info);
}

.oa-notice.oa-tone-warning {
    border-color: var(--oa-ui-warning-border);
    background: var(--oa-ui-warning-bg);
    color: var(--oa-ui-text);
}

.oa-notice.oa-tone-warning .rzi {
    color: var(--oa-ui-warning);
}

/* The page header's key facts (AppPage Facts): label + value pairs that wrap. */
.oa-fact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
    color: var(--oa-ui-text);
}

.oa-fact-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--oa-ui-text-muted);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-back-link {
    font-weight: var(--oa-ui-weight-medium);
}

/* The Overview's Next step hint (addendum L.0 Help): tone border, icon, what and why, a link to the place. */
.oa-next-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-3) var(--oa-ui-space-4);
    margin-bottom: var(--oa-ui-space-4);
    padding: var(--oa-ui-space-3) var(--oa-ui-space-4);
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--oa-ui-radius-lg);
    color: var(--oa-ui-text);
}

.oa-next-step-icon.rzi {
    font-size: 28px;
}

.oa-next-step.oa-tone-success .oa-next-step-icon { color: var(--oa-ui-success); }
.oa-next-step.oa-tone-warning .oa-next-step-icon { color: var(--oa-ui-warning); }
.oa-next-step.oa-tone-danger .oa-next-step-icon { color: var(--oa-ui-danger); }
.oa-next-step.oa-tone-info .oa-next-step-icon { color: var(--oa-ui-info); }

.oa-next-step-body {
    flex: 1 1 280px;
    min-width: 0;
}

.oa-next-step-title {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-h3);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-next-step-detail {
    margin: var(--oa-ui-space-1) 0 0;
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

.oa-next-step-link {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-link);
    font-weight: var(--oa-ui-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.oa-next-step-link:hover {
    background: var(--oa-ui-surface-hover);
}

/* Sections inside a split never scroll inside themselves (a hidden HelpTip bubble must not add scrollbars). */
.oa-split > .oa-section {
    overflow: visible;
}

.oa-overview > .oa-split,
.oa-overview > .oa-section {
    margin-bottom: var(--oa-ui-space-4);
}

/* A short line under a key/value (a health message, a last error). */
.oa-kv-note {
    flex-basis: 100%;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-kv-json {
    flex: 1 1 100%;
    min-width: 0;
}

.oa-notes {
    margin: 0;
    padding-left: 1.2rem;
    max-width: var(--oa-ui-measure);
}

.oa-section-note {
    margin: 0 0 var(--oa-ui-space-3);
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

/* Small actions inside a table row (Activate vN, View raw, Cancel, Details). */
.oa-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

/* Labelled form fields: the label above its control. */
.oa-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--oa-ui-space-3) var(--oa-ui-space-4);
}

.oa-field {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    min-width: 0;
    max-width: 100%;
}

.oa-field > .oa-field-label {
    margin: 0;
}

/* Versions tab: the toolbar above the table; the paste form takes its own row. */
.oa-versions-toolbar {
    margin-bottom: var(--oa-ui-space-3);
}

.oa-paste-new {
    flex: 1 1 100%;
    min-width: 0;
    margin-top: var(--oa-ui-space-2);
}

.oa-versions-diff,
.oa-versions-raw {
    margin-top: var(--oa-ui-space-4);
}

/* Versions tab (M6d): why a version cannot be activated - one warning notice per version under the table, its next step
   and its actions (Retry the run, Open the run) wrapping below the text. */
.oa-version-problems {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    margin-top: var(--oa-ui-space-3);
}

.oa-version-problem {
    margin: 0;
}

.oa-version-problem-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.oa-version-problem-text {
    font-weight: 600;
}

.oa-version-problem-next {
    color: var(--oa-ui-text-muted);
}

.oa-version-problem-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

/* Prompts wizard (StepWizard + summary cards). */
.oa-wizard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-summary-next {
    align-self: flex-start;
    margin-top: var(--oa-ui-space-1);
}

/* M6d wizard-decision: what a prompt still needs, its decision, the proposal as a recommendation. */
.oa-wizard-todo-lines {
    margin: var(--oa-ui-space-1) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-wizard-todo-line {
    padding-left: var(--oa-ui-space-2);
    border-left: 3px solid var(--oa-ui-warning-border);
}

.oa-wizard-todo-label {
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-wizard-decided,
.oa-wizard-choice {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-wizard-decided .rzi,
.oa-wizard-choice .rzi {
    font-size: 16px;
}

.oa-wizard-decided .rzi {
    color: var(--oa-ui-success);
}

.oa-wizard-choice .rzi {
    color: var(--oa-ui-info);
}

.oa-wizard-proposal {
    overflow-wrap: anywhere;
}

.oa-wizard-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1);
    margin-top: var(--oa-ui-space-1);
}

/* The Review and Activate steps' "still to do" panel. */
.oa-wizard-todo {
    max-width: var(--oa-ui-measure);
    margin: 0 0 var(--oa-ui-space-3);
}

.oa-wizard-todo .oa-wizard-todo-lines {
    font-size: var(--oa-ui-font-size);
}

.oa-choice-status {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    margin-top: var(--oa-ui-space-1);
}

.oa-run-scope {
    margin-top: var(--oa-ui-space-3);
}

.oa-run-scope .oa-select {
    max-width: 100%;
}

.oa-wizard-runs {
    margin-top: var(--oa-ui-space-4);
}

.oa-wizard-editor {
    margin-top: var(--oa-ui-space-4);
}

.oa-prompt-column-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-1);
}

/* Extraction rules. */
.oa-rules-format + .oa-rules-format {
    margin-top: var(--oa-ui-space-4);
}

.oa-rules-tool {
    margin-bottom: var(--oa-ui-space-4);
    background: var(--oa-ui-surface-muted);
}

.oa-rules-format .oa-section--plain + .oa-section--plain {
    margin-top: var(--oa-ui-space-4);
}

.oa-proposal {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-3) 0;
    padding: var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-warning-border);
    border-left-width: 4px;
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
}

.oa-set-details-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-2) 0;
}

.oa-set-sample {
    flex-basis: 100%;
    font-size: var(--oa-ui-font-size-small);
}

.oa-recipe-extract {
    margin-bottom: var(--oa-ui-space-3);
}

/* Test console. */
.oa-test-console > .oa-section + .oa-section {
    margin-top: var(--oa-ui-space-4);
}

.oa-examples-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-2);
}

.oa-examples-title {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin: 0;
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-modes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) 0;
    margin: var(--oa-ui-space-2) 0;
    padding: 0;
    border: 0;
}

.oa-modes > legend {
    float: left;
    width: auto;
    margin: 0 var(--oa-ui-space-4) 0 0;
    padding: 0;
    font-size: var(--oa-ui-font-size);
}

.oa-attempt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-2);
}

.oa-attempt .oa-json + .oa-json {
    margin-top: var(--oa-ui-space-2);
}

.oa-console-run-facts + .oa-console-run-facts,
.oa-console-outcome {
    margin-top: var(--oa-ui-space-3);
    padding-top: var(--oa-ui-space-3);
    border-top: 1px solid var(--oa-ui-border-soft);
}

.oa-console-raw .oa-json + .oa-json {
    margin-top: var(--oa-ui-space-2);
}

/* M6d ui-hotfix: what one site call reported (info lines, warnings, recognised words, the raw response bodies). */
.oa-console-call {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-3);
    min-width: 0;
    margin-top: var(--oa-ui-space-3);
}

.oa-console-warnings {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    padding-left: 0;
    list-style: none;
    max-width: none;
}

.oa-console-warnings li {
    display: flex;
    align-items: flex-start;
    gap: var(--oa-ui-space-2);
    overflow-wrap: anywhere;
}

.oa-console-warnings .rzi {
    flex: 0 0 auto;
    font-size: 18px;
}

.oa-info {
    color: var(--oa-ui-info);
}

.oa-console-warnings .oa-info span,
.oa-console-warnings .oa-warn span {
    color: var(--oa-ui-text);
}

.oa-response-body {
    min-width: 0;
    max-width: 100%;
}

.oa-response-body-modes {
    display: inline-flex;
    gap: var(--oa-ui-space-2);
}

.oa-response-body-mode[aria-pressed="true"] {
    color: var(--oa-ui-text);
    font-weight: var(--oa-ui-weight-semibold);
    text-decoration: none;
    cursor: default;
}

.oa-response-body-all {
    margin-top: var(--oa-ui-space-1);
}

.oa-gateway-line {
    font-size: var(--oa-ui-font-size-small);
}

/* Live-request confirmation: the facts, then the site's own operator notes (review defect R5). */
.oa-live-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-3);
}

.oa-live-notes {
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-warning-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-warning-bg);
    color: var(--oa-ui-text);
    overflow-wrap: anywhere;
}

.oa-live-notes ul {
    margin: var(--oa-ui-space-1) 0 0;
    padding-left: 1.2rem;
}

.oa-live-notes > summary {
    cursor: pointer;
}

.oa-live-notes:not([open]) {
    padding-block: var(--oa-ui-space-1);
}

/* Facets and settings. */
.oa-facet-loaded {
    margin: 0 0 var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
}

.oa-credential-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-3);
}

.oa-section.oa-danger-zone {
    border-color: var(--oa-ui-danger-border);
    border-left-width: 4px;
}

.oa-tab-panel > .oa-section + .oa-section,
.oa-tab-panel > .oa-state + .oa-section {
    margin-top: var(--oa-ui-space-4);
}

/* ==== 9c. Add site, the review, LLM providers, the admin placeholders, the account pages (M6c step 4) ==== */

/* /sites/add, step 1: the input form next to "What happens next" (stacked on a narrow content area; review defect R4). */
.oa-add-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oa-ui-space-4);
    align-items: start;
}

@container oa-content (min-width: 900px) {
    .oa-add-layout {
        grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    }
}

.oa-input-modes {
    margin-bottom: 0;
}

.oa-input-panel[hidden] {
    display: none;
}

.oa-input-panel .oa-section-note {
    margin-bottom: var(--oa-ui-space-1);
}

.oa-url-preview {
    color: var(--oa-ui-text-muted);
}

.oa-add-start {
    margin-top: var(--oa-ui-space-4);
}

.oa-add-live-note {
    margin: var(--oa-ui-space-3) 0 0;
}

.oa-next-list {
    margin: 0 0 var(--oa-ui-space-3);
    padding-left: 1.4rem;
    max-width: var(--oa-ui-measure);
}

.oa-next-list li {
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-next-list li::marker {
    color: var(--oa-ui-accent);
    font-weight: var(--oa-ui-weight-semibold);
}

/* The wizard's open step: its blocks stacked with the section gap. */
.oa-wizard-panel > * + * {
    margin-top: var(--oa-ui-space-4);
}

.oa-add-site-page .oa-recent-runs {
    margin-top: var(--oa-ui-space-2);
}

.oa-edit-input,
.oa-check-link,
.oa-back-to-activation {
    font-weight: var(--oa-ui-weight-medium);
}

/* The discovery timeline (Sites/DiscoveryStepList; review defect R6): a marker per step on a vertical line. */
.oa-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--oa-ui-space-3);
    padding-bottom: var(--oa-ui-space-4);
}

.oa-timeline-item:last-child {
    padding-bottom: 0;
}

.oa-timeline-item::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: 2px;
    width: 2px;
    background: var(--oa-ui-border);
}

.oa-timeline-item:last-child::before {
    display: none;
}

.oa-timeline-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50%;
}

.oa-timeline-marker .rzi {
    font-size: 18px;
}

.oa-timeline-body {
    min-width: 0;
    padding-top: 3px;
}

.oa-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
}

.oa-timeline-title {
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-timeline-item[data-status="Pending"] .oa-timeline-title,
.oa-timeline-item[data-status="Skipped"] .oa-timeline-title {
    color: var(--oa-ui-text-muted);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-timeline-duration {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    font-variant-numeric: tabular-nums;
}

.oa-timeline-message,
.oa-timeline-what {
    margin: var(--oa-ui-space-1) 0 0;
    max-width: var(--oa-ui-measure);
    overflow-wrap: anywhere;
}

.oa-timeline-what {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-timeline-progress,
.oa-timeline .oa-step-details {
    margin-top: var(--oa-ui-space-2);
}

/* The review (Sites/DiscoveryReview; review defect R7): the sticky section index, then the sections. */
.oa-review {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-4);
    min-width: 0;
}

.oa-review > .oa-section {
    scroll-margin-top: 76px;
}

.oa-section-index {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface);
    box-shadow: var(--oa-ui-shadow-1);
}

.oa-section-index-heading {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-section-index-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-section-index-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--oa-ui-space-2);
    border-radius: var(--oa-ui-radius-pill);
    color: var(--oa-ui-link);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.oa-section-index-link:hover {
    background: var(--oa-ui-surface-hover);
    text-decoration: underline;
}

.oa-section-index-icon.rzi {
    font-size: 16px;
}

.oa-index-success { color: var(--oa-ui-success); }
.oa-index-warning { color: var(--oa-ui-warning); }
.oa-index-danger { color: var(--oa-ui-danger); }
.oa-index-info { color: var(--oa-ui-info); }
.oa-index-neutral { color: var(--oa-ui-neutral); }

.oa-review-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: 0 0 var(--oa-ui-space-3);
    overflow-wrap: anywhere;
}

.oa-review-end {
    margin: 0;
}

.oa-operator-notes {
    max-width: var(--oa-ui-measure);
    margin: 0 0 var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-warning-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-warning-bg);
    color: var(--oa-ui-text);
    overflow-wrap: anywhere;
}

.oa-operator-notes > summary {
    cursor: pointer;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-operator-notes .oa-notes {
    margin-top: var(--oa-ui-space-2);
}

.oa-checklist {
    margin: 0 0 var(--oa-ui-space-3);
}

.oa-check-line {
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-1) 0;
}

.oa-check-text {
    color: var(--oa-ui-text);
}

.oa-check-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--oa-ui-font-size-small);
}

.oa-check-link .rzi,
.oa-back-to-activation .rzi {
    font-size: 16px;
    vertical-align: middle;
}

.oa-activate-bar,
.oa-run-next {
    margin-top: var(--oa-ui-space-3);
}

.oa-prompt-actions {
    margin-bottom: var(--oa-ui-space-3);
}

.oa-prompt-outcome {
    margin-top: var(--oa-ui-space-2);
}

.oa-notice.oa-tone-success {
    border-color: var(--oa-ui-success-border);
    background: var(--oa-ui-success-bg);
    color: var(--oa-ui-text);
}

.oa-notice.oa-tone-success .rzi {
    color: var(--oa-ui-success);
}

/* The LLM providers page (review defect R10): keys table, the key form, the grouped timeouts form. */
.oa-llm-key-form {
    margin-top: var(--oa-ui-space-4);
    background: var(--oa-ui-surface-muted);
}

.oa-llm-key-form .oa-field {
    max-width: 520px;
}

.oa-llm-budgets {
    margin-bottom: var(--oa-ui-space-4);
}

.oa-llm-provider-timeouts + .oa-llm-provider-timeouts {
    margin-top: var(--oa-ui-space-4);
}

.oa-llm-default {
    margin: var(--oa-ui-space-3) 0;
}

.oa-timeout-groups {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-4);
    margin: var(--oa-ui-space-3) 0;
    min-width: 0;
}

.oa-timeout-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.oa-timeout-group > legend.oa-timeout-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--oa-ui-space-2);
    float: none;
    width: 100%;
    margin: 0 0 var(--oa-ui-space-1);
    padding: 0;
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: var(--oa-ui-line-height);
    color: var(--oa-ui-text);
}

.oa-timeout-group-text {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    font-weight: normal;
}

.oa-timeout-row {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(5rem, 6.5rem) minmax(5rem, 6rem) 8.5rem minmax(5rem, 6rem);
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    align-items: center;
    padding: var(--oa-ui-space-2) 0;
    border-bottom: 1px solid var(--oa-ui-border-soft);
}

.oa-timeout-head {
    padding-top: 0;
    border-bottom-color: var(--oa-ui-border);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-timeout-head > span:nth-child(3),
.oa-timeout-head > span:nth-child(5),
.oa-timeout-configured,
.oa-timeout-effective {
    text-align: right;
}

.oa-timeout-purpose {
    min-width: 0;
}

.oa-timeout-row.is-unserved .oa-timeout-purpose .oa-code,
.oa-timeout-row.is-unserved .oa-timeout-configured,
.oa-timeout-row.is-unserved .oa-timeout-effective {
    color: var(--oa-ui-text-muted);
}

@container oa-content (max-width: 720px) {
    .oa-timeout-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .oa-timeout-head {
        display: none;
    }
}

/* The account pages (Account/Shared/ManageLayout): the page frame, the account navigation next to the body. */
.oa-account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oa-ui-space-4);
    align-items: start;
}

@container oa-content (min-width: 900px) {
    .oa-account-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

.oa-account-nav .nav-link {
    padding: 6px var(--oa-ui-space-3);
    border-radius: var(--oa-ui-radius);
    color: var(--oa-ui-text);
}

.oa-account-nav .nav-link:hover {
    background: var(--oa-ui-surface-hover);
}

.oa-account-nav .nav-link.active {
    background: var(--oa-ui-accent-soft);
    color: var(--oa-ui-accent);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-account-body h2,
.oa-account-body h3 {
    margin: 0 0 var(--oa-ui-space-3);
    font-size: var(--oa-ui-font-size-h2);
    font-weight: var(--oa-ui-weight-semibold);
}

/* ==== 10. Markdown (MarkdownRenderer output) ==== */

.oa-markdown a.oa-cite {
    font-weight: var(--oa-ui-weight-semibold);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.oa-markdown .oa-link-removed {
    color: var(--oa-ui-text-muted);
    text-decoration: line-through dotted;
}

/* M7g item 4: MarkdownRenderer puts every table in a scroll box (.oa-md-table) and marks the body cells that are numbers
   or prices (.oa-md-num) and the other short cells (.oa-md-short). A wide table scrolls inside its box instead of
   squeezing its columns; a header never breaks inside a word; numbers, prices and status words never wrap. */
.oa-markdown .oa-md-table {
    max-width: 100%;
    overflow-x: auto;
    margin: var(--oa-ui-space-2) 0;
}

.oa-markdown .oa-md-table:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.oa-markdown table {
    border-collapse: collapse;
    margin: 0;
}

.oa-markdown th,
.oa-markdown td {
    border: 1px solid var(--oa-ui-border);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
    vertical-align: top;
    overflow-wrap: normal;
    word-break: normal;
}

.oa-markdown th {
    white-space: nowrap;
    word-break: keep-all;
    hyphens: none;
    text-align: left;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-markdown td.oa-md-num {
    white-space: nowrap;
    /* Beats a Markdown column alignment (an inline style): prices and numbers are always right-aligned. */
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.oa-markdown td.oa-md-short {
    white-space: nowrap;
}

/* ==== 11. Template rules kept for the Account pages (from the template's app.css) ==== */

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--oa-ui-danger);
    font-size: var(--oa-ui-font-size-small);
    margin-top: 2px;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    background: #b32121;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* The template's error bar (was scoped in the template MainLayout.razor.css). */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #1f2328;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* M6c fixes: the test console's current request (JsonView) and the facets reload error above the keys. */
.oa-refine-current {
    min-width: 0;
    margin: var(--oa-ui-space-2) 0;
}

.oa-facets-reload-error {
    margin-bottom: var(--oa-ui-space-3);
}

/* Carry-fixes after M6d (user findings and screenshot review, 2026-10-01). */

/* /sites/add: the site-file drop zone (Upload and Paste tabs). The transparent InputFile covers the zone, so a click or
   the keyboard opens the file chooser; oa-ui.js initFileDrop toggles is-over while a file is dragged over it. */
.oa-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--oa-ui-space-1);
    min-height: calc(var(--oa-ui-space-6) * 4);
    margin: var(--oa-ui-space-2) 0;
    padding: var(--oa-ui-space-4);
    border: 2px dashed var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-text);
    text-align: center;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.oa-dropzone--compact {
    flex-direction: row;
    min-height: 0;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
}

.oa-dropzone:hover,
.oa-dropzone.is-over,
.oa-paste-area.is-over {
    border-color: var(--oa-ui-accent);
    background: var(--oa-ui-accent-soft);
}

.oa-paste-area.is-over {
    outline: 2px dashed var(--oa-ui-accent);
    outline-offset: 2px;
}

.oa-dropzone:focus-within {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

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

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

.oa-dropzone.is-disabled .oa-dropzone-input {
    /* The disabled input lets drags through to the zone, whose handler ignores a dropped file (never the browser's). */
    pointer-events: none;
    cursor: not-allowed;
}

.oa-dropzone-icon {
    font-size: 32px;
    color: var(--oa-ui-accent);
}

.oa-dropzone--compact .oa-dropzone-icon {
    font-size: 20px;
}

.oa-dropzone-text {
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-dropzone-hint {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-dropzone-file {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    overflow-wrap: anywhere;
}

/* The review's validation section and the drop zone: a spec-1.2 file says what to do first. */
.oa-spec12-hint,
.oa-spec12-drop {
    margin-top: var(--oa-ui-space-2);
}

/* Test console: Bypass cache, the keys OneAgent added to the sent request, the firewall block. */
.oa-bypass-cache {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin: var(--oa-ui-space-1) 0 var(--oa-ui-space-2);
}

.oa-raw-keys-note {
    max-width: var(--oa-ui-measure);
}

.oa-sent-added {
    margin: var(--oa-ui-space-2) 0 0;
}

.oa-firewall-block {
    margin-bottom: var(--oa-ui-space-3);
}

/* Relaxed structuredApi results: the banner above the cards (test console Items tab, Overview layout preview). */
.oa-relaxed-banner {
    max-width: none;
}

.oa-relaxed-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.oa-relaxed-levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    margin: var(--oa-ui-space-1) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-relaxed-level.is-used {
    color: var(--oa-ui-text);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-relaxed-warning {
    margin-top: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
}

/* /sites: the legend of the Prompts column's short names. */
.oa-table-legend {
    margin: var(--oa-ui-space-2) 0 0;
    font-size: var(--oa-ui-font-size-small);
}

/* ==== 12. Workspace (Part 5 §5.2, M7): canvas left, chat right, the drawer over the canvas ==== */

.oa-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--oa-ui-bg);
}

.oa-ws-toolbar {
    flex: 0 0 auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-3);
    background: var(--oa-ui-surface);
    border-bottom: 1px solid var(--oa-ui-border);
    box-sizing: border-box;
}

.oa-ws-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--oa-ui-space-1);
    border: 1px solid transparent;
    border-radius: var(--oa-ui-radius-sm);
    background: transparent;
    color: var(--oa-ui-text-muted);
    cursor: pointer;
    font: inherit;
}

.oa-ws-icon-button:hover:not(:disabled),
.oa-ws-icon-button:focus-visible {
    background: var(--oa-ui-surface-hover);
    color: var(--oa-ui-text);
}

.oa-ws-icon-button:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 1px;
}

.oa-ws-icon-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.oa-ws-icon-button.is-on {
    color: var(--oa-ui-accent);
}

.oa-ws-title {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-width: 0;
    max-width: 40ch;
    padding: 2px var(--oa-ui-space-2);
    border: 1px solid transparent;
    border-radius: var(--oa-ui-radius-sm);
    background: transparent;
    color: var(--oa-ui-text);
    font: inherit;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-title.is-editable {
    cursor: text;
}

.oa-ws-title.is-editable:hover,
.oa-ws-title.is-editable:focus-visible {
    border-color: var(--oa-ui-border);
}

.oa-ws-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-ws-title-edit {
    font-size: var(--oa-ui-font-size);
    color: var(--oa-ui-text-subtle);
}

.oa-ws-title-form {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

.oa-ws-title-input {
    width: 32ch;
    max-width: 100%;
}

.oa-ws-toolbar-sites {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    min-width: 0;
    margin-left: var(--oa-ui-space-2);
}

.oa-ws-toolbar-label {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-new {
    margin-left: auto;
}

/* A site chip: the initials on the site primary colour (inline style from the site theme), then the name. */
.oa-ws-site-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    max-width: 100%;
    padding: 1px var(--oa-ui-space-2) 1px 2px;
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text);
    font-size: var(--oa-ui-font-size-small);
    line-height: var(--oa-ui-line-height-tight);
    white-space: nowrap;
}

.oa-ws-site-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--oa-ui-space-1);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-neutral-bg);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    font-weight: var(--oa-ui-weight-bold);
}

.oa-ws-site-chip.is-deleted .oa-ws-site-name {
    color: var(--oa-ui-text-subtle);
}

.oa-ws-site-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-ws-site-health.is-red {
    border-color: var(--oa-ui-danger-border);
    background: var(--oa-ui-danger-bg);
}

.oa-ws-site-health.is-amber {
    border-color: var(--oa-ui-warning-border);
    background: var(--oa-ui-warning-bg);
}

.oa-ws-archived {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
    max-width: none;
    gap: var(--oa-ui-space-2);
    align-items: center;
}

/* The splitter fills the rest of the viewport; each pane scrolls inside itself. */
.oa-ws-split.rz-splitter {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.oa-ws-split > .rz-splitter-pane {
    min-width: 0;
}

.oa-ws-canvas {
    position: relative;
    height: 100%;
    overflow: auto;
    padding: var(--oa-ui-space-4);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: oa-canvas;
}

/* Addendum O.3 (M7m): the canvas layout engine (CanvasLayout) gives every widget its span of the 6-column grid per width
   band (--oa-ws-span-p / -m / -w: 6 = full, 3 = half, 2 = a third); the container queries on the canvas pane pick the band
   (below 640 px one column, from 640 px two side by side, from 1440 px three). */
.oa-ws-canvas-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--oa-ui-space-4);
    align-items: start;
}

.oa-ws-canvas-grid > .oa-ws-item {
    grid-column: span var(--oa-ws-span-p, 6);
}

@container oa-canvas (min-width: 640px) {
    .oa-ws-canvas-grid > .oa-ws-item {
        grid-column: span var(--oa-ws-span-m, 6);
    }
}

@container oa-canvas (min-width: 1440px) {
    .oa-ws-canvas-grid > .oa-ws-item {
        grid-column: span var(--oa-ws-span-w, 6);
    }
}

.oa-ws-item {
    min-width: 0;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface);
    box-shadow: var(--oa-ui-shadow-1);
    overflow: hidden;
}

.oa-ws-item.is-pinned {
    border-color: var(--oa-ui-accent);
}

.oa-ws-item--new {
    animation: oa-ws-slide-in 250ms ease-out;
}

@keyframes oa-ws-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.oa-ws-item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border-bottom: 1px solid var(--oa-ui-border-soft);
}

.oa-ws-item-icon {
    color: var(--oa-ui-text-muted);
    font-size: 20px;
}

.oa-ws-item-title {
    flex: 1 1 12ch;
    min-width: 0;
    margin: 0;
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: var(--oa-ui-line-height-tight);
    overflow-wrap: anywhere;
}

.oa-ws-item-time {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    white-space: nowrap;
}

.oa-ws-item-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
}

.oa-ws-item-body {
    padding: var(--oa-ui-space-3);
    min-width: 0;
}

.oa-ws-item--dealcards .oa-ws-item-body {
    padding: 0;
}

.oa-ws-item--dealcards .oa-ws-item-body > .oa-cards {
    border: 0;
    border-radius: 0;
}

.oa-ws-item-expand {
    display: block;
    width: 100%;
    padding: var(--oa-ui-space-3);
    border: 0;
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-link);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.oa-ws-item-expand:hover,
.oa-ws-item-expand:focus-visible {
    text-decoration: underline;
}

.oa-ws-item-broken {
    margin: 0;
    color: var(--oa-ui-text-muted);
}

/* Loading: three shimmer blocks; reduced motion keeps them still. */
.oa-ws-skeletons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: var(--oa-ui-space-4);
}

.oa-ws-skeleton,
.oa-ws-skeleton-bubble {
    border-radius: var(--oa-ui-radius-lg);
    background: linear-gradient(90deg, var(--oa-ui-neutral-bg) 25%, var(--oa-ui-surface-hover) 50%, var(--oa-ui-neutral-bg) 75%);
    background-size: 200% 100%;
    animation: oa-ws-shimmer 1.4s linear infinite;
}

.oa-ws-skeleton {
    height: 160px;
}

.oa-ws-skeleton.is-wide {
    grid-column: 1 / -1;
    height: 220px;
}

.oa-ws-skeleton-bubble {
    width: 70%;
    height: 56px;
    margin: var(--oa-ui-space-2) 0;
}

.oa-ws-skeleton-bubble.is-user {
    width: 45%;
    margin-left: auto;
}

.oa-ws-skeleton-bubble.is-short {
    width: 50%;
}

@keyframes oa-ws-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* The empty canvas (WelcomePanel). */
.oa-ws-welcome {
    max-width: 760px;
    margin: var(--oa-ui-space-6) auto;
    padding: var(--oa-ui-space-5);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-surface);
    box-shadow: var(--oa-ui-shadow-1);
}

.oa-ws-welcome-title {
    margin: 0 0 var(--oa-ui-space-4);
    font-size: var(--oa-ui-font-size-h2);
    font-weight: var(--oa-ui-weight-semibold);
    line-height: var(--oa-ui-line-height-tight);
}

.oa-ws-welcome-sites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--oa-ui-space-2);
    margin: 0 0 var(--oa-ui-space-4);
    padding: 0;
    list-style: none;
}

.oa-ws-welcome-site {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    min-width: 0;
    padding: var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
}

.oa-ws-welcome-site-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oa-ws-welcome-site-name {
    font-weight: var(--oa-ui-weight-semibold);
    overflow-wrap: anywhere;
}

.oa-ws-welcome-site-meta {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-ws-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-ws-examples-label {
    color: var(--oa-ui-text-muted);
}

.oa-ws-example {
    padding: var(--oa-ui-space-1) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-info-border);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-info-bg);
    color: var(--oa-ui-text);
    font: inherit;
    cursor: pointer;
}

.oa-ws-example:hover:not(:disabled),
.oa-ws-example:focus-visible {
    border-color: var(--oa-ui-accent);
}

.oa-ws-example:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The conversation drawer: a 300 px overlay over the left edge of the canvas. */
.oa-ws-drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(16, 24, 40, 0.16);
}

.oa-ws-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    width: min(300px, 100%);
    background: var(--oa-ui-surface);
    border-right: 1px solid var(--oa-ui-border);
    box-shadow: var(--oa-ui-shadow-2);
}

.oa-ws-drawer:focus {
    outline: none;
}

.oa-ws-drawer-head {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-3);
    border-bottom: 1px solid var(--oa-ui-border-soft);
}

.oa-ws-drawer-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--oa-ui-font-size-h3);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-drawer-search {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
}

.oa-ws-drawer-archived {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-drawer-list {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 var(--oa-ui-space-2) var(--oa-ui-space-3);
}

.oa-ws-drawer-group {
    margin: var(--oa-ui-space-3) var(--oa-ui-space-1) var(--oa-ui-space-1);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    font-weight: var(--oa-ui-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oa-ws-drawer-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-ws-drawer-item {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    border-radius: var(--oa-ui-radius);
}

.oa-ws-drawer-item:hover {
    background: var(--oa-ui-surface-hover);
}

.oa-ws-drawer-item.is-current {
    background: var(--oa-ui-accent-soft);
}

.oa-ws-drawer-item.is-archived .oa-ws-drawer-item-title {
    color: var(--oa-ui-text-muted);
}

.oa-ws-drawer-open {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--oa-ui-space-2);
    border: 0;
    background: transparent;
    color: var(--oa-ui-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.oa-ws-drawer-item-title {
    overflow-wrap: anywhere;
    font-weight: var(--oa-ui-weight-medium);
}

.oa-ws-drawer-item-meta {
    display: inline-flex;
    gap: var(--oa-ui-space-2);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
}

.oa-ws-drawer-archived-tag {
    font-style: italic;
}

.oa-ws-drawer-item-actions {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0.7;
}

.oa-ws-drawer-item:hover .oa-ws-drawer-item-actions,
.oa-ws-drawer-item:focus-within .oa-ws-drawer-item-actions {
    opacity: 1;
}

.oa-ws-drawer-rename {
    display: flex;
    flex: 1 1 auto;
    gap: var(--oa-ui-space-1);
    padding: var(--oa-ui-space-1);
}

.oa-ws-drawer-rename .rz-textbox {
    flex: 1 1 auto;
    min-width: 0;
}

/* The chat: the messages scroll, the composer stays at the bottom. */
.oa-ws-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--oa-ui-surface);
    border-left: 1px solid var(--oa-ui-border);
}

.oa-ws-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--oa-ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
}

.oa-ws-chat-hint {
    margin: auto 0;
    color: var(--oa-ui-text-muted);
    text-align: center;
}

.oa-ws-bubble {
    max-width: 92%;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border-radius: var(--oa-ui-radius-lg);
    overflow-wrap: anywhere;
    line-height: var(--oa-ui-line-height);
}

.oa-ws-bubble--user {
    align-self: flex-end;
    background: var(--oa-ui-accent-soft);
    border: 1px solid var(--oa-ui-info-border);
}

.oa-ws-bubble--assistant {
    align-self: flex-start;
    background: var(--oa-ui-surface-muted);
    border: 1px solid var(--oa-ui-border-soft);
}

.oa-ws-bubble--error {
    align-self: flex-start;
    background: var(--oa-ui-danger-bg);
    border: 1px solid var(--oa-ui-danger-border);
    color: var(--oa-ui-danger);
}

.oa-ws-bubble-text {
    margin: 0;
    white-space: pre-wrap;
}

.oa-ws-bubble--error .oa-ws-bubble-text {
    display: flex;
    gap: var(--oa-ui-space-1);
    align-items: flex-start;
}

.oa-ws-bubble-time {
    display: block;
    margin-top: 2px;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
}

.oa-ws-bubble--user .oa-ws-bubble-time {
    text-align: right;
}

.oa-ws-answer > :first-child {
    margin-top: 0;
}

.oa-ws-answer > :last-child {
    margin-bottom: 0;
}

.oa-ws-answer p {
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-ws-answer ul,
.oa-ws-answer ol {
    margin: 0 0 var(--oa-ui-space-2);
    padding-left: var(--oa-ui-space-5);
}

/* M7g item 2 (defensive; the prompt forbids headings): a heading in an answer is a bold line at body size. */
.oa-ws-answer h1,
.oa-ws-answer h2,
.oa-ws-answer h3,
.oa-ws-answer h4,
.oa-ws-answer h5,
.oa-ws-answer h6 {
    margin: 0 0 var(--oa-ui-space-1);
    font-size: 1em;
    line-height: inherit;
    font-weight: var(--oa-ui-weight-bold);
}

/* M7g item 4: a chat table is compact - a smaller font, tight padding, zebra rows and a sticky header in a box that
   scrolls sideways (and down past about 8 rows); only the first (name) column wraps, also inside very long tokens. */
.oa-ws-answer .oa-md-table {
    max-height: 28rem;
    overflow: auto;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
}

.oa-ws-answer .oa-md-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--oa-ui-font-size-small);
    line-height: var(--oa-ui-line-height-tight);
}

.oa-ws-answer .oa-md-table th,
.oa-ws-answer .oa-md-table td {
    border: 0;
    border-bottom: 1px solid var(--oa-ui-border-soft);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
}

.oa-ws-answer .oa-md-table tbody tr:last-child td {
    border-bottom: 0;
}

.oa-ws-answer .oa-md-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Opaque in both themes, so the rows scrolling under the sticky header never show through. */
    background: var(--oa-ui-surface-hover);
    border-bottom-color: var(--oa-ui-border);
}

.oa-ws-answer .oa-md-table tbody tr:nth-child(even) {
    background: var(--oa-ui-surface-muted);
}

/* 7.5rem: a name, a price and a status column ("Model | Cijena | Dostupnost") fit the default chat pane at 1280 px
   (about 300 px inside a bubble) without a sideways scroll; a wider table still scrolls inside its box. */
.oa-ws-answer .oa-md-table td:first-child {
    min-width: 7.5rem;
    overflow-wrap: anywhere;
}

.oa-ws-caret {
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--oa-ui-text);
    animation: oa-ws-blink 1s steps(1) infinite;
}

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

.oa-ws-retry {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin-top: var(--oa-ui-space-2);
    padding: 2px var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-danger-border);
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-danger);
    font: inherit;
    cursor: pointer;
}

.oa-ws-retry:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* M7f item 7: the suggestion chips under the LATEST answer - round pills outlined in the accent, filled on hover and
   focus, side by side and wrapping on phones; keyboard reachable buttons with the focus ring. */
.oa-ws-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: var(--oa-ui-space-2);
    max-width: 100%;
    margin-top: calc(-1 * var(--oa-ui-space-1));
}

.oa-ws-suggestion {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    max-width: 100%;
    min-height: var(--oa-ui-space-6);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-accent);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-accent);
    font: inherit;
    font-size: var(--oa-ui-font-size-small);
    line-height: var(--oa-ui-line-height-tight);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.oa-ws-suggestion .rzi {
    font-size: var(--oa-ui-font-size);
}

.oa-ws-suggestion-label {
    overflow-wrap: anywhere;
}

.oa-ws-suggestion:hover:not(:disabled),
.oa-ws-suggestion:focus-visible {
    background: var(--oa-ui-accent);
    color: var(--oa-ui-on-accent);
}

.oa-ws-suggestion:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.oa-ws-suggestion:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.oa-ws-suggestion.is-static {
    cursor: default;
}

/* Addendum O.4 (M7m): the chat's pick - the bar above the canvas (its question, the hint and Cancel), the candidate widgets
   ringed in the accent with an "Odaberi" button in their header, the same candidates as round pills under the answer. */
.oa-ws-pick-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-accent);
    border-radius: var(--oa-ui-radius-lg);
    background: var(--oa-ui-accent-soft, var(--oa-ui-surface-muted));
    color: var(--oa-ui-text);
}

.oa-ws-pick-bar > .rzi {
    color: var(--oa-ui-accent);
}

.oa-ws-pick-question {
    font-weight: var(--oa-ui-weight-semibold);
    overflow-wrap: anywhere;
}

.oa-ws-pick-hint {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-pick-cancel {
    margin-left: auto;
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
    border: 1px solid transparent;
    border-radius: var(--oa-ui-radius-pill);
    background: transparent;
    color: var(--oa-ui-link);
    font: inherit;
    font-size: var(--oa-ui-font-size-small);
    cursor: pointer;
}

.oa-ws-pick-pills .oa-ws-pick-cancel {
    margin-left: 0;
}

.oa-ws-pick-cancel:hover:not(:disabled) {
    text-decoration: underline;
}

.oa-ws-pick-cancel:focus-visible,
.oa-ws-pick-choose:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

.oa-ws-item.is-pick {
    border-color: var(--oa-ui-accent);
    box-shadow: 0 0 0 2px var(--oa-ui-accent), var(--oa-ui-shadow-1);
}

.oa-ws-pick-choose {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-height: 28px;
    padding: 2px var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-accent);
    border-radius: var(--oa-ui-radius-pill);
    background: var(--oa-ui-accent);
    color: var(--oa-ui-on-accent);
    font: inherit;
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
    cursor: pointer;
}

.oa-ws-pick-choose .rzi {
    font-size: var(--oa-ui-font-size);
}

.oa-ws-pick-choose:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* M7f item 10: the Administrator-only Details of a canvas item, between its header and its body. */
.oa-ws-item-details {
    min-width: 0;
    margin: 0 var(--oa-ui-space-3) var(--oa-ui-space-2);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px dashed var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-ws-item-details-json {
    max-height: 240px;
    overflow: auto;
}

.oa-ws-item-details-calls {
    margin: 0;
    padding-left: var(--oa-ui-space-4);
}

.oa-ws-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

/* M7n item 3: the running tool's raw name - an Administrator-only detail after the friendly label. */
.oa-ws-status-detail {
    padding: 0 var(--oa-ui-space-1);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-sm);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    overflow-wrap: anywhere;
}

.oa-ws-composer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3) var(--oa-ui-space-3);
    border-top: 1px solid var(--oa-ui-border);
    background: var(--oa-ui-surface);
}

.oa-ws-input {
    width: 100%;
    min-height: 64px;
    max-height: 30vh;
    resize: vertical;
    padding: var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text);
    font: inherit;
    line-height: var(--oa-ui-line-height);
    box-sizing: border-box;
}

.oa-ws-input:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 1px;
}

.oa-ws-input:disabled,
.oa-ws-input[readonly] {
    background: var(--oa-ui-surface-muted);
    color: var(--oa-ui-text-muted);
}

.oa-ws-composer-bar {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-ws-counter {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.oa-ws-counter.is-near-limit {
    color: var(--oa-ui-warning);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-composer-reason {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-send,
.oa-ws-stop {
    margin-left: auto;
}

/* Addendum O.1 (M7m): the map widget (MapView + js/oa-map.js over the vendored Leaflet). The frame needs an explicit
   height; at phone width it fills the canvas width and is at most 60vh tall. Dark tiles through a CSS filter (the tiles
   stay the provider's own); approximate markers are greyed; popups are text-only mini cards. */
.oa-map {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-map-frame {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 380px;
    max-height: 60vh;
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    overflow: hidden;
}

@container oa-canvas (max-width: 639px) {
    .oa-map-frame {
        height: 60vh;
    }
}

.oa-map-frame:focus-visible,
.oa-map-frame .leaflet-marker-icon:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 2px;
}

:root[data-theme="dark"] .oa-map-frame .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

:root[data-theme="dark"] .oa-map-frame .leaflet-control-attribution,
:root[data-theme="dark"] .oa-map-frame .leaflet-bar a {
    background: var(--oa-ui-surface);
    color: var(--oa-ui-text);
}

:root[data-theme="dark"] .oa-map-frame .leaflet-control-attribution a {
    color: var(--oa-ui-link);
}

.oa-map-frame .oa-map-marker-approx {
    filter: grayscale(100%) opacity(75%);
}

.oa-map-frame .leaflet-popup-content {
    margin: var(--oa-ui-space-2) var(--oa-ui-space-3);
    font: var(--oa-ui-font-size-small) / var(--oa-ui-line-height-tight) var(--oa-ui-font-sans);
}

.oa-map-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 240px;
    overflow-wrap: anywhere;
}

.oa-map-popup-title {
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-map-popup-price {
    font-weight: var(--oa-ui-weight-medium);
}

.oa-map-popup-place,
.oa-map-popup-approx {
    color: #57606a;
}

.oa-map-popup-approx::before {
    content: "\2248\00a0";
}

.oa-map-caption,
.oa-map-about,
.oa-map-unplaced {
    margin: 0;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-map-about {
    font-size: var(--oa-ui-font-size-xs);
    color: var(--oa-ui-text-subtle);
}

.oa-map-places > summary {
    cursor: pointer;
    color: var(--oa-ui-link);
    font-size: var(--oa-ui-font-size-small);
}

.oa-map-list {
    margin: var(--oa-ui-space-2) 0 0;
    padding-left: var(--oa-ui-space-5);
    max-height: 40vh;
    overflow: auto;
    font-size: var(--oa-ui-font-size-small);
}

.oa-map-list-item {
    padding: 2px 0;
    overflow-wrap: anywhere;
}

.oa-map-list-item > span + span,
.oa-map-list-item > a + span {
    margin-left: var(--oa-ui-space-2);
}

.oa-map-list-price {
    font-weight: var(--oa-ui-weight-medium);
}

.oa-map-list-place {
    color: var(--oa-ui-text-muted);
}

.oa-map-approx {
    display: inline-block;
    padding: 0 var(--oa-ui-space-1);
    border: 1px solid var(--oa-ui-warning-border);
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-warning-bg);
    color: var(--oa-ui-warning);
    font-size: var(--oa-ui-font-size-xs);
}

/* Canvas bodies: chart, table, comparison, Markdown. */
.oa-ws-chart {
    margin: 0;
}

.oa-ws-chart-footer,
.oa-ws-chart-empty,
.oa-ws-table-note {
    margin: var(--oa-ui-space-2) 0 0;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-table-wrap {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
}

.oa-ws-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--oa-ui-font-size);
}

.oa-ws-table th,
.oa-ws-table td {
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
    border-bottom: 1px solid var(--oa-ui-border-soft);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.oa-ws-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--oa-ui-surface-muted);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-table .is-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.oa-ws-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.oa-ws-table-sort .rzi {
    font-size: 16px;
    color: var(--oa-ui-text-subtle);
}

.oa-ws-table-more {
    margin-top: var(--oa-ui-space-2);
}

.oa-ws-ref.is-plain {
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-mono);
    color: var(--oa-ui-text-muted);
}

a.oa-cite.oa-ws-ref,
a.oa-ws-comparison-card {
    font-weight: var(--oa-ui-weight-semibold);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.oa-ws-comparison th[scope="row"] {
    width: 22%;
    min-width: 120px;
    font-weight: var(--oa-ui-weight-semibold);
    background: var(--oa-ui-surface-muted);
}

.oa-ws-comparison-item {
    min-width: 160px;
}

.oa-ws-comparison-item .oa-ws-site-chip {
    margin-bottom: var(--oa-ui-space-1);
}

.oa-ws-comparison-title {
    display: block;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-comparison-card {
    font-size: var(--oa-ui-font-size-xs);
}

.oa-ws-comparison-hint {
    display: block;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-xs);
    font-weight: normal;
}

.oa-ws-comparison td.is-best {
    background: var(--oa-ui-success-bg);
}

.oa-ws-best-icon {
    color: var(--oa-ui-success);
    font-size: 16px;
    vertical-align: middle;
}

.oa-ws-open-site {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    margin-top: var(--oa-ui-space-2);
    color: var(--oa-ui-link);
}

/* Narrow windows: the panes stack (canvas first) and the page scrolls. */
@media (max-width: 900px) {
    .oa-workspace {
        height: auto;
        min-height: 100%;
    }

    .oa-ws-split.rz-splitter {
        flex-direction: column;
        height: auto;
    }

    .oa-ws-split > .rz-splitter-bar {
        display: none;
    }

    .oa-ws-split > .rz-splitter-pane {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .oa-ws-canvas {
        height: auto;
        min-height: 50vh;
        overflow: visible;
    }

    .oa-ws-chat {
        height: 75vh;
        border-left: 0;
        border-top: 1px solid var(--oa-ui-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oa-ws-item--new,
    .oa-ws-skeleton,
    .oa-ws-skeleton-bubble,
    .oa-ws-caret {
        animation: none;
    }
}

/* ==== 13. The account Profile page (addendum A.5, /Account/Manage/Profile) ==== */

.oa-profile-intro {
    max-width: var(--oa-ui-measure);
    color: var(--oa-ui-text-muted);
}

.oa-profile-current {
    margin: var(--oa-ui-space-4) 0;
    padding: var(--oa-ui-space-3) var(--oa-ui-space-4);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
}

.oa-profile-current h4 {
    margin: 0 0 var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-profile-text {
    margin: 0 0 var(--oa-ui-space-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: var(--oa-ui-measure);
}

.oa-profile-meta {
    margin: 0;
    font-size: var(--oa-ui-font-size-small);
}

/* M7f item 6: the standing defaults the user asked for, each with Remove; item 12: the administrators line. */
.oa-profile-admin-note {
    color: var(--oa-ui-text);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-profile-defaults {
    margin: 0 0 var(--oa-ui-space-4);
    padding: var(--oa-ui-space-3) var(--oa-ui-space-4);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
}

.oa-profile-defaults h4 {
    margin: 0 0 var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-profile-defaults-help,
.oa-profile-defaults-empty {
    max-width: var(--oa-ui-measure);
    margin: 0 0 var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
}

.oa-profile-default-list {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-profile-default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-3);
}

.oa-profile-default-name {
    min-width: 8rem;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-profile-default-value {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* M7f item 12: the administrator's read-only Profile tab on /admin/users/{id} and the users list's Profile link. */
.oa-user-profile-text {
    margin: var(--oa-ui-space-3) 0 0;
    padding: var(--oa-ui-space-3);
    max-width: var(--oa-ui-measure);
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius-sm);
    background: var(--oa-ui-surface-muted);
    font-family: inherit;
    font-size: var(--oa-ui-font-size);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.oa-user-profile-link {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    white-space: nowrap;
}

/* ==== 14. Debug chat (addendum G, M7): the session bar, the Debug panel under an answer, the trace view, Full flow ==== */
.oa-ws-debugbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin: 0;
    max-width: none;
    border-radius: 0;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-4);
    background: var(--oa-ui-info-bg);
    border-bottom: 1px solid var(--oa-ui-info-border);
}

.oa-ws-debugbar-title {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-debugbar-field,
.oa-ws-debugbar-confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-debugbar-select {
    min-width: 12rem;
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-debugbar-used {
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-debug {
    margin: calc(-1 * var(--oa-ui-space-1)) 0 var(--oa-ui-space-3);
    border: 1px dashed var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    min-width: 0;
}

.oa-ws-debug.is-open {
    border-style: solid;
    background: var(--oa-ui-surface);
}

.oa-ws-debug.is-wide {
    position: fixed;
    inset: calc(48px + var(--oa-ui-space-4)) var(--oa-ui-space-5) var(--oa-ui-space-5);
    z-index: 60;
    margin: 0;
    overflow: auto;
    box-shadow: var(--oa-ui-shadow-2);
}

.oa-ws-debug-bar {
    display: flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    padding: var(--oa-ui-space-1) var(--oa-ui-space-2);
}

.oa-ws-debug-toggle {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: var(--oa-ui-space-2);
    border: 0;
    background: transparent;
    color: var(--oa-ui-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: var(--oa-ui-space-1);
    border-radius: var(--oa-ui-radius-sm);
}

.oa-ws-debug-toggle:hover {
    background: var(--oa-ui-surface-hover);
}

.oa-ws-debug-toggle:focus-visible {
    outline: 2px solid var(--oa-ui-focus);
    outline-offset: 1px;
}

.oa-ws-debug-label {
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-ws-debug-summary {
    min-width: 0;
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-ws-debug > .oa-debug-trace {
    padding: 0 var(--oa-ui-space-2) var(--oa-ui-space-2);
}

.oa-debug-trace {
    min-width: 0;
}

.oa-debug-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    margin-bottom: var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
}

.oa-debug-fact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    overflow-wrap: anywhere;
}

.oa-debug-panel {
    min-width: 0;
    overflow-x: auto;
}

.oa-debug-search {
    margin: 0 0 var(--oa-ui-space-4);
    padding-bottom: var(--oa-ui-space-3);
    border-bottom: 1px solid var(--oa-ui-border-soft);
}

.oa-debug-search:last-child {
    border-bottom: 0;
}

.oa-debug-search-title,
.oa-debug-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin: var(--oa-ui-space-2) 0;
    font-size: var(--oa-ui-font-size-h4);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-debug-list {
    margin: 0;
    padding-left: var(--oa-ui-space-4);
    overflow-wrap: anywhere;
}

.oa-debug-prompt-row,
.oa-debug-cited-line,
.oa-debug-totals {
    margin: var(--oa-ui-space-2) 0;
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-debug-cited-row {
    background: var(--oa-ui-success-bg);
}

.oa-debug-answer-text {
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border-left: 3px solid var(--oa-ui-accent);
    background: var(--oa-ui-surface-muted);
}

.oa-debug-tool {
    margin: var(--oa-ui-space-2) 0 var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius-sm);
}

.oa-debug-truncated {
    max-width: none;
}

.oa-ws-drawer-debug {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-ws-drawer-debug-tag {
    color: var(--oa-ui-info);
    font-family: var(--oa-ui-font-mono);
    font-size: var(--oa-ui-font-size-xs);
    overflow-wrap: anywhere;
}

.oa-full-flow-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
}

.oa-full-flow-prompts {
    min-width: 10rem;
    font-size: var(--oa-ui-font-size-small);
}

.oa-full-flow-continue {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    font-weight: var(--oa-ui-weight-medium);
}

.oa-usage-label-text .oa-usage-debug {
    margin: 0;
}

.oa-full-flow-label {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

/* M7f item 13: the Cookies section of a site's Settings tab - one grid row per cookie (name, value, path, On, Remove),
   stacked on narrow screens; the paste box below the actions. */
.oa-cookies {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-cookie-rows {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-cookie-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr) minmax(5rem, 0.7fr) auto auto;
    align-items: center;
    gap: var(--oa-ui-space-2);
    min-width: 0;
}

.oa-cookie-row > input {
    min-width: 0;
    width: 100%;
    font-family: var(--oa-ui-font-mono);
}

.oa-cookie-head {
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-cookie-remove {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

.oa-cookie-paste {
    max-width: 720px;
}

.oa-cookie-paste > summary {
    cursor: pointer;
    color: var(--oa-ui-link);
    font-size: var(--oa-ui-font-size-small);
}

.oa-cookie-paste[open] > summary {
    margin-bottom: var(--oa-ui-space-2);
}

.oa-cookie-paste .oa-cookie-paste-input {
    margin-bottom: var(--oa-ui-space-1);
}

@media (max-width: 720px) {
    .oa-cookie-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .oa-cookie-head {
        display: none;
    }
}

/* ==== 15. Models page (addendum S.4, M7s): /admin/models - groups, purpose routes, the models list, the save dialog ==== */

.oa-models-page .oa-notice {
    max-width: none;
}

.oa-notice.oa-tone-danger {
    border-color: var(--oa-ui-danger-border);
    background: var(--oa-ui-danger-bg);
    color: var(--oa-ui-text);
}

.oa-notice.oa-tone-danger .rzi {
    color: var(--oa-ui-danger);
}

.oa-model-picker {
    min-width: 12rem;
    max-width: 100%;
    font-size: var(--oa-ui-font-size-small);
}

.oa-model-picker.is-edited {
    border-color: var(--oa-ui-accent);
    box-shadow: 0 0 0 1px var(--oa-ui-accent);
}

.oa-models-everything {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2);
    margin-bottom: var(--oa-ui-space-4);
}

.oa-models-everything .oa-field-label {
    margin: 0;
}

.oa-models-group-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-3);
    min-width: 0;
    margin-bottom: var(--oa-ui-space-2);
}

.oa-models-group-line > .oa-field-label {
    margin: 0;
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-models-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-models-usage {
    color: var(--oa-ui-link);
    font-size: var(--oa-ui-font-size-small);
    overflow-wrap: anywhere;
}

.oa-models-group-tools {
    margin: 0 0 var(--oa-ui-space-2);
}

.oa-models-purpose {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-models-purpose > .oa-cell-sub {
    flex-basis: 100%;
}

.oa-models-effective {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.oa-models-number {
    width: 6.5rem;
    max-width: 100%;
}

.oa-models-test-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-models-copy-timeout {
    white-space: normal;
    text-align: left;
}

/* A purpose's timeout on each serving provider (PromptEvaluation: one per provider of the tested purposes). */
.oa-models-timeout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.oa-models-timeout + .oa-models-timeout {
    margin-top: var(--oa-ui-space-2);
}

/* The terms of a table's columns, each with its HelpTip (design system section 7; S.4 "A HelpTip on every term"): above the
   table, because a HelpTip inside a grid header would be cut off by the grid's own scroll area. */
.oa-models-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    margin: 0 0 var(--oa-ui-space-2);
    color: var(--oa-ui-text-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-models-term {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Design system section 4 "Long page with sections": a jump from the sticky SectionIndex - or a deep link such as
   admin/models#provider-openai - lands below the index, not under it (the index wraps to more lines at phone width). */
.oa-models-page .oa-section[id] {
    scroll-margin-top: 76px;
}

@container oa-content (max-width: 720px) {
    .oa-models-page .oa-section[id] {
        scroll-margin-top: 140px;
    }
}

/* The purposes: a compact table, one card per purpose below a content width of 720 px (phone). */
.oa-models-purpose-cards {
    display: none;
}

@container oa-content (max-width: 720px) {
    .oa-models-purpose-table {
        display: none;
    }

    .oa-models-purpose-cards {
        display: grid;
        gap: var(--oa-ui-space-3);
    }
}

.oa-models-purpose-card {
    min-width: 0;
    padding: var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface);
}

.oa-models-issues {
    margin: var(--oa-ui-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.oa-models-issue {
    margin-bottom: var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
}

/* A Test result: badge, latency, answered model, tokens, finish reason, the checks and an error. */
.oa-models-test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    min-width: 0;
    margin: var(--oa-ui-space-1) 0 var(--oa-ui-space-2);
    padding: var(--oa-ui-space-2);
    border: 1px solid var(--oa-ui-border-soft);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-surface-muted);
    font-size: var(--oa-ui-font-size-small);
}

.oa-models-test.is-failed {
    border-color: var(--oa-ui-danger-border);
}

.oa-models-test-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-1) var(--oa-ui-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-models-test-checks li {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

.oa-models-test-checks .is-passed .rzi {
    color: var(--oa-ui-success);
}

.oa-models-test-checks .is-failed .rzi {
    color: var(--oa-ui-danger);
}

.oa-models-test-checks .rzi {
    font-size: 16px;
}

.oa-models-test-error {
    flex-basis: 100%;
    margin: 0;
    color: var(--oa-ui-danger);
    overflow-wrap: anywhere;
}

.oa-models-provider .oa-kv {
    margin-bottom: var(--oa-ui-space-3);
}

.oa-models-used-by {
    font-size: var(--oa-ui-font-size-small);
}

/* The Add model / Edit form. */
.oa-models-form {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-3);
    min-width: 0;
}

.oa-models-form-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oa-ui-space-2) var(--oa-ui-space-4);
    margin: 0;
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-border);
    border-radius: var(--oa-ui-radius);
}

.oa-models-form-flags > legend {
    padding: 0 var(--oa-ui-space-1);
    font-size: var(--oa-ui-font-size-small);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-models-form-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-1);
}

.oa-models-form-number {
    width: 9rem;
    max-width: 100%;
}

.oa-models-form-currency {
    width: 6rem;
}

.oa-models-form-notes {
    flex: 1 1 20rem;
    min-width: 0;
}

.oa-models-form-notes input {
    width: 100%;
}

.oa-models-form-errors {
    margin: 0;
}

/* The save confirmation: every change, then each blocking issue with its own checkbox. */
.oa-models-save-changes {
    margin: 0 0 var(--oa-ui-space-3);
    padding-left: var(--oa-ui-space-5);
    overflow-wrap: anywhere;
}

.oa-models-save-issues {
    display: flex;
    flex-direction: column;
    gap: var(--oa-ui-space-2);
    margin: 0 0 var(--oa-ui-space-3);
    padding: var(--oa-ui-space-2) var(--oa-ui-space-3);
    border: 1px solid var(--oa-ui-danger-border);
    border-radius: var(--oa-ui-radius);
    background: var(--oa-ui-danger-bg);
}

.oa-models-save-issues > legend {
    padding: 0 var(--oa-ui-space-1);
    font-weight: var(--oa-ui-weight-semibold);
    color: var(--oa-ui-danger);
}

.oa-models-save-issue {
    display: flex;
    align-items: flex-start;
    gap: var(--oa-ui-space-2);
    color: var(--oa-ui-text);
    overflow-wrap: anywhere;
}

.oa-models-save-issue input {
    margin-top: 3px;
}

.oa-models-save-hint {
    margin: var(--oa-ui-space-2) 0 0;
    font-size: var(--oa-ui-font-size-small);
}

.oa-models-save-errors ul {
    margin: var(--oa-ui-space-1) 0 var(--oa-ui-space-2);
}

.oa-llm-models-link {
    color: var(--oa-ui-link);
}

/* Inside the purposes table the controls take their column's width (the table fits 1280 px with the navigation). */
.oa-models-grid .oa-model-picker,
.oa-models-grid .oa-models-number {
    width: 100%;
    min-width: 0;
}

.oa-models-grid .oa-models-chips {
    display: flex;
}

.oa-models-grid .rz-cell-data {
    overflow-wrap: anywhere;
}

/* Pickers never widen the page: a long option text is cut by the select itself (phone width, the group line, the cards). */
.oa-models-group-line .oa-model-picker,
.oa-models-everything .oa-model-picker {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 32rem;
}

.oa-models-purpose-card .oa-model-picker,
.oa-models-purpose-card .oa-models-number {
    width: 100%;
    min-width: 0;
}

.oa-models-purpose-card dl,
.oa-models-purpose-card dd,
.oa-models-purpose-card dt {
    min-width: 0;
}

.oa-models-chips .oa-kind {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oa-models-save-issues > legend {
    font-size: var(--oa-ui-font-size);
}

/* Every ActivityList at phone width (M7s review of /admin/models at 375 px): who and when go under the line instead of
   widening the page. */
@container oa-content (max-width: 720px) {
    .oa-activity-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .oa-activity-meta {
        grid-column: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ==== 16. LLM usage (addendum S.5, M7s): /admin/usage - presets, the group/purpose/model hierarchy, cost and p95 ==== */

.oa-usage-presets {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oa-ui-space-1);
    padding-bottom: 2px;
}

.oa-usage-filters .oa-select {
    min-width: 9rem;
    max-width: 16rem;
}

.oa-usage-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.oa-usage-page .oa-notice {
    max-width: none;
}

.oa-usage-by {
    display: inline-flex;
    align-items: center;
    gap: var(--oa-ui-space-2);
    font-size: var(--oa-ui-font-size-small);
    color: var(--oa-ui-text-muted);
}

.oa-usage-label {
    display: flex;
    align-items: flex-start;
    gap: var(--oa-ui-space-1);
    min-width: 0;
}

.oa-usage-level-1 {
    padding-left: 1rem;
}

.oa-usage-level-2 {
    padding-left: 2.5rem;
    font-size: var(--oa-ui-font-size-small);
}

.oa-usage-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--oa-ui-radius-sm);
    background: transparent;
    color: var(--oa-ui-text-muted);
    cursor: pointer;
}

.oa-usage-toggle:hover,
.oa-usage-toggle:focus-visible {
    background: var(--oa-ui-surface-hover);
    color: var(--oa-ui-text);
}

.oa-usage-row--level-0 > td {
    background: var(--oa-ui-surface-muted);
    font-weight: var(--oa-ui-weight-semibold);
}

.oa-usage-row--level-2 > td {
    color: var(--oa-ui-text-muted);
}

.oa-usage-label-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    overflow-wrap: break-word;
}

.oa-usage-detail {
    font-weight: normal;
    overflow-wrap: anywhere;
}

.oa-usage-per-call {
    display: block;
}

/* Costs wrap at their spaces (an amount per currency, "per call") instead of overflowing the fixed Cost column. */
.oa-usage-grid .oa-usage-cost,
.oa-usage-grid .oa-usage-per-call,
.oa-usage-grid .oa-usage-unpriced-calls,
.oa-usage-grid tfoot .oa-money {
    white-space: normal;
    overflow-wrap: normal;
}

.oa-usage-today-price {
    margin-left: var(--oa-ui-space-1);
}

.oa-usage-unpriced-calls {
    display: block;
}

.oa-usage-has-errors {
    color: var(--oa-ui-danger);
}

.oa-usage-currency-note {
    margin: 0 0 var(--oa-ui-space-2);
}

@container oa-content (max-width: 720px) {
    .oa-usage-filters .oa-select {
        max-width: 100%;
    }

    .oa-usage-level-2 {
        padding-left: 1.75rem;
    }
}