/* ==========================================================================
   Hakikisha UI — design system
   Ported from the Nexora CRM template into server-rendered Tera templates.

   Written as plain CSS with design tokens rather than Tailwind utilities,
   because the app ships a pre-purged Tailwind bundle that cannot be rebuilt
   here. Tokens mirror Nexora's oklch palette; the teal accent is this app's
   own addition, reserved for operational status (healthy / warn / fail) so
   credential health and device presence read at a glance.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    /* Neutral surfaces in the spirit of macOS: warm-grey canvas, white
       cards, hairline borders. Colour is reserved for the one accent and
       for status, and even then only on dots, text and small badges. */
    --background: oklch(0.972 0.002 264);
    --foreground: oklch(0.19 0.004 264);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.19 0.004 264);
    --popover: oklch(1 0 0);
    --muted: oklch(0.955 0.002 264);
    --muted-foreground: oklch(0.50 0.006 264);
    --accent-bg: oklch(0.95 0.002 264);
    --border: oklch(0 0 0 / 8%);
    --input: oklch(0 0 0 / 12%);
    --ring: oklch(0.60 0.17 255);
    --primary: oklch(0.19 0.004 264);
    --primary-foreground: oklch(0.985 0 0);

    /* The single accent: system blue. Links, focus, primary buttons. */
    --brand: oklch(0.58 0.20 255);
    --brand-strong: oklch(0.52 0.20 255);
    --brand-soft: oklch(0.58 0.20 255 / 10%);
    --brand-border: oklch(0.58 0.20 255 / 25%);
    --brand-fg: oklch(0.50 0.20 255);

    --ok: oklch(0.70 0.19 148);
    --ok-soft: oklch(0.70 0.19 148 / 12%);
    --ok-border: oklch(0.70 0.19 148 / 30%);
    --ok-fg: oklch(0.48 0.15 148);

    --warn: oklch(0.78 0.17 65);
    --warn-soft: oklch(0.78 0.17 65 / 14%);
    --warn-border: oklch(0.78 0.17 65 / 35%);
    --warn-fg: oklch(0.55 0.14 60);

    --danger: oklch(0.63 0.24 28);
    --danger-soft: oklch(0.63 0.24 28 / 10%);
    --danger-border: oklch(0.63 0.24 28 / 28%);
    --danger-fg: oklch(0.52 0.22 28);

    --info: var(--brand);
    --info-soft: var(--brand-soft);
    --info-border: var(--brand-border);
    --info-fg: var(--brand-fg);

    --radius: 0.75rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: var(--radius);

    --sidebar: oklch(0.972 0.002 264);
    --sidebar-border: oklch(0 0 0 / 8%);
    --sidebar-accent: oklch(0 0 0 / 6%);

    /* Flat by default; shadow only on floating layers. */
    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.10);

    /* One superfamily: IBM Plex Sans for text and figures, IBM Plex Mono for
       phone numbers, codes and timings. Sharing a skeleton means a mono badge
       sitting inside a sans table row reads as one voice, not two fonts. */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
    --font-display: var(--font-sans);
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

    /* Type scale. Every font-size in the app is one of these; nothing drops
       below 12px. base is body and table text, sm is secondary text,
       xs is captions and badges. The large steps are headings and figures. */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.8125rem; /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md:   0.9375rem; /* 15px */
    --text-lg:   1.0625rem; /* 17px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    --sidebar-w: 15rem;
    --sidebar-w-collapsed: 3.5rem;
    --header-h: 3.5rem;
}

:root[data-theme="dark"] {
    --background: oklch(0.17 0.004 264);
    --foreground: oklch(0.96 0 0);
    --card: oklch(0.23 0.004 264);
    --card-foreground: oklch(0.96 0 0);
    --popover: oklch(0.25 0.004 264);
    --muted: oklch(0.29 0.004 264);
    --muted-foreground: oklch(0.68 0.005 264);
    --accent-bg: oklch(1 0 0 / 6%);
    --border: oklch(1 0 0 / 9%);
    --input: oklch(1 0 0 / 14%);
    --ring: oklch(0.68 0.17 255);
    --primary: oklch(0.96 0 0);
    --primary-foreground: oklch(0.17 0.004 264);

    --brand: oklch(0.66 0.19 255);
    --brand-strong: oklch(0.60 0.19 255);
    --brand-soft: oklch(0.66 0.19 255 / 16%);
    --brand-border: oklch(0.66 0.19 255 / 35%);
    --brand-fg: oklch(0.74 0.16 255);

    --ok: oklch(0.74 0.19 148);
    --ok-soft: oklch(0.74 0.19 148 / 14%);
    --ok-border: oklch(0.74 0.19 148 / 35%);
    --ok-fg: oklch(0.80 0.17 148);

    --warn: oklch(0.82 0.17 75);
    --warn-soft: oklch(0.82 0.17 75 / 14%);
    --warn-border: oklch(0.82 0.17 75 / 35%);
    --warn-fg: oklch(0.85 0.15 75);

    --danger: oklch(0.66 0.23 28);
    --danger-soft: oklch(0.66 0.23 28 / 14%);
    --danger-border: oklch(0.66 0.23 28 / 35%);
    --danger-fg: oklch(0.76 0.18 28);

    --sidebar: oklch(0.19 0.004 264);
    --sidebar-border: oklch(1 0 0 / 9%);
    --sidebar-accent: oklch(1 0 0 / 7%);

    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 12px 32px rgb(0 0 0 / 0.5);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

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

body.nx {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Plex needs no stylistic-set tweaks; keep ligature substitution only. */
    font-feature-settings: "calt";
    font-size: var(--text-base); line-height: var(--leading-normal);
}
/* Plex Sans is already compact at the top end, so headings carry only a
   whisper of negative tracking, and only once they are big enough for it
   to be visible. */
.nx h1, .nx h2, .nx h3, .nx h4 { font-weight: 600; letter-spacing: 0; line-height: var(--leading-tight); }
.nx-display { font-weight: 600; letter-spacing: -.01em; }
.nx code, .nx kbd, .nx pre { font-family: var(--font-mono); font-size: .92em; }

.nx a { color: inherit; }
.nx :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------- shell */
.nx-shell { display: flex; min-height: 100vh; }

.nx-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: var(--sidebar-w);
    background: var(--sidebar);
    border-inline-end: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
    z-index: 40;
    transition: transform .22s ease, width .18s ease;
}
.nx-main {
    flex: 1; min-width: 0;
    margin-inline-start: var(--sidebar-w);
    display: flex; flex-direction: column;
    transition: margin .18s ease;
}

/* Collapsed (icon-only) — desktop */
@media (min-width: 1024px) {
    body.nx-collapsed .nx-sidebar { width: var(--sidebar-w-collapsed); }
    body.nx-collapsed .nx-main { margin-inline-start: var(--sidebar-w-collapsed); }
    body.nx-collapsed .nx-label,
    body.nx-collapsed .nx-navgroup-label,
    body.nx-collapsed .nx-brand-text,
    body.nx-collapsed .nx-user-text { display: none; }
    body.nx-collapsed .nx-nav a { justify-content: center; padding-inline: 0; }
    body.nx-collapsed .nx-brand { justify-content: center; }
    body.nx-collapsed .nx-user { justify-content: center; }
}

