/* ════════════════════════════════════════════════════════════════════════════
   Air Design System 1.0 — GLOBAL component stylesheet (loaded app-wide, like air-chat.css /
   air-charts.css). These classes back the markup-only layout / typography / skeleton components so
   they render correctly in ANY layout (admin, chat, and future Governance / White-Label / Marketplace
   pages) — not only inside the admin `::deep` cascade. CONSUMES tokens only; never hardcodes colour.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Layout primitives ───────────────────────────────────────────────────────── */
/* AirStack — vertical rhythm. */
.air-stack { display: flex; flex-direction: column; min-width: 0; gap: var(--air-space-md); }
.air-stack[data-gap="2xs"] { gap: var(--air-space-2xs); }
.air-stack[data-gap="xs"]  { gap: var(--air-space-xs); }
.air-stack[data-gap="sm"]  { gap: var(--air-space-sm); }
.air-stack[data-gap="md"]  { gap: var(--air-space-md); }
.air-stack[data-gap="lg"]  { gap: var(--air-space-lg); }
.air-stack[data-gap="xl"]  { gap: var(--air-space-xl); }
.air-stack[data-gap="2xl"] { gap: var(--air-space-2xl); }

/* AirInline — horizontal row, vertically centred, no wrap by default. */
.air-inline { display: flex; flex-direction: row; align-items: center; min-width: 0; gap: var(--air-space-sm); }
.air-inline[data-gap="2xs"] { gap: var(--air-space-2xs); }
.air-inline[data-gap="xs"]  { gap: var(--air-space-xs); }
.air-inline[data-gap="sm"]  { gap: var(--air-space-sm); }
.air-inline[data-gap="md"]  { gap: var(--air-space-md); }
.air-inline[data-gap="lg"]  { gap: var(--air-space-lg); }
.air-inline[data-align="start"]   { align-items: flex-start; }
.air-inline[data-align="end"]     { align-items: flex-end; }
.air-inline[data-align="baseline"]{ align-items: baseline; }
.air-inline[data-wrap="true"]     { flex-wrap: wrap; }

/* AirCluster — wrapping group of items (e.g. button rows / chips). */
.air-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--air-space-sm); }
.air-cluster[data-gap="xs"] { gap: var(--air-space-xs); }
.air-cluster[data-gap="md"] { gap: var(--air-space-md); }
.air-cluster[data-justify="end"]     { justify-content: flex-end; }
.air-cluster[data-justify="between"] { justify-content: space-between; }

/* AirGrid — responsive auto-fill grid; --air-grid-min sets the min column width. */
.air-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--air-grid-min, 220px), 1fr)); gap: var(--air-space-md); }
.air-grid[data-gap="sm"] { gap: var(--air-space-sm); }
.air-grid[data-gap="lg"] { gap: var(--air-space-lg); }

/* AirSplit — left/right with space between; stacks under the breakpoint. */
.air-split { display: flex; align-items: center; justify-content: space-between; gap: var(--air-space-md); flex-wrap: wrap; }
.air-split-start { display: flex; align-items: center; gap: var(--air-space-sm); min-width: 0; }
.air-split-end   { display: flex; align-items: center; gap: var(--air-space-sm); min-width: 0; margin-left: auto; }

/* ── Typography ──────────────────────────────────────────────────────────────── */
.air-heading { margin: 0; color: var(--air-text); letter-spacing: -0.02em; line-height: var(--air-line-height-tight); font-weight: var(--air-font-weight-semibold); }
.air-heading[data-level="1"] { font-size: var(--air-font-size-xl); }
.air-heading[data-level="2"] { font-size: var(--air-font-size-lg); }
.air-heading[data-level="3"] { font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-medium); }
.air-heading[data-level="4"] { font-size: var(--air-font-size-sm); font-weight: var(--air-font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--air-text-subtle); }

.air-text { margin: 0; color: var(--air-text); font-size: var(--air-font-size-md); line-height: var(--air-line-height-normal); }
.air-text[data-tone="muted"]  { color: var(--air-text-muted); }
.air-text[data-tone="subtle"] { color: var(--air-text-subtle); }
.air-text[data-tone="accent"] { color: var(--air-accent); }
.air-text[data-tone="success"]{ color: var(--air-success); }
.air-text[data-tone="warning"]{ color: var(--air-warning); }
.air-text[data-tone="danger"] { color: var(--air-danger); }
.air-text[data-size="sm"] { font-size: var(--air-font-size-sm); }
.air-text[data-size="lg"] { font-size: var(--air-font-size-lg); }

.air-caption { margin: 0; font-size: var(--air-font-size-xs); color: var(--air-text-subtle); line-height: var(--air-line-height-normal); }
.air-label   { font-size: var(--air-font-size-sm); font-weight: var(--air-font-weight-medium); color: var(--air-text); }
.air-code {
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace; font-size: 0.82em;
    background: var(--air-bg-muted); color: var(--air-text); padding: 0.1em 0.35em;
    border-radius: var(--air-radius-xs); border: 1px solid var(--air-border-soft);
}
.air-metric-value { font-size: 1.55rem; font-weight: var(--air-font-weight-semibold); letter-spacing: -0.02em; color: var(--air-text); line-height: 1.05; font-variant-numeric: tabular-nums; }

/* ── Cards (AirCard) — universal surface hierarchy; works in any layout (admin mirrors these via ::deep). ── */
.air-card { background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius); padding: var(--air-card-padding); box-shadow: var(--air-shadow-xs); }
.air-card-title { font-size: 0.92rem; font-weight: 600; color: var(--air-text); margin: 0 0 var(--air-space-sm); }
.air-card--elevated { background: var(--air-surface-elevated); box-shadow: var(--air-shadow-sm); }
.air-card--interactive { cursor: pointer; transition: border-color var(--air-transition), box-shadow var(--air-transition), background-color var(--air-transition); }
.air-card--interactive:hover { border-color: var(--air-border-strong); box-shadow: var(--air-shadow-sm); background: var(--air-surface-elevated); }
.air-card--selected { border-color: var(--air-accent); box-shadow: 0 0 0 1px var(--air-accent); }
.air-card--info { background: var(--air-info-bg); border-color: var(--air-info-border); }
.air-card--warn { background: var(--air-warning-bg); border-color: var(--air-warning-border); }
.air-card--err  { background: var(--air-danger-bg); border-color: var(--air-danger-border); }
@media (prefers-reduced-motion: reduce) { .air-card--interactive { transition: none; } }

/* ── Interactive primitives (AirButton / AirChip / AirTabBar) — GLOBAL so they work on user-facing pages,
   chat and future surfaces, not only inside the admin ::deep cascade. Token-only. ── */
.air-tabbar { display: flex; flex-wrap: wrap; gap: 0.1rem; border-bottom: 1px solid var(--air-border); }
.air-tab {
    appearance: none; -webkit-appearance: none; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2; color: var(--air-text-muted);
    padding: var(--air-space-sm) 0.8rem; margin-bottom: -1px; position: relative;
    border-radius: var(--air-radius-sm) var(--air-radius-sm) 0 0;
    transition: color var(--air-transition), background-color var(--air-transition);
}
.air-tab:hover { color: var(--air-text); background: var(--air-hover); }
.air-tab.active { color: var(--air-text); font-weight: 600; }
.air-tab.active::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; height: 2px; background: var(--air-accent); border-radius: 2px 2px 0 0; }
.air-tab:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-tab:disabled { color: var(--air-disabled); cursor: default; }

