/* ==========================================================================
   adaptiveX brand layer
   Loaded AFTER src/css/app.css (the compiled Nexus / daisyUI stylesheet).
   Source of truth: docs/DESIGN.md. Reference var(--ax-…) tokens; never
   hard-code a hex that already has a token.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Lato:wght@300;400;700&display=swap");

/* --------------------------------------------------------------------------
   1. Brand tokens (from DESIGN.md → Tokens reference)
   -------------------------------------------------------------------------- */
:root {
    /* primary palette */
    --ax-purple-blue: #403d8d;
    --ax-grey-indigo: #5f58a6;
    --ax-indigo: #7669c0;
    --ax-golden: #f8c21a;
    --ax-white: #ffffff;
    --ax-soft-black: #212022;
    --ax-dark-grey: #010101;

    /* secondary palette */
    --ax-lavender: #e8e5f8;
    --ax-purple-grey: #e1e1ed;
    --ax-pascal: #afacd3;
    --ax-deep-blue: #25295f;
    --ax-pastel-yellow: #fae193;
    --ax-pale-yellow: #fff4d3;
    --ax-straw: #eecf5d;

    /* gradients */
    --ax-grad-yellow-radial: radial-gradient(circle at 50% 30%, #fae7ac 0%, #f8c21a 80%);
    --ax-grad-indigo-radial: radial-gradient(circle at 50% 30%, #e1e1ed 0%, #5f58a6 80%);
    --ax-grad-pascal-radial: radial-gradient(circle at 50% 30%, #fff4d3 0%, #afacd3 80%);
    --ax-grad-yellow-deepblue: linear-gradient(180deg, #f8c21a 0%, #25295f 100%);
    --ax-grad-deepblue-yellow: linear-gradient(180deg, #25295f 0%, #f8c21a 100%);
    --ax-grad-circular-radial: radial-gradient(circle at 50% 50%, #f8c21a 0%, #25295f 100%);

    /* semantic (light defaults; dark overrides below) */
    --ax-fg-1: #212022;
    --ax-fg-2: #4a4860;
    --ax-fg-3: #6f6e84;
    --ax-fg-on-dark: #ffffff;
    --ax-fg-on-dark-2: #e8e5f8;
    --ax-fg-link: #403d8d;
    --ax-fg-link-hover: #7669c0;
    --ax-fg-accent: #403d8d;
    --ax-fg-on-yellow: #403d8d;
    --ax-bg-1: #ffffff;
    --ax-bg-2: #fafafd;
    --ax-bg-3: #e8e5f8;
    --ax-bg-dark: #25295f;
    --ax-bg-darker: #212022;
    --ax-border: #e1e1ed;
    --ax-border-strong: #c9c7dd;
    --ax-border-dark: rgb(255 255 255 / 18%);

    /* typography */
    --ax-font-eyebrow-tracking: 0.14em;
    --ax-font-display-tracking: -0.01em;
    --ax-font-logo: "Averta", "Poppins", system-ui, sans-serif;
    --ax-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ax-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ax-font-alt-body: "Lato", "Poppins", system-ui, sans-serif;
    --ax-fs-eyebrow: 14px;
    --ax-fs-overline: 12px;
    --ax-fs-caption: 13px;
    --ax-fs-body-sm: 14px;
    --ax-fs-body: 16px;
    --ax-fs-body-lg: 18px;
    --ax-fs-h6: 18px;
    --ax-fs-h5: 22px;
    --ax-fs-h4: 28px;
    --ax-fs-h3: 36px;
    --ax-fs-h2: 48px;
    --ax-fs-h1: 64px;
    --ax-fs-display: 88px;
    --ax-lh-tight: 1.1;
    --ax-lh-snug: 1.25;
    --ax-lh-normal: 1.5;
    --ax-lh-relaxed: 1.65;

    /* spacing (8pt) */
    --ax-space-1: 4px;
    --ax-space-2: 8px;
    --ax-space-3: 12px;
    --ax-space-4: 16px;
    --ax-space-5: 24px;
    --ax-space-6: 32px;
    --ax-space-7: 48px;
    --ax-space-8: 64px;
    --ax-space-9: 96px;
    --ax-space-10: 128px;

    /* radius */
    --ax-radius-sm: 6px;
    --ax-radius-md: 12px;
    --ax-radius-lg: 20px;
    --ax-radius-xl: 32px;
    --ax-radius-pill: 9999px;

    /* shadows (purple-tinted, never black) */
    --ax-shadow-sm: 0 1px 2px rgb(37 41 95 / 6%), 0 1px 3px rgb(37 41 95 / 4%);
    --ax-shadow-md: 0 4px 12px rgb(37 41 95 / 8%), 0 2px 4px rgb(37 41 95 / 4%);
    --ax-shadow-lg: 0 16px 40px rgb(37 41 95 / 14%), 0 4px 8px rgb(37 41 95 / 6%);
    --ax-shadow-yellow: 0 8px 24px rgb(248 194 26 / 32%);

    /* motion */
    --ax-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ax-duration-fast: 160ms;
    --ax-duration-base: 240ms;
    --ax-duration-slow: 400ms;

    /* dashboard-only helpers */
    --ax-eyebrow-color: var(--ax-purple-blue);
    --ax-logo-chip-bg: var(--ax-deep-blue);
    --ax-icon-chip-bg: var(--ax-lavender);
    --ax-icon-chip-fg: var(--ax-purple-blue);
    --ax-card-shadow: var(--ax-shadow-sm);
    --ax-card-shadow-hover: var(--ax-shadow-md);
}

/* --------------------------------------------------------------------------
   2. daisyUI theme mapping
   The compiled stylesheet defines its own light/dark variables. These blocks
   load later with equal-or-higher specificity, so they win.
   -------------------------------------------------------------------------- */

/* ---- LIGHT: lots of white. Page, sidebar, topbar and cards are all white;
        hairline lavender-grey borders do the separating. ---- */
:root,
[data-theme="light"],
[data-theme="contrast"],
[data-theme="material"] {
    color-scheme: light;

    --root-bg: #ffffff;
    --layout-sidebar-background: #ffffff;
    --layout-topbar-background: #ffffff;
    --color-base-100: #ffffff;
    --color-base-200: #f4f3fb;
    --color-base-300: #e1e1ed;
    --color-base-content: #212022;
    --color-primary: #403d8d;
    --color-primary-content: #ffffff;
    --color-secondary: #f8c21a;
    --color-secondary-content: #403d8d;
    --color-accent: #7669c0;
    --color-accent-content: #ffffff;
    --color-neutral: #25295f;
    --color-neutral-content: #ffffff;
    --color-info: #14b4ff;
    --color-info-content: #ffffff;
    --color-success: #0bbf58;
    --color-success-content: #ffffff;
    --color-warning: #f5a524;
    --color-warning-content: #150a00;
    --color-error: #f31260;
    --color-error-content: #ffffff;
    --radius-box: 16px;
    --radius-field: 12px;
    --radius-selector: 6px;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --ax-eyebrow-color: var(--ax-purple-blue);
    --ax-logo-chip-bg: var(--ax-deep-blue);
    --ax-icon-chip-bg: var(--ax-lavender);
    --ax-icon-chip-fg: var(--ax-purple-blue);
    --ax-card-shadow: var(--ax-shadow-sm);
    --ax-card-shadow-hover: var(--ax-shadow-md);
}

/* ---- DARK: built on the brand's deep blue. Golden becomes the accent voice,
        indigo carries "primary" so it stays readable on deep blue. ---- */
[data-theme="dark"],
[data-theme="dim"],
[data-theme="material-dark"] {
    color-scheme: dark;

    --root-bg: #1b1e4b;
    --layout-sidebar-background: #212459;
    --layout-topbar-background: #212459;
    --color-base-100: #25295f;
    --color-base-200: #2f336e;
    --color-base-300: #3c4080;
    --color-base-content: #f3f2fa;
    --color-primary: #a59ce3;
    --color-primary-content: #1b1e4b;
    --color-secondary: #f8c21a;
    --color-secondary-content: #25295f;
    --color-accent: #fae193;
    --color-accent-content: #25295f;
    --color-neutral: #e8e5f8;
    --color-neutral-content: #25295f;
    --color-info: #14b4ff;
    --color-info-content: #ffffff;
    --color-success: #2fd676;
    --color-success-content: #0b2a18;
    --color-warning: #f5a524;
    --color-warning-content: #150a00;
    --color-error: #ff4d7d;
    --color-error-content: #ffffff;
    --radius-box: 16px;
    --radius-field: 12px;
    --radius-selector: 6px;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --ax-fg-1: #f3f2fa;
    --ax-fg-2: #d6d3ea;
    --ax-fg-3: #afacd3;
    --ax-fg-link: #a59ce3;
    --ax-fg-link-hover: #c4bdf0;
    --ax-border: #3c4080;
    --ax-border-strong: #4d519a;
    --ax-bg-1: #25295f;
    --ax-bg-2: #1b1e4b;
    --ax-bg-3: #2f336e;
    --ax-eyebrow-color: var(--ax-golden);
    --ax-logo-chip-bg: transparent;
    --ax-icon-chip-bg: rgb(255 255 255 / 8%);
    --ax-icon-chip-fg: var(--ax-pastel-yellow);
    --ax-card-shadow: 0 1px 2px rgb(8 10 40 / 35%);
    --ax-card-shadow-hover: 0 8px 24px rgb(8 10 40 / 45%);
    --ax-shadow-yellow: 0 8px 24px rgb(248 194 26 / 22%);
}

/* System preference: no data-theme attribute and the OS prefers dark.
   Same values as the dark block above. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --root-bg: #1b1e4b;
        --layout-sidebar-background: #212459;
        --layout-topbar-background: #212459;
        --color-base-100: #25295f;
        --color-base-200: #2f336e;
        --color-base-300: #3c4080;
        --color-base-content: #f3f2fa;
        --color-primary: #a59ce3;
        --color-primary-content: #1b1e4b;
        --color-secondary: #f8c21a;
        --color-secondary-content: #25295f;
        --color-accent: #fae193;
        --color-accent-content: #25295f;
        --color-neutral: #e8e5f8;
        --color-neutral-content: #25295f;
        --color-info: #14b4ff;
        --color-info-content: #ffffff;
        --color-success: #2fd676;
        --color-success-content: #0b2a18;
        --color-warning: #f5a524;
        --color-warning-content: #150a00;
        --color-error: #ff4d7d;
        --color-error-content: #ffffff;
        --radius-box: 16px;
        --radius-field: 12px;
        --radius-selector: 6px;
        --border: 1px;
        --depth: 0;
        --noise: 0;
        --ax-fg-1: #f3f2fa;
        --ax-fg-2: #d6d3ea;
        --ax-fg-3: #afacd3;
        --ax-fg-link: #a59ce3;
        --ax-fg-link-hover: #c4bdf0;
        --ax-border: #3c4080;
        --ax-border-strong: #4d519a;
        --ax-bg-1: #25295f;
        --ax-bg-2: #1b1e4b;
        --ax-bg-3: #2f336e;
        --ax-eyebrow-color: var(--ax-golden);
        --ax-logo-chip-bg: transparent;
        --ax-icon-chip-bg: rgb(255 255 255 / 8%);
        --ax-icon-chip-fg: var(--ax-pastel-yellow);
        --ax-card-shadow: 0 1px 2px rgb(8 10 40 / 35%);
        --ax-card-shadow-hover: 0 8px 24px rgb(8 10 40 / 45%);
        --ax-shadow-yellow: 0 8px 24px rgb(248 194 26 / 22%);
    }
}

/* --------------------------------------------------------------------------
   3. Typography: Poppins everywhere, Lato for captions.
   The template's font switcher sets --font-sans per [data-font-family];
   the dashboard does not expose that control, so Poppins is pinned here.
   -------------------------------------------------------------------------- */
:root,
[data-font-family] {
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    font-family: var(--ax-font-body);
    color: var(--color-base-content);
}

.ax-eyebrow {
    font-family: var(--ax-font-display);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: var(--ax-font-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ax-eyebrow-color);
}

.ax-overline {
    font-family: var(--ax-font-display);
    font-weight: 700;
    font-size: var(--ax-fs-overline);
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ax-fg-3);
}

.ax-caption {
    font-family: var(--ax-font-alt-body);
    font-size: var(--ax-fs-caption);
    line-height: var(--ax-lh-normal);
    color: var(--ax-fg-3);
}

.ax-headline {
    font-family: var(--ax-font-display);
    font-weight: 600;
    letter-spacing: var(--ax-font-display-tracking);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   4. Component overrides
   -------------------------------------------------------------------------- */

/* Buttons are pills. */
.btn {
    border-radius: var(--ax-radius-pill);
    font-family: var(--ax-font-display);
    font-weight: 600;
    transition:
        transform var(--ax-duration-fast) var(--ax-easing),
        background-color var(--ax-duration-fast) ease,
        box-shadow var(--ax-duration-fast) ease,
        border-color var(--ax-duration-fast) ease;
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-primary:hover {
    background-color: #332f76;
    border-color: #332f76;
}

.btn-secondary:hover {
    background-color: #e5b017;
    border-color: #e5b017;
}

/* Golden CTA: the dominant call to action. */
.ax-btn-cta {
    box-shadow: var(--ax-shadow-yellow);
}

/* Cards: hairline tinted border + purple-tinted shadow, lift on hover. */
.card {
    border: 1px solid var(--color-base-300);
    transition:
        box-shadow var(--ax-duration-base) var(--ax-easing),
        border-color var(--ax-duration-base) var(--ax-easing);
}

.card.shadow {
    --tw-shadow: var(--ax-card-shadow);

    box-shadow: var(--ax-card-shadow);
}

.card.shadow:hover {
    --tw-shadow: var(--ax-card-shadow-hover);

    box-shadow: var(--ax-card-shadow-hover);
}

/* Inputs: 12px radius, purple focus ring. */
.input,
.select,
.textarea {
    border-radius: var(--ax-radius-md);
}

.input:focus,
.input:focus-within,
.select:focus,
.textarea:focus {
    border-color: var(--ax-purple-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgb(64 61 141 / 18%);
}

/* Badges are pills. (--radius-selector stays 6px so checkboxes remain square.) */
.badge {
    border-radius: var(--ax-radius-pill);
    font-family: var(--ax-font-display);
}

/* Tabs box: soft lavender track */
.tabs-box {
    border-radius: var(--ax-radius-pill);
}

.tabs-box .tab {
    border-radius: var(--ax-radius-pill);
}

/* Table: tinted header text */
.table th {
    color: var(--ax-fg-3);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Layout chrome: hairline borders use the tinted border token. */
html:not([data-theme="material"], [data-theme="material-dark"]) #layout-sidebar {
    border-color: var(--color-base-300);
}

html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
    border-color: var(--color-base-300);
}

/* Sidebar menu: active item picks up the brand wash and a purple accent. */
.sidebar-menu .menu-item,
.sidebar-menu .collapse-title {
    transition:
        background-color var(--ax-duration-fast) ease,
        color var(--ax-duration-fast) ease;
}

.sidebar-menu a.menu-item.active {
    background: var(--ax-icon-chip-bg);
    color: var(--ax-icon-chip-fg);
}

.sidebar-menu .menu-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ax-fg-3);
}

/* Logo chip: the white wordmark needs a deep-blue chip on light surfaces. */
.ax-logo-chip {
    display: inline-flex;
    align-items: center;
    background: var(--ax-logo-chip-bg);
    border-radius: var(--ax-radius-pill);
    padding: 6px 14px;
    transition: background-color var(--ax-duration-base) var(--ax-easing);
}

.ax-logo-chip img {
    height: 22px;
    width: auto;
    display: block;
}

/* Stat-card icon chip */
.ax-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ax-radius-md);
    background: var(--ax-icon-chip-bg);
    color: var(--ax-icon-chip-fg);
}

/* Golden highlight panel (CTA band in miniature) */
.ax-panel-golden {
    background: var(--ax-golden);
    color: var(--ax-fg-on-yellow);
    border-radius: var(--radius-box);
}

.ax-panel-golden .ax-eyebrow {
    color: var(--ax-fg-on-yellow);
    opacity: 0.8;
}

/* Deep-blue panel */
.ax-panel-deep {
    background: linear-gradient(180deg, #25295f 0%, #403d8d 100%);
    color: var(--ax-fg-on-dark);
    border-radius: var(--radius-box);
}

.ax-panel-deep .ax-eyebrow {
    color: var(--ax-golden);
}

/* Lucide icons at 1.5px stroke are baked into the icon set; just keep
   icons on currentColor. */
.iconify {
    color: currentColor;
}

/* Motion: fade + small translate for page content. */
@keyframes ax-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#layout-content > * {
    animation: ax-rise var(--ax-duration-base) var(--ax-easing) both;
}

@media (prefers-reduced-motion: reduce) {
    #layout-content > * {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   5. Sign-in, admin and local-data helpers
   The compiled stylesheet only contains the utilities the Nexus template
   used, so the few layout pieces these pages need are written out here.
   -------------------------------------------------------------------------- */

/* Initials avatar (replaces the stock avatar image; one chip per signed-in user). */
.ax-avatar {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--ax-icon-chip-bg);
    color: var(--ax-icon-chip-fg);
    font-family: var(--ax-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    user-select: none;
}

/* Sign-in page: one centred card on the page background. */
.ax-auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 16px;
    background: var(--ax-bg-2);
}

.ax-auth-card {
    width: 100%;
    max-width: 460px;
}

/* The one object on the page: lift it off the tinted background. */
.card.ax-auth-card,
.card.ax-auth-card:hover {
    --tw-shadow: var(--ax-shadow-lg);

    box-shadow: var(--ax-shadow-lg);
}

.ax-auth-card .card-body {
    padding: var(--ax-space-6) var(--ax-space-5);
}

@media (min-width: 640px) {
    .ax-auth-card .card-body {
        padding: var(--ax-space-6);
    }
}

/* Standalone page: the headline earns the h5 size, not the dashboard card-title size. */
.ax-auth-title {
    margin-top: var(--ax-space-1);
    font-size: var(--ax-fs-h5);
    line-height: var(--ax-lh-snug);
}

.ax-auth-lede {
    margin-top: var(--ax-space-3);
    font-size: var(--ax-fs-body-sm);
    line-height: var(--ax-lh-relaxed);
    color: var(--ax-fg-3);
}

.ax-auth-form {
    margin-top: var(--ax-space-5);
}

.ax-auth-actions {
    margin-top: var(--ax-space-3); /* plus the 12px grid gap = 24px above the button */
}

.ax-auth-hint {
    margin-top: var(--ax-space-2);
    font-family: var(--ax-font-alt-body);
    font-size: var(--ax-fs-caption);
    line-height: var(--ax-lh-normal);
    color: var(--ax-fg-3);
}

.ax-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: var(--ax-fs-body-sm);
    font-weight: 500;
    color: var(--ax-fg-link);
    text-decoration: none;
}

.ax-auth-back:hover {
    color: var(--ax-fg-link-hover);
    text-decoration: underline;
}

/* A spinner inside a busy button inherits the button's text colour. */
.btn .ax-spinner {
    width: 16px;
    height: 16px;
    border-color: currentColor;
    border-top-color: transparent;
    opacity: 0.8;
    vertical-align: -3px;
}

.ax-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ax-logo-chip-bg);
    border-radius: var(--ax-radius-pill);
    padding: 10px 22px;
}

