/**
 * NexDirectory design system.
 *
 * One shared layer for every frontend screen. It only CONSUMES the
 * admin-configurable --nexdirectory-* tokens (printed later by
 * "nexdirectory-runtime-vars"), so Settings › Design always wins.
 *
 * Naming: semantic aliases are --nd-*, components are .nd-* .
 * Components work inside or outside the scoped Tailwind build (.nxd-ui).
 */

:root {
    /* Brand */
    --nd-accent: var(--nexdirectory-primary, #635bff);
    --nd-accent-hover: var(--nexdirectory-primary-hover, #4f46e5);
    --nd-on-accent: var(--nexdirectory-on-primary, #ffffff);
    --nd-accent-rgb: var(--nexdirectory-primary-rgb, 99, 91, 255);
    --nd-accent-soft: rgba(var(--nd-accent-rgb), 0.09);
    --nd-accent-soft-2: rgba(var(--nd-accent-rgb), 0.16);
    --nd-accent-line: rgba(var(--nd-accent-rgb), 0.32);
    /* Accent for small TEXT on light surfaces/tints: computed server-side per brand colour to reach
       WCAG AA 4.5:1 (NEXDIRECTORY_Format::accent_ink); fallback darkens the accent. */
    --nd-accent-ink: var(--nexdirectory-primary-ink, color-mix(in srgb, var(--nd-accent) 72%, #000));

    /* Neutrals */
    --nd-ink: var(--nexdirectory-text, #0f172a);
    --nd-ink-2: #334155;
    --nd-muted: #556274; /* 5.9:1 on --nd-canvas, 6.2:1 on white, >= 5:1 on accent tints (WCAG AA small text) */
    --nd-subtle: #94a3b8;
    --nd-line: #e6e9f0;
    --nd-line-strong: #d5dae3;
    --nd-canvas: #f7f8fb;
    --nd-surface: var(--nexdirectory-surface, var(--nexdirectory-box-bg, #ffffff));
    --nd-surface-2: var(--nexdirectory-box-bg-alt, #f8fafc);
    --nd-overlay: rgba(15, 23, 42, 0.48);
    /* Text and fills on dark surfaces (toasts, image scrims, brand panels). */
    --nd-on-dark: #ffffff;
    --nd-dark: #0b1220;
    --nd-toast-bg: rgba(17, 24, 39, 0.96);
    --nd-toast-glass: rgba(17, 24, 39, 0.88);
    --nd-toast-success: #4ade80;
    --nd-toast-error: #f87171;
    --nd-toast-warning: #fbbf24;
    --nd-toast-muted: #cbd5e1;

    /* Status: a fill/icon colour, a soft tint and an ink for text on that tint (all >= 4.5:1).
       The admin and front end share these; the old three ambers collapse into the warning pair. */
    --nd-success: #12a150;
    --nd-success-ink: #0f7a3d; /* 4.9:1 on --nd-success-soft */
    --nd-success-soft: #e8f8ef;
    --nd-warning: #b45309;
    --nd-warning-ink: #92400e; /* 6.6:1 on --nd-warning-soft */
    --nd-warning-soft: #fdf5e6;
    --nd-danger: #dc2626;
    --nd-danger-ink: #b91c1c; /* 5.6:1 on --nd-danger-soft */
    --nd-danger-soft: #fdecec;
    --nd-info: #2563eb;
    --nd-info-ink: #1d4ed8; /* 5.9:1 on --nd-info-soft */
    --nd-info-soft: #eaf1fe;

    /* Shape */
    --nd-radius-xs: 6px;
    --nd-radius-sm: 10px;
    --nd-radius: var(--nexdirectory-radius, 12px);
    --nd-radius-lg: var(--nexdirectory-radius-lg, 16px);
    --nd-radius-xl: calc(var(--nexdirectory-radius-lg, 16px) + 8px);
    --nd-radius-pill: 999px;
    --nd-btn-radius: var(--nexdirectory-btn-radius, 10px);

    /* Depth */
    --nd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
    --nd-shadow-2: var(--nexdirectory-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12));
    --nd-shadow-3: var(--nexdirectory-shadow, 0 18px 40px -18px rgba(15, 23, 42, 0.22));
    --nd-shadow-4: var(--nexdirectory-shadow-lg, 0 32px 70px -28px rgba(15, 23, 42, 0.35));
    --nd-ring: 0 0 0 3px rgba(var(--nd-accent-rgb), 0.28);

    /* Type: one scale (design-language §4). 12px is the floor everywhere. */
    --nd-font: var(--nexdirectory-font, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
    --nd-font-display: var(--nexdirectory-font-display, var(--nd-font));
    --nd-fs-12: 0.75rem;
    --nd-fs-13: 0.8125rem;
    --nd-fs-14: 0.875rem;
    --nd-fs-16: 1rem;
    --nd-fs-18: 1.125rem;
    --nd-fs-20: 1.25rem;
    --nd-fs-24: 1.5rem;
    --nd-fs-30: clamp(1.625rem, 1.4rem + 0.9vw, 1.875rem);
    --nd-fs-36: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);
    --nd-fs-48: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
    --nd-fs-60: clamp(2.5rem, 1.5rem + 4vw, 3.75rem);
    --nd-fs-72: clamp(2.75rem, 1.4rem + 5.4vw, 4.5rem);
    --nd-fw-regular: 400;
    --nd-fw-medium: 500;
    --nd-fw-semibold: 600;
    --nd-fw-bold: 700; /* headings never go above 750 */
    /* Legacy aliases (kept for existing selectors). */
    --nd-text-xs: var(--nd-fs-12);
    --nd-text-sm: var(--nd-fs-14);
    --nd-text-md: var(--nd-fs-16);
    --nd-text-lg: var(--nd-fs-18);

    /* Motion */
    --nd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --nd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nd-dur-1: 120ms;
    --nd-dur-2: 200ms;
    --nd-dur-3: 320ms;
    --nd-dur-4: 480ms; /* page-level reveals only */

    /* One container (POLISH-SPEC 3.3): every page and the nav share one left edge.
       --nd-page-x is the horizontal padding of any full-bleed wrapper that should line
       its content up with the container (nav, footer, page wrappers, heroes). It is a
       pure length (vw, not %), so it resolves the same on every element. */
    --nd-max: 1200px;
    --nd-gutter: 24px;
    --nd-page-x: max(var(--nd-gutter), calc((100vw - var(--ndn-sbw, 0px) - var(--nd-max)) / 2 + var(--nd-gutter)));
    --nd-read: 680px;

    /* Bottom stack: everything that floats at the bottom (FAB, float pill, sticky CTA bar,
       save bar, toasts) sits on --nd-bottom-stack. It is the safe area alone, plus the tab
       bar height while the phone/tablet tab bar is shown (html.ndn-has-tabbar). */
    --nd-tabbar-h: 64px;
    --nd-safe-bottom: env(safe-area-inset-bottom, 0px);
    --nd-bottom-stack: var(--nd-safe-bottom);
    --nd-sheet-w: 480px;

    /* Layers */
    --nd-z-sticky: 900;
    --nd-z-nav: 1100;
    --nd-z-bar: 9000;
    --nd-z-tabbar: 99990;
    --nd-z-sheet: 100000;
    --nd-z-toast: 2147483000;

    /* Layout helpers */
    --nd-nav-height: 64px;
    --nd-sticky-top: calc(var(--nd-nav-height) + var(--wp-admin--admin-bar--height, 0px));

    /* Kept for older selectors that referenced an undefined token */
    --nexdirectory-focus-ring: var(--nd-accent);
}

@media (max-width: 767.98px) {
    :root { --nd-gutter: 16px; }
}

/* The tab bar is shown up to 1023px (nexdirectory-nav.css): lift the bottom stack above it. */
@media (max-width: 1023.98px) {
    html.ndn-has-tabbar { --nd-bottom-stack: calc(var(--nd-tabbar-h) + var(--nd-safe-bottom)); }
}

/* Legacy page-padding consumers (page wrappers, single layouts) follow the one container.
   html:root out-ranks the :root rules printed inline by older code paths. The owner's
   "page side padding" still applies under Settings › Layout › Full width, where the runtime
   sets --nd-max:100vw and --nd-gutter:max(24px, <owner padding>). */
html:root {
    --nexdirectory-page-side-padding: var(--nd-page-x);
    --nexdirectory-page-side-padding-mobile: var(--nd-page-x);
}

/* ---------------------------------------------------------------------------
 * Global polish (scoped to plugin UI)
 * ------------------------------------------------------------------------- */
.nxd-ui,
.nexdirectory-plugin-page .nexdirectory-theme-shell {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.nxd-ui ::selection {
    background: var(--nd-accent-soft-2);
    color: var(--nd-ink);
}

/* One consistent, brand-coloured focus ring (keyboard only). */
.nxd-ui :where(a, button, summary, select, input, textarea, [role="button"], [role="tab"], [tabindex]):focus-visible {
    outline: 2px solid var(--nd-accent) !important;
    outline-offset: 2px !important;
    box-shadow: var(--nd-ring) !important;
}
.nxd-ui :where(input, select, textarea):focus-visible {
    outline-offset: 0 !important;
}
/* Composite controls draw ONE ring, on the container (:focus-within), never a second one on
   the inner field. Buttons inside (locate, submit) keep their own ring. */
:where(.nd-searchbar, .nd-input-group, .nxa-input-group) :where(input, select, textarea):focus,
:where(.nd-searchbar, .nd-input-group, .nxa-input-group) :where(input, select, textarea):focus-visible,
.nxd-ui :where(.nd-searchbar, .nd-input-group, .nxa-input-group) :where(input, select, textarea):focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Smooth, consistent interaction feedback. */
.nxd-ui :where(a, button, [role="button"], summary, label, input, select, textarea) {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--nd-dur-2);
    transition-timing-function: var(--nd-ease);
}

.nxd-ui :where(button, [role="button"], a.nd-btn):active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

.nxd-ui :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

/* Thin, unobtrusive scrollbars inside panels. */
.nxd-ui :where(.nd-scroll, [data-nd-scroll]) {
    scrollbar-width: thin;
    scrollbar-color: var(--nd-line-strong) transparent;
}

/* Comfortable minimum tap targets on touch devices. */
@media (pointer: coarse) {
    .nxd-ui :where(button, [role="button"], .nd-btn, select) {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.nd-btn {
    --_bg: var(--nd-surface);
    --_fg: var(--nd-ink);
    --_bd: var(--nd-line-strong);
    --_bg-h: var(--nd-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--nexdirectory-btn-min-height, 40px);
    padding: 0 1rem;
    border: 1px solid var(--_bd);
    border-radius: var(--nd-btn-radius);
    background: var(--_bg);
    color: var(--_fg) !important;
    font: 600 var(--nd-text-sm)/1 var(--nd-font);
    letter-spacing: -0.005em;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--nd-shadow-1);
    transition: background-color var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease),
        color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nd-btn:hover { background: var(--_bg-h); border-color: var(--_bd); }
.nd-btn:active { transform: translateY(1px); }
.nd-btn[disabled], .nd-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.nd-btn svg, .nd-btn .fa, .nd-btn [class*="fa-"] { width: 1em; height: 1em; flex: none; }

.nd-btn--primary {
    --_bg: var(--nd-accent);
    --_fg: var(--nd-on-accent);
    --_bd: transparent;
    --_bg-h: var(--nd-accent-hover);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px -8px rgba(var(--nd-accent-rgb), 0.6);
}
.nd-btn--primary:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 24px -10px rgba(var(--nd-accent-rgb), 0.7); }
.nd-btn--soft { --_bg: var(--nd-accent-soft); --_fg: var(--nd-accent-ink); --_bd: transparent; --_bg-h: var(--nd-accent-soft-2); box-shadow: none; }
.nd-btn--ghost { --_bg: transparent; --_bd: transparent; --_bg-h: rgba(15, 23, 42, 0.05); box-shadow: none; }
.nd-btn--danger { --_bg: var(--nd-surface); --_fg: var(--nd-danger-ink); --_bd: color-mix(in srgb, var(--nd-danger) 30%, var(--nd-surface)); --_bg-h: var(--nd-danger-soft); }
.nd-btn--danger-solid { --_bg: var(--nd-danger-ink); --_fg: var(--nd-on-dark); --_bd: transparent; --_bg-h: color-mix(in srgb, var(--nd-danger-ink) 86%, var(--nd-dark)); }
.nd-btn--sm { min-height: 32px; padding: 0 0.7rem; font-size: var(--nd-text-xs); border-radius: calc(var(--nd-btn-radius) - 2px); }
.nd-btn--lg { min-height: 48px; padding: 0 1.4rem; font-size: var(--nd-text-md); }
.nd-btn--block { width: 100%; }
.nd-btn--icon { width: var(--nexdirectory-btn-min-height, 40px); padding: 0; }
.nd-btn--icon.nd-btn--sm { width: 32px; }

/* Loading state: add .is-loading to any .nd-btn */
.nd-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.nd-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-color: var(--_fg) transparent var(--_fg) transparent;
    border-radius: 50%;
    animation: nd-spin 0.7s linear infinite;
}

/* ---------------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------------- */
.nd-card {
    position: relative;
    background: var(--nd-surface);
    border: var(--nexdirectory-box-border-width, 1px) solid var(--nexdirectory-box-border-color, var(--nd-line));
    border-radius: var(--nd-radius-lg);
    box-shadow: var(--nd-shadow-1);
}
.nd-card--pad { padding: clamp(1rem, 2.4vw, 1.5rem); }
.nd-card--interactive {
    transition: transform var(--nd-dur-3) var(--nd-ease), box-shadow var(--nd-dur-3) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease);
}
.nd-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--nd-shadow-3);
    border-color: var(--nd-line-strong);
}
.nd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.nd-card__title { margin: 0; font: 650 var(--nd-text-md)/1.3 var(--nd-font-display); color: var(--nd-ink); letter-spacing: -0.015em; }
.nd-card__sub { margin: 0.2rem 0 0; font-size: var(--nd-text-sm); color: var(--nd-muted); }

.nd-divider { height: 1px; border: 0; background: var(--nd-line); margin: 1rem 0; }

/* ---------------------------------------------------------------------------
 * Badges, chips, status pills
 * ------------------------------------------------------------------------- */
.nd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--nd-radius-pill);
    background: var(--nd-surface-2);
    color: var(--nd-ink-2);
    font: 600 var(--nd-fs-12)/1.4 var(--nd-font);
    letter-spacing: 0;
    white-space: nowrap;
}
.nd-badge::before { content: none; }
.nd-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nd-badge--accent { background: var(--nd-accent-soft); color: var(--nd-accent-ink); }
.nd-badge--success { background: var(--nd-success-soft); color: var(--nd-success-ink); }
.nd-badge--warning { background: var(--nd-warning-soft); color: var(--nd-warning-ink); }
.nd-badge--danger { background: var(--nd-danger-soft); color: var(--nd-danger-ink); }
.nd-badge--info { background: var(--nd-info-soft); color: var(--nd-info-ink); }
/* Neutral "Official"-style label: never accent, never danger red. */
.nd-badge--neutral { background: var(--nd-surface-2); color: var(--nd-ink-2); box-shadow: inset 0 0 0 1px var(--nd-line); }

.nd-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--nd-radius-pill);
    background: var(--nd-accent);
    color: var(--nd-on-accent);
    font: 700 var(--nd-fs-12)/1 var(--nd-font);
    font-variant-numeric: tabular-nums;
}

