/*
 * Filament Docs. Every class is fd-* and every token is --fd-*, scoped to .fd, so the
 * sheet can load inside any panel (help slide-over, What's New) without leaking.
 * Override the tokens on .fd in the host theme to rebrand.
 */
.fd {
    --fd-p50: #e1f0f7; --fd-p100: #c8e1f0; --fd-p200: #a0c8e1; --fd-p300: #78afd2; --fd-p400: #5596be;
    --fd-p500: #3282aa; --fd-p600: #23698c; --fd-p700: #19506e; --fd-p800: #0f3246;
    --fd-paper: #f6f9fb; --fd-card: #fff; --fd-line: #dde7ee; --fd-muted: #5f6f84; --fd-ink: #0b1f2e; --fd-body: #334155;
    --fd-link: #2574ab; --fd-em: #3a8ccb; --fd-neutral: #eef2f6; --fd-raised: var(--fd-paper);
    --fd-skel-base: var(--fd-neutral); --fd-skel-shine: var(--fd-line);
    --fd-good-soft: #e7f5f0; --fd-good-ink: #0b6b52; --fd-good-line: #cfe9df;
    --fd-warn-soft: #fdf6e7; --fd-warn-ink: #8a5a12; --fd-warn-line: #f3c26b;
    --fd-bad-soft: #fef2f2; --fd-bad-ink: #b91c1c; --fd-bad-line: #fecaca;
    --fd-new: #6d4fc2; --fd-new-soft: #f1edfb;
    --fd-mark: #fff3c4; --fd-mark-ink: inherit;
    --fd-scrim: #0b1f2e59;
    --fd-shadow: 0 1px 2px #0b1f2e0a, 0 12px 28px -18px #0b1f2e33;
    --fd-pop: 0 24px 60px -20px #0b1f2e66;
    --fd-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--fd-ink);
    font-family: var(--fd-font);
    -webkit-font-smoothing: antialiased;
}

/*
 * Dark mode sits on the host panel's slate scale (Filament's --gray-* and --primary-* variables) so
 * the layers stay distinct: canvas gray-950, cards gray-900, hover and raised surfaces gray-800,
 * lines at 10% white. Muted text never drops below gray-400 (about 6.8:1 on a gray-900 card).
 * Brand navy is not a dark surface. The hex fallbacks are Tailwind slate/sky for hosts without them.
 */
