@charset "UTF-8";
/* CMS Builder — shared styles entry point (css/shared.css)
 *
 * Import order:
 *   1. tokens (light mode defaults)
 *   2. tokens-dark (dark mode overrides)
 *   3. base (element defaults, body/main shell)
 *   4. primitives (reusable .cms-* structural classes)
 *   5. site-nav (header/menu/footer/account dropdown)
 *   6. components (opt-in .cms-* component classes — buttons, cards, etc.)
 *   7. domain partials (Razor public surfaces + Angular admin domain styling)
 *
 * Only two orderings are load-bearing (everything else is separated by
 * specificity, not source order):
 *   - components before the domain partials: domain rules restyle a component
 *     at EQUAL specificity and rely on winning by order — .event-row and
 *     .event-rsvp__btn over .cms-card--flat / .cms-btn (_events),
 *     .profile-edit-section over .cms-status-card (_profile).
 *   - primitives before _auth / _public: .auth-card and .profile-panel are
 *     composed onto .cms-surface and must layer after it.
 *
 * blocks.scss is the second entry point (css/blocks.css) — the block-editor
 * output styles, loaded only by views that render page/post/form blocks.
 *
 * SCSS in this folder is canonical. Run `npm run build:css` after any change
 * and commit the regenerated css/ bundles alongside the source. The check
 * script (`npm run check:css`) fails CI if they ever drift.
 */
/* CMS Builder — shared design tokens (light: "Daylight")
 *
 * Source of truth for all --cms-* CSS custom properties.
 *
 * Do NOT reference --mat-sys-* here — these are independent values. The hub's
 * styles.scss maps Material's system tokens ONTO these (the one documented
 * bridge), never the other way round.
 *
 * UX overhaul Track A (2026-10): values are the Daylight scheme from
 * docs/design/ux-overhaul; names are unchanged so admin seeds (ThemeCssBuilder)
 * keep overriding the same tokens.
 */
/* Declared on :root for the page and on any element carrying data-theme, so a
   `<div data-theme="dark">` is a self-contained scheme island (B19 brand-asset
   previews): every base token — the aliases below included — is re-resolved on
   the island, and the dark override block layers on top of it there. */
:root,
[data-theme] {
  /* ── Brand palette ────────────────────────────────────────────────── */
  /* 6.2:1 on the panel, 5.8:1 on the canvas; white ink clears AA on it. */
  --cms-color-primary: #245bc7;
  --cms-color-on-primary: #ffffff;
  --cms-color-primary-container: #dde7fb;
  --cms-color-on-primary-container: #102447;
  --cms-color-error: #a52b3c;
  /* ── Surfaces ────────────────────────────────────────────────────── */
  /* canvas → surface; panel (cards, fields, menus) → container-lowest;
     raised / selected → container-high. The ramp between them stays
     monotonic so Material's elevation levels still read as elevation. */
  --cms-color-surface: #f6f8fb;
  --cms-color-on-surface: #172233;
  --cms-color-surface-variant: #e4eaf2;
  --cms-color-on-surface-variant: #536174;
  --cms-color-surface-container-lowest: #ffffff;
  --cms-color-surface-container-low: #fbfcfe;
  --cms-color-surface-container: #f1f4f9;
  --cms-color-surface-container-high: #edf2f8;
  --cms-color-surface-container-highest: #e4eaf2;
  /* outline = control boundary (3.8:1 on canvas, 4.0:1 on panel);
     outline-variant = decorative divider, deliberately below 3:1. */
  --cms-color-outline: #718096;
  --cms-color-outline-variant: #cbd5e1;
  /* ── Semantic status ─────────────────────────────────────────────── */
  /* --cms-color-on-{state}: text/icon colour for SOLID state fills, chosen by
     luminance (white where it clears 4.5:1, otherwise the dark ink). Every
     solid button/badge/active chip reads its ink from here rather than #fff.
     ThemeCssBuilder applies the same rule to admin-chosen seeds. */
  --cms-color-on-status-dark: #172233;
  /* Fills are mid-tones that take the dark ink; *-text are the Daylight
     status inks (all ≥ 6.5:1 on canvas and panel). on-*-text is the ink ON a
     *-text tone used as a fill (Material's error / on-error pair): white here,
     the dark navy in Nightwatch — the same rule the theme builder applies. */
  --cms-color-info: #4e9bd8;
  --cms-color-on-info: var(--cms-color-on-status-dark);
  --cms-color-info-bg: #e6f1fa;
  --cms-color-info-text: #235a85;
  --cms-color-on-info-text: #ffffff;
  --cms-color-success: #22a06b;
  --cms-color-on-success: var(--cms-color-on-status-dark);
  --cms-color-success-bg: #e6f6ee;
  --cms-color-success-text: #176348;
  --cms-color-on-success-text: #ffffff;
  --cms-color-warning: #e8a33d;
  --cms-color-on-warning: var(--cms-color-on-status-dark);
  --cms-color-warning-bg: #fdf2e0;
  --cms-color-warning-text: #7a4b00;
  --cms-color-on-warning-text: #ffffff;
  --cms-color-warning-surface: #fff8e6;
  --cms-color-warning-border: #e8a33d;
  --cms-color-danger: #e46a7a;
  --cms-color-on-danger: var(--cms-color-on-status-dark);
  --cms-color-danger-bg: #fbe7ea;
  --cms-color-danger-text: #a52b3c;
  --cms-color-on-danger-text: #ffffff;
  /* ── Shadows ─────────────────────────────────────────────────────── */
  --cms-shadow-sm: 0 1px 2px rgba(23, 34, 51, 0.06);
  --cms-shadow-md: 0 2px 8px rgba(23, 34, 51, 0.08);
  --cms-shadow-lg: 0 8px 24px rgba(23, 34, 51, 0.14);
  /* ── Semantic text/surface aliases (public rendering) ────────────── */
  --cms-color-text: var(--cms-color-on-surface);
  /* on-surface-variant (5.9:1), not outline (3.8:1) — secondary text is still text. */
  --cms-color-text-secondary: var(--cms-color-on-surface-variant);
  --cms-color-surface-alt: var(--cms-color-surface-container-low);
  --cms-color-surface-elevated: var(--cms-color-surface-container-lowest);
  --cms-color-border: var(--cms-color-outline-variant);
  --cms-color-border-subtle: rgba(113, 128, 150, 0.25);
  --cms-color-border-subtle: color-mix(in srgb, var(--cms-color-outline) 25%, transparent);
  /* ── Interaction state ───────────────────────────────────────────── */
  --cms-color-link: var(--cms-color-primary);
  --cms-color-link-hover: color-mix(in srgb, var(--cms-color-link) 80%, black);
  /* Light: the ring is the primary (5.8:1 on canvas, 6.2:1 on panel). */
  --cms-color-focus-ring: var(--cms-color-primary);
  --cms-color-hover-overlay: rgba(23, 34, 51, 0.06);
  --cms-color-hover-overlay: color-mix(in srgb, var(--cms-color-on-surface) 6%, transparent);
  --cms-color-backdrop: rgba(0, 0, 0, 0.5);
  --cms-color-text-disabled: rgba(23, 34, 51, 0.38);
  --cms-color-text-disabled: color-mix(in srgb, var(--cms-color-on-surface) 38%, transparent);
  /* ── Per-state subtle backgrounds (12% opacity) ──────────────────── */
  --cms-color-primary-text: color-mix(in srgb, var(--cms-color-primary) 55%, black);
  --cms-color-primary-bg-subtle: rgba(36, 91, 199, 0.12);
  --cms-color-primary-bg-subtle: color-mix(in srgb, var(--cms-color-primary) 12%, transparent);
  --cms-color-success-bg-subtle: rgba(34, 160, 107, 0.12);
  --cms-color-success-bg-subtle: color-mix(in srgb, var(--cms-color-success) 12%, transparent);
  --cms-color-info-bg-subtle: rgba(58, 141, 208, 0.12);
  --cms-color-info-bg-subtle: color-mix(in srgb, var(--cms-color-info) 12%, transparent);
  --cms-color-warning-bg-subtle: rgba(232, 163, 61, 0.12);
  --cms-color-warning-bg-subtle: color-mix(in srgb, var(--cms-color-warning) 12%, transparent);
  --cms-color-danger-bg-subtle: rgba(224, 90, 107, 0.12);
  --cms-color-danger-bg-subtle: color-mix(in srgb, var(--cms-color-danger) 12%, transparent);
  /* ── Per-state emphasis (hover/active darkened shades) ────────────── */
  --cms-color-primary-emphasis: #1f4da9;
  --cms-color-primary-emphasis: color-mix(in srgb, var(--cms-color-primary) 85%, black);
  --cms-color-success-emphasis: #1d885b;
  --cms-color-success-emphasis: color-mix(in srgb, var(--cms-color-success) 85%, black);
  --cms-color-info-emphasis: #3178b1;
  --cms-color-info-emphasis: color-mix(in srgb, var(--cms-color-info) 85%, black);
  --cms-color-warning-emphasis: #c58b34;
  --cms-color-warning-emphasis: color-mix(in srgb, var(--cms-color-warning) 85%, black);
  --cms-color-danger-emphasis: #be4d5b;
  --cms-color-danger-emphasis: color-mix(in srgb, var(--cms-color-danger) 85%, black);
  /* ── Per-state subtle borders (25% opacity) ──────────────────────── */
  --cms-color-primary-border-subtle: rgba(36, 91, 199, 0.25);
  --cms-color-primary-border-subtle: color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
  --cms-color-success-border-subtle: rgba(34, 160, 107, 0.25);
  --cms-color-success-border-subtle: color-mix(in srgb, var(--cms-color-success) 25%, transparent);
  --cms-color-info-border-subtle: rgba(58, 141, 208, 0.25);
  --cms-color-info-border-subtle: color-mix(in srgb, var(--cms-color-info) 25%, transparent);
  --cms-color-warning-border-subtle: rgba(232, 163, 61, 0.25);
  --cms-color-warning-border-subtle: color-mix(in srgb, var(--cms-color-warning) 25%, transparent);
  --cms-color-danger-border-subtle: rgba(224, 90, 107, 0.25);
  --cms-color-danger-border-subtle: color-mix(in srgb, var(--cms-color-danger) 25%, transparent);
  /* ── Glassmorphism preparation (no-op in light mode) ─────────────── */
  --cms-glass-bg: transparent;
  --cms-glass-border: var(--cms-color-outline-variant);
  --cms-glass-border-style: solid;
}

/* ── Structural tokens ───────────────────────────────────────────────────────
   Typography, spacing, radius, layout and z-index do not change with the colour
   scheme, so they live on :root only. A `data-theme` island must NOT re-declare
   them: /theme.css puts the admin's font on :root, and an island that repeated
   the default stack here would hide it (S02 addendum). */
:root {
  /* ── Typography ──────────────────────────────────────────────────── */
  /* The same stack as ThemeFontRegistry's system-ui entry (the registry
     default, which emits no override); a chosen font replaces this via /theme.css. */
  --cms-font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  --cms-font-family-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  /* 16px workspace text (base = md = 1rem); public prose opts into lg. */
  --cms-font-size-xs: 0.75rem;
  --cms-font-size-sm: 0.875rem;
  --cms-font-size-base: 1rem;
  --cms-font-size-md: 1rem;
  --cms-font-size-lg: 1.125rem;
  --cms-font-size-xl: 1.25rem;
  --cms-font-size-2xl: 1.5rem;
  --cms-font-size-3xl: 2rem;
  --cms-font-weight-regular: 400;
  --cms-font-weight-medium: 500;
  --cms-font-weight-semibold: 600;
  --cms-font-weight-bold: 700;
  --cms-line-height-tight: 1.25;
  --cms-line-height-base: 1.5;
  /* Reading measure for public prose (blog post, page body). */
  --cms-measure-prose: 68ch;
  /* ── Spacing (4px base grid) ─────────────────────────────────────── */
  --cms-space-1: 4px;
  --cms-space-2: 8px;
  --cms-space-3: 12px;
  --cms-space-4: 16px;
  --cms-space-5: 20px;
  --cms-space-6: 24px;
  --cms-space-8: 32px;
  --cms-space-12: 48px;
  /* Named spacing aliases (used by blocks.css and public views) */
  --cms-space-xs: var(--cms-space-1);
  --cms-space-sm: var(--cms-space-2);
  --cms-space-md: var(--cms-space-4);
  --cms-space-lg: var(--cms-space-6);
  /* ── Border radius ───────────────────────────────────────────────── */
  /* 8px controls, 12px panels. */
  --cms-radius-sm: 4px;
  --cms-radius-md: 8px;
  --cms-radius-lg: 12px;
  --cms-radius-full: 999px;
  /* ── Layout ──────────────────────────────────────────────────────── */
  /* 1200px public canvas; prose narrows itself with --cms-measure-prose. */
  --cms-layout-content-width: 1200px;
  --cms-layout-content-wide: 1400px;
  --cms-layout-header-height: 64px;
  --cms-layout-content-padding: 24px;
  /* ── Z-index ─────────────────────────────────────────────────────── */
  --cms-z-sticky: 10;
  --cms-z-toolbar: 100;
  --cms-z-overlay: 200;
  /* Page-level layers, lowest to highest: a banner (cookie consent) must sit
     UNDER a modal (lightbox, mention list), and a confirmation dialog over both. */
  --cms-z-banner: 900;
  --cms-z-modal: 1000;
  --cms-z-dialog: 2000;
  --cms-z-skip-link: 3000;
}

/* ── Factory scope ───────────────────────────────────────────────────────────
   Protected chrome (recovery pages, preview banners) re-declares every token a
   theme can move — palette, font and radius — so a published theme on :root can
   never reach it. Custom properties inherit from the nearest declaration, so the
   class on the chrome wins regardless of selector specificity. `data-scheme="dark"`
   on the same element layers the dark tokens (see _tokens-dark.scss). */
.cms-factory-scope {
  /* ── Brand palette ────────────────────────────────────────────────── */
  /* 6.2:1 on the panel, 5.8:1 on the canvas; white ink clears AA on it. */
  --cms-color-primary: #245bc7;
  --cms-color-on-primary: #ffffff;
  --cms-color-primary-container: #dde7fb;
  --cms-color-on-primary-container: #102447;
  --cms-color-error: #a52b3c;
  /* ── Surfaces ────────────────────────────────────────────────────── */
  /* canvas → surface; panel (cards, fields, menus) → container-lowest;
     raised / selected → container-high. The ramp between them stays
     monotonic so Material's elevation levels still read as elevation. */
  --cms-color-surface: #f6f8fb;
  --cms-color-on-surface: #172233;
  --cms-color-surface-variant: #e4eaf2;
  --cms-color-on-surface-variant: #536174;
  --cms-color-surface-container-lowest: #ffffff;
  --cms-color-surface-container-low: #fbfcfe;
  --cms-color-surface-container: #f1f4f9;
  --cms-color-surface-container-high: #edf2f8;
  --cms-color-surface-container-highest: #e4eaf2;
  /* outline = control boundary (3.8:1 on canvas, 4.0:1 on panel);
     outline-variant = decorative divider, deliberately below 3:1. */
  --cms-color-outline: #718096;
  --cms-color-outline-variant: #cbd5e1;
  /* ── Semantic status ─────────────────────────────────────────────── */
  /* --cms-color-on-{state}: text/icon colour for SOLID state fills, chosen by
     luminance (white where it clears 4.5:1, otherwise the dark ink). Every
     solid button/badge/active chip reads its ink from here rather than #fff.
     ThemeCssBuilder applies the same rule to admin-chosen seeds. */
  --cms-color-on-status-dark: #172233;
  /* Fills are mid-tones that take the dark ink; *-text are the Daylight
     status inks (all ≥ 6.5:1 on canvas and panel). on-*-text is the ink ON a
     *-text tone used as a fill (Material's error / on-error pair): white here,
     the dark navy in Nightwatch — the same rule the theme builder applies. */
  --cms-color-info: #4e9bd8;
  --cms-color-on-info: var(--cms-color-on-status-dark);
  --cms-color-info-bg: #e6f1fa;
  --cms-color-info-text: #235a85;
  --cms-color-on-info-text: #ffffff;
  --cms-color-success: #22a06b;
  --cms-color-on-success: var(--cms-color-on-status-dark);
  --cms-color-success-bg: #e6f6ee;
  --cms-color-success-text: #176348;
  --cms-color-on-success-text: #ffffff;
  --cms-color-warning: #e8a33d;
  --cms-color-on-warning: var(--cms-color-on-status-dark);
  --cms-color-warning-bg: #fdf2e0;
  --cms-color-warning-text: #7a4b00;
  --cms-color-on-warning-text: #ffffff;
  --cms-color-warning-surface: #fff8e6;
  --cms-color-warning-border: #e8a33d;
  --cms-color-danger: #e46a7a;
  --cms-color-on-danger: var(--cms-color-on-status-dark);
  --cms-color-danger-bg: #fbe7ea;
  --cms-color-danger-text: #a52b3c;
  --cms-color-on-danger-text: #ffffff;
  /* ── Shadows ─────────────────────────────────────────────────────── */
  --cms-shadow-sm: 0 1px 2px rgba(23, 34, 51, 0.06);
  --cms-shadow-md: 0 2px 8px rgba(23, 34, 51, 0.08);
  --cms-shadow-lg: 0 8px 24px rgba(23, 34, 51, 0.14);
  /* ── Semantic text/surface aliases (public rendering) ────────────── */
  --cms-color-text: var(--cms-color-on-surface);
  /* on-surface-variant (5.9:1), not outline (3.8:1) — secondary text is still text. */
  --cms-color-text-secondary: var(--cms-color-on-surface-variant);
  --cms-color-surface-alt: var(--cms-color-surface-container-low);
  --cms-color-surface-elevated: var(--cms-color-surface-container-lowest);
  --cms-color-border: var(--cms-color-outline-variant);
  --cms-color-border-subtle: rgba(113, 128, 150, 0.25);
  --cms-color-border-subtle: color-mix(in srgb, var(--cms-color-outline) 25%, transparent);
  /* ── Interaction state ───────────────────────────────────────────── */
  --cms-color-link: var(--cms-color-primary);
  --cms-color-link-hover: color-mix(in srgb, var(--cms-color-link) 80%, black);
  /* Light: the ring is the primary (5.8:1 on canvas, 6.2:1 on panel). */
  --cms-color-focus-ring: var(--cms-color-primary);
  --cms-color-hover-overlay: rgba(23, 34, 51, 0.06);
  --cms-color-hover-overlay: color-mix(in srgb, var(--cms-color-on-surface) 6%, transparent);
  --cms-color-backdrop: rgba(0, 0, 0, 0.5);
  --cms-color-text-disabled: rgba(23, 34, 51, 0.38);
  --cms-color-text-disabled: color-mix(in srgb, var(--cms-color-on-surface) 38%, transparent);
  /* ── Per-state subtle backgrounds (12% opacity) ──────────────────── */
  --cms-color-primary-text: color-mix(in srgb, var(--cms-color-primary) 55%, black);
  --cms-color-primary-bg-subtle: rgba(36, 91, 199, 0.12);
  --cms-color-primary-bg-subtle: color-mix(in srgb, var(--cms-color-primary) 12%, transparent);
  --cms-color-success-bg-subtle: rgba(34, 160, 107, 0.12);
  --cms-color-success-bg-subtle: color-mix(in srgb, var(--cms-color-success) 12%, transparent);
  --cms-color-info-bg-subtle: rgba(58, 141, 208, 0.12);
  --cms-color-info-bg-subtle: color-mix(in srgb, var(--cms-color-info) 12%, transparent);
  --cms-color-warning-bg-subtle: rgba(232, 163, 61, 0.12);
  --cms-color-warning-bg-subtle: color-mix(in srgb, var(--cms-color-warning) 12%, transparent);
  --cms-color-danger-bg-subtle: rgba(224, 90, 107, 0.12);
  --cms-color-danger-bg-subtle: color-mix(in srgb, var(--cms-color-danger) 12%, transparent);
  /* ── Per-state emphasis (hover/active darkened shades) ────────────── */
  --cms-color-primary-emphasis: #1f4da9;
  --cms-color-primary-emphasis: color-mix(in srgb, var(--cms-color-primary) 85%, black);
  --cms-color-success-emphasis: #1d885b;
  --cms-color-success-emphasis: color-mix(in srgb, var(--cms-color-success) 85%, black);
  --cms-color-info-emphasis: #3178b1;
  --cms-color-info-emphasis: color-mix(in srgb, var(--cms-color-info) 85%, black);
  --cms-color-warning-emphasis: #c58b34;
  --cms-color-warning-emphasis: color-mix(in srgb, var(--cms-color-warning) 85%, black);
  --cms-color-danger-emphasis: #be4d5b;
  --cms-color-danger-emphasis: color-mix(in srgb, var(--cms-color-danger) 85%, black);
  /* ── Per-state subtle borders (25% opacity) ──────────────────────── */
  --cms-color-primary-border-subtle: rgba(36, 91, 199, 0.25);
  --cms-color-primary-border-subtle: color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
  --cms-color-success-border-subtle: rgba(34, 160, 107, 0.25);
  --cms-color-success-border-subtle: color-mix(in srgb, var(--cms-color-success) 25%, transparent);
  --cms-color-info-border-subtle: rgba(58, 141, 208, 0.25);
  --cms-color-info-border-subtle: color-mix(in srgb, var(--cms-color-info) 25%, transparent);
  --cms-color-warning-border-subtle: rgba(232, 163, 61, 0.25);
  --cms-color-warning-border-subtle: color-mix(in srgb, var(--cms-color-warning) 25%, transparent);
  --cms-color-danger-border-subtle: rgba(224, 90, 107, 0.25);
  --cms-color-danger-border-subtle: color-mix(in srgb, var(--cms-color-danger) 25%, transparent);
  /* ── Glassmorphism preparation (no-op in light mode) ─────────────── */
  --cms-glass-bg: transparent;
  --cms-glass-border: var(--cms-color-outline-variant);
  --cms-glass-border-style: solid;
  /* ── Typography ──────────────────────────────────────────────────── */
  /* The same stack as ThemeFontRegistry's system-ui entry (the registry
     default, which emits no override); a chosen font replaces this via /theme.css. */
  --cms-font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  --cms-font-family-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  /* 16px workspace text (base = md = 1rem); public prose opts into lg. */
  --cms-font-size-xs: 0.75rem;
  --cms-font-size-sm: 0.875rem;
  --cms-font-size-base: 1rem;
  --cms-font-size-md: 1rem;
  --cms-font-size-lg: 1.125rem;
  --cms-font-size-xl: 1.25rem;
  --cms-font-size-2xl: 1.5rem;
  --cms-font-size-3xl: 2rem;
  --cms-font-weight-regular: 400;
  --cms-font-weight-medium: 500;
  --cms-font-weight-semibold: 600;
  --cms-font-weight-bold: 700;
  --cms-line-height-tight: 1.25;
  --cms-line-height-base: 1.5;
  /* Reading measure for public prose (blog post, page body). */
  --cms-measure-prose: 68ch;
  /* ── Spacing (4px base grid) ─────────────────────────────────────── */
  --cms-space-1: 4px;
  --cms-space-2: 8px;
  --cms-space-3: 12px;
  --cms-space-4: 16px;
  --cms-space-5: 20px;
  --cms-space-6: 24px;
  --cms-space-8: 32px;
  --cms-space-12: 48px;
  /* Named spacing aliases (used by blocks.css and public views) */
  --cms-space-xs: var(--cms-space-1);
  --cms-space-sm: var(--cms-space-2);
  --cms-space-md: var(--cms-space-4);
  --cms-space-lg: var(--cms-space-6);
  /* ── Border radius ───────────────────────────────────────────────── */
  /* 8px controls, 12px panels. */
  --cms-radius-sm: 4px;
  --cms-radius-md: 8px;
  --cms-radius-lg: 12px;
  --cms-radius-full: 999px;
  /* ── Layout ──────────────────────────────────────────────────────── */
  /* 1200px public canvas; prose narrows itself with --cms-measure-prose. */
  --cms-layout-content-width: 1200px;
  --cms-layout-content-wide: 1400px;
  --cms-layout-header-height: 64px;
  --cms-layout-content-padding: 24px;
  /* ── Z-index ─────────────────────────────────────────────────────── */
  --cms-z-sticky: 10;
  --cms-z-toolbar: 100;
  --cms-z-overlay: 200;
  /* Page-level layers, lowest to highest: a banner (cookie consent) must sit
     UNDER a modal (lightbox, mention list), and a confirmation dialog over both. */
  --cms-z-banner: 900;
  --cms-z-modal: 1000;
  --cms-z-dialog: 2000;
  --cms-z-skip-link: 3000;
  color-scheme: light;
}