.nd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0 0.85rem;
    border: 1px solid var(--nd-line-strong);
    border-radius: var(--nd-radius-pill);
    background: var(--nd-surface);
    color: var(--nd-ink-2);
    font: 550 var(--nd-text-sm)/1 var(--nd-font);
    cursor: pointer;
}
.nd-chip:hover { border-color: var(--nd-accent-line); color: var(--nd-ink); }
.nd-chip[aria-pressed="true"], .nd-chip.is-active { background: var(--nd-accent-soft); border-color: var(--nd-accent-line); color: var(--nd-accent-ink); }

/* ---------------------------------------------------------------------------
 * Navigation primitives: vertical nav, segmented control, tabs
 * ------------------------------------------------------------------------- */
.nd-navlist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nd-navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 40px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--nd-radius-sm);
    background: transparent;
    color: var(--nd-ink-2);
    font: 550 var(--nd-text-sm)/1.2 var(--nd-font);
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.nd-navlink:hover { background: rgba(15, 23, 42, 0.04); color: var(--nd-ink); }
.nd-navlink[aria-current="page"], .nd-navlink.is-active { background: var(--nd-accent-soft); color: var(--nd-accent-ink); font-weight: 650; }
.nd-navlink[aria-current="page"]::before, .nd-navlink.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nd-accent);
}
.nd-navlink .nd-count { margin-left: auto; }
.nd-navlink__icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; opacity: 0.8; }
.nd-navgroup-label { margin: 1rem 0.75rem 0.35rem; font: 600 var(--nd-fs-13)/1.2 var(--nd-font); letter-spacing: 0; color: var(--nd-muted); }

