/* =====================================================
   CorpoCoders — Articles / Knowledge Hub  (page-specific)

   REQUIRES site.css → components.css → layout.css first (shared shell:
   ambient bg, topbar, .st-section scaffolding, footer). Styles the four
   article surfaces (CLAUDE.md Phase 6):

     • taxonomy list header (category / author / tag) + article grid
     • single-article details: breadcrumb, hero, cover, sticky TOC,
       prose body, author box, tags, share rail, related grid
     • fixed reading-progress bar

   Prefix `ar` = "articles". Cards reuse the shared .cs-slab / .cs-cell
   primitive; only card anatomy is defined here.
===================================================== */


/* =========================
   READING PROGRESS BAR

   Fixed hairline at the very top of the viewport; width set by article.js
   from scroll position. Only rendered on the details page.
========================= */

.ar-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--cc-z-sticky, 100);
    width: 0;
    height: 3px;
    background: var(--cc-grad);
    transition: width .08s linear;
}


/* =========================
   BREADCRUMB
========================= */

.ar-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 28px 0 0;
    color: var(--cc-tx-3);
    font-size: 13px;
}

.ar-crumb a {
    color: var(--cc-tx-3);
    transition: color var(--cc-t);
}

.ar-crumb a:hover {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-crumb a:hover {
    color: var(--cc-brand-1);
}

.ar-crumb i {
    font-size: 15px;
    opacity: .6;
}

.ar-crumb-current {
    color: var(--cc-tx-2);
    /* Long titles must not blow out the row */
    max-width: 46ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================
   TAXONOMY LIST HEADER  (category / author / tag)

   A framed panel that introduces the archive being viewed. Three flavours
   share one shell via modifier classes; the author flavour adds an avatar
   and social row, the tag flavour is more compact.
========================= */

.ar-head {
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    padding: 40px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background:
        radial-gradient(80% 140% at 0% 0%, rgba(0, 194, 255, .14), transparent 55%),
        radial-gradient(80% 140% at 100% 100%, rgba(15, 61, 222, .18), transparent 55%),
        var(--cc-bg-2);
}

.ar-head-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Big rounded icon tile for category/tag headers */
.ar-head-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: var(--cc-r-md);
    background: var(--cc-grad);
    color: #fff;
    font-size: 34px;
    box-shadow: 0 12px 30px -10px rgba(15, 61, 222, .6);
}

/* Circular avatar for the author header */
.ar-head-avatar {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-radius: 50%;
    border: 2px solid var(--cc-border-str);
    background: var(--cc-grad-soft);
    color: var(--cc-tx-1);
    font-size: 32px;
    font-weight: 700;
    overflow: hidden;
}

.ar-head-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-head-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cc-tx-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ar-head-eyebrow i {
    color: var(--cc-brand-2);
    font-size: 14px;
}

:root[data-theme="light"] .ar-head-eyebrow i {
    color: var(--cc-brand-1);
}

.ar-head h1 {
    margin-top: 8px;
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    line-height: 1.1;
}

.ar-head-desc {
    margin-top: 12px;
    max-width: 64ch;
    color: var(--cc-tx-2);
    font-size: 15px;
    line-height: 1.6;
}

/* Meta row under an author name (role • location • joined) */
.ar-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
    color: var(--cc-tx-3);
    font-size: 13px;
}

.ar-head-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ar-head-meta i {
    font-size: 15px;
}

/* Author social + follow row */
.ar-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.ar-head-social {
    display: flex;
    gap: 8px;
}

.ar-head-social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    background: var(--cc-surface);
    color: var(--cc-tx-3);
    font-size: 16px;
    transition: color var(--cc-t), border-color var(--cc-t), background var(--cc-t), transform var(--cc-t);
}

.ar-head-social a:hover {
    color: var(--cc-brand-2);
    border-color: var(--cc-border-str);
    background: var(--cc-grad-soft);
    transform: translateY(-2px);
}

:root[data-theme="light"] .ar-head-social a:hover {
    color: var(--cc-brand-1);
}


/* =========================
   TOOLBAR  (result count + sort)
========================= */

.ar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 36px 0 24px;
}

.ar-count {
    color: var(--cc-tx-3);
    font-size: 14px;
}

.ar-count strong {
    color: var(--cc-tx-1);
    font-weight: 600;
}

.ar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-tx-3);
    font-size: 13px;
}


