/* ============================================
   FRONT DOOR: the shared sheet of the public pages and the auth pages (Docs/LRPG_FRONT_DOOR.md)

   Direction A, "Through the tavern door". Loaded on every head tier (App.razor), after the legacy global sheets.
   - Tokens: the static palette is the FRONT DOOR block in design-system.css (--fd-*); this sheet sets only the
     per-tier size tokens (gutter, type ramp, rhythm) on .fd-root and reads var(--fd-*) / var(--color-*) everywhere.
     No hex or rgba() literal here (FrontDoorWiringTests): a translucent color is color-mix() on a token.
   - Every class is fd- prefixed: legacy global sheets still load on these pages (landing-sections.css,
     splash-animations.css, class-pages.css, guides.css) and their natural names (.section-title, .faq-item ...)
     would leak into an unprefixed one.
   - Canonical breakpoints only: 480 / 768 / 960 / 1024 / 1280. Tiers: desktop (1280 and up, fluid to 1920),
     1024 (below 1280), 768 (at most 1024, touch), phone (at most 768), small phone (at most 480).
   - Component structure lives in each Components/FrontDoor/*.razor.css; this sheet holds what pages compose
     with: type, buttons, chips, cards, prose, tables, figures, class colors and the shell rules that span two
     components (the bar over a scene hero, the sticky CTA's room at the page bottom).
   ============================================ */

/* ---------- Root and tiers ---------- */
.fd-root {
    --fd-gutter: clamp(40px, 3.5vw, 64px);
    --fd-max: 1440px;
    --fd-prose-max: 760px;
    --fd-h1: clamp(56px, 4.4vw, 72px);
    --fd-h2: clamp(32px, 2.5vw, 40px);
    --fd-h3: 19px;
    --fd-lead: 18px;
    --fd-body: 16px;
    --fd-sec: clamp(72px, 5.9vw, 96px);
    --fd-gap: 20px;
    --fd-touch: 36px;

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--fd-bg);
    color: var(--fd-text-3);
    font-family: var(--fd-font-ui);
    font-size: var(--fd-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* ---------- Font fallbacks: the swap moves nothing ----------
   The web fonts load with display=swap, so a first visit paints in a local face and swaps when Cinzel, Inter and
   EB Garamond arrive (about 300 ms later). A plain fallback is narrower or wider, so the hero headings and leads
   re-broke their lines and shifted the page (CLS up to 0.38). These faces scale a local font to the web font's
   advance widths and line metrics, measured in Chromium against the headings and paragraphs the pages show:
   Cinzel against Times New Roman, Inter against Arial, EB Garamond against Georgia. A device without the local
   font skips the face and uses the next one in the stack, as before. */
@font-face {
    font-family: 'Cinzel Fallback';
    src: local('Times New Roman'), local('TimesNewRomanPSMT');
    font-weight: 100 600;
    size-adjust: 130.2%;
    ascent-override: 75.3%;
    descent-override: 28.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Cinzel Fallback';
    src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT');
    font-weight: 700 900;
    size-adjust: 126.8%;
    ascent-override: 77.3%;
    descent-override: 29.2%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('ArialMT');
    font-weight: 100 500;
    size-adjust: 105.3%;
    ascent-override: 92.1%;
    descent-override: 22.8%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 600;
    size-adjust: 100.5%;
    ascent-override: 96.5%;
    descent-override: 23.9%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700 900;
    size-adjust: 101.4%;
    ascent-override: 95.7%;
    descent-override: 23.7%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'EB Garamond Fallback';
    src: local('Georgia');
    font-style: normal;
    size-adjust: 87.5%;
    ascent-override: 115.4%;
    descent-override: 34.3%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'EB Garamond Fallback';
    src: local('Georgia Italic'), local('Georgia-Italic');
    font-style: italic;
    size-adjust: 87.5%;
    ascent-override: 115.4%;
    descent-override: 34.3%;
    line-gap-override: 0%;
}

/* A page with the phone's sticky CTA bar (FdStickyCta, 768px and below): keyboard focus scrolls a control clear of
   the fixed bar instead of under it (WCAG 2.4.11). */
@media (max-width: 768px) {
    html:has(.fd-sticky) {
        scroll-padding-bottom: calc(var(--fd-sticky-h) + 12px);
    }
}

@media not all and (min-width: 1280px) {
    .fd-root {
        --fd-gutter: 32px;
        --fd-h1: 50px;
        --fd-h2: 30px;
        --fd-h3: 18px;
        --fd-lead: 17px;
        --fd-sec: 64px;
        --fd-gap: 18px;
    }
}

@media (max-width: 1024px) {
    .fd-root {
        --fd-gutter: 24px;
        --fd-h1: 42px;
        --fd-h2: 28px;
        --fd-sec: 56px;
        --fd-gap: 16px;
        --fd-touch: 44px;
    }
}

@media (max-width: 768px) {
    .fd-root {
        --fd-gutter: 16px;
        --fd-h1: 34px;
        --fd-h2: 24px;
        --fd-h3: 17px;
        --fd-lead: 16px;
        --fd-body: 15.5px;
        --fd-sec: 40px;
        --fd-gap: 12px;
    }
}

/* Touch screens at any width get 44px targets (the in-game rule). */
@media (pointer: coarse) {
    .fd-root {
        --fd-touch: 44px;
    }
}

/* The lean head carries no MudBlazor, whose sheet was the only global border-box reset: the front door brings its own,
   so a width: 100% field with padding (the auth forms) never overflows its card. Zero specificity (any rule wins). */
:where(.fd-root, .fd-root *),
:where(.fd-root *)::before,
:where(.fd-root *)::after {
    box-sizing: border-box;
}

/* Element defaults at zero specificity, so any class (a component's, a page's) wins over them. */
:where(.fd-root) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
    margin: 0;
}