.air-chipgroup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--air-space-sm); }
.air-chip {
    appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit;
    font-size: 0.82rem; font-weight: 500; line-height: 1.2; color: var(--air-text);
    background: var(--air-surface); border: 1px solid var(--air-border-strong); border-radius: 999px; padding: var(--air-space-xs) 0.9rem;
    transition: background-color var(--air-transition), border-color var(--air-transition), color var(--air-transition);
}
.air-chip:hover { background: var(--air-hover); border-color: var(--air-text-subtle); }
.air-chip.selected { background: var(--air-accent); border-color: var(--air-accent); color: var(--air-accent-text); font-weight: 600; }
.air-chip:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-chip:disabled { opacity: 0.55; cursor: default; }

.air-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit;
    font-size: 0.83rem; font-weight: 550; line-height: 1.2; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--air-space-xs);
    min-height: 34px; padding: 0 0.9rem; border-radius: var(--air-radius-sm); border: 1px solid transparent;
    transition: background-color var(--air-transition), border-color var(--air-transition), color var(--air-transition), box-shadow var(--air-transition), filter var(--air-transition);
}
.air-btn:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.air-btn .air-icon, .air-btn .mud-icon-root { font-size: 1.05rem; }
.air-btn--icon { width: 34px; padding: 0; }
.air-btn--primary { background: var(--air-accent); color: var(--air-accent-text); }
.air-btn--primary:hover:not(:disabled) { background: var(--air-accent-hover); }
.air-btn--secondary { background: var(--air-surface-elevated); color: var(--air-text); border-color: var(--air-border-strong); }
.air-btn--secondary:hover:not(:disabled) { background: var(--air-hover); border-color: var(--air-text-subtle); }
.air-btn--outline { background: transparent; color: var(--air-text); border-color: var(--air-border-strong); }
.air-btn--outline:hover:not(:disabled) { background: var(--air-hover); border-color: var(--air-text-subtle); }
.air-btn--ghost { background: transparent; color: var(--air-text-muted); }
.air-btn--ghost:hover:not(:disabled) { background: var(--air-hover); color: var(--air-text); }
.air-btn--danger { background: var(--air-danger); color: var(--air-accent-text); }
.air-btn--danger:hover:not(:disabled) { filter: brightness(0.93); }
.air-btn--success { background: var(--air-success); color: var(--air-accent-text); }
.air-btn--success:hover:not(:disabled) { filter: brightness(0.93); }
.air-btn-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: air-btn-spin 0.6s linear infinite; }
@keyframes air-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .air-btn-spin { animation: none; } }

/* ── Icon button (AirIconButton) — quiet square action; danger tone for destructive actions. ── */
.air-iconbtn {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: none; background: none;
    border-radius: var(--air-radius-sm); color: var(--air-text-muted);
    transition: background-color var(--air-transition), color var(--air-transition);
}
.air-iconbtn:hover { background: var(--air-hover); color: var(--air-text); }
.air-iconbtn:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-iconbtn:disabled { opacity: 0.45; cursor: default; }
.air-iconbtn--danger { color: var(--air-danger); }
.air-iconbtn--danger:hover { background: var(--air-danger-bg); color: var(--air-danger); }
.air-iconbtn .mud-icon-root, .air-iconbtn .air-icon { font-size: 1.1rem; }

/* ── Selectable cards (AirSelectableCard / AirThemeCard) — choosable surfaces with a strong selected state. ── */
.air-selectable-card {
    display: block; width: 100%; text-align: left; cursor: pointer; color: var(--air-text);
    background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius);
    padding: var(--air-card-padding);
    transition: border-color var(--air-transition), box-shadow var(--air-transition), background-color var(--air-transition);
}
.air-selectable-card:hover { border-color: var(--air-border-strong); box-shadow: var(--air-shadow-xs); }
.air-selectable-card:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-selectable-card.is-selected { border-color: var(--air-accent); box-shadow: 0 0 0 1px var(--air-accent); background: var(--air-accent-soft); }

.air-theme-card {
    display: flex; flex-direction: column; gap: var(--air-space-sm); text-align: left; padding: 0; cursor: pointer;
    background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius); overflow: hidden;
    transition: border-color var(--air-transition), box-shadow var(--air-transition);
}
.air-theme-card:hover { border-color: var(--air-border-strong); box-shadow: var(--air-shadow-xs); }
.air-theme-card:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-theme-card.is-current { border-color: var(--air-success); box-shadow: 0 0 0 1px var(--air-success); }
.air-theme-card.is-previewing { border-color: var(--air-accent); box-shadow: 0 0 0 1px var(--air-accent), var(--air-shadow-sm); }
.air-theme-card-swatch { display: flex; height: 48px; }
.air-theme-card-swatch span { flex: 1; }
.air-theme-card-body { padding: var(--air-space-sm) 0.7rem 0.7rem; }
.air-theme-card-name { display: flex; align-items: center; gap: var(--air-space-xs); font-weight: var(--air-font-weight-semibold); color: var(--air-text); }
.air-theme-card-meta { font-size: var(--air-font-size-sm); color: var(--air-text-subtle); }
@media (prefers-reduced-motion: reduce) { .air-selectable-card, .air-theme-card { transition: none; } }

/* ── Table (AirTable) — GLOBAL so it renders on user-facing pages too (quiet header, soft hover). ── */
.air-table-wrap {
    overflow-x: auto;
    /* Subtle, token-driven scrollbar — only visible when the data genuinely overflows (premium feel). */
    scrollbar-width: thin;
    scrollbar-color: var(--air-border-strong) transparent;
}
.air-table-wrap::-webkit-scrollbar { height: 8px; }
.air-table-wrap::-webkit-scrollbar-track { background: transparent; }
.air-table-wrap::-webkit-scrollbar-thumb { background: var(--air-border-strong); border-radius: 999px; }
.air-table { width: 100%; border-collapse: collapse; }
/* Numeric columns: right-aligned, tabular figures (so digits line up like a real data grid). */
.air-table th.air-num, .air-table td.air-num { text-align: right; font-variant-numeric: tabular-nums; }
.air-table th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--air-text-subtle); font-weight: 600; text-align: left;
    padding: var(--air-space-sm) 0.7rem; border-bottom: 1px solid var(--air-border); white-space: nowrap;
}
.air-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--air-border-soft); font-size: 0.85rem; color: var(--air-text); font-variant-numeric: tabular-nums; vertical-align: middle; }
.air-table tbody tr { transition: background-color 0.1s ease; }
.air-table tbody tr:hover td { background: var(--air-table-row-hover); }
.air-table tbody tr:last-child td { border-bottom: none; }
.air-table.has-min { min-width: var(--air-table-min, 0); }
@media (prefers-reduced-motion: reduce) { .air-table tbody tr { transition: none; } }

/* ── Status dot + label (AirSeverityBadge / AirStatusBadge) — GLOBAL. Colour only on the dot. ── */
.air-status { display: inline-flex; align-items: center; gap: var(--air-space-xs); font-size: 0.84rem; color: var(--air-text); }
.air-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--air-neutral); }
.air-dot.ok { background: var(--air-ok); }
.air-dot.warn { background: var(--air-warn); }
.air-dot.err { background: var(--air-err); }
.air-dot.info { background: var(--air-info); }

/* ── Empty state (AirEmptyState) — GLOBAL: a contained surface, icon in a soft chip, strong title. ── */
.air-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2.5rem 1.25rem; gap: var(--air-space-xs);
    background: var(--air-surface-subtle); border: 1px solid var(--air-border-soft); border-radius: var(--air-radius);
}
.air-empty-icon {
    font-size: 1.6rem !important; color: var(--air-icon);
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; margin-bottom: var(--air-space-2xs);
    background: var(--air-bg-muted); border-radius: 50%;
}
.air-empty-title { font-size: 1rem; font-weight: 600; color: var(--air-text); }
.air-empty-desc { font-size: 0.84rem; color: var(--air-text-muted); max-width: 42ch; line-height: 1.45; }