/* =========================
   ARTICLE CARD  (shared by every list)

   Reuses .cs-slab / .cs-cell. Same anatomy as the home preview card but
   defined here so the article pages are self-contained.
========================= */

.ar-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ar-card {
    --cc-glow-size: 300px;
    --cc-corner-size: 36px;

    display: flex;
    flex-direction: column;
}

.ar-card-cover {
    position: relative;
    aspect-ratio: 16 / 8;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--cc-border);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(0, 194, 255, .18), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(15, 61, 222, .22), transparent 55%),
        var(--cc-bg-2);
}

.ar-card-cover i {
    font-size: 46px;
    color: var(--cc-tx-1);
    opacity: .9;
    transition: transform var(--cc-t);
}

.ar-card-cover img,
.ar-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cc-t);
}

.ar-card:hover .ar-card-cover img { transform: scale(1.04); }

.ar-card:hover .ar-card-cover i {
    transform: scale(1.08);
}

.ar-card-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cc-grad);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ar-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.ar-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--cc-tx-3);
    font-size: 12px;
    font-weight: 600;
}

.ar-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-card-cat {
    color: var(--cc-brand-1);
}

.ar-card-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cc-tx-3);
}

.ar-card h3 {
    font-size: 1.18rem;
    line-height: 1.32;
    transition: color var(--cc-t);
}

.ar-card:hover h3 {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-card:hover h3 {
    color: var(--cc-brand-1);
}

.ar-card-excerpt {
    margin-top: 10px;
    color: var(--cc-tx-2);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ar-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
}

.ar-card-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border);
    color: var(--cc-tx-1);
    font-size: 12px;
    font-weight: 700;
}

.ar-card-author {
    color: var(--cc-tx-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.ar-card-date {
    color: var(--cc-tx-3);
    font-size: 11.5px;
}


/* =========================
   DETAILS PAGE LAYOUT

   Two columns: a sticky Table of Contents rail (left) and the article
   (right). Collapses to a single column below 960px with the TOC hidden.
========================= */

.ar-detail {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    padding: 32px 0 24px;
}

/* Sticky TOC */
.ar-toc {
    position: sticky;
    top: 24px;
    align-self: start;
}

.ar-toc-title {
    margin-bottom: 14px;
    color: var(--cc-tx-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ar-toc ul {
    list-style: none;
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--cc-border);
}

.ar-toc a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--cc-tx-3);
    font-size: 13.5px;
    line-height: 1.4;
    transition: color var(--cc-t), border-color var(--cc-t);
}

.ar-toc a:hover {
    color: var(--cc-tx-1);
}

/* Nested (h3) items indent further */
.ar-toc .ar-toc-sub a {
    padding-left: 30px;
    font-size: 13px;
}

/* Active item set by article.js scroll-spy */
.ar-toc a.is-active {
    color: var(--cc-brand-2);
    border-left-color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-toc a.is-active {
    color: var(--cc-brand-1);
    border-left-color: var(--cc-brand-1);
}


/* =========================
   ARTICLE HERO  (inside the right column)
========================= */

.ar-article-head {
    margin-bottom: 28px;
}

.ar-article-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border-str);
    color: var(--cc-tx-1);
    font-size: 12px;
    font-weight: 600;
}

.ar-article-cat i {
    color: var(--cc-brand-2);
    font-size: 14px;
}

:root[data-theme="light"] .ar-article-cat i {
    color: var(--cc-brand-1);
}

.ar-article-title {
    margin-top: 18px;
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.12;
}

.ar-article-standfirst {
    margin-top: 18px;
    max-width: 68ch;
    color: var(--cc-tx-2);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.6;
}

/* Byline row: avatar + author + meta */
.ar-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--cc-border);
}

.ar-byline-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border);
    color: var(--cc-tx-1);
    font-size: 16px;
    font-weight: 700;
}

.ar-byline-who {
    line-height: 1.35;
}

.ar-byline-name {
    color: var(--cc-tx-1);
    font-weight: 600;
}