.nd-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: calc(var(--nd-radius-sm) + 2px);
    background: rgba(15, 23, 42, 0.05);
}
.nd-segmented > * {
    min-height: 32px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: var(--nd-radius-sm);
    background: transparent;
    color: var(--nd-muted);
    font: 600 var(--nd-text-sm)/1 var(--nd-font);
    cursor: pointer;
}
.nd-segmented > *:hover { color: var(--nd-ink); }
.nd-segmented > [aria-selected="true"], .nd-segmented > [aria-pressed="true"], .nd-segmented > .is-active {
    background: var(--nd-surface);
    color: var(--nd-ink);
    box-shadow: var(--nd-shadow-1), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* ---------------------------------------------------------------------------
 * Dropdown / overflow menu  (use with <details class="nd-menu">)
 * ------------------------------------------------------------------------- */
.nd-menu { position: relative; display: inline-block; }
.nd-menu > summary { list-style: none; cursor: pointer; }
.nd-menu > summary::-webkit-details-marker { display: none; }
.nd-menu__panel {
    position: absolute;
    z-index: 60;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-radius);
    background: var(--nd-surface);
    box-shadow: var(--nd-shadow-4);
    transform-origin: top right;
    animation: nd-pop var(--nd-dur-2) var(--nd-ease);
}
.nd-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 36px;
    padding: 0 0.65rem;
    border: 0;
    border-radius: var(--nd-radius-xs);
    background: none;
    color: var(--nd-ink-2);
    font: 550 var(--nd-text-sm)/1.2 var(--nd-font);
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.nd-menu__item:hover { background: var(--nd-surface-2); color: var(--nd-ink); }
.nd-menu__item--danger { color: var(--nd-danger); }
.nd-menu__item--danger:hover { background: var(--nd-danger-soft); color: var(--nd-danger); }
.nd-menu__sep { height: 1px; margin: 4px 0; background: var(--nd-line); }

/* ---------------------------------------------------------------------------
 * Stats, empty states, skeletons, toasts
 * ------------------------------------------------------------------------- */
.nd-stat { display: grid; gap: 0.35rem; }
.nd-stat__label { font: 550 var(--nd-text-xs)/1.2 var(--nd-font); color: var(--nd-muted); }
.nd-stat__value { font: 700 1.75rem/1.05 var(--nd-font-display); letter-spacing: -0.03em; color: var(--nd-ink); font-variant-numeric: tabular-nums; }
.nd-stat__delta { font: 600 var(--nd-text-xs)/1 var(--nd-font); color: var(--nd-muted); }
.nd-stat__delta--up { color: var(--nd-success-ink); }
.nd-stat__delta--down { color: var(--nd-danger); }

.nd-empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
    text-align: center;
    border: 1px dashed var(--nd-line-strong);
    border-radius: var(--nd-radius-lg);
    background: var(--nd-surface-2);
}
.nd-empty__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--nd-surface);
    color: var(--nd-accent);
    box-shadow: var(--nd-shadow-2);
    font-size: 1.3rem;
}
.nd-empty__title { margin: 0.25rem 0 0; font: 650 var(--nd-text-lg)/1.3 var(--nd-font-display); color: var(--nd-ink); }
.nd-empty__text { margin: 0; max-width: 42ch; font-size: var(--nd-text-sm); line-height: 1.55; color: var(--nd-muted); }

.nd-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--nd-radius-sm);
    background: color-mix(in srgb, var(--nd-line) 70%, var(--nd-surface));
}
.nd-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: nd-shimmer 1.4s infinite;
}

