/*
 * FlutterGo docs — Nightfall.
 *
 * The homepage (`app/home-nightfall.css`) is the source of truth for this
 * site's visual language, and this sheet speaks it directly rather than
 * being a light theme with a dark patch bolted on:
 *
 *   ink ground + starfield        the field is continuous across pages, so
 *                                 nothing here paints an opaque page slab
 *   Fraunces display              page + section titles
 *   Inter body                    prose, nav, cards
 *   JetBrains Mono utility        eyebrows, labels, counters, kbd, code
 *   sky (#5bc8ff) = wayfinding    active nav, links, TOC, focus
 *   ember (#ff6a3d) = one action  the single primary CTA per view
 *
 * Namespace is `fgd-`. The old `fg-docs*` namespace is gone along with the
 * bespoke docs header — docs now mount the shared site header like every
 * other page, so there is exactly one navigation chrome in the product.
 *
 * Every token below resolves from `_fluttergo-nightfall.css` (html.nf-page).
 * Load order on the page is: site → home-match → docs → nightfall.
 */

body.fgs--docs {
  --fgd-rail: 264px;
  --fgd-toc: 220px;
  --fgd-gap: 52px;
  /* Index measure matches the homepage's `.nf-wrap` so the two pages share a
     column. The article shell overrides it below — three columns need more. */
  --fgd-max: 1180px;
  --fgd-text: #c6d0e4;
  --fgd-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* The shared background element belongs to the light marketing pages; on
   ink the starfield IS the background. */
body.fgs--docs .fgs-bg { display: none; }
body.fgs--docs .fg-footer,
body.fgs--docs .fgs-footer { margin-top: 0; }

.fgd-wrap {
  width: min(var(--fgd-max), calc(100% - 48px));
  margin: 0 auto;
  position: relative;
}

@media (max-width: 720px) {
  .fgd-wrap { width: calc(100% - 32px); }
}
.fgd-shell .fgd-wrap { width: min(1280px, calc(100% - 48px)); }
@media (max-width: 720px) {
  .fgd-shell .fgd-wrap { width: calc(100% - 32px); }
}

/* ====================================================================== */
/* Shared type + controls                                                 */
/* ====================================================================== */
/* The index hero opens straight on the display — no eyebrow on any page in
   the family now, so the dashed mono rule that used to live here is gone. */
.fgd-label {
  margin: 0;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nf-dim);
}

.fgd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--nf-body);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.25s var(--fgd-ease), border-color 0.25s var(--fgd-ease),
    background 0.25s var(--fgd-ease), color 0.25s var(--fgd-ease), filter 0.14s var(--fgd-ease);
}
.fgd-btn--ember { background: var(--nf-ember); color: var(--nf-ember-ink); }
.fgd-btn--ember:hover { box-shadow: 0 6px 32px rgba(255, 106, 61, 0.4); }
.fgd-btn--ghost { border-color: var(--nf-line-bright); color: var(--nf-star); background: transparent; }
.fgd-btn--ghost:hover { border-color: var(--nf-sky); background: rgba(91, 200, 255, 0.06); }
.fgd-btn:active { filter: brightness(0.88); }

/* Search affordance. Renders as an input but is a button: typing happens in
   the palette, so there is one search implementation, not two. */
.fgd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--nf-line-bright);
  background: rgba(12, 19, 33, 0.66);
  color: var(--nf-dim);
  font-family: var(--nf-body);
  font-size: 14px;
  padding: 0 12px;
  height: 42px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s var(--fgd-ease), background 0.22s var(--fgd-ease),
    color 0.22s var(--fgd-ease);
}
.fgd-search:hover {
  border-color: rgba(91, 200, 255, 0.45);
  background: rgba(13, 21, 36, 0.85);
  color: var(--nf-muted);
}
.fgd-search svg { flex: none; color: var(--nf-muted); }
.fgd-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fgd-kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--nf-dim);
  border: 1px solid var(--nf-line);
  border-radius: 6px;
  padding: 4px 6px;
  background: rgba(4, 6, 12, 0.5);
}
/* A shortcut hint is a lie on a device with no ⌘ key. This has to sit AFTER
   the base rule — it used to sit above it, where `display: inline-flex` won
   on equal specificity and the chip showed on phones anyway. */