.ar-byline-name a:hover {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-byline-name a:hover {
    color: var(--cc-brand-1);
}

.ar-byline-meta {
    color: var(--cc-tx-3);
    font-size: 13px;
}

.ar-byline-meta span+span::before {
    content: '·';
    margin: 0 8px;
    opacity: .6;
}

/* Push share cluster to the right of the byline on wide screens */
.ar-byline-share {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ar-share-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    background: var(--cc-surface);
    color: var(--cc-tx-3);
    font-size: 16px;
    cursor: pointer;
    transition: color var(--cc-t), border-color var(--cc-t), background var(--cc-t), transform var(--cc-t);
}

.ar-share-btn:hover {
    color: var(--cc-brand-2);
    border-color: var(--cc-border-str);
    background: var(--cc-grad-soft);
    transform: translateY(-2px);
}

:root[data-theme="light"] .ar-share-btn:hover {
    color: var(--cc-brand-1);
}

/* Cover banner */
.ar-cover {
    position: relative;
    aspect-ratio: 16 / 7;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    margin-bottom: 36px;
    background:
        radial-gradient(90% 130% at 0% 0%, rgba(0, 194, 255, .18), transparent 55%),
        radial-gradient(90% 130% at 100% 100%, rgba(15, 61, 222, .22), transparent 55%),
        var(--cc-bg-2);
}

.ar-cover i {
    font-size: 72px;
    color: var(--cc-tx-1);
    opacity: .85;
}


/* =========================
   PROSE BODY

   The rendered article HTML. Scoped typography so the shared reset does
   not have to know about long-form content. Comfortable measure, clear
   heading rhythm, styled code blocks, quotes, lists, tables and images.
========================= */

.ar-prose {
    max-width: 72ch;
    color: var(--cc-tx-2);
    font-size: 1.06rem;
    line-height: 1.8;
}

.ar-prose> :first-child {
    margin-top: 0;
}

.ar-prose h2 {
    margin: 2.2em 0 .7em;
    font-size: 1.65rem;
    line-height: 1.25;
    color: var(--cc-tx-1);
    scroll-margin-top: 24px;
}

.ar-prose h3 {
    margin: 1.8em 0 .6em;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--cc-tx-1);
    scroll-margin-top: 24px;
}

.ar-prose p {
    margin: 1.1em 0;
}

.ar-prose a {
    color: var(--cc-brand-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--cc-t);
}

.ar-prose a:hover {
    color: var(--cc-brand-1);
}

:root[data-theme="light"] .ar-prose a {
    color: var(--cc-brand-1);
}

.ar-prose strong {
    color: var(--cc-tx-1);
    font-weight: 600;
}

.ar-prose ul,
.ar-prose ol {
    margin: 1.1em 0;
    padding-left: 1.4em;
}

.ar-prose li {
    margin: .5em 0;
    padding-left: .3em;
}

.ar-prose li::marker {
    color: var(--cc-tx-3);
}

/* Inline code */
.ar-prose :not(pre)>code {
    font-family: var(--cc-mono);
    font-size: .88em;
    padding: .15em .45em;
    border-radius: 6px;
    border: 1px solid var(--cc-border);
    background: var(--cc-surface);
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-prose :not(pre)>code {
    color: var(--cc-brand-1);
}

/* Code block */
.ar-prose pre {
    position: relative;
    margin: 1.6em 0;
    padding: 20px 22px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-2);
    overflow-x: auto;
    font-family: var(--cc-mono);
    font-size: .9rem;
    line-height: 1.7;
}

.ar-prose pre code {
    color: var(--cc-tx-1);
}

/* Copy button injected by article.js */
.ar-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    background: var(--cc-surface);
    color: var(--cc-tx-3);
    font-family: var(--cc-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--cc-t), color var(--cc-t), border-color var(--cc-t);
}

.ar-prose pre:hover .ar-copy-btn {
    opacity: 1;
}

.ar-copy-btn:hover {
    color: var(--cc-brand-2);
    border-color: var(--cc-border-str);
}

.ar-copy-btn.is-copied {
    color: var(--cc-success);
    border-color: var(--cc-success);
    opacity: 1;
}

/* Blockquote */
.ar-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--cc-brand-2);
    color: var(--cc-tx-1);
    font-size: 1.15rem;
    font-style: italic;
}

:root[data-theme="light"] .ar-prose blockquote {
    border-left-color: var(--cc-brand-1);
}

/* Images / figures */
.ar-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    margin: 1.6em 0;
}

.ar-prose figcaption {
    margin-top: -1em;
    margin-bottom: 1.6em;
    color: var(--cc-tx-3);
    font-size: 13px;
    text-align: center;
}

/* Tables */
.ar-prose table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    font-size: .95rem;
}

.ar-prose th,
.ar-prose td {
    padding: 11px 14px;
    border: 1px solid var(--cc-border);
    text-align: left;
}

