/* =============================================================================
   /docs/ content design system

   The 31 templates under public/docs/content/ were authored against a
   stylesheet that was never written: 534 distinct class names, used 2126
   times, had no rule anywhere. Cards rendered as bare stacked text, every
   *-grid laid out as a plain block, tab strips showed as vertical lists of
   labels, and four sections displayed all of their tab panels at once.

   The names are compositional — X-card, X-grid, X-header, X-icon, X-name,
   X-description, X-stats — so this is written as family rules matched on the
   suffix rather than 534 individual selectors. A new `foo-card` in a new
   template is styled the day it is written.

   Loaded ahead of the nonce'd <style> block in docs/index.php on purpose:
   attribute selectors carry the same specificity as a class, so anything that
   block already defines by name (.status-card, .code-block) wins the tie.
   ========================================================================== */

:root {
    /* Referenced by the templates since they were written, never defined, so
       every rule that used one was discarded: a border shorthand naming an
       invalid colour invalidates the whole declaration, which is why the
       callouts had no border at all. */
    --accent-cyan: #00e5ff;
    --accent-green: #4ade80;
    --info-bg: rgba(0, 229, 255, 0.06);
    --info-border: rgba(0, 229, 255, 0.35);
    --text-primary: var(--text);
}

/* --- Sections -------------------------------------------------------------
   The top-level wrappers: *-section, *-guide, *-integration, *-framework and
   the handful of singular nouns that play the same role. Vertical rhythm
   only; the cards inside carry the surface. */
[class$="-section"],
[class$="-guide"],
[class$="-integration"],
[class$="-framework"],
[class$="-dashboard"],
[class$="-examples"],
[class$="-patterns"],
[class$="-tools"],
[class$="-setup"],
[class$="-comparison"],
.use-cases,
.checklist,
.keyboard-shortcuts,
.data-classification,
.incident-response,
.attack-vectors,
.threat-intelligence,
.selection-wizard,
.architecture-diagram,
.pipeline-stages,
.response-workflow {
    margin: 2rem 0;
}

/* --- Grids ---------------------------------------------------------------
   Every *-grid, plus the list containers that hold repeated cards. auto-fit
   rather than a fixed count so a row reflows instead of overflowing; the
   min-width floor is what stops a long unbroken token widening a track past
   its share. */
[class$="-grid"],
[class$="-types"],
[class$="-layers"],
[class$="-channels"],
[class$="-providers"],
[class$="-sources"],
[class$="-stages"],
[class$="-phases"],
[class$="-principles"],
[class$="-questions"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0;
}

[class$="-grid"] > *,
[class$="-types"] > *,
[class$="-layers"] > *,
[class$="-channels"] > *,
[class$="-providers"] > *,
[class$="-sources"] > *,
[class$="-stages"] > *,
[class$="-phases"] > *,
[class$="-principles"] > *,
[class$="-questions"] > * {
    min-width: 0;
}

/* Narrower cells for the dense numeric tiles. */
.metrics-row,
.performance-stats,
.blockchain-stats,
.network-stats,
.encryption-stats,
.intelligence-stats,
.auth-stats,
.security-metrics,
.threat-metrics,
.incident-metrics,
.coverage-metrics,
.optimization-metrics,
[class$="-stats"],
[class$="-metrics"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

[class$="-stats"] > *,
[class$="-metrics"] > * {
    min-width: 0;
}

/* --- Cards ---------------------------------------------------------------
   Matches .status-card, which the nonce'd block already defines and which is
   the archetype these templates were written against. */
[class$="-card"],
[class$="-component"],
.expandable,
.api-endpoint,
.auth-method,
.auth-layer,
.arch-layer,
.classification-level,
.security-level,
.response-stage,
.response-type,
.challenge-type,
.threat-level-indicator,
.algo-option,
.playbook-item,
.faq-item,
.question {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    min-width: 0;
}

/* A card sitting directly in prose needs its own vertical space; one in a
   grid gets it from the gap. */
[class$="-card"] {
    margin-bottom: 0;
}

/* --- Card internals ------------------------------------------------------ */
[class$="-header"] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

[class$="-header"] > h3,
[class$="-header"] > h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--primary-color);
}

[class$="-icon"] {
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}

[class$="-name"],
[class$="-title"] {
    font-weight: 600;
    color: var(--text);
    font-size: 1.05rem;
    /* The name is the thing that must not be truncated mid-word in a narrow
       grid track. */
    overflow-wrap: anywhere;
}