@media (pointer: coarse), (max-width: 560px) {
  .fgd-kbd { display: none; }
}

/* ====================================================================== */
/* Index — hero                                                           */
/* ====================================================================== */
/* Rhythm, display size, lead measure, eyebrow pill, lattice and floating
   glyphs all come from `_fluttergo-pagehead.css`, the shared opening every
   page now uses. What stays here is what only docs has: the search field
   and the chapter chips under it. */

.fgd-hero {
  margin-top: calc(var(--chrome-h, 84px) * -1);
  text-align: center;
}
.fgd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 52% at 50% 0%, rgba(30, 155, 224, 0.18), transparent 70%),
    radial-gradient(34% 30% at 82% 96%, rgba(255, 106, 61, 0.07), transparent 72%);
}

.fgd-hero-title em { font-style: italic; font-weight: 400; color: var(--nf-ember); }

.fgd-hero .fgd-search {
  margin: 24px auto 0;
  max-width: 460px;
  height: 46px;
  border-radius: 13px;
  font-size: 14.5px;
  padding: 0 15px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.fgd-hero-jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.fgd-hero-jump a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--nf-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--nf-muted);
  text-decoration: none;
  background: rgba(10, 16, 27, 0.5);
  transition: color 0.2s var(--fgd-ease), border-color 0.2s var(--fgd-ease),
    background 0.2s var(--fgd-ease);
}
.fgd-hero-jump a:hover {
  color: var(--nf-star);
  border-color: rgba(91, 200, 255, 0.4);
  background: rgba(91, 200, 255, 0.07);
}
.fgd-hero-jump svg { color: var(--nf-sky); flex: none; }

@media (min-width: 861px) and (max-height: 820px) {
  .fgd-hero .fgd-search { margin-top: 20px; height: 44px; }
  .fgd-hero-jump { margin-top: 13px; }
}

@media (max-width: 560px) {
  .fgd-hero .fgd-search { max-width: none; margin-top: 20px; }
  /* Four chips wrap to three rows on a phone and push the walkthrough card
     off the screen, so they become one swipeable row — the same treatment
     Explore gives its filter chips (`.fgx-filters`). The row bleeds to the
     screen edges so a half-cut chip advertises that it scrolls. */
  .fgd-hero-jump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 7px;
    padding: 2px 16px 4px;
    margin-inline: -16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fgd-hero-jump::-webkit-scrollbar { display: none; }
  .fgd-hero-jump li { flex: none; }
  .fgd-hero-jump a { padding: 7px 12px; }
}

/* ====================================================================== */
/* Index — featured walkthrough                                           */
/* ====================================================================== */
.fgd-index { padding: 0 0 clamp(72px, 9vw, 128px); }

/* The walkthrough row is the ember block at the top of docs, so it gets the
   same treatment as the ember block at the foot of every page (the shared
   closing band in `_fluttergo-pagehead.css`): no fill, the constellation
   running through it, two glows and a hairline. It keeps its own shape, a
   row with the action on the right, because it is a link and not a band.
   With no surface left there is nothing to lift, so hover moves the edge and
   the glow rather than casting a shadow. */
.fgd-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  border-radius: 18px;
  border: 1px solid rgba(255, 106, 61, 0.32);
  background:
    radial-gradient(74% 130% at 12% 0%, rgba(255, 106, 61, 0.11), transparent 62%),
    radial-gradient(64% 120% at 92% 100%, rgba(91, 200, 255, 0.07), transparent 62%);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.25s var(--fgd-ease), background 0.25s var(--fgd-ease);
}
/* The one ember hairline, on the one ember block. */
.fgd-featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 61, 0.55), transparent);
}
.fgd-featured:hover {
  border-color: rgba(255, 106, 61, 0.55);
  background:
    radial-gradient(74% 130% at 12% 0%, rgba(255, 106, 61, 0.16), transparent 62%),
    radial-gradient(64% 120% at 92% 100%, rgba(91, 200, 255, 0.09), transparent 62%);
}
.fgd-featured-copy { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.fgd-featured-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255, 106, 61, 0.32);
  background: rgba(255, 106, 61, 0.1);
  color: var(--nf-ember);
}
.fgd-featured-icon svg { width: 22px; height: 22px; }
.fgd-featured-text { min-width: 0; }
.fgd-featured-text strong {
  display: block;
  font-family: var(--nf-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
.fgd-featured-text span {
  display: block;
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--nf-muted);
  max-width: 52ch;
}
.fgd-featured .fgd-btn { flex: none; }

@media (max-width: 760px) {
  .fgd-featured { grid-template-columns: 1fr; padding: 24px; }
  .fgd-featured .fgd-btn { justify-self: start; }
  .fgd-featured-text strong { font-size: 22px; }
}

/* ====================================================================== */
/* Index — chapter groups                                                 */
/* ====================================================================== */
.fgd-group { margin-top: clamp(56px, 6vw, 84px); }

.fgd-group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nf-line);
}
.fgd-group-num {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--nf-sky);
  font-variant-numeric: tabular-nums;
}
.fgd-group-head h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--nf-display);
  font-weight: 300;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