/* ── Dark mode overrides ("Nightwatch") ──────────────────────────────────────── */
/* `html[...]` keeps out-ranking the light seeds the admin theme puts on :root;
   the bare attribute form lets a nested `data-theme="dark"` island go dark. */
html[data-theme=dark],
[data-theme=dark] {
  color-scheme: dark;
  /* ── Brand palette ─────────────────────────────────────────────── */
  /* A tint, not a mid-tone: 9.4:1 on the canvas as text and as a fill it
     takes the navy ink below (8.1:1) rather than white (1.9:1). */
  --cms-color-primary: #9bbcff;
  --cms-color-on-primary: var(--cms-color-on-status-dark);
  --cms-color-primary-container: #1e3a6e;
  --cms-color-on-primary-container: #d7e3ff;
  --cms-color-error: #ffafb8;
  /* ── Surfaces ──────────────────────────────────────────────────── */
  /* canvas #111820 → panel #1b2633 → raised #253346 */
  --cms-color-surface: #111820;
  --cms-color-on-surface: #edf2f8;
  --cms-color-surface-variant: #253346;
  --cms-color-on-surface-variant: #b0bed0;
  --cms-color-surface-container-lowest: #0c1218;
  --cms-color-surface-container-low: #161f2a;
  --cms-color-surface-container: #1b2633;
  --cms-color-surface-container-high: #253346;
  --cms-color-surface-container-highest: #2e3d52;
  --cms-color-outline: #71839b;
  --cms-color-outline-variant: #3f5066;
  /* ── Semantic status ───────────────────────────────────────────── */
  /* Nightwatch's on-brand ink: the dark navy every light status fill and the
     primary tint take instead of near-black. */
  --cms-color-on-status-dark: #102447;
  --cms-color-info: #6fb7f2;
  --cms-color-on-info: var(--cms-color-on-status-dark);
  --cms-color-info-bg: #0f2436;
  --cms-color-info-text: #a2d5ff;
  --cms-color-on-info-text: var(--cms-color-on-status-dark);
  --cms-color-success: #5fd3a5;
  --cms-color-on-success: var(--cms-color-on-status-dark);
  --cms-color-success-bg: #0f2a20;
  --cms-color-success-text: #8fe0b9;
  --cms-color-on-success-text: var(--cms-color-on-status-dark);
  --cms-color-warning: #f2b85a;
  --cms-color-on-warning: var(--cms-color-on-status-dark);
  --cms-color-warning-bg: #2e2410;
  --cms-color-warning-text: #f5ce82;
  --cms-color-on-warning-text: var(--cms-color-on-status-dark);
  --cms-color-warning-surface: #2e2410;
  --cms-color-warning-border: #f2b85a;
  --cms-color-danger: #f27d8e;
  --cms-color-on-danger: var(--cms-color-on-status-dark);
  --cms-color-danger-bg: #2f1218;
  --cms-color-danger-text: #ffafb8;
  --cms-color-on-danger-text: var(--cms-color-on-status-dark);
  /* ── Shadows ───────────────────────────────────────────────────── */
  --cms-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
  --cms-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --cms-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
  /* ── Semantic text/surface aliases ─────────────────────────────── */
  /* text / text-secondary / surface-alt / border resolve through the light
     aliases (they point at the swapped base tokens above), so only the ones
     that change their MAPPING are re-declared here. */
  --cms-color-surface-elevated: var(--cms-color-surface-container);
  --cms-color-border-subtle: rgba(113, 131, 155, 0.15);
  --cms-color-border-subtle: color-mix(in srgb, var(--cms-color-outline) 15%, transparent);
  /* ── Interaction state ─────────────────────────────────────────── */
  /* Raw primary is a button color, not a text color — most mid-tone primaries
     fail WCAG as link text on dark surfaces. Derive a lightened tint instead;
     the admin theme can still override --cms-color-link outright. (With the
     Nightwatch default this lands near #c9daff; the plan's #9bbcff is the
     primary itself, kept distinct so themed navies stay readable.) */
  --cms-color-link: color-mix(in srgb, var(--cms-color-primary) 45%, white);
  --cms-color-link-hover: color-mix(in srgb, var(--cms-color-primary) 30%, white);
  /* Dark: the ring follows the readable link tint, not the primary fill. */
  --cms-color-focus-ring: var(--cms-color-link);
  --cms-color-hover-overlay: rgba(237, 242, 248, 0.06);
  --cms-color-hover-overlay: color-mix(in srgb, var(--cms-color-on-surface) 6%, transparent);
  --cms-color-backdrop: rgba(0, 0, 0, 0.7);
  --cms-color-text-disabled: rgba(237, 242, 248, 0.38);
  --cms-color-text-disabled: color-mix(in srgb, var(--cms-color-on-surface) 38%, transparent);
  /* ── Per-state subtle backgrounds (12% opacity) ──────────────────── */
  /* 60/40 (not the status tokens' 70/30) — themed primaries are often dark
     navies that need the extra lift to clear AA on the 12% tint. */
  --cms-color-primary-text: color-mix(in srgb, var(--cms-color-primary) 60%, white);
  --cms-color-primary-bg-subtle: rgba(155, 188, 255, 0.12);
  --cms-color-primary-bg-subtle: color-mix(in srgb, var(--cms-color-primary) 12%, transparent);
  --cms-color-success-bg-subtle: rgba(95, 211, 165, 0.12);
  --cms-color-success-bg-subtle: color-mix(in srgb, var(--cms-color-success) 12%, transparent);
  --cms-color-info-bg-subtle: rgba(111, 183, 242, 0.12);
  --cms-color-info-bg-subtle: color-mix(in srgb, var(--cms-color-info) 12%, transparent);
  --cms-color-warning-bg-subtle: rgba(242, 184, 90, 0.12);
  --cms-color-warning-bg-subtle: color-mix(in srgb, var(--cms-color-warning) 12%, transparent);
  --cms-color-danger-bg-subtle: rgba(242, 125, 142, 0.12);
  --cms-color-danger-bg-subtle: color-mix(in srgb, var(--cms-color-danger) 12%, transparent);
  /* ── Per-state emphasis (hover/active lightened shades) ───────────── */
  --cms-color-primary-emphasis: #aac6ff;
  --cms-color-primary-emphasis: color-mix(in srgb, var(--cms-color-primary) 85%, white);
  --cms-color-success-emphasis: #77dab3;
  --cms-color-success-emphasis: color-mix(in srgb, var(--cms-color-success) 85%, white);
  --cms-color-info-emphasis: #85c2f4;
  --cms-color-info-emphasis: color-mix(in srgb, var(--cms-color-info) 85%, white);
  --cms-color-warning-emphasis: #f4c373;
  --cms-color-warning-emphasis: color-mix(in srgb, var(--cms-color-warning) 85%, white);
  --cms-color-danger-emphasis: #f4919f;
  --cms-color-danger-emphasis: color-mix(in srgb, var(--cms-color-danger) 85%, white);
  /* ── Per-state subtle borders (25% opacity) ──────────────────────── */
  --cms-color-primary-border-subtle: rgba(155, 188, 255, 0.25);
  --cms-color-primary-border-subtle: color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
  --cms-color-success-border-subtle: rgba(95, 211, 165, 0.25);
  --cms-color-success-border-subtle: color-mix(in srgb, var(--cms-color-success) 25%, transparent);
  --cms-color-info-border-subtle: rgba(111, 183, 242, 0.25);
  --cms-color-info-border-subtle: color-mix(in srgb, var(--cms-color-info) 25%, transparent);
  --cms-color-warning-border-subtle: rgba(242, 184, 90, 0.25);
  --cms-color-warning-border-subtle: color-mix(in srgb, var(--cms-color-warning) 25%, transparent);
  --cms-color-danger-border-subtle: rgba(242, 125, 142, 0.25);
  --cms-color-danger-border-subtle: color-mix(in srgb, var(--cms-color-danger) 25%, transparent);
  /* ── Glassmorphism preparation (active in dark mode) ─────────────── */
  --cms-glass-bg: rgba(255, 255, 255, 0.04);
  --cms-glass-border: rgba(229, 243, 255, 0.07);
  --cms-glass-border-style: dashed;
}

/* Factory scope, dark variant (see _tokens.scss): the same declarations the dark page gets. */
.cms-factory-scope[data-scheme=dark] {
  color-scheme: dark;
  /* ── Brand palette ─────────────────────────────────────────────── */
  /* A tint, not a mid-tone: 9.4:1 on the canvas as text and as a fill it
     takes the navy ink below (8.1:1) rather than white (1.9:1). */
  --cms-color-primary: #9bbcff;
  --cms-color-on-primary: var(--cms-color-on-status-dark);
  --cms-color-primary-container: #1e3a6e;
  --cms-color-on-primary-container: #d7e3ff;
  --cms-color-error: #ffafb8;
  /* ── Surfaces ──────────────────────────────────────────────────── */
  /* canvas #111820 → panel #1b2633 → raised #253346 */
  --cms-color-surface: #111820;
  --cms-color-on-surface: #edf2f8;
  --cms-color-surface-variant: #253346;
  --cms-color-on-surface-variant: #b0bed0;
  --cms-color-surface-container-lowest: #0c1218;
  --cms-color-surface-container-low: #161f2a;
  --cms-color-surface-container: #1b2633;
  --cms-color-surface-container-high: #253346;
  --cms-color-surface-container-highest: #2e3d52;
  --cms-color-outline: #71839b;
  --cms-color-outline-variant: #3f5066;
  /* ── Semantic status ───────────────────────────────────────────── */
  /* Nightwatch's on-brand ink: the dark navy every light status fill and the
     primary tint take instead of near-black. */
  --cms-color-on-status-dark: #102447;
  --cms-color-info: #6fb7f2;
  --cms-color-on-info: var(--cms-color-on-status-dark);
  --cms-color-info-bg: #0f2436;
  --cms-color-info-text: #a2d5ff;
  --cms-color-on-info-text: var(--cms-color-on-status-dark);
  --cms-color-success: #5fd3a5;
  --cms-color-on-success: var(--cms-color-on-status-dark);
  --cms-color-success-bg: #0f2a20;
  --cms-color-success-text: #8fe0b9;
  --cms-color-on-success-text: var(--cms-color-on-status-dark);
  --cms-color-warning: #f2b85a;
  --cms-color-on-warning: var(--cms-color-on-status-dark);
  --cms-color-warning-bg: #2e2410;
  --cms-color-warning-text: #f5ce82;
  --cms-color-on-warning-text: var(--cms-color-on-status-dark);
  --cms-color-warning-surface: #2e2410;
  --cms-color-warning-border: #f2b85a;
  --cms-color-danger: #f27d8e;
  --cms-color-on-danger: var(--cms-color-on-status-dark);
  --cms-color-danger-bg: #2f1218;
  --cms-color-danger-text: #ffafb8;
  --cms-color-on-danger-text: var(--cms-color-on-status-dark);
  /* ── Shadows ───────────────────────────────────────────────────── */
  --cms-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
  --cms-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --cms-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
  /* ── Semantic text/surface aliases ─────────────────────────────── */
  /* text / text-secondary / surface-alt / border resolve through the light
     aliases (they point at the swapped base tokens above), so only the ones
     that change their MAPPING are re-declared here. */
  --cms-color-surface-elevated: var(--cms-color-surface-container);
  --cms-color-border-subtle: rgba(113, 131, 155, 0.15);
  --cms-color-border-subtle: color-mix(in srgb, var(--cms-color-outline) 15%, transparent);
  /* ── Interaction state ─────────────────────────────────────────── */
  /* Raw primary is a button color, not a text color — most mid-tone primaries
     fail WCAG as link text on dark surfaces. Derive a lightened tint instead;
     the admin theme can still override --cms-color-link outright. (With the
     Nightwatch default this lands near #c9daff; the plan's #9bbcff is the
     primary itself, kept distinct so themed navies stay readable.) */
  --cms-color-link: color-mix(in srgb, var(--cms-color-primary) 45%, white);
  --cms-color-link-hover: color-mix(in srgb, var(--cms-color-primary) 30%, white);
  /* Dark: the ring follows the readable link tint, not the primary fill. */
  --cms-color-focus-ring: var(--cms-color-link);
  --cms-color-hover-overlay: rgba(237, 242, 248, 0.06);
  --cms-color-hover-overlay: color-mix(in srgb, var(--cms-color-on-surface) 6%, transparent);
  --cms-color-backdrop: rgba(0, 0, 0, 0.7);
  --cms-color-text-disabled: rgba(237, 242, 248, 0.38);
  --cms-color-text-disabled: color-mix(in srgb, var(--cms-color-on-surface) 38%, transparent);
  /* ── Per-state subtle backgrounds (12% opacity) ──────────────────── */
  /* 60/40 (not the status tokens' 70/30) — themed primaries are often dark
     navies that need the extra lift to clear AA on the 12% tint. */
  --cms-color-primary-text: color-mix(in srgb, var(--cms-color-primary) 60%, white);
  --cms-color-primary-bg-subtle: rgba(155, 188, 255, 0.12);
  --cms-color-primary-bg-subtle: color-mix(in srgb, var(--cms-color-primary) 12%, transparent);
  --cms-color-success-bg-subtle: rgba(95, 211, 165, 0.12);
  --cms-color-success-bg-subtle: color-mix(in srgb, var(--cms-color-success) 12%, transparent);
  --cms-color-info-bg-subtle: rgba(111, 183, 242, 0.12);
  --cms-color-info-bg-subtle: color-mix(in srgb, var(--cms-color-info) 12%, transparent);
  --cms-color-warning-bg-subtle: rgba(242, 184, 90, 0.12);
  --cms-color-warning-bg-subtle: color-mix(in srgb, var(--cms-color-warning) 12%, transparent);
  --cms-color-danger-bg-subtle: rgba(242, 125, 142, 0.12);
  --cms-color-danger-bg-subtle: color-mix(in srgb, var(--cms-color-danger) 12%, transparent);
  /* ── Per-state emphasis (hover/active lightened shades) ───────────── */
  --cms-color-primary-emphasis: #aac6ff;
  --cms-color-primary-emphasis: color-mix(in srgb, var(--cms-color-primary) 85%, white);
  --cms-color-success-emphasis: #77dab3;
  --cms-color-success-emphasis: color-mix(in srgb, var(--cms-color-success) 85%, white);
  --cms-color-info-emphasis: #85c2f4;
  --cms-color-info-emphasis: color-mix(in srgb, var(--cms-color-info) 85%, white);
  --cms-color-warning-emphasis: #f4c373;
  --cms-color-warning-emphasis: color-mix(in srgb, var(--cms-color-warning) 85%, white);
  --cms-color-danger-emphasis: #f4919f;
  --cms-color-danger-emphasis: color-mix(in srgb, var(--cms-color-danger) 85%, white);
  /* ── Per-state subtle borders (25% opacity) ──────────────────────── */
  --cms-color-primary-border-subtle: rgba(155, 188, 255, 0.25);
  --cms-color-primary-border-subtle: color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
  --cms-color-success-border-subtle: rgba(95, 211, 165, 0.25);
  --cms-color-success-border-subtle: color-mix(in srgb, var(--cms-color-success) 25%, transparent);
  --cms-color-info-border-subtle: rgba(111, 183, 242, 0.25);
  --cms-color-info-border-subtle: color-mix(in srgb, var(--cms-color-info) 25%, transparent);
  --cms-color-warning-border-subtle: rgba(242, 184, 90, 0.25);
  --cms-color-warning-border-subtle: color-mix(in srgb, var(--cms-color-warning) 25%, transparent);
  --cms-color-danger-border-subtle: rgba(242, 125, 142, 0.25);
  --cms-color-danger-border-subtle: color-mix(in srgb, var(--cms-color-danger) 25%, transparent);
  /* ── Glassmorphism preparation (active in dark mode) ─────────────── */
  --cms-glass-bg: rgba(255, 255, 255, 0.04);
  --cms-glass-border: rgba(229, 243, 255, 0.07);
  --cms-glass-border-style: dashed;
}

/* CMS Builder — shared base styles (element defaults only) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--cms-font-family-base);
  font-size: var(--cms-font-size-md);
  line-height: var(--cms-line-height-base);
  color: var(--cms-color-on-surface);
  background-color: var(--cms-color-surface);
  color-scheme: light;
}

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

/* Full-height column so the footer sits at the bottom of short pages and
   <main> takes the remaining space. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cms-color-surface);
  color: var(--cms-color-text);
}

main {
  flex: 1;
  padding-block: var(--cms-space-8);
}

/* The hidden attribute must always win — component display rules (flex/grid on
   toggled shells like the gallery lightbox) otherwise silently defeat it and
   leave "closed" overlays intercepting every click. */
[hidden] {
  display: none !important;
}

/* Screen-reader-only text (standard clip pattern). Markup referenced this
   class long before it was defined, so the "hidden" text rendered visibly —
   e.g. the site name next to the header logo. */
.cms-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Vestibular-safe default: collapse decorative motion when the OS asks for it.
   Components never need to opt in individually. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ── Headings ───────────────────────────────────────────────────────────────── */
h1 {
  font-size: var(--cms-font-size-3xl);
  font-weight: var(--cms-font-weight-medium);
  line-height: var(--cms-line-height-tight);
  margin: 0 0 var(--cms-space-4);
}

h2 {
  font-size: var(--cms-font-size-2xl);
  font-weight: var(--cms-font-weight-medium);
  line-height: var(--cms-line-height-tight);
  margin: 0 0 var(--cms-space-2);
}

h3 {
  font-size: var(--cms-font-size-xl);
  font-weight: var(--cms-font-weight-semibold);
  line-height: var(--cms-line-height-tight);
  margin: 0 0 var(--cms-space-2);
}

h4 {
  font-size: var(--cms-font-size-lg);
  font-weight: var(--cms-font-weight-semibold);
  line-height: var(--cms-line-height-tight);
  margin: 0 0 var(--cms-space-2);
}

/* ── Body text ──────────────────────────────────────────────────────────────── */
p {
  margin: 0 0 var(--cms-space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ── Lists ──────────────────────────────────────────────────────────────────── */
ul,
ol {
  margin: 0 0 var(--cms-space-4);
  padding-left: var(--cms-space-6);
}

li + li {
  margin-top: var(--cms-space-1);
}

/* ── Links ──────────────────────────────────────────────────────────────────── */
a {
  color: var(--cms-color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--cms-color-link-hover);
  text-decoration: underline;
}

/* ── Code ───────────────────────────────────────────────────────────────────── */
code {
  font-family: var(--cms-font-family-mono);
  font-size: var(--cms-font-size-base);
  background: var(--cms-color-surface-variant);
  padding: 2px 6px;
  border-radius: var(--cms-radius-sm);
}

pre {
  margin: 0 0 var(--cms-space-4);
  padding: var(--cms-space-4);
  background: var(--cms-color-surface-variant);
  border-radius: var(--cms-radius-md);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* ── Separator ──────────────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--cms-color-outline-variant);
  margin: var(--cms-space-6) 0;
}

/* ── Media ──────────────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Form elements ──────────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-medium);
  margin-bottom: var(--cms-space-1);
  color: var(--cms-color-on-surface);
}

input[type=text]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=password]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=email]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=search]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=url]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
textarea:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
select:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]) {
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  line-height: var(--cms-line-height-base);
  color: var(--cms-color-on-surface);
  background: var(--cms-color-surface-container-lowest);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  padding: var(--cms-space-2) var(--cms-space-3);
  width: 100%;
  box-sizing: border-box;
  /* No max-width cap — let inputs fill their layout container. Surfaces
     that legitimately want a narrow input (e.g., a top-of-page search
     filter) opt in via the .input--narrow utility below. */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 44px comfortable controls (S01a): single-line inputs and selects, not textareas. */
input[type=text]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=password]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=email]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=search]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
input[type=url]:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]),
select:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]) {
  min-height: 44px;
}

