/* The docs host's own stylesheet, on top of `fleetless.css`. Every rule here
   is one of `docs.dc.html`'s inline styles moved into a class: the mockup is
   a Claude Design export where each element carries its own `style=`, and a
   rule that only exists inline can neither be shared between pages nor pass
   `scripts/check-style.mjs`, which fails the build on a colour literal
   anywhere but `fleetless.css`.

   So: tokens only, never a hex triplet or a channel function. The two
   shadows the mockup writes as opaque-black channels are handled without
   one — the search dialog borrows `.fl-dialog`'s shadow from the design
   system, and the mobile drawer mixes `--fl-canvas`, which is the dark
   surface in the theme that draws shadows at all. */

/* --- page frame ---------------------------------------------------------- */
.fd-page { min-height: 100vh; background: var(--fl-canvas); display: flex; flex-direction: column; }
.fd-body { flex: 1; display: flex; align-items: flex-start; max-width: 1560px; width: 100%; margin: 0 auto; }

/* `logoImg()` emits the two-logo swap; the rule for it lives in landing.css,
   which the docs host does not load. `display` is set on BOTH states here
   rather than on `.fd-brand img`: a rule on the element plus a class beats a
   bare attribute selector, so a generic `.fd-brand img { display: block }`
   un-hid the dark logo — in the light theme only, where the header then
   carried two logos side by side. */
[data-logo="dark"] { display: none; }
[data-logo="light"] { display: block; }
.dark [data-logo="dark"] { display: block; }
.dark [data-logo="light"] { display: none; }

/* --- header -------------------------------------------------------------- */
.fd-header {
  position: sticky; top: 0; z-index: 40; flex: none;
  height: var(--fl-header-height);
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  border-bottom: 1px solid var(--fl-border);
  background: color-mix(in oklab, var(--fl-canvas) 92%, transparent);
  backdrop-filter: blur(10px);
}
.fd-iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--fl-radius); border: 1px solid var(--fl-border);
  background: var(--fl-raised); color: var(--fl-muted); cursor: pointer;
}
.fd-iconbtn:hover { color: var(--fl-ink); }
.fd-iconbtn-sm { width: 26px; height: 26px; border-radius: 5px; }
/* After .fd-iconbtn, which the same button also carries: the drawer button
   exists only below 1040px, where the media query turns it back on. */
.fd-menu { display: none; }

.fd-brand { flex: none; gap: 9px; text-decoration: none; }
.fd-brand:hover { text-decoration: none; }