.ax-auth-logo img {
    height: 30px;
    width: auto;
    display: block;
}

.ax-auth-foot {
    max-width: 460px;
    text-align: center;
}

/* Two-column form grid that collapses on phones. */
.ax-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ax-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ax-form-grid .ax-span-2 {
    grid-column: 1 / -1;
}

/* Inline status line under a form or action row. */
.ax-status {
    font-size: 13px;
    color: var(--ax-fg-3);
    min-height: 1.25rem;
}

.ax-status:empty {
    min-height: 0; /* stays in the DOM for aria-live, takes no room until it speaks */
}

.ax-status[data-kind="error"] {
    color: var(--color-error);
}

.ax-status[data-kind="success"] {
    color: var(--color-success);
}

/* Spinner (the template's loading utilities are not in the compiled CSS). */
.ax-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-base-300);
    border-top-color: var(--color-primary);
    animation: ax-spin 0.8s linear infinite;
    vertical-align: -4px;
}

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

/* Fixed bottom notice (database mode, errors). */
.ax-banner {
    position: fixed;
    inset-inline: 16px;
    bottom: 16px;
    margin-inline: auto;
    max-width: 640px;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border-radius: var(--radius-box);
    border: 1px solid var(--color-base-300);
    background: var(--color-base-100);
    color: var(--color-base-content);
    box-shadow: var(--ax-shadow-lg);
    font-size: 14px;
    line-height: 1.5;
}

