/* RootReal Central Dashboard Styles */
/* NOTE: Inter font self-hosted via asset-sync pipeline (vendor/inter/inter.css) */

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

/* ─── CSS Variables (Light Theme) ─── */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --bg-sidebar-active: #1e40af;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-sidebar: #cbd5e1;
    --text-sidebar-active: #ffffff;
    --border-color: #e2e8f0;
    --accent: #2563eb;
    --accent-light: #dbeafe;
    --accent-hover: #1d4ed8;
    --badge-new: #15803d;
    --badge-beta: #92400e;
    --badge-external: #8b5cf6;
    --status-healthy: #15803d;
    --status-unknown: #94a3b8;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;

    /* ─── Semantic `--color-*` aliases ───
       Pages author against these semantic names; they map onto the primitives
       above (which the dark theme re-defines, so the aliases flip with the
       theme). Referencing an UNDEFINED custom property silently invalidates
       the whole declaration (the FRONTEND-COMPONENT-CSS-LINK-001 empty-var
       trap) — every alias below MUST stay defined in both themes. */
    --color-bg: var(--bg-primary);
    --color-bg-subtle: var(--bg-secondary);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-border: var(--border-color);
    --color-border-subtle: #eef2f7;
    --color-primary: var(--accent);
    --color-primary-hover: var(--accent-hover);
    --color-primary-contrast: #ffffff;
    --color-success: var(--status-healthy);
    --color-success-bg: #f0fdf4;
    --color-warning: #b45309;
    --color-warning-bg: #fffbeb;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-info: #0284c7;
    --color-info-bg: #f0f9ff;

    /* Shared interaction component tokens */
    --p-border-radius-md: 0.75rem;
    --p-primary-color: #2563eb;
    --p-primary-hover-color: #1d4ed8;
    --p-primary-active-color: #1e40af;
    --p-primary-color-text: #ffffff;
    --p-primary-50: #eff6ff;
    --p-blue-50: #eff6ff;
    --p-blue-500: #3b82f6;
    --p-blue-600: #2563eb;
    --p-green-50: #ecfdf5;
    --p-green-500: #10b981;
    --p-green-600: #059669;
    --p-orange-50: #fff7ed;
    --p-orange-500: #f97316;
    --p-orange-600: #ea580c;
    --p-purple-50: #f5f3ff;
    --p-purple-500: #7c3aed;
    --p-purple-600: #6d28d9;
    --p-red-50: #fef2f2;
    --p-red-500: #ef4444;
    --p-red-600: #dc2626;
    --p-surface-0: #ffffff;
    --p-surface-100: #f8fafc;
    --p-surface-300: #cbd5e1;
    --p-surface-400: #94a3b8;
    --p-surface-500: #64748b;
    --p-surface-600: #475569;
    --p-surface-700: #334155;
    --p-surface-800: #1e293b;
    --p-surface-900: #0f172a;
    --p-focus-ring-color: rgba(37, 99, 235, 0.45);
    --p-focus-ring: 0 0 0 0.2rem rgba(37, 99, 235, 0.22);
}

/* ─── Dark Theme ─── */
[data-theme="dark"],
[data-theme$="-dark"],
[data-theme-mode="rr-dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-sidebar: #020617;
    --bg-sidebar-hover: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --accent-light: #1e3a5f;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    /* Semantic `--color-*` aliases — dark overrides. Aliases that reference
       `--bg-*`/`--text-*`/`--border-color` primitives follow the theme flip
       automatically and are intentionally NOT repeated here. */
    --color-border-subtle: #26334a;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-contrast: #0f172a;
    --color-success: #4ade80;
    --color-success-bg: rgba(34, 197, 94, 0.12);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, 0.12);
    --color-error: #f87171;
    --color-error-bg: rgba(239, 68, 68, 0.12);
    --color-info: #38bdf8;
    --color-info-bg: rgba(56, 189, 248, 0.12);

    --p-surface-0: #f8fafc;
    --p-surface-100: #e2e8f0;
    --p-surface-300: #94a3b8;
    --p-surface-400: #cbd5e1;
    --p-surface-500: #64748b;
    --p-surface-600: #475569;
    --p-surface-700: #334155;
    --p-surface-800: #1e293b;
    --p-surface-900: #020617;
    --p-focus-ring-color: rgba(96, 165, 250, 0.55);
    --p-focus-ring: 0 0 0 0.2rem rgba(96, 165, 250, 0.24);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-secondary);
    overflow-x: hidden;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -40px;
    z-index: 1000;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
}

