/* =============================================================================
   article.css — Shared article-reading shell
   -----------------------------------------------------------------------------
   SCOPE: The reusable "reading shell" common to every article page under
   /articles/<slug>/index.html AND the article listing page (/articles/index.html).
   Extracted from the inline <style> blocks that were duplicated across articles
   (claude-code-statusline, pochemu-dorogaya-model-dorozhe, yazyk-opredelyaet-myshlenie).

   WIRE-UP: load AFTER /styles.css and BEFORE any page-unique inline <style>:
     <link rel="stylesheet" href="/styles.css" />
     <link rel="stylesheet" href="/articles/article.css" />
   (article pages are 2 levels deep, but the absolute path "/articles/article.css"
   resolves from every slug.)

   DOES NOT contain:
     - Design tokens (--color-*, --space-*, --radius-*, --font-*) — already in
       :root of /styles.css. Referenced here via var().
     - Per-page data-viz / .article-visual__* chart CSS — stays inline per page
       (each article ships only the chart variants it uses; §10 chart-tokens are
       inline data colors per the article-visual skill).
     - Bespoke diagrams: .article-styles-accordion / .article-style-card*
       and .article-figure-thinking* (yazyk), .sl-* + .github-card* + .feature-list
       (statusline). Those remain inline.

   NOTE on collisions with /styles.css:
     - /styles.css defines a generic .back-link and a homepage carousel .article-card.
       Article pages restyle .back-link and use a DIFFERENT listing .article-card.
       This file loads AFTER /styles.css, so these rules win by source order.
       (article.css is linked ONLY on article + listing pages, never the homepage,
       so the homepage carousel .article-card is untouched.)
   ============================================================================= */

/* --- Active nav state (all article + listing pages) ----------------------- */
.nav a[aria-current="page"] {
  color: var(--color-text);
}

/* =============================================================================
   1. ARTICLE PAGE — layout shell
   ============================================================================= */
.article-shell {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.article-hero {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.article-eyebrow,
.article-meta,
.article-toc__label {
  font-family: var(--font-mono);
  color: var(--color-peach);
  font-size: 0.85rem;
  letter-spacing: 0;
}

h2.article-toc__label {
  margin: 0 0 var(--space-sm);
  font-weight: 500;
}

/* DRIFT RECONCILED: statusline=3rem, yazyk=3.75rem, pochemu=clamp(...).
   Canonical = the responsive clamp (matches .articles-hero h1 on the listing
   page; the 1024/768/480/360 overrides below still fine-tune small screens). */
.article-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin: var(--space-sm) 0 var(--space-md);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.article-lead {
  color: var(--color-text-dim);
  font-size: 1.1rem;
  max-width: 68ch;
  margin: 0 auto var(--space-md);
}

.article-content,
.article-toc {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-width: 0;
}

.article-content > section > p,
.article-content > section > ul,
.article-content > section > ol,
.article-content > section > blockquote {
  max-width: 68ch;
}

/* =============================================================================
   2. Table of contents
   ============================================================================= */
.article-toc {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.article-toc__list {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-md);
  color: var(--color-text-dim);
}

/* =============================================================================
   3. Divider, inline mark, back-link
   ============================================================================= */
.article-divider {
  width: 120px;
  height: 1px;
  margin: var(--space-xl) auto;
  border: none;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.5;
}

.article-mark {
  color: var(--color-primary);
  background: transparent;
  font-weight: inherit;
  font-style: inherit;
}

/* Overrides the generic .back-link in /styles.css for article pages. */
.back-link {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  margin-left: calc(var(--space-sm) * -1);
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--color-peach);
}

/* =============================================================================
   4. Prose typography
   ============================================================================= */
.article-content {
  font-size: 1.05rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.article-content h2 {
  margin-top: var(--space-2xl);
  scroll-margin-top: var(--space-3xl);
}

/* GENERALIZED: each page had ".article-content #<page-id>-title { margin-top: 0 }".
   Replaced with an ID-free utility class so the first section heading can drop its
   top margin without per-page CSS.
   Usage: add class="article-content__first-h2" to that first <h2>. */
.article-content__first-h2 {
  margin-top: 0;
}

.article-content a {
  color: var(--color-peach);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 185, 135, 0.5);
  overflow-wrap: anywhere;
}

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

.article-content > section {
  margin-bottom: var(--space-2xl);
}

/* .table-wrap included so table-bearing articles get the bottom margin;
   harmless on articles without tables. */
.article-content p,
.article-content ul,
.article-content ol,
.article-content blockquote,
.article-content pre,
.article-content .table-wrap {
  margin-bottom: var(--space-md);
}

.article-content h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: 1.35rem;
}

