/* ══════════════════════════════════════════════════════════════════
   Portal palette — the dark plasma surface shared by /login and the
   Home hero. Deliberately theme-independent: these two surfaces stay
   dark under every theme, matching the precedent set by the astrology
   canvas. Kept here rather than in Login.razor.css because Blazor CSS
   isolation rewrites `:root` to `:root[b-xxxxxxxxxx]`, which never
   matches <html>, and because two components now share it.
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* Portal palette — the sign-in page and the home hero.
       Named for their role, not their colour: they used to be --lp-teal and
       --lp-purple, which stopped being true the moment the portal followed the
       theme and turned gold under baroque.
       These are the fallback values only. Every theme overrides the set below,
       and because [data-theme="x"] and :root have equal specificity, those
       later blocks win. theme.js stamps data-theme onto <html> before first
       paint, so the sign-in page is themed even for a visitor who has not
       signed in and never reaches MainLayout. */
    --lp-bg:          #04040c;
    --lp-accent:      #2ae6c8;
    --lp-accent-dim:  rgba(42, 230, 200, 0.18);
    --lp-accent-glow: rgba(42, 230, 200, 0.35);
    --lp-accent2:     #8d4bff;
    --lp-accent2-dim: rgba(141, 75, 255, 0.18);
    --lp-orb-3:       rgba(0, 180, 255, 0.12);
    --lp-text:        #d5f9f1;
    --lp-muted:       #7baaa0;
    --lp-card-bg:     rgba(6, 10, 18, 0.82);
    --lp-card-border: rgba(42, 230, 200, 0.28);
}