:where(.fd-root) :where(ul, ol) {
    padding: 0;
    list-style: none;
}

/* A plain link (no class) is gold; it must beat app.css's element-level "a" (blue), which loads after this sheet. A
   classed link takes its color from its class. */
:where(.fd-root) a:not([class]) {
    color: var(--fd-gold-text);
    text-decoration: none;
}

:where(.fd-root) :where(img) {
    max-width: 100%;
}

.fd-root ::selection {
    background: color-mix(in srgb, var(--fd-gold-dark) 35%, transparent);
}

.fd-root :focus-visible {
    outline: 2px solid var(--fd-gold);
    outline-offset: 3px;
}

/* The router focuses the page's h1 on every navigation (FocusOnNavigate): a programmatic focus target, not a
   control, so it draws no ring (app.css says the same for h1:focus). */
.fd-root :is(h1, h2, h3, [tabindex="-1"]):focus-visible {
    outline: none;
}

.fd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Layout helpers ---------- */
.fd-wrap {
    box-sizing: content-box;
    max-width: var(--fd-max);
    margin: 0 auto;
    padding: 0 var(--fd-gutter);
}

.fd-wrap--prose {
    max-width: var(--fd-prose-max);
}

.fd-sec {
    padding: var(--fd-sec) 0;
}

.fd-sec--tight {
    padding: calc(var(--fd-sec) * 0.55) 0;
}

.fd-stack {
    display: flex;
    flex-direction: column;
    gap: var(--fd-gap);
    min-width: 0;
}

/* --fd-cols on the element (or the fd-grid--N modifiers) sets the desktop columns; tiers fold them. */
.fd-grid {
    display: grid;
    grid-template-columns: repeat(var(--fd-cols, 3), minmax(0, 1fr));
    gap: var(--fd-gap);
}

.fd-grid--2 { --fd-cols: 2; }
.fd-grid--3 { --fd-cols: 3; }
.fd-grid--4 { --fd-cols: 4; }
.fd-grid--5 { --fd-cols: 5; }
.fd-grid--6 { --fd-cols: 6; }

@media (max-width: 1024px) {
    .fd-grid:is(.fd-grid--4, .fd-grid--5, .fd-grid--6) { --fd-cols: 3; }
}

@media (max-width: 768px) {
    .fd-grid:is(.fd-grid--3, .fd-grid--4, .fd-grid--5, .fd-grid--6) { --fd-cols: 2; }
}

@media (max-width: 480px) {
    .fd-grid:not(.fd-grid--keep) { --fd-cols: 1; }
}

.fd-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: calc(var(--fd-gap) * 2.4);
    align-items: center;
}

@media (max-width: 1024px) {
    .fd-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--fd-gap);
    }
}