.dark .fd, .fd.fd-dark {
    --fd-p50: color-mix(in oklab, var(--primary-400, #6aaddc) 14%, transparent);
    --fd-p100: color-mix(in oklab, var(--primary-400, #6aaddc) 32%, transparent);
    --fd-p200: color-mix(in oklab, var(--primary-300, #8fc1e5) 55%, transparent);
    --fd-p300: var(--primary-300, #8fc1e5); --fd-p400: var(--primary-400, #6aaddc);
    --fd-p500: var(--primary-300, #8fc1e5); --fd-p600: var(--primary-400, #6aaddc);
    --fd-p700: var(--primary-200, #b5d6ee); --fd-p800: var(--primary-800, #153e5b);
    --fd-paper: var(--gray-950, #020617); --fd-card: var(--gray-900, #0f172a); --fd-raised: var(--gray-800, #1e293b);
    --fd-line: #ffffff1a; --fd-muted: var(--gray-400, #94a3b8); --fd-ink: var(--gray-100, #f1f5f9); --fd-body: var(--gray-300, #cbd5e1);
    --fd-link: var(--primary-300, #8fc1e5); --fd-em: var(--primary-400, #6aaddc); --fd-neutral: #ffffff14;
    --fd-skel-base: var(--gray-800, #1e293b); --fd-skel-shine: var(--gray-700, #334155);
    --fd-good-soft: #0e8c6b2e; --fd-good-ink: #6ee7b7; --fd-good-line: #0e8c6b73;
    --fd-warn-soft: #b7791f2e; --fd-warn-ink: #f3c26b; --fd-warn-line: #f3c26b4d;
    --fd-bad-soft: #dc26262e; --fd-bad-ink: #fca5a5; --fd-bad-line: #dc262673;
    --fd-new: #c4b5fd; --fd-new-soft: #8b5cf633;
    --fd-mark: #f3c26b38; --fd-mark-ink: #fde68a;
    --fd-scrim: #020617b3;
    --fd-shadow: 0 1px 2px #0006, 0 12px 28px -18px #000a;
    --fd-pop: 0 24px 60px -20px #000c;
    color-scheme: dark;
}

.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }
.fd a { color: inherit; }
.fd button { font: inherit; color: inherit; }
.fd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fd :focus-visible { outline: 2px solid var(--fd-p500); outline-offset: 2px; border-radius: 6px; }

/* ── Shell ─────────────────────────────────────────────── */
body.fd-body { margin: 0; background: var(--fd-paper); }
.fd-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--fd-paper); font-size: 14px; line-height: 1.5; }
.fd-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 12px 28px; background: var(--fd-card); border-bottom: 1px solid var(--fd-line); }
.fd-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .14em; font-size: 15px; color: var(--fd-p800); text-decoration: none; white-space: nowrap; }
.dark .fd-logo { color: var(--fd-ink); }
.fd-logo img { height: var(--fd-logo-height, 2.5rem); width: auto; display: block; }
.fd-logo .fd-logo-dark, .dark .fd-logo .fd-logo-light { display: none; }
.dark .fd-logo .fd-logo-dark { display: block; }
.fd-logo span { font-weight: 500; letter-spacing: .1em; color: var(--fd-p500); font-size: 12px; }
.fd-searchbox { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--fd-line); border-radius: 12px; padding: 9px 12px; background: var(--fd-paper); color: var(--fd-muted); font-size: 14px; cursor: text; text-align: left; }
.fd-searchbox:hover { border-color: var(--fd-p200); }
.fd-searchbox.fd-big { max-width: none; padding: 16px 18px; font-size: 17px; background: var(--fd-card); box-shadow: var(--fd-shadow); border-radius: 16px; }
.fd-searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--fd-ink); outline: none; padding: 0; box-shadow: none; }
.fd-searchbox input::placeholder { color: var(--fd-muted); }
.fd-searchbox .fd-grow { flex: 1; }
.fd-kbd { font-size: 11px; font-weight: 600; border: 1px solid var(--fd-line); border-radius: 6px; padding: 1px 6px; color: var(--fd-muted); background: var(--fd-card); font-family: var(--fd-font); white-space: nowrap; }
.fd-barlinks { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 13.5px; }
.fd-barlinks > a:not(.fd-btn) { color: var(--fd-body); text-decoration: none; white-space: nowrap; }
.fd-barlinks > a:not(.fd-btn):hover { color: var(--fd-link); }
.fd-barlinks > a.fd-on { color: var(--fd-p700); font-weight: 600; }
.fd-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--fd-new); color: #fff; font-size: 11px; font-weight: 700; margin-left: 4px; line-height: 1; }
.dark .fd-dot { color: var(--gray-950, #020617); }
.fd-btn.fd-iconbtn { display: none; }

.fd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fd-link); }
.fd-h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; margin: 10px 0 0; color: var(--fd-ink); }
.fd-lede { font-size: 16px; color: var(--fd-muted); margin: 10px 0 0; max-width: 720px; }
.fd-card { background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 16px; box-shadow: var(--fd-shadow); }
.fd-cap { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fd-muted); margin: 0 0 10px; }
.fd-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; white-space: nowrap; line-height: 1.5; }
.fd-t-new { background: var(--fd-new-soft); color: var(--fd-new); }
.fd-t-improved { background: var(--fd-p50); color: var(--fd-p700); }
.fd-t-fixed { background: var(--fd-good-soft); color: var(--fd-good-ink); }
.fd-t-other { background: var(--fd-neutral); color: var(--fd-body); }
.fd-area { display: inline-block; font-size: 12px; font-weight: 600; color: var(--fd-body); background: var(--fd-neutral); padding: 2px 8px; border-radius: 99px; text-decoration: none; }
a.fd-area:hover { background: var(--fd-p50); color: var(--fd-p700); }
.fd-link { color: var(--fd-link); text-decoration: none; }
.fd-link:hover { text-decoration: underline; }
.fd-muted { color: var(--fd-muted); }
.fd-btn { appearance: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; white-space: nowrap; line-height: 1.3; }
/* .fd scoping outranks `.fd a { color: inherit }`, which turned link buttons' white text dark. */
.fd .fd-btn-primary { background: var(--fd-p600); color: #fff; }
.fd-btn-primary:hover { background: var(--fd-p700); }
.dark .fd .fd-btn-primary { color: var(--gray-950, #020617); background: var(--fd-p400); }
.fd-btn-ghost { background: var(--fd-card); border-color: var(--fd-line); color: var(--fd-ink); }
.fd-btn-ghost:hover { border-color: var(--fd-p200); background: var(--fd-raised); }
.fd-btn-sm { padding: 5px 10px; font-size: 12.5px; }
.fd-note { display: flex; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--fd-p100); background: var(--fd-p50); color: var(--fd-p700); font-size: 13.5px; }
.fd-note a { color: var(--fd-link); }
.fd-note.fd-plain { background: var(--fd-paper); border-color: var(--fd-line); color: var(--fd-muted); }

/* ── Home ──────────────────────────────────────────────── */
.fd-home { padding: 48px 120px 56px; width: 100%; max-width: 1440px; margin: 0 auto; }
.fd-popular { display: flex; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--fd-muted); align-items: center; flex-wrap: wrap; }
.fd-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; margin-top: 40px; }
.fd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-group { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fd-ink); transition: border-color .15s, transform .15s; }
.fd-group:hover { border-color: var(--fd-p200); transform: translateY(-1px); }
.fd-group b { font-size: 15.5px; }
.fd-group small { color: var(--fd-muted); font-size: 13px; line-height: 1.4; }
.fd-group .fd-ct { font-size: 12px; color: var(--fd-p700); font-weight: 600; margin-top: auto; }
.fd-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--fd-p50); color: var(--fd-p600); display: grid; place-items: center; }
.fd-ico svg { width: 18px; height: 18px; }
.dark .fd-ico { color: var(--fd-p300); }
.fd-feed a { display: block; padding: 12px 18px; text-decoration: none; color: var(--fd-ink); border-bottom: 1px solid var(--fd-line); }
.fd-feed a:last-child { border-bottom: 0; }
.fd-feed a:hover { background: var(--fd-raised); }
.fd-feed .fd-row { display: flex; gap: 8px; align-items: center; }
.fd-feed b { display: block; margin-top: 6px; font-size: 14.5px; }
.fd-feed small { font-size: 12px; color: var(--fd-muted); }
.fd-feed .fd-sub { font-size: 13px; color: var(--fd-muted); }