.fgd-group-count {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--nf-dim);
  white-space: nowrap;
}

.fgd-cards {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1080px) { .fgd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fgd-cards { grid-template-columns: 1fr; } }

.fgd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--nf-line);
  background: var(--nf-panel);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s var(--fgd-ease), border-color 0.25s var(--fgd-ease),
    background 0.25s var(--fgd-ease), box-shadow 0.25s var(--fgd-ease);
}
.fgd-card:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 200, 255, 0.34);
  background: var(--nf-panel-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.fgd-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--nf-line);
  background: rgba(13, 21, 36, 0.7);
  color: var(--nf-muted);
  transition: color 0.25s var(--fgd-ease), border-color 0.25s var(--fgd-ease),
    background 0.25s var(--fgd-ease);
}
.fgd-card:hover .fgd-card-icon {
  color: var(--nf-sky);
  border-color: rgba(91, 200, 255, 0.42);
  background: rgba(91, 200, 255, 0.1);
}
.fgd-card-icon svg { width: 19px; height: 19px; }
.fgd-card strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--nf-star);
}
.fgd-card-copy { display: block; min-width: 0; }
.fgd-card-sum {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nf-muted);
}
/* The "open this chapter" affordance lives in the corner rather than on a
   row of its own: a row would be pushed to the bottom of the tallest card in
   the grid row, which left a band of dead space in every shorter card. */
.fgd-card-go {
  position: absolute;
  top: 22px;
  right: 20px;
  color: var(--nf-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s var(--fgd-ease), transform 0.25s var(--fgd-ease),
    color 0.25s var(--fgd-ease);
}
.fgd-card:hover .fgd-card-go,
.fgd-card:focus-visible .fgd-card-go { opacity: 1; transform: none; color: var(--nf-sky); }

/* Closing help panel on the index. */
/* Shape, surface and centring come from the shared closing band in
   `_fluttergo-pagehead.css` — the same one pricing, explore, the blog and
   about end on. Only the spacing above it and the type are docs'. */
.fgd-help {
  margin-top: clamp(64px, 7vw, 96px);
}
.fgd-help h2 {
  margin: 12px 0 0;
  font-family: var(--nf-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.12;
  color: var(--nf-star);
}
.fgd-help h2 em { font-style: italic; color: var(--nf-ember); }
.fgd-help p { margin: 12px auto 0; font-size: 14.5px; color: var(--nf-muted); max-width: 52ch; }
.fgd-help-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ====================================================================== */
/* Article shell                                                          */
/* ====================================================================== */
.fgd-shell {
  position: relative;
  margin-top: calc(var(--chrome-h, 84px) * -1);
  padding: calc(var(--chrome-h, 84px) + clamp(26px, 3.4vw, 44px)) 0 clamp(72px, 8vw, 120px);
}
.fgd-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 500px;
  pointer-events: none;
  background: radial-gradient(52% 100% at 50% 0%, rgba(30, 155, 224, 0.11), transparent 72%);
}
.fgd-shell > * { position: relative; z-index: 1; }

.fgd-grid {
  display: grid;
  grid-template-columns: var(--fgd-rail) minmax(0, 1fr) var(--fgd-toc);
  gap: var(--fgd-gap);
  align-items: start;
}
@media (max-width: 1200px) {
  .fgd-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .fgd-toc { display: none; }
}
@media (max-width: 900px) {
  .fgd-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- Left rail -------------------------------------------------------- */
.fgd-side {
  /* The shared header is pinned (see the site-header parity block in
     _fluttergo-nightfall.css), so a sticky rail has to clear the capsule. */
  position: sticky;
  top: calc(var(--chrome-h, 84px) + 16px);
  max-height: calc(100svh - var(--chrome-h, 84px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 10px 40px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 170, 220, 0.22) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.fgd-side::-webkit-scrollbar { width: 6px; }
.fgd-side::-webkit-scrollbar-thumb { background: rgba(148, 170, 220, 0.2); border-radius: 3px; }
.fgd-side::-webkit-scrollbar-track { background: transparent; }

.fgd-side .fgd-search { margin-bottom: 22px; }

.fgd-nav-group + .fgd-nav-group { margin-top: 22px; }
.fgd-nav-group > .fgd-label { padding: 0 0 10px 12px; }

.fgd-nav {
  list-style: none;
  margin: 0;
  padding: 0 0 0 11px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--nf-line);
}
.fgd-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--nf-muted);
  text-decoration: none;
  transition: color 0.2s var(--fgd-ease), background 0.2s var(--fgd-ease);
}
.fgd-nav a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--nf-sky);
  opacity: 0;
  transition: opacity 0.2s var(--fgd-ease);
}
.fgd-nav a:hover { color: var(--nf-star); background: rgba(148, 170, 220, 0.05); }
.fgd-nav a.is-active {
  color: var(--nf-star);
  background: rgba(91, 200, 255, 0.08);
  font-weight: 600;
}
.fgd-nav a.is-active::before { opacity: 1; }