.fd-acts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .fd-acts {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Type ---------- */
.fd-h1 {
    font-family: var(--fd-font-display);
    font-weight: 800;
    font-size: var(--fd-h1);
    line-height: 1.04;
    letter-spacing: 0.01em;
    color: var(--fd-cream-2);
    text-wrap: balance;
}

.fd-h1--sm {
    font-size: calc(var(--fd-h1) * 0.72);
    line-height: 1.08;
}

.fd-h2 {
    font-family: var(--fd-font-display);
    font-weight: 800;
    font-size: var(--fd-h2);
    line-height: 1.14;
    color: var(--fd-cream-2);
    text-wrap: balance;
}

.fd-h3 {
    font-family: var(--fd-font-display);
    font-weight: 700;
    font-size: var(--fd-h3);
    line-height: 1.2;
    color: var(--fd-text);
}

.fd-eyebrow {
    font-family: var(--fd-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fd-gold-text);
}

.fd-lead {
    font-size: var(--fd-lead);
    line-height: 1.6;
    color: var(--fd-text-2);
    max-width: 62ch;
}

.fd-lead strong {
    color: var(--fd-text);
    font-weight: 700;
}

.fd-body {
    font-size: var(--fd-body);
    line-height: 1.65;
    color: var(--fd-text-3);
}

.fd-sub {
    font-size: var(--fd-body);
    line-height: 1.6;
    color: var(--fd-text-3);
}

.fd-sub a {
    color: var(--fd-gold-text);
    font-weight: 600;
}

.fd-small {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fd-text-4);
}

.fd-micro {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fd-text-4);
}

.fd-voice {
    font-family: var(--fd-font-voice);
    font-style: italic;
    color: var(--fd-cream-2);
}

/* Text in a class color: the raw color is under 4.5:1 for Barbarian, Rogue and Monk, so mix it toward white. */
.fd-cc-text {
    color: color-mix(in srgb, var(--fd-cc, var(--fd-gold)) 70%, var(--fd-text));
}

.fd-caps {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fd-num {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .fd-eyebrow {
        font-size: 11px;
        letter-spacing: 0.18em;
    }
}

/* ---------- Buttons and links ---------- */
.fd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--fd-r-btn);
    border: 1px solid transparent;
    font-family: var(--fd-font-ui);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    flex: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.fd-btn .material-icons {
    font-size: 19px;
}

/* Shipped labels are upper case (D4): the caps letter spacing reads them as labels, not shouting. */
.fd-btn--caps {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.fd-btn--gold {
    background: var(--fd-gold-grad);
    color: var(--fd-on-gold);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--fd-gold) 20%, transparent);
}

.fd-btn--gold:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--fd-gold) 34%, transparent);
}

.fd-root a.fd-btn--gold {
    color: var(--fd-on-gold);
}

.fd-btn--ghost {
    background: color-mix(in srgb, var(--fd-gold) 6%, transparent);
    border-color: color-mix(in srgb, var(--fd-gold) 45%, transparent);
    color: var(--fd-gold);
}

.fd-root a.fd-btn--ghost {
    color: var(--fd-gold);
}

.fd-btn--quiet {
    background: var(--fd-surface-strong);
    border-color: var(--fd-line-strong);
    color: var(--fd-text-2);
}

.fd-root a.fd-btn--quiet {
    color: var(--fd-text-2);
}

.fd-btn--quiet:hover {
    border-color: color-mix(in srgb, var(--fd-gold) 45%, transparent);
}

.fd-btn--sm {
    min-height: var(--fd-touch);
    padding: 0 12px;
    font-size: 13px;
    border-radius: 8px;
}

.fd-btn--tall {
    min-height: 52px;
}

.fd-btn--block {
    display: flex;
    width: 100%;
}

.fd-btn[disabled],
.fd-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.fd-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--fd-touch);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.07em;
    color: var(--fd-gold-text);
    text-decoration: none;
    white-space: nowrap;
}

.fd-link .material-icons {
    font-size: 17px;
    transition: transform 0.15s ease-out;
}

.fd-link:hover .material-icons,
a:hover .fd-link .material-icons {
    transform: translateX(2px);
}

/* A plain link inside running text. */
.fd-inline-link {
    color: var(--fd-gold-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--fd-gold-text) 45%, transparent);
    text-underline-offset: 3px;
}

/* ---------- Chips, pills, marks ---------- */
.fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--fd-line-strong);
    background: color-mix(in srgb, var(--fd-bg) 60%, transparent);
    color: var(--fd-text-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex: none;
}