/* Mobile drawer */
@media (max-width: 1023px) {
    .nx-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
    body.nx-open .nx-sidebar { transform: none; }
    .nx-main { margin-inline-start: 0; }
    .nx-scrim {
        position: fixed; inset: 0; background: rgb(0 0 0 / .45);
        z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    body.nx-open .nx-scrim { opacity: 1; pointer-events: auto; }
}

/* ---------------------------------------------------------------- brand */
.nx-brand {
    display: flex; align-items: center; gap: .6rem;
    height: var(--header-h); padding-inline: .75rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0; text-decoration: none;
}
.nx-brand-mark {
    width: 1.9rem; height: 1.9rem; border-radius: var(--radius-md);
    display: grid; place-items: center; flex-shrink: 0;
    color: var(--primary-foreground); background: var(--primary);
}
.nx-brand-mark svg { width: 1.05rem; height: 1.05rem; }
.nx-brand-text { min-width: 0; line-height: 1.15; }
.nx-brand-name { font-weight: 600; font-size: var(--text-md); display: block; letter-spacing: -.01em; }
.nx-brand-sub { font-size: var(--text-xs); color: var(--muted-foreground); display: block; }

/* ------------------------------------------------------------------ nav */
.nx-nav { flex: 1; overflow-y: auto; padding: .6rem .5rem 1rem; scrollbar-width: thin; }
.nx-nav::-webkit-scrollbar { width: 6px; }
.nx-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.nx-navgroup + .nx-navgroup { margin-top: .9rem; }
.nx-navgroup-label {
    font-size: var(--text-xs); font-weight: 600;
    color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    padding: 0 .55rem .35rem;
}
.nx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nx-nav a {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .55rem; border-radius: var(--radius-md);
    font-size: var(--text-base); font-weight: 500; color: var(--muted-foreground);
    text-decoration: none; position: relative; white-space: nowrap;
}
.nx-nav a:hover { background: var(--sidebar-accent); color: var(--foreground); }
.nx-nav a.active { background: var(--sidebar-accent); color: var(--foreground); font-weight: 600; }
.nx-nav a.active::before { content: none; }
.nx-nav svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.nx-nav .nx-count {
    margin-inline-start: auto; font-size: var(--text-xs); font-weight: 600;
    background: var(--muted); color: var(--muted-foreground);
    padding: 0 .35rem; border-radius: 999px; min-width: 1.25rem; text-align: center;
}

/* ----------------------------------------------------------------- user */
.nx-user {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .6rem; margin: .5rem; border-radius: var(--radius-md);
    border: 1px solid transparent; background: transparent;
    text-decoration: none; flex-shrink: 0;
}
.nx-user:hover { background: var(--sidebar-accent); }
.nx-avatar {
    width: 1.75rem; height: 1.75rem; border-radius: 999px; flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600;
    background: var(--primary); color: var(--primary-foreground);
}
.nx-user-text { min-width: 0; line-height: 1.2; }
.nx-user-name { font-size: var(--text-sm); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.nx-user-mail { font-size: var(--text-xs); color: var(--muted-foreground); display: block; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------- header */
.nx-header {
    height: var(--header-h); flex-shrink: 0;
    display: flex; align-items: center; gap: .75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    position: sticky; top: 0; z-index: 30;
}
.nx-header h1 { font-size: var(--text-md); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.nx-header-sub:empty { display: none; }
.nx-header-sub { font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.nx-divider-v { width: 1px; height: 1.25rem; background: var(--border); }

.nx-iconbtn {
    width: 2rem; height: 2rem; border-radius: var(--radius-md);
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--muted-foreground);
}
.nx-iconbtn:hover { background: var(--accent-bg); color: var(--foreground); }
.nx-iconbtn svg { width: 1.05rem; height: 1.05rem; }

/* --------------------------------------------------------------- content */
.nx-content { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .nx-content { padding: 1.25rem; } }
.nx-page { max-width: 90rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.nx-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nx-pagehead h2 { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; }
.nx-pagehead p { margin: .15rem 0 0; font-size: var(--text-base); color: var(--muted-foreground); }

/* ----------------------------------------------------------------- card */
.nx-card {
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs); overflow: hidden;
}
.nx-card > header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--border);
}
.nx-card > header h3 { margin: 0; font-size: var(--text-md); font-weight: 600; letter-spacing: -.01em; }
.nx-card > header .sub { font-size: var(--text-sm); color: var(--muted-foreground); font-weight: 400; }
.nx-card-body { padding: 1.15rem; }
.nx-card-body.tight { padding: .85rem 1.15rem; }

/* ------------------------------------------------------------------ kpi */
.nx-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.nx-col-3 { grid-column: span 12; }
.nx-col-4 { grid-column: span 12; }
.nx-col-6 { grid-column: span 12; }
.nx-col-8 { grid-column: span 12; }
.nx-col-12 { grid-column: span 12; }
@media (min-width: 640px) { .nx-col-3, .nx-col-4 { grid-column: span 6; } }
@media (min-width: 1100px) {
    .nx-col-3 { grid-column: span 3; }
    .nx-col-4 { grid-column: span 4; }
    .nx-col-6 { grid-column: span 6; }
    .nx-col-8 { grid-column: span 8; }
}

.nx-kpi {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 1rem 1.15rem;
    position: relative; overflow: hidden;
}
.nx-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.nx-kpi-title { font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); margin: 0; }
.nx-kpi-value { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.015em; margin: .5rem 0 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-kpi-foot { margin: .5rem 0 0; display: flex; align-items: center; gap: .4rem; font-size: var(--text-sm); color: var(--muted-foreground); flex-wrap: wrap; }
.nx-kpi-icon { width: 2rem; height: 2rem; border-radius: var(--radius-md); flex-shrink: 0; }
/* Icons are monochrome: a grey glyph on a grey tile. The g-* hue classes
   are kept for markup compatibility and all resolve to the same neutral. */
.nx-kpi-icon > span {
    width: 100%; height: 100%; border-radius: var(--radius-md);
    display: grid; place-items: center; color: var(--muted-foreground); background: var(--muted);
}
.nx-kpi-icon svg { width: 1rem; height: 1rem; }
.g-teal, .g-green, .g-amber, .g-violet, .g-blue, .g-rose { background: var(--muted); color: var(--muted-foreground); }

/* ---------------------------------------------------------------- badge */
.nx-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: var(--text-xs); font-weight: 500; line-height: 1.5;
    border: 1px solid transparent; background: var(--muted); color: var(--muted-foreground);
    white-space: nowrap;
}
.nx-badge.ok     { background: var(--ok-soft);     color: var(--ok-fg); }
.nx-badge.warn   { background: var(--warn-soft);   color: var(--warn-fg); }
.nx-badge.danger { background: var(--danger-soft); color: var(--danger-fg); }
.nx-badge.info   { background: var(--info-soft);   color: var(--info-fg); }
.nx-badge.brand  { background: var(--brand-soft);  color: var(--brand-fg); }

.nx-dot { width: .5rem; height: .5rem; border-radius: 999px; flex-shrink: 0; background: var(--muted-foreground); }
.nx-dot.ok { background: var(--ok); }
.nx-dot.warn { background: var(--warn); }
.nx-dot.danger { background: var(--danger); }
.nx-dot.brand { background: var(--brand); }
.nx-dot.pulse { animation: nx-pulse 2s ease-in-out infinite; }
@keyframes nx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------------------------------------- button */
.nx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: inherit; font-size: var(--text-base); font-weight: 500;
    padding: .45rem .8rem; border-radius: var(--radius-md);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.nx-btn svg { width: .95rem; height: .95rem; }
.nx-btn-primary, .nx-btn-brand { background: var(--brand); color: #fff; }
.nx-btn-primary:hover, .nx-btn-brand:hover { background: var(--brand-strong); }
.nx-btn-ghost { background: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); border-color: transparent; }
.nx-btn-ghost:hover { background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.nx-btn-danger { background: var(--danger); color: #fff; }
.nx-btn-danger:hover { filter: brightness(.93); }
.nx-btn:disabled { opacity: .55; cursor: not-allowed; }
.nx-btn-sm { padding: .3rem .55rem; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- forms */
.nx-field { display: flex; flex-direction: column; gap: .3rem; }
.nx-field label { font-size: var(--text-base); font-weight: 500; }
.nx-field .hint { font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-input, .nx-select, .nx-textarea {
    width: 100%; font-family: inherit; font-size: var(--text-base);
    padding: .45rem .6rem; border-radius: var(--radius-md);
    border: 1px solid var(--input); background: var(--card); color: var(--foreground);
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.nx-input:disabled { background: var(--muted); color: var(--muted-foreground); }
.nx-input.mono, .nx-textarea.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- table */
.nx-tablewrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.nx-table thead th {
    text-align: start; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground);
    padding: .6rem 1.15rem; border-bottom: 1px solid var(--border);
    background: var(--card);
    white-space: nowrap;
}
.nx-table tbody td { padding: .65rem 1.15rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); }
.nx-table .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.nx-table .num { text-align: end; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.nx-table .muted { color: var(--muted-foreground); }

/* ---------------------------------------------------------------- misc */
.nx-empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted-foreground); display: flex; flex-direction: column; align-items: center; }
.nx-empty svg { width: 1.35rem; height: 1.35rem; margin: 0 0 .85rem; display: block; opacity: .9; color: var(--muted-foreground); padding: .7rem; box-sizing: content-box;
    border-radius: 999px; background: var(--muted); }
.nx-empty p { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--foreground); }
.nx-empty .sub { font-weight: 400; color: var(--muted-foreground); max-width: 28rem; }
.nx-empty .nx-btn { margin-top: 1rem; }
.nx-empty.compact { padding: 1.75rem 1rem; }
.nx-empty .sub { font-size: var(--text-base); opacity: .75; margin-top: .25rem; }

.nx-alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .9rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--muted);
    font-size: var(--text-base); color: var(--foreground);
}
.nx-alert svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }
.nx-alert.ok     { background: var(--ok-soft);     border-color: var(--ok-border);     color: var(--ok-fg); }
.nx-alert.warn   { background: var(--warn-soft);   border-color: var(--warn-border);   color: var(--warn-fg); }
.nx-alert.danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-fg); }
.nx-alert.info   { background: var(--info-soft);   border-color: var(--info-border);   color: var(--info-fg); }
.nx-alert a { font-weight: 600; text-decoration: underline; }

