/* ==========================================================================
   PLAYBOOK PAGES + PLAYBOOK INDEX
   Uses the same tokens as everything else. No new colours, no new radius.
   ========================================================================== */

/* ==========================================================================
   PLAYBOOK ARTICLE
   ========================================================================== */
.pb-head { padding-block: var(--s-7) var(--s-7); border-bottom: var(--border); }
.pb-head h1 { max-width: 22ch; }

.pb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.pb-meta__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.pb-meta__item .icon { width: 0.95rem; height: 0.95rem; }
.pb-meta__topic {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
}
.pb-meta__topic:hover { text-decoration: underline; text-underline-offset: 2px; }

.pb-body { max-width: var(--w-read); padding-block: var(--s-8); }
.pb-intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-ink-2); }

/* ---- Steps -------------------------------------------------------------
   A numbered sequence, because a playbook genuinely is one. The number is
   information, not decoration. */
.pb-steps { margin-top: var(--s-8); counter-reset: step; }

.pb-step {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--border);
}
.pb-step:last-child { border-bottom: var(--border); }

.pb-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius);
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-step h2 {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--s-2);
}
.pb-step p { color: var(--c-ink-2); line-height: 1.62; }

/* ---- Callout -----------------------------------------------------------
   The "what people get wrong" note. One per playbook. */
.pb-callout {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: var(--border);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.pb-callout__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s-3);
}
.pb-callout p { color: var(--c-ink-2); line-height: 1.62; }

/* ---- Footer nav --------------------------------------------------------- */
.pb-next {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ==========================================================================
   PLAYBOOK INDEX
   Grouped by topic, so the library reads as an extension of Resources rather
   than a separate wall of 43 cards.
   ========================================================================== */
.pb-group { padding-block: var(--s-7); border-top: var(--border); }

.pb-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.pb-group__head h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 1.4rem;
}
.pb-group__head .icon { color: var(--c-accent); }
.pb-group__count { font-size: var(--fs-sm); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

/* ---- Jump links --------------------------------------------------------- */
.pb-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.pb-jump a {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pb-jump a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .pb-step { grid-template-columns: 1.8rem 1fr; gap: var(--s-3); }
  .pb-step__n { width: 1.8rem; height: 1.8rem; font-size: var(--fs-xs); }
  .pb-next .btn { width: 100%; }
}

/* ==========================================================================
   TOPIC COLOUR
   A playbook belongs to a topic and wears it, the same way its resources page
   and its blog posts do. Same three marks: ground, kicker, numerals.
   ========================================================================== */
main[class^="t-"] .pb-head {
  background: var(--topic-tint);
  margin-inline: var(--slab-inset);
  border-radius: var(--r-slab) var(--r-slab) 0 0;
  border-bottom: 2px solid var(--topic);
  padding-inline: var(--s-6);
}
main[class^="t-"] .pb-step__n,
main[class^="t-"] .pb-head__topic { color: var(--topic); }
main[class^="t-"] .pb-body li::marker { color: var(--topic); }