.fgd-nav-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--nf-line);
  background: rgba(13, 21, 36, 0.55);
  color: var(--nf-dim);
  transition: color 0.2s var(--fgd-ease), border-color 0.2s var(--fgd-ease),
    background 0.2s var(--fgd-ease);
}
.fgd-nav-icon svg { width: 15px; height: 15px; }
.fgd-nav a:hover .fgd-nav-icon { color: var(--nf-star); border-color: var(--nf-line-bright); }
.fgd-nav a.is-active .fgd-nav-icon {
  color: var(--nf-sky);
  border-color: rgba(91, 200, 255, 0.45);
  background: rgba(91, 200, 255, 0.12);
}

/* Mobile: the rail collapses behind one control so the article starts at
   the top of the viewport instead of below 22 nav rows. */
.fgd-side-toggle { display: none; }

@media (max-width: 900px) {
  .fgd-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-bottom: 26px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fgd-side-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--nf-line-bright);
    background: rgba(12, 19, 33, 0.72);
    color: var(--nf-star);
    font-family: var(--nf-body);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    cursor: pointer;
  }
  .fgd-side-toggle svg:last-child { margin-left: auto; transition: transform 0.24s var(--fgd-ease); }
  .fgd-side-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
  .fgd-side-sheet {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.28s var(--fgd-ease), opacity 0.2s var(--fgd-ease);
  }
  .fgd-side-sheet > div { overflow: hidden; min-height: 0; }
  .fgd-side.is-open .fgd-side-sheet { grid-template-rows: 1fr; opacity: 1; }
  .fgd-side .fgd-search { margin-bottom: 10px; }
  .fgd-side-sheet > div { padding-bottom: 8px; }
}

/* ---- Right rail (on this page) --------------------------------------- */
.fgd-toc {
  /* The shared header is pinned (see the site-header parity block in
     _fluttergo-nightfall.css), so a sticky rail has to clear the capsule. */
  position: sticky;
  top: calc(var(--chrome-h, 84px) + 16px);
  max-height: calc(100svh - var(--chrome-h, 84px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fgd-toc::-webkit-scrollbar { display: none; }
.fgd-toc > .fgd-label { padding-bottom: 12px; }
.fgd-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--nf-line); }
.fgd-toc-list a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nf-dim);
  text-decoration: none;
  transition: color 0.2s var(--fgd-ease), border-color 0.2s var(--fgd-ease);
}
.fgd-toc-list a:hover { color: var(--nf-star); }
.fgd-toc-list a.is-active { color: var(--nf-sky); border-left-color: var(--nf-sky); }
.fgd-toc-list a[data-depth="3"] { padding-left: 26px; font-size: 12px; }
.fgd-toc-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-dim);
  text-decoration: none;
}
.fgd-toc-top:hover { color: var(--nf-sky); }