.nx-meter { height: .4rem; width: 100%; background: var(--muted); border-radius: 999px; overflow: hidden; }
.nx-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s ease; }
.nx-meter > span.ok { background: var(--ok); }
.nx-meter > span.warn { background: var(--warn); }
.nx-meter > span.danger { background: var(--danger); }

.nx-stack { display: flex; flex-direction: column; gap: 1rem; }
.nx-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nx-spacer { margin-inline-start: auto; }
.nx-mono { font-family: var(--font-mono); }
.nx-muted { color: var(--muted-foreground); }
.nx-tnum { font-variant-numeric: tabular-nums; }

/* Toasts */
.nx-toasts { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.nx-toast {
    pointer-events: auto; min-width: 16rem; max-width: 22rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: .7rem .85rem; display: flex; gap: .55rem; align-items: flex-start; font-size: var(--text-base);
}
.nx-toast .title { font-weight: 600; }
.nx-toast.ok { border-inline-start: 3px solid var(--ok); }
.nx-toast.danger { border-inline-start: 3px solid var(--danger); }
.nx-toast.warn { border-inline-start: 3px solid var(--warn); }
.nx-toast.info { border-inline-start: 3px solid var(--info); }

@media print { .nx-sidebar, .nx-header, .nx-toasts { display: none; } .nx-main { margin: 0; } }

/* ------------------------------------------------------------- pagination */
.nx-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nx-pager-info { margin: 0; font-size: var(--text-base); color: var(--muted-foreground); }
.nx-pager-info strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.nx-pager-links { display: flex; align-items: center; gap: .25rem; }
.nx-pager-btn {
    min-width: 2rem; height: 2rem; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card); color: var(--foreground);
    font-size: var(--text-base); font-weight: 500; text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.nx-pager-btn:hover { background: var(--accent-bg); }
.nx-pager-btn.current { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 600; }
.nx-pager-btn.disabled { opacity: .45; pointer-events: none; }
.nx-pager-gap { padding: 0 .2rem; color: var(--muted-foreground); font-size: var(--text-base); }

/* ------------------------------------------------------------ device grid */
.nx-cardgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.nx-devcard {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
    padding: 1.1rem; box-shadow: var(--shadow-xs); transition: box-shadow .18s, border-color .18s, transform .18s;
}
.nx-devcard:hover { border-color: color-mix(in oklab, var(--foreground) 18%, transparent); }
.nx-devcard.flash { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.nx-devcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.nx-devcard-tag { font-size: var(--text-md); font-weight: 600; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-devcard-tag:hover { color: var(--brand-fg); }
.nx-devstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; text-align: center; }
.nx-devstats > div { background: color-mix(in oklab, var(--muted) 55%, var(--card)); border-radius: var(--radius-lg); padding: .6rem .3rem; }
.nx-devstats .v { margin: 0; font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-devstats .k { margin: .15rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-devcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
/* Keep the footer on one line: the timestamp truncates rather than wrapping
   and shoving the action buttons onto a second row. */
.nx-devcard-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-devcard-foot > .nx-row { flex-shrink: 0; flex-wrap: nowrap; }
.nx-devactions { display: flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .15s; }
.nx-devcard:hover .nx-devactions, .nx-devcard:focus-within .nx-devactions { opacity: 1; }
@media (hover: none) { .nx-devactions { opacity: 1; } }

/* ----------------------------------------------------- chips, code, steps */
.nx-chip {
    display: inline-flex; align-items: center; padding: .3rem .65rem;
    border-radius: var(--radius-md); border: 1px solid var(--border);
    background: var(--card); color: var(--muted-foreground);
    font-size: var(--text-base); font-weight: 500; text-decoration: none;
}
.nx-chip:hover { background: var(--accent-bg); color: var(--foreground); }
.nx-chip.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.nx-code {
    display: block; font-family: var(--font-mono); font-size: var(--text-base);
    background: var(--muted); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: .5rem .7rem; overflow-x: auto;
}

.nx-disclosure {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem 1.15rem; background: transparent; border: 0;
    cursor: pointer; font-family: inherit; color: inherit; text-align: start;
}
.nx-disclosure:hover { background: var(--accent-bg); }
.nx-chevron { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; transition: transform .18s; }
.nx-chevron.open { transform: rotate(180deg); }

.nx-step {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem 1.15rem; font-size: var(--text-base);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
}
.nx-step:last-child { border-bottom: 0; }
.nx-step.fail { background: var(--danger-soft); }
.nx-step .seq { width: 1.5rem; text-align: end; font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.nx-step .step { color: var(--foreground); }
.nx-step .step.bad { color: var(--danger-fg); font-weight: 600; }
.nx-step .detail { font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-step .ms { margin-inline-start: auto; font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.nx-spin { animation: nx-rotate .8s linear infinite; }
@keyframes nx-rotate { to { transform: rotate(360deg); } }
[x-cloak] { display: none !important; }

/* ------------------------------------------------- deflist + stat strip */
.nx-deflist { margin: 0; display: flex; flex-direction: column; gap: .45rem; font-size: var(--text-base); }
.nx-deflist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nx-deflist > div.sep { border-top: 1px solid var(--border); padding-top: .55rem; margin-top: .25rem; }
.nx-deflist dt { color: var(--muted-foreground); margin: 0; }
.nx-deflist dd { margin: 0; font-variant-numeric: tabular-nums; text-align: end; }
.nx-deflist dd.strong { font-weight: 600; }

/* Auto-fits however many tiles a page supplies (5 on Archive, 6 on History)
   rather than hard-coding a column count that strands the last one. */
.nx-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.nx-statstrip > div { padding: .9rem 1.15rem; border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border); }
.nx-statstrip > div:first-child { border-inline-start: 0; }
@media (min-width: 900px) { .nx-statstrip > div { border-top: 0; } }
.nx-statstrip .k { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); font-weight: 500; }
.nx-statstrip .v { margin: .25rem 0 0; font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ------------------------------------------------- flags, toggles, modal */
.nx-flagrow { padding: 1.1rem 1.15rem; border-bottom: 1px solid var(--border); }
.nx-flagrow:last-child { border-bottom: 0; }
.nx-flagicon {
    width: 2.25rem; height: 2.25rem; border-radius: 999px; flex-shrink: 0;
    display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground);
}
.nx-flagicon.on { background: var(--ok-soft); color: var(--ok-fg); }
.nx-flagicon svg { width: 1.1rem; height: 1.1rem; }

.nx-switchbtn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .7rem; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--card);
    cursor: pointer; font-family: inherit;
}
.nx-switchbtn:hover { background: var(--accent-bg); }
.nx-switchbtn.on { background: var(--card); }
.nx-switchbtn .track {
    width: 2.5rem; height: 1.4rem; border-radius: 999px; background: color-mix(in oklab, var(--muted) 60%, var(--foreground) 18%);
    position: relative; flex-shrink: 0; transition: background .2s;
}
.nx-switchbtn.on .track { background: var(--ok); }
.nx-switchbtn .knob {
    position: absolute; top: .15rem; inset-inline-start: .15rem;
    width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff;
    box-shadow: var(--shadow-xs); transition: transform .2s;
}
.nx-switchbtn.on .knob { transform: translateX(1.1rem); }
.nx-switchbtn .lbl { font-size: var(--text-base); font-weight: 500; color: var(--muted-foreground); }
.nx-switchbtn.on .lbl { color: var(--foreground); }

.nx-minitoggle {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .55rem; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--card);
    color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 500;
    cursor: pointer; font-family: inherit;
}
.nx-minitoggle:hover { background: var(--accent-bg); color: var(--foreground); }
.nx-minitoggle .track {
    width: 1.8rem; height: 1rem; border-radius: 999px; position: relative; flex-shrink: 0;
    background: color-mix(in oklab, var(--muted) 60%, var(--foreground) 18%); transition: background .2s;
}
.nx-minitoggle .knob {
    position: absolute; top: .125rem; inset-inline-start: .125rem;
    width: .75rem; height: .75rem; border-radius: 999px; background: #fff; transition: transform .2s;
}
.nx-minitoggle.on .knob { transform: translateX(.8rem); }
.nx-minitoggle.on.warn { color: var(--foreground); }
.nx-minitoggle.on.warn .track { background: var(--warn); }
.nx-minitoggle.on.info { color: var(--foreground); }
.nx-minitoggle.on.info .track { background: var(--info); }
.nx-pinned { background: var(--warn-soft) !important; border-color: var(--warn-border) !important; color: var(--warn-fg) !important; }

.nx-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.nx-modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.nx-modal-panel {
    position: relative; width: 100%; max-width: 26rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden;
}
.nx-modal-body { padding: 1.25rem; display: flex; gap: .85rem; align-items: flex-start; }
.nx-modal-body h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.nx-modal-body p { margin: .3rem 0 0; font-size: var(--text-base); color: var(--muted-foreground); }
.nx-modal-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; }
.nx-modal-icon svg { width: 1.15rem; height: 1.15rem; }
.nx-modal-icon.danger { background: var(--danger-soft); color: var(--danger-fg); }
.nx-modal-icon.info { background: var(--info-soft); color: var(--info-fg); }
.nx-modal-foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .85rem 1.25rem; background: color-mix(in oklab, var(--muted) 50%, var(--card));
    border-top: 1px solid var(--border);
}
.nx-fade-enter { transition: opacity .2s ease-out; }
.nx-fade-leave { transition: opacity .15s ease-in; }
.nx-pop-enter { transition: opacity .2s ease-out, transform .2s ease-out; }
.nx-pop-leave { transition: opacity .15s ease-in, transform .15s ease-in; }