.skip-link:focus {
    top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ─── Layout ─── */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.2s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.sidebar--compound {
    width: auto;
    background: transparent;
    overflow: visible;
}

/* Right-side config sidebar (viz examples) */
.sidebar.config-sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* The DevConfigPanel's sidebar chrome is the shared sidebar-nav compound
   (round-2 migration, COMPOSITION-CATALOG-001). The aside owns the layout
   (fixed right, 280/64 width mechanics + the main-content margins below);
   the compound FILLS it — the placement classes (--fixed/--dvh) and the
   inline width are neutralized for this embedded context (the same consumer
   layout prerogative the compound stylesheet documents). */
.sidebar.config-sidebar .rr-sidebar-nav {
    position: static;
    width: 100% !important;
    height: 100%;
    flex: 1;
    border-radius: 0;
}

/* Shift main content when the right sidebar is expanded */
.app-layout:has(.sidebar.config-sidebar:not(.sidebar-collapsed)) .main-content {
    margin-right: var(--sidebar-width);
}

.app-layout:has(.sidebar.config-sidebar.sidebar-collapsed) .main-content {
    margin-right: var(--sidebar-collapsed-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: var(--topbar-height);
}

.sidebar-logo {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 14px;
}

.sidebar-title {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

.sidebar-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-toggle-icon {
    transition: transform 0.2s ease;
}

.sidebar-toggle-flipped {
    transform: rotate(180deg);
}

/* Collapsed sidebar (toggled by button) */
.sidebar-collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar-title,
.sidebar-collapsed .nav-item span:not(.icon),
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .nav-children,
.sidebar-collapsed .external-indicator {
    display: none;
}

.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    justify-content: center;
    padding: 12px 8px;
    gap: 8px;
}

.sidebar-collapsed .sidebar-toggle {
    margin-left: 0;
}

.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px;
}

/* Shift main content when the LEFT sidebar is collapsed.
   Note: the visualization config sidebar reuses `.sidebar-collapsed` too,
   so we must exclude `.config-sidebar` here. */
.app-layout:has(.sidebar:not(.config-sidebar).sidebar-collapsed) .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

.sidebar-nav {
    flex: 1;
    padding: 8px;
}

.sidebar--compound .rr-sidebar-nav {
    height: 100vh;
    height: 100dvh; /* Handheld (SIDEBAR-NAV-LEFTBAR-001): the dynamic-viewport
       unit tracks the browser URL-bar state, so the fixed rail/drawer always
       spans the VISIBLE viewport — the bottom items are never clipped behind
       the collapsed toolbar and the bar never overshoots it (the classic
       mobile 100vh failure). The preceding 100vh line is the legacy fallback. */
    /* THIN TOKEN OVERRIDES only (COMPOSITION-CATALOG-001): the compound
       owns every chrome rule (crates/ux/compound/sidebar-nav/styles/
       sidebar-nav.css); the shell rebinds its platform tokens and keeps its
       layout-level sizing here. */
    --rr-sidebar-nav-surface: var(--bg-sidebar);
    --rr-sidebar-nav-ink: var(--text-sidebar);
    --rr-sidebar-nav-item-hover: var(--bg-sidebar-hover);
    --rr-sidebar-nav-item-active: var(--bg-sidebar-active);
    --rr-sidebar-nav-item-active-ink: var(--text-sidebar-active);
    /* The platform rail's badge identity stays amber (uniform --badge-beta),
       not the entry demo's JS red/blue pair. */
    --rr-sidebar-nav-accent: var(--badge-beta);
    --rr-sidebar-nav-accent-info: var(--badge-beta);
    --rr-sidebar-nav-radius: 0;
    /* The platform rail's toggle stays borderless (its pre-compound-CSS
       look); the entry demo's JS-identity toggle border is the default. */
    --rr-sidebar-nav-toggle-border: transparent;
    /* The platform rail's density (14px items, 10px gap, 18px icons). */
    --rr-sidebar-nav-item-font-size: 14px;
    --rr-sidebar-nav-item-gap: 10px;
    --rr-sidebar-nav-icon-width: 18px;
}

/* Rail-collapsed item centering (layout-level: the shell's collapsed width). */
.sidebar--compound .rr-sidebar-nav--collapsed .rr-sidebar-nav__item-link,
.sidebar--compound .rr-sidebar-nav--rail .rr-sidebar-nav__item-link {
    padding: 10px;
}

.app-layout:has(.sidebar--compound .rr-sidebar-nav--collapsed) .main-content,
.app-layout:has(.sidebar--compound .rr-sidebar-nav--rail) .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

.nav-group {
    margin-bottom: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-sidebar);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-item:hover {
    background: var(--bg-sidebar-hover);
    color: #fff;
    text-decoration: none;
}

.nav-item.active {
    background: var(--bg-sidebar-active);
    color: var(--text-sidebar-active);
}

.nav-item .icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 15px;
}

.nav-children {
    padding-left: 24px;
}

.nav-children .nav-item {
    font-size: 13px;
    padding: 6px 12px;
    color: #94a3b8;
}

.nav-children .nav-item:hover {
    color: #e2e8f0;
}

.nav-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.nav-badge.new {
    background: var(--badge-new);
    color: #fff;
}

.nav-badge.beta {
    background: var(--badge-beta);
    color: #fff;
}

.nav-badge.ext {
    background: rgba(139, 92, 246, 0.15);
    color: var(--badge-external);
    font-size: 9px;
}

/* ─── Main Content ─── */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    /* min-width:0 lets this flex item shrink below its content's intrinsic
       width so the content column always tracks (viewport - sidebar width)
       instead of being forced wider by intrinsically-wide children. */
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The inner <main> must never be forced wider than its column. Without this,
   an intrinsically-wide child (e.g. a multi-column data table) expands the
   page past the viewport and is then clipped by `body { overflow-x: hidden }`,
   which manifests as content "stretched beyond the viewing canvas" when the
   left sidebar is expanded and the available width is smallest. */
.main-content > main {
    min-width: 0;
    max-width: 100%;
}

/* Maximised page canvases expand to the full available width inside the
   content column, accounting for the current sidebar width via the
   CSS variable.  This is applied by `RouteLayoutScaffold` when the route
   profile sets `maximize_content_width: true`.

   The selector targets `section` elements rendered by the scaffold that live
   directly inside `<main>`; it is intentionally scoped so that only
   explicitly opted-in pages use the wider canvas. */
.main-content > main > section.page-content--maximized,
.main-content > main > section.section-page.page-content--maximized {
    max-width: none;
    width: 100%;
}

/* When the left sidebar is collapsed, `.main-content` already repositions via
   `margin-left: var(--sidebar-collapsed-width)`.  The maximized wrapper
   simply follows the new column width, so no extra rule is required. */

/* Horizontal-scroll boundary for intrinsically-wide content (data tables,
   wide RDF/JSON blocks). Keeps overflow contained inside the content column so
   the page width stays bound to (viewport - sidebar width) regardless of
   whether the left sidebar is expanded or collapsed. */
.kos-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.topbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--topbar-height);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 50;
}

.topbar.topbar--compound {
    padding: 0;
}

.topbar--compound .rr-masthead,
.topbar--compound .rr-header,
.topbar--compound .rr-header__body {
    width: 100%;
}

.topbar--compound .rr-header {
    border: none;
    background: transparent;
    height: var(--topbar-height);
}

.topbar--compound .rr-header__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
}

.topbar--compound .rr-header__skip-nav,
.topbar--compound .rr-masthead__theme:empty,
.topbar--compound .rr-masthead__user .rr-user-menu--hidden {
    display: none;
}

.topbar--compound .rr-masthead__nav {
    display: flex;
    align-items: center;
    min-width: 0;
}

.topbar--compound .rr-masthead__theme {
    display: flex;
    align-items: center;
}

.topbar--compound .rr-masthead__actions {
    display: flex;
    align-items: center;
}