/* ── Tag — a small, quiet label pill (metadata / categories). Token-only. ── */
.air-tag {
    display: inline-flex; align-items: center; gap: var(--air-space-2xs);
    font-size: var(--air-font-size-xs); font-weight: var(--air-font-weight-medium); line-height: 1.4;
    color: var(--air-text-muted); background: var(--air-bg-muted);
    border: 1px solid var(--air-border); border-radius: var(--air-radius-sm); padding: 0 var(--air-space-sm);
}
.air-tag[data-tone="accent"]  { color: var(--air-accent);  background: var(--air-accent-soft);  border-color: var(--air-accent-soft); }
.air-tag[data-tone="success"] { color: var(--air-success-text); background: var(--air-success-bg); border-color: var(--air-success-border); }
.air-tag[data-tone="warning"] { color: var(--air-warning-text); background: var(--air-warning-bg); border-color: var(--air-warning-border); }
.air-tag[data-tone="danger"]  { color: var(--air-danger-text);  background: var(--air-danger-bg);  border-color: var(--air-danger-border); }

/* ── List item (AirListItem) — a light row (border between, no per-row card). ── */
.air-listitem {
    display: flex; align-items: center; gap: var(--air-space-md);
    padding: var(--air-space-sm) 0; border-bottom: 1px solid var(--air-border-soft);
}
.air-listitem:last-child { border-bottom: none; }
.air-listitem-main { flex: 1 1 auto; min-width: 0; }
.air-listitem-end { flex: 0 0 auto; display: flex; align-items: center; gap: var(--air-space-sm); }

/* ── Native select, Air-styled (token-driven; keyboard + screen-reader native). ── */
.air-select {
    appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 0.875rem; color: var(--air-text);
    background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius-sm);
    padding: var(--air-space-sm) 0.75rem; max-width: 500px; width: 100%; cursor: pointer;
    transition: border-color var(--air-transition), box-shadow var(--air-transition);
}
.air-select:hover { border-color: var(--air-border-strong); }
.air-select:focus-visible { outline: none; border-color: var(--air-accent); box-shadow: 0 0 0 2px var(--air-accent-soft); }
.air-select option { color: var(--air-text); background: var(--air-surface); }

/* ── Divider + simple user-page container + tab panel. ── */
.air-divider { border: none; border-top: 1px solid var(--air-border); margin: var(--air-space-lg) 0; }
.air-container { max-width: var(--air-content-max-width); margin: 0 auto; padding: var(--air-space-xl) var(--air-space-lg) var(--air-space-2xl); }
.air-tabpanel { padding-top: var(--air-space-lg); }

/* ── Skeleton (loading placeholder) — colour-independent shimmer; respects reduced motion. ── */
.air-skeleton {
    display: block; border-radius: var(--air-radius-sm);
    background: linear-gradient(90deg, var(--air-bg-muted) 25%, var(--air-surface-elevated) 50%, var(--air-bg-muted) 75%);
    background-size: 200% 100%; animation: air-skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes air-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .air-skeleton { animation: none; } }

/* ── Intelligence Center surface (Epic 22 — Sprint 22B) — token-driven, theme-aware ─────────────────────── */
.air-intel-grid { display: grid; gap: var(--air-space-md); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.air-intel-split { display: grid; gap: var(--air-space-lg); grid-template-columns: 1fr; }
@media (min-width: 900px) { .air-intel-split { grid-template-columns: 2fr 1fr; } }

.air-health-tile { display: flex; flex-direction: column; gap: var(--air-space-2xs); text-decoration: none; color: inherit; }
a.air-health-tile:hover { border-color: var(--air-border-strong); }
.air-health-tile-head { display: flex; align-items: center; gap: var(--air-space-2xs); }
.air-health-tile-label { font-size: var(--air-font-size-sm); color: var(--air-text-muted); }
.air-health-tile-value { font-size: var(--air-font-size-xl); font-weight: var(--air-font-weight-semibold); color: var(--air-text); line-height: var(--air-line-height-tight); }
.air-health-tile-bar { height: 6px; border-radius: var(--air-radius-xs); background: var(--air-bg-muted); overflow: hidden; }
.air-health-tile-fill { display: block; height: 100%; background: var(--air-neutral); border-radius: var(--air-radius-xs); transition: width .3s ease; }
.air-health-tile-fill.ok { background: var(--air-ok); }
.air-health-tile-fill.warn { background: var(--air-warn); }
.air-health-tile-fill.err { background: var(--air-err); }
.air-health-tile-detail { font-size: var(--air-font-size-xs); color: var(--air-text-subtle); }

.air-cap-grid { display: grid; gap: var(--air-space-md); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.air-cap-card { display: flex; flex-direction: column; gap: var(--air-space-xs); }
.air-cap-card-title { font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-semibold); color: var(--air-text); }
.air-cap-card-desc { font-size: var(--air-font-size-sm); color: var(--air-text-muted); }
.air-cap-card-meta { font-size: var(--air-font-size-xs); color: var(--air-text-subtle); }
.air-cap-actions { display: flex; flex-wrap: wrap; gap: var(--air-space-2xs); margin-top: var(--air-space-2xs); }

.air-search-result { display: flex; align-items: baseline; gap: var(--air-space-sm); padding: var(--air-space-xs) 0; border-bottom: 1px solid var(--air-border-soft); text-decoration: none; color: inherit; }
.air-search-result:hover { background: var(--air-hover); }
.air-search-kind { font-size: var(--air-font-size-xs); color: var(--air-accent-text); background: var(--air-accent-soft); padding: 2px var(--air-space-2xs); border-radius: var(--air-radius-xs); white-space: nowrap; }
.air-search-title { font-size: var(--air-font-size-sm); color: var(--air-text); font-weight: var(--air-font-weight-medium); }
.air-search-sub { font-size: var(--air-font-size-xs); color: var(--air-text-subtle); }

/* ── Personal AI Home (Epic 22 — Sprint 22D) ─────────────────────────────────────────────────────────────── */
.air-assistant-line { display: flex; align-items: center; gap: var(--air-space-sm); text-decoration: none; color: inherit; margin-bottom: var(--air-space-2xs); }
.air-assistant-line .air-search-title { flex: 1 1 auto; }
.air-assistant-line:hover { border-color: var(--air-border-strong); }

/* ── Sprint 22E: feedback widget + print ─────────────────────────────────────────────────────────────────── */
.air-feedback { margin-top: var(--air-space-lg); }
.air-feedback-row { display: flex; align-items: center; gap: var(--air-space-xs); }
.air-feedback-q { font-size: var(--air-font-size-sm); color: var(--air-text-muted); }
.air-feedback-detail { margin-top: var(--air-space-xs); }
.air-feedback-thanks { display: flex; align-items: center; gap: var(--air-space-2xs); font-size: var(--air-font-size-sm); color: var(--air-success-text); }
@media print {
  .air-admin-sidebar, .air-admin-topbar, .air-page-actions, .air-feedback { display: none !important; }
  .air-admin-content { padding: 0 !important; }
  .air-card { break-inside: avoid; }
}

/* ── Sprint 22F: suggestions + polish transitions ─────────────────────────────────────────────────────────── */
.air-suggestion { display: flex; align-items: center; gap: var(--air-space-sm); margin-bottom: var(--air-space-xs); }
.air-suggestion .air-feed-body { flex: 1 1 auto; }
.air-card { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.air-health-tile, .air-search-result, .air-assistant-line { transition: background-color .12s ease, border-color .12s ease; }
.air-timeline-group-label { font-size: var(--air-font-size-xs); font-weight: var(--air-font-weight-semibold); color: var(--air-text-subtle); text-transform: uppercase; letter-spacing: .04em; margin: var(--air-space-sm) 0 var(--air-space-2xs); }
.air-critical { border-left: 3px solid var(--air-err); padding-left: var(--air-space-xs); }

/* ── Compact Home (Epic 22 — Sprint 22G) — calm, focused, matches the Chat visual language ─────────────────── */
.air-compact { max-width: var(--air-content-max-width-large); margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 28px; }

.air-compact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.air-compact-greeting { font-size: var(--air-font-size-xl); font-weight: var(--air-font-weight-semibold); color: var(--air-text); margin: 0; line-height: var(--air-line-height-tight); }
.air-compact-sub { font-size: var(--air-font-size-md); color: var(--air-text-muted); margin: 6px 0 0; }
.air-compact-actions { display: flex; gap: 8px; }
.air-compact-btn { height: 40px; }

/* Priority cards */
.air-compact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.air-compact-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--air-border); background: var(--air-surface); text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.air-compact-card:hover { transform: translateY(-2px); border-color: var(--air-border-strong); box-shadow: var(--air-shadow-xs); }
.air-compact-card:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }
.air-compact-card-ico { display: inline-flex; }
.air-compact-card-title { font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-semibold); color: var(--air-text); }
.air-compact-card-text { font-size: var(--air-font-size-sm); color: var(--air-text-muted); flex: 1 1 auto; }
.air-compact-card-link { font-size: var(--air-font-size-sm); color: var(--air-accent-text); font-weight: var(--air-font-weight-medium); }