/* -------------------------------------------- health, minigrid, bars */
.nx-health { border: 1px solid var(--border); background: var(--muted); border-radius: var(--radius-xl); padding: 1rem 1.15rem; }
.nx-health p { margin: .5rem 0 0; font-size: var(--text-base); }
.nx-health-label { font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; }
.nx-health.ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-fg); }
.nx-health.warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-fg); }
.nx-health.danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-fg); }

.nx-minigrid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .nx-minigrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-minigrid > div { background: color-mix(in oklab, var(--muted) 55%, var(--card)); border-radius: var(--radius-lg); padding: .7rem .85rem; }
.nx-minigrid .k { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); font-weight: 500; }
.nx-minigrid .v { margin: .25rem 0 0; font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }

.nx-linkcard {
    display: block; text-decoration: none; padding: .9rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
}
.nx-linkcard:hover { background: var(--accent-bg); }
.nx-linkcard.danger { border-color: var(--danger-border); }
.nx-linkcard .k { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); font-weight: 500; }
.nx-linkcard.danger .k { color: var(--danger-fg); }
.nx-linkcard .t { margin: .25rem 0 0; font-weight: 600; }
.nx-linkcard .d { margin: .15rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }

.nx-bars { display: flex; align-items: flex-end; gap: .35rem; height: 6rem; }
.nx-bars > span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: color-mix(in oklab, var(--muted) 50%, var(--foreground) 22%); }
.nx-bars > span.warn { background: var(--warn); }
.nx-bars > span.danger { background: var(--danger); }

/* ------------------------------------------------- filters + responsive */
.nx-filtergrid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nx-filtergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nx-filtergrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.nx-desktop-only { display: none; }
@media (min-width: 768px) { .nx-desktop-only { display: block; } }
.nx-mobile-only { display: block; }
@media (min-width: 768px) { .nx-mobile-only { display: none; } }

.nx-mobilerow { display: block; padding: .9rem 1.15rem; border-bottom: 1px solid var(--border); text-decoration: none; }
.nx-mobilerow:last-child { border-bottom: 0; }
.nx-mobilerow:hover { background: var(--accent-bg); }
.nx-badge.mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------ form bits */
.nx-formlabel { display: block; font-size: var(--text-base); font-weight: 500; color: var(--foreground); margin-bottom: .3rem; }
.nx-formerror { margin: .3rem 0 0; font-size: var(--text-sm); color: var(--danger-fg); }
/* The legacy forms space fields with `space-y-6` on a wrapper; keep that
   rhythm now the inner markup is design-system classes. */
.nx-card .space-y-6 > * + * { margin-top: 1.1rem; }
.nx-card .space-y-4 > * + * { margin-top: .85rem; }

.nx-narrow { max-width: 46rem; width: 100%; margin: 0 auto; }
.nx-link { color: var(--brand-fg); font-weight: 500; text-decoration: none; }
.nx-link:hover { text-decoration: underline; }
.nx-check { width: 1rem; height: 1rem; accent-color: var(--brand-strong); }