.article-content h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: 1.1rem;
  color: var(--color-text);
}

.article-content ul,
.article-content ol {
  padding-left: var(--space-lg);
  color: var(--color-text-dim);
}

.article-content li + li {
  margin-top: var(--space-xs);
}

.article-content strong {
  color: var(--color-text);
}

.article-content blockquote {
  background: var(--color-bg-card);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  padding: var(--space-md);
  margin-inline: 0;
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

.article-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-peach);
}

.article-content pre {
  overflow-x: auto;
  max-width: 100%;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}

.article-content pre code {
  color: var(--color-text);
  font-size: 0.86rem;
  white-space: pre;
}

/* =============================================================================
   5. Figures (image + caption)
   ============================================================================= */
.article-figure {
  margin: var(--space-lg) 0;
}

/* DRIFT RECONCILED: pochemu omitted "background"; statusline (newest) sets a bg so
   transparent PNGs read correctly. Border is identical either way
   (--color-border === rgba(255,255,255,0.08)). Canonical = statusline. */
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
}

/* DRIFT (genuine): statusline figcaption = mono + centered;
   pochemu figcaption = sans + left-aligned. Canonical default = statusline
   (mono, centered). Articles needing a left-aligned prose caption add a modifier
   class inline. */
.article-figure figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-dim);
  text-align: center;
}

/* =============================================================================
   5b. Callouts, to-do lists, toggles (Notion-origin blocks)
   ============================================================================= */
.article-content .article-callout {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-peach);
  border-radius: var(--radius-md);
}

.article-callout__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.article-callout__body {
  min-width: 0;
}

.article-callout__body > :first-child { margin-top: 0; }
.article-callout__body > :last-child { margin-bottom: 0; }

.article-content .article-todo {
  list-style: none;
  padding-left: 0;
}

.article-content .article-todo > li {
  margin-bottom: var(--space-xs);
}

.article-content details {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.article-content details > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
}

.article-content details[open] > summary {
  margin-bottom: var(--space-sm);
}

/* =============================================================================
   6. Tables (prose tables, not data-viz tables)
   ============================================================================= */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--color-border-hover) transparent;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--color-bg-card);
}

.article-content th,
.article-content td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.article-content th {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* :not(.article-visual__num) keeps data-viz numeric cells from being dimmed
   when a chart table lives inside .article-content. */
:where(.article-content) td:not(.article-visual__num) {
  color: var(--color-text-dim);
}

/* =============================================================================
   7. Sources list + footer CTA
   ============================================================================= */
.article-content .article-sources-list {
  list-style: none;
  padding-left: 0;
}

.article-sources-list li {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.article-sources-list li + li {
  margin-top: var(--space-sm);
}

.article-sources-list p {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-dim);
  font-size: 0.98rem;
}

/* Footer CTA — canonical for every article footer. */
.article-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.article-cta p {
  margin-bottom: var(--space-md);
  color: var(--color-text-dim);
}

/* =============================================================================
   7b. Cross-post attribution note (e.g. "also published on Habr")
   ============================================================================= */
.article-crosspost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--color-text-dim);
}

.article-crosspost__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-peach);
}

/* =============================================================================
   8. ARTICLE LISTING PAGE (/articles/index.html) — hero + card grid
   NOTE: this .article-card is the LISTING card (flex column with tags/cta),
   distinct from the homepage carousel .article-card in /styles.css. Scoped to
   .articles-main / .articles-grid so it never touches the homepage carousel.
   ============================================================================= */
