/* Public Website Redesign — developer docs. Previously fully self-contained inline <style> with
   no design-system participation at all (see project memory's audit note) and zero responsive
   behavior (a fixed 220px sidebar + flex row that would genuinely overflow at 375px). Now built on
   the shared --fc-* tokens, with a real collapsible mobile nav — same "shared tokens, own
   presentation-only stylesheet" pattern already established for News.Portal's site.css. Content
   itself (topic Markdown -> HTML) is untouched; only the surrounding chrome and bare-element
   styling (headings/links/tables/code, since Markdig's output carries no classes) change. */

:root { color-scheme: light dark; }
* { box-sizing: border-box; }

body.docs {
    margin: 0;
    background: var(--fc-bg);
    color: var(--fc-text);
    font-family: var(--fc-font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.docs-skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--fc-primary); color: var(--fc-text-on-accent);
    padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.docs-skip-link:focus { left: 0; }

.docs-topbar {
    display: none; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--fc-border); position: sticky; top: 0; background: var(--fc-bg); z-index: 20;
}
.docs-brand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--fc-font-display); font-weight: 700; color: var(--fc-text); text-decoration: none;
}
.docs-brand span { color: var(--fc-primary); }
.docs-nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--fc-text); cursor: pointer; padding: 0.4rem; border-radius: 6px; }
.docs-nav-toggle svg { width: 22px; height: 22px; }
.docs-nav-toggle:hover { background: var(--fc-surface-sunken); }

.docs-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.docs-sidebar {
    flex: 0 0 260px; border-right: 1px solid var(--fc-border); padding: 1.5rem 1.25rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.docs-sidebar-brand {
    display: none; align-items: center; gap: 0.4rem; margin-bottom: 1rem;
    font-family: var(--fc-font-display); font-weight: 700; color: var(--fc-text); text-decoration: none;
}
.docs-sidebar-brand span { color: var(--fc-primary); }
.docs-sidebar-title { font-family: var(--fc-font-display); font-weight: 700; margin: 0 0 0.75rem; }
.docs-sidebar-group {
    font-family: var(--fc-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fc-text-faint); margin: 1.15rem 0 0.35rem; padding: 0 0.6rem;
}
.docs-sidebar-group:first-of-type { margin-top: 0.5rem; }
.docs-sidebar a {
    display: block; padding: 0.4rem 0.6rem; margin: 0 -0.6rem; border-radius: 6px;
    text-decoration: none; color: var(--fc-text-muted); font-size: 0.92rem;
}
.docs-sidebar a:hover { background: var(--fc-surface-sunken); color: var(--fc-text); }
.docs-sidebar a[aria-current="page"] {
    background: var(--fc-primary-soft); color: var(--fc-primary); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--fc-primary);
}
/* Full-Site QA pass — explicit keyboard focus rings for every interactive docs component (this
   page never links primitives.css, so none of these inherit the shared :focus-visible reset —
   each needed its own, matching the pattern already established for .mk-btn/.docs-code-copy). */
.docs-sidebar a:focus-visible, .docs-toc a:focus-visible, .docs-index-group a:focus-visible {
    outline: 2px solid var(--fc-primary); outline-offset: 2px; border-radius: 4px;
}
.docs-sidebar-sep { height: 1px; background: var(--fc-border); margin: 0.75rem 0; }

/* ---- docs search — a real, small, self-contained search box; results render into
   [data-docs-search-results] via docs-search.js. ---------------------------------------------- */