/* Continue / AI-recommends panels */
.air-compact-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.air-compact-panel { padding: 20px; border-radius: 16px; border: 1px solid var(--air-border); background: var(--air-surface); }
.air-compact-panel-head { display: flex; align-items: baseline; justify-content: space-between; }
.air-compact-panel-title { font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-semibold); color: var(--air-text); margin: 0 0 12px; }
.air-compact-viewall { font-size: var(--air-font-size-sm); color: var(--air-accent-text); text-decoration: none; }
.air-compact-viewall:hover { text-decoration: underline; }
.air-compact-empty { font-size: var(--air-font-size-sm); color: var(--air-text-subtle); padding: 8px 0; }

.air-compact-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .15s ease; }
.air-compact-row:hover { background: var(--air-hover); }
.air-compact-row:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 1px; }
.air-compact-row-ico { color: var(--air-icon); flex: 0 0 auto; }
.air-compact-row-body { min-width: 0; }
.air-compact-row-title { font-size: var(--air-font-size-sm); color: var(--air-text); font-weight: var(--air-font-weight-medium); }
.air-compact-row-sub { font-size: var(--air-font-size-xs); color: var(--air-text-subtle); }

/* Quick-action chips */
.air-compact-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.air-compact-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--air-border); background: var(--air-surface); color: var(--air-text); font-size: var(--air-font-size-sm); text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.air-compact-chip:hover { background: var(--air-hover); border-color: var(--air-border-strong); }
.air-compact-chip:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; }

/* Customize (Anpassa) */
.air-compact-suggestions { display: flex; flex-direction: column; gap: 8px; }
.air-compact-suggestion { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--air-border); background: var(--air-surface); }
.air-compact-suggestion > div:first-child { flex: 1 1 auto; }

/* Responsive: tablet 2x2 + stacked panels; mobile single column */
@media (max-width: 1024px) { .air-compact-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .air-compact-panels { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .air-compact-cards { grid-template-columns: 1fr; } .air-compact { padding: 24px 16px; } }

/* ── Global compact page shell (Epic 22 — Sprint 22H) — aligns every AdminPage-based page OUTSIDE AdminLayout
   (Intelligence Center + persona workspaces) to the Compact Home / Chat language. Admin pages keep their more-
   specific scoped rules (AdminLayout.razor.css), so they are unaffected. Token-driven; no hardcoded colors. ── */
.air-page { max-width: var(--air-content-max-width-large); margin: 0 auto; }
.air-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.air-page-headings { min-width: 0; }
.air-page-title { font-size: var(--air-font-size-xl); font-weight: var(--air-font-weight-semibold); color: var(--air-text); margin: 0; line-height: var(--air-line-height-tight); }
.air-page-desc { font-size: var(--air-font-size-md); color: var(--air-text-muted); margin: 6px 0 0; max-width: 70ch; }
.air-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.air-page-body { display: flex; flex-direction: column; gap: 28px; }
.air-section { margin: 0; }
.air-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.air-section-title { font-size: var(--air-font-size-md); font-weight: var(--air-font-weight-semibold); color: var(--air-text); margin: 0 0 12px; }
.air-section-head .air-section-title { margin: 0; }
.air-section-actions { display: flex; gap: 8px; }

/* ── Arbetsytor sidebar group (Epic 22 — Sprint 22H) — collapsible workspace navigation in the chat sidebar ── */
.air-ws-group { display: flex; flex-direction: column; }
.air-ws-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: transparent; border: none; border-radius: var(--air-radius-sm); color: var(--air-text); font-size: var(--air-font-size-sm); cursor: pointer; text-align: left; transition: background-color .12s ease; }
.air-ws-toggle:hover { background: var(--air-hover); }
.air-ws-toggle:focus-visible { outline: 2px solid var(--air-accent); outline-offset: -2px; }
.air-ws-toggle-label { flex: 1 1 auto; }
.air-ws-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.air-ws-link { padding-left: 28px !important; font-size: var(--air-font-size-sm); }

/* ── Workspace breadcrumb (Epic 22 — Sprint 22J) ─────────────────────────────────────────────────────────────── */
.air-compact-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--air-font-size-sm); margin-bottom: 16px; }
.air-compact-breadcrumb a { color: var(--air-text-muted); text-decoration: none; }
.air-compact-breadcrumb a:hover { color: var(--air-accent-text); }
.air-compact-breadcrumb a:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; border-radius: var(--air-radius-xs); }
.air-compact-breadcrumb-sep { color: var(--air-text-subtle); }
.air-compact-breadcrumb-current { color: var(--air-text); font-weight: var(--air-font-weight-medium); }

/* ── Epic 23B — Artifact Platform surface (cards / viewer / page). Token-driven (theme-compliant). ─────────────── */
.air-artifacts-toolbar { display: flex; align-items: center; gap: var(--air-space-md); flex-wrap: wrap; margin-bottom: 12px; }
.air-artifacts-search { flex: 1 1 240px; min-width: 200px; }
.air-artifacts-sort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.air-artifacts-sort-label { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifacts-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.air-artifacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.air-artifacts-state { display: flex; align-items: center; gap: 8px; color: var(--air-text-muted); padding: 24px 0; }
.air-artifacts-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--air-text-muted); padding: 48px 16px; }
.air-artifacts-empty-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); font-size: 1.05rem; }
.air-artifacts-empty-text { max-width: 420px; }
.air-artifacts-detail { display: flex; flex-direction: column; gap: 12px; }

