/* Shared article teaching compositions. Archetypes vary hierarchy, never brand or meaning. */
.articles-answer-ledger,
.articles-learning-device {
  max-width: none;
  margin: 0 0 var(--articles-space-7);
  border: 1px solid var(--articles-line);
  border-radius: var(--articles-radius-lg);
  overflow: hidden;
  background:
    linear-gradient(145deg, var(--module-glow, rgba(244, 170, 37, 0.1)), transparent 42%),
    var(--articles-panel);
  box-shadow: var(--articles-shadow-sm);
}

.articles-answer-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
}

.articles-answer-ledger__scenario {
  padding: clamp(1.35rem, 4vw, 2rem);
}

.articles-answer-ledger__scenario > span,
.articles-device-kicker {
  display: block;
  margin: 0 0 0.65rem;
  color: var(--module-accent, var(--articles-gold-light));
  font-size: var(--articles-text-xs);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.articles-answer-ledger__scenario h2 {
  margin: 0;
  color: var(--articles-ink-strong);
  font-family: var(--articles-font-serif);
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.articles-answer-ledger__scenario p {
  margin: 1rem 0 0;
  color: var(--articles-muted);
  font-size: var(--articles-text-base);
  line-height: 1.65;
}

.articles-answer-ledger__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-left: 1px solid var(--articles-line-soft);
  background: rgba(5, 11, 22, 0.38);
}

.articles-answer-ledger__facts > div {
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--articles-line-soft);
  border-bottom: 1px solid var(--articles-line-soft);
}

.articles-answer-ledger__facts > div:nth-child(even) { border-right: 0; }
.articles-answer-ledger__facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.articles-answer-ledger__facts .is-risk { box-shadow: inset 0 3px rgba(255, 180, 171, 0.58); }
.articles-answer-ledger__facts .is-proof { box-shadow: inset 0 3px rgba(120, 221, 185, 0.58); }

.articles-answer-ledger__facts dt {
  margin: 0 0 0.35rem;
  color: var(--articles-muted-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.articles-answer-ledger__facts dd {
  margin: 0;
  color: #e0e8f2;
  font-size: var(--articles-text-sm);
  line-height: 1.5;
}

.articles-learning-device { padding: clamp(1.2rem, 4vw, 1.8rem); }
.articles-learning-device > header { margin-bottom: var(--articles-space-5); }
.articles-learning-device > header h2 { margin: 0; }
.articles-learning-device > header > p:last-child { margin: 0.65rem 0 0; color: var(--articles-muted); }
.articles-device-kicker { margin-bottom: 0.45rem; }
.articles-device-index { color: var(--module-accent, var(--articles-gold-light)); font-size: var(--articles-text-xs); font-weight: 850; }

.articles-selection__options,
.articles-case-comparison__cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.75rem;
}

.articles-selection__options article,
.articles-case-comparison__cases article {
  min-width: 0;
  border: 1px solid var(--articles-line-soft);
  border-radius: var(--articles-radius-md);
  padding: 1rem;
  background: rgba(5, 11, 22, 0.48);
}

.articles-selection__options article.is-recommended { border-color: var(--module-accent, var(--articles-gold)); }
.articles-selection__options h3,
.articles-case-comparison__cases h3 { margin: 0.35rem 0 0.8rem; font-size: 1.15rem; }
.articles-selection__options dl { margin: 0; }
.articles-selection__options dl > div { padding: 0.55rem 0; border-top: 1px solid var(--articles-line-soft); }
.articles-selection__options dt { color: var(--articles-muted-soft); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.articles-selection__options dd { margin: 0.18rem 0 0; color: #dce5f1; font-size: var(--articles-text-sm); line-height: 1.45; }

.articles-device-conclusion {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--module-accent, var(--articles-gold));
  color: #dce5f1;
  background: rgba(5, 11, 22, 0.42);
}

.articles-flow__nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.articles-flow__nodes li {
  position: relative;
  min-width: 0;
  margin: 0;
  border-top: 2px solid var(--module-accent, var(--articles-gold));
  padding: 0.9rem;
  background: rgba(5, 11, 22, 0.45);
}

.articles-flow__nodes h3 { margin: 0.35rem 0 0.5rem; font-size: 1rem; }
.articles-flow__nodes p { margin: 0.35rem 0; font-size: var(--articles-text-sm); line-height: 1.5; }
.articles-flow__edges { margin-bottom: 0; color: var(--articles-muted); font-size: var(--articles-text-sm); }

.articles-case-comparison__assumptions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--articles-line-soft);
  border-radius: var(--articles-radius-sm);
}
.articles-case-comparison__assumptions ul { margin: 0; }
.articles-case-comparison__cases p { font-size: var(--articles-text-sm); line-height: 1.5; }