.topbar--compound .rr-theme-switch,
.topbar--compound .rr-theme-switch__option {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.topbar--compound .rr-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topbar--compound .rr-theme-switch:hover,
.topbar--compound .rr-theme-switch__option:hover,
.topbar--compound .rr-theme-switch__option--active {
    background: var(--bg-secondary);
}

.topbar--compound .rr-theme-switch__label {
    font-weight: 600;
}

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

.breadcrumb-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.breadcrumb-sep {
    color: var(--border-color);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.theme-toggle:hover {
    background: var(--bg-secondary);
}

.topbar-link {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}

.topbar-link:hover {
    background: var(--bg-secondary);
    text-decoration: none;
}

/* ─── Page Content ─── */
.page-content {
    flex: 1;
    padding: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.page-content.page-content--maximized,
.section-page.page-content--maximized {
    max-width: none;
    margin: 0;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ─── Status Cards Grid ─── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
}

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

@media (min-width: 1024px) {
    .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.status-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.card-icon {
    font-size: 22px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.healthy {
    background: var(--status-healthy);
}

.status-dot.degraded {
    background: #d97706;
}

.status-dot.unhealthy {
    background: #ef4444;
}

.status-dot.unknown {
    background: var(--status-unknown);
}

/* ─── Placeholder Page ─── */
.placeholder-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    min-height: 60vh;
}

.placeholder-icon {
    font-size: 56px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.placeholder-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.placeholder-desc {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 480px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.placeholder-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s;
}

.placeholder-link:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* ─── Embedded Dashboard Iframe ─── */
.dashboard-iframe-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height));
}

.dashboard-iframe-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.dashboard-iframe-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-iframe-wrap {
    position: relative;
    flex: 1;
    min-height: 70vh;
    background: var(--bg-primary);
}

.dashboard-iframe {
    width: 100%;
    min-height: 70vh;
    height: calc(100vh - var(--topbar-height) - 62px);
    border: 0;
    display: block;
}

.dashboard-iframe-loading,
.dashboard-iframe-error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 70vh;
    color: var(--text-secondary);
    gap: 12px;
}

.dashboard-iframe-retry {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.dashboard-iframe-retry:hover {
    background: var(--bg-secondary);
}

.hidden {
    display: none;
}

/* --- Integrated Plan Dashboard styling (rootreal.ai/docs/plan) --- */
.page {
    padding: 24px;
}

.container {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--accent);
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.stats-grid,
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.plan-card {
    display: block;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
}

.plan-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.2);
}

/* Plan-detail checklist items: the parity Checkbox component consumed for the
   item state (plan `plan_lifecycle_automation_dashboard` phase-5 item-0). The
   box aligns to the first text line; completed items tint the box green. */
