/* ===================================================================
   NUH UI v3 — the design system
   -------------------------------------------------------------------
   Loaded on every page by includes/header.php when Site Settings ->
   Interface is "New". It comes after every component sheet (app.css,
   premium.css, unityhub.css, admin-shell.css…) and before a11y.css, so
   high-contrast mode still wins over it.

   What it does, in order:
     1. Tokens      one palette, type scale, radius, depth and spacing,
                    derived from the committee's brand colours (the
                    #ui-theme block header.php prints from nuh_theme()).
     2. Base        one light ground for the whole product; the dark
                    purple theme's decorative layers are retired.
     3. Shell       sidebar, rail, drawer, top bar, public header, menus,
                    tab bar, command palette, footer.
     4. Content     the generic components every page is built from —
                    page header, card, button, form, table, badge, flash,
                    stat tile, toolbar — restated once, so a page written
                    for the dark theme, the public theme or the console
                    now looks like the same product.
     5. States      focus, motion, high contrast, print.

   Every selector is scoped under body.ui3, so the Classic switch turns
   all of it off at once. The homepage (body.ui3-landing) keeps its own
   full-bleed design and only receives the shell.
   =================================================================== */


/* ===================================================================
   1. Tokens
   =================================================================== */
body.ui3 {
    /* Brand — from nuh_theme(); fallbacks are the "As designed" preset. */
    --ui-brand: var(--nuh-orange, #f47b20);
    --ui-brand-ink: var(--nuh-orange-ink, #c2530a);          /* AA with white text */
    --ui-brand-50: color-mix(in srgb, var(--ui-brand) 10%, #fff);
    --ui-brand-100: color-mix(in srgb, var(--ui-brand) 18%, #fff);
    --ui-primary: var(--nuh-blue, #1b56a4);
    --ui-primary-deep: var(--nuh-blue-deep, #14396e);
    --ui-primary-50: color-mix(in srgb, var(--ui-primary) 7%, #fff);
    --ui-primary-100: color-mix(in srgb, var(--ui-primary) 14%, #fff);
    --ui-nav-bg: var(--nuh-ground, #0c2140);

    /* Neutrals — cool, faintly blue, so the brand navy sits in them. */
    --ui-bg: #f4f6fa;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafc;
    --ui-surface-3: #eef2f7;
    --ui-line: #e2e8f0;
    --ui-line-strong: #cbd5e1;
    --ui-ink: #0f1c2e;
    --ui-ink-2: #334155;
    --ui-muted: #5b6b7f;                                      /* 5.4:1 on white */

    /* Status */
    --ui-ok: #15803d;      --ui-ok-bg: #ecfdf3;      --ui-ok-line: #abefc6;
    --ui-warn: #a15c07;    --ui-warn-bg: #fffaeb;    --ui-warn-line: #fedf89;
    --ui-bad: #b42318;     --ui-bad-bg: #fef3f2;     --ui-bad-line: #fecdca;
    --ui-info: var(--ui-primary); --ui-info-bg: var(--ui-primary-50); --ui-info-line: var(--ui-primary-100);

    /* Type */
    --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ui-font-head: var(--nuh-font-head, 'Poppins', 'Inter', sans-serif);

    /* Shape and depth */
    --ui-r-xs: 6px;
    --ui-r-sm: 8px;
    --ui-r: 12px;
    --ui-r-lg: 16px;
    --ui-r-btn: var(--nuh-btn-radius, 10px);
    --ui-sh-1: 0 1px 2px rgba(15, 28, 46, 0.05), 0 1px 3px rgba(15, 28, 46, 0.06);
    --ui-sh-2: 0 2px 4px rgba(15, 28, 46, 0.04), 0 6px 16px rgba(15, 28, 46, 0.07);
    --ui-sh-3: 0 4px 10px rgba(15, 28, 46, 0.06), 0 18px 40px rgba(15, 28, 46, 0.16);
    --ui-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 28%, transparent);

    /* Shell geometry */
    --ui-side-w: 272px;
    --ui-rail-w: 76px;
    --ui-top-h: 64px;
    --ui-tab-h: 64px;
    --ui-content-max: 1280px;
    --ui-gutter: clamp(16px, 2.6vw, 32px);

    --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ===================================================================
   2. Base
   =================================================================== */
body.ui3 {
    margin: 0;
    background: var(--ui-bg);
    background-image: none;
    color: var(--ui-ink);
    font-family: var(--ui-font);
    font-size: 1rem;
    line-height: 1.55;
    padding-bottom: 0;
    animation: none;          /* a transform on <body> would re-anchor every fixed element */
    color-scheme: light;      /* app.css declares dark: native widgets would paint black */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* The dark theme's fixed gradient wash, star field and city scene. */
body.ui3::before,
body.ui3::after,
body.ui3 > .kn-ambient { display: none !important; }

/* :where() keeps these at element weight, so any component class — the
   homepage's hero buttons, a card's own link colour — still wins. */
:where(body.ui3) :where(h1, h2, h3, h4) {
    font-family: var(--ui-font-head);
    color: var(--ui-ink);
    letter-spacing: -0.015em;
    line-height: 1.25;
}
:where(body.ui3) a { color: var(--ui-primary); }
:where(body.ui3) a:hover { color: var(--ui-primary-deep); }
body.ui3 ::selection { background: var(--ui-primary-100); color: inherit; }

body.ui3 * { scrollbar-width: thin; scrollbar-color: var(--ui-line-strong) transparent; }
body.ui3 ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui3 ::-webkit-scrollbar-track { background: transparent; }
body.ui3 ::-webkit-scrollbar-thumb {
    background: var(--ui-line-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

body.ui3 .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
body.ui3 .skip-link {
    position: fixed;
    top: 10px; left: 10px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-ink);
    color: #fff;
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.15s var(--ui-ease);
}
body.ui3 .skip-link:focus { transform: none; color: #fff; }

body.ui3 .icon { width: 1.25em; height: 1.25em; flex: none; }


/* ===================================================================
   3. Shell
   =================================================================== */

/* --- 3.1 Frame ---------------------------------------------------- */
body.ui3 .ui-frame {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.ui3-app .ui-frame {
    margin-left: var(--ui-side-w);
    transition: margin-left 0.22s var(--ui-ease);
}
html[data-ui-rail] body.ui3-app { --ui-side-w: var(--ui-rail-w); }

/* The drawer's switch: reachable, operable, invisible. */
body.ui3 .ui-switch {
    position: fixed;
    top: 0; left: 0;
    width: 1px; height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- 3.2 Sidebar -------------------------------------------------- */
body.ui3 .ui-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--ui-side-w);
    display: flex;
    flex-direction: column;
    background: var(--ui-nav-bg);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%);
    color: rgba(236, 242, 250, 0.78);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: width 0.22s var(--ui-ease), transform 0.26s var(--ui-ease), visibility 0.26s;
}
body.ui3 .ui-side--pub { display: none; }

body.ui3 .ui-side__head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--ui-top-h);
    padding: 0 12px 0 16px;
    flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.ui3 .ui-side .ui-brand { color: #fff; flex: 1; min-width: 0; }
body.ui3 .ui-side .ui-brand__name,
body.ui3 .ui-side .ui-brand__name * { color: #fff !important; }
body.ui3 .ui-side .ui-brand__name .brand-accent { color: var(--nuh-orange-soft, #ffab66) !important; }

body.ui3 .ui-side .ui-iconbtn { color: rgba(236, 242, 250, 0.72); }
body.ui3 .ui-side .ui-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
body.ui3 .ui-side .ui-side__close { display: none; }

/* Workspace switch */
body.ui3 .ui-ctx {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 14px 14px 4px;
    padding: 4px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.22);
    flex: none;
}
body.ui3 .ui-ctx__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border-radius: 8px;
    color: rgba(236, 242, 250, 0.7);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
body.ui3 .ui-ctx__opt .icon { width: 16px; height: 16px; }
body.ui3 .ui-ctx__opt:hover { color: #fff; }
body.ui3 .ui-ctx__opt.is-on {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Search trigger */
body.ui3 .ui-side__search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 14px 6px;
    padding: 0 10px 0 12px;
    min-height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(236, 242, 250, 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    flex: none;
}
body.ui3 .ui-side__search:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
body.ui3 .ui-side__search .icon { width: 18px; height: 18px; }
body.ui3 .ui-side__searchtext { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui3 .ui-side .ui-kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: rgba(236, 242, 250, 0.7); }

/* The menu */
body.ui3 .ui-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 10px 16px;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
body.ui3 .ui-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }

body.ui3 .ui-group { margin-top: 6px; }
body.ui3 .ui-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 8px 0 10px;
    border-radius: 8px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: rgba(200, 214, 232, 0.76);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
body.ui3 .ui-group__head::-webkit-details-marker { display: none; }
body.ui3 .ui-group__head::marker { content: ''; }
body.ui3 .ui-group__head:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
body.ui3 .ui-group__icon { display: none; width: 20px; height: 20px; }
body.ui3 .ui-group__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui3 .ui-group__caret { width: 14px; height: 14px; transition: transform 0.18s var(--ui-ease); opacity: 0.8; }
body.ui3 .ui-group:not([open]) .ui-group__caret { transform: rotate(-90deg); }
body.ui3 .ui-group.is-here > .ui-group__head { color: rgba(236, 242, 250, 0.9); }
body.ui3 .ui-group__panel { display: grid; gap: 2px; padding: 2px 0 6px; }
body.ui3 .ui-group__flytitle { display: none; }
/* A closed group still shows that something inside is waiting. */
body.ui3 .ui-group[open] > .ui-group__head .ui-count--dot { display: none; }

body.ui3 .ui-nav__heading {
    margin: 16px 10px 6px;
    color: rgba(200, 214, 232, 0.76);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.ui3 .ui-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 10px 0 12px;
    border-radius: 9px;
    color: rgba(236, 242, 250, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
body.ui3 .ui-link__icon { width: 19px; height: 19px; opacity: 0.85; }
body.ui3 .ui-link__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui3 .ui-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.ui3 .ui-link.is-current {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
}
body.ui3 .ui-link.is-current::before {
    content: '';
    position: absolute;
    left: -10px; top: 9px; bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ui-brand);
}
body.ui3 .ui-link.is-current .ui-link__icon { opacity: 1; color: var(--nuh-orange-soft, #ffab66); }

/* Counts: sidebar rows, group heads, the bell */
body.ui3 .ui-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ui-brand);
    color: #1a0c00;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
body.ui3 .ui-count--float {
    position: absolute;
    top: 2px; right: 0;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    font-size: 0.625rem;
    box-shadow: 0 0 0 2px var(--ui-surface);
}

/* Who is signed in */
body.ui3 .ui-side__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex: none;
}
body.ui3 .ui-side--pub .ui-side__foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
body.ui3 .ui-who {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 6px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}
body.ui3 .ui-who:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.ui3 .ui-who__text { display: grid; min-width: 0; line-height: 1.25; }
body.ui3 .ui-who__text strong { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui3 .ui-who__text small { font-size: 0.75rem; color: rgba(200, 214, 232, 0.76); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.ui3 .ui-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-ink));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
body.ui3 .ui-avatar--lg { width: 42px; height: 42px; font-size: 0.9375rem; }

/* --- 3.3 Rail (desktop, collapsed) -------------------------------- */
@media (min-width: 1024px) {
    html[data-ui-rail] body.ui3-app .ui-side .ui-brand__name,
    html[data-ui-rail] body.ui3-app .ui-side__searchtext,
    html[data-ui-rail] body.ui3-app .ui-side .ui-kbd,
    html[data-ui-rail] body.ui3-app .ui-ctx__opt span,
    html[data-ui-rail] body.ui3-app .ui-group__label,
    html[data-ui-rail] body.ui3-app .ui-group__caret,
    html[data-ui-rail] body.ui3-app .ui-who__text { display: none; }

    html[data-ui-rail] body.ui3-app .ui-side__head { flex-direction: column; justify-content: center; height: auto; min-height: var(--ui-top-h); padding: 10px 0; gap: 6px; }
    html[data-ui-rail] body.ui3-app .ui-side .ui-brand { flex: none; }
    html[data-ui-rail] body.ui3-app .ui-railbtn .icon { transform: scaleX(-1); }
    html[data-ui-rail] body.ui3-app .ui-ctx { grid-template-columns: 1fr; margin: 10px 12px 2px; }
    html[data-ui-rail] body.ui3-app .ui-side__search { justify-content: center; margin: 10px 12px 4px; padding: 0; }
    html[data-ui-rail] body.ui3-app .ui-nav { overflow: visible; padding: 6px 12px; }
    html[data-ui-rail] body.ui3-app .ui-group { position: relative; margin-top: 4px; }
    html[data-ui-rail] body.ui3-app .ui-group__head {
        justify-content: center;
        min-height: 44px;
        padding: 0;
        color: rgba(236, 242, 250, 0.78);
    }
    html[data-ui-rail] body.ui3-app .ui-group__icon { display: block; }
    html[data-ui-rail] body.ui3-app .ui-group.is-here > .ui-group__head { background: rgba(255, 255, 255, 0.12); color: #fff; }
    html[data-ui-rail] body.ui3-app .ui-group .ui-count--dot {
        display: inline-flex;
        position: absolute; top: 3px; right: 3px;
        min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.625rem;
    }
    /* Each group becomes a flyout beside the rail. */
    html[data-ui-rail] body.ui3-app .ui-group__panel {
        display: none;
        position: absolute;
        left: calc(100% + 10px);
        top: -6px;
        z-index: 80;
        min-width: 232px;
        padding: 8px;
        border-radius: 12px;
        background: var(--ui-nav-bg);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: var(--ui-sh-3);
    }
    html[data-ui-rail] body.ui3-app .ui-group__panel::before {
        content: '';
        position: absolute;
        left: -12px; top: 0; bottom: 0;
        width: 12px;           /* a bridge, so the pointer can cross the gap */
    }
    html[data-ui-rail] body.ui3-app .ui-group:hover > .ui-group__panel,
    html[data-ui-rail] body.ui3-app .ui-group:focus-within > .ui-group__panel { display: grid; }
    html[data-ui-rail] body.ui3-app .ui-group__flytitle {
        display: block;
        margin: 2px 8px 6px;
        color: rgba(200, 214, 232, 0.76);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
    html[data-ui-rail] body.ui3-app .ui-link.is-current::before { left: -8px; }
    html[data-ui-rail] body.ui3-app .ui-side__foot { flex-direction: column; padding: 10px 0; }
    html[data-ui-rail] body.ui3-app .ui-who { flex: none; }
}

/* --- 3.4 Drawer (below 1024px) ------------------------------------ */
body.ui3 .ui-scrim { display: none; }
@media (max-width: 1023.98px) {
    body.ui3-app .ui-frame { margin-left: 0; }
    body.ui3 .ui-side,
    body.ui3 .ui-side--pub {
        display: flex;
        width: min(88vw, 320px);
        transform: translateX(-102%);
        visibility: hidden;
        box-shadow: none;
    }
    body.ui3 .ui-side .ui-railbtn,
    body.ui3 .ui-side .ui-kbd { display: none; }
    body.ui3 .ui-side .ui-side__close { display: inline-grid; }
    body.ui3 .ui-switch:checked ~ .ui-side {
        transform: none;
        visibility: visible;
        box-shadow: 24px 0 60px rgba(4, 12, 26, 0.35);
    }
    body.ui3 .ui-switch:checked ~ .ui-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(8, 17, 32, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: ui-fade 0.2s ease-out;
    }
    html.ui-drawer-open { overflow: hidden; }
}
/* The switch has focus: show it on the visible menu button. */
body.ui3 .ui-switch:focus-visible ~ .ui-frame [data-ui-menu] {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- 3.5 Shared bits: brand, icon buttons, kbd, buttons ------------ */
body.ui3 .ui-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--ui-ink);
    text-decoration: none;
}
body.ui3 .ui-brand__mark,
body.ui3 .ui-brand__logo { width: 34px; height: 34px; flex: none; object-fit: contain; }
body.ui3 .ui-brand__words { display: grid; min-width: 0; line-height: 1.15; }
body.ui3 .ui-brand__name {
    font-family: var(--ui-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-primary-deep);
}
body.ui3 .ui-brand__name .brand-accent { color: var(--ui-brand-ink); }
body.ui3 .ui-brand__tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ui-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body.ui3 .ui-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui-ink-2);
    cursor: pointer;
    text-decoration: none;
    list-style: none;
    transition: background-color 0.15s, color 0.15s;
}
body.ui3 .ui-iconbtn::-webkit-details-marker { display: none; }
body.ui3 .ui-iconbtn .icon { width: 21px; height: 21px; }
body.ui3 .ui-iconbtn:hover,
body.ui3 .ui-iconbtn.is-current { background: var(--ui-surface-3); color: var(--ui-ink); }

body.ui3 .ui-kbd {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    border: 1px solid var(--ui-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font: 600 0.6875rem/1 var(--ui-font);
    white-space: nowrap;
}

body.ui3 .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ui-r-btn);
    font: 600 0.875rem/1 var(--ui-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
body.ui3 .ui-btn::-webkit-details-marker { display: none; }
body.ui3 .ui-btn .icon { width: 18px; height: 18px; }
body.ui3 .ui-btn--sm { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
body.ui3 .ui-btn--block { width: 100%; }
body.ui3 .ui-btn--brand { background: var(--ui-brand-ink); color: #fff; box-shadow: 0 1px 2px rgba(15, 28, 46, 0.12); }
body.ui3 .ui-btn--brand:hover { background: color-mix(in srgb, var(--ui-brand-ink) 86%, #000); color: #fff; }
body.ui3 .ui-btn--ghost { background: var(--ui-surface); border-color: var(--ui-line-strong); color: var(--ui-ink); }
body.ui3 .ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
body.ui3 .ui-side .ui-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.24); color: #fff; }

body.ui3 .ui-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 10px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: 500 0.9375rem var(--ui-font);
}
body.ui3 .ui-input:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-ring); }

/* --- 3.6 Top bar (signed in) -------------------------------------- */
body.ui3 .ui-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--ui-top-h);
    padding: 0 var(--ui-gutter);
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--ui-line);
}
body.ui3 .ui-top__menu,
body.ui3 .ui-top__brand { display: none; }
body.ui3 .ui-top { container: uitop / inline-size; }
@container uitop (max-width: 1060px) {
    body.ui3 .ui-account__name,
    body.ui3 .ui-loc__text { display: none; }
    body.ui3 .ui-loc__btn { width: 40px; padding: 0; }
}
@container uitop (max-width: 900px) {
    body.ui3 .ui-search { width: 40px; padding: 0; margin: 0; justify-content: center; border-color: transparent; background: transparent; }
    body.ui3 .ui-search__text,
    body.ui3 .ui-search .ui-kbd { display: none; }
}
@container uitop (max-width: 760px) {
    body.ui3 .ui-create__text { display: none; }
    body.ui3 .ui-create__btn { width: 40px; padding: 0; }
}

body.ui3 .ui-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    font-size: 0.875rem;
    color: var(--ui-muted);
    white-space: nowrap;
}
body.ui3 .ui-crumbs > span { overflow: hidden; text-overflow: ellipsis; }
body.ui3 .ui-crumbs__sep { width: 14px; height: 14px; opacity: 0.55; }
body.ui3 .ui-crumbs__here { color: var(--ui-ink); font-weight: 600; }

body.ui3 .ui-top__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: none;
}

body.ui3 .ui-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: clamp(220px, 22vw, 320px);
    min-height: 40px;
    padding: 0 8px 0 12px;
    margin-right: 4px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}
body.ui3 .ui-search:hover { border-color: var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-ink-2); }
body.ui3 .ui-search .icon { width: 18px; height: 18px; }
body.ui3 .ui-search__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

body.ui3 .ui-create__btn { padding: 0 14px 0 11px; }
body.ui3 .ui-loc__btn { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; }
body.ui3 .ui-loc__text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
}

body.ui3 .ui-account__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    color: var(--ui-ink);
    transition: background-color 0.15s;
}
body.ui3 .ui-account__btn::-webkit-details-marker { display: none; }
body.ui3 .ui-account__btn:hover { background: var(--ui-surface-3); }
body.ui3 .ui-account__name { font-size: 0.875rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui3 .ui-account__caret { width: 16px; height: 16px; color: var(--ui-muted); }

/* --- 3.7 Menus (dropdowns built on <details>) --------------------- */
body.ui3 .ui-menu { position: relative; }
body.ui3 .ui-menu > summary { list-style: none; }
body.ui3 .ui-menu > summary::-webkit-details-marker { display: none; }
body.ui3 .ui-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 70;
    min-width: 248px;
    padding: 6px;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-surface);
    box-shadow: var(--ui-sh-3);
    color: var(--ui-ink);
    animation: ui-pop 0.16s var(--ui-ease);
}
body.ui3 .ui-menu__panel--end { left: auto; right: 0; }
body.ui3 .ui-menu__title {
    display: block;
    margin: 6px 10px 8px;
    color: var(--ui-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.ui3 .ui-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--ui-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}
body.ui3 .ui-menu__item .icon { width: 18px; height: 18px; color: var(--ui-muted); }
body.ui3 .ui-menu__item:hover { background: var(--ui-surface-3); color: var(--ui-ink); }
body.ui3 .ui-menu__item:hover .icon { color: var(--ui-primary); }
body.ui3 .ui-menu__item--quiet { color: var(--ui-ink-2); }
body.ui3 .ui-menu__sep { height: 1px; margin: 6px 4px; background: var(--ui-line); }
body.ui3 .ui-menu__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ui-line);
}
body.ui3 .ui-menu__who span { display: grid; min-width: 0; line-height: 1.3; }
body.ui3 .ui-menu__who strong { font-size: 0.9375rem; }
body.ui3 .ui-menu__who small { color: var(--ui-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
body.ui3 .ui-menu__hint { margin: 8px 2px 10px; color: var(--ui-muted); font-size: 0.8125rem; line-height: 1.45; }
body.ui3 .ui-menu__row { display: flex; gap: 8px; }
body.ui3 .ui-loc__panel { width: 290px; padding: 14px; }
body.ui3 .ui-loc__panel .ui-menu__title { margin: 0 0 8px; }

/* --- 3.8 Public header (signed out) ------------------------------- */
body.ui3 .ui-pubbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
    padding: 0 clamp(16px, 3.2vw, 40px);
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--ui-line);
}
body.ui3 .ui-pubbar .ui-brand__mark,
body.ui3 .ui-pubbar .ui-brand__logo { width: 40px; height: 40px; }
body.ui3 .ui-pubbar .ui-brand__name { font-size: 1.1875rem; }

body.ui3 .ui-pubnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 auto;
}
body.ui3 .ui-pubnav > .c-prio,
body.ui3 .ui-pubnav > .c-prio-more { flex: none; }
body.ui3 .ui-pubnav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--ui-ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
body.ui3 .ui-pubnav__link:hover,
body.ui3 .ui-pubnav__group[open] > .ui-pubnav__link { background: var(--ui-surface-3); color: var(--ui-ink); }
body.ui3 .ui-pubnav__link.is-current {
    color: color-mix(in srgb, var(--ui-brand-ink) 78%, #000);   /* AA on the tinted pill */
    background: var(--ui-brand-50);
}
body.ui3 .ui-pubnav__caret { width: 16px; height: 16px; transition: transform 0.18s var(--ui-ease); }
body.ui3 .ui-pubnav__group[open] .ui-pubnav__caret { transform: rotate(180deg); }

body.ui3 .ui-mega {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 520px;
    padding: 10px;
    left: 50%;
    translate: -50% 0;
}
body.ui3 .ui-mega:has(> :only-child),
body.ui3 .ui-mega:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; width: 320px; }
body.ui3 .ui-mega__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    color: var(--ui-ink);
    text-decoration: none;
}
body.ui3 .ui-mega__item:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
body.ui3 .ui-mega__icon {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--ui-brand-50);
    color: var(--ui-brand-ink);
}
body.ui3 .ui-mega__icon .icon { width: 20px; height: 20px; }
body.ui3 .ui-mega__item:hover .ui-mega__icon { background: var(--ui-brand-ink); color: #fff; }
body.ui3 .ui-mega__text { display: grid; gap: 2px; line-height: 1.3; }
body.ui3 .ui-mega__text strong { font-size: 0.9375rem; font-weight: 600; }
body.ui3 .ui-mega__text small { color: var(--ui-muted); font-size: 0.8125rem; }

body.ui3 .ui-pubbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
body.ui3 .ui-pubbar .ui-top__menu { display: none; }

/* --- 3.8b Section tabs ---------------------------------------------
   Under the top bar on every page of a section (ui_section_tabs()). One
   row, always: components.js moves tabs that do not fit into "More". */
body.ui3 .ui-subnav {
    position: sticky;
    top: var(--ui-top-h);
    z-index: 35;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    border-bottom: 1px solid var(--ui-line);
}
body.ui3-pub .ui-subnav { top: 72px; }
body.ui3 .ui-subnav__inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    max-width: calc(var(--ui-content-max) + 2 * var(--ui-gutter));
    margin: 0 auto;
    padding: 0 var(--ui-gutter);
}
body.ui3 .ui-subnav__inner > .c-prio,
body.ui3 .ui-subnav__inner > .c-prio-more { flex: none; }
body.ui3 .ui-subnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    color: var(--ui-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
body.ui3 .ui-subnav__link::-webkit-details-marker { display: none; }
body.ui3 .ui-subnav__link .icon { width: 18px; height: 18px; }
body.ui3 .ui-subnav__link:hover { color: var(--ui-ink); }
body.ui3 .ui-subnav__link.is-current { color: var(--ui-ink); }
body.ui3 .ui-subnav__link.is-current::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ui-brand);
}
body.ui3 .ui-subnav .ui-menu__panel { top: calc(100% + 4px); }