.articles-timeline > ol { margin: 0; padding: 0; list-style: none; }
.articles-timeline > ol > li {
  display: grid;
  grid-template-columns: minmax(4rem, 0.22fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0 0 1.4rem;
}
.articles-timeline > ol > li > span { color: var(--module-accent, var(--articles-gold-light)); font-weight: 850; }
.articles-timeline > ol > li > div { position: relative; border-left: 2px solid var(--articles-line); padding-left: 1rem; }
.articles-timeline > ol > li > div::before { position: absolute; top: 0.2rem; left: -0.42rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--module-accent, var(--articles-gold)); content: ""; }
.articles-timeline h3 { margin: 0; font-size: 1.08rem; }
.articles-timeline li p { margin: 0.35rem 0 0; font-size: var(--articles-text-sm); }

.articles-faq details { border-top: 1px solid var(--articles-line-soft); }
.articles-faq summary { min-height: 2.75rem; padding: 0.9rem 0; color: var(--articles-ink-strong); cursor: pointer; font-weight: 800; }
.articles-faq details > div { padding: 0 0 0.8rem; color: var(--articles-muted); }

/* Controlled variety: hierarchy shifts subtly by reader task. */
.articles-reader--diagnostic .articles-answer-ledger { border-color: rgba(255, 180, 171, 0.46); }
.articles-reader--calculation .articles-formula { background: linear-gradient(180deg, rgba(130, 200, 245, 0.08), transparent), var(--articles-panel); }
.articles-reader--integration .articles-steps { border-left: 2px solid var(--module-accent, var(--articles-gold)); padding-left: 2rem; }
.articles-reader--evolution .articles-timeline { background: linear-gradient(160deg, rgba(199, 171, 238, 0.09), transparent 45%), var(--articles-panel); }

@media (max-width: 47rem) {
  .articles-answer-ledger { grid-template-columns: minmax(0, 1fr); }
  .articles-answer-ledger__facts { border-top: 1px solid var(--articles-line-soft); border-left: 0; }
}

@media (max-width: 27rem) {
  .articles-answer-ledger__scenario { padding: 1.15rem; }
  .articles-answer-ledger__facts { grid-template-columns: minmax(0, 1fr); }
  .articles-answer-ledger__facts > div,
  .articles-answer-ledger__facts > div:nth-child(even),
  .articles-answer-ledger__facts > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--articles-line-soft); }
  .articles-answer-ledger__facts > div:last-child { border-bottom: 0; }
  .articles-learning-device { padding: 1rem; border-radius: var(--articles-radius-md); }
  .articles-case-comparison__assumptions,
  .articles-timeline > ol > li { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .articles-answer-ledger,
  .articles-learning-device { border-color: CanvasText; }
}

@media print {
  .articles-answer-ledger,
  .articles-learning-device { break-inside: avoid; border-color: #777; color: #111; background: #fff; box-shadow: none; }
  .articles-answer-ledger__scenario h2,
  .articles-answer-ledger__facts dd,
  .articles-learning-device h2,
  .articles-learning-device h3 { color: #000; }
}