/*
 * ffdoc-base.css — FlowForge customer-doc shared brand bundle.
 *
 * Warm-light editorial default + prefers-color-scheme dark override +
 * localStorage one-click toggle (data-theme attribute). Token namespace
 * --ffdoc-* per designer §2.3. Shadowless (hairline borders only), serif
 * display + sans body + mono code per designer §2.2.
 *
 * Theme model (ADR-0042 §"Light-default theme + dark variant"):
 *   :root                          -> light tokens (the true zero)
 *   [data-theme="dark"]            -> manual dark (toggle / primer)
 *   @media prefers dark + no attr  -> OS dark when user hasn't chosen
 */

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* Backgrounds */
    --ffdoc-bg-canvas: #FAF9F5;
    --ffdoc-bg-surface: #FFFFFF;
    --ffdoc-bg-surface-2: #F0EEE6;
    --ffdoc-bg-surface-deep: #E3DACC;
    --ffdoc-bg-code: #F0EEE6;

    /* Text */
    --ffdoc-text-primary: #141413;
    --ffdoc-text-secondary: #3D3D3A;
    /*
     * #1558 WCAG-AA fix: muted darkened #87867F -> #6B6A63.
     * It is a muted warm GRAY (same hue family), NOT the brand flame.
     * Computed contrast (WCAG 2.1 §1.4.3 normal-text floor = 4.5:1):
     *   on canvas  #FAF9F5 = 5.15:1  PASS
     *   on surface #FFFFFF = 5.43:1  PASS
     *   on surf-2  #F0EEE6 = 4.67:1  PASS  (worst-case light bg)
     * Prior #87867F was 3.47 / 3.65 / 3.15 -> failed normal-text AA.
     */
    --ffdoc-text-muted: #6B6A63;
    --ffdoc-text-link: #D97757;
    --ffdoc-text-link-hover: #B85A3D;
    --ffdoc-text-inverse: #FAF9F5;

    /* Borders */
    --ffdoc-border: #D1CFC5;
    --ffdoc-border-light: #E3DACC;
    --ffdoc-border-subtle: #F0EEE6;
    --ffdoc-border-hover: #87867F;
    --ffdoc-focus-ring: #D97757;

    /* Brand bridge */
    --ffdoc-brand-primary: #7C3AED;

    /* Semantic (cross-theme) */
    --ffdoc-clay: #D97757;
    --ffdoc-olive: #788C5D;
    --ffdoc-warning: #C78E3F;
    --ffdoc-danger: #B04A4A;
    --ffdoc-info: #5C7CA3;

    /* Pill: resolved / generic neutrals (light) */
    --ffdoc-pill-resolved-bg: #DAE7C3;
    --ffdoc-pill-resolved-fg: #3F5234;
    --ffdoc-pill-neutral-bg: #F0EEE6;
    --ffdoc-pill-neutral-fg: #3D3D3A;
    --ffdoc-pill-danger-bg: #F8DDDD;
    --ffdoc-pill-danger-fg: #7A2A2A;

    /* Typography */
    --ffdoc-font-display: 'Source Serif 4', 'Source Serif Pro', 'PT Serif', 'Georgia', serif;
    --ffdoc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ffdoc-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;

    --ffdoc-text-xs: 12px;
    --ffdoc-text-sm: 14px;
    --ffdoc-text-base: 16px;
    --ffdoc-text-md: 18px;
    --ffdoc-text-lg: 24px;
    --ffdoc-text-xl: 32px;
    --ffdoc-text-2xl: 44px;

    --ffdoc-lh-tight: 1.15;
    --ffdoc-lh-snug: 1.3;
    --ffdoc-lh-normal: 1.6;

    --ffdoc-tracking-tight: -0.01em;
    --ffdoc-tracking-wide: 0.08em;
    --ffdoc-tracking-wider: 0.12em;

    --ffdoc-weight-regular: 400;
    --ffdoc-weight-medium: 500;
    --ffdoc-weight-semibold: 600;
    --ffdoc-weight-bold: 700;

    /* Spacing */
    --ffdoc-space-1: 4px;
    --ffdoc-space-2: 8px;
    --ffdoc-space-3: 12px;
    --ffdoc-space-4: 16px;
    --ffdoc-space-5: 24px;
    --ffdoc-space-6: 32px;
    --ffdoc-space-7: 48px;
    --ffdoc-space-8: 64px;
    --ffdoc-space-9: 96px;

    /* Radius */
    --ffdoc-radius-sm: 4px;
    --ffdoc-radius-md: 8px;
    --ffdoc-radius-lg: 10px;
    --ffdoc-radius-xl: 14px;
    --ffdoc-radius-pill: 999px;

    /* Motion */
    --ffdoc-motion-fast: 100ms;
    --ffdoc-motion-normal: 200ms;
    --ffdoc-motion-slow: 300ms;

    /* Layout */
    --ffdoc-content-width: 1080px;

    /*
     * Blueprint / engineering-cartouche tokens (#1798, #1757 FF-Blueprints).
     * Additive — these introduce the branded blueprint aesthetic WITHOUT
     * touching the ratified WCAG color tokens above (brand-sacred). The grid
     * is decorative engineering-paper texture kept at very low alpha so prose
     * legibility is unaffected; the brand gradient is the FlowForge mark sweep
     * (matches the glyph: violet #8A30F6 → indigo #4851F4).
     */
    --ffdoc-blueprint-grid: rgba(124, 58, 237, 0.045);
    --ffdoc-blueprint-grid-size: 30px;
    --ffdoc-brand-gradient: linear-gradient(120deg, #8A30F6 0%, #6145F5 50%, #4851F4 100%);
    --ffdoc-brand-ink: #5B2BD6;     /* solid wordmark fallback, AA on light canvas */
    --ffdoc-anchor: var(--ffdoc-text-muted);
    --ffdoc-cartouche-bg: var(--ffdoc-bg-surface);
    --ffdoc-tick: var(--ffdoc-border);
    --ffdoc-target-flash: rgba(217, 119, 87, 0.16); /* clay wash on :target jump */
  }

  /* Manual dark (toggle / primer sets data-theme="dark"). */
  [data-theme="dark"] {
    --ffdoc-bg-canvas: #0F0F23;
    --ffdoc-bg-surface: #1A1A2E;
    --ffdoc-bg-surface-2: #25253D;
    --ffdoc-bg-surface-deep: #020617;
    --ffdoc-bg-code: #25253D;

    --ffdoc-text-primary: #E2E8F0;
    --ffdoc-text-secondary: #94A3B8;
    /*
     * #1558 WCAG-AA fix: muted darkened/brightened #64748B -> #8B98AC
     * (raised toward the light end so it clears the 4.5:1 normal-text floor
     * on the LIGHTEST dark bg). Kept distinct from secondary #94A3B8 so the
     * muted/secondary hierarchy survives. Computed contrast:
     *   on canvas  #0F0F23 = 6.46:1  PASS
     *   on surface #1A1A2E = 5.84:1  PASS
     *   on surf-2  #25253D = 5.09:1  PASS  (worst-case dark bg)
     * Prior #64748B was 3.97 / 3.58 / 3.13 -> failed normal-text AA.
     */
    --ffdoc-text-muted: #8B98AC;
    --ffdoc-text-link: #F0976A;
    --ffdoc-text-link-hover: #FFB489;
    --ffdoc-text-inverse: #141413;

    --ffdoc-border: #334155;
    --ffdoc-border-light: rgba(255, 255, 255, 0.12);
    --ffdoc-border-subtle: rgba(255, 255, 255, 0.08);
    --ffdoc-border-hover: #475569;
    --ffdoc-focus-ring: #F0976A;

    --ffdoc-pill-resolved-bg: rgba(120, 140, 93, 0.25);
    --ffdoc-pill-resolved-fg: #B5C898;
    --ffdoc-pill-neutral-bg: #25253D;
    --ffdoc-pill-neutral-fg: #94A3B8;
    --ffdoc-pill-danger-bg: rgba(176, 74, 74, 0.18);
    --ffdoc-pill-danger-fg: #D08484;

    /* Blueprint tokens — dark variant (brighter grid on the deep canvas). */
    --ffdoc-blueprint-grid: rgba(167, 139, 250, 0.06);
    --ffdoc-brand-ink: #C4B5FD;     /* light-violet wordmark, AA on dark canvas */
    --ffdoc-cartouche-bg: var(--ffdoc-bg-surface);
    --ffdoc-tick: var(--ffdoc-border);
    --ffdoc-target-flash: rgba(240, 151, 106, 0.18);
  }

  /* OS dark preference when the user has NOT made a manual choice. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --ffdoc-bg-canvas: #0F0F23;
      --ffdoc-bg-surface: #1A1A2E;
      --ffdoc-bg-surface-2: #25253D;
      --ffdoc-bg-surface-deep: #020617;
      --ffdoc-bg-code: #25253D;

      --ffdoc-text-primary: #E2E8F0;
      --ffdoc-text-secondary: #94A3B8;
      /* WCAG AA: 5.09:1 on surf-2 #25253D (was #64748B = 3.13:1, FAIL).
         Mirrors the [data-theme="dark"] manual-toggle path; this is the
         OS prefers-color-scheme path #1559 fft-web-quality flagged. */
      --ffdoc-text-muted: #8B98AC;
      --ffdoc-text-link: #F0976A;
      --ffdoc-text-link-hover: #FFB489;
      --ffdoc-text-inverse: #141413;

      --ffdoc-border: #334155;
      --ffdoc-border-light: rgba(255, 255, 255, 0.12);
      --ffdoc-border-subtle: rgba(255, 255, 255, 0.08);
      --ffdoc-border-hover: #475569;
      --ffdoc-focus-ring: #F0976A;

      --ffdoc-pill-resolved-bg: rgba(120, 140, 93, 0.25);
      --ffdoc-pill-resolved-fg: #B5C898;
      --ffdoc-pill-neutral-bg: #25253D;
      --ffdoc-pill-neutral-fg: #94A3B8;
      --ffdoc-pill-danger-bg: rgba(176, 74, 74, 0.18);
      --ffdoc-pill-danger-fg: #D08484;

      /* Blueprint tokens — OS-dark path mirrors the manual dark variant. */
      --ffdoc-blueprint-grid: rgba(167, 139, 250, 0.06);
      --ffdoc-brand-ink: #C4B5FD;
      --ffdoc-target-flash: rgba(240, 151, 106, 0.18);
    }
  }
}