/* ── Article layout ───────────────────────────────────── */
.fd-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 240px; flex: 1; width: 100%; }
.fd-nav { border-right: 1px solid var(--fd-line); background: var(--fd-card); padding: 18px 14px; font-size: 13.5px; position: sticky; top: var(--fd-header-h, 59px); height: calc(100vh - var(--fd-header-h, 59px)); overflow-y: auto; }
.fd-nav .fd-g { width: 100%; background: none; border: 0; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fd-muted); padding: 14px 10px 6px; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.fd-nav .fd-g:hover { color: var(--fd-ink); }
.fd-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--fd-body); text-decoration: none; }
.fd-nav a:hover { background: var(--fd-raised); }
.fd-nav a.fd-on { background: var(--fd-p50); color: var(--fd-p700); font-weight: 600; }
.fd-nav a.fd-sub { padding-left: 24px; font-size: 13px; }
.fd-nav a.fd-sub2 { padding-left: 38px; font-size: 13px; }
.fd-navfilter { display: flex; gap: 8px; align-items: center; border: 1px solid var(--fd-line); border-radius: 10px; padding: 7px 10px; color: var(--fd-muted); font-size: 13px; margin-bottom: 6px; background: var(--fd-card); }
.fd-navfilter input { border: 0; outline: none; font: inherit; flex: 1; min-width: 0; background: transparent; color: var(--fd-ink); padding: 0; box-shadow: none; }
.fd-article { padding: 30px 56px 48px; min-width: 0; width: 100%; max-width: 852px; margin-inline: auto; }
.fd-crumbs { font-size: 13px; color: var(--fd-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.fd-crumbs a { color: var(--fd-link); text-decoration: none; }
.fd-meta { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--fd-muted); flex-wrap: wrap; }
.fd-meta .fd-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fd-toc { padding: 30px 22px; font-size: 13px; border-left: 1px solid var(--fd-line); position: sticky; top: var(--fd-header-h, 59px); height: calc(100vh - var(--fd-header-h, 59px)); overflow-y: auto; }
.fd-toc a { display: block; padding: 5px 0 5px 12px; color: var(--fd-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; }
.fd-toc a:hover { color: var(--fd-ink); }
.fd-toc a.fd-on { color: var(--fd-p700); border-left-color: var(--fd-p500); font-weight: 600; }
.fd-toc a.fd-sub { padding-left: 24px; }
.fd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; max-width: 740px; }
.fd-pn a { padding: 14px 16px; text-decoration: none; color: var(--fd-ink); }
.fd-pn a:hover { border-color: var(--fd-p200); }
.fd-pn small { display: block; color: var(--fd-muted); font-size: 12px; }
.fd-pn b { font-size: 15px; }
.fd-changes { max-width: 740px; margin-top: 28px; padding: 14px 18px; }
.fd-changes .fd-crow { display: grid; grid-template-columns: 110px 84px 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--fd-line); font-size: 13.5px; }
.fd-changes .fd-crow:first-of-type { border-top: 0; }
.fd-changes .fd-crow a { color: var(--fd-ink); text-decoration: none; }
.fd-changes .fd-crow a:hover { color: var(--fd-link); }
.fd-updated { background: var(--fd-new-soft); color: var(--fd-new); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; flex: none; }