.fd-chip .material-icons {
    font-size: 16px;
    color: var(--fd-gold-text);
}

.fd-chip--gold {
    border-color: var(--fd-line-gold-strong);
    background: color-mix(in srgb, var(--fd-warn-deep) 38%, transparent);
    color: var(--fd-gold-soft);
}

.fd-chip--good {
    border-color: color-mix(in srgb, var(--fd-good) 50%, transparent);
    background: color-mix(in srgb, var(--fd-good-deep) 50%, transparent);
    color: var(--fd-good-ink);
}

.fd-chip--good .material-icons {
    color: var(--fd-good);
}

.fd-chip--cc {
    border-color: color-mix(in srgb, var(--fd-cc) 60%, transparent);
    background: color-mix(in srgb, var(--fd-cc) 14%, var(--fd-art-well));
    color: color-mix(in srgb, var(--fd-cc) 70%, var(--fd-text));
}

/* The Premium lock: shown only where the product locks (Monk, Barbarian, Pirate; Premium content). */
.fd-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--fd-on-gold);
    background: linear-gradient(180deg, var(--fd-gold-pale), var(--fd-gold-dark));
    white-space: nowrap;
    flex: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--fd-shadow-ink) 40%, transparent);
}

.fd-lock .material-icons {
    font-size: 13px;
}

/* A free class: the green twin of the lock. */
.fd-free {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--fd-good-ink);
    background: color-mix(in srgb, var(--fd-good-deep) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--fd-good) 55%, transparent);
    white-space: nowrap;
}

.fd-free .material-icons {
    font-size: 14px;
}

.fd-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--fd-gold) 45%, transparent);
    background: color-mix(in srgb, var(--fd-warn-deep) 32%, transparent);
    color: var(--fd-gold-soft);
    white-space: nowrap;
    flex: none;
}

.fd-type .material-icons {
    font-size: 14px;
}

/* Difficulty dots: render them aria-hidden next to the word they illustrate. */
.fd-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    flex: none;
}

.fd-dots > i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fd-text-4) 30%, transparent);
}

.fd-dots > i.is-on {
    background: var(--fd-gold-text);
}

/* The separator dot (never a middot glyph); render it aria-hidden, with a space on each side in the markup so the
   text reads "a b" to a crawler and a screen reader. */
.fd-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    vertical-align: middle;
}

/* ---------- Hexes ---------- */
.fd-hex {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* A gold hex holding an icon or a number (steps, feature icons, level tags). */
.fd-hexbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    flex: none;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--fd-gold-grad);
    color: var(--fd-on-gold);
    font-family: var(--fd-font-display);
    font-weight: 900;
    font-size: 15px;
}

.fd-hexbadge .material-icons {
    font-size: 22px;
}

.fd-hexbadge--sm {
    width: 34px;
    height: 38px;
    font-size: 13px;
}

.fd-hexbadge--sm .material-icons {
    font-size: 18px;
}

.fd-hexbadge--quiet {
    background: var(--fd-slate);
    color: var(--fd-gold-text);
}

/* ---------- Surfaces ---------- */
.fd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--fd-r-card);
    background: var(--fd-card);
    border: 1px solid var(--fd-line);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

a.fd-card:hover {
    border-color: var(--fd-line-gold-strong);
}

.fd-card--lead {
    border-color: var(--fd-line-gold-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--fd-gold) 8%, transparent), var(--fd-card-bottom) 55%);
}

.fd-card--dashed {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--fd-gold) 35%, transparent);
}

.fd-glass {
    background: var(--fd-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--fd-line-gold);
    border-radius: var(--fd-r-glass);
    box-shadow: var(--fd-shadow);
}

/* The game's numbers as stat tiles (a glass plate over a hero, or a band). */
.fd-plate {
    display: grid;
    grid-template-columns: repeat(var(--fd-cols, 6), minmax(0, 1fr));
    gap: 0;
    padding: 6px;
}

.fd-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 16px;
    min-width: 0;
}

.fd-plate > .fd-stat + .fd-stat {
    box-shadow: inset 1px 0 0 var(--fd-line);
}

.fd-stat > b {
    font-family: var(--fd-font-display);
    font-weight: 900;
    font-size: 30px;
    line-height: 1.05;
    color: var(--fd-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-stat > span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fd-text-4);
}