/* Toasts (see nexdirectory-design-system.js). Bottom-centre on phones, bottom-right on desktop. */
.nd-toast-region {
    --nd-toast-w: min(400px, calc(100vw - 32px));
    position: fixed;
    z-index: 2147483000;
    left: 50%;
    bottom: calc(16px + var(--nd-bottom-stack) + var(--nd-toast-lift, 0px));
    width: var(--nd-toast-w);
    height: var(--nd-toast-front-h, 0px);
    transform: translateX(-50%);
    pointer-events: none;
    transition: bottom var(--nd-dur-3) var(--nd-ease);
}
@media (min-width: 768px) {
    .nd-toast-region { left: auto; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + var(--nd-bottom-stack) + var(--nd-toast-lift, 0px)); transform: none; }
}
.nd-toast {
    --i: var(--nd-toast-index, 0);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    background: var(--nd-toast-bg);
    color: var(--nd-on-dark);
    font: 500 14px/1.45 var(--nd-font);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 48px -20px rgba(15, 23, 42, 0.55), 0 6px 16px -8px rgba(15, 23, 42, 0.35);
    pointer-events: auto;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    transform-origin: 50% 100%;
    transform: translate3d(0, calc(var(--i) * -10px), 0) scale(calc(1 - var(--i) * 0.05));
    opacity: calc(1 - var(--i) * 0.22);
    transition: transform 360ms var(--nd-ease-spring), opacity 240ms var(--nd-ease);
    animation: nd-toast-in 360ms var(--nd-ease-spring) backwards;
}
@supports (backdrop-filter: blur(1px)) {
    .nd-toast { background: var(--nd-toast-glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
}
.nd-toast.is-behind .nd-toast__body, .nd-toast.is-behind .nd-toast__action, .nd-toast.is-behind .nd-toast__icon { opacity: 0; transition: opacity 160ms var(--nd-ease); }
.nd-toast.is-hidden-depth { opacity: 0; pointer-events: none; }
.nd-toast-region.is-expanded .nd-toast { transform: translate3d(0, calc(var(--nd-toast-offset, 0px) * -1), 0); opacity: 1; }
.nd-toast-region.is-expanded .nd-toast.is-behind .nd-toast__body,
.nd-toast-region.is-expanded .nd-toast.is-behind .nd-toast__action,
.nd-toast-region.is-expanded .nd-toast.is-behind .nd-toast__icon { opacity: 1; }
.nd-toast.is-dragging { transition: none; cursor: grabbing; }
.nd-toast.is-leaving { animation: nd-toast-out 220ms var(--nd-ease) forwards; }
.nd-toast.is-swiped { transition: transform 220ms var(--nd-ease), opacity 220ms var(--nd-ease); transform: translate3d(var(--nd-swipe-x, 120%), var(--nd-swipe-y, 0), 0) !important; opacity: 0 !important; }
.nd-toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--nd-toast-muted); }
.nd-toast--success .nd-toast__icon { background: rgba(74, 222, 128, 0.16); color: var(--nd-toast-success); }
.nd-toast--error .nd-toast__icon { background: rgba(248, 113, 113, 0.18); color: var(--nd-toast-error); }
.nd-toast--warning .nd-toast__icon { background: rgba(251, 191, 36, 0.16); color: var(--nd-toast-warning); }
.nd-toast--info .nd-toast__icon { background: rgba(var(--nd-accent-rgb), 0.28); color: var(--nd-on-dark); }
.nd-toast__body { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 1px; }
.nd-toast__title { font-weight: 650; color: var(--nd-on-dark); letter-spacing: -0.005em; }
.nd-toast__msg { color: rgba(255, 255, 255, 0.86); overflow-wrap: anywhere; }
.nd-toast__title + .nd-toast__msg { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.nd-toast__msg a { color: var(--nd-on-dark); text-decoration: underline; text-underline-offset: 2px; }
/* One text action (e.g. Undo): white, 600, no pill, so it reads as part of the line. */
.nd-toast__action {
    flex: none; align-self: center; min-height: 36px !important; margin: 0 -4px 0 0; padding: 0 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--nd-on-dark); font: 600 14px/1 var(--nd-font); letter-spacing: -0.005em; cursor: pointer;
    text-decoration: none;
}
.nd-toast__action:hover { background: rgba(255, 255, 255, 0.12); }
a.nd-toast__action { display: inline-flex; align-items: center; color: var(--nd-on-dark) !important; text-decoration: none !important; }
.nd-toast__action:focus-visible { outline: 2px solid var(--nd-on-dark); outline-offset: 2px; }
/* Secondary action (e.g. "Sign in" next to "Undo"): quieter so Undo stays primary. */
.nd-toast__action--secondary { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
@media (max-width: 599.98px) {
    /* Two actions on a phone: drop them under the message instead of squeezing the copy. */
    .nd-toast:has(.nd-toast__action + .nd-toast__action) { flex-wrap: wrap; }
    .nd-toast:has(.nd-toast__action + .nd-toast__action) .nd-toast__body { flex-basis: calc(100% - 80px); }
    .nd-toast:has(.nd-toast__action + .nd-toast__action) .nd-toast__action { order: 5; margin-left: 40px; }
    .nd-toast:has(.nd-toast__action + .nd-toast__action) .nd-toast__action + .nd-toast__action { margin-left: 0; }
}
.nd-toast__close {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px !important; margin: 0 -4px 0 0; padding: 0; border: 0;
    border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.55); cursor: pointer;
}
.nd-toast__close:hover { background: rgba(255, 255, 255, 0.1); color: var(--nd-on-dark); }
.nd-toast__progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
    animation: nd-toast-progress linear forwards;
}
.nd-toast--success .nd-toast__progress { background: var(--nd-toast-success); }
.nd-toast--error .nd-toast__progress { background: var(--nd-toast-error); }
.nd-toast--warning .nd-toast__progress { background: var(--nd-toast-warning); }
.nd-toast.is-paused .nd-toast__progress, .nd-toast-region.is-expanded .nd-toast__progress { animation-play-state: paused; }
@keyframes nd-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Slim top progress bar (replaces the full-screen page loader). */
.nd-progress { position: fixed; z-index: 2147483600; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity 300ms var(--nd-ease) 120ms; }
.nd-progress.is-active { opacity: 1; transition-delay: 0ms; }
.nd-progress.is-done { opacity: 0; transition-delay: 160ms; }
.nd-progress__bar {
    display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
    background: var(--nd-accent); box-shadow: 0 0 10px rgba(var(--nd-accent-rgb), 0.55), 0 0 2px rgba(var(--nd-accent-rgb), 0.6);
    border-radius: 0 3px 3px 0;
    transition: transform 240ms var(--nd-ease);
}

/* Reveal on scroll: [data-nd-reveal] and [data-nd-reveal-stagger] > * */
.is-reveal-ready[data-nd-reveal]:not(.is-revealed),
.is-reveal-ready[data-nd-reveal-stagger] > :not(.is-revealed) { opacity: 0; transform: translate3d(0, 12px, 0); }
.is-reveal-ready[data-nd-reveal="fade"]:not(.is-revealed) { transform: none; }
.is-reveal-ready[data-nd-reveal="scale"]:not(.is-revealed) { transform: scale(0.97); }
.is-reveal-ready[data-nd-reveal="left"]:not(.is-revealed) { transform: translate3d(-16px, 0, 0); }
.is-reveal-ready[data-nd-reveal="right"]:not(.is-revealed) { transform: translate3d(16px, 0, 0); }
.is-reveal-ready[data-nd-reveal].is-revealed,
.is-reveal-ready[data-nd-reveal-stagger] > .is-revealed {
    opacity: 1; transform: none;
    transition: opacity 320ms var(--nd-ease) var(--nd-reveal-delay, 0ms), transform 380ms var(--nd-ease) var(--nd-reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .is-reveal-ready[data-nd-reveal], .is-reveal-ready[data-nd-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
    [data-nd-parallax] { transform: none !important; }
}

/* Press feedback for touch-first controls. */
.nd-pressable { transition: transform 160ms var(--nd-ease); -webkit-tap-highlight-color: transparent; }
.nd-pressable:active { transform: scale(0.97); }

/* Tooltip: <span class="nd-tip" data-tip="Text">…</span> */
.nd-tip { position: relative; }
.nd-tip::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 70;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 0.4rem 0.6rem;
    border-radius: var(--nd-radius-xs);
    background: var(--nd-ink);
    color: var(--nd-on-dark);
    font: 550 var(--nd-fs-12)/1.3 var(--nd-font);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-2) var(--nd-ease);
}
.nd-tip:hover::after, .nd-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------- */
.nd-field { display: grid; gap: 0.4rem; }
.nd-label { font: 600 var(--nd-text-sm)/1.3 var(--nd-font); color: var(--nd-ink); }
.nd-help { font-size: var(--nd-text-xs); line-height: 1.5; color: var(--nd-muted); }
.nd-input, .nd-select, .nd-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: var(--nexdirectory-field-pad-y, 10px) var(--nexdirectory-field-pad-x, 12px);
    border: var(--nexdirectory-input-border-width, 1px) solid var(--nexdirectory-input-border, var(--nd-line-strong));
    border-radius: var(--nexdirectory-input-radius, var(--nd-radius-sm));
    background: var(--nexdirectory-input-bg, var(--nd-on-dark));
    color: var(--nd-ink);
    font: 400 var(--nd-text-sm)/1.4 var(--nd-font);
    box-shadow: var(--nd-shadow-1);
}
.nd-input:hover, .nd-select:hover, .nd-textarea:hover { border-color: var(--nd-subtle); }
.nd-input:focus, .nd-select:focus, .nd-textarea:focus {
    outline: none;
    border-color: var(--nexdirectory-input-border-focus, var(--nd-accent));
    box-shadow: var(--nd-ring);
}
.nd-input::placeholder, .nd-textarea::placeholder { color: var(--nd-subtle); }

