/* Quick summary, compact rows with a Show all toggle (Ben, 2026-09-18).
   Loaded AFTER article-kit.css and any inline page styles it needs to beat;
   every selector is scoped under .tldr so it wins on specificity.
   Toggle script: /js/quick-summary.js. Markup: scripts/article_kit.py quick_summary(). */

/* ── Quick summary: compact rows ─────────────────────────────── */
.article-body .tldr { padding: 12px 14px 6px; margin: 0 0 20px; }
.tldr .tldr-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; }
.tldr-h .qs-count { font-size: 0.62rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
/* The article-body ul rule adds a 20px left margin, which knocked every row
   20px right of the heading. */
.article-body .tldr .qs-list { margin: 0; padding: 0; }
.article-body .tldr .qs-i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "for for" "name price" "why price";
  column-gap: 12px;
  padding: 8px 0;
  margin: 0;
  font-size: inherit;
  line-height: 1.3;
  border-bottom: 1px solid var(--border);
}
.article-body .tldr .qs-i:last-child { border-bottom: 0; }
.tldr .qs-for { grid-area: for; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--primary-hover, #d4991f); margin: 0 0 1px; }
.tldr .qs-pick { display: contents; }
.tldr .qs-pick a {
  grid-area: name; font-size: 0.9rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tldr .qs-price { grid-area: price; align-self: center; text-align: right; font-size: 0.86rem; font-weight: 700; color: var(--text); }
.tldr .qs-price small { display: block; font-size: 0.58rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.tldr .qs-why { grid-area: why; font-size: 0.72rem; line-height: 1.4; color: var(--text-dim); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rows past the 4th hide until "Show all" is tapped */
.tldr.qs-collapsed .qs-i:nth-child(n+5) { display: none; }
.qs-more { display: block; width: 100%; margin: 2px 0 6px; padding: 8px 0; border: 0; border-top: 1px solid var(--border); background: none; font-family: inherit; font-size: 0.74rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: center; }
.qs-more:hover { color: var(--primary-hover, #d4991f); }

@media (min-width: 900px) {
  .tldr .qs-pick a { font-size: 0.95rem; }
  .tldr .qs-why { font-size: 0.76rem; }
}