/* ----------------------------------------------------- status check rows */
.nx-checkrow {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.15rem; border-bottom: 1px solid var(--border);
}
.nx-checkrow:last-child { border-bottom: 0; }
.nx-checkmain { flex: 1; min-width: 0; }
.nx-checklabel { margin: 0; font-size: var(--text-base); font-weight: 600; }
.nx-checklabel a { text-decoration: none; }
.nx-checklabel a:hover { color: var(--brand-fg); text-decoration: underline; }
.nx-checkdetail { margin: .15rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-checkvalue {
    font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 640px) {
    .nx-checkrow { flex-wrap: wrap; }
    .nx-checkmain { flex-basis: 100%; order: 1; }
}

/* ==========================================================================
   Legacy compatibility layer
   --------------------------------------------------------------------------
   The pages not yet hand-converted still carry the original Tailwind utility
   classes. Rather than rewrite 26 templates by hand (slow, and easy to break
   behaviour while doing it), these rules remap the small, finite set of
   utilities those pages actually use onto the design tokens above.

   The effect: every remaining page picks up the new palette, spacing and
   dark mode without its markup changing. Scoped under `body.nx` and marked
   !important so they beat the pre-built Tailwind bundle loaded before this
   file. As pages get hand-converted these rules simply stop matching.
   ========================================================================== */

/* Surfaces ---------------------------------------------------------------- */
body.nx .bg-white { background-color: var(--card) !important; }
body.nx .bg-gray-50 { background-color: color-mix(in oklab, var(--muted) 55%, var(--card)) !important; }
body.nx .bg-gray-100 { background-color: var(--muted) !important; }
body.nx .bg-gray-200 { background-color: color-mix(in oklab, var(--muted) 80%, var(--foreground) 6%) !important; }
body.nx .bg-gray-300 { background-color: color-mix(in oklab, var(--muted) 65%, var(--foreground) 12%) !important; }
body.nx .bg-gray-700,
body.nx .bg-gray-800,
body.nx .bg-gray-900 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }
body.nx .hover\:bg-gray-50:hover { background-color: var(--accent-bg) !important; }
body.nx .hover\:bg-gray-100:hover { background-color: var(--muted) !important; }
body.nx .hover\:bg-gray-800:hover,
body.nx .hover\:bg-gray-700:hover { background-color: color-mix(in oklab, var(--primary) 85%, var(--foreground)) !important; }

/* Text -------------------------------------------------------------------- */
body.nx .text-gray-900, body.nx .text-gray-800 { color: var(--foreground) !important; }
body.nx .text-gray-700, body.nx .text-gray-600 { color: color-mix(in oklab, var(--foreground) 75%, var(--muted-foreground)) !important; }
body.nx .text-gray-500, body.nx .text-gray-400, body.nx .text-gray-300 { color: var(--muted-foreground) !important; }
body.nx .text-white { color: #fff !important; }
body.nx .bg-gray-900.text-white, body.nx .bg-gray-800.text-white { color: var(--primary-foreground) !important; }
body.nx .hover\:text-gray-900:hover, body.nx .hover\:text-gray-700:hover { color: var(--foreground) !important; }

/* Borders ----------------------------------------------------------------- */
body.nx .border-gray-100,
body.nx .border-gray-200,
body.nx .border-gray-300 { border-color: var(--border) !important; }
body.nx .border-gray-500, body.nx .border-gray-600, body.nx .border-gray-900 { border-color: color-mix(in oklab, var(--border) 40%, var(--foreground)) !important; }
body.nx .divide-gray-100 > * + *, body.nx .divide-gray-200 > * + * { border-color: var(--border) !important; }

/* Semantic colours — routed through the status tokens so meaning survives
   the theme switch instead of hard-coding light-mode pastels. */
body.nx .bg-green-50,  body.nx .bg-emerald-50  { background-color: var(--ok-soft) !important; }
body.nx .bg-green-100, body.nx .bg-emerald-100 { background-color: var(--ok-soft) !important; }
body.nx .text-green-600, body.nx .text-green-700, body.nx .text-green-800,
body.nx .text-emerald-600, body.nx .text-emerald-700 { color: var(--ok-fg) !important; }
body.nx .border-green-200, body.nx .border-green-400, body.nx .border-emerald-200 { border-color: var(--ok-border) !important; }
body.nx .bg-green-500, body.nx .bg-green-600, body.nx .bg-emerald-500 { background-color: var(--ok) !important; }
/* Solid status fills are only used for buttons/indicators; force readable
   text on them in both themes rather than inheriting a muted colour. */
body.nx .bg-green-500, body.nx .bg-green-600, body.nx .bg-emerald-500,
body.nx .bg-red-500, body.nx .bg-red-600,
body.nx .bg-blue-500, body.nx .bg-blue-600, body.nx .bg-indigo-500 { color: #fff !important; }
body.nx .bg-green-600:hover, body.nx .bg-emerald-500:hover { filter: brightness(.94); }

body.nx .bg-red-50, body.nx .bg-rose-50   { background-color: var(--danger-soft) !important; }
body.nx .bg-red-100, body.nx .bg-rose-100 { background-color: var(--danger-soft) !important; }
body.nx .text-red-500, body.nx .text-red-600, body.nx .text-red-700, body.nx .text-red-800,
body.nx .text-rose-600, body.nx .text-rose-700 { color: var(--danger-fg) !important; }
body.nx .border-red-200, body.nx .border-red-400, body.nx .border-rose-200 { border-color: var(--danger-border) !important; }
body.nx .bg-red-500, body.nx .bg-red-600 { background-color: var(--danger) !important; }

body.nx .bg-yellow-50, body.nx .bg-amber-50   { background-color: var(--warn-soft) !important; }
body.nx .bg-yellow-100, body.nx .bg-amber-100 { background-color: var(--warn-soft) !important; }
body.nx .text-yellow-600, body.nx .text-yellow-700, body.nx .text-yellow-800,
body.nx .text-amber-600, body.nx .text-amber-700, body.nx .text-amber-800,
body.nx .text-orange-600, body.nx .text-orange-700 { color: var(--warn-fg) !important; }
body.nx .border-yellow-200, body.nx .border-yellow-400,
body.nx .border-amber-200, body.nx .border-orange-200 { border-color: var(--warn-border) !important; }
body.nx .bg-yellow-500, body.nx .bg-amber-500, body.nx .bg-orange-500 { background-color: var(--warn) !important; }
body.nx .bg-orange-100 { background-color: var(--warn-soft) !important; }

body.nx .bg-blue-50, body.nx .bg-indigo-50, body.nx .bg-sky-50, body.nx .bg-cyan-50 { background-color: var(--info-soft) !important; }
body.nx .bg-blue-100, body.nx .bg-indigo-100 { background-color: var(--info-soft) !important; }
body.nx .text-blue-600, body.nx .text-blue-700, body.nx .text-blue-800,
body.nx .text-indigo-600, body.nx .text-indigo-700, body.nx .text-indigo-800,
body.nx .text-sky-600, body.nx .text-cyan-700 { color: var(--info-fg) !important; }
body.nx .border-blue-200, body.nx .border-indigo-200 { border-color: var(--info-border) !important; }
body.nx .bg-blue-500, body.nx .bg-indigo-500, body.nx .bg-blue-600 { background-color: var(--info) !important; }

body.nx .bg-purple-50, body.nx .bg-violet-50, body.nx .bg-pink-50 { background-color: color-mix(in oklab, oklch(0.66 0.18 295) 12%, var(--card)) !important; }
body.nx .bg-purple-100, body.nx .bg-violet-100 { background-color: color-mix(in oklab, oklch(0.66 0.18 295) 16%, var(--card)) !important; }
body.nx .text-purple-600, body.nx .text-purple-700, body.nx .text-purple-800,
body.nx .text-violet-600, body.nx .text-violet-700, body.nx .text-pink-700 { color: oklch(0.55 0.19 295) !important; }
:root[data-theme="dark"] body.nx .text-purple-600,
:root[data-theme="dark"] body.nx .text-purple-700,
:root[data-theme="dark"] body.nx .text-purple-800,
:root[data-theme="dark"] body.nx .text-violet-600,
:root[data-theme="dark"] body.nx .text-violet-700 { color: oklch(0.80 0.14 295) !important; }

/* Focus rings ------------------------------------------------------------- */
body.nx .focus\:ring-gray-900:focus, body.nx .focus\:ring-indigo-500:focus,
body.nx .focus\:border-gray-900:focus, body.nx .focus\:border-indigo-500:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
    outline: none !important;
}

/* Shape and typography ---------------------------------------------------- */
body.nx .rounded-xl, body.nx .rounded-2xl { border-radius: var(--radius-xl) !important; }
body.nx .rounded-lg { border-radius: var(--radius-lg) !important; }
body.nx .shadow, body.nx .shadow-sm { box-shadow: var(--shadow-xs) !important; }
body.nx .shadow-md, body.nx .shadow-lg { box-shadow: var(--shadow-sm) !important; }
body.nx .font-mono { font-family: var(--font-mono) !important; }

/* Legacy pages wrap content in `py-8 > max-w-7xl mx-auto` and expect their
   own page header. The shell already provides padding and a header bar, so
   collapse the outer spacing to avoid a doubled gutter. */
body.nx main.nx-content > .nx-page > .py-8 { padding-block: 0 !important; }
body.nx main.nx-content > .nx-page > .py-8 > .max-w-7xl,
body.nx main.nx-content > .nx-page > .py-8 > .max-w-5xl,
body.nx main.nx-content > .nx-page > .py-8 > .max-w-4xl { padding-inline: 0 !important; max-width: none !important; }

/* Legacy tables ----------------------------------------------------------- */
body.nx table thead th { background: color-mix(in oklab, var(--muted) 55%, var(--card)) !important; color: var(--muted-foreground) !important; }
body.nx table tbody tr:hover { background: color-mix(in oklab, var(--muted) 40%, transparent) !important; }

/* Legacy inputs ----------------------------------------------------------- */
body.nx input[type="text"], body.nx input[type="email"], body.nx input[type="password"],
body.nx input[type="number"], body.nx input[type="search"], body.nx input[type="date"],
body.nx input[type="tel"], body.nx select, body.nx textarea {
    background-color: var(--card); color: var(--foreground); border-color: var(--input);
}
body.nx input::placeholder, body.nx textarea::placeholder { color: var(--muted-foreground); }

/* ========================================================== system status */
/* Hero: one glance answers "is it up?", with counts and the next refresh. */
.nx-status-hero {
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--card); box-shadow: var(--shadow-xs); overflow: hidden;
    display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .nx-status-hero { grid-template-columns: 1fr auto; } }