.articles-main {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.articles-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  max-width: 800px;
  text-align: left;
}

.articles-hero__eyebrow,
.article-card__eyebrow {
  font-family: var(--font-mono);
  color: var(--color-peach);
  font-size: 0.85rem;
  letter-spacing: 0;
  margin-bottom: var(--space-sm);
}

.articles-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: var(--space-md);
}

.articles-hero__lead {
  color: var(--color-text-dim);
  font-size: 1.1rem;
  max-width: 68ch;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

.articles-main .article-card,
.articles-grid .article-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.articles-grid .article-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

.article-card h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.article-card__description {
  color: var(--color-text-dim);
  margin-bottom: var(--space-lg);
}

.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
}

.article-card__tag {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

.article-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: var(--space-lg);
}

/* =============================================================================
   8b. GUIDE section (/guide/) — chapter progress, prev/next nav, chapter list
   ============================================================================= */
.guide-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-peach);
}

.guide-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.guide-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.guide-nav__link:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.guide-nav__link--next {
  text-align: right;
}

.guide-nav__dir {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

.guide-nav__title {
  font-weight: 600;
  line-height: 1.25;
}

.guide-nav__link--placeholder {
  visibility: hidden;
}

/* Landing chapter list */
.guide-chapters {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: var(--space-sm);
  counter-reset: ch;
}

.guide-chapters > li {
  margin: 0;
}

.guide-chapter {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.guide-chapter:hover {
  border-color: var(--color-primary);
  transform: translateX(4px);
}

.guide-chapter__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-peach);
  min-width: 2ch;
}

.guide-chapter__title {
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .guide-nav {
    grid-template-columns: 1fr;
  }
  .guide-nav__link--next {
    text-align: left;
  }
}

/* =============================================================================
   9. Responsive — shell-level rules common to article + listing pages
   (Per-page .article-visual__* responsive overrides STAY inline.)
   ============================================================================= */
@media (max-width: 1024px) {
  .article-hero h1 {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  /* listing page */
  .articles-main {
    padding-top: var(--space-lg);
  }
  .articles-hero {
    padding: var(--space-xl) 0;
  }

  /* article page */
  .article-shell {
    padding: var(--space-lg) 0 var(--space-2xl);
  }

  .article-hero {
    text-align: left;
  }

  .article-hero h1 {
    font-size: 2.2rem;
    line-height: 1.12;
  }

  .article-lead,
  .article-content {
    font-size: 1rem;
  }

  .article-content h2 {
    margin-top: var(--space-xl);
    font-size: 1.65rem;
    line-height: 1.2;
    scroll-margin-top: calc(56px + var(--space-md));
  }

  .article-content h3 {
    font-size: 1.25rem;
  }

  .article-content > section {
    margin-bottom: var(--space-xl);
  }

  .article-toc {
    padding: var(--space-md);
  }

  .article-content ul,
  .article-content ol,
  .article-toc__list {
    padding-left: var(--space-md);
  }

  .article-content th,
  .article-content td {
    padding: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .article-page .container {
    padding: 0 var(--space-sm);
  }

  .article-page .header-inner {
    gap: var(--space-xs);
    padding: var(--space-xs) 0.75rem;
  }

  .article-page .logo {
    flex: 1 1 auto;
    font-size: 0.95rem;
  }

  .article-page .header-actions {
    flex: 0 0 auto;
  }

  .article-page .header-cta {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
  }

  .article-hero h1 {
    font-size: 1.72rem;
    line-height: 1.16;
  }

  .article-eyebrow,
  .article-meta,
  .article-toc__label {
    font-size: 0.75rem;
  }

  .article-toc,
  .article-content blockquote,
  .article-content pre {
    padding: var(--space-sm);
  }

  .article-content h2 {
    font-size: 1.45rem;
  }

  .article-content table {
    min-width: 560px;
  }
}

@media (max-width: 360px) {
  .article-page .logo {
    font-size: 0.86rem;
  }

  .article-page .header-cta {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    min-height: 40px;
  }

  .article-hero h1 {
    font-size: 1.58rem;
  }
}