/* Card — reads like a document, not a chat bubble. */
.air-artifact-card { display: flex; align-items: center; gap: 8px; background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius-md); padding: 10px 12px; transition: border-color var(--air-transition), background-color var(--air-transition); }
.air-artifact-card:hover { border-color: var(--air-accent); background: var(--air-hover); }
.air-artifact-card--compact { padding: 8px 10px; }
.air-artifact-card-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.air-artifact-card-glyph { color: var(--air-accent); flex-shrink: 0; }
.air-artifact-card-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.air-artifact-card-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-artifact-card-meta { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-card-dot { color: var(--air-text-subtle); margin: 0 2px; }
.air-artifact-card-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Viewer — the default (no-renderer) presentation. */
.air-artifact-viewer { background: var(--air-surface); border: 1px solid var(--air-border); border-radius: var(--air-radius-md); padding: 16px; }
.air-artifact-viewer-state { display: flex; align-items: center; gap: 8px; color: var(--air-text-muted); padding: 24px 0; }
.air-artifact-viewer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.air-artifact-viewer-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); font-size: 1.15rem; }
.air-artifact-viewer-sub { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-section { border-top: 1px solid var(--air-border); padding: 12px 0; }
.air-artifact-section-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); margin-bottom: 8px; }
.air-artifact-prop { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-prop span:last-child { color: var(--air-text); text-align: right; }
.air-artifact-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.air-artifact-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.air-artifact-versions li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--air-radius-sm); color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-versions li.is-current { background: var(--air-hover); }
.air-artifact-version-num { color: var(--air-text); font-weight: var(--air-font-weight-medium); }
.air-artifact-version-badge { color: var(--air-accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.air-artifact-version-reason { color: var(--air-text-subtle); }
.air-artifact-empty-inline { color: var(--air-text-subtle); font-size: var(--air-font-size-sm); }
.air-artifact-raw { background: var(--air-bg-muted); border: 1px solid var(--air-border); border-radius: var(--air-radius-sm); padding: 12px; overflow: auto; max-height: 360px; font-size: var(--air-font-size-sm); color: var(--air-text); white-space: pre; }

@media (max-width: 640px) {
    .air-artifacts-grid { grid-template-columns: 1fr; }
    .air-artifacts-toolbar { flex-direction: column; align-items: stretch; }
}

/* ── Epic 23C — inline artifact cards in chat + the viewer drawer ─────────────────────────────────────────────── */
.air-artifact-message { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; max-width: 100%; }
.air-artifact-message .air-artifact-card { animation: air-artifact-fade-in 0.18s ease-out; }

@keyframes air-artifact-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .air-artifact-message .air-artifact-card { animation: none; }
}

.air-artifact-drawer-backdrop { position: fixed; inset: 0; background: var(--air-drawer-scrim); z-index: 1400; animation: air-artifact-fade-in 0.15s ease-out; }
.air-artifact-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); z-index: 1401;
    background: var(--air-drawer-bg); border-left: 1px solid var(--air-drawer-border); box-shadow: var(--air-drawer-shadow);
    display: flex; flex-direction: column; animation: air-artifact-slide-in 0.2s ease-out;
}
@keyframes air-artifact-slide-in {
    from { transform: translateX(16px); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .air-artifact-drawer, .air-artifact-drawer-backdrop { animation: none; }
}
.air-artifact-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--air-border); }
.air-artifact-drawer-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); }
.air-artifact-drawer-body { flex: 1; overflow: auto; padding: 16px; }

@media (max-width: 640px) {
    .air-artifact-drawer { width: 100vw; border-left: 0; }
}

/* ── Epic 23D — Chart artifact viewer (token-only; charts get their palette from --air-chart-* via JS) ─────────── */
.air-chart-artifact { display: flex; flex-direction: column; gap: 12px; }
.air-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.air-chart-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); font-size: 1.1rem; }
.air-chart-desc { color: var(--air-text-muted); font-size: var(--air-font-size-sm); margin-top: 2px; }
.air-chart-version { display: inline-flex; align-items: center; gap: 6px; }
.air-chart-version-label { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-chart-version-select { background: var(--air-surface); color: var(--air-text); border: 1px solid var(--air-border); border-radius: var(--air-radius-sm); padding: 4px 8px; font-size: var(--air-font-size-sm); }
.air-chart-version-select:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 1px; }
.air-chart-canvas { width: 100%; min-height: 340px; height: 42vh; max-height: 520px; }
/* Sprint 23G — the transient inline chat chart preview: full width, bounded height, no clipping of the contained
   chart (the ECharts grid reserves axis-title/legend room; tooltips are confined). It is deliberately chrome-light —
   the toolbar/actions belong to the canonical ArtifactCard/Viewer, never here. */
.air-chart-preview { width: 100%; overflow: visible; }
.air-chart-preview .air-chart-canvas { min-height: 300px; height: 38vh; max-height: 440px; }
.air-chart-state { display: flex; align-items: center; gap: 8px; color: var(--air-text-muted); padding: 32px 0; justify-content: center; }
.air-chart-error { display: flex; gap: 10px; align-items: flex-start; background: var(--air-bg-muted); border: 1px solid var(--air-border); border-radius: var(--air-radius-md); padding: 16px; }
.air-chart-error-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); }
.air-chart-error-list { margin: 6px 0; padding-left: 18px; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-chart-error-actions { display: flex; gap: 4px; margin-top: 4px; }
.air-chart-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--air-border); padding-top: 8px; }
.air-chart-meta { color: var(--air-text-subtle); font-size: var(--air-font-size-sm); margin-left: auto; }

@media (max-width: 640px) {
    .air-chart-canvas { height: 52vh; min-height: 280px; }
}

