/*
 * ffdoc-adr-detail.css — ADR detail archetype bundle.
 *
 * Additive overlay on top of ffdoc-base.css. Adds:
 *   - ADR-status pill variants (accepted / proposed / deprecated / superseded)
 *   - Right-rail sticky TOC layout per designer §2.5.3
 *   - Two-column layout (body + TOC rail) for ≥ 1024 px
 *   - Consequences ◐ glyph treatment (olive positive / warning negative)
 *   - Pill-strip metadata pair style
 *   - Print stylesheet: force-expand <details>, retain KEY callout, hide TOC
 *
 * Design references:
 *   - designer §2.6.6 (Archetype 6 — ADR detail)
 *   - designer §2.5.3 (Right-rail TOC)
 *   - designer §2.5.7 (Status pill strip)
 *   - designer §2.4 (--ffdoc-* tokens, shadowless discipline)
 *   - designer §2.7.1 (WCAG AA contrast, color-only encoding forbidden)
 *
 * Token namespace: --ffdoc-adr-* for archetype-local values.
 * All other values use the shared --ffdoc-* tokens from ffdoc-base.css.
 *
 * No box-shadows (§2.4 shadowless). 1-px hairline borders only.
 * Focus rings use outline, not shadow (§2.7.2).
 * Zero JavaScript — TOC current-section via CSS :target only (Stone-rule).
 * Live scroll-spy is explicitly v1.1.
 */

@layer tokens {
  :root {
    /* ADR-status pill: ACCEPTED (olive — mirrors resolved) */
    --ffdoc-pill-accepted-bg: var(--ffdoc-pill-resolved-bg);
    --ffdoc-pill-accepted-fg: var(--ffdoc-pill-resolved-fg);

    /* ADR-status pill: PROPOSED (clay) */
    --ffdoc-pill-proposed-bg: rgba(217, 119, 87, 0.15);
    --ffdoc-pill-proposed-fg: #8B4A2E;

    /* ADR-status pill: DEPRECATED (warning amber) */
    --ffdoc-pill-deprecated-bg: rgba(199, 142, 63, 0.15);
    --ffdoc-pill-deprecated-fg: #7A5010;

    /* ADR-status pill: SUPERSEDED (info slate-blue) */
    --ffdoc-pill-superseded-bg: rgba(92, 124, 163, 0.15);
    --ffdoc-pill-superseded-fg: #2E4E72;

    /* TOC rail */
    --ffdoc-adr-toc-width: 220px;
    --ffdoc-adr-toc-right: var(--ffdoc-space-7);
    --ffdoc-adr-toc-top: var(--ffdoc-space-7);
  }

  /* Dark-mode overrides — manual toggle */
  [data-theme="dark"] {
    --ffdoc-pill-accepted-bg: rgba(120, 140, 93, 0.25);
    --ffdoc-pill-accepted-fg: #B5C898;

    --ffdoc-pill-proposed-bg: rgba(217, 119, 87, 0.20);
    --ffdoc-pill-proposed-fg: #F0976A;

    --ffdoc-pill-deprecated-bg: rgba(199, 142, 63, 0.20);
    --ffdoc-pill-deprecated-fg: #D4A55A;

    --ffdoc-pill-superseded-bg: rgba(92, 124, 163, 0.20);
    --ffdoc-pill-superseded-fg: #7EA8D0;
  }

  /* Dark-mode overrides — OS preference */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --ffdoc-pill-accepted-bg: rgba(120, 140, 93, 0.25);
      --ffdoc-pill-accepted-fg: #B5C898;

      --ffdoc-pill-proposed-bg: rgba(217, 119, 87, 0.20);
      --ffdoc-pill-proposed-fg: #F0976A;

      --ffdoc-pill-deprecated-bg: rgba(199, 142, 63, 0.20);
      --ffdoc-pill-deprecated-fg: #D4A55A;

      --ffdoc-pill-superseded-bg: rgba(92, 124, 163, 0.20);
      --ffdoc-pill-superseded-fg: #7EA8D0;
    }
  }
}

