/* ============================================================
   LEARN ARTICLE DETAIL VIEW — reuses .app/.intro/.site-title/.header-desc
   from guide.css, adds the article-specific sections below.
   ============================================================ */

.article-section { padding:18px 0; border-top:1px solid var(--line); }
.article-section:first-of-type { border-top:none; padding-top:6px; }

.article-h2 {
  font-size:var(--text-xl); font-weight:800; color:var(--t1); margin-bottom:12px;
}

.article-body p { font-size:var(--text-md); color:var(--t2); line-height:1.65; max-width:var(--measure); }
.article-body p + p { margin-top:10px; }

/* ── Usage stats ────────────────────────────────────────────── */
.usage-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:640px){ .usage-stats-grid{ grid-template-columns:1fr; } }

.usage-stat-tile {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:12px 14px; display:flex; flex-direction:column; gap:4px;
}
.usage-stat-label {
  font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3);
}
.usage-stat-value { font-size:var(--text-base); font-weight:700; color:var(--t1); line-height:1.4; }

.usage-source { font-size:var(--text-sm); color:var(--t3); font-style:italic; max-width:var(--measure); margin-top:4px; }

/* ── Watch-for / counterplay cards ──────────────────────────── */
.article-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .article-cards-grid{ grid-template-columns:1fr; } }

.article-card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.article-card-top { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); }
.article-card-icon { font-size:var(--text-base); flex-shrink:0; }
.article-card-title { font-size:var(--text-base); font-weight:700; color:var(--t1); }
.article-card-body { padding:10px 14px; font-size:var(--text-base); color:var(--t2); line-height:1.55; }

.article-card.is-watch { border-color:var(--danger-b); }
.article-card.is-watch .article-card-top { background:var(--danger-d); }

.article-card.is-counter { border-color:var(--ok-b); }
.article-card.is-counter .article-card-top { background:var(--ok-d); }
.article-card.is-counter .article-card-icon { color:var(--ok); }

/* ── Related guides ─────────────────────────────────────────── */
.related-guides-subhead {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t3); margin:14px 0 8px;
}
.related-guides-subhead:first-child { margin-top:0; }

/* Breathing room between the "problem" and "solution" guide groups. */
.related-guides-group + .related-guides-group { margin-top:26px; }

.related-guides-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
@media (max-width:640px){ .related-guides-grid{ grid-template-columns:1fr; } }

.related-guide-card {
  background:var(--surface); border:1px solid var(--accent-b); border-radius:var(--radius-lg);
  padding:12px 14px 26px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
  transition:background var(--transition), border-color var(--transition);
}
.related-guide-card:hover { background:var(--accent-d); border-color:var(--accent); }
.related-guide-top { display:flex; align-items:center; gap:8px; padding-right:34px; }
.related-guide-title { font-size:var(--text-base); font-weight:700; color:var(--t1); }
/* Bottom-right of the card instead of crowding the title row next to the
   corner ribbon. */
.related-guide-arrow { position:absolute; right:12px; bottom:8px; color:var(--accent); }
.related-guide-sub { font-size:var(--text-sm); color:var(--t2); line-height:1.4; }
.related-guide-team { display:flex; gap:4px; margin-top:2px; }

/* Corner ribbon — rotated banner clipped to the card via overflow:hidden
   above, same trick as any "SALE"/"NEW" ribbon badge. */
.guide-ribbon {
  position:absolute; top:11px; right:-32px; width:120px; padding:3px 0;
  text-align:center; transform:rotate(45deg); pointer-events:none;
  font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.guide-ribbon.is-problem { background:#dc2626; }
.guide-ribbon.is-solution { background:#16a34a; }

/* ── Learn page preview cards (site/public/learn.html) ──────── */
.learn-articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
@media (max-width:900px){ .learn-articles-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .learn-articles-grid{ grid-template-columns:1fr; } }

.learn-article-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px 16px 18px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
  transition:border-color var(--transition), background var(--transition);
}
.learn-article-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-brand); }
.learn-article-card:hover { border-color:var(--accent-b); background:var(--surface2); }
.learn-article-eyebrow {
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
}
.learn-article-title { font-size:var(--text-lg); font-weight:700; color:var(--t1); line-height:1.3; }
.learn-article-dek { font-size:var(--text-sm); color:var(--t2); line-height:1.55; flex:1; }
.learn-article-cta { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; color:var(--accent); margin-top:4px; }