.fd-stat--gold > b {
    color: var(--fd-gold-soft);
}

@media (max-width: 768px) {
    .fd-plate {
        --fd-cols: 3;
    }

    .fd-plate > .fd-stat:nth-child(3n + 1) {
        box-shadow: none;
    }

    .fd-plate > .fd-stat:nth-child(n + 4) {
        border-top: 1px solid var(--fd-line);
    }

    .fd-stat {
        padding: 10px;
    }

    .fd-stat > b {
        font-size: 24px;
    }

    .fd-stat > span {
        font-size: 9.5px;
        letter-spacing: 0.1em;
    }
}

/* Gold note: information the reader should act on (the access note, an Alpha notice). */
.fd-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--fd-r-card);
    border: 1px solid color-mix(in srgb, var(--fd-gold) 40%, transparent);
    background: color-mix(in srgb, var(--fd-warn-deep) 22%, transparent);
    color: var(--fd-warn-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

.fd-note > .material-icons {
    font-size: 22px;
    color: var(--fd-gold);
}

.fd-note a {
    color: var(--fd-gold);
    font-weight: 700;
}

/* "In short": the direct answer as a panel (blog, legal, guides). */
.fd-tldr {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--fd-r-card);
    background: linear-gradient(180deg, color-mix(in srgb, var(--fd-gold) 8%, transparent), color-mix(in srgb, var(--fd-gold) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--fd-gold) 35%, transparent);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fd-text-2);
}

.fd-tldr > .material-icons {
    font-size: 22px;
    color: var(--fd-gold);
}

.fd-tldr strong {
    color: var(--fd-gold-soft);
}

.fd-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--fd-line-strong);
    background: var(--fd-surface);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fd-text-3);
}

.fd-callout > .material-icons {
    font-size: 20px;
    color: var(--fd-gold-text);
}

.fd-callout--tip {
    border-color: color-mix(in srgb, var(--fd-info) 45%, transparent);
    background: color-mix(in srgb, var(--fd-info-deep) 22%, transparent);
}

.fd-callout--tip > .material-icons {
    color: var(--fd-info);
}

.fd-callout--warn {
    border-color: color-mix(in srgb, var(--fd-warn) 45%, transparent);
    background: color-mix(in srgb, var(--fd-warn-deep) 28%, transparent);
}

.fd-callout--warn > .material-icons {
    color: var(--fd-warn);
}

/* ---------- Prose (guides, blog, legal: Inter; chronicles: --voice) ---------- */
.fd-prose {
    max-width: var(--fd-prose-max);
    font-size: calc(var(--fd-body) + 1px);
    line-height: 1.7;
    color: var(--fd-text-3);
    min-width: 0;
}

.fd-prose > * + * {
    margin-top: 1em;
}

.fd-prose h2 {
    margin-top: 1.8em;
    font-family: var(--fd-font-display);
    font-weight: 800;
    font-size: calc(var(--fd-h2) * 0.82);
    line-height: 1.2;
    color: var(--fd-cream-2);
    scroll-margin-top: calc(var(--fd-bar-h) + 16px);
}

.fd-prose h3 {
    margin-top: 1.5em;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fd-text);
    scroll-margin-top: calc(var(--fd-bar-h) + 16px);
}

.fd-prose > :is(h2, h3):first-child {
    margin-top: 0;
}

.fd-prose strong {
    color: var(--fd-text);
    font-weight: 700;
}

.fd-prose a {
    color: var(--fd-gold-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--fd-gold-text) 45%, transparent);
    text-underline-offset: 3px;
}

.fd-prose :is(ul, ol) {
    padding-left: 1.3em;
    list-style: disc;
}

.fd-prose ol {
    list-style: decimal;
}

.fd-prose li::marker {
    color: var(--fd-gold-dark);
}

.fd-prose li + li {
    margin-top: 0.45em;
}

.fd-prose blockquote {
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--fd-gold-dark);
    font-family: var(--fd-font-voice);
    font-style: italic;
    font-size: 1.18em;
    line-height: 1.5;
    color: var(--fd-cream-2);
}

.fd-prose code {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 0.86em;
    color: var(--fd-gold-soft);
    background: color-mix(in srgb, var(--fd-gold) 8%, transparent);
    padding: 1px 6px;
    border-radius: 5px;
}