/* --- 3.9 Phone tab bar ------------------------------------------- */
body.ui3 .ui-tabbar { display: none; }

/* --- 3.10 Command palette ----------------------------------------- */
body.ui3 .ui-pal[hidden] { display: none; }
body.ui3 .ui-pal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}
body.ui3 .ui-pal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 17, 32, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: ui-fade 0.16s ease-out;
}
body.ui3 .ui-pal__box {
    position: relative;
    width: min(640px, 100%);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow: 0 30px 80px rgba(4, 12, 26, 0.35), 0 0 0 1px rgba(15, 28, 46, 0.06);
    overflow: hidden;
    animation: ui-pop 0.18s var(--ui-ease);
}
body.ui3 .ui-pal__field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ui-line);
}
body.ui3 .ui-pal__field > .icon { width: 22px; height: 22px; color: var(--ui-muted); }
body.ui3 .ui-pal__field input {
    flex: 1;
    min-width: 0;
    height: 58px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ui-ink);
    font: 500 1.0625rem var(--ui-font);
    box-shadow: none;
}
body.ui3 .ui-pal__list {
    margin: 0;
    padding: 8px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.ui3 .ui-pal__sec {
    margin: 8px 10px 6px;
    color: var(--ui-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.ui3 .ui-pal__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    color: var(--ui-ink);
    cursor: pointer;
}
body.ui3 .ui-pal__ico {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 9px;
    background: var(--ui-surface-3);
    color: var(--ui-ink-2);
}
body.ui3 .ui-pal__ico .icon { width: 18px; height: 18px; }
body.ui3 .ui-pal__txt { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
body.ui3 .ui-pal__txt strong { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui3 .ui-pal__txt small { color: var(--ui-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui3 .ui-pal__txt mark { background: none; color: var(--ui-brand-ink); font-weight: 700; }
body.ui3 .ui-pal__grp { color: var(--ui-muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
body.ui3 .ui-pal__opt[aria-selected="true"] { background: var(--ui-primary-50); box-shadow: inset 0 0 0 1px var(--ui-primary-100); }
body.ui3 .ui-pal__opt[aria-selected="true"] .ui-pal__ico { background: var(--ui-primary); color: #fff; }
body.ui3 .ui-pal__empty { padding: 28px 12px; text-align: center; color: var(--ui-muted); font-size: 0.9375rem; }
body.ui3 .ui-pal__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--ui-line);
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.75rem;
}
body.ui3 .ui-pal__foot .ui-kbd + .ui-kbd { margin-left: -2px; }
body.ui3 .ui-pal__foot .ui-kbd:not(:first-child) { margin-left: 10px; }
body.ui3 .ui-pal__foot .ui-kbd + .ui-kbd:nth-child(2) { margin-left: 2px; }

/* --- 3.11 Footer -------------------------------------------------- */
body.ui3 .ui-foot--app {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: auto;
    padding: 18px var(--ui-gutter);
    border-top: 1px solid var(--ui-line);
    color: var(--ui-muted);
    font-size: 0.8125rem;
}
body.ui3 .ui-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; flex: 1; }
body.ui3 .ui-foot--app a { color: var(--ui-ink-2); text-decoration: none; }
body.ui3 .ui-foot--app a:hover { color: var(--ui-primary); }
body.ui3 .ui-foot__heart { color: #e11d48; }

body.ui3 .ui-foot--pub {
    margin-top: auto;
    background: var(--ui-nav-bg);
    color: rgba(226, 234, 245, 0.74);
    font-size: 0.9375rem;
}
body.ui3 .ui-foot__grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: 36px 32px;
    max-width: var(--ui-content-max);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) var(--ui-gutter) 32px;
}
body.ui3 .ui-foot__brand p { margin: 14px 0 18px; max-width: 34ch; line-height: 1.6; }
body.ui3 .ui-brand--invert .ui-brand__name,
body.ui3 .ui-brand--invert .ui-brand__name * { color: #fff; }
body.ui3 .ui-brand--invert .ui-brand__name .brand-accent { color: var(--nuh-orange-soft, #ffab66); }
body.ui3 .ui-foot__social { display: flex; gap: 8px; }
body.ui3 .ui-foot__social a {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
body.ui3 .ui-foot__social a:hover { background: var(--ui-brand-ink); color: #fff; }
body.ui3 .ui-foot__h {
    margin: 4px 0 14px;
    color: #fff;
    font-family: var(--ui-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.ui3 .ui-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.ui3 .ui-foot__col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 234, 245, 0.8);
    text-decoration: none;
}
body.ui3 .ui-foot__col a:hover { color: #fff; }
body.ui3 .ui-foot__col p { margin: 0; line-height: 1.6; }
body.ui3 .ui-foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    max-width: var(--ui-content-max);
    margin: 0 auto;
    padding: 18px var(--ui-gutter) 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 0.8125rem;
}
body.ui3 .ui-foot__base [data-a11y-bar] { margin-left: auto; }
body.ui3 .ui-foot--app [data-a11y-bar] { margin-left: auto; }
body.ui3 .ui-foot--pub .a11y-btn { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

/* --- 3.12 Responsive shell ---------------------------------------- */
@media (max-width: 1279.98px) {
    body.ui3 .ui-account__name,
    body.ui3 .ui-loc__text { display: none; }
    body.ui3 .ui-loc__btn { width: 40px; padding: 0; }
    body.ui3 .ui-account__btn { padding-right: 6px; }
}
@media (max-width: 1199.98px) {
    body.ui3 .ui-pubnav__link { padding: 0 9px; font-size: 0.875rem; }
    body.ui3 .ui-pubbar .ui-brand__tag { display: none; }
}
@media (max-width: 1023.98px) {
    body.ui3 .ui-top__menu { display: inline-grid; }
    body.ui3 .ui-top__brand { display: inline-flex; }
    body.ui3 .ui-top__brand .ui-brand__mark,
    body.ui3 .ui-top__brand .ui-brand__logo { width: 30px; height: 30px; }
    body.ui3 .ui-crumbs { display: none; }
    body.ui3 .ui-search { width: 40px; padding: 0; margin: 0; justify-content: center; border-color: transparent; background: transparent; }
    body.ui3 .ui-search__text,
    body.ui3 .ui-search .ui-kbd { display: none; }
    body.ui3 .ui-search .icon { width: 21px; height: 21px; }
    body.ui3 .ui-create__text { display: none; }
    body.ui3 .ui-create__btn { width: 40px; padding: 0; }

    body.ui3 .ui-pubbar { height: 64px; gap: 12px; }
    body.ui3 .ui-pubbar .ui-brand__words { min-width: 0; }
    body.ui3 .ui-pubbar .ui-brand__mark,
    body.ui3 .ui-pubbar .ui-brand__logo { width: 34px; height: 34px; }
}
@media (max-width: 699.98px) {
    body.ui3 .ui-pubnav,
    body.ui3 .ui-pubbar__login { display: none; }
    body.ui3 .ui-pubbar .ui-brand { margin-right: auto; }
    body.ui3 .ui-pubbar .ui-top__menu { display: inline-grid; }
}
@media (max-width: 767.98px) {
    body.ui3 { --ui-top-h: 58px; padding-bottom: calc(var(--ui-tab-h) + env(safe-area-inset-bottom, 0px)); }
    body.ui3 .ui-top { gap: 4px; padding: 0 8px 0 4px; }
    body.ui3 .ui-top__brand { margin-right: auto; }
    body.ui3 .ui-top__brand .ui-brand__name { font-size: 1rem; }
    body.ui3 .ui-top__actions { gap: 0; }
    body.ui3 .ui-create { display: none; }     /* the tab bar's "+" is the create button here */
    body.ui3 .ui-loc { display: none; }
    body.ui3 .ui-account__caret { display: none; }
    body.ui3 .ui-account__btn { padding: 3px; }
    body.ui3 .ui-pubbar__join { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; }
    body.ui3 .ui-pubbar .ui-brand__name { font-size: 1.0625rem; }
    body.ui3 .ui-pubbar .ui-loc { display: none; }

    body.ui3 .ui-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        height: calc(var(--ui-tab-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Opaque, and deliberately no backdrop-filter: a filter would make
           the bar the containing block for the Create sheet and its dimmed
           backdrop, which are position:fixed to the viewport. */
        background: var(--ui-surface);
        border-top: 1px solid var(--ui-line);
        box-shadow: 0 -6px 24px rgba(15, 28, 46, 0.06);
    }
    body.ui3 .ui-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--ui-muted);
        font-size: 0.6875rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body.ui3 .ui-tab .icon { width: 23px; height: 23px; }
    body.ui3 .ui-tab.is-current { color: var(--ui-primary); }
    body.ui3 .ui-tab.is-current::before {
        content: '';
        position: absolute;
        top: 0;
        width: 28px; height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--ui-primary);
    }
    body.ui3 .ui-fab { display: flex; justify-content: center; }
    body.ui3 .ui-fab__btn {
        display: grid;
        place-items: center;
        width: 54px; height: 54px;
        margin-top: -18px;
        border-radius: 999px;
        background: linear-gradient(145deg, var(--ui-brand), var(--ui-brand-ink));
        color: #fff;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-brand-ink) 45%, transparent), 0 0 0 4px var(--ui-surface);
        list-style: none;
        cursor: pointer;
        transition: transform 0.2s var(--ui-ease);
    }
    body.ui3 .ui-fab__btn::-webkit-details-marker { display: none; }
    body.ui3 .ui-fab__glyph { width: 26px; height: 26px; stroke-width: 2.2; transition: transform 0.2s var(--ui-ease); }
    body.ui3 .ui-fab[open] .ui-fab__glyph { transform: rotate(45deg); }
    body.ui3 .ui-fab[open]::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(8, 17, 32, 0.45);
        animation: ui-fade 0.18s ease-out;
    }
    body.ui3 .ui-fab__sheet {
        position: fixed;
        left: 10px; right: 10px;
        bottom: calc(var(--ui-tab-h) + env(safe-area-inset-bottom, 0px) + 10px);
        padding: 8px;
        border-radius: 18px;
        background: var(--ui-surface);
        box-shadow: var(--ui-sh-3);
        animation: ui-rise 0.2s var(--ui-ease);
    }
    body.ui3 .ui-fab__head { margin: 8px 10px 6px; color: var(--ui-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    body.ui3 .ui-fab__act {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 12px;
        color: var(--ui-ink);
        font-weight: 600;
        text-decoration: none;
    }
    body.ui3 .ui-fab__act:hover { background: var(--ui-surface-3); }
    body.ui3 .ui-fab__ico {
        display: inline-grid;
        place-items: center;
        width: 36px; height: 36px;
        border-radius: 10px;
        background: var(--ui-brand-50);
        color: var(--ui-brand-ink);
    }
    body.ui3 .ui-fab__ico .icon { width: 19px; height: 19px; }
    body.ui3 .ui-fab__act > span:nth-child(2) { flex: 1; }
    body.ui3 .ui-fab__go { width: 16px; height: 16px; color: var(--ui-muted); }

    body.ui3 .ui-subnav { position: static; }
    /* Filter chips in the Opportunities area scroll sideways rather than
       stacking four rows deep above the results. */
    body.ui3.has-subnav:not(.ui3-landing) .page .chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }
    body.ui3.has-subnav:not(.ui3-landing) .page .chip-row > * { flex: none; }
    body.ui3 .ui-subnav__link { min-height: 44px; padding: 0 10px; }
    body.ui3:not(.ui3-landing) .page .table-scroll > table { min-width: 620px; }
    body.ui3:not(.ui3-landing) .page .table-scroll { -webkit-overflow-scrolling: touch; }

    body.ui3 .ui-foot--app { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px var(--ui-gutter) 24px; }
    body.ui3 .ui-foot__links { gap: 6px 16px; }
    body.ui3 .ui-foot--app [data-a11y-bar] { margin-left: 0; }
    body.ui3 .ui-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    body.ui3 .ui-foot__brand { grid-column: 1 / -1; }
    body.ui3 .ui-pal { padding-top: 8px; }
    body.ui3 .ui-pal__box { max-height: calc(100dvh - 16px); }
    body.ui3 .ui-pal__foot { display: none; }
}
@media (max-width: 440px) {
    body.ui3 .ui-pubbar .ui-iconbtn[data-ui-palette] { display: none; }   /* the drawer has search */
}
@media (max-width: 380px) {
    body.ui3 .ui-top__brand .ui-brand__name { display: none; }
    body.ui3 .ui-pubbar .ui-brand__name { font-size: 0.9375rem; }
}


/* ===================================================================
   4. Content
   -------------------------------------------------------------------
   Scoped to `body.ui3:not(.ui3-landing) .page` — every page except the
   homepage — and written against the class names the pages actually use
   (counted across the tree: .card 356, .btn 273, .nuh-btn 195,
   .form-group 411, .flash 71, .table-scroll 56, .dashboard-header 52 …).
   =================================================================== */

/* --- 4.1 The content column -------------------------------------- */
body.ui3 .page {
    flex: 1 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    background: none;
}
body.ui3:not(.ui3-landing) .page {
    max-width: calc(var(--ui-content-max) + 2 * var(--ui-gutter));
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) var(--ui-gutter) clamp(40px, 5vw, 64px);
}
body.ui3 .page:focus { outline: none; }
/* Section wrappers written for a full-bleed public page become plain
   blocks inside the column: the column already sets the measure. */
body.ui3:not(.ui3-landing) .page .nuh-section { padding: 0; background: none; }
body.ui3:not(.ui3-landing) .page .nuh-section + .nuh-section { margin-top: 28px; }
body.ui3:not(.ui3-landing) .page .nuh-wrap {
    width: auto;
    max-width: none !important;
    margin-inline: 0;
    padding-inline: 0 !important;
}
body.ui3:not(.ui3-landing) .page > .nuh-wrap:first-child { padding-top: 0 !important; }

/* --- 4.2 Page titles ---------------------------------------------- */
body.ui3:not(.ui3-landing) .page > h1,
body.ui3:not(.ui3-landing) .page h1.nuh-h2,
body.ui3:not(.ui3-landing) .page .nuh-section:first-child .nuh-h2:first-child {
    margin: 0 0 6px;
    background: none;
    color: var(--ui-ink);
    -webkit-text-fill-color: currentColor;
    font-family: var(--ui-font-head);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: left !important;
    text-shadow: none;
    filter: none;
}
body.ui3:not(.ui3-landing) .page > h1::after,
body.ui3:not(.ui3-landing) .page h1.nuh-h2::after { content: none; }
body.ui3:not(.ui3-landing) .page .nuh-h2 { color: var(--ui-ink); text-align: left; }
body.ui3:not(.ui3-landing) .page .nuh-sub {
    margin: 0 0 22px !important;
    max-width: 72ch;
    color: var(--ui-muted);
    font-size: 1rem;
    text-align: left !important;
}
body.ui3:not(.ui3-landing) .page > h1 + p { color: var(--ui-muted); }

body.ui3:not(.ui3-landing) .page .dashboard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    background: none;
    box-shadow: none;
}
body.ui3:not(.ui3-landing) .page .dashboard-header::before,
body.ui3:not(.ui3-landing) .page .dashboard-header::after { content: none; }
body.ui3:not(.ui3-landing) .page .dashboard-header .icon-badge {
    display: inline-grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: 14px;
    background: var(--ui-primary-50);
    border: 1px solid var(--ui-primary-100);
    color: var(--ui-primary);
    box-shadow: none;
}
body.ui3:not(.ui3-landing) .page .dashboard-header .icon-badge .icon { width: 24px; height: 24px; }
body.ui3:not(.ui3-landing) .page .dashboard-header h1 {
    margin: 0;
    color: var(--ui-ink);
    -webkit-text-fill-color: currentColor;
    background: none;
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
    letter-spacing: -0.02em;
}
body.ui3:not(.ui3-landing) .page .dashboard-header p { margin: 4px 0 0; color: var(--ui-muted); font-size: 0.9375rem; }

body.ui3:not(.ui3-landing) .page h2 { font-size: 1.25rem; font-weight: 700; color: var(--ui-ink); }
body.ui3:not(.ui3-landing) .page h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ui-ink); }
body.ui3:not(.ui3-landing) .page h2,
body.ui3:not(.ui3-landing) .page h3,
body.ui3:not(.ui3-landing) .page h4 { -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }

/* --- 4.3 Cards ---------------------------------------------------- */
body.ui3:not(.ui3-landing) .page .card,
body.ui3:not(.ui3-landing) .page .panel,
body.ui3:not(.ui3-landing) .page .hub-panel {
    position: relative;
    margin-bottom: 20px;
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid var(--ui-line);
    border-radius: var(--nuh-radius, var(--ui-r-lg));
    background: var(--ui-surface);
    background-image: none;
    color: var(--ui-ink);
    box-shadow: var(--ui-sh-1);
    backdrop-filter: none;
    transform: none;
}
body.ui3:not(.ui3-landing) .page .card::before,
body.ui3:not(.ui3-landing) .page .card::after,
body.ui3:not(.ui3-landing) .page .panel::before,
body.ui3:not(.ui3-landing) .page .panel::after { content: none; }
body.ui3:not(.ui3-landing) .page a.card:hover,
body.ui3:not(.ui3-landing) .page .card--link:hover {
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-sh-2);
}
body.ui3:not(.ui3-landing) .page .card > h2:first-child,
body.ui3:not(.ui3-landing) .page .card > h3:first-child { margin-top: 0; }
body.ui3:not(.ui3-landing) .page .card h2,
body.ui3:not(.ui3-landing) .page .card h3,
body.ui3:not(.ui3-landing) .page .card h4 { color: var(--ui-ink); text-shadow: none; }
/* The dark theme hung a glowing gem and a rule off every card heading. */
body.ui3:not(.ui3-landing) .page .card :is(h2, h3, h4)::before,
body.ui3:not(.ui3-landing) .page .card :is(h2, h3, h4)::after { content: none; }
/* Links in cards are the brand blue — except links drawn as buttons, which keep their own colours. */
body.ui3:not(.ui3-landing) .page .card a:not(.btn):not(.nuh-btn):not([class*="btn"]) { color: var(--ui-primary); }
body.ui3:not(.ui3-landing) .page .card p { color: var(--ui-ink-2); }
body.ui3:not(.ui3-landing) .page .card .muted,
body.ui3:not(.ui3-landing) .page .cell-sub,
body.ui3:not(.ui3-landing) .page .field-hint,
body.ui3:not(.ui3-landing) .page .hint,
body.ui3:not(.ui3-landing) .page small { color: var(--ui-muted); }

/* Cards that open with a coloured band (sign in, change password) keep
   light text on it — the ink colour above is for the white body. */
body.ui3:not(.ui3-landing) .page .auth-hero p,
body.ui3:not(.ui3-landing) .page .auth-hero-content p { color: rgba(255, 255, 255, 0.88); }
body.ui3:not(.ui3-landing) .page .auth-hero h1,
body.ui3:not(.ui3-landing) .page .auth-hero h2 { color: #fff; }

/* --- 4.4 Buttons -------------------------------------------------- */
body.ui3:not(.ui3-landing) .page .btn,
body.ui3:not(.ui3-landing) .page .nuh-btn,
body.ui3:not(.ui3-landing) .page button[type="submit"]:not([class]),
body.ui3:not(.ui3-landing) .page input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ui-r-btn);
    background: var(--ui-primary);
    background-image: none;
    color: #fff;
    font: 600 0.875rem/1.2 var(--ui-font);
    letter-spacing: 0;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 28, 46, 0.12);
    transform: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
body.ui3:not(.ui3-landing) .page .btn::before,
body.ui3:not(.ui3-landing) .page .btn::after,
body.ui3:not(.ui3-landing) .page .nuh-btn::before,
body.ui3:not(.ui3-landing) .page .nuh-btn::after { content: none; }
body.ui3:not(.ui3-landing) .page .btn:hover,
body.ui3:not(.ui3-landing) .page .nuh-btn:hover,
body.ui3:not(.ui3-landing) .page button[type="submit"]:not([class]):hover {
    background: var(--ui-primary-deep);
    color: #fff;
    transform: none;
    filter: none;
}
/* Brand — the orange call to action */
body.ui3:not(.ui3-landing) .page .nuh-btn--orange,
body.ui3:not(.ui3-landing) .page .btn-accent,
body.ui3:not(.ui3-landing) .page .btn-primary {
    background: var(--ui-brand-ink);
    color: #fff;
}
body.ui3:not(.ui3-landing) .page .nuh-btn--orange:hover,
body.ui3:not(.ui3-landing) .page .btn-accent:hover,
body.ui3:not(.ui3-landing) .page .btn-primary:hover { background: color-mix(in srgb, var(--ui-brand-ink) 86%, #000); color: #fff; }
/* Secondary and ghost */
body.ui3:not(.ui3-landing) .page .btn-secondary,
body.ui3:not(.ui3-landing) .page .nuh-btn--ghost,
body.ui3:not(.ui3-landing) .page .btn-outline,
body.ui3:not(.ui3-landing) .page .btn-ghost {
    background: var(--ui-surface);
    border-color: var(--ui-line-strong);
    color: var(--ui-ink);
    box-shadow: var(--ui-sh-1);
}
body.ui3:not(.ui3-landing) .page .btn-secondary:hover,
body.ui3:not(.ui3-landing) .page .nuh-btn--ghost:hover,
body.ui3:not(.ui3-landing) .page .btn-outline:hover,
body.ui3:not(.ui3-landing) .page .btn-ghost:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-ink-2);
    color: var(--ui-ink);
}
body.ui3:not(.ui3-landing) .page .btn-danger {
    background: var(--ui-bad);
    color: #fff;
}
body.ui3:not(.ui3-landing) .page .btn-danger:hover { background: color-mix(in srgb, var(--ui-bad) 84%, #000); color: #fff; }
body.ui3:not(.ui3-landing) .page .btn-sm,
body.ui3:not(.ui3-landing) .page .nuh-btn--sm { min-height: 34px; padding: 0 12px; font-size: 0.8125rem; }
body.ui3:not(.ui3-landing) .page .btn[disabled],
body.ui3:not(.ui3-landing) .page .nuh-btn[disabled],
body.ui3:not(.ui3-landing) .page .btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
body.ui3:not(.ui3-landing) .page .btn .icon,
body.ui3:not(.ui3-landing) .page .nuh-btn .icon { width: 18px; height: 18px; }

/* --- 4.5 Forms ---------------------------------------------------- */
body.ui3:not(.ui3-landing) .page .form-group { margin-bottom: 18px; }
body.ui3:not(.ui3-landing) .page label,
body.ui3:not(.ui3-landing) .page .form-group > label {
    color: var(--ui-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
body.ui3:not(.ui3-landing) .page .form-group > label { display: block; margin-bottom: 6px; }
body.ui3:not(.ui3-landing) .page input[type="text"],
body.ui3:not(.ui3-landing) .page input[type="email"],
body.ui3:not(.ui3-landing) .page input[type="password"],
body.ui3:not(.ui3-landing) .page input[type="search"],
body.ui3:not(.ui3-landing) .page input[type="tel"],
body.ui3:not(.ui3-landing) .page input[type="url"],
body.ui3:not(.ui3-landing) .page input[type="number"],
body.ui3:not(.ui3-landing) .page input[type="date"],
body.ui3:not(.ui3-landing) .page input[type="datetime-local"],
body.ui3:not(.ui3-landing) .page input[type="time"],
body.ui3:not(.ui3-landing) .page input[type="month"],
body.ui3:not(.ui3-landing) .page input:not([type]),
body.ui3:not(.ui3-landing) .page select,
body.ui3:not(.ui3-landing) .page textarea {
    max-width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 10px;
    background: var(--ui-surface);
    background-image: none;
    color: var(--ui-ink);
    font: 500 0.9375rem/1.4 var(--ui-font);
    box-shadow: 0 1px 1px rgba(15, 28, 46, 0.03);
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.ui3:not(.ui3-landing) .page .list-filter input { padding-left: 40px; }
body.ui3:not(.ui3-landing) .page .list-filter .icon { left: 13px; color: var(--ui-muted); filter: none; }
body.ui3:not(.ui3-landing) .page select {
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}
body.ui3:not(.ui3-landing) .page select[multiple] { background-image: none; padding-right: 12px; }
body.ui3:not(.ui3-landing) .page textarea { min-height: 110px; resize: vertical; }
body.ui3:not(.ui3-landing) .page input::placeholder,
body.ui3:not(.ui3-landing) .page textarea::placeholder { color: #8a97a8; opacity: 1; }
body.ui3:not(.ui3-landing) .page input:hover,
body.ui3:not(.ui3-landing) .page select:hover,
body.ui3:not(.ui3-landing) .page textarea:hover { border-color: var(--ui-muted); }
body.ui3:not(.ui3-landing) .page input:focus,
body.ui3:not(.ui3-landing) .page select:focus,
body.ui3:not(.ui3-landing) .page textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-ring);
}
body.ui3:not(.ui3-landing) .page input[type="checkbox"],
body.ui3:not(.ui3-landing) .page input[type="radio"] { accent-color: var(--ui-primary); width: 17px; height: 17px; }
body.ui3:not(.ui3-landing) .page .field-hint { display: block; margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; }
body.ui3:not(.ui3-landing) .page fieldset:not(.c-step) { border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 16px 18px; }
body.ui3:not(.ui3-landing) .page fieldset:not(.c-step) > legend { padding: 0 6px; font-weight: 700; color: var(--ui-ink); }

/* --- 4.6 Tables --------------------------------------------------- */
body.ui3:not(.ui3-landing) .page .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    background: var(--ui-surface);
    box-shadow: none;
}
body.ui3:not(.ui3-landing) .page .card .table-scroll { box-shadow: none; }
body.ui3:not(.ui3-landing) .page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    color: var(--ui-ink);
    font-size: 0.875rem;
}
body.ui3:not(.ui3-landing) .page th {
    padding: 11px 14px;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-muted);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
body.ui3:not(.ui3-landing) .page td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-ink-2);
    vertical-align: middle;
    background: transparent;
}
body.ui3:not(.ui3-landing) .page tbody tr:last-child > td { border-bottom: 0; }
body.ui3:not(.ui3-landing) .page tbody tr { transition: background-color 0.12s; }
body.ui3:not(.ui3-landing) .page tbody tr:hover > td { background: var(--ui-surface-2); }
body.ui3:not(.ui3-landing) .page td a:not(.btn):not(.nuh-btn) { color: var(--ui-primary); font-weight: 600; }
body.ui3:not(.ui3-landing) .page .cell-sub { font-size: 0.8125rem; }
body.ui3:not(.ui3-landing) .page .cell-sub:not(td) { display: block; margin-top: 2px; }

/* --- 4.7 Badges and chips ----------------------------------------- */
body.ui3:not(.ui3-landing) .page .badge,
body.ui3:not(.ui3-landing) .page .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface-3);
    background-image: none;
    color: var(--ui-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none;
    white-space: nowrap;
}
body.ui3:not(.ui3-landing) .page .badge-active,
body.ui3:not(.ui3-landing) .page .badge-success,
body.ui3:not(.ui3-landing) .page .badge-approved,
body.ui3:not(.ui3-landing) .page .badge-paid { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok); }
body.ui3:not(.ui3-landing) .page .badge-pending,
body.ui3:not(.ui3-landing) .page .badge-warning,
body.ui3:not(.ui3-landing) .page .badge-draft { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn); }
body.ui3:not(.ui3-landing) .page .badge-rejected,
body.ui3:not(.ui3-landing) .page .badge-danger,
body.ui3:not(.ui3-landing) .page .badge-suspended,
body.ui3:not(.ui3-landing) .page .badge-cancelled { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); color: var(--ui-bad); }
body.ui3:not(.ui3-landing) .page .badge-gradient { background: var(--ui-primary-50); border-color: var(--ui-primary-100); color: var(--ui-primary); }