.docs-search { position: relative; margin-bottom: 0.5rem; }
.docs-search-label {
    position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; color: var(--fc-text-faint); pointer-events: none;
}
.docs-search-label svg { width: 15px; height: 15px; }
.docs-search-kbd {
    display: none; margin-left: 0.4rem; font-family: var(--fc-font-mono); font-size: 0.68rem;
    border: 1px solid var(--fc-border); border-radius: 4px; padding: 0 0.3rem; color: var(--fc-text-faint);
}
.docs-search-input {
    width: 100%; padding: 0.5rem 0.6rem 0.5rem 2rem; border: 1px solid var(--fc-border); border-radius: 8px;
    background: var(--fc-surface-sunken); color: var(--fc-text); font: inherit; font-size: 0.88rem;
}
.docs-search-input:focus { outline: 2px solid var(--fc-primary); outline-offset: 1px; background: var(--fc-bg); }
.docs-search-input:focus + .docs-search-kbd, .docs-search:focus-within .docs-search-kbd { display: none; }
.docs-search:not(:focus-within) .docs-search-kbd { display: inline-block; }
.docs-search-results {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--fc-surface-raised); border: 1px solid var(--fc-border); border-radius: 10px;
    box-shadow: var(--fc-shadow-lg); max-height: 60vh; overflow-y: auto; padding: 0.4rem;
}
.docs-search-result {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.65rem; border-radius: 6px;
    text-decoration: none; color: var(--fc-text);
}
.docs-search-result:hover, .docs-search-result-active { background: var(--fc-surface-sunken); }
.docs-search-result-group {
    font-family: var(--fc-font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--fc-primary);
}
.docs-search-result-title { font-weight: 600; font-size: 0.92rem; }
.docs-search-result-excerpt { font-size: 0.8rem; color: var(--fc-text-muted); }
.docs-search-empty { padding: 0.75rem; margin: 0; font-size: 0.85rem; color: var(--fc-text-muted); }

.docs-content {
    flex: 1 1 auto; min-width: 0; padding: 2.5rem 3rem 5rem;
}

/* ---- breadcrumb ------------------------------------------------------------------------------ */
.docs-breadcrumb {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; max-width: 46rem; margin: 0 auto 1.25rem;
    font-size: 0.82rem; color: var(--fc-text-faint);
}
.docs-breadcrumb a { color: var(--fc-text-faint); text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--fc-primary); }
.docs-breadcrumb [aria-current="page"] { color: var(--fc-text-muted); font-weight: 500; }
.docs-breadcrumb-sep { opacity: 0.6; }

/* ---- article + on-this-page TOC layout -------------------------------------------------------- */
.docs-article-row { display: flex; align-items: flex-start; gap: 3rem; max-width: 60rem; margin: 0 auto; }
.docs-article { min-width: 0; max-width: 46rem; flex: 1 1 auto; }
.docs-toc {
    flex: 0 0 200px; position: sticky; top: 2.5rem; max-height: calc(100vh - 5rem); overflow-y: auto;
    font-size: 0.84rem;
}
.docs-toc-title {
    font-family: var(--fc-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fc-text-faint); margin: 0 0 0.6rem;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; border-left: 1px solid var(--fc-border); }
.docs-toc li { padding-left: 0.75rem; }
.docs-toc-sub { padding-left: 1.5rem; }
.docs-toc a { color: var(--fc-text-muted); text-decoration: none; }
.docs-toc a:hover { color: var(--fc-primary); }

/* ---- previous / next ---------------------------------------------------------------------------- */
.docs-prevnext {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--fc-border);
}
.docs-prevnext-link {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1.1rem;
    border: 1px solid var(--fc-border); border-radius: 10px; text-decoration: none; color: var(--fc-text);
}
.docs-prevnext-link:hover, .docs-prevnext-link:focus-visible { border-color: var(--fc-primary); background: var(--fc-surface-sunken); }
.docs-prevnext-link:focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 2px; }
.docs-prevnext-next { text-align: right; align-items: flex-end; }
.docs-prevnext-label {
    font-family: var(--fc-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--fc-text-faint);
}
.docs-prevnext-title { font-weight: 600; font-size: 0.92rem; }
/* Heading tracking follows the same dual-system as the rest of the design system (see
   primitives.css's own note): tight negative tracking ONLY on the largest display size, normal
   tracking everywhere smaller — h2/h3 deliberately carry none, since docs content is read
   top-to-bottom at a small size where artificial tightening only hurts legibility. This was the
   concrete, verified cause of the docs pages "feeling jarring" — a marketing-display tracking
   rule that had been applied uniformly instead of scoped to the one size it actually suits. */