/* Opt-in narrow input — for filters / search bars that shouldn't stretch
   across a wide page even though they live outside a form layout. Named
   without the `cms-` prefix so the global input-styling rule above
   (which excludes `[class*=cms-]`) still applies the base border/padding. */
.input--narrow {
  max-width: 22rem;
}

input:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):hover,
textarea:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):hover,
select:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):hover {
  border-color: var(--cms-color-primary);
}

input:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):focus,
textarea:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):focus,
select:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):focus {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 1px;
  border-color: var(--cms-color-primary);
}

button:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]) {
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-medium);
  line-height: var(--cms-line-height-tight);
  /* 44px comfortable control (S01a). */
  min-height: 44px;
  box-sizing: border-box;
  color: var(--cms-color-on-primary);
  background: var(--cms-color-primary);
  border: none;
  border-radius: var(--cms-radius-md);
  padding: var(--cms-space-2) var(--cms-space-4);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

button:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):hover {
  background-color: var(--cms-color-primary-emphasis);
}

button:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}

button:not([class*=mat-]):not([class*=mdc-]):not([class*=cms-]):disabled {
  color: var(--cms-color-text-disabled);
  background: var(--cms-color-surface-container-high);
  cursor: not-allowed;
}

/* ── Keyboard focus ────────────────────────────────────────────────────── */
/* One visible ring for every focusable thing. :where() keeps this at zero
   specificity so component rules (.cms-btn, Material) still win when they set
   their own; the per-component `outline: none` overrides that left only a faint
   glow were removed in favour of this. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}

/* Skip link: visually hidden until it receives keyboard focus. */
.cms-skip-link {
  position: absolute;
  top: var(--cms-space-2);
  left: var(--cms-space-2);
  z-index: var(--cms-z-skip-link);
  padding: var(--cms-space-2) var(--cms-space-4);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  font-weight: var(--cms-font-weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
}

.cms-skip-link:focus-visible {
  transform: none;
}

/* CMS Builder — shared primitives (small reusable .cms-* classes) */
/* ── Container ──────────────────────────────────────────────────────────────── */
.cms-container {
  width: 100%;
  max-width: var(--cms-layout-content-width);
  margin-inline: auto;
  padding-inline: var(--cms-layout-content-padding);
}

/* ── Stack (vertical rhythm between children) ───────────────────────────────── */
.cms-stack > * + * {
  margin-top: var(--cms-space-4);
}

/* Unstyled vertical list: no bullets, no UA margins, a flex column so the gap
   is the only rhythm. Override --gap for a looser list. */
.cms-stack--list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--cms-space-2));
}

/* ── Card grid (responsive auto-fill) ───────────────────────────────────────── */
/* Tiles/rows that wrap into as many columns as fit; --min is the column floor. */
.cms-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr));
  gap: var(--cms-space-2);
}

/* ── Surface ────────────────────────────────────────────────────────────────── */
.cms-surface {
  background: var(--cms-color-surface-container-low);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-lg);
  padding: var(--cms-space-6);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html[data-theme=dark] .cms-surface {
  background: var(--cms-glass-bg);
  border-color: var(--cms-glass-border);
  border-style: var(--cms-glass-border-style);
}

/* ── Public page shell ──────────────────────────────────────────────────────── */
/* The block that the public feature index pages (events, polls, groups,
   gallery) render inside .cms-container: a vertical stack with a title row. */
.cms-public-page {
  padding-block: var(--cms-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-6);
}

.cms-public-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cms-space-4);
  flex-wrap: wrap;
}

.cms-public-page__header h1 {
  margin: 0;
}

/* Page-level h1 on the listing surfaces (blog index, search, public form). */
.cms-page-title {
  margin: 0 0 var(--cms-space-6);
  font-size: 1.75rem;
  font-weight: var(--cms-font-weight-bold);
  letter-spacing: -0.01em;
}

/* ── Sign-in prompt ─────────────────────────────────────────────────────────── */
/* "Sign in to <verb>." — rendered by _SigninPrompt.cshtml wherever an
   anonymous visitor meets a member-only action (RSVP, vote, reply, react). */
.cms-signin-prompt {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}
.cms-signin-prompt a {
  font-weight: var(--cms-font-weight-medium);
}

/* ── Ops page (admin/operations list-view layout) ──────────────────────────── */
/* Used by all admin operations list pages (Audit Log, Auth Audit, Jobs, Email
   Templates, Support Tickets) for a consistent header/toolbar/table/paginator
   structure. Component-scoped styles still own their own row badges & cells. */
.cms-ops-page {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--cms-space-5) var(--cms-space-5) var(--cms-space-8);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
}

.cms-ops-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cms-space-4);
  flex-wrap: wrap;
}

.cms-ops-page__title {
  margin: 0 0 var(--cms-space-1);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.cms-ops-page__description {
  margin: 0;
  color: var(--mat-sys-on-surface-variant);
  font-size: var(--cms-font-size-sm);
  max-width: 64ch;
}

.cms-ops-page__actions {
  display: flex;
  gap: var(--cms-space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Summary KPI cards row above the table. */
.cms-ops-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--cms-space-3);
}

/* Filter / search toolbar above the table. */
.cms-ops-toolbar {
  display: flex;
  gap: var(--cms-space-2);
  align-items: center;
  flex-wrap: wrap;
}

.cms-ops-toolbar__search {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.cms-ops-toolbar__field {
  min-width: 160px;
}

/* Spacer that pushes trailing actions (e.g. Reset) to the right. */
.cms-ops-toolbar__spacer {
  flex: 1;
}

/* Table wrapper — owns the surface chrome so individual <table> elements stay
   plain. Also clips the rounded corners of mat-paginator's bottom edge. */
.cms-ops-table-wrapper {
  background: var(--mat-sys-surface);
  border: 1px solid var(--mat-sys-outline-variant);
  border-radius: var(--cms-radius-md);
  /* A table wider than its card scrolls inside the card; `hidden` cut off the
     actions column (S02, email queue at 1280). Corners still clip. Positioned
     so visually-hidden header labels (absolute) stay inside the scroller
     instead of widening the page. */
  position: relative;
  overflow-x: auto;
  /* Callers that can scroll sideways mark the wrapper `tabindex="0" role="region"
     aria-label="…"` (the Posts pattern) so keyboard users can reach and move it;
     the ring is the one every other control shows. */
}
.cms-ops-table-wrapper:focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}

.cms-ops-table {
  width: 100%;
}

/* Standard empty-state cell — applied via colspan to a row inside *matNoDataRow. */
.cms-ops-empty {
  padding: var(--cms-space-6) var(--cms-space-4);
  text-align: center;
  color: var(--mat-sys-on-surface-variant);
  font-size: var(--cms-font-size-sm);
}

/* Right-aligned actions column. */
.cms-ops-actions-cell {
  text-align: right;
  white-space: nowrap;
}

/* CMS Builder — shared site layout and navigation */
/* ── Site navigation ───────────────────────────────────────────────────────── */
.cms-site-nav {
  display: flex;
  gap: var(--cms-space-3);
  align-items: center;
  padding: var(--cms-space-4) var(--cms-space-6);
  /* Track A shell: the bar is a panel with a hairline, not a brand tint;
     the brand lives in the actions and links, not the chrome. */
  background: var(--cms-color-surface-elevated);
  color: var(--cms-color-text);
  border-bottom: 1px solid var(--cms-color-border);
  box-shadow: none;
  height: var(--cms-layout-header-height);
  position: relative;
  z-index: var(--cms-z-toolbar);
}

.cms-site-nav a {
  text-decoration: none;
  font-weight: var(--cms-font-weight-medium);
  color: var(--cms-color-text);
}

.cms-site-nav__spacer {
  flex: 1 1 auto;
}

.cms-site-nav__brand {
  color: var(--cms-color-text);
  font-size: var(--cms-font-size-lg);
  font-weight: var(--cms-font-weight-bold);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: var(--cms-space-3); /* logo ↔ optional site-name text */
  min-width: 0;
}

.cms-site-nav__brand-name {
  white-space: nowrap;
}

/* Admin-uploaded logos come in any size — cap them to the fixed-height bar
   (with breathing room) instead of letting them overflow it. */
.cms-site-nav__logo {
  display: block;
  max-height: calc(var(--cms-layout-header-height) - var(--cms-space-3));
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* When both logos are set, desktop shows one and mobile the other. */
.cms-site-nav__logo--mobile {
  display: none;
}

@media (max-width: 1024px) {
  .cms-site-nav__logo--desktop {
    display: none;
  }
  .cms-site-nav__logo--mobile {
    display: block;
  }
}
/* ── Menu ──────────────────────────────────────────────────────────────────── */
.cms-site-nav__menu {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-site-nav__menu > li + li {
  margin-top: 0;
}

.cms-site-nav__item {
  position: relative;
}

.cms-site-nav__link,
.cms-site-nav__label {
  display: inline-flex;
  align-items: center;
  /* 44px comfortable targets inside the 64px bar (Track A). */
  min-height: 44px;
  padding: var(--cms-space-2) var(--cms-space-3);
  font-size: var(--cms-font-size-base);
  border-radius: var(--cms-radius-lg);
  white-space: nowrap;
  transition: background 0.15s;
  line-height: 1.4;
}

.cms-site-nav__link {
  color: var(--cms-color-text);
  text-decoration: none;
  font-weight: var(--cms-font-weight-medium);
}

.cms-site-nav__link:hover {
  background: color-mix(in srgb, var(--cms-color-text) 12%, transparent);
  color: var(--cms-color-text);
}

.cms-site-nav__link:focus-visible {
  outline-color: var(--cms-color-text);
}

/* Container triggers (e.g. a mega-menu parent) aren't links but they ARE
   interactive dropdown openers — they must read like their sibling links,
   not like disabled text. */
.cms-site-nav__label {
  color: var(--cms-color-text);
  font-weight: var(--cms-font-weight-medium);
  cursor: default;
}

button.cms-site-nav__label {
  background: none;
  border: 0;
  font: inherit;
  line-height: inherit;
}
button.cms-site-nav__label:focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.cms-site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: var(--cms-space-1) 0 0;
  padding: var(--cms-space-1) 0;
  min-width: 180px;
  /* The dropdown is an extension of the nav bar: same background as the bar
     so its links render pixel-identical to the top-level items. On a neutral
     surface the shared on-primary-container ink reads as a different colour
     (background-induced contrast), which users see as mismatched menus. */
  background: var(--cms-color-surface-elevated);
  border: 1px solid color-mix(in srgb, var(--cms-color-text) 20%, transparent);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-lg);
  z-index: var(--cms-z-overlay);
}

/* Mega-menu: container dropdowns can auto-fill 2–4 columns. Items flow
   top-to-bottom then left-to-right; break-inside keeps each entry intact.
   Wide dropdowns anchor to the trigger's right edge — nav items usually sit
   on the right side of the header, so left-anchoring would clip off-viewport. */
.cms-site-nav__dropdown--cols-2 {
  columns: 2;
  column-gap: 0;
  min-width: 360px;
  left: auto;
  right: 0;
}

.cms-site-nav__dropdown--cols-3 {
  columns: 3;
  column-gap: 0;
  min-width: 540px;
  left: auto;
  right: 0;
}

.cms-site-nav__dropdown--cols-4 {
  columns: 4;
  column-gap: 0;
  min-width: 720px;
  left: auto;
  right: 0;
}

.cms-site-nav__dropdown--cols-2 .cms-site-nav__dropdown-item,
.cms-site-nav__dropdown--cols-3 .cms-site-nav__dropdown-item,
.cms-site-nav__dropdown--cols-4 .cms-site-nav__dropdown-item {
  break-inside: avoid;
}

.cms-site-nav__item--has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--cms-space-1);
}

.cms-site-nav__item--has-children:hover > .cms-site-nav__dropdown,
.cms-site-nav__item--has-children:focus-within > .cms-site-nav__dropdown {
  display: block;
}

.cms-site-nav__dropdown-link,
.cms-site-nav__dropdown-label {
  display: block;
  padding: var(--cms-space-2) var(--cms-space-4);
  font-size: var(--cms-font-size-base);
  white-space: nowrap;
}

.cms-site-nav__dropdown-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--cms-color-text);
  text-decoration: none;
  transition: background 0.12s;
}

.cms-site-nav__dropdown-link:hover {
  /* Mirror the top-level link hover exactly (same ink, same overlay). */
  background: color-mix(in srgb, var(--cms-color-text) 12%, transparent);
}

.cms-site-nav__dropdown-label {
  color: color-mix(in srgb, var(--cms-color-text) 70%, transparent);
  cursor: default;
}

.cms-site-nav__chevron {
  font-size: 18px;
  margin-left: -2px;
  line-height: 1;
  opacity: 0.6;
}

/* ── Notification bell ─────────────────────────────────────────────────────── */
.cms-site-nav__notifications {
  position: relative;
  display: flex;
  align-items: center;
}

.cms-site-nav__notif-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--cms-color-text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.cms-site-nav__notif-trigger:hover {
  background: color-mix(in srgb, var(--cms-color-text) 12%, transparent);
}

.cms-site-nav__notif-trigger .material-icons {
  font-size: 22px;
}

/* ── Account dropdown ──────────────────────────────────────────────────────── */
.cms-site-nav__account {
  position: relative;
  display: flex;
  align-items: center;
}

.cms-site-nav__account-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-1);
  min-height: 44px;
  padding: var(--cms-space-2) var(--cms-space-2) var(--cms-space-2) var(--cms-space-3);
  background: transparent;
  color: var(--cms-color-text);
  border: none;
  border-radius: var(--cms-radius-lg);
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  line-height: 1.4;
}

.cms-site-nav__account-trigger:hover {
  background: color-mix(in srgb, var(--cms-color-text) 12%, transparent);
}

.cms-site-nav__account-trigger .material-icons {
  font-size: 20px;
}

/* Icon-only trigger (anonymous theme picker). */
.cms-site-nav__account-trigger--icon {
  padding: var(--cms-space-1);
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}

.cms-site-nav__account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--cms-space-1));
  right: 0;
  min-width: 180px;
  padding: var(--cms-space-1) 0;
  background: var(--cms-color-surface-elevated);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-lg);
  z-index: var(--cms-z-overlay);
}

.cms-site-nav__account.is-open > .cms-site-nav__account-dropdown {
  display: block;
}

.cms-site-nav__account-item {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--cms-space-2) var(--cms-space-4);
  background: transparent;
  color: var(--cms-color-text);
  border: none;
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.cms-site-nav__account-item:hover {
  background: var(--cms-color-hover-overlay);
}

.cms-site-nav__account-item .material-icons {
  font-size: 20px;
  color: var(--cms-color-text-secondary);
}

.cms-site-nav__check {
  margin-left: auto;
  font-size: 18px;
  color: var(--cms-color-primary);
  visibility: hidden;
}

app-root .cms-site-nav__check {
  visibility: visible;
}

.cms-site-nav__account-divider {
  height: 1px;
  margin: var(--cms-space-1) 0;
  background: var(--cms-color-border);
}

/* ── Site footer ───────────────────────────────────────────────────────────── */
.cms-site-footer {
  padding: var(--cms-space-8) var(--cms-space-6) var(--cms-space-6);
  text-align: center;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  border-top: 1px solid var(--cms-color-border-subtle);
}

.cms-site-footer__social {
  display: flex;
  justify-content: center;
  gap: var(--cms-space-2);
  margin-bottom: var(--cms-space-3);
}

.cms-site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cms-radius-full);
  color: var(--cms-color-text-secondary);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.cms-site-footer__social-link:hover {
  color: var(--cms-color-primary);
  background: color-mix(in srgb, var(--cms-color-primary) 10%, transparent);
}

.cms-site-footer__social-link .material-icons {
  font-size: 20px;
}

.cms-site-footer__links {
  margin-bottom: var(--cms-space-2);
  font-size: var(--cms-font-size-sm);
}

.cms-site-footer__links a {
  color: var(--cms-color-text-secondary);
  text-decoration: none;
}

.cms-site-footer__links a:hover {
  color: var(--cms-color-primary);
  text-decoration: underline;
}

.cms-site-footer__copy {
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

/* ── Hamburger toggle (hidden on desktop) ──────────────────────────────────── */
.cms-site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--cms-color-text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.cms-site-nav__toggle:hover {
  background: color-mix(in srgb, var(--cms-color-text) 12%, transparent);
}

.cms-site-nav__toggle svg {
  display: block;
}

/* ── Menu wrapper (passthrough on desktop, dropdown on mobile) ─────────────── */
.cms-site-nav__menu-wrap {
  display: contents;
}

/* ── Responsive nav ────────────────────────────────────────────────────────── */
/* Track A: the bar collapses at 1024px, not 768px — nine items at the 16px scale
   overflowed the viewport between 769 and ~920px, and the admin sidebar already
   turns to icons at the same width. */
@media (max-width: 1024px) {
  .cms-site-nav {
    padding: var(--cms-space-2) var(--cms-space-4);
    gap: var(--cms-space-1);
  }
  .cms-site-nav__spacer {
    flex: 1 1 0;
    min-width: var(--cms-space-2);
  }
  .cms-site-nav__toggle {
    display: inline-flex;
  }
  .cms-site-nav__menu-wrap {
    display: none;
  }
  .cms-site-nav--menu-open .cms-site-nav__menu-wrap {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cms-color-surface-elevated);
    border-top: 1px solid color-mix(in srgb, var(--cms-color-text) 15%, transparent);
    box-shadow: var(--cms-shadow-lg);
    padding: var(--cms-space-2) 0;
    z-index: var(--cms-z-overlay);
  }
  .cms-site-nav--menu-open .cms-site-nav__menu {
    flex-direction: column;
    gap: 0;
  }
  .cms-site-nav--menu-open .cms-site-nav__link,
  .cms-site-nav--menu-open .cms-site-nav__label {
    padding: var(--cms-space-2) var(--cms-space-4);
    border-radius: var(--cms-radius-md);
    width: 100%;
  }
  .cms-site-nav--menu-open .cms-site-nav__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: var(--cms-space-6);
    margin: 0;
    min-width: auto;
    columns: auto; /* mega-menu columns collapse to a single list on mobile */
  }
  .cms-site-nav--menu-open .cms-site-nav__dropdown-link {
    color: var(--cms-color-text);
    padding: var(--cms-space-1) var(--cms-space-4);
  }
  .cms-site-nav--menu-open .cms-site-nav__dropdown-link:hover {
    background: color-mix(in srgb, var(--cms-color-text) 8%, transparent);
  }
  .cms-site-nav--menu-open .cms-site-nav__item--has-children > .cms-site-nav__dropdown {
    display: block;
  }
  .cms-site-nav--menu-open .cms-site-nav__item--has-children::after {
    display: none;
  }
  .cms-site-nav__account-trigger {
    padding: var(--cms-space-1);
    font-size: 0;
  }
  .cms-site-nav__account-trigger .material-icons {
    font-size: 20px;
  }
}
/* ── Account dropdown extras (submenu, badges, section labels) ───────────── */
/* Hand-added to the shipped CSS during Messaging V2; reconciled back into the
   SCSS source as part of the source-of-truth restoration. */
.cms-site-nav__account-item-label {
  flex: 1;
  text-align: left;
}

.cms-site-nav__account-item--has-submenu .cms-site-nav__chevron {
  font-size: 18px;
  color: var(--cms-color-text-secondary);
  margin-left: auto;
}

.cms-site-nav__account-submenu {
  display: flex;
  flex-direction: column;
  background: var(--cms-color-hover-overlay);
  border-top: 1px solid var(--cms-color-border);
  border-bottom: 1px solid var(--cms-color-border);
}

.cms-site-nav__account-submenu[hidden] {
  display: none;
}

.cms-site-nav__account-item--sub {
  padding-left: var(--cms-space-8);
}

.cms-site-nav__account-item--note {
  color: var(--cms-color-text-secondary);
  cursor: default;
}
.cms-site-nav__account-item--note:hover, .cms-site-nav__account-item--note:focus-visible {
  background: transparent;
}

.cms-site-nav__account-item--status {
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  color: var(--cms-color-danger-text);
}
.cms-site-nav__account-item--status[hidden] {
  display: none;
}
.cms-site-nav__account-item--status .cms-site-nav__account-item-label {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-1);
  flex: 1 1 10rem;
}

.cms-site-nav__account-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-danger);
  color: var(--cms-color-on-danger);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.cms-site-nav__account-section-label {
  padding: var(--cms-space-1) var(--cms-space-4);
  font-size: var(--cms-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cms-color-text-secondary);
}

.cms-site-nav__account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-danger);
  color: var(--cms-color-on-danger);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}

/* ── Header search inside the open mobile menu ───────────────────────────── */
/* On phones the collapsed 32px icon becomes an unlabelled circle in the
   hamburger list; expand it to a real, full-width field with its placeholder
   visible so it reads as "search". */