body.ui3:not(.ui3-landing) .page .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- 4.8 Flash messages ------------------------------------------- */
body.ui3:not(.ui3-landing) .page .flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--ui-info-line);
    border-left-width: 4px;
    border-radius: var(--ui-r);
    background: var(--ui-info-bg);
    color: var(--ui-ink);
    font-size: 0.9375rem;
    box-shadow: none;
}
body.ui3:not(.ui3-landing) .page .flash-success { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); border-left-color: var(--ui-ok); }
body.ui3:not(.ui3-landing) .page .flash-error { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); border-left-color: var(--ui-bad); }
body.ui3:not(.ui3-landing) .page .flash-warning,
body.ui3:not(.ui3-landing) .page .flash-warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); border-left-color: var(--ui-warn); }
/* The homepage keeps its own layout but still shows flashes in the system style. */
body.ui3.ui3-landing .page > .flash { margin: 16px var(--ui-gutter); border-radius: var(--ui-r); }

/* --- 4.9 Stat tiles ----------------------------------------------- */
body.ui3:not(.ui3-landing) .page .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
body.ui3:not(.ui3-landing) .page .stat-tile {
    position: relative;
    padding: 18px 20px;
    border: 1px solid var(--ui-line);
    border-radius: var(--nuh-radius, var(--ui-r-lg));
    background: var(--ui-surface);
    background-image: none;
    box-shadow: var(--ui-sh-1);
    color: var(--ui-ink);
    text-align: left;
    transform: none;
}
body.ui3:not(.ui3-landing) .page .stat-tile::before,
body.ui3:not(.ui3-landing) .page .stat-tile::after { content: none; }
body.ui3:not(.ui3-landing) .page .stat-tile .value {
    display: block;
    color: var(--ui-ink);
    -webkit-text-fill-color: currentColor;
    background: none;
    font-family: var(--ui-font-head);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
}
body.ui3:not(.ui3-landing) .page .stat-tile .label {
    display: block;
    margin-top: 4px;
    color: var(--ui-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- 4.10 Toolbars, filters, search rows -------------------------- */
body.ui3:not(.ui3-landing) .page .filter-bar,
body.ui3:not(.ui3-landing) .page .admin-toolbar,
body.ui3:not(.ui3-landing) .page .listing-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin: 0 0 18px;
}
body.ui3:not(.ui3-landing) .page .listing-search { align-items: center; }
body.ui3:not(.ui3-landing) .page .listing-search input[type="search"] { flex: 1 1 260px; }
body.ui3:not(.ui3-landing) .page .filter-bar-actions,
body.ui3:not(.ui3-landing) .page .admin-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Listing pages were composed centred for the public theme — the title in
   the middle, buttons, search and filter chips under it. In the column
   the title is left-aligned, so the rest follows it. The inline styles are
   the pages' own, which is why this needs !important to reach them. */
body.ui3:not(.ui3-landing) .page .nuh-wrap > p[style*="text-align:center"],
body.ui3:not(.ui3-landing) .page .nuh-wrap > div[style*="justify-content:center"],
body.ui3:not(.ui3-landing) .page .nuh-wrap > .chip-row[style*="justify-content:center"] {
    justify-content: flex-start !important;
    text-align: left !important;
}
body.ui3:not(.ui3-landing) .page .hub-search { justify-content: flex-start; margin-left: 0; margin-right: 0; }
body.ui3:not(.ui3-landing) .page .hub-count { text-align: left; }

/* Listing grids reflow on their own: as many columns as fit, never a
   card narrower than it can be read at. Each module named its grid
   differently; they all follow the one rule now. */
body.ui3:not(.ui3-landing) .page :is(.biz-grid, .mk-grid-cards, .edu-grid, .job-grid, .hub-grid, .page-card-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}
/* Forms written as a row of fields arrange themselves by width too. */
body.ui3:not(.ui3-landing) .page :is(.field-grid, .biz-form-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 16px;
}

/* --- 4.11 Links and prose ----------------------------------------- */
body.ui3:not(.ui3-landing) .page p { line-height: 1.6; }
body.ui3:not(.ui3-landing) .page hr { border: 0; border-top: 1px solid var(--ui-line); margin: 24px 0; }
body.ui3:not(.ui3-landing) .page code { padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-3); color: var(--ui-ink); font-size: 0.875em; }