/* ====================================================================== */
/* Article                                                                */
/* ====================================================================== */
.fgd-main { min-width: 0; }

.fgd-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nf-dim);
  flex-wrap: wrap;
}
.fgd-crumb a { color: var(--nf-muted); text-decoration: none; }
.fgd-crumb a:hover { color: var(--nf-sky); }
.fgd-crumb i { font-style: normal; color: rgba(148, 170, 220, 0.35); }
.fgd-crumb b { font-weight: 500; color: var(--nf-sky); }


.fgd-prose { max-width: 44rem; }
.fgd-prose > *:first-child { margin-top: 0; }

.fgd-prose h1 {
  font-family: var(--nf-display);
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 20px;
  color: var(--nf-star);
}
.fgd-prose h2 {
  font-family: var(--nf-display);
  font-weight: 400;
  font-size: clamp(23px, 2.4vw, 29px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--nf-star);
  margin: 2em 0 0.7em;
  padding-top: 1.3em;
  border-top: 1px solid var(--nf-line);
}
.fgd-prose h3 {
  font-family: var(--nf-body);
  font-weight: 650;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--nf-star);
  margin: 2em 0 0.6em;
}
.fgd-prose h4 {
  font-family: var(--nf-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-sky);
  margin: 1.9em 0 0.5em;
}

/* Deep-link affordance: the anchor only paints on hover so headings stay
   clean while reading, but it is always in the tab order for keyboards. */
.fgd-anchor {
  margin-left: 10px;
  color: var(--nf-dim);
  text-decoration: none;
  opacity: 0;
  font-size: 0.62em;
  vertical-align: 0.12em;
  transition: opacity 0.18s var(--fgd-ease), color 0.18s var(--fgd-ease);
}
:is(.fgd-prose h2, .fgd-prose h3):hover .fgd-anchor { opacity: 1; }
.fgd-anchor:focus-visible { opacity: 1; }
.fgd-anchor:hover { color: var(--nf-sky); }
/* A touch screen has no hover, so the "#" never paints there — but it stayed
   in the layout as an invisible link sitting right beside the heading text,
   which is what a stray tap lands on. Take it out entirely on those devices;
   the heading still has its id for anyone sharing a link from desktop. */
@media (hover: none) {
  .fgd-anchor { display: none; }
}

.fgd-prose p {
  margin: 0 0 1.05em;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--fgd-text);
  text-wrap: pretty;
}
.fgd-prose strong { color: var(--nf-star); font-weight: 620; }
.fgd-prose em { color: var(--nf-star); }

.fgd-prose a {
  color: var(--nf-sky);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 200, 255, 0.32);
  transition: border-color 0.18s var(--fgd-ease), color 0.18s var(--fgd-ease);
}
.fgd-prose a:hover { border-bottom-color: var(--nf-sky); }

/* Lists. Unordered lists get a sky tick rule; top-level ordered lists in a
   docs page are almost always a procedure, so they render as a numbered
   step rail with a connecting line. */
.fgd-prose ul {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}
.fgd-prose ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 0.55em;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fgd-text);
}
.fgd-prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(91, 200, 255, 0.55);
  background: rgba(91, 200, 255, 0.14);
}

.fgd-prose ol {
  list-style: none;
  counter-reset: fgd-step;
  margin: 0 0 1.3em;
  padding: 0;
  position: relative;
}
.fgd-prose ol > li {
  counter-increment: fgd-step;
  position: relative;
  padding-left: 42px;
  padding-bottom: 1em;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fgd-text);
}
.fgd-prose ol > li::before {
  content: counter(fgd-step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--nf-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--nf-sky);
  border: 1px solid rgba(91, 200, 255, 0.38);
  background: rgba(91, 200, 255, 0.09);
}
.fgd-prose ol > li::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--nf-line);
}
.fgd-prose ol > li:last-child { padding-bottom: 0; }
.fgd-prose ol > li:last-child::after { display: none; }

