/* ============================================================================
   f(x) → NATURE DS — Documentation chrome (styled)
   The CENTRAL doc layer: documentation blocks, the Preview/Code tabbed demo,
   and the API reference table. Section fragments + component CSS emit markup
   that consumes these classes; they NEVER redefine them.

   Scope (THIS FILE ONLY):
     .fd-doc, .fd-doc__head, .fd-doc__bar, .fd-doc__name, .fd-doc__tag,
     .fd-doc__desc, .fd-doc__block, .fd-doc__h, .fd-doc__example, .fd-doc__h5
     .fd-preview, .fd-preview__bar, .fd-preview__tab, .fd-preview__spacer,
     .fd-preview__panel, .fd-preview__stage
     .fd-api, .fd-api__dash

   NOT here (defined elsewhere — do not redefine):
     .fd-copy-btn (site.css), .fd-code + .tok-* (utilities.css), .fd-section* /
     .fd-label* / .fd-container (utilities.css), every .fd- component.

   brutalist: hairline borders, sharp corners, mono technical labels,
   acid-lime accent, dotted micro-grid stages. Token-only. Dark + light correct.
   Depends on tokens.css.
   ============================================================================ */

/* ===========================================================================
   1 · DOC BLOCK — one <article class="fd-doc"> per component
   Generous vertical rhythm; siblings separated by a hairline top border + space.
   =========================================================================== */
.fd-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-16);
  border-top: var(--border-width) solid var(--border);
}
/* First doc in a section sits flush under the section head (which already
   provides margin); no double rule + no top padding doubling. */
.fd-doc:first-of-type {
  border-top: 0;
  padding-top: var(--space-2);
}

/* --- Head: name + tag bar, then description ---------------------------- */
.fd-doc__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fd-doc__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.fd-doc__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--foreground);
}
.fd-doc__tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-none);
  white-space: nowrap;
}
.fd-doc__desc {
  max-width: 68ch;
  color: var(--foreground-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ===========================================================================
   2 · DOC SUBSECTIONS — Usage / Anatomy / Examples / API Reference
   Each labelled by a small mono UPPERCASE heading (matches .fd-label style).
   =========================================================================== */
.fd-doc__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fd-doc__h {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-subtle);
}
/* A short accent tick before each subsection heading — quiet crosshair nod. */
.fd-doc__h::before {
  content: "";
  width: var(--space-3);
  height: var(--border-width);
  background: var(--accent);
  flex: 0 0 auto;
}

/* --- Examples cluster --------------------------------------------------- */
.fd-doc__block .fd-doc__example + .fd-doc__example {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) dashed var(--border);
}
.fd-doc__example {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fd-doc__h5 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--foreground-muted);
}

/* The Usage / Anatomy code block reuses the shared .fd-code chrome but here it
   stands alone (no preview above it), so it needs its own hairline frame. */
.fd-doc__block > .fd-code {
  border: var(--border-width) solid var(--border);
  background: var(--background);
}

/* ===========================================================================
   3 · PREVIEW / CODE — the signature toggle card
   Hairline-bordered card: a top tab bar, a dotted micro-grid live stage, and a
   matching code panel. Exactly one panel visible (.is-active) at a time.
   =========================================================================== */
.fd-preview {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-none);
}

/* --- Tab bar (PREVIEW · CODE · spacer · COPY) -------------------------- */
.fd-preview__bar {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) 0;
  background: var(--background-subtle);
  border-bottom: var(--border-width) solid var(--border);
}
.fd-preview__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: -1px;                 /* overlap the bar's bottom hairline */
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-subtle);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-bottom: var(--border-width-thick) solid transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-preview__tab:hover {
  color: var(--foreground-muted);
}
.fd-preview__tab.is-active {
  color: var(--foreground);
  border-bottom-color: var(--accent);
}
.fd-preview__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.fd-preview__spacer {
  flex: 1 1 auto;
}
/* The copy button sits in the bar — nudge it off the top hairline edge. */
.fd-preview__bar .fd-copy-btn {
  align-self: center;
  margin-bottom: var(--space-2);
}