@media (max-width: 1024px) {
  .cms-site-nav--menu-open .cms-site-nav__item--search {
    width: 100%;
    padding: var(--cms-space-2) var(--cms-space-3);
  }
  .cms-site-nav--menu-open .cms-site-nav__search {
    width: 100%;
  }
  .cms-site-nav--menu-open .cms-site-nav__search-input {
    width: 100%;
    min-height: 40px;
    padding: 4px 12px 4px 34px;
    border-color: var(--cms-color-outline-variant);
    background: var(--cms-color-surface-container-lowest);
    cursor: text;
  }
  .cms-site-nav--menu-open .cms-site-nav__search-input::placeholder {
    color: var(--cms-color-text-secondary);
  }
}
/* ── Collapsible header search ─────────────────────────────────────────────── */
.cms-site-nav__search {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}

.cms-site-nav__search-icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--cms-color-text-secondary);
  pointer-events: none;
  transition: color 0.15s;
  z-index: 1;
}

.cms-site-nav__search-input {
  width: 32px;
  height: 32px;
  max-width: none;
  padding: 4px 8px 4px 30px;
  border: 1px solid transparent;
  border-radius: var(--cms-radius-full);
  background: transparent;
  color: var(--cms-color-on-surface);
  font-family: inherit;
  font-size: var(--cms-font-size-sm);
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: width 0.25s ease, padding 0.25s ease, background 0.2s, border-color 0.2s;
}

.cms-site-nav__search-input::placeholder {
  color: transparent;
}

.cms-site-nav__search-input:hover {
  background: var(--cms-color-hover-overlay);
}

.cms-site-nav__search-input:focus {
  width: 180px;
  padding: 4px 12px 4px 30px;
  border-color: var(--cms-color-outline-variant);
  background: var(--cms-color-surface-container-lowest);
  cursor: text;
}

.cms-site-nav__search-input:focus::placeholder {
  color: var(--cms-color-text-secondary);
}

.cms-site-nav__search:focus-within .cms-site-nav__search-icon {
  color: var(--cms-color-primary);
}

/* CMS Builder — component barrel file */
/* CMS Builder — button components (.cms-btn) */
/* CMS Builder — Sass-only variables shared across partials (emits no CSS). */
/* ── Base button ───────────────────────────────────────────────────────────── */
.cms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cms-space-2);
  /* 44px comfortable control (S01a); --sm keeps a 36px inline variant for row actions. */
  min-height: 44px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-medium);
  line-height: var(--cms-line-height-tight);
  color: var(--cms-color-on-surface);
  background-color: transparent;
  border-radius: var(--cms-radius-md);
  padding: var(--cms-space-2) var(--cms-space-4);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cms-btn:focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}
.cms-btn:disabled, .cms-btn[aria-disabled=true] {
  color: var(--cms-color-text-disabled);
  background: var(--cms-color-surface-container-high);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.cms-btn--sm {
  min-height: 36px;
  font-size: var(--cms-font-size-sm);
  padding: var(--cms-space-1) var(--cms-space-3);
}

/* ── Neutral (secondary) button ────────────────────────────────────────────── */
.cms-btn--secondary {
  color: var(--cms-color-on-surface);
  background-color: var(--cms-color-surface-container-low);
  border-color: var(--cms-color-outline-variant);
}
.cms-btn--secondary:hover:not(:disabled) {
  background-color: var(--cms-color-surface-container-high);
  border-color: var(--cms-color-outline);
}

/* ── State variants ────────────────────────────────────────────────────────── */
.cms-btn--primary {
  color: var(--cms-color-on-primary);
  background-color: var(--cms-color-primary);
  border-color: var(--cms-color-primary);
}
.cms-btn--primary:hover:not(:disabled) {
  background-color: var(--cms-color-primary-emphasis);
  border-color: var(--cms-color-primary-emphasis);
}
.cms-btn--primary:active:not(:disabled) {
  background-color: var(--cms-color-primary-emphasis);
}

.cms-btn--ghost-primary {
  color: var(--cms-color-primary);
  background-color: transparent;
  border-color: transparent;
}
.cms-btn--ghost-primary:hover:not(:disabled) {
  background-color: var(--cms-color-primary-bg-subtle);
}
.cms-btn--ghost-primary:active:not(:disabled) {
  color: var(--cms-color-on-primary);
  background-color: var(--cms-color-primary);
}

.cms-btn--success {
  color: var(--cms-color-on-success);
  background-color: var(--cms-color-success);
  border-color: var(--cms-color-success);
}
.cms-btn--success:hover:not(:disabled) {
  background-color: var(--cms-color-success-emphasis);
  border-color: var(--cms-color-success-emphasis);
}
.cms-btn--success:active:not(:disabled) {
  background-color: var(--cms-color-success-emphasis);
}

.cms-btn--ghost-success {
  color: var(--cms-color-success);
  background-color: transparent;
  border-color: transparent;
}
.cms-btn--ghost-success:hover:not(:disabled) {
  background-color: var(--cms-color-success-bg-subtle);
}
.cms-btn--ghost-success:active:not(:disabled) {
  color: var(--cms-color-on-success);
  background-color: var(--cms-color-success);
}

.cms-btn--info {
  color: var(--cms-color-on-info);
  background-color: var(--cms-color-info);
  border-color: var(--cms-color-info);
}
.cms-btn--info:hover:not(:disabled) {
  background-color: var(--cms-color-info-emphasis);
  border-color: var(--cms-color-info-emphasis);
}
.cms-btn--info:active:not(:disabled) {
  background-color: var(--cms-color-info-emphasis);
}

.cms-btn--ghost-info {
  color: var(--cms-color-info);
  background-color: transparent;
  border-color: transparent;
}
.cms-btn--ghost-info:hover:not(:disabled) {
  background-color: var(--cms-color-info-bg-subtle);
}
.cms-btn--ghost-info:active:not(:disabled) {
  color: var(--cms-color-on-info);
  background-color: var(--cms-color-info);
}

.cms-btn--warning {
  color: var(--cms-color-on-warning);
  background-color: var(--cms-color-warning);
  border-color: var(--cms-color-warning);
}
.cms-btn--warning:hover:not(:disabled) {
  background-color: var(--cms-color-warning-emphasis);
  border-color: var(--cms-color-warning-emphasis);
}
.cms-btn--warning:active:not(:disabled) {
  background-color: var(--cms-color-warning-emphasis);
}

.cms-btn--ghost-warning {
  color: var(--cms-color-warning);
  background-color: transparent;
  border-color: transparent;
}
.cms-btn--ghost-warning:hover:not(:disabled) {
  background-color: var(--cms-color-warning-bg-subtle);
}
.cms-btn--ghost-warning:active:not(:disabled) {
  color: var(--cms-color-on-warning);
  background-color: var(--cms-color-warning);
}

.cms-btn--danger {
  color: var(--cms-color-on-danger);
  background-color: var(--cms-color-danger);
  border-color: var(--cms-color-danger);
}
.cms-btn--danger:hover:not(:disabled) {
  background-color: var(--cms-color-danger-emphasis);
  border-color: var(--cms-color-danger-emphasis);
}
.cms-btn--danger:active:not(:disabled) {
  background-color: var(--cms-color-danger-emphasis);
}

.cms-btn--ghost-danger {
  color: var(--cms-color-danger);
  background-color: transparent;
  border-color: transparent;
}
.cms-btn--ghost-danger:hover:not(:disabled) {
  background-color: var(--cms-color-danger-bg-subtle);
}
.cms-btn--ghost-danger:active:not(:disabled) {
  color: var(--cms-color-on-danger);
  background-color: var(--cms-color-danger);
}

/* ── Busy state ────────────────────────────────────────────────────────────── */
/* Applied by submit-busy.js while a form is in flight; pairs the swapped
   "Submitting…" label with a small spinner so the user sees both signals. */
.cms-btn--busy {
  position: relative;
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}

.cms-btn--busy::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cms-btn-spin 0.6s linear infinite;
}

@keyframes cms-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* CMS Builder — card components (.cms-card) */
/* ── Base card ─────────────────────────────────────────────────────────────── */
.cms-card {
  background: var(--cms-color-surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-md);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme=dark] .cms-card {
  background: var(--cms-glass-bg);
  border-color: var(--cms-glass-border);
  border-style: var(--cms-glass-border-style);
  box-shadow: var(--cms-shadow-md);
}

/* ── Flat row card ─────────────────────────────────────────────────────────── */
/* A bordered, unshadowed surface for list rows (events, polls, group tree,
   profile award/course rows, group members): the hand-rolled copies of this
   rule now share it. Layout (flex direction, gap) stays with each list. */
.cms-card--flat {
  padding: var(--cms-space-3) var(--cms-space-4);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
}

/* ── Card sections ─────────────────────────────────────────────────────────── */
.cms-card__header {
  padding: var(--cms-space-4) var(--cms-space-5);
  border-bottom: 1px dashed var(--cms-color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  font-weight: var(--cms-font-weight-medium);
}

.cms-card__body {
  padding: var(--cms-space-5);
}

/* CMS Builder — button components (.cms-btn) */
/* CMS Builder — badge components (.cms-badge) */
/* ── Base badge ────────────────────────────────────────────────────────────── */
.cms-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-medium);
  line-height: 1;
  padding: 3px var(--cms-space-2);
  border-radius: var(--cms-radius-sm);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* ── State variants ────────────────────────────────────────────────────────── */
.cms-badge--primary {
  color: var(--cms-color-on-primary);
  background-color: var(--cms-color-primary);
}

.cms-badge--soft-primary {
  color: var(--cms-color-primary-text, var(--cms-color-primary));
  background-color: var(--cms-color-primary-bg-subtle);
}

.cms-badge--outline-primary {
  color: var(--cms-color-primary-text, var(--cms-color-primary));
  background-color: transparent;
  border-color: var(--cms-color-primary-border-subtle);
}

.cms-badge--success {
  color: var(--cms-color-on-success);
  background-color: var(--cms-color-success);
}

.cms-badge--soft-success {
  color: var(--cms-color-success-text, var(--cms-color-success));
  background-color: var(--cms-color-success-bg-subtle);
}

.cms-badge--outline-success {
  color: var(--cms-color-success-text, var(--cms-color-success));
  background-color: transparent;
  border-color: var(--cms-color-success-border-subtle);
}

.cms-badge--info {
  color: var(--cms-color-on-info);
  background-color: var(--cms-color-info);
}

.cms-badge--soft-info {
  color: var(--cms-color-info-text, var(--cms-color-info));
  background-color: var(--cms-color-info-bg-subtle);
}

.cms-badge--outline-info {
  color: var(--cms-color-info-text, var(--cms-color-info));
  background-color: transparent;
  border-color: var(--cms-color-info-border-subtle);
}

.cms-badge--warning {
  color: var(--cms-color-on-warning);
  background-color: var(--cms-color-warning);
}

.cms-badge--soft-warning {
  color: var(--cms-color-warning-text, var(--cms-color-warning));
  background-color: var(--cms-color-warning-bg-subtle);
}

.cms-badge--outline-warning {
  color: var(--cms-color-warning-text, var(--cms-color-warning));
  background-color: transparent;
  border-color: var(--cms-color-warning-border-subtle);
}

.cms-badge--danger {
  color: var(--cms-color-on-danger);
  background-color: var(--cms-color-danger);
}

.cms-badge--soft-danger {
  color: var(--cms-color-danger-text, var(--cms-color-danger));
  background-color: var(--cms-color-danger-bg-subtle);
}

.cms-badge--outline-danger {
  color: var(--cms-color-danger-text, var(--cms-color-danger));
  background-color: transparent;
  border-color: var(--cms-color-danger-border-subtle);
}

/* ── Neutral badge ─────────────────────────────────────────────────────────── */
.cms-badge--muted {
  color: var(--cms-color-on-surface-variant);
  background-color: var(--cms-color-surface-container-high);
}

/* ── Pill modifier ─────────────────────────────────────────────────────────── */
.cms-badge--pill {
  border-radius: var(--cms-radius-lg);
  padding: 3px var(--cms-space-3);
  min-height: 24px; /* WCAG 2.5.8 target size for linked pills */
  text-decoration: none;
  transition: filter 0.15s ease;
}
.cms-badge--pill:hover {
  filter: brightness(1.15);
}

/* CMS Builder — button components (.cms-btn) */
/* CMS Builder — form components (.cms-form-*) */
/* ── Form group ────────────────────────────────────────────────────────────── */
/* Labels inside a group inherit the element defaults from _base.scss. */
.cms-form-group {
  margin-bottom: var(--cms-space-4);
}

/* ── Colored checkboxes/radios ─────────────────────────────────────────────── */
.cms-form-check--primary input[type=checkbox]:checked,
.cms-form-check--primary input[type=radio]:checked {
  accent-color: var(--cms-color-primary);
}

.cms-form-check--success input[type=checkbox]:checked,
.cms-form-check--success input[type=radio]:checked {
  accent-color: var(--cms-color-success);
}

.cms-form-check--info input[type=checkbox]:checked,
.cms-form-check--info input[type=radio]:checked {
  accent-color: var(--cms-color-info);
}

.cms-form-check--warning input[type=checkbox]:checked,
.cms-form-check--warning input[type=radio]:checked {
  accent-color: var(--cms-color-warning);
}

.cms-form-check--danger input[type=checkbox]:checked,
.cms-form-check--danger input[type=radio]:checked {
  accent-color: var(--cms-color-danger);
}

/* CMS Builder — table components (.cms-table) */
.cms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cms-font-size-base);
}
.cms-table th {
  text-align: left;
  font-weight: var(--cms-font-weight-medium);
  white-space: nowrap;
  color: var(--cms-color-text-secondary);
  padding: var(--cms-space-3) var(--cms-space-4);
  border-bottom: 2px solid var(--cms-color-border);
}
.cms-table td {
  padding: var(--cms-space-3) var(--cms-space-4);
  vertical-align: middle;
}
.cms-table tbody tr {
  border-bottom: 1px solid var(--cms-color-border-subtle);
  transition: background-color 0.15s ease;
}
.cms-table tbody tr:last-child {
  border-bottom: none;
}
.cms-table tbody tr:hover {
  background-color: var(--cms-color-hover-overlay);
}

/* CMS Builder — button components (.cms-btn) */
/* CMS Builder — alert components (.cms-alert) */
.cms-alert {
  padding: var(--cms-space-3) var(--cms-space-4);
  border-radius: var(--cms-radius-md);
  font-size: var(--cms-font-size-base);
  line-height: var(--cms-line-height-base);
  border: 1px solid transparent;
}

.cms-alert--primary {
  color: var(--cms-color-primary-text, var(--cms-color-primary));
  background-color: var(--cms-color-primary-bg-subtle);
  border-color: var(--cms-color-primary-border-subtle);
}

.cms-alert--bordered.cms-alert--primary {
  background-color: var(--cms-color-primary-bg-subtle);
  border-color: transparent;
  border-left: 3px solid var(--cms-color-primary);
}

.cms-alert--success {
  color: var(--cms-color-success-text, var(--cms-color-success));
  background-color: var(--cms-color-success-bg-subtle);
  border-color: var(--cms-color-success-border-subtle);
}

.cms-alert--bordered.cms-alert--success {
  background-color: var(--cms-color-success-bg-subtle);
  border-color: transparent;
  border-left: 3px solid var(--cms-color-success);
}

.cms-alert--info {
  color: var(--cms-color-info-text, var(--cms-color-info));
  background-color: var(--cms-color-info-bg-subtle);
  border-color: var(--cms-color-info-border-subtle);
}

.cms-alert--bordered.cms-alert--info {
  background-color: var(--cms-color-info-bg-subtle);
  border-color: transparent;
  border-left: 3px solid var(--cms-color-info);
}

.cms-alert--warning {
  color: var(--cms-color-warning-text, var(--cms-color-warning));
  background-color: var(--cms-color-warning-bg-subtle);
  border-color: var(--cms-color-warning-border-subtle);
}

.cms-alert--bordered.cms-alert--warning {
  background-color: var(--cms-color-warning-bg-subtle);
  border-color: transparent;
  border-left: 3px solid var(--cms-color-warning);
}

.cms-alert--danger {
  color: var(--cms-color-danger-text, var(--cms-color-danger));
  background-color: var(--cms-color-danger-bg-subtle);
  border-color: var(--cms-color-danger-border-subtle);
}

.cms-alert--bordered.cms-alert--danger {
  background-color: var(--cms-color-danger-bg-subtle);
  border-color: transparent;
  border-left: 3px solid var(--cms-color-danger);
}

/* CMS Builder — pagination components (.cms-pagination) */
.cms-pagination {
  display: flex;
  align-items: center;
  gap: var(--cms-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cms-pagination__item {
  display: flex;
}

.cms-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--cms-space-2);
  font-size: var(--cms-font-size-sm);
  font-weight: var(--cms-font-weight-medium);
  color: var(--cms-color-text-secondary);
  background: transparent;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cms-pagination__link:hover {
  color: var(--cms-color-primary);
  border-color: var(--cms-color-primary);
  background-color: var(--cms-color-primary-bg-subtle);
}

.cms-pagination__link--active {
  color: var(--cms-color-on-primary);
  background-color: var(--cms-color-primary);
  border-color: var(--cms-color-primary);
  pointer-events: none;
}

.cms-pagination__link--disabled {
  color: var(--cms-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Rounded variant ───────────────────────────────────────────────────────── */
.cms-pagination--rounded .cms-pagination__link {
  border-radius: var(--cms-radius-full);
}

/* ── Wrapper ───────────────────────────────────────────────────────────────── */
/* Centres a pagination bar (or a "load more" button) under a list. */
.cms-pagination-wrap {
  margin-top: var(--cms-space-4);
  display: flex;
  justify-content: center;
}

/* CMS Builder — status card (.cms-status-card) + inline form status */
/* Polished status card. Variants apply a tinted left border + accent so
   success/info/warning/danger states all share the same shape. Use this
   instead of bare paragraphs for confirmations, in-review banners, etc. */
.cms-status-card {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
  padding: var(--cms-space-5);
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-left: 4px solid var(--cms-color-text-secondary);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-sm);
}

.cms-status-card__title {
  margin: 0;
  font-size: var(--cms-font-size-lg);
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-on-surface);
}

.cms-status-card__message {
  margin: 0;
  color: var(--cms-color-text-secondary);
  max-width: 64ch;
}

.cms-status-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-3);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.cms-status-card--success {
  border-left-color: var(--cms-color-success);
}

.cms-status-card--info {
  border-left-color: var(--cms-color-primary);
}

.cms-status-card--warning {
  border-left-color: var(--cms-color-warning);
}

.cms-status-card--danger {
  border-left-color: var(--cms-color-error);
}

.cms-status-card--neutral {
  border-left-color: var(--cms-color-outline-variant);
}

/* Compact inline status for form submissions (success/error). Replaces
   ad-hoc colored paragraphs littered across the public Razor pages. */
.cms-form-status {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

/* -text tokens are the readable-on-surface shades; the raw success swatch
   fails contrast as body text in light mode. */
.cms-form-status--success {
  color: var(--cms-color-success-text);
}

.cms-form-status--error {
  color: var(--cms-color-error);
}

.cms-form-error-list {
  margin: 0;
  padding-left: var(--cms-space-5);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-error);
}

/* CMS Builder — empty state (.cms-empty-state) */
/* Shared "nothing here" block used inside admin tables/lists/queues and the
   public Razor surfaces (via _EmptyState.cshtml). Pair with a short title and
   one-sentence helper, optionally a primary action. */
.cms-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--cms-space-2);
  padding: var(--cms-space-6) var(--cms-space-4);
  color: var(--cms-color-text-secondary);
}

.cms-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-1);
}

.cms-empty-state__icon .material-icons,
.cms-empty-state__icon mat-icon {
  font-size: 28px;
  width: 28px;
  height: 28px;
}

.cms-empty-state__title {
  margin: 0;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-on-surface);
}

.cms-empty-state__text {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  max-width: 48ch;
}

.cms-empty-state__actions {
  margin-top: var(--cms-space-2);
  display: flex;
  gap: var(--cms-space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* CMS Builder — reaction bar (.cms-reaction-bar) — P7 member reactions */
.cms-reaction-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap keeps wrapped rows 44px apart centre to centre, so the 44px effective
     targets (below) never overlap vertically; columns keep the compact 8px. */
  gap: var(--cms-space-4) var(--cms-space-2);
}
.cms-reaction-bar--busy {
  opacity: 0.6;
  pointer-events: none;
}

.cms-reaction-btn {
  position: relative; /* anchors the 44px effective target below */
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-1);
  padding: var(--cms-space-1) var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text);
  font: inherit;
  font-size: var(--cms-font-size-sm);
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cms-reaction-btn__emoji {
  font-size: 1.05rem;
}
.cms-reaction-btn__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 0.75em;
  text-align: center;
}
.cms-reaction-btn__label {
  color: var(--cms-color-text-secondary);
}
.cms-reaction-btn:hover:not(:disabled) {
  border-color: var(--cms-color-primary);
  background: var(--cms-color-primary-bg-subtle);
}
.cms-reaction-btn:focus-visible {
  outline: 2px solid var(--cms-color-primary);
  outline-offset: 2px;
}
.cms-reaction-btn:disabled {
  cursor: default;
}
.cms-reaction-btn {
  /* S03a (Track A decision): the chip stays compact to look at, but the hit
     area is at least 44×44 — an invisible, centred pseudo-element that pointer
     events land on as the button. Neighbours sit 8px apart, so the nearest
     chip still wins. */
}
.cms-reaction-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.cms-reaction-btn {
  /* the viewer's own current reaction */
}
.cms-reaction-btn--active {
  border-color: var(--cms-color-primary);
  background: var(--cms-color-primary-container);
  color: var(--cms-color-on-primary-container);
}
.cms-reaction-btn--active .cms-reaction-btn__label {
  color: inherit;
}

/* Compact variant for blog listing cards — emoji + count only. */
.cms-reaction-bar--compact {
  gap: var(--cms-space-5) var(--cms-space-1);
}
.cms-reaction-bar--compact .cms-reaction-btn {
  padding: 2px var(--cms-space-2);
  min-height: 24px;
  font-size: var(--cms-font-size-xs);
}
.cms-reaction-bar--compact .cms-reaction-btn__label {
  display: none;
}