/* ── Prose ────────────────────────────────────────────── */
.fd-prose { max-width: 740px; font-size: 16px; line-height: 1.7; color: var(--fd-body); overflow-wrap: anywhere; }
.fd-prose > :first-child { margin-top: 0; }
/* Pages that open with their own H1 repeat the article title shown above them. */
.fd-article > .fd-prose > h1:first-child { display: none; }
.fd-prose h1 { font-size: 30px; letter-spacing: -.02em; color: var(--fd-ink); margin: 34px 0 8px; font-weight: 600; line-height: 1.2; }
.fd-prose h2 { font-size: 24px; letter-spacing: -.02em; color: var(--fd-ink); margin: 34px 0 8px; font-weight: 600; line-height: 1.25; }
.fd-prose h3 { font-size: 18px; color: var(--fd-ink); margin: 24px 0 6px; font-weight: 600; line-height: 1.3; }
.fd-prose h4 { font-size: 16px; color: var(--fd-ink); margin: 20px 0 4px; font-weight: 600; }
.fd-prose h1, .fd-prose h2, .fd-prose h3, .fd-prose h4 { position: relative; }
.fd-prose .fd-anchor { margin-left: 8px; color: var(--fd-p400); text-decoration: none; opacity: 0; font-weight: 500; transition: opacity .15s; }
.fd-prose h1:hover .fd-anchor, .fd-prose h2:hover .fd-anchor, .fd-prose h3:hover .fd-anchor, .fd-prose h4:hover .fd-anchor, .fd-prose .fd-anchor:focus { opacity: 1; }
.fd-prose p { margin: 10px 0; }
.fd-prose ul, .fd-prose ol { margin: 8px 0; padding-left: 22px; }
.fd-prose ul { list-style: disc; }
.fd-prose ol { list-style: decimal; }
.fd-prose li { margin: 4px 0; }
.fd-prose li > ul, .fd-prose li > ol { margin: 2px 0; }
.fd-prose a { color: var(--fd-link); text-underline-offset: 2px; }
.fd-prose strong { color: var(--fd-ink); font-weight: 600; }
.fd-prose code { font-family: var(--fd-mono); font-size: .86em; background: var(--fd-neutral); border-radius: 5px; padding: .1em .35em; color: var(--fd-ink); }
.fd-prose code::before, .fd-prose code::after { content: none; }
.fd-prose pre { background: var(--fd-neutral); border: 1px solid var(--fd-line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.55; }
.fd-prose pre code { background: none; padding: 0; }
.fd-prose mark { background: var(--fd-mark); color: var(--fd-mark-ink); padding: 0 2px; border-radius: 3px; }
.fd-prose img, .fd-prose video { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--fd-line); margin: 16px 0; display: block; }
.fd-prose img[data-fd-zoom] { cursor: zoom-in; }
.fd-prose iframe { max-width: 100%; border: 0; border-radius: 12px; }
.fd-prose hr { border: 0; border-top: 1px solid var(--fd-line); margin: 28px 0; }
.fd-prose blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--fd-line); background: var(--fd-paper); color: var(--fd-body); font-size: 14.5px; line-height: 1.55; }
.fd-prose blockquote p { margin: 4px 0; }
.fd-prose blockquote[class*="fd-callout-"] { position: relative; padding-left: 42px; }
.fd-prose blockquote[class*="fd-callout-"]::before { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--fd-callout-icon) center / contain no-repeat; mask: var(--fd-callout-icon) center / contain no-repeat; }
.fd-prose blockquote.fd-callout-info, .fd-prose blockquote.fd-callout-note, .fd-prose blockquote.fd-callout-tip, .fd-prose blockquote.fd-callout-success { --fd-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v5h1'/%3E%3C/svg%3E"); }
.fd-prose blockquote.fd-callout-warning, .fd-prose blockquote.fd-callout-danger { --fd-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E"); }
.fd-prose blockquote.fd-callout-info, .fd-prose blockquote.fd-callout-note, .fd-prose blockquote.fd-callout-tip { border-color: var(--fd-p100); background: var(--fd-p50); color: var(--fd-p700); }
.fd-prose blockquote.fd-callout-warning { border-color: var(--fd-warn-line); background: var(--fd-warn-soft); color: var(--fd-warn-ink); }
.fd-prose blockquote.fd-callout-danger { border-color: var(--fd-bad-line); background: var(--fd-bad-soft); color: var(--fd-bad-ink); }
.fd-prose blockquote.fd-callout-success { border-color: var(--fd-good-line); background: var(--fd-good-soft); color: var(--fd-good-ink); }
.fd-prose blockquote[class*="fd-callout-"] strong, .fd-prose blockquote[class*="fd-callout-"] a { color: inherit; }
.fd-prose .fd-table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--fd-line); border-radius: 12px; background: var(--fd-card); }
.fd-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.fd-prose th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fd-muted); font-weight: 600; background: var(--fd-raised); }
.fd-prose th, .fd-prose td { padding: 9px 12px; border-bottom: 1px solid var(--fd-line); vertical-align: top; }
.fd-prose tr:last-child td { border-bottom: 0; }
/* Light/dark image pairs written with Tailwind-style attributes: {.block .dark:hidden} / {.hidden .dark:block} */
.fd-prose .hidden { display: none; }
.dark .fd-prose .dark\:hidden, .fd-dark .fd-prose .dark\:hidden { display: none; }
.dark .fd-prose .dark\:block, .fd-dark .fd-prose .dark\:block { display: block; }
.fd-banner { margin-top: 14px; }