/* Code */
.fgd-prose :not(pre) > code {
  font-family: var(--nf-mono);
  font-size: 0.855em;
  color: #9edcff;
  background: rgba(91, 200, 255, 0.08);
  border: 1px solid rgba(91, 200, 255, 0.16);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.fgd-code {
  position: relative;
  margin: 0 0 1.3em;
  border-radius: 12px;
  border: 1px solid var(--nf-line);
  background: #070b14;
  overflow: hidden;
}
.fgd-code-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--nf-line);
  background: rgba(13, 21, 36, 0.5);
}
.fgd-code-lang {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-dim);
  flex: 1;
  min-width: 0;
}
.fgd-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--nf-line);
  border-radius: 8px;
  background: transparent;
  color: var(--nf-muted);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.2s var(--fgd-ease), border-color 0.2s var(--fgd-ease),
    background 0.2s var(--fgd-ease);
}
.fgd-copy:hover { color: var(--nf-star); border-color: var(--nf-line-bright); background: rgba(148, 170, 220, 0.06); }
.fgd-copy.is-done { color: var(--nf-ok); border-color: rgba(52, 211, 153, 0.4); }
.fgd-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--nf-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #c7d3ea;
  scrollbar-width: thin;
}
.fgd-code pre code { font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; }

/* Media */
.fgd-prose img,
.fgd-prose video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.4em 0 0.35em;
  border-radius: 13px;
  border: 1px solid var(--nf-line-bright);
  background: var(--nf-panel-2);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
}
/* `display: block` above outranks the UA's `[hidden] { display: none }`, so
   media the loader hid (a 404 on the asset host) has to be hidden again. */
.fgd-prose img[hidden],
.fgd-prose video[hidden],
.fgd-prose p[hidden] { display: none; }

/* A paragraph that is only an <em> is a caption in this corpus. */
.fgd-prose p > em:only-child {
  display: block;
  font-family: var(--nf-mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--nf-dim);
  margin: 0 0 1.5em;
}

/* Tables */
.fgd-table {
  margin: 0 0 1.35em;
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  overflow-x: auto;
  background: rgba(10, 16, 27, 0.5);
}
.fgd-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fgd-prose th {
  text-align: left;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-dim);
  padding: 11px 16px;
  border-bottom: 1px solid var(--nf-line);
  white-space: nowrap;
}
.fgd-prose td {
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.6;
  color: var(--fgd-text);
  border-bottom: 1px solid var(--nf-line-faint, rgba(148, 170, 220, 0.07));
}
.fgd-prose tbody tr:last-child td { border-bottom: 0; }

/* Callouts */
.fgd-callout {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 0 0 1.3em;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--nf-line-bright);
  background: rgba(13, 21, 36, 0.55);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fgd-text);
}
.fgd-callout-ic { flex: 0 0 18px; margin-top: 2px; color: var(--nf-muted); }
.fgd-callout-body { min-width: 0; }
.fgd-callout-body strong { color: var(--nf-star); }
.fgd-callout--tip { border-color: rgba(91, 200, 255, 0.3); background: rgba(91, 200, 255, 0.06); }
.fgd-callout--tip .fgd-callout-ic { color: var(--nf-sky); }
.fgd-callout--warn { border-color: rgba(255, 154, 92, 0.32); background: rgba(255, 154, 92, 0.06); }
.fgd-callout--warn .fgd-callout-ic { color: #ff9a5c; }
.fgd-callout--success { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.06); }
.fgd-callout--success .fgd-callout-ic { color: var(--nf-ok); }
.fgd-callout--danger { border-color: rgba(255, 122, 146, 0.32); background: rgba(255, 122, 146, 0.06); }
.fgd-callout--danger .fgd-callout-ic { color: #ff7a92; }
.fgd-callout--media { border-color: rgba(157, 140, 255, 0.3); background: rgba(157, 140, 255, 0.06); }
.fgd-callout--media .fgd-callout-ic { color: #9d8cff; }
/* 🗒️ — a worked example. Neutral on purpose: it is context, not a signal. */
.fgd-callout--example .fgd-callout-ic { color: var(--nf-muted); }

/* ---- Article foot ----------------------------------------------------- */
.fgd-foot {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--nf-line);
}
.fgd-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .fgd-pager { grid-template-columns: 1fr; } }
.fgd-pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 13px;
  border: 1px solid var(--nf-line);
  background: rgba(10, 16, 27, 0.6);
  text-decoration: none;
  transition: border-color 0.24s var(--fgd-ease), background 0.24s var(--fgd-ease);
}
.fgd-pager a:hover { border-color: rgba(91, 200, 255, 0.34); background: var(--nf-panel-2); }
.fgd-pager small {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nf-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.fgd-pager strong { font-size: 15px; font-weight: 600; color: var(--nf-star); line-height: 1.35; }
.fgd-pager--next { text-align: right; }
.fgd-pager--next small { justify-content: flex-end; }

.fgd-ask {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: 13px;
  border: 1px dashed var(--nf-line-bright);
  background: rgba(10, 16, 27, 0.4);
}
.fgd-ask p { margin: 0; font-size: 14px; color: var(--nf-muted); }
.fgd-ask p strong { color: var(--nf-star); font-weight: 600; }
.fgd-ask-links { display: flex; gap: 8px; flex-wrap: wrap; }
.fgd-ask-links a {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nf-sky);
  text-decoration: none;
  border: 1px solid rgba(91, 200, 255, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
  transition: background 0.2s var(--fgd-ease), border-color 0.2s var(--fgd-ease);
}
.fgd-ask-links a:hover { background: rgba(91, 200, 255, 0.1); border-color: var(--nf-sky); }

/* ====================================================================== */
/* Search palette                                                         */
/* ====================================================================== */
.fgd-palette[hidden] { display: none; }
.fgd-palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(60px, 12vh, 140px) 20px 40px;
}
.fgd-palette-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 9, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fgd-fade 0.18s var(--fgd-ease);
}
.fgd-palette-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--nf-line-bright);
  background: rgba(10, 16, 27, 0.96);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: fgd-pop 0.22s var(--fgd-ease);
}
@keyframes fgd-fade { from { opacity: 0; } }
@keyframes fgd-pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .fgd-palette-scrim, .fgd-palette-panel { animation: none; }
}