/* --- 4.12 Signed-out forms (sign in, register) -------------------- */
body.ui3 .page .auth-card {
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: var(--ui-surface);
    box-shadow: var(--ui-sh-2);
}


/* ===================================================================
   5. States
   =================================================================== */
body.ui3 :focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    box-shadow: none;
}
body.ui3 .ui-side :focus-visible,
body.ui3 .ui-foot--pub :focus-visible { outline-color: #fff; }
body.ui3 input:focus-visible,
body.ui3 select:focus-visible,
body.ui3 textarea:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    body.ui3 *,
    body.ui3 *::before,
    body.ui3 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast (a11y.css sets the attribute). The shell is ours, so its
   high-contrast treatment lives here rather than in a11y.css. */
html[data-contrast="high"] body.ui3 { --ui-muted: #334155; --ui-line: #94a3b8; --ui-line-strong: #475569; }
html[data-contrast="high"] body.ui3 .ui-side { background: #000; }
html[data-contrast="high"] body.ui3 .ui-link,
html[data-contrast="high"] body.ui3 .ui-group__head { color: #fff; }
html[data-contrast="high"] body.ui3 .ui-link.is-current { outline: 2px solid #fff; }
html[data-contrast="high"] body.ui3 .ui-top,
html[data-contrast="high"] body.ui3 .ui-pubbar,
html[data-contrast="high"] body.ui3 .ui-tabbar { background: #fff; backdrop-filter: none; border-color: #000; }

@media print {
    body.ui3 .ui-side,
    body.ui3 .ui-top,
    body.ui3 .ui-pubbar,
    body.ui3 .ui-tabbar,
    body.ui3 .ui-foot,
    body.ui3 .ui-scrim,
    body.ui3 .ui-pal { display: none !important; }
    body.ui3-app .ui-frame { margin-left: 0 !important; }
    body.ui3 { background: #fff; padding: 0; }
}


/* ===================================================================
   6. Phone navigation (v4)

   Below 1024px the menu stops being a long list:
     - on a phone it is a SHEET that rises from the bottom (the Menu tab
       lives there), on a tablet it stays a drawer;
     - sections show as TILES; tapping one DRILLS into its pages, with a
       back button and the section's name as the title (ui.js);
     - pinned and recent pages sit above the tiles;
     - every page in a section is also a swipe away in the strip under
       the top bar (.ui-sibs).
   All of it keys off html.ui-js: with the script blocked, the menu is the
   v3 accordion drawer, which works on its own.
   =================================================================== */
body.ui3 .ui-side__grab,
body.ui3 .ui-side__back,
body.ui3 .ui-side__title,
body.ui3 .ui-group__meta,
body.ui3 .ui-pin,
body.ui3 .ui-sibs { display: none; }

@media (max-width: 1023.98px) {
    /* --- Sheet head: title and back, instead of the brand ------------ */
    html.ui-js body.ui3-app .ui-side__head { gap: 4px; padding: 0 8px 0 8px; }
    html.ui-js body.ui3-app .ui-side .ui-brand { display: none; }
    html.ui-js body.ui3-app .ui-side__title {
        display: block;
        flex: 1;
        min-width: 0;
        margin: 0 0 0 8px;
        color: #fff;
        font-family: var(--ui-font-head);
        font-size: 1.125rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    html.ui-js body.ui3-app .ui-side__back:not([hidden]) { display: inline-grid; }
    html.ui-js body.ui3-app .ui-side__back:not([hidden]) + .ui-side__title { margin-left: 0; }
    html.ui-js body.ui3 .ui-side .ui-iconbtn { width: 44px; height: 44px; }

    /* --- Root: sections as tiles ------------------------------------ */
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-content: start;
        padding: 10px 14px 24px;
    }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) > .ui-quick { grid-column: 1 / -1; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group { margin: 0; min-width: 0; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__panel { display: none; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__head {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon count" "label label" "meta meta";
        align-items: center;
        gap: 2px 8px;
        min-height: 92px;
        padding: 12px 12px 10px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        transition: background-color 0.15s, transform 0.12s;
        -webkit-tap-highlight-color: transparent;
    }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__head:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.1); }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__icon {
        grid-area: icon;
        display: block;
        width: 26px;
        height: 26px;
        margin-bottom: 8px;
        color: var(--nuh-orange-soft, #ffab66);
    }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__label { grid-area: label; white-space: normal; line-height: 1.25; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__meta {
        grid-area: meta;
        display: block;
        color: rgba(200, 214, 232, 0.72);
        font-size: 0.75rem;
        font-weight: 500;
    }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group__caret { display: none; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group .ui-count--dot { display: inline-flex; grid-area: count; justify-self: end; align-self: start; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group.is-here > .ui-group__head {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--ui-brand);
        box-shadow: inset 0 0 0 1px var(--ui-brand);
    }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-group.is-here .ui-group__meta { color: #fff; }

    /* --- Drilled: one section's pages, big rows ---------------------- */
    html.ui-js body.ui3-app .ui-nav[data-drill] { padding: 6px 12px 24px; }
    html.ui-js body.ui3-app .ui-nav[data-drill] > .ui-quick,
    html.ui-js body.ui3-app .ui-nav[data-drill] > .ui-group:not(.is-drilled) { display: none; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-group.is-drilled { margin: 0; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-group.is-drilled > .ui-group__head { display: none; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-group__panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        column-gap: 4px;
        row-gap: 2px;
        padding: 0;
        animation: ui-drill-in 0.22s var(--ui-ease);
    }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-link { min-height: 52px; font-size: 1rem; gap: 14px; padding: 0 12px; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-link__icon { width: 22px; height: 22px; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-link.is-current::before { left: 0; }
    html.ui-js body.ui3-app .ui-nav .ui-pin {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 52px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: rgba(200, 214, 232, 0.6);
        cursor: pointer;
    }
    html.ui-js body.ui3-app .ui-nav .ui-pin .icon { width: 20px; height: 20px; }
    html.ui-js body.ui3-app .ui-nav .ui-pin[aria-pressed="true"] { color: var(--nuh-orange-soft, #ffab66); }
    html.ui-js body.ui3-app .ui-nav .ui-pin[aria-pressed="true"] .icon { fill: currentColor; }
    html.ui-js body.ui3-app .ui-nav .ui-pin:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
    html.ui-js body.ui3-app .ui-nav:not([data-drill]) .ui-pin { display: none; }

    /* --- Pinned and recent ------------------------------------------ */
    html.ui-js body.ui3-app .ui-quick:not([hidden]) { display: grid; gap: 8px; margin: 0 0 4px; }
    body.ui3 .ui-quick__h {
        margin: 6px 2px 0;
        color: rgba(200, 214, 232, 0.76);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
    body.ui3 .ui-quick__row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    body.ui3 .ui-quick__row::-webkit-scrollbar { display: none; }
    body.ui3 .ui-qchip {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        max-width: 220px;
        padding: 0 14px 0 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
    body.ui3 .ui-qchip span { overflow: hidden; text-overflow: ellipsis; }
    body.ui3 .ui-qchip .icon { width: 18px; height: 18px; flex: none; color: var(--nuh-orange-soft, #ffab66); }
    body.ui3 .ui-qchip:active { background: rgba(255, 255, 255, 0.14); }
    body.ui3 .ui-quick__tip { margin: 0 2px; color: rgba(200, 214, 232, 0.72); font-size: 0.8125rem; }
    body.ui3 .ui-quick__tip .icon { width: 14px; height: 14px; vertical-align: -2px; }

    /* --- The strip of sibling pages under the top bar ----------------- */
    body.ui3 .ui-sibs {
        display: block;
        background: var(--ui-surface);
        border-bottom: 1px solid var(--ui-line);
    }
    body.ui3 .ui-sibs__track {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 8px var(--ui-gutter);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
    }
    body.ui3 .ui-sibs__track::-webkit-scrollbar { display: none; }
    body.ui3 .ui-sib {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px 0 12px;
        border-radius: 999px;
        border: 1px solid var(--ui-line);
        background: var(--ui-surface-2);
        color: var(--ui-ink-2);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        scroll-snap-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    body.ui3 .ui-sib .icon { width: 17px; height: 17px; color: var(--ui-muted); }
    body.ui3 .ui-sib:hover { border-color: var(--ui-line-strong); color: var(--ui-ink); }
    body.ui3 .ui-sib.is-current { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
    body.ui3 .ui-sib.is-current .icon { color: #fff; }
    body.ui3 .ui-sib .ui-count { height: 18px; min-width: 18px; font-size: 0.625rem; }
}

/* --- Phones: the menu is a sheet from the bottom -------------------- */
@media (max-width: 767.98px) {
    html.ui-js body.ui3 .ui-side,
    html.ui-js body.ui3 .ui-side--pub {
        inset: auto 0 0 0;
        width: 100%;
        height: calc(100dvh - 10px);
        border-right: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(104%);
        transition: transform 0.32s var(--ui-ease), visibility 0.32s;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: none;
    }
    html.ui-js body.ui3 .ui-switch:checked ~ .ui-side {
        transform: none;
        box-shadow: 0 -20px 60px rgba(4, 12, 26, 0.4);
    }
    html.ui-js body.ui3 .ui-side.is-dragging { transition: none; }
    html.ui-js body.ui3 .ui-side__head {
        position: relative;
        height: 64px;
        padding-top: 10px;
        border-bottom-color: rgba(255, 255, 255, 0.06);
        touch-action: none;
    }
    html.ui-js body.ui3 .ui-side__grab {
        display: block;
        position: absolute;
        top: 7px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
    }
    /* Signed out: a short list, so the sheet only takes the room it needs. */
    html.ui-js body.ui3-pub .ui-side { height: auto; max-height: calc(100dvh - 10px); }
    html.ui-js body.ui3-pub .ui-side .ui-brand { display: none; }
    html.ui-js body.ui3-pub .ui-side__title {
        display: block;
        flex: 1;
        margin: 0 0 0 8px;
        color: #fff;
        font-family: var(--ui-font-head);
        font-size: 1.125rem;
        font-weight: 700;
    }
    html.ui-js body.ui3-pub .ui-nav .ui-link { min-height: 50px; font-size: 1rem; }
}

/* --- Tab bar: counts ------------------------------------------------ */
body.ui3 .ui-count--tab {
    position: absolute;
    top: 5px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.625rem;
    box-shadow: 0 0 0 2px var(--ui-surface);
}
body.ui3 .ui-count--dot-only { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 9px; left: calc(50% + 8px); }

@keyframes ui-drill-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes ui-drill-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
html.ui-js body.ui3-app .ui-nav.is-back:not([data-drill]) .ui-group { animation: ui-drill-back 0.22s var(--ui-ease); }

@media (prefers-reduced-motion: reduce) {
    html.ui-js body.ui3 .ui-side,
    html.ui-js body.ui3 .ui-side--pub { transition: none; }
    html.ui-js body.ui3-app .ui-nav[data-drill] .ui-group__panel,
    html.ui-js body.ui3-app .ui-nav.is-back:not([data-drill]) .ui-group { animation: none; }
}
@media print { body.ui3 .ui-sibs { display: none !important; } }


/* ===================================================================
   7. Page changes

   Moving between pages should feel like one application, not a series
   of blank white flashes: the browser cross-fades the content while the
   top bar, tab bar and sidebar stay put (cross-document view transitions,
   Chrome/Edge/Safari 18 — others simply change page as before). A slim
   bar shows while a slower page loads (ui.js adds html.ui-loading).
   =================================================================== */
@view-transition { navigation: auto; }
body.ui3 .ui-top,
body.ui3 .ui-pubbar { view-transition-name: ui-top; }
body.ui3 .ui-tabbar { view-transition-name: ui-tabbar; }
@media (min-width: 1024px) {
    body.ui3-app .ui-side { view-transition-name: ui-side; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.16s; }
::view-transition-group(ui-top),
::view-transition-group(ui-tabbar),
::view-transition-group(ui-side) { animation-duration: 0s; }

body.ui3 .ui-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 3px;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    background: linear-gradient(90deg, var(--ui-brand), var(--nuh-orange-soft, #ffab66));
    transition: opacity 0.2s;
}
html.ui-loading body.ui3 .ui-progress {
    opacity: 1;
    animation: ui-progress 8s cubic-bezier(0.1, 0.7, 0.2, 1) 0.15s forwards;
}
@keyframes ui-progress {
    0% { transform: scaleX(0.04); }
    25% { transform: scaleX(0.55); }
    100% { transform: scaleX(0.94); }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.ui-loading body.ui3 .ui-progress { animation: none; transform: scaleX(0.6); }
}
@media print { body.ui3 .ui-progress { display: none; } }


/* ===================================================================
   8. What the page audit found (every menu page, phone width, as a
      member, an administrator and a visitor)
   =================================================================== */

/* The dark theme's colour words, still written inline on pages that are
   now light: its "muted" was a pale violet (2.2:1 on white — search
   results, the directory, analytics axes, the gallery), its warnings a
   yellow meant for a dark ground. On light pages they take the light
   theme's meaning. The console already does this in admin-shell.css. */
body.ui3:not(.ui3-landing):not(.admin-area) {
    --knms-muted: var(--ui-muted);
    --knms-text: var(--ui-ink-2);
    --knms-warn: var(--ui-warn);
    --knms-warn-bg: var(--ui-warn-bg);
    --knms-success: var(--ui-ok);
    --knms-success-bg: var(--ui-ok-bg);
    --knms-error: var(--ui-bad);
    --knms-error-bg: var(--ui-bad-bg);
}

/* The console's lead quick action is the brand's primary, like every other
   primary button (it was the old theme's indigo). */
body.ui3.admin-area .dash-qa__btn--lead { background: var(--ui-primary); }
body.ui3.admin-area .dash-qa__btn--lead:hover { background: var(--ui-primary-deep); }

/* Checkboxes and radios at 20px (they were the browser's 13px), in the
   brand colour. Switch-style controls draw themselves and are left alone. */
body.ui3 .page input:is([type="checkbox"], [type="radio"]):not([class*="switch"]):not([class*="toggle"]) {
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--ui-primary);
    vertical-align: middle;
    cursor: pointer;
}

/* Links that stand alone — a list row, a table cell, a panel's "View all",
   a sortable column head — are at least 24px tall to a finger (WCAG 2.5.8).
   Links inside a sentence are exempt and untouched. */
body.ui3:not(.ui3-landing) .page :is(li, dd, td) > a:only-child:not([class*="btn"]):not([class*="c-"]),
body.ui3:not(.ui3-landing) .page .c-section-h > a,
body.ui3 .page a.cell-sub,
body.ui3 .page .ent-list__main > a,
body.ui3 .page .ins-sla__t,
body.ui3 .page .loc-banner__clear,
body.ui3.admin-area .dash-panel__link,
body.ui3.admin-area .dash-league__name {
    display: inline-block;
    padding-block: 3px;
}
body.ui3 .page th a { display: inline-flex; align-items: center; min-height: 32px; }
body.ui3 .page #role-tag { min-height: 30px; }

/* Tags: the brand ink on its own tint was 4.2:1 at 12px — a shade deeper. */
body.ui3 .c-tag:not([class*="c-tag--"]) { color: color-mix(in srgb, var(--c-brand-ink) 82%, #000); }
body.ui3 .nuh-stat:first-child .nuh-stat__label { color: color-mix(in srgb, var(--nuh-orange-ink, #c2530a) 85%, #000); }

/* Rank circles past the podium sat on the dark theme's violet. */
body.ui3:not(.ui3-landing):not(.admin-area) .rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
    background: var(--ui-surface-3);
    color: var(--ui-ink-2);
    border-color: var(--ui-line);
}

/* Status messages: an icon with the words (never colour alone), a gentle
   entrance, and a way to put them away (ui.js reveals the button). */
body.ui3 .page .flash { animation: ui-rise 0.24s var(--ui-ease); }
body.ui3 .page .flash__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
body.ui3 .page .flash-success .flash__icon { color: var(--ui-ok); }
body.ui3 .page .flash-error .flash__icon { color: var(--ui-bad); }
body.ui3 .page .flash__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.ui3 .page .flash__close {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
}
body.ui3 .page .flash__close[hidden] { display: none; }
body.ui3 .page .flash__close:hover { background: rgba(15, 28, 46, 0.06); color: var(--ui-ink); }
body.ui3 .page .flash__close .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { body.ui3 .page .flash { animation: none; } }