.fd-search {
  width: 400px; display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--fl-radius-lg);
  border: 1px solid var(--fl-border); background: var(--fl-surface);
  color: var(--fl-muted); cursor: pointer; text-align: left; font: inherit;
  /* A flex item's default `min-width:auto` is its content width, so without
     this the header pushes past a narrow viewport instead of the search box
     giving way — measured at 375px, where the page scrolled sideways. */
  min-width: 0;
}
.fd-search:hover { background: var(--fl-raised); }
.fd-search svg { flex: none; }
.fd-search-label { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-kbd { flex: none; font-size: 10px; font-weight: 500; border: 1px solid var(--fl-border); border-radius: 3px; padding: 3px 4px; }

.fd-topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.fd-topnav a { padding: 6px 10px; border-radius: var(--fl-radius); font-size: 13px; font-weight: 500; color: var(--fl-muted); text-decoration: none; }
.fd-topnav a:hover { color: var(--fl-ink); text-decoration: none; }
/* Two classes, so it beats `.fd-topnav a` above and keeps the button's ink. */
.fd-topnav a.fl-btn-primary { color: var(--fl-on-accent); }
.fd-sep { width: 1px; height: 20px; background: var(--fl-border); margin: 0 6px; }
/* The toggle shows the theme it switches TO: sun while dark, moon while light. */
.fd-theme-sun { display: none; }
.fd-theme-moon { display: inline-flex; }
.dark .fd-theme-sun { display: inline-flex; }
.dark .fd-theme-moon { display: none; }

/* --- sidebar ------------------------------------------------------------- */
.fd-side {
  width: 264px; flex: none;
  position: sticky; top: var(--fl-header-height);
  height: calc(100vh - var(--fl-header-height)); overflow-y: auto;
  padding: 22px 14px 40px; border-right: 1px solid var(--fl-border);
}
.fd-version { display: flex; align-items: center; gap: 7px; padding: 0 8px 12px; }
.fd-version .fl-dot { width: 5px; height: 5px; }
.fd-version-text { font-size: 11px; color: var(--fl-muted); }
.fd-group { font-size: 10.5px; padding: 18px 8px 7px; }
.fd-version + .fd-group { padding-top: 14px; }
.fd-side a {
  display: block; padding: 6px 8px; border-radius: var(--fl-radius);
  font-size: 13.5px; font-weight: 500; color: var(--fl-muted); text-decoration: none;
}
.fd-side a:hover { color: var(--fl-ink); background: var(--fl-well); text-decoration: none; }
.fd-side a[aria-current] { color: var(--fl-ink); background: var(--fl-raised); font-weight: 600; }
.fd-side a.fl-num { font-size: 12.5px; }

/* --- main + rail --------------------------------------------------------- */
.fd-main { flex: 1; min-width: 0; padding: 36px 48px 100px; display: flex; justify-content: center; gap: 44px; }
.fd-article { flex: 1; min-width: 0; max-width: 748px; }

.fd-rail { width: 212px; flex: none; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.fd-rail-title { font-size: 10.5px; padding: 0 0 10px; }
.fd-rail-links { display: flex; flex-direction: column; gap: 2px; }
.fd-rail-links a, .fd-rail-links button {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  font-family: var(--fl-font-sans); font-size: 12.5px; line-height: 19px;
  color: var(--fl-muted); text-decoration: none;
  border: 0; background: transparent; text-align: left; cursor: pointer;
}
.fd-rail-links a:hover, .fd-rail-links button:hover { color: var(--fl-ink); text-decoration: none; }
.fd-rail-links svg { flex: none; opacity: 0.7; }

.fd-toc { display: flex; flex-direction: column; }
.fd-toc a {
  display: block; padding: 5px 0 5px 10px; border-left: 1px solid var(--fl-border);
  font-size: 12.5px; line-height: 19px; color: var(--fl-muted); text-decoration: none;
}
.fd-toc a:hover { color: var(--fl-ink); border-color: var(--fl-muted); text-decoration: none; }
.fd-toc a[aria-current] { color: var(--fl-ink); border-color: var(--fl-accent); }

.fd-llms { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--fl-muted); text-decoration: none; }
.fd-llms:hover { color: var(--fl-ink); text-decoration: none; }

/* --- footer -------------------------------------------------------------- */
.fd-footer { flex: none; border-top: 1px solid var(--fl-border); padding: 26px 20px 44px; display: flex; justify-content: center; }
.fd-footer nav { width: 100%; max-width: 1560px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.fd-footer a { color: var(--fl-muted); text-decoration: none; }
.fd-footer a:hover { color: var(--fl-ink); }

/* --- article prose ------------------------------------------------------- */
.fd-crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--fl-muted); margin-bottom: 14px; }
.fd-crumb-sep { opacity: 0.5; }
.fd-crumb-page { color: var(--fl-ink); }