@layer base {
  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body.ffdoc-body {
    margin: 0;
    /*
     * Engineering blueprint canvas (#1798): the solid brand canvas with a
     * faint draughting grid layered over it. The grid alpha is intentionally
     * tiny (~4.5% light / 6% dark) so prose legibility is untouched — it reads
     * as premium engineering paper, not as a busy background. Hidden in print.
     */
    background-color: var(--ffdoc-bg-canvas);
    background-image:
      linear-gradient(var(--ffdoc-blueprint-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--ffdoc-blueprint-grid) 1px, transparent 1px);
    background-size:
      var(--ffdoc-blueprint-grid-size) var(--ffdoc-blueprint-grid-size),
      var(--ffdoc-blueprint-grid-size) var(--ffdoc-blueprint-grid-size);
    color: var(--ffdoc-text-primary);
    font-family: var(--ffdoc-font-body);
    font-size: var(--ffdoc-text-base);
    line-height: var(--ffdoc-lh-normal);
    transition: background-color var(--ffdoc-motion-slow), color var(--ffdoc-motion-slow);
  }

  /*
   * Global deep-link affordance (#1798) — applies to EVERY archetype, not just
   * the prose ones. goldmark stamps an id on every heading; the chrome JS hangs
   * a hover-reveal "¶" anchor off each. These rules give the jump target a
   * comfortable scroll offset and a brief highlight wash so the reader's eye
   * lands on the right section — the shareable section links MD never had.
   */
  .ffdoc-content :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
    scroll-margin-top: var(--ffdoc-space-6);
  }
  .ffdoc-content :is(h1, h2, h3, h4, h5, h6):target {
    animation: ffdoc-target-flash 1.4s ease-out 1;
    border-radius: var(--ffdoc-radius-sm);
  }
  @keyframes ffdoc-target-flash {
    0%   { background: var(--ffdoc-target-flash); box-shadow: -10px 0 0 var(--ffdoc-target-flash), 10px 0 0 var(--ffdoc-target-flash); }
    100% { background: transparent; box-shadow: none; }
  }

  h1, h2, h3 {
    font-family: var(--ffdoc-font-display);
    font-weight: var(--ffdoc-weight-semibold);
    letter-spacing: var(--ffdoc-tracking-tight);
    line-height: var(--ffdoc-lh-tight);
    color: var(--ffdoc-text-primary);
  }

  a {
    color: var(--ffdoc-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a:hover { color: var(--ffdoc-text-link-hover); }
  a:focus-visible {
    outline: 2px solid var(--ffdoc-focus-ring);
    outline-offset: 2px;
    border-radius: var(--ffdoc-radius-sm);
  }

  code, pre {
    font-family: var(--ffdoc-font-mono);
    background: var(--ffdoc-bg-code);
  }
  code { padding: 1px 5px; border-radius: var(--ffdoc-radius-sm); font-size: 0.92em; }
  pre {
    padding: var(--ffdoc-space-4);
    border-radius: var(--ffdoc-radius-md);
    border: 1px solid var(--ffdoc-border-subtle);
    overflow-x: auto;
  }
  pre code { padding: 0; background: none; }

  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1px solid var(--ffdoc-border);
    padding: var(--ffdoc-space-2) var(--ffdoc-space-3);
    text-align: left;
  }
}