/* CMS Builder — comments (.cms-comments) — P8 post comments */
.cms-comments {
  margin-top: var(--cms-space-6);
  padding-top: var(--cms-space-5);
  border-top: 1px solid var(--cms-color-border-subtle);
}
.cms-comments__heading {
  margin: 0 0 var(--cms-space-4);
  font-size: var(--cms-font-size-lg);
  font-weight: 600;
}
.cms-comments__list {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
  margin-top: var(--cms-space-5);
}
.cms-comments__empty {
  color: var(--cms-color-text-secondary);
}

/* Composer (top-level + inline reply/edit share the field styles). */
.cms-comment-form,
.cms-comment-compose {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.cms-comment-compose {
  margin: var(--cms-space-2) 0 var(--cms-space-3);
}

/* Markdown toolbar above a comment textarea (no image button — not allowed). */
.cms-md-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--cms-space-1);
}
.cms-md-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--cms-radius-sm);
  background: transparent;
  color: var(--cms-color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-md-toolbar__btn .material-icons {
  font-size: 18px;
  line-height: 1;
}
.cms-md-toolbar__btn:hover {
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text);
}
.cms-md-toolbar__btn:focus-visible {
  outline: 2px solid var(--cms-color-primary);
  outline-offset: 1px;
}
.cms-md-toolbar__hint {
  margin-left: auto;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

.cms-comment-form__input {
  width: 100%;
  padding: var(--cms-space-2) var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  color: var(--cms-color-text);
  font: inherit;
  resize: vertical;
}
.cms-comment-form__input:focus-visible {
  outline: 2px solid var(--cms-color-primary);
  outline-offset: 1px;
  border-color: var(--cms-color-primary);
}

.cms-comment-form__row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
}

.cms-comment-form__error {
  color: var(--cms-color-danger);
  font-size: var(--cms-font-size-sm);
}

/* A single comment: avatar + body column. */
.cms-comment {
  display: flex;
  gap: var(--cms-space-3);
}
.cms-comment__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--cms-radius-full);
  object-fit: cover;
  background: var(--cms-color-surface-container);
}
.cms-comment__main {
  flex: 1;
  min-width: 0;
}
.cms-comment__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  margin-bottom: 2px;
}
.cms-comment__author {
  font-weight: 600;
}
.cms-comment__time, .cms-comment__edited {
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}
.cms-comment__body {
  word-break: break-word;
  color: var(--cms-color-text);
  /* Rendered Markdown — keep vertical rhythm tight inside a comment. */
}
.cms-comment__body > :first-child {
  margin-top: 0;
}
.cms-comment__body > :last-child {
  margin-bottom: 0;
}
.cms-comment__body p {
  margin: 0 0 var(--cms-space-2);
}
.cms-comment__body ul, .cms-comment__body ol {
  margin: 0 0 var(--cms-space-2);
  padding-left: 1.4em;
}
.cms-comment__body blockquote {
  margin: 0 0 var(--cms-space-2);
  padding-left: var(--cms-space-3);
  border-left: 3px solid var(--cms-color-border-subtle);
  color: var(--cms-color-text-secondary);
}
.cms-comment__body code {
  padding: 1px 4px;
  background: var(--cms-color-surface-container);
  border-radius: var(--cms-radius-sm);
  font-size: 0.9em;
}
.cms-comment__body pre {
  margin: 0 0 var(--cms-space-2);
  padding: var(--cms-space-2) var(--cms-space-3);
  background: var(--cms-color-surface-container);
  border-radius: var(--cms-radius-md);
  overflow-x: auto;
}
.cms-comment__body pre code {
  padding: 0;
  background: none;
}
.cms-comment__body a {
  color: var(--cms-color-primary);
}
.cms-comment-report__label {
  font-weight: 600;
  font-size: var(--cms-font-size-sm);
}
.cms-comment-report__done {
  margin: 0;
  color: var(--cms-color-success-text, var(--cms-color-success));
  font-size: var(--cms-font-size-sm);
}
.cms-comment__tombstone {
  margin: 0;
  font-style: italic;
  color: var(--cms-color-text-secondary);
}
.cms-comment__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cms-space-3);
  margin-top: var(--cms-space-2);
}
.cms-comment__action {
  padding: 0;
  border: none;
  background: none;
  color: var(--cms-color-text-secondary);
  font: inherit;
  font-size: var(--cms-font-size-sm);
  font-weight: 500;
  cursor: pointer;
}
.cms-comment__action:hover {
  color: var(--cms-color-primary);
  text-decoration: underline;
}
.cms-comment__action--danger:hover {
  color: var(--cms-color-danger);
}
.cms-comment {
  /* One level of nesting — replies indent under their parent. */
}
.cms-comment__replies {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
  margin-top: var(--cms-space-4);
  padding-left: var(--cms-space-4);
  border-left: 2px solid var(--cms-color-border-subtle);
}
.cms-comment__replies:empty {
  margin: 0;
  padding: 0;
  border: none;
}
.cms-comment--deleted .cms-comment__author {
  color: var(--cms-color-text-secondary);
}

/* CMS Builder — @mention autocomplete menu + mention links (P8.1) */
.cms-mention-menu {
  z-index: var(--cms-z-modal);
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--cms-space-1);
  background: var(--cms-color-surface-elevated, var(--cms-color-surface));
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  box-shadow: var(--cms-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));
}

.cms-mention-option {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  width: 100%;
  padding: var(--cms-space-2);
  border: none;
  border-radius: var(--cms-radius-md);
  background: transparent;
  color: var(--cms-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cms-mention-option.is-active, .cms-mention-option:hover {
  background: var(--cms-color-primary-bg-subtle);
}
.cms-mention-option__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--cms-radius-full);
  object-fit: cover;
  background: var(--cms-color-surface-container);
}
.cms-mention-option__name {
  font-weight: 500;
  white-space: nowrap;
}
.cms-mention-option__handle {
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  white-space: nowrap;
}
.cms-mention-option__fav {
  margin-left: auto;
  color: var(--cms-color-warning-text);
}

/* Rendered mention links inside comment bodies. */
.cms-mention {
  font-weight: 600;
  color: var(--cms-color-primary);
  text-decoration: none;
}
.cms-mention:hover {
  text-decoration: underline;
}

/* CMS Builder — external-link "you're leaving" confirmation (.cms-leaving) */
.cms-leaving {
  position: fixed;
  inset: 0;
  z-index: var(--cms-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cms-space-4);
  background: rgba(0, 0, 0, 0.5);
}
.cms-leaving__dialog {
  width: 100%;
  max-width: 30rem;
  padding: var(--cms-space-5);
  background: var(--cms-color-surface-elevated, var(--cms-color-surface));
  color: var(--cms-color-text);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25));
}
.cms-leaving__title {
  margin: 0 0 var(--cms-space-3);
  font-size: 1.25rem;
}
.cms-leaving__lead {
  margin: 0 0 var(--cms-space-1);
  color: var(--cms-color-text-secondary);
}
.cms-leaving__host {
  margin: 0 0 var(--cms-space-1);
  font-weight: 600;
  font-size: 1.05rem;
  word-break: break-all;
}
.cms-leaving__url {
  margin: 0 0 var(--cms-space-4);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  word-break: break-all;
}
.cms-leaving__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cms-space-2);
}

/* CMS Builder — cookie-consent banner (.cms-cookie-consent) */
.cms-cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--cms-z-banner);
  padding: var(--cms-space-3) var(--cms-space-4);
  background: var(--cms-color-surface-elevated, var(--cms-color-surface));
  color: var(--cms-color-text);
  border-top: 1px solid var(--cms-color-border);
  box-shadow: var(--cms-shadow-lg, 0 -4px 24px rgba(0, 0, 0, 0.18));
}
.cms-cookie-consent__body {
  max-width: var(--cms-layout-content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cms-space-4);
  flex-wrap: wrap;
}
.cms-cookie-consent__text {
  margin: 0;
  flex: 1 1 20rem;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}
.cms-cookie-consent__link {
  color: var(--cms-color-primary);
}
.cms-cookie-consent__actions {
  display: flex;
  gap: var(--cms-space-2);
  flex: 0 0 auto;
}

/* ── Public form (Razor /form/{slug} + form preview) ─────────────────────── */
/* Renders all .public-form fields produced by _PublicFormBody.cshtml.
   Tokens-driven so light/dark themes flip without per-mode overrides. */
.public-form {
  /* Width:100% is load-bearing — when .public-form is a flex item (e.g.
     ProfileEdit's stacked card layout, or .auth-shell on Login), the
     `margin: 0 auto` would otherwise absorb cross-axis space and collapse
     the form to its intrinsic content width. */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--cms-space-4) 0 var(--cms-space-8);
}

.public-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
}

.public-form__content {
  /* Content blocks (heading/text/callout) interleaved with fields render
     full width, no field-style outlining. */
  margin: var(--cms-space-2) 0;
}

.public-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.public-form__label {
  font-weight: var(--cms-font-weight-medium);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-on-surface);
}

.public-form__field input[type=text],
.public-form__field input[type=email],
.public-form__field input[type=password],
.public-form__field input[type=number],
.public-form__field input[type=date],
.public-form__field textarea,
.public-form__field select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--cms-space-2) var(--cms-space-3);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-on-surface);
  font: inherit;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.public-form__field textarea {
  min-height: 6rem;
  resize: vertical;
}

.public-form__field input:focus-visible,
.public-form__field textarea:focus-visible,
.public-form__field select:focus-visible {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
}

.public-form__field input::placeholder,
.public-form__field textarea::placeholder {
  color: var(--cms-color-text-secondary);
}

.public-form__field input[readonly],
.public-form__field textarea[readonly],
.public-form__field select[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Now a <fieldset> with a <legend> (S09a): drop the browser's frame so it looks as before. */
fieldset.public-form__radio-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

fieldset.public-form__radio-group > legend {
  padding: 0;
}

.public-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
}

.public-form__radio-label,
.public-form__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-on-surface);
  cursor: pointer;
}

.public-form__field--submit {
  margin-top: var(--cms-space-2);
}

.public-form__help {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

.public-form__closed {
  padding: var(--cms-space-3) var(--cms-space-4);
  background: color-mix(in srgb, var(--cms-color-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cms-color-warning) 35%, transparent);
  border-radius: var(--cms-radius-md);
  color: var(--cms-color-on-surface);
  margin-bottom: var(--cms-space-4);
}

.public-form__closed p {
  margin: 0;
}

/* Honeypot wrapper: off-canvas rather than display:none so naive bots still
   "see" (and fill) the field. */
.public-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Public page shell (Razor public/member surfaces) ───────────────────── */
/* Shared layout primitives applied across the public-facing Razor pages
   (Apply, Application Status, Profile Edit, Support, Login, Register, etc.)
   so every member-facing surface uses the same eyebrow / title / lede /
   panel rhythm as the polished public profile page.

   .public-page         outer vertical stack
   .public-page__header eyebrow + h1 + lede block above the body
   .public-page--narrow constrains width for forms / status pages
   .public-form         form layout vocabulary (vertical stack of fields)
   .auth-shell          extra-narrow centered shell for sign-in surfaces
   .cms-status-card     polished status panel with semantic variants */
.public-page {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
}

.public-page--narrow {
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}

.public-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.public-page__header .eyebrow,
.eyebrow {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cms-color-text-secondary);
}

.public-page__header h1 {
  margin: 0;
  font-size: var(--cms-font-size-2xl);
  line-height: 1.15;
  color: var(--cms-color-on-surface);
}

.public-page__header .lede,
.lede {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-base);
  max-width: 64ch;
}

/* Reusable form vocabulary for public Razor surfaces. .public-form is a
   vertical stack of .public-form__field blocks; each field stacks its
   label above its control with a small gap. */
.public-form {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
}

.public-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.public-form__field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--cms-space-2);
}

.public-form__field > label {
  font-weight: var(--cms-font-weight-medium);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-on-surface);
}

.public-form__field input[type=text],
.public-form__field input[type=email],
.public-form__field input[type=password],
.public-form__field input[type=url],
.public-form__field input[type=search],
.public-form__field input[type=number],
.public-form__field select,
.public-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--cms-space-2) var(--cms-space-3);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-on-surface);
  font: inherit;
}

.public-form__field input:focus-visible,
.public-form__field select:focus-visible,
.public-form__field textarea:focus-visible {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
}

.public-form__field textarea {
  min-height: 6rem;
  resize: vertical;
}

.public-form__hint {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  margin: 0;
}

.public-form__actions {
  display: flex;
  gap: var(--cms-space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* Sticky variant — used on long self-service forms (e.g. Profile Edit)
   so the Save action follows the user when the form scrolls past the
   viewport. Keeps the same visual rhythm but pins to the bottom edge
   with a tokenized backdrop so labels above stay legible. */
.public-form__actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: var(--cms-space-2) calc(var(--cms-space-5) * -1) calc(var(--cms-space-5) * -1);
  padding: var(--cms-space-3) var(--cms-space-5);
  background: var(--cms-color-surface);
  border-top: 1px solid var(--cms-color-outline-variant);
  border-bottom-left-radius: var(--cms-radius-lg);
  border-bottom-right-radius: var(--cms-radius-lg);
  /* Tokenized soft top-shadow so the bar visually separates from the
     scrolling fields above it, in both light and dark modes. */
  box-shadow: 0 -1px 0 var(--cms-color-outline-variant), 0 -8px 16px -8px color-mix(in srgb, var(--cms-color-on-surface) 12%, transparent);
}

/* Long-form readability: textareas already render at min-height: 6rem,
   but a small extra top breathing room helps when a textarea follows a
   short text input — visually demarcates the longer-form group without
   needing schema metadata for sections. */
.public-form__field:has(textarea) {
  padding-top: var(--cms-space-2);
}

.public-form__field + .public-form__field:has(textarea) {
  padding-top: var(--cms-space-3);
  border-top: 1px dashed var(--cms-color-outline-variant);
  margin-top: var(--cms-space-1);
}

/* Section header inside a status-card panel — pairs the h2 title with a
   small explanatory hint underneath so each form section reads as its
   own unit. Used on Profile Edit picture / privacy / details sections. */
.profile-edit-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
}

/* 404 site-search — a quieter form-row variant separated from the action
   buttons below it. */
.not-found-search {
  padding: var(--cms-space-3) 0;
  border-top: 1px dashed var(--cms-color-outline-variant);
  border-bottom: 1px dashed var(--cms-color-outline-variant);
}

/* ── Public profile page (/profile/{slug}) ───────────────────────────────── */
/* Polished hero + main/side layout. Reuses the existing .profile-avatar /
   .presence-dot vocabulary from the directory so the two surfaces feel
   like the same product. All colors are tokenized — verify both light
   and dark modes after touching anything here. */
.profile-page {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cms-space-5);
  padding: var(--cms-space-5);
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.profile-hero__avatar {
  /* Inherits sizing from .profile-avatar--large; this rule just stops the
     grid track from collapsing when there's no image. */
  flex-shrink: 0;
}

.profile-hero__identity {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  min-width: 0;
}

.profile-hero__eyebrow {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cms-color-text-secondary);
}

.profile-hero__name {
  margin: 0;
  font-size: var(--cms-font-size-2xl);
  line-height: 1.15;
  color: var(--cms-color-on-surface);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-1);
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-2);
  padding: var(--cms-space-1) var(--cms-space-3);
  border-radius: var(--cms-radius-full);
  font-size: var(--cms-font-size-sm);
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
}

.profile-chip--membership {
  font-variant-numeric: tabular-nums;
  color: var(--cms-color-on-surface);
  font-weight: var(--cms-font-weight-medium);
}

.profile-chip--slug {
  color: var(--cms-color-text-secondary);
}

.profile-chip--presence {
  background: transparent;
  padding-left: 0;
}

.profile-hero__actions {
  align-self: start;
  margin: 0;
}

.profile-hero__edit-link {
  display: inline-flex;
  align-items: center;
  padding: var(--cms-space-2) var(--cms-space-4);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  text-decoration: none;
  font-weight: var(--cms-font-weight-medium);
  font-size: var(--cms-font-size-sm);
  transition: filter 0.15s, transform 0.15s;
}

.profile-hero__edit-link:hover {
  filter: brightness(1.06);
}

.profile-hero__edit-link:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 30%, transparent);
}

/* Two-column main/side layout. Falls back to a single column at narrow
   widths so panels don't squish or overflow. */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--cms-space-5);
}

/* The panel surface itself comes from .cms-surface; this only stacks the content. */
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.profile-panel__title {
  margin: 0;
  font-size: var(--cms-font-size-lg);
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-on-surface);
}

.profile-bio {
  margin: 0;
}

.profile-bio__text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
  max-width: 64ch;
  color: var(--cms-color-on-surface);
}

.profile-bio--empty {
  color: var(--cms-color-text-secondary);
  font-style: italic;
}

.profile-detail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.profile-detail-list--empty {
  color: var(--cms-color-text-secondary);
  font-style: italic;
}

.profile-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--cms-space-3);
  border-bottom: 1px solid var(--cms-color-outline-variant);
}

.profile-detail:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.profile-detail__label {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cms-color-text-secondary);
}

.profile-detail__value {
  margin: 0;
  color: var(--cms-color-on-surface);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.profile-detail__longtext {
  display: block;
  white-space: pre-wrap;
  line-height: 1.5;
}

.profile-detail__link {
  color: var(--cms-color-primary);
  text-decoration: none;
}

.profile-detail__link:hover {
  text-decoration: underline;
}

.profile-detail__link:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 30%, transparent);
  border-radius: var(--cms-radius-sm);
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--cms-space-3);
  border-radius: var(--cms-radius-full);
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-medium);
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text-secondary);
}

.profile-pill--on {
  background: var(--cms-color-success-bg-subtle);
  color: var(--cms-color-success-text);
}

/* ── Report profile (collapsible details under the hero) ─────────────────── */
.profile-report {
  align-self: flex-start;
  width: 100%;
  max-width: 32rem;
}

.profile-report__details {
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  padding: var(--cms-space-3) var(--cms-space-4);
}

.profile-report-button {
  cursor: pointer;
  font-size: var(--cms-font-size-sm);
  font-weight: var(--cms-font-weight-medium);
  color: var(--cms-color-text-secondary);
  list-style: none;
}

.profile-report-button::-webkit-details-marker {
  display: none;
}

.profile-report-button:hover {
  color: var(--cms-color-on-surface);
}

.profile-report__form {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
  margin-top: var(--cms-space-3);
}

.profile-report__field {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
  font-size: var(--cms-font-size-sm);
}

.profile-report__field select,
.profile-report__field textarea {
  padding: var(--cms-space-2) var(--cms-space-3);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-on-surface);
  font: inherit;
}

.profile-report-help {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.profile-report-status {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  min-height: 1.25em;
}

/* ── Responsive: stack hero + collapse layout to one column ──────────────── */
@media (max-width: 720px) {
  .profile-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .profile-hero__avatar {
    justify-self: center;
  }
  .profile-hero__identity {
    align-items: center;
  }
  .profile-hero__meta {
    justify-content: center;
  }
  .profile-hero__actions {
    justify-self: center;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
}
/* ── Public form page (/form/{slug}) — moved out of the view's inline <style> ── */
.public-form-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--cms-space-6) var(--cms-space-4);
}

.public-form__status {
  font-size: var(--cms-font-size-sm);
}

.public-form__status:focus {
  outline: none;
}

.public-form__status--error {
  color: var(--cms-color-danger-text);
}

.public-form__status--ok {
  color: var(--cms-color-success-text);
}

.public-form__field-error {
  margin: var(--cms-space-1) 0 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-danger-text);
}

.public-form__field [aria-invalid=true] {
  border-color: var(--cms-color-danger);
}

/* Profile chips carry their meaning as text now (was a title tooltip). */
.profile-chip__icon {
  font-size: 16px;
  margin-right: 2px;
  vertical-align: -3px;
}

.profile-chip__sub {
  color: var(--cms-color-text-secondary);
  font-weight: var(--cms-font-weight-regular);
}

/* V2-P3 — the rank chip rides the .profile-chip look. */
.profile-chip--rank {
  font-weight: var(--cms-font-weight-medium);
}

/* ── Profile panel lists (awards V2-P4, courses V2-P5) ─────────────────────── */
/* One vocabulary for the "grid of small rows" panels under the profile
   layout: a titled section whose items are .cms-card-grid > .cms-card--flat. */
.profile-panel-list {
  margin-top: var(--cms-space-5);
}

.profile-panel-list__title {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-lg);
}

.profile-panel-list__items--wide {
  --min: 240px;
}

.profile-panel-list__item {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}

.profile-panel-list__image {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
}

.profile-panel-list__icon {
  font-size: 24px;
  width: 32px;
  flex: none;
  text-align: center;
  color: var(--cms-color-text-secondary);
}

.profile-panel-list__code {
  flex: none;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  white-space: nowrap;
}

.profile-panel-list__name {
  font-weight: var(--cms-font-weight-medium);
}

.profile-panel-list__count {
  margin-left: auto;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  white-space: nowrap;
}

.profile-panel-list__pill {
  margin-left: auto;
  padding: 1px 10px;
  border-radius: var(--cms-radius-lg);
  font-size: var(--cms-font-size-sm);
  background: color-mix(in srgb, var(--cms-color-primary) 14%, transparent);
  white-space: nowrap;
}

.profile-panel-list__desc {
  display: block;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  margin-top: 2px;
}

/* ── Member directory / roster ───────────────────────────────────────────── */
/* Used by /__member-directory (rewritten from settings.RouteSlug, e.g.
   "/guild-roster"). Renders the directory list as a responsive card grid. */
.directory-intro {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-base);
  max-width: 64ch;
}

.directory-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--cms-space-3);
  margin-bottom: var(--cms-space-4);
}

.directory-search > label {
  flex: 1;
  min-width: 240px;
  margin-bottom: 0;
}