.fgd-palette-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 56px;
  border-bottom: 1px solid var(--nf-line);
  flex: none;
}
.fgd-palette-field > svg { color: var(--nf-muted); flex: none; }
.fgd-palette-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--nf-body);
  font-size: 16px;
  color: var(--nf-star);
  -webkit-appearance: none;
  appearance: none;
}
/* The field is auto-focused and is the panel's only text control, so the
   shared focus ring would just draw a box around the whole dialog; the caret
   already says where typing goes. The native clear button goes too — it draws
   an OS-coloured glyph that belongs to no part of this palette. */
/* Specificity has to clear Nightfall's `html.nf-page :focus-visible`, which
   ties with a two-class selector and wins on load order. */
.fgd-palette .fgd-palette-field input:is(:focus, :focus-visible) { outline: none; }
.fgd-palette-field input::-webkit-search-cancel-button,
.fgd-palette-field input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.fgd-palette-field input::placeholder { color: var(--nf-dim); }

.fgd-palette-results {
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.fgd-palette-group {
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nf-dim);
  padding: 12px 10px 6px;
}
.fgd-palette-hit {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.fgd-palette-hit .fgd-nav-icon { margin-top: 1px; }
.fgd-palette-hit strong { display: block; font-size: 14px; font-weight: 600; color: var(--nf-star); }
.fgd-palette-hit span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nf-muted);
}
.fgd-palette-hit mark { background: rgba(91, 200, 255, 0.2); color: var(--nf-sky); border-radius: 3px; padding: 0 1px; }
.fgd-palette-hit.is-cursor { background: rgba(91, 200, 255, 0.1); }
.fgd-palette-hit.is-cursor .fgd-nav-icon {
  color: var(--nf-sky);
  border-color: rgba(91, 200, 255, 0.45);
  background: rgba(91, 200, 255, 0.12);
}
.fgd-palette-empty { padding: 34px 16px; text-align: center; color: var(--nf-dim); font-size: 14px; }

.fgd-palette-foot {
  flex: none;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--nf-line);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nf-dim);
}
.fgd-palette-foot b { color: var(--nf-muted); font-weight: 500; }

html.fgd-locked { overflow: hidden; }

/* ====================================================================== */
/* Status                                                                 */
/* ====================================================================== */
.fgd-status {
  padding: 80px 8px;
  text-align: center;
  color: var(--nf-dim);
  font-family: var(--nf-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .fgd-card, .fgd-featured, .fgd-nav a, .fgd-nav-icon, .fgd-toc-list a,
  .fgd-card-go svg, .fgd-search, .fgd-pager a { transition: none; }
}