/* Toggle switch: <label class="nd-switch"><input type="checkbox"><span></span> Label</label> */
.nd-switch { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; font: 550 var(--nd-text-sm)/1.3 var(--nd-font); color: var(--nd-ink); }
.nd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nd-switch span {
    position: relative;
    width: 38px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: var(--nd-line-strong);
    transition: background var(--nd-dur-2) var(--nd-ease);
}
.nd-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nd-on-dark);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform var(--nd-dur-2) var(--nd-ease-spring);
}
.nd-switch input:checked + span { background: var(--nd-accent); }
.nd-switch input:checked + span::after { transform: translateX(16px); }
.nd-switch input:focus-visible + span { box-shadow: var(--nd-ring); }

/* ---------------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------------- */
.nd-table-wrap { overflow-x: auto; border: 1px solid var(--nd-line); border-radius: var(--nd-radius-lg); background: var(--nd-surface); }
.nd-table { width: 100%; border-collapse: collapse; font: 400 var(--nd-text-sm)/1.45 var(--nd-font); }
.nd-table th { position: sticky; top: 0; padding: 0.7rem 1rem; background: var(--nd-surface-2); color: var(--nd-muted); font-weight: 600; font-size: var(--nd-text-xs); text-align: left; letter-spacing: 0.02em; border-bottom: 1px solid var(--nd-line); }
.nd-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--nd-line); color: var(--nd-ink-2); vertical-align: middle; }
.nd-table tr:last-child td { border-bottom: 0; }
.nd-table tbody tr { transition: background var(--nd-dur-1) var(--nd-ease); }
.nd-table tbody tr:hover { background: rgba(var(--nd-accent-rgb), 0.03); }

/* ---------------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------------- */
@keyframes nd-spin { to { transform: rotate(360deg); } }
@keyframes nd-shimmer { to { transform: translateX(100%); } }
@keyframes nd-pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes nd-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nd-toast-in { from { opacity: 0; transform: translate3d(0, 110%, 0) scale(0.92); } }
@keyframes nd-toast-out { to { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.94); } }

.nd-fade-up { animation: nd-fade-up var(--nd-dur-3) var(--nd-ease) both; }

@media (prefers-reduced-motion: reduce) {
    .nxd-ui *, .nxd-ui *::before, .nxd-ui *::after,
    [class*="nd-"], [class*="nd-"]::before, [class*="nd-"]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually hidden but readable by screen readers */
.nd-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; }

/* Server notices that were promoted to toasts. */
.nexdirectory-notice.nexdirectory-toasted { display: none !important; }

/* Brand fills in legacy utility markup always track the tokens:
   base = --nd-accent, hover = --nd-accent-hover (never a darker "600" at rest). */
.nxd-ui :is(button, a).bg-brand-600:not(:hover),
.nxd-ui :is(button, a).bg-brand-500:not(:hover) { background-color: var(--nd-accent); color: var(--nd-on-accent); }
.nxd-ui :is(button, a).bg-brand-500:hover,
.nxd-ui :is(button, a).bg-brand-600:hover,
.nxd-ui :is(button, a).hover\:bg-brand-600:hover,
.nxd-ui :is(button, a).hover\:bg-brand-700:hover { background-color: var(--nd-accent-hover); }

/* ===========================================================================
 * 1.6 FOUNDATIONS (POLISH-SPEC §3). Everything below is shared by the admin and
 * the front end. Components read only --nd-* tokens.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * One container. .nd-container is the page container; full-bleed wrappers use
 * padding-inline: var(--nd-page-x) to line their content up with it.
 * ------------------------------------------------------------------------- */
.nd-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--nd-max);
    margin-inline: auto;
    padding-inline: var(--nd-gutter);
}
.nd-container--read { max-width: calc(var(--nd-read) + 2 * var(--nd-gutter)); }
.nd-bleed { padding-inline: var(--nd-page-x); }

/* Container contract for the plugin's page shells. The shared page wrapper used to add the
   owner's percentage padding and each screen added its own 24px on top, so the logo and the
   H1 never lined up. Screens that manage their own full-bleed bands (discovery, calendar,
   single) take the wrapper padding over; everything else keeps the wrapper padding, which
   now equals --nd-page-x. */
.nxd-ui > .nexdirectory-uniform-page-gutter:has(> :is(.nd-discover, .nd-cal2)) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.nxd-ui .nexdirectory-uniform-page-gutter > .nd-discover {
    --nd-gutter: var(--nd-page-x);
    --nd-max: none;
}
.nxd-ui .nexdirectory-uniform-page-gutter > .nd-cal2 {
    --nd-gutter: var(--nd-page-x);
    max-width: none;
}
.nxd-ui .nds {
    --nds-gutter: var(--nd-page-x);
    --nds-max: calc(var(--nd-max) - 2 * var(--nd-gutter));
}

/* ---------------------------------------------------------------------------
 * Type helpers
 * ------------------------------------------------------------------------- */
/* Eyebrow: sentence case, 13/600 muted. The only class allowed to be a "kicker". */
.nd-eyebrow {
    display: block;
    margin: 0 0 8px;
    color: var(--nd-muted);
    font: var(--nd-fw-semibold) var(--nd-fs-13)/1.3 var(--nd-font);
    letter-spacing: 0;
    text-transform: none;
}
.nd-meta { color: var(--nd-muted); font: var(--nd-fw-medium) var(--nd-fs-13)/1.4 var(--nd-font); }
.nd-meta--strong { color: var(--nd-ink-2); font-weight: var(--nd-fw-semibold); }
.nd-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * Input group: a prefix/suffix inside ONE bordered control (£ 120, 30 days).
 * <div class="nd-input-group"><span class="nd-input-group__addon">£</span>
 *   <input class="nd-input-group__field" ...><span class="nd-input-group__addon">per day</span></div>
 * .nxa-input-group is the admin alias (same rules).
 * ------------------------------------------------------------------------- */
.nd-input-group,
.nxa-input-group {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    overflow: hidden;
    border: var(--nexdirectory-input-border-width, 1px) solid var(--nexdirectory-input-border, var(--nd-line-strong));
    border-radius: var(--nexdirectory-input-radius, var(--nd-radius-sm));
    background: var(--nexdirectory-input-bg, var(--nd-surface));
    color: var(--nd-ink);
    box-shadow: var(--nd-shadow-1);
    transition: border-color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-2) var(--nd-ease);
}
.nd-input-group:hover,
.nxa-input-group:hover { border-color: var(--nd-subtle); }
.nd-input-group:focus-within,
.nxa-input-group:focus-within {
    border-color: var(--nd-accent);
    box-shadow: var(--nd-ring);
}
.nd-input-group--sm, .nxa-input-group--sm { min-height: 36px; }
.nd-input-group--narrow, .nxa-input-group--narrow { width: auto; max-width: 220px; display: inline-flex; }
.nd-input-group[aria-invalid="true"], .nd-input-group.is-invalid,
.nxa-input-group.is-invalid { border-color: var(--nd-danger); }
.nd-input-group :where(input, select),
.nxa-input-group :where(input, select),
.nd-input-group__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--nd-ink);
    font: var(--nd-fw-regular) var(--nd-fs-16)/1.4 var(--nd-font);
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    outline: none;
}
@media (min-width: 768px) {
    .nd-input-group :where(input, select), .nxa-input-group :where(input, select), .nd-input-group__field { font-size: var(--nd-fs-14); }
}
.nd-input-group__addon,
.nxa-input-group__addon {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0 12px;
    color: var(--nd-muted);
    font: var(--nd-fw-medium) var(--nd-fs-14)/1 var(--nd-font);
    white-space: nowrap;
    user-select: none;
}
.nd-input-group__addon:first-child, .nxa-input-group__addon:first-child { padding-right: 0; }
.nd-input-group__addon:last-child, .nxa-input-group__addon:last-child { padding-left: 0; }
.nd-input-group__sep { flex: none; align-self: center; width: 1px; height: 20px; background: var(--nd-line); }
/* Min–max pair: <div class="nd-range"><div class="nd-input-group">…</div><span>to</span><div class="nd-input-group">…</div></div> */
.nd-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.nd-range > span { color: var(--nd-muted); font-size: var(--nd-fs-13); }

