/* ==========================================================================
   article-prose.css — the ONE stylesheet for QuanterLab article rendering.
   ==========================================================================
   Consumed by all three render contexts so they can never drift:
     1. /articles/<slug>  logged OUT -> article_public.html (standalone shell)
     2. /articles/<slug>  logged IN  -> article.html (extends base.html)
     3. /embed/article/<slug>        -> article.html with embed_mode=True

   Extracted BYTE-FOR-BYTE from the former inline <style> in article.html
   (lines 49-448) on 2026-07-20. ops/invariant_audit.py asserts the article
   templates carry no inline article <style> block, so a future edit cannot
   silently re-fork the three contexts.

   This file does NOT define the base layer (:root tokens, the * reset, the
   body font stack, --app-zoom). article.html inherits those from base.html;
   article_public.html declares its own copy. Keep that split — duplicating
   :root here would let the two copies diverge.
   ========================================================================== */

.article-layout {
    display: flex;
    min-height: 100vh;
}

.article-main {
    flex: 1;
    /* No wrapper chrome by default (the embed view + the logged-out public
       page). The logged-in standalone fallback adds it back below. */
    margin-left: 0;
    padding: 0;
    /* Softer reading surface — pure near-black behind bright text halates;
       lift it a touch so the page is calmer on the eye. */
    background: #14181f;
    min-height: 100vh;
}
body.embed-iframe,
body.embed-iframe .article-layout { background: #14181f; }

/* Logged-in standalone render (refresh / direct link / back button): the
   wrapper sidebar + fixed ribbon are present, so clear both so the title
   isn't tucked under the ribbon. */
body.article-with-shell .article-main {
    margin-left: var(--sidebar-width);
    margin-top: 123px;
}

.article-container {
    max-width: 1340px;         /* fill the content area — 760px wasted half of it */
    margin: 0 auto;
    padding: 56px 72px 110px;  /* generous top breathing room */
}

/* Article Header */
.article-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-primary);
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.article-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.article-breadcrumb a:hover {
    color: var(--text-primary);
}

.article-breadcrumb svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-tertiary);
}

.article-category {
    display: inline-block;
    background: rgba(63, 174, 127, 0.15);
    color: #3fae7f;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.article-category.teal {
    background: rgba(91, 164, 164, 0.15);
    color: #5ba4a4;
}

.article-category.purple {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.article-title {
    font-size: 3rem;
    font-weight: 400;          /* 300 was too thin — thin strokes halate on dark */
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    color: #F0F2F5;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-meta-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-tertiary);
}

/* Article Content */
.article-content {
    font-size: 1.55rem;       /* bumped again per founder — was 1.28rem */
    line-height: 1.8;
    color: #E8E8E8;
}

.article-content h2 {
    font-size: 1.9rem;
    font-weight: 600;
    margin-top: 52px;
    margin-bottom: 20px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.article-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 38px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.article-content p {
    margin-bottom: 22px;
    color: #E8E8E8;
}

.article-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.article-content ul, .article-content ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 10px;
    color: #E8E8E8;
}

.article-content li::marker {
    color: var(--text-tertiary);
}

/* Callout Boxes */
.article-callout {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 28px 0;
}

.article-callout.info {
    border-left: 3px solid #3b82f6;
}

.article-callout.warning {
    border-left: 3px solid #f59e0b;
}

.article-callout.concept {
    border-left: 3px solid #3fae7f;
}

.article-callout-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.article-callout p {
    margin-bottom: 0;
    font-size: 1.2rem;
}

/* Formula/Code Blocks */
.article-formula {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 16px 20px;
    margin: 24px 0;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: #3fae7f;
    overflow-x: auto;
}

/* Key Points List */
.key-points {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 24px;
    margin: 28px 0;
}

.key-points-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.key-points ul {
    margin: 0;
    padding-left: 20px;
}

.key-points li {
    margin-bottom: 8px;
}

.key-points li:last-child {
    margin-bottom: 0;
}

/* Further Reading — appended automatically by knowledge_base.py to any
   article that has an entry in FURTHER_READING. Renders papers,
   textbooks, related articles, and a "try it" callout in a consistent
   block at the end of the article body. */
.article-content .further-reading {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 2px solid #3fae7f;
}

.article-content .further-reading h2 {
    font-size: 1.25rem;
    color: #3fae7f;
    margin-top: 0;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-content .further-reading h3 {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-top: 28px;
    margin-bottom: 12px;
}

.article-content .further-reading h3:first-of-type {
    margin-top: 0;
}

.article-content .further-reading ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.article-content .further-reading li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.article-content .further-reading a {
    color: #3fae7f;
    text-decoration: none;
    border-bottom: 1px dotted rgba(63, 174, 127, 0.4);
}

.article-content .further-reading a:hover {
    border-bottom-color: #3fae7f;
}

.article-content .further-reading .article-callout {
    margin: 8px 0 0 0;
}

/* Related Articles */
.related-articles {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--border-primary);
}

.related-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.related-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.related-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.related-card-category {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3fae7f;
    margin-bottom: 8px;
}

.related-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.related-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Back to top */
.back-to-knowledge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.back-to-knowledge:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.back-to-knowledge svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    body.article-with-shell .article-main {
        margin-left: 0;
        margin-top: 56px;
    }

    .article-container {
        padding: 32px 22px 60px;
    }

    .article-title {
        font-size: 2.1rem;
    }

    .article-content {
        font-size: 1.3rem;
    }
}
/* ==========================================================================
   Prose elements that appear in real article HTML but had NO rule anywhere
   (added 2026-07-20). Before this, `.article-table` rendered as an unstyled
   UA table with no borders, in-body links rendered browser-blue/purple, and
   <code> had no chip. Verified against the ARTICLES corpus:
     .article-table  -> 6 tables in knowledge_base.py
     .article-content a -> 31 cross-article links in the diagnostics-* set
     <code>          -> 65 uses across qlway_articles.py + knowledge_base.py
   ops/invariant_audit.py enumerates every class= in ARTICLES and fails if a
   class has no matching selector here, so this list stays complete.
   ========================================================================== */

.article-content table,
.article-content .article-table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 0.92em;
    /* Long factor/metric tables must scroll inside themselves, never widen
       the page body. */
    display: table;
}

.article-content .article-table-wrap {
    overflow-x: auto;
    margin: 28px 0;
}

.article-content table th,
.article-content table td {
    border: 1px solid var(--border-primary);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.article-content table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

.article-content table td {
    color: var(--text-secondary);
}

/* Numeric columns line up. */
.article-content table td {
    font-variant-numeric: tabular-nums;
}

.article-content table tr:hover td {
    background: rgba(63, 174, 127, 0.04);
}

/* In-body links — emerald, matching .further-reading a, instead of the UA
   blue/purple that made cross-article links look like broken markup. */
.article-content a {
    color: #3fae7f;
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 174, 127, 0.35);
    transition: border-color 0.2s, color 0.2s;
}

.article-content a:hover {
    color: #56c795;
    border-bottom-color: #56c795;
}

.article-content code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88em;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 1px 6px;
    color: #3fae7f;
}

/* A <code> inside a formula block is already monospace on an inset ground —
   don't double up the chrome. */
.article-content .article-formula code {
    background: none;
    border: none;
    padding: 0;
}

.article-content sub,
.article-content sup {
    line-height: 0;
    font-size: 0.75em;
}