.ax-banner-text {
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere;
}

.ax-banner-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-info);
}

.ax-banner[data-kind="warning"] .ax-banner-icon {
    color: var(--color-warning);
}

.ax-banner[data-kind="error"] .ax-banner-icon {
    color: var(--color-error);
}

/* A sign-in link shown once: monospace, wraps anywhere, easy to select. */
.ax-linkbox {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
    padding: 12px 14px;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--color-base-300);
    background: var(--color-base-200);
    color: var(--color-base-content);
}

/* Key/value strip used by the Workspace Data card. */
.ax-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}

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

.ax-kv dt {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ax-fg-3);
    font-weight: 600;
}

.ax-kv dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 500;
}

/* Empty-state row inside a table. */
.ax-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--ax-fg-3);
}

.ax-empty .iconify {
    display: block;
    margin: 0 auto 10px;
    color: var(--ax-pascal);
}

/* Plain visually-hidden helper (sr-only is not in the compiled CSS). */
.ax-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Actions that stack on narrow screens. */
.ax-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Mount points that power-ups fill (auth.js): take no room while empty. */
[data-ax-widgets]:empty,
[data-ax-module-nav]:empty {
    display: none;
}

/*
 * Workspace-dependent chrome. guard.js sets <html data-home="1"> in the adaptiveX
 * workspace and "0" in a client's, before first paint, so nothing flashes.
 *   [data-home-only]    adaptiveX's own operations (sample overview, placeholder menus)
 *   [data-client-only]  shown to client workspaces instead
 */
html:not([data-home="1"]) [data-home-only],
html:not([data-home="0"]) [data-client-only] {
    display: none;
}