.ar-prose th {
    background: var(--cc-surface);
    color: var(--cc-tx-1);
    font-weight: 600;
}

.ar-prose hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--cc-border);
}


/* =========================
   TAGS  (below the article body)
========================= */

.ar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--cc-border);
}

.ar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    background: var(--cc-surface);
    color: var(--cc-tx-2);
    font-size: 13px;
    font-weight: 500;
    transition: color var(--cc-t), border-color var(--cc-t), background var(--cc-t);
}

.ar-tag i {
    color: var(--cc-tx-3);
    font-size: 14px;
}

.ar-tag:hover {
    color: var(--cc-tx-1);
    border-color: var(--cc-border-str);
    background: var(--cc-grad-soft);
}

.ar-tag:hover i {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-tag:hover i {
    color: var(--cc-brand-1);
}


/* =========================
   AUTHOR BOX  (end of article)
========================= */

.ar-authorbox {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    padding: 28px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-2);
}

.ar-authorbox-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border);
    color: var(--cc-tx-1);
    font-size: 24px;
    font-weight: 700;
}

.ar-authorbox-eyebrow {
    color: var(--cc-tx-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ar-authorbox h4 {
    margin-top: 4px;
    font-size: 1.2rem;
}

.ar-authorbox h4 a:hover {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-authorbox h4 a:hover {
    color: var(--cc-brand-1);
}

.ar-authorbox-bio {
    margin-top: 8px;
    color: var(--cc-tx-2);
    font-size: 14px;
    line-height: 1.6;
}

.ar-authorbox-links {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}


/* =========================
   SHARE BAR  (below the article body)

   A framed callout that invites sharing — distinct from the compact share
   cluster in the byline. Pills light to brand on hover; the copy-link pill
   flips to a success state via article.js.
========================= */

.ar-sharebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-top: 36px;
    padding: 20px 24px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-2);
}

.ar-sharebar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cc-tx-2);
    font-size: 14px;
    font-weight: 600;
}

.ar-sharebar-label i {
    color: var(--cc-brand-2);
    font-size: 18px;
}

:root[data-theme="light"] .ar-sharebar-label i {
    color: var(--cc-brand-1);
}

.ar-sharebar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ar-share-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    background: var(--cc-surface);
    color: var(--cc-tx-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--cc-t), border-color var(--cc-t), background var(--cc-t), transform var(--cc-t);
}

.ar-share-pill i {
    font-size: 15px;
}

.ar-share-pill:hover {
    color: var(--cc-tx-1);
    border-color: var(--cc-border-str);
    background: var(--cc-grad-soft);
    transform: translateY(-2px);
}

.ar-share-pill.is-copied {
    color: var(--cc-success);
    border-color: var(--cc-success);
}


/* =========================
   COMMENTS  (thread-based discussion)

   A composer at the top, then a nested thread. Replies indent under their
   parent behind a hairline rail. Depth is capped in the markup so deep
   chains stay readable on narrow screens.
========================= */

.ar-comments {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--cc-border);
    scroll-margin-top: 24px;
}

.ar-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.ar-comments-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
}

.ar-comments-head h2 i {
    color: var(--cc-brand-2);
    font-size: 22px;
}

:root[data-theme="light"] .ar-comments-head h2 i {
    color: var(--cc-brand-1);
}

.ar-comments-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border-str);
    color: var(--cc-tx-1);
    font-size: 12.5px;
    font-weight: 700;
}

.ar-comments-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-tx-3);
    font-size: 13px;
}

/* --- Composer --- */
.ar-composer {
    display: flex;
    gap: 14px;
    margin-bottom: 36px;
}

.ar-composer-avatar {
    background: var(--cc-grad);
    color: #fff;
    border-color: transparent;
}

.ar-composer-main {
    flex: 1;
    min-width: 0;
}

.ar-composer-field {
    width: 100%;
    min-height: 96px;
    padding: 14px 16px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-surface);
    color: var(--cc-tx-1);
    font-family: var(--cc-sans);
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--cc-t), box-shadow var(--cc-t);
}

.ar-composer-field::placeholder {
    color: var(--cc-tx-3);
}

.ar-composer-field:focus {
    outline: none;
    border-color: var(--cc-brand-2);
    box-shadow: 0 0 0 3px rgba(0, 194, 255, .16);
}