.checklist-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.875rem; }
.item-checkbox { display: inline-flex; flex: 0 0 auto; padding-top: 0.125rem; }
.item-checkbox .rr-checkbox,
.item-checkbox .rr-checkbox-input { cursor: default; }
.item-completed .item-checkbox .rr-checkbox-input:checked { background-color: #34d399; border-color: #34d399; }
.item-text { color: #cbd5e1; }
.item-text-done { color: #64748b; text-decoration: line-through; }

.plan-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.plan-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.plan-shell-search {
    min-width: 280px;
    max-width: 420px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ─── External Link Badge ─── */
.external-indicator {
    font-size: 11px;
    opacity: 0.7;
}

/* ─── Section Landing ─── */
.section-hero {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}

.section-hero-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.section-hero-desc {
    font-size: 15px;
    opacity: 0.9;
    max-width: 560px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    /* Handheld: treat sidebar as a drawer.
       - Collapsed = icon rail (56px) with visible toggle
       - Expanded  = full sidebar width overlaying content
       The fixed rail uses 100dvh (dynamic viewport) so it spans the VISIBLE
       viewport at every browser-toolbar state (SIDEBAR-NAV-LEFTBAR-001). */
    .sidebar {
        width: var(--sidebar-width);
        box-shadow: var(--shadow-lg);
        height: 100vh;
        height: 100dvh;
    }

    .sidebar.sidebar-collapsed {
        width: var(--sidebar-collapsed-width);
        box-shadow: none;
    }

    .sidebar.sidebar-collapsed .sidebar-title,
    .sidebar.sidebar-collapsed .nav-item span:not(.icon),
    .sidebar.sidebar-collapsed .nav-badge,
    .sidebar.sidebar-collapsed .nav-children,
    .sidebar.sidebar-collapsed .external-indicator {
        display: none;
    }

    .sidebar.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: 10px;
    }

    /* Keep toggle reachable in collapsed rail */
    .sidebar.sidebar-collapsed .sidebar-header {
        flex-direction: column;
        justify-content: center;
        padding: 12px 8px;
        gap: 8px;
    }

    .sidebar.sidebar-collapsed .sidebar-toggle {
        margin-left: 0;
    }

    /* Expanded drawer uses the normal header layout */
    .sidebar:not(.sidebar-collapsed) .sidebar-header {
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px;
        gap: 12px;
    }

    .main-content {
        margin-left: 0 !important;
    }

    /* Compound sidebar: collapsed = small rail, expanded = overlay (no push) */
    .app-layout:has(.sidebar--compound .rr-sidebar-nav--collapsed) .main-content,
    .app-layout:has(.sidebar--compound .rr-sidebar-nav--rail) .main-content {
        margin-left: var(--sidebar-collapsed-width) !important;
    }

    .app-layout:has(.sidebar--compound .rr-sidebar-nav--expanded) .main-content {
        margin-left: var(--sidebar-collapsed-width) !important;
    }

    /* Expanded compound sidebar overlays on mobile */
    .sidebar--compound .rr-sidebar-nav--expanded {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh; /* dynamic viewport — see the rail rule above */
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
        /* Home-indicator safe area (SIDEBAR-NAV-LEFTBAR-001): the drawer's
           scroll content must not sit under the gesture bar. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar.sidebar-collapsed ~ .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }

    .page-content {
        padding: 16px;
    }

    .plan-shell-header {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-shell-search {
        min-width: 0;
        max-width: none;
    }

    /* Smooth sidebar transition for swipe gestures */
    .sidebar--compound .rr-sidebar-nav {
        transition: width 0.2s ease, transform 0.2s ease;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Viz Dashboard Utilities (Tailwind-like classes used by inline viz pages)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Container ─── */
.container { max-width: 1200px; margin: 0 auto; }

/* ─── Grid ─── */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ─── Flexbox ─── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ─── Gap & Spacing ─── */
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-12 > * + * { margin-top: 3rem; }

/* ─── Padding ─── */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pl-12 { padding-left: 3rem; }

/* ─── Margin ─── */
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mr-4 { margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Width & Height ─── */
.w-full { width: 100%; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.h-48 { height: 12rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.min-h-screen { min-height: 100vh; }

/* ─── Typography ─── */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.leading-6 { line-height: 1.5rem; }

/* ─── Colors (text) ─── */
.text-white { color: #ffffff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-blue-600 { color: #2563eb; }
.text-blue-800 { color: #1e40af; }
.text-green-400 { color: #4ade80; }
.text-green-600 { color: #16a34a; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.text-red-500 { color: #ef4444; }

/* ─── Colors (background) ─── */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-900 { background-color: #111827; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.bg-yellow-50 { background-color: #fefce8; }
.bg-opacity-5 { --tw-bg-opacity: 0.05; }
.bg-opacity-10 { --tw-bg-opacity: 0.1; }

/* ─── Gradients ─── */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-gray-50 {
    --tw-gradient-from: #f9fafb;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0));
}
.to-gray-100 { --tw-gradient-to: #f3f4f6; }
.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}
.to-purple-600 { --tw-gradient-to: #9333ea; }
.from-blue-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}
.to-purple-600 { --tw-gradient-to: #9333ea; }

/* ─── Borders ─── */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-700 { border-color: #374151; }
.border-gray-800 { border-color: #1f2937; }
.border-yellow-500 { border-color: #eab308; }
.border-transparent { border-color: transparent; }

/* ─── Rounded ─── */
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

/* ─── Shadows ─── */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ─── Overflow ─── */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* ─── Viz Surface Sizing ─── */
.visualization-container {
    box-sizing: border-box;
    display: inline-block;
    min-width: 100%;
    width: max-content;
    max-width: none;
}

.visualization-svg-wrapper {
    min-width: 100%;
    width: max-content;
    max-width: none;
}

/* ─── Transitions & Transforms ─── */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }
.transform { /* enables transforms */ }

/* ─── Hover Utilities ─── */
.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-opacity-5:hover { --tw-bg-opacity: 0.05; }
.group:hover .group-hover\:text-blue-600 { color: #2563eb; }
.group:hover .group-hover\:-translate-y-1 { transform: translateY(-0.25rem); }

/* ─── Focus ─── */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
.focus\:border-transparent:focus { border-color: transparent; }

/* ─── Position ─── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.left-4 { left: 1rem; }
.top-3\.5 { top: 0.875rem; }
.z-50 { z-index: 50; }

/* ─── Display ─── */
.block { display: block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* ─── Backdrop ─── */
.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* ─── Buttons (viz) ─── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    text-decoration: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: white;
    color: #2563eb;
    text-decoration: none;
    border: 2px solid #2563eb;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover {
    background: #2563eb;
    color: white;
}

/* ─── Code Blocks ─── */
pre {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}
code {
    font-family: 'Fira Code', 'Courier New', monospace;
}

/* ─── Visually-Hidden (screen-reader only) ─── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .status-card,
    .sidebar,
    .sidebar-toggle-icon,
    .btn-primary,
    .nav-item,
    .theme-toggle {
        transition: none;
    }
    .status-card:hover {
        transform: none;
    }
    .hover\:-translate-y-1:hover {
        transform: none;
    }
    .btn-primary:hover {
        transform: none;
    }
}

/* ─── Tables (viz) ─── */
table { border-collapse: collapse; }
.w-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Admin Pages
   ═══════════════════════════════════════════════════════════════════════ */

.admin-current-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.admin-label { color: var(--text-secondary); }
.admin-value { color: var(--text-primary); font-weight: 600; }

.admin-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.admin-table-wrap {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table thead {
    background: var(--bg-card);
}

.admin-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.admin-table tbody tr:hover {
    background: var(--bg-card);
}

.admin-domain {
    font-weight: 600;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
}

.admin-domain-col {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    text-align: center;
}

.admin-email {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
}

.admin-user { font-weight: 600; }

.admin-code {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
}

.admin-access-yes { text-align: center; }
.admin-access-no { text-align: center; opacity: 0.5; }

.admin-link {
    color: #3b82f6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.admin-link:hover { text-decoration: underline; }

.admin-muted {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 13px;
}

.admin-info-box {
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.admin-info-box p { margin-bottom: 8px; }
.admin-info-box p:last-child { margin-bottom: 0; }

.admin-info-box code {
    padding: 1px 5px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 3px;
    font-size: 12px;
}

.admin-matrix td,
.admin-matrix th {
    text-align: center;
}

.admin-matrix td:first-child,
.admin-matrix th:first-child {
    text-align: left;
}

.admin-toggle {
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-toggle:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
}

.admin-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.admin-error {
    padding: 16px;
    border: 1px solid var(--border-warning, #b08800);
    border-radius: 8px;
    background: var(--surface-warning, rgba(176, 136, 0, 0.1));
    margin-bottom: 16px;
}

.admin-error p {
    margin-bottom: 12px;
    color: var(--text-warning, #d4a800);
}

/* ─── Admin: Team Permission Cards ─── */

.admin-team-card {
    background: var(--surface-secondary, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.admin-team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.admin-team-perm {
    font-size: 0.85rem;
    opacity: 0.7;
}

.admin-team-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 12px 0;
}

.admin-units-table td:first-child {
    width: 60%;
}

.admin-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 80px;
}

.admin-select:hover {
    border-color: var(--accent);
}

.admin-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.admin-success {
    padding: 12px 16px;
    border: 1px solid var(--border-success, #22c55e);
    border-radius: 8px;
    background: var(--surface-success, rgba(34, 197, 94, 0.1));
    color: var(--text-success, #22c55e);
    margin-bottom: 16px;
}

/* ─── Compound Admin Analytics Sections ─── */

.compound-admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 980px) {
    .compound-admin-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compound-admin-layout > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.compound-admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.compound-admin-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.compound-admin-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.compound-admin-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compound-funnel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.compound-funnel-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.compound-funnel-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.compound-funnel-track {
    width: 100%;
    height: 10px;
    background: var(--bg-secondary);
    border-radius: 999px;
    overflow: hidden;
}

.compound-funnel-fill {
    height: 10px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-radius: 999px;
}

.compound-grid-wrap {
    overflow-x: auto;
}

.compound-grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.compound-grid-table th,
.compound-grid-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.compound-grid-table th {
    color: var(--text-secondary);
    font-weight: 600;
}

.compound-timeline-list,
.compound-ticker-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compound-timeline-item,
.compound-ticker-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-secondary);
}

.compound-timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.compound-timeline-time,
.compound-ticker-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.compound-timeline-subject,
.compound-ticker-actor {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.compound-timeline-bar {
    display: grid;
    grid-template-columns: 36px 1fr 34px;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.compound-timeline-score-label,
.compound-timeline-score-value {
    font-size: 12px;
    color: var(--text-secondary);
}

.compound-timeline-score-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.compound-timeline-score-fill {
    height: 8px;
    border-radius: 999px;
}

.compound-fill-high { background-color: #dc2626; }
.compound-fill-medium { background-color: #d97706; }
.compound-fill-low { background-color: #16a34a; }

.compound-severity-high { color: #dc2626; }
.compound-severity-medium { color: #d97706; }
.compound-severity-low { color: #16a34a; }

.compound-timeline-note,
.compound-ticker-event {
    font-size: 12px;
    color: var(--text-secondary);
}

.compound-ticker-item {
    display: grid;
    grid-template-columns: 52px 1fr 2fr 64px;
    gap: 10px;
    align-items: center;
}

.compound-ticker-severity {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 768px) {
    .compound-admin-card {
        padding: 12px;
        border-radius: 8px;
    }

    .compound-admin-title {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .compound-admin-subtitle {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 10px;
    }

    .compound-grid-table {
        font-size: 12px;
    }

    .compound-grid-table th,
    .compound-grid-table td {
        padding: 7px 8px;
    }

    .compound-timeline-item,
    .compound-ticker-item {
        padding: 8px;
    }

    .compound-ticker-item {
        grid-template-columns: 46px 1fr;
        grid-template-areas:
            "time actor"
            "event event"
            "severity severity";
        row-gap: 4px;
    }

    .compound-ticker-time {
        grid-area: time;
    }

    .compound-ticker-actor {
        grid-area: actor;
    }

    .compound-ticker-event {
        grid-area: event;
    }

    .compound-ticker-severity {
        grid-area: severity;
        text-align: left;
    }
}

/* ─── KOS Dashboard ─── */
.section-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-page.page-content--maximized {
    max-width: none;
    margin: 0;
}

.section-header {
    margin-bottom: 24px;
}

.section-header .section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.section-description {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 640px;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
}

.section-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    color: #b91c1c;
    font-size: 13px;
}

[data-theme="dark"] .section-error,
[data-theme$="-dark"] .section-error {
    background: #450a0a;
    border-color: #991b1b;
    color: #fca5a5;
}

.kos-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kos-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 24px;
    min-width: 100px;
    flex: 1;
}

.kos-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
}

.kos-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.kos-section-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 8px;
}

.kos-nav-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    /* Content-unit margins (KOS-INVENTORY-GRID-001): the intra-card gap is the
       grid's `--rr-grid2-unit-gap` CSS variable (set by ResponsiveGrid's
       `unit_gap` — dynamic with the grid's responsive track widths), with a
       static fallback outside a grid. Vertical rhythm between the card's own
       content blocks (header / title / stats / date). */
    gap: 6px var(--rr-grid2-unit-gap, 8px);
    row-gap: 8px;
    /* Containment chain (the `kos-result-card` precedent, commit-99ca03c23a
       generalization): a card in a minmax(0,1fr) track MUST be able to shrink
       below its content's intrinsic width and break long unbreakable strings
       (URLs, identifiers) INSIDE the card — otherwise the card overflows its
       grid track. */
    overflow-wrap: anywhere;
    word-break: break-word;
    height: 100%;
    box-sizing: border-box;
}

.kos-nav-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ─── Inventory card content units (KOS-INVENTORY-GRID-001) ────────────
 * These classes previously had NO CSS at all: the header chip+badge and the
 * stats row rendered as unstyled blocks, so adjacent content units glued
 * together ('1.04.23''NL-HaNA', '25 items''90% metadata complete') and could
 * overflow the card on narrow tracks. Every content-unit row is now a
 * wrapping flex row whose gap is the grid's `--rr-grid2-unit-gap` variable
 * (dynamic margins: the same control also drives /viz/overview/grid). */
.kos-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--rr-grid2-unit-gap, 8px);
    min-width: 0;
}

.kos-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kos-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--rr-grid2-unit-gap, 8px);
    min-width: 0;
}

.kos-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Inventory search bar + lazy-load sentinel (KOS-INVENTORY-LAZY-LOAD-001). */
.kos-inventory-search {
    max-width: 480px;
    margin-bottom: 16px;
}

.kos-lazy-sentinel {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* ─── KOS detail-page content-unit margins (KOS-INVENTORY-DETAIL-001) ────
 * The SAME treatment the archive grid landed (KOS-INVENTORY-GRID-001): every
 * distinct content unit is a wrapping flex row whose gap is the config-driven
 * `--rr-grid2-unit-gap` variable (dynamic inside a ResponsiveGrid, static
 * fallback outside one). These blocks previously had NO CSS at all — the
 * Source/Meta/Parsimony detail views rendered as unstyled divs whose inline
 * units (the mode toggle's links, the provenance links, the `unitid — title`
 * context lines, the `--- / title / — / Link` row units) glued together. */
.kos-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    min-width: 0;
}

.kos-breadcrumb {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--rr-grid2-unit-gap, 8px);
    min-width: 0;
}

.kos-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.kos-breadcrumb a:hover {
    text-decoration: underline;
}

/* The Source / Meta / Parsimony segmented toggle (three real links that
   previously glued into one inline run). */
.kos-maps-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: fit-content;
}

.kos-maps-toggle-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.kos-maps-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--accent-light);
    text-decoration: none;
}

.kos-maps-toggle-btn.active {
    background: var(--accent);
    color: #fff;
}

/* The canonical content-unit row: distinct units separated by the dynamic
   unit gap (mirrors .kos-card-header / .kos-card-stats). */
.kos-unit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--rr-grid2-unit-gap, 8px);
    min-width: 0;
    margin: 0;
}

.kos-detail-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    min-width: 0;
}

.kos-items-list {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    min-width: 0;
}

.kos-items-list h3,
.kos-items-list h4,
.kos-detail-panel h3,
.kos-detail-panel h4 {
    margin: 4px 0 0;
}

.kos-provenance {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    min-width: 0;
}

.kos-provenance .kos-unit-row {
    margin-top: 2px;
}

/* The "Show grouping headers" canonical-Switch row (the same unit-gap
   rhythm; the switch control and its hint are distinct content units). */
.kos-items-toggle {
    align-items: center;
    padding: 4px 0;
}

.kos-items-toggle-hint {
    margin: 0;
    font-size: 12px;
}

.kos-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kos-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.kos-stat {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
}

.kos-content-hash code {
    font-size: 11px;
    overflow-wrap: anywhere;
}

.kos-lazy-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 12px 0;
    margin: 0;
}

.kos-nav-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.kos-nav-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kos-nav-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.kos-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kos-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.kos-type-chip:hover {
    border-color: var(--accent);
}

.kos-chip-active {
    background: var(--accent-light);
    border-color: var(--accent);
}

.kos-type-name {
    font-weight: 600;
    color: var(--text-primary);
}

.kos-type-count {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 12px;
}

.kos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kos-table thead th {
    text-align: left;
    /* Horizontal cell padding IS the config-driven unit gap between a row's
       content units (KOS-INVENTORY-DETAIL-001): dynamic inside a
       ResponsiveGrid, 12px fallback outside one. */
    padding: 10px var(--rr-grid2-unit-gap, 12px);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.kos-table tbody td {
    padding: 10px var(--rr-grid2-unit-gap, 12px);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.kos-table tbody tr:hover {
    background: var(--accent-light);
}

.kos-domain-badge {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Metadata-completeness coverage badge — color-coded by tier
   (green >=80%, amber 50-80%, red <50%) per the inventory dashboard UX spec. */
.kos-completeness {
    font-weight: 600;
}
.kos-completeness-good {
    color: #15803d;
}
.kos-completeness-mid {
    color: #b45309;
}
.kos-completeness-low {
    color: #b91c1c;
}

.kos-timestamp {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.kos-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.kos-link:hover {
    text-decoration: underline;
}

.kos-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.kos-ontology-actions,
.ux-action-group-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ux-action-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.ux-action-group-label {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}

.kos-search-bar {
    display: flex;
    gap: 8px;
}

.kos-search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.kos-search-input:focus {
    border-color: var(--accent);
}

.kos-search-input::placeholder {
    color: var(--text-secondary);
}

.kos-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1rem;
    padding: 0.75rem 0;
}

.kos-pagination-pages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.kos-pagination-page {
    min-width: 2.25rem;
}

.kos-pagination-page.is-current {
    font-weight: 700;
}

.kos-pagination-gap {
    color: var(--text-secondary);
    padding: 0 0.25rem;
}

.kos-pagination-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.kos-pagination-btn:hover:not(:disabled) {
    background: var(--bg-hover, #f0f0f0);
    border-color: var(--accent);
}

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

.kos-pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.p-paginator-page-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.p-paginator-page {
    min-width: 2.25rem;
}

.p-paginator-page-gap {
    color: var(--text-secondary);
    padding: 0 0.25rem;
}

.kos-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.kos-thesaurus-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kos-split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 400px;
}

@media (max-width: 768px) {
    .kos-split-view {
        grid-template-columns: 1fr;
    }
}

.kos-concept-list {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kos-panel-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kos-concept-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    width: 100%;
}

.kos-concept-item:hover {
    background: var(--accent-light);
}

.kos-concept-term {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.kos-concept-id {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.kos-concept-meta {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.kos-concept-detail {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    overflow-y: auto;
    max-height: 500px;
}

.kos-empty-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 14px;
}

.kos-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kos-detail-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.kos-detail-section h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.kos-scope-note {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    font-style: italic;
}

.kos-term-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kos-term-list li {
    font-size: 14px;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
}

.kos-rel-bt { background: #dbeafe; }
.kos-rel-nt { background: #dcfce7; }
.kos-rel-rt { background: #fef3c7; }

[data-theme="dark"] .kos-rel-bt,
[data-theme$="-dark"] .kos-rel-bt { background: #1e3a5f; }
[data-theme="dark"] .kos-rel-nt,
[data-theme$="-dark"] .kos-rel-nt { background: #14532d; }
[data-theme="dark"] .kos-rel-rt,
[data-theme$="-dark"] .kos-rel-rt { background: #78350f; }

.kos-relationships {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kos-ontology-relations-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kos-rel-group h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.kos-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kos-ontology-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
    text-align: left;
    width: 100%;
}

.kos-ontology-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kos-ontology-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kos-ontology-version {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.kos-ontology-stats {
    display: flex;
    /* Badges wrap as whole units instead of sticking out of the card on
       narrow (minmax(0,1fr)) grid tracks — the fix for the overflowing
       'Searchable'/'Navigable' tag (consumed via ResponsiveGrid/GridItem on
       /kos/registers, /viz/overview/grid primitive family). */
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* WorldCat hybrid-search panel on /kos/registers/worldcat (relocated from the
   /kos/registers overview 2026-08-22). Mirrors .section-content's flex-column
   spacing so the panel keeps its original internal rhythm. */
.kos-worldcat-hybrid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.kos-ontology-detail {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px;
}

.kos-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

.kos-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: kos-spin 0.8s linear infinite;
}

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

.kos-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-secondary);
    font-size: 14px;
    font-style: italic;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* Giant-inventory bounding banner (design-phase2-bounding.md): the served
   graph is a connected BFS prefix — surfaced, never silent. */
.kos-truncation-banner {
    padding: 12px 16px;
    margin: 8px 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent-color, #d4a017);
    border-radius: 6px;
}
.kos-truncation-banner code {
    font-family: var(--font-mono, monospace);
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.15));
    padding: 1px 5px;
    border-radius: 4px;
}

.kos-placeholder-note {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* ─── KOS LinkML Viewer ─── */

.kos-linkml-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.kos-linkml-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.kos-linkml-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kos-sidebar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.kos-class-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kos-ontology-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kos-ontology-group + .kos-ontology-group {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.kos-ontology-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kos-ontology-group-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.kos-ontology-source-name {
    flex: 1;
    min-width: 0;
}

.kos-ontology-source-ext {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.kos-class-item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kos-class-item:hover {
    background: var(--accent-light);
    border-color: var(--accent);
}

.kos-class-item-active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.kos-linkml-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kos-linkml-toolbar {
    min-height: 24px;
}

.kos-selection-chip-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.kos-ontology-toolbar-row {
    width: 100%;
}

.kos-export-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kos-selection-chip-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.kos-selection-chip-value {
    font-size: 13px;
    color: var(--text-primary);
}

.kos-selection-chip-clear {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.kos-selection-chip-clear:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.kos-ontology-export-container {
    position: relative;
}

.kos-ontology-export-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    z-index: 20;
}

.kos-ontology-export-button {
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.kos-ontology-export-button:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.kos-ontology-export-button:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.kos-class-inspector {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.kos-class-inspector-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.kos-class-inspector-title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.kos-inspector-uri {
    width: fit-content;
    max-width: 100%;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.kos-inspector-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kos-inspector-stat-card {
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.kos-inspector-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kos-inspector-tab {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.kos-inspector-tab-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

.kos-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.kos-inspector-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-width: 0;
}

.kos-result-group-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kos-mapping-group,
.kos-string-list-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kos-mapping-group h4,
.kos-string-list-section h4,
.kos-slot-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.kos-empty-inline {
    font-size: 13px;
    color: var(--text-secondary);
}

.kos-raw-yaml {
    margin: 0;
    padding: 16px;
    overflow: auto;
    max-height: 420px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
}

.kos-definition-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 12px;
}

.kos-definition-list div {
    display: contents;
}

.kos-definition-list dt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kos-definition-list dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}

.kos-example-description {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}

.kos-slot-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kos-slot-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.kos-slot-card-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-light);
}

.kos-slot-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.kos-slot-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kos-slot-description {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.kos-slot-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kos-slot-flag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.kos-slot-flag-link {
    background: var(--accent-light);
    color: var(--accent);
    cursor: pointer;
}

.kos-slot-flag-link:hover {
    border-color: var(--accent);
}

.kos-ontology-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.kos-ontology-inline-action {
    font-size: 12px;
}

.rr-linkml-workspace-grid,
.rr-uml-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rr-linkml-workspace-card,
.rr-uml-panel,
.rr-uml-class-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.rr-linkml-workspace-heading,
.rr-uml-panel-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rr-linkml-definition-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 12px;
}

.rr-linkml-definition-list div {
    display: contents;
}

.rr-linkml-definition-list dt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.rr-linkml-definition-list dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}

.rr-linkml-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rr-linkml-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.rr-linkml-prefix-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rr-linkml-empty,
.rr-uml-panel-subheading,
.rr-uml-parent,
.rr-uml-mixins,
.rr-uml-slot-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.rr-uml-panel {
    margin-top: 16px;
}

.rr-uml-panel-header,
.rr-uml-class-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rr-uml-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rr-uml-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.rr-uml-slot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rr-uml-slot-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 4px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.rr-uml-slot-row:first-child {
    border-top: none;
    padding-top: 0;
}

.kos-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kos-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.kos-tab:hover {
    color: var(--text-primary);
}

.kos-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.kos-tab-panels {
    min-height: 300px;
}

.kos-linkml-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.kos-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 640px;
}

.kos-svg-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    overflow: auto;
    max-height: 600px;
}

.kos-svg-container svg {
    max-width: 100%;
    height: auto;
}

/* Tree view */

.kos-tree {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kos-tree-children {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kos-tree-node {
    list-style: none;
}

.kos-tree-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: background 0.15s;
}

.kos-tree-label:hover {
    background: var(--accent-light);
}

.kos-tree-link {
    min-width: 0;
}

.kos-tree-link-active {
    color: var(--accent);
}

.kos-tree-label-active {
    background: var(--accent-light);
    border-color: var(--accent);
}

.kos-tree-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.kos-tree-slots {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Search button */

.kos-search-btn {
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.kos-search-btn:hover {
    opacity: 0.9;
}

/* Search results */

.kos-search-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kos-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kos-facet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid var(--accent);
    border-radius: 16px;
    padding: 4px 12px;
}

.kos-result-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kos-result-group h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kos-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kos-result-list li {
    font-size: 14px;
    color: var(--text-primary);
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Validation */

.kos-validation-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.kos-validation-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
}

.kos-validation-pass {
    background: #dcfce7;
    color: #15803d;
}

.kos-validation-fail {
    background: #fef2f2;
    color: #b91c1c;
}

[data-theme="dark"] .kos-validation-pass,
[data-theme$="-dark"] .kos-validation-pass {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .kos-validation-fail,
[data-theme$="-dark"] .kos-validation-fail {
    background: #450a0a;
    color: #fca5a5;
}

/* ─── KOS Schema Diff ─── */

.kos-diff-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kos-diff-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #111827);
}

.kos-diff-no-change {
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

.kos-diff-list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
}

.kos-diff-added {
    color: #15803d;
    background: #f0fdf4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.kos-diff-removed {
    color: #b91c1c;
    background: #fef2f2;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.kos-diff-added-list li,
.kos-diff-removed-list li {
    margin-bottom: 4px;
}

.kos-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.kos-diff-table th,
.kos-diff-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.kos-diff-table th {
    background: var(--bg-secondary, #f9fafb);
    font-weight: 600;
}

.kos-diff-table code {
    background: var(--bg-secondary, #f3f4f6);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.8125rem;
}

/* ─── Cluster Cost Overview ─── */

.rr-cluster-cost-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rr-cluster-cost-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.06)),
        var(--bg-card, #ffffff);
}

.rr-cluster-cost-banner h2 {
    margin: 0 0 8px;
    font-size: 1.45rem;
    color: var(--text-primary, #111827);
}

.rr-cluster-cost-banner p {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    line-height: 1.55;
}

.rr-cluster-cost-eyebrow {
    margin-bottom: 6px;
    color: var(--accent, #2563eb);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rr-cluster-cost-target {
    display: flex;
    min-width: 190px;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid rgba(22, 163, 74, 0.28);
    border-radius: 14px;
    background: rgba(22, 163, 74, 0.10);
}

.rr-cluster-cost-target span {
    color: var(--text-secondary, #4b5563);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rr-cluster-cost-target strong {
    color: #15803d;
    font-size: 1.25rem;
}

.rr-cluster-cost-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rr-cluster-cost-card,
.rr-cluster-cost-section {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    background: var(--bg-card, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.rr-cluster-cost-card {
    padding: 16px;
}

.rr-cluster-cost-card span {
    display: block;
    color: var(--text-secondary, #4b5563);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rr-cluster-cost-card strong {
    display: block;
    margin: 6px 0;
    color: var(--text-primary, #111827);
    font-size: 1.35rem;
}

.rr-cluster-cost-card p {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    font-size: 0.88rem;
    line-height: 1.45;
}

.rr-cluster-cost-section {
    padding: 16px;
    overflow: hidden;
}

.rr-cluster-cost-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.rr-cluster-cost-section__header {
    margin-bottom: 12px;
}

.rr-cluster-cost-section__header h3 {
    margin: 0 0 4px;
    color: var(--text-primary, #111827);
    font-size: 1rem;
}

.rr-cluster-cost-section__header p {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    font-size: 0.88rem;
}

[data-theme="dark"] .kos-diff-added,
[data-theme$="-dark"] .kos-diff-added {
    color: #86efac;
    background: #052e16;
}

[data-theme="dark"] .kos-diff-removed,
[data-theme$="-dark"] .kos-diff-removed {
    color: #fca5a5;
    background: #450a0a;
}

/* ─── KOS Responsive ─── */

@media (max-width: 768px) {
    .kos-linkml-workspace {
        grid-template-columns: 1fr;
    }

    .kos-linkml-sidebar {
        position: static;
        max-height: none;
    }

    .kos-inspector-grid {
        grid-template-columns: 1fr;
    }

    .rr-linkml-workspace-grid,
    .rr-uml-class-grid,
    .rr-uml-slot-row {
        grid-template-columns: 1fr;
    }

    .kos-class-inspector-header,
    .kos-slot-card-header,
    .rr-uml-panel-header,
    .rr-uml-class-header {
        flex-direction: column;
    }

    .kos-tabs {
        gap: 2px;
    }

    .kos-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .kos-stats-row {
        flex-direction: column;
    }

    .kos-stat-card {
        min-width: unset;
    }

    .kos-svg-container {
        max-height: 400px;
    }

    .rr-cluster-cost-banner,
    .rr-cluster-cost-cards,
    .rr-cluster-cost-section--split {
        grid-template-columns: 1fr;
    }

    .rr-cluster-cost-target {
        min-width: unset;
    }

    .section-page {
        padding: 16px;
    }
}

/* ==========================================================================
   Edge typing-keyboard dashboard (edge_typing_keyboard P5.6)
   Components: ux/component/keyboard-status-card + ux/compound/keyboard-fleet.
   Bond-health tint encodes INFRA-BLUETOOTH-LE-PAIRING-001: green ONLY when a
   keyboard is functionally ready (paired + bonded + /dev/input node), amber for
   the paired-but-not-ready incident state, grey when unbonded.
   ========================================================================== */

/* ---- Keyboard status card ---- */
.rr-keyboard-status-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border, #d1d5db);
    border-left-width: 4px;
    border-radius: var(--p-border-radius-md, 8px);
    background: var(--bg-card, var(--p-surface-0, #ffffff));
    color: var(--text-primary, #1f2937);
}

.rr-keyboard-status-card--ready {
    border-left-color: var(--border-success, #34a853);
}

.rr-keyboard-status-card--paired-only {
    border-left-color: var(--border-warning, #f5a623);
}

.rr-keyboard-status-card--unbonded {
    border-left-color: var(--border, #9ca3af);
}

.rr-keyboard-status-card--compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.rr-keyboard-status-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rr-keyboard-status-card__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.rr-keyboard-status-card__bond {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rr-keyboard-status-card__bond--ready {
    background: var(--surface-success, #e6f4ea);
    color: var(--text-success, #1a7f37);
}

.rr-keyboard-status-card__bond--paired-only {
    background: var(--surface-warning, #fff8e1);
    color: var(--text-warning, #9a6700);
}

.rr-keyboard-status-card__bond--unbonded {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
}

.rr-keyboard-status-card__identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
}

.rr-keyboard-status-card__vid-pid {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

.rr-keyboard-status-card__transport {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #374151);
    font-size: 0.75rem;
}

.rr-keyboard-status-card__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
}

.rr-keyboard-status-card__line-label {
    color: var(--text-secondary, #6b7280);
}

.rr-keyboard-status-card__line-value {
    font-variant-numeric: tabular-nums;
}

/* ---- Keyboard fleet overview ---- */
.rr-keyboard-fleet {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rr-keyboard-fleet__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rr-keyboard-fleet__summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 10px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--p-border-radius-md, 8px);
    background: var(--bg-card, var(--p-surface-0, #ffffff));
}

.rr-keyboard-fleet__summary-count {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.rr-keyboard-fleet__summary-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

.rr-keyboard-fleet__summary-item--ready .rr-keyboard-fleet__summary-count {
    color: var(--text-success, #1a7f37);
}

.rr-keyboard-fleet__summary-item--paired-only .rr-keyboard-fleet__summary-count,
.rr-keyboard-fleet__summary-item--mismatch .rr-keyboard-fleet__summary-count {
    color: var(--text-warning, #9a6700);
}

.rr-keyboard-fleet__banner--mismatch {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d93025;
    border-left-width: 4px;
    border-radius: var(--p-border-radius-md, 8px);
    background: #fde7e7;
    color: #8a1c14;
}

.rr-keyboard-fleet__banner-icon {
    font-size: 1.2rem;
    line-height: 1.2;
}

.rr-keyboard-fleet__banner-title {
    display: block;
    margin-bottom: 4px;
}

.rr-keyboard-fleet__banner-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
}

.rr-keyboard-fleet__banner-device {
    font-weight: 600;
}

.rr-keyboard-fleet__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.rr-keyboard-fleet__table--error {
    padding: 12px 14px;
    border: 1px solid #d93025;
    border-radius: var(--p-border-radius-md, 8px);
    background: #fde7e7;
    color: #8a1c14;
}

/* ─── KOS register result cards (grid dogfooding, 2026-07-25 concern C) ───
 * These classes previously had NO CSS at all: the cards rendered as bare
 * text and long unbreakable identifiers overflowed the GridItem bounds
 * horizontally (worst when the left sidebar was expanded and the content
 * column narrowed). The card chrome matches .kos-nav-card; the containment
 * chain (min-width:0 + overflow-wrap:anywhere + word-break) guarantees the
 * content stays INSIDE the grid item's border at every width. */
.kos-result-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    min-width: 0;              /* allow the card to shrink to the grid track */
    overflow-wrap: anywhere;   /* break unbreakable identifiers inside the card */
    word-break: break-word;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.kos-result-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.kos-result-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.kos-result-id {
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: var(--text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;   /* the long-identifier containment the operator asked for */
    word-break: break-all;
}

.kos-result-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ─── GeoNames register: ellipsis fields, coverage + freshness, collapse ───
 * (plan geonames-dashboard-ux-loading-semantic, 2026-08-16). `.kos-ellipsis`
 * keeps every card field inside its grid box (single-line truncation); the
 * full value is exposed via the native tooltip EllipsisText sets on overflow.
 */
.kos-ellipsis {
    display: block;
    max-width: 100%;
    min-width: 0;            /* allow shrink below intrinsic content width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kos-result-line {
    font-size: 12px;
    color: var(--text-secondary);
}

.kos-geonames-card-link {
    margin-top: 2px;
}

.kos-geonames-grid {
    margin-bottom: 0.75rem;
}

/* Explicit register-coverage caption (PARTIAL-LOAD-TRANSPARENCY-001 req 2). */
.kos-coverage-caption {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

/* Stale-while-revalidate freshness label + background-refresh badge (req 4). */
.kos-freshness-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    min-height: 1em;
}

.kos-refresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.kos-refresh-note {
    font-size: 11px;
    color: var(--color-warning-text, #8a6d1c);
}

/* Collapsed-by-default retrieval-optimizations panel. */
.kos-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s;
}

.kos-collapse-toggle:hover {
    border-color: var(--accent);
}

.kos-collapse-chevron {
    font-size: 12px;
    color: var(--text-secondary);
}

.kos-collapse-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}