.fd-article h1 { margin: 0 0 16px; font-size: 34px; line-height: 40px; font-weight: 650; letter-spacing: -0.025em; color: var(--fl-ink); text-wrap: balance; }
.fd-article h2 { margin: 34px 0 16px; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--fl-ink); scroll-margin-top: 76px; }
.fd-article h3 { margin: 26px 0 10px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fl-ink); scroll-margin-top: 76px; }
.fd-article p { margin: 0 0 16px; font-size: 15px; line-height: 27px; color: var(--fl-muted); text-wrap: pretty; }
/* The paragraph under the title is the standfirst, as the mockup sets it. */
.fd-article h1 + p { margin-bottom: 26px; font-size: 16.5px; line-height: 29px; }
.fd-article strong { color: var(--fl-ink); font-weight: 600; }
.fd-article a { color: var(--fl-ink); text-decoration: underline; text-decoration-color: var(--fl-border); text-underline-offset: 3px; }
.fd-article a:hover { text-decoration-color: var(--fl-ink); }
.fd-article ul, .fd-article ol { margin: 0 0 16px; padding-left: 1.25em; font-size: 15px; line-height: 27px; color: var(--fl-muted); }
.fd-article li { margin: 0 0 6px; text-wrap: pretty; }
.fd-article li > ul, .fd-article li > ol { margin: 6px 0 0; font-size: inherit; }
.fd-article code { font-family: var(--fl-font-mono); font-size: 12px; background: var(--fl-well); border: 1px solid var(--fl-border); border-radius: 4px; padding: 1px 5px; color: var(--fl-ink); }
.fd-article blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 1px solid var(--fl-border); color: var(--fl-ink); }
.fd-article hr { height: 1px; background: var(--fl-border); border: 0; margin: 34px 0; }
.fd-article img { max-width: 100%; height: auto; }

/* Markdown tables get the design system's `.fl-table` look; markdown-it emits
   a bare <table>, so the rules are attached to the element instead. */
.fd-article table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 24px; }
.fd-article th { text-align: left; font-family: var(--fl-font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fl-muted); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--fl-border); }
.fd-article td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--fl-border); vertical-align: top; line-height: 22px; color: var(--fl-muted); }
.fd-article tbody tr:last-child td { border-bottom: 0; }

/* --- code blocks (markdown.mjs's fence renderer) ------------------------- */
.fd-code { border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); background: var(--fl-well); overflow: hidden; margin: 0 0 20px; }
.fd-code-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--fl-border); background: var(--fl-surface); font-size: 11px; font-weight: 500; color: var(--fl-muted); }
.fd-copy {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  padding: 4px 7px; border-radius: 4px; border: 1px solid var(--fl-border);
  background: var(--fl-raised); color: var(--fl-muted);
  font-family: inherit; font-size: 11px; cursor: pointer;
}
.fd-copy:hover { color: var(--fl-ink); }
/* The post-copy flash. Two classes deep on purpose: a bare `.fd-copied`
   loses to `.fd-copy` (same specificity, defined later) and to
   `.fd-rail-links button` (higher), so both buttons flashed in the colour
   they already had — measured, not assumed. */
.fd-copy.fd-copied, .fd-rail-links .fd-copy-md.fd-copied { color: var(--fl-terminal-ok); }
.fd-code pre { margin: 0; padding: 12px 14px; font-family: var(--fl-font-mono); font-size: 12.5px; line-height: 22px; overflow-x: auto; }
.fd-code pre code { background: transparent; border: 0; padding: 0; font-size: inherit; color: var(--fl-ink); }

/* --- callouts (markdown.mjs's admonitions) ------------------------------- */
.fd-callout { display: flex; gap: 12px; border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); padding: 14px 16px; margin: 0 0 20px; }
.fd-callout-icon { flex: none; display: flex; margin-top: 3px; }
.fd-callout-body { flex: 1; min-width: 0; }
.fd-callout-body > *:last-child { margin-bottom: 0; }
.fd-callout-body p, .fd-callout-body li { font-size: 13.5px; line-height: 23px; }
.fd-callout-info { border-color: color-mix(in oklab, var(--fl-accent) 35%, transparent); background: color-mix(in oklab, var(--fl-accent) 6%, transparent); }
.fd-callout-info .fd-callout-icon { color: var(--fl-accent); }
.fd-callout-warn { border-color: color-mix(in oklab, var(--fl-terminal-warn) 35%, transparent); background: color-mix(in oklab, var(--fl-terminal-warn) 6%, transparent); }
.fd-callout-warn .fd-callout-icon { color: var(--fl-terminal-warn); }
.fd-callout-err { border-color: color-mix(in oklab, var(--fl-terminal-err) 35%, transparent); background: color-mix(in oklab, var(--fl-terminal-err) 6%, transparent); }
.fd-callout-err .fd-callout-icon { color: var(--fl-terminal-err); }