html {
    --page-bg: #f4f6fb;
    --page-surface: #ffffff;
    --page-text: #18202a;
    --muted-text: #5c6572;
    --surface-bg: rgba(255, 255, 255, 0.88);
    --surface-border: rgba(24, 32, 42, 0.12);
    --surface-shadow: 0 12px 30px rgba(24, 32, 42, 0.08);
    --chip-bg: rgba(24, 32, 42, 0.04);
    --preview-bg: rgba(24, 32, 42, 0.025);
    --link-color: #005b9e;
    --primary-bg: #1b6ec2;
    --primary-border: #1861ac;
    --focus-ring: rgba(37, 140, 251, 0.35);
    --sidebar-bg: linear-gradient(180deg, #eef2f8 0%, #e5eaf3 100%);
    --sidebar-link: #2b3440;
    --sidebar-active-bg: rgba(27, 110, 194, 0.16);
    --sidebar-hover-bg: rgba(27, 110, 194, 0.08);
    --top-row-bg: rgba(255, 255, 255, 0.86);
    --top-row-border: rgba(24, 32, 42, 0.12);
    --top-row-text: #18202a;
    --error-bg: #fff8d6;
    --error-text: #332800;
    --error-border: rgba(51, 40, 0, 0.14);
    /* astrology plugin */
    --astro-accent: #7c3fa8;
    --astro-canvas-bg: #06060f;
    /* enochian keys plugin */
    --ek-accent: #5b3fa8;
    /* liber loagaeth plugin */
    --ll-accent: #2a6f6b;
    /* heptarchia plugin */
    --hep-accent: #9c2f52;
    --hep-sigil-ink: var(--page-text);
    /* sigillum dei aemeth plugin */
    --sda-accent: #8a5a12;
    /* personal studies plugin */
    --ps-accent: #4a6b3a;
    /* nutrition plugin */
    --nut-accent: #a34a1f;
    --ex-accent: #4d6b2f;
    /* audio lab plugin */
    --audio-accent: #2f6f9c;
    /* instrument practice plugin */
    --ip-accent: #8a6a2f;
    /* watch towers plugin */
    --wt-theme-air-accent:   #7c6200;
    --wt-theme-fire-accent:  #c02211;
    --wt-theme-water-accent: #1a4db0;
    --wt-theme-earth-accent: #1e6b2a;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #c0201a;
    --wt-pal-blue:     #1a4db0;
    --wt-pal-yellow:   #8a6f00;
    --wt-pal-green:    #17703c;
    --wt-pal-black:    #14141a;
    --wt-pal-white:    #676c76;
    --wt-tou-accent:   #6633aa;
    --wt-name-accent:  #a86b00;
    /* The theme's own signal colour, for highlight glows that should read as
       "this is selected" rather than as one of the elemental or plugin hues.
       Every theme overrides it below; light keeps this one. */
    --theme-accent: #005b9e;
    color-scheme: light;
}

/* Portal, light. Light is the default theme and has no tokens of its own in
   html{} — but the --lp-* fallbacks live on :root, and :root (0-1-0) outranks
   html (0-0-1) whatever the source order, so declaring these alongside the
   other light tokens silently lost to the fallbacks. They need a selector that
   at least ties with :root and comes after it. The :not() arm covers the tick
   before theme.js stamps the attribute.
   This is the only theme drawn on a pale ground, so the accents are darkened
   to hold contrast against it rather than glowing over it. */
:root:not([data-theme]),
[data-theme="light"] {
    /* Portal, light. The only one drawn on a pale ground, so the accents are
       darkened to hold contrast against it rather than glowing over it. */
    --lp-bg:          #e9eef7;
    --lp-accent:      #005b9e;
    --lp-accent-dim:  rgba(0, 91, 158, 0.16);
    --lp-accent-glow: rgba(0, 91, 158, 0.22);
    --lp-accent2:     #6b3fa0;
    --lp-accent2-dim: rgba(107, 63, 160, 0.16);
    --lp-orb-3:       rgba(0, 130, 200, 0.10);
    --lp-text:        #18202a;
    --lp-muted:       #5c6572;
    --lp-card-bg:     rgba(255, 255, 255, 0.88);
    --lp-card-border: rgba(0, 91, 158, 0.26);
}

[data-theme="dark"] {
    /* Portal, dark — the theme's own blue and violet. */
    --lp-bg:          #0b1017;
    --lp-accent:      #7ec8ff;
    --lp-accent-dim:  rgba(126, 200, 255, 0.18);
    --lp-accent-glow: rgba(126, 200, 255, 0.32);
    --lp-accent2:     #a880e8;
    --lp-accent2-dim: rgba(168, 128, 232, 0.18);
    --lp-orb-3:       rgba(74, 143, 220, 0.12);
    --lp-text:        #e7edf4;
    --lp-muted:       #9aa7b5;
    --lp-card-bg:     rgba(15, 20, 27, 0.84);
    --lp-card-border: rgba(126, 200, 255, 0.26);
    --page-bg: #0f141b;
    --page-surface: #151b23;
    --page-text: #e7edf4;
    --muted-text: #9aa7b5;
    --surface-bg: rgba(21, 27, 35, 0.92);
    --surface-border: rgba(154, 167, 181, 0.18);
    --surface-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    --chip-bg: rgba(255, 255, 255, 0.04);
    --preview-bg: rgba(255, 255, 255, 0.02);
    --link-color: #7ec8ff;
    --primary-bg: #4a8fdc;
    --primary-border: #3b79bd;
    --focus-ring: rgba(126, 200, 255, 0.32);
    --sidebar-bg: linear-gradient(180deg, #121821 0%, #0f1320 100%);
    --sidebar-link: #d6dde6;
    --sidebar-active-bg: rgba(126, 200, 255, 0.18);
    --sidebar-hover-bg: rgba(126, 200, 255, 0.1);
    --top-row-bg: rgba(15, 20, 27, 0.92);
    --top-row-border: rgba(154, 167, 181, 0.18);
    --top-row-text: #e7edf4;
    --error-bg: #2b2211;
    --error-text: #f4e6b2;
    --error-border: rgba(244, 230, 178, 0.16);
    /* astrology plugin */
    --astro-accent: #a880e8;
    --astro-canvas-bg: #04040e;
    /* enochian keys plugin */
    --ek-accent: #a880e8;
    /* liber loagaeth plugin */
    --ll-accent: #6fd6c4;
    /* heptarchia plugin */
    --hep-accent: #e07a95;
    --hep-sigil-ink: var(--page-text);
    /* sigillum dei aemeth plugin */
    --sda-accent: #d9a95c;
    /* personal studies plugin */
    --ps-accent: #8fbf6a;
    /* nutrition plugin */
    --nut-accent: #e0a06a;
    --ex-accent: #9fc27a;
    /* audio lab plugin */
    --audio-accent: #6fb8e8;
    /* instrument practice plugin */
    --ip-accent: #d9a94a;
    /* watch towers plugin */
    --wt-theme-air-accent:   #c9a227;
    --wt-theme-fire-accent:  #e04433;
    --wt-theme-water-accent: #4488dd;
    --wt-theme-earth-accent: #44aa55;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #e8564a;
    --wt-pal-blue:     #4a8fe0;
    --wt-pal-yellow:   #e3c619;
    --wt-pal-green:    #3fb571;
    --wt-pal-black:    #7b8494;
    --wt-pal-white:    #f2f5fa;
    --wt-tou-accent:   #9966cc;
    --wt-name-accent:  #e0b23c;
    --theme-accent: #7ec8ff;
    color-scheme: dark;
}

[data-theme="occult"] {
    /* Portal, occult — the original teal and violet the portal was designed in. */
    --lp-bg:          #04040c;
    --lp-accent:      #2ae6c8;
    --lp-accent-dim:  rgba(42, 230, 200, 0.18);
    --lp-accent-glow: rgba(42, 230, 200, 0.35);
    --lp-accent2:     #8d4bff;
    --lp-accent2-dim: rgba(141, 75, 255, 0.18);
    --lp-orb-3:       rgba(0, 180, 255, 0.12);
    --lp-text:        #d5f9f1;
    --lp-muted:       #7baaa0;
    --lp-card-bg:     rgba(6, 10, 18, 0.82);
    --lp-card-border: rgba(42, 230, 200, 0.28);
    --page-bg: #07070c;
    --page-surface: #0e1117;
    --page-text: #dbf7ee;
    --muted-text: #91a9a0;
    --surface-bg: rgba(14, 17, 23, 0.94);
    --surface-border: rgba(42, 230, 200, 0.24);
    --surface-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    --chip-bg: rgba(42, 230, 200, 0.08);
    --preview-bg: rgba(141, 75, 255, 0.08);
    --link-color: #61f0d4;
    --primary-bg: #2ae6c8;
    --primary-border: #18baa3;
    --focus-ring: rgba(42, 230, 200, 0.36);
    --sidebar-bg: linear-gradient(180deg, #07111a 0%, #12081d 100%);
    --sidebar-link: #d5fbf2;
    --sidebar-active-bg: rgba(42, 230, 200, 0.16);
    --sidebar-hover-bg: rgba(42, 230, 200, 0.08);
    --top-row-bg: rgba(7, 11, 18, 0.94);
    --top-row-border: rgba(42, 230, 200, 0.2);
    --top-row-text: #dbf7ee;
    --error-bg: #201116;
    --error-text: #f5d8e5;
    --error-border: rgba(245, 216, 229, 0.16);
    /* astrology plugin */
    --astro-accent: #2ae6c8;
    --astro-canvas-bg: #020d0a;
    /* enochian keys plugin */
    --ek-accent: #2ae6c8;
    /* liber loagaeth plugin */
    --ll-accent: #e6a02a;
    /* heptarchia plugin */
    --hep-accent: #ff5f9e;
    --hep-sigil-ink: #7ff5df;
    /* sigillum dei aemeth plugin */
    --sda-accent: #f0c14b;
    /* personal studies plugin */
    --ps-accent: #9ee62a;
    /* nutrition plugin */
    --nut-accent: #ff9a6a;
    --ex-accent: #8fe36a;
    /* audio lab plugin */
    --audio-accent: #4aa8ff;
    /* instrument practice plugin */
    --ip-accent: #ffb84a;
    /* watch towers plugin */
    --wt-theme-air-accent:   #f0e020;
    --wt-theme-fire-accent:  #ff6633;
    --wt-theme-water-accent: #44aaff;
    --wt-theme-earth-accent: #55cc66;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #ff6a5a;
    --wt-pal-blue:     #55aaff;
    --wt-pal-yellow:   #f0e020;
    --wt-pal-green:    #3fd07f;
    --wt-pal-black:    #6f7d88;
    --wt-pal-white:    #eafcf6;
    --wt-tou-accent:   #2ae6c8;
    --wt-name-accent:  #f0a830;
    --theme-accent: #2ae6c8;
    color-scheme: dark;
}

[data-theme="baroque"] {
    /* Portal, baroque — gilt on a dark ground. */
    --lp-bg:          #0a0805;
    --lp-accent:      #d4a827;
    --lp-accent-dim:  rgba(212, 168, 39, 0.18);
    --lp-accent-glow: rgba(212, 168, 39, 0.32);
    --lp-accent2:     #cc8833;
    --lp-accent2-dim: rgba(204, 136, 51, 0.18);
    --lp-orb-3:       rgba(184, 134, 11, 0.12);
    --lp-text:        #ecddb8;
    --lp-muted:       #a0834a;
    --lp-card-bg:     rgba(20, 16, 8, 0.84);
    --lp-card-border: rgba(184, 134, 11, 0.34);
    --page-bg: #0d0b06;
    --page-surface: #1c1609;
    --page-text: #ecddb8;
    --muted-text: #a0834a;
    --surface-bg: rgba(28, 22, 9, 0.96);
    --surface-border: rgba(184, 134, 11, 0.38);
    --surface-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    --chip-bg: rgba(184, 134, 11, 0.10);
    --preview-bg: rgba(184, 134, 11, 0.06);
    --link-color: #d4a827;
    --primary-bg: #b8860b;
    --primary-border: #9b6f08;
    --focus-ring: rgba(212, 168, 39, 0.42);
    --sidebar-bg: linear-gradient(180deg, #100e06 0%, #1c1609 100%);
    --sidebar-link: #e0c87a;
    --sidebar-active-bg: rgba(184, 134, 11, 0.22);
    --sidebar-hover-bg: rgba(184, 134, 11, 0.11);
    --top-row-bg: rgba(13, 11, 6, 0.96);
    --top-row-border: rgba(184, 134, 11, 0.32);
    --top-row-text: #ecddb8;
    --error-bg: #1e0c0c;
    --error-text: #f2c8a0;
    --error-border: rgba(242, 200, 160, 0.18);
    /* astrology plugin */
    --astro-accent: #c9a227;
    --astro-canvas-bg: #060400;
    /* enochian keys plugin */
    --ek-accent: #c9a227;
    /* liber loagaeth plugin */
    --ll-accent: #c07a33;
    /* heptarchia plugin */
    --hep-accent: #b8455a;
    --hep-sigil-ink: #d4a827;
    /* sigillum dei aemeth plugin */
    --sda-accent: #e0c07a;
    /* personal studies plugin */
    --ps-accent: #8fa347;
    /* nutrition plugin */
    --nut-accent: #e8a06a;
    --ex-accent: #9ec27a;
    /* audio lab plugin */
    --audio-accent: #6a93c7;
    /* instrument practice plugin */
    --ip-accent: #c79a4a;
    /* watch towers plugin */
    --wt-theme-air-accent:   #d4a827;
    --wt-theme-fire-accent:  #cc3322;
    --wt-theme-water-accent: #4466cc;
    --wt-theme-earth-accent: #558833;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #e0503c;
    --wt-pal-blue:     #6a8ce0;
    --wt-pal-yellow:   #e8c34a;
    --wt-pal-green:    #4aa86a;
    --wt-pal-black:    #8a7a5e;
    --wt-pal-white:    #f6ecd2;
    --wt-tou-accent:   #cc8833;
    --wt-name-accent:  #4fae8b;
    --theme-accent: #d4a827;
    color-scheme: dark;
}

/* Horizen — crimson sky over a violet horizon over a royal-blue floor.
   Sampled from the reference render: the rose and the blue sit on opposite
   sides of the wheel, so the violet mid-band is what keeps them from
   fighting. Surfaces stay violet; rose is reserved for accent and state,
   periwinkle carries the text and links. */
[data-theme="horizen"] {
    /* Portal, horizen — the rose and periwinkle of the theme's own gradient. */
    --lp-bg:          #12101f;
    --lp-accent:      #cb779a;
    --lp-accent-dim:  rgba(203, 119, 154, 0.18);
    --lp-accent-glow: rgba(203, 119, 154, 0.32);
    --lp-accent2:     #9bb6e8;
    --lp-accent2-dim: rgba(155, 182, 232, 0.18);
    --lp-orb-3:       rgba(75, 105, 172, 0.14);
    --lp-text:        #e8e9f7;
    --lp-muted:       #a9a6c8;
    --lp-card-bg:     rgba(34, 27, 51, 0.86);
    --lp-card-border: rgba(203, 119, 154, 0.30);
    --page-bg: #171327;
    --page-surface: #221b33;
    --page-text: #e8e9f7;
    --muted-text: #a9a6c8;
    --surface-bg: rgba(34, 27, 51, 0.94);
    --surface-border: rgba(144, 169, 210, 0.22);
    --surface-shadow: 0 20px 44px rgba(9, 6, 22, 0.55);
    --chip-bg: rgba(144, 169, 210, 0.09);
    --preview-bg: rgba(193, 91, 109, 0.08);
    --link-color: #9bb6e8;
    --primary-bg: #4b69ac;
    --primary-border: #3b5490;
    --focus-ring: rgba(155, 182, 232, 0.38);
    --sidebar-bg: linear-gradient(180deg, #3d2340 0%, #2a2145 48%, #16255c 100%);
    --sidebar-link: #d8dcf2;
    --sidebar-active-bg: rgba(193, 91, 109, 0.30);
    --sidebar-hover-bg: rgba(144, 169, 210, 0.12);
    --top-row-bg: rgba(23, 19, 39, 0.94);
    --top-row-border: rgba(144, 169, 210, 0.20);
    --top-row-text: #e8e9f7;
    --error-bg: #35141f;
    --error-text: #f6cdd6;
    --error-border: rgba(246, 205, 214, 0.18);
    /* astrology plugin */
    --astro-accent: #cb779a;
    --astro-canvas-bg: #0d0a1c;
    /* enochian keys plugin */
    --ek-accent: #cb779a;
    /* liber loagaeth plugin */
    --ll-accent: #7fc0aa;
    /* heptarchia plugin */
    --hep-accent: #dc8aa0;
    --hep-sigil-ink: #f0d8e6;
    /* sigillum dei aemeth plugin */
    --sda-accent: #d9b779;
    /* personal studies plugin */
    --ps-accent: #9dbf85;
    /* nutrition plugin */
    --nut-accent: #e79a7a;
    --ex-accent: #8fbf7a;
    /* audio lab plugin */
    --audio-accent: #7fa8d9;
    /* instrument practice plugin */
    --ip-accent: #d9b37f;
    /* watch towers plugin */
    --wt-theme-air-accent:   #d9c25a;
    --wt-theme-fire-accent:  #e05a63;
    --wt-theme-water-accent: #6b8bcb;
    --wt-theme-earth-accent: #5fb587;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #e8697f;
    --wt-pal-blue:     #7fa0de;
    --wt-pal-yellow:   #ddc451;
    --wt-pal-green:    #52bb87;
    --wt-pal-black:    #8d8ab0;
    --wt-pal-white:    #f1f0fb;
    --wt-tou-accent:   #b072b8;
    --wt-name-accent:  #e6b455;
    --theme-accent: #cb779a;
    color-scheme: dark;
}

/* Orthodox — the palette of an egg-tempera icon. Gesso ivory for the ground,
   gold leaf for the sidebar (the icon's assist and nimbus), umber for the
   outline ink, cinnabar for the chiton and lapis for the Theotokos's mantle.
   The second light theme, so every accent is darkened to hold contrast
   against a pale ground rather than glowing over it. */
[data-theme="orthodox"] {
    /* Portal, orthodox — gilt and cinnabar on gesso. */
    --lp-bg:          #f1e6cc;
    --lp-accent:      #9e2a1c;
    --lp-accent-dim:  rgba(158, 42, 28, 0.14);
    --lp-accent-glow: rgba(184, 134, 11, 0.30);
    --lp-accent2:     #1f3f8a;
    --lp-accent2-dim: rgba(31, 63, 138, 0.14);
    --lp-orb-3:       rgba(201, 158, 60, 0.18);
    --lp-text:        #2a1c12;
    --lp-muted:       #6e5a44;
    --lp-card-bg:     rgba(255, 250, 238, 0.90);
    --lp-card-border: rgba(158, 118, 32, 0.40);
    --page-bg: #f6efdf;
    --page-surface: #fffaf0;
    --page-text: #2a1c12;
    --muted-text: #6e5a44;
    --surface-bg: rgba(255, 250, 240, 0.92);
    --surface-border: rgba(158, 118, 32, 0.32);
    --surface-shadow: 0 12px 30px rgba(74, 48, 20, 0.12);
    --chip-bg: rgba(184, 134, 11, 0.10);
    --preview-bg: rgba(158, 42, 28, 0.04);
    --link-color: #1f3f8a;
    --primary-bg: #9e2a1c;
    --primary-border: #7f2016;
    --focus-ring: rgba(184, 134, 11, 0.45);
    --sidebar-bg: linear-gradient(180deg, #ecd28c 0%, #d9b45e 55%, #c99e3c 100%);
    --sidebar-link: #2a1c12;
    --sidebar-active-bg: rgba(158, 42, 28, 0.20);
    --sidebar-hover-bg: rgba(42, 28, 18, 0.08);
    --top-row-bg: rgba(255, 250, 240, 0.92);
    --top-row-border: rgba(158, 118, 32, 0.32);
    --top-row-text: #2a1c12;
    --error-bg: #fbe6d8;
    --error-text: #5a160d;
    --error-border: rgba(158, 42, 28, 0.24);
    /* astrology plugin */
    --astro-accent: #b8860b;
    --astro-canvas-bg: #0a0d1f;
    /* enochian keys plugin */
    --ek-accent: #1f3f8a;
    /* liber loagaeth plugin */
    --ll-accent: #2f5e3a;
    /* heptarchia plugin */
    --hep-accent: #9e2a1c;
    --hep-sigil-ink: #2a1c12;
    /* sigillum dei aemeth plugin */
    --sda-accent: #8a6410;
    /* personal studies plugin */
    --ps-accent: #4e6b2c;
    /* nutrition plugin */
    --nut-accent: #a3461c;
    --ex-accent: #4e6b2c;
    /* audio lab plugin */
    --audio-accent: #2b5590;
    /* instrument practice plugin */
    --ip-accent: #8a6410;
    /* watch towers plugin */
    --wt-theme-air-accent:   #8a6410;
    --wt-theme-fire-accent:  #a8261b;
    --wt-theme-water-accent: #1f3f8a;
    --wt-theme-earth-accent: #2f5e3a;
    /* Ink for the historical elemental palettes. Tuned per theme because these are
       drawn as text on the page: flat yellow is unreadable on a light background,
       true black vanishes on a dark one and true white on a light one. */
    --wt-pal-red:      #a8261b;
    --wt-pal-blue:     #1f3f8a;
    --wt-pal-yellow:   #8a6a00;
    --wt-pal-green:    #2f6b3c;
    --wt-pal-black:    #1c140e;
    --wt-pal-white:    #74685a;
    --wt-tou-accent:   #6a2a6e;
    --wt-name-accent:  #9a6a08;
    --theme-accent: #b8860b;
    color-scheme: light;
}

html, body {
    min-height: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@font-face {
    font-family: 'GDEnochian';
    src: url('fonts/GDEnochian.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
}

a, .btn-link {
    color: var(--link-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-bg);
    border-color: var(--primary-border);
}

.btn-outline-primary {
    color: var(--link-color);
    border-color: var(--surface-border);
    background-color: var(--chip-bg);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--page-surface);
    background-color: var(--link-color);
    border-color: var(--link-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--page-surface), 0 0 0 0.25rem var(--focus-ring);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

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

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

/* ══════════════════════════════════════════════════════════════════
   Navigation glyphs — each rule sets only the `--nav-icon` mask (and,
   where the plugin has one, its accent colour). Consumers supply their
   own size and colour by applying a mask rule of their own; see
   NavMenu.razor.css and Home.razor.css. Global rather than scoped
   because two components draw the same glyphs.
   ══════════════════════════════════════════════════════════════════ */

/* Home — a pillared temple with the eye of the apex */
.bi-house-door-fill-nav-menu {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath fill=%27%23fff%27 stroke=%27none%27 fill-rule=%27evenodd%27 d=%27M12 1.9 1.4 9.5h21.2L12 1.9Zm0 3.4a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z%27/%3E%3Cpath d=%27M4.6 11.2v7.4M9.5 11.2v7.4M14.5 11.2v7.4M19.4 11.2v7.4%27/%3E%3Cpath d=%27M2.6 18.8h18.8v2.3H2.6z%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Settings — a toothed cog / orrery ring */
.bi-gear-fill-nav-menu {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.6%27 stroke-width=%271.8%27 stroke-dasharray=%271.7 3.8%27 stroke-linecap=%27butt%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%277.2%27 stroke-width=%271.3%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273.4%27 stroke-width=%271.4%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.0%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Astrology — a zodiacal chart wheel with house spokes */
.bi-astrology-nav-menu {
    --nav-icon-color: var(--astro-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.0%27 stroke-width=%271.4%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%275.2%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M17.20 12.00L21.00 12.00M15.68 8.32L18.36 5.64M12.00 6.80L12.00 3.00M8.32 8.32L5.64 5.64M6.80 12.00L3.00 12.00M8.32 15.68L5.64 18.36M12.00 17.20L12.00 21.00M15.68 15.68L18.36 18.36%27 stroke-width=%271.15%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.6%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Enochian Keys — a warded key crowned with the cross-in-circle */
.bi-enochian-keys-nav-menu {
    --nav-icon-color: var(--ek-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%277.9%27 cy=%277.9%27 r=%274.3%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M7.9 4.5v6.8M4.5 7.9h6.8%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M10.95 10.95 20.4 20.4%27 stroke-width=%271.8%27/%3E%3Cpath d=%27M14.9 18.3l2.3-2.3M17.6 21l2.3-2.3%27 stroke-width=%271.6%27/%3E%3C/svg%3E");
}
/* Watch Towers — the Great Table quartered by the Black Cross */
.bi-watchtowers-nav-menu {
    --nav-icon-color: var(--wt-tou-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272.7%27 y=%272.7%27 width=%2718.6%27 height=%2718.6%27 rx=%272.2%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M12 2.7v18.6M2.7 12h18.6%27 stroke-width=%271.3%27/%3E%3Ccircle cx=%277.35%27 cy=%277.35%27 r=%271.55%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3Ccircle cx=%2716.65%27 cy=%277.35%27 r=%271.55%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3Ccircle cx=%277.35%27 cy=%2716.65%27 r=%271.55%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3Ccircle cx=%2716.65%27 cy=%2716.65%27 r=%271.55%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Liber Loagaeth — the book lying open, ruled into squares */
.bi-liber-loagaeth-nav-menu {
    --nav-icon-color: var(--ll-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5.6C9.7 4 7.1 3.3 4 3.3v13.9c3.1 0 5.7.7 8 2.3 2.3-1.6 4.9-2.3 8-2.3V3.3c-3.1 0-5.7.7-8 2.3Z%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M12 5.6v13.9%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M6.3 7.6h3.6M6.3 10.4h3.6M6.3 13.2h3.6M14.1 7.6h3.6M14.1 10.4h3.6M14.1 13.2h3.6%27 stroke-width=%270.9%27/%3E%3Cpath d=%27M8.1 6.3v8.4M15.9 6.3v8.4%27 stroke-width=%270.9%27/%3E%3C/svg%3E");
}
/* Heptarchia Mystica — the {7/3} heptagram of the seven kings of the days */
.bi-heptarchia-nav-menu {
    --nav-icon-color: var(--hep-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.6%27 stroke-width=%271.1%27/%3E%3Cpath d=%27M12 3 15.905 20.109 4.964 6.389 20.774 14.003 3.226 14.003 19.036 6.389 8.095 20.109Z%27 stroke-width=%271.25%27/%3E%3C/svg%3E");
}
/* Sigillum Dei Aemeth — the seal: heptagon and {7/2} heptagram within its rings */
.bi-sigillum-dei-nav-menu {
    --nav-icon-color: var(--sda-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2711%27 stroke-width=%271.3%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.5%27 stroke-width=%270.85%27/%3E%3Cpath d=%27M12 3.6 18.567 6.763 20.189 13.869 15.645 19.568 8.355 19.568 3.811 13.869 5.433 6.763Z%27 stroke-width=%270.85%27/%3E%3Cpath d=%27M12 6.8 17.07 13.157 9.744 16.685 7.935 8.758 16.065 8.758 14.256 16.685 6.93 13.157Z%27 stroke-width=%271.2%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.05%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Enochian Temple — a pediment on four columns, the seal's heptagram in the gable */
.bi-temple-nav-menu {
    --nav-icon-color: var(--hep-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.8 9.2 12 2.8l9.2 6.4Z%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M4 11v7.4M9.3 11v7.4M14.7 11v7.4M20 11v7.4%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M2.6 20.8h18.8M3.4 18.6h17.2%27 stroke-width=%271.3%27/%3E%3Ccircle cx=%2712%27 cy=%276.7%27 r=%271%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Personal Studies — a book of workings, ruled and ribboned */
.bi-personal-studies-nav-menu {
    --nav-icon-color: var(--ps-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6.2 3.4h11.2a1.8 1.8 0 0 1 1.8 1.8v13.6a1.8 1.8 0 0 1-1.8 1.8H6.2Z%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M6.2 3.4v17.2%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M9.2 7.6h6.6M9.2 10.6h6.6M9.2 13.6h4.4%27 stroke-width=%271%27/%3E%3Cpath d=%27M15.4 20.6v-4.2l1.4 1.1 1.4-1.1v4.2Z%27 fill=%27%23fff%27 stroke=%27none%27/%3E%3C/svg%3E");
}
/* Nutrition — the hour glassed within the plate: a fast is a stretch of time kept
   as deliberately as a meal */
.bi-nutrition-nav-menu {
    --nav-icon-color: var(--nut-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.2%27 stroke-width=%271.3%27/%3E%3Cpath d=%27M8.9 6.2h6.2M8.9 17.8h6.2%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M9.7 6.2h4.6L12 12l2.3 5.8H9.7L12 12Z%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M10.8 15.7h2.4%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
}

/* Exercise — the bar with its plates, and the arc of the lift above it: a routine
   is a weight moved through a path, in an order that was decided beforehand */
.bi-exercise-nav-menu {
    --nav-icon-color: var(--ex-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.2 9.6v4.8M5.9 7.8v8.4M18.1 7.8v8.4M20.8 9.6v4.8%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M5.9 12h12.2%27 stroke-width=%271.7%27/%3E%3Cpath d=%27M7.6 5.2a7.4 7.4 0 0 1 8.8 0%27 stroke-width=%271.1%27 opacity=%270.75%27/%3E%3C/svg%3E");
}

/* Audio Lab — a microphone on its stand, a pitch arc rising beside it: the
   demonstration ground for listening to a reader's own voice or whistle */
.bi-audio-lab-nav-menu {
    --nav-icon-color: var(--audio-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%278.6%27 y=%272.6%27 width=%276.0%27 height=%2710.8%27 rx=%273%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M5.4 11.2a6.6 6.6 0 0 0 13.2 0%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M12 17.8v3.2M9 21h6%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M17.4 6.4a4.6 4.6 0 0 1 0 6.0%27 stroke-width=%271%27 opacity=%270.7%27/%3E%3C/svg%3E");
}

/* Instrument Practice — a fretboard's strings and frets: the daily scale a reader's own
   hands are meant to run, not merely read about */
.bi-instrument-practice-nav-menu {
    --nav-icon-color: var(--ip-accent, currentColor);
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.4 4.6 20.6 8.2M3.4 10.2 20.6 13.8M3.4 15.8 20.6 19.4%27 stroke-width=%271.1%27 opacity=%270.85%27/%3E%3Cpath d=%27M6.4 2.4v19.2M11.4 2.4v19.2M16.4 2.4v19.2%27 stroke-width=%271.4%27/%3E%3C/svg%3E");
}

/* Generic fallbacks kept for plugins that reference them */
.bi-plus-square-fill-nav-menu {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27%3E%3Crect x=%273%27 y=%273%27 width=%2718%27 height=%2718%27 rx=%273%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M12 7.6v8.8M7.6 12h8.8%27 stroke-width=%271.6%27/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.7%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M3.5 6h12M6.5 12h12M9.5 18h11%27/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════
   Under-construction chrome — the placeholder a stub section wears.

   Shared rather than copied into each plugin's stylesheet: two sections
   already wear it and more will, and a placeholder is exactly the kind of
   thing that drifts out of step when duplicated. A plugin opts in by
   declaring --uc-accent on its page shell; everything else is drawn from
   the theme's own tokens, so these pages follow the theme with no code
   behind them.

   --uc-accent falls back to --link-color so a section that forgets to
   declare one is merely unremarkable rather than invisible.
   ══════════════════════════════════════════════════════════════════ */

.uc-frame {
    --uc-ink: var(--uc-accent, var(--link-color));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
    max-width: 34rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

/* ── The emblem ── */
.uc-emblem {
    width: clamp(6rem, 18vw, 9.5rem);
    height: auto;
    color: var(--uc-ink);
    overflow: visible;
    animation: uc-breathe 7s ease-in-out infinite;
}

.uc-emblem-ring,
.uc-emblem-figure {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Stroke widths are viewBox units on a 24-unit box, so they scale with the emblem.
   vector-effect above pins them to device pixels instead, which keeps the finer
   rules from disappearing at the small end of the clamp. */
.uc-emblem-ring          { stroke-width: 1.1; opacity: .45; }
.uc-emblem-ring--fine    { stroke-width: .8;  opacity: .3; }
.uc-emblem-figure        { stroke-width: 1.3; opacity: .9; }
.uc-emblem-figure--fine  { stroke-width: .8;  opacity: .45; }
.uc-emblem-node          { fill: currentColor; stroke: none; opacity: .85; }

@keyframes uc-breathe {
    0%, 100% { opacity: .72; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--uc-ink) 30%, transparent)); }
    50%      { opacity: 1;   filter: drop-shadow(0 0 9px color-mix(in srgb, var(--uc-ink) 55%, transparent)); }
}

/* ── Text ── */
.uc-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.15rem);
    font-weight: 600;
    letter-spacing: .035em;
    color: var(--uc-ink);
}

.uc-standfirst {
    margin: 0;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--page-text);
    opacity: .85;
}

.uc-note {
    margin: 0;
    max-width: 30rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--muted-text);
}

/* ── The band ── */
.uc-band {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .95rem;
    background: var(--surface-bg);
    border: 1px solid color-mix(in srgb, var(--uc-ink) 35%, transparent);
    border-radius: 999px;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--uc-ink);
}

.uc-band-mark {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    animation: uc-pulse 2.4s ease-in-out infinite;
}

@keyframes uc-pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* Motion here is decoration and carries no information, so it goes entirely for
   a visitor who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
    .uc-emblem,
    .uc-band-mark {
        animation: none;
    }
}

/* ── The refusal a signed-in reader meets at a section they lack the role for.
   It wears the same chrome as a stub because the shape of the page is the same
   — an emblem, a statement, and a note — and only the message differs. Drawn in
   the theme's error ink rather than a plugin accent: this is not a section of
   the archive with a colour of its own, it is the archive declining. */
.np-page {
    --uc-accent: var(--error-text, var(--link-color));

    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--page-bg);
    color: var(--page-text);
}