@layer components {
  /* ── ADR-status pill variants ──────────────────────────────────────────── */

  /*
   * All four variants reuse the base .ffdoc-pill shape from ffdoc-base.css
   * (display: inline-block; mono font; all-caps; 1-px border; pill radius).
   * Only background + foreground differ — color is reinforcement, not signal
   * (§2.7.1: text label carries the semantic meaning).
   */
  .ffdoc-pill-accepted {
    background: var(--ffdoc-pill-accepted-bg);
    color: var(--ffdoc-pill-accepted-fg);
  }

  .ffdoc-pill-proposed {
    background: var(--ffdoc-pill-proposed-bg);
    color: var(--ffdoc-pill-proposed-fg);
  }

  .ffdoc-pill-deprecated {
    background: var(--ffdoc-pill-deprecated-bg);
    color: var(--ffdoc-pill-deprecated-fg);
  }

  .ffdoc-pill-superseded {
    background: var(--ffdoc-pill-superseded-bg);
    color: var(--ffdoc-pill-superseded-fg);
  }

  /* ── Pill strip ────────────────────────────────────────────────────────── */

  .ffdoc-pill-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ffdoc-space-2);
    margin: var(--ffdoc-space-3) 0 var(--ffdoc-space-5);
  }

  /*
   * Metadata pairs (Date, Author) — no border, label uppercase mono muted,
   * value mono regular primary per designer §2.5.7.
   */
  .ffdoc-pill-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--ffdoc-space-1);
    font-family: var(--ffdoc-font-mono);
    font-size: 11px;
  }

  .ffdoc-pill-meta-label {
    text-transform: uppercase;
    letter-spacing: var(--ffdoc-tracking-wider);
    color: var(--ffdoc-text-muted);
  }

  .ffdoc-pill-meta-value {
    color: var(--ffdoc-text-primary);
  }

  /* ── ADR page layout (two-column: body + right-rail TOC) ──────────────── */

  /*
   * The layout container is position: relative so the fixed-within-scroll TOC
   * can be positioned relative to the viewport edge. On ≥ 1024 px the body
   * column has a right margin equal to toc-width + space to avoid overlap.
   */
  .ffdoc-adr-layout {
    position: relative;
  }

  .ffdoc-adr-body {
    /* Body column inherits ffdoc-content max-width and padding. */
    /* min-width:0 lets the column shrink below its widest child so wide
       <pre>/<table> content scrolls WITHIN its own box (pre{overflow-x:auto})
       instead of forcing horizontal page scroll at narrow viewports (#1856
       mobile overflow fix @375px). */
    min-width: 0;
    max-width: 100%;
  }

  /* Wide code/table content must scroll inside its own box, never push the
     page wide. The container constraint above plus these per-element guards
     keep the rendered ADR at 0px horizontal overflow down to 320px (#1856). */
  .ffdoc-adr-content {
    overflow-wrap: break-word;
  }
  .ffdoc-adr-content pre {
    max-width: 100%;
    overflow-x: auto;
  }
  .ffdoc-adr-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* ADR title: larger serif, tighter tracking, generous top spacing. */
  .ffdoc-adr-title {
    font-family: var(--ffdoc-font-display);
    font-size: var(--ffdoc-text-xl);
    font-weight: var(--ffdoc-weight-semibold);
    letter-spacing: var(--ffdoc-tracking-tight);
    line-height: var(--ffdoc-lh-snug);
    margin: var(--ffdoc-space-2) 0 var(--ffdoc-space-3);
    color: var(--ffdoc-text-primary);
  }

  /* Body content area: standard prose flow. */
  .ffdoc-adr-content {
    margin-top: var(--ffdoc-space-5);
  }

  .ffdoc-adr-content h2 {
    font-size: var(--ffdoc-text-lg);
    margin-top: var(--ffdoc-space-7);
    padding-bottom: var(--ffdoc-space-2);
    border-bottom: 1px solid var(--ffdoc-border-subtle);
  }

  .ffdoc-adr-content h3 {
    font-size: var(--ffdoc-text-md);
    margin-top: var(--ffdoc-space-5);
  }

  /* ── Right-rail sticky TOC ─────────────────────────────────────────────── */

  /*
   * Per designer §2.5.3:
   *   - Position: fixed, right rail.
   *   - Max-width 220 px.
   *   - Hidden below 1024 px (medium breakpoint).
   *   - Caption: "ON THIS PAGE" mono small-caps muted.
   *   - H2 links flush left; H3 links indented --ffdoc-space-3.
   *   - Current-section link: --ffdoc-clay via CSS :target (Stone-rule: zero JS).
   *   - 1-px hairline top border under caption.
   *   - No box-shadow (shadowless discipline).
   */
  .ffdoc-adr-toc {
    position: fixed;
    top: var(--ffdoc-adr-toc-top);
    right: var(--ffdoc-adr-toc-right);
    width: var(--ffdoc-adr-toc-width);

    /* Hidden on narrow viewports — shown only ≥ 1024 px (see media query). */
    display: none;
  }

  @media (min-width: 1024px) {
    .ffdoc-adr-toc {
      display: block;
    }

    /* Shrink body column to prevent overlap with the TOC rail. */
    .ffdoc-adr-body {
      padding-right: calc(var(--ffdoc-adr-toc-width) + var(--ffdoc-space-8));
    }
  }

  .ffdoc-toc-caption {
    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);
    margin: 0 0 var(--ffdoc-space-2);
    padding-bottom: var(--ffdoc-space-2);
    border-top: 1px solid var(--ffdoc-border-subtle);
    padding-top: var(--ffdoc-space-2);
  }

  .ffdoc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ffdoc-toc-item {
    margin: 0;
    padding: 0;
  }

  /* H3 entries indented --ffdoc-space-3 per §2.5.3. */
  .ffdoc-toc-item--h3 {
    padding-left: var(--ffdoc-space-3);
  }

  .ffdoc-toc-link {
    display: block;
    font-family: var(--ffdoc-font-body);
    font-size: var(--ffdoc-text-sm);
    color: var(--ffdoc-text-secondary);
    text-decoration: none;
    padding: var(--ffdoc-space-1) 0;
    line-height: var(--ffdoc-lh-snug);
    transition: color var(--ffdoc-motion-fast);
  }

  .ffdoc-toc-link:hover {
    color: var(--ffdoc-text-link);
  }

  .ffdoc-toc-link:focus-visible {
    outline: 2px solid var(--ffdoc-focus-ring);
    outline-offset: 2px;
    border-radius: var(--ffdoc-radius-sm);
  }

  /* TOC current-section clay highlight:
   * Fragment-jump highlight (clay color on the active TOC link) requires JS
   * to bridge between "heading :target" and "TOC <a> highlight" for
   * dynamically-generated heading ids. Deferred to v1.1 scroll-spy per
   * Q-design-6 + designer §2.5.3. The scroll-margin-top rule below is
   * sufficient for v1.0: the heading scrolls into view on fragment nav.
   */
  .ffdoc-adr-content :target {
    scroll-margin-top: var(--ffdoc-space-6);
  }

  /* ── Consequences ◐ glyph treatment ───────────────────────────────────── */

  /*
   * Per designer §2.6.6 tokens: Consequences bullets use ◐ (half-filled
   * circle) glyph with --ffdoc-olive for positive items and --ffdoc-warning
   * for negative items. Authors mark consequences by writing list items
   * inside elements with these classes.
   */
  .ffdoc-adr-content .ffdoc-consequence-positive::before {
    content: "◐ ";
    color: var(--ffdoc-olive);
  }

  .ffdoc-adr-content .ffdoc-consequence-negative::before {
    content: "◐ ";
    color: var(--ffdoc-warning);
  }

  /*
   * KEY callout — mirrors TL;DR treatment (designer §2.6.6 tokens):
   * white bg, clay left-edge 3-px stripe, body in serif italic for
   * pull-quote feel. Authors write :::callout key ... ::: in their MD.
   * The goldmark callout extension emits .ffdoc-callout.ffdoc-callout-key.
   */
  .ffdoc-callout-key {
    border-left-color: var(--ffdoc-clay);
    background: var(--ffdoc-bg-surface);
    font-family: var(--ffdoc-font-display);
    font-style: italic;
  }

  /*
   * Cross-doc links — FF-purple, dotted underline, arrow suffix per §2.5.5.
   * Applied to links with class ffdoc-crossdoc (the goldmark cross-doc
   * extension, if registered, emits this class; authors may also apply it
   * manually in HTML).
   */
  .ffdoc-adr-content a.ffdoc-crossdoc {
    color: var(--ffdoc-brand-primary);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
  }

  .ffdoc-adr-content a.ffdoc-crossdoc::after {
    content: " ↗";
  }

  .ffdoc-adr-content a.ffdoc-crossdoc:hover {
    text-decoration: underline solid;
  }
}

/* ── Print stylesheet ──────────────────────────────────────────────────────── */

/*
 * Per designer §2.6.6 print treatment + §2.5.3:
 *   - alternatives <details> force-expanded (content visible in print).
 *   - KEY callout retained (not hidden).
 *   - TOC hidden in print.
 */
@media print {
  .ffdoc-adr-toc {
    display: none !important;
  }

  .ffdoc-adr-body {
    padding-right: 0 !important;
  }

  /* Force-expand all <details> elements (alternatives, etc.). */
  .ffdoc-adr-content details {
    display: block;
  }

  .ffdoc-adr-content details > summary {
    display: list-item;
  }

  .ffdoc-adr-content details[open],
  .ffdoc-adr-content details:not([open]) {
    /* Override browser's hide-closed-details behavior in print. */
    overflow: visible;
    height: auto;
  }

  .ffdoc-adr-content details > :not(summary) {
    display: block;
  }

  /* KEY callout retained: no special rule needed — .ffdoc-callout-key
     inherits the visible callout style from ffdoc-base.css. */
}