/* --- search palette ------------------------------------------------------ */
/* `.fl-backdrop` sets `display:grid`, which is an author rule and therefore
   beats the user-agent's `[hidden]{display:none}`. Without this line the
   palette is open on every page load. */
#fd-search[hidden] { display: none; }
.fd-backdrop { z-index: 80; place-items: start center; padding: 80px 20px 40px; backdrop-filter: blur(3px); }
/* `.fl-dialog` brings the border, surface and shadow; only the size and the
   column layout are the palette's own. */
.fd-dialog { width: 100%; max-width: 720px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; animation: fd-in 0.16s ease-out; }
.fd-dialog-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--fl-border); color: var(--fl-muted); }
#fd-search-input { flex: 1; min-width: 0; font-family: var(--fl-font-sans); font-size: 14px; color: var(--fl-ink); background: transparent; border: 0; outline: 0; }
#fd-search-input::placeholder { color: var(--fl-muted); }
/* `type="search"` draws its own clear cross, which landed beside the
   dialog's close button as a second ✕. */
#fd-search-input::-webkit-search-cancel-button { display: none; }
.fd-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }
.fd-result-group { font-size: 10.5px; padding: 12px 16px 8px; }
.fd-result { display: flex; align-items: center; gap: 11px; padding: 9px 16px; font-size: 13px; color: var(--fl-ink); text-decoration: none; }
.fd-result:hover, .fd-result.fd-active { background: var(--fl-raised); text-decoration: none; }
.fd-result svg { flex: none; color: var(--fl-muted); }
.fd-result > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-result-path { flex: none; font-size: 10.5px; color: var(--fl-muted); }
.fd-result-empty { padding: 22px 16px; font-size: 13px; color: var(--fl-muted); }
.fd-dialog-foot { flex: none; display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--fl-border); background: var(--fl-well); font-size: 10.5px; color: var(--fl-muted); }
.fd-dialog-foot span { display: flex; align-items: center; gap: 6px; }
.fd-dialog-foot kbd { border: 1px solid var(--fl-border); border-radius: 3px; padding: 3px 4px; font-size: 10.5px; }
.fd-foot-note { margin-left: auto; opacity: 0.7; }

@keyframes fd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fd-dialog { animation: none; } }

/* --- scrollbars ---------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--fl-border); border-radius: 6px; border: 3px solid var(--fl-canvas); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1320px) {
  .fd-rail { display: none; }
}
@media (max-width: 1040px) {
  .fd-side { display: none; }
  .fd-side.fd-open {
    display: block; position: fixed; top: var(--fl-header-height); left: 0; bottom: 0;
    width: 280px; height: auto; z-index: 60; background: var(--fl-canvas);
    /* No channel function here: mixing the canvas gives a dark shadow in
       the dark theme (which is where the mockup's shadow shows) and a white
       one in light, where the design system draws no shadows either. */
    box-shadow: 24px 0 48px color-mix(in oklab, var(--fl-canvas) 55%, transparent);
  }
  .fd-menu { display: flex; }
  .fd-main { padding: 28px 24px 80px; }
}
@media (max-width: 720px) {
  .fd-header { gap: 10px; padding: 0 12px; }
  /* The mockup hides the whole nav; the theme toggle and the Console button
     are the two things a reader still needs, so only the section links go. */
  .fd-topnav a:not(.fl-btn) { display: none; }
  .fd-sep { display: none; }
  .fd-search { width: auto; flex: 1 1 auto; }
  .fd-kbd { display: none; }
  .fd-brand .fl-org-chip { display: none; }
  .fd-article h1 { font-size: 28px; line-height: 34px; }
}