/* The caption is its own line whatever the label's width (on the 1200px canvas the
   label grew wide enough for the caption and the narrow input to sit side by side). */
.directory-search > label > span {
  display: block;
}

.directory-search input[type=search],
.directory-search select,
.directory-search button {
  height: 2.5rem;
  line-height: 1.5;
}

.directory-search input[type=search],
.directory-search select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--cms-space-2) var(--cms-space-3);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-on-surface);
  font: inherit;
}

.directory-search input[type=search]:focus-visible,
.directory-search select:focus-visible {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
}

.directory-search button {
  box-sizing: border-box;
  padding: var(--cms-space-2) var(--cms-space-4);
  border: 1px solid transparent;
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  font: inherit;
  font-weight: var(--cms-font-weight-medium);
  cursor: pointer;
  transition: filter 0.15s;
}

.directory-search button:hover {
  filter: brightness(1.06);
}

.directory-search button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 30%, transparent);
}

/* A .cms-card-grid with roomier gutters than the default. */
.directory-grid {
  gap: var(--cms-space-4);
}

.directory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cms-space-2);
  padding: var(--cms-space-4);
  background: var(--cms-color-surface-container-low);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-lg);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.directory-card:hover {
  border-color: color-mix(in srgb, var(--cms-color-primary) 35%, var(--cms-color-outline-variant));
  box-shadow: var(--cms-shadow-md);
  transform: translateY(-1px);
}

.directory-card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--cms-font-weight-semibold);
  line-height: 1.3;
}

.directory-card-name a {
  color: var(--cms-color-on-surface);
  text-decoration: none;
}

.directory-card-name a:hover {
  color: var(--cms-color-primary);
  text-decoration: underline;
}

.directory-card-membership {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* V2-P3 — the member's current rank, shown when Ranks.ShowInDirectory is on. */
.directory-card-rank {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.directory-card-bio {
  margin: var(--cms-space-1) 0 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  line-height: 1.45;
}

.directory-card-presence {
  margin: var(--cms-space-1) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

/* ── Profile avatar + presence chips ─────────────────────────────────────── */
/* Used by /profile/{key} and the directory cards above. */
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cms-color-surface-container);
  border: 1px solid var(--cms-color-outline-variant);
}

.profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar--large {
  width: 8rem;
  height: 8rem;
}

.profile-avatar--card {
  width: 4.5rem;
  height: 4.5rem;
}

.presence-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cms-color-text-secondary);
}

.presence-online {
  background: var(--cms-color-success);
}

.presence-offline {
  background: var(--cms-color-text-secondary);
}

.profile-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--cms-space-2) var(--cms-space-4);
  font-size: var(--cms-font-size-sm);
  margin: var(--cms-space-2) 0 0;
}

.profile-meta dt {
  color: var(--cms-color-text-secondary);
  font-weight: var(--cms-font-weight-medium);
}

.profile-meta dd {
  margin: 0;
}

.profile-presence {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

/* Profile chooser — selectable cards with a custom radio indicator. */
.profile-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cms-space-3);
}

.profile-choice-card {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  padding: var(--cms-space-4);
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}

.profile-choice-card:hover {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cms-color-primary) 35%, transparent);
}

.profile-choice-card__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.profile-choice-card__indicator {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--cms-color-outline-variant);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s;
}

.profile-choice-card__radio:checked + .profile-choice-card__indicator {
  border-color: var(--cms-color-primary);
}

.profile-choice-card__radio:checked + .profile-choice-card__indicator::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--cms-color-primary);
  border-radius: 50%;
}

.profile-choice-card:has(.profile-choice-card__radio:checked) {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 1px var(--cms-color-primary);
}

.profile-choice-card:has(.profile-choice-card__radio:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 30%, transparent);
}

.profile-choice-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-choice-card__name {
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-on-surface);
}

.profile-choice-card__meta {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Profile-edit page — section spacing + the avatar/controls split row. */
.profile-edit-section {
  gap: var(--cms-space-4);
}

.profile-edit-picture-row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-5);
  flex-wrap: wrap;
}

.profile-edit-picture-controls {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  flex: 1;
  min-width: 14rem;
}

.profile-edit-status:empty {
  display: none;
}

/* ── Profile-picture editor (Razor /profile/edit) ────────────────────────── */
/* Used by ProfileEdit.cshtml. Tokens-driven so the avatar placeholder
   surface stays legible in both light and dark modes. */
.profile-picture__missing {
  width: 96px;
  height: 96px;
  background: var(--cms-color-surface-container);
  border-radius: var(--cms-radius-md);
}

/* P9 — follow button state + per-member activity list. */
.profile-follow-btn.is-following {
  background: var(--cms-color-surface-container);
  color: var(--cms-color-text);
  border: 1px solid var(--cms-color-border);
}

.profile-activity {
  margin-top: var(--cms-space-6);
}
.profile-activity__title {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-lg);
}
.profile-activity__list {
  --gap: var(--cms-space-3);
}
.profile-activity { /* a .cms-stack--list */ }
.profile-activity__item {
  display: flex;
  align-items: baseline;
  gap: var(--cms-space-2);
}
.profile-activity__icon {
  font-size: 18px;
  color: var(--cms-color-text-secondary);
  transform: translateY(3px);
}
.profile-activity__text {
  flex: 1;
  min-width: 0;
}
.profile-activity__text a {
  color: var(--cms-color-primary);
  text-decoration: none;
}
.profile-activity__text a:hover {
  text-decoration: underline;
}
.profile-activity__time {
  flex-shrink: 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

/* Auth shell: narrower than .public-page--narrow and centered vertically
   with a bit more breathing room above the form. Used by Login, Register,
   ForgotPassword, ResetPassword, MfaChallenge, VerifyEmail. */
.auth-shell {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--cms-space-5) 0;
  width: 100%;
}

.auth-shell .public-page__header {
  text-align: center;
  align-items: center;
}

.auth-shell .public-page__header .lede {
  max-width: 36ch;
}

/* The card surface itself comes from .cms-surface; this only stacks the fields. */
.auth-shell .auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.auth-shell .auth-card h2 {
  margin: 0;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-on-surface);
}

/* Secondary auth methods on /Login. Visually quieter than the primary
   .auth-card so the password form (when enabled) reads as the default
   path without removing the passwordless options. */
.auth-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
  padding: var(--cms-space-4);
  border: 1px dashed var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  background: transparent;
}

.auth-secondary__heading {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cms-color-text-secondary);
  text-align: center;
}

.auth-secondary__item {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.auth-shell__alt-actions {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
  align-items: center;
  font-size: var(--cms-font-size-sm);
}

/* MFA challenge — large monospace centered code input. */
.mfa-code-input {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 1.25rem;
}

.mfa-code-input--recovery {
  letter-spacing: 0.15em;
  font-family: var(--cms-font-family-mono);
  font-size: 1.1rem;
}

/* ── Messaging V2 shell (Slice 4: polished mailbox UI) ─────────────────── */
/* Three-pane email-client layout used by the member-facing messaging
   surface. Filter sidebar (left), conversation list (middle), conversation
   detail (right). Mobile collapses to single-pane stacking via the
   responsive media query at the bottom of this block.
   Tokens-only — verify both light and dark modes after touching anything. */
.cms-msg-shell {
  display: grid;
  grid-template-columns: 13rem minmax(20rem, 24rem) minmax(0, 1fr);
  gap: var(--cms-space-4);
  align-items: stretch;
  min-height: calc(100vh - 8rem);
  padding: var(--cms-space-4);
  max-width: 1400px;
  margin: 0 auto;
}

.cms-msg-shell__sidebar,
.cms-msg-shell__list,
.cms-msg-shell__detail {
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cms-msg-shell__sidebar {
  padding: var(--cms-space-3);
  gap: var(--cms-space-1);
}

.cms-msg-shell__list {
  overflow: hidden;
}

.cms-msg-shell__detail {
  overflow: hidden;
}

/* ── Filter sidebar items ───────────────────────────────────────────── */
.cms-msg-filter {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  padding: var(--cms-space-2) var(--cms-space-3);
  border-radius: var(--cms-radius-md);
  color: var(--cms-color-on-surface);
  text-decoration: none;
  font-size: var(--cms-font-size-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
}

.cms-msg-filter:hover {
  background: var(--cms-color-surface-container);
}

.cms-msg-filter--active {
  background: color-mix(in srgb, var(--cms-color-primary) 12%, transparent);
  color: var(--cms-color-primary);
  font-weight: var(--cms-font-weight-semibold);
}

.cms-msg-filter__icon {
  color: inherit;
  flex-shrink: 0;
}

.cms-msg-filter__count {
  margin-left: auto;
  font-size: var(--cms-font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--cms-color-text-secondary);
}

.cms-msg-filter--active .cms-msg-filter__count {
  color: var(--cms-color-primary);
}

.cms-msg-shell__compose {
  margin-bottom: var(--cms-space-3);
  width: 100%;
}

/* ── Conversation list ──────────────────────────────────────────────── */
.cms-msg-list__header {
  padding: var(--cms-space-3) var(--cms-space-4);
  border-bottom: 1px solid var(--cms-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cms-space-2);
}

.cms-msg-list__title {
  margin: 0;
  font-size: var(--cms-font-size-base);
  font-weight: var(--cms-font-weight-semibold);
}

.cms-msg-list__count {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.cms-msg-list__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--cms-space-2);
}

.cms-msg-row {
  display: flex;
  align-items: flex-start;
  gap: var(--cms-space-3);
  padding: var(--cms-space-3);
  border-radius: var(--cms-radius-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 2px;
}

.cms-msg-row:hover {
  background: var(--cms-color-surface-container);
}

.cms-msg-row--selected {
  background: color-mix(in srgb, var(--cms-color-primary) 14%, transparent);
}

.cms-msg-row--selected:hover {
  background: color-mix(in srgb, var(--cms-color-primary) 18%, transparent);
}

.cms-msg-row__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--cms-color-surface-container);
  border: 1px solid var(--cms-color-outline-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cms-color-text-secondary);
  font-weight: var(--cms-font-weight-semibold);
}

.cms-msg-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-msg-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cms-space-2);
}

.cms-msg-row__name {
  font-weight: var(--cms-font-weight-semibold);
  font-size: var(--cms-font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-msg-row__time {
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  white-space: nowrap;
}

.cms-msg-row__subject {
  font-size: var(--cms-font-size-sm);
  font-weight: var(--cms-font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-msg-row__preview {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-msg-row__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

.cms-msg-row__pin-icon {
  color: var(--cms-color-primary);
}

.cms-msg-row__archive-icon {
  color: var(--cms-color-text-secondary);
}

.cms-msg-row__mute-icon {
  color: var(--cms-color-text-secondary);
}

.cms-msg-row__icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.cms-msg-row__unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cms-color-primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.cms-msg-row--unread .cms-msg-row__name,
.cms-msg-row--unread .cms-msg-row__subject {
  font-weight: var(--cms-font-weight-bold);
}

/* ── Conversation detail ────────────────────────────────────────────── */
.cms-msg-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cms-msg-detail__header {
  padding: var(--cms-space-4) var(--cms-space-5);
  border-bottom: 1px solid var(--cms-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
}

/* "Inbox" back control — only meaningful on phones, where the list pane is hidden. */
.cms-msg-detail__back {
  display: none;
  align-self: flex-start;
  margin-left: calc(-1 * var(--cms-space-2));
}

.cms-msg-detail__group-hint {
  margin: var(--cms-space-1) 0 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

.cms-msg-detail__reply-hint {
  margin-left: var(--cms-space-2);
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  font-weight: var(--cms-font-weight-regular);
}

.cms-msg-detail__subject {
  margin: 0;
  font-size: var(--cms-font-size-lg);
  font-weight: var(--cms-font-weight-semibold);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.cms-msg-detail__with {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.cms-msg-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--cms-space-1);
  margin-top: var(--cms-space-2);
  flex-wrap: wrap;
}

.cms-msg-detail__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--cms-space-4) var(--cms-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.cms-msg-detail__reply {
  border-top: 1px solid var(--cms-color-outline-variant);
  padding: var(--cms-space-3) var(--cms-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  background: var(--cms-color-surface-container-lowest);
}

.cms-msg-detail__reply-as {
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cms-msg-detail__reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cms-space-2);
}

.cms-msg-detail__readonly-banner {
  margin: var(--cms-space-3) var(--cms-space-5);
}

/* ── Favorite-profile cards (Favorites view) ────────────────────────── */
.cms-msg-favorites {
  padding: var(--cms-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--cms-space-3);
  overflow-y: auto;
}

.cms-msg-favorite-card {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  padding: var(--cms-space-3);
  background: var(--cms-color-surface);
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cms-msg-favorite-card:hover {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cms-color-primary) 30%, transparent);
}

.cms-msg-favorite-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cms-color-surface-container);
  border: 1px solid var(--cms-color-outline-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cms-font-weight-semibold);
  color: var(--cms-color-text-secondary);
  flex-shrink: 0;
}

.cms-msg-favorite-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-msg-favorite-card__name {
  font-weight: var(--cms-font-weight-semibold);
}

.cms-msg-favorite-card__handle {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.cms-msg-favorite-card__actions {
  display: inline-flex;
  gap: var(--cms-space-1);
}

.cms-msg-favorite-card__star {
  color: var(--cms-color-primary);
}

/* ── Mobile collapse ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cms-msg-shell {
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-areas: "sidebar list" "sidebar detail";
  }
  .cms-msg-shell__sidebar {
    grid-area: sidebar;
  }
  .cms-msg-shell__list {
    grid-area: list;
  }
  .cms-msg-shell__detail {
    grid-area: detail;
  }
}
@media (max-width: 768px) {
  .cms-msg-shell {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    padding: var(--cms-space-2);
    gap: var(--cms-space-2);
    min-height: auto;
  }
  /* Show whichever pane is meaningful at this width — driven by the
     [data-mobile-pane] attribute the shell sets based on route state. */
  .cms-msg-shell[data-mobile-pane=list] .cms-msg-shell__detail {
    display: none;
  }
  .cms-msg-shell[data-mobile-pane=detail] .cms-msg-shell__sidebar,
  .cms-msg-shell[data-mobile-pane=detail] .cms-msg-shell__list {
    display: none;
  }
  .cms-msg-detail__back {
    display: inline-flex;
  }
  .cms-msg-shell__sidebar {
    padding: var(--cms-space-2);
  }
}
/* P11 — public Events surface: list, month calendar, detail, RSVP. */
/* ── Calendar ─────────────────────────────────────────────────────────────── */
.events-calendar__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cms-space-4);
  margin-bottom: var(--cms-space-3);
}

.events-calendar__title {
  margin: 0;
  font-size: var(--cms-font-size-lg);
  min-width: 12ch;
  text-align: center;
}

.events-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--cms-color-border);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  overflow: hidden;
}

.events-calendar__dow {
  background: var(--cms-color-surface-alt);
  padding: var(--cms-space-2);
  text-align: center;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-medium);
  color: var(--cms-color-text-secondary);
}

.events-calendar__cell {
  background: var(--cms-color-surface);
  min-height: 90px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.events-calendar__cell--muted {
  background: var(--cms-color-surface-alt);
}

.events-calendar__cell--muted .events-calendar__daynum {
  opacity: 0.4;
}

.events-calendar__cell--today .events-calendar__daynum {
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  border-radius: var(--cms-radius-lg);
  width: 1.6em;
  height: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.events-calendar__daynum {
  font-size: var(--cms-font-size-xs);
  align-self: flex-end;
}

.events-calendar__event {
  display: block;
  font-size: var(--cms-font-size-xs);
  padding: 1px 4px;
  border-radius: var(--cms-radius-sm);
  /* Solid primary chip — the subtle-tint version was unreadable on dark themes. */
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.events-calendar__event:hover {
  text-decoration: underline;
}

.events-calendar__event--cancelled {
  text-decoration: line-through;
  opacity: 0.6;
}

.events-calendar__hint {
  margin: 0 0 var(--cms-space-2);
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}

/* On phones the 7-column grid can only show 3px dots with no titles — the
   Upcoming/Past list underneath carries every event, so the grid goes. */
@media (max-width: 640px) {
  .events-calendar {
    display: none;
  }
}
/* ── List (rows are .cms-stack--list.event-list > .cms-card--flat) ─────────── */
/* The same row renders in the full /events column, a half column of a page at 1280 and a 390
   column, so it measures its LIST rather than the viewport (S11 C3, S09b O1): under 40rem the
   badges and actions drop under the title instead of squeezing it into mid-word breaks. */
.event-list {
  container-type: inline-size;
}

.event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "date body tags";
  align-items: center;
  column-gap: var(--cms-space-4);
  row-gap: var(--cms-space-2);
  padding: var(--cms-space-3); /* tighter than the .cms-card--flat default */
}

.event-row--cancelled {
  opacity: 0.7;
}

.event-row__date {
  grid-area: date;
  text-align: center;
  text-decoration: none;
  color: inherit;
  line-height: 1.1;
  min-width: 3.2rem;
}

.event-row__month {
  display: block;
  font-size: var(--cms-font-size-xs);
  text-transform: uppercase;
  color: var(--cms-color-primary);
  font-weight: var(--cms-font-weight-medium);
}

.event-row__day {
  display: block;
  font-size: var(--cms-font-size-xl);
  font-weight: var(--cms-font-weight-bold);
}

.event-row__body {
  grid-area: body;
  min-width: 0;
}

/* break-word, not the page's `anywhere`: a word splits only when it alone is wider than the column. */
.event-row__title {
  font-weight: var(--cms-font-weight-medium);
  text-decoration: none;
  color: inherit;
  overflow-wrap: break-word;
}

.event-row__title:hover {
  text-decoration: underline;
}

.event-row__meta {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.event-row__tags {
  grid-area: tags;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cms-space-2);
  flex-wrap: wrap;
}

.event-row__going {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

@container (max-width: 40rem) {
  .event-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "date body" "date tags";
    align-items: start;
  }
  .event-row__tags {
    justify-content: flex-start;
  }
}
/* ── Detail ───────────────────────────────────────────────────────────────── */
.event-detail {
  padding-block: var(--cms-space-6);
}

.event-detail__back {
  margin: 0 0 var(--cms-space-3);
}

.event-detail__back a {
  text-decoration: none;
  color: var(--cms-color-text-secondary);
}

.event-detail__cover {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--cms-radius-md);
}

.event-detail__header {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
  margin-top: var(--cms-space-4);
}

.event-detail__header h1 {
  margin: 0;
}

.event-detail__badges {
  display: flex;
  gap: var(--cms-space-2);
}

.event-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-6);
  margin: var(--cms-space-4) 0;
}

.event-detail__facts dt {
  font-size: var(--cms-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cms-color-text-secondary);
}

.event-detail__facts dd {
  margin: 2px 0 0;
  font-weight: var(--cms-font-weight-medium);
}

.event-detail__maybe {
  color: var(--cms-color-text-secondary);
  font-weight: 400;
}

.event-detail__sitetime {
  display: block;
  margin-top: 2px;
  font-size: var(--cms-font-size-sm);
  font-weight: 400;
  color: var(--cms-color-text-secondary);
}

.event-detail__body {
  margin-top: var(--cms-space-5);
}

.event-detail__actions {
  margin: var(--cms-space-3) 0 0;
}

/* ── RSVP ─────────────────────────────────────────────────────────────────── */
.event-rsvp {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
  padding: var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
}

.event-rsvp__label {
  font-weight: var(--cms-font-weight-medium);
}

.event-rsvp__buttons {
  display: flex;
  gap: var(--cms-space-2);
}

.event-rsvp__btn {
  border: 1px solid var(--cms-color-border);
  background: var(--cms-color-surface);
  cursor: pointer;
}

.event-rsvp__btn--active {
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  border-color: var(--cms-color-primary);
}

.event-rsvp--busy {
  opacity: 0.6;
  pointer-events: none;
}

.event-rsvp__full {
  color: var(--cms-color-warning-text, var(--cms-color-warning));
  font-size: var(--cms-font-size-sm);
}

.event-rsvp__error {
  color: var(--cms-color-danger-text, var(--cms-color-danger));
  font-size: var(--cms-font-size-sm);
}

/* V2-P9 — public Polls surface: list, archive, detail, embedded poll block. */
.polls-page__archive-link {
  white-space: nowrap;
}

/* ── List rows (.cms-stack--list > .cms-card--flat) ───────────────────────── */
.polls-list h2 {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-lg);
}

.polls-list__card {
  display: flex;
  flex-direction: column;
  gap: 2px; /* surface + border come from .cms-card--flat */
}

.polls-list__title {
  font-weight: var(--cms-font-weight-medium);
}
.polls-list__title a {
  color: inherit;
  text-decoration: none;
}
.polls-list__title a:hover {
  text-decoration: underline;
}

/* ── Poll body (detail page + embedded block) ─────────────────────────────── */
.poll-page {
  padding-block: var(--cms-space-6);
}

.poll-page__back {
  margin: 0 0 var(--cms-space-4);
}

.poll {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
  max-width: 640px;
}

.poll--embedded {
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  padding: var(--cms-space-4);
  margin-block: var(--cms-space-4);
}

.poll__header {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
}

.poll__title {
  margin: 0;
}

.poll--embedded .poll__title {
  font-size: var(--cms-font-size-lg);
}

.poll--embedded .poll__title a {
  text-decoration: none;
  color: inherit;
}

.poll--embedded .poll__title a:hover {
  text-decoration: underline;
}