/* --- Panels ------------------------------------------------------------ */
.fd-preview__panel {
  display: none;
}
.fd-preview__panel.is-active {
  display: block;
}

/* --- Live stage: dotted micro-grid, airy, wraps demos ------------------ */
.fd-preview__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  min-height: 160px;
  background:
    radial-gradient(var(--border-faint) var(--border-width), transparent var(--border-width));
  background-size: 16px 16px;
  background-position: center center;
}
/* Layout modifiers so examples can lay out cleanly without new component CSS. */
.fd-preview__stage--column {
  flex-direction: column;
  align-items: flex-start;
}
.fd-preview__stage--center {
  justify-content: center;
}
.fd-preview__stage--start {
  align-items: flex-start;
  justify-content: flex-start;
}

/* --- Code panel: mono, scroll-x, muted; reuses .tok-* token colors ----- */
.fd-preview__panel[data-fd-view-panel="code"] {
  background: var(--background);
}
.fd-preview__panel[data-fd-view-panel="code"] pre {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--foreground-muted);
  tab-size: 2;
}
.fd-preview__panel[data-fd-view-panel="code"] pre .tok-key { color: var(--accent-text); }
.fd-preview__panel[data-fd-view-panel="code"] pre .tok-str { color: var(--success-text); }
.fd-preview__panel[data-fd-view-panel="code"] pre .tok-com { color: var(--foreground-faint); }
.fd-preview__panel[data-fd-view-panel="code"] pre .tok-tag { color: var(--info-text); }

/* ===========================================================================
   4 · API REFERENCE TABLE
   Full-width, mono UPPERCASE headers on a bottom hairline, row hairlines, first
   column code cells in accent mono. Responsive: horizontal scroll on small.
   =========================================================================== */
.fd-api {
  width: 100%;
  border-collapse: collapse;
  border: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.fd-api thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-subtle);
  background: var(--background-subtle);
  border-bottom: var(--border-width) solid var(--border-strong);
  white-space: nowrap;
}

.fd-api tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
  color: var(--foreground-muted);
  border-bottom: var(--border-width) solid var(--border);
}
.fd-api tbody tr:last-child td {
  border-bottom: 0;
}
.fd-api tbody tr:hover td {
  background: var(--surface);
}

/* First column = class name, mono accent code chip. */
.fd-api tbody td:first-child {
  white-space: nowrap;
}
.fd-api tbody td:first-child code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-text);
}
/* Inline code anywhere else in the table reads as foreground mono. */
.fd-api tbody td code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--foreground);
}
.fd-api tbody td:first-child code { color: var(--accent-text); }

/* Description column gets a comfortable measure. */
.fd-api tbody td:nth-child(2) {
  min-width: 22ch;
  color: var(--foreground-muted);
}
/* Default column: em-dash placeholder. */
.fd-api__dash {
  color: var(--foreground-faint);
  font-family: var(--font-mono);
}

/* Make the table scroll horizontally inside its block on narrow viewports
   without redefining the block — the table itself becomes the scroll context. */
@media (max-width: 720px) {
  .fd-doc__block > .fd-api,
  .fd-doc__block .fd-api {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .fd-api thead,
  .fd-api tbody,
  .fd-api tr {
    /* keep a sensible min so columns don't collapse while scrolling */
    min-width: 36rem;
  }
}

/* ===========================================================================
   5 · RESPONSIVE RHYTHM
   Tighten the airy desktop rhythm on small screens; keep hairlines + mono.
   =========================================================================== */
@media (max-width: 768px) {
  .fd-doc {
    gap: var(--space-6);
    padding-block: var(--space-12);
  }
  .fd-doc__name {
    font-size: var(--text-xl);
  }
  .fd-preview__stage {
    padding: var(--space-8) var(--space-5);
    min-height: 140px;
  }
  .fd-preview__panel[data-fd-view-panel="code"] pre {
    padding: var(--space-4) var(--space-4);
  }
}

/* ===========================================================================
   6 · MOTION SAFETY — already covered globally in base.css, but make the
   preview toggle explicit so reduced-motion users get instant swaps.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fd-preview__tab {
    transition: none;
  }
}