.fd-prose--voice {
    font-family: var(--fd-font-voice);
    font-size: calc(var(--fd-body) + 4px);
    line-height: 1.6;
    color: var(--fd-cream-2);
}

/* Any element a TOC or a #link points at clears the bar. */
.fd-root [id] {
    scroll-margin-top: calc(var(--fd-bar-h) + 16px);
}

/* ---------- Data: facts (key-value), tables, formula tiles ---------- */
.fd-facts {
    border-radius: var(--fd-r-card);
    background: var(--fd-surface);
    border: 1px solid var(--fd-line);
    overflow: hidden;
    min-width: 0;
}

.fd-facts__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--fd-line);
    font-family: var(--fd-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fd-gold);
}

.fd-facts__head .material-icons {
    font-size: 18px;
}

.fd-facts table {
    width: 100%;
    border-collapse: collapse;
}

.fd-facts th {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    color: var(--fd-text-3);
    padding: 11px 16px;
    vertical-align: top;
}

.fd-facts td {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--fd-text-2);
    padding: 11px 16px;
    vertical-align: top;
}

.fd-facts td.fd-num {
    text-align: right;
    font-weight: 700;
    color: var(--fd-gold-soft);
}

.fd-facts tr + tr > * {
    border-top: 1px solid color-mix(in srgb, var(--fd-text-4) 10%, transparent);
}

.fd-table-wrap {
    border-radius: var(--fd-r-card);
    border: 1px solid var(--fd-line);
    overflow-x: auto;
    background: color-mix(in srgb, var(--fd-panel) 70%, transparent);
    min-width: 0;
}

.fd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fd-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fd-text-4);
    background: var(--fd-surface-strong);
    border-bottom: 1px solid var(--fd-line);
}

.fd-table td,
.fd-table tbody th {
    padding: 11px 14px;
    color: var(--fd-text-3);
    border-top: 1px solid color-mix(in srgb, var(--fd-text-4) 10%, transparent);
    vertical-align: top;
    text-align: left;
}

.fd-table tbody tr:first-child > * {
    border-top: none;
}

.fd-table tbody tr:nth-child(even) > * {
    background: color-mix(in srgb, var(--fd-text-4) 3.5%, transparent);
}

.fd-table :is(td, th).fd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fd-formula {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--fd-surface);
    border: 1px solid var(--fd-line);
    min-width: 0;
}

.fd-formula > b {
    font-family: var(--fd-font-display);
    font-weight: 900;
    font-size: 26px;
    line-height: 1.1;
    color: var(--fd-text);
}

/* ---------- Class colors: set --fd-cc once, rings / tops / glows read it ---------- */
.fd-cc-warrior { --fd-cc: var(--color-warrior); }
.fd-cc-wizard { --fd-cc: var(--color-wizard); }
.fd-cc-ranger { --fd-cc: var(--color-ranger); }
.fd-cc-rogue { --fd-cc: var(--color-rogue); }
.fd-cc-paladin { --fd-cc: var(--color-paladin); }
.fd-cc-bard { --fd-cc: var(--color-bard); }
.fd-cc-cleric { --fd-cc: var(--color-cleric); }
.fd-cc-monk { --fd-cc: var(--color-monk); }
.fd-cc-barbarian { --fd-cc: var(--color-barbarian); }
.fd-cc-pirate { --fd-cc: var(--color-pirate); }

/* ---------- Shell rules that span two components ---------- */

/* The bar over a scene hero (FdSceneHero UnderBar="true"): it lies on the scene instead of above it. */
.fd-root:has(.fd-scene--under-bar) .fd-bar {
    position: absolute;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--fd-bg) 88%, transparent), color-mix(in srgb, var(--fd-bg) 35%, transparent) 70%, transparent);
    border-bottom-color: transparent;
}

/* Room for the phone's sticky CTA bar under the footer, so the last links are never under it. */
@media (max-width: 768px) {
    .fd-root:has(.fd-sticky) .fd-foot {
        padding-bottom: calc(var(--fd-sticky-h) + 28px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Reduced motion: the end state at once ---------- */
@media (prefers-reduced-motion: reduce) {
    .fd-btn,
    .fd-link .material-icons {
        transition: none;
    }

    .fd-link:hover .material-icons,
    a:hover .fd-link .material-icons {
        transform: none;
    }
}