/* ── Search hits ─────────────────────────────────────── */
.fd-sec { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fd-muted); padding: 12px 20px 4px; }
.fd-hit { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 10px 20px; align-items: start; text-decoration: none; color: var(--fd-ink); }
.fd-hit:hover, .fd-hit.fd-on { background: var(--fd-p50); }
.fd-hit .fd-hi { width: 28px; height: 28px; border-radius: 8px; background: var(--fd-neutral); display: grid; place-items: center; color: var(--fd-p600); font-weight: 700; font-size: 13px; }
.dark .fd-hit .fd-hi { color: var(--fd-p300); }
.fd-hit .fd-hi .fd-tag { padding: 1px 4px; font-size: 9px; }
.fd-hit b { font-size: 14.5px; font-weight: 600; }
.fd-hit .fd-path { font-size: 12px; color: var(--fd-muted); }
.fd-hit p { margin: 3px 0 0; font-size: 13px; color: var(--fd-body); line-height: 1.45; }
.fd-hit mark, .fd-term mark { background: var(--fd-mark); color: var(--fd-mark-ink); border-radius: 3px; padding: 0 1px; font-weight: 600; }
.fd-hit .fd-go { font-size: 12px; color: var(--fd-muted); align-self: center; visibility: hidden; }
.fd-hit.fd-on .fd-go { visibility: visible; }
.fd-hit .fd-hit-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fd-term { margin: 8px 20px 4px; padding: 12px 14px; border-radius: 12px; background: var(--fd-raised); border: 1px solid var(--fd-line); font-size: 13.5px; }
.fd-term b { font-size: 14px; }
.fd-term div { color: var(--fd-body); margin-top: 3px; }
.fd-empty { padding: 28px 20px; text-align: center; color: var(--fd-muted); font-size: 14px; }