.nx-status-main { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.35rem; }
.nx-status-icon {
    width: 3rem; height: 3rem; border-radius: 999px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--muted); color: var(--muted-foreground);
}
.nx-status-icon svg { width: 1.4rem; height: 1.4rem; }
.nx-status-hero.ok .nx-status-icon { background: var(--ok-soft); color: var(--ok-fg); }
.nx-status-hero.warn .nx-status-icon { background: var(--warn-soft); color: var(--warn-fg); }
.nx-status-hero.danger .nx-status-icon { background: var(--danger-soft); color: var(--danger-fg); }
.nx-status-kicker { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nx-status-hero.ok .nx-status-kicker { color: var(--ok-fg); }
.nx-status-hero.warn .nx-status-kicker { color: var(--warn-fg); }
.nx-status-hero.danger .nx-status-kicker { color: var(--danger-fg); }
.nx-status-title { margin: .15rem 0 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.nx-status-sub { margin: .35rem 0 0; font-size: var(--text-base); color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.nx-status-sub .nx-dot { width: .4rem; height: .4rem; }

/* Right rail: tally of checks by level, then the next-refresh countdown. */
.nx-status-rail {
    display: flex; flex-direction: column; justify-content: center; gap: .85rem;
    padding: 1rem 1.35rem; border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 55%, var(--card));
}
@media (min-width: 900px) { .nx-status-rail { border-top: 0; border-inline-start: 1px solid var(--border); min-width: 17rem; } }
.nx-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.nx-tally > div { text-align: center; }
.nx-tally .n { margin: 0; font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.nx-tally .l { margin: .15rem 0 0; font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
.nx-tally > div.dim { opacity: .4; }
.nx-tally .ok .n { color: var(--ok-fg); }
.nx-tally .warn .n { color: var(--warn-fg); }
.nx-tally .danger .n { color: var(--danger-fg); }
.nx-refresh { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-refresh .nx-meter { flex: 1; height: .25rem; }
.nx-refresh .nx-meter > span { transition: width 1s linear; }
.nx-refresh .t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-refresh button {
    font: inherit; font-weight: 500; color: var(--brand-fg); background: none; border: 0;
    padding: .1rem .3rem; cursor: pointer; border-radius: var(--radius-sm);
}
.nx-refresh button:hover { background: var(--brand-soft); }

/* Build facts: a line of pills, not a card of their own. */
.nx-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.nx-facts > li {
    display: inline-flex; align-items: baseline; gap: .4rem;
    padding: .3rem .65rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); font-size: var(--text-sm); color: var(--muted-foreground);
}
.nx-facts .v { font-family: var(--font-mono); font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* Groups of check cards. */
.nx-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .25rem 0 .6rem; }
.nx-group-head h3 { margin: 0; font-size: var(--text-base); font-weight: 600; letter-spacing: -.005em; }
.nx-group-head p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
@media (max-width: 640px) { .nx-group-head { flex-direction: column; gap: .1rem; } }
.nx-checkgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }

.nx-checkcard {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    padding: .9rem 1rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--card); box-shadow: var(--shadow-xs); min-height: 6.25rem;
}
/* Problems are flagged by the dot, the badge and the figure's colour, not
   by painting the whole card. */
.nx-checkcard.warn .nx-checkcard-value { color: var(--warn-fg); }
.nx-checkcard.danger .nx-checkcard-value { color: var(--danger-fg); }
.nx-checkcard-top { display: flex; align-items: center; gap: .5rem; }
.nx-checkcard-top .name { margin: 0; font-size: var(--text-base); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-checkcard-top .name a { text-decoration: none; }
.nx-checkcard-top .name a:hover { color: var(--brand-fg); text-decoration: underline; }
.nx-checkcard-value {
    margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.nx-checkcard-value.quiet { font-family: var(--font-sans); font-size: var(--text-lg); color: var(--muted-foreground); font-weight: 500; }
.nx-checkcard-detail { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.45; flex: 1; }

.nx-checkcard .nx-meter { height: .3rem; }
.nx-checkcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--text-xs); color: var(--muted-foreground); }
.nx-checkcard-foot a { color: var(--brand-fg); font-weight: 500; text-decoration: none; }
.nx-checkcard-foot a:hover { text-decoration: underline; }
.nx-checkcard:target { outline: 2px solid var(--brand); outline-offset: 2px; }

.nx-probe-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-probe-note svg { width: .9rem; height: .9rem; flex-shrink: 0; margin-top: .1rem; }

/* ==========================================================================
   Shared page patterns (added in the all-pages redesign)
   ========================================================================== */

/* Page hero: an intro block with icon tile, display title, one-line purpose
   and the page's primary actions. Use at the top of a page that needs
   context; pages that open on KPIs can skip it. */
.nx-pagehero {
    display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--card); position: relative; overflow: hidden;
}
.nx-pagehero-icon {
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); flex-shrink: 0;
    display: grid; place-items: center; color: var(--muted-foreground); background: var(--muted);
}
.nx-pagehero-icon svg { width: 1.3rem; height: 1.3rem; }
.nx-pagehero-text { flex: 1; min-width: 14rem; }
.nx-pagehero-kicker { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nx-pagehero h2 { margin: .1rem 0 0; font-size: var(--text-xl); font-weight: 600; line-height: 1.2; }
.nx-pagehero p { margin: .35rem 0 0; font-size: var(--text-base); color: var(--muted-foreground); max-width: 56rem; }
.nx-pagehero-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; align-self: center; }
.nx-pagehero-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .6rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-pagehero-meta strong { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Detail header for a single record (a credential, a device, a verification). */
.nx-detailhead {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.15rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--card); box-shadow: var(--shadow-xs);
}
.nx-detailhead-avatar {
    width: 3rem; height: 3rem; border-radius: var(--radius-lg); flex-shrink: 0;
    display: grid; place-items: center; font-weight: 600; font-size: var(--text-lg);
    color: var(--muted-foreground); background: var(--muted);
}
.nx-detailhead-avatar svg { width: 1.4rem; height: 1.4rem; }
.nx-detailhead-avatar.ok { background: var(--ok-soft); color: var(--ok-fg); }
.nx-detailhead-avatar.warn { background: var(--warn-soft); color: var(--warn-fg); }
.nx-detailhead-avatar.danger { background: var(--danger-soft); color: var(--danger-fg); }
.nx-detailhead-avatar.muted { background: var(--muted); color: var(--muted-foreground); }
.nx-detailhead-text { flex: 1; min-width: 12rem; }
.nx-detailhead-kicker { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nx-detailhead h2 { margin: .1rem 0 0; font-size: var(--text-xl); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.nx-detailhead h2.mono { font-family: var(--font-mono); letter-spacing: 0; font-weight: 600; }
.nx-detailhead-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .4rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); align-items: center; }
.nx-detailhead-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Key/value grid for record facts. */
.nx-kv { display: grid; gap: .85rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.nx-kv > div { min-width: 0; }
.nx-kv dt, .nx-kv .k { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nx-kv dd, .nx-kv .v { margin: .25rem 0 0; font-size: var(--text-base); font-weight: 500; overflow-wrap: anywhere; }
.nx-kv .v.mono, .nx-kv dd.mono { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; }
.nx-kv .v.muted, .nx-kv dd.muted { color: var(--muted-foreground); font-weight: 400; }
.nx-kv.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

/* Secret / token value with a copy affordance. */
.nx-secret {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: var(--text-sm);
    padding: .5rem .65rem; border-radius: var(--radius-md);
    background: var(--muted); border: 1px solid var(--border);
}
.nx-secret > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-secret button { flex-shrink: 0; }

/* Two-column form sections: explanation on the left, fields on the right. */
.nx-formsec {
    display: grid; gap: 1rem; grid-template-columns: 1fr;
    padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--border);
}
.nx-formsec:last-of-type { border-bottom: 0; }
@media (min-width: 900px) { .nx-formsec { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 2rem; } }
.nx-formsec > aside h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.nx-formsec > aside p { margin: .3rem 0 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.nx-formsec > div { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.nx-fields-2 { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nx-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx-formfoot {
    display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
    padding: .85rem 1.35rem; background: color-mix(in oklab, var(--muted) 50%, var(--card));
    border-top: 1px solid var(--border);
}
.nx-formfoot .note { margin-inline-end: auto; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-field.has-error .nx-input, .nx-field.has-error .nx-select, .nx-field.has-error .nx-textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.nx-field .error { font-size: var(--text-sm); color: var(--danger-fg); }
.nx-field label .opt { font-weight: 400; color: var(--muted-foreground); }
.nx-field label .req { color: var(--danger-fg); }

/* Input with a leading icon or addon. */
.nx-inputwrap { position: relative; display: flex; align-items: center; }
.nx-inputwrap > svg { position: absolute; inset-inline-start: .65rem; width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
.nx-inputwrap > .nx-input { padding-inline-start: 2.2rem; }
.nx-inputwrap > .addon { position: absolute; inset-inline-end: .5rem; font-size: var(--text-xs); color: var(--muted-foreground); font-family: var(--font-mono); }
.nx-input.lg { font-size: var(--text-lg); padding: .7rem .85rem; }
.nx-inputwrap > .nx-input.lg { padding-inline-start: 2.6rem; }
.nx-inputwrap > .nx-input.lg ~ svg, .nx-inputwrap.lg > svg { inset-inline-start: .85rem; width: 1.15rem; height: 1.15rem; }

/* Segmented control (time ranges, view modes). */
.nx-seg { display: inline-flex; padding: .2rem; gap: .15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 60%, var(--card)); flex-wrap: wrap; }
.nx-seg > button, .nx-seg > a {
    font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground);
    padding: .32rem .7rem; border-radius: calc(var(--radius-lg) - .2rem); border: 0; background: transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.nx-seg > button:hover, .nx-seg > a:hover { color: var(--foreground); }
.nx-seg > .active, .nx-seg > [aria-pressed="true"], .nx-seg > [aria-current] { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: var(--shadow-xs); }
.nx-seg.sm > button, .nx-seg.sm > a { font-size: var(--text-xs); padding: .22rem .55rem; }

/* Initials avatar for list rows. */
.nx-initials {
    width: 2.1rem; height: 2.1rem; border-radius: var(--radius-md); flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
    background: var(--muted); color: var(--muted-foreground);
}
.nx-initials.ok { background: var(--ok-soft); color: var(--ok-fg); }
.nx-initials.warn { background: var(--warn-soft); color: var(--warn-fg); }
.nx-initials.danger { background: var(--danger-soft); color: var(--danger-fg); }
.nx-initials.info { background: var(--info-soft); color: var(--info-fg); }
.nx-initials.muted { background: var(--muted); color: var(--muted-foreground); }
.nx-initials svg { width: 1rem; height: 1rem; }
.nx-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.nx-cell-text { min-width: 0; line-height: 1.3; }
.nx-cell-text .t { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cell-text .s { font-size: var(--text-xs); color: var(--muted-foreground); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Table refinements. */
.nx-table tbody tr.clickable { cursor: pointer; }
.nx-table tbody tr.tone-danger { background: color-mix(in oklab, var(--danger-soft) 45%, transparent); }
.nx-table tbody tr.tone-warn { background: color-mix(in oklab, var(--warn-soft) 45%, transparent); }
.nx-table .actions { text-align: end; white-space: nowrap; }
.nx-table .actions .nx-row { justify-content: flex-end; flex-wrap: nowrap; gap: .25rem; }
.nx-table.compact thead th { padding: .5rem .9rem; }
.nx-table.compact tbody td { padding: .5rem .9rem; }
.nx-tablewrap.sticky { max-height: 70vh; overflow: auto; }
.nx-tablewrap.sticky thead th { position: sticky; top: 0; z-index: 1; }
.nx-table .fade-in { animation: nx-fadein .4s ease-out; }
@keyframes nx-fadein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Vertical timeline (login journey, run history). */
.nx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.nx-timeline::before { content: ""; position: absolute; inset-block: .6rem; inset-inline-start: .55rem; width: 2px; background: var(--border); border-radius: 2px; }
.nx-timeline > li { position: relative; padding: .35rem 0 .35rem 2rem; display: flex; align-items: baseline; gap: .6rem; font-size: var(--text-base); }
.nx-timeline > li::before {
    content: ""; position: absolute; inset-inline-start: .25rem; top: .72rem;
    width: .65rem; height: .65rem; border-radius: 999px; background: var(--card);
    border: 2px solid var(--muted-foreground); box-sizing: border-box;
}
.nx-timeline > li.ok::before { border-color: var(--ok); background: var(--ok); }
.nx-timeline > li.warn::before { border-color: var(--warn); background: var(--warn); }
.nx-timeline > li.danger::before { border-color: var(--danger); background: var(--danger); }
.nx-timeline > li .t { font-weight: 600; }
.nx-timeline > li.danger .t { color: var(--danger-fg); }
.nx-timeline > li .d { color: var(--muted-foreground); font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-timeline > li .ms { margin-inline-start: auto; font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-family: var(--font-mono); flex-shrink: 0; }

/* Drop zone for file input. */
.nx-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    padding: 1.75rem 1rem; text-align: center; cursor: pointer;
    border: 1.5px dashed color-mix(in oklab, var(--border) 40%, var(--muted-foreground)); border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--muted) 45%, var(--card)); color: var(--muted-foreground);
    transition: border-color .15s, background .15s;
}
.nx-dropzone:hover, .nx-dropzone.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-fg); }
.nx-dropzone svg { width: 1.6rem; height: 1.6rem; opacity: .8; }
.nx-dropzone .t { font-size: var(--text-base); font-weight: 600; color: var(--foreground); }
.nx-dropzone .s { font-size: var(--text-xs); }

/* Preformatted block (raw responses, JSON). */
.nx-pre {
    margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.55;
    padding: .85rem 1rem; border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--muted) 70%, var(--card)); border: 1px solid var(--border);
    overflow: auto; max-height: 28rem; white-space: pre; color: var(--foreground);
}
.nx-prewrap { position: relative; }
.nx-prewrap > .nx-btn { position: absolute; top: .5rem; inset-inline-end: .5rem; }

/* Big figure with caption, for inline stats inside cards. */
.nx-figure { display: flex; flex-direction: column; gap: .15rem; }
.nx-figure .v { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-figure .k { font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nx-figure .v.ok { color: var(--ok-fg); } .nx-figure .v.warn { color: var(--warn-fg); } .nx-figure .v.danger { color: var(--danger-fg); }

/* Badge variants. */
.nx-badge.lg { font-size: var(--text-sm); padding: .25rem .7rem; border-radius: 999px; }
.nx-badge.pill { border-radius: 999px; }
.nx-badge .nx-dot { width: .4rem; height: .4rem; }

/* Callout with icon tile (how-to, API notes). */
.nx-callout {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: .9rem 1rem; border-radius: var(--radius-xl);
    border: 1px solid var(--border); background: var(--muted);
}
.nx-callout > svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--muted-foreground); margin-top: .1rem; }
.nx-callout h4 { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--foreground); letter-spacing: 0; }
.nx-callout p, .nx-callout ol, .nx-callout ul { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--foreground); line-height: 1.5; }
.nx-callout ol, .nx-callout ul { padding-inline-start: 1.1rem; }
.nx-callout.brand { border-color: var(--border); background: var(--muted); }
.nx-callout.brand > svg { color: var(--brand-fg); }
.nx-callout.warn { border-color: var(--warn-border); background: color-mix(in oklab, var(--warn-soft) 70%, var(--card)); }
.nx-callout.warn > svg, .nx-callout.warn h4 { color: var(--warn-fg); }