.poll__status {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

.poll__status .cms-badge {
  margin-right: var(--cms-space-1);
}

.poll__hint, .poll__note, .poll__results-note {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

.poll__error {
  margin: 0;
  color: var(--cms-color-danger-text, var(--cms-color-danger));
  font-size: var(--cms-font-size-sm);
}
.poll__error:empty {
  display: none;
}

.poll--busy {
  opacity: 0.7;
  pointer-events: none;
}

/* ── Ballot ───────────────────────────────────────────────────────────────── */
.poll__ballot {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.poll-option {
  display: flex;
  flex-wrap: wrap; /* S05b-17: the arrow pair drops under a long label rather than leaving the card */
  align-items: center;
  gap: var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  padding: var(--cms-space-2) var(--cms-space-3);
}

.poll-option--ranked {
  border-color: var(--cms-color-primary);
}

.poll-option__pick {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  flex: 1 1 10rem;
  min-width: 0; /* let the label shrink and wrap instead of pushing the arrows out (S05b-17) */
  cursor: pointer;
}

.poll-option__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Ranked rows are a full-width button; strip the button chrome. The `cms-poll-pick`
   class opts the button out of the shared base-button rule, which otherwise
   out-specifies this block and paints the row as a primary button (S05b-16). */
button.poll-option__pick {
  background: none;
  border: none;
  padding: 0;
  min-height: 44px;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.poll-option__pick:focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--cms-radius-sm);
}
button.poll-option__pick:disabled {
  cursor: default;
  opacity: 0.7;
}

.poll-option__rank {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  font-size: var(--cms-font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--cms-color-text-secondary);
}
.poll-option__rank:not(:empty) {
  background: var(--cms-color-primary);
  border-color: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
}

/* B17: per-option Move up / down, 44px targets, visible only while ranked. */
.poll-option__move {
  display: flex;
  gap: 2px;
  flex: none;
  margin-left: auto;
}
.poll-option__move[hidden] {
  display: none;
}

button.poll-option__move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
  color: var(--cms-color-text);
  cursor: pointer;
}
button.poll-option__move-btn:hover:not(:disabled) {
  background: var(--cms-color-surface-variant);
  border-color: var(--cms-color-primary);
}
button.poll-option__move-btn:focus-visible {
  outline: 2px solid var(--cms-color-focus-ring);
  outline-offset: 2px;
}
button.poll-option__move-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.poll-option__image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex: none;
  border-radius: var(--cms-radius-sm);
  border: 1px solid var(--cms-color-border);
}

.poll__actions {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
}

/* ── Results ──────────────────────────────────────────────────────────────── */
.poll__results {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.poll__results[hidden] {
  display: none;
}

.poll__total {
  margin: 0;
}

.poll__tally {
  --gap: var(--cms-space-3);
} /* a .cms-stack--list */
.poll-tally {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.poll-tally__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--cms-space-3);
}

.poll-tally__label {
  font-weight: var(--cms-font-weight-medium);
}

.poll-tally__count {
  color: var(--cms-color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.poll-tally__track {
  display: block;
  height: 8px;
  border-radius: var(--cms-radius-lg);
  background: var(--cms-color-primary-bg-subtle);
  overflow: hidden;
}

.poll-tally__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cms-color-primary);
  transition: width 0.3s ease;
}

/* V2-P1 — public Groups surface: /groups tree drill-down + group detail. */
/* ── Tree (.cms-stack--list of .cms-card--flat rows) ──────────────────────── */
.groups-tree__item {
  padding-left: calc(var(--depth, 0) * var(--cms-space-6));
}

/* Only the insignia + name link (like gallery/poll cards) — the card itself is plain. */
.groups-tree__card {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3); /* surface + border come from .cms-card--flat */
}

.groups-tree__insignia-link {
  flex: none;
  display: inline-flex;
}

.groups-tree__insignia {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex: none;
  border-radius: var(--cms-radius-sm);
  border: 1px solid var(--cms-color-border);
}

.groups-tree__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.groups-tree__name {
  font-weight: var(--cms-font-weight-medium);
  color: inherit;
  text-decoration: none;
  align-self: flex-start;
}
.groups-tree__name:hover {
  text-decoration: underline;
}

.groups-tree__meta {
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

/* ── Detail ───────────────────────────────────────────────────────────────── */
.group-page {
  padding-block: var(--cms-space-6);
}

.group-page__back {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-2);
  margin: 0 0 var(--cms-space-4);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.group-page__back [aria-current=page] {
  color: var(--cms-color-on-surface);
}

.group-page__header {
  display: flex;
  align-items: center;
  gap: var(--cms-space-4);
  margin-bottom: var(--cms-space-4);
}

.group-page__insignia {
  width: 72px;
  height: 72px;
  object-fit: cover;
  flex: none;
  border-radius: var(--cms-radius-md);
  border: 1px solid var(--cms-color-border);
}

.group-page__title h1 {
  margin: 0;
}

.group-page__meta {
  margin: 4px 0 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  display: flex;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
}

.group-page__body {
  max-width: 68ch;
  margin-bottom: var(--cms-space-5);
}

.group-page__section {
  margin-bottom: var(--cms-space-5);
}

.group-page__section h2 {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-lg);
}

.group-page__leadership {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
}

/* Leader + member rows ride .cms-card--flat for their surface. */
.group-page__leader {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}

.group-page__leader-position {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.group-page__leader a {
  text-decoration: none;
  color: inherit;
  font-weight: var(--cms-font-weight-medium);
}

.group-page__leader a:hover {
  text-decoration: underline;
}

.group-page__member {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}

.group-page__member a {
  text-decoration: none;
  color: inherit;
  font-weight: var(--cms-font-weight-medium);
}

.group-page__member a:hover {
  text-decoration: underline;
}

.group-page__member-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--cms-radius-lg);
  object-fit: cover;
}

.group-page__member-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* V2-P3 — the member's current rank, shown when Ranks.ShowInDirectory is on. */
.group-page__member-rank {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  white-space: nowrap;
  line-height: var(--cms-line-height-tight);
}

/* ── Affiliation chip (profile pages + directory cards) ───────────────────── */
/* Profile-hero variant rides the existing .profile-chip look; it's a link. */
a.profile-chip--group {
  text-decoration: none;
}

a.profile-chip--group:hover {
  text-decoration: underline;
}

.directory-card-group {
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  font-size: var(--cms-font-size-sm);
  text-decoration: none;
  color: inherit;
  background: var(--cms-color-surface);
}
.group-chip:hover {
  border-color: var(--cms-color-primary);
}

/* ── Group report submit page (V2-P6) ─────────────────────────────────────── */
.group-report-page {
  max-width: 42rem;
  padding-block: var(--cms-space-6);
}

.group-report-page__back a {
  color: var(--cms-color-text-secondary);
  text-decoration: none;
}
.group-report-page__back a:hover {
  text-decoration: underline;
}

.group-report-page__header {
  margin-bottom: var(--cms-space-4);
}

.group-report-page__header h1 {
  margin: 0 0 var(--cms-space-1);
}

.group-report-page__meta {
  margin: 0 0 var(--cms-space-3);
  color: var(--cms-color-text-secondary);
}

/* V2-P10 — public gallery: album tiles, image grid, lightbox, upload form. */
/* ── Album tiles (/gallery) — a .cms-card-grid ────────────────────────────── */
.gallery-albums {
  --min: 240px;
  gap: var(--cms-space-4);
}

.gallery-albums__tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.gallery-albums__tile:hover {
  border-color: var(--cms-color-primary);
}

.gallery-albums__cover {
  display: block;
  aspect-ratio: 3/2;
  background: var(--cms-color-surface-container);
  overflow: hidden;
}
.gallery-albums__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-albums__cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2.5rem;
  opacity: 0.5;
}

.gallery-albums__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--cms-space-3) var(--cms-space-4);
}

.gallery-albums__title {
  font-weight: var(--cms-font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}
.gallery-albums__title a {
  color: inherit;
  text-decoration: none;
}
.gallery-albums__title a:hover {
  text-decoration: underline;
}

.gallery-albums__description {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.gallery-albums__count {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

/* ── Album page ───────────────────────────────────────────────────────────── */
.gallery-album {
  padding-block: var(--cms-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-4);
}

.gallery-album__back {
  margin: 0;
}

.gallery-album__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cms-space-4);
  flex-wrap: wrap;
}
.gallery-album__header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}

.gallery-album__description {
  margin: 0;
  color: var(--cms-color-text-secondary);
}

/* ── Image grid (.cms-card-grid) ──────────────────────────────────────────── */
.gallery-grid {
  --min: 200px;
}

.gallery-grid__item {
  margin: 0;
  position: relative;
}

.gallery-grid__link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface);
}
.gallery-grid__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 120ms ease;
}
.gallery-grid__link:hover img {
  transform: scale(1.03);
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--cms-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.gallery-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  max-width: min(96vw, 1200px);
  max-height: 94vh;
}

.gallery-lightbox__stage {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  max-height: 94vh;
}

.gallery-lightbox__image {
  max-width: min(88vw, 1100px);
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--cms-radius-sm);
}

.gallery-lightbox__meta {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
  overflow-y: auto;
}

.gallery-lightbox__caption {
  margin: 0;
}

.gallery-lightbox__credit {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  opacity: 0.75;
}

.gallery-lightbox__actions {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  margin-top: var(--cms-space-1);
}

.gallery-lightbox__report {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  opacity: 0.75;
  font-size: var(--cms-font-size-sm);
  cursor: pointer;
  text-decoration: underline;
}
.gallery-lightbox__report:hover {
  opacity: 1;
}

.gallery-lightbox__nav,
.gallery-lightbox__close {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--cms-space-2);
  opacity: 0.8;
}
.gallery-lightbox__nav:hover,
.gallery-lightbox__close:hover {
  opacity: 1;
}

.gallery-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
}

/* The lightbox sits on a dark backdrop regardless of theme — keep the moved-in
 * reaction bar legible without touching its own tokens. */
.gallery-lightbox__extras .cms-reaction-bar {
  --cms-color-text: #fff;
}

/* ── Report form (inside the lightbox extras) ─────────────────────────────── */
.gallery-report {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-2);
  max-width: 420px;
}

.gallery-report__label {
  font-weight: var(--cms-font-weight-medium);
}

.gallery-report__row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}

.gallery-report__error {
  color: var(--cms-color-danger);
}

.gallery-report__done {
  margin: 0;
}

/* ── Profile gallery panel (V2-P10 slice E) ───────────────────────────────── */
.profile-gallery__title {
  margin: 0 0 var(--cms-space-3);
}

.profile-gallery__grid {
  --min: 110px;
}

.profile-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-container);
}
.profile-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-gallery__pending {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-surface);
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-xs);
  border: 1px solid var(--cms-color-border);
}

/* ── Embedded gallery block ───────────────────────────────────────────────── */
.gallery-block {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  margin-block: var(--cms-space-4);
}

.gallery-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
}

.gallery-block__title {
  margin: 0;
}
.gallery-block__title a {
  color: inherit;
  text-decoration: none;
}
.gallery-block__title a:hover {
  text-decoration: underline;
}

.gallery-block__link {
  white-space: nowrap;
}

.gallery-block__grid {
  --min: 120px;
}

.gallery-block__item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-container);
}
.gallery-block__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Upload form ──────────────────────────────────────────────────────────── */
.gallery-upload__details > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.gallery-upload__details > summary::-webkit-details-marker {
  display: none;
}

.gallery-upload__form {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-3);
  padding: var(--cms-space-4);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  max-width: 560px;
}

.gallery-upload__consent {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  border-left: 3px solid var(--cms-color-primary);
  padding-left: var(--cms-space-3);
}

.gallery-upload__hint {
  margin: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

.gallery-upload__row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
}

.gallery-upload__status {
  font-size: var(--cms-font-size-sm);
}

.gallery-upload__errors {
  margin: 0;
  padding-left: var(--cms-space-4);
  color: var(--cms-color-danger-text);
  font-size: var(--cms-font-size-sm);
}
.gallery-upload__errors:empty {
  display: none;
}

/* V2-P11 — the public forum surface: Latest/Categories tabs, board rows,
 * thread rows, thread pages (posts + composer), spoilers, and the report box.
 * Rendered by Views/Forums/* + forums.js. */
/* Pinned / Locked / Closed state: an icon plus the word, so the state never
 * depends on an emoji glyph or a title tooltip. Sits inline in headings and
 * row titles. */
.forum-flag {
  gap: var(--cms-space-1);
  margin-inline-end: var(--cms-space-1);
  font-size: var(--cms-font-size-xs);
}
.forum-flag .material-icons {
  font-size: 14px;
  line-height: 1;
}

.forum-page {
  padding-block: var(--cms-space-6);
}
.forum-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cms-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--cms-space-4);
}
.forum-page__header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}
.forum-page__header-actions {
  display: flex;
  gap: var(--cms-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.forum-page__search input {
  min-width: 220px;
}
.forum-page__back {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-sm);
}
.forum-page__back a {
  color: var(--cms-color-text-secondary);
}
.forum-page__description {
  margin: 0 0 var(--cms-space-4);
  color: var(--cms-color-text-secondary);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.forum-tabs {
  display: flex;
  gap: var(--cms-space-1);
  border-bottom: 1px solid var(--cms-color-border);
  margin-bottom: var(--cms-space-4);
}
.forum-tabs__tab {
  padding: var(--cms-space-2) var(--cms-space-4);
  text-decoration: none;
  color: var(--cms-color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.forum-tabs__tab:hover {
  color: var(--cms-color-text);
}
.forum-tabs__tab--active {
  color: var(--cms-color-primary);
  border-bottom-color: var(--cms-color-primary);
  font-weight: 600;
}

/* ── Categories board ─────────────────────────────────────────────────── */
.forum-board-category {
  margin-bottom: var(--cms-space-6);
}
.forum-board-category h2 {
  margin-bottom: var(--cms-space-1);
}
.forum-board-category__description {
  margin: 0 0 var(--cms-space-3);
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}
.forum-board-category__forums {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
}

.forum-board-row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-4);
  padding: var(--cms-space-3) var(--cms-space-4);
}
.forum-board-row + .forum-board-row {
  border-top: 1px solid var(--cms-color-border);
}
.forum-board-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.forum-board-row__name {
  font-weight: 600;
  text-decoration: none;
}
.forum-board-row__description {
  margin: var(--cms-space-1) 0 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}
.forum-board-row__counts {
  display: flex;
  gap: var(--cms-space-3);
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  white-space: nowrap;
}
.forum-board-row__counts small {
  color: var(--cms-color-text-secondary);
}
.forum-board-row__last {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 140px;
  font-size: var(--cms-font-size-sm);
}
.forum-board-row__last a {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-board-row__last time {
  color: var(--cms-color-text-secondary);
}
.forum-board-row__quiet {
  color: var(--cms-color-text-secondary);
}
.forum-board-row__subs {
  padding: 0 var(--cms-space-4) var(--cms-space-2) var(--cms-space-8);
  border-top: 0 !important;
}
.forum-board-row__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--cms-color-border);
}
.forum-board-row__sub-list .forum-board-row {
  padding-block: var(--cms-space-2);
}

@media (max-width: 640px) {
  .forum-board-row__last {
    display: none;
  }
}
/* ── Thread rows (Latest, forum lists, search) ────────────────────────── */
.forum-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
}
.forum-thread-list:empty {
  display: none;
}

.forum-thread-row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  padding: var(--cms-space-3) var(--cms-space-4);
}
.forum-thread-row + .forum-thread-row {
  border-top: 1px solid var(--cms-color-border);
}
.forum-thread-row__avatar {
  border-radius: 50%;
  flex-shrink: 0;
}
.forum-thread-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.forum-thread-row__title {
  font-weight: 600;
  text-decoration: none;
  display: block;
}
.forum-thread-row__meta {
  margin: var(--cms-space-1) 0 0;
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  flex-wrap: wrap;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}
.forum-thread-row__meta a {
  color: inherit;
}
.forum-thread-row__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}
.forum-thread-row__replies {
  font-weight: 600;
  color: var(--cms-color-text);
}
.forum-thread-row__replies::after {
  content: " replies";
  font-weight: 400;
  color: var(--cms-color-text-secondary);
}
.forum-thread-row__unread {
  display: inline-block;
  margin-left: var(--cms-space-2);
  padding: 0 var(--cms-space-2);
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  font-size: var(--cms-font-size-xs);
  font-weight: 600;
  vertical-align: middle;
}

.forum-thread__toolbar {
  display: flex;
  gap: var(--cms-space-2);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--cms-space-2) 0;
}

/* Badge icons in a post byline + on the profile row. */
.forum-post__badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.forum-badge-icon {
  width: 16px;
  height: 16px;
  border-radius: var(--cms-radius-sm);
  object-fit: cover;
  vertical-align: middle;
}
.forum-badge-icon--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Inline custom emoji rendered in post bodies. */
.forum-emoji {
  width: 1.4em;
  height: 1.4em;
  vertical-align: text-bottom;
  object-fit: contain;
}

.cms-forum-emoji-btn--custom img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
  display: block;
}

/* Profile badges row. */
.profile-forum-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-2);
}
.profile-forum-badges__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-1);
  padding: 2px var(--cms-space-2);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-full);
  font-size: var(--cms-font-size-sm);
}
.profile-forum-badges__badge img {
  width: 18px;
  height: 18px;
  border-radius: var(--cms-radius-sm);
}

/* ── Tag filter ───────────────────────────────────────────────────────── */
.forum-tag-filter {
  display: flex;
  gap: var(--cms-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--cms-space-3);
}
.forum-tag-filter__tag {
  padding: 2px var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-full);
  text-decoration: none;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}
.forum-tag-filter__tag--active {
  border-color: var(--cms-color-primary);
  color: var(--cms-color-primary);
  font-weight: 600;
}

/* ── Sub-forum section on a forum page ────────────────────────────────── */
.forum-subforums {
  margin-bottom: var(--cms-space-4);
}
.forum-subforums h2 {
  font-size: var(--cms-font-size-md);
  margin-bottom: var(--cms-space-2);
}

/* ── Thread page ──────────────────────────────────────────────────────── */
.forum-thread__header {
  margin-bottom: var(--cms-space-4);
}
.forum-thread__header h1 {
  margin: 0 0 var(--cms-space-2);
}

.forum-thread__tags {
  display: flex;
  gap: var(--cms-space-2);
  margin: 0;
}
.forum-thread__tags a {
  text-decoration: none;
}

.forum-thread__posts {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-3);
}

.forum-thread__locked {
  margin-top: var(--cms-space-4);
  color: var(--cms-color-text-secondary);
  text-align: center;
}

.forum-post {
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  padding: var(--cms-space-4);
}
.forum-post--opening {
  border-color: color-mix(in srgb, var(--cms-color-primary) 35%, var(--cms-color-border));
}
.forum-post {
  /* S11 D2: the author's own reply awaiting approval — a dashed edge, plus the badge and sentence in the post. */
}
.forum-post--pending {
  border-style: dashed;
}
.forum-post:target {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cms-color-primary) 25%, transparent);
}
.forum-post__header {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  margin-bottom: var(--cms-space-3);
}
.forum-post__avatar {
  border-radius: 50%;
}
.forum-post__byline {
  display: flex;
  align-items: baseline;
  gap: var(--cms-space-2);
  flex-wrap: wrap;
  font-size: var(--cms-font-size-sm);
}
.forum-post__author {
  font-weight: 600;
  text-decoration: none;
  color: var(--cms-color-text);
}
.forum-post__time {
  color: var(--cms-color-text-secondary);
  text-decoration: none;
}
.forum-post__time:hover {
  text-decoration: underline;
}
.forum-post__edited, .forum-post__history {
  color: var(--cms-color-text-secondary);
  font-style: italic;
  font-size: var(--cms-font-size-sm);
}
.forum-post__removed {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-style: italic;
}
.forum-post__body {
  overflow-wrap: break-word;
}
.forum-post__body > *:first-child {
  margin-top: 0;
}
.forum-post__body > *:last-child {
  margin-bottom: 0;
}
.forum-post__body blockquote {
  margin: var(--cms-space-2) 0;
  padding: var(--cms-space-2) var(--cms-space-3);
  border-left: 3px solid var(--cms-color-border);
  color: var(--cms-color-text-secondary);
  background: var(--cms-color-surface-container);
  border-radius: 0 var(--cms-radius-sm) var(--cms-radius-sm) 0;
}
.forum-post__body pre {
  overflow-x: auto;
  padding: var(--cms-space-3);
  background: var(--cms-color-surface-container);
  border-radius: var(--cms-radius-sm);
}
.forum-post__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--cms-radius-sm);
}
.forum-post__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Row gap 24px: when the reaction bar wraps above the actions on a phone, the
     chips' and the actions' 44px effective targets (~7px + 12px beyond their
     boxes) must not meet (S05b-19). Columns keep the compact 12px. */
  gap: var(--cms-space-6) var(--cms-space-3);
  flex-wrap: wrap;
  margin-top: var(--cms-space-3);
}
.forum-post .cms-forum-post-actions {
  display: flex;
  gap: var(--cms-space-2);
  margin-left: auto;
}
.forum-post .cms-forum-post-action {
  position: relative; /* anchors the 44px effective target below */
  background: none;
  border: none;
  padding: 2px var(--cms-space-2);
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  cursor: pointer;
  border-radius: var(--cms-radius-sm);
  /* S05b: same Track A rule as the reaction chips — the text button stays
     compact to look at, but pointer events land on a centred 44px-tall
     area. Neighbours sit 8px apart horizontally and the row is alone in
     its line, so the extension never overlaps another control. */
}
.forum-post .cms-forum-post-action::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.forum-post .cms-forum-post-action:hover {
  color: var(--cms-color-text);
  background: var(--cms-color-surface-container);
}

/* Spoilers — collapsed by default, subtle chrome. */
.forum-spoiler {
  margin: var(--cms-space-2) 0;
  border: 1px dashed var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
}
.forum-spoiler summary {
  cursor: pointer;
  padding: var(--cms-space-2) var(--cms-space-3);
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
  user-select: none;
}
.forum-spoiler__body {
  padding: 0 var(--cms-space-3) var(--cms-space-2);
}