/* ── Palette ─────────────────────────────────────────── */
.fd-scrim { position: fixed; inset: 0; z-index: 60; background: var(--fd-scrim); display: flex; justify-content: center; align-items: flex-start; padding: 80px 16px 16px; }
.fd-pal { width: 760px; max-width: 100%; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--fd-card); border-radius: 18px; box-shadow: var(--fd-pop); overflow: hidden; border: 1px solid var(--fd-line); }
.fd-pal-in { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fd-line); font-size: 17px; }
.fd-pal-in svg { color: var(--fd-p500); flex: none; }
.fd-pal-in input { flex: 1; min-width: 0; border: 0; font: inherit; outline: none; color: var(--fd-ink); background: transparent; padding: 0; box-shadow: none; }
.fd-pal-in input::-webkit-search-cancel-button { display: none; }
.fd-pal-cancel { display: none; color: var(--fd-link); font-size: 14px; background: none; border: 0; cursor: pointer; }
.fd-chips { display: flex; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--fd-line); overflow-x: auto; }
.fd-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--fd-line); background: var(--fd-card); color: var(--fd-muted); cursor: pointer; white-space: nowrap; }
.fd-chip:hover { border-color: var(--fd-p200); color: var(--fd-ink); }
.fd-chip.fd-on { background: var(--fd-p800); border-color: var(--fd-p800); color: #fff; }
.dark .fd-chip.fd-on { background: var(--fd-p400); border-color: var(--fd-p400); color: var(--gray-950, #020617); }
.fd-pal-body { overflow-y: auto; flex: 1; padding-bottom: 6px; }
.fd-pal-foot { display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--fd-line); font-size: 12px; color: var(--fd-muted); background: var(--fd-paper); flex-wrap: wrap; align-items: center; }
.fd-pal-foot a { color: var(--fd-link); text-decoration: none; }
.fd-pal-foot .fd-push { margin-left: auto; }
.fd-correct { margin: 10px 20px 0; }

/* ── Results page ────────────────────────────────────── */
.fd-results { padding: 36px 120px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; width: 100%; max-width: 1440px; margin: 0 auto; }
.fd-facet { padding: 8px; font-size: 14px; }
.fd-facet label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--fd-body); }
.fd-facet label:hover { background: var(--fd-raised); }
.fd-facet label.fd-on { background: var(--fd-p50); color: var(--fd-p700); font-weight: 600; }
.fd-facet label span:first-child { display: flex; gap: 8px; align-items: center; }
.fd-facet input { accent-color: var(--fd-p600); margin: 0; }
.fd-facet .fd-more { display: block; padding: 6px 10px; font-size: 13px; color: var(--fd-link); background: none; border: 0; cursor: pointer; }
.fd-results .fd-hit { padding: 16px 22px; }
.fd-results .fd-hit + .fd-hit { border-top: 1px solid var(--fd-line); }
.fd-results .fd-hit b { font-size: 16px; }
.fd-count { font-size: 13px; color: var(--fd-muted); margin: 18px 0 6px; }

/* ── Changelog ───────────────────────────────────────── */
.fd-changelog { padding: 36px 120px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; width: 100%; max-width: 1440px; margin: 0 auto; }
.fd-rail { position: sticky; top: calc(var(--fd-header-h, 59px) + 24px); align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.fd-rel { margin-top: 22px; }
.fd-relh { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fd-line); background: var(--fd-paper); position: sticky; top: var(--fd-header-h, 59px); z-index: 2; }
.fd-relh b { font-size: 20px; letter-spacing: -.01em; }
.fd-relh span { color: var(--fd-muted); font-size: 13px; }
.fd-ent { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--fd-line); align-items: start; scroll-margin-top: var(--fd-relh-h, 52px); }
.fd-ent:first-child { border-top: 0; }
.fd-ent.fd-unread { box-shadow: inset 3px 0 0 var(--fd-new); }
.fd-ent:target { background: var(--fd-p50); }
.fd-ent h3 { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--fd-ink); line-height: 1.35; }
.fd-ent .fd-body { margin: 6px 0 0; font-size: 14px; color: var(--fd-body); line-height: 1.6; }
.fd-ent .fd-body p { margin: 0 0 6px; }
.fd-ent .fd-body code { font-family: var(--fd-mono); font-size: .86em; background: var(--fd-neutral); border-radius: 5px; padding: .1em .35em; }
.fd-ent .fd-body a { color: var(--fd-link); }
.fd-ent .fd-read { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--fd-link); text-decoration: none; font-weight: 600; }
.fd-ent .fd-lnk { font-size: 12px; color: var(--fd-muted); background: none; border: 0; cursor: pointer; padding: 2px 0; white-space: nowrap; }
.fd-ent .fd-lnk:hover { color: var(--fd-link); }
.fd-seen { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; color: var(--fd-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fd-seen::before, .fd-seen::after { content: ""; flex: 1; height: 1px; background: var(--fd-line); }
.fd-dim { opacity: .82; }
.fd-chipbar { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Popover / slide-over (host panels) ──────────────── */
.fd-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 440px; max-width: calc(100vw - 32px); z-index: 50; background: var(--fd-card); border: 1px solid var(--fd-line); border-radius: 16px; box-shadow: var(--fd-pop); overflow: hidden; text-align: left; }
.fd-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--fd-line); }
.fd-pop-head b { font-size: 15px; }
.fd-pop a.fd-pop-row { display: block; padding: 12px 18px; border-bottom: 1px solid var(--fd-line); text-decoration: none; color: var(--fd-ink); }
.fd-pop a.fd-pop-row:hover { background: var(--fd-raised); }
.fd-pop a.fd-pop-row b { display: block; font-size: 14px; margin-top: 4px; }
.fd-pop a.fd-pop-row small { font-size: 12px; color: var(--fd-muted); }
.fd-pop .fd-pop-all { display: block; padding: 12px 18px; color: var(--fd-link); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.fd-pop .fd-pop-empty { padding: 18px; color: var(--fd-muted); font-size: 13.5px; }
.fd-slide-scrim { position: fixed; inset: 0; z-index: 40; background: var(--fd-scrim); }
.fd-slide { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: 600px; max-width: 100vw; background: var(--fd-card); box-shadow: var(--fd-pop); display: flex; flex-direction: column; text-align: left; font-size: 14px; line-height: 1.5; }
.fd-slide-head { padding: 18px 24px; border-bottom: 1px solid var(--fd-line); }
.fd-slide-head .fd-row { display: flex; justify-content: space-between; align-items: center; }
.fd-slide-head .fd-searchbox { margin-top: 12px; max-width: none; }
.fd-slide-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.fd-slide-body h2.fd-title { font-size: 26px; margin: 0; letter-spacing: -.02em; color: var(--fd-ink); font-weight: 600; line-height: 1.2; }
.fd-slide-body .fd-prose { font-size: 15px; margin-top: 10px; }
.fd-slide-body .fd-hit { padding: 10px 0; }
.fd-slide-foot { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--fd-line); flex-wrap: wrap; }
.fd-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-trigger { position: relative; display: inline-flex; }