@layer components {
  .ffdoc-content {
    max-width: var(--ffdoc-content-width);
    margin: 0 auto;
    padding: var(--ffdoc-space-7) var(--ffdoc-space-5);
  }

  /* ── Chrome header: branded engineering title-bar ──────────────────────
   * Left: FlowForge glyph + wordmark lockup + "Generated Documentation"
   * eyebrow. Right: light/dark toggle. A hairline blueprint rule with corner
   * ticks closes the bar — the top edge of the drawing frame. */
  .ffdoc-chrome-header {
    max-width: var(--ffdoc-content-width);
    margin: 0 auto;
    padding: var(--ffdoc-space-5) var(--ffdoc-space-5) var(--ffdoc-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ffdoc-space-4);
    position: relative;
  }
  /* Corner-ticked blueprint rule under the header. */
  .ffdoc-chrome-header::after {
    content: "";
    position: absolute;
    left: var(--ffdoc-space-5);
    right: var(--ffdoc-space-5);
    bottom: 0;
    height: 1px;
    background: var(--ffdoc-border);
    box-shadow:
      0 -4px 0 -3px var(--ffdoc-tick),  /* left/right ticks via inset edges */
      0 4px 0 -3px var(--ffdoc-tick);
  }

  .ffdoc-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--ffdoc-space-3);
    text-decoration: none;
    color: inherit;
    border-radius: var(--ffdoc-radius-md);
  }
  .ffdoc-brand-lockup:focus-visible {
    outline: 2px solid var(--ffdoc-focus-ring);
    outline-offset: 4px;
  }
  .ffdoc-brand-glyph { display: inline-flex; }
  .ffdoc-glyph { width: 30px; height: 30px; display: block; }
  .ffdoc-brand-lockup:hover .ffdoc-glyph {
    transform: translateY(-1px) rotate(-2deg);
    transition: transform var(--ffdoc-motion-normal);
  }
  .ffdoc-brand-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }
  .ffdoc-wordmark {
    font-family: var(--ffdoc-font-display);
    font-weight: var(--ffdoc-weight-bold);
    font-size: var(--ffdoc-text-md);
    letter-spacing: var(--ffdoc-tracking-tight);
    color: var(--ffdoc-brand-ink);            /* AA solid fallback */
    background: var(--ffdoc-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ffdoc-eyebrow {
    font-family: var(--ffdoc-font-mono);
    font-size: 10px;
    letter-spacing: var(--ffdoc-tracking-wide);
    text-transform: uppercase;
    color: var(--ffdoc-text-muted);
  }

  /* Light/dark toggle — pill with a CSS-drawn day/night disc. */
  .ffdoc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ffdoc-space-2);
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-xs);
    letter-spacing: var(--ffdoc-tracking-wide);
    text-transform: uppercase;
    color: var(--ffdoc-text-secondary);
    background: var(--ffdoc-bg-surface-2);
    border: 1px solid var(--ffdoc-border);
    border-radius: var(--ffdoc-radius-pill);
    padding: var(--ffdoc-space-1) var(--ffdoc-space-3);
    cursor: pointer;
    transition: border-color var(--ffdoc-motion-fast), color var(--ffdoc-motion-fast);
  }
  .ffdoc-theme-toggle:hover { border-color: var(--ffdoc-border-hover); color: var(--ffdoc-text-primary); }
  .ffdoc-theme-toggle:focus-visible {
    outline: 2px solid var(--ffdoc-focus-ring);
    outline-offset: 2px;
  }
  .ffdoc-theme-icon {
    width: 12px;
    height: 12px;
    border-radius: var(--ffdoc-radius-pill);
    /* Day half / night half disc — flips conceptually with the theme. */
    background: linear-gradient(90deg, var(--ffdoc-clay) 0 50%, var(--ffdoc-info) 50% 100%);
    border: 1px solid var(--ffdoc-border-hover);
    flex: none;
  }
  [data-theme="dark"] .ffdoc-theme-icon { transform: rotate(180deg); }

  /* Hero */
  .ffdoc-hero { padding-top: var(--ffdoc-space-6); }
  .ffdoc-hero-title {
    font-size: var(--ffdoc-text-2xl);
    margin: var(--ffdoc-space-3) 0;
  }
  .ffdoc-hero-lede {
    font-size: var(--ffdoc-text-md);
    color: var(--ffdoc-text-secondary);
    max-width: 60ch;
  }

  /* Chip nav */
  .ffdoc-chip-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ffdoc-space-2);
    margin-top: var(--ffdoc-space-5);
  }
  .ffdoc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ffdoc-space-2);
    background: var(--ffdoc-bg-surface-2);
    color: var(--ffdoc-text-primary);
    border: 1px solid var(--ffdoc-border);
    border-radius: var(--ffdoc-radius-pill);
    padding: var(--ffdoc-space-1) var(--ffdoc-space-3);
    font-size: var(--ffdoc-text-sm);
    text-decoration: none;
    transition: border-color var(--ffdoc-motion-fast);
  }
  .ffdoc-chip:hover { border-color: var(--ffdoc-border-hover); }
  .ffdoc-chip-count {
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-xs);
    /*
     * #1558 clay-usage rule: clay (#D97757) was used here as 12px small-text
     * foreground = 2.69-3.12:1 -> FAILS AA-normal (4.5:1). 12px bold is NOT
     * WCAG "large text" (needs >=18.66px bold). Switched to --ffdoc-text-secondary
     * (#3D3D3A): on chip surf-2 bg #F0EEE6 = 9.38:1 PASS. Bold weight retains the
     * count emphasis without relying on color. Flame #D97757 value unchanged.
     */
    color: var(--ffdoc-text-secondary);
    font-weight: var(--ffdoc-weight-bold);
  }

  .ffdoc-divider {
    border: 0;
    border-top: 1px solid var(--ffdoc-border-light);
    margin: var(--ffdoc-space-7) 0;
  }

  /* Numbered section header */
  .ffdoc-section-head {
    font-size: var(--ffdoc-text-xl);
    display: flex;
    align-items: baseline;
    gap: var(--ffdoc-space-3);
  }
  .ffdoc-section-num {
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-base);
    /*
     * #1558 clay-usage rule: 16px bold clay on surf-2 #F0EEE6 = 2.69:1 -> FAILS.
     * 16px bold is below WCAG "large text" (>=18.66px bold), so the 3:1 large-text
     * exception does NOT apply. Switched to --ffdoc-text-secondary (#3D3D3A) on
     * surf-2 = 9.38:1 PASS. Flame #D97757 value unchanged.
     */
    color: var(--ffdoc-text-secondary);
    font-weight: var(--ffdoc-weight-bold);
    background: var(--ffdoc-bg-surface-2);
    border-radius: var(--ffdoc-radius-sm);
    padding: 0 var(--ffdoc-space-2);
  }
  .ffdoc-section-count {
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-sm);
    color: var(--ffdoc-text-muted);
    margin-left: auto;
  }

  /* Card grid */
  .ffdoc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ffdoc-space-4);
    margin: var(--ffdoc-space-5) 0 var(--ffdoc-space-7);
  }
  .ffdoc-card {
    border: 1px solid var(--ffdoc-border);
    border-radius: var(--ffdoc-radius-lg);
    padding: var(--ffdoc-space-5);
    background: var(--ffdoc-bg-surface);
    transition: border-color var(--ffdoc-motion-fast), transform var(--ffdoc-motion-fast);
  }
  .ffdoc-card:hover {
    border-color: var(--ffdoc-border-hover);
    transform: translateY(-1px);
  }
  @media (max-width: 1023px) {
    .ffdoc-card-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 639px) {
    .ffdoc-card-grid { grid-template-columns: 1fr; }
    .ffdoc-hero-title { font-size: var(--ffdoc-text-xl); }
  }

  /* Empty state */
  .ffdoc-empty-state {
    border: 1px dashed var(--ffdoc-border);
    border-radius: var(--ffdoc-radius-lg);
    padding: var(--ffdoc-space-7);
    text-align: center;
    color: var(--ffdoc-text-secondary);
    font-style: italic;
  }

  /* Pills (from extensions) */
  .ffdoc-pill {
    display: inline-block;
    font-family: var(--ffdoc-font-mono);
    font-size: 11px;
    letter-spacing: var(--ffdoc-tracking-wider);
    text-transform: uppercase;
    padding: var(--ffdoc-space-1) var(--ffdoc-space-3);
    border-radius: var(--ffdoc-radius-pill);
    border: 1px solid currentColor;
    background: var(--ffdoc-pill-neutral-bg);
    color: var(--ffdoc-pill-neutral-fg);
  }
  .ffdoc-pill-resolved { background: var(--ffdoc-pill-resolved-bg); color: var(--ffdoc-pill-resolved-fg); }
  .ffdoc-pill-blocked,
  .ffdoc-pill-sev-1,
  .ffdoc-pill-sev-2,
  .ffdoc-pill-sev-3 { background: var(--ffdoc-pill-danger-bg); color: var(--ffdoc-pill-danger-fg); }

  /* Callouts (from extensions) */
  .ffdoc-callout {
    border-left: 3px solid var(--ffdoc-info);
    background: var(--ffdoc-bg-surface-2);
    border-radius: var(--ffdoc-radius-md);
    padding: var(--ffdoc-space-4) var(--ffdoc-space-5);
    margin: var(--ffdoc-space-5) 0;
  }
  .ffdoc-callout-note { border-left-color: var(--ffdoc-info); }
  .ffdoc-callout-warning { border-left-color: var(--ffdoc-warning); }
  .ffdoc-callout-danger { border-left-color: var(--ffdoc-danger); }

  /* ── Heading deep-link anchor (¶) — JS-injected, hover-reveal ──────────── */
  .ffdoc-anchor {
    position: absolute;
    left: -1.1em;
    top: 0;
    width: 1em;
    text-align: center;
    color: var(--ffdoc-anchor);
    text-decoration: none;
    font-weight: var(--ffdoc-weight-regular);
    opacity: 0;
    transition: opacity var(--ffdoc-motion-fast), color var(--ffdoc-motion-fast);
  }
  .ffdoc-content :is(h1, h2, h3, h4, h5, h6):hover > .ffdoc-anchor,
  .ffdoc-anchor:focus-visible { opacity: 1; }
  .ffdoc-anchor:hover { color: var(--ffdoc-text-link); }
  .ffdoc-anchor:focus-visible {
    outline: 2px solid var(--ffdoc-focus-ring);
    outline-offset: 2px;
    border-radius: var(--ffdoc-radius-sm);
  }
  /* Touch / narrow viewports: no hover, so keep the anchor inline + faint. */
  @media (max-width: 767px) {
    .ffdoc-anchor { position: static; opacity: 0.4; left: 0; margin-left: var(--ffdoc-space-2); }
  }

  /* ── Footer: engineering-cartouche title block (#1757) ─────────────────── */
  .ffdoc-footer {
    max-width: var(--ffdoc-content-width);
    margin: var(--ffdoc-space-8) auto 0;
    padding: 0 var(--ffdoc-space-5) var(--ffdoc-space-7);
  }
  .ffdoc-cartouche {
    border: 1px solid var(--ffdoc-border);
    border-radius: var(--ffdoc-radius-md);
    background: var(--ffdoc-cartouche-bg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  /* Metadata field grid — the drawing's spec block. */
  .ffdoc-cartouche-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ffdoc-cartouche-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ffdoc-space-3) var(--ffdoc-space-4);
    border-right: 1px solid var(--ffdoc-border-subtle);
    border-bottom: 1px solid var(--ffdoc-border-subtle);
    min-width: 0;
  }
  .ffdoc-cartouche-cell--wide { grid-column: 1 / -1; }
  .ffdoc-cartouche-label {
    font-family: var(--ffdoc-font-mono);
    font-size: 10px;
    letter-spacing: var(--ffdoc-tracking-wider);
    text-transform: uppercase;
    color: var(--ffdoc-text-muted);
  }
  .ffdoc-cartouche-value {
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-sm);
    color: var(--ffdoc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "by FlowForge" sign block — the cartouche's authorship corner. */
  .ffdoc-cartouche-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ffdoc-space-2);
    padding: var(--ffdoc-space-4) var(--ffdoc-space-6);
    background: var(--ffdoc-bg-surface-2);
    border-left: 1px solid var(--ffdoc-border);
    text-align: center;
  }
  .ffdoc-cartouche-glyph .ffdoc-glyph { width: 34px; height: 34px; }
  .ffdoc-cartouche-by {
    font-family: var(--ffdoc-font-mono);
    font-size: var(--ffdoc-text-xs);
    letter-spacing: var(--ffdoc-tracking-wide);
    text-transform: uppercase;
    color: var(--ffdoc-text-muted);
  }
  .ffdoc-cartouche-by strong {
    color: var(--ffdoc-brand-ink);
    font-weight: var(--ffdoc-weight-bold);
  }
  @media (max-width: 639px) {
    .ffdoc-cartouche { grid-template-columns: 1fr; }
    .ffdoc-cartouche-sign {
      border-left: 0;
      border-top: 1px solid var(--ffdoc-border);
      flex-direction: row;
    }
  }

  /* Error template */
  .ffdoc-error-banner {
    display: inline-block;
    background: var(--ffdoc-pill-danger-bg);
    color: var(--ffdoc-pill-danger-fg);
    font-family: var(--ffdoc-font-mono);
    text-transform: uppercase;
    letter-spacing: var(--ffdoc-tracking-wider);
    padding: var(--ffdoc-space-2) var(--ffdoc-space-4);
    border-radius: var(--ffdoc-radius-pill);
    border: 1px solid var(--ffdoc-danger);
  }
  .ffdoc-error-diagnostic {
    color: var(--ffdoc-danger);
    white-space: pre-wrap;
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  @media print {
    /* Print-clean: drop the blueprint grid, kill interactive chrome, keep the
       cartouche as a crisp hairline title block on white. */
    body.ffdoc-body {
      --ffdoc-bg-canvas: #FFFFFF;
      background: #FFFFFF;
      background-image: none;
      color: #000;
    }
    .ffdoc-theme-toggle, .ffdoc-chip-nav, .ffdoc-anchor { display: none; }
    .ffdoc-card-grid { grid-template-columns: repeat(2, 1fr); }
    .ffdoc-cartouche { background: #FFFFFF; }
    .ffdoc-cartouche-sign { background: #FFFFFF; }
    .ffdoc-chrome-header::after { box-shadow: none; }
    a { color: #000; }
  }
}