/* =========================================================
   SERVOMIX — ARTICLE
   File: css/pages/article.css
   Used by: article/. Markup and copy are the originals (the
   article body, contents links and related cards are drawn
   by js/pages/article.js); this file only lays them out.
   Every value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.article-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}

:where(#breadcrumbCategory, #startReadingButton, #copyArticleButton, .article-quick-links a, .article-toc a, #articleHelpful, #articleNotHelpful, .article-share-buttons > *, .article-code-copy, .article-faq-item summary, .related-article-card):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.article-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    padding-top:var(--s-5);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-breadcrumb a,
#breadcrumbCategory{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:32px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink-2);
    font:inherit;
    text-decoration:none;
    cursor:pointer;
}

.article-breadcrumb a:hover,
#breadcrumbCategory:hover{
    color:var(--accent-strong);
}

.article-breadcrumb > .icon{
    width:14px;
    height:14px;
    color:var(--ink-3);
}

#breadcrumbArticle{
    overflow:hidden;
    max-width:40ch;
    color:var(--ink);
    font-weight:var(--w-strong);
    white-space:nowrap;
    text-overflow:ellipsis;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.article-hero{
    padding-block:var(--s-6);
}

.article-hero-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:start;
}

@media (min-width:1024px){

    .article-hero-layout{
        grid-template-columns:minmax(0, 1fr) 360px;
        gap:var(--s-8);
    }
}

.article-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.article-hero-category{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
    text-decoration:none;
}

.article-hero h1{
    max-width:22ch;
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
    font-stretch:var(--wd-h1);
}

@media (min-width:1024px){

    .article-hero h1{
        font-size:min(var(--t-display), 5vw);
        line-height:1.05;
    }
}

.article-hero-description{
    max-width:60ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.article-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3) var(--s-4);
}

.article-author-mini,
.article-meta-item{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.article-author-avatar{
    width:36px;
    height:36px;
    overflow:hidden;
    border-radius:50%;
    background:var(--surface);
}

.article-author-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.article-meta-item > .icon{
    color:var(--accent);
}

.article-author-mini span,
.article-meta-item span,
.article-author-mini strong,
.article-meta-item strong{
    display:block;
    line-height:1.3;
}

.article-author-mini span,
.article-meta-item span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.article-author-mini strong,
.article-meta-item strong{
    font-size:var(--t-small);
}

.article-meta-divider{
    width:1px;
    height:28px;
    background:var(--line);
}

.article-last-updated{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-last-updated span{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.article-hero-panel{
    display:grid;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-float);
}

.article-hero-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.article-hero-panel-top .icon{
    color:var(--accent);
}

.article-hero-stat-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
}

.article-hero-stat{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface);
}

.article-hero-stat > .icon{
    flex:none;
    color:var(--accent);
}

.article-hero-stat span,
.article-hero-stat strong{
    display:block;
    line-height:1.3;
}

.article-hero-stat span{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.article-hero-stat strong{
    font-size:var(--t-small);
}

.article-progress-preview > div:first-child{
    display:flex;
    justify-content:space-between;
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-progress-preview strong{
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.article-progress-track{
    height:6px;
    margin-top:var(--s-2);
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
}

.article-progress-track span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.article-hero-actions{
    display:flex;
    gap:var(--s-2);
}

#startReadingButton,
#copyArticleButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-weight:var(--w-strong);
    cursor:pointer;
}

#startReadingButton{
    flex:1;
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

#startReadingButton:hover{
    background:var(--accent-strong);
}

#copyArticleButton{
    flex:none;
    width:var(--btn-h);
}

#copyArticleButton:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.article-copy-message:empty,
.article-feedback-message:empty{
    display:none;
}

.article-copy-message,
.article-feedback-message{
    color:var(--up);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   QUICK NAV (links drawn by the script)
--------------------------------------------------------- */

.article-quick-nav{
    position:sticky;
    top:calc(var(--nav-h) + var(--s-3));
    z-index:var(--z-raised);
    padding-block:var(--s-2);
}

.article-quick-nav-inner{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass-strong);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-card);
}