:root[data-theme="light"] .ar-composer-field:focus {
    border-color: var(--cc-brand-1);
    box-shadow: 0 0 0 3px rgba(15, 61, 222, .12);
}

.ar-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.ar-composer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cc-tx-3);
    font-size: 12.5px;
}

.ar-composer-hint i {
    font-size: 14px;
}

/* --- Thread --- */
.ar-thread {
    display: grid;
    gap: 26px;
}

.ar-comment {
    scroll-margin-top: 24px;
}

.ar-comment-row {
    display: flex;
    gap: 14px;
}

.ar-comment-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cc-grad-soft);
    border: 1px solid var(--cc-border);
    color: var(--cc-tx-1);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.ar-comment-main {
    flex: 1;
    min-width: 0;
}

.ar-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.ar-comment-name {
    color: var(--cc-tx-1);
    font-size: 14.5px;
    font-weight: 600;
}

.ar-comment-name:hover {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-comment-name:hover {
    color: var(--cc-brand-1);
}

/* "Author" / "Staff" pill next to a name */
.ar-comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cc-grad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ar-comment-time {
    color: var(--cc-tx-3);
    font-size: 12.5px;
}

.ar-comment-time::before {
    content: '·';
    margin-right: 8px;
    opacity: .6;
}

.ar-comment-text {
    color: var(--cc-tx-2);
    font-size: 14.5px;
    line-height: 1.7;
}

.ar-comment-text p {
    margin: 0 0 .6em;
}

.ar-comment-text p:last-child {
    margin-bottom: 0;
}

.ar-comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.ar-comment-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--cc-r-sm);
    background: transparent;
    color: var(--cc-tx-3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--cc-t), background var(--cc-t);
}

.ar-comment-btn i {
    font-size: 15px;
}

.ar-comment-btn:hover {
    color: var(--cc-tx-1);
    background: var(--cc-surface);
}

/* Liked state — heart fills and turns brand */
.ar-comment-btn.is-liked {
    color: var(--cc-brand-2);
}

:root[data-theme="light"] .ar-comment-btn.is-liked {
    color: var(--cc-brand-1);
}

/* Nested replies sit behind a hairline rail */
.ar-comment-children {
    display: grid;
    gap: 24px;
    margin-top: 24px;
    padding-left: 22px;
    border-left: 1px solid var(--cc-border);
}

/* --- Inline reply form (built/toggled by article.js) --- */
.ar-reply-form {
    margin-top: 14px;
}

.ar-reply-form .ar-composer-field {
    min-height: 72px;
    font-size: 14px;
}

.ar-reply-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* --- Load more --- */
.ar-comments-more {
    margin-top: 32px;
    text-align: center;
}


/* =========================
   RELATED ARTICLES
========================= */

.ar-related {
    margin-top: 8px;
}

.ar-related-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}


/* =========================
   EMPTY STATE
========================= */

.ar-empty {
    padding: 72px 24px;
    text-align: center;
    border: 1px dashed var(--cc-border-str);
    border-radius: var(--cc-r-lg);
    color: var(--cc-tx-3);
}

.ar-empty i {
    font-size: 40px;
    color: var(--cc-tx-3);
}

.ar-empty h3 {
    margin-top: 14px;
    color: var(--cc-tx-1);
}

.ar-empty p {
    margin-top: 8px;
}


/* =========================
   RESPONSIVE  (§1.10)
========================= */

@media (max-width: 960px) {

    /* TOC rail is progressive enhancement — drop it, article goes full width */
    .ar-detail {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ar-toc {
        display: none;
    }

    .ar-prose {
        max-width: none;
    }

    .ar-head {
        padding: 32px 26px;
    }
}

@media (max-width: 560px) {
    .ar-head {
        padding: 26px 20px;
    }

    .ar-head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ar-head-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        font-size: 28px;
    }

    .ar-head-avatar {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        font-size: 26px;
    }

    /* Byline share drops below the author on narrow screens */
    .ar-byline-share {
        margin-left: 0;
        width: 100%;
    }

    .ar-authorbox {
        flex-direction: column;
        gap: 14px;
        padding: 22px;
    }

    /* Comments: shrink the reply rail so deep threads keep breathing room */
    .ar-comment-children {
        padding-left: 14px;
    }

    .ar-comment-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 12.5px;
    }

    .ar-composer {
        gap: 10px;
    }

    .ar-grid,
    .ar-related-grid {
        grid-template-columns: 1fr;
    }
}