/* ---------------------------------------------------------------------------
 * Dropzone (promoted from .nda-dropzone). Markup (see wp0-api.md):
 * <div class="nd-dropzone" data-nd-dropzone>
 *   <input type="file" class="nd-dropzone__input" id="x" accept=".csv">
 *   <span class="nd-dropzone__icon">svg</span>
 *   <p class="nd-dropzone__title">Drop a file or <button type="button" class="nd-dropzone__browse">browse</button></p>
 *   <p class="nd-dropzone__hint">CSV · up to 8 MB</p>
 *   <div class="nd-dropzone__files" aria-live="polite"></div>
 * </div>
 * ------------------------------------------------------------------------- */
.nd-dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 28px 20px;
    border: 1.5px dashed var(--nd-line-strong);
    border-radius: var(--nd-radius-lg);
    background: var(--nd-surface);
    color: var(--nd-ink-2);
    text-align: center;
    transition: border-color var(--nd-dur-2) var(--nd-ease), background-color var(--nd-dur-2) var(--nd-ease);
}
@media (pointer: fine) {
    .nd-dropzone:hover { border-color: var(--nd-subtle); background: var(--nd-surface-2); }
}
.nd-dropzone.is-dragover {
    border-color: var(--nd-accent);
    border-style: solid;
    background: var(--nd-accent-soft);
}
.nd-dropzone.is-invalid { border-color: var(--nd-danger); }
.nd-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
}
.nd-dropzone__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: var(--nd-radius);
    background: var(--nd-surface-2);
    color: var(--nd-ink-2);
    box-shadow: inset 0 0 0 1px var(--nd-line);
}
.nd-dropzone__icon svg { width: 20px; height: 20px; }
.nd-dropzone__title { margin: 0; color: var(--nd-ink); font: var(--nd-fw-semibold) var(--nd-fs-14)/1.4 var(--nd-font); }
.nd-dropzone__browse {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nd-accent-ink);
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.nd-dropzone__browse:hover { text-decoration-thickness: 2px; }
.nd-dropzone__browse:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 3px; border-radius: 4px; }
.nd-dropzone__hint { margin: 0; color: var(--nd-muted); font: var(--nd-fw-regular) var(--nd-fs-13)/1.4 var(--nd-font); }
.nd-dropzone__files { display: grid; gap: 8px; width: 100%; max-width: 420px; margin-top: 10px; }
.nd-dropzone__files:empty { display: none; }
.nd-dropzone.has-file { padding-block: 20px; }
.nd-filechip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-radius);
    background: var(--nd-surface);
    box-shadow: var(--nd-shadow-1);
    text-align: left;
}
.nd-filechip__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--nd-radius-xs); background: var(--nd-surface-2); color: var(--nd-ink-2); }
.nd-filechip__icon svg { width: 16px; height: 16px; }
.nd-filechip__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nd-filechip__name { overflow: hidden; color: var(--nd-ink); font: var(--nd-fw-semibold) var(--nd-fs-14)/1.3 var(--nd-font); text-overflow: ellipsis; white-space: nowrap; }
.nd-filechip__meta { color: var(--nd-muted); font: var(--nd-fw-regular) var(--nd-fs-12)/1.3 var(--nd-font); font-variant-numeric: tabular-nums; }
.nd-filechip__remove {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0;
    border-radius: var(--nd-radius-sm); background: transparent; color: var(--nd-muted); cursor: pointer;
}
.nd-filechip__remove:hover { background: var(--nd-surface-2); color: var(--nd-ink); }
.nd-filechip__remove svg { width: 16px; height: 16px; }
.nd-filechip__thumb { flex: none; width: 40px; height: 40px; border-radius: var(--nd-radius-xs); object-fit: cover; }
/* Round avatar variant: the whole circle is the target, the chip is replaced by the preview. */
.nd-dropzone--avatar {
    width: 112px;
    height: 112px;
    padding: 0;
    gap: 0;
    place-content: center;
    border-radius: 50%;
    overflow: hidden;
}
.nd-dropzone--avatar .nd-dropzone__title { font-size: var(--nd-fs-13); }
.nd-dropzone--avatar .nd-dropzone__hint,
.nd-dropzone--avatar .nd-dropzone__icon { display: none; }
.nd-dropzone--avatar .nd-dropzone__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
 * Media fallback: shown wherever a listing has no image.
 * <div class="nd-media-fallback" role="img" aria-label="Bike"><svg class="nd-media-fallback__icon">…</svg>
 *   <span class="nd-media-fallback__label">Bikes</span></div>
 * ------------------------------------------------------------------------- */