.docs-content h1 { font-family: var(--fc-font-display); font-size: 1.9rem; margin: 0 0 1rem; letter-spacing: -0.01em; text-wrap: balance; }
.docs-content h2 { font-family: var(--fc-font-display); font-weight: 600; font-size: 1.35rem; margin: 2.5rem 0 0.85rem; }
.docs-content h3 { font-weight: 600; font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.docs-content p, .docs-content li { color: var(--fc-text-muted); }
/* No underline by default — a hairline that appears on hover instead, calmer than a permanent
   browser-default blue underline running through every paragraph (Converta reference: links read
   as considered, not raw HTML).
   ROOT-CAUSE FIX (Full-Site QA pass) — a real, confirmed contrast bug: `:not([class])` scopes this
   to bare, unclassed prose links only (exactly what Markdig ever emits for real Markdown content —
   confirmed it never adds a class attribute to a rendered link). Without this exclusion, `.docs-
   content a` (one class + one element = higher specificity than any single-class component rule)
   silently overrode EVERY classed, component-styled anchor placed inside `.docs-content` —
   `.docs-index-wordpress-cta` (background: var(--fc-primary), so its color got forced to that SAME
   blue — the button text and background became the same color, effectively invisible — the exact
   reported bug), plus `.docs-index-entry`'s card title/description and `.docs-prevnext-link`'s
   Previous/Next text (both forced blue instead of their own intended `--fc-text`), regardless of
   source order — a specificity trap any future component-styled link placed inside `.docs-content`
   would silently fall into again without this fix. */
.docs-content a:not([class]) { color: var(--fc-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--fc-transition-fast); }
.docs-content a:not([class]):hover { border-bottom-color: currentColor; }
.docs-content ul, .docs-content ol { padding-left: 1.4rem; }
.docs-content li { margin-bottom: 0.3rem; }

.docs-content pre {
    background: var(--fc-code-bg); color: var(--fc-code-text); border: 1px solid var(--fc-code-border);
    padding: 1rem 1.15rem; overflow-x: auto; border-radius: 10px; margin: 1.25rem 0;
}
.docs-content code {
    font-family: var(--fc-font-mono); font-size: 0.85rem;
}
/* Inline code — a small tinted chip, not a flat gray box: reserves the heavier "code chrome"
   (pre blocks above) for real showcase snippets, keeps a table full of `GET`/`/api/v1/...`/
   `scope.key` values (API Reference's own table) scannable instead of visually noisy. */
.docs-content :not(pre) > code {
    background: var(--fc-primary-soft); color: var(--fc-primary-strong);
    padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.82em; font-weight: 500;
}
.docs-content pre code { background: none; padding: 0; border-radius: 0; color: inherit; font-weight: 400; }

/* ---- API Reference — HTTP method badges (class added client-side by docs-code.js to an exact-
   match verb already present in the real table content, see that file's own comment). ---------- */
.docs-content .docs-method {
    display: inline-block; min-width: 3.6em; text-align: center; font-weight: 700;
    background: var(--fc-surface-raised); border: 1px solid var(--fc-border-strong);
}
.docs-content .docs-method-get { color: var(--fc-info); border-color: var(--fc-info); background: var(--fc-info-soft); }
.docs-content .docs-method-post { color: var(--fc-success); border-color: var(--fc-success); background: var(--fc-success-soft); }
.docs-content .docs-method-put { color: var(--fc-warning); border-color: var(--fc-warning); background: var(--fc-warning-soft); }
.docs-content .docs-method-patch { color: var(--fc-warning); border-color: var(--fc-warning); background: var(--fc-warning-soft); }
.docs-content .docs-method-delete { color: var(--fc-danger); border-color: var(--fc-danger); background: var(--fc-danger-soft); }

/* Tables — a quiet bordered card (rounded corners, horizontal row dividers only, no vertical
   cell borders) instead of the previous default-HTML full grid, which read as a raw data dump
   rather than curated reference content. */
/* display:block + overflow-x:auto directly on the table itself (no wrapper div needed — the
   Markdown pipeline emits a bare <table>) — a real, pre-existing mobile bug found via QA: a
   Method/Path/Scope table's natural width exceeds 375px and, with nothing to scroll it, forced
   the WHOLE page to scroll horizontally instead of just the table. */
.docs-content table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.88rem; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); }
.docs-content th, .docs-content td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid var(--fc-border); }
.docs-content tr:last-child td { border-bottom: none; }
.docs-content th { background: var(--fc-surface-sunken); font-weight: 600; }

