/* =========================================================================
   The Planters' Guild — Table of contents
   One TOC design for the whole site. Loaded by article.njk, guide-article.njk
   and field-manual.njk.

   The base rules below were extracted verbatim (2026-07-25) from the identical
   blocks that had been duplicated in guide-article.css and
   field-manual-article.css, so Field Manual and the guide-article pillars render
   exactly as before. The .toc-card--inline modifier is new, for article.njk —
   a single-column .wrap layout with no sidebar to hang a sticky card on.
   ========================================================================= */

/* ── Sidebar TOC (guide-article.njk, field-manual.njk) ── */
.toc-card {
  background: var(--kraft);
  padding: 28px 24px;
  margin-bottom: 24px;
  border-left: 2px solid var(--terracotta);
}
.toc-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 2px; }
.toc-list a {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--aged-ink);
  border-left: 2px solid transparent;
  margin-left: -14px;
  transition: all 0.18s ease;
}
.toc-list a:hover {
  color: var(--walnut);
  text-decoration: none;
  background: rgba(42, 33, 27, 0.04);
}
.toc-list a.is-active {
  color: var(--walnut);
  font-weight: 600;
  border-left-color: var(--terracotta);
  background: rgba(42, 33, 27, 0.06);
}

/* ── Inline TOC (article.njk) ──
   Mirrors the Quick Read's shell — same radius, same hairline, same 5px accent
   rule, same 760px cap — but in terracotta rather than forest-pine, so it reads
   as the Quick Read's sibling and not its twin. Two columns on desktop keeps a
   15-entry list to roughly 375px instead of 560px; one column below 640px. */
.toc-card--inline {
  margin: 0 0 40px;
  padding: 22px 28px 24px;
  max-width: 760px;
  border: 1px solid rgba(42, 33, 27, 0.12);
  border-left: 5px solid var(--terracotta);
  border-radius: 4px;
}
.toc-card--inline .toc-list { columns: 2; column-gap: 32px; }
.toc-card--inline .toc-list li { break-inside: avoid; margin-bottom: 0; }
/* text-decoration:none matters inline and not in the sidebar: inline, the card
   sits inside .wrap, where base.css applies the editorial link underline. */
.toc-card--inline .toc-list a {
  font-size: 14px;
  line-height: 1.4;
  margin-left: -12px;
  padding: 6px 10px;
  text-decoration: none;
  background-image: none;
  border-bottom: none;
}
.toc-card--inline .toc-list a:hover { text-decoration: none; }
/* Quick Reference is the last entry and points at layout-rendered markup rather
   than a body heading, so it carries the editorial accent to read as different. */
.toc-card--inline .toc-list a.toc-list__ref {
  color: var(--forest-pine);
  font-weight: 600;
}

/* Disclosure behaviour. The inline TOC ships as <details open>; guide-toc.js
   drops the open attribute below 640px so a phone gets a 60px bar instead of
   630px of links. With JS off it stays open, which is the safe failure. */
details.toc-card--inline > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.toc-card--inline > summary::-webkit-details-marker { display: none; }
details.toc-card--inline > summary .toc-card__label { margin-bottom: 0; }
details.toc-card--inline > summary .toc-card__count {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--aged-ink);
}
details.toc-card--inline > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--terracotta);
  border-bottom: 1.5px solid var(--terracotta);
  transform: rotate(45deg);
  margin-left: auto;
  margin-top: -3px;
  transition: transform 0.18s ease;
}
details.toc-card--inline[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
details.toc-card--inline[open] > summary { margin-bottom: 16px; }

@media (max-width: 640px) {
  .toc-card--inline { padding: 18px 20px 20px; }
  .toc-card--inline .toc-list { columns: 1; }
}