[class$="-description"],
[class$="-content"],
[class$="-answer"],
.solution,
.technique-description,
.test-description {
    color: var(--text-secondary);
    line-height: 1.65;
}

[class$="-details"],
[class$="-features"],
[class$="-methods"],
[class$="-actions"],
[class$="-specs"],
[class$="-steps"],
[class$="-items"],
[class$="-list"] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.5rem 0 0;
}

/* --- Leaf data rows ------------------------------------------------------
   .stat is the single most used class on the whole site section (93 uses):
   a label with a <strong> value. Rendered as a quiet two-part row. */
.stat,
.metric,
.step,
.feature,
.byte,
.spec-item,
.metric-item,
.stat-item,
.feature-item,
.resource-item,
.algorithm-item,
.action-item,
.source-item,
.step-item,
.component-item,
.service-item,
.coverage-item,
.phase-item,
.provider-item,
.rule-item,
.practice-item,
.vector-item,
.trend-item,
.shortcut-item,
.technique-item,
.metric-data,
.metric-detail,
.perf-metric,
.algo-perf,
.service-metric,
.encryption-metric,
.summary-metric,
.intel-stat,
.incident-stat,
.auth-stat {
    padding: 0.4rem 0;
    color: var(--text-secondary);
    line-height: 1.5;
    min-width: 0;
}

.stat strong,
.metric strong,
.spec-item strong,
.metric-item strong,
.stat-item strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* The big-number tiles. */
.stat-value,
.metric-large,
.stat-large,
.benchmark-value,
.metric-primary,
.stage-number,
.step-number,
.layer-number,
.vector-count {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-label,
.metric-name,
.benchmark-label,
.metric-secondary,
.metric-change,
.stage-time,
.step-time,
.response-time,
.algo-code,
.example-language,
.shortcut-action,
.level-access,
.level-protection {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.metric-icon,
.tab-icon,
.expand-icon,
.level-icon,
.practice-icon,
.category-icon,
.section-icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* --- Badges and state ----------------------------------------------------
   Pills for anything that names a state, a severity or a level. The colour
   comes from the modifier class beside it. */
[class$="-status"],
[class$="-badge"],
.severity,
.nist-status,
.quantum-resistance,
.model-status,
.technique-status,
.service-indicator,
.threat-level,
.algo-badge,
.status-partial {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* State modifiers. Semantic colour, kept separate from the teal accent so a
   healthy badge never reads as branding. */
.healthy,
.clean,
.positive,
.success,
.recommended,
.primary { color: var(--accent-green); }

.medium,
.warning,
.testing,
.secondary,
.status-partial { color: var(--warning); }

.high,
.error,
.blocked,
.immediate,
.quarantine { color: var(--error); }

.low,
.internal,
.experimental { color: var(--text-secondary); }

.maximum,
.high-security,
.top-secret,
.secret { color: var(--gold-color); }

.fast,
.quantum,
.continuous,
.confidential,
.anomaly,
.nlp,
.behavioral,
.detection,
.analysis,
.decision,
.action,
.monitor,
.forensic { color: var(--accent-cyan); }

/* Level badges carry the same shape. */
[class^="level-"] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid currentColor;
}

.level-quantum, .level-hybrid { color: var(--accent-cyan); }
.level-maximum { color: var(--gold-color); }
.level-research, .level-adaptive { color: var(--warning); }
.level-standard { color: var(--text-secondary); }

/* .level-header / .level-name / .level-description sit inside a card and are
   not badges — undo the badge shape the prefix selector would give them. */
.level-header,
.level-name,
.level-description,
.level-icon,
.level-text,
.level-access,
.level-protection {
    display: revert;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: inherit;
}

.level-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

/* --- HTTP method chips --------------------------------------------------- */
.method,
.get,
.post {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(0, 255, 200, 0.1);
    color: var(--primary-color);
}

.url {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.api-endpoint {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
}

/* --- Bars ----------------------------------------------------------------
   A track with a fill whose width the template sets. The fill has no width of
   its own, so it must not collapse the track. */
.progress-bar,
.threat-bar,
.opt-progress {
    background: var(--background);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 0.4rem 0;
}

.progress-fill,
.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-cyan));
}

