@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@500;600;700&display=swap");

:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --bg-elevated: #fbfcfd;
    --text: #172033;
    --surface: #ffffff;
    --surface-alt: #f7f8fb;
    --surface-nested: #eef1f5;
    --surface-muted: #f8fafc;
    --surface-2: #eef1f5;
    --surface-border: #e4e8ee;
    --card-border: #e4e8ee;
    --accent: #2563eb;
    --accent-contrast: #fff;
    /* Filled controls paint --accent-fill, not --accent. In dark the accent is
       brightened for legible link text on black, which drops white-on-accent
       button text to ~3:1 — so the fill stays a deeper blue there. */
    --accent-fill: var(--accent);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
    --accent-soft-border: color-mix(in srgb, var(--accent) 30%, #fff);
    --accent-soft-strong: color-mix(in srgb, var(--accent) 8%, #fff);
    --heading: #0c1220;
    --heading-alt: #172033;
    --muted: #5a6b7e;
    --muted-strong: #3f5063;
    --card-text: #172033;
    --label: #2c3d52;
    --table-border: #e4e8ee;
    --table-row-border: #eef1f5;
    --input-border: #c9d3de;
    --modal-bg: #ffffff;
    --shadow-color: rgba(15, 23, 42, .07);
    --control-bg: #ffffff;
    --control-hover-bg: #eef1f5;
    /* Bootstrap form tokens — disabled inputs read --bs-secondary-bg; without these
       dark mode keeps Bootstrap's light gray fill with our light --text ink. */
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-secondary-bg: var(--surface-nested);
    --bs-secondary-color: var(--muted-strong);
    --bs-tertiary-bg: var(--surface-alt);
    --bs-border-color: var(--input-border);
    --bs-emphasis-color: var(--heading);
    --badge-soft-bg: #e0edff;
    --badge-soft-fg: #1d4ed8;
    --badge-warn-bg: #fff4dc;
    --badge-warn-fg: #956013;
    --badge-error-bg: #fde9ea;
    --badge-error-fg: #a63d46;
    --badge-vendor-bg: #fff1e6;
    --badge-vendor-fg: #9a3412;
    --badge-vendor-border: #fdba74;
    --badge-blocked-bg: #fef2f2;
    --badge-blocked-fg: #b91c1c;
    --badge-blocked-border: #fecaca;
    --heatmap-empty: #e8edf3;
    --page-glow: transparent;
    --surface-hover: #eef1f5;
    --ring: color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
    --divider: var(--surface-border, #e4e8ee);
    --surface-raised: #ffffff;
    --surface-glass: rgba(255, 255, 255, .86);
    --surface-inset: #eef1f5;
    --ambient-accent: color-mix(in srgb, var(--accent) 8%, transparent);

    /* —— Sidebar rail ——
       The rail is dark in BOTH themes: deep navy on light chrome, slightly deeper
       than the canvas on dark. Ink tokens are fixed light values. */
    --sidebar-bg: #0f2544;
    --sidebar-bg-deep: #0b1c34;
    --nav-link-color: #c7d5e8;
    --nav-ink-strong: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, .07);
    --nav-active-bg: #2563eb;
    --nav-active-fg: #ffffff;
    --nav-group-fg: #7f9bc4;
    --nav-line: rgba(255, 255, 255, .1);

    /* Type families — every rule should reach the fonts through these two,
       so a future per-tenant font swap is a one-line change. */
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-display: var(--font-body);

    /* Motion — Emil Kowalski curves. Stronger than built-in CSS easings;
       ease-out starts fast so the interface feels like it heard the user. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press: 140ms;
    --dur-fast: 160ms;
    --dur: 220ms;
    --dur-modal: 280ms;
    --press-scale: 0.97;

    /* Spacing scale */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;

    /* Radius scale */
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Elevation scale */
    --shadow-xs: 0 1px 2px var(--shadow-color, rgba(21, 35, 31, .05));
    --shadow-sm: 0 1px 2px var(--shadow-color, rgba(21, 35, 31, .06)), 0 1px 3px var(--shadow-color, rgba(21, 35, 31, .04));
    --shadow-md: 0 8px 24px var(--shadow-color, rgba(21, 35, 31, .08));
    --shadow-lg: 0 20px 48px var(--shadow-color, rgba(21, 35, 31, .14));
    /* Inner top highlight. Reads as a lit edge on dark surfaces, invisible on light. */
    --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, .5);

    /* Type scale */
    --font-size-xs: .75rem;
    --font-size-sm: .85rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.4rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.15rem;
    --font-size-4xl: 2.6rem;

    /* Touch target */
    --tap-target: 2.75rem;

    /* —— Safe area (notch / home indicator) ——
       Fallback lives INSIDE the token, not at each call site, so every consumer
       gets a valid value even where env() is unsupported; a bare env() with no
       fallback computes to nothing inside calc() and can invalidate the whole
       declaration. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* —— Soft keyboard (MAUI / mobile web) ——
       Written by wwwroot/keyboard.js from window.visualViewport. */
    --keyboard-inset: 0px;

    /* —— Mobile shell ——
       --gutter is the single density knob for phone padding; widened at the sm/lg
       breakpoints below. --tabbar-* sizes the bottom tab bar (Layout/AppTabBar.razor). */
    --gutter: 1rem;
    --tabbar-h: 4rem;
    --tabbar-space: calc(var(--tabbar-h) + var(--safe-bottom) + .35rem);
}

/* --gutter widens at the same two content-density tiers as everything else,
   so the one knob tracks the sidebar-eats-space arithmetic in the
   BREAKPOINT SCALE comment below instead of drifting from it. */
@media (min-width: 641px) {
    :root { --gutter: 1.5rem; }
}
@media (min-width: 1201px) {
    :root { --gutter: 2rem; }
}

/* ============================================================================
   BREAKPOINT SCALE — four named tiers, two axes. Do not add a fifth without
   updating this comment; do not use a raw pixel value in a new @media rule.

   Axis A — SHELL (true viewport). Where the drawer replaces the rail, where
   safe-area padding applies, where inputs need 16px to stop iOS auto-zoom,
   where the burger and the bottom tab bar appear. Layout components use 900px;
   micro-phone tweaks remain at 640px / 420px where noted.
     sm:  max-width: 900px  /  min-width: 901px  (shell — Layout/*.razor.css)
     xs:  max-width: 420px  (SE/mini escape hatch)

   Axis B — CONTENT (available width, not viewport width). Where a grid
   collapses, a table becomes cards, a kanban becomes swipe lanes. Shell and
   content tiers now share the same 900/901px breakpoint so iPad portrait
   gets the drawer and full-width content instead of a cramped rail.
     md:  max-width: 900px  /  min-width: 901px
     lg:  max-width: 1200px /  min-width: 1201px

   Container queries (@container pws/pb-admin) are a separate, correct tool
   for content that resizes against a parent other than the viewport (the
   public-site builder's preview frame, admin drawers) — they are not part
   of this scale and should not be folded into it.
   ============================================================================ */
/* ============================================================================
   DARK PALETTE — DUPLICATED ON PURPOSE. Edit both blocks together.

   theme-boot.js only writes data-theme when the user picks an explicit theme,
   so "System" has no attribute to hang a selector on and needs the media query.
   A selector list cannot straddle a media query, hence the copy. Do not try to
   collapse these by having JS resolve System to data-theme="dark" — that breaks
   live OS theme changes.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    /* DARK PALETTE (1 of 2) — keep in sync with :root[data-theme="dark"] below.
       Layered blue-gray surfaces (not OLED black): clear elevation, soft borders,
       subtle accent wash — same vocabulary as modern product UIs (Linear, Vercel). */
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #08090c;
        --bg-elevated: #0b0d12;
        --text: #eef1f5;
        --surface: #11141a;
        --surface-alt: #171b23;
        --surface-nested: #1d222c;
        --surface-muted: #171b23;
        --surface-2: #171b23;
        --surface-border: rgba(255, 255, 255, .075);
        --card-border: rgba(255, 255, 255, .1);
        --accent: #7cb8ff;
        --accent-contrast: #ffffff;
        --accent-fill: #3b82f6;
        --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
        --accent-soft-border: color-mix(in srgb, var(--accent) 26%, var(--surface-nested));
        --accent-soft-strong: color-mix(in srgb, var(--accent) 9%, var(--surface-alt));
        --heading: #fbfcfe;
        --heading-alt: #e7ebf1;
        --muted: #8f9baa;
        --muted-strong: #b7c0cd;
        --card-text: #f2f4f8;
        --label: #c7ced8;
        --table-border: rgba(255, 255, 255, .08);
        --table-row-border: rgba(255, 255, 255, .05);
        --input-border: rgba(255, 255, 255, .13);
        --modal-bg: #12161d;
        --shadow-color: rgba(0, 0, 0, .5);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .32);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .04);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .045);
        --shadow-lg: 0 28px 72px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .055);
        --control-bg: #0d1015;
        --control-hover-bg: #181d25;
        --bs-body-color: var(--text);
        --bs-body-bg: var(--bg);
        --bs-secondary-bg: var(--surface-nested);
        --bs-secondary-color: var(--muted-strong);
        --bs-tertiary-bg: var(--surface-alt);
        --bs-border-color: var(--input-border);
        --bs-emphasis-color: var(--heading);
        --surface-hover: #1a1f28;
        --divider: rgba(255, 255, 255, .075);
        --ring: color-mix(in srgb, var(--accent) 48%, transparent);
        --surface-raised: #151920;
        --surface-glass: rgba(15, 18, 24, .82);
        --surface-inset: #0d1015;
        --ambient-accent: color-mix(in srgb, var(--accent) 9%, transparent);
        /* Rail sits one step below the canvas — same family, not a flat black slab. */
        --sidebar-bg: #07080b;
        --sidebar-bg-deep: #040506;
        --nav-link-color: #cbd5e1;
        --nav-ink-strong: #ffffff;
        --nav-hover-bg: rgba(255, 255, 255, .07);
        --nav-active-bg: #2563eb;
        --nav-active-fg: #ffffff;
        --nav-group-fg: #94a3b8;
        --nav-line: rgba(255, 255, 255, .08);
        --badge-soft-bg: color-mix(in srgb, var(--accent) 18%, transparent);
        --badge-soft-fg: color-mix(in srgb, var(--accent) 55%, #fff);
        --badge-warn-bg: rgba(234, 179, 8, .14);
        --badge-warn-fg: #fbbf24;
        --badge-error-bg: rgba(248, 113, 113, .14);
        --badge-error-fg: #fca5a5;
        --badge-vendor-bg: rgba(251, 146, 60, .14);
        --badge-vendor-fg: #fdba74;
        --badge-vendor-border: rgba(251, 146, 60, .32);
        --badge-blocked-bg: rgba(248, 113, 113, .14);
        --badge-blocked-fg: #fca5a5;
        --badge-blocked-border: rgba(248, 113, 113, .32);
        --heatmap-empty: rgba(255, 255, 255, .07);
        --page-glow: color-mix(in srgb, var(--accent) 8%, transparent);
        --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, .055);
    }
}
/* DARK PALETTE (2 of 2) — keep in sync with the media-query block above. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #08090c;
    --bg-elevated: #0b0d12;
    --text: #eef1f5;
    --surface: #11141a;
    --surface-alt: #171b23;
    --surface-nested: #1d222c;
    --surface-muted: #171b23;
    --surface-2: #171b23;
    --surface-border: rgba(255, 255, 255, .075);
    --card-border: rgba(255, 255, 255, .1);
    --accent: #7cb8ff;
    --accent-contrast: #ffffff;
    --accent-fill: #3b82f6;
    --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
    --accent-soft-border: color-mix(in srgb, var(--accent) 26%, var(--surface-nested));
    --accent-soft-strong: color-mix(in srgb, var(--accent) 9%, var(--surface-alt));
    --heading: #fbfcfe;
    --heading-alt: #e7ebf1;
    --muted: #8f9baa;
    --muted-strong: #b7c0cd;
    --card-text: #f2f4f8;
    --label: #c7ced8;
    --table-border: rgba(255, 255, 255, .08);
    --table-row-border: rgba(255, 255, 255, .05);
    --input-border: rgba(255, 255, 255, .13);
    --modal-bg: #12161d;
    --shadow-color: rgba(0, 0, 0, .5);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .045);
    --shadow-lg: 0 28px 72px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .055);
    --control-bg: #0d1015;
    --control-hover-bg: #181d25;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-secondary-bg: var(--surface-nested);
    --bs-secondary-color: var(--muted-strong);
    --bs-tertiary-bg: var(--surface-alt);
    --bs-border-color: var(--input-border);
    --bs-emphasis-color: var(--heading);
    --surface-hover: #1a1f28;
    --divider: rgba(255, 255, 255, .075);
    --ring: color-mix(in srgb, var(--accent) 48%, transparent);
    --surface-raised: #151920;
    --surface-glass: rgba(15, 18, 24, .82);
    --surface-inset: #0d1015;
    --ambient-accent: color-mix(in srgb, var(--accent) 9%, transparent);
    --sidebar-bg: #07080b;
    --sidebar-bg-deep: #040506;
    --nav-link-color: #cbd5e1;
    --nav-ink-strong: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, .07);
    --nav-active-bg: #2563eb;
    --nav-active-fg: #ffffff;
    --nav-group-fg: #94a3b8;
    --nav-line: rgba(255, 255, 255, .08);
    --badge-soft-bg: color-mix(in srgb, var(--accent) 18%, transparent);
    --badge-soft-fg: color-mix(in srgb, var(--accent) 55%, #fff);
    --badge-warn-bg: rgba(234, 179, 8, .14);
    --badge-warn-fg: #fbbf24;
    --badge-error-bg: rgba(248, 113, 113, .14);
    --badge-error-fg: #fca5a5;
    --badge-vendor-bg: rgba(251, 146, 60, .14);
    --badge-vendor-fg: #fdba74;
    --badge-vendor-border: rgba(251, 146, 60, .32);
    --badge-blocked-bg: rgba(248, 113, 113, .14);
    --badge-blocked-fg: #fca5a5;
    --badge-blocked-border: rgba(248, 113, 113, .32);
    --heatmap-empty: rgba(255, 255, 255, .07);
    --page-glow: color-mix(in srgb, var(--accent) 8%, transparent);
    --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, .055);
}
:root[data-theme="light"] {
    color-scheme: light;
}

/* Tenant brand ink. --tenant-accent is the raw swatch (inline on .page / .login-shell).
   Do not set --accent inline: that navy/#1C2856 brand would beat this block and
   paint links, .btn-link, and every color:var(--accent) as dark-on-dark.
   Dark mode floors lightness so the hue stays branded and still reads on --surface. */
.page,
.login-shell {
    --accent: var(--tenant-accent);
    --portal-accent: var(--accent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .page,
    :root:not([data-theme="light"]) .login-shell {
        --accent: color-mix(in srgb, var(--tenant-accent, #60a5fa) 42%, #fff);
        --accent: oklch(from var(--tenant-accent, #60a5fa) max(0.78, l) c h);
        --portal-accent: var(--accent);
    }
}
:root[data-theme="dark"] .page,
:root[data-theme="dark"] .login-shell {
    --accent: color-mix(in srgb, var(--tenant-accent, #60a5fa) 42%, #fff);
    --accent: oklch(from var(--tenant-accent, #60a5fa) max(0.78, l) c h);
    --portal-accent: var(--accent);
}

/* ============================================================================
   DESIGN ENGINEERING — press, origin, enter, reduced motion.
   Buttons scale on press. Modals scale from center. Popovers from their
   trigger. Sheets slide from their own height. Command palette does not
   animate (opened hundreds of times a day). Hover is gated to fine pointers.
   ============================================================================ */

.btn,
.icon-btn,
.tab-item,
.view-as-chip,
.nav-expand-btn,
.nav-collapse-btn,
.nav-search,
.nav-burger,
.nav-burger--top-row,
.workspace-select,
.account-menu-toggle,
.account-menu-item,
.mkt-btn-primary,
.mkt-btn-secondary,
.mkt-btn-ghost,
.mkt-audience-chip,
.wizard-step-btn,
.choice-card,
.event-option,
.fp-toggle-pill,
.help-trigger,
.modal-close,
.toast-dismiss,
.toast-action {
    transition-property: transform, background-color, border-color, color, box-shadow, opacity, filter;
    transition-duration: var(--dur-press, 140ms);
    transition-timing-function: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.btn:active:not(:disabled),
.icon-btn:active,
.tab-item:active,
.view-as-chip:active,
.nav-expand-btn:active,
.nav-collapse-btn:active,
.nav-search:active,
.mkt-btn-primary:active,
.mkt-btn-secondary:active,
.mkt-btn-ghost:active,
.mkt-audience-chip:active,
.wizard-step-btn:active:not(:disabled),
.choice-card:active,
.help-trigger:active,
.modal-close:active {
    transform: scale(var(--press-scale, 0.97));
}

/* Command palette is a keyboard habit. Instant, like Raycast. */
.cmdk-backdrop,
.cmdk-panel {
    animation: none !important;
    transition: none !important;
}

/* Desktop modals: origin-center, never scale(0). Combine with the centering translate. */
@media (min-width: 901px) {
    .modal-dialog,
    .modal-panel,
    .help-modal {
        transform-origin: center;
        opacity: 1;
        transition:
            transform var(--dur-modal, 280ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
            opacity var(--dur-modal, 280ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    }
    .modal-dialog,
    .modal.show .modal-dialog {
        transform: translate(-50%, -50%) scale(1);
        @starting-style {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.96);
        }
    }
    .modal-panel,
    .help-modal {
        transform: scale(1);
        @starting-style {
            opacity: 0;
            transform: scale(0.96);
        }
    }
    .modal-backdrop,
    .help-modal-backdrop {
        transition: opacity var(--dur-modal, 280ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
        @starting-style { opacity: 0; }
    }
}

/* Popovers scale from the trigger, not from center. */
.ss-menu,
.account-menu-panel,
.pb-promote-dropdown,
.section-nav-menu {
    transform-origin: var(--transform-origin, top center);
    opacity: 1;
    transform: scale(1);
    transition:
        transform 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        opacity 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    @starting-style {
        opacity: 0;
        transform: scale(0.96);
    }
}
.account-menu-panel {
    transform-origin: top right;
}

/* Hover only on devices that actually hover. Touch would otherwise leave a stuck highlight. */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        box-shadow: var(--shadow-md);
    }
    .icon-btn:hover {
        background: var(--surface-hover, #eef1f5);
        border-color: var(--surface-border, #e4e8ee);
        color: var(--heading, #0c1220);
    }
    a.metric:hover,
    button.metric:hover {
        border-color: var(--accent-soft-border);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    .cmdk-item:hover:not(.active) {
        background: var(--accent-soft);
    }
}

@media (hover: none) {
    .btn-primary:hover,
    .btn-primary:focus {
        box-shadow: var(--shadow-sm);
    }
    a.metric:hover,
    button.metric:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .icon-btn,
    .tab-item,
    .ss-menu,
    .account-menu-panel,
    .section-nav-menu,
    .toast,
    .app-tabbar,
    .modal-dialog,
    .modal-panel,
    .help-modal {
        transition: none !important;
        animation: none !important;
    }
    .btn:active:not(:disabled),
    .icon-btn:active,
    .tab-item:active {
        transform: none;
        filter: brightness(0.96);
    }
}

/* Sidebar brand row is a light surface (NavMenu.razor.css); mobile top-row logos
   keep their own white plate in MainLayout.razor.css. */

html {
    /* Global safety net: one unbroken element (a fixed min-width cell, a long
       token) should never be able to drag the whole page sideways. `clip`, not
       `hidden` — `hidden` on html/body would break `position: sticky` on
       .top-row and .sidebar. */
    overflow-x: clip;
}

html, body {
    font-family: var(--font-body, "Manrope", "Segoe UI", sans-serif);
    color: var(--text, #21352f);
    background: var(--bg, #eef2f0);
    -webkit-tap-highlight-color: transparent;
}

.table td, .surface {
    overflow-wrap: anywhere;
}

a, .btn-link {
    color: var(--accent, #2563eb);
}

.btn-primary {
    color: var(--accent-contrast, #fff);
    background-color: var(--accent-fill, var(--accent, #2563eb));
    border-color: var(--accent-fill, var(--accent, #2563eb));
}

/* One focus treatment for the whole app. The old rule painted a white halo plus
   an off-brand blue, which was invisible on light chrome and wrong in dark. */
:focus-visible {
    outline: 2px solid var(--ring, rgba(31, 107, 87, .45));
    outline-offset: 2px;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}
.btn:focus-visible, .btn:active:focus-visible, .form-check-input:focus-visible {
    outline: 2px solid var(--ring, rgba(31, 107, 87, .45));
    outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px var(--ring, rgba(31, 107, 87, .45));
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

/* —— Inline SVG icons (GlIcon.razor) ——
   Sized here rather than by attribute so a container can override, and stroked
   with currentColor so an icon always matches the text it sits beside. */
.gl-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-block;
    vertical-align: -.2em;
    overflow: visible;
}
.gl-icon--sm { width: 1rem; height: 1rem; }
.gl-icon--md { width: 1.15rem; height: 1.15rem; }
.gl-icon--lg { width: 1.5rem; height: 1.5rem; }
.gl-icon--xl { width: 2rem; height: 2rem; }

/* Square icon-only control. The label lives in title/aria-label. */
.icon-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, .75rem);
    background: transparent;
    color: var(--muted-strong, #5f726c);
    cursor: pointer;
    transition: background-color var(--dur-press, 140ms) var(--ease-out), color var(--dur-press, 140ms) var(--ease-out), border-color var(--dur-press, 140ms) var(--ease-out), transform var(--dur-press, 140ms) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .icon-btn:hover {
        background: var(--surface-hover, #f2f6f4);
        border-color: var(--surface-border, #dfe7e3);
        color: var(--heading, #15231f);
    }
}
.icon-btn:focus-visible {
    outline: 2px solid var(--ring, rgba(31, 107, 87, .45));
    outline-offset: 2px;
}
.icon-btn.is-active {
    background: var(--accent-soft, #e4efe9);
    border-color: var(--accent-soft-border, #b7c9e0);
    color: var(--accent, #1f6b57);
}
@media (max-width: 640px) {  /* was 640.98 — Axis A; superseded by the pointer:coarse block in phase 2 */
    .icon-btn { width: var(--tap-target, 2.75rem); height: var(--tap-target, 2.75rem); }
}

/* Soft rounded-square glyph plate. Sits at the top of a card, or beside a
   heading, to give a block of text something to anchor to. */
.icon-chip {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md, .75rem);
    background: var(--accent-soft, #e0edff);
    color: var(--accent, #2563eb);
}
.icon-chip--sm { width: 1.85rem; height: 1.85rem; border-radius: var(--radius-sm, .5rem); }
.icon-chip--lg { width: 3rem; height: 3rem; }
.icon-chip .gl-icon { width: 1.25rem; height: 1.25rem; }
.icon-chip--sm .gl-icon { width: 1rem; height: 1rem; }
.icon-chip--lg .gl-icon { width: 1.5rem; height: 1.5rem; }
.metric > .icon-chip { margin-bottom: var(--space-3); }

h1 { font-size: clamp(1.55rem, 3vw, var(--font-size-3xl)); font-weight: 700; color: var(--heading, #15231f); letter-spacing: -.035em; font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif); }
/* h2 was 1.4rem body-sans — visually identical to h3, which flattened every page.
   The display face plus the bigger step is what restores the hierarchy. */
h2 { color: var(--heading-alt, #1c332c); font-size: var(--font-size-2xl); font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
h3 { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -.01em; }
h4, h5, h6 { font-size: var(--font-size-md); font-weight: 700; }
/* Bootstrap .h5 etc. are used as in-card headings — keep those on the body face. */
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-body, "Manrope", "Segoe UI", sans-serif); }
/* Every page emits <div class="page-header"><div><h1/><p/></div><div class="actions"/></div>,
   so the rule below upgrades all of them without touching a single page file. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--divider, #dfe7e3);
    position: relative;
}
/* Short accent rule riding on the hairline — anchors the title without shouting. */
.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 2px;
    border-radius: 1px;
    background: var(--accent, #1f6b57);
}
.page-header > :first-child { min-width: 0; }
.page-header h1 { margin: 0; line-height: 1.15; text-wrap: balance; }
.page-header p { color: var(--muted-strong, #5f726c); margin: var(--space-2) 0 0; max-width: 62ch; font-size: var(--font-size-sm); line-height: 1.5; text-wrap: pretty; }
.page-header .actions { flex: 0 0 auto; align-items: center; }
.page-header .eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--accent, #1f6b57);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.surface {
    background: var(--surface, white);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), var(--surface-sheen, none);
    padding: var(--space-5);
}
.surface + .surface { margin-top: var(--space-4); }
/* ============================================================
   Bootstrap grid replacement — the .col-md-*/.col-lg-* usage across 19 pages
   reflowed at Bootstrap's own 768px breakpoint, fighting this stylesheet's
   900px tier (three visible jumps on one screen). bootstrap.min.css is a
   precompiled artifact with no build step to re-target, so these three
   utilities replace the row/col-md-N pairs instead — same visual result,
   one reflow point (md, 900/901), no dependency on Bootstrap's scale.
   ============================================================ */
.gl-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gl-grid-2 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
}
.gl-grid-3 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .gl-grid-2,
    .gl-grid-3 {
        grid-template-columns: 1fr;
    }
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-5);
}

/* ============================================================
   .gl-filter-bar / .gl-filter-field — shared filter toolbar.
   Desktop: flex wrap. Mobile (≤900): CSS grid so fields stretch
   and never fight with fixed min-width inline styles.
   ============================================================ */
.gl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: .85rem;
}
.gl-filter-field {
    flex: 0 1 12rem;
    min-width: 10rem;
    max-width: 100%;
}
.gl-filter-field--grow {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.gl-filter-field label,
.gl-filter-field .field-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--label, var(--muted-strong, #5f726c));
    font-size: .78rem;
    font-weight: 650;
}
.gl-filter-field .form-select,
.gl-filter-field .form-control,
.gl-filter-field .ss-wrap {
    width: 100%;
    min-width: 0;
}
.gl-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
@media (max-width: 900px) {
    .gl-filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: .65rem .75rem;
        margin-bottom: 1rem;
    }
    .gl-filter-field,
    .gl-filter-field--grow {
        flex: none;
        min-width: 0;
        max-width: none;
    }
    .gl-filter-field--grow,
    .gl-filter-field--full {
        grid-column: 1 / -1;
    }
    .gl-filter-actions {
        grid-column: 1 / -1;
        margin-left: 0;
    }
    .gl-filter-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: var(--tap-target);
    }
}
@media (max-width: 420px) {
    .gl-filter-bar {
        grid-template-columns: 1fr;
    }
}
.metric-grid > .metric + .metric,
.metric-grid > .surface + .surface { margin-top: 0; }
.metric-grid + .surface,
.metric-grid + .metric-grid,
.people-subnav + .metric-grid { margin-top: var(--space-5); }
:not(.metric-grid) > .metric + .metric { margin-top: var(--space-5); }
.metric {
    position: relative;
    overflow: hidden;
    /* Accent-tinted top wash — the same treatment .portal-dash-panel already used,
       generalised so every metric tile across the app picks it up. */
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent, #1f6b57) 7%, var(--surface, #fff)) 0%, var(--surface, #fff) 55%),
        var(--surface, #fff);
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm), var(--surface-sheen, none);
    transition: box-shadow var(--dur, .22s) var(--ease-out, ease), border-color var(--dur, .22s) var(--ease-out, ease), transform var(--dur, .22s) var(--ease-out, ease);
}
button.metric {
    display: block;
    width: 100%;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
@media (hover: hover) and (pointer: fine) {
    button.metric:hover { border-color: var(--accent-soft-border, #b7c9e0); box-shadow: var(--shadow-md); transform: translateY(-1px); }
}
button.metric:focus-visible { outline: 2px solid var(--accent, #1f6b57); outline-offset: 2px; }
button.metric.is-active {
    border-color: var(--accent, #1f6b57);
    box-shadow: 0 0 0 1px var(--accent, #1f6b57);
}
a.metric { display: block; text-decoration: none; color: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
    a.metric:hover { border-color: var(--accent-soft-border, #b7c9e0); box-shadow: var(--shadow-md); transform: translateY(-1px); }
}
a.metric:focus-visible { outline: 2px solid var(--accent, #1f6b57); outline-offset: 2px; }
a.metric .metric-hint { display: block; margin-top: .45rem; color: var(--accent, #1f6b57); font-size: .72rem; font-weight: 650; }
.metric strong {
    display: block;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-size: var(--font-size-2xl);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.1;
    /* Figures line up column-to-column instead of jittering. */
    font-variant-numeric: tabular-nums;
    color: var(--card-text, var(--heading, #0f172a));
}
.metric span { color: var(--muted-strong, var(--muted, #64748b)); font-size: .82rem; }
.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}
.metric-card .metric-value {
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-size: var(--font-size-2xl);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--card-text, var(--heading, #0f172a));
}
.metric-sparkline { width: 100%; height: 32px; margin-top: .4rem; display: block; }

/* Dark: flat metric tiles on the elevated surface token (no muddy accent wash). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .metric {
        background: var(--surface);
        border-color: var(--card-border);
        box-shadow: var(--shadow-sm), var(--surface-sheen);
    }
    :root:not([data-theme="light"]) .metric span,
    :root:not([data-theme="light"]) .metric-card .muted {
        color: var(--muted-strong);
    }
    :root:not([data-theme="light"]) .icon-chip {
        background: color-mix(in srgb, var(--accent) 20%, var(--surface-nested));
        color: color-mix(in srgb, var(--accent) 70%, #fff);
    }
    :root:not([data-theme="light"]) .form-text {
        color: var(--muted-strong);
    }
}
/* Dark mode keeps .surface's hairline at sm — shadows alone carry much less
   separation against a dark background than against a light one. */
@media (prefers-color-scheme: dark) and (max-width: 640px) {
    :root:not([data-theme="light"]) .surface { border-color: var(--surface-border); }
}
@media (max-width: 640px) {
    :root[data-theme="dark"] .surface { border-color: var(--surface-border); }
}
:root[data-theme="dark"] .metric {
    background: var(--surface);
    border-color: var(--card-border);
    box-shadow: var(--shadow-sm), var(--surface-sheen);
}
:root[data-theme="dark"] .metric span,
:root[data-theme="dark"] .metric-card .muted {
    color: var(--muted-strong);
}
:root[data-theme="dark"] .icon-chip {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface-nested));
    color: color-mix(in srgb, var(--accent) 70%, #fff);
}
:root[data-theme="dark"] .form-text {
    color: var(--muted-strong);
}
.trend-chart-card { border: 1px solid var(--card-border, #e3e9f1); border-radius: var(--radius-md); padding: var(--space-4); background: var(--surface, #fff); margin-top: var(--space-4); box-shadow: var(--shadow-sm); }
.trend-chart-canvas { width: 100%; height: 220px; display: block; }
.funnel-chart { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.funnel-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: .65rem;
    min-height: 2rem;
    padding: .2rem .35rem;
    border-radius: .45rem;
    color: inherit;
    text-decoration: none;
}
a.funnel-row { cursor: pointer; transition: background .15s ease; }
a.funnel-row:hover { background: var(--surface-alt, #f4f8f6); }
a.funnel-row:focus-visible { outline: 2px solid var(--accent, #1f6b57); outline-offset: 2px; }
.funnel-label { font-size: .75rem; font-weight: 600; color: var(--text, #21352f); white-space: nowrap; }
.funnel-track {
    display: block;
    height: 1.1rem;
    border-radius: .35rem;
    background: var(--surface-nested, var(--table-border, #e7edf4));
    overflow: hidden;
}
.funnel-fill { display: block; height: 100%; border-radius: .35rem; min-width: 1.1rem; }
.funnel-value { font-size: .75rem; font-weight: 600; text-align: right; color: var(--text, #21352f); }
.funnel-value.muted { color: var(--muted, #74869b); }
.surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.surface-heading > :first-child { margin: 0; flex: 1; min-width: 0; }
.surface-heading .h5, .surface-heading h2 { margin: 0; }
.help-trigger {
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    border: 1px solid var(--surface-border, #c5d4ce);
    background: var(--surface-alt, #f4f8f6);
    color: var(--accent, #1f6b57);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.help-trigger:hover, .help-trigger:focus-visible { background: var(--accent-soft, #e4efe9); border-color: var(--accent, #1f6b57); outline: none; }
.help-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(21, 35, 31, .42);
    display: grid;
    place-items: center;
    padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
}
.help-modal {
    width: min(100%, 34rem);
    max-height: min(88dvh, 36rem);
    overflow: auto;
    background: var(--modal-bg, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.15rem 1.25rem 1.2rem;
}
.help-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.help-modal-close {
    border: 0;
    background: transparent;
    color: var(--muted-strong, #5f726c);
    font-size: 1.45rem;
    line-height: 1;
    padding: .1rem .35rem;
    border-radius: .4rem;
    cursor: pointer;
}
.help-modal-close:hover, .help-modal-close:focus-visible { background: var(--surface-alt, #eef2f0); color: var(--heading, #15231f); outline: none; }
.help-modal-body { color: var(--card-text, #304760); font-size: .95rem; line-height: 1.55; }
.help-modal-body p { margin: 0 0 .75rem; }
.help-modal-body p:last-child { margin-bottom: 0; }
.help-modal-body ul { margin: 0 0 .75rem; padding-left: 1.15rem; }
.help-modal-body li + li { margin-top: .35rem; }
.help-modal-footer { display: flex; justify-content: flex-end; margin-top: 1.1rem; }
.split { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.7fr); gap: 1rem; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.field-full { grid-column: 1/-1; }
label { color: var(--label, #3b526d); font-size: .82rem; font-weight: 650; margin-bottom: .3rem; }
.field-label-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .3rem;
}
.field-label-row > label { margin-bottom: 0; }
.field-label-row .help-trigger {
    width: 1.25rem;
    height: 1.25rem;
    font-size: .7rem;
}
.form-check > .help-trigger {
    vertical-align: middle;
    margin-left: .35rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: .7rem;
}
.form-control,.form-select { border-color: var(--input-border, #d7e0eb); border-radius: var(--radius-sm); padding: .65rem .75rem; min-height: var(--tap-target); background-color: var(--control-bg, var(--surface, #fff)); color: var(--text, #21352f); transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:disabled,
.form-control[readonly]:not([type="checkbox"]):not([type="radio"]),
.form-select:disabled {
    background-color: var(--control-bg, var(--surface, #fff));
    color: var(--muted-strong, var(--text, #21352f));
    border-color: var(--input-border, #d7e0eb);
    opacity: 1;
    -webkit-text-fill-color: var(--muted-strong, var(--text, #21352f));
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill {
    -webkit-text-fill-color: var(--text, #21352f);
    -webkit-box-shadow: 0 0 0 1000px var(--control-bg, var(--surface, #fff)) inset;
    box-shadow: 0 0 0 1000px var(--control-bg, var(--surface, #fff)) inset;
    caret-color: var(--text, #21352f);
    transition: background-color 99999s ease-out;
}
.form-control:focus, .form-select:focus { border-color: var(--accent, #1f6b57); }
.form-control::placeholder,
.form-select::placeholder {
    color: var(--muted, #74869b);
    opacity: 1;
}
/* Native selects need extra right padding so option text does not collide with the caret. */
select.form-select,
select.form-control,
select.workspace-select {
    padding-right: 2.5rem;
    color-scheme: inherit;
}
select.form-select-sm {
    padding-right: 2rem;
}
select option,
.form-select option,
.form-control option,
.workspace-select option {
    background-color: var(--surface, #fff);
    color: var(--text, #21352f);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 650;
    min-height: var(--tap-target);
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.25;
    /* .surface sets overflow-wrap: anywhere for body copy. Labels must never
       break into "T a b l e" when a flex row gets tight — grow or wrap the
       row instead. Opt out with white-space: normal where a chip is meant to
       wrap (e.g. .pws-ask-ai-chips). */
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    transition:
        background-color var(--dur-press, 140ms) var(--ease-out),
        border-color var(--dur-press, 140ms) var(--ease-out),
        box-shadow var(--dur-press, 140ms) var(--ease-out),
        transform var(--dur-press, 140ms) var(--ease-out),
        color var(--dur-press, 140ms) var(--ease-out);
}
.btn-sm { min-height: 2.35rem; padding-left: .75rem; padding-right: .75rem; }
.btn:active:not(:disabled) { transform: scale(var(--press-scale, 0.97)); }
.btn-primary { background: var(--accent-fill, var(--accent, #2563eb)); border-color: var(--accent-fill, var(--accent, #2563eb)); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { box-shadow: var(--shadow-md); }
}
.btn-outline-secondary {
    color: var(--text, #21352f);
    border-color: color-mix(in srgb, var(--surface-border, #dfe7e3) 70%, var(--muted-strong, #5f726c));
    background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    color: var(--heading, #15231f);
    background: var(--surface-hover, var(--surface-alt, #edf3f0));
    border-color: color-mix(in srgb, var(--surface-border, #dfe7e3) 55%, var(--muted-strong, #5f726c));
}
.btn-outline-primary,
.btn-outline-danger {
    background-color: transparent;
}
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md, .75rem);
    /* Clips the header/row rules to the rounded corner instead of letting them
       run past it. overflow-x already establishes the clip on the x axis. */
    overflow-y: hidden;
}
.table {
    margin: 0;
    color: var(--text, #304760);
    --bs-table-color: var(--text, #304760);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--table-border, #e7edf4);
    --bs-table-striped-bg: var(--surface-alt, #fbfcfe);
    --bs-table-striped-color: var(--text, #304760);
    --bs-table-active-bg: var(--surface-nested, #f7faf8);
    --bs-table-active-color: var(--text, #304760);
    --bs-table-hover-bg: var(--surface-nested, #f7faf8);
    --bs-table-hover-color: var(--text, #304760);
    --bs-table-accent-bg: transparent;
    background-color: transparent;
}
.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    border-bottom-color: var(--table-row-border, #edf1f6);
}
.table th {
    color: var(--muted, #71839a);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom-color: var(--table-border, #e7edf4);
    white-space: nowrap;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    /* No sticky header here: .table-wrap needs overflow-x:auto, which forces
       overflow-y to a scroll container with no vertical overflow, so position:
       sticky would have nothing to stick against. */
}
.table td { border-bottom-color: var(--table-row-border, #edf1f6); vertical-align: middle; padding-top: var(--space-3); padding-bottom: var(--space-3); font-variant-numeric: tabular-nums; }
/* The first cell is the row's identity — give it the weight to read as such. */
.table > tbody > tr > td:first-child { font-weight: 600; color: var(--card-text, #183451); }
.table > tbody > tr { transition: background-color var(--dur-fast, .16s) ease; }

/* ============================================================
   Touch targets — devices whose PRIMARY pointer is a finger, not
   tablet width. Placed after the base control definitions so it can
   override them; later max-width media queries still win below their
   breakpoint (source order), which is deliberate — a phone gets both
   this block's sizing AND the density rules in the ≤640/900 tiers.

   `pointer: coarse` reports the primary pointing device, so a
   touchscreen laptop with a mouse attached still reports `fine` and
   is unaffected — this is not a viewport-width media query.
   ============================================================ */
@media (pointer: coarse) {
    .icon-btn { width: var(--tap-target); height: var(--tap-target); }

    .btn-sm { min-height: var(--tap-target); padding-left: .85rem; padding-right: .85rem; }

    .section-nav-link,
    .section-nav-more-toggle,
    .pb-tab,
    .idea-tab {
        min-height: var(--tap-target);
        display: inline-flex;
        align-items: center;
    }

    .section-nav-menu-item {
        min-height: var(--tap-target);
        display: flex;
        align-items: center;
    }

    .pb-react { min-height: 2.25rem; padding: .35rem .7rem; }

    .fp-zoom-btn { width: var(--tap-target); min-height: var(--tap-target); }

    .col-sort-btn { min-height: var(--tap-target); }

    .account-menu-item,
    .cmdk-item {
        min-height: var(--tap-target);
    }

    /* Bootstrap's default checkbox/radio is a 1rem (16px) box — well under
       the 44px target, and used across every settings and admin page. */
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
    }
    .form-check-label {
        min-height: var(--tap-target);
        display: inline-flex;
        align-items: center;
    }

    /* Press feedback — the same signal .btn:active already gives buttons,
       extended to the card/row/tab shapes that are just as tappable but had
       no acknowledgment that the tap registered. */
    a.metric:active,
    button.metric:active,
    .thread-card:active,
    .pb-tab:active,
    .wizard-step-btn:active,
    .template-thumb:active,
    a.funnel-row:active {
        transform: scale(var(--press-scale, 0.97));
    }
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
    a.metric:active,
    button.metric:active,
    .thread-card:active,
    .pb-tab:active,
    .wizard-step-btn:active,
    .template-thumb:active,
    a.funnel-row:active {
        transform: none;
        background-color: var(--surface-hover, var(--surface-alt, #edf3f0));
    }
}

/* Neutralizes hover-only affordances that otherwise "stick" after a tap on
   a touch device (the row/button stays highlighted until the next tap
   elsewhere). Paired with the block above rather than folded into it,
   since `hover: none` and `pointer: coarse` are two different queries that
   happen to correlate on phones but are conceptually distinct. */
@media (hover: none) {
    .table > tbody > tr:hover { background-color: transparent; }
    .icon-btn:hover { border-color: transparent; }
}
.badge-soft { display: inline-flex; align-items: center; border-radius: .4rem; padding: .3rem .55rem; background: var(--badge-soft-bg, #e4efe9); color: var(--badge-soft-fg, #1f6b57); font-size: .75rem; font-weight: 700; }
.badge-warn { background: var(--badge-warn-bg, #fff4dc); color: var(--badge-warn-fg, #956013); }
.badge-error { background: var(--badge-error-bg, #fde9ea); color: var(--badge-error-fg, #a63d46); }
.empty { text-align: center; color: var(--muted, #74869b); padding: var(--space-8, 2.5rem) var(--space-4, 1rem); }
.empty strong { display: block; color: var(--card-text, #38516e); font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-2); }
.empty-state span { display: block; max-width: 28rem; margin: 0 auto; }
/* Soft accent disc behind the glyph — gives an empty screen something to land on
   instead of two lines of grey text floating in whitespace. */
.empty-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill, 999px);
    background: var(--accent-soft, #e4efe9);
    color: var(--accent, #1f6b57);
}
.empty-icon .gl-icon { width: 1.65rem; height: 1.65rem; }
.page-help-trigger {
    margin-left: .4rem;
    vertical-align: .2em;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .72rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}
h1 .page-help-trigger { display: inline-grid; }
.setup-checklist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.setup-checklist-list li { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--card-border, #e7edf4); border-radius: .75rem; background: var(--surface-nested, #fbfcfd); }
.setup-checklist-list li.done { opacity: .88; background: var(--accent-soft-strong, #f3faf7); border-color: var(--accent-soft-border, #cfe5dc); }
.setup-checklist-list strong { display: block; color: var(--card-text, #183451); }
.setup-checklist-list .muted { display: block; margin-top: .15rem; color: var(--muted, #74869b); }
.setup-check { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--surface-alt, #e8eef5); color: var(--muted-strong, #52677f); font-size: .78rem; font-weight: 700; }
.setup-checklist-list li.done .setup-check { background: var(--accent, #1f6b57); color: var(--accent-contrast, #fff); }
.template-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.template-gallery-lg { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .8rem; }
.template-thumb {
    text-align: left;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--surface, #fff);
    border-radius: .75rem;
    overflow: hidden;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.template-thumb:active:not(:disabled) { transform: scale(var(--press-scale, 0.97)); }
.template-thumb:focus-visible { border-color: var(--accent, #2867d7); outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .template-thumb:hover { border-color: var(--accent, #2867d7); box-shadow: var(--shadow-sm); }
}
.template-thumb-preview { height: 4.5rem; padding: .55rem; background: var(--thumb-bg, #F4F7FB); border-bottom: 1px solid var(--table-border, #e7edf4); }
.template-thumb-bar { height: 4px; border-radius: 2px; background: var(--thumb-accent, #2867D7); margin-bottom: .45rem; }
.template-thumb-line { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--card-text, #213752) 12%, transparent); margin-bottom: .3rem; }
.template-thumb-line.short { width: 55%; }
/* Live template previews: real layout HTML scaled down inside the card.
   Authored content is always light, so pin light theme vars like .rich-editor does. */
.template-thumb-live {
    --text: #213752;
    --heading: #15231f;
    --heading-alt: #1c332c;
    --muted: #74869b;
    --muted-strong: #52677f;
    --card-text: #304760;
    --surface: #ffffff;
    --surface-alt: #f5f8fc;
    --surface-nested: #f7faf8;
    --surface-border: #dfe6ef;
    --table-border: #e7edf4;
    height: 8.5rem;
    padding: 0;
    background: #fff;
    position: relative;
    overflow: hidden;
    color-scheme: light;
}
.template-thumb-scale {
    transform: scale(.24);
    transform-origin: top left;
    width: calc(100% / .24);
    pointer-events: none;
    user-select: none;
    color: #213752;
}
.template-thumb-scale.meeting-minutes-doc { max-width: none; margin: 0; }
.template-thumb-scale.newsletter-thumb-body { padding: 1.25rem 1.5rem; font-family: Arial, Helvetica, sans-serif; }
.template-thumb-scale.newsletter-thumb-body a[data-button="true"] {
    display: inline-block;
    padding: 10px 22px;
    background: var(--thumb-accent, #2867D7);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 650;
}
.template-thumb-live::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(255, 255, 255, .9));
}
.template-thumb.selected {
    border-color: var(--accent, #2867d7);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2867d7) 30%, transparent);
}
.template-thumb-meta { padding: .55rem .65rem .7rem; }
.template-thumb-meta strong { display: block; font-size: .82rem; color: var(--card-text, #183451); }
.template-thumb-meta span { display: block; font-size: .72rem; color: var(--muted, #74869b); line-height: 1.3; margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) {
    .template-thumb { transition: none; }
    .template-thumb:active:not(:disabled) { transform: none; }
}
.branded-public-shell {
    min-height: calc(100dvh - 4rem);
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
    color-scheme: light;
    /* Public signup/pay pages stay light even when app chrome is dark.
       Pin nested surface tokens too — otherwise --surface-alt inherits the
       dark palette and cards (e.g. How to join) get dark bg + dark ink. */
    --text: var(--brand-text, #213752);
    --heading: var(--brand-text, #213752);
    --heading-alt: var(--brand-text, #213752);
    --card-text: var(--brand-text, #213752);
    --label: color-mix(in srgb, var(--brand-text, #213752) 82%, #fff);
    --muted: color-mix(in srgb, var(--brand-text, #213752) 62%, #fff);
    --muted-strong: color-mix(in srgb, var(--brand-text, #213752) 72%, #fff);
    --surface: var(--brand-surface, #fff);
    --surface-alt: #f7fafc;
    --surface-nested: #f1f5f9;
    --surface-soft: #f8fafc;
    --surface-border: #e7edf4;
    --card-border: #e7edf4;
    --input-border: #d7e2ef;
    --control-bg: #ffffff;
    --control-hover-bg: #f7fafc;
    --accent: var(--brand-accent, #1f6b57);
    --accent-contrast: var(--brand-button-text, #fff);
    background: var(--brand-bg, #f4f7fb);
    color: var(--brand-text, #213752);
}
.branded-public-card { width: min(100%, 560px); background: var(--brand-surface, #fff); border-radius: 1rem; border: 1px solid #e7edf4; padding: 1.5rem; box-shadow: 0 18px 40px rgba(21, 35, 31, .08); }
.branded-public-card--floor { width: min(100%, 56rem); padding: 1.25rem 1.5rem 1.5rem; }
.branded-public-card .btn-primary { background: var(--brand-button, #1f6b57); border-color: var(--brand-button, #1f6b57); color: var(--brand-button-text, #fff); }
.branded-public-hero { height: 7rem; border-radius: .75rem; margin: -0.25rem -0.25rem 1rem; background: linear-gradient(135deg, var(--brand-accent, #1f6b57), color-mix(in srgb, var(--brand-accent, #1f6b57) 55%, #fff)); background-size: cover; background-position: center; }
.branded-public-logo {
    display: block;
    max-height: 88px;
    max-width: 280px;
    width: auto;
    height: auto;
    margin-bottom: .75rem;
    object-fit: contain;
}
.product-list-section .product-row {
    background: var(--brand-surface, #fff);
    transition: opacity .15s ease;
}
.product-row--sold-out {
    opacity: .72;
}
.product-sold-out-badge {
    background: var(--brand-accent, #1f6b57);
    color: var(--brand-button-text, #fff);
    font-weight: 600;
    letter-spacing: .02em;
}
.product-row-actions {
    min-width: 6.5rem;
}
.vsb-checkout-inline { border: 1px solid #e7edf4; border-radius: .75rem; padding: 1rem; }
.vsb-checkout-inline-footer { display: flex; gap: .5rem; margin-top: 1rem; align-items: center; }
.event-pay-card { width: min(100%, 440px); }
.event-pay-kicker { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: .35rem; }
.event-pay-summary { border: 1px solid #e7edf4; border-radius: .85rem; padding: 1rem 1.1rem; background: #f8fafc; }
.event-pay-tier { font-size: .8rem; font-weight: 600; color: var(--brand-accent, #1f6b57); margin-bottom: .55rem; }
.event-pay-row { display: flex; justify-content: space-between; gap: 1rem; margin: .35rem 0; }
.event-pay-total { border-top: 1px solid #e7edf4; margin-top: .65rem; padding-top: .65rem; font-size: 1.05rem; }
.event-pay-methods { display: flex; flex-wrap: wrap; gap: .5rem; }

.payment-checkout-summary {
    border: 1px solid var(--surface-border, #e7edf4);
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    background: var(--surface-soft, #f8fafc);
    margin: 0 0 1rem;
}
.payment-checkout-logo {
    display: block;
    max-height: 44px;
    max-width: 150px;
    margin: 0 0 .65rem;
    object-fit: contain;
}
.payment-checkout-org {
    margin: 0 0 .35rem;
    font-size: .85rem;
}
.payment-checkout-eyebrow {
    margin: 0 0 .25rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand-accent, var(--accent, #1f6b57));
}
.payment-checkout-title {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 650;
}
.payment-checkout-desc {
    margin: 0 0 .75rem;
    color: var(--muted, #64778e);
    font-size: .95rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.payment-checkout-details { margin: 0 0 .5rem; }
.payment-checkout-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-top: 1px solid var(--surface-border, #e7edf4);
    margin-top: .65rem;
    padding-top: .65rem;
    font-size: 1.05rem;
}
.payment-checkout-amount-row strong { font-size: 1.2rem; }

.system-email-banner { border-left: 4px solid #c45c26; }
.loading { display: flex; align-items: center; gap: .65rem; color: var(--muted, #64778e); padding: 1rem 0; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--input-border, #d5deea); border-top-color: var(--accent, #1f6b57); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert { border-radius: .75rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tenant-list-panel {
    padding: var(--space-4);
    background: transparent;
    border: none;
    box-shadow: none;
}
.tenant-list-panel .loading,
.tenant-list-panel .empty {
    padding: var(--space-5);
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.tenant-cards { display: flex; flex-direction: column; gap: var(--space-5); }
.tenant-card {
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-lg);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.tenant-card-disabled { opacity: .78; }
.tenant-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--card-border, #e3e9f1);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent, #1f6b57) 6%, var(--surface, #fff)) 0%, var(--surface, #fff) 100%);
}
.tenant-card-identity { min-width: 0; flex: 1 1 16rem; }
.tenant-card-title-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.tenant-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading, #15231f);
    letter-spacing: -.02em;
    line-height: 1.25;
}
.tenant-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin-top: .4rem;
}
.tenant-card-slug {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-nested, #f7faf8);
    border: 1px solid var(--card-border, #e3e9f1);
    color: var(--muted-strong, #5f726c);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
}
.tenant-card-id {
    color: var(--muted, #74869b);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tenant-card-edit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
    max-width: 36rem;
}
.tenant-card-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    flex-shrink: 0;
}
.tenant-card-body {
    display: grid;
    grid-template-columns: minmax(16rem, .9fr) minmax(20rem, 1.25fr);
    gap: 0;
    background: var(--surface-nested, #f7faf8);
}
.tenant-card-settings {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--card-border, #e3e9f1);
    background: var(--surface, #fff);
}
.tenant-card-section {
    padding: var(--space-4) var(--space-5);
    min-width: 0;
}
.tenant-card-settings .tenant-card-section + .tenant-card-section {
    border-top: 1px solid var(--card-border, #e3e9f1);
}
.tenant-card-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.tenant-card-section-head .tenant-card-section-label { margin-bottom: 0; }
.tenant-card-section-label {
    margin: 0 0 .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #71839a);
}
.tenant-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft, #e4efe9);
    color: var(--badge-soft-fg, #1f6b57);
    font-size: .72rem;
    font-weight: 700;
}
.tenant-card-usage {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
.tenant-card-usage li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: var(--font-size-sm);
    color: var(--text, #21352f);
}
.tenant-card-usage span {
    color: var(--muted, #74869b);
    font-weight: 600;
}
.tenant-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}
.tenant-feature {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-sm);
    background: var(--surface-nested, #f7faf8);
    font-size: var(--font-size-sm);
    color: var(--text, #21352f);
    cursor: pointer;
    user-select: none;
}
.tenant-feature:hover {
    border-color: var(--accent-soft-border, #cfe5dc);
    background: var(--accent-soft-strong, #f3faf7);
}
.tenant-feature .form-check-input {
    margin: 0;
    flex-shrink: 0;
}
.tenant-card-admins {
    background: var(--surface, #fff);
}
.tenant-admin-invite {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.tenant-admin-invite .form-control { flex: 1 1 auto; min-width: 0; }
.tenant-admin-invite .btn { flex-shrink: 0; }
.tenant-admin-empty {
    margin-top: .85rem;
    padding: .85rem 1rem;
    border: 1px dashed var(--card-border, #e3e9f1);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-size-sm);
}
.tenant-admin-list {
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.tenant-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .75rem;
    align-items: center;
    padding: .7rem .85rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-sm);
    background: var(--surface-nested, #f7faf8);
}
.tenant-admin-row.is-pending {
    border-color: color-mix(in srgb, var(--badge-warn-fg, #956013) 28%, var(--card-border, #e3e9f1));
    background: color-mix(in srgb, var(--badge-warn-bg, #fff4dc) 55%, var(--surface, #fff));
}
.tenant-admin-identity {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.tenant-admin-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
}
.tenant-admin-name strong {
    color: var(--heading, #15231f);
    font-size: var(--font-size-sm);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tenant-admin-name .badge-soft {
    padding: .12rem .4rem;
    font-size: .66rem;
}
.tenant-admin-email {
    color: var(--muted, #74869b);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tenant-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}
.tenant-admin-actions .btn {
    white-space: nowrap;
}
.tenant-admin-password {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding-top: .55rem;
    margin-top: .15rem;
    border-top: 1px dashed var(--card-border, #e3e9f1);
}
.tenant-admin-password .form-control { max-width: 14rem; flex: 1 1 10rem; }
.tenant-picker { max-width: 560px; display: flex; gap: .5rem; }
.thread-section-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #71839a);
    margin-bottom: .85rem;
}
.page-header.thread-detail-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}
.page-header.thread-detail-header .actions {
    flex-wrap: wrap;
    gap: .5rem;
}
.page-header.thread-detail-header h1 {
    text-wrap: wrap;
}
.page-header.thread-detail-header p {
    max-width: none;
}
.thread-responses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.thread-original-panel {
    border-color: var(--accent-soft-border, #b7d9cf);
    background: linear-gradient(180deg, var(--accent-soft-strong, #f3faf7) 0%, var(--surface, #ffffff) 42%);
    overflow: hidden;
    max-width: 100%;
}
.thread-response-list {
    display: grid;
    gap: 1.35rem;
    max-width: 100%;
}
.thread-message {
    border-left: 3px solid color-mix(in srgb, var(--accent, #1f6b57) 70%, #fff);
    padding: .85rem 0 .85rem 1rem;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-wrap: anywhere;
}
.thread-message--original {
    border-left-color: var(--accent, #1f6b57);
    border-left-width: 4px;
    padding-top: 0;
    padding-bottom: 0;
}
.thread-response-list .thread-message {
    border: 1px solid var(--surface-border, #dfe7e3);
    border-left: 3px solid color-mix(in srgb, var(--accent, #1f6b57) 70%, #fff);
    border-radius: .65rem;
    padding: .9rem 1rem .9rem 1.05rem;
    background: var(--surface-alt, #fbfcfe);
}
.thread-response-list .thread-message--collapsed {
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.thread-response-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .35rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.thread-response-toggle:hover .thread-response-chevron,
.thread-response-toggle:focus-visible .thread-response-chevron {
    color: var(--accent, #1f6b57);
}
.thread-response-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #1f6b57) 55%, transparent);
    outline-offset: 3px;
    border-radius: .35rem;
}
.thread-response-chevron {
    grid-row: 1 / span 2;
    width: 1rem;
    margin-top: .15rem;
    color: var(--muted, #71839a);
    font-size: .95rem;
    line-height: 1.2;
}
.thread-response-toggle-main {
    min-width: 0;
    overflow-wrap: anywhere;
}
.thread-response-toggle-main strong {
    display: block;
    overflow-wrap: anywhere;
}
.thread-response-toggle-meta {
    min-width: 0;
    text-align: left !important;
    overflow-wrap: anywhere;
}
.thread-response-toggle-meta .muted {
    display: block;
    overflow-wrap: anywhere;
}
@media (min-width: 901px) {  /* was 720 — Axis B */
    .thread-response-toggle {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
    }
    .thread-response-chevron {
        flex: 0 0 auto;
        grid-row: auto;
    }
    .thread-response-toggle-main {
        flex: 1 1 auto;
    }
    .thread-response-toggle-meta {
        flex: 0 1 18rem;
        max-width: min(18rem, 42%);
        text-align: right !important;
    }
}
.thread-message-body {
    color: var(--text, #21352f);
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-wrap: break-word;
}
/* Constrain media only — applying max-width to every descendant
   crushes Outlook signature tables into a one-character column. */
.thread-message-body img {
    max-width: 100%;
    height: auto !important;
}
.thread-message-body table {
    max-width: 100%;
    border-collapse: collapse;
}
.thread-message-body a {
    color: var(--accent, #1f6b57);
}
/* Email HTML paints light canvases + dark ink. In dark mode, drop inline
   backgrounds and force theme colors so signatures stay readable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .thread-message-body,
    :root:not([data-theme="light"]) .thread-message-body * {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--text, #e8e8e8) !important;
        border-color: var(--surface-border, #2a2a2a) !important;
    }
    :root:not([data-theme="light"]) .thread-message-body a {
        color: var(--accent, #93c5fd) !important;
    }
}
:root[data-theme="dark"] .thread-message-body,
:root[data-theme="dark"] .thread-message-body * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text, #e8e8e8) !important;
    border-color: var(--surface-border, #2a2a2a) !important;
}
:root[data-theme="dark"] .thread-message-body a {
    color: var(--accent, #93c5fd) !important;
}
.muted { color: var(--muted, #74869b); font-size: .84rem; }
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left)); }

/* Full-viewport boot splash (pre-WASM shell + Routes / public site wait) */
.boot-splash {
    background: var(--bg, #eef2f0);
}
#glq-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    margin: 0;
}
.boot-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    animation: boot-splash-in .5s ease-out both;
}
.boot-splash-mark {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: .85rem;
    animation: boot-splash-breathe 2s ease-in-out infinite;
}
.boot-splash-spinner {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
}
.boot-splash-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--accent, #1f6b57);
    border-right-color: color-mix(in srgb, var(--accent, #1f6b57) 35%, transparent);
    animation: spin .55s linear infinite;
}
.boot-splash-ring--delayed {
    inset: .35rem;
    border-top-color: color-mix(in srgb, var(--accent, #1f6b57) 55%, #fff);
    border-right-color: transparent;
    animation-duration: .8s;
    animation-direction: reverse;
}
.boot-splash-label {
    margin: 0;
    color: var(--muted, #74869b);
    font-size: .9rem;
    letter-spacing: .02em;
    animation: boot-splash-pulse 1.6s ease-in-out infinite;
}
@keyframes boot-splash-in {
    from { opacity: 0; transform: translateY(.4rem) scale(.98); }
    to { opacity: 1; transform: none; }
}
@keyframes boot-splash-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: .92; }
}
@keyframes boot-splash-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* Pull-to-refresh — driven entirely by wwwroot/pull-refresh.js (position, opacity, the
   is-ready/is-spinning classes); this only supplies the visual. Reuses .boot-splash-ring so
   the gesture's spinner matches the app's cold-start loading language. */
.pull-refresh-indicator {
    position: fixed;
    top: max(.5rem, var(--safe-top, 0px));
    left: 50%;
    z-index: 60;
    width: 2.25rem;
    height: 2.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.pull-refresh-indicator .pull-refresh-ring {
    animation-play-state: paused;
}
.pull-refresh-indicator.is-ready .pull-refresh-ring {
    border-top-color: var(--accent, #1f6b57);
}
.pull-refresh-indicator.is-spinning .pull-refresh-ring {
    animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
    .pull-refresh-indicator .pull-refresh-ring { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .boot-splash-inner,
    .boot-splash-mark,
    .boot-splash-ring,
    .boot-splash-label { animation: none !important; }
}
.login-card { width: min(100%,440px); }
.login-brand { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .55rem; background: var(--accent, #1f6b57); color: var(--accent-contrast, #fff); font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif); }
.login-brand-logo {
    display: block;
    width: fit-content;
    max-width: min(100%, 20rem);
    height: auto;
    max-height: 7rem;
    margin: 0 auto 1rem;
    object-fit: contain;
    object-position: center;
    padding: .25rem .4rem;
    box-sizing: border-box;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, #0b2540 10%, transparent);
    box-shadow: var(--shadow-sm);
}
.login-brand-mark { display: block; width: 3.25rem; height: 3.25rem; object-fit: contain; margin-bottom: 1rem; }
.password-input { position: relative; }
.password-input .form-control { padding-right: 4.25rem; }
@keyframes onAutoFillStart { from {} to {} }
@keyframes onAutoFillCancel { from {} to {} }
.password-input input:-webkit-autofill,
.login-card input:-webkit-autofill { animation-name: onAutoFillStart; }
.password-input input:not(:-webkit-autofill),
.login-card input:not(:-webkit-autofill) { animation-name: onAutoFillCancel; }
.password-toggle {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--accent, #1f6b57);
    font-size: .78rem;
    font-weight: 700;
    padding: .35rem .5rem;
    border-radius: .4rem;
    line-height: 1;
}
.password-toggle:hover, .password-toggle:focus { background: var(--accent-soft, #e4efe9); color: var(--heading, #174f41); }
.builder-shell, .newsletter-shell { display: grid; gap: 1rem; align-items: start; }
.builder-shell:has(> .builder-sidebar), .newsletter-shell:has(> .builder-sidebar) {
    grid-template-columns: minmax(250px, .7fr) minmax(0, 2.1fr);
}
.builder-sidebar { position: sticky; top: 1rem; }
.builder-main, .newsletter-workspace { min-width: 0; display: grid; gap: 1rem; }
.builder-main > .surface + .surface { margin-top: 1rem; }
.newsletter-rail { display: grid; gap: 1.15rem; }
.rail-section { padding-top: .15rem; }
.rail-section + .rail-section { border-top: 1px solid var(--table-row-border, #edf1f6); padding-top: 1rem; }
.rail-heading { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #71839a); margin-bottom: .65rem; }
.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem 1rem;
    padding: .85rem 1rem;
    background: var(--surface, #fff);
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .85rem;
}
.builder-toolbar-field {
    flex: 1 1 16rem;
    min-width: 12rem;
    display: grid;
    gap: .35rem;
}
.builder-toolbar-field label {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted, #71839a);
}
.builder-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.compose-split {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.45fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}
.compose-meta {
    display: grid;
    gap: .85rem;
    min-width: 0;
}
.compose-meta-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 56rem;
}
.compose-meta-form .compose-meta-span {
    grid-column: 1 / -1;
}
.compose-meta .form-grid {
    margin-top: 0;
}
.compose-body {
    min-width: 0;
    display: grid;
    gap: .5rem;
    align-content: start;
}
.compose-body-full {
    margin-top: .25rem;
}
.compose-body > label,
.compose-body .field-label-row {
    margin-bottom: 0;
}
.compose-body .rich-editor,
.compose-body .html-editor,
.compose-body .html-content-editor {
    min-width: 0;
}
.compose-body .editor-canvas {
    min-height: 28rem;
}
.template-grid { display: grid; gap: .55rem; }
.template-card {
    text-align: left;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--surface-alt, #f8fafc);
    border-radius: .7rem;
    padding: .7rem .8rem;
    color: inherit;
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.template-card strong { display: block; color: var(--card-text, #183451); margin-bottom: .15rem; }
.template-card span { display: block; color: var(--muted, #74869b); font-size: .78rem; line-height: 1.35; }
.template-card:active { transform: scale(var(--press-scale, 0.97)); }
.template-card:focus-visible { border-color: var(--accent, #2867d7); background: var(--surface, #fff); outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .template-card:hover { border-color: var(--accent, #2867d7); background: var(--surface, #fff); }
}
.preset-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--control-bg, #fff);
    border-radius: .55rem;
    padding: .35rem .55rem;
    font-size: .78rem;
    font-weight: 650;
    color: var(--card-text, #304760);
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.preset-chip:active { transform: scale(var(--press-scale, 0.97)); }
.preset-chip:focus-visible { border-color: var(--preset, #2867d7); outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .preset-chip:hover { border-color: var(--preset, #2867d7); background: color-mix(in srgb, var(--preset, #2867d7) 8%, var(--control-bg, #fff)); }
}
.preset-swatch { width: .75rem; height: .75rem; border-radius: 999px; display: inline-block; }
.workspace-tabs { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--card-border, #e3e9f1); padding-bottom: .65rem; }
.workspace-tabs button {
    border: 0;
    background: transparent;
    color: var(--muted, #61758c);
    font-weight: 650;
    padding: .45rem .7rem;
    border-radius: .5rem;
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.workspace-tabs button:active { transform: scale(var(--press-scale, 0.97)); }
.workspace-tabs button.active { background: var(--accent-soft, #eef4ff); color: var(--accent, #1e57b4); }
@media (hover: hover) and (pointer: fine) {
    .workspace-tabs button:hover { background: var(--accent-soft, #eef4ff); color: var(--accent, #1e57b4); }
}
.tab-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.newsletter-editor { display: grid; gap: .65rem; }
.block-palette { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.palette-label { font-size: .75rem; font-weight: 700; color: var(--muted, #71839a); text-transform: uppercase; letter-spacing: .04em; margin-right: .2rem; }
.palette-btn {
    border: 1px solid var(--input-border, #d5deea);
    background: var(--control-bg, #fff);
    border-radius: .5rem;
    padding: .35rem .6rem;
    font-size: .8rem;
    font-weight: 650;
    color: var(--card-text, #304760);
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.palette-btn:active { transform: scale(var(--press-scale, 0.97)); }
.palette-btn:focus-visible { border-color: var(--accent, #2867d7); color: var(--accent, #1e57b4); outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .palette-btn:hover { border-color: var(--accent, #2867d7); color: var(--accent, #1e57b4); background: var(--control-hover-bg, #f5f8fc); }
}
.palette-btn-smart { border-style: dashed; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: .8rem; }
.theme-width-field { grid-column: 1 / -1; display: grid; gap: .35rem; }
.theme-width-field .nl-width-toggle { flex-wrap: wrap; }
.color-field { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: .3rem .5rem; border: 1px solid var(--input-border, #d7e0eb); border-radius: .6rem; }
.color-field input { width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; }
.color-field code { font-size: .72rem; color: var(--muted-strong, #52677f); }
/* Email/HTML editors stay light ??? authored content uses light block backgrounds. */
.rich-editor {
    --text: #213752;
    --heading: #15231f;
    --heading-alt: #1c332c;
    --muted: #74869b;
    --muted-strong: #52677f;
    --card-text: #304760;
    --surface: #ffffff;
    --surface-alt: #f5f8fc;
    --surface-border: #dfe6ef;
    --input-border: #d7e0eb;
    --control-bg: #ffffff;
    --control-hover-bg: #f5f8fc;
    color-scheme: light;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    color: #213752;
}
.editor-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; padding: .5rem; background: var(--surface-alt, #f5f8fc); border-bottom: 1px solid var(--surface-border, #dfe6ef); }
.editor-toolbar select { width: 125px; }
.editor-toolbar button { border: 1px solid var(--input-border, #d5deea); background: var(--control-bg, #fff); border-radius: .35rem; min-width: 2rem; min-height: 2rem; color: var(--card-text, #304760); }
.editor-toolbar button:hover,.editor-toolbar button:focus { border-color: var(--accent, #2867d7); color: var(--accent, #1e57b4); }
.editor-toolbar button.ai-rewrite-btn {
    min-width: auto;
    padding: 0 .65rem;
    font-weight: 650;
    color: var(--accent, #1e57b4);
    border-color: color-mix(in srgb, var(--accent, #2867d7) 45%, var(--input-border, #d5deea));
    margin-left: .25rem;
}
.editor-toolbar button.ai-rewrite-btn:disabled { opacity: .65; cursor: wait; }
.editor-inline-alert { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
.editor-canvas { min-height: 320px; padding: 1rem; color: #213752; background: #fff; outline: none; overflow-wrap: anywhere; }
.editor-canvas:focus { box-shadow: inset 0 0 0 2px #82adf2; }
.editor-canvas img { max-width: 100%; height: auto; }
.editor-canvas.editor-canvas-compact {
    min-height: 9rem;
    max-height: 18rem;
    overflow: auto;
    padding: .75rem;
    font-size: .95rem;
    line-height: 1.55;
}
.nl-studio-inspector .html-content-editor { gap: .4rem; }
.nl-studio-inspector .rich-editor { border-radius: .5rem; }
.nl-studio-inspector .editor-toolbar { padding: .35rem; gap: .2rem; }
.nl-studio-inspector .editor-toolbar select,
.nl-studio-inspector .editor-toolbar .ss-wrap { width: 7.5rem; max-width: 100%; }
/* Minutes template designer: canvas IS the finished document (sample field values). */
.rich-editor:has(> .editor-canvas.meeting-minutes-doc) {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(31, 107, 87, .06), transparent 70%),
        linear-gradient(180deg, #e8efe9 0%, #f3f6f4 100%);
}
.editor-canvas.meeting-minutes-doc {
    min-height: 420px;
    max-width: 46rem;
    margin: .85rem auto 1.1rem;
    padding: 1.5rem 1.6rem 1.75rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    box-shadow: 0 10px 28px rgba(21, 35, 31, .06);
    background: #fff;
    color: var(--text, #21352f);
}
.editor-canvas.meeting-minutes-doc:focus {
    box-shadow: 0 10px 28px rgba(21, 35, 31, .06), inset 0 0 0 2px #82adf2;
}
.editor-canvas.meeting-minutes-doc .mm-field {
    background: color-mix(in srgb, var(--accent, #1f6b57) 14%, #fff);
    border-bottom: 1px dashed color-mix(in srgb, var(--accent, #1f6b57) 50%, transparent);
    border-radius: .2rem;
    padding: 0 .2rem;
    color: inherit;
    cursor: default;
    user-select: none;
}
.html-content-editor { display: grid; gap: .65rem; }
.editor-mode-tabs { margin-bottom: .15rem; }
.html-code-editor {
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.45;
    min-height: 320px;
    white-space: pre;
    tab-size: 2;
}
.landing-settings-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .9fr); gap: 1rem; align-items: start; }
.brand-settings-form { display: grid; gap: 1.25rem; padding: 1.15rem 1.25rem 1.25rem; }
.brand-settings-topbar { padding-bottom: .15rem; border-bottom: 1px solid var(--surface-border, #dfe7e3); }
.brand-settings-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
}
.brand-settings-step {
    display: grid;
    gap: .2rem;
    justify-items: center;
    text-align: center;
    padding: .55rem .35rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    background: var(--surface-alt, #fbfcfe);
    color: var(--muted, #74869b);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.brand-settings-step-num {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--control-bg, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    color: var(--label, #3b526d);
}
.brand-settings-step-label {
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .02em;
    line-height: 1.2;
}
.brand-settings-step.is-active {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft, #e4efe9);
    color: var(--card-text, #183451);
}
.brand-settings-step.is-active .brand-settings-step-num {
    background: var(--accent, #1f6b57);
    border-color: var(--accent, #1f6b57);
    color: var(--accent-contrast, #fff);
}
.brand-settings-step.is-complete:not(.is-active) {
    color: var(--card-text, #183451);
}
.brand-settings-step.is-complete .brand-settings-step-num {
    background: color-mix(in srgb, var(--accent, #1f6b57) 18%, #fff);
    border-color: color-mix(in srgb, var(--accent, #1f6b57) 34%, #fff);
    color: var(--accent, #1f6b57);
}
.brand-settings-step:focus-visible {
    outline: 2px solid var(--ring, #7dd3c0);
    outline-offset: 2px;
}
@media (hover: hover) {
    .brand-settings-step:hover:not(.is-active) {
        border-color: color-mix(in srgb, var(--accent, #1f6b57) 40%, var(--surface-border, #dfe7e3));
        background: var(--control-hover-bg, #f5f8fc);
    }
}
.brand-settings-step-head { display: grid; gap: .15rem; }
.brand-settings-section {
    display: grid;
    gap: .85rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .75rem;
    background: var(--surface-alt, #fbfcfe);
}
.brand-settings-section-head { display: grid; gap: .2rem; }
.brand-settings-section + .brand-settings-section { margin-top: 0; }
.field-hint {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--muted, #74869b);
    line-height: 1.35;
}
.brand-logo-field,
.brand-hero-field {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.brand-logo-preview,
.brand-hero-preview {
    display: grid;
    place-items: center;
    min-height: 88px;
    border: 1px dashed var(--input-border, #d7e0eb);
    border-radius: .65rem;
    background: var(--control-bg, #fff);
    overflow: hidden;
}
.brand-logo-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    padding: .25rem;
}
.brand-hero-preview {
    min-height: 72px;
    background-size: cover;
    background-position: center;
    border-style: solid;
}
.brand-logo-preview.is-empty,
.brand-hero-preview.is-empty {
    background: var(--surface-nested, #f7faf8);
}
.brand-media-empty-label {
    font-size: .78rem;
    color: var(--muted, #74869b);
    text-align: center;
    padding: .5rem;
}
.brand-media-controls { display: grid; gap: .65rem; align-content: start; }
.playlist-editor { display: grid; gap: .75rem; }
.playlist-editor-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.playlist-editor-empty {
    padding: .85rem 1rem;
    border: 1px dashed var(--input-border, #d7e0eb);
    border-radius: .65rem;
    background: var(--control-bg, #fff);
    color: var(--muted, #74869b);
    font-size: .88rem;
}
.playlist-editor-list { display: grid; gap: .65rem; }
.playlist-editor-item {
    display: grid;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    background: var(--control-bg, #fff);
}
.playlist-editor-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.playlist-editor-index {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--badge-soft-bg, #e4efe9);
    color: var(--badge-soft-fg, #1f6b57);
    font-size: .72rem;
    font-weight: 700;
}
.playlist-editor-remove {
    border: none;
    background: transparent;
    color: var(--muted, #74869b);
    font-size: 1.25rem;
    line-height: 1;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .45rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.playlist-editor-remove:hover,
.playlist-editor-remove:focus-visible {
    color: var(--text, #21352f);
    background: var(--surface-alt, #eef2f0);
    outline: none;
}
.playlist-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: .65rem;
}
.brand-settings-review dl {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: .35rem .75rem;
}
.brand-settings-review dt { margin: 0; font-size: .78rem; }
.brand-settings-review dd { margin: 0; color: var(--card-text, #183451); }
.brand-review-logo {
    display: flex;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    background: var(--control-bg, #fff);
    margin-bottom: .5rem;
}
.brand-review-logo img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}
.brand-settings-actions {
    padding-top: .35rem;
    border-top: 1px solid var(--surface-border, #dfe7e3);
}
.landing-preview-pane { position: sticky; top: 1rem; align-self: start; max-height: calc(100dvh - 2rem); display: grid; gap: .75rem; }
.landing-preview-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.landing-preview-frame {
    background: linear-gradient(180deg, #cfd8e4, #e8edf3);
    border: 1px solid var(--surface-border, #d7e0eb);
    border-radius: .85rem;
    padding: .85rem;
    overflow: auto;
    max-height: calc(100dvh - 5rem);
    box-shadow: 0 10px 28px var(--shadow-color, rgba(21, 35, 31, .05));
    color-scheme: light;
}

/* Public tenant pages + live previews stay light regardless of app chrome theme. */
.tenant-landing {
    --tenant-accent: #2563eb;
    color-scheme: light;
    /* Keep Bootstrap controls light inside public pages / previews. */
    --bs-body-color: #1e293b;
    --bs-body-bg: #ffffff;
    --bs-border-color: #d7e0eb;
    --bs-secondary-color: #5f726c;
    --bg: #eef2f0;
    --bg-elevated: #f3f6f4;
    --text: #21352f;
    --surface: #ffffff;
    --surface-alt: #fbfcfe;
    --surface-nested: #f7faf8;
    --surface-border: #dfe7e3;
    --card-border: #e3e9f1;
    --accent: var(--tenant-accent, #1f6b57);
    --accent-contrast: #fff;
    --accent-soft: color-mix(in srgb, var(--tenant-accent, #1f6b57) 16%, #fff);
    --accent-soft-border: color-mix(in srgb, var(--tenant-accent, #1f6b57) 34%, #fff);
    --accent-soft-strong: color-mix(in srgb, var(--tenant-accent, #1f6b57) 10%, #fff);
    --heading: #15231f;
    --heading-alt: #1c332c;
    --muted: #74869b;
    --muted-strong: #5f726c;
    --card-text: #183451;
    --label: #3b526d;
    --table-border: #e7edf4;
    --table-row-border: #edf1f6;
    --input-border: #d7e0eb;
    --modal-bg: #ffffff;
    --shadow-color: rgba(21, 35, 31, .05);
    --badge-soft-bg: color-mix(in srgb, var(--tenant-accent, #1f6b57) 14%, #fff);
    --badge-soft-fg: var(--tenant-accent, #1f6b57);
    --control-bg: #ffffff;
    --control-hover-bg: #f5f8fc;
    color: var(--text, #21352f);
}
.tenant-landing .btn-primary {
    background: var(--tenant-accent);
    border-color: var(--tenant-accent);
    color: #fff;
}
.tenant-landing .btn-outline-secondary {
    color: #314740;
    border-color: #d7e0dc;
    background: #fff;
}
.tenant-landing .btn-outline-secondary:hover,
.tenant-landing .btn-outline-secondary:focus {
    color: #15231f;
    background: #edf3f0;
    border-color: #d7e0dc;
}
.tenant-landing .lead { color: var(--muted-strong, #5f726c); font-size: 1.05rem; margin: .35rem 0 0; }
.tenant-logo { height: 56px; margin-bottom: .75rem; object-fit: contain; }
.tenant-hero {
    min-height: 160px;
    border-radius: .85rem;
    margin-bottom: 1rem;
    background-size: cover;
    background-position: center;
    background-color: #d7e0eb;
}
.tenant-landing-preview {
    pointer-events: none;
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .75rem;
    padding: 1rem 1.05rem 1.1rem;
    box-shadow: 0 8px 24px rgba(21, 35, 31, .08);
}
.tenant-landing-preview .surface { box-shadow: none; }
.tenant-landing-preview .page-header { margin-bottom: 0; }
.tenant-landing-preview .preview-action { cursor: default; }
.about-html img { max-width: 100%; height: auto; }
.about-html a[data-button="true"] {
    display: inline-block;
    padding: .55rem 1rem;
    border-radius: .55rem;
    background: var(--tenant-accent, #1f6b57);
    color: #fff !important;
    text-decoration: none;
    font-weight: 650;
}
.file-button { position: relative; overflow: hidden; margin: 0; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.profile-photo-placeholder,
.directory-avatar-placeholder {
    display: grid;
    place-items: center;
    background: var(--accent-soft, #e4efe9);
    color: var(--accent, #1f6b57);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.profile-photo-placeholder { width: 88px; height: 88px; border-radius: 50%; }
.directory-avatar,
.directory-avatar-placeholder { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; }
.directory-avatar { display: block; object-fit: cover; }

.member-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--accent-soft, #e4efe9);
    color: var(--accent, #1f6b57);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}
.member-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: .65rem; }
.member-avatar--md { width: 5.5rem; height: 5.5rem; font-size: 1.25rem; }
.member-avatar--lg { width: 7.5rem; height: 7.5rem; font-size: 1.65rem; }
.member-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.member-avatar-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft, #e4efe9);
    color: var(--accent, #1f6b57);
    font-weight: 700;
}

.discussion-bubble-meta,
.pb-comment-meta {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.profile-page__layout {
    display: grid;
    grid-template-columns: minmax(220px, 18rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.profile-page__section + .profile-page__section {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--surface-border, #dfe7e3);
}
.profile-page__section-title {
    margin: 0 0 1rem;
    color: var(--heading, #15231f);
    font-weight: 700;
    letter-spacing: .01em;
}
.profile-page__photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.15rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border, #dfe7e3);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent, #1f6b57) 8%, var(--surface, #fff)) 0%, var(--surface, #fff) 52%),
        var(--surface, #fff);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.profile-page__photo-card--dragover {
    border-color: var(--accent, #1f6b57);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent, #1f6b57) 16%, var(--surface, #fff)) 0%, var(--surface, #fff) 52%),
        var(--surface, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 22%, transparent);
}
.profile-page__photo-name {
    margin: 1rem 0 .2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading, #15231f);
    line-height: 1.25;
    word-break: break-word;
}
.profile-page__photo-email {
    margin: 0;
    font-size: .85rem;
    line-height: 1.35;
    word-break: break-word;
}
.profile-page__photo-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
}
.profile-page__photo-hint {
    margin: .85rem 0 0;
    text-align: left;
}
.profile-page__sms-opt-in {
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border, #dfe7e3);
    background: var(--surface-alt, #f7faf8);
}
.profile-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--surface-border, #dfe7e3);
}

@media (max-width: 900px) {  /* was 800 — Axis B */
    .profile-page__layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .profile-page__photo-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
        gap: 1rem 1.25rem;
    }
    .profile-page__photo-card .member-avatar {
        flex: 0 0 auto;
    }
    .profile-page__photo-name,
    .profile-page__photo-email {
        flex: 1 1 12rem;
        margin-top: 0;
    }
    .profile-page__photo-actions {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .profile-page__photo-hint {
        flex: 1 1 100%;
        margin-top: 0;
    }
}

.photo-crop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: color-mix(in srgb, #000000 55%, transparent);
}
.photo-crop-dialog {
    width: min(100%, 24rem);
    padding: 1.15rem 1.2rem 1.25rem;
}
.photo-crop-head { margin-bottom: .85rem; }
.photo-crop-stage {
    touch-action: none;
    user-select: none;
    cursor: grab;
    display: grid;
    place-items: center;
    padding: .5rem 0 1rem;
}
.photo-crop-stage:active { cursor: grabbing; }
.photo-crop-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    background: #d7e0dc;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 45%, transparent);
    position: relative;
}
.photo-crop-circle img {
    position: absolute;
    max-width: none;
    max-height: none;
    pointer-events: none;
}
.photo-crop-controls {
    display: grid;
    gap: .35rem;
    margin-bottom: 1rem;
}
.photo-crop-controls input[type="range"] { width: 100%; }
.photo-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
.attachment-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.attachment-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--table-row-border, #edf1f6); }
.attachment-list small { display: block; color: var(--muted, #74869b); }
.preview-stage {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, #cfd8e4, #e8edf3);
    border: 1px solid var(--surface-border, #d7e0eb);
    border-radius: .75rem;
    overflow: auto;
    text-align: center;
    color-scheme: light;
}
.preview-stage.compact .email-preview { min-height: 420px; }
.email-preview { display: block; width: 100%; min-height: 650px; margin: 0 auto; border: 0; background: #fff; transition: width .2s ease; box-shadow: 0 10px 30px rgba(28,52,84,.12); }
.email-preview.mobile { width: min(100%,390px); }
.newsletter-live-preview { display: none; }
.newsletter-live-preview .preview-stage { margin-top: .85rem; }
@media (min-width: 1201px) {  /* was 1200 — Axis B, lg */
    .newsletter-workspace.has-live-preview { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; }
    .newsletter-live-preview { display: block; position: sticky; top: 1rem; align-self: start; max-height: calc(100dvh - 2rem); overflow: auto; }
}
.search-bar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.search-bar .form-control { flex: 1 1 16rem; }
.ask-ai-box {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--accent-soft-border, #b7c9e0);
    border-radius: .9rem;
    background: linear-gradient(180deg, var(--surface-alt, #f5f9fc) 0%, var(--surface, #fff) 100%);
}
.ask-ai-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .75rem; }
.ask-ai-head strong { font-size: 1.05rem; }
.ask-ai-form .ask-ai-window { flex: 0 0 auto; width: auto; min-width: 7.5rem; }
.ask-ai-answer { border-top: 1px solid var(--surface-border, #dfe7e3); padding-top: .85rem; }
.thread-feed { display: grid; gap: .85rem; }
.thread-card { display: block; padding: 1rem 1.1rem; border: 1px solid var(--card-border, #e3e9f1); border-radius: .9rem; text-decoration: none; color: inherit; background: var(--surface-alt, #fbfcfe); }
.thread-card:hover { border-color: var(--accent-soft-border, #b7c9e0); background: var(--surface, #fff); }
.thread-card-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.thread-card p { margin: .55rem 0 0; color: var(--muted, #4d627a); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 1200px) {  /* was 1100 — Axis B, lg */
    .landing-settings-shell { grid-template-columns: 1fr; }
    .landing-preview-pane { position: static; max-height: none; }
    .landing-preview-frame { max-height: none; }
    .brand-logo-field,
    .brand-hero-field { grid-template-columns: 1fr; }
    .playlist-editor-fields { grid-template-columns: 1fr; }
    .tenant-card-body { grid-template-columns: 1fr; }
    .tenant-card-settings { border-right: none; border-bottom: 1px solid var(--card-border, #e3e9f1); }
}

@media (max-width: 640px) {
    .brand-settings-steps { grid-template-columns: repeat(5, minmax(52px, 1fr)); overflow-x: auto; padding-bottom: .15rem; }
    .brand-settings-step-label { display: none; }
    .brand-settings-review dl { grid-template-columns: 1fr; }
    .brand-settings-review dt { margin-top: .35rem; }
}

@media (max-width: 900px) {  /* was 960 — Axis B */
    .compose-split { grid-template-columns: 1fr; }
    .compose-meta-form { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {  /* was 800 — Axis B; every rule below is content density, no shell rule mixed in */
    .split { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .event-meeting-editor { grid-template-columns: 1fr; }
    .field-full { grid-column: auto; }
    .compose-body .editor-canvas { min-height: 20rem; }
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        margin-bottom: 1.35rem;
        padding-bottom: var(--space-3);
    }
    .page-header .actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: stretch;
    }
    /* Stack full-width — long labels (wish review / verify period) cannot
       share a half-row without colliding with the sibling action. */
    .page-header .actions > .btn,
    .page-header .actions > a.btn,
    .page-header .actions > .page-header-more {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
        min-height: var(--tap-target);
        min-width: 0;
    }
    .page-header .actions > .page-header-more > .section-nav-more-toggle {
        width: 100%;
        justify-content: center;
        min-height: var(--tap-target);
    }
    .builder-shell, .newsletter-shell { grid-template-columns: 1fr; }
    .builder-sidebar { position: static; }
    .tenant-picker { max-width: none; flex-direction: column; }
    .tenant-picker .form-select, .tenant-picker .btn { width: 100%; }
    .tenant-feature-grid { grid-template-columns: 1fr; }
    .tenant-card-id { max-width: 100%; }
    .tenant-admin-row { grid-template-columns: 1fr; }
    .tenant-admin-actions { justify-content: flex-start; }
    .tenant-admin-invite { flex-wrap: wrap; }
    .tenant-admin-invite .btn { width: 100%; }
    .option-row { grid-template-columns: auto 1fr; }
    .option-row > :nth-child(n+3) { grid-column: 2; justify-self: start; }
    .pb-drawer, .pb-drawer-wide {
        width: 100%;
        height: calc(100% - var(--keyboard-inset, 0px));
        border-radius: 0;
    }
    .table th, .table td { font-size: .84rem; }
    .editor-toolbar { gap: .35rem; }
    .editor-toolbar button { min-width: 2.4rem; min-height: 2.4rem; }
    .btn, .palette-btn, .preset-chip, .type-chip, .nps-btn {
        min-height: var(--tap-target);
    }
    .btn-sm, .pb-tab, .pb-hashtag-filter, .pb-react, .pb-tree-chip {
        min-height: var(--tap-target);
        padding-top: .4rem;
        padding-bottom: .4rem;
    }
    .pb-filter-row {
        grid-template-columns: 1fr;
    }
    .pb-filter-grow { min-width: 0; }
    .portal-doc-row,
    .hub-action-row,
    .docs-list-row {
        flex-direction: column;
        align-items: stretch;
    }
    .portal-doc-row .btn,
    .hub-action-row .btn,
    .docs-list-row .btn {
        width: 100%;
        min-height: var(--tap-target);
    }
    .pb-comment-node {
        margin-left: calc(min(var(--pb-depth, 0), 3) * 0.65rem);
    }
    .pb-card-vote-closed {
        padding: .45rem .55rem;
        font-size: .78rem;
        border-top: 1px solid var(--table-row-border, #edf1f6);
    }
    .member-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    .member-toolbar-search,
    .member-toolbar .form-select,
    .member-toolbar .form-control,
    .member-toolbar .ss-wrap {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .bulk-action-bar {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        padding: .75rem .85rem;
        border-radius: .85rem;
    }
    .cmdk-backdrop {
        padding: max(.65rem, var(--safe-top)) .65rem max(.65rem, var(--safe-bottom));
        align-items: stretch;
    }
    .cmdk-panel {
        width: 100%;
        max-height: none;
        height: calc(100dvh - 1.3rem - var(--safe-top) - var(--safe-bottom));
        border-radius: 1.05rem;
    }
    .cmdk-item {
        min-height: 2.85rem;
        padding: .7rem .8rem;
        font-size: .95rem;
    }
    .cmdk-footer { display: none; }
}

@media (max-width: 900px) {  /* mobile shell — see BREAKPOINT SCALE, Axis A */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body:has(.nav-drawer-toggle:checked) {
        overflow: hidden;
        touch-action: none;
    }

    /* Same morph the sidebar's own burger animates (NavMenu.razor.css); this instance
       targets the burger that lives in .top-row (MainLayout) at this width. Kept here,
       unscoped, since it has to reach across both components: the checkbox is NavMenu's,
       the label is MainLayout's. */
    body:has(.nav-drawer-toggle:checked) .nav-burger--top-row span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    body:has(.nav-drawer-toggle:checked) .nav-burger--top-row span:nth-child(2) {
        opacity: 0;
    }
    body:has(.nav-drawer-toggle:checked) .nav-burger--top-row span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px; /* prevent iOS zoom on focus */
        border-radius: .75rem;
    }

    .toast-host {
        left: max(.65rem, var(--safe-left));
        right: max(.65rem, var(--safe-right));
        bottom: calc(var(--tabbar-space, 4rem) + .5rem);
    }

    /* A bordered card inside another bordered card (.surface sits in .content,
       which already has the page edge) reads as "web form", not "app screen" —
       drop the hairline and let the shadow alone carry the separation. Kept as
       a light gray in dark mode below, where shadows carry much less contrast. */
    .surface { border-color: transparent; }

    /* Page headers with multi-button toolbars are tall on phones — sticky +
       scroll-driven collapse clipped blurbs into the actions and let the next
       card peek through the accent rule. Keep them in normal flow. */
    .page-header {
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        padding-top: var(--space-2);
        padding-bottom: var(--space-3);
    }
}

@media (max-width: 900px) {  /* Axis B — content density, split from the same mixed block */
    h1 {
        font-size: clamp(1.35rem, 6.2vw, 1.7rem);
        line-height: 1.15;
        letter-spacing: -.03em;
    }

    h2 { font-size: 1.15rem; }

    .page-header p {
        font-size: .9rem;
        line-height: 1.5;
        margin-top: var(--space-3);
    }

    .metric-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .metric {
        padding: .85rem var(--gutter);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
    }
    .metric strong { font-size: 1.35rem; letter-spacing: -.02em; }
    .metric span { font-size: .78rem; }

    .surface {
        padding: .95rem var(--gutter);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
    }
    .surface + .surface { margin-top: .85rem; }
    .surface-heading {
        flex-wrap: wrap;
        gap: .55rem;
        margin-bottom: .75rem;
    }

    .thread-card {
        padding: .95rem 1.05rem;
        border-radius: 1.05rem;
        border-color: transparent;
        box-shadow: var(--shadow-sm), var(--surface-sheen, none);
    }
    .thread-card-top { flex-direction: column; gap: .35rem; }
    .page-header.thread-detail-header .actions > .btn,
    .page-header.thread-detail-header .actions > a.btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: var(--tap-target);
    }
    .member-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        padding: .15rem 0 .35rem;
    }
    .portal-dash-panel {
        border-radius: 1.05rem;
        border-color: transparent;
        box-shadow: var(--shadow-sm), var(--surface-sheen, none);
        min-height: 0;
    }
    .wizard-steps { grid-template-columns: 1fr 1fr; }
    .attachment-list li { flex-direction: column; align-items: flex-start; }
    .search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    .search-bar .form-control,
    .search-bar .btn,
    .search-bar .ss-wrap {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .page-header .actions,
    .hub-section-header {
        width: 100%;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .hub-section-header .btn {
        flex: 1 1 auto;
        min-height: var(--tap-target);
    }

    .btn {
        border-radius: .75rem;
    }

    .btn-sm {
        border-radius: .65rem;
    }

    .table-wrap {
        margin: 0 -.15rem;
        padding-bottom: .15rem;
        border-radius: .85rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent);
    }
    .table th, .table td {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .pb-vis, .pb-vendor-badge, .pb-blocked-badge {
        font-size: .72rem;
    }

    .ask-ai-box {
        padding: .9rem 1rem;
        border-radius: 1rem;
    }

    .app-lock-encourage {
        flex-direction: column;
        align-items: stretch;
        border-radius: 1rem;
        padding: .9rem 1rem;
    }
    .app-lock-encourage-actions {
        width: 100%;
    }
    .app-lock-encourage-actions .btn {
        flex: 1 1 auto;
    }

    .toast {
        border-radius: .9rem;
        padding: .8rem .9rem;
        font-size: .9rem;
    }

    .portal-module-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .discussion-composer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: .75rem .85rem max(.85rem, var(--safe-bottom));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    }
    .discussion-composer .btn {
        min-width: 4.5rem;
    }
    .discussion-bubble {
        max-width: 100%;
        border-radius: 1rem;
    }
    .discussion-chat-head {
        flex-wrap: wrap;
        gap: .55rem;
        padding: .75rem .85rem;
    }

    .empty, .empty-state {
        padding: 2rem 1rem;
    }

    .setup-checklist-list li {
        padding: .85rem .9rem;
        border-radius: .9rem;
    }

    .ss-menu {
        min-width: min(100vw - 1.5rem, 22rem) !important;
        max-width: calc(100vw - 1.25rem);
        border-radius: .85rem;
    }
}


@media (max-width: 420px) {
    .metric-grid { grid-template-columns: 1fr; }
    .wizard-steps { grid-template-columns: 1fr; }
    .page-header .actions > .btn,
    .page-header .actions > a.btn,
    .page-header .actions > .page-header-more {
        flex: 1 1 100%;
    }
    .login-card {
        padding: 1.15rem 1.05rem;
        border-radius: 1.1rem;
        box-shadow: var(--shadow-md);
    }
    .login-brand-logo {
        max-width: min(100%, 16rem);
        max-height: 5rem;
    }
}

@keyframes mobile-sheet-in {
    from { transform: translateY(100%); opacity: 1; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog,
    .modal-panel,
    .help-modal {
        animation: none !important;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Modal dialog */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: grid;
    place-items: center;
    padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
    background: rgba(21, 35, 31, .45);
    overflow: auto;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-backdrop,
    :root:not([data-theme="light"]) .help-modal-backdrop {
        background: rgba(2, 6, 23, .72);
    }
}
:root[data-theme="dark"] .modal-backdrop,
:root[data-theme="dark"] .help-modal-backdrop {
    background: rgba(2, 6, 23, .72);
}
.modal-dialog {
    /* Override Bootstrap's .modal-dialog { pointer-events: none } — we don't use .modal-content. */
    pointer-events: auto;
    position: fixed;
    z-index: 1050;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    width: min(100% - 2rem, 34rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 40rem);
    display: flex;
    flex-direction: column;
    background: var(--modal-bg, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: auto;
    @starting-style {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }
}
/* Structured modals: scroll body only, keep header/footer fixed. */
.modal-dialog:has(> .modal-body) {
    overflow: hidden;
}
.modal-dialog:has(> .modal-body) > .modal-header,
.modal-dialog:has(> .modal-body) > .modal-footer,
.modal-dialog:has(> .modal-body) > .modal-progress {
    flex-shrink: 0;
}
/* Confirm is nested inside its backdrop; raise the whole stack above app modals (1050). */
.confirm-backdrop {
    z-index: 1100;
}
.modal-dialog.confirm-dialog {
    z-index: 1101;
}
/* Wish similar-confirm modal */
/* Wish similar-confirm modal — above create/detail modals */
.pb-similar-confirm-backdrop {
    z-index: 1120;
}
.modal-dialog.pb-similar-confirm-modal {
    z-index: 1121;
    width: min(100% - 2rem, 32rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 36rem);
}
.pb-similar-confirm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.pb-similar-confirm-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .55rem);
    background: var(--surface-nested, #f7faf8);
    color: var(--card-text, #183451);
}
.pb-similar-confirm-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .55rem;
}
.pb-similar-confirm-title-row strong {
    color: var(--heading, #0f172a);
}

/* Share a wish — compose modal */
.modal-dialog.pb-wish-compose-modal {
    width: min(100% - 2rem, 36rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 46rem);
    overflow: hidden;
}
.pb-wish-compose-modal > .modal-header {
    flex-shrink: 0;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-wish-compose-modal .modal-kicker {
    margin: 0 0 .15rem;
}
.pb-wish-compose-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: .85rem;
}
.pb-wish-compose-modal > .modal-footer {
    flex-shrink: 0;
    margin-top: 0;
}
.pb-wish-compose-fields {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}
.pb-wish-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
.pb-wish-area-row {
    gap: .75rem;
}
.pb-wish-details {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.45;
}
.pb-wish-impact {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .9rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .65rem);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent, #2563eb) 7%, var(--surface, #fff)) 0%, var(--surface, #fff) 55%);
}
.pb-wish-impact .field-label {
    margin-bottom: 0;
}
.pb-wish-impact .idea-rate-wrap {
    gap: .45rem;
}

.pb-wish-drafts {
    padding: .75rem .85rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .65rem);
    background: var(--surface-nested, #f7faf8);
}
.pb-wish-drafts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}
.pb-wish-drafts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pb-wish-draft-row {
    display: flex;
    align-items: stretch;
    gap: .4rem;
}
.pb-wish-draft-pick {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: .55rem .7rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface, #fff);
    color: var(--card-text, #183451);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pb-wish-draft-pick:hover {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--input-border, #d7e0eb));
    background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--surface, #fff));
}
.pb-wish-draft-pick.is-active {
    border-color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface, #fff));
    box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}
.pb-wish-draft-discard {
    flex: 0 0 auto;
    width: 2.25rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface, #fff);
    color: var(--muted-strong, #5f726c);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.pb-wish-draft-discard:hover {
    border-color: color-mix(in srgb, #dc2626 35%, var(--input-border, #d7e0eb));
    background: color-mix(in srgb, #dc2626 8%, var(--surface, #fff));
    color: #b91c1c;
}

.pb-wish-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .65rem;
    padding: .7rem .8rem;
    border: 1px dashed color-mix(in srgb, var(--accent, #2563eb) 28%, var(--input-border, #d7e0eb));
    border-radius: var(--radius-md, .65rem);
    background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--surface, #fff));
}
.pb-wish-attach-thumb {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid var(--surface-border, #dfe7e3);
}
.pb-wish-attach-saved {
    flex: 1 1 auto;
}
.pb-wish-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: .4rem .85rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface, #fff);
    color: var(--card-text, #183451);
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
}
.pb-wish-attach-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.pb-similar {
    padding: .75rem .85rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .65rem);
    background: var(--surface-nested, #f7faf8);
}
.pb-similar-label {
    font-size: .82rem;
    font-weight: 650;
    color: var(--muted-strong, #4d627a);
    margin-bottom: .5rem;
}
.pb-similar-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pb-similar-chip {
    max-width: 100%;
    padding: .4rem .7rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--card-text, #183451);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pb-similar-chip:hover {
    border-color: var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface, #fff));
    color: var(--accent, #2563eb);
}

@media (max-width: 900px) {
    .modal-dialog.pb-wish-compose-modal {
        max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2.5rem), 92dvh);
    }
    .pb-wish-impact {
        padding: .7rem .75rem;
    }
}

.modal-dialog.pws-template-modal {
    width: min(100% - 2rem, 56rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 46rem);
}
.modal-dialog.pws-ask-ai-modal {
    width: min(100% - 2rem, 36rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 42rem);
}
.builder-import-drop {
    position: relative;
    min-height: 5.5rem;
    border: 2px dashed var(--border, #c5d0de);
    border-radius: 0.5rem;
    background: var(--surface-alt, #f5f8fc);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.builder-import-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.builder-import-drop-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1rem;
    pointer-events: none;
    color: var(--card-text, var(--text));
    text-align: center;
}
.builder-import-html-source {
    font-size: 0.85rem;
    line-height: 1.4;
}
.modal-dialog.vsb-checkout-modal {
    width: min(100% - 2rem, 52rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 54rem);
}
.modal-dialog.vsb-floor-detail-modal,
.vsb-floor-detail-backdrop {
    z-index: 1060;
}
.modal-dialog.modal-lg {
    width: min(100% - 2rem, 48rem);
}
.modal-dialog.modal-xl {
    width: min(100% - 2rem, 56rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 46rem);
}
.modal-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    flex-shrink: 0;
    align-items: center;
}
/* Former slideouts may put fields directly in the dialog (no .modal-body). */
.modal-dialog:not(:has(> .modal-body)) > :not(.modal-header):not(.modal-footer) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.modal-dialog:not(:has(> .modal-body)) > :last-child:not(.modal-header):not(.modal-footer) {
    padding-bottom: 1.15rem;
}
/* Bootstrap .modal wrapper — restore centering (BS sets transform:none on .modal.show .modal-dialog). */
.modal.show .modal-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.vsb-floor-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .55rem;
    margin: .35rem 0 .75rem;
}
.vsb-floor-count {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--surface-alt, #eef2f0);
    color: var(--text, #21352f);
    font-size: .8rem;
    font-weight: 600;
}
.vsb-floor-head { margin-bottom: .75rem; }
.vsb-floor-kicker {
    margin: 0 0 .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}
.vsb-floor-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    color: var(--heading);
}
.vsb-floor-lede { margin: .45rem 0 0; font-size: .92rem; }
.vsb-floor-hint { margin-bottom: .5rem; }
.vsb-floor-legend { margin-bottom: .65rem; color: var(--muted); font-size: .86rem; }
.vsb-floor-legend .cfp-swatch--claimed { background: rgba(100, 100, 100, .85); }
.vsb-floor-legend .cfp-swatch--your-level { background: rgba(15, 61, 46, .92); }
.vsb-floor-legend .cfp-swatch--open { background: rgba(46, 125, 90, .68); }
.vsb-floor-stage {
    border-radius: .85rem;
    padding: .75rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #1f6b57) 8%, #fff), var(--surface, #fff));
    border: 1px solid var(--surface-border, #e7edf4);
    box-shadow: 0 16px 36px rgba(21, 35, 31, .07);
}
.vsb-floor-stage--large { padding: .85rem; }
.vsb-floor-canvas {
    position: relative;
    width: 100%;
    background: #e8eeea;
    border: 1px solid #c5ced6;
    border-radius: .55rem;
    overflow: hidden;
}
.vsb-floor-canvas--large {
    min-height: min(68vh, 640px);
}
.pws-ask-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pws-ask-ai-chips .btn {
    text-align: left;
    white-space: normal;
    max-width: 100%;
}
.pws-ask-ai-scope legend {
    font-weight: 600;
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem .65rem;
}
.modal-kicker {
    margin: 0 0 .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.modal-close {
    border: 0;
    background: transparent;
    color: var(--muted, #74869b);
    font-size: 1.5rem;
    line-height: 1;
    padding: .15rem .35rem;
    border-radius: .4rem;
}
.modal-close:hover, .modal-close:focus { background: var(--surface-alt, #eef2f0); color: var(--text, #21352f); }
.modal-progress {
    display: grid;
    gap: .35rem;
    padding: 0 1.25rem .85rem;
}
.modal-progress-seg {
    height: .28rem;
    border-radius: 999px;
    background: var(--surface-alt, #e3ebe7);
}
.modal-progress-seg.active { background: var(--accent, #1f6b57); }
.modal-body {
    padding: .35rem 1.25rem 1rem;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.modal-body > .field-label,
.modal-body > label:not(.form-check):not(.form-check-label) {
    display: block;
    margin-top: .85rem;
    margin-bottom: .35rem;
}
.modal-body > .field-label:first-child,
.modal-body > label:not(.form-check):not(.form-check-label):first-child,
.modal-body > .modal-guide:first-child,
.modal-body > .alert:first-child,
.modal-body > p:first-child {
    margin-top: 0;
}
/* Let SearchableSelect menus escape scroll clipping while open. */
.modal-dialog:has(.ss-wrap:focus-within),
.modal-body:has(.ss-wrap:focus-within) {
    overflow: visible;
}
.modal-guide {
    margin: 0;
    color: var(--muted-strong, #4d627a);
    font-size: .95rem;
    line-height: 1.45;
}
.field-hint {
    margin-top: .4rem;
    color: var(--muted, #74869b);
    font-size: .8rem;
    line-height: 1.4;
}
.field-hint code {
    font-size: .78rem;
    color: var(--accent, #1f6b57);
    background: var(--accent-soft, #e4efe9);
    padding: .05rem .3rem;
    border-radius: .3rem;
}
.modal-footer {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .85rem 1.25rem 1.15rem;
    border-top: 1px solid var(--table-row-border, #edf1f6);
    flex-shrink: 0;
}
.modal-footer.actions.justify-content-end {
    justify-content: flex-end;
}
.modal-footer .btn-primary,
.modal-footer .btn-danger {
    min-width: 5.5rem;
}
.event-picker { display: grid; gap: .55rem; }
.event-option {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: .75rem;
    background: var(--surface-nested, #fbfcfe);
    cursor: pointer;
}
.event-option:has(input:checked) {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft-strong, #f3faf7);
}
.event-option input { margin-top: .2rem; flex: 0 0 auto; }
.event-option strong { display: block; color: var(--card-text, #183451); font-size: .9rem; }
.event-option small { display: block; color: var(--muted, #74869b); font-size: .78rem; line-height: 1.35; margin-top: .15rem; }
.review-list { margin: 0; display: grid; gap: .75rem; }
.review-list > div {
    display: grid;
    gap: .15rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.review-list dt { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #71839a); }
.review-list dd { margin: 0; color: var(--card-text, #183451); word-break: break-word; }
.review-url { font-size: .88rem; }
.secret-reveal {
    padding: .65rem .75rem;
    border-radius: .6rem;
    background: var(--surface-alt, #f5f8fc);
    border: 1px solid var(--input-border, #d7e0eb);
    word-break: break-all;
}
.secret-reveal code { color: var(--card-text, #183451); font-size: .84rem; }

/* Builder wizard */
.builder-wizard { display: grid; gap: 1rem; margin-top: 1rem; }
.wizard-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.wizard-step-btn { width: 100%; display: flex; gap: .65rem; align-items: flex-start; text-align: left; border: 1px solid var(--input-border, #d7e0eb); background: var(--control-bg, #fff); border-radius: .75rem; padding: .7rem .8rem; color: inherit; cursor: pointer; }
.wizard-step-btn:hover:not(:disabled) { border-color: var(--accent, #1f6b57); background: var(--accent-soft, #f7fcfa); }
.wizard-step-btn:disabled { cursor: not-allowed; opacity: .72; }
.wizard-step.current .wizard-step-btn { border-color: var(--accent, #1f6b57); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 18%, transparent); cursor: default; }
.wizard-step.done .wizard-step-btn { border-color: var(--accent-soft-border, #9ec9ba); background: var(--accent-soft-strong, #f3faf7); }
.wizard-step-num { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--surface-alt, #e8eef5); color: var(--muted-strong, #52677f); font-size: .78rem; font-weight: 700; }
.wizard-step.current .wizard-step-num { background: var(--accent, #1f6b57); color: var(--accent-contrast, #fff); }
.wizard-step.done .wizard-step-num { background: var(--accent, #2f8f74); color: var(--accent-contrast, #fff); }
.wizard-step-label { display: grid; gap: .1rem; min-width: 0; }
.wizard-step-label strong { font-size: .88rem; color: var(--card-text, #183451); }
.wizard-step-label small { color: var(--muted, #74869b); font-size: .72rem; }
.wizard-nav { margin-top: .25rem; }
.wizard-nav-spacer { flex: 1; }
.wizard-body { min-width: 0; }

/* Announcement builder audience */
.announce-audience { display: grid; gap: .65rem; }
.announce-audience-option {
    display: flex; gap: .75rem; align-items: flex-start;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--surface-alt, #f8fafc);
    border-radius: .75rem; padding: .85rem .9rem; cursor: pointer;
}
.announce-audience-option input { margin-top: .2rem; flex: 0 0 auto; }
.announce-audience-option span { display: grid; gap: .15rem; min-width: 0; }
.announce-audience-option strong { color: var(--card-text, #183451); font-size: .92rem; }
.announce-audience-option small { color: var(--muted, #74869b); font-size: .78rem; line-height: 1.35; }
.announce-audience-option.selected {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft-strong, #f3faf7);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 18%, transparent);
}
.announce-group-list { display: grid; gap: .35rem; max-height: 16rem; overflow: auto; padding: .25rem 0; }
.announce-review { border: 1px solid var(--card-border, #e3e9f1); border-radius: .75rem; padding: 1rem; }
.announce-preview { margin-top: .75rem; }

/* Nested modal panel (child of .modal-backdrop) */
.modal-panel {
    width: min(100%, 720px);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 900px);
    overflow: auto;
    background: var(--modal-bg, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(21, 35, 31, .22);
    padding: 1.25rem 1.35rem 1.35rem;
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.modal-close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--muted-strong, #5f726c);
    font-size: 1.4rem;
    line-height: 1;
}
.modal-close:hover, .modal-close:focus { background: var(--surface-alt, #eef2f0); color: var(--heading, #15231f); }

/* Mobile: bottom-sheet dialogs (must follow base modal rules) */
@media (max-width: 900px) {  /* was 800 — Axis B, modal-to-sheet */
    .modal-backdrop,
    .help-modal-backdrop {
        align-items: end;
        place-items: end center;
        padding: 0;
        padding-top: max(1rem, var(--safe-top));
    }
    .modal-dialog,
    .modal.show .modal-dialog,
    .modal-panel,
    .help-modal {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translateY(0);
        margin: 0;
        border-radius: 1.15rem 1.15rem 0 0;
        max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2.5rem), 92dvh);
        padding-bottom: max(1rem, var(--safe-bottom));
        box-shadow: 0 -12px 40px rgba(15, 23, 22, .18);
        transform-origin: bottom center;
        transition: transform var(--dur-modal, 280ms) var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), opacity 200ms var(--ease-out);
        animation: none;
        @starting-style {
            transform: translateY(100%);
            opacity: 1;
        }
    }
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: color-mix(in srgb, var(--modal-bg, #fff) 94%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding-bottom: max(1rem, var(--safe-bottom));
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Rule builder */
.rule-builder-modal .builder-wizard { margin-top: .5rem; }
.rule-builder-modal .wizard-body { border: 0; box-shadow: none; padding: .25rem 0 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.choice-card {
    text-align: left;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--surface-alt, #f8fafc);
    border-radius: .75rem;
    padding: .85rem .9rem;
    color: inherit;
    display: grid;
    gap: .25rem;
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.choice-card strong { color: var(--card-text, #183451); font-size: .92rem; }
.choice-card span { color: var(--muted, #74869b); font-size: .78rem; line-height: 1.35; }
.choice-card:active { transform: scale(var(--press-scale, 0.97)); }
.choice-card:focus-visible { border-color: var(--accent, #1f6b57); background: var(--surface, #fff); outline: 2px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .choice-card:hover { border-color: var(--accent, #1f6b57); background: var(--surface, #fff); }
}
.choice-card.selected {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft-strong, #f3faf7);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 18%, transparent);
}
.rule-preview {
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .75rem;
    background: var(--surface-alt, #f7faf8);
    padding: .9rem 1rem;
}
.rule-preview code {
    font-size: .85rem;
    color: var(--accent, #1f6b57);
    word-break: break-word;
}

/* Forms field designer */
.field-designer { display: grid; gap: .85rem; }
.field-card .card-body { display: grid; gap: .35rem; }
.field-card .field-label { font-size: .82rem; font-weight: 600; color: #304760; margin: 0; }
.field-card .type-hint { margin-top: .35rem; }
.form-preview-modal { width: min(100%, 32rem); }
.form-preview-body { padding: .25rem 0 .5rem; }
.form-preview-body .form-control:disabled,
.form-preview-body .form-select:disabled,
.form-preview-body .form-check-input:disabled {
    opacity: 1;
    background-color: var(--control-bg, var(--surface, #fff));
    color: var(--muted-strong, var(--text, #21352f));
    -webkit-text-fill-color: var(--muted-strong, var(--text, #21352f));
    cursor: default;
}
.form-preview-modal .modal-footer {
    padding: .85rem 0 0;
    margin-top: .5rem;
    border-top: 1px solid var(--table-row-border, #edf1f6);
    justify-content: flex-end;
}

/* Form signature pad */
.form-signature-pad { max-width: 36rem; }
.form-signature-pad.is-disabled { opacity: .75; pointer-events: none; }
.form-signature-canvas-wrap {
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: .5rem;
    background: var(--control-bg, #fff);
    overflow: hidden;
}
.form-signature-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 11rem;
    cursor: crosshair;
    touch-action: none;
    background: #fff;
}
.form-signature-typed {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    border: 1px dashed var(--input-border, #d7e0eb);
    border-radius: .5rem;
    background: var(--control-bg, #fff);
    color: var(--text, #111827);
    font-family: "Segoe Script", "Bradley Hand", "Apple Chancery", "Snell Roundhand", "Comic Sans MS", cursive;
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.2;
    text-align: center;
}
.form-signature-preview {
    max-width: 100%;
    height: auto;
    max-height: 8rem;
    border: 1px solid var(--input-border, #d7e0eb);
    border-radius: .5rem;
    background: #fff;
}

/* Survey builder */
.survey-builder { display: grid; gap: 1rem; }
.builder-legend { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--card-border, #e3e9f1); border-radius: .75rem; background: var(--surface-alt, #f7faf8); }
.legend-item { display: flex; gap: .55rem; align-items: flex-start; max-width: 16rem; }
.legend-item strong { display: block; font-size: .82rem; color: var(--card-text, #183451); }
.legend-item span { display: block; font-size: .72rem; color: var(--muted, #74869b); }
.legend-icon { width: 1.5rem; height: 1.5rem; border-radius: .4rem; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--accent-contrast, #fff); background: var(--accent, #1f6b57); }
.legend-option .legend-icon { background: #2867d7; }
.legend-followup .legend-icon { background: #c47a2c; }
.legend-arrow { color: var(--muted, #9aa8b8); }
.builder-empty-state { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--input-border, #cfd9e4); border-radius: .85rem; }
.builder-footer-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.builder-question-card { position: relative; border: 1px solid var(--input-border, #d7e0eb); border-radius: .85rem; background: var(--surface, #fff); margin-bottom: .85rem; overflow: hidden; }
.builder-question-card.is-followup { background: var(--surface-nested, #fcfbf8); }
.card-accent { position: absolute; inset: 0 auto 0 0; width: .35rem; background: var(--accent, #1f6b57); }
.card-accent.accent-followup { background: #c47a2c; }
.card-header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem .9rem .35rem 1.1rem; }
.question-badge { font-size: .72rem; font-weight: 700; color: var(--badge-soft-fg, #1f6b57); background: var(--badge-soft-bg, #e4efe9); border-radius: .35rem; padding: .25rem .45rem; }
.badge-followup { color: var(--badge-warn-fg, #956013); background: var(--badge-warn-bg, #fff4dc); }
.type-picker { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
.type-chip { border: 1px solid var(--input-border, #d5deea); background: var(--control-bg, #fff); border-radius: .45rem; padding: .25rem .4rem; font-size: .72rem; color: var(--card-text, #304760); display: inline-flex; gap: .25rem; align-items: center; }
.type-chip.active { border-color: var(--accent, #1f6b57); background: var(--accent-soft, #eef7f3); color: var(--accent, #1f6b57); }
.card-remove { border: 0; background: transparent; color: #a63d46; font-size: 1.2rem; line-height: 1; margin-left: auto; }
.card-body { padding: .35rem 1.1rem 1rem; }
.field-label { display: block; font-size: .78rem; font-weight: 650; color: var(--label, #3b526d); margin-bottom: .3rem; }
.options-section { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--table-row-border, #edf1f6); }
.options-section-header { display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .65rem; }
.option-branch { margin-bottom: .55rem; }
.option-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: .55rem; align-items: center; }
.option-letter {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--badge-soft-bg, #e4efe9);
  color: var(--badge-soft-fg, #1f6b57);
  border: 1px solid var(--accent-soft-border, #cfe5dc);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.followups { margin: .55rem 0 0 1.4rem; padding-left: .75rem; border-left: 2px solid #f0d9b5; }
.type-hint { margin-top: .55rem; font-size: .84rem; }

/* Form visual builder */
.fb-studio {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) minmax(14rem, 18rem);
  gap: .85rem;
  align-items: start;
  min-height: 28rem;
}
.fb-studio-panes { display: none; }
.fb-palette,
.fb-preview-panel {
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .85rem;
  background: var(--surface-alt, #f7faf8);
  padding: .85rem;
  max-height: min(72vh, 44rem);
  overflow: auto;
  position: sticky;
  top: .5rem;
}
.fb-palette-head { margin-bottom: .75rem; }
.fb-palette-head strong { display: block; font-size: .92rem; color: var(--heading, var(--text)); }
.fb-palette-cat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
  margin: .65rem 0 .35rem;
}
.fb-palette-grid { display: grid; gap: .4rem; margin-bottom: .35rem; }
.fb-palette-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem;
  align-items: center;
  padding: .45rem .55rem;
  border: 1px solid var(--input-border, #d5deea);
  border-radius: .55rem;
  background: var(--control-bg, var(--surface, #fff));
  cursor: grab;
  user-select: none;
}
.fb-palette-item:hover,
.fb-palette-item:focus-visible {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 14%, transparent);
}
.fb-palette-item:active { cursor: grabbing; }
.fb-palette-item.is-dragging { opacity: .55; }
.fb-palette-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .4rem;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-contrast, #fff);
  background: var(--accent, #1f6b57);
}
.fb-palette-item strong { font-size: .8rem; color: var(--heading, var(--text)); font-weight: 600; }
.fb-canvas-wrap {
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .85rem;
  background: var(--surface, #fff);
  min-height: 20rem;
  display: flex;
  flex-direction: column;
}
.fb-canvas-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.fb-canvas-head strong { font-size: .92rem; color: var(--heading, var(--text)); }
.fb-canvas { padding: .65rem .75rem 1rem; flex: 1 1 auto; }
.fb-drop-zone {
  min-height: 12rem;
  display: grid;
  place-content: center;
  gap: .35rem;
  margin: 0;
}
.fb-drop-slot {
  height: .35rem;
  margin: -.1rem 0;
  border-radius: .25rem;
  transition: height .12s ease, background .12s ease;
}
.fb-drop-slot.fb-drop-target,
.fb-field-card.fb-drop-target,
.fb-drop-zone.fb-drop-target {
  outline: 2px dashed var(--accent, #1f6b57);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--accent, #1f6b57) 8%, transparent);
}
.fb-drop-slot.fb-drop-target { height: 1.5rem; }
.fb-field-card {
  cursor: grab;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.fb-field-card.is-selected {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 16%, transparent);
}
.fb-field-card.is-dragging { opacity: .55; }
.fb-field-card.is-step-break { background: color-mix(in srgb, var(--accent, #1f6b57) 5%, var(--surface, #fff)); }
.card-accent.accent-step { background: #2867d7; }
.fb-step-badge {
  font-size: .68rem;
  font-weight: 700;
  color: #2867d7;
  background: color-mix(in srgb, #2867d7 12%, transparent);
  border-radius: .35rem;
  padding: .2rem .4rem;
}
.fb-drag-handle {
  color: var(--muted, #9aa8b8);
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}
.fb-type-select { max-width: 11rem; margin-left: auto; }
.fb-live-preview { padding: 0; }
.fb-preview-device {
  border: 1px solid var(--input-border, #d7e0eb);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--surface, #fff);
}
.fb-preview-chrome {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  background: var(--surface-alt, #f0f4f8);
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.fb-preview-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--muted, #c5d0dc);
}
.fb-preview-url {
  margin-left: .35rem;
  font-size: .68rem;
  color: var(--muted, #74869b);
}
.fb-preview-body { padding: .85rem .9rem 1rem; }
.fb-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0;
}
.fb-wizard-step {
  border: 1px solid var(--input-border, #d5deea);
  background: var(--control-bg, #fff);
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .72rem;
  color: var(--card-text, var(--text));
}
.fb-wizard-step.is-active {
  border-color: var(--accent, #1f6b57);
  background: var(--accent-soft, #eef7f3);
  color: var(--accent, #1f6b57);
  font-weight: 650;
}
.fb-preview-nav { display: flex; gap: .5rem; align-items: center; }

@media (max-width: 1100px) {
  .fb-studio {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .fb-studio-panes {
    display: flex;
    gap: .35rem;
    margin-bottom: .5rem;
    grid-column: 1 / -1;
  }
  .fb-studio-panes input { position: absolute; opacity: 0; pointer-events: none; }
  .fb-studio-panes label {
    flex: 1 1 0;
    text-align: center;
    padding: .45rem .5rem;
    border: 1px solid var(--input-border, #d5deea);
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--card-text, var(--text));
    cursor: pointer;
    background: var(--surface, #fff);
  }
  .fb-studio-panes input:checked + label {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft, #eef7f3);
    color: var(--accent, #1f6b57);
  }
  .fb-palette,
  .fb-canvas-wrap,
  .fb-preview-panel {
    display: none;
    max-height: none;
    position: static;
  }
  #fb-builder-pane-palette:checked ~ .fb-palette,
  #fb-builder-pane-canvas:checked ~ .fb-canvas-wrap,
  #fb-builder-pane-preview:checked ~ .fb-preview-panel { display: block; }
}

/* Survey take + results */
.survey-public-shell {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--brand-accent, #1f6b57) 22%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand-accent, #1f6b57) 8%, var(--bg)), var(--bg) 42%);
}
.survey-public-card {
    width: min(100%, 640px);
    padding: 0 1.5rem 1.65rem;
    overflow: hidden;
}
.survey-public-hero {
    height: 5.5rem;
    margin: 0 -1.5rem 1.15rem;
    border-radius: 0;
}
.survey-brand-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-bottom: 1rem;
}
.survey-brand-logo,
.branded-public-logo.survey-brand-logo {
    max-height: 72px;
    max-width: 240px;
    width: auto;
    object-fit: contain;
    margin: 0;
}
.survey-brand-org {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--muted-strong, var(--muted));
}
.survey-public-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
    color: var(--heading);
}
.survey-take {
    display: grid;
    gap: 0;
}
.survey-take-header { margin-bottom: .35rem; }
.survey-take-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .4rem;
    color: var(--heading, var(--brand-text, #213752));
    line-height: 1.25;
}
.survey-take-description {
    margin: 0;
    color: var(--muted, #6b7c8f);
    white-space: pre-wrap;
    line-height: 1.5;
}
.survey-opening-instructions {
    margin-top: .85rem;
    padding: .85rem 1rem;
    border-radius: .65rem;
    border: 1px solid color-mix(in srgb, var(--survey-accent, #1f6b57) 22%, var(--input-border));
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 8%, var(--surface-alt));
}
.survey-opening-instructions-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--survey-accent, #1f6b57);
    margin-bottom: .45rem;
}
.survey-opening-instructions-body {
    margin: 0;
    color: var(--card-text);
    white-space: pre-wrap;
    line-height: 1.55;
    font-size: .95rem;
}
.survey-progress {
    margin: 1rem 0 .35rem;
    display: grid;
    gap: .4rem;
}
.survey-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted-strong, #5a6f82);
}
.survey-progress-track {
    height: .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 14%, var(--surface-nested));
    overflow: hidden;
}
.survey-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--survey-accent, #1f6b57);
    transition: width .25s ease;
}
.survey-identity-note {
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 8%, var(--surface-alt));
    border: 1px solid color-mix(in srgb, var(--survey-accent, #1f6b57) 18%, var(--input-border));
    font-size: .92rem;
    color: var(--card-text);
}
.survey-identity-fieldset {
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
    display: grid;
    gap: .55rem;
}
.survey-identity-fieldset legend {
    font-size: .86rem;
    font-weight: 650;
    margin-bottom: .15rem;
    color: var(--card-text, #183451);
}
.survey-choice-list {
    display: grid;
    gap: .5rem;
}
.survey-choice-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--input-border, #d5deea);
    border-radius: .75rem;
    background: var(--control-bg, #fff);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.survey-choice-card:hover {
    border-color: color-mix(in srgb, var(--survey-accent, #1f6b57) 45%, var(--input-border));
}
.survey-choice-card.active,
.survey-choice-card:has(input:checked) {
    border-color: var(--survey-accent, #1f6b57);
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 8%, var(--surface-alt));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--survey-accent, #1f6b57) 18%, transparent);
}
.survey-choice-card input {
    margin-top: .2rem;
    accent-color: var(--survey-accent, #1f6b57);
    flex: 0 0 auto;
}
.survey-choice-card > span {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    line-height: 1.35;
}
.survey-choice-card strong { font-size: .95rem; color: var(--card-text, #183451); }
.survey-take-question {
    margin-top: 1.15rem;
    padding: 1rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--survey-accent, #1f6b57) 10%, var(--surface-border));
}
.survey-take-question:first-of-type { margin-top: .85rem; }
.survey-question-label {
    display: block;
    font-weight: 650;
    margin-bottom: .55rem;
    color: var(--card-text, #183451);
    line-height: 1.4;
}
.survey-text-answer { display: grid; gap: .3rem; }
.survey-text-answer.is-short { max-width: min(100%, 36rem); }
.survey-take .survey-short-answer {
    height: 2.85rem;
    min-height: 2.85rem;
    max-height: 2.85rem;
    line-height: 1.35;
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.survey-take .survey-paragraph-answer {
    min-height: 6.25rem;
    resize: vertical;
}
.survey-char-count {
    text-align: right;
    font-size: .8rem;
    line-height: 1.3;
}
.survey-required {
    color: var(--survey-accent, #1f6b57);
    margin-left: .15rem;
}
.nps-scale { display: grid; gap: .4rem; }
.nps-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.nps-ends {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
}
.nps-btn {
    min-width: 2.35rem;
    min-height: 2.35rem;
    border: 1px solid var(--input-border, #d5deea);
    background: var(--control-bg, #fff);
    border-radius: .55rem;
    padding: .35rem .45rem;
    font-weight: 650;
    color: var(--card-text, #304760);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.nps-btn:hover { border-color: color-mix(in srgb, var(--survey-accent, #1f6b57) 50%, var(--input-border)); }
.nps-btn.active {
    background: var(--survey-accent, #1f6b57);
    border-color: var(--survey-accent, #1f6b57);
    color: #fff;
    transform: translateY(-1px);
}
.star-row .star-btn {
    min-width: 2.5rem;
    font-size: 1.15rem;
    line-height: 1;
    color: #c5ced9;
}
.star-row .star-btn.active {
    color: #fff;
    background: var(--survey-accent, #1f6b57);
}
.survey-slider {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.survey-slider-value {
    min-width: 2.5rem;
    text-align: right;
    color: var(--survey-accent, #1f6b57);
}
.survey-slider .form-range {
    accent-color: var(--survey-accent, #1f6b57);
}
.image-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.image-choice-grid .image-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--input-border, #d5deea);
    border-radius: .75rem;
    padding: .55rem;
    cursor: pointer;
    max-width: 9.5rem;
    background: var(--control-bg, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.image-choice-grid .image-choice-card.active {
    border-color: var(--survey-accent, #1f6b57);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--survey-accent, #1f6b57) 22%, transparent);
}
.image-choice-img { width: 100%; height: 5.5rem; object-fit: cover; border-radius: .45rem; }
.click-map-wrap { line-height: 0; border-radius: .65rem; overflow: hidden; }
.click-map-pin {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #c0392b; border: 2px solid #fff; pointer-events: none;
}
.ranking-list { display: grid; gap: .45rem; }
.ranking-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border: 1px solid var(--input-border, #d5deea);
    border-radius: .65rem;
    background: var(--surface, #fff);
}
.ranking-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 12%, var(--surface-alt));
    color: var(--survey-accent, #1f6b57);
}
.ranking-actions { display: flex; gap: .3rem; }
.survey-matrix {
    border: 1px solid var(--input-border, #d5deea);
    border-radius: .75rem;
    padding: .35rem;
    background: var(--surface, #fff);
}
.survey-matrix th { font-size: .8rem; font-weight: 650; }
.survey-best-worst {
    display: grid;
    gap: 1rem;
}
@media (min-width: 901px) {  /* was 640 — Axis B, grid collapse (was mis-seeded as Axis A earlier) */
    .survey-best-worst { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}
.survey-bw-heading {
    display: block;
    margin-bottom: .45rem;
    font-size: .9rem;
}
.survey-page-nav {
    display: flex;
    gap: .65rem;
    margin-top: 1.25rem;
}
.survey-submit-btn {
    margin-top: 1.25rem;
    min-height: 2.75rem;
    font-weight: 650;
    border-radius: .7rem;
}
.survey-footer-note {
    margin: .9rem 0 0;
    font-size: .82rem;
    color: var(--muted, #6b7c8f);
}
.survey-complete-state {
    text-align: center;
    padding: 1.25rem .5rem 0.35rem;
}
.survey-complete-icon {
    width: 3.1rem;
    height: 3.1rem;
    margin: 0 auto .9rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 14%, var(--surface-alt));
    color: var(--survey-accent, #1f6b57);
    font-size: 1.35rem;
    font-weight: 700;
}
.survey-complete-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
}
.survey-answers-preview {
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: .75rem;
}
.survey-member-take {
    display: grid;
    gap: 0;
}
.survey-member-take .survey-brand-header { margin-bottom: .85rem; }
.survey-member-take .survey-submit-btn { justify-self: start; min-width: 10rem; }
.branded-take { --survey-accent: var(--brand-accent, #1f6b57); }
.branded-take .btn-primary {
    background: var(--brand-button, var(--brand-accent, #1f6b57));
    border-color: var(--brand-button, var(--brand-accent, #1f6b57));
    color: var(--brand-button-text, #fff);
}
.branded-take .btn-primary:hover,
.branded-take .btn-primary:focus {
    filter: brightness(0.94);
}
.info-message {
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--survey-accent, #1f6b57) 7%, var(--surface-alt, #f5f8fc));
    border: 1px solid color-mix(in srgb, var(--survey-accent, #1f6b57) 14%, transparent);
    border-radius: .7rem;
    color: var(--card-text, #304760);
    line-height: 1.45;
}
.survey-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.survey-list-btn { width: 100%; text-align: left; border: 1px solid var(--card-border, #e3e9f1); background: var(--surface-nested, #fbfcfe); border-radius: .7rem; padding: .7rem .8rem; }
.survey-list li.active .survey-list-btn { border-color: var(--accent, #1f6b57); background: var(--accent-soft-strong, #f3faf7); }
.survey-list-btn strong { display: block; color: var(--card-text, #183451); }
.event-detail-actions {
    display: grid;
    gap: .85rem;
    padding-top: .15rem;
}
.event-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: center;
}
.event-detail-links a,
.event-detail-links .linkish {
    color: var(--accent, #1f6b57);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.event-detail-links a:hover,
.event-detail-links .linkish:hover {
    text-decoration: underline;
}
.survey-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .85rem 1rem;
    margin-top: .75rem;
}
.survey-chart-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .85rem;
    padding: .85rem;
    background: var(--surface-nested, #fbfcfe);
    min-width: 0;
    overflow: hidden;
    align-content: start;
}
.survey-chart-meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-bottom: .1rem;
}
.survey-chart-meta strong {
    display: block;
    color: var(--card-text, #183451);
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.survey-chart-card.is-text-list {
    grid-column: 1 / -1;
    grid-row: span 2;
}
.survey-chart-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.survey-pie {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}
.survey-count-list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: stretch;
}
.survey-count-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .35rem 0;
    border-top: 1px solid var(--table-row-border, #edf1f6);
    font-size: .84rem;
}
.survey-count-list li::before {
    content: "";
    width: .62rem;
    height: .62rem;
    border-radius: .15rem;
    flex: 0 0 auto;
    margin-top: .28rem;
    background: var(--accent, #2563eb);
}
.survey-count-list li:nth-child(2)::before { background: #7c3aed; }
.survey-count-list li:nth-child(3)::before { background: #c47a2c; }
.survey-count-list li:nth-child(4)::before { background: #8b5a9e; }
.survey-count-list li:nth-child(5)::before { background: #2a8f9e; }
.survey-count-list li:nth-child(6)::before { background: #a63d46; }
.survey-count-list li:nth-child(7)::before { background: #5f726c; }
.survey-count-list li:nth-child(8)::before { background: #4b6fa8; }
.survey-count-list li span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.survey-count-list li strong { flex: 0 0 auto; }
.survey-text-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.survey-text-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .45rem 0;
    border-top: 1px solid var(--table-row-border, #edf1f6);
    font-size: .9rem;
    line-height: 1.4;
    color: var(--card-text, #183451);
}
.survey-text-list li span {
    min-width: 0;
    flex: 1 1 auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.survey-text-list li strong { flex: 0 0 auto; color: var(--muted-strong, #5b6b7c); }

@supports not (grid-template-rows: subgrid) {
    .survey-chart-card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        gap: .65rem;
    }
    .survey-chart-meta { min-height: 4.6rem; }
    .survey-chart-card.is-text-list .survey-chart-meta { min-height: 0; }
    .survey-count-list { margin-top: auto; }
}
.response-card { border: 1px solid var(--card-border, #e3e9f1); border-radius: .7rem; padding: .65rem .85rem; margin-top: .55rem; background: var(--surface, #fff); }
.response-json { margin: .65rem 0 0; white-space: pre-wrap; font-size: .78rem; color: var(--card-text, #304760); }
.response-answers { margin: .65rem 0 0; display: grid; gap: .7rem; }
.response-answer dt { margin: 0; font-size: .78rem; font-weight: 650; color: var(--muted-strong, #5b6b7c); }
.response-answer dd { margin: .2rem 0 0; font-size: .92rem; color: var(--card-text, #183451); white-space: pre-wrap; }
.add-to-calendar { margin-top: 1.1rem; padding: 1rem; border: 1px solid var(--input-border, #d7e2ef); border-radius: .75rem; background: var(--surface-alt, #f7fafc); }
.add-to-calendar-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong, #5b6b7c); font-weight: 650; }
.add-to-calendar-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.add-to-calendar-compact { margin: 0; padding: 0; border: 0; background: transparent; }
.add-to-calendar-compact .add-to-calendar-actions { gap: .3rem; }
.add-to-calendar-menu {
  position: relative;
  display: inline-flex;
}
.add-to-calendar-toggle.active {
  background: var(--accent-soft, #ecfdf5);
  border-color: var(--accent, #115e59);
}
.add-to-calendar-dropdown {
  position: absolute;
  top: calc(100% + .2rem);
  left: 0;
  z-index: 30;
  min-width: 11rem;
  padding: .25rem;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .4rem;
  background: var(--surface, #fff);
  box-shadow: 0 .35rem .9rem rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.add-to-calendar-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--card-text, #183451);
  font-size: .82rem;
  font-weight: 600;
  padding: .4rem .55rem;
  text-decoration: none;
  cursor: pointer;
}
.add-to-calendar-option:hover,
.add-to-calendar-option:focus-visible {
  background: var(--surface-nested, #f1f5f9);
  outline: none;
  color: var(--card-text, #183451);
}
.add-to-calendar-option--primary {
  color: var(--accent, #1f6b57);
}
html.theme-dark .add-to-calendar-dropdown,
html[data-theme="dark"] .add-to-calendar-dropdown {
  background: var(--surface, #1a1f2e);
  border-color: var(--surface-border, #2a3142);
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .35);
}

/* Wish board */
.pb-tabs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pb-tabs .help-trigger { margin-left: .15rem; }
.pb-tab { border: 1px solid var(--card-border, #e3e9f1); background: var(--surface, #fff); border-radius: .55rem; padding: .4rem .75rem; font-weight: 600; color: var(--card-text, #304760); }
a.pb-tab { text-decoration: none; display: inline-block; cursor: pointer; }
.pb-tab.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: var(--accent-contrast, #fff); }

.wish-workflow { color: var(--card-text, #304760); }
.wish-workflow-intro { margin: 0 0 1rem; color: var(--muted, #5b6b7c); font-size: .92rem; }
.wish-workflow-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  counter-reset: wish-flow;
}
.wish-workflow-step {
  counter-increment: wish-flow;
  position: relative;
  display: grid;
  gap: .15rem;
  padding: .65rem .75rem .65rem 2.55rem;
  border: 1px solid var(--surface-border, #dfe7e3);
  border-left: 3px solid var(--pb-lane-accent, #0d9488);
  border-radius: .55rem;
  background: var(--surface-alt, #f5f8fc);
}
.wish-workflow-step::before {
  content: counter(wish-flow);
  position: absolute;
  left: .65rem;
  top: .7rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--pb-lane-accent, #0d9488);
}
.wish-workflow-step-label {
  font-weight: 700;
  font-size: .9rem;
  color: var(--heading, #183451);
}
.wish-workflow-step-desc {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted, #5b6b7c);
}
.wish-workflow-ends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--surface-border, #d5deea);
}
.wish-workflow-end {
  display: grid;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid var(--surface-border, #dfe7e3);
  border-left: 3px solid var(--pb-lane-accent, #78716c);
  border-radius: .55rem;
  background: var(--surface, #fff);
}
.wish-workflow-step-new { --pb-lane-accent: #94a3b8; }
.wish-workflow-step-insnugreview { --pb-lane-accent: #64748b; }
.wish-workflow-step-indiscussion { --pb-lane-accent: #475569; }
.wish-workflow-step-instartelreview { --pb-lane-accent: #0e7490; }
.wish-workflow-step-readyfordevelopment { --pb-lane-accent: #0369a1; }
.wish-workflow-step-indevelopment { --pb-lane-accent: #0d9488; }
.wish-workflow-step-scheduledforrelease { --pb-lane-accent: #0f766e; }
.wish-workflow-step-featurereleased { --pb-lane-accent: #047857; }
.wish-workflow-step-rejected { --pb-lane-accent: #b45309; }
.wish-workflow-step-archived { --pb-lane-accent: #78716c; }
@media (max-width: 640px) {  /* was 36rem/576 — Axis A */
  .wish-workflow-ends { grid-template-columns: 1fr; }
}
.help-modal:has(.wish-workflow) {
  width: min(100%, 40rem);
  max-height: min(90dvh, 44rem);
}
.pb-pulse { overflow: hidden; }
.pb-pulse-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.pb-pulse-track { display: flex; gap: .65rem; overflow-x: auto; padding-bottom: .25rem; scroll-snap-type: x mandatory; }
.pb-pulse-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: block;
  text-align: left;
  text-decoration: none;
  color: var(--card-text, #183451);
  border: 1px solid var(--card-border, #e3e9f1);
  background: linear-gradient(135deg, var(--accent-soft, #f0fdfa), var(--surface, #fff));
  border-radius: .85rem;
  padding: .65rem .8rem;
  min-width: 12rem;
  animation: pb-rise .45s ease-out;
}
a.pb-pulse-chip:hover,
button.pb-pulse-chip:hover {
  border-color: var(--accent-soft-border, #cfe5dc);
}
.pb-pulse-delta { display: block; font-weight: 750; color: var(--accent, #0f766e); font-size: .78rem; }
.pb-pulse-title { display: block; font-weight: 650; margin: .15rem 0; color: var(--card-text, #183451); }
.pb-pulse-chip .muted { color: var(--muted, #74869b); }
.pb-kanban {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pb-lanes, 1), minmax(12.5rem, 1fr));
  grid-template-rows: repeat(var(--pb-rows, 2), auto);
  column-gap: .65rem;
  row-gap: .45rem;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: .35rem;
}
.pb-kanban.pb-kanban-info-open {
  overflow: visible;
}
.pb-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--pb-rows, 2);
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-alt, #f5f8fc);
  border-radius: .85rem;
  padding: .55rem;
  min-height: 8rem;
  min-width: 12.5rem;
  border-top: 3px solid var(--pb-lane-accent, #94a3b8);
  align-content: start;
}
.pb-col-status-new { --pb-lane-accent: #94a3b8; }
.pb-col-status-insnugreview { --pb-lane-accent: #64748b; }
.pb-col-status-indiscussion { --pb-lane-accent: #475569; }
.pb-col-status-instartelreview { --pb-lane-accent: #0e7490; }
.pb-col-status-readyfordevelopment { --pb-lane-accent: #0369a1; }
.pb-col-status-indevelopment { --pb-lane-accent: #0d9488; }
.pb-col-status-scheduledforrelease { --pb-lane-accent: #0f766e; }
.pb-col-status-featurereleased { --pb-lane-accent: #047857; }
.pb-col-status-rejected { --pb-lane-accent: #b45309; }
.pb-col-status-archived { --pb-lane-accent: #78716c; }
/* Legacy status slugs (pre-088) */
.pb-col-status-idea { --pb-lane-accent: #94a3b8; }
.pb-col-status-underreview { --pb-lane-accent: #64748b; }
.pb-col-status-planned { --pb-lane-accent: #0369a1; }
.pb-col-status-inprogress { --pb-lane-accent: #0d9488; }
.pb-col-status-shipped { --pb-lane-accent: #047857; }
.pb-col-status-declined { --pb-lane-accent: #b45309; }
.pb-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted-strong, #5b6b7c);
  margin-bottom: .45rem;
}
.pb-col-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.pb-col-info-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  z-index: 1;
}
.pb-col-info-wrap.open { z-index: 45; }
.pb-col-info {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 35%, var(--surface-border, #c5d4ce));
  background: color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 12%, var(--surface, #fff));
  color: var(--pb-lane-accent, #5b6b7c);
  font-size: .62rem;
  font-weight: 700;
  font-style: normal;
  font-family: inherit;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  flex: 0 0 auto;
}
.pb-col-info:hover,
.pb-col-info:focus-visible {
  background: color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 22%, var(--surface, #fff));
  outline: none;
}
.pb-col-info-flyout {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + .3rem);
  z-index: 46;
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: .45rem .6rem;
  border-radius: .5rem;
  border: 1px solid var(--card-border, #e3e9f1);
  background: var(--surface, #fff);
  color: var(--card-text, #183451);
  box-shadow: 0 8px 20px var(--shadow-color, rgba(15, 23, 42, .14));
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.pb-col-info-wrap:hover .pb-col-info-flyout,
.pb-col-info-wrap.open .pb-col-info-flyout {
  display: block;
}
.pb-col-info-dismiss {
  position: absolute;
  inset: 0;
  z-index: 40;
}
.pb-col-count {
  flex: 0 0 auto;
  min-width: 1.35rem;
  text-align: center;
  border-radius: 999px;
  padding: .1rem .4rem;
  font-size: .68rem;
  font-weight: 750;
  background: color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 22%, var(--surface, #fff));
  color: var(--pb-lane-accent, #5b6b7c);
}
.pb-col-empty { font-size: .78rem; margin: 0; align-self: start; }
.pb-card-slot { min-height: 0; pointer-events: none; }
.pb-kanban-dragging .pb-card-slot {
  pointer-events: auto;
  min-height: 2.5rem;
  border-radius: .65rem;
  border: 1px dashed color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 45%, transparent);
}
.pb-col-drop-target {
  background: color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 12%, var(--surface-alt, #f5f8fc));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pb-lane-accent, #94a3b8) 55%, transparent);
}
.pb-card {
  width: 100%;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--card-text, #183451);
  border: 1px solid var(--card-border, #e3e9f1);
  border-left: 4px solid var(--pb-heat, #cbd5e1);
  background:
    linear-gradient(var(--pb-heat-soft, transparent), var(--pb-heat-soft, transparent)),
    var(--surface, #fff);
  border-radius: .75rem;
  padding: .65rem;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: pb-rise .35s ease-out;
}
.pb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-color, rgba(15, 118, 110, .08)); }
.pb-card.pb-card-draggable { cursor: grab; }
.pb-card.pb-card-draggable:active { cursor: grabbing; }
.pb-card.pb-card-draggable .pb-card-body { cursor: grab; }
.pb-card.pb-card-draggable:active .pb-card-body { cursor: grabbing; }
.pb-card.pb-card-dragging {
  opacity: .45;
  transform: none;
  box-shadow: none;
}
.pb-card-body {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.pb-card-top { display: flex; justify-content: space-between; gap: .4rem; align-items: start; }
.pb-card-meta { font-size: .78rem; margin-top: .35rem; }
.pb-ring { width: 2.4rem; height: 2.4rem; border-radius: 50%; margin-top: .45rem; box-shadow: inset 0 0 0 5px var(--surface, #fff); }
.pb-ring-lg { width: 4rem; height: 4rem; margin-top: 0; box-shadow: inset 0 0 0 8px var(--surface, #fff); }
.pb-ring-wrap {
  position: relative;
  display: inline-block;
  margin-top: .45rem;
}
.pb-ring-wrap > .pb-ring { margin-top: 0; }
.pb-ring-flyout {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 30;
  min-width: 13.5rem;
  max-width: min(16rem, 70vw);
  gap: .75rem;
  align-items: center;
  margin-top: .15rem;
  padding: .7rem .8rem;
  border-radius: .65rem;
  border: 1px solid var(--card-border, #e3e9f1);
  background: var(--surface, #fff);
  color: var(--card-text, #183451);
  box-shadow: 0 10px 28px var(--shadow-color, rgba(15, 23, 42, .14));
  text-align: left;
}
.pb-ring-flyout::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.35rem;
  height: .35rem;
}
.pb-ring-wrap:hover .pb-ring-flyout,
.pb-ring-wrap:focus-within .pb-ring-flyout {
  display: flex;
}
.pb-ring-flyout .pb-ring-lg {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  box-shadow: inset 0 0 0 6px var(--surface, #fff);
}
.pb-dist-panel {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  flex: 1 1 auto;
}
.pb-dist-panel > strong {
  font-size: .78rem;
  line-height: 1.2;
}
.pb-dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .18rem;
}
.pb-dist-row {
  display: grid;
  grid-template-columns: .65rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  line-height: 1.25;
}
.pb-dist-swatch {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
}
.pb-dist-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-dist-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-dist-pct { font-variant-numeric: tabular-nums; }
.pb-dist-summary {
  font-size: .68rem;
  margin-top: .15rem;
}
.pb-traction-legend-wrap { max-width: 40rem; }
.pb-traction-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1.25rem;
  padding: .7rem .9rem;
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .75rem;
  background: var(--surface, #fff);
}
.pb-traction-legend-copy {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 12rem;
  flex: 1 1 12rem;
}
.pb-traction-legend-copy strong {
  font-size: .84rem;
  color: var(--card-text, #183451);
}
.pb-traction-legend-copy .muted {
  font-size: .72rem;
  line-height: 1.35;
}
.pb-traction-scale {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 1 auto;
}
.pb-traction-end {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted-strong, #5b6b7c);
  letter-spacing: .02em;
}
.pb-traction-bar {
  display: inline-flex;
  width: 7.5rem;
  height: .7rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-border, #e3e9f1) 70%, transparent);
}
.pb-traction-seg {
  flex: 1 1 0;
  display: block;
  min-width: 0;
}
.pb-heat-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .08rem .45rem;
  font-size: .72rem;
  font-weight: 750;
  color: #fff;
  background: var(--pb-heat, #94a3b8);
  vertical-align: middle;
}
.pb-vis { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .35rem; border-radius: .35rem; }
.pb-vis-external { background: var(--accent-soft, #ecfdf5); color: var(--accent, #0f766e); }
.pb-vis-internal { background: var(--surface-alt, #f1f5f9); color: var(--muted-strong, #475569); }
.pb-composer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}
.pb-vis-slider {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: .15rem;
    padding: .15rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface, #fff);
    min-width: 12.5rem;
}
.pb-vis-slider-opt {
    border: 0;
    background: transparent;
    color: var(--muted-strong, #5f726c);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.2;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pb-vis-slider-opt:hover {
    color: var(--heading, #15231f);
}
.pb-vis-slider-opt.is-active {
    background: var(--accent, #1f6b57);
    color: var(--accent-contrast, #fff);
    box-shadow: var(--shadow-sm);
}
.pb-vis-slider-opt.is-active.is-admin {
    background: var(--muted-strong, #5f726c);
    color: #fff;
}
.pb-vendor-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .15rem .4rem;
    border-radius: .35rem;
    background: var(--badge-vendor-bg, #fff1e6);
    color: var(--badge-vendor-fg, #9a3412);
    border: 1px solid var(--badge-vendor-border, #fdba74);
}
.vendor-response-banner { font-size: .9rem; font-weight: 600; }
.pb-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 40; animation: pb-fade .2s ease; }
.pb-drawer {
    position: fixed; top: 0; right: 0; width: min(26rem, 100%);
    height: calc(100% - var(--keyboard-inset, 0px));
    background: var(--surface, #fff); z-index: 41; overflow: auto;
    box-shadow: -12px 0 40px rgba(0,0,0,.12); animation: pb-slide .28s ease;
    padding: 1.5rem 1.75rem;
    padding-top: max(1.5rem, var(--safe-top));
    padding-bottom: max(1.5rem, calc(var(--safe-bottom) + 0.5rem + var(--keyboard-inset, 0px)));
    padding-left: max(1.75rem, var(--safe-left));
    padding-right: max(1.75rem, var(--safe-right));
}
.pb-drawer-wide { width: min(34rem, 100%); max-width: 92vw; }
.pb-drawer-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    margin-bottom: 1.15rem;
}
.pb-drawer-header > :is(h1, h2, h3, h4, h5, h6),
.pb-drawer-header > .h1,
.pb-drawer-header > .h2,
.pb-drawer-header > .h3,
.pb-drawer-header > .h4,
.pb-drawer-header > .h5,
.pb-drawer-header > .h6 {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.pb-drawer-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    flex-shrink: 0;
    align-self: flex-end;
    order: -1;
}
.pb-drawer-resize {
    position: absolute;
    top: 0;
    left: 0;
    width: .7rem;
    height: 100%;
    cursor: ew-resize;
    z-index: 2;
    touch-action: none;
    user-select: none;
}
.pb-drawer-resize::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .15rem;
    width: .2rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border-radius: 999px;
    background: var(--border, #cbd5e1);
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
.pb-drawer-resize:hover::after,
.pb-drawer-resize:focus-visible::after,
.pb-drawer.pb-drawer-resizing .pb-drawer-resize::after {
    opacity: 1;
    background: var(--accent, #0f766e);
}
body.pb-drawer-resize-active { cursor: ew-resize; user-select: none; }
body.pb-drawer-resize-active .pb-drawer-backdrop { pointer-events: none; }
.pb-drawer.pb-drawer-resizing { transition: none; animation: none; }
.pb-drawer-fullscreen {
    inset: 0;
    width: 100% !important;
    max-width: none;
    box-shadow: none;
    animation: pb-fade .2s ease;
    padding-top: 0;
}
.pb-drawer-fullscreen .pb-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface, #fff);
    padding-top: max(1.5rem, var(--safe-top));
    padding-bottom: .65rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-drawer-fullscreen .pb-drawer-resize { display: none; }
@media (min-width: 901px) {  /* was 768 — Axis B */
    .pb-drawer-fullscreen {
        padding-left: max(1.75rem, calc((100% - 42rem) / 2));
        padding-right: max(1.75rem, calc((100% - 42rem) / 2));
    }
}
@media (max-width: 900px) {  /* was 767.98 — Axis B */
    .pb-drawer-resize { display: none; }
}
.pb-story { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }
.pb-story-step { background: var(--accent-soft, #f0fdfa); border: 1px solid var(--accent-soft-border, #99f6e4); border-radius: 999px; padding: .2rem .55rem; font-size: .78rem; font-weight: 600; color: var(--card-text, #183451); }
.pb-story-compact { margin: .35rem 0; }
.pb-wish-timeline {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
}
.pb-wish-timeline-item {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0 .65rem;
    padding-bottom: .85rem;
    position: relative;
}
.pb-wish-timeline-item:last-child { padding-bottom: 0; }
.pb-wish-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: .4rem;
    top: .6rem;
    bottom: 0;
    width: 2px;
    background: var(--border, #e5e7eb);
    transform: translateX(-50%);
}
.pb-wish-timeline-marker {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 2px solid var(--accent, #1f6b57);
    background: var(--surface, #fff);
    margin-top: .12rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.pb-wish-timeline-item:last-child .pb-wish-timeline-marker {
    background: var(--accent, #1f6b57);
}
.pb-wish-timeline-status {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--card-text, #183451);
    line-height: 1.35;
}
.pb-wish-timeline-when { display: block; line-height: 1.35; }
.pb-wish-timeline-reason { display: block; margin-top: .12rem; line-height: 1.35; }
.pb-change-history {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: .65rem;
    margin: 0;
}
.pb-change-history.pb-wish-timeline { list-style: none; }
.pb-change-row { font-size: .9rem; }
.pb-change-row .pb-wish-timeline-status { margin-right: 0; }
.pb-change-detail {
    display: block;
    margin-top: .08rem;
    line-height: 1.4;
    word-break: break-word;
}
.pb-change-row.is-view .pb-wish-timeline-marker {
    border-color: var(--muted, #64748b);
    background: color-mix(in srgb, var(--muted, #64748b) 18%, var(--surface, #fff));
}
.pb-change-row.is-view:last-child .pb-wish-timeline-marker {
    background: var(--muted, #64748b);
    border-color: var(--muted, #64748b);
}
.pb-feedback-item, .pb-merge-card { border-top: 1px solid var(--table-row-border, #edf1f6); padding: .85rem 0; }
.wb-manage-metrics { padding: 1rem 1.15rem; }
.wb-manage-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748b); border-bottom-width: 1px; }
.wb-manage-table td { vertical-align: middle; }
.wb-manage-title { font-weight: 600; color: var(--heading, var(--text, #0f172a)); text-decoration: none; }
.wb-manage-title:hover { text-decoration: underline; }
.wb-manage-group-row td {
    background: var(--surface-alt, #f1f5f9);
    color: var(--heading, var(--text, #0f172a));
    font-size: .85rem;
    padding-top: .7rem;
    padding-bottom: .4rem;
    border-bottom: none;
}
.wb-manage-group-row + tr td { padding-top: .45rem; }
.wb-areas-quick-list { display: flex; flex-direction: column; gap: .75rem; }
.wb-areas-quick-group { border: 1px solid var(--table-row-border, #edf1f6); border-radius: .45rem; padding: .5rem .65rem; }
.wb-areas-quick-children { margin: .35rem 0 0 1rem; padding-left: .65rem; border-left: 2px solid var(--surface-alt, #f1f5f9); }
.wb-areas-quick-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .2rem 0; }
.wb-areas-quick-row.is-archived { opacity: .7; }
.wb-areas-quick-name { font-weight: 600; flex: 1 1 auto; min-width: 6rem; }
.wb-areas-quick-actions { display: flex; gap: .25rem; margin-left: auto; }
a.pb-feedback-item.portal-dash-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: .55rem;
  margin: 0 -.35rem;
  padding-left: .35rem;
  padding-right: .35rem;
  transition: background-color .15s ease, border-color .15s ease;
}
a.pb-feedback-item.portal-dash-link:hover {
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 6%, var(--surface-alt, #f8fafc));
}
a.pb-feedback-item.portal-dash-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--portal-accent, #0f766e) 55%, transparent);
  outline-offset: 2px;
}
.pb-merge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pb-merge-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pb-merge-wish {
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .55rem;
  padding: .75rem .85rem;
  background: var(--surface, #fff);
}
.pb-merge-wish-keep { border-color: var(--accent-soft-border, #99f6e4); background: var(--accent-soft, #f0fdfa); }
.pb-merge-wish-result {
  border-color: var(--accent, #0f766e);
  background: var(--accent-soft, #ecfdf5);
}
.pb-merge-wish-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin-bottom: .35rem;
}
.pb-merge-wish-body { font-size: .9rem; }
.pb-merge-wish-body p:last-child { margin-bottom: 0; }
.pb-merge-ratings {
  border: 1px solid var(--table-row-border, #edf1f6);
  border-radius: .5rem;
  padding: .5rem .75rem;
  background: var(--surface-alt, #f8fafc);
}
.pb-merge-ratings .table { --bs-table-bg: transparent; }
.pb-merge-ratings-keep td { background: var(--accent-soft, #f0fdfa); }
.pb-merge-ratings-total td {
  border-top-width: 2px;
  background: var(--surface, #fff);
}
.pb-merge-into {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0;
  font-size: .85rem;
  font-weight: 650;
  color: var(--accent, #0f766e);
}
.pb-merge-into-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--accent-soft, #ecfdf5);
  border: 1px solid var(--accent-soft-border, #99f6e4);
}
.pb-node-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--table-row-border, #edf1f6); }
.pb-tree-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pb-tree-chip {
  border: 1px solid var(--card-border, #e2e8f0);
  background: var(--control-bg, #fff);
  color: var(--card-text, #334155);
  border-radius: .45rem;
  padding: .28rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.pb-tree-chip.active {
  border-color: var(--accent, #0f766e);
  background: var(--accent-soft, #ecfdf5);
  color: var(--accent, #115e59);
}

.pb-roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.pb-roadmap-board {
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(20rem, 1.35fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {  /* was 960 — Axis B */
  .pb-roadmap-board { grid-template-columns: 1fr; }
}
.pb-roadmap-releases {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.pb-roadmap-lane { padding: 0; overflow: hidden; }
.pb-roadmap-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  color: var(--card-text);
}
.pb-roadmap-lane-head .h5,
.pb-roadmap-lane-head h2 {
  color: var(--heading);
}
.pb-roadmap-lane-head .muted {
  color: var(--muted);
}
.pb-roadmap-lane.is-collapsed .pb-roadmap-lane-head {
  border-bottom: none;
}
.pb-roadmap-lane-toggle {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}
div.pb-roadmap-lane-toggle {
  cursor: default;
}
.pb-roadmap-lane-toggle:hover .h5,
.pb-roadmap-lane-toggle:focus-visible .h5 {
  color: var(--primary, #2563eb);
}
.pb-roadmap-lane-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary, #2563eb) 45%, transparent);
  outline-offset: 2px;
  border-radius: .35rem;
}
.pb-roadmap-chevron {
  display: inline-flex;
  width: 1rem;
  justify-content: center;
  margin-top: .2rem;
  color: var(--muted-strong, #5b6b7c);
  font-size: .85rem;
  line-height: 1;
}
.pb-roadmap-collapse-btn {
  min-width: 2rem;
  padding-left: .45rem;
  padding-right: .45rem;
}
.pb-roadmap-unassigned-search {
  padding: .65rem .85rem 0;
}
.pb-roadmap-cards { display: flex; flex-direction: column; gap: .65rem; padding: .85rem; }
.pb-roadmap-card {
  border: 1px solid var(--card-border, #e2e8f0);
  border-left: 4px solid var(--pb-heat, #cbd5e1);
  border-radius: .55rem;
  padding: .75rem .85rem;
  background:
    linear-gradient(var(--pb-heat-soft, transparent), var(--pb-heat-soft, transparent)),
    var(--control-bg, #fff);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-roadmap-card:hover,
.pb-roadmap-card:focus-visible {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 18%, transparent);
  outline: none;
}
.pb-roadmap-card[draggable="true"] { cursor: grab; }
.pb-roadmap-card.is-dragging { opacity: .55; cursor: grabbing; }
.pb-roadmap-lane.is-drop-target {
  outline: 2px dashed var(--primary, #2563eb);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary, #2563eb) 6%, var(--surface, #fff));
}
.pb-roadmap-drop-hint {
  border: 1px dashed var(--card-border, #e2e8f0);
  border-radius: .45rem;
  padding: .65rem .75rem;
  text-align: center;
}
.pb-roadmap-toolbar { padding: .85rem 1rem; }
.pb-roadmap-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}
.pb-roadmap-toolbar-search { flex: 1 1 14rem; min-width: 0; }
.pb-roadmap-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.pb-roadmap-toolbar-panel {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.pb-roadmap-toolbar-footer { margin-top: .65rem; }
.pb-roadmap-menu-wrap { position: relative; }
.pb-roadmap-menu-btn { min-width: 2rem; padding-left: .45rem; padding-right: .45rem; }
.pb-roadmap-menu {
  position: absolute;
  top: calc(100% + .25rem);
  right: 0;
  z-index: 20;
  min-width: 9rem;
  padding: .35rem 0;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .45rem;
  background: var(--modal-bg, var(--surface, #fff));
  box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
}
.pb-roadmap-menu-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .45rem .85rem;
  text-align: left;
  color: var(--card-text, inherit);
  text-decoration: none;
  font-size: .875rem;
  cursor: pointer;
}
.pb-roadmap-menu-item:hover,
.pb-roadmap-menu-item:focus-visible {
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  outline: none;
}
.pb-roadmap-chevron-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--muted-strong, #5b6b7c);
}

/* Admin roadmap Timeline view */
.pb-roadmap-timeline { padding: 0; overflow: hidden; }
.pb-roadmap-timeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  color: var(--card-text);
}
.pb-roadmap-timeline-undated {
  padding: .85rem 1rem 0;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-roadmap-timeline-undated-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-bottom: .65rem;
}
.pb-roadmap-timeline-undated-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-bottom: .85rem;
}
.pb-roadmap-timeline-axis { padding: .85rem 1rem 1rem; }
.pb-roadmap-timeline-scale {
  position: relative;
  height: 1.5rem;
  margin: 0 0 .75rem 0;
  margin-left: min(12rem, 28%);
  border-bottom: 1px solid var(--table-row-border, #cbd5e1);
}
.pb-roadmap-timeline-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: .68rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.pb-roadmap-timeline-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "meta track actions"
    "chips chips chips";
  gap: .45rem .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-roadmap-timeline-row:last-child { border-bottom: none; }
.pb-roadmap-timeline-row.is-undated {
  grid-template-columns: minmax(9rem, 1fr) auto;
  grid-template-areas:
    "meta actions"
    "chips chips";
  padding: .65rem .75rem;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .5rem;
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  color: var(--card-text);
}
.pb-roadmap-timeline-row-meta { grid-area: meta; min-width: 0; }
.pb-roadmap-timeline-row-meta strong { display: block; }
.pb-roadmap-timeline-row-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: flex-start;
  justify-content: flex-end;
}
.pb-roadmap-timeline-track {
  grid-area: track;
  position: relative;
  min-height: 2.25rem;
  align-self: center;
}
.pb-roadmap-timeline-track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--table-row-border, #e2e8f0);
  transform: translateY(-50%);
}
.pb-roadmap-timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  z-index: 1;
}
.pb-roadmap-timeline-marker-dot {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: var(--accent, #0f766e);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--accent, #0f766e);
}
.pb-roadmap-timeline-marker-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent, #0f766e);
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-roadmap-timeline-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pb-roadmap-timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .45rem;
  padding: .35rem .55rem;
  background: var(--surface, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: .82rem;
}
.pb-roadmap-timeline-chip:hover,
.pb-roadmap-timeline-chip:focus-visible {
  border-color: var(--accent, #0f766e);
  outline: none;
}
.pb-roadmap-timeline-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
@media (max-width: 900px) {  /* was 720 — Axis B */
  .pb-roadmap-timeline-scale { margin-left: 0; }
  .pb-roadmap-timeline-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "actions"
      "track"
      "chips";
  }
  .pb-roadmap-timeline-row.is-undated {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "actions"
      "chips";
  }
  .pb-roadmap-timeline-row-actions { justify-content: flex-start; }
}

/* Member-facing public roadmap — release packages */
.pub-roadmap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.25rem;
}
.pub-roadmap-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.pub-roadmap-jump a {
  color: var(--accent, #0f766e);
  text-decoration: none;
}
.pub-roadmap-jump a:hover,
.pub-roadmap-jump a:focus-visible {
  text-decoration: underline;
}
.pub-roadmap-section-head {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .85rem;
}
.pub-roadmap-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub-roadmap-release {
  padding: 0;
  overflow: hidden;
}
.pub-roadmap-release-head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  color: var(--card-text);
}
.pub-roadmap-release-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.pub-roadmap-date-pill {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: .4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  white-space: nowrap;
}
.pub-roadmap-date-pill.is-upcoming {
  background: color-mix(in srgb, var(--accent, #0f766e) 14%, var(--surface, #fff));
  color: var(--accent, #0f766e);
}
.pub-roadmap-date-pill.is-tbd {
  background: var(--control-bg, #eef2f6);
  color: var(--muted, #5b6b7c);
}
.pub-roadmap-date-pill.is-shipped {
  background: color-mix(in srgb, #15803d 14%, var(--surface, #fff));
  color: #15803d;
}
[data-theme="dark"] .pub-roadmap-date-pill.is-shipped,
html[data-theme="dark"] .pub-roadmap-date-pill.is-shipped {
  color: #86efac;
  background: color-mix(in srgb, #86efac 16%, var(--surface, #161821));
}
.pub-roadmap-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pub-roadmap-item {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.pub-roadmap-item:first-child { border-top: none; }
.pub-roadmap-item-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem .75rem;
  color: inherit;
  text-decoration: none;
}
.pub-roadmap-item-link:hover .pub-roadmap-item-title,
.pub-roadmap-item-link:focus-visible .pub-roadmap-item-title {
  color: var(--accent, #0f766e);
  text-decoration: underline;
}
.pub-roadmap-item-title {
  font-weight: 600;
  color: var(--heading, var(--text, #0f1c2a));
  min-width: 0;
}
.pub-roadmap-item-notes {
  margin-top: .45rem;
  color: var(--card-text, var(--text));
  font-size: .92rem;
}
.pub-roadmap-item-notes > *:last-child { margin-bottom: 0; }
.pub-roadmap-empty {
  padding: .85rem 1.1rem 1rem;
}
.pub-roadmap-release.is-unassigned .pub-roadmap-release-head {
  background: transparent;
}
.pub-roadmap-release.is-initiative .pub-roadmap-release-head {
  background: color-mix(in srgb, var(--accent, #0f766e) 6%, var(--surface-muted, var(--surface-alt, #f8fafc)));
}

.pb-rm-manage {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {  /* was 960 — Axis B */
  .pb-rm-manage { grid-template-columns: 1fr; }
}
.pb-rm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  color: var(--muted, #61758c);
  font-size: .92rem;
}
.pb-rm-task-list { padding: 0; overflow: hidden; }
.pb-rm-task-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
  background: var(--surface-muted, var(--surface-alt, #f8fafc));
  color: var(--card-text);
}
.pb-rm-tasks {
  list-style: none;
  margin: 0;
  padding: .65rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pb-rm-tasks > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem;
  align-items: stretch;
}
.pb-rm-task {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--card-border, #e3e9f1);
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  border-radius: .55rem;
  padding: .65rem .75rem;
  cursor: pointer;
}
.pb-rm-task:hover,
.pb-rm-task:focus-visible {
  border-color: var(--accent, #1e57b4);
  outline: none;
}
.pb-rm-task.is-selected {
  border-color: var(--accent, #1e57b4);
  background: var(--accent-soft, #eef4ff);
  box-shadow: inset 3px 0 0 var(--accent, #1e57b4);
}
.pb-rm-task.is-blocked { border-color: #e4b35c; }
.pb-rm-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  margin-top: .35rem;
}
.pb-rm-task-actions {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.pb-rm-detail { min-height: 24rem; }
.pb-rm-detail-empty {
  padding: 2rem 1.25rem;
  text-align: center;
}
.pb-rm-detail-body { padding: 1rem 1.15rem 1.35rem; }

.pb-impact-summary-lg {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: .65rem 0;
}
.pb-impact-summary-lg .pb-impact-summary-meta { margin: 0; flex: 1; min-width: 0; }
.pb-impact-summary-lg .pb-ring-lg { flex-shrink: 0; }
.pb-roadmap-card .pb-impact-summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
  flex-wrap: wrap;
}
.pb-roadmap-card .pb-ring,
.pb-roadmap-card .pb-ring-wrap { margin-top: 0; flex-shrink: 0; }
.pb-roadmap-card .pb-card-meta { margin-top: 0; }

.pb-filter-bar { padding: 1rem 1.1rem; }
.pb-filter-row {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .65rem .75rem;
  align-items: end;
}
.pb-filter-field label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  color: var(--muted-strong, #5b6b7c);
  margin-bottom: .25rem;
}
.pb-filter-grow { min-width: 12rem; }
.pb-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-top: .75rem;
}
.pb-filter-tags-label { font-size: .75rem; margin-right: .15rem; }
.pb-filter-hashtags {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.pb-filter-hashtags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.pb-filter-hashtags-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  background: transparent;
  color: var(--card-text, #334155);
  font-size: .85rem;
  font-weight: 650;
  padding: .15rem 0;
  cursor: pointer;
}
.pb-filter-hashtags-toggle:hover { color: var(--accent, #0f766e); }
.pb-filter-hashtags-chevron {
  display: inline-block;
  width: .85rem;
  color: var(--muted-strong, #5b6b7c);
  font-size: .75rem;
}
.pb-hashtag-filter {
  border: 1px solid var(--accent-soft-border, #dbe4ee);
  background: var(--accent-soft, #f8fafc);
  color: var(--accent, #0f766e);
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .75rem;
  font-weight: 650;
  cursor: pointer;
}
.pb-hashtag-filter.active {
  background: var(--accent, #0f766e);
  border-color: var(--accent, #0f766e);
  color: var(--accent-contrast, #fff);
}
.pb-filter-tag-picker { flex: 1 1 12rem; min-width: 10rem; max-width: 22rem; }
.pb-filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
button.pb-hashtag.pb-hashtag-btn {
  cursor: pointer;
  font: inherit;
}
.pb-comment { padding: .4rem 0; border-bottom: 1px solid var(--table-row-border, #edf1f6); font-size: .9rem; }
.pb-thread { margin-top: .35rem; }
.pb-thread-empty { margin: .35rem 0 .15rem; font-size: .9rem; }
.pb-comment-node { margin-left: calc(var(--pb-depth, 0) * 1rem); }
.pb-comment-card { border: 1px solid var(--card-border, #e3e9f1); border-radius: .7rem; padding: .65rem .75rem; margin-top: .45rem; background: var(--surface, #fff); }
.pb-comment-deleted { opacity: .65; font-style: italic; }
.pb-comment-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; margin-bottom: .35rem; }
.pb-comment-body { white-space: pre-wrap; color: var(--card-text, #183451); }
.pb-comment-body .mention { font-weight: 650; text-decoration: none; color: var(--accent, #0f766e); }
.pb-comment-body .mention:hover { text-decoration: underline; }
.pb-comment-actions { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-top: .4rem; }
.pb-react { border: 1px solid var(--card-border, #e3e9f1); background: var(--surface-alt, #f5f8fc); border-radius: 999px; padding: .15rem .55rem; font-size: .72rem; font-weight: 650; color: var(--muted-strong, #5b6b7c); }
.pb-react.active { background: var(--accent-soft, #ecfdf5); border-color: var(--accent-soft-border, #99f6e4); color: var(--accent, #0f766e); }
.pb-react-like { display: inline-flex; align-items: center; gap: .2rem; }
.pb-react-like .pb-react-heart { color: #b45309; font-size: .85em; line-height: 1; }
.pb-react-like.active { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.pb-react-like.active .pb-react-heart { color: #c2410c; }
.pb-show-replies { padding-left: .35rem; font-weight: 650; }
.pb-replies { border-left: 2px solid var(--accent-soft-border, #ccfbf1); margin-left: .35rem; padding-left: .35rem; }
.pb-reply-box { background: var(--surface-alt, #f5f8fc); border-radius: .55rem; padding: .55rem; }
.pb-thread-composer {
    margin-top: .75rem;
    padding: .75rem;
    padding-bottom: max(0.75rem, calc(0.5rem + var(--keyboard-inset, 0px)));
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .7rem;
    background: var(--surface-alt, #fbfcfe);
}
.pb-admin-card {
    margin-top: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-md, .75rem);
    background: var(--surface-alt, #fbfcfe);
}
.pb-admin-card > .h6:first-child,
.pb-admin-card > h3.h6:first-child {
    margin: 0 0 .65rem;
    color: var(--heading-alt, #1c332c);
}
.pb-admin-card .form-label,
.pb-admin-card label {
    font-size: .78rem;
    font-weight: 650;
    color: var(--muted-strong, #5f726c);
}
.modal-dialog .pb-admin-card,
.pb-rm-detail .pb-admin-card {
    background: var(--surface-nested, #f7faf8);
}

.pb-admin-panel {
    container-type: inline-size;
    container-name: pb-admin;
    margin-top: 1rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-md, .75rem);
    background: var(--surface, #fff);
    overflow: hidden;
}
.modal-dialog .pb-admin-panel,
.pb-rm-detail .pb-admin-panel,
.pb-wish-full .pb-admin-panel {
    background: var(--surface, #fff);
}
.pb-admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.05rem;
    background: color-mix(in srgb, var(--accent-soft, #e4efe9) 42%, var(--surface, #fff));
    border-bottom: 1px solid var(--card-border, #e3e9f1);
}
.pb-admin-panel.is-collapsed .pb-admin-panel-head {
    border-bottom: 0;
}
.pb-admin-panel-toggle {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.pb-admin-panel-toggle:hover .pb-admin-panel-title,
.pb-admin-panel-toggle:focus-visible .pb-admin-panel-title {
    color: var(--accent, #1f6b57);
}
.pb-admin-panel-titles {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.pb-admin-panel-title {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--heading, #15231f);
    letter-spacing: -.015em;
}
.pb-admin-panel-sub {
    margin: 0;
    font-size: .78rem;
    line-height: 1.35;
    max-width: 28rem;
}
.pb-admin-saved {
    flex-shrink: 0;
    align-self: center;
    font-size: .72rem;
    font-weight: 650;
    color: var(--accent, #1f6b57);
    background: var(--accent-soft, #e4efe9);
    border: 1px solid var(--accent-soft-border, #cfe5dc);
    border-radius: var(--radius-pill, 999px);
    padding: .25rem .6rem;
    animation: pb-rise .25s ease;
}
.pb-admin-panel-body {
    display: flex;
    flex-direction: column;
}
.pb-admin-section {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .85rem 1.05rem .95rem;
    border-top: 1px solid var(--table-row-border, #edf1f6);
}
.pb-admin-panel-body > .pb-admin-section:first-child {
    border-top: 0;
}
.pb-admin-section.is-collapsed {
    gap: 0;
    padding-bottom: .75rem;
}
.pb-admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 1.75rem;
}
.pb-admin-section-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.pb-admin-section-toggle:hover .pb-admin-section-title,
.pb-admin-section-toggle:focus-visible .pb-admin-section-title {
    color: var(--accent, #1f6b57);
}
.pb-admin-section-title {
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-strong, #5f726c);
}
.pb-admin-section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}
.pb-admin-icon-btn {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--accent, #1f6b57);
    background: transparent;
    border: 1px solid var(--accent-soft-border, #cfe5dc);
    border-radius: var(--radius-sm, .5rem);
}
.pb-admin-icon-btn:hover:not(:disabled),
.pb-admin-icon-btn:focus-visible {
    color: var(--accent, #1f6b57);
    background: var(--accent-soft, #e4efe9);
    border-color: var(--accent, #1f6b57);
}
.pb-admin-icon-btn:disabled {
    opacity: .55;
}
/* Nested above wish-detail / board modals (1050). */
.pb-initiative-create-backdrop {
    z-index: 1100;
}
.modal-dialog.pb-initiative-create-modal {
    z-index: 1101;
    width: min(100% - 2rem, 28rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 28rem);
}
.pb-collapse-chevron {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: .85rem;
    line-height: 1.2;
    color: var(--muted, #64748b);
}
.pb-collapse {
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-md, .75rem);
    background: var(--surface, #fff);
    overflow: hidden;
}
.pb-collapse-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    background: color-mix(in srgb, var(--surface-nested, #f7faf8) 70%, var(--surface, #fff));
    border-bottom: 1px solid transparent;
}
.pb-collapse.is-open .pb-collapse-head {
    border-bottom-color: var(--card-border, #e3e9f1);
}
.pb-collapse-toggle {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.pb-collapse-titles {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.pb-collapse-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading, #15231f);
    letter-spacing: -.01em;
}
.pb-collapse-toggle:hover .pb-collapse-title,
.pb-collapse-toggle:focus-visible .pb-collapse-title {
    color: var(--accent, #1f6b57);
}
.pb-collapse-sub {
    font-size: .78rem;
    line-height: 1.35;
}
.pb-collapse-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.pb-collapse-body {
    padding: 1rem;
}
.pb-collapse-compact .pb-collapse-head {
    padding: .55rem .75rem;
}
.pb-collapse-compact .pb-collapse-body {
    padding: .75rem;
}
.pb-collapse-compact .pb-collapse-title {
    font-size: .8rem;
}
.pb-admin-save {
    color: var(--accent, #1f6b57);
    background: transparent;
    border: 1px solid var(--accent-soft-border, #cfe5dc);
    border-radius: var(--radius-sm, .5rem);
    font-weight: 650;
    padding: .2rem .55rem;
    line-height: 1.3;
}
.pb-admin-save:hover:not(:disabled),
.pb-admin-save:focus-visible {
    color: var(--accent, #1f6b57);
    background: var(--accent-soft, #e4efe9);
    border-color: var(--accent, #1f6b57);
}
.pb-admin-save:disabled {
    opacity: .55;
}
.pb-admin-secondary-action {
    align-self: flex-start;
    color: var(--heading-alt, #1c332c);
    background: var(--surface-nested, #f7faf8);
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-sm, .5rem);
    font-weight: 650;
    padding: .3rem .7rem;
}
.pb-admin-secondary-action:hover:not(:disabled),
.pb-admin-secondary-action:focus-visible {
    background: var(--accent-soft, #e4efe9);
    border-color: var(--accent-soft-border, #cfe5dc);
    color: var(--accent, #1f6b57);
}
.pb-admin-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}
.pb-admin-field {
    min-width: 0;
}
.pb-admin-field label {
    display: block;
    margin-bottom: .28rem;
    font-size: .75rem;
    font-weight: 650;
    color: var(--muted-strong, #5f726c);
}
.pb-admin-field .form-select,
.pb-admin-field .form-control,
.pb-admin-field .ss-wrap {
    width: 100%;
    min-width: 0;
}
.pb-admin-empty {
    margin: 0;
    font-size: .8rem;
    color: var(--muted, #7a8b85);
    line-height: 1.4;
}
.pb-admin-batch-chips {
    margin: 0;
}
.pb-admin-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pb-admin-link-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .55rem;
    padding: .5rem .65rem;
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface-nested, #f7faf8);
}
.pb-admin-link-title {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--accent, #1f6b57);
    font-weight: 650;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
}
.pb-admin-link-title:hover {
    text-decoration: underline;
}
.pb-admin-link-remove {
    margin-left: auto;
    line-height: 1;
    padding: .1rem .45rem;
}
.pb-admin-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: stretch;
}
.pb-admin-add-select {
    flex: 1 1 12rem;
    min-width: 0;
    width: auto;
    max-width: none;
}
.pb-admin-add-select.ss-wrap.ss-inline,
.pb-admin-dep-dir.ss-wrap.ss-inline {
    display: block;
    width: auto;
}
.pb-admin-dep-dir {
    flex: 0 1 10.5rem;
    min-width: 8.5rem;
}
@container pb-admin (min-width: 28rem) {
    .pb-admin-fields {
        grid-template-columns: 1fr 1fr;
    }
    .pb-admin-field-full {
        grid-column: 1 / -1;
    }
    .pb-admin-fields-planning {
        grid-template-columns: minmax(0, 1.4fr) 6.5rem;
    }
    .pb-admin-fields-prio {
        grid-template-columns: 1fr 1fr;
    }
    .pb-admin-add-row-deps {
        flex-wrap: nowrap;
    }
    .pb-admin-add-row-deps .pb-admin-add-select {
        flex: 1 1 auto;
    }
}
.pb-admin-section-hint { line-height: 1.35; }
.pb-admin-metric-example {
    margin: 0;
    padding: .45rem .65rem;
    border-radius: var(--radius-sm, .5rem);
    background: var(--surface-nested, #f7faf8);
    border: 1px dashed var(--card-border, #e3e9f1);
    line-height: 1.4;
}
.pb-admin-metric-example strong {
    font-weight: 650;
    color: var(--text, #1a2b26);
}
.pb-admin-prio-score {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem;
}
.pb-prio-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem;
}
.pb-prio-chip {
    display: inline-flex; align-items: center;
    border-radius: .35rem; padding: .12rem .45rem;
    font-size: .72rem; font-weight: 700;
    background: var(--surface-nested, #f1f5f9);
    color: var(--muted-strong, #475569);
    border: 1px solid var(--surface-border, #e2e8f0);
}
.pb-prio-chip-empty { opacity: .7; font-weight: 600; }
.pb-recent-area { display: flex; flex-direction: column; gap: .35rem; }
.pb-recent-area-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .65rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .5rem;
  background: var(--control-bg, #fff);
  padding: .55rem .7rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
a.pb-recent-area-item:hover,
.pb-recent-area-item:hover { border-color: var(--accent, #0f766e); background: var(--accent-soft, #ecfdf5); }
.pb-recent-area-title { font-weight: 600; color: var(--card-text, #0f172a); flex: 1 1 8rem; }

.pb-wish-full { width: 100%; max-width: none; }
.pb-wish-full .pb-recent-area { margin-top: .25rem; }

/* Member wish detail flyout ? sectioned, scannable layout */
.pb-member-detail {
    display: flex;
    flex-direction: column;
}
.pb-member-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .55rem .75rem;
    min-width: 0;
}
.pb-member-detail-heading .h4 {
    flex: 1 1 12rem;
    min-width: 0;
    line-height: 1.35;
}
.pb-member-status {
    align-self: center;
    font-weight: 600;
    letter-spacing: .01em;
}
.pb-member-detail-chips {
    margin: 0 0 1rem;
}
.pb-member-detail .pb-story {
    margin: 0 0 1.15rem;
}
.pb-member-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: .35rem;
}
.pb-member-detail-sections > .pb-collapse {
    margin: 0;
}
.pb-member-detail-photo {
    display: block;
    max-width: 100%;
    margin: 0 0 1rem;
    border: 1px solid var(--card-border, #e3e9f1);
}
.pb-wish-prose {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--card-text, #183451);
}
.pb-wish-prose > *:first-child {
    margin-top: 0;
}
.pb-wish-prose > *:last-child {
    margin-bottom: 0;
}
.pb-wish-prose p {
    margin: 0 0 1.05rem;
}
.pb-wish-prose p + p {
    margin-top: 0;
}
.pb-wish-prose ul,
.pb-wish-prose ol {
    margin: 0 0 1.05rem;
    padding-left: 1.25rem;
}
.pb-wish-prose li + li {
    margin-top: .35rem;
}
.pb-wish-prose strong,
.pb-wish-prose b {
    color: var(--heading, #15231f);
    font-weight: 700;
}
/* Treat bold section labels (Problem / Solution / Benefit) as mini headings */
.pb-wish-prose p:has(> strong:first-child),
.pb-wish-prose p:has(> b:first-child) {
    margin-top: 1.35rem;
    margin-bottom: .55rem;
    padding-top: .15rem;
}
.pb-wish-prose > p:has(> strong:first-child):first-child,
.pb-wish-prose > p:has(> b:first-child):first-child {
    margin-top: 0;
    padding-top: 0;
}
.pb-wish-prose p:has(> strong:only-child),
.pb-wish-prose p:has(> b:only-child) {
    margin-bottom: .4rem;
    font-size: .82rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted-strong, #5b6b7c);
}
.pb-wish-prose p:has(> strong:only-child) strong,
.pb-wish-prose p:has(> b:only-child) b {
    color: var(--muted-strong, #5b6b7c);
    font-weight: 750;
}
.pb-member-detail .pb-impact-panel {
    margin: 0;
    padding: 1rem 1.05rem;
}
.pb-member-detail .pb-impact-panel label {
    display: block;
    margin-bottom: .45rem;
}
.pb-member-detail .pb-slider {
    margin: .15rem 0 .35rem;
}
.pb-member-detail .pb-impact-labels {
    margin-bottom: .55rem;
}
.pb-member-detail .pb-collapse-body .pb-impact-summary {
    margin-top: .15rem;
}
.pb-member-detail .pb-recent-area-item {
    padding: .65rem 0;
}

.pb-impact label { font-size: .78rem; font-weight: 650; color: var(--muted-strong, #5b6b7c); }
.pb-slider { width: 100%; accent-color: var(--accent, #2563eb); }
.pb-impact-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted, #7a8a9a); }
.pb-impact-compare { font-size: .8rem; animation: pb-rise .35s ease; }
.pb-impact-panel {
  border: 1px solid var(--accent-soft-border, #99f6e4);
  background: var(--accent-soft, #f0fdfa);
  border-radius: .65rem;
  padding: .75rem .85rem;
  color: var(--card-text, #183451);
}
.pb-card-vote {
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px solid var(--accent-soft-border, #ccfbf1);
  font-size: .72rem;
  font-weight: 650;
  color: var(--accent, #0f766e);
}
.pb-card-vote-needed {
  color: var(--accent, #0369a1);
}
.pb-card-vote-closed {
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
  font-size: .78rem;
}
.pb-card-vote-label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  color: var(--muted-strong, #5b6b7c);
  margin-bottom: .2rem;
}
.pb-card-vote-meta {
  font-size: .7rem;
  font-weight: 500;
  margin-top: .15rem;
}
.pb-card-vote .pb-slider { margin-top: .1rem; }
.pb-card-vote .btn { font-size: .72rem; }
.pb-celebrate { animation: pb-burst .55s ease; }
.pb-celebrate-btn { animation: pb-glow 2s ease-in-out infinite; }
.pb-brief { border-top: 1px solid var(--table-row-border, #edf1f6); padding-top: .75rem; }
.pb-brief-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--accent, #0f766e);
    background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 28%, transparent);
    border-radius: .35rem;
    padding: .15rem .45rem;
}
.pb-brief-show { display: flex; }
.pb-home-pulse { margin-top: 1rem; }
@media (max-width: 900px) {  /* was 800 — Axis B, kanban swipe lanes */
  .pb-kanban {
    grid-auto-flow: column;
    grid-auto-columns: minmax(13.5rem, 82vw);
    grid-template-columns: none;
    grid-template-rows: none;
    row-gap: 0;
    gap: .75rem;
    padding-bottom: .35rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .pb-col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    grid-row: auto;
    scroll-snap-align: start;
  }
  .pb-card {
    height: auto;
    border-radius: 1rem;
    border-color: transparent;
    box-shadow: var(--shadow-sm), var(--surface-sheen, none);
    padding: .85rem .9rem;
  }
  .pb-card-slot { display: none; }
  .pb-merge-grid { grid-template-columns: 1fr; }
  .pb-merge-detail-grid { grid-template-columns: 1fr; }
  .pb-filter-bar {
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    border-color: transparent;
  }
}
@supports not (grid-template-rows: subgrid) {
  .pb-kanban { grid-template-rows: none; }
  .pb-col {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    grid-row: auto;
  }
  .pb-card { height: auto; }
  .pb-card-slot { display: none; }
}
@keyframes pb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-slide { from { transform: translateX(1.5rem); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pb-burst { 0% { box-shadow: 0 0 0 0 rgba(15,118,110,.35); } 100% { box-shadow: 0 0 0 16px rgba(15,118,110,0); } }
@keyframes pb-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }

.pb-tag-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pb-hashtag { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--accent-soft-border, #99f6e4); background: var(--accent-soft, #f0fdfa); color: var(--accent, #0f766e); border-radius: 999px; padding: .12rem .5rem; font-size: .72rem; font-weight: 650; }
.pb-hashtag.active { background: var(--accent, #0f766e); border-color: var(--accent, #0f766e); color: var(--accent-contrast, #fff); }
.pb-tag-x { border: 0; background: transparent; color: inherit; line-height: 1; padding: 0 .1rem; font-size: 1rem; }
.pb-area-chip { display: inline-flex; border-radius: .4rem; padding: .12rem .45rem; font-size: .72rem; font-weight: 700; background: var(--surface-nested, #f1f5f9); color: var(--card-text, #334155); border: 1px solid var(--card-border, transparent); }
.pb-release-chip { display: inline-flex; border-radius: .4rem; padding: .12rem .45rem; font-size: .72rem; font-weight: 700; background: var(--accent-soft, #ecfdf5); color: var(--accent, #0f766e); border: 1px solid var(--accent-border, #a7f3d0); }
.pb-tag-suggestions { display: flex; flex-wrap: wrap; gap: .3rem; }
.pb-owner-chip { display: inline-flex; align-items: center; gap: .2rem; border-radius: .4rem; padding: .12rem .45rem; font-size: .72rem; font-weight: 650; background: var(--surface-alt, #f1f5f9); color: var(--muted-strong, #475569); border: 1px dashed var(--card-border, #cbd5e1); }
.pb-effort-badge { display: inline-flex; border-radius: .35rem; padding: .1rem .4rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em; background: var(--surface-nested, #f1f5f9); color: var(--muted-strong, #475569); border: 1px solid var(--card-border, transparent); }
.pb-priority-score-badge { display: inline-flex; border-radius: .35rem; padding: .1rem .4rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em; background: var(--accent-soft, #ecfdf5); color: var(--accent, #0f766e); border: 1px solid var(--accent-border, #a7f3d0); }
.pb-blocked-badge { display: inline-flex; align-items: center; gap: .2rem; border-radius: .35rem; padding: .1rem .4rem; font-size: .68rem; font-weight: 700; background: var(--badge-blocked-bg, #fef2f2); color: var(--badge-blocked-fg, #b91c1c); border: 1px solid var(--badge-blocked-border, #fecaca); }
.pb-tag-picker .input-group-text { background: var(--accent-soft, #f0fdfa); color: var(--accent, #0f766e); font-weight: 700; border-color: var(--input-border, #d7e0eb); }
.pb-tag-input-wrap { position: relative; }
.pb-tag-suggest-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + .2rem); z-index: 20;
  margin: 0; padding: .25rem 0; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--input-border, #cbd5e1); border-radius: .5rem;
  box-shadow: 0 .35rem 1rem var(--shadow-color, rgba(15, 23, 42, .08)); max-height: 12rem; overflow: auto;
  color: var(--card-text, #183451);
}

/* SearchableSelect ??? form-select lookalike with filterable menu */
.ss-wrap { position: relative; display: block; width: 100%; max-width: 100%; vertical-align: middle; }
.ss-wrap.ss-inline { display: inline-block; width: auto; }
.ss-trigger.form-select,
.ss-trigger.form-control,
.ss-trigger.workspace-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}
.ss-trigger:disabled { cursor: not-allowed; opacity: .65; }
.ss-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-trigger .ss-placeholder { color: var(--muted, #64748b); font-weight: 500; }
.ss-chevron {
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f726c' d='M1.4 0.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
}
.ss-wrap:focus-within { z-index: 50; }
.ss-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + .2rem); z-index: 60;
  min-width: 12rem; max-width: min(28rem, 90vw);
  background: var(--surface, #fff); border: 1px solid var(--input-border, #cbd5e1); border-radius: .5rem;
  box-shadow: 0 .35rem 1rem var(--shadow-color, rgba(15, 23, 42, .08));
  color: var(--card-text, #183451);
  overflow: hidden;
  transform-origin: top center;
}
.ss-search { position: sticky; top: 0; z-index: 1; padding: .4rem .45rem; background: var(--surface, #fff); border-bottom: 1px solid var(--input-border, #e2e8f0); }
.ss-search .form-control { border-radius: .4rem; }
.ss-list {
  margin: 0; padding: .25rem 0; list-style: none;
  max-height: 14rem; overflow: auto;
}
.ss-list li {
  padding: .4rem .75rem; cursor: pointer; font-size: .875rem; color: var(--text, #21352f);
}
.ss-list li.active { background: var(--accent, #0f766e); color: var(--accent-contrast, #fff); }
@media (hover: hover) and (pointer: fine) {
    .ss-list li:hover { background: var(--accent, #0f766e); color: var(--accent-contrast, #fff); }
}
.ss-list li.selected:not(.active):not(:hover) { font-weight: 700; color: var(--accent, #0f766e); }
.ss-list .ss-empty { cursor: default; color: var(--muted, #64748b); font-style: italic; }
.ss-list .ss-empty:hover { background: transparent; color: var(--muted, #64748b); }

.pb-tag-suggest-menu li {
  padding: .4rem .75rem; cursor: pointer; font-size: .875rem; color: var(--accent, #0f766e); font-weight: 600;
}
.pb-tag-suggest-menu li:hover,
.pb-tag-suggest-menu li.active { background: var(--accent, #0f766e); color: var(--accent-contrast, #fff); }
.pb-tag-suggest-menu .pb-tag-suggest-create { color: var(--muted-strong, #475569); font-weight: 500; }
.pb-tag-suggest-menu .pb-tag-suggest-create:hover,
.pb-tag-suggest-menu .pb-tag-suggest-create.active { background: var(--surface-alt, #f1f5f9); color: var(--accent, #0f766e); }
.pb-node-archived { opacity: .65; }
.pb-areas-list .pb-node-row { gap: .5rem; }
.pb-area-edit { max-width: 22rem; }
.pb-area-group {
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-area-group > .pb-node-row { border-bottom: 0; }
.pb-area-header {
  padding: .55rem 0;
}
.pb-area-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--muted-strong, #5b6b7c);
  cursor: pointer;
  padding: 0;
}
.pb-area-toggle:hover,
.pb-area-toggle:focus-visible {
  background: var(--surface-nested, #f1f5f9);
  color: var(--card-text, #334155);
  outline: none;
}
.pb-area-toggle-spacer {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.pb-area-chevron {
  display: block;
  width: .4rem;
  height: .4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-top: -.1rem;
}
.pb-area-toggle.is-open .pb-area-chevron {
  transform: rotate(45deg);
  margin-top: -.25rem;
}
.pb-area-count { white-space: nowrap; }
.pb-subarea-list {
  margin: 0 0 .35rem 1.55rem;
  padding: 0 0 0 .65rem;
  border-left: 2px solid var(--table-row-border, #e2e8f0);
}
.pb-subarea-row {
  padding: .35rem 0 .35rem .15rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.pb-subarea-row:last-child { border-bottom: 0; }
.pb-promote-menu {
  position: relative;
  display: inline-flex;
}
.pb-promote-toggle.active {
  background: var(--accent-soft, #ecfdf5);
  border-color: var(--accent, #115e59);
}
.pb-promote-dropdown {
  position: absolute;
  top: calc(100% + .2rem);
  right: 0;
  z-index: 20;
  min-width: 9.5rem;
  padding: .25rem;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: .4rem;
  background: var(--surface, #fff);
  box-shadow: 0 .35rem .9rem rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.pb-promote-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--card-text, #183451);
  font-size: .82rem;
  font-weight: 600;
  padding: .4rem .55rem;
  cursor: pointer;
}
.pb-promote-option:hover:not(:disabled),
.pb-promote-option:focus-visible:not(:disabled) {
  background: var(--surface-nested, #f1f5f9);
  outline: none;
}
.pb-promote-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
html.theme-dark .pb-promote-dropdown,
html[data-theme="dark"] .pb-promote-dropdown {
  background: var(--surface, #0f172a);
  border-color: var(--card-border, #334155);
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .35);
}

/* Member portal dashboard */
.portal-hero {
  --portal-accent: #2563eb;
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  color: #f8fafc;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--portal-accent) 45%, transparent), transparent 58%),
    linear-gradient(125deg, #0b1c34 0%, #12305a 48%, color-mix(in srgb, var(--portal-accent) 45%, #0b1c34) 100%);
  background-size: cover;
  background-position: center;
  min-height: 11rem;
  animation: portal-rise .45s ease;
}
.portal-hero-inner {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem 1.6rem 1.35rem; min-height: 11rem;
}
.portal-hero--centered .portal-hero-inner {
  position: relative;
  justify-content: center;
}
.portal-hero-brand {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.portal-hero--centered .admin-hero-actions {
  position: absolute;
  top: 1.5rem;
  right: 1.6rem;
  margin-left: 0;
  align-self: auto;
}
.portal-logo {
  width: auto; max-width: 12rem; height: 4.75rem; border-radius: .75rem; object-fit: contain;
  background: #fff; border: 1px solid rgba(255,255,255,.2);
  padding: .35rem .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.portal-kicker {
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  opacity: .78; margin: 0 0 .2rem; font-weight: 650;
}
.portal-greeting {
  font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 650; margin: 0; line-height: 1.15;
  letter-spacing: -.02em;
  color: #f8fafc;
}
.portal-hero h1,
.portal-hero .portal-greeting { color: #f8fafc; }
.portal-tagline { margin: .35rem 0 0; max-width: 36rem; opacity: .88; color: #f8fafc; }
.portal-customize-btn { margin-left: auto; align-self: flex-start; }
.admin-hero-actions {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.portal-board-tile-btn {
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.portal-customize { animation: portal-rise .3s ease; }
.portal-widget-order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.portal-widget-order-row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .5rem .65rem; border: 1px solid var(--card-border, #e3e9f1); border-radius: .6rem;
    background: var(--surface-alt, #fbfcfe);
}
.portal-widget-order-row.hidden { opacity: .6; }
.portal-widget-order-name { font-weight: 600; font-size: .88rem; }
.portal-widget-order-actions { display: flex; gap: .35rem; flex: 0 0 auto; }
.portal-widget { animation: portal-rise .4s ease; }
.portal-widget-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .85rem;
}
.portal-widget-head a,
.portal-widget-head .portal-widget-action {
  font-size: .85rem; font-weight: 650; text-decoration: none; color: var(--portal-accent, #0f766e);
}
.portal-widget-head .portal-widget-action {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.portal-widget-head .portal-widget-action:hover,
.portal-widget-head .portal-widget-action:focus-visible {
  text-decoration: underline;
}
.portal-dash-item.portal-dash-item-btn {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.portal-dash-empty.portal-dash-item-btn {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
button.portal-dash-empty.portal-dash-item-btn:hover,
button.portal-dash-empty.portal-dash-item-btn:focus-visible {
  color: var(--portal-accent, #0f766e);
}
.modal-dialog.admin-dash-queue-modal {
  width: min(100% - 2rem, 56rem);
  max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 44rem);
}
.modal-dialog.admin-dash-events-modal {
  width: min(100% - 2rem, 36rem);
  max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 40rem);
}
.admin-dash-queue-modal .modal-body,
.admin-dash-events-modal .modal-body {
  overflow: auto;
}
.admin-dash-queue-actions {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.portal-wish-subhead {
  margin: 0 0 .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
}

/* Group hub dashboard */
.group-hub-dash { margin-top: 0; }
.group-hub-grid {
  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
}
.group-hub-span-2 { grid-column: 1 / -1; }
.group-hub-about-body {
  max-height: 12rem;
  overflow: auto;
}
.group-hub-project {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--card-border, #e2e8f0);
}
.group-hub-project:first-of-type {
  margin-top: .35rem;
  padding-top: 0;
  border-top: 0;
}
.group-hub-project-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  border-radius: .5rem;
  padding: .15rem .2rem;
  margin: -.15rem -.2rem;
}
.group-hub-project-link:hover {
  color: inherit;
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 8%, transparent);
}
.group-hub-project-link-static {
  pointer-events: none;
}
.group-hub-project-link-main {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.group-hub-project-empty {
  padding-left: .2rem;
}
.group-hub-task-overview {
  list-style: none;
  margin: .45rem 0 0;
  padding: 0;
}
.group-hub-task-overview li + li {
  margin-top: .15rem;
}
.group-hub-task-overview a,
.group-hub-task-overview-btn {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: .4rem;
  padding: .35rem .45rem;
  font: inherit;
  cursor: pointer;
}
.group-hub-task-overview a:hover,
.group-hub-task-overview-btn:hover {
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 8%, transparent);
  color: inherit;
}
.group-hub-task-overview-title {
  color: var(--heading, var(--text));
  font-weight: 600;
}
.group-hub-task-overview li.done .group-hub-task-overview-title {
  text-decoration: line-through;
  opacity: .72;
}
.group-hub-task {
  padding: .65rem .7rem;
  border-radius: .75rem;
  background: var(--surface-nested, #f7faf8);
  border: 1px solid transparent;
  scroll-margin-top: 5rem;
}
.group-hub-task:hover {
  border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 28%, var(--card-border, #e2e8f0));
}
.group-hub-task-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}
.group-hub-task-status {
  flex: 0 0 9.5rem;
  width: 9.5rem;
}
.group-hub-task-status .ss-wrap {
  width: 100%;
}
.group-hub-status-badge {
  min-width: 5.75rem;
  justify-content: center;
  text-align: center;
}
.modal-dialog.group-hub-task-modal {
  width: min(100% - 2rem, 40rem);
  max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 44rem);
}
.group-hub-project-plus {
  flex: 0 0 auto;
  min-width: 2.5rem;
  font-size: 1.25rem;
  line-height: 1;
  padding-inline: .65rem;
}
.group-hub-project-page .portal-widget-head {
  margin-bottom: .5rem;
}
.modal-dialog.wish-detail-modal {
  width: min(100% - 2rem, 44rem);
  max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 52rem);
}
.modal-dialog.wish-detail-modal .pb-member-detail-chips {
  margin-top: 0;
}
@media (max-width: 900px) {
  .group-hub-grid { grid-template-columns: 1fr; }
}

/* Dashboard grid: announcements / events / surveys / forms */
.portal-dash { margin-top: 1rem; animation: portal-rise .4s ease; }
.portal-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  align-items: stretch;
}
.portal-dash-grid > .surface { margin-top: 0; }
.portal-dash-panel {
  display: flex; flex-direction: column; min-height: 12.5rem; min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-border, #e2e8f0);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--portal-accent, #0f766e) 7%, var(--surface, #fff)) 0%, var(--surface, #fff) 48%),
    var(--surface, #fff);
  box-shadow: var(--shadow-sm);
}
.portal-dash.compact .portal-dash-panel { min-height: 0; }
.portal-dash-panel > .portal-widget-head { flex-shrink: 0; }
.portal-dash-title {
  display: flex; align-items: center; gap: .5rem;
}
.portal-dash-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: .55rem;
  color: var(--portal-accent, #0f766e);
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 14%, transparent);
  flex: 0 0 auto;
}
/* Cap list height at ~4 item rows; scroll when content exceeds that (or a shorter stretched panel). */
.portal-dash-list {
  --portal-dash-row: 5.5rem;
  display: flex; flex-direction: column; gap: .4rem;
  flex: 1 1 auto; min-height: 0;
  max-height: calc(4 * var(--portal-dash-row) + 3 * .4rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .15rem;
  scrollbar-gutter: stable;
}
.portal-dash-item {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .65rem; align-items: start;
  text-decoration: none; color: inherit;
  padding: .7rem .75rem; border-radius: .75rem;
  border: 1px solid transparent;
  background: var(--surface-nested, #f7faf8);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.portal-dash-item strong {
  grid-column: 1; font-size: .95rem; line-height: 1.25; color: var(--card-text, #183451);
}
.portal-dash-item .muted { grid-column: 1; font-size: .8rem; color: var(--muted-strong, #5f726c); }
.portal-dash-item .portal-dash-meta {
  grid-column: 1 / -1; font-size: .78rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.portal-dash-item .portal-dash-badge,
.portal-dash-item .portal-dash-cta { grid-column: 2; grid-row: 1; align-self: start; }
.portal-dash-item.pinned {
  border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 35%, var(--card-border, #e2e8f0));
  box-shadow: inset 3px 0 0 var(--portal-accent, #0f766e);
}
.portal-dash-item.done { opacity: .78; }
.portal-dash-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 32%, var(--card-border, #e2e8f0));
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 6%, var(--surface-alt, #f8fafc));
  box-shadow: var(--shadow-sm);
}
.portal-dash-cta {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--portal-accent, #0f766e); white-space: nowrap;
}
.portal-dash-empty {
  flex: 1; display: flex; align-items: center;
  color: var(--muted, #71839a); font-size: .9rem;
  padding: .35rem 0 .15rem;
}

/* Dark: portal dashboard cards follow the same surface stack as the rest of the app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portal-dash-panel {
    background: var(--surface);
    border-color: var(--card-border);
    box-shadow: var(--shadow-sm), var(--surface-sheen);
  }
  :root:not([data-theme="light"]) .portal-dash-icon {
    color: color-mix(in srgb, var(--portal-accent, #0f766e) 45%, #fff);
    background: color-mix(in srgb, var(--portal-accent, #0f766e) 16%, var(--surface-nested));
  }
    :root:not([data-theme="light"]) .portal-dash .portal-widget-head a,
    :root:not([data-theme="light"]) .portal-dash .portal-widget-head .portal-widget-action,
    :root:not([data-theme="light"]) .portal-dash-cta {
        color: color-mix(in srgb, var(--portal-accent, #60a5fa) 42%, #fff);
        color: oklch(from var(--portal-accent, #60a5fa) max(0.78, l) c h);
    }
  :root:not([data-theme="light"]) .portal-dash-item {
    background: var(--surface-nested);
    border-color: var(--surface-border);
  }
  :root:not([data-theme="light"]) .portal-dash-item:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 35%, var(--surface-border));
    box-shadow: none;
  }
  :root:not([data-theme="light"]) .portal-dash-item.pinned {
    border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 42%, var(--surface-border));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--portal-accent, #0f766e) 45%, #fff);
  }
  :root:not([data-theme="light"]) .portal-dash-item .muted {
    color: var(--muted-strong);
  }
}
:root[data-theme="dark"] .portal-dash-panel {
  background: var(--surface);
  border-color: var(--card-border);
  box-shadow: var(--shadow-sm), var(--surface-sheen);
}
:root[data-theme="dark"] .portal-dash-icon {
  color: color-mix(in srgb, var(--portal-accent, #0f766e) 45%, #fff);
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 16%, var(--surface-nested));
}
:root[data-theme="dark"] .portal-dash .portal-widget-head a,
:root[data-theme="dark"] .portal-dash .portal-widget-head .portal-widget-action,
:root[data-theme="dark"] .portal-dash-cta {
  color: color-mix(in srgb, var(--portal-accent, #60a5fa) 42%, #fff);
  color: oklch(from var(--portal-accent, #60a5fa) max(0.78, l) c h);
}
:root[data-theme="dark"] .portal-dash-item {
  background: var(--surface-nested);
  border-color: var(--surface-border);
}
:root[data-theme="dark"] .portal-dash-item:hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 35%, var(--surface-border));
  box-shadow: none;
}
:root[data-theme="dark"] .portal-dash-item.pinned {
  border-color: color-mix(in srgb, var(--portal-accent, #0f766e) 42%, var(--surface-border));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--portal-accent, #0f766e) 45%, #fff);
}
:root[data-theme="dark"] .portal-dash-item .muted {
  color: var(--muted-strong);
}

.portal-dash-conversations {
  animation: portal-rise .45s ease;
}
.portal-conv-feed {
  display: flex; flex-direction: column; gap: .55rem;
}
.portal-announce-track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .65rem;
}
.portal-announce-card {
  border-radius: .85rem; padding: .85rem;
  background: linear-gradient(160deg, var(--surface-alt, #f8fafc), var(--accent-soft-strong, #f0fdfa));
  border: 1px solid var(--card-border, #e2e8f0);
  color: var(--card-text, #183451);
  transition: transform .2s ease, box-shadow .2s ease;
}
.portal-announce-card.pinned { border-color: var(--accent-soft-border, #99f6e4); box-shadow: 0 8px 24px var(--shadow-color, rgba(15,118,110,.08)); }
.portal-announce-card:hover { transform: translateY(-2px); }
.portal-announce-pin {
  --announce-pin-width: 3px;
  padding-left: calc(1rem + var(--announce-pin-width));
  border-left: var(--announce-pin-width) solid var(--accent, #0f766e);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #0f766e) 7%, transparent),
    transparent 4.5rem
  );
}
.announce-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  width: 100%;
}
.announce-preview { margin-top: 0; }

/* Announcement reading layout — list, detail, and preview modal */
.announce-article { min-width: 0; }
.announce-preview-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.announce-preview-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--heading, #15231f);
  flex: 1 1 auto;
  min-width: 0;
}
.announce-pin-chip { flex: 0 0 auto; margin-top: .15rem; }
.announce-preview-meta {
  margin-top: .35rem;
  font-size: .86rem;
  line-height: 1.4;
}
.announce-preview-header {
  margin-bottom: 1rem;
}
.announce-preview-shell {
  padding: 0 0 .5rem;
}
.announce-preview-modal {
  width: min(100%, 42rem);
}
.announce-preview-modal .modal-header {
  margin-bottom: 0;
  padding-bottom: .35rem;
}
.announce-preview-modal .form-preview-body {
  padding-top: .15rem;
}
.announce-content-canvas {
  border: 1px solid var(--announce-frame-border, #dfe7e3);
  border-radius: .85rem;
  background: var(--announce-canvas-bg, #ffffff);
  padding: 1rem 1.1rem;
  overflow: hidden;
  /* Authored newsletter HTML is email-styled (light plates). Always render it as a
     light reading frame so dark app chrome never produces light text on light cards. */
  color-scheme: light;
  color: #21352f;
}
.announce-content-canvas--card {
  margin-top: .85rem;
  padding: .85rem 1rem;
}
.announce-detail .announce-content-canvas {
  border: 1px solid var(--announce-frame-border, #dfe7e3);
  background: var(--announce-canvas-bg, #ffffff);
  padding: 1.15rem 1.25rem;
}
.announce-card {
  position: relative;
  display: block;
  margin-top: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.announce-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}
.announce-card-link:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
}
.announce-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, #0f766e) 28%, var(--surface-border, #dfe7e3));
  box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--accent, #0f766e) 4%, var(--surface, #fff));
}
.announce-card-header {
  position: relative;
  z-index: 0;
}
.announce-card-preview {
  position: relative;
  z-index: 0;
  pointer-events: none;
  margin-top: 0;
  overflow: hidden;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--authored-ink, #21352f);
  white-space: normal;
  overflow-wrap: anywhere;
  /* Tall preview so list cards show most of the authored layout (hero + body). */
  max-height: min(32rem, 58vh);
}
.announce-card-preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.75rem;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--announce-canvas-bg, var(--surface-alt, #f7faf8))
  );
  pointer-events: none;
}
.announce-card:hover .announce-card-preview::after {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--accent, #0f766e) 4%, var(--announce-canvas-bg, var(--surface-alt, #f7faf8)))
  );
}
.announce-card-preview img { max-width: 100%; height: auto; }
.announce-card-preview [data-newsletter-block="hero"] {
  padding: 1.5rem 1rem !important;
  margin: 0 !important;
  border-radius: .5rem;
}
.announce-card-preview [data-newsletter-block="hero"] h1 {
  font-size: 1.65rem !important;
  line-height: 1.25 !important;
  margin: 0 0 .4rem !important;
}
.announce-card-preview [data-newsletter-block="hero"] p {
  font-size: 1rem !important;
  margin: 0 !important;
}
.announce-card-preview h2,
.announce-card-preview h3 {
  font-size: 1rem;
  margin: .75rem 0 .35rem;
  line-height: 1.35;
}
.announce-card-preview p { margin: 0 0 .5rem; }
.announce-card-preview p:last-child { margin-bottom: 0; }
.announce-detail {
  width: 100%;
}
.announce-detail-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--authored-ink, #21352f);
}
.announce-detail-body img { max-width: 100%; height: auto; }

/* Authored newsletter/email HTML — always a light reading document (inline email colors). */
.announce-preview,
.announce-card-preview,
.announce-detail-body,
.announce-content-canvas {
  color-scheme: light;
  --announce-canvas-bg: #ffffff;
  --announce-frame-border: #dfe7e3;
  --announce-hero-bg: #eef3fb;
  --announce-quote-bg: #f5f8fc;
  --announce-smart-bg: #eef3fb;
  --announce-block-border: #d7e0eb;
  --authored-ink: #21352f;
  --authored-heading: #15231f;
  --authored-muted: #52677f;
  --authored-link: #1e57b4;
  /* Pin theme text tokens so .muted / headings stay dark on the light plate. */
  --text: #21352f;
  --heading: #15231f;
  --heading-alt: #1c332c;
  --muted: #74869b;
  --muted-strong: #52677f;
  --card-text: #304760;
  color: var(--authored-ink);
}
:root[data-theme="dark"] .announce-content-canvas {
  --announce-frame-border: rgba(255, 255, 255, .14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .announce-content-canvas {
    --announce-frame-border: rgba(255, 255, 255, .14);
  }
}
.announce-preview > :first-child,
.announce-card-preview > :first-child,
.announce-detail-body > :first-child {
  margin-top: 0 !important;
}
.announce-preview > :last-child,
.announce-card-preview > :last-child,
.announce-detail-body > :last-child {
  margin-bottom: 0 !important;
}
.announce-preview [data-newsletter-block],
.announce-card-preview [data-newsletter-block],
.announce-detail-body [data-newsletter-block] {
  margin: 1rem 0 !important;
}
.announce-preview [data-newsletter-block="hero"]:not([data-hero-variant="band"]),
.announce-card-preview [data-newsletter-block="hero"]:not([data-hero-variant="band"]),
.announce-detail-body [data-newsletter-block="hero"]:not([data-hero-variant="band"]) {
  background: var(--announce-hero-bg) !important;
  border-radius: .75rem !important;
  padding: 1.35rem 1.15rem !important;
  margin: .25rem 0 1rem !important;
}
.announce-preview [data-newsletter-block="hero"][data-hero-variant="band"],
.announce-card-preview [data-newsletter-block="hero"][data-hero-variant="band"],
.announce-detail-body [data-newsletter-block="hero"][data-hero-variant="band"] {
  border-radius: .75rem !important;
  margin: .25rem 0 1rem !important;
  overflow: hidden;
}
.announce-preview [data-newsletter-block="hero"][data-hero-variant="spotlight"],
.announce-card-preview [data-newsletter-block="hero"][data-hero-variant="spotlight"],
.announce-detail-body [data-newsletter-block="hero"][data-hero-variant="spotlight"] {
  text-align: center;
  padding: 2rem 1.35rem !important;
}
.announce-preview [data-newsletter-block="quote"],
.announce-card-preview [data-newsletter-block="quote"],
.announce-detail-body [data-newsletter-block="quote"] {
  border-radius: .65rem;
  overflow: hidden;
}
.announce-preview [data-newsletter-block="columns"] .glq-col-stack > table td,
.announce-card-preview [data-newsletter-block="columns"] .glq-col-stack > table td,
.announce-detail-body [data-newsletter-block="columns"] .glq-col-stack > table td {
  border-radius: .55rem;
}
.announce-preview [data-newsletter-block="hero"] h1,
.announce-card-preview [data-newsletter-block="hero"] h1,
.announce-detail-body [data-newsletter-block="hero"] h1 {
  font-size: clamp(1.25rem, 4vw, 1.65rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 .45rem !important;
}
.announce-preview [data-newsletter-block="hero"] p,
.announce-card-preview [data-newsletter-block="hero"] p,
.announce-detail-body [data-newsletter-block="hero"] p {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 0 .85rem !important;
}
.announce-preview [data-newsletter-block="quote"],
.announce-card-preview [data-newsletter-block="quote"],
.announce-detail-body [data-newsletter-block="quote"] {
  background: var(--announce-quote-bg) !important;
  border-left-color: var(--accent, #1f7a5c) !important;
  border-radius: .65rem !important;
  padding: 1rem 1.1rem !important;
}
.announce-preview [data-newsletter-component],
.announce-card-preview [data-newsletter-component],
.announce-detail-body [data-newsletter-component] {
  background: var(--announce-smart-bg) !important;
  border-left-color: var(--accent, #1f7a5c) !important;
  border-radius: .65rem !important;
}
.announce-preview .newsletter-smart-wishes,
.announce-card-preview .newsletter-smart-wishes,
.announce-detail-body .newsletter-smart-wishes {
  background: var(--announce-smart-bg) !important;
  border-left-color: var(--accent, #1f7a5c) !important;
  border-radius: .65rem !important;
}
.announce-preview .newsletter-smart-wishes :is(h1, h2, h3, h4, h5, h6, strong),
.announce-card-preview .newsletter-smart-wishes :is(h1, h2, h3, h4, h5, h6, strong),
.announce-detail-body .newsletter-smart-wishes :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--authored-heading) !important;
}
.announce-preview .newsletter-smart-wishes :is(p, li, span, em),
.announce-card-preview .newsletter-smart-wishes :is(p, li, span, em),
.announce-detail-body .newsletter-smart-wishes :is(p, li, span, em) {
  color: var(--authored-muted) !important;
}
.announce-preview .newsletter-smart-wishes li strong,
.announce-card-preview .newsletter-smart-wishes li strong,
.announce-detail-body .newsletter-smart-wishes li strong {
  color: var(--authored-heading) !important;
}
.announce-preview [data-newsletter-block="divider"],
.announce-card-preview [data-newsletter-block="divider"],
.announce-detail-body [data-newsletter-block="divider"] {
  border-top-color: var(--announce-block-border) !important;
  margin: 1.25rem 0 !important;
}
.announce-preview [data-newsletter-block="text"] table img,
.announce-card-preview [data-newsletter-block="text"] table img,
.announce-detail-body [data-newsletter-block="text"] table img {
  background: #fff;
  border-radius: .55rem;
  padding: .45rem .65rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
:root[data-theme="dark"] .announce-preview [data-newsletter-block="text"] table img,
:root[data-theme="dark"] .announce-card-preview [data-newsletter-block="text"] table img,
:root[data-theme="dark"] .announce-detail-body [data-newsletter-block="text"] table img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .announce-preview [data-newsletter-block="text"] table img,
  :root:not([data-theme="light"]) .announce-card-preview [data-newsletter-block="text"] table img,
  :root:not([data-theme="light"]) .announce-detail-body [data-newsletter-block="text"] table img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  }
}
.announce-preview img,
.announce-card-preview img,
.announce-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: .55rem;
}
.announce-preview [data-newsletter-block="columns"] td,
.announce-card-preview [data-newsletter-block="columns"] td,
.announce-detail-body [data-newsletter-block="columns"] td {
  padding: 0 .5rem !important;
}
@media (max-width: 640px) {
  .announce-preview [data-newsletter-block="columns"] tr,
  .announce-card-preview [data-newsletter-block="columns"] tr,
  .announce-detail-body [data-newsletter-block="columns"] tr {
    display: block;
  }
  .announce-preview [data-newsletter-block="columns"] td,
  .announce-card-preview [data-newsletter-block="columns"] td,
  .announce-detail-body [data-newsletter-block="columns"] td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
  }
  .announce-preview [data-newsletter-block="columns"] td + td,
  .announce-card-preview [data-newsletter-block="columns"] td + td,
  .announce-detail-body [data-newsletter-block="columns"] td + td {
    margin-top: 1rem;
  }
  .announce-content-canvas {
    padding: .85rem .9rem;
  }
  .announce-preview-title {
    font-size: 1.05rem;
  }
  .announce-preview-modal {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.announce-preview :is(h1, h2, h3, h4, h5, h6),
.announce-card-preview :is(h1, h2, h3, h4, h5, h6),
.announce-detail-body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--authored-heading);
}
.announce-preview :is(p, li, span, blockquote, td, th),
.announce-card-preview :is(p, li, span, blockquote, td, th),
.announce-detail-body :is(p, li, span, blockquote, td, th) {
  color: var(--authored-ink);
}
.announce-preview [data-newsletter-block],
.announce-card-preview [data-newsletter-block],
.announce-detail-body [data-newsletter-block] {
  color: var(--authored-ink) !important;
}
.announce-preview [data-newsletter-block] :is(h1, h2, h3, h4, h5, h6, strong),
.announce-card-preview [data-newsletter-block] :is(h1, h2, h3, h4, h5, h6, strong),
.announce-detail-body [data-newsletter-block] :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--authored-heading) !important;
}
.announce-preview [data-newsletter-block] :is(p, li, span, em, blockquote),
.announce-card-preview [data-newsletter-block] :is(p, li, span, em, blockquote),
.announce-detail-body [data-newsletter-block] :is(p, li, span, em, blockquote) {
  color: var(--authored-muted) !important;
}
.announce-preview [data-newsletter-block="text"] :is(h2, h3, p, li),
.announce-card-preview [data-newsletter-block="text"] :is(h2, h3, p, li),
.announce-detail-body [data-newsletter-block="text"] :is(h2, h3, p, li) {
  color: var(--authored-ink) !important;
}
.announce-preview [data-newsletter-block="hero"] :is(h1, h2, h3, h4, h5, h6),
.announce-card-preview [data-newsletter-block="hero"] :is(h1, h2, h3, h4, h5, h6),
.announce-detail-body [data-newsletter-block="hero"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--authored-heading) !important;
}
.announce-preview [data-newsletter-block="hero"] :is(p, span, li),
.announce-card-preview [data-newsletter-block="hero"] :is(p, span, li),
.announce-detail-body [data-newsletter-block="hero"] :is(p, span, li) {
  color: var(--authored-muted) !important;
}
.announce-preview a:not([data-button="true"]),
.announce-card-preview a:not([data-button="true"]),
.announce-detail-body a:not([data-button="true"]) {
  color: var(--authored-link, #1e57b4);
}
.announce-preview a[data-button="true"],
.announce-card-preview a[data-button="true"],
.announce-detail-body a[data-button="true"],
.announce-preview .nl-edit--button,
.announce-card-preview .nl-edit--button,
.announce-detail-body .nl-edit--button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--accent-fill, #2563eb);
  color: #fff !important;
  text-decoration: none;
  font-weight: 650;
}
.portal-board-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .75rem;
  align-items: stretch;
}
.portal-board-grid > .surface + .surface { margin-top: 0; }
.portal-board-grid > .portal-board-tile { margin-top: 0; }
.portal-board-tile {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, border-color .2s ease; border: 1px solid transparent;
}
.portal-board-tile:hover { transform: translateY(-3px); border-color: var(--accent-soft-border, #99f6e4); }
.portal-board-tile-wrap {
  position: relative;
  display: flex;
  height: 100%;
}
.portal-board-tile-wrap > .portal-board-tile { flex: 1; min-width: 0; }
.portal-board-tile-remove {
  position: absolute; top: .35rem; right: .4rem;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  border: 1px solid var(--surface-border, #dfe7e3);
  background: var(--surface, #fff); color: var(--muted, #74869b);
  font-size: 1rem; line-height: 1; padding: 0;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.portal-board-tile-wrap:hover .portal-board-tile-remove,
.portal-board-tile-wrap:focus-within .portal-board-tile-remove {
  opacity: 1; pointer-events: auto;
}
.portal-board-tile-remove:hover {
  color: var(--heading, #0f172a); border-color: var(--accent, #0f766e);
}
.portal-board-tile-add {
  border-style: dashed !important;
  border-color: var(--surface-border, #dfe7e3) !important;
  background: color-mix(in srgb, var(--surface-alt, #f8fafc) 80%, transparent);
}
.portal-board-tile-add:hover {
  border-color: var(--accent-soft-border, #99f6e4) !important;
}
.admin-qa-head-actions {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.portal-board-kind {
  font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #0f766e);
}
.portal-doc-grid { display: grid; gap: .85rem; }
.portal-doc-row-list { display: flex; flex-direction: column; gap: .45rem; }
.portal-doc-row {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.portal-doc-row:last-child { border-bottom: 0; }
a.portal-doc-row--link {
  text-decoration: none;
  color: inherit;
  border-radius: .55rem;
  margin: 0 -.35rem;
  padding-left: .35rem;
  padding-right: .35rem;
  transition: background-color .15s ease;
}
a.portal-doc-row--link:hover {
  background: color-mix(in srgb, var(--portal-accent, #0f766e) 6%, var(--surface-alt, #f8fafc));
}
a.portal-doc-row--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--portal-accent, #0f766e) 55%, transparent);
  outline-offset: 2px;
}
.portal-module-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .85rem;
  align-items: stretch;
}
.portal-module-grid > .surface { margin-top: 0; }
.portal-module-grid > .surface + .surface { margin-top: 0; }
.portal-module-card {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.portal-module-card textarea {
  flex: 1 1 auto; min-height: 4rem; resize: vertical;
}
.portal-module-card > .btn { margin-top: auto; }
.portal-module-list {
  padding: 0;
  overflow: hidden;
}
.portal-module-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) auto;
  gap: .85rem 1.1rem;
  align-items: start;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--table-row-border, #edf1f6);
}
.portal-module-row:last-child { border-bottom: 0; }
.portal-module-row-meta {
  display: flex;
  align-items: center;
  padding-top: 1.45rem;
  min-width: 0;
}
.portal-module-kind {
  display: inline-block;
  max-width: 100%;
  padding: .2rem .5rem;
  border-radius: .4rem;
  background: var(--surface-alt, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-module-row-fields {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) minmax(7rem, 10rem);
  gap: .55rem .65rem;
  align-items: end;
  min-width: 0;
}
.portal-module-row-fields .field-label {
  margin-bottom: .2rem;
}
.portal-module-row-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem .9rem;
  padding-top: 1.35rem;
  justify-content: flex-end;
}
.portal-module-row-options .form-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-left: 2.25rem;
  min-height: 1.4rem;
  white-space: nowrap;
}
.portal-module-row-options .form-switch .form-check-input {
  margin-left: -2.25rem;
  float: none;
}
.portal-module-row-options .form-check-label {
  color: var(--text, #1e293b);
  font-size: .82rem;
}
@media (max-width: 1100px) {
  .portal-module-row {
    grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
  }
  .portal-module-row-options {
    grid-column: 1 / -1;
    padding-top: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .portal-module-row {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .portal-module-row-meta { padding-top: 0; }
  .portal-module-row-fields { grid-template-columns: 1fr; }
  .portal-module-row-options { padding-top: .15rem; }
}
a.hub-link-card {
  text-decoration: none;
  color: inherit;
  padding: 1.1rem 1.15rem;
  gap: .35rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.hub-link-card:hover {
  border-color: var(--accent, #2867D7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}
a.hub-link-card strong { font-size: 1.05rem; }
.people-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.people-subnav-item {
  display: inline-flex;
  align-items: center;
  padding: .4rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted-strong, #475569);
  background: var(--surface-2, var(--surface-nested, rgba(0, 0, 0, .04)));
  font-weight: 600;
  font-size: .92rem;
}
.people-subnav-item.active,
.people-subnav-item:hover {
  color: var(--text, #1e293b);
  background: var(--accent-soft, rgba(37, 99, 235, .12));
}
.people-subnav-item.active {
  box-shadow: inset 0 0 0 1px var(--accent, #2867D7);
}
.member-import-wizard .member-import-company {
  border: 1px solid var(--input-border, #d7e0eb);
  border-radius: .75rem;
  padding: .85rem 1rem;
  background: var(--control-bg, #fff);
}

/* —— Membership page —— */
.membership-page .membership-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--surface-border, #e2e8f0);
}
.membership-page .membership-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1rem;
  flex: 1 1 18rem;
  align-items: flex-end;
}
.membership-page .membership-filter {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 11rem;
}
.membership-page .membership-filter-search {
  flex: 1 1 14rem;
  min-width: 12rem;
}
.membership-page .membership-expand-all {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-bottom: .05rem;
}
.membership-page .membership-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.membership-company {
  border: 1px solid var(--surface-border, #e2e8f0);
  border-radius: var(--radius-md, .75rem);
  padding: .85rem 1rem;
  background: var(--control-bg, #fff);
  transition: border-color var(--dur, .22s) var(--ease-out), box-shadow var(--dur, .22s) var(--ease-out);
}
.membership-company.is-expanded {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 28%, var(--surface-border, #e2e8f0));
  box-shadow: var(--shadow-xs);
}
.membership-company-header {
  display: grid;
  grid-template-columns: minmax(13rem, 1.4fr) minmax(0, 2.2fr);
  grid-template-areas:
    "identity meta"
    "actions actions";
  gap: .55rem 1.25rem;
  align-items: center;
}
.membership-company-toggle {
  grid-area: identity;
  display: inline-flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .1rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.membership-company-toggle:hover .membership-company-name {
  color: var(--accent, #2867D7);
}
.membership-company-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .1rem;
  flex-shrink: 0;
  font-size: .75rem;
  line-height: 1;
  color: var(--muted, #64748b);
  border-radius: .35rem;
  background: var(--surface-nested, #f1f5f9);
}
.membership-company-toggle:hover .membership-company-chevron {
  color: var(--heading, #0f172a);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--surface-nested, #f1f5f9));
}
.membership-company-toggle-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.membership-company-name {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--heading, #0f172a);
  overflow-wrap: anywhere;
}
.membership-company-count {
  font-size: .8rem;
  color: var(--muted, #64748b);
  font-weight: 500;
}
.membership-company-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: .65rem 1.35rem;
  min-width: 0;
}
.membership-meta-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 4.25rem;
}
.membership-meta-label {
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  line-height: 1;
  white-space: nowrap;
}
.membership-meta-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .4rem;
  min-height: 1.85rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  line-height: 1.25;
}
.membership-meta-value .btn-link {
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.membership-meta-value .btn-link:hover {
  text-decoration: underline;
}
.membership-term-input {
  width: 9.5rem;
  max-width: 100%;
}
.membership-meta-timezone {
  min-width: min(11rem, 100%);
}
.membership-meta-empty {
  color: var(--muted, #64748b);
  font-weight: 500;
}
.membership-meta-status {
  min-width: 0;
}
.membership-meta-status .membership-status-select {
  width: auto;
  min-width: 7.25rem;
  max-width: 11.5rem;
  min-height: 1.85rem;
  padding-top: .2rem;
  padding-bottom: .2rem;
  padding-inline: .55rem 1.75rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 999px;
}
.membership-status-select.is-active {
  border-color: color-mix(in srgb, var(--badge-soft-fg, #1d4ed8) 35%, var(--input-border, #cbd5e1));
  background: var(--badge-soft-bg, #e0edff);
  color: var(--badge-soft-fg, #1d4ed8);
}
.membership-status-select.is-pending-payment {
  border-color: color-mix(in srgb, var(--badge-warn-fg, #956013) 35%, var(--input-border, #cbd5e1));
  background: var(--badge-warn-bg, #fff4dc);
  color: var(--badge-warn-fg, #956013);
}
.membership-status-select.is-lapsed {
  border-color: color-mix(in srgb, var(--badge-warn-fg, #956013) 35%, var(--input-border, #cbd5e1));
  background: var(--badge-warn-bg, #fff4dc);
  color: var(--badge-warn-fg, #956013);
}
.membership-status-select.is-cancelled {
  border-color: color-mix(in srgb, var(--badge-error-fg, #a63d46) 35%, var(--input-border, #cbd5e1));
  background: var(--badge-error-bg, #fde9ea);
  color: var(--badge-error-fg, #a63d46);
}
.membership-status-select.is-unset {
  color: var(--muted-strong, #475569);
}
.membership-company-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: .1rem;
  padding-top: .65rem;
  border-top: 1px solid var(--surface-border, #e2e8f0);
}
.membership-company-actions .btn {
  white-space: nowrap;
}
.membership-unassigned-hint {
  grid-area: meta;
  margin: 0;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm, .5rem);
  background: var(--surface-nested, #f1f5f9);
  color: var(--muted-strong, #475569);
  font-size: .9rem;
  line-height: 1.4;
  max-width: 28rem;
  justify-self: end;
}
.membership-company-body {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--surface-border, #e2e8f0);
}
.membership-company-body .table-wrap {
  border-radius: var(--radius-sm, .5rem);
  overflow: hidden;
  border: 1px solid var(--table-border, #e2e8f0);
}
.membership-company-body .table {
  margin: 0;
}
.membership-company-body .table thead th {
  background: var(--surface-nested, #f1f5f9);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted-strong, #475569);
  border-bottom-color: var(--table-border, #e2e8f0);
}
@media (max-width: 900px) {
  .membership-company-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "meta"
      "actions";
    gap: .75rem;
    align-items: start;
  }
  .membership-company-meta {
    justify-content: flex-start;
    gap: .75rem 1.1rem;
  }
  .membership-company-actions {
    justify-content: flex-start;
  }
  .membership-unassigned-hint {
    justify-self: stretch;
    max-width: none;
  }
}
@media (max-width: 640px) {  /* was 520 — Axis A */
  .membership-page .membership-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  .membership-page .membership-filters {
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
  }
  .membership-page .membership-filter,
  .membership-page .membership-filter-search {
    min-width: 0;
    width: 100%;
  }
  .membership-page .membership-expand-all {
    align-self: stretch;
    width: 100%;
  }
  .membership-company {
    padding: .75rem .8rem;
  }
  .membership-company-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  .membership-meta-field {
    min-width: 0;
  }
  .membership-meta-value {
    min-width: 0;
    width: 100%;
  }
  .membership-meta-value .form-control,
  .membership-meta-value .form-select,
  .membership-meta-value .ss-wrap {
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
  }
  .membership-meta-status .membership-status-select {
    width: 100%;
    max-width: none;
  }
  .membership-company-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
    justify-content: stretch;
  }
  .membership-company-actions .btn {
    width: 100%;
    min-height: var(--tap-target);
    justify-content: center;
    white-space: normal;
  }
}
.group-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.group-settings-tabs .btn.active {
  background: var(--accent, #2867D7);
  color: #fff;
  border-color: var(--accent, #2867D7);
}
.group-row-overflow summary {
  list-style: none;
  cursor: pointer;
}
.group-row-overflow summary::-webkit-details-marker { display: none; }
.group-row-overflow[open] > .group-row-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.provider-other-details {
  margin-top: 1rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  padding-top: .75rem;
}
.provider-other-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted-strong, #5f726c);
}
@keyframes portal-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .portal-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {  /* was 700 — Axis B */
  .portal-hero {
    border-radius: 1rem;
    min-height: 9.5rem;
  }
  .portal-hero-inner {
    padding: 1.15rem 1.1rem 1.05rem;
    min-height: 9.5rem;
    gap: .75rem;
  }
  .portal-hero--centered .admin-hero-actions {
    position: static;
    width: 100%;
    justify-content: flex-end;
  }
  .portal-hero--centered .portal-hero-brand {
    width: 100%;
    justify-content: center;
  }
  .portal-hero-brand {
    width: 100%;
  }
  .admin-hero-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .portal-customize-btn { margin-left: 0; width: 100%; }
  .portal-tagline { font-size: .92rem; }
  .portal-dash-panel { min-height: 0; }
}

/* Discussion chat */
.discussion-shell {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) 1fr;
  gap: 0;
  padding: 0 !important;
  min-height: 28rem;
  overflow: hidden;
}
.discussion-topics {
  border-right: 1px solid var(--surface-border, #dfe7e3);
  display: flex; flex-direction: column; max-height: 70dvh; overflow: auto;
}
.discussion-topics-head {
  font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #71839a); padding: .85rem 1rem .4rem;
}
.discussion-topic-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: .7rem 1rem; border-bottom: 1px solid var(--table-row-border, #edf1f6);
  color: inherit; cursor: pointer;
}
.discussion-topic-item:hover { background: var(--surface-alt, #eef2f0); }
.discussion-topic-item.active { background: var(--accent-soft, #e4efe9); }
.discussion-topic-title { font-weight: 650; }
.discussion-topic-meta { font-size: .78rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.discussion-chat {
  display: flex; flex-direction: column; min-height: 28rem; max-height: 70dvh;
}
.discussion-chat-head {
  display: flex; align-items: center; gap: .75rem; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--surface-border, #dfe7e3);
}
.discussion-chat-head-main {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0;
}
.discussion-chat-head-main > strong {
  min-width: 0; overflow-wrap: anywhere;
}
.discussion-chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.discussion-transcript {
  flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: .65rem;
  background: linear-gradient(180deg, var(--surface-nested, #f7faf8), var(--surface-alt, #fff));
}
.discussion-bubble {
  max-width: min(36rem, 92%);
  padding: .65rem .85rem;
  border-radius: .85rem;
  background: var(--surface, #fff);
  color: var(--card-text, #183451);
  border: 1px solid var(--surface-border, #dfe7e3);
  align-self: flex-start;
}
.discussion-bubble.mine {
  align-self: flex-start;
  background: var(--accent-soft, #e4efe9);
  border-color: var(--accent-soft-border, #b7d4c8);
}
.discussion-bubble.deleted { opacity: .65; font-style: italic; }
.discussion-bubble-meta {
  display: flex; justify-content: space-between; gap: .75rem; font-size: .78rem; margin-bottom: .25rem;
}
.discussion-bubble-body { white-space: pre-wrap; line-height: 1.45; }
.discussion-bubble-delete { font-size: .75rem; }
.discussion-composer {
  display: flex; gap: .65rem; align-items: flex-end;
  padding: .85rem 1rem; border-top: 1px solid var(--surface-border, #dfe7e3);
  background: var(--surface, #fff);
}
.discussion-composer .mention-compose { flex: 1; min-width: 0; }
.discussion-composer textarea { flex: 1; resize: vertical; min-height: 2.75rem; }
.discussion-composer--new { flex-direction: column; align-items: stretch; }
.mention-compose { position: relative; }
.mention-suggest-menu { left: 0; right: 0; z-index: 20; }
.mention-kind {
  display: inline-block; min-width: 3.25rem; font-size: .68rem; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent, #2563eb); margin-right: .35rem;
}
.mention-hint { font-size: .75rem; margin-top: .35rem; }
a.mention { font-weight: 650; text-decoration: none; color: var(--accent, #2563eb); }
a.mention:hover { text-decoration: underline; }
a.mention-wish { color: #0b5f52; }
a.mention-thread { color: #1f4e79; }
@media (max-width: 900px) {  /* was 768 — Axis B */
  .discussion-shell {
    grid-template-columns: 1fr;
    min-height: min(70dvh, 32rem);
    border-radius: 1rem;
    overflow: hidden;
  }
  .discussion-topics {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
  }
  .discussion-shell--chat-open .discussion-topics { display: none; }
  .discussion-shell:not(.discussion-shell--chat-open) .discussion-chat { display: none; }
  .discussion-chat {
    max-height: none;
    min-height: min(70dvh, 32rem);
  }
  .discussion-topic-item {
    min-height: 3rem;
    padding: .8rem 1rem;
  }
}

/* Soft keyboard + app lock (MAUI / mobile web). --keyboard-inset itself is
   declared in the main :root token block at the top of this file. */
html, body, #app {
    padding-bottom: max(0px, var(--keyboard-inset));
}
.help-modal {
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 40rem);
    overflow: auto;
}
.app-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    padding-bottom: max(1rem, var(--keyboard-inset, 0px));
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
}
.app-lock-card {
    width: min(100%, 22rem);
    text-align: center;
    padding: 1.5rem 1.25rem;
}
.app-lock-pin-display {
    font-size: 1.6rem;
    letter-spacing: .35em;
    margin: 1rem 0 1.25rem;
    font-variant-numeric: tabular-nums;
}
.app-lock-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}
.app-lock-key {
    min-height: 3rem;
    font-size: 1.15rem;
    font-weight: 650;
}
.app-lock-encourage {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(15, 118, 110, .08), transparent 60%);
}
.app-lock-encourage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Member/list data-grid toolbar */
.member-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.member-toolbar-search { flex: 1 1 14rem; min-width: 10rem; }
.member-toolbar .form-select { flex: 0 1 12rem; min-width: 10rem; }

/* Sponsorship report filters */
.sp-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1rem;
    align-items: flex-end;
}
.sp-report-filter {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
.sp-report-filter label { margin-bottom: 0; }
.sp-report-filter-search {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.sp-report-filter-sort {
    flex: 0 1 15rem;
    min-width: 14rem;
}
.sp-report-filter-sort .form-select {
    width: 100%;
}
.bulk-action-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .55rem .85rem; margin-bottom: .75rem; border-radius: .6rem;
    background: var(--accent-soft, #e4efe9); border: 1px solid var(--accent-soft-border, #cfe5dc);
    font-size: .85rem;
}
.col-sort-btn {
    background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 650;
    color: inherit; cursor: pointer; white-space: nowrap;
}
.col-sort-btn:hover, .col-sort-btn:focus-visible { color: var(--accent, #1f6b57); outline: none; }
tr.row-selected { background: var(--accent-soft, #e4efe9); }

/* Command palette (Ctrl/Cmd-K) */
.cmdk-backdrop {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(15, 23, 22, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 10dvh 1rem 1rem;
}
.cmdk-panel {
    width: min(100%, 34rem);
    background: var(--modal-bg, #fff);
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .9rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 70dvh;
}
.cmdk-input {
    border: none; outline: none; background: transparent;
    padding: .95rem 1.1rem; font-size: 1rem; color: var(--text, #21352f);
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
}
.cmdk-results { overflow-y: auto; padding: .4rem; }
.cmdk-item {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; text-align: left; border: none; background: none; cursor: pointer;
    padding: .55rem .7rem; border-radius: .55rem; font-size: .9rem; color: var(--text, #21352f);
}
.cmdk-item.active { background: var(--accent-soft, #e4efe9); }
@media (hover: hover) and (pointer: fine) {
    .cmdk-item:hover { background: var(--accent-soft, #e4efe9); }
}
.cmdk-item-label { font-weight: 600; }
.cmdk-item-group { color: var(--muted, #74869b); font-size: .75rem; flex: 0 0 auto; }
.cmdk-empty { padding: 1rem .7rem; color: var(--muted, #74869b); font-size: .88rem; }
.cmdk-footer { padding: .5rem .9rem; border-top: 1px solid var(--surface-border, #dfe7e3); font-size: .72rem; }
.cmdk-hint {
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .1rem .35rem;
    border: 1px solid var(--surface-border, #c9d4cf);
    border-radius: .3rem;
    background: transparent;
}

/* Toast notifications */
.toast-host {
    position: fixed;
    z-index: 1080;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    pointer-events: none;
}
@media (min-width: 641px) {  /* was 560 — Axis A */
    .toast-host { left: auto; width: min(24rem, calc(100vw - 2rem)); }
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border-radius: .7rem;
    background: var(--surface, #fff);
    border: 1px solid var(--card-border, #e3e9f1);
    box-shadow: 0 10px 28px var(--shadow-color, rgba(21, 35, 31, .16));
    font-size: .88rem;
    color: var(--text, #21352f);
    transform: translateY(0);
    opacity: 1;
    transition: transform 400ms ease, opacity 400ms ease;
    @starting-style {
        opacity: 0;
        transform: translateY(100%);
    }
}
.toast-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.toast-success .toast-icon { background: var(--accent-soft, #e4efe9); color: var(--accent, #1f6b57); }
.toast-error .toast-icon { background: rgba(211, 47, 47, .14); color: #d32f2f; }
.toast-warning .toast-icon { background: rgba(217, 119, 6, .14); color: #b45309; }
.toast-info .toast-icon { background: var(--accent-soft, #e4efe9); color: var(--label, #3b526d); }
.toast-error { border-color: rgba(211, 47, 47, .35); }
.toast-warning { border-color: rgba(217, 119, 6, .35); }
.toast-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.toast-action {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--accent, #1f6b57);
    font-weight: 650;
    font-size: .85rem;
    cursor: pointer;
    padding: .2rem .3rem;
}
.toast-action:hover, .toast-action:focus-visible { text-decoration: underline; outline: none; }
.toast-dismiss {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--muted, #74869b);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .1rem;
}
.toast-dismiss:hover, .toast-dismiss:focus-visible { color: var(--text, #21352f); outline: none; }

.simple-list-editor { display: flex; flex-direction: column; gap: .65rem; }
.simple-list-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.simple-list-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: .45rem;
    padding: .3rem .45rem .3rem .65rem;
    background: var(--badge-soft-bg, #e4efe9);
    color: var(--badge-soft-fg, #1f6b57);
    font-size: .82rem;
    font-weight: 650;
}
.simple-list-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
    opacity: .75;
}
.simple-list-chip-remove:hover, .simple-list-chip-remove:focus-visible { opacity: 1; outline: none; }
.simple-list-add { display: flex; gap: .5rem; align-items: center; }
.simple-list-add .form-control { flex: 1 1 auto; }

/* Published meeting minutes (member view + builder preview) */
.meeting-minutes-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.meeting-minutes-card {
    padding: 0;
    overflow: hidden;
}
.meeting-minutes-card + .meeting-minutes-card { margin-top: 0; }
.meeting-minutes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
    background: var(--surface-alt, #fbfcfe);
}
.meeting-minutes-toolbar-meta {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    color: var(--muted-strong, #5f726c);
    font-size: .92rem;
}
.mm-toolbar-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.meeting-minutes-doc {
    padding: 1.5rem 1.6rem 1.75rem;
    max-width: 46rem;
    margin: 0 auto;
    color: var(--text, #21352f);
    line-height: 1.5;
}
.meeting-minutes-doc .meeting-minutes {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.meeting-minutes-doc .mm-header { margin: 0; }
.meeting-minutes-doc .mm-eyebrow {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.meeting-minutes-doc .mm-title,
.meeting-minutes-doc .meeting-minutes > h1,
.meeting-minutes-doc > h1 {
    margin: 0;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--heading, #15231f);
}
.meeting-minutes-doc .mm-meta {
    background: var(--surface-nested, #f7faf8);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-sm, .5rem);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.meeting-minutes-doc .mm-meta-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .75rem;
    align-items: baseline;
}
.meeting-minutes-doc .mm-meta-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted-strong, #5f726c);
}
.meeting-minutes-doc .mm-meta-value {
    color: var(--text, #21352f);
    font-weight: 550;
}
.meeting-minutes-doc .mm-section {
    margin: 0;
    padding: 0;
}
.meeting-minutes-doc .mm-section-heading,
.meeting-minutes-doc .meeting-minutes > h2,
.meeting-minutes-doc > h2 {
    margin: 0 0 .45rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.meeting-minutes-doc .mm-section-body,
.meeting-minutes-doc .meeting-minutes > p,
.meeting-minutes-doc > p {
    margin: 0;
    color: var(--text, #21352f);
    font-size: .98rem;
    line-height: 1.55;
}
.meeting-minutes-doc .mm-line {
    display: block;
}
.meeting-minutes-doc .mm-line + .mm-line { margin-top: .2rem; }
.meeting-minutes-doc .mm-block { margin: 0; }
.meeting-minutes-doc .mm-block-title {
    font-weight: 700;
    color: var(--heading, #15231f);
    margin-bottom: .15rem;
}
.meeting-minutes-doc .mm-block-gap { height: .65rem; }
.meeting-minutes-doc .mm-subsection {
    margin-top: 1rem;
}
.meeting-minutes-doc .mm-subsection:first-child {
    margin-top: 0;
}
.meeting-minutes-doc .mm-subsection-heading {
    margin: 0 0 .4rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--heading, #15231f);
}
.meeting-minutes-doc .mm-subsection-body {
    margin: 0;
    color: var(--text, #21352f);
    font-size: .98rem;
    line-height: 1.55;
}
.meeting-minutes-doc .mm-subsection-body .mm-list {
    margin-top: .15rem;
}
.meeting-minutes-doc .mm-list .mm-line {
    padding-left: 1rem;
    position: relative;
}
.meeting-minutes-doc .mm-list .mm-line::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .55em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--accent, #1f6b57);
}
.meeting-minutes-doc .mm-empty,
.meeting-minutes-doc em {
    color: var(--muted, #74869b);
    font-style: italic;
    font-weight: 500;
}
.meeting-minutes-doc strong { color: var(--heading, #15231f); }
.announce-preview .meeting-minutes,
.announce-preview > .meeting-minutes {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.announce-preview .mm-eyebrow {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.announce-preview .mm-title,
.announce-preview .meeting-minutes > h1 {
    margin: 0;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-size: 1.45rem;
    font-weight: 650;
    color: var(--heading, #15231f);
}
.announce-preview .mm-meta {
    background: var(--surface-nested, #f7faf8);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-sm, .5rem);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.announce-preview .mm-meta-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .75rem;
}
.announce-preview .mm-meta-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted-strong, #5f726c);
}
.announce-preview .mm-section-heading,
.announce-preview .meeting-minutes > h2 {
    margin: 0 0 .45rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent, #1f6b57);
}
.announce-preview .mm-section-body,
.announce-preview .meeting-minutes > p {
    margin: 0;
    color: var(--text, #21352f);
    line-height: 1.55;
}
.announce-preview .mm-subsection {
    margin-top: 1rem;
}
.announce-preview .mm-subsection-heading {
    margin: 0 0 .4rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading, #15231f);
}
.announce-preview .mm-subsection-body {
    margin: 0;
    color: var(--text, #21352f);
    line-height: 1.55;
}
.announce-preview .mm-line { display: block; }
.announce-preview .mm-list .mm-line {
    padding-left: 1rem;
    position: relative;
}
.announce-preview .mm-list .mm-line::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .55em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--accent, #1f6b57);
}
@media (max-width: 640px) {
    .meeting-minutes-doc { padding: 1.15rem 1rem 1.35rem; }
    .meeting-minutes-doc .mm-meta-row,
    .announce-preview .mm-meta-row { grid-template-columns: 1fr; gap: .15rem; }
    .meeting-minutes-doc .mm-title,
    .meeting-minutes-doc .meeting-minutes > h1 { font-size: 1.3rem; }
}

/* Live meeting minutes capture */
.attendance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 900px) {  /* was 720 — Axis B */
    .attendance-grid { grid-template-columns: 1fr; }
}
.attendance-panel {
    background: var(--surface-alt, #fbfcfe);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .75rem;
    padding: .85rem 1rem;
    min-height: 8rem;
}
.attendance-panel .rail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}
.attendance-count {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted, #74869b);
    background: var(--surface-nested, #f7faf8);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: 999px;
    padding: .1rem .45rem;
    min-width: 1.4rem;
    text-align: center;
}
.attendance-panel.is-present { border-color: color-mix(in srgb, var(--accent, #1f6b57) 35%, var(--surface-border, #dfe7e3)); }
.attendance-panel.is-absent { border-color: var(--surface-border, #dfe7e3); }
.attendance-list { display: flex; flex-direction: column; gap: .35rem; max-height: 16rem; overflow: auto; }
.attendance-person {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: .55rem .7rem .55rem .85rem;
    border: 0;
    border-radius: .5rem;
    border-left: 3px solid var(--accent, #1f6b57);
    background: var(--surface-nested, #f7faf8);
    color: var(--text, #21352f);
    text-align: left;
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
    transition: background .12s ease, border-color .12s ease;
}
.attendance-panel.is-absent .attendance-person {
    border-left-color: var(--muted, #74869b);
    opacity: .92;
}
.attendance-person:hover,
.attendance-person:focus-visible {
    background: var(--nav-hover-bg, #edf3f0);
    outline: none;
}
.attendance-person:focus-visible {
    box-shadow: 0 0 0 2px var(--accent, #1f6b57);
}
.attendance-person-name { font-weight: 650; color: var(--text, #21352f); }
.attendance-person-title { color: var(--muted, #74869b); font-weight: 500; }
.attendance-empty { color: var(--muted, #74869b); font-size: .88rem; margin: .35rem 0 0; }

.minutes-live-progress {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .75rem;
    padding: .65rem .85rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    background: var(--surface-alt, #fbfcfe);
}
.minutes-live-progress-label {
    font-size: .88rem;
    font-weight: 650;
    color: var(--heading, #15231f);
}
.minutes-live-progress-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.minutes-live-steps {
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}
.minutes-live-step-btn {
    width: 100%;
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--input-border, #d7e0eb);
    background: var(--control-bg, #fff);
    border-radius: .75rem;
    padding: .65rem .75rem;
    color: inherit;
    cursor: pointer;
    position: relative;
}
.minutes-live-step-btn:hover:not(:disabled),
.minutes-live-step-btn:focus-visible {
    border-color: var(--accent, #1f6b57);
    background: var(--accent-soft, #f7fcfa);
    outline: none;
}
.minutes-live-step.current .minutes-live-step-btn {
    border-color: var(--accent, #1f6b57);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1f6b57) 18%, transparent);
}
.minutes-live-step.done .minutes-live-step-btn {
    border-color: var(--accent-soft-border, #9ec9ba);
    background: var(--accent-soft-strong, #f3faf7);
}
.minutes-live-step-num {
    flex: 0 0 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface-alt, #e8eef5);
    color: var(--muted-strong, #52677f);
    font-size: .75rem;
    font-weight: 700;
}
.minutes-live-step.current .minutes-live-step-num {
    background: var(--accent, #1f6b57);
    color: var(--accent-contrast, #fff);
}
.minutes-live-step.done .minutes-live-step-num {
    background: var(--accent, #2f8f74);
    color: var(--accent-contrast, #fff);
}
.minutes-live-step-label { display: grid; gap: .08rem; min-width: 0; flex: 1 1 auto; }
.minutes-live-step-label strong { font-size: .84rem; color: var(--card-text, #183451); }
.minutes-live-step-label small { color: var(--muted, #74869b); font-size: .7rem; }
.minutes-live-step-check {
    flex: 0 0 auto;
    align-self: center;
    font-size: .82rem;
    font-weight: 800;
    color: var(--accent, #1f6b57);
}
.minutes-live-step-add .minutes-live-step-btn {
    border-style: dashed;
    background: transparent;
}
.minutes-live-step-add-btn .minutes-live-step-num {
    background: color-mix(in srgb, var(--accent, #1f6b57) 14%, var(--surface-alt, #e8eef5));
    color: var(--accent, #1f6b57);
}
.minutes-text-field {
    display: flex;
    gap: .35rem;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}
.minutes-text-field.is-multiline { flex-direction: column; align-items: stretch; }
.minutes-text-field.is-multiline .minutes-ai-rewrite-btn { align-self: flex-end; }
.minutes-text-field-input { flex: 1 1 auto; min-width: 0; }
.minutes-text-field-input .form-control { width: 100%; }
.minutes-ai-rewrite-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent, #1f6b57) 45%, var(--input-border, #d5deea));
    background: var(--control-bg, #fff);
    color: var(--accent, #1f6b57);
    border-radius: .4rem;
    min-height: 2.15rem;
    padding: 0 .55rem;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
}
.minutes-ai-rewrite-btn .gl-icon { flex: 0 0 auto; }
.minutes-ai-rewrite-btn:hover:not(:disabled),
.minutes-ai-rewrite-btn:focus-visible {
    background: var(--accent-soft, #e4efe9);
    outline: none;
}
.minutes-ai-rewrite-btn:disabled { opacity: .55; cursor: not-allowed; }
.minutes-text-field-error {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--danger, #b42318);
}
.minutes-live-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.minutes-live { display: flex; flex-direction: column; gap: .85rem; }
.minutes-live-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}
.minutes-section {
    background: var(--surface-alt, #fbfcfe);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .75rem;
    padding: .85rem 1rem 1rem;
}
.minutes-section-header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .65rem;
}
.minutes-section-header .minutes-text-field { flex: 1 1 12rem; }
.minutes-section-title-static {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--card-text, #183451);
    font-size: 1rem;
}
.minutes-template-sections {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-width: 36rem;
}
.minutes-template-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    padding: .55rem .65rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    background: var(--surface-alt, #fbfcfe);
}
.minutes-template-row.is-fixed {
    background: var(--surface, #fff);
    opacity: .92;
}
.minutes-template-order {
    width: 1.5rem;
    text-align: center;
    color: var(--muted, #74869b);
    font-size: .82rem;
    flex: 0 0 auto;
}
.minutes-template-title-input { flex: 1 1 12rem; }
.minutes-template-remove { flex: 0 0 auto; }
.minutes-template-droplist {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 36rem;
}
.mm-tpl-drop-slot {
    height: .3rem;
    border-radius: .35rem;
    transition: height .12s ease, background .12s ease, margin .12s ease;
}
.minutes-template-droplist.is-dragging .mm-tpl-drop-slot {
    height: .5rem;
    margin: .1rem 0;
}
.mm-tpl-drop-slot.mm-tpl-drop-target {
    height: 2.25rem;
    margin: .15rem 0;
    background: var(--accent-soft, #eef7f3);
    border: 2px dashed var(--accent, #1f6b57);
}
.minutes-template-row.is-dragging {
    opacity: .5;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .12);
}
.minutes-template-row:not(.is-fixed) {
    cursor: grab;
}
.minutes-template-row:not(.is-fixed):active {
    cursor: grabbing;
}
.minutes-template-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .85rem;
    max-width: 36rem;
}
.minutes-template-add-row .form-control {
    flex: 1 1 14rem;
}
.minutes-template-palette .palette-btn {
    cursor: grab;
}
.minutes-template-palette .palette-btn.is-dragging {
    opacity: .65;
}
.minutes-template-palette .palette-btn.is-added {
    opacity: .55;
}
.minutes-motion-vote-options {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.minutes-motion-vote-option {
    display: flex;
    gap: .45rem;
    align-items: center;
    color: var(--card-text, #183451);
}
.minutes-motion-member-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 10rem;
    overflow: auto;
    padding: .45rem .55rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .55rem;
    background: var(--surface-alt, #fbfcfe);
}
.minutes-motion-member {
    display: flex;
    gap: .45rem;
    align-items: center;
    color: var(--card-text, #183451);
    font-size: .88rem;
}
.meeting-minutes-doc .mm-motion {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--muted, #5c6b7a);
    font-style: italic;
}
.minutes-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.minutes-section-title {
    flex: 1 1 12rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading, #15231f);
    background: var(--surface, #fff);
}
.minutes-reorder {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    flex-shrink: 0;
}
.minutes-reorder-btn {
    min-width: 1.85rem;
    padding: .05rem .35rem;
    line-height: 1.15;
    font-size: .75rem;
}
.minutes-items { display: flex; flex-direction: column; gap: .65rem; }
.minutes-items.is-bulleted .minutes-item {
    position: relative;
    padding-left: 1.15rem;
}
.minutes-items.is-bulleted .minutes-item::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: 1.05rem;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--accent, #1f6b57);
}
.minutes-items.is-bulleted .minutes-item.is-note::before {
    border-radius: 0;
    width: .45rem;
    height: .12rem;
    top: 1.15rem;
}
.minutes-insert-rail {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 1.1rem;
    margin: -.15rem 0;
}
.minutes-insert-btn {
    border: 1px dashed var(--surface-border, #c5d3ce);
    background: var(--surface-alt, #f4f8f6);
    color: var(--muted, #5f7369);
    border-radius: 999px;
    padding: .05rem .55rem;
    font-size: .82rem;
    line-height: 1.2;
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
.minutes-insert-rail:hover .minutes-insert-btn,
.minutes-insert-btn:hover,
.minutes-insert-btn:focus-visible,
.minutes-insert-btn.open {
    opacity: 1;
    border-color: var(--accent, #1f6b57);
    color: var(--accent, #1f6b57);
    outline: none;
}
.minutes-insert-menu {
    bottom: calc(100% + .25rem);
}
.minutes-item {
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .6rem;
    padding: .65rem .75rem;
    display: grid;
    gap: .45rem;
}
.minutes-item.is-note {
    border-style: dashed;
    background: color-mix(in srgb, var(--accent-soft, #e4efe9) 55%, var(--surface, #fff));
}
.minutes-note-badge {
    flex: 1 1 auto;
    align-self: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--badge-soft-fg, #1f6b57);
}
.minutes-item-top {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.minutes-item-top .minutes-text-field { flex: 1 1 auto; font-weight: 650; }
.minutes-item-top .minutes-text-field .form-control { font-weight: 650; }
.minutes-item .minutes-text-field textarea.form-control {
    min-height: 2.6rem;
    resize: vertical;
    font-weight: 500;
}
.minutes-item-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.minutes-section-plus {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: .85rem;
}
.minutes-plus-btn {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid var(--accent, #1f6b57);
    background: var(--accent, #1f6b57);
    color: var(--accent-contrast, #fff);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 .25rem .7rem color-mix(in srgb, var(--accent, #1f6b57) 28%, transparent);
}
.minutes-plus-btn:hover,
.minutes-plus-btn:focus-visible,
.minutes-plus-btn.open {
    background: color-mix(in srgb, var(--accent, #1f6b57) 88%, #000);
    outline: none;
}
.minutes-insert-modal { max-width: 420px; width: min(92vw, 420px); }
.minutes-plus-menu {
    position: absolute;
    bottom: calc(100% + .4rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .35rem;
    padding: .35rem;
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: .65rem;
    box-shadow: 0 .45rem 1.25rem var(--shadow-color, rgba(21, 35, 31, .12));
    z-index: 5;
}
.minutes-plus-menu button {
    border: 0;
    background: transparent;
    color: var(--text, #21352f);
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    padding: .45rem .7rem;
    border-radius: .45rem;
    cursor: pointer;
    white-space: nowrap;
}
.minutes-plus-menu button:hover,
.minutes-plus-menu button:focus-visible {
    background: var(--accent-soft, #e4efe9);
    color: var(--heading, #15231f);
    outline: none;
}

/* ?????? Apex marketing landing (no tenant slug) ?????? */
.mkt {
    --mkt-navy: #0b2540;
    --mkt-lime: #66bb46;
    --mkt-lime-deep: #4f9a34;
    --mkt-ink: #142033;
    --mkt-muted: #5b6b7c;
    --mkt-paper: #f4f7f5;
    --mkt-paper-alt: #e8efe9;
    --mkt-line: #d5e0d8;
    --mkt-veil: rgba(244, 247, 245, .96);
    --mkt-veil-mid: rgba(244, 247, 245, .35);
    --mkt-surface: #ffffff;
    color-scheme: light;
    color: var(--mkt-ink);
    background: var(--mkt-paper);
    min-height: 100dvh;
    font-family: "Manrope", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mkt:not([data-theme="light"]) {
        color-scheme: dark;
        --mkt-navy: #e8edf4;
        --mkt-lime: #7ad45a;
        --mkt-lime-deep: #8ae06a;
        --mkt-ink: #f4f6fa;
        --mkt-muted: #a8b4c4;
        --mkt-paper: #09090f;
        --mkt-paper-alt: #101218;
        --mkt-line: rgba(255, 255, 255, .1);
        --mkt-veil: rgba(9, 9, 15, .92);
        --mkt-veil-mid: rgba(9, 9, 15, .45);
        --mkt-surface: #14161f;
    }
}
.mkt[data-theme="dark"] {
    color-scheme: dark;
    --mkt-navy: #e8edf4;
    --mkt-lime: #7ad45a;
    --mkt-lime-deep: #8ae06a;
    --mkt-ink: #f4f6fa;
    --mkt-muted: #a8b4c4;
    --mkt-paper: #09090f;
    --mkt-paper-alt: #101218;
    --mkt-line: rgba(255, 255, 255, .1);
    --mkt-veil: rgba(9, 9, 15, .92);
    --mkt-veil-mid: rgba(9, 9, 15, .45);
    --mkt-surface: #14161f;
}
:root[data-theme="dark"] .mkt:not([data-theme="light"]) {
    color-scheme: dark;
    --mkt-navy: #e8edf4;
    --mkt-lime: #7ad45a;
    --mkt-lime-deep: #8ae06a;
    --mkt-ink: #f4f6fa;
    --mkt-muted: #a8b4c4;
    --mkt-paper: #09090f;
    --mkt-paper-alt: #101218;
    --mkt-line: rgba(255, 255, 255, .1);
    --mkt-veil: rgba(9, 9, 15, .92);
    --mkt-veil-mid: rgba(9, 9, 15, .45);
    --mkt-surface: #14161f;
}
.mkt a { color: inherit; }
.mkt-nav {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
}
.mkt-nav-brand {
    display: inline-flex;
    align-items: center;
    padding: .2rem .35rem .2rem .25rem;
    border-radius: .85rem;
    background: linear-gradient(160deg, #ffffff 0%, #f3f7f4 55%, #e8efe9 100%);
    box-shadow:
        0 1px 2px rgba(11, 37, 64, .06),
        0 8px 20px rgba(11, 37, 64, .08);
}
.mkt-nav-brand img {
    display: block;
    height: 2.6rem;
    width: auto;
    max-width: min(52vw, 13.5rem);
    object-fit: contain;
    border-radius: .65rem;
}
.mkt-nav-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mkt-btn-primary,
.mkt-btn-secondary,
.mkt-btn-ghost,
.mkt-btn-lg {
    border-radius: .65rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        background-color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        box-shadow var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.mkt-btn-primary:active,
.mkt-btn-secondary:active,
.mkt-btn-ghost:active {
    transform: scale(var(--press-scale, 0.97));
}
.mkt-btn-primary {
    background: var(--mkt-lime);
    border-color: var(--mkt-lime);
    color: #0a1a0d !important;
}
.mkt-btn-primary:hover,
.mkt-btn-primary:focus-visible {
    background: var(--mkt-lime-deep);
    border-color: var(--mkt-lime-deep);
    color: #fff !important;
}
.mkt-btn-secondary {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(11, 37, 64, .16);
    color: var(--mkt-navy) !important;
    backdrop-filter: blur(8px);
}
.mkt-btn-secondary:hover,
.mkt-btn-secondary:focus-visible {
    background: #fff;
    border-color: rgba(11, 37, 64, .28);
}
.mkt-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mkt-navy) !important;
}
.mkt-btn-ghost:hover,
.mkt-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .55);
}
.mkt-btn-lg { padding: .8rem 1.25rem; font-size: 1rem; }

.mkt-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    overflow: hidden;
}
.mkt-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    transform: scale(1.04);
    animation: mkt-hero-drift 18s ease-in-out infinite alternate;
}
.mkt-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--mkt-veil) 0%, color-mix(in srgb, var(--mkt-veil) 88%, transparent) 34%, var(--mkt-veil-mid) 62%, transparent 82%),
        linear-gradient(180deg, color-mix(in srgb, var(--mkt-veil) 55%, transparent) 0%, transparent 28%, color-mix(in srgb, var(--mkt-veil) 20%, transparent) 72%, color-mix(in srgb, var(--mkt-veil) 88%, transparent) 100%);
}
.mkt-hero-content {
    position: relative;
    z-index: 1;
    width: min(100%, 40rem);
    padding: clamp(5.5rem, 12dvh, 7rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 8dvh, 4.5rem);
}
.mkt-hero-logo-wrap {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 1.1rem;
    padding: .55rem .7rem;
    border-radius: 1.15rem;
    background: linear-gradient(160deg, #ffffff 0%, #f4f7f5 52%, #e8efe9 100%);
    box-shadow:
        0 1px 2px rgba(11, 37, 64, .06),
        0 14px 32px rgba(11, 37, 64, .12);
}
.mkt-hero-logo {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    margin: 0;
    border-radius: .85rem;
}
.mkt-hero-headline {
    margin: 0;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-weight: 650;
    font-size: clamp(1.85rem, 4.6vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--mkt-navy);
}
.mkt-hero-lede {
    margin: .9rem 0 0;
    max-width: 34rem;
    font-size: clamp(1rem, 2.1vw, 1.15rem);
    line-height: 1.55;
    color: var(--mkt-muted);
}
.mkt-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}
.mkt-anim {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    animation: mkt-rise 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) forwards;
}
.mkt-anim-1 { animation-delay: 40ms; }
.mkt-anim-2 { animation-delay: 90ms; }
.mkt-anim-3 { animation-delay: 140ms; }
.mkt-anim-4 { animation-delay: 190ms; }
@keyframes mkt-rise {
    to { opacity: 1; transform: none; }
}
@keyframes mkt-hero-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to { transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
}

.mkt-section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.mkt-section-alt { background: var(--mkt-paper-alt); }
.mkt-section-inner {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}
.mkt-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
}
.mkt-split-reverse .mkt-copy { order: 2; }
.mkt-split-reverse .mkt-visual { order: 1; }
.mkt-kicker {
    margin: 0 0 .55rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mkt-lime-deep);
}
.mkt-copy h2 {
    margin: 0;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-weight: 650;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: -.025em;
    color: var(--mkt-navy);
    line-height: 1.18;
}
.mkt-copy p:not(.mkt-kicker) {
    margin: .85rem 0 0;
    color: var(--mkt-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 36rem;
}
.mkt-visual {
    margin: 0;
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(11, 37, 64, .12);
    background: var(--mkt-surface, #fff);
    transform: translateY(0);
    transition: transform 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
    .mkt-visual:hover { transform: translateY(-4px); }
}
.mkt-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.mkt-audience {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.mkt-audience-chip {
    appearance: none;
    border: 1px solid var(--mkt-line);
    background: var(--mkt-surface, #fff);
    color: var(--mkt-navy);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    padding: .45rem .8rem;
    border-radius: .65rem;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.mkt-audience-chip:hover,
.mkt-audience-chip:focus-visible {
    border-color: color-mix(in srgb, var(--mkt-lime) 55%, var(--mkt-line));
    background: color-mix(in srgb, var(--mkt-lime) 12%, #fff);
    outline: none;
}
.mkt-audience-chip.is-active {
    background: var(--mkt-lime);
    border-color: var(--mkt-lime);
    color: #0a1a0d;
}
.mkt-slider {
    display: grid;
    gap: .75rem;
}
.mkt-slider-frame {
    position: relative;
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(11, 37, 64, .12);
    background: #fff;
    aspect-ratio: 1;
}
.mkt-slider-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.98);
    filter: blur(2px);
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), filter 280ms var(--ease-out);
    pointer-events: none;
}
.mkt-slider-slide.is-active {
    opacity: 1;
    transform: none;
    filter: blur(0);
    pointer-events: auto;
    z-index: 1;
}
.mkt-slider-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mkt-slider-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .7rem .9rem;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(11, 37, 64, .72));
}
.mkt-slider-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
}
.mkt-slider-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--mkt-navy) 22%, var(--mkt-surface, #fff));
    cursor: pointer;
    transform: scaleX(1);
    transform-origin: center;
    transition: transform 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background-color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.mkt-slider-dot.is-active {
    background: var(--mkt-lime-deep);
    transform: scaleX(2.45);
}

.mkt-find {
    max-width: 40rem;
    text-align: left;
}
.mkt-find h2 {
    margin: 0;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-weight: 650;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    color: var(--mkt-navy);
}
.mkt-find > p {
    margin: .75rem 0 0;
    color: var(--mkt-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}
.mkt-find-form { margin-top: 1.35rem; }
.mkt-find-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}
.mkt-find-prefix,
.mkt-find-suffix {
    color: var(--mkt-muted);
    font-weight: 650;
    font-size: .92rem;
}
.mkt-find-input {
    flex: 1 1 10rem;
    min-width: 10rem;
    border-color: var(--mkt-line) !important;
    background: #fff !important;
    color: var(--mkt-ink) !important;
}
.mkt-find-error {
    margin: .65rem 0 0;
    color: #a63d46;
    font-weight: 650;
    font-size: .92rem;
}
.mkt-find-signin {
    margin-top: 1rem !important;
    font-size: .95rem !important;
}
.mkt-find-signin a {
    color: var(--mkt-lime-deep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.mkt-footer {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.25rem;
    border-top: 1px solid var(--mkt-line);
    background: var(--mkt-surface, #fff);
}
.mkt-footer img { flex-shrink: 0; }
.mkt-footer strong {
    display: block;
    color: var(--mkt-navy);
    font-weight: 750;
}
.mkt-footer span {
    display: block;
    color: var(--mkt-muted);
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mkt-footer-links {
    margin-top: .45rem;
    font-size: .85rem;
    letter-spacing: 0;
    text-transform: none;
}
.mkt-footer-links a {
    color: var(--mkt-navy);
    text-decoration: underline;
    text-underline-offset: .12em;
}
.mkt-footer-links a:hover { color: var(--mkt-accent, #1f6feb); }

.legal-page {
    min-height: 100dvh;
    background:
        radial-gradient(ellipse 80% 50% at 10% -10%, var(--page-glow, color-mix(in srgb, var(--accent) 10%, transparent)), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated, var(--bg)) 0%, var(--bg) 100%);
    color: var(--text, #132536);
}
.legal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--surface-border, rgba(11, 37, 64, .08));
    background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
    backdrop-filter: blur(8px);
}
.legal-nav-brand img { display: block; height: 2.75rem; width: auto; }
.legal-main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
}
.legal-kicker {
    margin: 0 0 .35rem;
    color: var(--muted, #5b6b7a);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.legal-main h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--heading, #0b2540);
    letter-spacing: -.02em;
}
.legal-meta {
    margin: 0 0 1.5rem;
    color: var(--muted, #5b6b7a);
    font-size: .92rem;
}
.legal-main h2 {
    margin: 2rem 0 .75rem;
    font-size: 1.2rem;
    color: var(--heading, #0b2540);
}
.legal-main h3 {
    margin: 1.15rem 0 .45rem;
    font-size: 1.02rem;
    color: var(--heading-alt, #17324a);
}
.legal-main p,
.legal-main li {
    line-height: 1.55;
    font-size: .98rem;
}
.legal-main ul { padding-left: 1.2rem; }
.legal-main a { color: var(--accent, #1f4e79); }
.legal-toc {
    margin: 1.5rem 0 1.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--surface-border, rgba(11, 37, 64, .1));
    border-radius: .65rem;
    background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
}
.legal-toc strong { display: block; margin-bottom: .4rem; }
.legal-toc ol {
    margin: 0;
    padding-left: 1.2rem;
}
.legal-toc li { margin: .2rem 0; }
.legal-note {
    margin-top: 1rem;
    color: var(--muted, #5b6b7a);
    font-size: .92rem;
}
.legal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    padding: 1.25rem;
    border-top: 1px solid var(--surface-border, rgba(11, 37, 64, .08));
    background: var(--surface, #fff);
    color: var(--muted, #5b6b7a);
    font-size: .9rem;
}
.legal-footer a { color: var(--heading, #0b2540); }
.login-legal {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .85rem;
}
.login-legal a { color: inherit; text-decoration: underline; text-underline-offset: .12em; }

@media (max-width: 900px) {  /* was 860 — Axis B, content density; see BREAKPOINT SCALE */
    .mkt-split,
    .mkt-split-reverse { grid-template-columns: 1fr; }
    .mkt-split-reverse .mkt-copy,
    .mkt-split-reverse .mkt-visual { order: initial; }
    .mkt-hero-veil {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--mkt-veil) 72%, transparent) 0%, color-mix(in srgb, var(--mkt-veil) 55%, transparent) 28%, color-mix(in srgb, var(--mkt-veil) 78%, transparent) 68%, var(--mkt-veil) 100%);
    }
    .mkt-hero-content { width: min(100%, 36rem); }
    .mkt-nav-actions .mkt-btn-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-anim { opacity: 1; transform: none; animation: none; }
    .mkt-hero-media { animation: none; transform: none; }
    .mkt-visual { transition: none; }
    .mkt-slider-slide { transition: none; filter: none; }
    .mkt-slider-dot { transition: none; }
    .mkt-btn-primary:active,
    .mkt-btn-secondary:active,
    .mkt-btn-ghost:active { transform: none; }
}


/* Prioritization matrix (value ? effort) */
.pb-prio-toolbar-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.pb-prio-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.pb-prio-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .9fr); gap: 1rem; align-items: start; }
.pb-initiatives-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.pb-initiative-item { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--surface-border, #dfe7e3); }
.pb-initiative-item-selected .pb-initiative-btn { background: var(--surface-alt, #f1f5f9); }
.pb-initiative-btn { flex: 1; text-align: left; border: 0; background: transparent; padding: .35rem .5rem; border-radius: var(--radius-sm, .35rem); color: var(--card-text, inherit); }
.pb-initiative-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.pb-prio-matrix { position: relative; padding: 1.75rem 0.5rem 2.25rem 2.25rem; }
.pb-prio-plot {
    position: relative;
    aspect-ratio: 1.15 / 1;
    min-height: 22rem;
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .5rem);
    background:
        linear-gradient(to right, rgba(15,118,110,.04) 0 50%, transparent 50%),
        linear-gradient(to top, rgba(15,118,110,.04) 0 50%, transparent 50%),
        var(--surface-nested, #f8fafc);
    overflow: hidden;
}
.pb-prio-plot-droppable {
    outline: 2px dashed var(--accent, #0f766e);
    outline-offset: -2px;
}
.pb-prio-quad {
    position: absolute; width: 50%; height: 50%;
    display: flex; align-items: flex-start; justify-content: flex-start;
    padding: .5rem .65rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted, #64748b); pointer-events: none; opacity: .85;
    z-index: 0;
}
.pb-prio-quad-quickwins { top: 0; left: 0; }
.pb-prio-quad-bigbets { top: 0; left: 50%; }
.pb-prio-quad-fillins { top: 50%; left: 0; }
.pb-prio-quad-moneypits { top: 50%; left: 50%; }
.pb-prio-axis-mid-h { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--card-border, #cbd5e1); pointer-events: none; z-index: 0; }
.pb-prio-axis-mid-v { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--card-border, #cbd5e1); pointer-events: none; z-index: 0; }
.pb-prio-cells {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    z-index: 1;
    pointer-events: none;
}
.pb-prio-plot-droppable .pb-prio-cells { pointer-events: auto; z-index: 5; }
.pb-prio-plot-droppable .pb-prio-dot { pointer-events: none; }
.pb-prio-cell {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.pb-prio-plot-droppable .pb-prio-cell {
    border-color: rgba(15, 118, 110, .12);
    background: rgba(255, 255, 255, .15);
}
.pb-prio-cell-active {
    background: rgba(15, 118, 110, .18) !important;
    border-color: var(--accent, #0f766e) !important;
    box-shadow: inset 0 0 0 1px var(--accent, #0f766e);
}
.pb-prio-cell-hint {
    font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    color: var(--accent-strong, #115e59); opacity: .85; pointer-events: none;
}
.pb-prio-dot {
    position: absolute; transform: translate(-50%, 50%);
    z-index: 2; border: 0; cursor: grab;
    min-width: 1.35rem; min-height: 1.35rem; padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--accent, #0f766e); color: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    font-size: .62rem; font-weight: 700; line-height: 1.2;
    max-width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-prio-dot:active { cursor: grabbing; }
.pb-prio-dot:hover, .pb-prio-dot-selected { background: var(--accent-strong, #115e59); outline: 2px solid var(--accent-border, #99f6e4); outline-offset: 2px; z-index: 3; }
.pb-prio-dot-dragging { opacity: .45; z-index: 4; }
.pb-prio-dot-label { display: block; overflow: hidden; text-overflow: ellipsis; }
.pb-prio-x-label, .pb-prio-y-label { position: absolute; font-size: .75rem; font-weight: 700; color: var(--muted-strong, #475569); }
.pb-prio-x-label { left: 50%; bottom: .15rem; transform: translateX(-50%); }
.pb-prio-y-label { left: .15rem; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; white-space: nowrap; }
.pb-prio-x-ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 2.25rem; margin-right: .5rem; font-size: .7rem; color: var(--muted, #64748b); text-align: center; }
.pb-prio-y-ticks {
    position: absolute; left: .35rem; top: 1.75rem; bottom: 2.25rem;
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: .7rem; color: var(--muted, #64748b); pointer-events: none;
}
.pb-prio-incomplete-list, .pb-prio-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 22rem; overflow: auto; }
.pb-prio-top-list { list-style: decimal; padding-left: 1.25rem; }
.pb-prio-incomplete-item {
    border-radius: .35rem;
    cursor: grab;
    border: 1px solid transparent;
}
.pb-prio-incomplete-item:active { cursor: grabbing; }
.pb-prio-incomplete-item:hover { background: var(--surface-nested, #f1f5f9); }
.pb-prio-incomplete-dragging {
    opacity: .55;
    border-color: var(--accent-border, #99f6e4);
    background: var(--accent-soft, #ecfdf5);
}
.pb-prio-incomplete-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    width: 100%; text-align: left; border: 0; background: transparent; padding: .35rem .4rem; border-radius: .35rem; cursor: inherit;
}
.modal-dialog.modal-lg.pb-prio-modal { max-width: min(32rem, 100vw); }
@media (max-width: 900px) {  /* was 960 — Axis B */
    .pb-prio-layout { grid-template-columns: 1fr; }
    .pb-initiatives-layout { grid-template-columns: 1fr; }
    .pb-prio-plot { min-height: 18rem; }
}

/* Board of Directors hierarchy tree */
.board-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--space-2) 0 var(--space-4);
}
.board-tree-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.board-tree-connector {
    width: 2px;
    height: 1.25rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
    border-radius: 999px;
    margin: 0 auto;
}
.board-tree-section:first-child > .board-tree-tier-solo > .board-tree-card:first-child > .board-tree-connector {
    display: none;
}
.board-tree-section-title {
    margin: .35rem 0 .85rem;
    font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
    font-size: var(--font-size-lg);
    font-weight: 650;
    color: var(--heading);
    letter-spacing: .01em;
    text-align: center;
}
.board-tree-role {
    display: inline-block;
    margin: 0 auto .55rem;
    padding: .2rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
}
.board-tree-tier {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}
.board-tree-tier-solo {
    flex-direction: column;
    align-items: center;
}
.board-tree-tier-solo .board-tree-card {
    width: min(28rem, 100%);
}
.board-tree-tier-peers .board-tree-card {
    width: min(17.5rem, 100%);
    flex: 1 1 15rem;
    max-width: 20rem;
}
.board-tree-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.board-tree-card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .65rem;
    padding: var(--space-4);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface-alt), var(--surface));
    box-shadow: var(--shadow-sm);
}
.board-tree-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid color-mix(in srgb, var(--accent) 35%, #fff);
    background: var(--surface-nested);
}
.board-tree-photo-placeholder {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}
.board-tree-meta { width: 100%; }
.board-tree-name {
    display: block;
    font-size: var(--font-size-md);
    color: var(--heading);
}
.board-tree-title,
.board-tree-company {
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
    margin-top: .15rem;
}
.board-tree-email {
    margin-top: .35rem;
    font-size: var(--font-size-sm);
    word-break: break-word;
}
.board-tree-bio {
    margin: .55rem 0 0;
    color: var(--muted-strong);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.board-tree-bio.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.board-tree-bio-toggle {
    display: inline-block;
    margin-top: .2rem;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    vertical-align: baseline;
}
.board-tree-bio-toggle:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .board-tree-tier-peers .board-tree-card {
        flex: 1 1 100%;
        max-width: none;
    }
    .board-tree-photo { width: 80px; height: 80px; }
}

/* ---- Company highlights + certificate builder ---- */
.portal-highlights { display: grid; gap: 1rem; }
.portal-highlight {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--portal-accent, #5C2D91);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--portal-accent, #5C2D91) 10%, var(--surface-alt)),
    color-mix(in srgb, var(--portal-accent, #5C2D91) 5%, var(--surface))
  );
}
.portal-highlight-kicker {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--portal-accent, #5C2D91);
  font-weight: 600;
  margin-bottom: .35rem;
}
.portal-highlight h2,
.portal-highlight .h4 {
  color: var(--heading);
}
.portal-highlight-blurb {
  line-height: 1.45;
  color: var(--card-text);
}
/* Studio builders — use the full content area so the three panes can spread out.
   .page prefix beats MainLayout's scoped .content { max-width: 1500px }.
   Covers website (.pws-builder), certificate, newsletter, report, and survey. */
.page .content:has(.studio),
.page .content:has(.survey-builder),
.page .content:has(.moderation-page) {
  max-width: none;
}
.cert-studio {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(240px, 280px);
  min-height: min(78dvh, 54rem);
  border: 1px solid var(--surface-border, #dfe7e3);
  border-radius: var(--radius-lg, .85rem);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(21, 35, 31, .06));
  overflow: hidden;
}
.cert-studio-rail,
.cert-studio-inspector {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.1rem 1.15rem 1.35rem;
  background: var(--surface-alt, #f5f8fc);
  overflow: auto;
  max-height: min(78dvh, 54rem);
}
.cert-studio-rail {
  border-right: 1px solid var(--surface-border, #dfe7e3);
}
.cert-studio-inspector {
  border-left: 1px solid var(--surface-border, #dfe7e3);
}
.cert-studio-rail-head {
  margin-bottom: .85rem;
}
.cert-studio-rail-head strong {
  display: block;
  font-size: .95rem;
  color: var(--heading, #15231f);
  margin-bottom: .25rem;
}
.cert-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-bottom: .25rem;
}
.cert-palette-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.65rem;
  padding: .45rem .5rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .6rem;
  background: var(--surface, #fff);
  color: var(--card-text, #183451);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.25;
  cursor: grab;
  user-select: none;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.cert-palette-item:focus-visible {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 16%, transparent);
  outline: none;
  background: var(--surface, #fff);
}
@media (hover: hover) and (pointer: fine) {
  .cert-palette-item:hover {
    border-color: var(--accent, #1f6b57);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 16%, transparent);
    background: var(--surface, #fff);
  }
}
.cert-palette-item:active { cursor: grabbing; transform: scale(var(--press-scale, 0.97)); }
.cert-palette-item.is-dragging { opacity: .55; }
.cert-palette-label { pointer-events: none; }
.cert-rail-section {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.cert-rail-section .rail-heading { margin-bottom: .75rem; }
.cert-color-row,
.cert-style-grid,
.cert-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.cert-color-row .form-control-color,
.cert-style-grid .form-control-color {
  width: 100%;
  height: 2.4rem;
  padding: .2rem;
}
.cert-pos-grid .form-control {
  min-width: 0;
}
.cert-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
}
.cert-nudge-row,
.cert-arrange-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.cert-arrange-row > .btn { flex: 1 1 auto; }
.cert-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .15rem;
}
.cert-inspector-head .rail-heading { margin-bottom: 0; }
.cert-type-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: .45rem;
  background: color-mix(in srgb, var(--accent, #1f6b57) 12%, #fff);
  color: var(--accent, #1f6b57);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cert-inspector-empty {
  padding: .35rem 0;
}
.cert-inspector-empty p {
  line-height: 1.45;
  font-size: .9rem;
}
.cert-logo-preview {
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .6rem;
  background: #fff;
  padding: .75rem;
  text-align: center;
  max-height: 140px;
  overflow: hidden;
}
.cert-logo-preview img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}
.cert-studio-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(31, 107, 87, .06), transparent 70%),
    linear-gradient(180deg, #e6ebe8 0%, #dfe6e2 100%);
}
.cert-studio-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
  border-bottom: 1px solid var(--surface-border, #dfe7e3);
  backdrop-filter: blur(6px);
}
.cert-stage-size {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cert-stage .cert-el img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.cert-stage .cert-image-empty {
  cursor: move;
}
.cert-canvas-scroll {
  flex: 1;
  overflow: auto;
  min-height: 28rem;
  max-height: calc(min(78dvh, 54rem) - 3rem);
  padding: 1.35rem 1.25rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.cert-preview-fit {
  --cert-w: 1056;
  --cert-h: 816;
  width: 100%;
  max-width: min(100%, calc(var(--cert-w) * 1px));
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  flex: 0 1 auto;
  color-scheme: light;
  container-type: inline-size;
  /* Reserve scaled height before JS fit runs (avoids refresh layout jump). */
  aspect-ratio: var(--cert-w) / var(--cert-h);
}
.cert-preview-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* Match JS fit scale on first paint so content isn't cropped then resized. */
  transform: scale(min(1, calc(100cqi / (var(--cert-w) * 1px))));
  box-shadow: 0 16px 48px rgba(21, 35, 31, .18);
}
.cert-preview-fit:not(.cert-preview-interactive) .cert-el {
  cursor: default !important;
  pointer-events: none;
}
.cert-stage-host { margin: 0 auto; }
.cert-stage {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
.cert-stage .cert-el { cursor: move; }
.cert-stage .cert-el.cert-selected {
  outline: 2px solid #2867D7;
  outline-offset: 1px;
}
.cert-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: #2867D7;
  border: 2px solid #fff;
  border-radius: 2px;
  cursor: nwse-resize;
}
.cert-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}
.cert-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}
.cert-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.cert-design-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, .45);
}
.cert-design-modal {
  z-index: 1050;
}
.cert-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.cert-design-option {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .75rem;
  text-align: left;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cert-design-option:hover:not(:disabled),
.cert-design-option:focus-visible {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
  outline: none;
}
.cert-design-option:disabled {
  opacity: .65;
  cursor: wait;
}
.cert-design-meta .fw-semibold {
  color: var(--heading, #0F172A);
}
.cert-award-preview {
  margin-top: .65rem;
}
.cert-social-modal {
  max-width: min(640px, 96vw);
}
.cert-social-modal .modal-body {
  max-height: min(78dvh, 900px);
  overflow: auto;
}
.cert-social-preview {
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 1200px) {  /* was 1100 — Axis B, lg */
  .cert-studio { grid-template-columns: 1fr; min-height: 0; }
  .cert-studio-rail,
  .cert-studio-inspector {
    max-height: none;
    border-right: 0;
    border-left: 0;
  }
  .cert-studio-rail { border-bottom: 1px solid var(--surface-border, #dfe7e3); }
  .cert-studio-inspector { border-top: 1px solid var(--surface-border, #dfe7e3); }
  .cert-canvas-scroll { max-height: none; min-height: 22rem; }
  .cert-palette-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* Organization vendor directory */
.vd-filter-bar {
  padding: 1rem 1.15rem .85rem;
}
.vd-filter-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2.2fr) repeat(3, minmax(8.5rem, 1fr));
  gap: .65rem .85rem;
  align-items: end;
}
.vd-filter-field label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  color: var(--muted-strong, #5b6b7c);
  margin-bottom: .25rem;
}
.vd-search-wrap {
  position: relative;
}
.vd-search-wrap .form-control {
  padding-left: 2.35rem;
}
.vd-search-wrap .vd-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-strong, #5b6b7c);
  pointer-events: none;
}
.vd-filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
  flex-wrap: wrap;
}
.vd-filter-count {
  font-size: .85rem;
}
.vd-filter-clear {
  padding: 0;
  text-decoration: none;
  font-weight: 650;
}
.vd-filter-clear:disabled {
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 900px) {
  .vd-filter-row {
    grid-template-columns: 1fr 1fr;
  }
  .vd-filter-search {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .vd-filter-row {
    grid-template-columns: 1fr;
  }
}

.org-vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.15rem;
}
.org-vendor-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.35rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.org-vendor-card:hover {
  border-color: var(--accent, #2867D7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}
.org-vendor-card-top {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.org-vendor-logo,
.org-vendor-logo-placeholder {
  width: 3.6rem;
  height: 3.6rem;
  padding: .4rem;
  box-sizing: border-box;
  border-radius: 1rem;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2540 10%, transparent);
  box-shadow: var(--shadow-sm);
}
.org-vendor-logo-placeholder {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  color: #4a5d57;
}
.org-vendor-logo--table {
  width: 2.65rem;
  height: 2.65rem;
  padding: .28rem;
  border-radius: var(--radius-sm, .5rem);
}
.org-vendor-tier {
  display: inline-block;
  margin-right: .45rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #2867D7) 12%, transparent);
  color: var(--accent, #2867D7);
}
.org-vendor-blurb {
  font-size: .92rem;
  color: var(--text, #21352f);
  flex: 1 1 auto;
}
.org-vendor-blurb p { margin: 0; }
.org-vendor-card-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.org-vendor-modal {
  width: min(100% - 2rem, 40rem);
}
.org-vendor-about p:last-child { margin-bottom: 0; }

.org-vendor-profile {
  padding: 1.35rem 1.4rem 1.5rem;
}
.org-vendor-profile-hero {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.org-vendor-profile-logo {
  width: 6.75rem;
  height: 6.75rem;
  padding: .7rem;
  box-sizing: border-box;
  border-radius: 1.15rem;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2540 10%, transparent);
  box-shadow: var(--shadow-sm), 0 10px 22px rgba(11, 37, 64, .08);
}
.org-vendor-profile-logo.org-vendor-logo-placeholder {
  font-size: 1.35rem;
}
.org-vendor-profile-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .95rem 1.5rem;
  margin: 1.35rem 0 0;
}
.org-vendor-profile-dl dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #5b6b66);
}
.org-vendor-profile-dl dd {
  margin: .2rem 0 0;
  color: var(--text, #21352f);
  word-break: break-word;
}
.org-vendor-profile-about {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-border, #dfe7e3);
}
.org-vendor-profile-about .h6 {
  color: var(--heading, var(--text));
}

/* Conference agenda builder */
.agenda-builder {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
}
.agenda-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}
.agenda-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.agenda-session {
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .85rem;
  background: var(--surface-nested, #fbfcfe);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.agenda-session.is-open {
  border-color: color-mix(in srgb, var(--accent, #1f6b57) 45%, var(--card-border, #e3e9f1));
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, #1f6b57) 12%, transparent);
}
.agenda-session-summary {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(7.5rem, 9.5rem) minmax(0, 1fr) auto;
  gap: .75rem 1rem;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  padding: .85rem 1rem;
  color: inherit;
  cursor: pointer;
}
.agenda-session-summary:hover {
  background: color-mix(in srgb, var(--accent, #1f6b57) 4%, transparent);
}
.agenda-session-index {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--badge-soft-fg, #1f6b57);
  background: var(--badge-soft-bg, #e4efe9);
  border: 1px solid var(--accent-soft-border, #cfe5dc);
}
.agenda-session.is-open .agenda-session-index {
  color: var(--accent-contrast, #fff);
  background: var(--accent, #1f6b57);
  border-color: var(--accent, #1f6b57);
}
.agenda-session-time,
.agenda-session-copy {
  min-width: 0;
  display: grid;
  gap: .1rem;
}
.agenda-session-time strong,
.agenda-session-copy strong {
  display: block;
  font-size: .92rem;
  color: var(--card-text, #183451);
  overflow-wrap: anywhere;
}
.agenda-session-time span,
.agenda-session-copy span {
  display: block;
  font-size: .78rem;
  color: var(--muted, #74869b);
  overflow-wrap: anywhere;
}
.agenda-session-toggle {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .4rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted-strong, #5f726c);
  background: var(--control-bg, #fff);
  border: 1px solid var(--input-border, #d5deea);
}
.agenda-session-editor {
  display: grid;
  gap: .9rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.agenda-session-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding-top: .9rem;
}
.agenda-field {
  display: grid;
  gap: .3rem;
  min-width: 0;
}
.agenda-field > span {
  font-size: .78rem;
  font-weight: 650;
  color: var(--label, #3b526d);
}
.agenda-field-full { grid-column: 1 / -1; }
.agenda-advanced {
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .7rem;
  background: var(--surface-alt, #f7faf8);
  overflow: hidden;
}
.agenda-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 0;
  background: transparent;
  padding: .7rem .85rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--card-text, #304760);
  cursor: pointer;
}
.agenda-advanced-body {
  display: grid;
  gap: .75rem;
  padding: 0 .85rem .85rem;
}
.agenda-session-footer {
  display: flex;
  justify-content: flex-end;
}
.agenda-builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .25rem;
  border-top: 1px solid var(--table-row-border, #edf1f6);
}
.modal-dialog.checkins-modal {
  width: min(100% - 2rem, 42rem);
  max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 46rem);
}
@media (max-width: 900px) {  /* was 720 — Axis B */
  .agenda-session-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "index copy toggle"
      "index time toggle";
  }
  .agenda-session-index { grid-area: index; align-self: start; margin-top: .15rem; }
  .agenda-session-copy { grid-area: copy; }
  .agenda-session-time { grid-area: time; }
  .agenda-session-toggle { grid-area: toggle; align-self: start; }
  .agenda-session-fields { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .agenda-session {
  background: var(--surface-alt);
}
:root[data-theme="dark"] .agenda-session.is-open,
:root[data-theme="dark"] .agenda-session-toggle {
  background: var(--surface);
}
:root[data-theme="dark"] .agenda-advanced {
  background: var(--surface-nested);
}

/* Conference planning hub */
.planning-hub {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
}
.planning-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}
.planning-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.planning-subnav-item {
  border: 1px solid transparent;
  background: var(--surface-2, var(--surface-nested, #eef1f5));
  color: var(--muted-strong, #3f5063);
  border-radius: 999px;
  padding: .4rem .85rem;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.planning-subnav-item:hover {
  color: var(--text, #172033);
  background: var(--accent-soft, rgba(37, 99, 235, .12));
}
.planning-subnav-item.is-active {
  color: var(--text, #172033);
  background: var(--accent-soft, rgba(37, 99, 235, .12));
  box-shadow: inset 0 0 0 1px var(--accent, #2563eb);
}
.planning-subnav-item:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.planning-next {
  display: grid;
  gap: .35rem;
  justify-items: start;
  padding: 1rem 1.1rem;
  border-radius: .85rem;
  border: 1px solid var(--accent-soft-border, #cfe0fb);
  background: var(--accent-soft, #e8f0fe);
  color: var(--card-text, #172033);
}
.planning-next.is-ready {
  border-color: var(--card-border, #e4e8ee);
  background: var(--surface-alt, #f7f8fb);
}
.planning-next-kicker,
.planning-card-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #5a6b7e);
}
.planning-next strong,
.planning-card strong {
  color: var(--heading, #0c1220);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.planning-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: .85rem;
}
.planning-card {
  display: grid;
  gap: .35rem;
  align-content: start;
  text-align: left;
  width: 100%;
  min-height: 9.5rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--card-border, #e4e8ee);
  border-radius: .85rem;
  background: var(--surface-alt, #f7f8fb);
  color: var(--card-text, #172033);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur-fast, 160ms) var(--ease-out, ease), box-shadow var(--dur-fast, 160ms) var(--ease-out, ease), transform var(--dur-fast, 160ms) var(--ease-out, ease);
}
.planning-card-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: .5rem;
  display: grid;
  place-items: center;
  color: var(--badge-soft-fg, #1d4ed8);
  background: var(--badge-soft-bg, #e0edff);
  margin-bottom: .15rem;
}
.planning-card-line {
  font-size: .82rem;
  color: var(--muted, #5a6b7e);
  overflow-wrap: anywhere;
}
.planning-status {
  justify-self: start;
  margin-top: .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 999px;
}
.planning-status.is-ready {
  color: var(--badge-soft-fg, #1d4ed8);
  background: var(--badge-soft-bg, #e0edff);
}
.planning-status.is-todo {
  color: var(--badge-warn-fg, #956013);
  background: var(--badge-warn-bg, #fff4dc);
}
.planning-status.is-optional {
  color: var(--muted-strong, #3f5063);
  background: var(--surface-nested, #eef1f5);
}
@media (hover: hover) and (pointer: fine) {
  .planning-card:hover {
    border-color: var(--accent-soft-border, #b7c9e0);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}
.planning-card:active {
  transform: scale(0.99);
}
.planning-card:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.planning-section {
  display: grid;
  gap: .9rem;
}
.planning-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}
.planning-section-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--heading, #0c1220);
}
.planning-subsection {
  padding-top: .35rem;
  border-top: 1px solid var(--table-row-border, #eef1f5);
}
.planning-pricing-subnav-wrap {
  padding: .5rem .65rem;
  border-radius: .75rem;
  border: 1px solid var(--card-border, #e4e8ee);
  background: var(--surface-alt, #f7f8fb);
}
.planning-pricing-subnav {
  gap: .35rem;
}
.planning-fee-tier {
  padding: 0;
  overflow: hidden;
}
.planning-fee-tier-head {
  display: grid;
  gap: .2rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 1rem;
  cursor: pointer;
  font: inherit;
}
.planning-fee-tier-head:hover {
  background: var(--accent-soft, rgba(37, 99, 235, .08));
}
.planning-fee-tier-title {
  color: var(--heading, #0c1220);
  font-weight: 700;
}
.planning-fee-tier-meta {
  font-size: .88rem;
}
.planning-fee-tier-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--table-row-border, #eef1f5);
}
.planning-fee-tier-advanced summary {
  cursor: pointer;
  color: var(--muted-strong, #3f5063);
  font-weight: 600;
}
.planning-nested {
  padding: 1rem;
  border: 1px solid var(--card-border, #e4e8ee);
  border-radius: .75rem;
  background: var(--surface-alt, #f7f8fb);
  color: var(--card-text, #172033);
}
.planning-hub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .35rem;
  border-top: 1px solid var(--table-row-border, #eef1f5);
}
@media (max-width: 640px) {
  .planning-overview-grid { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .planning-next {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
}
:root[data-theme="dark"] .planning-next.is-ready,
:root[data-theme="dark"] .planning-card,
:root[data-theme="dark"] .planning-nested {
  background: var(--surface-alt);
}
:root[data-theme="dark"] .planning-card-icon {
  background: var(--badge-soft-bg);
  color: var(--badge-soft-fg);
}

/* �� Public website (org brochure site) �� */
.pws {
  --pws-accent: #0A3A5C;
  --pws-ink: #14212b;
  --pws-heading: #14212b;
  --pws-muted: #5b6b78;
  --pws-bg: #f7f5f1;
  --pws-surface: #ffffff;
  --pws-hero-ink: #fff;
  --pws-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --pws-body-font: "Manrope", "Segoe UI", system-ui, sans-serif;
  /* Inherit shell motion so every template CTA / drawer feels the same. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-fast: 160ms;
  --press-scale: 0.97;
  color: var(--pws-ink);
  background: var(--pws-bg);
  min-height: 100dvh;
  font-family: var(--pws-body-font);
  /* Site breakpoints below key off this container, not the window, so the builder's
     device toggle reproduces the real phone/tablet layout instead of a squeezed desktop. */
  container: pws / inline-size;
  /* Without this, padded full-width bands (hero overlay, section grid) overflow the frame. */
  box-sizing: border-box;
  /* Clip runaway blocks (tables, wide embeds) without breaking sticky header. */
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
.pws *, .pws *::before, .pws *::after { box-sizing: border-box; }
/* Sized chrome images use .pws img.* so they beat this height:auto. */
.pws img, .pws video { max-width: 100%; height: auto; }
.pws-font--serif {
  --pws-display: "Cormorant Garamond", Georgia, serif;
  --pws-body-font: "Cormorant Garamond", Georgia, serif;
}
.pws-font--display {
  --pws-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --pws-body-font: "Manrope", "Segoe UI", system-ui, sans-serif;
}
.pws[data-pws-scheme="dark"] {
  --pws-ink: #f4f6fa;
  --pws-heading: #f8fafc;
  --pws-muted: #a8b4c4;
  --pws-bg: #09090f;
  --pws-surface: #14161f;
}
.pws-template--aurora[data-pws-scheme="dark"],
.pws-template--nocturne[data-pws-scheme="dark"] {
  --pws-bg: #0c0a10;
  --pws-surface: #17141c;
  --pws-muted: #b7b0a4;
  --pws-ink: #f3efe7;
  --pws-heading: #f7f3ea;
}
@media (prefers-color-scheme: dark) {
  .pws[data-pws-scheme="auto"] {
    --pws-ink: #f4f6fa;
    --pws-heading: #f8fafc;
    --pws-muted: #a8b4c4;
    --pws-bg: #09090f;
    --pws-surface: #14161f;
  }
  .pws-template--aurora[data-pws-scheme="auto"],
  .pws-template--nocturne[data-pws-scheme="auto"] {
    --pws-bg: #0c0a10;
    --pws-surface: #17141c;
    --pws-muted: #b7b0a4;
    --pws-ink: #f3efe7;
    --pws-heading: #f7f3ea;
  }
}
.pws--preview, .pws--studio { min-height: 0; }
.pws h1, .pws h2, .pws h3 { color: var(--pws-heading); font-family: var(--pws-display); }
.pws-top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pws-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
}
.pws-top-inner {
  --pws-top-pad-x: 1.25rem;
  max-width: 1100px; margin: 0 auto; padding: .75rem var(--pws-top-pad-x);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-width: 0;
}
.pws--editable .pws-top-inner,
.pws--editable .pws-footer-inner {
  max-width: none;
}
.pws-brand {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; font-weight: 650;
  min-width: 0; flex: 1 1 auto; max-width: 100%;
}
.pws-brand-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pws img.pws-logo { height: 36px; width: auto; max-height: 36px; object-fit: contain; flex-shrink: 0; }
.pws-nav {
  display: flex; gap: 1rem; flex: 1 1 auto; justify-content: center;
  flex-wrap: nowrap; align-items: center; min-width: 0;
}
.pws-nav > a,
.pws-nav-group { flex-shrink: 0; }
.pws-nav a { color: var(--pws-muted); text-decoration: none; font-size: .92rem; }
.pws-nav > a,
.pws-nav-group-toggle,
.pws-nav-group-link { white-space: nowrap; }
.pws-nav a:hover, .pws-nav a.active { color: var(--pws-accent); font-weight: 650; }
.pws-nav--builder > a,
.pws-nav--builder .pws-nav-group-toggle,
.pws-nav--builder .pws-nav-group-link,
.pws-nav--builder .pws-nav-dropdown a {
  cursor: pointer;
  outline-offset: 2px;
}
.pws-nav--builder > a:focus-visible,
.pws-nav--builder .pws-nav-group-toggle:focus-visible,
.pws-nav--builder .pws-nav-group-link:focus-visible,
.pws-nav--builder .pws-nav-dropdown a:focus-visible {
  outline: 2px solid var(--pws-accent);
}
.pws-nav-group {
  position: relative; display: inline-flex; align-items: center; gap: .15rem;
  /* Keep hover/focus-within alive while the pointer crosses into the dropdown. */
  padding-bottom: .35rem; margin-bottom: -.35rem;
}
.pws-nav-group-toggle, .pws-nav-group-link, .pws-nav-group-chevron {
  color: var(--pws-muted); font: inherit; font-size: .92rem; background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: none;
}
.pws-nav-group-toggle:hover, .pws-nav-group-link:hover,
.pws-nav-group.active > .pws-nav-group-toggle, .pws-nav-group.active > .pws-nav-group-link,
.pws-nav-group-link.active { color: var(--pws-accent); font-weight: 650; }
.pws-nav-group-chevron {
  width: 1.1rem; height: 1.1rem; display: inline-grid; place-items: center;
  border-radius: .25rem;
}
.pws-nav-group-chevron::after {
  content: ""; width: .35rem; height: .35rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pws-nav-dropdown {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) scale(1);
  transform-origin: top center;
  min-width: 12rem; padding: .75rem .4rem .4rem; z-index: 30;
  background: var(--pws-surface); border: 1px solid color-mix(in srgb, var(--pws-ink) 12%, transparent);
  border-radius: .75rem; box-shadow: 0 12px 28px color-mix(in srgb, var(--pws-ink) 18%, transparent);
  flex-direction: column; gap: .1rem;
  opacity: 1;
  transition:
    opacity 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-nav-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: .35rem;
}
.pws-nav-dropdown a {
  display: block; padding: .55rem .7rem; border-radius: .5rem; white-space: nowrap;
  transition: background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .pws-nav-dropdown a:hover { background: color-mix(in srgb, var(--pws-accent) 10%, transparent); }
}
.pws-nav-group:hover > .pws-nav-dropdown,
.pws-nav-group:focus-within > .pws-nav-dropdown {
  display: flex;
}
.pws-top-actions { margin-left: auto; flex: none; }
/* Hidden until the container query below reveals it, so desktop keeps the inline nav. */
.pws-nav-toggle {
  display: none; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--pws-ink) 18%, transparent);
  border-radius: var(--pws-btn-radius, .5rem);
  background: var(--pws-surface); color: var(--pws-ink);
}
.pws-nav-toggle-bars, .pws-nav-toggle-bars::before, .pws-nav-toggle-bars::after {
  display: block; width: 1.1rem; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-nav-toggle-bars { position: relative; }
.pws-nav-toggle-bars::before, .pws-nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.pws-nav-toggle-bars::before { top: -6px; }
.pws-nav-toggle-bars::after { top: 6px; }
.pws-nav-toggle[aria-expanded="true"] .pws-nav-toggle-bars { background: transparent; }
.pws-nav-toggle[aria-expanded="true"] .pws-nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.pws-nav-toggle[aria-expanded="true"] .pws-nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
.pws-login {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .9rem; border-radius: var(--pws-btn-radius, .45rem);
  background: var(--pws-accent); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .9rem;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
/* Below this width the inline nav can't hold a real page list, so it becomes a drawer.
   Sites can have a dozen-plus pages, so the panel scrolls rather than pushing the page down.
   .pws-top--compact-nav uses the same drawer when the page list is too long for a single row.
   Keep these two blocks in sync — shared custom properties aren't available across @container. */
@container pws (max-width: 960px) {
  .pws-nav-toggle { display: inline-flex; }
  .pws-nav {
    display: none; order: 9; flex: 1 1 100%;
    /* nowrap: base .pws-nav uses wrap; with column + max-height that spills a clipped 2nd column */
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0;
    box-sizing: border-box;
    width: calc(100% + 2 * var(--pws-top-pad-x, 1.25rem)); max-width: none;
    max-height: min(70dvh, 32rem); overflow-x: hidden; overflow-y: auto;
    margin: .35rem calc(-1 * var(--pws-top-pad-x, 1.25rem)) -.6rem;
    padding: .35rem var(--pws-top-pad-x, 1.25rem) .6rem;
    border-top: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
  }
  .pws-nav--open { display: flex; }
  .pws-nav > a, .pws-nav-group-toggle, .pws-nav-group-link {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    padding: .7rem .25rem; font-size: 1rem; text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
  }
  .pws-nav > a:last-child, .pws-nav > .pws-nav-group:last-child { border-bottom: 0; }
  .pws-nav-group {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0;
    padding-bottom: 0; margin-bottom: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
  }
  .pws-nav-group .pws-nav-group-toggle, .pws-nav-group .pws-nav-group-link { border-bottom: 0; }
  .pws-nav-group-chevron { display: none; }
  .pws-nav-dropdown {
    display: flex; position: static; transform: none; left: auto; top: auto; inset: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .35rem .85rem;
    background: transparent; min-width: 0; width: 100%;
  }
  .pws-nav-dropdown a {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    border-bottom: 0; padding: .45rem .25rem; font-size: .95rem; white-space: normal;
  }
  .pws-top-inner { --pws-top-pad-x: 1.25rem; padding: .6rem var(--pws-top-pad-x); gap: .6rem; }
  .pws img.pws-logo { height: 30px; max-height: 30px; }
}
.pws-top--compact-nav .pws-nav-toggle { display: inline-flex; }
.pws-top--compact-nav .pws-nav {
  display: none; order: 9; flex: 1 1 100%;
  /* nowrap: base .pws-nav uses wrap; with column + max-height that spills a clipped 2nd column */
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--pws-top-pad-x, 1.25rem)); max-width: none;
  max-height: min(70dvh, 32rem); overflow-x: hidden; overflow-y: auto;
  margin: .35rem calc(-1 * var(--pws-top-pad-x, 1.25rem)) -.6rem;
  padding: .35rem var(--pws-top-pad-x, 1.25rem) .6rem;
  border-top: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
}
.pws-top--compact-nav .pws-nav--open { display: flex; }
.pws-top--compact-nav .pws-nav > a,
.pws-top--compact-nav .pws-nav-group-toggle,
.pws-top--compact-nav .pws-nav-group-link {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  padding: .7rem .25rem; font-size: 1rem; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
}
.pws-top--compact-nav .pws-nav > a:last-child,
.pws-top--compact-nav .pws-nav > .pws-nav-group:last-child { border-bottom: 0; }
.pws-top--compact-nav .pws-nav-group {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0;
  padding-bottom: 0; margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
}
.pws-top--compact-nav .pws-nav-group .pws-nav-group-toggle,
.pws-top--compact-nav .pws-nav-group .pws-nav-group-link { border-bottom: 0; }
.pws-top--compact-nav .pws-nav-group-chevron { display: none; }
.pws-top--compact-nav .pws-nav-dropdown {
  display: flex; position: static; transform: none; left: auto; top: auto; inset: auto;
  box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .35rem .85rem;
  background: transparent; min-width: 0; width: 100%;
}
.pws-top--compact-nav .pws-nav-dropdown a {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  border-bottom: 0; padding: .45rem .25rem; font-size: .95rem; white-space: normal;
}
/* Touch tablets without hover still need a real menu — same drawer as compact/narrow. */
@media (hover: none) and (pointer: coarse) {
  .pws-nav-toggle { display: inline-flex; }
  .pws-nav {
    display: none; order: 9; flex: 1 1 100%;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0;
    box-sizing: border-box;
    width: calc(100% + 2 * var(--pws-top-pad-x, 1.25rem)); max-width: none;
    max-height: min(70dvh, 32rem); overflow-x: hidden; overflow-y: auto;
    margin: .35rem calc(-1 * var(--pws-top-pad-x, 1.25rem)) -.6rem;
    padding: .35rem var(--pws-top-pad-x, 1.25rem) .6rem;
    border-top: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
  }
  .pws-nav--open { display: flex; }
  .pws-nav > a, .pws-nav-group-toggle, .pws-nav-group-link {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    padding: .7rem .25rem; font-size: 1rem; text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
  }
  .pws-nav > a:last-child, .pws-nav > .pws-nav-group:last-child { border-bottom: 0; }
  .pws-nav-group {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0;
    padding-bottom: 0; margin-bottom: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 7%, transparent);
  }
  .pws-nav-group .pws-nav-group-toggle, .pws-nav-group .pws-nav-group-link { border-bottom: 0; }
  .pws-nav-group-chevron { display: none; }
  .pws-nav-dropdown {
    display: flex; position: static; transform: none; left: auto; top: auto; inset: auto;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .35rem .85rem;
    background: transparent; min-width: 0; width: 100%;
  }
  .pws-nav-dropdown a {
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
    border-bottom: 0; padding: .45rem .25rem; font-size: .95rem; white-space: normal;
  }
}
/* The builder canvas is not scrollable the way a page is, so keep the drawer inline there. */
.pws--editable .pws-nav { max-height: none; overflow: visible; }
.pws-hero { position: relative; color: var(--pws-hero-ink); }
.pws-hero--bleed {
  /* Default matches Extra large; section Height (pws-h-*) overrides below. */
  min-height: min(78dvh, 640px);
  background:
    linear-gradient(180deg, rgba(8,10,16,.18), rgba(8,10,16,.72)),
    var(--pws-hero-image, linear-gradient(135deg, #1a2c3a, var(--pws-accent)));
  background-size: cover; background-position: center;
  display: grid; align-items: end;
}
.pws-hero--bleed .pws-hero-overlay {
  max-width: min(1100px, 100%); width: 100%; min-width: 0; margin: 0 auto; padding: 4rem 1.5rem 3.25rem;
}
/* Section Height dropdown drives cinematic / padded heroes (was ignored before). */
.pws-h-auto .pws-hero--bleed { min-height: 0; }
.pws-h-sm .pws-hero--bleed { min-height: min(28dvh, 240px); }
.pws-h-md .pws-hero--bleed { min-height: min(42dvh, 360px); }
.pws-h-lg .pws-hero--bleed { min-height: min(58dvh, 480px); }
.pws-h-xl .pws-hero--bleed { min-height: min(78dvh, 640px); }
.pws-h-auto .pws-hero--bleed .pws-hero-overlay,
.pws-h-sm .pws-hero--bleed .pws-hero-overlay { padding: 1.75rem 1.5rem 1.5rem; }
.pws-h-md .pws-hero--bleed .pws-hero-overlay { padding: 2.5rem 1.5rem 2rem; }
.pws-h-lg .pws-hero--bleed .pws-hero-overlay { padding: 3.25rem 1.5rem 2.75rem; }
.pws-h-auto .pws-hero--bold,
.pws-h-sm .pws-hero--bold { padding: 2rem 1.25rem 0; gap: 1rem; }
.pws-h-md .pws-hero--bold { padding: 3rem 1.25rem 0; gap: 1.25rem; }
.pws-h-lg .pws-hero--bold { padding: 3.75rem 1.25rem 0; gap: 1.5rem; }
.pws-h-auto .pws-hero--minimal,
.pws-h-sm .pws-hero--minimal { padding: 2rem 1.5rem 1.5rem; }
.pws-h-md .pws-hero--minimal { padding: 3rem 1.5rem 2rem; }
.pws-h-lg .pws-hero--minimal { padding: 4rem 1.5rem 2.5rem; }
.pws-h-auto .pws-hero--classic,
.pws-h-sm .pws-hero--classic,
.pws-h-auto .pws-hero--editorial,
.pws-h-sm .pws-hero--editorial { padding: 1.5rem 1.25rem; }
.pws-h-md .pws-hero--classic,
.pws-h-md .pws-hero--editorial { padding: 2.25rem 1.25rem; }
.pws-h-auto .pws-hero--split .pws-hero-overlay,
.pws-h-sm .pws-hero--split .pws-hero-overlay { padding: 1.75rem 1.5rem; }
.pws-h-md .pws-hero--split .pws-hero-overlay { padding: 2.5rem 1.75rem; }
.pws-h-auto .pws-hero-media,
.pws-h-sm .pws-hero-media { min-height: 160px; }
.pws-h-md .pws-hero-media { min-height: 220px; }
.pws-hero--bleed h1, .pws-hero--bleed h1 .pws-edit, .pws-hero--bleed .pws-lead, .pws-hero--bleed .pws-lead .pws-edit,
.pws-hero--bold h1, .pws-hero--bold h1 .pws-edit, .pws-hero--bold .pws-lead, .pws-hero--bold .pws-lead .pws-edit {
  color: var(--pws-hero-ink) !important;
}
.pws-hero--classic, .pws-hero--editorial {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: stretch;
  max-width: 1100px; margin: 0 auto; padding: 3rem 1.25rem; color: var(--pws-ink);
  background: transparent;
}
.pws-hero--classic > *, .pws-hero--editorial > *, .pws-hero--split > * { min-width: 0; }
.pws-hero--classic .pws-hero-overlay, .pws-hero--editorial .pws-hero-overlay { padding: 1rem 0; }
.pws-hero--classic h1, .pws-hero--editorial h1 { color: var(--pws-heading) !important; }
.pws-hero-media {
  min-height: 280px; border-radius: 1.25rem;
  background: var(--pws-hero-image, color-mix(in srgb, var(--pws-accent) 22%, var(--pws-surface))) center/cover no-repeat;
}
.pws-hero--editorial { grid-template-columns: 1fr; }
.pws-hero--editorial .pws-hero-media { min-height: 320px; }
.pws-hero--bold {
  background: var(--pws-accent); color: var(--pws-hero-ink);
  padding: 4.5rem 1.25rem 0; text-align: center; display: grid; gap: 2rem;
}
.pws-hero--bold .pws-hero-overlay { max-width: 46rem; margin: 0 auto; }
.pws-hero--bold .pws-lead,
.pws-hero--bold .pws-text-resize--lead { margin-left: auto; margin-right: auto; }
.pws-hero--bold .pws-hero-media { min-height: 220px; border-radius: 1.25rem 1.25rem 0 0; max-width: 1100px; margin: 0 auto; width: 100%; }
.pws-hero h1, .pws-display {
  font-size: calc(clamp(2.2rem, 6cqi, 4.2rem) * var(--pws-type-scale, 1));
  line-height: 1.05; margin: 0 0 .75rem; letter-spacing: -.03em; font-family: var(--pws-display);
}
.pws h2 { font-size: calc(1.75rem * var(--pws-type-scale, 1)); }
.pws h3 { font-size: calc(1.15rem * var(--pws-type-scale, 1)); }
.pws-lead { font-size: calc(1.15rem * var(--pws-type-scale, 1)); max-width: var(--pws-text-width, 36rem); opacity: .94; margin: 0 0 1.25rem; }
.pws-lead--wide { max-width: var(--pws-text-width, 42rem); color: var(--pws-muted); opacity: 1; }
.pws-hero-overlay { position: relative; }
.pws-hero-actions {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-top: .15rem;
}
.pws-hero-actions--editable {
  cursor: grab; touch-action: none;
}
.pws-hero-actions--editable:active { cursor: grabbing; }
.pws-hero-actions--free {
  position: absolute;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 1rem);
}
body.pws-cta-dragging { cursor: grabbing; user-select: none; }
body.pws-cta-dragging .pws-block { pointer-events: none; }
body.pws-cta-dragging .pws-hero-actions--editable { pointer-events: auto; }
.pws-cta.pws-cta--ghost, .pws-hero-actions .pws-cta--ghost {
  background: transparent; border-color: currentColor; color: inherit !important;
}
.pws-hero--bleed .pws-cta.pws-cta--ghost,
.pws-hero--classic .pws-cta.pws-cta--ghost,
.pws-hero--editorial .pws-cta.pws-cta--ghost,
.pws-hero--bold .pws-cta.pws-cta--ghost,
.pws-hero--split .pws-cta.pws-cta--ghost {
  color: #fff !important; border-color: rgba(255, 255, 255, .75);
}
.pws-hero--minimal .pws-cta.pws-cta--ghost {
  color: var(--pws-accent) !important; border-color: var(--pws-accent);
}
.pws-cta, .pws-cta--light {
  display: inline-flex; align-items: center; padding: .75rem 1.2rem; border-radius: var(--pws-btn-radius, 999px);
  background: #fff; color: var(--pws-accent) !important; font-weight: 650; text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-cta:active, .pws-cta--light:active, .pws-login:active {
  transform: scale(var(--press-scale, 0.97));
}
.pws-btn--outline .pws-cta, .pws-btn--outline .pws-login {
  background: transparent; border-color: currentColor; color: var(--pws-accent) !important;
}
.pws-btn--soft .pws-cta, .pws-btn--soft .pws-login {
  background: color-mix(in srgb, var(--pws-accent) 16%, transparent); color: var(--pws-accent) !important;
}
.pws-login {
  border-radius: var(--pws-btn-radius, .45rem);
}

/* Hero variants */
.pws-hero--split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0;
  background: var(--pws-accent); color: var(--pws-hero-ink);
}
.pws-hero--split .pws-hero-overlay { padding: 3.5rem 2rem; align-self: center; }
.pws-hero--split h1, .pws-hero--split .pws-lead, .pws-hero--split .pws-kicker { color: var(--pws-hero-ink) !important; }
.pws-hero--split .pws-hero-media { min-height: 340px; border-radius: 0; }
.pws-hero--minimal {
  max-width: 60rem; margin: 0 auto; padding: 5rem 1.5rem 3rem; text-align: center; color: var(--pws-ink);
}
.pws-hero--minimal h1 { color: var(--pws-heading) !important; }
.pws-hero--minimal .pws-lead { margin-left: auto; margin-right: auto; }
@container pws (max-width: 760px) {
  .pws-hero--split { grid-template-columns: 1fr; }
  .pws-hero--split .pws-hero-overlay { padding: 2.5rem 1.25rem; }
  .pws-hero--split .pws-hero-media { min-height: 220px; }
}

/* Block variants — layout only, driven by a class on the block wrapper */
.pws-var--features-list .pws-feature-grid { grid-template-columns: 1fr; gap: 0; }
.pws-var--features-list .pws-feature-card {
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 12%, transparent);
  border-radius: 0; background: transparent; padding: calc(1.15rem * var(--pws-density, 1)) .35rem;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
}
.pws-var--features-list .pws-feature-card h3 { grid-column: 2; margin: 0; }
.pws-var--features-list .pws-feature-card p,
.pws-var--features-list .pws-feature-card .pws-feature-body { grid-column: 2; margin: .25rem 0 0; }
.pws-feature-body { color: inherit; line-height: 1.55; }
.pws-feature-body p { margin: 0 0 .5rem; }
.pws-feature-body p:last-child { margin-bottom: 0; }
.pws-var--features-list .pws-feature-icon { grid-row: span 2; margin: 0; }
.pws-var--features-numbered .pws-feature-icon { font-size: 2.4rem; line-height: 1; opacity: .35; }
.pws-var--features-grid-2 .pws-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pws-var--stats-band .pws-stats {
  background: var(--pws-accent); border-radius: 1.25rem; padding: 2rem 1.5rem; color: #fff;
}
.pws-var--stats-band .pws-stat strong, .pws-var--stats-band .pws-stat span, .pws-var--stats-band h2 { color: #fff !important; }
.pws-var--stats-stacked .pws-stat-grid { grid-template-columns: 1fr; text-align: left; }
.pws-var--testimonials-single .pws-quote-grid { grid-template-columns: 1fr; }
.pws-var--testimonials-single .pws-story-card { text-align: center; padding: 2rem; }
.pws-var--testimonials-single .pws-story-card p { font-size: 1.5rem; }
.pws-var--testimonials-single .pws-story-card footer { justify-items: center; }
.pws-var--testimonials-stacked .pws-quote-grid { grid-template-columns: 1fr; }
.pws-var--testimonials-stacked .pws-story-card {
  border: 0; border-left: 3px solid var(--pws-accent); border-radius: 0; background: transparent;
  padding: calc(1rem * var(--pws-density, 1)) calc(1.25rem * var(--pws-density, 1));
}
.pws-var--gallery-masonry .pws-gallery { display: block; columns: 3 200px; column-gap: 1rem; }
.pws-var--gallery-masonry .pws-gallery-item { break-inside: avoid; margin-bottom: 1rem; }
.pws-var--gallery-masonry .pws-gallery-item:nth-child(3n+2) .pws-image-frame { min-height: 260px; }
.pws-var--gallery-strip .pws-gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.pws-var--gallery-strip .pws-gallery-item { flex: 0 0 clamp(200px, 32%, 320px); scroll-snap-align: start; }
.pws-var--faq-two-column .pws-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pws-var--faq-open .pws-faq-item summary { list-style: none; cursor: default; }
.pws-var--events-list .pws-event-grid { grid-template-columns: 1fr; }
.pws-var--events-list .pws-event-card { padding: calc(1.15rem * var(--pws-density, 1)) calc(1.35rem * var(--pws-density, 1)); }
.pws-var--events-featured .pws-event-grid > :first-child { grid-column: 1 / -1; }
.pws-var--events-featured .pws-event-grid > :first-child h3 { font-size: 1.6rem; }
.pws-var--news-list .pws-news-grid { grid-template-columns: 1fr; gap: 0; }
.pws-var--news-list .pws-news-card {
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 12%, transparent);
  border-radius: 0; background: transparent; padding: calc(1.15rem * var(--pws-density, 1)) .35rem;
}
.pws-var--documents-cards .pws-doc-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pws-var--documents-cards .pws-doc-row { flex-direction: column; align-items: flex-start; }
.pws-var--sponsors-tiers .pws-sponsor-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pws-var--sponsors-tiers .pws-sponsor-card { padding: 1.5rem; }
.pws-var--cta-boxed .pws-cta-band { border-radius: 1.5rem; padding: 3rem 1.75rem; }
.pws-var--cta-split .pws-cta-band {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; text-align: left;
  padding: calc(2.5rem * var(--pws-density, 1)) calc(2rem * var(--pws-density, 1));
}
.pws-var--cta-split .pws-cta-band p { margin-bottom: 0; }
.pws-var--text-narrow .pws-prose { max-width: 34rem; }
.pws-var--text-lead .pws-prose { font-size: 1.2rem; max-width: 46rem; }
@container pws (max-width: 700px) {
  .pws-var--faq-two-column .pws-faq,
  .pws-var--features-grid-2 .pws-feature-grid,
  .pws-var--cta-split .pws-cta-band { grid-template-columns: 1fr; }
  .pws-var--cta-split .pws-cta-band { text-align: center; justify-items: center; }
  .pws-var--gallery-masonry .pws-gallery { columns: 2 140px; }
  .pws-var--testimonials-single .pws-story-card p { font-size: 1.2rem; }
}
.pws-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--pws-accent); margin: 0 0 .6rem; }
.pws-hero--bleed .pws-kicker, .pws-hero--bold .pws-kicker { color: color-mix(in srgb, #fff 80%, var(--pws-accent)); }
/* Beat .pws-section-inner's surface background (same specificity, later in the file). */
.pws-section-inner.pws-cta-band {
  background: var(--pws-accent); color: #fff; text-align: center;
  padding: calc(2.75rem * var(--pws-density, 1)) calc(1.75rem * var(--pws-density, 1));
}
.pws .pws-cta-band h2, .pws .pws-cta-band p { color: #fff; }
.pws-cta-band h2 { margin: 0 0 .65rem; }
.pws-cta-band p { margin: 0 0 1.35rem; }
.pws-cta-band .pws-cta { margin-top: .15rem; }
/* Per-section text color must win over the band's default white. */
.pws-sec--ink > .pws-cta-band,
.pws-sec--ink > .pws-cta-band :is(h2, p) { color: var(--pws-sec-ink) !important; }
.pws-prose { line-height: 1.7; max-width: var(--pws-text-width, 42rem); overflow-wrap: anywhere; }
.pws-prose p { margin: 0 0 1rem; }
.pws-text-resize {
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
.pws-text-resize--prose:not([data-width-percent]),
.pws-text-resize--prose[data-width-percent=""] { max-width: min(42rem, 100%); }
.pws-text-resize--lead:not([data-width-percent]),
.pws-text-resize--lead[data-width-percent=""] { max-width: min(36rem, 100%); }
.pws-hero--bold .pws-text-resize--lead,
.pws-hero--minimal .pws-text-resize--lead,
.pws-hero--bleed .pws-text-resize--lead { margin-left: auto; margin-right: auto; }
.pws-text-resize .pws-prose,
.pws-text-resize .pws-lead {
  max-width: none;
  width: 100%;
  margin-bottom: 0;
}
.pws-text-resize .pws-lead { margin: 0 0 1.25rem; }
.pws-text-resize.is-resizable {
  outline: 1px dashed color-mix(in srgb, var(--pws-accent, #0A3A5C) 55%, transparent);
  outline-offset: 2px;
}
.pws-text-handle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--pws-accent, #0A3A5C);
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  transform: translateY(-50%);
  touch-action: none;
  z-index: 4;
}
.pws-text-handle--e { right: -6px; cursor: ew-resize; }
.pws-text-handle--w { left: -6px; cursor: ew-resize; }
body.pws-text-resizing { cursor: ew-resize; user-select: none; }
body.pws-text-resizing .pws-block { pointer-events: none; }
body.pws-text-resizing .pws-text-handle { pointer-events: auto; }
.pws-prose table {
  display: block; width: 100%; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0 0 1rem;
}
.pws-prose th, .pws-prose td {
  padding: .4rem .55rem; border: 1px solid color-mix(in srgb, var(--pws-ink) 14%, transparent);
  word-break: break-word;
}
.pws-muted { color: var(--pws-muted); }
.pws-board-grid, .pws-feature-grid, .pws-quote-grid, .pws-gallery, .pws-stat-grid {
  display: grid; gap: 1rem; min-width: 0;
}
.pws-board-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.pws-feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 1.25rem; }
.pws-quote-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 1.25rem; }
.pws-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.pws-stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); text-align: center; }
.pws-board-card, .pws-feature-card, .pws-story-card {
  background: var(--pws-surface); border: 1px solid color-mix(in srgb, var(--pws-ink) 8%, transparent);
  border-radius: 1rem; padding: calc(1.25rem * var(--pws-density, 1)) calc(1.35rem * var(--pws-density, 1));
  min-width: 0; overflow-wrap: anywhere;
}
.pws img.pws-board-photo { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; }
.pws-feature-icon { display: inline-flex; font-weight: 700; color: var(--pws-accent); letter-spacing: .04em; margin-bottom: .4rem; }
.pws-stat strong { display: block; font-size: clamp(2rem, 4cqi, 3rem); font-family: var(--pws-display); line-height: 1; color: var(--pws-heading); }
.pws-stat span { color: var(--pws-muted); }
.pws-story-card p { font-size: 1.15rem; line-height: 1.5; }
.pws-story-card footer { display: grid; margin-top: 1rem; }
.pws-pullquote { text-align: center; }
.pws-pullquote blockquote { margin: 0 auto; max-width: 40rem; }
.pws-pullquote p { font-family: var(--pws-display); font-size: clamp(1.6rem, 3cqi, 2.4rem); line-height: 1.25; color: var(--pws-heading); }
.pws-faq { display: grid; gap: calc(.85rem * var(--pws-density, 1)); }
.pws-faq-item {
  border: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent); border-radius: .85rem;
  padding: calc(1.15rem * var(--pws-density, 1)) calc(1.35rem * var(--pws-density, 1));
  background: var(--pws-surface);
}
.pws-faq-item summary { cursor: pointer; font-weight: 650; color: var(--pws-heading); min-height: 1.5rem; }
.pws-faq-item .pws-prose { margin-top: .75rem; }
.pws-faq-item .pws-prose > :last-child { margin-bottom: 0; }
/* —— Dynamic content blocks —— */
.pws-feed-empty {
  border: 1px dashed color-mix(in srgb, var(--pws-ink) 22%, transparent); border-radius: 1rem;
  padding: 1.5rem; text-align: center; color: var(--pws-muted); margin-top: 1rem;
}
/* Calendar block */
.pws-calendar { margin-top: 1.25rem; }
.pws-cal-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.pws-cal-title { font-size: 1.1rem; min-width: 11rem; }
.pws-cal-nav, .pws-cal-today {
  border: 1px solid color-mix(in srgb, var(--pws-ink) 18%, transparent);
  background: var(--pws-surface); color: inherit; cursor: pointer;
  border-radius: var(--pws-btn-radius, .6rem); line-height: 1;
}
.pws-cal-nav { width: 2rem; height: 2rem; font-size: 1.2rem; }
.pws-cal-today { padding: .35rem .7rem; font-size: .82rem; }
.pws-cal-nav:hover, .pws-cal-today:hover { background: color-mix(in srgb, var(--pws-accent) 12%, var(--pws-surface)); }
.pws-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: color-mix(in srgb, var(--pws-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
  border-radius: .9rem; overflow: hidden;
}
.pws-cal-dow {
  background: color-mix(in srgb, var(--pws-ink) 5%, var(--pws-surface));
  padding: .45rem .3rem; text-align: center; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pws-muted);
}
.pws-cal-cell {
  background: var(--pws-surface); min-height: 5.2rem; padding: .3rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.pws-cal-cell--muted { opacity: .45; }
.pws-cal-cell--today { box-shadow: inset 0 0 0 2px var(--pws-accent); }
.pws-cal-daynum { font-size: .78rem; color: var(--pws-muted); }
.pws-cal-pip {
  font-size: .7rem; line-height: 1.3; padding: .15rem .4rem; border-radius: .35rem;
  background: color-mix(in srgb, var(--pws-accent, var(--accent)) 14%, var(--pws-surface, var(--surface)));
  color: var(--pws-accent, var(--accent-fill, var(--accent)));
  border: 1px solid color-mix(in srgb, var(--pws-accent, var(--accent)) 22%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.pws-cal-pip--source {
  background: color-mix(in srgb, var(--pip-color) 12%, var(--pws-surface, var(--surface)));
  color: var(--pws-ink, var(--card-text, var(--text)));
  border-color: color-mix(in srgb, var(--pip-color) 28%, var(--surface-border, transparent));
  border-left: 3px solid var(--pip-color);
  padding-left: .35rem;
}
.pws-cal-list { margin-top: 1rem; display: grid; gap: .5rem; }
.pws-cal-list--desktop-optional { display: none; }
.pws-cal-row {
  display: flex; gap: .85rem; align-items: center; flex-wrap: wrap;
  padding: .75rem .35rem; border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 8%, transparent);
}
.pws-cal-row-date { flex: 0 0 7rem; color: var(--pws-accent); font-weight: 600; font-size: .88rem; }
.pws-cal-row-body { flex: 1 1 14rem; min-width: 0; }
.pws-cal-source-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 999px;
  margin-right: .35rem; vertical-align: middle;
}
.member-calendar {
  --pws-ink: var(--card-text, var(--text));
  --pws-heading: var(--heading);
  --pws-muted: var(--muted);
  --pws-surface: var(--surface);
  --pws-bg: var(--bg);
  --pws-accent: var(--accent-fill, var(--accent));
}
.member-calendar .pws-calendar { margin-top: 0; }
.member-calendar .member-cal-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: 1.15rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--surface-border, var(--card-border));
}
.member-calendar .pws-cal-head { margin-bottom: 1rem; }
.member-calendar .pws-cal-grid {
  border-color: var(--surface-border, var(--card-border));
  background: var(--surface-border, var(--card-border));
  border-radius: var(--radius-md, .75rem);
  box-shadow: var(--shadow-xs);
}
.member-calendar .pws-cal-dow {
  background: var(--surface-alt);
  color: var(--muted-strong, var(--muted));
  font-weight: 650;
}
.member-calendar .pws-cal-cell {
  background: var(--surface);
  min-height: 5.5rem;
  padding: .35rem;
}
.member-calendar .pws-cal-cell--today {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.member-calendar .pws-cal-daynum { color: var(--muted-strong, var(--muted)); font-weight: 600; }
.member-calendar .pws-cal-cell--today .pws-cal-daynum {
  color: var(--accent-fill, var(--accent));
}
.member-calendar .pws-cal-list {
  margin-top: 1.15rem; padding-top: .15rem;
  border-top: 1px solid var(--surface-border, var(--card-border));
}
.member-calendar .pws-cal-row {
  padding: .8rem .5rem;
  border-bottom-color: var(--table-row-border, var(--surface-border));
}
.member-calendar .pws-cal-nav,
.member-calendar .pws-cal-today {
  border-color: var(--input-border, var(--surface-border));
  background: var(--control-bg, var(--surface));
  color: var(--card-text, var(--text));
}
.member-calendar .pws-cal-nav:hover,
.member-calendar .pws-cal-today:hover {
  background: var(--control-hover-bg, var(--surface-alt));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--input-border, transparent));
}
.member-calendar .pws-cal-title {
  color: var(--heading, var(--card-text));
  font-family: var(--font-display, inherit);
}
.member-calendar .pws-cal-row-body strong { color: var(--heading, var(--card-text)); }
.member-cal-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.member-cal-filter {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
  border: 1px solid var(--surface-border, var(--card-border));
  background: var(--surface-alt);
  border-radius: 999px; font-size: .84rem; color: var(--card-text, var(--text));
  cursor: pointer;
  transition: background var(--dur-fast, 160ms), border-color var(--dur-fast, 160ms), opacity var(--dur-fast, 160ms);
}
.member-cal-filter:hover:not(:disabled) {
  background: var(--control-hover-bg, var(--surface-nested));
  border-color: color-mix(in srgb, var(--cal-color, var(--accent)) 35%, var(--surface-border, transparent));
}
.member-cal-filter:focus-visible {
  outline: 2px solid var(--accent-fill, var(--accent));
  outline-offset: 2px;
}
.member-cal-filter--off {
  opacity: .62;
  background: var(--surface);
}
.member-cal-filter--off .member-cal-swatch {
  background: var(--muted);
  box-shadow: none;
}
.member-cal-filter:disabled { cursor: wait; }
.member-cal-swatch {
  width: .7rem; height: .7rem; border-radius: 999px;
  background: var(--cal-color, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cal-color, var(--accent)) 35%, transparent);
}
.calendar-share-admin .form-control-color { width: 4rem; height: 2.4rem; padding: .2rem; }
@container pws (max-width: 640px) {
  .pws-cal-cell { min-height: 3.4rem; }
  .pws-cal-pip { display: none; }
  .pws-cal-cell:has(.pws-cal-pip) .pws-cal-daynum {
    font-weight: 700; color: var(--pws-accent);
  }
  /* Pips are hidden on phones — always show the event list, even if the editor hid it on desktop. */
  .pws-cal-list--desktop-optional { display: grid; }
  /* The day number is the only cue left, so give it a real tap/read target. */
  .pws-cal-daynum { font-size: .85rem; }
  .pws-cal-dow { font-size: .62rem; padding: .4rem .1rem; letter-spacing: 0; }
  .pws-cal-grid { border-radius: .6rem; }
  .pws-cal-head { flex-wrap: wrap; }
  .pws-cal-title { min-width: 0; flex: 1 1 auto; }
  .pws-cal-row-date { flex: 0 0 100%; }
  .pws-cal-nav { width: 2.75rem; height: 2.75rem; }
  .pws-cal-today { padding: .6rem 1rem; }
}
/* Touch devices get full-size hit targets regardless of how wide the site is rendered. */
@media (pointer: coarse) {
  .pws-cal-nav { width: 2.75rem; height: 2.75rem; }
  .pws-cal-today,
  .pws-nav a,
  .pws-nav-group-toggle,
  .pws-nav-group-link,
  .pws-login,
  .pws-cta,
  .pws-cta--sm,
  .pws-faq-item summary {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  .pws-faq-item summary { width: 100%; }
}

.pws-event-grid, .pws-news-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
.pws-event-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pws-news-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pws-event-card, .pws-news-card {
  background: var(--pws-surface); border: 1px solid color-mix(in srgb, var(--pws-ink) 8%, transparent);
  border-radius: 1rem; padding: calc(1.25rem * var(--pws-density, 1)) calc(1.35rem * var(--pws-density, 1));
}
.pws-event-card { display: flex; gap: 1rem; align-items: flex-start; }
.pws-event-date {
  flex: 0 0 auto; text-align: center; line-height: 1.1; padding: .55rem .7rem; border-radius: .75rem;
  background: color-mix(in srgb, var(--pws-accent) 12%, transparent); color: var(--pws-accent); min-width: 3.5rem;
}
.pws-event-month { display: block; font-size: .72rem; letter-spacing: .08em; font-weight: 700; }
.pws-event-date strong { display: block; font-size: 1.6rem; font-family: var(--pws-display); }
.pws-event-body { min-width: 0; display: grid; gap: .3rem; }
.pws-event-body h3, .pws-news-card h3 { margin: 0; }
.pws-event-when { font-weight: 600; }
.pws-conference-agenda .pws-agenda-day { margin-top: 1.5rem; }
.pws-conference-agenda .pws-agenda-day:first-of-type { margin-top: 1.1rem; }
.pws-agenda-day-label {
  margin: 0 0 .75rem; font-size: 1.05rem; font-family: var(--pws-display, inherit);
  color: var(--pws-heading, var(--pws-ink));
}
.pws-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.pws-agenda-item {
  display: grid; grid-template-columns: minmax(5.5rem, 8rem) 1fr; gap: .75rem 1.1rem;
  padding-bottom: .85rem; border-bottom: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent);
}
.pws-agenda-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pws-agenda-time { font-size: .88rem; color: var(--pws-accent); }
.pws-agenda-title { font-weight: 650; color: var(--pws-heading, var(--pws-ink)); }
.pws-agenda-desc { margin: .35rem 0 0; white-space: pre-wrap; }
.pws-agenda-signup { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; }
@media (max-width: 560px) {
  .pws-agenda-item { grid-template-columns: 1fr; gap: .25rem; }
}
.pws-news-date { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .35rem; }
.pws-cta--sm { font-size: .85rem; padding: .4rem .9rem; justify-self: start; margin-top: .35rem; }
.pws-sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.pws-sponsor-card {
  display: grid; place-items: center; gap: .4rem; text-align: center;
  padding: calc(1.25rem * var(--pws-density, 1)) calc(1.35rem * var(--pws-density, 1));
  background: var(--pws-surface); border: 1px solid color-mix(in srgb, var(--pws-ink) 8%, transparent); border-radius: 1rem;
}
.pws-sponsor-card img { max-width: 100%; max-height: 64px; object-fit: contain; }
.pws-sponsor-name { font-weight: 650; color: var(--pws-heading); }
.pws-doc-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pws-doc-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: calc(1.1rem * var(--pws-density, 1)) calc(1.25rem * var(--pws-density, 1));
  border-radius: .85rem; background: var(--pws-surface);
  border: 1px solid color-mix(in srgb, var(--pws-ink) 8%, transparent);
}
.pws-doc-row > div { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.pws-doc-row p { margin: .15rem 0 0; font-size: .9rem; }
.pws-doc-link { color: var(--pws-accent); font-weight: 650; white-space: nowrap; }
.pws-subscribe-form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.pws-subscribe-input {
  flex: 1 1 12rem; min-width: 0; padding: .65rem .85rem; border-radius: .7rem; font: inherit;
  border: 1px solid color-mix(in srgb, var(--pws-ink) 20%, transparent);
  background: var(--pws-surface); color: var(--pws-ink);
}
.pws-subscribe-done { margin-top: 1rem; font-weight: 650; color: var(--pws-accent); }
.pws-subscribe-error { margin-top: .5rem; color: #b3261e; font-size: .9rem; }
.pws-contact-form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; align-items: flex-start; }
.pws-contact-form__full { flex: 1 1 100%; }
.pws-contact-form__message { min-height: 7rem; resize: vertical; }
.pws-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.pws-block-hint { margin-top: .6rem; font-size: .85rem; color: var(--pws-muted); font-style: italic; }
.pws-form-survey-actions { margin-top: 1.25rem; }
.pws-embed { position: relative; margin-top: 1.25rem; border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.pws-embed--map { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--pws-ink) 6%, transparent); }
.pws-embed--form {
  aspect-ratio: auto;
  min-height: 36rem;
  background: color-mix(in srgb, var(--pws-ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--pws-ink) 12%, transparent);
}
.pws-embed-placeholder--form { min-height: 12rem; }
.pws-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pws-embed-placeholder {
  margin-top: 1.25rem; border: 1px dashed color-mix(in srgb, var(--pws-ink) 22%, transparent);
  border-radius: 1rem; display: grid; place-items: center; min-height: 12rem; text-align: center; padding: 1.5rem;
}
.pws-logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-top: 1.25rem; align-items: center; }
.pws-logo-tile { display: grid; place-items: center; padding: .85rem; min-height: 4.5rem; }
.pws-logo-tile img { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
@media (hover: hover) and (pointer: fine) {
  .pws-logo-tile img:hover { filter: none; opacity: 1; }
}
.pws-logo-name { color: var(--pws-muted); font-weight: 650; letter-spacing: .04em; }
.pws-footer { border-top: 1px solid color-mix(in srgb, var(--pws-ink) 10%, transparent); padding: 2rem 1.25rem; }
.pws-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--pws-muted); font-size: .9rem; }
.pws-footer-meta a { color: var(--pws-accent); }
.pws-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .85rem; }
.pws-template-card {
  text-align: left; border: 1px solid var(--surface-border, #d7e0eb); border-radius: 1rem;
  background: var(--surface, #fff); padding: .85rem; display: grid; gap: .4rem; cursor: pointer;
  color: inherit;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-template-card:active { transform: scale(var(--press-scale, 0.97)); }
.pws-template-card:focus-visible {
  border-color: var(--accent, #0A3A5C);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pws-template-card:hover {
    border-color: color-mix(in srgb, var(--accent, #0A3A5C) 55%, var(--surface-border, #d7e0eb));
    box-shadow: var(--shadow-sm);
  }
}
.pws-template-card.active {
  border-color: var(--accent, #0A3A5C);
  box-shadow: 0 0 0 1px var(--accent, #0A3A5C);
}
.pws-template-swatch { display: block; height: 72px; border-radius: .6rem; }
.pws-template-swatch--modern-hero { background: linear-gradient(135deg, #1a2c3a, #0A3A5C); }
.pws-template-swatch--association-classic { background: linear-gradient(90deg, #f7f5f1 55%, #6B3A2A); }
.pws-template-swatch--minimal-editorial { background: linear-gradient(180deg, #fff, #e8e4dc); }
.pws-template-swatch--community-bold { background: linear-gradient(180deg, #C4312B 60%, #f7f5f1); }
.pws-template-swatch--aurora { background: linear-gradient(135deg, #1a1030, #C9A227); }
.pws-template-swatch--harbor { background: linear-gradient(90deg, #0B3D5C, #e7f0f7); }
.pws-template-swatch--summit { background: linear-gradient(135deg, #1F6B57, #e8f4f0); }
.pws-template-swatch--nocturne { background: linear-gradient(180deg, #0c0a10 55%, #E8C9A0); }
.pws-template-swatch--meridian { background: linear-gradient(135deg, #3B4CCA, #dfe4ff); }
.pws-template-swatch--sandstone { background: linear-gradient(160deg, #f6efe6 55%, #B0603A); }
.pws-template-swatch--civic { background: linear-gradient(90deg, #1D4E89 45%, #eef3f9); }
.pws-template-swatch--botanic { background: linear-gradient(135deg, #2F6B3C, #e6f2e5); }

/* Miniature page previews so the gallery shows layout, not just colour. */
.pws-template-preview {
  display: block; height: 96px; border-radius: .6rem; overflow: hidden; position: relative;
  background: var(--tpl-bg, #fff); border: 1px solid rgba(0,0,0,.08);
}
.pws-template-preview .tpl-bar { height: 12%; background: var(--tpl-accent, #0A3A5C); opacity: .9; }
.pws-template-preview .tpl-hero { height: 40%; background: var(--tpl-hero, var(--tpl-accent, #0A3A5C)); }
.pws-template-preview .tpl-body { padding: 6% 8%; display: grid; gap: 4px; }
.pws-template-preview .tpl-line { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--tpl-ink, #14212b) 22%, transparent); }
.pws-template-preview .tpl-line.short { width: 55%; }
.pws-template-preview .tpl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.pws-template-preview .tpl-card { height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--tpl-accent, #0A3A5C) 20%, transparent); }
.pws-template-preview--split .tpl-hero { display: grid; grid-template-columns: 1fr 1fr; }
.pws-template-preview--split .tpl-hero::after { content: ""; background: color-mix(in srgb, #000 22%, transparent); }
/* —— Section preset gallery —— */
.pws-preset-modal { max-width: 880px; width: min(92vw, 880px); }
.pws-preset-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.pws-preset-tabs button {
  border: 1px solid var(--surface-border, #d7e0eb); background: var(--surface, #fff);
  border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; cursor: pointer;
  color: var(--text, inherit);
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-preset-tabs button:active { transform: scale(var(--press-scale, 0.97)); }
.pws-preset-tabs button.active { background: var(--accent-fill, var(--accent, #0A3A5C)); border-color: var(--accent-fill, var(--accent, #0A3A5C)); color: var(--accent-contrast, #fff); }
.pws-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .85rem; }
.pws-preset-card {
  text-align: left; border: 1px solid var(--surface-border, #d7e0eb); border-radius: .9rem;
  background: var(--surface, #fff); padding: .75rem; display: grid; gap: .3rem; cursor: pointer;
  color: inherit;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-preset-card:active { transform: scale(var(--press-scale, 0.97)); }
.pws-preset-card:focus-visible {
  border-color: var(--accent, #0A3A5C);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pws-preset-card:hover { border-color: var(--accent, #0A3A5C); box-shadow: var(--shadow-sm); }
}
.pws-preset-thumb {
  display: block; height: 62px; border-radius: .5rem; background: #eef2f7;
  border: 1px solid rgba(0,0,0,.06); position: relative; overflow: hidden;
}
.pws-preset-thumb::before, .pws-preset-thumb::after { content: ""; position: absolute; background: #b9c6d6; border-radius: 2px; }
.tpl-hero-bleed::before { inset: 0; background: linear-gradient(135deg, #7c8ea3, #4a5b70); border-radius: 0; }
.tpl-hero-bleed::after { left: 10%; right: 45%; bottom: 22%; height: 8px; background: #fff; }
.tpl-hero-split::before { inset: 0 50% 0 0; background: #4a5b70; border-radius: 0; }
.tpl-hero-split::after { left: 55%; right: 10%; top: 40%; height: 8px; }
.tpl-hero-stack::before { left: 12%; right: 12%; top: 18%; height: 10px; background: #6b7c91; }
.tpl-hero-stack::after { left: 8%; right: 8%; bottom: 12%; height: 20px; background: #97a7ba; }
.tpl-hero-text::before { left: 22%; right: 22%; top: 30%; height: 10px; background: #6b7c91; }
.tpl-hero-text::after { left: 32%; right: 32%; top: 52%; height: 6px; }
.tpl-text::before { left: 12%; right: 12%; top: 26%; height: 6px; }
.tpl-text::after { left: 12%; right: 34%; top: 46%; height: 6px; }
.tpl-columns::before { left: 10%; width: 36%; top: 24%; bottom: 24%; }
.tpl-columns::after { right: 10%; width: 36%; top: 24%; bottom: 24%; }
.tpl-cards::before { left: 8%; width: 24%; top: 28%; bottom: 24%; }
.tpl-cards::after { left: 38%; width: 54%; top: 28%; bottom: 24%; background: repeating-linear-gradient(90deg, #b9c6d6 0 42%, transparent 42% 50%); }
.tpl-rows::before { left: 10%; right: 10%; top: 26%; height: 8px; }
.tpl-rows::after { left: 10%; right: 10%; top: 48%; height: 8px; box-shadow: 0 16px 0 #b9c6d6; }
.tpl-stats::before { left: 10%; right: 10%; top: 34%; height: 14px; background: repeating-linear-gradient(90deg, #b9c6d6 0 26%, transparent 26% 37%); }
.tpl-stats::after { display: none; }
.tpl-band::before { inset: 26% 8%; background: #4a5b70; border-radius: 6px; }
.tpl-band::after { display: none; }
.tpl-box::before { inset: 20% 16%; background: #fff; border: 2px solid #b9c6d6; border-radius: 8px; }
.tpl-box::after { left: 38%; right: 38%; top: 52%; height: 7px; background: #4a5b70; }
.tpl-quote::before { left: 18%; right: 18%; top: 32%; height: 9px; }
.tpl-quote::after { left: 34%; right: 34%; top: 54%; height: 6px; }
.tpl-image::before { inset: 18% 14%; background: linear-gradient(135deg, #97a7ba, #6b7c91); border-radius: 6px; }
.tpl-image::after { display: none; }
.tpl-grid::before { inset: 18% 12%; background: repeating-linear-gradient(90deg, #97a7ba 0 30%, transparent 30% 35%); border-radius: 4px; }
.tpl-grid::after { display: none; }
.tpl-strip::before { left: 8%; right: 8%; top: 30%; height: 40%; background: repeating-linear-gradient(90deg, #97a7ba 0 22%, transparent 22% 26%); }
.tpl-strip::after { display: none; }
.tpl-video::before { inset: 18% 14%; background: #33404f; border-radius: 6px; }
.tpl-video::after {
  left: 46%; top: 42%; width: 0; height: 0; background: transparent;
  border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.tpl-map::before { inset: 18% 14%; background: #cfe0cf; border-radius: 6px; }
.tpl-map::after { left: 48%; top: 40%; width: 10px; height: 10px; border-radius: 999px 999px 999px 0; background: #b3261e; transform: rotate(-45deg); }
.tpl-logos::before { left: 8%; right: 8%; top: 40%; height: 18%; background: repeating-linear-gradient(90deg, #b9c6d6 0 16%, transparent 16% 24%); }
.tpl-logos::after { display: none; }
.tpl-form::before { left: 12%; width: 52%; top: 42%; height: 14px; background: #fff; border: 1px solid #b9c6d6; }
.tpl-form::after { right: 12%; width: 22%; top: 42%; height: 16px; background: #4a5b70; }
.tpl-spacer::before { left: 30%; right: 30%; top: 48%; height: 4px; }
.tpl-spacer::after { display: none; }

.pws-template--aurora .pws-section-inner, .pws-template--nocturne .pws-section-inner { border: 1px solid color-mix(in srgb, #fff 8%, transparent); }
.pws-template--pulse .pws-hero--bold, .pws-template--community-bold .pws-hero--bold { letter-spacing: -.04em; }

/* Template runtime motion — press, hover gate, reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .pws-cta, .pws-cta--light, .pws-login, .pws-nav-toggle-bars,
  .pws-nav-toggle-bars::before, .pws-nav-toggle-bars::after,
  .pws-logo-tile img, .pws-template-card, .pws-preset-card, .pws-palette-item,
  .pws-palette-dd-toggle, .pws-palette-dd-menu, .pws-preset-tabs button {
    transition: none !important;
  }
  .pws-cta:active, .pws-cta--light:active, .pws-login:active,
  .pws-template-card:active, .pws-preset-card:active, .pws-palette-item:active,
  .pws-palette-dd-toggle:active, .pws-preset-tabs button:active {
    transform: none;
  }
}
.pws-draft-banner {
  background: #fff3cd; color: #664d03; text-align: center; padding: .45rem 1rem; font-size: .9rem; font-weight: 600;
}
.pws-section-grid {
  max-width: 1100px; margin: 0 auto; padding: 1.25rem;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem;
}
.pws-section-grid--edit { max-width: none; padding: 0 0 2rem; }
.pws-block { grid-column: span 12; min-width: 0; position: relative; }
.pws-w-full { grid-column: span 12; }
.pws-w-two-thirds { grid-column: span 8; }
.pws-w-half { grid-column: span 6; }
.pws-w-third { grid-column: span 4; }
.pws-h-sm { min-height: 4rem; }
.pws-h-md { min-height: 8rem; }
.pws-h-lg { min-height: 14rem; }
.pws-h-xl { min-height: 20rem; }
.pws-h-auto { min-height: 0; }
.pws-sec--min-height {
  min-height: var(--pws-block-min-height) !important;
}
.pws-sec--min-height > .pws-hero,
.pws-sec--min-height > .pws-section-inner {
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}
.pws-sec--min-height .pws-hero--bold,
.pws-sec--min-height .pws-hero--bleed,
.pws-sec--min-height .pws-hero--split,
.pws-sec--min-height .pws-hero--minimal {
  min-height: var(--pws-block-min-height);
  box-sizing: border-box;
}
.pws-sec--min-height .pws-hero--bold {
  grid-template-rows: auto minmax(12rem, 1fr);
}
.pws-sec--min-height .pws-hero--bold .pws-hero-media,
.pws-sec--min-height .pws-hero--bleed .pws-hero-media,
.pws-sec--min-height .pws-hero--split .pws-hero-media,
.pws-sec--min-height .pws-hero--classic .pws-hero-media,
.pws-sec--min-height .pws-hero--editorial .pws-hero-media {
  min-height: 12rem;
  height: 100%;
}
.pws-height-handle {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 44px;
  height: 12px;
  margin-left: -22px;
  border-radius: 999px;
  background: var(--pws-accent, #0A3A5C);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  cursor: ns-resize;
  touch-action: none;
  z-index: 6;
}
.pws-height-handle::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 3px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .85);
}
body.pws-height-resizing { cursor: ns-resize; user-select: none; }
body.pws-height-resizing .pws-block { pointer-events: none; }
body.pws-height-resizing .pws-height-handle { pointer-events: auto; }
.pws-section-inner {
  padding: calc(1.75rem * var(--pws-density, 1)) calc(1.85rem * var(--pws-density, 1));
  background: var(--pws-surface, #fff);
  border-radius: 1rem; height: 100%;
}
.pws-section-grid { gap: calc(1rem * var(--pws-density, 1)); }
.pws-spacer { height: calc(2rem * var(--pws-density, 1)); }

/* —— Per-section design overrides (custom properties emitted by PublicWebsiteSectionStyle) —— */
.pws-sec--bg, .pws-sec--bg-image, .pws-sec--ink {
  padding-top: var(--pws-sec-pad-top, 0);
  padding-bottom: var(--pws-sec-pad-bottom, 0);
}
.pws-sec--bg { background: var(--pws-sec-bg); }
.pws-sec--bg-image { position: relative; isolation: isolate; }
.pws-sec--bg-image::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--pws-sec-image);
  background-size: cover;
  background-position: var(--pws-sec-focal, 50% 50%);
}
.pws-sec--bg-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, var(--pws-sec-overlay, .45));
}
.pws-sec--ink, .pws-sec--ink :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, span) { color: var(--pws-sec-ink); }
.pws-sec--bg > .pws-section-inner,
.pws-sec--bg-image > .pws-section-inner,
.pws-sec--ink > .pws-section-inner {
  background: transparent;
  max-width: var(--pws-sec-width, 60rem);
  margin-inline: auto;
  text-align: var(--pws-sec-align, left);
}
.pws-sec--divider-line { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pws-sec--divider-angle { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%); }
.pws-sec--divider-curve { border-end-start-radius: 50% 2.5rem; border-end-end-radius: 50% 2.5rem; overflow: hidden; }
.pws-sec--anim-fade { animation: pws-sec-fade .6s ease both; }
.pws-sec--anim-rise { animation: pws-sec-rise .6s ease both; }
@keyframes pws-sec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pws-sec-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pws-sec--anim-fade, .pws-sec--anim-rise { animation: none; }
}
@container pws (max-width: 640px) {
  .pws-sec--hide-mobile { display: none; }
}
@container pws (min-width: 641px) {
  .pws-sec--hide-desktop { display: none; }
}
/* In the builder, hidden bands stay visible but dimmed so they are still editable. */
.pws--editable .pws-sec--hide-mobile, .pws--editable .pws-sec--hide-desktop { display: block; opacity: .55; }
.pws-image-block { margin: 0; }
.pws-image-frame {
  min-height: 200px; border-radius: 1rem; background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--pws-accent) 12%, var(--pws-surface));
}
.pws-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ============================================================
   Shared three-pane studio pattern — .pws-builder, .cert-studio,
   .nl-studio and .rb-studio all share the same rail/stage/inspector
   shape (each already has its own component-specific CSS for colors,
   borders, spacing below). Below lg they used to fall straight to a
   tall single-column stack with nested max-height scrollers, which is
   exactly what makes nested scroll feel broken on touch — you fight
   the inner scroller to reach the outer page.

   Opt a studio into this generalized md/sm behavior by adding the
   shared studio / studio-rail / studio-stage / studio-inspector
   classes alongside the existing component-specific ones on the same
   four elements, and by adding the .studio-panes switcher markup
   (three radio inputs + labels, same id/name scheme reused verbatim
   across all four pages since only one studio is ever on screen at
   once) as the first child of .studio. These rules only ever touch
   layout and visibility — never color, border or spacing, which stay
   owned by each studio's own CSS.
   ============================================================ */
/* Hidden on desktop so the switcher is not a grid column (which stole the
   rail track and left the canvas squeezed into the inspector width). */
.studio-panes { display: none; }
@media (min-width: 901px) and (max-width: 1200px) {  /* md–lg: same single-column stack, but the
     rail/inspector scroll WITH the page instead of fighting an inner max-height scroller — the
     part of "nested scroll feels broken on touch" that's safe to fix without assuming each
     studio's internal layout (flex-column for pws/cert/rb, plain block for nl-studio). */
  .studio-rail, .studio-inspector { max-height: none !important; overflow: visible !important; }
}
@media (max-width: 900px) {  /* md-: single pane, CSS-only radio switcher (each studio's own
     ≤1200px rule already collapses .studio to a single column) */
  .studio-panes {
    display: flex;
    gap: .25rem;
    padding: .4rem;
    background: var(--surface-alt, #f7faf8);
    border-bottom: 1px solid var(--surface-border, #dfe7e3);
  }
  .studio-panes input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .studio-panes label {
    flex: 1 1 0;
    text-align: center;
    padding: .5rem .6rem;
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    font-size: .82rem;
    font-weight: 650;
    color: var(--muted-strong, #5f726c);
    cursor: pointer;
  }
  .studio-panes input:checked + label {
    background: var(--surface, #fff);
    color: var(--accent, #1f6b57);
    box-shadow: var(--shadow-sm);
  }
  .studio-panes input:focus-visible + label {
    outline: 2px solid var(--accent, #1f6b57);
    outline-offset: 2px;
  }
  .studio-rail, .studio-stage, .studio-inspector { max-height: none !important; }
  /* Hides the two non-selected panes only — the selected pane's own display
     value (flex-column for most studios, plain block for nl-studio's rail/
     inspector) is never touched, so each studio keeps whatever internal
     layout its own component-specific CSS already gives it. If no radio is
     checked yet (e.g. JS-disabled edge case), nothing matches and all three
     stack — the same graceful fallback as before this pattern existed. */
  .studio:has(#studio-pane-rail:checked) .studio-stage,
  .studio:has(#studio-pane-rail:checked) .studio-inspector,
  .studio:has(#studio-pane-stage:checked) .studio-rail,
  .studio:has(#studio-pane-stage:checked) .studio-inspector,
  .studio:has(#studio-pane-inspector:checked) .studio-rail,
  .studio:has(#studio-pane-inspector:checked) .studio-stage {
    display: none !important;
  }
}

.pws-builder {
  display: grid;
  grid-template-columns: minmax(180px, 200px) minmax(0, 1fr) minmax(260px, 280px);
  gap: 0;
  min-height: calc(100dvh - 8.5rem);
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface, #fff);
}
.pws-builder-rail, .pws-builder-inspector {
  padding: 1rem;
  overflow: auto;
  background: var(--surface-alt, #f7faf8);
}
.pws-builder-rail {
  border-right: 1px solid var(--surface-border, #d7e0eb);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: .75rem;
  overflow: hidden;
}
.pws-rail-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  flex: none;
  margin-bottom: .75rem;
  padding: .2rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--accent, #0A3A5C) 8%, #e8eef3);
}
.pws-rail-tabs button {
  border: 0;
  background: transparent;
  border-radius: .4rem;
  padding: .4rem .35rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--text-muted, #5b6b78);
  cursor: pointer;
}
.pws-rail-tabs button:hover { color: var(--accent, #0A3A5C); }
.pws-rail-tabs button.active {
  background: var(--surface, #fff);
  color: var(--accent, #0A3A5C);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.pws-rail-panels {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.pws-rail-panel { display: none; }
.pws-rail-panel.is-active { display: block; }
.pws-toolbox-head { margin-bottom: .65rem; }
.pws-toolbox-head strong {
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted, #5b6b78);
}
.pws-builder-inspector { border-left: 1px solid var(--surface-border, #d7e0eb); }
.pws-builder-stage {
  overflow: auto;
  background: #1a1d24;
  padding: 1rem 1rem 2rem;
}
.pws-builder-stage-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; justify-content: space-between;
  margin-bottom: .75rem; color: #e8edf2;
}
.pws-builder-stage-toolbar label { color: #c5ced6; font-size: .78rem; }
.pws-builder-stage-toolbar .form-control, .pws-builder-stage-toolbar .form-select {
  background: #11141a; border-color: #2c3340; color: #f4f7fa;
}
.pws-device-toggle { display: inline-flex; gap: .25rem; }
.pws-visual-frame {
  margin: 0 auto; background: var(--pws-bg, #fff); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); min-height: 70dvh;
}
.pws-visual-frame--desktop { max-width: none; }
.pws-visual-frame--tablet { max-width: 768px; }
.pws-visual-frame--mobile { max-width: 390px; }
.pws-page-list { display: grid; gap: .35rem; }
.pws-page-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem; align-items: stretch;
}
.pws-page-row--child { padding-left: 1rem; }
.pws-page-row.active .pws-page-item {
  border-color: var(--accent, #0A3A5C); background: color-mix(in srgb, var(--accent, #0A3A5C) 8%, #fff);
}
.pws-page-item {
  text-align: left; border: 1px solid var(--surface-border, #d7e0eb); border-radius: .55rem;
  background: var(--surface, #fff); padding: .55rem .65rem; display: flex; gap: .45rem; align-items: flex-start; cursor: pointer;
  min-width: 0;
}
.pws-page-item--group { border-style: dashed; background: color-mix(in srgb, var(--accent, #0A3A5C) 4%, #fff); }
.pws-page-group-badge {
  flex: none; width: 1.1rem; color: var(--accent, #0A3A5C); font-size: .75rem; line-height: 1.4;
}
.pws-page-group-badge--child { color: var(--text-muted, #5b6b78); }
.pws-page-item-text { display: grid; gap: .15rem; min-width: 0; }
.pws-page-item-text code { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-page-row-actions { display: flex; flex-direction: column; gap: .15rem; }
.pws-page-nest {
  width: 1.55rem; height: 1.55rem; padding: 0; border-radius: .35rem; font-size: .75rem; line-height: 1;
  border: 1px solid var(--surface-border, #d7e0eb); background: var(--surface, #fff); color: var(--text-muted, #5b6b78);
}
.pws-page-nest:hover:not(:disabled) { border-color: var(--accent, #0A3A5C); color: var(--accent, #0A3A5C); }
.pws-page-nest:disabled { opacity: .35; cursor: default; }
.pws-group-children { padding-left: 1.1rem; margin: .35rem 0 0; }
.pws-nav-group-stage {
  margin: 1.5rem; padding: 1.5rem; border-radius: 1rem;
  border: 1px dashed var(--surface-border, #d7e0eb); background: var(--surface-alt, #f7faf8);
}
.pws-nav-group-stage-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* —— Visual site menu manager —— */
.pws-menu-modal { max-width: 720px; width: min(720px, calc(100vw - 2rem)); }
.pws-menu-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .85rem 1rem; margin-bottom: 1.25rem; border-radius: .75rem;
  background: #14212b; color: #fff;
}
.pws-menu-preview-brand { font-weight: 650; letter-spacing: -.01em; opacity: .92; }
.pws-menu-preview-nav { display: flex; flex-wrap: wrap; gap: .35rem .85rem; align-items: center; }
.pws-menu-preview-item {
  position: relative; font-size: .9rem; opacity: .9; padding: .2rem 0;
}
.pws-menu-preview-item--empty { opacity: .45; text-decoration: line-through; }
.pws-menu-preview-item--group { font-weight: 600; }
.pws-menu-preview-drop {
  display: none; position: absolute; left: 0; top: 100%; z-index: 2; min-width: 10rem;
  padding: .45rem; border-radius: .45rem; background: #fff; color: #14212b;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); flex-direction: column; gap: .15rem;
}
.pws-menu-preview-item--group:hover .pws-menu-preview-drop { display: flex; }
.pws-menu-preview-drop span { padding: .35rem .5rem; border-radius: .3rem; font-size: .85rem; font-weight: 500; }
.pws-menu-tree { display: grid; gap: .75rem; }
.pws-menu-node {
  border: 1px solid var(--surface-border, #d7e0eb); border-radius: .75rem;
  background: var(--surface, #fff); overflow: hidden;
}
.pws-menu-node--group { border-style: dashed; border-color: color-mix(in srgb, var(--accent, #0A3A5C) 45%, #d7e0eb); }
.pws-menu-node.is-focus { outline: 2px solid var(--accent, #0A3A5C); outline-offset: 1px; }
.pws-menu-node-head {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center;
  padding: .65rem .75rem; background: var(--surface-alt, #f7faf8);
}
.pws-menu-node-main { display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: center; min-width: 0; flex: 1; }
.pws-menu-title-input { max-width: 16rem; font-weight: 600; }
.pws-menu-node-actions, .pws-menu-child-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.pws-menu-badge {
  display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent, #0A3A5C) 14%, #fff); color: var(--accent, #0A3A5C);
}
.pws-menu-badge--page { background: #eef2f5; color: #5b6b78; }
.pws-menu-badge--home { background: #e0edff; color: #1d4ed8; }
.pws-menu-children {
  padding: .75rem; border-top: 1px solid var(--surface-border, #d7e0eb);
  background: color-mix(in srgb, var(--accent, #0A3A5C) 3%, #fff);
}
.pws-menu-child {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center;
  padding: .45rem .55rem; margin-bottom: .35rem; border-radius: .5rem;
  background: #fff; border: 1px solid var(--surface-border, #d7e0eb);
}
.pws-menu-child-title {
  font-weight: 560; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: transparent; padding: 0; text-align: left; color: inherit; cursor: pointer;
}
.pws-menu-child-title:hover { color: var(--accent, #0A3A5C); text-decoration: underline; }
.pws-menu-add-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; margin-top: .5rem;
}
@media (max-width: 640px) {  /* was 560 — Axis A */
  .pws-menu-child { grid-template-columns: minmax(0, 1fr); }
  .pws-menu-child-actions { justify-content: flex-start; }
}
.pws-palette { display: grid; gap: .55rem; }
.pws-palette-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #5b6b78);
  margin: .15rem 0 0;
}
.pws-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
}
.pws-palette-item {
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .5rem;
  padding: .55rem .5rem;
  cursor: grab;
  display: grid;
  gap: .1rem;
  background: var(--control-bg, var(--surface, #fff));
  text-align: left;
  min-height: 2.5rem;
  align-content: center;
  color: var(--text, #183451);
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .pws-palette-item:hover {
    border-color: var(--accent, #0A3A5C);
    background: color-mix(in srgb, var(--accent, #0A3A5C) 6%, var(--surface, #fff));
  }
}
.pws-palette-item:active { cursor: grabbing; transform: scale(var(--press-scale, 0.97)); }
.pws-palette-item strong {
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.2;
}
.pws-insert-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .65rem;
}

/* Section outline: jump to and reorder blocks without hunting through the canvas. */
.pws-outline { display: grid; gap: .3rem; }
.pws-outline-item {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; align-items: center;
  border: 1px solid var(--surface-border, #d7e0eb); border-radius: .5rem;
  background: var(--surface, #fff); padding: .4rem .55rem; cursor: grab; text-align: left;
}
.pws-outline-item:hover { border-color: var(--accent, #0A3A5C); }
.pws-outline-item.active {
  border-color: var(--accent, #0A3A5C);
  background: color-mix(in srgb, var(--accent, #0A3A5C) 8%, #fff);
}
.pws-outline-item.is-dragging { opacity: .5; }
.pws-outline-item.pws-drop-target { outline: 2px solid var(--accent, #0A3A5C); outline-offset: 1px; }
.pws-outline-index {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #0A3A5C) 12%, transparent);
  font-size: .7rem; font-weight: 600;
}
.pws-outline-body { display: grid; gap: 0; min-width: 0; }
.pws-outline-body strong { font-size: .82rem; line-height: 1.2; }
.pws-outline-body .muted {
  font-size: .72rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Autosave chip. Renders itself on a timer so the canvas is never re-rendered mid-edit. */
.pws-save-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 500;
  border: 1px solid var(--surface-border, #d7e0eb); background: var(--surface-alt, #f7faf8);
  color: var(--text-muted, #5b6b78);
}
.pws-save-chip--dirty { border-color: #d9a441; background: #fdf6e7; color: #8a6508; }
.pws-save-chip--saving { border-color: #7fa8c9; background: #eef5fa; color: #0b3d5c; }
.pws-save-chip--saved { border-color: #8fc9ae; background: #eef8f3; color: #14614a; }
.pws-save-chip--error { border-color: #d99a9a; background: #fdeeee; color: #8b1e1e; }
.pws-save-chip--unpublished { border-color: #a89ad6; background: #f3f0fb; color: #4a3b83; }
.pws-save-chip-spinner {
  width: .7rem; height: .7rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: pws-save-spin .7s linear infinite;
}
@keyframes pws-save-spin { to { transform: rotate(360deg); } }

.pws-live-badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: .25rem .7rem; font-size: .78rem; font-weight: 600;
}
.pws-live-badge--live { background: #e4f5ec; color: #14614a; }
.pws-live-badge--draft { background: #eef1f4; color: #5b6b78; }

/* Media library picker */
.media-picker { max-width: 760px; width: min(92vw, 760px); }
.media-picker-upload {
  border: 2px dashed var(--surface-border, #d7e0eb); border-radius: .75rem;
  padding: .9rem; display: grid; gap: .4rem;
}
.media-picker-pending {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .8rem; align-items: center;
  margin-top: .8rem; padding: .7rem; border-radius: .75rem; background: var(--surface-alt, #f7faf8);
}
.media-picker-pending img { width: 120px; height: 90px; object-fit: cover; border-radius: .5rem; }
.media-picker-shortcuts, .media-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem;
}
.media-picker-grid { max-height: 340px; overflow: auto; padding: .15rem; }
.media-picker-shortcut, .media-picker-tile {
  border: 1px solid var(--surface-border, #d7e0eb); border-radius: .6rem; overflow: hidden;
  background: var(--surface, #fff); display: grid; gap: .1rem; padding-bottom: .35rem; cursor: pointer;
  text-align: left;
}
.media-picker-shortcut img, .media-picker-tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef1f4;
}
.media-picker-shortcut span, .media-picker-tile-name, .media-picker-tile-dims {
  padding: 0 .45rem; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-picker-tile.active { outline: 2px solid var(--accent, #0A3A5C); outline-offset: -1px; }
.media-picker-detail, .media-picker-url {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--surface-border, #d7e0eb);
}

.website-image-field {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .55rem; align-items: start; margin-bottom: .5rem;
}
.website-image-field-preview {
  width: 84px; aspect-ratio: 4 / 3; border-radius: .45rem; overflow: hidden;
  border: 1px solid var(--surface-border, #d7e0eb); background: var(--surface-alt, #f7faf8);
  display: grid; place-items: center;
}
.website-image-field-preview img { width: 100%; height: 100%; object-fit: cover; }
.website-image-field--logo {
  grid-template-columns: 6.5rem minmax(0, 1fr);
}
.website-image-field-preview--logo {
  width: 6.5rem;
  aspect-ratio: 1;
  padding: .55rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2540 10%, transparent);
  box-shadow: var(--shadow-sm);
}
.website-image-field-preview--logo img {
  object-fit: contain;
  background: transparent;
}
.website-image-field-preview--logo .website-image-field-empty {
  color: #5b6b78;
}
.website-image-field-empty { font-size: .68rem; color: var(--text-muted, #5b6b78); }
.website-image-field-text { font-size: 1.1rem; font-weight: 700; }
.website-image-field-controls { display: grid; gap: .35rem; }

/* Rectangular crop frame for website imagery (the avatar editor stays circular). */
.photo-crop-frame {
  width: 340px;
  overflow: hidden;
  border-radius: .6rem;
  background: #11141a;
  position: relative;
}
.photo-crop-frame img {
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

.pws-inspector-tabs {
  display: flex; gap: .25rem; margin-bottom: .75rem;
  border-bottom: 1px solid var(--surface-border, #d7e0eb);
}
.pws-inspector-tabs button {
  border: 0; background: transparent; padding: .35rem .7rem; font-size: .85rem; font-weight: 500;
  border-bottom: 2px solid transparent; color: var(--text-muted, #5b6b78);
}
.pws-inspector-tabs button.active { color: var(--accent, #0A3A5C); border-bottom-color: var(--accent, #0A3A5C); }

.pws-story-card footer { display: flex; align-items: center; gap: .6rem; }
.pws img.pws-story-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; flex: none; }
.pws-story-byline { display: grid; }
.pws-insert-rail {
  grid-column: 1 / -1; display: flex; justify-content: center; min-height: 1.4rem;
}
.pws-insert-btn {
  border: 1px dashed color-mix(in srgb, #fff 35%, transparent); background: #2a3140; color: #fff;
  border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; line-height: 1.2;
}
.pws-insert-rail.pws-drop-target .pws-insert-btn, .pws-block.pws-drop-target {
  outline: 2px solid #7eb6ff; outline-offset: 2px;
}
.pws-canvas-empty-visual {
  grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: var(--pws-muted);
  border: 2px dashed color-mix(in srgb, var(--pws-ink) 18%, transparent); border-radius: 1rem;
}
.pws-block.is-selected { outline: 2px solid var(--pws-accent); outline-offset: 3px; border-radius: 1rem; }
.pws-block.is-dragging { opacity: .45; }
.pws-block-chrome {
  position: absolute; top: .4rem; right: .4rem; z-index: 3;
  display: none; gap: .25rem; align-items: center;
  background: #11141a; color: #fff; border-radius: .5rem; padding: .2rem .35rem;
}
.pws-block.is-selected .pws-block-chrome, .pws-block:hover .pws-block-chrome { display: inline-flex; }
.pws-block-chrome-label { font-size: .72rem; padding: 0 .35rem; }
.pws-chrome-btn { border: 0; background: transparent; color: #fff; border-radius: .3rem; padding: .1rem .35rem; }
.pws-chrome-btn:hover { background: #2c3340; }
.pws-chrome-btn--danger:hover { background: #8b1e1e; }
.pws-edit { outline: none; min-width: 1ch; }
.pws--editable .pws-edit:hover, .pws--editable .pws-edit:focus {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pws-accent) 55%, transparent);
  border-radius: .2rem;
}
.pws-text-toolbar {
  position: absolute; z-index: 80; display: flex; gap: .25rem; align-items: center;
  background: #11141a; color: #fff; border-radius: .65rem; padding: .3rem .4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  /* Wrap rather than run off-screen; the JS clamps the left edge to match. */
  flex-wrap: wrap; max-width: min(96vw, 34rem);
}
.pws-text-toolbar button {
  border: 0; background: transparent; color: #fff; border-radius: .35rem; padding: .2rem .45rem;
}
.pws-text-toolbar button:hover { background: #2c3340; }
.pws-text-toolbar-color { position: relative; }
.pws-text-toolbar-palette {
  position: absolute; top: calc(100% + .4rem); left: 0; width: 220px;
  background: #fff; color: #14212b; border-radius: .75rem; padding: .7rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.pws-tt-group {
  display: inline-flex; gap: .1rem; align-items: center;
  padding-right: .3rem; margin-right: .1rem;
  border-right: 1px solid #2c3340;
}
.pws-tt-group:last-of-type { border-right: 0; padding-right: 0; margin-right: 0; }
.pws-tt-group[hidden] { display: none; }
.pws-text-toolbar button.is-active { background: #3a7ca5; }
.pws-tt-format {
  background: #1c212b; color: #fff; border: 1px solid #2c3340;
  border-radius: .35rem; padding: .18rem .3rem; font-size: .78rem;
}
.pws-tt-swatch {
  display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem;
  font-size: .72rem; font-weight: 700; line-height: 1; border-radius: .2rem;
}
.pws-tt-swatch--fore { border-bottom: 3px solid #e23d28; }
.pws-tt-swatch--back { background: #f5d76e; color: #111; }
.pws-text-toolbar-link {
  position: absolute; top: calc(100% + .4rem); left: 0; width: 280px;
  background: #fff; color: #14212b; border-radius: .75rem; padding: .7rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
  display: grid; gap: .5rem;
}
.pws-text-toolbar-link[hidden] { display: none; }
.pws-text-toolbar-link label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 500; }
.pws-text-toolbar-link input[type="url"], .pws-text-toolbar-link select {
  border: 1px solid var(--surface-border, #d7e0eb); border-radius: .4rem; padding: .3rem .4rem; font-size: .8rem;
}
.pws-text-toolbar-link .pws-tt-link-newtab {
  display: flex; align-items: center; gap: .4rem; font-weight: 400;
}
.pws-tt-link-actions { display: flex; gap: .4rem; }
.pws-tt-link-actions button {
  flex: 1; border-radius: .4rem; padding: .3rem .5rem; font-size: .8rem; border: 1px solid var(--surface-border, #d7e0eb);
}
.pws-text-toolbar .pws-tt-link-apply { background: var(--accent, #0A3A5C); color: #fff; border-color: transparent; }
.pws-text-toolbar .pws-tt-link-apply:hover { background: color-mix(in srgb, var(--accent, #0A3A5C) 85%, #000); }
.pws-text-toolbar .pws-tt-link-cancel { background: #fff; color: #14212b; }
.pws-text-toolbar .pws-tt-link-cancel:hover { background: #eef1f4; }

/* Rich inline fields host block markup, so give the empty state a usable click area. */
.pws-edit--rich { display: block; min-height: 1.4em; }
.pws-edit--rich > :last-child { margin-bottom: 0; }
.pws-palette-dd { position: relative; }
.pws-palette-dd-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  border: 1px solid var(--surface-border, #d7e0eb); background: var(--control-bg, #fff); border-radius: .55rem; padding: .4rem .55rem;
  color: inherit;
  transition:
    transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.pws-palette-dd-toggle:active { transform: scale(var(--press-scale, 0.97)); }
.pws-palette-dd-menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .35rem);
  background: var(--surface, #fff); border: 1px solid var(--surface-border, #d7e0eb); border-radius: .75rem; padding: .7rem;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.12));
  color: var(--text, inherit);
  transform-origin: top center;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  @starting-style {
    opacity: 0;
    transform: scale(0.96);
  }
}
.pws-palette-dd-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: .35rem 0 .35rem; color: var(--muted, #5b6b78); }
.pws-palette-dd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.pws-palette-dd-grid--full { grid-template-columns: repeat(8, 1fr); }
.pws-swatch, .pws-swatch-btn {
  width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); display: inline-block;
}
.pws-swatch-btn { padding: 0; cursor: pointer; }
.pws-swatch-btn.active { outline: 2px solid #111; outline-offset: 1px; }
.pws-palette-dd-custom { display: grid; gap: .35rem; margin-top: .65rem; font-size: .8rem; }
.pws-insert-popover {
  border: 1px solid var(--surface-border, #d7e0eb); border-radius: .85rem; padding: .75rem; background: #fff; margin-bottom: .75rem;
}
/* —— Site responsiveness (container-driven, so the builder preview matches a real device) —— */
@container pws (max-width: 900px) {
  .pws-w-third { grid-column: span 6; }
}
@container pws (max-width: 760px) {
  .pws-w-half, .pws-w-third, .pws-w-two-thirds { grid-column: span 12; }
  .pws-columns { grid-template-columns: 1fr; }
  .pws-hero--classic { grid-template-columns: 1fr; padding: 2rem 1.25rem; }
  .pws-hero--classic .pws-hero-media, .pws-hero--editorial .pws-hero-media { min-height: 200px; }
  .pws-hero--bleed { min-height: min(70dvh, 520px); }
  .pws-h-auto .pws-hero--bleed { min-height: 0; }
  .pws-h-sm .pws-hero--bleed { min-height: min(26dvh, 200px); }
  .pws-h-md .pws-hero--bleed { min-height: min(38dvh, 300px); }
  .pws-h-lg .pws-hero--bleed { min-height: min(52dvh, 400px); }
  .pws-h-xl .pws-hero--bleed { min-height: min(70dvh, 520px); }
  .pws-hero--bleed .pws-hero-overlay { padding: 2.5rem 1.25rem 2rem; }
  .pws-h-auto .pws-hero--bleed .pws-hero-overlay,
  .pws-h-sm .pws-hero--bleed .pws-hero-overlay { padding: 1.5rem 1.25rem 1.25rem; }
  .pws-h-md .pws-hero--bleed .pws-hero-overlay { padding: 2rem 1.25rem 1.5rem; }
  .pws-hero--bold { padding: 3rem 1.25rem 0; gap: 1.5rem; }
  .pws-hero--minimal { padding: 3rem 1.25rem 2rem; }
  .pws-section-grid { padding: 1rem .9rem; }
  .pws-section-inner { padding: calc(1.35rem * var(--pws-density, 1)) calc(1.25rem * var(--pws-density, 1)); }
  .pws-doc-row, .pws-var--features-list .pws-feature-card { padding: calc(1.05rem * var(--pws-density, 1)) calc(1.15rem * var(--pws-density, 1)); }
  .pws-faq-item { padding: calc(1.05rem * var(--pws-density, 1)) calc(1.2rem * var(--pws-density, 1)); }
  /* A nowrap download link next to a long filename is the classic overflow culprit. */
  .pws-doc-link { white-space: normal; }
  .pws-event-card { gap: .75rem; }
  .pws-story-card p { font-size: 1.05rem; }
  .pws-footer-inner { flex-direction: column; }
  /* Pin dense auto-fit grids before they squeeze into cramped two-column layouts. */
  .pws-feature-grid, .pws-quote-grid, .pws-event-grid, .pws-news-grid,
  .pws-board-grid, .pws-gallery { grid-template-columns: 1fr; }
  .pws-var--documents-cards .pws-doc-list { grid-template-columns: 1fr; }
  .pws-var--gallery-masonry .pws-gallery { columns: 1; }
}
@container pws (max-width: 520px) {
  .pws-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pws-sponsor-grid, .pws-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pws-var--gallery-strip .pws-gallery-item { flex-basis: 78%; }
  .pws-subscribe-form .pws-cta,
  .pws-contact-form .pws-cta { width: 100%; justify-content: center; }
}
@container pws (max-width: 380px) {
  .pws-stat-grid { grid-template-columns: 1fr; }
  .pws-logo + .pws-brand-name { display: none; }
}

/* —— Builder chrome (window-driven: this is app UI, not site content) —— */
@media (max-width: 1200px) {  /* was 1100 — Axis B, lg */
  .pws-builder { grid-template-columns: 1fr; min-height: 0; }
  .pws-builder-rail, .pws-builder-inspector {
    border-right: 0; border-left: 0;
    border-bottom: 1px solid var(--surface-border, #d7e0eb);
    max-height: 22rem;
  }
  .pws-builder-inspector { border-bottom: 0; border-top: 1px solid var(--surface-border, #d7e0eb); }
  .pws-builder-stage { padding: .75rem .75rem 1.5rem; }
}
@media (max-width: 640px) {
  .pws-builder-stage-toolbar { gap: .4rem; }
  .pws-device-toggle { flex-wrap: wrap; }
  .pws-preset-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pws-template-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .media-picker-shortcuts, .media-picker-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .media-picker-pending { grid-template-columns: 1fr; }
  .media-picker-pending img { width: 100%; height: auto; }
}

/* — Newsletter studio (drag-drop builder) — */
.nl-studio {
  display: grid;
  grid-template-columns: minmax(168px, 200px) minmax(0, 1fr) minmax(220px, 280px);
  grid-template-rows: minmax(0, 1fr);
  min-height: 28rem;
  height: calc(100dvh - 20rem);
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.nl-studio-rail, .nl-studio-inspector {
  background: var(--surface-alt, #f5f8fc);
  padding: .85rem;
  overflow: auto;
  min-height: 0;
}
.nl-studio-rail { border-right: 1px solid var(--surface-border, #d7e0eb); }
.nl-studio-inspector { border-left: 1px solid var(--surface-border, #d7e0eb); }
.nl-studio-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.nl-studio-stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  align-items: end;
  justify-content: space-between;
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
  border-bottom: 1px solid var(--surface-border, #d7e0eb);
}
.nl-studio-stage-toolbar-start,
.nl-studio-stage-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  align-items: end;
}
.nl-width-field { display: grid; gap: .2rem; }
.nl-width-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-strong, #52677f);
}
.nl-width-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.nl-width-toggle .btn { min-width: 2.6rem; }
.nl-canvas-wrap {
  flex: 1;
  overflow: auto;
  padding: 1.5rem .75rem 2rem;
}
.nl-canvas {
  margin: 0 auto;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(20, 40, 70, .12);
  overflow: hidden;
}
.nl-canvas-body {
  padding: 12px 32px 32px;
  font-size: 16px;
  line-height: 1.55;
}
.nl-canvas--phone .nl-canvas-body,
.nl-canvas--phone .nl-email-header,
.nl-canvas--phone .nl-email-footer {
  padding-left: 18px;
  padding-right: 18px;
}
.nl-email-accent { font-size: 0; line-height: 0; }
.nl-email-header { padding: 28px 32px 18px; }
.nl-email-header--left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 12px;
}
.nl-email-header--hero {
  padding: 36px 28px;
  text-align: center;
}
.nl-email-header--minimal { padding: 32px 32px 8px; }
.nl-email-header--classic { text-align: center; }
.nl-email-logo {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 72px;
  height: auto;
  border: 0;
}
.nl-email-logo--center { margin: 0 auto 16px; }
.nl-email-header--hero .nl-email-logo--center { margin: 0 auto 14px; max-width: 160px; max-height: 64px; }
.nl-email-header--left .nl-email-logo { flex: none; max-width: 180px; }
.nl-email-header--minimal .nl-email-logo { margin-bottom: 18px; }
.nl-email-title {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
}
.nl-email-header--left .nl-email-title { font-size: 24px; }
.nl-email-header--hero .nl-email-title { font-size: 28px; line-height: 1.2; }
.nl-email-header--minimal .nl-email-title {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.nl-email-footer {
  padding: 22px 32px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.nl-canvas-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #52677f;
  border: 2px dashed #c5d0de;
  border-radius: 8px;
  margin: 1rem 0;
}
.nl-studio-rail-head strong {
  color: var(--heading, var(--text, #15231f));
}
.nl-palette-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
  margin: .85rem 0 .35rem;
}
.nl-palette-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .65rem;
  margin-bottom: .35rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: 8px;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--text, #183451);
  cursor: grab;
}
.nl-palette-item:hover { border-color: var(--brand-accent, #2867D7); }
.nl-palette-item strong {
  font-size: .9rem;
  color: var(--heading, var(--text, #15231f));
}
.nl-palette-item .muted {
  font-size: .75rem;
  color: var(--muted, #74869b);
}
.nl-outline-list .btn-link {
  color: var(--text, #183451);
}
.nl-outline-list { list-style: none; padding: 0; margin: 0; }
.nl-outline-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .35rem;
  padding: .25rem 0;
}
.nl-outline-list li.is-selected > button { font-weight: 700; }
.nl-block {
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px;
  margin: 0;
  padding: 0;
}
.nl-block.is-selected, .nl-block:hover {
  border-color: var(--brand-accent, #2867D7);
  background: rgba(40, 103, 215, .04);
}
.nl-block-chrome {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: #52677f;
  padding: 0 .15rem;
  background: color-mix(in srgb, #fff 88%, transparent);
  opacity: 0;
  pointer-events: none;
}
.nl-block:hover .nl-block-chrome, .nl-block.is-selected .nl-block-chrome {
  opacity: 1;
  pointer-events: auto;
}
.nl-block-preview--image {
  position: relative;
}
.nl-image-resize-frame {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  right: auto;
  box-sizing: border-box;
  border: 1px dashed var(--brand-accent, #2867D7);
  pointer-events: none;
  z-index: 3;
}
.nl-image-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--brand-accent, #2867D7);
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .15);
  pointer-events: auto;
  touch-action: none;
}
.nl-image-handle--e {
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.nl-image-handle--w {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.nl-image-handle--se {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}
body.nl-image-resizing {
  cursor: ew-resize;
  user-select: none;
}
body.nl-image-resizing .nl-block {
  pointer-events: none;
}
body.nl-image-resizing .nl-image-handle {
  pointer-events: auto;
}
.nl-image-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  margin: 12px 0;
  padding: 1.5rem 1rem;
  border: 2px dashed #c5d0de;
  border-radius: 8px;
  text-align: center;
  color: #74869b;
  background: rgba(255, 255, 255, .65);
  cursor: pointer;
}
.nl-image-dropzone:hover,
.nl-block.nl-drop-target .nl-image-dropzone,
.nl-image-dropzone.nl-drop-target {
  border-color: var(--brand-accent, #2867D7);
  color: var(--brand-accent, #2867D7);
  background: rgba(40, 103, 215, .06);
}
.nl-inspector-image-preview {
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-nested, var(--surface-alt, #f5f8fc));
}
.nl-inspector-image-preview img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.nl-insert-rail {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.35rem;
  margin: 2px 0;
  border-radius: 4px;
}
.nl-insert-btn {
  border: 0;
  background: #2a3140;
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: .72;
  transition: opacity .12s ease, transform .12s ease, background-color .12s ease;
}
.nl-insert-rail:hover .nl-insert-btn,
.nl-insert-btn:hover,
.nl-insert-btn:focus-visible {
  opacity: 1;
  outline: none;
  transform: scale(1.06);
}
.nl-insert-rail.nl-drop-target,
.nl-block.nl-drop-target,
.nl-canvas-empty.nl-drop-target {
  background: rgba(40, 103, 215, .25);
  outline: 2px dashed var(--brand-accent, #2867D7);
}
.nl-insert-rail.nl-drop-target .nl-insert-btn {
  opacity: 1;
  background: var(--brand-accent, #2867D7);
}
.nl-insert-modal { max-width: 640px; width: min(92vw, 640px); }
.nl-insert-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.nl-insert-tabs button {
  border: 1px solid var(--surface-border, #d7e0eb);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text, inherit);
}
.nl-insert-tabs button.active {
  background: var(--accent-fill, var(--accent, #0A3A5C));
  border-color: var(--accent-fill, var(--accent, #0A3A5C));
  color: var(--accent-contrast, #fff);
}
.nl-insert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}
.nl-insert-card {
  text-align: left;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .85rem;
  background: var(--surface, #fff);
  padding: .75rem;
  display: grid;
  gap: .25rem;
  cursor: pointer;
  color: inherit;
}
.nl-insert-card:hover {
  border-color: var(--accent, #0A3A5C);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0A3A5C) 35%, transparent);
}
.nl-picker-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--surface-border, #d7e0eb);
}
.compose-body .nl-studio { min-height: 32rem; }
.compose-body-full .nl-studio {
  flex: 1 1 auto;
  min-height: 28rem;
}
@media (max-width: 1200px) {  /* was 1100 — Axis B, lg */
  .compose-meta-form { grid-template-columns: 1fr; }
  .nl-studio {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .nl-studio-rail, .nl-studio-inspector {
    max-height: 16rem;
    border-right: 0;
    border-left: 0;
  }
  .nl-studio-rail { border-bottom: 1px solid var(--surface-border, #d7e0eb); }
  .nl-studio-inspector { border-top: 1px solid var(--surface-border, #d7e0eb); }
  .compose-body-full .nl-studio {
    height: auto;
    min-height: 32rem;
  }
}

.newsletter-workspace--live {
  gap: .85rem;
  min-width: 0;
}
.page .content:has(.newsletter-workspace--live) {
  display: flex;
  flex-direction: column;
}
.page .content:has(.newsletter-workspace--live) .newsletter-workspace--live {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page .content:has(.newsletter-workspace--live) .compose-body-full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nl-live-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: end;
  padding: .85rem 1rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.nl-live-bar-field { min-width: 11rem; }
.nl-live-bar-field--grow { flex: 1 1 16rem; min-width: 14rem; }
.nl-live-bar-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--muted-strong, #52677f);
}
.nl-live-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-left: auto;
}
.nl-live-panel {
  padding: 1rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--surface-border, #d7e0eb);
}
.flyer-script-editor {
  margin-top: .75rem;
}
.flyer-script-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.flyer-script-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.45;
  min-height: 16rem;
  white-space: pre-wrap;
}
.nl-edit { outline: none; min-width: 1ch; cursor: text; }
.nl-block-preview .nl-edit:hover,
.nl-block-preview .nl-edit:focus {
  box-shadow: inset 0 0 0 2px rgba(40, 103, 215, .35);
  border-radius: 2px;
}
.nl-edit--rich { display: block; min-height: 1.4em; }
.nl-edit--rich > :last-child { margin-bottom: 0; }
.nl-canvas .nl-edit--button,
.nl-canvas a[data-button="true"] {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 4px;
  background: var(--brand-button, #2563EB);
  color: var(--brand-button-text, #fff);
  text-decoration: none;
  font-weight: bold;
  cursor: text;
}
.nl-canvas a:not([data-button="true"]) {
  color: var(--brand-link, #1D4ED8);
}
.nl-block-preview a { cursor: text; }

/* Member Videos library */
.video-player-panel { border: 1px solid var(--surface-border, #dfe7e3); }
.video-player-meta { padding: 1rem 1.15rem 1.15rem; }
.video-player-desc {
  color: var(--muted-strong, #5f726c);
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: .95rem;
}
.video-library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.video-playlist-filter {
  display: grid;
  gap: .45rem;
}
.video-playlist-filter-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-strong, #5f726c);
}
.video-playlist-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: .1rem .05rem .35rem;
  scroll-snap-type: x proximity;
}
.video-playlist-chip {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: min(20rem, 82vw);
  min-height: var(--tap-target, 2.75rem);
  border: 1px solid var(--surface-border, #dfe7e3);
  background: var(--control-bg, var(--surface, #fff));
  color: var(--text, #21352f);
  border-radius: 999px;
  padding: .4rem .55rem .4rem .9rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.video-playlist-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.video-playlist-chip-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  padding: .12rem .4rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  background: var(--surface-nested, #f1f5f9);
  color: var(--muted-strong, #5f726c);
}
.video-playlist-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #0f766e) 45%, var(--surface-border, #dfe7e3));
  background: var(--control-hover-bg, var(--surface-alt, #f4f8f6));
}
.video-playlist-chip.is-active {
  background: var(--accent, #0f766e);
  border-color: var(--accent, #0f766e);
  color: var(--accent-contrast, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0f766e) 35%, transparent);
}
.video-playlist-chip.is-active .video-playlist-chip-count {
  background: color-mix(in srgb, var(--accent-contrast, #fff) 22%, transparent);
  color: var(--accent-contrast, #fff);
}
.video-playlist-chip:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
}
@media (min-width: 901px) {  /* was 768 — Axis B */
  .video-playlist-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: .1rem;
  }
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: .85rem;
}
.video-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--surface-border, #dfe7e3);
  background: var(--surface, #fff);
  border-radius: var(--radius-md, .55rem);
  overflow: hidden;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.video-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #0f766e) 30%, var(--surface-border, #dfe7e3));
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .08));
}
.video-card.is-active {
  border-color: var(--accent, #0f766e);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0f766e) 28%, transparent);
}
.video-card:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
}
.video-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .35));
  opacity: .85;
}
.video-card-play svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.video-card-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .7rem .8rem .85rem;
}
.video-card-body strong {
  font-size: .92rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-list { padding: .35rem; }
.video-list-row {
  display: flex;
  gap: .85rem;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: inherit;
  padding: .55rem .6rem;
  cursor: pointer;
}
.video-list-row:hover { background: color-mix(in srgb, var(--accent, #0f766e) 6%, var(--surface, #fff)); }
.video-list-row.is-active {
  background: color-mix(in srgb, var(--accent, #0f766e) 10%, var(--surface, #fff));
  box-shadow: inset 3px 0 0 var(--accent, #0f766e);
}
.video-list-row:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 1px;
}
.video-list-thumb {
  width: 7.5rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .35rem;
  background: #0f172a;
  flex: 0 0 auto;
}
.video-list-body { min-width: 0; }
.video-list-body strong {
  display: block;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .video-list-thumb { width: 5.5rem; }
  .video-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
}
@media (max-width: 420px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   FLOOR PLAN EDITOR — modern canvas chrome. Element colors/positions are set
   inline by vendor-floor-plan.js (it reads --accent at render time so tenant
   branding carries onto the canvas); this file owns everything around the
   canvas — toolbar, viewport frame, legend, and properties panel — plus the
   shared class names (.fp-table, .fp-handle, .fp-dim, .fp-grid, .fp-marquee,
   .fp-guide-v/h) the JS attaches to elements it creates.
   ============================================================================ */
.fp-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.fp-editor-head p { max-width: 42rem; }

/* Full screen mode — same fixed-overlay pattern as .pb-drawer-fullscreen, but
   laid out as a column so the canvas (not the toolbar/panel chrome) absorbs
   all of the reclaimed viewport height. */
.fp-editor:focus-visible { outline: none; }
.fp-editor.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1070;
    margin: 0;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-4) var(--space-5);
}
.fp-editor.is-fullscreen .fp-editor-head,
.fp-editor.is-fullscreen .fp-meta-row { flex: 0 0 auto; }
.fp-editor.is-fullscreen > .row { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fp-editor.is-fullscreen > .row > .col-lg-8,
.fp-editor.is-fullscreen > .row > .col-lg-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fp-editor.is-fullscreen > .row > .col-lg-4 { overflow-y: auto; }
.fp-editor.is-fullscreen .fp-zoom-bar,
.fp-editor.is-fullscreen .fp-legend,
.fp-editor.is-fullscreen > .row > .col-lg-8 > p { flex: 0 0 auto; }
.fp-editor.is-fullscreen .fp-viewport {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.fp-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.fp-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .35rem;
    max-width: 100%;
    background: var(--surface-nested);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
}
.fp-toolbar-group .btn {
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    overflow-wrap: normal;
}
.fp-toolbar-divider {
    width: 1px;
    align-self: stretch;
    min-height: 1.6rem;
    background: var(--divider);
}
.fp-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow-wrap: normal;
}
.fp-icon-btn .gl-icon { flex: 0 0 auto; }
@media (max-width: 900px) {
    .fp-toolbar { width: 100%; }
    .fp-toolbar-divider { display: none; }
    .fp-toolbar-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-radius: var(--radius-md);
        padding: .4rem;
        gap: .4rem;
    }
    .fp-toolbar-group .btn,
    .fp-toolbar > .btn,
    .fp-toolbar > .fp-icon-btn {
        width: 100%;
        justify-content: flex-start;
        min-height: var(--tap-target);
        padding-left: .85rem;
        padding-right: .85rem;
    }
}

.fp-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, max-content)) minmax(14rem, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-nested);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}
.fp-meta-field { display: grid; gap: .3rem; min-width: 0; }
.fp-meta-field label { font-size: .78rem; font-weight: 650; color: var(--label); }
.fp-meta-field-wide { grid-column: span 1; }
@media (max-width: 640px) {
    .fp-meta-row { grid-template-columns: 1fr 1fr; }
    .fp-meta-field-wide { grid-column: 1 / -1; }
}

.fp-zoom-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .65rem;
}
.fp-zoom-btn { width: 2rem; padding: 0; font-weight: 700; }
.fp-zoom-value {
    min-width: 3rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--heading);
}
.fp-reset-zoom { padding: 0 .3rem; }
.fp-zoom-hint { white-space: nowrap; }

.fp-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.fp-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.fp-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--card-border);
    background: var(--surface);
    font-size: .78rem;
    font-weight: 650;
    color: var(--muted-strong);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fp-toggle:hover .fp-toggle-pill { border-color: color-mix(in srgb, var(--accent) 35%, var(--card-border)); }
.fp-toggle input:checked + .fp-toggle-pill {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.fp-toggle input:focus-visible + .fp-toggle-pill { outline: 2px solid var(--accent); outline-offset: 2px; }

.fp-grid-settings {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    background: var(--surface-nested);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    font-size: .78rem;
}
.fp-grid-settings label { color: var(--muted-strong); font-weight: 650; white-space: nowrap; }
.fp-grid-settings select, .fp-grid-settings input {
    height: 1.85rem;
    padding: 0 .4rem;
    width: auto;
    min-width: 3.6rem;
}

.fp-viewport {
    position: relative;
    overflow: auto;
    max-height: 70dvh;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
        radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%),
        linear-gradient(165deg, var(--surface-nested) 0%, var(--surface-alt) 100%);
    box-shadow: var(--surface-sheen, none), var(--shadow-sm);
}
#fp-stage.fp-stage {
    display: block;
    min-height: 240px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%, var(--surface) 65%);
}

.fp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    font-size: .76rem;
    color: var(--muted-strong);
}
.fp-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.fp-legend-swatch {
    width: .7rem;
    height: .7rem;
    border-radius: .22rem;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.fp-legend-table { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #0b3d2e), color-mix(in srgb, var(--accent) 62%, #06281f)); }
.fp-legend-reserved { background: linear-gradient(145deg, #94a3b8, #64748b); }
.fp-legend-hallway { background: repeating-linear-gradient(135deg, rgba(148,163,184,.55) 0 6px, rgba(148,163,184,.32) 6px 12px); }
.fp-legend-door { background: linear-gradient(145deg, #f59e0b, #d97706); }
.fp-legend-room { background: linear-gradient(145deg, rgba(129,140,248,.6), rgba(99,102,241,.4)); box-shadow: inset 0 0 0 1px rgba(79,70,229,.5); }
.fp-legend-demo { background: linear-gradient(145deg, #6366f1, #4338ca); }
.fp-legend-bathroom { background: linear-gradient(145deg, #67e8f9, #06b6d4); }

/* Elements are positioned/colored inline by JS; this owns shape, depth, and motion. */
.fp-table {
    border-radius: .5rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fp-table:hover { filter: brightness(1.07); }
.fp-table.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, #fff 0%), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 20px rgba(15, 23, 42, .3);
}
.fp-table[data-fp-type="door"] { border-radius: .65rem .65rem .2rem .2rem; }
.fp-table[data-fp-type="hallway"] { border-radius: .35rem; }
.fp-table[data-fp-type="room"] { border-radius: .3rem; box-shadow: none; }
.fp-table[data-fp-type="room"][data-fp-demo="true"] { box-shadow: 0 2px 6px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .22); }
.fp-table[data-fp-type="bathroom"] { border-radius: 40%; }

.fp-handle {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.fp-edit-btn,
.fp-rotate-btn {
    position: absolute;
    z-index: 7;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent, #1f6b57);
    color: var(--accent-contrast, #fff);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    line-height: 1;
}
.fp-edit-btn {
    top: -8px;
    right: -8px;
}
.fp-rotate-btn {
    top: -8px;
    left: -8px;
}
.fp-edit-btn:hover,
.fp-rotate-btn:hover {
    filter: brightness(1.08);
}
.fp-edit-btn:focus-visible,
.fp-rotate-btn:focus-visible {
    outline: 2px solid var(--accent, #1f6b57);
    outline-offset: 2px;
}
.fp-edit-modal .modal-body .fp-panel-section {
    margin-bottom: var(--space-3);
}
.fp-edit-modal .modal-body .fp-panel-section:last-child {
    margin-bottom: 0;
}
/* Above .fp-editor.is-fullscreen (1070) so edit works in full-screen design mode. */
.modal-backdrop:has(+ .fp-edit-modal) {
    z-index: 1075;
}
.modal-dialog.fp-edit-modal {
    z-index: 1080;
    width: min(100% - 2rem, 32rem);
    max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 44rem);
}
@media (min-width: 901px) {  /* Axis B, md */
    .modal-dialog.fp-edit-modal {
        width: min(100% - 2rem, 36rem);
        max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2rem), 52rem);
    }
}
@media (min-width: 1201px) {  /* Axis B, lg */
    .modal-dialog.fp-edit-modal {
        width: min(100% - 2rem, 40rem);
        max-height: min(calc(100dvh - var(--keyboard-inset, 0px) - 2.5rem), 60rem);
    }
}
.fp-rotate-stem {
    position: absolute;
    left: 50%;
    top: -16px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background: var(--fp-select-ring, #f0c14b);
    pointer-events: none;
    z-index: 6;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
.fp-rotate-handle {
    border-radius: 50%;
}
.fp-rotate-handle:active {
    cursor: grabbing;
}
.fp-table.is-selected .fp-rotate-handle {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.fp-dim {
    backdrop-filter: blur(2px);
    font-variant-numeric: tabular-nums;
}

.fp-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    color: color-mix(in srgb, var(--accent) 55%, var(--muted-strong));
    font-size: .85rem;
    font-weight: 650;
    padding: 1.5rem;
}
.fp-empty-hint span { max-width: 16rem; }

.fp-panel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%, var(--surface) 60%);
    box-shadow: var(--shadow-sm), var(--surface-sheen, none);
    padding: var(--space-4);
}
.fp-panel.fp-multi-bar {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (min-width: 901px) {
    .fp-panel.fp-multi-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.fp-panel-title {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.05rem;
    color: var(--heading);
    margin-bottom: .65rem;
}
.fp-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: var(--space-6) var(--space-4);
    color: var(--muted);
    background: var(--surface-nested);
    border-style: dashed;
}
.fp-panel-empty .gl-icon { color: color-mix(in srgb, var(--accent) 60%, var(--muted)); }
.fp-panel-section { margin-bottom: var(--space-3); }
.fp-panel-section:last-child { margin-bottom: 0; }
.fp-panel-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; }
.fp-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.fp-chip-row .btn { border-radius: var(--radius-pill); }

.venue-photos-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.venue-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}
.venue-photo-card {
    background: var(--surface-nested);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
}
.venue-photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    background: var(--surface);
}
.venue-photo-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.venue-photo-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .venue-photo-card-link:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}
.venue-photo-caption {
    display: block;
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--muted-strong);
    line-height: 1.3;
}

/* ── Public conference page (full webpage) ─────────────────────────────── */
.cfp-canvas-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding: 1.25rem 1rem 2rem;
    background: var(--bg, #f6f8fb);
    border-top: 1px solid var(--card-border, #e3e9f1);
}
.cfp {
    --cfp-accent: #0f3d2e;
    --cfp-ink: #12241c;
    --cfp-muted: #5a6d64;
    --cfp-paper: #f3f0e8;
    --cfp-surface: #fffcf7;
    --cfp-line: color-mix(in srgb, var(--cfp-ink) 12%, transparent);
    --cfp-display: "Manrope", "Segoe UI", system-ui, sans-serif;
    --cfp-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    min-height: 100dvh;
    color: var(--cfp-ink);
    scroll-behavior: smooth;
    background:
        radial-gradient(ellipse 90% 55% at 12% -8%, color-mix(in srgb, var(--cfp-accent) 18%, transparent), transparent 58%),
        radial-gradient(ellipse 70% 45% at 92% 8%, color-mix(in srgb, var(--cfp-accent) 10%, transparent), transparent 55%),
        linear-gradient(180deg, #e8efe9 0%, var(--cfp-paper) 38%, #ebe6dc 100%);
    font-family: var(--cfp-body);
    color-scheme: light;
}
.cfp-wrap {
    width: min(1120px, calc(100% - 2.5rem));
    margin-inline: auto;
}
.cfp-top {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px) saturate(1.15);
    background: color-mix(in srgb, var(--cfp-surface) 82%, transparent);
    border-bottom: 1px solid var(--cfp-line);
}
.cfp-top-inner {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: .85rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cfp-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}
.cfp-brand-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.cfp-brand-name {
    font-family: var(--cfp-display);
    font-weight: 650;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cfp-top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .95rem;
    justify-content: flex-end;
}
.cfp-top-nav a {
    color: var(--cfp-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
}
.cfp-top-nav a:hover { color: var(--cfp-accent); }

.cfp-banner {
    width: min(1120px, calc(100% - 2rem));
    margin: .85rem auto 0;
    padding: .7rem 1rem;
    border-radius: .65rem;
    font-size: .92rem;
}
.cfp-banner--danger { background: #fde8e8; color: #8a1f1f; border: 1px solid #f3c4c4; }
.cfp-banner--ok { background: #e6f4ec; color: #1d5c3a; border: 1px solid #b7dfc6; }
.cfp-banner--warn { background: #fff6df; color: #7a5a12; border: 1px solid #edd9a0; }
.cfp-loading {
    display: grid;
    place-items: center;
    gap: .65rem;
    min-height: 50dvh;
    color: var(--cfp-muted);
}

.cfp-hero {
    position: relative;
    isolation: isolate;
    min-height: min(78dvh, 640px);
    display: grid;
    align-items: end;
    overflow: hidden;
    color: #f7faf8;
}
.cfp-hero--wash {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--cfp-accent) 92%, #06140f) 0%,
            color-mix(in srgb, var(--cfp-accent) 55%, #1a3d32) 48%,
            #24352f 100%);
}
.cfp-hero--wash::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 85%);
    animation: cfp-grid-drift 28s linear infinite;
}
.cfp-hero--photo {
    background:
        linear-gradient(180deg, rgba(8, 18, 14, .28), rgba(8, 18, 14, .72)),
        var(--cfp-hero-image) center / cover no-repeat;
}
.cfp-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 60% at 20% 80%, color-mix(in srgb, var(--cfp-accent) 35%, transparent), transparent 65%),
        linear-gradient(180deg, transparent 30%, rgba(6, 14, 11, .55) 100%);
    pointer-events: none;
}
.cfp-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: clamp(4.5rem, 12dvh, 7rem) 0 clamp(2.75rem, 7dvh, 4rem);
    animation: cfp-rise .7s cubic-bezier(.22, 1, .36, 1) both;
}
.cfp-kicker {
    margin: 0 0 .85rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .88;
}
.cfp-title {
    margin: 0 0 .9rem;
    font-family: var(--cfp-display);
    font-weight: 650;
    font-size: clamp(2.4rem, 7vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    max-width: 16ch;
    color: inherit;
}
.cfp-theme {
    margin: -.35rem 0 .85rem;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 550;
    font-style: italic;
    max-width: 28rem;
    opacity: .95;
    color: inherit;
}
.cfp-lede {
    margin: 0 0 1.6rem;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    max-width: 36rem;
    opacity: .92;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
}
.cfp-dot { opacity: .55; }
.cfp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.cfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .78rem 1.2rem;
    border-radius: .55rem;
    font-weight: 650;
    font-size: .95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.cfp-btn:hover { transform: translateY(-1px); }
.cfp-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.cfp-btn--solid {
    background: #fff;
    color: var(--cfp-accent);
}
.cfp-btn--solid:hover { background: #f3faf6; }
.cfp-hero .cfp-btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,.45);
    color: #fff;
}
.cfp-hero .cfp-btn--ghost:hover { background: rgba(255,255,255,.1); }
.cfp-access .cfp-btn--ghost,
.cfp-access-actions .cfp-btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--cfp-accent) 45%, transparent);
    color: var(--cfp-accent);
}
.cfp-access .cfp-btn--ghost:hover { background: color-mix(in srgb, var(--cfp-accent) 8%, transparent); }
.cfp-access .cfp-btn--solid {
    background: var(--cfp-accent);
    color: #fff;
}
.cfp-access .cfp-btn--solid:hover {
    background: color-mix(in srgb, var(--cfp-accent) 88%, #000);
    color: #fff;
}

.cfp-section { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
.cfp-section[id] { scroll-margin-top: 4.5rem; }
.cfp-section-head { margin-bottom: 1.35rem; max-width: 40rem; }
.cfp-section-title {
    margin: 0 0 .45rem;
    font-family: var(--cfp-display);
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    font-weight: 650;
    letter-spacing: -.025em;
    color: var(--cfp-ink);
}
.cfp-section-lede {
    margin: 0;
    color: var(--cfp-muted);
    font-size: 1.02rem;
    line-height: 1.5;
}

.cfp-about {
    background: color-mix(in srgb, var(--cfp-surface) 70%, transparent);
    border-block: 1px solid var(--cfp-line);
}
.cfp-about-inner { max-width: 42rem; }
.cfp-about-body {
    margin: 0 0 .75rem;
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: 1.05rem;
}
.cfp-meta {
    margin: 0;
    color: var(--cfp-muted);
    font-size: .88rem;
}

.cfp-floor {
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--cfp-accent) 5%, transparent) 40%, transparent);
}
.cfp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.25rem;
    margin: 0 0 1rem;
    color: var(--cfp-muted);
    font-size: .86rem;
    font-weight: 600;
}
.cfp-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.cfp-swatch {
    width: .85rem;
    height: .85rem;
    border-radius: .2rem;
    display: inline-block;
}
.cfp-swatch--claimed { background: color-mix(in srgb, var(--cfp-accent) 88%, #000); }
.cfp-swatch--open { background: #b8c3bc; }
.cfp-floor-stage {
    border-radius: 1rem;
    padding: .85rem;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--cfp-accent) 10%, #fff), var(--cfp-surface)),
        repeating-linear-gradient(-18deg, transparent, transparent 10px, color-mix(in srgb, var(--cfp-ink) 3%, transparent) 10px, color-mix(in srgb, var(--cfp-ink) 3%, transparent) 11px);
    border: 1px solid var(--cfp-line);
    box-shadow: 0 24px 50px color-mix(in srgb, var(--cfp-ink) 10%, transparent);
    animation: cfp-rise .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}
.cfp-floor-canvas {
    position: relative;
    width: 100%;
    background: #e8eeea;
    border: 1px solid color-mix(in srgb, var(--cfp-ink) 14%, transparent);
    border-radius: .55rem;
    overflow: hidden;
}
.cfp-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    font-size: clamp(.58rem, 1.1vw, .72rem);
    font-weight: 650;
    line-height: 1.15;
    white-space: pre-line;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.35);
    cursor: default;
    transition: filter .2s ease, box-shadow .2s ease;
}
.cfp-area--claimed {
    background: color-mix(in srgb, var(--cfp-accent) 86%, #000);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.cfp-area--open {
    background: rgba(148, 163, 160, .55);
    color: #1e293b;
}
.cfp-area--hall {
    background: rgba(148, 163, 184, .55);
    color: #1e293b;
    border-style: dashed;
    border-color: rgba(30, 41, 59, .55);
}
.cfp-area--door {
    background: rgba(180, 108, 28, .82);
    color: #fff;
}
.cfp-area--room {
    background: rgba(70, 110, 98, .28);
    color: #1c332c;
    border: 1.5px dashed rgba(40, 90, 70, .55);
}
.cfp-area--bath {
    background: rgba(6, 150, 150, .78);
    color: #fff;
}
.cfp-area--misc {
    background: rgba(100, 116, 139, .45);
    color: #1e293b;
}
.cfp-area-desc {
    font-size: .65rem;
    font-weight: 500;
    opacity: .95;
    white-space: normal;
    line-height: 1.2;
}
.cfp-area--claimed:hover,
.cfp-area--open:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cfp-accent) 35%, transparent);
    z-index: 2;
}

.cfp-vendors { background: color-mix(in srgb, var(--cfp-surface) 88%, #fff); }
.cfp-empty {
    margin: 0;
    color: var(--cfp-muted);
    font-size: 1rem;
}
.cfp-vendor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.cfp-vendor-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr);
    gap: .75rem 1rem;
    align-items: baseline;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--cfp-line);
    animation: cfp-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}
.cfp-vendor-row:nth-child(1) { animation-delay: .04s; }
.cfp-vendor-row:nth-child(2) { animation-delay: .08s; }
.cfp-vendor-row:nth-child(3) { animation-delay: .12s; }
.cfp-vendor-row:nth-child(4) { animation-delay: .16s; }
.cfp-vendor-row:nth-child(5) { animation-delay: .2s; }
.cfp-vendor-row:hover {
    background: color-mix(in srgb, var(--cfp-accent) 5%, transparent);
}
.cfp-vendor-name {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.01em;
}
.cfp-vendor-pkg {
    color: var(--cfp-accent);
    font-weight: 650;
    font-size: .92rem;
}
.cfp-vendor-table {
    color: var(--cfp-muted);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cfp-access {
    padding-bottom: clamp(3.5rem, 9vw, 5.5rem);
}
.cfp-access-panel {
    max-width: 40rem;
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--cfp-line);
    background: var(--cfp-surface);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--cfp-ink) 8%, transparent);
}
.cfp-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.25rem;
}
.cfp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-top: 1.1rem;
}
.cfp-field {
    display: grid;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 650;
    color: var(--cfp-muted);
}
.cfp-field em { font-style: normal; font-weight: 500; opacity: .8; }
.cfp-field--full { grid-column: 1 / -1; }
.cfp-input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--cfp-ink) 16%, transparent);
    border-radius: .5rem;
    padding: .65rem .75rem;
    background: #fff;
    color: var(--cfp-ink);
    font: inherit;
    font-weight: 500;
}
.cfp-input:focus {
    outline: 2px solid color-mix(in srgb, var(--cfp-accent) 45%, transparent);
    border-color: var(--cfp-accent);
}

.cfp-foot {
    border-top: 1px solid var(--cfp-line);
    padding: 1.25rem 0 1.75rem;
    color: var(--cfp-muted);
    font-size: .88rem;
}
.cfp-foot-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    align-items: center;
}
.cfp-foot-sep { opacity: .45; }

@keyframes cfp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes cfp-grid-drift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 48px 48px, 48px 48px; }
}

@media (max-width: 900px) {  /* was 720 — Axis B */
    .cfp-top-nav { display: none; }
    .cfp-hero { min-height: min(70dvh, 520px); }
    .cfp-title { max-width: none; }
    .cfp-vendor-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
    .cfp-vendor-table { text-align: left; }
    .cfp-form { grid-template-columns: 1fr; }
    .cfp-floor-stage { padding: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cfp-hero-inner,
    .cfp-floor-stage,
    .cfp-vendor-row,
    .cfp-hero--wash::before {
        animation: none !important;
    }
    .cfp-btn:hover { transform: none; }
}

/* ── Annual conference page template (cfa) ───────────────────────────────── */
.cfa-shell { min-height: 100dvh; }
.cfa {
    --cfa-accent: var(--brand-accent, #1c2856);
    --cfa-ink: #142033;
    --cfa-muted: #5a6678;
    --cfa-paper: #f7f8fb;
    --cfa-surface: #ffffff;
    --cfa-line: color-mix(in srgb, var(--cfa-ink) 12%, transparent);
    --cfa-display: "Manrope", "Segoe UI", system-ui, sans-serif;
    --cfa-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    color: var(--cfa-ink);
    background:
        linear-gradient(180deg, #eef2f8 0%, var(--cfa-paper) 28%, #f3f4f8 100%);
    font-family: var(--cfa-body);
}
.cfa-wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.cfa-top {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--cfa-surface) 90%, transparent);
    border-bottom: 1px solid var(--cfa-line);
    backdrop-filter: blur(10px);
}
.cfa-top-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 4rem; padding-block: .55rem;
}
.cfa-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cfa-brand-logo { height: 2rem; width: auto; object-fit: contain; }
.cfa-brand-name {
    font-family: var(--cfa-display); font-size: 1rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfa-top-nav { display: flex; flex-wrap: wrap; gap: .85rem 1.1rem; }
.cfa-top-nav a {
    color: var(--cfa-muted); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.cfa-top-nav a:hover { color: var(--cfa-accent); }
.cfa-hero {
    position: relative; overflow: hidden; color: #fff;
    min-height: min(78dvh, 640px); display: grid; align-items: end;
}
.cfa-hero--wash {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--cfa-accent) 94%, #000) 0%,
            color-mix(in srgb, var(--cfa-accent) 72%, #1a2744) 55%,
            #0d1528 100%);
}
.cfa-hero--photo {
    background:
        linear-gradient(180deg, rgba(8,14,28,.72), rgba(8,14,28,.88)),
        var(--cfa-hero-image) center / cover no-repeat;
}
.cfa-hero-veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 15% 100%, color-mix(in srgb, var(--cfa-accent) 35%, transparent), transparent 70%);
}
.cfa-hero-inner {
    position: relative; z-index: 1; padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
    max-width: 46rem; animation: cfa-rise .7s cubic-bezier(.22, 1, .36, 1) both;
}
.cfa-hero-logo { height: 3.5rem; width: auto; margin-bottom: 1rem; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.cfa-kicker {
    margin: 0 0 .75rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; opacity: .88;
}
.cfa-kicker--muted { color: var(--cfa-muted); opacity: 1; letter-spacing: .12em; }
.cfa-title {
    margin: 0 0 .85rem; font-family: var(--cfa-display);
    font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.02; font-weight: 700;
}
.cfa-theme {
    margin: 0 0 1.35rem; font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.45; color: rgba(255,255,255,.9); max-width: 38rem;
}
.cfa-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.cfa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.65rem; padding: .55rem 1.15rem; border-radius: 999px;
    border: 1px solid transparent; font-weight: 700; text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cfa-btn:hover { transform: translateY(-1px); }
.cfa-btn--solid { background: #fff; color: var(--cfa-accent); }
.cfa-btn--solid:hover { background: #f4f7ff; }
.cfa-btn--ghost { background: transparent; border-color: rgba(255,255,255,.42); color: #fff; }
.cfa-btn--ghost:hover { background: rgba(255,255,255,.08); }
.cfa-btn--on-light.cfa-btn--solid { background: var(--cfa-accent); color: #fff; }
.cfa-btn--on-light.cfa-btn--solid:hover { background: color-mix(in srgb, var(--cfa-accent) 88%, #000); }
.cfa-btn--on-light.cfa-btn--ghost {
    border-color: color-mix(in srgb, var(--cfa-accent) 40%, transparent);
    color: var(--cfa-accent);
}
.cfa-section { padding: clamp(2.75rem, 7vw, 4.75rem) 0; }
.cfa-section[id] { scroll-margin-top: 4.75rem; }
.cfa-section-head { margin-bottom: 1.5rem; max-width: 42rem; }
.cfa-section-head--center { margin-inline: auto; text-align: center; }
.cfa-section-title {
    margin: 0 0 .65rem; font-family: var(--cfa-display);
    font-size: clamp(1.65rem, 3.5vw, 2.35rem); line-height: 1.08; color: var(--cfa-ink);
}
.cfa-section-lede { margin: 0; color: var(--cfa-muted); line-height: 1.6; font-size: 1.02rem; }
.cfa-section-cta { margin-top: 1.75rem; text-align: center; }
.cfa-why { background: var(--cfa-surface); border-block: 1px solid var(--cfa-line); }
.cfa-pillars {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.cfa-pillar {
    padding: 1.35rem 1.2rem; border: 1px solid var(--cfa-line); border-radius: 1rem;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--cfa-accent) 4%, #fff));
}
.cfa-pillar-icon { font-size: 1.65rem; margin-bottom: .55rem; }
.cfa-pillar-title { margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 700; }
.cfa-pillar-body { color: var(--cfa-muted); line-height: 1.55; font-size: .96rem; }
.cfa-pillar-body p:last-child { margin-bottom: 0; }
.cfa-featured { background: color-mix(in srgb, var(--cfa-accent) 6%, #fff); }
.cfa-featured-grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center;
}
.cfa-featured-media img {
    width: 100%; border-radius: 1rem; display: block;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--cfa-ink) 12%, transparent);
}
.cfa-about-body { line-height: 1.65; color: var(--cfa-ink); }
.cfa-about-body p:last-child { margin-bottom: 0; }
.cfa-highlights { background: var(--cfa-surface); border-block: 1px solid var(--cfa-line); }
.cfa-highlights-body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .75rem; }
.cfa-highlights-body li { line-height: 1.55; }
.cfa-extra { background: color-mix(in srgb, var(--cfa-surface) 88%, var(--cfa-paper)); }
.cfa-extra-inner, .cfa-policy-inner { max-width: 44rem; }
.cfa-section-image {
    width: 100%; max-height: 22rem; object-fit: cover; border-radius: .85rem; margin-bottom: 1rem;
}
.cfa-agenda { background: var(--cfa-paper); }
.cfa-agenda-days { display: grid; gap: 1.5rem; }
.cfa-agenda-day-label {
    margin: 0 0 .85rem; font-size: 1.02rem; font-weight: 700; color: var(--cfa-accent);
}
.cfa-agenda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cfa-agenda-item {
    display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
    padding: 1rem 1.1rem; border: 1px solid var(--cfa-line); border-radius: .85rem; background: #fff;
}
.cfa-agenda-time { color: var(--cfa-muted); font-size: .92rem; }
.cfa-agenda-title { font-weight: 700; margin-bottom: .2rem; }
.cfa-agenda-location, .cfa-agenda-desc { color: var(--cfa-muted); font-size: .94rem; }
.cfa-hotel { background: var(--cfa-surface); }
.cfa-hotel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cfa-hotel-panel {
    padding: 1.35rem 1.25rem; border: 1px solid var(--cfa-line); border-radius: 1rem; background: #fff;
}
.cfa-hotel-panel--accent {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cfa-accent) 10%, #fff), #fff);
    border-color: color-mix(in srgb, var(--cfa-accent) 22%, transparent);
}
.cfa-hotel-title { margin: 0 0 .65rem; font-size: 1.1rem; }
.cfa-partner {
    color: #fff;
    background: linear-gradient(135deg, var(--cfa-accent), color-mix(in srgb, var(--cfa-accent) 70%, #000));
}
.cfa-partner-inner { max-width: 44rem; }
.cfa-partner .cfa-section-title { color: #fff; }
.cfa-partner-body { color: rgba(255,255,255,.9); line-height: 1.65; }
.cfa-partner-body ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.cfa-sponsors { background: var(--cfa-paper); border-top: 1px solid var(--cfa-line); }
.cfa-sponsor-tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cfa-sponsor-tier {
    padding: 1rem 1.1rem; border: 1px solid var(--cfa-line); border-radius: .85rem; background: #fff;
}
.cfa-sponsor-tier-name { margin: 0 0 .55rem; font-size: .95rem; color: var(--cfa-accent); text-transform: uppercase; letter-spacing: .08em; }
.cfa-sponsor-list { margin: 0; padding-left: 1rem; color: var(--cfa-ink); }
.cfa-policy { background: var(--cfa-surface); border-top: 1px solid var(--cfa-line); }
.cfa-venue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cfa-venue-photo { margin: 0; }
.cfa-venue-photo img { width: 100%; border-radius: .85rem; display: block; }
.cfa-venue-photo figcaption { margin-top: .45rem; color: var(--cfa-muted); font-size: .9rem; }
.cfa-vendors { background: var(--cfa-surface); border-top: 1px solid var(--cfa-line); }
.cfa-vendor-list { list-style: none; margin: 0; padding: 0; }
.cfa-vendor-row {
    display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: .75rem;
    padding: .85rem 0; border-bottom: 1px solid var(--cfa-line);
}
.cfa-vendor-pkg { color: var(--cfa-accent); font-weight: 600; }
.cfa-vendor-table { color: var(--cfa-muted); text-align: right; }
.cfa-empty { color: var(--cfa-muted); }
.cfa-access { background: color-mix(in srgb, var(--cfa-accent) 5%, var(--cfa-paper)); }
.cfa-access-panel {
    padding: 1.5rem 1.35rem; border: 1px solid var(--cfa-line); border-radius: 1rem; background: #fff;
}
.cfa-foot {
    border-top: 1px solid var(--cfa-line); padding: 1.25rem 0 1.75rem;
    color: var(--cfa-muted); font-size: .92rem;
}
.cfa-foot-inner { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cfa-foot-sep { opacity: .45; }
.template-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem;
}
.template-picker-card {
    display: grid; gap: .35rem; text-align: left; padding: .85rem .9rem;
    border: 1px solid var(--border, #d7dee8); border-radius: .75rem; background: var(--surface, #fff);
}
.template-picker-card.is-active {
    border-color: var(--brand-accent, #0b3d5c);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent, #0b3d5c) 35%, transparent);
}
.template-picker-swatch {
    width: 2rem; height: .45rem; border-radius: 999px; margin-bottom: .15rem;
}
@keyframes cfa-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
    .cfa-top-nav { display: none; }
    .cfa-pillars, .cfa-featured-grid, .cfa-hotel-grid { grid-template-columns: 1fr; }
    .cfa-agenda-item { grid-template-columns: 1fr; }
    .cfa-vendor-row { grid-template-columns: 1fr; }
    .cfa-vendor-table { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .cfa-hero-inner { animation: none !important; }
    .cfa-btn:hover { transform: none; }
}


/* Report builder studio — width comes from .page .content:has(.studio) above. */
.rb-page { display: flex; flex-direction: column; gap: .65rem; }
.rb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem 1.25rem;
}
.rb-top-main {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: min(100%, 28rem);
  flex: 1;
}
.rb-back {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-decoration: none;
  width: fit-content;
}
.rb-back:hover { color: var(--accent, #1f6b57); }
.rb-title-input {
  border: 0;
  background: transparent;
  font-family: var(--font-display, "Manrope", "Segoe UI", sans-serif);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 650;
  color: var(--heading, #15231f);
  line-height: 1.15;
  padding: 0;
  width: 100%;
}
.rb-title-input:focus { outline: none; }
.rb-desc-input {
  border: 0;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: .92rem;
  padding: 0;
  width: 100%;
}
.rb-desc-input:focus { outline: none; }
.rb-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

/* Wizard */
.rb-wizard {
  max-width: 52rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rb-wizard-progress {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.rb-wizard-pip {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted, #74869b);
  font-size: .85rem;
}
.rb-wizard-pip-num {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef5;
  font-weight: 750;
  font-size: .78rem;
}
.rb-wizard-pip.is-active { color: var(--heading, #15231f); font-weight: 650; }
.rb-wizard-pip.is-active .rb-wizard-pip-num,
.rb-wizard-pip.is-done .rb-wizard-pip-num {
  background: color-mix(in srgb, var(--accent, #1f6b57) 18%, #fff);
  color: var(--accent, #1f6b57);
}
.rb-wizard-panel {
  padding: 1.35rem 1.4rem 1.5rem;
  border: 1px solid var(--surface-border, #dfe7e3);
  border-radius: var(--radius-lg, .85rem);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(21, 35, 31, .06));
}
.rb-wizard-title {
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading, #15231f);
}
.rb-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.rb-wizard-starters {
  display: grid;
  gap: .65rem;
}
.rb-wizard-starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  text-align: left;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .75rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-wizard-starter:hover,
.rb-wizard-starter:focus-visible {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 14%, transparent);
  outline: none;
}
.rb-dataset-list-wide {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* Live workspace (mirrors newsletter live bar) */
.report-workspace--live { display: flex; flex-direction: column; gap: .85rem; }
.rb-live-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: flex-end;
  padding: .85rem 1rem;
  border: 1px solid var(--surface-border, #dfe7e3);
  border-radius: var(--radius-lg, .85rem);
  background: var(--surface, #fff);
}
.rb-live-bar-field { min-width: 11rem; }
.rb-live-bar-field--grow { flex: 1 1 14rem; min-width: 12rem; }
.rb-live-bar-field label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
  margin-bottom: .25rem;
}
.rb-live-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-left: auto;
}
.rb-dataset-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.35rem;
  padding: .35rem .75rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--accent, #1f6b57) 8%, #fff);
}
.rb-live-panel {
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid var(--surface-border, #dfe7e3);
  border-radius: var(--radius-lg, .85rem);
}

.rb-studio {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(260px, 300px);
  min-height: min(78dvh, 54rem);
  border: 1px solid var(--surface-border, #dfe7e3);
  border-radius: var(--radius-lg, .85rem);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(21, 35, 31, .06));
  overflow: hidden;
}
.rb-studio-rail,
.rb-studio-inspector {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1rem 1.35rem;
  background: var(--surface-alt, #f5f8fc);
  overflow: auto;
  max-height: min(78dvh, 54rem);
}
.rb-studio-rail { border-right: 1px solid var(--surface-border, #dfe7e3); }
.rb-studio-inspector { border-left: 1px solid var(--surface-border, #dfe7e3); }
.rb-studio-rail-head { flex-shrink: 0; }
.rb-studio-rail-head strong {
  font-size: .95rem;
  color: var(--heading, #15231f);
}
/* Palette must scroll inside the rail. min-height:0 alone (with default
   flex-shrink) collapses it and lets field cards paint under Outline. */
.rb-palette {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.rb-outline {
  flex-shrink: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--surface-border, #dfe7e3);
}
.rb-palette-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #74869b;
  margin: .85rem 0 .35rem;
}
.rb-palette-cat:first-child { margin-top: .15rem; }
.rb-palette-cat-sub {
  margin-top: .45rem;
  letter-spacing: .04em;
  opacity: .85;
}
.rb-field-group { margin-bottom: .45rem; }
.rb-field-group-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  margin: 0;
  padding: .3rem .15rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.rb-field-group-toggle:hover .rb-field-group-label { color: var(--heading, #15231f); }
.rb-field-group-chevron {
  flex: 0 0 auto;
  width: .85rem;
  font-size: .7rem;
  color: var(--muted, #74869b);
}
.rb-field-group-label {
  flex: 1 1 auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
  margin: 0;
}
.rb-field-group-body { padding: 0 0 .15rem; }
.rb-add-dataset {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  width: 100%;
  margin-bottom: .35rem;
  padding: .55rem .65rem;
  border: 1px dashed var(--surface-border, #d7e0eb);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--accent, #1f6b57) 8%, var(--control-bg, var(--surface, #fff)));
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-add-dataset:hover,
.rb-add-dataset:focus-visible {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 14%, transparent);
  outline: none;
}
.rb-add-dataset strong { font-size: .88rem; color: var(--heading, #15231f); }
.rb-add-dataset .muted { font-size: .72rem; }
.rb-add-dataset--compact {
  padding: .4rem .55rem;
  margin-bottom: .25rem;
}
.rb-field-item,
.rb-palette-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .65rem;
  margin-bottom: .3rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .65rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--text, #183451);
  cursor: grab;
  user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-field-item:hover,
.rb-palette-item:hover,
.rb-field-item:focus-visible,
.rb-palette-item:focus-visible {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 14%, transparent);
  outline: none;
}
.rb-field-item:active,
.rb-palette-item:active { cursor: grabbing; }
.rb-field-item.is-dragging,
.rb-palette-item.is-dragging,
.rb-block.is-dragging { opacity: .55; }
.rb-field-item strong,
.rb-palette-item strong { font-size: .88rem; color: var(--heading, var(--text, #15231f)); }
.rb-field-item .muted,
.rb-palette-item .muted { font-size: .72rem; color: var(--muted, #74869b); }
.rb-outline-list { list-style: none; padding: 0; margin: 0; }
.rb-outline-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .35rem;
  padding: .25rem 0;
}
.rb-outline-list li.is-selected > button { font-weight: 700; }
.rb-outline-actions { display: inline-flex; gap: .05rem; }

.rb-studio-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent, #1f6b57) 8%, transparent), transparent 42%),
    linear-gradient(180deg, #fbfcfd 0%, #f3f6f9 100%);
}
.rb-studio-stage-toolbar {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--surface-border, #dfe7e3);
  background: color-mix(in srgb, #fff 82%, transparent);
  font-weight: 700;
  color: var(--heading, #15231f);
}
.rb-canvas {
  flex: 1;
  overflow: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 20rem;
}
.rb-document {
  --rb-accent: #1f6b57;
  --rb-heading: #15231f;
  --rb-body: #2a3b36;
  --rb-muted: #5f726c;
  --rb-surface: #ffffff;
  --rb-soft: #f3f7f5;
  --rb-rule: #d7e0dc;
  --rb-page: #f7faf8;
  --rb-font: Georgia, "Times New Roman", serif;
  margin: 0 auto;
  width: min(920px, 100%);
  padding: 1.75rem 1.6rem 2.25rem;
  background: var(--rb-page);
  border: 1px solid var(--rb-rule);
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(21, 35, 31, .08);
  color: var(--rb-body);
  font-family: var(--rb-font);
}
.rb-doc-header { margin-bottom: 1.35rem; }
.rb-doc-kicker {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rb-muted);
  margin-bottom: .35rem;
}
.rb-doc-title {
  margin: 0;
  font-family: var(--rb-font);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 650;
  line-height: 1.15;
  color: var(--rb-heading);
}
.rb-doc-lede {
  margin: .45rem 0 0;
  color: var(--rb-muted);
  font-size: .95rem;
  max-width: 42rem;
}
.rb-doc-rule {
  margin-top: 1rem;
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rb-accent), color-mix(in srgb, var(--rb-accent) 20%, transparent));
}
.rb-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .15rem 0 .7rem;
}
.rb-section-accent {
  width: 3px;
  align-self: stretch;
  min-height: 1.1rem;
  border-radius: 999px;
  background: var(--rb-accent);
}
.rb-section-title h3 {
  margin: 0;
  font-family: var(--rb-font);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--rb-heading);
}
.rb-insert-rail {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.35rem;
  margin: .15rem 0;
  border-radius: .35rem;
  transition: background .12s ease, min-height .12s ease;
}
.rb-insert-btn {
  border: 0;
  background: #2a3140;
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: .72;
  transition: opacity .12s ease, transform .12s ease, background-color .12s ease;
}
.rb-insert-rail:hover .rb-insert-btn,
.rb-insert-btn:hover,
.rb-insert-btn:focus-visible {
  opacity: 1;
  outline: none;
  transform: scale(1.06);
}
.rb-insert-rail.rb-drop-target,
.rb-block.rb-drop-target,
.rb-canvas-empty.rb-drop-target {
  background: color-mix(in srgb, var(--rb-accent, var(--accent, #1f6b57)) 22%, transparent);
  outline: 2px dashed var(--rb-accent, var(--accent, #1f6b57));
  min-height: 1.35rem;
}
.rb-insert-rail.rb-drop-target .rb-insert-btn {
  opacity: 1;
  background: var(--rb-accent, var(--accent, #1f6b57));
}
.rb-canvas-empty {
  margin: .35rem auto;
  text-align: center;
  padding: 2.25rem 1.25rem;
  color: var(--rb-heading, var(--heading, #15231f));
  max-width: 28rem;
  border: 2px dashed color-mix(in srgb, var(--rb-rule, #c5d0de) 80%, var(--rb-accent, #1f6b57));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--rb-surface, #fff) 70%, transparent);
}
.rb-starter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
}
.rb-block {
  position: relative;
  background: var(--rb-surface, #fff);
  border: 1px solid var(--rb-rule, #dfe7e3);
  border-radius: .8rem;
  padding: .85rem 1.05rem 1.05rem;
  cursor: grab;
  transition: border-color .15s ease, box-shadow .15s ease;
  margin: .55rem 0;
  color: var(--rb-body, #2a3b36);
}
.rb-block:hover { border-color: color-mix(in srgb, var(--rb-accent, #1f6b57) 45%, var(--rb-rule, #dfe7e3)); }
.rb-block.is-selected {
  border-color: var(--rb-accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-accent, #1f6b57) 14%, transparent);
}
.rb-block.is-previewing { opacity: .92; }
.rb-block-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--rb-muted, #52677f);
  margin-bottom: .45rem;
  opacity: 0;
  transition: opacity .12s ease;
}
.rb-block:hover .rb-block-chrome,
.rb-block.is-selected .rb-block-chrome { opacity: 1; }
.rb-block-chrome-actions { display: inline-flex; gap: .05rem; }
.rb-block-body { min-height: 2.5rem; }
.rb-empty-hint {
  padding: .85rem .9rem;
  border-radius: .55rem;
  background: var(--rb-soft, color-mix(in srgb, var(--accent, #1f6b57) 6%, #fff));
  color: var(--rb-muted, #64748b);
  font-size: .9rem;
}
.rb-kpi {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.2rem;
  border-radius: .85rem;
  background: var(--rb-soft);
  border: 1px solid var(--rb-rule);
}
.rb-kpi.is-card {
  border-top: 3px solid var(--rb-accent);
}
.rb-kpi.is-large {
  background: transparent;
  border: 0;
  padding: .35rem 0;
}
.rb-kpi-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-kpi strong {
  display: block;
  font-family: var(--rb-font);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  color: var(--rb-accent);
  font-weight: 650;
}
.rb-table-wrap { overflow: auto; border-radius: .65rem; border: 1px solid var(--rb-rule); }
.rb-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  color: var(--rb-body);
}
.rb-result-table th,
.rb-result-table td {
  padding: .55rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--rb-rule);
  vertical-align: top;
}
.rb-result-table thead th {
  background: var(--rb-soft);
  color: var(--rb-heading);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rb-result-table.is-banded tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--rb-soft) 70%, transparent);
}
.rb-result-table tbody tr:hover td {
  background: color-mix(in srgb, var(--rb-accent) 8%, var(--rb-surface));
}
.rb-table-footnote {
  margin-top: .45rem;
  font-size: .78rem;
  color: var(--rb-muted);
}
.rb-chart-card {
  background: transparent;
  border: 0;
  padding: 0;
}
.rb-chart-card .trend-chart-canvas {
  width: 100%;
  height: 240px;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--rb-surface) 88%, var(--rb-soft));
}

.rb-step { display: flex; gap: .75rem; align-items: flex-start; }
.rb-step-body { min-width: 0; flex: 1; }
.rb-step-title {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading, #15231f);
}
.rb-dataset-list { display: grid; gap: .45rem; }
.rb-dataset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  text-align: left;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .7rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-dataset-card strong { font-size: .92rem; color: var(--heading, #15231f); }
.rb-dataset-card:hover,
.rb-dataset-card:focus-visible {
  border-color: var(--accent, #1f6b57);
  outline: none;
}
.rb-dataset-card.is-active {
  border-color: var(--accent, #1f6b57);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #1f6b57) 14%, transparent);
}
.rb-include-chip {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .55rem .65rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .65rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  margin-bottom: .4rem;
  cursor: pointer;
}
.rb-include-chip input { margin-top: .2rem; }
.rb-include-modal-list { display: grid; gap: .35rem; }
.rb-column-modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.rb-inspector-section {
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--surface-border, #e3e9f1);
}
.rb-inspector-section:last-of-type { border-bottom: 0; }
.rb-inspector-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #74869b);
  margin-bottom: .55rem;
}
.rb-column-list {
  display: grid;
  gap: .4rem;
  max-height: 14rem;
  overflow: auto;
  padding: .15rem;
}
.rb-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
}
.rb-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.rb-filter-card {
  padding: .7rem;
  border: 1px solid var(--surface-border, #d7e0eb);
  border-radius: .6rem;
  background: var(--control-bg, var(--surface, #fff));
  color: var(--card-text);
  margin-bottom: .5rem;
}
.rb-filter-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .45rem;
}
.rb-choice-list { display: grid; gap: .3rem; max-height: 8rem; overflow: auto; }
.rb-notice { border-left: 3px solid var(--accent, #2563eb); padding-left: .5rem; }
@media (max-width: 1200px) {
  .rb-studio {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .rb-studio-rail,
  .rb-studio-inspector {
    max-height: none;
  }
  .rb-studio-rail { border-right: 0; border-bottom: 1px solid var(--surface-border, #dfe7e3); }
  .rb-studio-inspector { border-left: 0; border-top: 1px solid var(--surface-border, #dfe7e3); }
}

/* ============================================================
   Ideas section redesign
   Page-scoped classes. Shared .pb-* rules are left untouched;
   anything that needed to change got a new name instead.
   ============================================================ */

/* --- one-tap 1-5 rating (replaces slider + Submit + Update + Remove) --- */
.idea-rate-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  min-inline-size: 0;
}
.idea-rate {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
/* label.idea-rate-btn beats the global `label { display/margin/font }` rules so the
   score digit stacks above the priority word instead of reading as "4HIGH". */
label.idea-rate-btn,
.idea-rate-btn {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: .2rem;
  min-height: 2.5rem;
  margin-bottom: 0;
  padding: .45rem .25rem;
  border: 2px solid var(--card-border, #e3e9f1);
  border-radius: .65rem;
  background: var(--surface, #fff);
  color: var(--card-text, #304760);
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease;
}
.idea-rate-num {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.idea-rate-priority {
  display: block;
  width: 100%;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}
.idea-rate-btn:hover {
  border-color: var(--dot);
  background: color-mix(in srgb, var(--dot) 10%, var(--surface, #fff));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dot) 18%, transparent);
}
.idea-rate-btn.is-selected {
  background: var(--dot);
  border-color: var(--dot);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dot) 38%, transparent);
}
.idea-rate-btn.is-selected .idea-rate-priority { color: rgba(255, 255, 255, .88); }
.idea-rate-input:focus-visible + .idea-rate-btn {
  border-color: var(--dot);
  background: color-mix(in srgb, var(--dot) 10%, var(--surface, #fff));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dot) 18%, transparent);
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.idea-rate-input:focus-visible + .idea-rate-btn.is-selected {
  background: var(--dot);
  border-color: var(--dot);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dot) 38%, transparent);
}
.idea-rate[disabled] .idea-rate-btn {
  opacity: .55;
  cursor: default;
  box-shadow: none;
}
.idea-rate-lg .idea-rate-btn {
  min-height: 3.6rem;
  gap: .28rem;
  padding: .5rem .3rem .45rem;
  border-radius: .75rem;
}
.idea-rate-lg .idea-rate-num { font-size: 1.25rem; }
.idea-rate-lg .idea-rate-priority { font-size: .62rem; letter-spacing: .03em; }
.idea-rate-hint {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .65rem .75rem;
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: .6rem;
  background: var(--surface-alt, #f8fafc);
  color: var(--card-text, #304760);
  min-height: 3.25rem;
}
.idea-rate-hint-priority {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 750;
  color: var(--dot, var(--card-text, #304760));
}
.idea-rate-hint-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  border-radius: 999px;
  background: var(--dot, var(--accent, #2563eb));
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
}
.idea-rate-hint-desc {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted-strong, #5b6b7c);
}
.idea-rate-saved { font-size: .74rem; font-weight: 650; color: var(--accent, #2563eb); }
.idea-rate-closed { font-size: .82rem; }

/* Static rating guide (list view header) */
.idea-rate-guide {
  border: 1px solid var(--card-border, #e3e9f1);
  border-radius: var(--radius-lg, .75rem);
  background: var(--surface, #fff);
  padding: .85rem 1rem;
}
.idea-rate-guide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin-bottom: .65rem;
}
.idea-rate-guide-title {
  font-size: .88rem;
  font-weight: 750;
  color: var(--card-text, #304760);
}
.idea-rate-guide-hint { font-size: .78rem; line-height: 1.35; }
.idea-rate-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.idea-rate-guide-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: .5rem .65rem;
  padding: .45rem .55rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--dot) 6%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--dot) 22%, var(--card-border, #e3e9f1));
}
.idea-rate-guide-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  min-height: 1.55rem;
  border-radius: 999px;
  background: var(--dot);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.idea-rate-guide-priority {
  font-size: .8rem;
  font-weight: 750;
  color: var(--card-text, #304760);
  min-width: 4.5rem;
}
.idea-rate-guide-desc {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted-strong, #5b6b7c);
}

/* --- toolbar: bucket tabs + search/sort/filters/view, one surface --- */
.idea-toolbar { padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.idea-tabs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.idea-tab {
    border: 1px solid var(--card-border, #e3e9f1); background: var(--surface, #fff);
    border-radius: .55rem; padding: .4rem .75rem; font-weight: 600;
    color: var(--card-text, #304760); cursor: pointer;
}
.idea-tab.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: var(--accent-contrast, #fff); }
.idea-viewtoggle { display: inline-flex; gap: .2rem; margin-left: auto; }

/* --- the ranked list --- */
.idea-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.idea-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
    border: 1px solid var(--card-border, #e3e9f1); border-left: 4px solid var(--pb-heat, #cbd5e1);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface, #fff);
    padding: 0;
}
.idea-row:hover { border-color: var(--accent, #2563eb); border-left-color: var(--pb-heat, #cbd5e1); }
.idea-row-main {
    text-align: left; border: 0; background: transparent; width: 100%;
    padding: .7rem .9rem; cursor: pointer; color: inherit; display: block;
}
.idea-row-main:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; border-radius: var(--radius-lg, .75rem); }
.idea-row-rank { font-variant-numeric: tabular-nums; color: var(--muted, #64748b); margin-right: .5rem; font-weight: 650; }
.idea-row-title { font-weight: 650; color: var(--card-text, #304760); }
.idea-row-meta { display: block; font-size: .8rem; margin-top: .2rem; }
.idea-row-rate { padding: 0 .9rem 0 0; }

/* Page-header More menu: same chrome as section-nav, anchored to the right. */
.page-header-more {
    position: relative;
    flex: 0 0 auto;
}
.page-header-more .section-nav-more-toggle {
    /* Match sibling .btn height in the page-header actions row. */
    min-height: 2.25rem;
    padding: .45rem .85rem;
    font-size: .9rem;
}
.page-header-more .section-nav-menu {
    left: auto;
    right: 0;
    --transform-origin: top right;
}

/* --- admin section nav (primary pills + polished More dropdown) --- */
.section-nav {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .75rem 0 1rem;
}
.section-nav-link,
.section-nav-more-toggle {
    border: 1px solid var(--card-border, #e3e9f1);
    background: var(--surface, #fff);
    border-radius: .55rem;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--card-text, #304760);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1.25;
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        border-color 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        color 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        box-shadow 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.section-nav-link:hover,
.section-nav-more-toggle:hover {
    border-color: var(--accent-soft-border, #b7c9e0);
    background: var(--surface-nested, #eef1f5);
    color: var(--heading, #0c1220);
}
.section-nav-link:focus-visible,
.section-nav-more-toggle:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}
.section-nav-link.active,
.section-nav-more-toggle.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: var(--accent-contrast, #fff);
}
.section-nav-link:active:not(.active),
.section-nav-more-toggle:active:not(.active) {
    transform: scale(0.97);
}

.section-nav-more {
    position: relative;
    flex: 0 0 auto;
}
.section-nav-more > summary {
    list-style: none;
}
.section-nav-more > summary::-webkit-details-marker { display: none; }
.section-nav-more-chevron {
    flex-shrink: 0;
    opacity: .72;
    transition: transform 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.section-nav-more[open] > .section-nav-more-toggle .section-nav-more-chevron {
    transform: rotate(180deg);
}
.section-nav-more[open] > .section-nav-more-toggle:not(.active) {
    border-color: var(--accent-soft-border, #b7c9e0);
    background: var(--accent-soft, #e0edff);
    color: var(--heading, #0c1220);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}

.section-nav-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 40;
    min-width: 13.5rem;
    max-width: min(18rem, calc(100vw - 1.5rem));
    padding: .35rem;
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--radius-md, .75rem);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .12));
    display: flex;
    flex-direction: column;
    gap: .2rem;
    --transform-origin: top left;
}
.section-nav-menu-group + .section-nav-menu-group {
    margin-top: .2rem;
    padding-top: .35rem;
    border-top: 1px solid var(--card-border, #e2e8f0);
}
.section-nav-menu-label {
    padding: .2rem .55rem .15rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}
.section-nav-menu-item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--card-text, #183451);
    font-size: .86rem;
    font-weight: 600;
    padding: .45rem .55rem;
    text-decoration: none;
    line-height: 1.25;
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.section-nav-menu-item:hover,
.section-nav-menu-item:focus-visible {
    background: var(--surface-nested, #f1f5f9);
    color: var(--heading, #0c1220);
    outline: none;
}
.section-nav-menu-item.active {
    background: var(--accent-soft, #e0edff);
    color: var(--heading, #0c1220);
    box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}
.section-nav-menu-item:active {
    transform: scale(0.98);
}

@media (max-width: 900px) {
    .section-nav-menu {
        left: auto;
        right: 0;
        --transform-origin: top right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-nav-link,
    .section-nav-more-toggle,
    .section-nav-more-chevron,
    .section-nav-menu,
    .section-nav-menu-item {
        transition: none !important;
    }
    .section-nav-menu {
        @starting-style {
            opacity: 1;
            transform: none;
        }
    }
}

/* --- compact filter bar: search + sort visible, the rest behind one disclosure --- */
.pb-filter-row-compact { grid-template-columns: minmax(12rem, 2fr) minmax(8.5rem, 1fr); }
.pb-filter-disclosure { composes: none; }

@media (max-width: 900px) {  /* was 800 — Axis B */
    /* Tab strips scroll instead of wrapping to 3-4 rows on a phone.
       .pb-tabs inherits this too, which also fixes ProductBoard and ProductRoadmapAdmin. */
    .pb-tabs, .idea-tabs, .section-nav {
        flex-wrap: nowrap; overflow-x: auto;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -.75rem; padding-inline: .75rem; padding-bottom: .2rem;
    }
    .pb-tabs::-webkit-scrollbar,
    .idea-tabs::-webkit-scrollbar,
    .section-nav::-webkit-scrollbar { display: none; }
    .pb-tabs > .pb-tab,
    .idea-tabs > .idea-tab,
    .section-nav > .section-nav-link,
    .section-nav > .section-nav-more { flex: 0 0 auto; scroll-snap-align: start; }

    .idea-viewtoggle { margin-left: 0; }

    /* Row stacks; the five dots become five full-width tap targets. */
    .idea-row { grid-template-columns: 1fr; row-gap: .35rem; }
    .idea-row-rate { padding: 0 .9rem .7rem; }
    .idea-rate { gap: .45rem; }
    .idea-rate-btn { min-height: var(--tap-target, 2.75rem); }
    .idea-rate-hint { min-height: auto; padding: .5rem .6rem; }
    .idea-rate-hint-desc { font-size: .76rem; }
    .idea-rate-guide-row {
        grid-template-columns: auto 1fr;
        gap: .45rem .55rem;
    }
    .idea-rate-guide-priority {
        grid-column: 2;
        min-width: 0;
    }
    .idea-rate-guide-desc {
        grid-column: 1 / -1;
        padding-left: calc(1.55rem + .55rem);
    }

    .pb-story { flex-wrap: wrap; }
    .pb-traction-legend-wrap { max-width: none; }
    .pb-filter-row-compact { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-celebrate, .pb-celebrate-btn, .pb-impact-compare, .idea-rate-btn { animation: none; transition: none; }
}

/* Compact filter bar is hosted inside another surface: no card chrome, no double padding. */
.pb-filter-bar-compact { padding: 0; border: 0; background: none; box-shadow: none; }
.pb-filter-bar-compact .pb-filter-footer { border-top: 0; padding-top: .35rem; }
.pb-filter-disclosure-body { display: block; }
.pb-filter-footer-actions { margin-left: auto; }

/* ---- Report builder: relationships, filters, preview ---- */
.rb-include { padding: .4rem 0; border-bottom: 1px solid var(--card-border, #e3e9f1); }
.rb-include:last-child { border-bottom: 0; }
.rb-include-help { margin-left: 1.5rem; }

.rb-filter-card {
    border: 1px solid var(--card-border, #e3e9f1);
    border-radius: .5rem;
    padding: .55rem .6rem;
    margin-bottom: .5rem;
    background: var(--surface, #fff);
}
.rb-filter-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.rb-choice-list { display: flex; flex-direction: column; gap: .15rem; max-height: 11rem; overflow-y: auto; }

.rb-preview { border-top: 1px solid var(--card-border, #e3e9f1); margin-top: .75rem; padding-top: .75rem; }
.rb-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.rb-preview-scroll { max-height: 22rem; overflow: auto; }
.rb-preview-scroll table { font-size: .8rem; }
.rb-preview-scroll thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }

.rb-notice { border-left: 3px solid var(--accent, #2563eb); padding-left: .5rem; }

/* ---- Ideas board: bulk selection ---- */
.pb-card { position: relative; }
.pb-card-select {
    position: absolute; top: .4rem; right: .4rem; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; min-height: 1.6rem; margin: 0; cursor: pointer;
}
.pb-card-select input { cursor: pointer; }

/* ============================================================
   .table-cards — the card fallback ResponsiveTable renders below md.
   Generalizes what was a single-page special case (.member-portal-card,
   now deleted) into something any table can opt into by adding one
   data-label attribute per <td>.
   ============================================================ */
@media (max-width: 900px) {
    .table-cards {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }
    .table-cards table,
    .table-cards thead,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }
    .table-cards thead { display: none; }

    /* display:block destroys colspan, so a "no results" row must use .tc-full
       (or, better, live outside the table entirely as <EmptyState/>). */
    .table-cards tr {
        border: 0;
        border-radius: 1.05rem;
        padding: 1.05rem 1.1rem;
        margin-bottom: .7rem;
        background: var(--surface, #fff);
        box-shadow: var(--shadow-sm), var(--surface-sheen, none);
    }
    .table-cards tr:last-child { margin-bottom: 0; }

    .table-cards td {
        border: 0;
        padding: .4rem 0;
        display: grid;
        grid-template-columns: minmax(5.5rem, 36%) 1fr;
        gap: .55rem;
        align-items: baseline;
    }
    .table-cards td::before {
        content: attr(data-label);
        color: var(--muted, #71839a);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        line-height: 1.3;
    }
    /* Empty label = nothing to show ("" is falsy for attr(), so this also
       catches cells that never got a data-label at all). */
    .table-cards td:not([data-label]),
    .table-cards td[data-label=""] {
        display: block;
    }
    .table-cards td:not([data-label])::before,
    .table-cards td[data-label=""]::before {
        content: none;
    }

    /* The row's identity — no label, full width, reads as the card title. */
    .table-cards td:first-child {
        display: block;
        font-weight: 700;
        font-size: 1.02rem;
        letter-spacing: -.015em;
        color: var(--heading, var(--card-text, #183451));
        padding-bottom: .55rem;
        margin-bottom: .4rem;
        border-bottom: 1px solid var(--table-row-border, #edf1f6);
        line-height: 1.3;
    }
    .table-cards td:first-child::before { content: none; }

    .table-cards td:empty { display: none; }

    .table-cards .form-select,
    .table-cards .form-control {
        width: 100%;
    }

    /* Opt-in: an actions cell becomes a full-width, stacked button group instead of the
       default label/value grid. */
    .table-cards td.tc-actions {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        grid-template-columns: none;
        margin-top: .65rem;
        padding-top: .55rem;
        border-top: 1px solid var(--table-row-border, #edf1f6);
    }
    .table-cards td.tc-actions::before { content: none; }
    .table-cards td.tc-actions .btn { width: 100%; min-height: var(--tap-target); }
    .table-cards td.tc-actions .group-row-overflow {
        width: 100%;
    }
    .table-cards td.tc-actions .group-row-overflow > summary.btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* Opt-in: a cell that should span full width with no data-label row treatment
       (e.g. a long description, or a colspan cell converted for the card view). */
    .table-cards td.tc-full {
        display: block;
        grid-template-columns: none;
    }
    .table-cards td.tc-full::before { content: none; }

    /* Opt-in: drop a cell from the card view entirely — redundant IDs, etc. */
    .table-cards td.tc-hide { display: none; }

    .table-cards td.tc-actions .group-row-overflow[open] > .group-row-menu {
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0;
        min-width: 0;
    }
}

/* Table cell utilities — opt-in via class on th/td. */
.table th.tc-nowrap,
.table td.tc-nowrap { white-space: nowrap; }
.table td.tc-desc {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table td.tc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}
.conferences-table td,
.events-table td {
    vertical-align: top;
}
.conferences-table td.tc-actions {
    flex-wrap: nowrap;
    align-items: flex-start;
}
.events-table td.tc-actions {
    flex-wrap: wrap;
    align-items: flex-start;
    white-space: normal;
}
.table td.tc-actions .group-row-overflow { position: relative; }
.table td.tc-actions .group-row-overflow[open] > .group-row-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: .25rem;
    padding: .35rem;
    background: var(--surface, #fff);
    border: 1px solid var(--surface-border, #dfe7e3);
    border-radius: var(--radius-md, .75rem);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, .12));
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    min-width: 9rem;
}
.table td.tc-actions .group-row-menu .btn { width: 100%; }

/* Companies admin table — tighter columns, chip-based accounts, aligned actions. */
.companies-admin-table td {
    vertical-align: top;
}
.companies-admin-table .company-name-cell {
    min-width: 11rem;
    max-width: 16rem;
    line-height: 1.35;
}
.companies-admin-table .company-contacts-cell {
    min-width: 12rem;
    max-width: 18rem;
}
.companies-admin-table .company-accounts-cell {
    min-width: 14rem;
}
.companies-admin-table td.tc-actions {
    flex-wrap: nowrap;
    align-items: flex-start;
    min-width: 9.5rem;
    padding-top: calc(var(--space-3, .75rem) + .05rem);
}
.company-contact-line {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.company-contact-line .badge-soft {
    flex: 0 0 auto;
    margin-top: .1rem;
}
.company-contact-value {
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.company-contact-name {
    display: block;
    font-weight: 600;
    color: var(--card-text, #183451);
}
.company-contact-email {
    display: block;
    font-size: .82rem;
}
.company-accounts-summary {
    margin-bottom: .35rem;
}
.company-accounts-count {
    font-size: .84rem;
    font-weight: 700;
    color: var(--card-text, #183451);
}
.company-account-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.company-account-chip {
    display: inline-block;
    max-width: 100%;
    padding: .18rem .5rem;
    border-radius: .35rem;
    border: 1px solid var(--table-row-border, #edf1f6);
    background: var(--surface-nested, #f7faf8);
    color: var(--muted, #74869b);
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.company-account-chip-more {
    font-weight: 600;
    color: var(--badge-soft-fg, #1d4ed8);
    background: var(--badge-soft-bg, #e0edff);
    border-color: color-mix(in srgb, var(--badge-soft-fg, #1d4ed8) 18%, transparent);
    cursor: help;
}
@media (min-width: 900px) {
    .companies-admin-table .company-contacts-cell .company-contact-line + .company-contact-line {
        margin-top: .55rem;
    }
}
@media (max-width: 899px) {
    .table-cards .companies-admin-table td.company-accounts-cell .company-account-chips {
        margin-top: .15rem;
    }
}

/* .table-wrap uses overflow-y:hidden to clip row rules to its radius; that also
   hides absolute More menus on the last rows. Lift the clip while open. */
.table-wrap:has(.group-row-overflow[open]) {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.rfp-description-panel {
    margin-top: var(--space-4, 1.25rem);
    padding: 1rem 1.15rem;
}
.rfp-description-body {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--card-text, var(--text));
    font-size: .9375rem;
}
.rfp-description-notes {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border, var(--surface-border));
}
.rfp-description-notes-only {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.rfp-description-notes-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}
.rfp-description-notes-body {
    white-space: pre-wrap;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--muted);
}
.rfp-workspace-section {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, var(--surface-border));
}

.rfp-attach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}
.rfp-attach-card {
    background: var(--surface-nested, var(--surface-alt, var(--surface)));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    color: var(--card-text, var(--text));
}
.rfp-attach-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--surface);
    border-radius: calc(var(--radius-md) - 2px);
    overflow: hidden;
    cursor: pointer;
}
.rfp-attach-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.rfp-attach-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    cursor: default;
}
.rfp-attach-name {
    margin-top: .4rem;
    font-size: .85rem;
    color: var(--heading, var(--text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rfp-attach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}
.modal-dialog.rfp-attach-preview {
    max-width: min(920px, calc(100vw - 2rem));
    width: min(920px, calc(100vw - 2rem));
}

.event-meeting-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.event-meeting-types {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.event-meeting-card {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--surface-border, #d7e2ef);
    border-radius: 10px;
    background: var(--surface-alt, var(--surface, #f7fafc));
    color: var(--card-text, var(--text, #1a2b3c));
}
.event-meeting-kicker {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--muted, #5b6b7c);
    margin-bottom: .35rem;
}
.event-meeting-type {
    font-weight: 650;
    margin-bottom: .45rem;
    color: var(--heading, var(--text, #15231f));
}
.rfp-attach-preview img {
    display: block;
    width: 100%;
    max-height: min(80vh, 720px);
    object-fit: contain;
    background: var(--surface);
    border-radius: var(--radius-md);
}

/* ============================================================
   MOBILE POLISH — global fixes for cramped / overlapping UI on
   phones, tablets, and MAUI WebView. Shell layout (drawer, tab
   bar) lives in Layout/*.razor.css at max-width: 900px.
   ============================================================ */

/* Extend phone-shell input + scroll behaviors to the full mobile shell tier. */
@media (max-width: 900px) {
    /* Prevent flex/grid children from forcing horizontal overflow. */
    main,
    .content,
    .page-header,
    .surface,
    .surface-heading,
    .metric-grid,
    .gl-grid,
    .gl-grid-2,
    .gl-grid-3,
    .search-bar,
    .member-toolbar,
    .bulk-action-bar,
    .hub-section-header,
    .portal-doc-row,
    .hub-action-row,
    .docs-list-row,
    .btn-group,
    .row {
        min-width: 0;
        max-width: 100%;
    }

    .btn-group {
        flex-wrap: wrap;
        gap: .35rem;
    }

    .btn-group > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Bootstrap row/col gutters can overflow on narrow screens. */
    .row {
        margin-left: 0;
        margin-right: 0;
        --bs-gutter-x: .75rem;
    }
    .row > * {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    /* Align Bootstrap md+ visibility with our 900px tier — suppress md-show
       utilities in the 768–900px gap where Bootstrap would already reveal them. */
    .d-md-inline,
    .d-md-inline-block,
    .d-md-inline-flex,
    .d-md-block,
    .d-md-flex,
    .d-md-grid {
        display: none !important;
    }

    /* Horizontal scroll tables without card mode still need edge room. */
    .table-wrap:not(.table-cards),
    .table-responsive:not(.table-cards) {
        margin-left: 0;
        margin-right: 0;
        -webkit-overflow-scrolling: touch;
    }

    .table-cards {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Toolbars and action rows stack instead of crowding. */
    .editor-toolbar,
    .fp-toolbar,
    .cert-studio-toolbar,
    .rb-toolbar {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .editor-toolbar select,
    .editor-toolbar .form-select {
        width: auto;
        min-width: 0;
        flex: 1 1 6rem;
        max-width: 100%;
    }

    .funnel-row {
        grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) 2rem;
        gap: .45rem;
    }
    .funnel-label {
        white-space: normal;
        font-size: .7rem;
        line-height: 1.2;
    }

    .modal-dialog,
    .modal-panel,
    .help-modal,
    .view-as-vendor-modal {
        width: calc(100% - 1.25rem);
        max-width: none;
        margin: .65rem auto;
    }

    .discussion-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .discussion-sidebar {
        max-height: 12rem;
        border-right: 0;
        border-bottom: 1px solid var(--surface-border, #dfe7e3);
    }

    .cert-studio,
    .newsletter-shell,
    .builder-shell,
    .rb-studio {
        min-height: 0;
    }

    .pb-kanban {
        grid-template-columns: repeat(var(--pb-lanes, 1), minmax(85vw, 1fr));
    }

    .photo-crop-circle {
        width: min(280px, calc(100vw - 3rem));
        height: min(280px, calc(100vw - 3rem));
    }

    .tenant-picker {
        max-width: none;
    }

    .wish-workflow-ends {
        grid-template-columns: 1fr;
    }

    .board-tree-tier-peers .board-tree-card {
        flex: 1 1 100%;
        max-width: none;
    }
    .board-tree-photo {
        width: 80px;
        height: 80px;
    }

}

@media (max-width: 420px) {
    .view-as-chip:nth-child(n+2) {
        display: none;
    }
}

.membership-join-steps {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 1rem;
}

.membership-join-steps li {
    padding-left: 0.25rem;
}

.membership-join-steps li.is-complete {
    color: var(--muted, #5b6b7c);
}

.membership-join-steps li.is-pending strong {
    color: var(--heading, var(--text, #0f1c2a));
}

.event-public-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.event-public-agenda-item { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) 1fr; gap: .75rem 1rem; padding-bottom: .85rem; border-bottom: 1px solid #e7edf4; }
.event-public-agenda-item:last-child { border-bottom: 0; padding-bottom: 0; }
.event-public-agenda-time { font-size: .85rem; color: var(--brand-accent, #1f6b57); }
.event-public-agenda-title { font-weight: 600; color: var(--heading, #15231f); }
.branded-public-card .event-public-agenda { margin-top: 1.25rem; }

/* Wish review agenda editor (Events wizard) */
.wish-agenda-editor {
    margin-top: 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface, #fff);
    overflow: hidden;
}
.wish-agenda-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: var(--surface-muted, var(--surface-alt, #f8fafc));
    color: var(--card-text);
}
.wish-agenda-count { font-size: .78rem; font-weight: 600; }
.wish-agenda-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: 18rem;
}
@media (max-width: 900px) {
    .wish-agenda-editor-grid { grid-template-columns: 1fr; }
}
.wish-agenda-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .85rem 1rem 1rem;
}
.wish-agenda-panel--order {
    border-right: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
}
@media (max-width: 900px) {
    .wish-agenda-panel--order {
        border-right: 0;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }
}
.wish-agenda-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
}
.wish-agenda-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .35rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: var(--radius-md, .5rem);
    background: var(--surface-muted, var(--surface-alt, #f8fafc));
    color: var(--muted, #64748b);
}
.wish-agenda-list { display: flex; flex-direction: column; gap: .65rem; }
.wish-agenda-item {
    padding: .75rem .85rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, .5rem);
    background: var(--surface-muted, var(--surface-alt, #f8fafc));
    color: var(--card-text);
}
.wish-agenda-item-head {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.wish-agenda-order {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent, #2563eb);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    margin-top: .1rem;
}
.wish-agenda-item-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}
.wish-agenda-item-title a {
    font-weight: 650;
    color: var(--heading, #0f172a);
    text-decoration: none;
}
.wish-agenda-item-title a:hover { text-decoration: underline; }
.wish-agenda-status { font-size: .68rem; font-weight: 600; }
.wish-agenda-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    flex-shrink: 0;
}
.wish-agenda-note-label { display: block; margin: .55rem 0 .25rem; }
.wish-agenda-toolbar { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .5rem; }
.wish-agenda-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.wish-agenda-browse-meta { margin-bottom: .35rem; }
.wish-agenda-browse-list {
    flex: 1;
    min-height: 10rem;
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, .5rem);
    background: var(--surface, #fff);
}
.wish-agenda-browse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border, #f1f5f9);
}
.wish-agenda-browse-row:last-child { border-bottom: 0; }
.wish-agenda-browse-row:hover { background: var(--surface-muted, var(--surface-alt, #f8fafc)); }
.wish-agenda-browse-main { min-width: 0; flex: 1; }
.wish-agenda-browse-title {
    font-weight: 600;
    color: var(--heading, #0f172a);
    line-height: 1.35;
}
.wish-agenda-browse-meta-line { margin-top: .15rem; }
.spinner-sm {
    width: .95rem;
    height: .95rem;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: .35rem;
}

/* ============================================================================
   PREMIUM DARK — resolved-mode polish

   data-bs-theme is written for explicit and System themes before first paint,
   so this single block covers both dark paths without duplicating component
   rules. Authored document/email/site canvases are intentionally excluded.
   ============================================================================ */
:root[data-bs-theme="dark"] body {
    background:
        radial-gradient(900px 520px at 78% -12%, var(--ambient-accent), transparent 62%),
        var(--bg);
}

:root[data-bs-theme="dark"] .surface,
:root[data-bs-theme="dark"] .table-wrap,
:root[data-bs-theme="dark"] .modal-dialog,
:root[data-bs-theme="dark"] .modal-panel,
:root[data-bs-theme="dark"] .help-modal,
:root[data-bs-theme="dark"] .cmdk-panel,
:root[data-bs-theme="dark"] .ss-menu,
:root[data-bs-theme="dark"] .toast {
    border-color: var(--card-border);
    box-shadow: var(--shadow-md), var(--surface-sheen);
}

:root[data-bs-theme="dark"] .surface {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 44%),
        var(--surface);
}

:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .ss-trigger {
    background-color: var(--control-bg);
    border-color: var(--input-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

:root[data-bs-theme="dark"] .form-control:hover:not(:disabled),
:root[data-bs-theme="dark"] .form-select:hover:not(:disabled),
:root[data-bs-theme="dark"] .ss-trigger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--input-border));
    background-color: color-mix(in srgb, var(--control-bg) 88%, var(--surface-alt));
}

:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus,
:root[data-bs-theme="dark"] .ss-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--input-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--table-row-border);
    --bs-table-hover-bg: color-mix(in srgb, var(--accent) 5%, var(--surface-alt));
    --bs-table-hover-color: var(--heading);
}

:root[data-bs-theme="dark"] .table thead th {
    color: var(--muted-strong);
    background: color-mix(in srgb, var(--surface-alt) 88%, transparent);
    border-bottom-color: var(--table-border);
}

:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--muted-strong);
    --bs-btn-border-color: var(--input-border);
    --bs-btn-hover-color: var(--heading);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 28%, var(--input-border));
}

:root[data-bs-theme="dark"] .alert {
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

:root[data-bs-theme="dark"] .empty {
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-alt) 58%, transparent);
}

:root[data-bs-theme="dark"] .modal-backdrop,
:root[data-bs-theme="dark"] .help-modal-backdrop,
:root[data-bs-theme="dark"] .cmdk-backdrop {
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

:root[data-bs-theme="dark"] .modal-header,
:root[data-bs-theme="dark"] .modal-footer,
:root[data-bs-theme="dark"] .cmdk-footer {
    border-color: var(--divider);
}

:root[data-bs-theme="dark"] .badge-soft {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Bootstrap named light utilities stay chalk-white even under data-bs-theme="dark".
   Remap them to theme surfaces so app chrome never paints light-on-light or
   orphan white boxes in dark mode. Authored canvases pin color-scheme:light.
   Do not remap .text-dark — warning badges (bg-warning text-dark) need dark ink. */
:root[data-bs-theme="dark"] .bg-light,
:root[data-bs-theme="dark"] .bg-white {
    background-color: var(--surface-alt) !important;
    color: var(--card-text);
}
:root[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--surface-nested) !important;
    color: var(--card-text) !important;
}

/* Dashboard focal surfaces: one luminous hero, quiet supporting cards. */
:root[data-bs-theme="dark"] .portal-hero {
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .11);
    background:
        radial-gradient(80% 140% at 8% 0%, color-mix(in srgb, var(--portal-accent) 44%, transparent), transparent 55%),
        radial-gradient(60% 100% at 92% 100%, color-mix(in srgb, var(--portal-accent) 18%, transparent), transparent 68%),
        linear-gradient(125deg, #0b0e14 0%, #111827 52%, #0a0c11 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .1);
}

:root[data-bs-theme="dark"] .portal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(115deg, #000, transparent 70%);
}

:root[data-bs-theme="dark"] .portal-logo {
    border-color: rgba(255, 255, 255, .24);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

:root[data-bs-theme="dark"] .portal-board-tile,
:root[data-bs-theme="dark"] .portal-dash-panel,
:root[data-bs-theme="dark"] .portal-dash-conversations {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--portal-accent) 4%, transparent), transparent 48%),
        var(--surface);
    border-color: var(--card-border);
}

:root[data-bs-theme="dark"] .portal-board-tile {
    position: relative;
    overflow: hidden;
}

:root[data-bs-theme="dark"] .portal-board-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(90deg, var(--portal-accent, var(--accent)), color-mix(in srgb, var(--portal-accent, var(--accent)) 24%, transparent));
}

@media (hover: hover) and (pointer: fine) {
    :root[data-bs-theme="dark"] .portal-board-tile:hover,
    :root[data-bs-theme="dark"] .portal-dash-panel:hover {
        border-color: color-mix(in srgb, var(--portal-accent, var(--accent)) 28%, var(--card-border));
        box-shadow: 0 16px 42px rgba(0, 0, 0, .28), var(--surface-sheen);
    }
}

/* Builder and studio chrome follows the app theme. Preview documents remain
   isolated: .rb-document, newsletter canvas, and authored site/email content
   keep their own output palette. */
:root[data-bs-theme="dark"] .builder-toolbar,
:root[data-bs-theme="dark"] .builder-sidebar.surface,
:root[data-bs-theme="dark"] .newsletter-rail.surface,
:root[data-bs-theme="dark"] .rb-live-bar,
:root[data-bs-theme="dark"] .rb-live-panel,
:root[data-bs-theme="dark"] .rb-studio {
    background: var(--surface);
    border-color: var(--card-border);
    box-shadow: var(--shadow-md), var(--surface-sheen);
}

:root[data-bs-theme="dark"] .rb-studio-rail,
:root[data-bs-theme="dark"] .rb-studio-inspector {
    background: var(--surface-alt);
}

:root[data-bs-theme="dark"] .rb-studio-stage {
    background:
        radial-gradient(circle at 12% 8%, var(--ambient-accent), transparent 42%),
        linear-gradient(180deg, var(--surface-inset) 0%, var(--bg) 100%);
}

:root[data-bs-theme="dark"] .rb-studio-stage-toolbar {
    background: var(--surface-glass);
    border-color: var(--divider);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

:root[data-bs-theme="dark"] .rb-dataset-chip,
:root[data-bs-theme="dark"] .rb-dataset-card,
:root[data-bs-theme="dark"] .rb-include-chip,
:root[data-bs-theme="dark"] .rb-field-item,
:root[data-bs-theme="dark"] .rb-palette-item,
:root[data-bs-theme="dark"] .template-card,
:root[data-bs-theme="dark"] .preset-chip,
:root[data-bs-theme="dark"] .palette-btn {
    color: var(--text);
    background: var(--control-bg);
    border-color: var(--input-border);
}

:root[data-bs-theme="dark"] .rb-palette-cat {
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-bs-theme="dark"] .portal-hero,
    :root[data-bs-theme="dark"] .portal-widget,
    :root[data-bs-theme="dark"] .portal-dash {
        animation: none !important;
    }
}

/* —— Vendor conference page (exhibitor template) —— */
.vcp {
    --vcp-accent: #1e4d8c;
    --vcp-heading: #1e4d8c;
    --vcp-ink: #1a1a1a;
    --vcp-muted: #4a5568;
    --vcp-card: #fff;
    min-height: 100dvh;
    color: var(--vcp-ink);
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--vcp-accent) 55%, #7ec8e3), transparent 70%),
        radial-gradient(ellipse 70% 50% at 100% 40%, color-mix(in srgb, var(--vcp-accent) 35%, #a8d8ea), transparent 65%),
        radial-gradient(ellipse 60% 45% at 0% 70%, color-mix(in srgb, var(--vcp-accent) 40%, #5ba3c9), transparent 60%),
        linear-gradient(165deg, color-mix(in srgb, var(--vcp-accent) 88%, #0a2a4a) 0%, color-mix(in srgb, var(--vcp-accent) 70%, #3d8bb8) 45%, color-mix(in srgb, var(--vcp-accent) 55%, #6eb8d4) 100%);
    background-attachment: fixed;
}
.vcp-wrap {
    width: min(720px, calc(100% - 2rem));
    margin-inline: auto;
}
.vcp-top {
    background: color-mix(in srgb, #0a1f36 72%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.vcp-top-inner {
    width: min(960px, calc(100% - 2rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}
.vcp-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    font-weight: 600;
}
.vcp-brand-logo {
    height: 2rem;
    width: auto;
    object-fit: contain;
}
.vcp-top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.vcp-top-nav a {
    color: color-mix(in srgb, #fff 88%, transparent);
    text-decoration: none;
    font-size: 0.92rem;
}
.vcp-top-nav a:hover { color: #fff; text-decoration: underline; }
.vcp-banner {
    width: min(720px, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
}
.vcp-banner--danger { color: #9b1c1c; border: 1px solid #f5c2c7; }
.vcp-hero {
    padding: 2.25rem 0 1.25rem;
    text-align: center;
}
.vcp-kicker {
    margin: 0 0 0.35rem;
    color: color-mix(in srgb, #fff 85%, transparent);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vcp-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 700;
    text-shadow: 0 1px 12px color-mix(in srgb, #000 25%, transparent);
}
.vcp-body { padding: 0.5rem 0 2.5rem; }
.vcp-card {
    background: var(--vcp-card);
    border-radius: 1rem;
    box-shadow: 0 10px 28px color-mix(in srgb, #041526 28%, transparent);
    padding: 1.5rem 1.65rem 1.75rem;
    margin-bottom: 1.35rem;
}
.vcp-card-title {
    margin: 0 0 1rem;
    color: var(--vcp-heading);
    font-size: 1.45rem;
    font-weight: 700;
}
.vcp-card-image {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 0.65rem;
    margin-bottom: 1rem;
}
.vcp-card-body {
    color: var(--vcp-ink);
    font-size: 1rem;
    line-height: 1.55;
}
.vcp-card-body h3,
.vcp-card-body h4 {
    color: var(--vcp-heading);
    font-weight: 700;
    margin: 1.15rem 0 0.4rem;
}
.vcp-card-body h3:first-child,
.vcp-card-body h4:first-child { margin-top: 0; }
.vcp-card-body h3 { font-size: 1.15rem; }
.vcp-card-body h4 { font-size: 1.02rem; }
.vcp-card-body p { margin: 0 0 0.75rem; }
.vcp-card-body ul {
    margin: 0.35rem 0 0.85rem;
    padding-left: 1.2rem;
}
.vcp-card-body li { margin-bottom: 0.45rem; }
.vcp-card-body a {
    color: color-mix(in srgb, var(--vcp-accent) 75%, #2563eb);
    text-decoration: underline;
}
.vcp-card-body em { color: var(--vcp-muted); }
.vcp-footer {
    padding: 1rem 0 2rem;
    color: color-mix(in srgb, #fff 88%, transparent);
}
.vcp-footer a {
    color: #fff;
    text-decoration: none;
}
.vcp-footer a:hover { text-decoration: underline; }

/* Expandable sponsorship package purchasers */
.sponsorship-offer-toggle-cell,
.sponsorship-pkg-toggle-cell {
  width: 2rem;
  vertical-align: middle;
}
.sponsorship-offer-toggle,
.sponsorship-pkg-toggle,
.sponsorship-offer-name-btn,
.sponsorship-pkg-name-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--heading, var(--text));
  text-align: left;
  cursor: pointer;
}
.sponsorship-offer-toggle,
.sponsorship-pkg-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
}
.sponsorship-offer-toggle:hover,
.sponsorship-pkg-toggle:hover,
.sponsorship-offer-name-btn:hover strong,
.sponsorship-pkg-name-btn:hover strong {
  color: var(--accent, #2563eb);
}
.sponsorship-offer-detail-row > td,
.sponsorship-pkg-detail-row > td {
  background: var(--surface-alt, #f8fafc);
  border-top: 0;
  padding-top: .65rem;
  padding-bottom: .85rem;
}
[data-theme="dark"] .sponsorship-offer-detail-row > td,
[data-theme="dark"] .sponsorship-pkg-detail-row > td,
:root[data-bs-theme="dark"] .sponsorship-offer-detail-row > td,
:root[data-bs-theme="dark"] .sponsorship-pkg-detail-row > td {
  background: var(--surface-nested, color-mix(in srgb, var(--surface) 88%, #000));
}
.sponsorship-offer-buyers,
.sponsorship-pkg-buyers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sponsorship-offer-buyers li,
.sponsorship-pkg-buyers li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--surface-border, #e2e8f0);
}
.sponsorship-offer-buyers li:last-child,
.sponsorship-pkg-buyers li:last-child {
  border-bottom: 0;
}