.nd-media-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: inherit;
    aspect-ratio: var(--nd-media-ratio, auto);
    background: var(--nd-surface-2);
    box-shadow: inset 0 0 0 1px var(--nd-line);
    color: var(--nd-subtle);
    border-radius: inherit;
}
.nd-media-fallback__icon,
.nd-media-fallback > svg { width: 32px; height: 32px; stroke-width: 1.5; }
.nd-media-fallback__label {
    max-width: 90%;
    overflow: hidden;
    color: var(--nd-muted);
    font: var(--nd-fw-medium) var(--nd-fs-13)/1.3 var(--nd-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nd-media-fallback--sm { gap: 0; }
.nd-media-fallback--sm .nd-media-fallback__icon, .nd-media-fallback--sm > svg { width: 18px; height: 18px; }
.nd-media-fallback--sm .nd-media-fallback__label { display: none; }

/* ---------------------------------------------------------------------------
 * Sticky CTA bar (nexdirectoryStickyCta(inlineEl, barEl) in design-system.js).
 * The bar starts off-screen, inert and aria-hidden; it slides in once the inline CTA has
 * scrolled out of view and hides again when the footer comes in.
 * ------------------------------------------------------------------------- */
.nd-sticky-cta {
    position: fixed;
    z-index: var(--nd-z-bar);
    left: 0;
    right: 0;
    bottom: var(--nd-bottom-stack);
    box-sizing: border-box;
    padding: 12px var(--nd-page-x) 12px;
    border-top: 1px solid var(--nd-line);
    background: color-mix(in srgb, var(--nd-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 -12px 32px -24px rgba(15, 23, 42, 0.35);
    transform: translateY(calc(100% + var(--nd-bottom-stack)));
    visibility: hidden;
    transition: transform var(--nd-dur-3) var(--nd-ease), bottom var(--nd-dur-3) var(--nd-ease), visibility 0s linear var(--nd-dur-3);
}
.nd-sticky-cta.is-shown {
    transform: none;
    visibility: visible;
    transition: transform var(--nd-dur-3) var(--nd-ease), bottom var(--nd-dur-3) var(--nd-ease), visibility 0s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nd-sticky-cta { background: var(--nd-surface); }
}
.nd-sticky-cta__inner { display: flex; align-items: center; gap: 12px; max-width: calc(var(--nd-max) - 2 * var(--nd-gutter)); margin-inline: auto; }
.nd-sticky-cta__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nd-sticky-cta__title { overflow: hidden; color: var(--nd-ink); font: var(--nd-fw-semibold) 17px/1.25 var(--nd-font); text-overflow: ellipsis; white-space: nowrap; }
.nd-sticky-cta__sub { color: var(--nd-muted); font: var(--nd-fw-medium) var(--nd-fs-13)/1.3 var(--nd-font); font-variant-numeric: tabular-nums; }
.nd-sticky-cta__actions { display: flex; flex: none; align-items: center; gap: 8px; }
/* Scroll containers keep their last row clear of a visible bar (WCAG 2.4.11). */
html.nd-has-sticky-bar body { padding-bottom: calc(var(--nd-bottom-stack) + var(--nd-sticky-bar-h, 72px) + 24px); }
html.nd-has-sticky-bar { scroll-padding-bottom: calc(var(--nd-bottom-stack) + var(--nd-sticky-bar-h, 72px) + 24px); }

/* ---------------------------------------------------------------------------
 * Sheet: bottom sheet on phones, 480px right sheet from 768px.
 * <div class="nd-sheet" id="x" hidden role="dialog" aria-modal="true" aria-labelledby="x-title">
 *   <div class="nd-sheet__backdrop" data-nd-sheet-close></div>
 *   <div class="nd-sheet__panel">
 *     <header class="nd-sheet__head"><h2 class="nd-sheet__title" id="x-title">…</h2>
 *       <button class="nd-sheet__close" data-nd-sheet-close aria-label="Close">×</button></header>
 *     <div class="nd-sheet__body">…</div>
 *     <footer class="nd-sheet__foot">…</footer>
 *   </div></div>
 * Open: <button data-nd-sheet-open="x"> or nexdirectorySheet.open('x', triggerEl).
 * ------------------------------------------------------------------------- */
.nd-sheet {
    position: fixed;
    z-index: var(--nd-z-sheet);
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--nd-font);
}
.nd-sheet[hidden] { display: none !important; }
.nd-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: var(--nd-overlay);
    opacity: 0;
    transition: opacity var(--nd-dur-2) var(--nd-ease);
}
.nd-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-height: min(92dvh, 92vh);
    border-radius: var(--nd-radius-xl) var(--nd-radius-xl) 0 0;
    background: var(--nd-surface);
    color: var(--nd-ink);
    box-shadow: var(--nd-shadow-4);
    transform: translateY(100%);
    transition: transform var(--nd-dur-3) var(--nd-ease);
    outline: none;
}
.nd-sheet__panel::before {
    content: "";
    flex: none;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 4px;
    background: var(--nd-line-strong);
}
.nd-sheet.is-open .nd-sheet__backdrop { opacity: 1; }
.nd-sheet.is-open .nd-sheet__panel { transform: none; }
.nd-sheet__head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 24px; }
.nd-sheet__title { flex: 1; min-width: 0; margin: 0; color: var(--nd-ink); font: var(--nd-fw-semibold) var(--nd-fs-18)/1.3 var(--nd-font-display); letter-spacing: -0.015em; text-wrap: balance; outline: none; }
.nd-sheet__close {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -8px 0 0; padding: 0; border: 0;
    border-radius: 50%; background: var(--nd-surface-2); color: var(--nd-ink-2); cursor: pointer;
}
.nd-sheet__close:hover { background: var(--nd-line); color: var(--nd-ink); }
.nd-sheet__close svg { width: 18px; height: 18px; }
.nd-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 24px; color: var(--nd-ink-2); font: var(--nd-fw-regular) var(--nd-fs-16)/1.55 var(--nd-font); }
.nd-sheet__body > p:first-child { margin-top: 0; }
.nd-sheet__foot {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px calc(16px + var(--nd-safe-bottom));
    border-top: 1px solid var(--nd-line);
}
.nd-sheet__foot > .nd-btn { min-height: 44px; }
@media (max-width: 767.98px) {
    .nd-sheet__foot > .nd-btn { flex: 1 1 140px; }
}
@media (min-width: 768px) {
    .nd-sheet { justify-content: flex-end; align-items: stretch; }
    .nd-sheet__panel {
        width: min(var(--nd-sheet-w), 100vw);
        max-height: none;
        height: 100%;
        border-radius: 0;
        transform: translateX(100%);
    }
    .nd-sheet__panel::before { display: none; }
    .nd-sheet__head { padding: 20px 20px 12px 28px; }
    .nd-sheet__body { padding: 4px 28px 28px; }
    .nd-sheet__foot { padding: 16px 28px; }
    /* Short dialogs (confirms) centre instead of filling the height. */
    .nd-sheet--dialog { align-items: center; justify-content: center; padding: 24px; }
    .nd-sheet--dialog .nd-sheet__panel { width: min(440px, 100%); height: auto; border-radius: var(--nd-radius-xl); transform: translateY(8px) scale(0.98); opacity: 0; transition: transform var(--nd-dur-2) var(--nd-ease), opacity var(--nd-dur-2) var(--nd-ease); }
    .nd-sheet--dialog.is-open .nd-sheet__panel { transform: none; opacity: 1; }
    .nd-sheet--dialog .nd-sheet__foot { border-top: 0; padding-top: 4px; }
}
html.nd-sheet-open, html.nd-sheet-open body { overflow: hidden; }
.nd-confirm__msg { margin: 0; color: var(--nd-ink-2); }

/* ---------------------------------------------------------------------------
 * Error summary: role=alert, "N things to fix", links focus the field.
 * nexdirectoryErrorSummary(container, [{ field, message }], { title })
 * ------------------------------------------------------------------------- */
.nd-error-summary {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid color-mix(in srgb, var(--nd-danger) 30%, transparent);
    border-left-width: 4px;
    border-radius: var(--nd-radius);
    background: var(--nd-danger-soft);
    color: var(--nd-ink);
    outline: none;
}
.nd-error-summary[hidden] { display: none; }
.nd-error-summary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-danger) 28%, transparent); }
.nd-error-summary__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--nd-danger-ink); font: var(--nd-fw-semibold) var(--nd-fs-16)/1.35 var(--nd-font); }
.nd-error-summary__title svg { flex: none; width: 18px; height: 18px; }
.nd-error-summary__list { display: grid; gap: 4px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.nd-error-summary__list a {
    color: var(--nd-danger-ink) !important;
    font: var(--nd-fw-medium) var(--nd-fs-14)/1.45 var(--nd-font);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd-error-summary__list a:hover { text-decoration-thickness: 2px; }
.nd-field-error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--nd-danger-ink); font: var(--nd-fw-medium) var(--nd-fs-13)/1.4 var(--nd-font); }
.nd-field-error[hidden] { display: none; }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--nd-danger) !important; }
/* Fields focused from the summary or validation clear the sticky nav. */
:where(.nd-field, .nexdirectory-field, label, input, select, textarea, fieldset) { scroll-margin-top: calc(var(--nd-sticky-top) + 16px); }

/* ---------------------------------------------------------------------------
 * Sort menu: an .nd-menu on the results count row.
 * <details class="nd-menu nd-sort"><summary class="nd-sort__btn">Sort: <b>Newest</b></summary>
 *   <div class="nd-menu__panel" role="menu"><a class="nd-menu__item" role="menuitemradio" aria-checked="true" href="?sort=newest">Newest</a>…</div></details>
 * ------------------------------------------------------------------------- */