/* ── Sprint 23D.5 — chart toolbar / full-screen / details (token-only) ────────────────────────────────────────── */
.air-chart-head { align-items: flex-start; gap: 8px; }
.air-chart-headings { min-width: 0; flex: 1; }
.air-chart-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; flex-shrink: 0; }
.air-chart-fullscreen { position: fixed; inset: 0; z-index: 1500; background: var(--air-surface); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
.air-chart-fullscreen .air-chart-canvas { height: calc(100vh - 150px); max-height: none; }
.air-chart-error-hint { color: var(--air-text-muted); font-size: var(--air-font-size-sm); margin: 2px 0 8px; }
.air-chart-diagnostics { margin: 4px 0 8px; }
.air-chart-diagnostics summary { cursor: pointer; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-chart-diagnostics summary:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 2px; border-radius: var(--air-radius-xs); }
.air-chart-details { border-top: 1px solid var(--air-border); margin-top: 12px; padding-top: 12px; }
.air-chart-details-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); margin-bottom: 8px; }
.air-chart-detail { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-chart-detail span:last-child { color: var(--air-text); text-align: right; word-break: break-word; }

/* 23F — universal viewer header + renderer area. */
.air-artifact-heading-row { display: flex; align-items: center; gap: 6px; }
.air-artifact-renderer { width: 100%; }
.air-chart-canvas-error { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 200px; color: var(--air-text-muted); }

/* 23D.5.1 — hybrid icon+text toolbar buttons (self-explanatory, wrap on narrow, labels collapse < 560px). */
.air-chart-tbtn { text-transform: none; }
.air-chart-tbtn-label { margin-left: 2px; }
@media (max-width: 560px) {
    .air-chart-tbtn-label { display: none; }   /* plain buttons → icon-only; Export/Kopiera keep their menu labels */
    .air-chart-toolbar { gap: 4px; }
}

/* ── Sprint 23F.1 — the UNIVERSAL Artifact Viewer's OWN chrome (renderer-agnostic). Declarations mirror the chart
   chrome exactly, so charts are visually unchanged while the generic viewer is no longer styled as a "chart". The
   renderer's content keeps its own class (e.g. .air-chart-canvas for the chart canvas). ──────────────────────────── */
.air-artifact-viewer { display: flex; flex-direction: column; gap: 12px; }
.air-artifact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.air-artifact-headings { min-width: 0; flex: 1; }
.air-artifact-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); font-size: 1.1rem; }
.air-artifact-desc { color: var(--air-text-muted); font-size: var(--air-font-size-sm); margin-top: 2px; }
.air-artifact-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; flex-shrink: 0; }
.air-artifact-version { display: inline-flex; align-items: center; gap: 6px; }
.air-artifact-version-label { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-version-select { background: var(--air-surface); color: var(--air-text); border: 1px solid var(--air-border); border-radius: var(--air-radius-sm); padding: 4px 8px; font-size: var(--air-font-size-sm); }
.air-artifact-version-select:focus-visible { outline: 2px solid var(--air-accent); outline-offset: 1px; }
.air-artifact-tbtn { text-transform: none; }
.air-artifact-tbtn-label { margin-left: 2px; }
.air-artifact-state { display: flex; align-items: center; gap: 8px; color: var(--air-text-muted); padding: 32px 0; justify-content: center; }
.air-artifact-error { display: flex; gap: 10px; align-items: flex-start; background: var(--air-bg-muted); border: 1px solid var(--air-border); border-radius: var(--air-radius-md); padding: 16px; }
.air-artifact-error-hint { color: var(--air-text-muted); font-size: var(--air-font-size-sm); margin: 2px 0 8px; }
.air-artifact-fullscreen { position: fixed; inset: 0; z-index: 1500; background: var(--air-surface); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
.air-artifact-fullscreen .air-chart-canvas { height: calc(100vh - 150px); max-height: none; }
.air-artifact-details { border-top: 1px solid var(--air-border); margin-top: 12px; padding-top: 12px; }
.air-artifact-details-title { color: var(--air-text); font-weight: var(--air-font-weight-medium); margin-bottom: 8px; }
.air-artifact-detail { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-detail span:last-child { color: var(--air-text); text-align: right; word-break: break-word; }
@media (max-width: 560px) {
    .air-artifact-tbtn-label { display: none; }
    .air-artifact-toolbar { gap: 4px; }
}

/* ── Sprint 23J — inline Table artifact card (token-driven; reuses --air-* like the chart card) ─────────────── */
.air-table-card { display: flex; flex-direction: column; }
.air-table-preview { padding: 0; }

.air-table-controls {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.375rem 0.5rem; flex-wrap: wrap;
}
.air-table-search {
    display: flex; align-items: center; gap: 0.25rem;
    border: 1px solid var(--air-border); border-radius: var(--air-radius-sm);
    background: var(--air-surface); padding: 0.125rem 0.5rem; min-width: 12rem; flex: 1 1 12rem; max-width: 22rem;
}
.air-table-search-input {
    border: 0; outline: 0; background: transparent; color: var(--air-text);
    font-size: var(--air-font-size-sm); width: 100%; padding: 0.25rem 0;
}
.air-table-search-clear { border: 0; background: transparent; color: var(--air-icon); cursor: pointer; display: inline-flex; padding: 0; }
.air-table-rowinfo { color: var(--air-text-muted); font-size: var(--air-font-size-xs); white-space: nowrap; }

.air-table-scroll {
    overflow: auto; max-height: 22rem; border-top: 1px solid var(--air-border-soft);
    border-bottom: 1px solid var(--air-border-soft);
}
.air-table-scroll--full { max-height: calc(100vh - 12rem); }

.air-table { border-collapse: collapse; width: 100%; font-size: var(--air-font-size-sm); color: var(--air-text); }
.air-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--air-surface-subtle); color: var(--air-text);
    text-align: left; font-weight: var(--air-font-weight-semibold);
    border-bottom: 1px solid var(--air-border); white-space: nowrap;
}
.air-table-th-btn {
    display: inline-flex; align-items: center; gap: 0.25rem; width: 100%;
    border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit;
    cursor: pointer; padding: 0.4rem 0.6rem; text-align: left;
}
.air-table tbody td { border-bottom: 1px solid var(--air-border-soft); padding: 0.35rem 0.6rem; vertical-align: top; }
.air-table tbody tr:hover td { background: var(--air-hover); }
.air-table-num { text-align: right; font-variant-numeric: tabular-nums; }
.air-table-num .air-table-th-btn { justify-content: flex-end; }
.air-table-null { color: var(--air-text-subtle); }
.air-table-empty-cell { text-align: center; color: var(--air-text-muted); padding: 1rem; }

.air-table-empty {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
    color: var(--air-text-muted); padding: 1.25rem; font-size: var(--air-font-size-sm);
}
.air-table-truncation {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem;
    color: var(--air-text-muted); font-size: var(--air-font-size-xs);
    background: var(--air-bg-muted); border-top: 1px solid var(--air-border-soft);
}

@media (max-width: 560px) {
    .air-table-controls { flex-direction: column; align-items: stretch; }
    .air-table-search { max-width: none; }
}

/* ── Sprint 23K — inline Diagram (Mermaid) artifact card (token-driven) ─────────────────────────────────────── */

/* Sprint 23K.4.2 — the unified artifact toolbar exposes ONE control-height variable so every control
   (icon-only zoom buttons AND text/menu actions) shares one box height and one centerline — nothing sits low. */
.air-diagram-card { display: flex; flex-direction: column; --air-artifact-toolbar-control-h: 32px; }
.air-diagram-preview { padding: 0; width: 100%; }

.air-mermaid { display: flex; flex-direction: column; width: 100%; }
.air-mermaid-controls { display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem 0.4rem; }
.air-mermaid-zoom {
    display: inline-flex; align-items: center; justify-content: flex-end;
    height: var(--air-artifact-toolbar-control-h, 32px); min-width: 3rem;
    color: var(--air-artifact-toolbar-muted-fg, var(--air-text-muted));
    font-size: var(--air-font-size-xs); text-align: right; font-variant-numeric: tabular-nums;
}

/* Sprint 23K.4.2 — diagram navigation controls read from the SEMANTIC artifact-toolbar tokens (defined app-wide
   in air-design-tokens.css) so they flip dark/light and stay visible in both. A single `color` drives the whole
   control; the SVG glyph inherits it via .mud-icon-root (currentColor) so nothing hard-codes an icon colour.
   Root cause of the too-dark icons: the prior 23K.3 tokens were scoped to .air-artifact-renderer, but the unified
   toolbar's zoom buttons are a SIBLING of that element, so they fell back to the fainter --air-icon. */
.air-diagram-ctl.mud-icon-button {
    color: var(--air-artifact-toolbar-fg, var(--air-text-muted)) !important;
    height: var(--air-artifact-toolbar-control-h, 32px);
    width: var(--air-artifact-toolbar-control-h, 32px);
    padding: 0;
}
.air-diagram-ctl .mud-icon-root { color: inherit !important; fill: currentColor; }
.air-diagram-ctl:hover { color: var(--air-artifact-toolbar-hover-fg, var(--air-text)) !important; background: var(--air-artifact-toolbar-hover-bg, var(--air-hover)) !important; }
.air-diagram-ctl:active { background: var(--air-artifact-toolbar-active-bg, var(--air-selected)) !important; }
.air-diagram-ctl:focus-visible { outline: 2px solid var(--air-artifact-toolbar-focus-ring, var(--air-focus-ring)); outline-offset: 2px; }
.air-diagram-ctl:disabled, .air-diagram-ctl[disabled] { color: var(--air-artifact-toolbar-disabled-fg, var(--air-disabled)) !important; opacity: 1; }

/* Phase 8 — a BOUNDED, responsive viewport height so the initial fit (DiagramFit) targets a stable box; the surface
   is sized (natural × zoom) and centered, so a fully-fitted diagram shows completely without internal scrolling. */
.air-mermaid-viewport {
    display: flex; align-items: center; justify-content: center; overflow: auto;
    height: clamp(420px, 55vh, 640px); background: var(--air-surface);
    border-top: 1px solid var(--air-border-soft); border-bottom: 1px solid var(--air-border-soft);
}
.air-mermaid--full .air-mermaid-viewport { height: calc(100vh - 11rem); }
.air-mermaid-surface { margin: auto; flex: 0 0 auto; }
.air-mermaid-surface svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
    .air-mermaid-viewport { height: clamp(300px, 45vh, 460px); }
}

