/* source: /static/css/article-hero.css */
.article-hero{
    width:100%;
    max-width:1120px;
    margin:0 auto 28px;
    padding:8px 0 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    text-align:left;
    background:transparent;
    border:0;
    box-shadow:none;
}

.article-hero h1{
    max-width:1040px;
    margin:0;
    font-size:clamp(2rem,4vw,2.8rem);
    line-height:1.1;
    letter-spacing:-0.025em;
}

.article-hero .hero-text{
    max-width:1040px;
    margin:0;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--muted);
}

/* Match the site's established compact secondary-button treatment. */
.article-actions{
    width:100%;
    max-width:1040px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.article-share{
    min-width:0;
    display:flex;
}

.article-action{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:8px;
    background:var(--surface2);
    color:var(--text);
    font:inherit;
    font-size:.92rem;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}

.article-action svg{
    width:18px;
    height:18px;
    flex:none;
}

.article-action:hover{
    filter:brightness(1.08);
}

.article-action-primary{
    background:var(--accent);
    color:#001b18;
}

.article-action-primary:hover{
    color:#001b18;
    filter:brightness(1.04);
}

.article-action:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.article-share-status{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Audio gets its own full-width, shallow row. */
.article-hero .article-audio{
    width:100%;
    max-width:1040px;
    box-sizing:border-box;
    margin:0;
    padding:0;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    overflow:hidden;
}

.article-hero .lesson-play{
    width:100%;
    min-height:50px;
    margin:0;
    padding:10px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:.92rem;
    font-weight:750;
    text-align:left;
    cursor:pointer;
}

.article-hero .lesson-play:hover{
    color:var(--primary);
}

.article-hero .lesson-play:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:-3px;
}

.article-audio-length{
    flex:none;
    color:var(--muted);
    font-size:.86rem;
    font-weight:650;
}

.article-hero .lesson-body[hidden]{
    display:none;
}

.article-hero .lesson-body{
    padding:8px 10px 10px;
}

.article-hero .lesson-body audio{
    display:block;
    width:100%;
    height:42px;
    margin:0;
}

.article-hero .article-transcript{
    margin-top:7px;
}

@media (max-width:700px){
    .article-hero{
        padding-top:6px;
        margin-bottom:20px;
        gap:12px;
    }

    .article-hero h1{
        font-size:1.82rem;
        line-height:1.13;
    }

    .article-hero .hero-text{
        font-size:1rem;
        line-height:1.55;
    }

    .article-actions{
        gap:8px;
    }

    .article-action{
        padding:10px 12px;
        gap:7px;
        font-size:.86rem;
    }

    .article-hero .lesson-play{
        min-height:46px;
        padding:9px 11px;
        font-size:.88rem;
    }

    .article-hero .lesson-body{
        padding:7px 8px 8px;
    }
}

@media (max-width:360px){
    .article-action{
        padding-inline:8px;
        font-size:.8rem;
    }

    .article-action svg{
        width:16px;
        height:16px;
    }
}

/* source: /static/css/article-markdown.css */
/* ==========================================================
   MARKDOWN ARTICLES
   ========================================================== */

.article-content{
max-width:1000px;
margin:auto;
}

.article-content > h1{
display:none;
}

/* ----------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------- */

.toc{
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:20px 24px;
margin:0 0 32px 0;
}

.toc::before{
content:"Contents";
display:block;
font-size:1.2rem;
font-weight:700;
margin-bottom:12px;
color:var(--text);
}

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

.toc li{
margin:6px 0;
}

.toc a{
text-decoration:none;
}

.toc a:hover{
text-decoration:underline;
}

/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.article-content table{
width:100%;
border-collapse:collapse;
margin:24px 0;
font-size:0.95rem;
}

.article-content th{
background:var(--surface);
padding:12px;
text-align:left;
border:1px solid var(--border);
}

.article-content td{
padding:12px;
border:1px solid var(--border);
}

.article-content tr:hover{
background:rgba(255,255,255,0.03);
}

/* ----------------------------------------------------------
   IMAGES
   ---------------------------------------------------------- */

.article-content img{
display:block;
max-width:100%;
height:auto;
margin:32px auto;
border-radius:12px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

/* ----------------------------------------------------------
   CODE
   ---------------------------------------------------------- */

.article-content pre{
overflow-x:auto;
padding:18px;
border-radius:10px;
background:var(--surface);
border:1px solid var(--border);
margin:24px 0;
}

.article-content code{
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
monospace;
font-size:0.9rem;
}

/* ----------------------------------------------------------
   ADMONITIONS
   ---------------------------------------------------------- */

.admonition{
padding:18px 20px;
border-radius:10px;
margin:24px 0;
background:var(--surface);
border-left:4px solid var(--accent);
}

.admonition-title{
margin:0 0 8px 0;
font-weight:700;
text-transform:uppercase;
font-size:0.85rem;
letter-spacing:.05em;
}

.admonition.note{
border-left-color:#4ea1ff;
}

.admonition.warning{
border-left-color:#ffb347;
}

.admonition.tip{
border-left-color:#46c37b;
}

/* ----------------------------------------------------------
   ARTICLE TYPOGRAPHY
   ---------------------------------------------------------- */

.article-content h2{
margin-top:48px;
}

.article-content h3{
margin-top:32px;
font-size:1.3rem;
}

.article-content p{
margin:18px 0;
}

.article-content ul,
.article-content ol{
margin:18px 0;
padding-left:28px;
}

.article-content li{
margin:8px 0;
}

.article-content blockquote{
margin:24px 0;
padding:12px 20px;
border-left:4px solid var(--accent);
background:var(--surface);
}


/* ----------------------------------------------------------
   QPPV CALLOUTS
   ---------------------------------------------------------- */

.admonition.qppv{
border-left-color:#8b5cf6;
}

.admonition.gvp{
border-left-color:#22c55e;
}

.admonition.inspection{
border-left-color:#ef4444;
}

.admonition.qppv .admonition-title{
color:#8b5cf6;
}

.admonition.gvp .admonition-title{
color:#22c55e;
}

.admonition.inspection .admonition-title{
color:#ef4444;
}



/* ----------------------------------------------------------
   MISSING ARTICLES
   ---------------------------------------------------------- */

a.missing-article{
color:#f87171;
text-decoration-style:dashed;
}

a.missing-article:hover{
text-decoration:underline;
}



/* ----------------------------------------------------------
   RELATED ARTICLES
   ---------------------------------------------------------- */

.related-articles{
margin-top:64px;
}

.related-articles .cards{
display:grid;
grid-template-columns:
repeat(
auto-fit,
minmax(260px,1fr)
);
gap:20px;
}

.related-articles .card{
text-decoration:none;
}

.related-articles h3{
margin-top:0;
}

/* source: /static/css/audio.css */
.article-audio{

margin:2rem 0;

padding:1rem 1.25rem;

background:var(--surface);

border:1px solid var(--border);

border-radius:12px;

}

.article-audio-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:.75rem;

}

.article-audio-header strong{

font-size:1rem;

}

.article-audio-length{

font-size:.9rem;

color:var(--muted);

}

.lesson-play{

display:block;

width:100%;

padding:14px 18px;

border:1px solid var(--border);

border-radius:10px;

background:var(--hero-bg);

color:var(--text);

font:inherit;

font-weight:600;

cursor:pointer;

transition:background .15s ease;

}

.lesson-play:hover{

background:var(--surface2);

}

.article-audio audio{

display:block;

width:100%;

margin-top:.75rem;

}

.article-transcript{

margin-top:1rem;

border-top:1px solid var(--border);

padding-top:1rem;

}

.article-transcript summary{

cursor:pointer;

font-weight:600;

}

.article-transcript-content{

margin-top:1rem;

text-align:left;

}

.article-transcript-content article{

margin-bottom:2rem;

}

.article-transcript-content h3{

margin:0 0 .5rem;

font-size:1rem;

}

.article-transcript-content p{

margin:0;

line-height:1.8;

}