.article-quick-nav-title{
    display:flex;
    flex:none;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.article-quick-nav-title .icon{
    color:var(--accent);
}

.article-quick-links{
    display:flex;
    gap:var(--s-1);
    overflow-x:auto;
    scrollbar-width:none;
}

.article-quick-links a{
    flex:none;
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.article-quick-links a:hover{
    background:var(--surface-sunken);
    color:var(--ink);
}

.article-quick-links a.active{
    background:var(--accent);
    color:var(--ink-on-accent);
}


/* ---------------------------------------------------------
   BODY + SIDEBAR
--------------------------------------------------------- */

.article-main{
    padding-block:var(--s-6) var(--s-7);
}

.article-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:start;
}

@media (min-width:1024px){

    .article-layout{
        grid-template-columns:minmax(0, 1fr) 300px;
        gap:var(--s-8);
    }
}

.article-content{
    display:grid;
    gap:var(--s-5);
    min-width:0;
}

#dynamicArticleContent{
    display:grid;
    gap:var(--s-5);
    min-width:0;
    padding:var(--card-pad-lg);
    border:1px solid var(--line);
    border-radius:var(--r-panel);
    background:var(--surface);
}

#dynamicArticleContent:empty{
    display:none;
}

/* blocks drawn by the page script */
.article-section{
    display:grid;
    gap:var(--s-4);
    scroll-margin-top:calc(var(--nav-h) + var(--s-8));
}

.article-section > h2,
.dynamic-article-heading{
    max-width:none;
}

.article-section h2{
    font-size:var(--t-h2);
    line-height:var(--lh-heading);
    font-weight:var(--w-h2);
}

.article-section h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.article-section p,
.article-dynamic-list{
    max-width:72ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.7;
}

.article-section a:not([class]){
    color:var(--accent-strong);
}

.dynamic-heading-row{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.dynamic-heading-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.article-dynamic-list{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding-left:var(--s-5);
}

.article-dynamic-image{
    margin:0;
}

.article-dynamic-image img{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--r-card);
}

.article-dynamic-image figcaption{
    margin-top:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-table-wrapper{
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--r-card);
}

.article-table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
    font-size:var(--t-small);
}

.article-table th,
.article-table td{
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    text-align:left;
}

.article-table th{
    background:var(--surface-sunken);
    color:var(--ink);
    font-weight:var(--w-strong);
}

.article-table td{
    color:var(--ink-2);
}

.article-table tr:last-child td{
    border-bottom:0;
}

.table-badge{
    display:inline-block;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    line-height:22px;
}

.article-callout{
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:var(--r-control);
    background:var(--accent-tint);
}

.article-callout-icon{
    flex:none;
    color:var(--accent-strong);
}

.article-callout strong{
    display:block;
    color:var(--ink);
}

.article-callout p{
    color:var(--ink-2);
    font-size:var(--t-body);
}

.article-callout-tip{
    border-left-color:var(--up);
    background:var(--up-soft);
}

.article-callout-tip .article-callout-icon{
    color:var(--up);
}

.article-callout-warning{
    border-left-color:var(--warn);
    background:var(--warn-soft);
}

.article-callout-warning .article-callout-icon{
    color:var(--warn);
}

.article-code-block{
    overflow:hidden;
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.article-code-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);
    border-bottom:1px solid var(--on-accent-tint);
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.article-code-copy{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--on-accent-tint);
    border-radius:var(--r-pill);
    background:transparent;
    color:var(--console-ink);
    font:inherit;
    cursor:pointer;
}

.article-code-block pre{
    margin:0;
    padding:var(--s-4);
    overflow-x:auto;
    font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size:var(--t-small);
    line-height:1.6;
}

.article-faq-list{
    display:grid;
    gap:var(--s-2);
}

.article-faq-item{
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.article-faq-item[open]{
    border-color:var(--accent);
}

.article-faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    min-height:56px;
    padding:var(--s-3) var(--s-4);
    font-weight:var(--w-strong);
    cursor:pointer;
    list-style:none;
}

.article-faq-item summary::-webkit-details-marker{
    display:none;
}

.article-faq-item summary .icon{
    flex:none;
    transition:transform var(--dur-fast) var(--ease);
}

.article-faq-item[open] summary .icon{
    transform:rotate(180deg);
}

.article-faq-answer{
    padding:0 var(--s-4) var(--s-4);
}

.article-faq-answer p{
    font-size:var(--t-body);
}