/* ── Composer ─────────────────────────────────────────────────────────── */
.forum-composer {
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  background: var(--cms-color-surface);
  padding: var(--cms-space-4);
  margin-bottom: var(--cms-space-4);
}
.forum-composer--reply {
  margin: var(--cms-space-4) 0 0;
}
.forum-composer h2 {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-md);
}
.forum-composer__notice {
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}
.forum-composer__label {
  display: block;
  margin-bottom: var(--cms-space-1);
  font-weight: 600;
  font-size: var(--cms-font-size-sm);
}
.forum-composer__tags {
  border: none;
  margin: var(--cms-space-3) 0 0;
  padding: 0;
  display: flex;
  gap: var(--cms-space-3);
  flex-wrap: wrap;
}
.forum-composer__tags legend {
  font-weight: 600;
  font-size: var(--cms-font-size-sm);
  margin-bottom: var(--cms-space-1);
}
.forum-composer__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-space-1);
  font-size: var(--cms-font-size-sm);
}
.forum-composer__actions {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-3);
}
.forum-composer__status {
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}

.forum-editor {
  margin-top: var(--cms-space-3);
}
.forum-editor .cms-forum-toolbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border: 1px solid var(--cms-color-border);
  border-bottom: none;
  border-radius: var(--cms-radius-sm) var(--cms-radius-sm) 0 0;
  background: var(--cms-color-surface-container);
  padding: var(--cms-space-1);
}
.forum-editor .cms-forum-tool {
  /* S05b: toolbar tools sit 2px apart, so the target is the button itself. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--cms-radius-sm);
  padding: var(--cms-space-1) var(--cms-space-2);
  cursor: pointer;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text);
}
.forum-editor .cms-forum-tool:hover {
  background: var(--cms-color-surface);
}
.forum-editor__textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  width: 100%;
  resize: vertical;
}
.forum-editor__emoji {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border: 1px solid var(--cms-color-border);
  border-bottom: none;
  background: var(--cms-color-surface);
  padding: var(--cms-space-2);
  max-height: 160px;
  overflow-y: auto;
}
.forum-editor__emoji[hidden] {
  display: none;
}
.forum-editor .cms-forum-emoji-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--cms-radius-sm);
  padding: 2px;
  min-width: 28px;
  min-height: 28px;
}
.forum-editor .cms-forum-emoji-btn:hover {
  background: var(--cms-color-surface-container);
}
.forum-editor__attachments {
  list-style: none;
  margin: var(--cms-space-1) 0 0;
  padding: 0;
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}
.forum-editor__attachments:empty {
  display: none;
}
.forum-editor__hint {
  margin: var(--cms-space-1) 0 0;
  color: var(--cms-color-text-secondary);
  font-size: var(--cms-font-size-sm);
}
.forum-editor__error {
  margin: var(--cms-space-1) 0 0;
  color: var(--cms-color-danger);
  font-size: var(--cms-font-size-sm);
}
.forum-editor__error:empty {
  display: none;
}

/* ── Inline post edit + report box ────────────────────────────────────── */
.forum-post-edit {
  margin-top: var(--cms-space-2);
}
.forum-post-edit__textarea {
  width: 100%;
  resize: vertical;
}
.forum-post-edit__actions {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-2);
}

.forum-report {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  margin-top: var(--cms-space-2);
  padding: var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-container);
}
.forum-report__label {
  font-weight: 600;
  font-size: var(--cms-font-size-sm);
}
.forum-report__row {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
}
.forum-report__error {
  color: var(--cms-color-danger);
  font-size: var(--cms-font-size-sm);
}
.forum-report__done {
  margin: 0;
  color: var(--cms-color-text-secondary);
}

/* ── Composer embed picker (Poll / Gallery) ─────────────────────────────── */
.forum-embed-picker {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-2);
  padding: var(--cms-space-3);
  border: 1px solid var(--cms-color-border);
  border-bottom: none;
  background: var(--cms-color-surface);
}
.forum-embed-picker__label {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
  font-size: var(--cms-font-size-sm);
  font-weight: var(--cms-font-weight-medium);
}
.forum-embed-picker__search {
  width: 100%;
}
.forum-embed-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forum-embed-picker__item {
  display: flex;
  justify-content: space-between;
  gap: var(--cms-space-3);
  width: 100%;
  padding: var(--cms-space-2);
  border: none;
  border-radius: var(--cms-radius-sm);
  background: none;
  color: var(--cms-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.forum-embed-picker__item small {
  color: var(--cms-color-text-secondary);
  white-space: nowrap;
}
.forum-embed-picker__item:hover {
  background: var(--cms-color-surface-container);
}
.forum-embed-picker__status {
  margin: 0;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
}
.forum-embed-picker .cms-btn {
  align-self: flex-start;
}

.forum-post__pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-2);
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
}

/* ── Site search page (/search) ─────────────────────────────────────────────
   Moved out of the view's inline <style> so the drift guard covers it and the
   page paints styled on first render. */
.search-page {
  max-width: 48rem;
}

/* ── Search form ─────────────────────────────────────────────────────────── */
.search-page__form {
  display: flex;
  gap: var(--cms-space-3);
  margin-bottom: var(--cms-space-8);
}

.search-page__input-wrap {
  flex: 1;
  position: relative;
}

.search-page__input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--cms-color-text-secondary);
  pointer-events: none;
}

input.search-page__input {
  width: 100%;
  max-width: none;
  padding: var(--cms-space-3) var(--cms-space-4) var(--cms-space-3) 42px;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-lg);
  font-family: inherit;
  font-size: 1rem;
  background: var(--cms-color-surface-elevated);
  color: var(--cms-color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input.search-page__input:focus {
  border-color: var(--cms-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-color-primary) 15%, transparent);
}

input.search-page__input::placeholder {
  color: var(--cms-color-text-secondary);
}

.search-page__btn {
  padding: var(--cms-space-3) var(--cms-space-6);
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  border: none;
  border-radius: var(--cms-radius-lg);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--cms-font-weight-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.search-page__btn:hover {
  opacity: 0.9;
}

/* ── Empty / no-result states ────────────────────────────────────────────── */
.search-page__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--cms-space-12) var(--cms-space-4);
  text-align: center;
  color: var(--cms-color-text-secondary);
}

.search-page__empty-icon {
  font-size: 48px;
  color: var(--cms-color-text-secondary);
  opacity: 0.5;
  margin-bottom: var(--cms-space-4);
}

.search-page__empty-state p {
  margin: 0;
  font-size: 1rem;
}

.search-page__empty-state .search-page__empty-hint {
  font-size: 0.85rem;
  color: var(--cms-color-text-secondary);
  margin-top: var(--cms-space-2);
}

.search-page__empty-state .search-page__empty-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cms-space-4);
  margin-top: var(--cms-space-4);
  font-size: var(--cms-font-size-sm);
}

/* ── Result count ────────────────────────────────────────────────────────── */
.search-page__count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-5);
  padding-bottom: var(--cms-space-3);
  border-bottom: 1px solid var(--cms-color-border-subtle);
}

.search-page__truncated {
  flex-basis: 100%;
  color: var(--cms-color-text-secondary);
}

/* ── Results list ────────────────────────────────────────────────────────── */
.search-page__results {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-1);
}

.search-result {
  padding: var(--cms-space-5) var(--cms-space-5);
  border-radius: var(--cms-radius-lg);
  transition: background 0.12s;
}

.search-result:hover {
  background: var(--cms-color-surface-alt);
}

.search-result__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--cms-font-weight-semibold);
  line-height: 1.3;
}

.search-result__title a {
  color: var(--cms-color-link);
  text-decoration: none;
}

.search-result__title a:hover {
  text-decoration: underline;
}

.search-result__url {
  display: block;
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  margin: var(--cms-space-1) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result__meta {
  display: flex;
  gap: var(--cms-space-2);
  font-size: var(--cms-font-size-xs);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-2);
}

.search-result__type {
  font-weight: var(--cms-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--cms-radius-sm);
  background: var(--cms-color-surface-alt);
  color: var(--cms-color-text-secondary);
}

.search-result__snippet {
  margin: 0 0 var(--cms-space-2);
  line-height: 1.55;
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
}

.search-result__snippet mark,
.search-result__title mark {
  background: color-mix(in srgb, var(--cms-color-primary) 20%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: var(--cms-radius-sm);
}

.search-result__link {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-link);
  text-decoration: none;
  font-weight: var(--cms-font-weight-semibold);
}

.search-result__link:hover {
  text-decoration: underline;
}

/* ── Blog listing + article pages ───────────────────────────────────────────
   Moved out of PublicContent.cshtml's inline <style> so the drift guard covers
   it and the pages paint styled on first render. */
/* ── Listing page ──────────────────────────────────────────────────────── */
.blog-listing-page {
  max-width: var(--cms-layout-content-width);
  margin: 0 auto;
  padding: var(--cms-space-6) var(--cms-space-4);
}

/* Featured card (full width, page 1 only) */
.cms-card--featured {
  margin-bottom: var(--cms-space-6);
  overflow: hidden;
}

.blog-listing__featured-label {
  display: inline-block;
  font-size: var(--cms-font-size-xs);
  font-weight: var(--cms-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cms-color-primary);
  margin-bottom: var(--cms-space-2);
}

.cms-card--featured__title {
  margin: 0 0 var(--cms-space-3);
  font-size: 1.5rem;
  font-weight: var(--cms-font-weight-bold);
  line-height: 1.25;
}

.cms-card--featured__title a {
  color: var(--cms-color-text);
  text-decoration: none;
}

.cms-card--featured__title a:hover {
  color: var(--cms-color-primary);
}

.cms-card--featured__summary {
  margin: 0 0 var(--cms-space-3);
  line-height: 1.65;
  color: var(--cms-color-text-secondary);
}

.blog-listing__taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
  margin-bottom: var(--cms-space-2);
}

.blog-listing__date {
  display: flex;
  align-items: center;
  gap: var(--cms-space-3);
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-3);
}

.blog-listing__views {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.blog-listing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--cms-space-3);
  border-top: 1px solid var(--cms-color-border-subtle);
}

.blog-listing__read-more {
  font-size: var(--cms-font-size-sm);
  color: var(--cms-color-primary);
  text-decoration: none;
  font-weight: var(--cms-font-weight-medium);
}

.blog-listing__read-more:hover {
  text-decoration: underline;
}

.blog-listing__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--cms-space-6);
  align-items: start;
}

.blog-listing__articles {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
}

.blog-listing__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.blog-listing__card:hover {
  box-shadow: var(--cms-shadow-lg);
  transform: translateY(-2px);
}

.blog-listing__card-title {
  margin: 0 0 var(--cms-space-2);
  font-size: 1.05rem;
  font-weight: var(--cms-font-weight-semibold);
  line-height: 1.3;
}

.blog-listing__card-title a {
  color: var(--cms-color-text);
  text-decoration: none;
}

.blog-listing__card-title a:hover {
  color: var(--cms-color-primary);
}

.blog-listing__card-summary {
  margin: 0 0 var(--cms-space-3);
  font-size: var(--cms-font-size-base);
  line-height: 1.55;
  color: var(--cms-color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.blog-listing__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--cms-space-5);
  position: sticky;
  top: var(--cms-space-4);
}

.blog-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-sidebar__list li {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  padding: var(--cms-space-2) 0;
  border-bottom: 1px solid var(--cms-color-border-subtle);
}

.blog-sidebar__list li:last-child {
  border-bottom: none;
}

.blog-sidebar__list li a {
  display: flex;
  align-items: center;
  gap: var(--cms-space-2);
  color: var(--cms-color-text);
  text-decoration: none;
  font-size: var(--cms-font-size-base);
  flex: 1;
}

.blog-sidebar__list li a:hover {
  color: var(--cms-color-primary);
}

.blog-sidebar__item-icon {
  font-size: 16px;
  color: var(--cms-color-text-secondary);
  flex-shrink: 0;
}

.blog-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-2);
}

.blog-sidebar__search {
  position: relative;
  display: flex;
  align-items: center;
}

.blog-sidebar__search-icon {
  position: absolute;
  left: var(--cms-space-3);
  font-size: 18px;
  color: var(--cms-color-text-secondary);
  pointer-events: none;
}

.blog-sidebar__search-input {
  width: 100%;
  max-width: none;
  padding: var(--cms-space-2) var(--cms-space-3) var(--cms-space-2) 40px;
  border: 1px solid var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-full);
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-on-surface);
  font-family: inherit;
  font-size: var(--cms-font-size-base);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.blog-sidebar__search-input:focus {
  border-color: var(--cms-color-primary);
}

.blog-meta-icon {
  font-size: 15px;
  vertical-align: text-bottom;
  opacity: 0.7;
  line-height: 1;
}

/* ── Article page ──────────────────────────────────────────────────────── */
.blog-article-page {
  max-width: var(--cms-layout-content-width);
  margin: 0 auto;
  padding: var(--cms-space-6) var(--cms-space-4);
}

.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--cms-space-8);
  align-items: start;
}

/* Track A: public prose reads at 18px on a 68ch measure; the column is the
   measure, the canvas is the page. Headings keep the base scale. */
.blog-article-page .cms-content {
  max-width: var(--cms-measure-prose);
  margin-inline: 0;
  padding-inline: 0;
  font-size: var(--cms-font-size-lg);
  line-height: 1.6;
}

.blog-article-page .blog-article__header,
.blog-article-page .blog-article__hero,
.blog-article-page .blog-article__reactions,
.blog-article-page .cms-comments {
  max-width: var(--cms-measure-prose);
}

/* No sidebar → don't reserve its column, and keep the reading column
   centered on the page instead of hugging the left edge. */
/* minmax(0, …): a 1fr track sizes to its widest child, so a code block or table that should scroll
   inside itself widened the whole page on phones instead (S09a). */
.blog-article-layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.blog-article-layout--full .blog-article__header,
.blog-article-layout--full .blog-article__hero,
.blog-article-layout--full .cms-content,
.blog-article-layout--full .blog-article__reactions,
.blog-article-layout--full .cms-comments {
  margin-inline: auto;
}

.blog-article__sidebar {
  position: sticky;
  top: var(--cms-space-4);
}

.blog-article__header {
  margin-bottom: var(--cms-space-6);
}

.blog-article__title {
  font-size: 2rem;
  font-weight: var(--cms-font-weight-bold);
  line-height: 1.2;
  margin: 0 0 var(--cms-space-3);
  letter-spacing: -0.02em;
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cms-space-5);
  font-size: var(--cms-font-size-base);
  color: var(--cms-color-text-secondary);
  margin-bottom: var(--cms-space-4);
}

.blog-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.blog-article__taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cms-space-3);
}

.blog-article__hero {
  margin: 0 0 var(--cms-space-6);
}

.blog-article__hero img {
  width: 100%;
  height: auto;
  border-radius: var(--cms-radius-lg);
  display: block;
}

@media (max-width: 768px) {
  .blog-listing__body {
    grid-template-columns: 1fr;
  }
  .blog-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-article__title {
    font-size: 1.5rem;
  }
}
.public-content-json pre {
  background: var(--cms-color-surface-alt);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  padding: var(--cms-space-4);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reaction bar placement (P7) — component styles live in _reaction-bar.scss. */
.blog-article__reactions {
  margin-top: var(--cms-space-6);
  padding-top: var(--cms-space-4);
  border-top: 1px solid var(--cms-color-border-subtle);
}

.blog-listing__card .cms-reaction-bar,
.cms-card--featured .cms-reaction-bar {
  margin-top: var(--cms-space-3);
}

/* ── First-Time Setup (/Setup) ──────────────────────────────────────────────
   Everything is scoped under body.setup-page: the page has generic selectors
   (form-group, toggle, hr, submit button) that must not leak into the rest of
   the bundle. Tokens-only, so it tracks light/dark like the rest of the CMS. */
.setup-page {
  justify-content: center;
  align-items: center;
}
.setup-page .setup-card {
  background: var(--cms-color-surface-elevated);
  border-radius: var(--cms-radius-md);
  padding: 2rem;
  max-width: 820px;
  width: 100%;
  box-shadow: var(--cms-shadow-lg);
}
.setup-page .setup-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}
.setup-page .setup-card h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}
.setup-page .setup-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.setup-page .setup-card p.subtitle {
  margin: 0 0 0.5rem;
  color: var(--cms-color-text-secondary);
}
.setup-page .setup-card p.setup-intro {
  margin: 0;
  color: var(--cms-color-text-secondary);
  font-size: 0.875rem;
}
.setup-page .form-group {
  margin-bottom: 1rem;
}
.setup-page .form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.setup-page .form-group input[type=text], .setup-page .form-group input[type=email], .setup-page .form-group input[type=password] {
  width: 100%;
  padding: 0.5rem;
  background: var(--cms-color-surface-container-lowest);
  color: var(--cms-color-text);
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-sm);
  font-size: 0.9rem;
  box-sizing: border-box;
}
.setup-page .form-group small {
  color: var(--cms-color-text-secondary);
  font-size: 0.8rem;
}
.setup-page .error-message {
  background: color-mix(in srgb, var(--cms-color-danger) 14%, transparent);
  color: var(--cms-color-danger);
  padding: 0.75rem;
  border-radius: var(--cms-radius-sm);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.setup-page button[type=submit] {
  width: 100%;
  padding: 0.75rem;
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
  border: none;
  border-radius: var(--cms-radius-sm);
  font-size: 1rem;
  cursor: pointer;
}
.setup-page button[type=submit]:hover {
  opacity: 0.9;
}
.setup-page hr {
  border: none;
  border-top: 1px solid var(--cms-color-border);
  margin: 1.5rem 0;
}
.setup-page {
  /* Slide toggle — plain checkbox re-styled to match Material's feel. */
}
.setup-page .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
.setup-page .toggle-row__label {
  font-weight: 600;
  font-size: 0.9rem;
}
.setup-page .toggle-row__hint {
  display: block;
  color: var(--cms-color-text-secondary);
  font-size: 0.8rem;
  font-weight: normal;
  margin-top: 0.15rem;
}
.setup-page .toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.setup-page .toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.setup-page .toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--cms-color-outline-variant);
  border-radius: var(--cms-radius-full);
  transition: background 0.15s;
}
.setup-page .toggle__slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--cms-color-on-primary);
  border-radius: 50%;
  transition: transform 0.15s;
}
.setup-page .toggle input:checked + .toggle__slider {
  background: var(--cms-color-primary);
}
.setup-page .toggle input:checked + .toggle__slider::before {
  transform: translateX(18px);
}
.setup-page {
  /* Two-column body: site types (left) + site/admin fields (right). Collapses
     to a single column on narrow screens — types first, fields second, then
     the full-width action area below. */
}
.setup-page .setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 2rem;
  align-items: start;
}
.setup-page .setup-column h2 {
  margin-top: 0;
}
.setup-page .setup-column .form-group:last-child {
  margin-bottom: 0;
}
.setup-page .setup-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cms-color-border);
}
.setup-page .setup-actions button[type=submit] {
  margin-top: 1rem;
}
@media (max-width: 800px) {
  .setup-page .setup-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.setup-page {
  /* Preset selector — radio cards with descriptions. */
}
.setup-page .preset-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.setup-page .preset-option {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px solid var(--cms-color-border);
  border-radius: var(--cms-radius-md);
  cursor: pointer;
}
.setup-page .preset-option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.setup-page .preset-option:has(input:checked) {
  border-color: var(--cms-color-primary);
  background: color-mix(in srgb, var(--cms-color-primary) 8%, transparent);
}
.setup-page .preset-option input:focus-visible {
  outline: 2px solid var(--cms-color-primary);
  outline-offset: 2px;
}
.setup-page .preset-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.setup-page .preset-option__title {
  font-weight: 600;
  font-size: 0.9rem;
}
.setup-page .preset-option__desc {
  color: var(--cms-color-text-secondary);
  font-size: 0.8rem;
}
.setup-page .preset-option__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--cms-radius-md);
  background: color-mix(in srgb, var(--cms-color-primary) 16%, transparent);
  color: var(--cms-color-primary);
}
.setup-page {
  /* Breach warning dialog — shown when the entered password is found in HIBP. */
}
.setup-page .breach-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cms-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--cms-color-backdrop);
}
.setup-page .breach-modal[hidden] {
  display: none;
}
.setup-page .breach-modal__dialog {
  background: var(--cms-color-surface-elevated);
  color: var(--cms-color-text);
  border-radius: var(--cms-radius-md);
  padding: 1.5rem;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--cms-shadow-lg);
}
.setup-page .breach-modal__dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.setup-page .breach-modal__dialog p {
  margin: 0 0 0.75rem;
  color: var(--cms-color-text-secondary);
  font-size: 0.9rem;
}
.setup-page .breach-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.setup-page .breach-modal__btn {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--cms-radius-sm);
  cursor: pointer;
  background: var(--cms-color-primary);
  color: var(--cms-color-on-primary);
}
.setup-page .breach-modal__btn:hover {
  opacity: 0.9;
}
.setup-page .breach-modal__btn--secondary {
  background: transparent;
  color: var(--cms-color-text);
  border: 1px solid var(--cms-color-border);
}

/* ── Draft preview shell (/preview) ─────────────────────────────────────────
   The admin's page/form preview: a warning banner, a metadata list, and the
   rendered blocks (blocks.css). */
.preview-banner {
  background: var(--cms-color-warning);
  color: var(--cms-color-on-warning);
  padding: var(--cms-space-xs) var(--cms-space-md);
  text-align: center;
  font-weight: var(--cms-font-weight-medium);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cms-space-xs);
}

.preview-banner .material-icons {
  font-size: 1.1rem;
}

.preview-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cms-space-xs) var(--cms-space-md);
  padding: var(--cms-space-md);
  font-size: 0.9rem;
}

.preview-meta dt {
  font-weight: var(--cms-font-weight-medium);
  color: var(--cms-color-text-secondary);
}

.preview-meta dd {
  margin: 0;
}

.preview-error {
  padding: var(--cms-space-lg);
  text-align: center;
}

.preview-error .material-icons {
  font-size: 3rem;
  color: var(--cms-color-text-secondary);
}