.air-diagram-empty, .air-diagram-loading, .air-diagram-error {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
    color: var(--air-text-muted); padding: 1.25rem; font-size: var(--air-font-size-sm);
}
.air-diagram-error { color: var(--air-danger-text); background: var(--air-danger-bg); border-top: 1px solid var(--air-danger-border); }
.air-artifact-inline-missing { color: var(--air-text-muted); font-size: var(--air-font-size-sm); padding: 0.75rem 0; }

/* Sprint 23K.2b — diagram render failure category chip (diagnostic; safe token only) */
.air-diagram-error-cat {
    font-family: var(--air-font-mono, monospace); font-size: var(--air-font-size-xs);
    color: var(--air-text-subtle); background: var(--air-bg-muted);
    border: 1px solid var(--air-border-soft); border-radius: var(--air-radius-xs); padding: 0 0.35rem;
}

/* ── Sprint 23K.4 — stable artifact SLOT placeholder (pending / failed / missing), token-driven, dark/light aware ─── */
.air-artifact-slot { display: flex; flex-direction: column; }
.air-artifact-slot-head { padding-bottom: 0.25rem; }
.air-artifact-slot-sub { color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-slot-body { padding: 0.9rem 1rem 1.1rem; min-height: 6.5rem; display: flex; flex-direction: column; justify-content: center; }

/* Calm skeleton shimmer — signals "preparing", never an error; does not reserve the full diagram height. */
.air-artifact-slot-skeleton { display: flex; flex-direction: column; gap: 0.55rem; }
.air-skel-line {
    height: 0.75rem; border-radius: var(--air-radius-xs, 4px); width: 100%;
    background: linear-gradient(90deg, var(--air-bg-muted) 25%, var(--air-surface-subtle, var(--air-surface)) 37%, var(--air-bg-muted) 63%);
    background-size: 400% 100%; animation: air-skel-shimmer 1.4s ease-in-out infinite;
}
.air-skel-line--w80 { width: 80%; } .air-skel-line--w60 { width: 60%; }
@keyframes air-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .air-skel-line { animation: none; } }

.air-artifact-slot--pending .air-artifact-title { color: var(--air-text); }
.air-artifact-slot-note { display: flex; align-items: center; gap: 0.5rem; color: var(--air-text-muted); font-size: var(--air-font-size-sm); }
.air-artifact-slot--failed .air-artifact-slot-note, .air-artifact-slot--missing .air-artifact-slot-note { color: var(--air-danger-text); }
.air-artifact-slot--failed .air-artifact-slot-body, .air-artifact-slot--missing .air-artifact-slot-body { min-height: 3.5rem; }

/* ── Sprint 23K.4 / 23K.4.2 — COMPACT diagram typography: title readable-not-oversized, description muted + bounded.
   Sprint 23K.4.2 gives the title/description block token-driven breathing room above the toolbar. ── */