.article-hosting-cta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.article-hosting-cta span{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.article-hosting-cta h3{
    color:var(--console-ink);
}

.article-hosting-cta p{
    color:var(--console-ink-2);
    font-size:var(--t-body);
}

.article-hosting-cta a,
.article-section .article-hosting-cta a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.article-dynamic-divider{
    width:100%;
    height:1px;
    margin:0;
    border:0;
    background:var(--line);
}

/* feedback, share, author */
.article-feedback,
.article-share,
.article-author-card{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.article-feedback > div:first-child > span,
.article-share > div:first-child > span{
    display:block;
    font-weight:var(--w-strong);
}

.article-feedback p,
.article-share p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-feedback-message{
    flex-basis:100%;
}

.article-feedback-actions,
.article-share-buttons{
    display:flex;
    gap:var(--s-2);
}

#articleHelpful,
#articleNotHelpful{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-4);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-weight:var(--w-strong);
    cursor:pointer;
}

#articleHelpful:hover,
#articleNotHelpful:hover,
#articleHelpful.active,
#articleNotHelpful.active{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.article-share-buttons > *{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
}

.article-share-buttons > *:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.article-author-card{
    justify-content:flex-start;
    flex-wrap:nowrap;
    align-items:flex-start;
}

.article-author-card-logo{
    flex:none;
    width:56px;
    height:56px;
    overflow:hidden;
    border-radius:var(--r-control);
}

.article-author-card-logo img{
    width:100%;
    height:100%;
}

.article-author-card > div:last-child{
    display:grid;
    justify-items:start;
    gap:var(--s-1);
}

.article-author-card span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.article-author-card h3{
    font-size:var(--t-h3);
}

.article-author-card p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-author-card a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

/* sidebar */
.article-sidebar{
    display:grid;
    gap:var(--s-4);
    min-width:0;
}

@media (min-width:1024px){

    .article-sidebar{
        position:sticky;
        top:calc(var(--nav-h) + var(--s-8));
    }
}

.article-sidebar-card{
    display:grid;
    gap:var(--s-3);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.article-sidebar-heading{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.article-sidebar-heading .icon{
    color:var(--accent);
}

.article-sidebar-heading h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.article-toc{
    display:grid;
    gap:2px;
}

.article-toc:empty{
    display:none;
}

.article-toc a{
    display:flex;
    align-items:center;
    min-height:36px;
    padding:0 var(--s-3);
    border-left:2px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
    text-decoration:none;
}

.article-toc a:hover{
    color:var(--ink);
}

.article-toc a.active{
    border-left-color:var(--accent);
    color:var(--accent-strong);
    font-weight:var(--w-strong);
}

.article-sidebar-text{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-support-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:40px;
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.article-support-button:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.article-topic-tags{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.article-topic-tags a{
    min-height:32px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink);
    font-size:var(--t-small);
    line-height:32px;
    text-decoration:none;
}

.article-topic-tags a:hover{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.article-sidebar-hosting{
    display:grid;
    justify-items:start;
    gap:var(--s-2);
    padding:var(--card-pad);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.article-sidebar-hosting-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.article-sidebar-hosting > span{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.article-sidebar-hosting h3{
    color:var(--console-ink);
    font-size:var(--t-h3);
}

.article-sidebar-hosting p{
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.article-sidebar-hosting a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-4);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}


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

.related-articles-section{
    padding-block:var(--s-7) var(--s-8);
    border-top:1px solid var(--line);
}

.related-articles-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s-3);
    margin-bottom:var(--s-5);
}

.related-articles-heading span{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.related-articles-heading h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.related-articles-heading a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--accent-strong);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.related-articles-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .related-articles-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){

    .related-articles-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.related-article-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    text-decoration:none;
    transition:box-shadow var(--dur-fast) var(--ease);
}

.related-article-card:hover{
    box-shadow:var(--shadow-card);
}

.related-article-image{
    aspect-ratio:16 / 9;
    background:linear-gradient(135deg, var(--accent-soft), var(--surface-sunken));
}

.related-article-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.related-article-content{
    display:grid;
    gap:var(--s-2);
    padding:var(--card-pad);
}

.related-article-category{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
    text-transform:uppercase;
}

.related-article-content h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.related-article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-small);
}

/* nothing to jump to until the script has drawn sections */
.article-quick-nav:has(.article-quick-links:empty){
    display:none;
}