/* Simple ordered steps list (how-to). */
.nx-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: .5rem; }
.nx-steps > li { counter-increment: s; display: flex; gap: .65rem; align-items: flex-start; font-size: var(--text-base); }
.nx-steps > li::before {
    content: counter(s); flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 999px;
    display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600;
    background: var(--muted); color: var(--muted-foreground);
}

/* Toolbar row above tables (search, filters, actions). */
.nx-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1.15rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, var(--card)); }
.nx-toolbar .nx-input, .nx-toolbar .nx-select { width: auto; min-width: 10rem; }
.nx-toolbar .grow { flex: 1; min-width: 10rem; }
.nx-toolbar .grow .nx-input { width: 100%; }

/* Sticky save bar for long forms. */
.nx-savebar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .75rem 1.15rem; margin-top: auto;
    background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--border);
}
.nx-savebar .note { margin-inline-end: auto; font-size: var(--text-sm); color: var(--muted-foreground); }

/* Two-pane layout: main column + sticky side rail. */
.nx-split { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .nx-split { grid-template-columns: minmax(0, 1fr) 20rem; } .nx-split > aside { position: sticky; top: calc(var(--header-h) + 1rem); } }
.nx-split.wide-aside { } @media (min-width: 1100px) { .nx-split.wide-aside { grid-template-columns: minmax(0, 1fr) 24rem; } }
.nx-split.aside-left { } @media (min-width: 1100px) { .nx-split.aside-left { grid-template-columns: 16rem minmax(0, 1fr); } }