.docs-content blockquote {
    border-left: 3px solid var(--fc-primary); margin: 1.25rem 0; padding: 0.1rem 1rem; color: var(--fc-text-muted);
    background: var(--fc-primary-soft);
}

/* ---- callouts (GitHub-style "> [!NOTE]" alert blocks, Markdig's UseAlertBlocks() extension) —
   a real, reusable presentation component; which facts use one is a content decision made in the
   .md source itself, never invented here. Colors are semantic (info/success/warning/danger),
   deliberately distinct from the brand accent so a callout never reads as just another link/CTA. */
.docs-content .markdown-alert {
    margin: 1.25rem 0; padding: 0.85rem 1.1rem; border-radius: 10px; border: 1px solid var(--fc-border);
    border-left-width: 3px; background: var(--fc-surface-sunken);
}
.docs-content .markdown-alert-title {
    display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-weight: 700; font-size: 0.88rem;
    color: var(--fc-text);
}
.docs-content .markdown-alert-title svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.docs-content .markdown-alert > p:last-child { margin-bottom: 0; }
.docs-content .markdown-alert-note { border-left-color: var(--fc-info, var(--fc-primary)); }
.docs-content .markdown-alert-note .markdown-alert-title { color: var(--fc-info, var(--fc-primary)); }
.docs-content .markdown-alert-tip { border-left-color: var(--fc-success, #2f9e5c); }
.docs-content .markdown-alert-tip .markdown-alert-title { color: var(--fc-success, #2f9e5c); }
.docs-content .markdown-alert-important { border-left-color: var(--fc-primary); }
.docs-content .markdown-alert-important .markdown-alert-title { color: var(--fc-primary); }
.docs-content .markdown-alert-warning, .docs-content .markdown-alert-caution { border-left-color: var(--fc-warning, #b5750a); }
.docs-content .markdown-alert-warning .markdown-alert-title, .docs-content .markdown-alert-caution .markdown-alert-title { color: var(--fc-warning, #b5750a); }

/* ---- code block copy button + language label — injected by docs-code.js, never server-rendered
   markup, since Markdig's own pipeline emits a bare <pre><code class="language-x">. ------------- */
.docs-content pre { position: relative; }
.docs-code-lang {
    position: absolute; top: 0.6rem; left: 1.1rem; font-family: var(--fc-font-mono); font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fc-code-text-muted, #8a90a8);
}
.docs-content pre:has(.docs-code-lang) { padding-top: 2.1rem; }
.docs-code-copy {
    position: absolute; top: 0.55rem; right: 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem;
    background: none; border: 1px solid var(--fc-code-border, #2a2e40); color: var(--fc-code-text-muted, #8a90a8);
    font-family: var(--fc-font-mono); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.55rem;
    border-radius: 5px; cursor: pointer;
}
.docs-code-copy:hover { color: var(--fc-code-text, #e3e6f0); border-color: var(--fc-code-text-muted, #8a90a8); }
.docs-code-copy:focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 1px; }
.docs-code-copy svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
    .docs-topbar { display: flex; }
    /* Plain block, not flex-direction:column — a real bug found via QA measurement (not just
       inspection): .docs-sidebar is already position:fixed at this width (out of normal flow),
       so .docs-content is the only in-flow child; switching the container itself out of flex
       removes any dependency on flex cross-axis sizing (align-items/min-width/automatic-minimum-
       size interactions) for that one remaining child's width, which several flex-based attempts
       here failed to reliably constrain against a wide descendant (the API reference table).
       Block layout has no equivalent ambiguity: an auto-width block child simply fills its
       parent's content box, full stop. */
    .docs-shell { display: block; }
    .docs-sidebar {
        position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px); height: 100vh; z-index: 30;
        background: var(--fc-bg); transform: translateX(-100%); transition: transform 180ms ease;
        box-shadow: var(--fc-shadow-lg);
    }
    .docs-sidebar.docs-sidebar-open { transform: translateX(0); }
    .docs-sidebar-brand { display: inline-flex; }
    .docs-content { padding: 2rem 1.25rem 4rem; }
    /* The "On this page" TOC is a desktop-only convenience (a sticky side rail needs real spare
       width) — dropped entirely on mobile rather than squeezed above the article, matching the
       requirement that it either collapses or is otherwise handled sensibly at narrow widths. */
    .docs-article-row { display: block; }
    .docs-toc { display: none; }
    .docs-prevnext { grid-template-columns: 1fr; }
    .docs-prevnext-next { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .docs-sidebar { transition: none; }
}

/* ---- docs landing page (/docs) — a little more visual richness than the calm inner pages, per
   the redesign's own "Docs Landing can be slightly richer; inner pages stay quiet" direction. --- */
.docs-index-hero { max-width: 42rem; margin: 0 auto 2.5rem; }
.docs-index-hero h1 { font-family: var(--fc-font-display); font-size: 2.1rem; letter-spacing: -0.01em; margin: 0 0 0.75rem; text-wrap: balance; }
.docs-index-hero p { color: var(--fc-text-muted); font-size: 1.02rem; margin: 0; }

.docs-index-entries { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); max-width: 60rem; margin: 0 auto 3rem; }
.docs-index-entry {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem; border-radius: 12px;
    border: 1px solid var(--fc-border); background: var(--fc-surface-raised); text-decoration: none;
    color: var(--fc-text); box-shadow: var(--fc-shadow-sm); transition: border-color 120ms ease, transform 120ms ease;
}
.docs-index-entry:hover, .docs-index-entry:focus-visible { border-color: var(--fc-primary); transform: translateY(-2px); }
.docs-index-entry:focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 2px; }
.docs-index-entry-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
    border-radius: 8px; background: var(--fc-primary-soft); color: var(--fc-primary);
}
.docs-index-entry-icon svg { width: 20px; height: 20px; }
.docs-index-entry-title { font-family: var(--fc-font-display); font-weight: 600; font-size: 1.05rem; }
.docs-index-entry-desc { color: var(--fc-text-muted); font-size: 0.88rem; }

.docs-index-groups { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); max-width: 60rem; margin: 0 auto 3rem; }
.docs-index-group h2 {
    font-family: var(--fc-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--fc-text-faint); margin: 0 0 0.75rem;
}
.docs-index-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.docs-index-group a { color: var(--fc-text); text-decoration: none; font-size: 0.92rem; }
.docs-index-group a:hover { color: var(--fc-primary); }

.docs-index-wordpress-callout {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    max-width: 60rem; margin: 0 auto 2rem; padding: 1.5rem 1.75rem; border-radius: 12px;
    background: var(--fc-primary-soft); border: 1px solid var(--fc-border);
}
.docs-index-wordpress-eyebrow {
    font-family: var(--fc-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--fc-primary); margin: 0 0 0.35rem;
}
.docs-index-wordpress-callout h3 { font-family: var(--fc-font-display); font-size: 1.1rem; margin: 0 0 0.3rem; }
.docs-index-wordpress-callout p { color: var(--fc-text-muted); font-size: 0.9rem; margin: 0; max-width: 42ch; }
.docs-index-wordpress-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; padding: 0.6rem 1.1rem; border-radius: 8px;
    background: var(--fc-primary); color: var(--fc-text-on-accent); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.docs-index-wordpress-cta:hover { background: var(--fc-primary-strong, var(--fc-primary)); }
.docs-index-wordpress-cta:focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 2px; }

.docs-index-openapi { max-width: 60rem; margin: 0 auto; color: var(--fc-text-muted); font-size: 0.88rem; }

@media (max-width: 900px) {
    .docs-index-entries { grid-template-columns: 1fr; }
    .docs-index-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .docs-index-groups { grid-template-columns: 1fr; }
    .docs-index-wordpress-callout { flex-direction: column; align-items: flex-start; }
}