.air-diagram-card .air-artifact-title {
    font-size: var(--air-font-size-md, 1rem); font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.air-diagram-card .air-artifact-subtitle {
    color: var(--air-text-muted); font-size: var(--air-font-size-sm); line-height: 1.4; max-width: 60ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.air-diagram-card .air-artifact-head { padding-bottom: var(--air-space-2); }

/* ── Sprint 23K.4.1 / 23K.4.2 — the ONE unified diagram toolbar (renderer controls + artifact actions on a single
   surface). Single flex row, ONE centerline: icon-only zoom controls and text/menu actions share
   --air-artifact-toolbar-control-h, so nothing sits low; alignment is centre-of-row (NO negative margins). ── */
.air-diagram-card .air-artifact-toolbar { flex-wrap: wrap; row-gap: 0.25rem; }
.air-mermaid-controls {
    flex-wrap: wrap; row-gap: 0.15rem; border-bottom: 1px solid var(--air-border-soft);
    background: var(--air-surface-subtle, var(--air-surface));
}
.air-mermaid-controls .air-mermaid-sep { width: 1px; align-self: stretch; margin: 0.15rem 0.35rem; background: var(--air-border-soft); }

.air-diagram-toolbar {
    display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; row-gap: 0.25rem;
    min-height: calc(var(--air-artifact-toolbar-control-h, 32px) + 0.4rem);
    margin-top: var(--air-space-1);
    padding: 0.2rem 0.5rem; border-top: 1px solid var(--air-border-soft); border-bottom: 1px solid var(--air-border-soft);
    background: var(--air-surface-subtle, var(--air-surface));
}
.air-diagram-toolbar .air-toolbar-group { display: flex; align-items: center; gap: 0.1rem; }
.air-diagram-toolbar .air-toolbar-spacer { flex: 1 1 auto; min-width: 0.5rem; }
.air-diagram-toolbar .air-toolbar-group--renderer { padding-right: 0.35rem; border-right: 1px solid var(--air-border-soft); margin-right: 0.1rem; }
/* Text/menu actions share the icon controls' box height + foreground, so the whole row reads on one centerline.
   Covers plain MudButtons (Öppna/Helskärm — class on the button itself) AND MudMenu activators (Exportera/Kopiera —
   class on the menu root, so the button is a descendant). */
.air-diagram-toolbar .air-artifact-tbtn.mud-button-root,
.air-diagram-toolbar .air-artifact-tbtn .mud-button-root { min-height: var(--air-artifact-toolbar-control-h, 32px); color: var(--air-artifact-toolbar-fg, var(--air-text-muted)); text-transform: none; }
.air-diagram-toolbar .air-artifact-tbtn.mud-button-root:hover,
.air-diagram-toolbar .air-artifact-tbtn .mud-button-root:hover { color: var(--air-artifact-toolbar-hover-fg, var(--air-text)); background: var(--air-artifact-toolbar-hover-bg, var(--air-hover)); }
.air-diagram-toolbar .air-artifact-tbtn .mud-button-root:focus-visible,
.air-diagram-toolbar .air-artifact-tbtn.mud-button-root:focus-visible { outline: 2px solid var(--air-artifact-toolbar-focus-ring, var(--air-focus-ring)); outline-offset: 2px; }

@media (max-width: 640px) {
    .air-diagram-card .air-artifact-toolbar .air-artifact-tbtn-label { display: none; }   /* icon-only actions on narrow */
    .air-mermaid-controls { justify-content: flex-start; }
    .air-diagram-toolbar { padding: 0.2rem 0.35rem; }
    .air-diagram-toolbar .air-toolbar-spacer { flex-basis: 100%; }   /* actions wrap under renderer controls, no overflow */
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   Choice primitives + edit-state indicator (AirSegmentedChoice, AirSelectableCardGroup,
   AirDirtyIndicator). Token-driven only: light/dark come from the token layer, and forced-colors
   mode gets explicit system-colour treatment so a selected state never relies on colour alone.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Segmented choice: one value out of N, rendered as a joined control ── */
.air-segmented {
    display: inline-flex; align-items: stretch; gap: var(--air-space-0);
    padding: var(--air-space-2xs);
    border: 1px solid var(--air-border); border-radius: var(--air-radius-md);
    background: var(--air-surface-subtle);
    max-width: 100%; flex-wrap: wrap;
}
.air-segmented-item {
    display: inline-flex; align-items: center; gap: var(--air-space-xs);
    min-height: 2.25rem; padding: var(--air-space-xs) var(--air-space-md);
    border: 1px solid transparent; border-radius: var(--air-radius-sm);
    background: transparent; color: var(--air-text-muted);
    font-family: var(--air-font-family); font-size: var(--air-font-size-sm);
    font-weight: var(--air-font-weight-medium); line-height: 1.2;
    cursor: pointer;
    transition: background var(--air-duration-fast) var(--air-ease-standard),
                color var(--air-duration-fast) var(--air-ease-standard),
                border-color var(--air-duration-fast) var(--air-ease-standard);
}
.air-segmented-item:hover:not(:disabled) { background: var(--air-hover); color: var(--air-text); }
.air-segmented-item:focus-visible { outline: 2px solid var(--air-focus-ring); outline-offset: 2px; }
.air-segmented-item.is-selected {
    background: var(--air-surface); color: var(--air-text);
    border-color: var(--air-border-strong); box-shadow: var(--air-shadow-xs);
}
.air-segmented-item:disabled { color: var(--air-disabled); cursor: not-allowed; }
.air-segmented.is-disabled { opacity: 0.6; }
.air-segmented-icon { display: inline-flex; width: 1rem; height: 1rem; }
.air-segmented-label { white-space: nowrap; }

/* ── Selectable card group: one value out of N, where each choice needs context ── */
.air-cardgroup {
    display: grid; gap: var(--air-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.air-cardgroup.is-disabled { opacity: 0.6; }
.air-cardgroup-item {
    display: flex; flex-direction: column; gap: var(--air-space-2xs);
    align-items: flex-start; text-align: left; width: 100%;
}
.air-cardgroup-head { display: inline-flex; align-items: center; gap: var(--air-space-xs); width: 100%; }
.air-cardgroup-icon { display: inline-flex; width: 1.125rem; height: 1.125rem; color: var(--air-text-muted); }
.air-cardgroup-item.is-selected .air-cardgroup-icon { color: var(--air-accent); }
.air-cardgroup-title {
    font-size: var(--air-font-size-sm); font-weight: var(--air-font-weight-semibold); color: var(--air-text);
}
.air-cardgroup-badge {
    margin-left: auto; padding: 0 var(--air-space-xs);
    border: 1px solid var(--air-border); border-radius: var(--air-radius-xs);
    background: var(--air-surface-subtle); color: var(--air-text-muted);
    font-size: var(--air-font-size-xs); font-weight: var(--air-font-weight-medium);
}
.air-cardgroup-desc { font-size: var(--air-font-size-xs); color: var(--air-text-muted); line-height: 1.35; }

/* ── Edit-state indicator ── */
.air-dirty {
    display: inline-flex; align-items: center; gap: var(--air-space-xs);
    font-family: var(--air-font-family); font-size: var(--air-font-size-xs); color: var(--air-text-muted);
}
.air-dirty-mark { width: 0.5rem; height: 0.5rem; border-radius: var(--air-radius-xl); background: currentColor; flex: none; }
.air-dirty--clean { color: var(--air-text-subtle); }
.air-dirty--dirty { color: var(--air-warning-text); }
.air-dirty--busy { color: var(--air-text-muted); }
.air-dirty--saved { color: var(--air-success-text); }
.air-dirty--failed { color: var(--air-danger-text); font-weight: var(--air-font-weight-medium); }

/* ── Forced-colors / high-contrast: selection must survive colour removal ── */
@media (forced-colors: active) {
    .air-segmented, .air-cardgroup-item { border: 1px solid CanvasText; }
    .air-segmented-item.is-selected, .air-cardgroup-item.is-selected {
        border: 2px solid Highlight; forced-color-adjust: none;
        background: Canvas; color: CanvasText;
    }
    .air-segmented-item:focus-visible, .air-cardgroup-item:focus-visible { outline: 2px solid Highlight; }
    .air-dirty-mark { background: CanvasText; }
}

@media (max-width: 640px) {
    .air-segmented { width: 100%; }
    .air-segmented-item { flex: 1 1 auto; justify-content: center; }
    .air-cardgroup { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   AirTabs — accessible tab strip + panel. Token-driven; light/dark come from the token layer and
   forced-colors gets explicit system-colour treatment so the active tab never relies on colour alone.
   The STRIP scrolls horizontally when it does not fit; the page must never scroll because of it.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

.air-tabs { display: flex; flex-direction: column; gap: var(--air-space-md); min-width: 0; }

.air-tabs-strip {
    display: flex; align-items: stretch; gap: var(--air-space-2xs);
    border-bottom: 1px solid var(--air-border);
    /* Contain the overflow here so a long tab row scrolls inside itself rather than widening the page. */
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    min-width: 0;
}

.air-tab {
    display: inline-flex; align-items: center; gap: var(--air-space-xs);
    flex: 0 0 auto;                       /* never squeeze a label into unreadability */
    min-height: 2.5rem; padding: var(--air-space-xs) var(--air-space-md);
    border: none; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--air-text-muted);
    font-family: var(--air-font-family); font-size: var(--air-font-size-sm);
    font-weight: var(--air-font-weight-medium); line-height: 1.2;
    white-space: nowrap; cursor: pointer;
    scroll-snap-align: start;
    transition: color var(--air-duration-fast) var(--air-ease-standard),
                border-color var(--air-duration-fast) var(--air-ease-standard),
                background var(--air-duration-fast) var(--air-ease-standard);
}
.air-tab:hover:not(:disabled) { color: var(--air-text); background: var(--air-hover); }
.air-tab:focus-visible { outline: 2px solid var(--air-focus-ring); outline-offset: -2px; }
.air-tab.is-active { color: var(--air-accent-text); border-bottom-color: var(--air-accent); }
.air-tab:disabled { color: var(--air-disabled); cursor: not-allowed; }

.air-tab-icon { display: inline-flex; width: 1rem; height: 1rem; }
.air-tab-label { min-width: 0; }
.air-tab-badge {
    padding: 0 var(--air-space-xs);
    border: 1px solid var(--air-border); border-radius: var(--air-radius-xs);
    background: var(--air-surface-subtle); color: var(--air-text-muted);
    font-size: var(--air-font-size-xs);
}

.air-tabpanel { min-width: 0; }
/* The panel is focusable so keyboard users can reach its content directly, but it is not a visible focus target. */
.air-tabpanel:focus-visible { outline: 2px solid var(--air-focus-ring); outline-offset: 2px; }

@media (max-width: 640px) {
    /* Tabs stay a scrolling row on mobile: collapsing them into a vertical list is what produced the
       one-very-long-page problem this component exists to solve. */
    .air-tabs-strip { gap: 0; }
    .air-tab { padding: var(--air-space-xs) var(--air-space-sm); }
}

@media (forced-colors: active) {
    .air-tabs-strip { border-bottom: 1px solid CanvasText; }
    .air-tab.is-active {
        border-bottom: 3px solid Highlight; color: CanvasText; forced-color-adjust: none; background: Canvas;
    }
    .air-tab:focus-visible { outline: 2px solid Highlight; }
}