/* Big phone-number display. */
.nx-phone { font-family: var(--font-mono); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* Progress steps across the top of a flow. */
.nx-flow { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted-foreground); }
.nx-flow > span { display: inline-flex; align-items: center; gap: .35rem; }
.nx-flow > span.on { color: var(--foreground); font-weight: 600; }
.nx-flow > span.done { color: var(--ok-fg); }
.nx-flow > span + span::before { content: ""; width: 1.2rem; height: 1px; background: var(--border); display: inline-block; margin-inline-end: .35rem; }

/* Motion: respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .nx *, .nx *::before, .nx *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* Promoted from page work: wide children (pre blocks, tables) must never
   stretch a grid column past the viewport. */
.nx-split > *, .nx-grid > *, .nx-checkgrid > *, .nx-cardgrid > * { min-width: 0; }
.nx-statstrip .v.ok { color: var(--ok-fg); } .nx-statstrip .v.warn { color: var(--warn-fg); }
.nx-statstrip .v.danger { color: var(--danger-fg); } .nx-statstrip .v.info { color: var(--info-fg); }
.nx-statstrip .v.dim { color: var(--muted-foreground); opacity: .6; }
.nx-toolbar form { display: contents; }
@media (max-width: 640px) { .nx-toolbar .nx-input, .nx-toolbar .nx-select { width: 100%; min-width: 0; } .nx-toolbar > *, .nx-toolbar form > * { flex: 1 1 100%; } .nx-toolbar .nx-btn { flex: 1 1 auto; } }
/* Header: at phone width the title must not be squeezed to nothing by actions. */
@media (max-width: 640px) { .nx-header h1 { font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-header-sub { display: none; } .nx-header > div { min-width: 0; flex: 1; } }
/* Header buttons with 3+ actions: labels collapse to icons on phones. */
@media (max-width: 640px) { .nx-header-actions .nx-btn .lbl { display: none; } .nx-header-actions .nx-btn { padding-inline: .5rem; } }
.nx-table .num.ok { color: var(--ok-fg); } .nx-table .num.danger { color: var(--danger-fg); } .nx-table .num.quiet { color: var(--muted-foreground); }
.nx-formsec.keep-border { border-bottom: 1px solid var(--border); }
.nx-btn-ghost.danger { color: var(--danger-fg); } .nx-btn-ghost.danger:hover { background: var(--danger-soft); border-color: var(--danger-border); }
@media (min-width: 1100px) { .nx-split.aside-left.aside-22 { grid-template-columns: 22rem minmax(0, 1fr); } }
.nx-savebar.card { border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .nx-timeline > li { flex-wrap: wrap; } .nx-timeline > li .d { flex-basis: 100%; white-space: normal; } }
/* Dark theme lightens --brand-strong, so the brand button needs dark text to stay legible. */

/* Phone header: icon buttons keep only their icon so the theme and sign-out
   controls never get pushed off-screen by a long action label. */
@media (max-width: 640px) {
    .nx-header-actions .nx-btn:has(svg) { font-size: 0; gap: 0; padding: .4rem; }
    .nx-header-actions .nx-btn:has(svg) svg { width: 1rem; height: 1rem; }
}
/* `.nx a { color: inherit }` outranks the button classes on link-buttons. */
.nx a.nx-btn-primary, .nx a.nx-btn-brand, .nx a.nx-btn-danger { color: #fff; }
.nx a.nx-btn-ghost { color: var(--foreground); }

/* Quiet notice for standing conditions (e.g. no credential configured). */
.nx-notice {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--card);
    font-size: var(--text-sm); color: var(--muted-foreground);
}
.nx-notice .nx-dot { width: .45rem; height: .45rem; }
.nx-notice a { color: var(--brand-fg); font-weight: 500; text-decoration: none; white-space: nowrap; }
.nx-notice a:hover { text-decoration: underline; }