.progress-text,
.opt-current,
.opt-target,
.threat-count,
.technique-impact,
.performance-impact {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* --- Tables --------------------------------------------------------------
   Matches .doc-table, which the nonce'd block defines for the tables that
   carried inline styles. These are the ones that never did. */
.performance-table,
.benchmark-table,
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.performance-table th, .performance-table td,
.benchmark-table th, .benchmark-table td,
.comparison-table th, .comparison-table td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.performance-table th,
.benchmark-table th,
.comparison-table th {
    color: var(--text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.highlight-row td {
    background: rgba(0, 255, 200, 0.06);
    color: var(--text);
}

/* --- Callouts ------------------------------------------------------------ */
.doc-callout,
.quick-example,
.workflow-example,
.feature-example,
.webhook-example,
.quick-integration {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

/* --- Code language hints -------------------------------------------------
   The templates tag code with language-*, which nothing highlights. Rather
   than imply highlighting that is not there, the tag is left to inherit the
   surrounding .code-block treatment. */
[class^="language-"] {
    font-family: 'Courier New', monospace;
    color: inherit;
    background: none;
}

/* --- Inline code ---------------------------------------------------------
   Inline <code> had no rule anywhere, so it read as ordinary prose. The
   `:not(pre) >` guard keeps this off the code listings, which .code-block
   already dresses. overflow-wrap matters as much as the colour: a bare API
   URL in a list item is one unbreakable 250px token, and at phone width it
   was the last thing pushing the page sideways. */
:not(pre) > code {
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

/* --- Q&A ----------------------------------------------------------------- */
.faq-question,
.question {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.faq-answer,
.answers {
    color: var(--text-secondary);
    line-height: 1.65;
}

.answer-option {
    display: block;
    padding: 0.4rem 0.75rem;
    margin: 0.3rem 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
}

/* --- Tabs ----------------------------------------------------------------
   Progressive enhancement. Without JavaScript every panel stays visible and
   the strip reads as a list of headings, which is the behaviour the pages
   have had all along — nothing becomes unreachable. The script marks each
   strip's container `js-tabs` once it has wired the clicks, and only then do
   the inactive panels hide. */
.integration-tabs,
.setup-tabs,
.workflow-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin: 1.5rem 0 0;
    padding-bottom: 0;
}

.tab-item,
.setup-tab,
.workflow-tab {
    padding: 0.55rem 1rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.95rem;
    white-space: nowrap;
}

.workflow-tab {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.js-tabs .tab-item,
.js-tabs .setup-tab,
.js-tabs .workflow-tab {
    cursor: pointer;
}

.js-tabs .tab-item:hover,
.js-tabs .setup-tab:hover,
.js-tabs .workflow-tab:hover {
    color: var(--text);
}

.tab-item.active,
.setup-tab.active,
.workflow-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-item:focus-visible,
.setup-tab:focus-visible,
.workflow-tab:focus-visible,
.expandable-header:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.tab-content,
.workflow-content,
.setup-content {
    padding-top: 1.25rem;
}

/* Panels are separated when they are all on show, and only hidden once the
   script is driving them. */
.tab-panel,
.workflow-panel,
.setup-panel {
    margin-bottom: 1.5rem;
}

.js-tabs-content > .tab-panel,
.js-tabs-content > .workflow-panel,
.js-tabs-content > .setup-panel {
    display: none;
    margin-bottom: 0;
}

.js-tabs-content > .tab-panel.active,
.js-tabs-content > .workflow-panel.active,
.js-tabs-content > .setup-panel.active {
    display: block;
}

/* --- Expandable ---------------------------------------------------------- */
.expandable { padding: 0; }

.expandable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.expandable-header h4 { margin: 0; font-size: 1rem; color: var(--primary-color); }

.js-expandable .expandable-header { cursor: pointer; }

.expand-icon { transition: transform 0.2s ease; color: var(--text-secondary); }

.expandable.open .expand-icon { transform: rotate(180deg); }

.expandable-content { padding: 0 1.25rem 1.25rem; }

.js-expandable .expandable:not(.open) .expandable-content { display: none; }

/* --- Narrow widths -------------------------------------------------------- */
@media (max-width: 700px) {
    [class$="-grid"],
    [class$="-types"],
    [class$="-layers"],
    [class$="-channels"],
    [class$="-providers"],
    [class$="-sources"],
    [class$="-stages"],
    [class$="-phases"],
    [class$="-principles"],
    [class$="-questions"] {
        grid-template-columns: 1fr;
    }

    [class$="-stats"],
    [class$="-metrics"] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* A tab strip is the one row allowed to run past the screen, scrolling in
       its own box. */
    .integration-tabs,
    .setup-tabs,
    .workflow-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .performance-table,
    .benchmark-table,
    .comparison-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

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