/* ── Lightbox ────────────────────────────────────────── */
.fd-lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 60px 24px 24px; background: #020617f2; cursor: zoom-out; overflow: hidden; }
.fd-lightbox figure { margin: 0; min-width: 0; max-width: min(1600px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fd-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 10px; cursor: default; box-shadow: 0 24px 60px -20px #000c; }
.fd-lightbox figcaption { max-width: 72ch; color: #e2e8f0; font-size: 14px; line-height: 1.45; text-align: center; cursor: default; }
.fd .fd-lightbox-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #ffffff33; background: #ffffff1a; color: #f8fafc; cursor: pointer; }
.fd .fd-lightbox-close:hover { background: #ffffff33; }
.fd-lightbox :focus-visible { outline: 2px solid #8fc1e5; outline-offset: 2px; }
@media (max-width: 767px) { .fd-lightbox { padding: 60px 8px 16px; } .fd-lightbox img { max-height: calc(100vh - 160px); } }

/* ── Responsive ──────────────────────────────────────── */
.fd-mobile-toc { display: none !important; margin: 0 0 12px; width: 100%; justify-content: space-between; border-radius: 12px; }
.fd-rail-toggle { display: none !important; }

@media (max-width: 1279px) {
    .fd-layout { grid-template-columns: 250px minmax(0, 1fr); }
    .fd-toc { display: none; }
    .fd-home, .fd-results, .fd-changelog { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1023px) {
    .fd-home-grid { grid-template-columns: 1fr; }
    .fd-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fd-results, .fd-changelog { grid-template-columns: 1fr; gap: 20px; }
    .fd-rail { position: static; max-height: none; }
}
@media (max-width: 767px) {
    .fd-bar { padding: 12px 16px; gap: 10px; }
    .fd-bar .fd-searchbox { display: none; }
    .fd-btn.fd-iconbtn { display: inline-flex; padding: 6px 9px; }
    .fd-barlinks { gap: 8px; }
    .fd-barlinks .fd-hide-sm, .fd-trigger .fd-hide-sm { display: none; }
    .fd-logo { font-size: 13px; }
    .fd-logo img { height: 2rem; }
    .fd-layout { grid-template-columns: 1fr; }
    .fd-nav { position: fixed; inset: 0 auto 0 0; z-index: 45; width: 300px; max-width: 86vw; height: 100vh; top: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--fd-pop); }
    .fd-nav.fd-open { transform: none; }
    .fd-article { padding: 16px 16px 40px; }
    .fd-h1 { font-size: 28px; }
    .fd-article .fd-h1 { font-size: 28px; }
    .fd-meta .fd-actions { margin-left: 0; width: 100%; }
    .fd-prose { font-size: 15.5px; }
    .fd-prose h2 { font-size: 20px; }
    .fd-pn { grid-template-columns: 1fr; }
    .fd-changes .fd-crow { grid-template-columns: 1fr; gap: 2px; }
    .fd-home, .fd-results, .fd-changelog { padding: 24px 16px 40px; }
    .fd-grid3 { grid-template-columns: 1fr; }
    .fd-scrim { padding: 0; }
    .fd-pal { border-radius: 0; max-height: 100vh; height: 100vh; border: 0; }
    .fd-pal-in { font-size: 16px; padding: 12px 16px; }
    .fd-pal-in .fd-kbd { display: none; }
    .fd-pal-cancel { display: inline; }
    .fd-pal-foot .fd-keys { display: none; }
    .fd-hit { padding: 12px 16px; grid-template-columns: 28px minmax(0, 1fr); }
    .fd-hit .fd-go { display: none; }
    .fd-ent { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; }
    .fd-relh { padding: 10px 0; }
    .fd-mobile-toc { display: flex !important; }
    .fd-meta .fd-actions { display: none; }
    .fd-rail-toggle { display: inline-flex !important; margin-top: 14px; }
    .fd-rail-more:not(.fd-open) { display: none; }
    .fd-rail .fd-h1 { font-size: 28px; }
    .fd-slide-body, .fd-slide-head, .fd-slide-foot { padding-left: 16px; padding-right: 16px; }
}
.fd-nav-scrim { position: fixed; inset: 0; z-index: 44; background: var(--fd-scrim); }
@media print {
    .fd-bar, .fd-nav, .fd-toc, .fd-pn, .fd-changes, .fd-actions { display: none !important; }
    .fd-layout { display: block; }
}

/* Host themes style bare inputs and buttons; the docs inputs sit inside their own boxes. */
.fd .fd-pal-in input, .fd .fd-searchbox input, .fd .fd-navfilter input { border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; padding: 0 !important; height: auto; min-height: 0; -webkit-appearance: none; appearance: none; }
.fd .fd-chips { flex: none; align-items: center; }
.fd .fd-chip { line-height: 1.4; flex: none; }

/* ── Search loading ──────────────────────────────────── */
.fd-search-icon { display: inline-grid; place-items: center; flex: none; color: inherit; }
.fd-search-icon > span { display: inline-grid; place-items: center; }
.fd-spinner { box-sizing: border-box; border-radius: 50%; border: 2px solid var(--fd-p100); border-top-color: var(--fd-p500); animation: fd-spin .7s linear infinite; }
.fd-loading { opacity: .6; transition: opacity .15s; pointer-events: none; }
.fd-skeletons { padding: 6px 0; }
.fd-skel-hit { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 20px; }
.fd-skel-hit > span:last-child { display: flex; flex-direction: column; gap: 7px; }
.fd-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--fd-skel-base) 0%, var(--fd-skel-shine) 50%, var(--fd-skel-base) 100%); background-size: 200% 100%; animation: fd-shimmer 1.2s ease-in-out infinite; }
.fd-skel-icon { width: 28px; height: 28px; border-radius: 8px; }
.fd-skel-title { width: 45%; height: 14px; }
.fd-skel-line { width: 92%; height: 10px; }
.fd-skel-short { width: 60%; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@keyframes fd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .fd-spinner { animation: none; border-color: var(--fd-p300); border-style: dotted; }
    .fd-skel { animation: none; }
    .fd-loading { transition: none; }
}

/* Anchor jumps land below the sticky top bar: the layout measures the bar into
   --fd-header-h, and the window's scroll padding keeps that much (plus a gap) clear. */
html:has(.fd-app) { scroll-padding-top: calc(var(--fd-header-h, 64px) + 16px); }
.fd-slide-body .fd-prose :is(h1, h2, h3, h4), .fd-slide-body .fd-prose .fd-anchor { scroll-margin-top: 12px; }
.fd-prose th, .fd-prose td { overflow-wrap: break-word; }

/* Slide-over motion in plain CSS so it doesn't depend on the host's Tailwind build. */
.fd-slide { animation: fd-slide-in .2s ease-out; }
.fd-slide-scrim { animation: fd-fade-in .2s ease-out; }
@keyframes fd-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fd-slide, .fd-slide-scrim { animation: none; } }