.nd-sort > summary,
.nd-sort__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px 0 12px;
    border-radius: var(--nd-radius-sm);
    color: var(--nd-muted);
    font: var(--nd-fw-medium) var(--nd-fs-14)/1 var(--nd-font);
    white-space: nowrap;
}
.nd-sort > summary:hover { background: rgba(15, 23, 42, 0.05); color: var(--nd-ink); }
.nd-sort > summary b, .nd-sort__value { color: var(--nd-ink); font-weight: var(--nd-fw-semibold); }
.nd-sort > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: -3px 2px 0 2px;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--nd-dur-2) var(--nd-ease);
}
.nd-sort[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.nd-sort .nd-menu__panel { min-width: 220px; }
.nd-menu__item[aria-checked="true"],
.nd-menu__item[aria-current="true"] { color: var(--nd-ink); font-weight: var(--nd-fw-semibold); }
.nd-menu__item[aria-checked]::after {
    content: "";
    width: 10px;
    height: 6px;
    margin-left: auto;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg) translateY(-2px);
}
.nd-menu__item[aria-checked="true"]::after { border-color: var(--nd-accent); }
.nd-menu__item:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: -2px; }

/* ---------------------------------------------------------------------------
 * Rail: horizontal chip/tab rail with mask fades and hover-only arrows.
 * <div class="nd-rail" data-nd-rail><div class="nd-rail__track" tabindex="0" aria-label="Categories">…chips…</div></div>
 * JS adds the arrow buttons and toggles .can-left/.can-right.
 * ------------------------------------------------------------------------- */
.nd-rail { position: relative; min-width: 0; }
.nd-rail__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
    border-radius: var(--nd-radius-sm);
}
.nd-rail__track::-webkit-scrollbar { display: none; }
.nd-rail__track > * { flex: none; scroll-snap-align: start; }
.nd-rail__track:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
.nd-rail.can-right .nd-rail__track { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent); }
.nd-rail.can-left .nd-rail__track { -webkit-mask-image: linear-gradient(90deg, transparent, black 48px); mask-image: linear-gradient(90deg, transparent, black 48px); }
.nd-rail.can-left.can-right .nd-rail__track { -webkit-mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent); }
.nd-rail__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nd-line);
    border-radius: 50%;
    background: var(--nd-surface);
    color: var(--nd-ink);
    box-shadow: var(--nd-shadow-2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--nd-dur-2) var(--nd-ease);
}
.nd-rail__arrow svg { width: 16px; height: 16px; }
.nd-rail__arrow--prev { left: -4px; }
.nd-rail__arrow--next { right: -4px; }
@media (hover: hover) and (pointer: fine) {
    .nd-rail.can-left .nd-rail__arrow--prev,
    .nd-rail.can-right .nd-rail__arrow--next { display: grid; }
    .nd-rail:hover .nd-rail__arrow { opacity: 1; }
}
.nd-rail__arrow:focus-visible { opacity: 1; outline: 2px solid var(--nd-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * KPI tile (T2): icon + label → value → delta → optional sparkline at the bottom.
 * ------------------------------------------------------------------------- */
.nd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.nd-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-radius-lg);
    background: var(--nd-surface);
    box-shadow: var(--nd-shadow-1);
    color: var(--nd-ink-2);
    text-decoration: none;
}
a.nd-kpi:hover { border-color: var(--nd-line-strong); box-shadow: var(--nd-shadow-2); }
.nd-kpi__label { display: flex; align-items: center; gap: 8px; color: var(--nd-muted); font: var(--nd-fw-medium) var(--nd-fs-13)/1.3 var(--nd-font); }
.nd-kpi__label svg { flex: none; width: 16px; height: 16px; color: var(--nd-ink-2); }
.nd-kpi__value { margin: 0; color: var(--nd-ink); font: var(--nd-fw-bold) var(--nd-fs-30)/1.05 var(--nd-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.nd-kpi__delta { color: var(--nd-muted); font: var(--nd-fw-medium) var(--nd-fs-13)/1.3 var(--nd-font); font-variant-numeric: tabular-nums; }
.nd-kpi__delta--up { color: var(--nd-success-ink); }
.nd-kpi__delta--down { color: var(--nd-danger-ink); }
.nd-kpi__spark { display: block; width: 100%; height: 32px; margin-top: auto; color: var(--nd-accent); }

/* ---------------------------------------------------------------------------
 * Icon picker shell (T2): an .nd-menu with search, a 6-column grid and a preview.
 * No SVG upload, ever; "Use a custom icon name" reveals a plain text field.
 * ------------------------------------------------------------------------- */
.nd-icon-picker { position: relative; display: inline-block; }
.nd-icon-picker > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--nd-line-strong); border-radius: var(--nd-radius-sm); background: var(--nd-surface); color: var(--nd-ink); font: var(--nd-fw-medium) var(--nd-fs-14)/1 var(--nd-font); cursor: pointer; list-style: none; }
.nd-icon-picker > summary::-webkit-details-marker { display: none; }
.nd-icon-picker__preview { display: grid; place-items: center; width: 40px; height: 32px; border-radius: var(--nd-radius-xs); background: var(--nd-surface-2); color: var(--nd-ink); }
.nd-icon-picker__preview svg, .nd-icon-picker__preview .dashicons { width: 20px; height: 20px; font-size: 20px; }
.nd-icon-picker .nd-menu__panel { left: 0; right: auto; width: 312px; padding: 12px; transform-origin: top left; }
.nd-icon-picker__search { width: 100%; margin: 0 0 10px; }
.nd-icon-picker__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.nd-icon-picker__option {
    display: grid; place-items: center; aspect-ratio: 1; margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--nd-radius-sm);
    background: none; color: var(--nd-ink-2); cursor: pointer;
}
.nd-icon-picker__option:hover { background: var(--nd-surface-2); color: var(--nd-ink); }
.nd-icon-picker__option[aria-pressed="true"] { border-color: var(--nd-accent-line); background: var(--nd-accent-soft); color: var(--nd-accent-ink); }
.nd-icon-picker__option svg, .nd-icon-picker__option .dashicons { width: 20px; height: 20px; font-size: 20px; }
.nd-icon-picker__option[hidden] { display: none; }
.nd-icon-picker__custom { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nd-line); }

/* ---------------------------------------------------------------------------
 * Accent discipline helpers (§3.3): the accent marks action and state only.
 * ------------------------------------------------------------------------- */
.nd-pagination .is-current,
.nd-pagination [aria-current="page"] {
    border-color: var(--nd-ink) !important;
    background: var(--nd-ink) !important;
    color: var(--nd-surface) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Reveal and print safety (§3.3). Content is never left invisible: anything still
 * hidden 1.5s after load is shown (html.nd-reveal-all), print shows everything, and
 * reduced motion never hides anything.
 * ------------------------------------------------------------------------- */
html.nd-reveal-all [data-nds-reveal],
html.nd-reveal-all [data-nd-reveal],
html.nd-reveal-all [data-nd-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important; /* the safety net is instant: no half-faded content */
}
@media (prefers-reduced-motion: reduce) {
    [data-nds-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print {
    [data-nds-reveal],
    [data-nd-reveal],
    [data-nd-reveal-stagger] > *,
    .is-reveal-ready { opacity: 1 !important; transform: none !important; transition: none !important; }
    .nd-toast-region, .nd-sticky-cta, .nd-sheet, .nd-progress, .ndn-tabbar, .ndn-sheet,
    .nd-rail__arrow, [data-nd-print="hide"] { display: none !important; }
    .ndn { position: static !important; box-shadow: none !important; }
    html.nd-has-sticky-bar body, html.ndn-has-tabbar body { padding-bottom: 0 !important; }
    .nd-card, .nd-kpi, .nd-ecard { break-inside: avoid; box-shadow: none !important; }
}

/* The float pill (archive/map) steps aside while a toast is showing (html.nd-toast-open). */
html.nd-toast-open .nd-floatpill { opacity: 0 !important; pointer-events: none !important; }