/* ==========================================================================
   RESOURCES INDEX + TOPIC PAGES
   Shared by /resources/ and every /resources/<topic>/ page.
   Uses the same tokens as everything else. No new colours, no new radius.
   ========================================================================== */

/* ==========================================================================
   PAGE HEADER (breadcrumb + title + intro)
   ========================================================================== */
/* The header takes the topic's tint as a ground and the topic's ink as its
   rule. Eight pages that used to be identical now each announce which topic
   you are in before you read a word, which is the job colour coding exists to
   do. Pages with no topic fall back to the old bordered header. */
.page-head {
  padding-block: var(--s-7) var(--s-8);
  border-bottom: var(--border);
}
main[class^="t-"] .page-head {
  background: var(--topic-tint);
  border-bottom: 2px solid var(--topic);
  margin-inline: var(--slab-inset);
  border-radius: var(--r-slab) var(--r-slab) 0 0;
  padding-inline: var(--s-6);
}


.page-head__title {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.page-head__icon {
  color: var(--topic, var(--c-accent));
  width: 2.1rem;
  height: 2.1rem;
}
.page-head .lead { margin-top: var(--s-4); }

/* Count strip: what is actually behind this topic, stated plainly. */
.page-head__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.page-head__counts b {
  color: var(--topic, var(--c-ink));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   RESOURCES INDEX: the eight topics, fuller than the homepage version
   ========================================================================== */
.topic-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.topic-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.topic-card:hover { border-color: var(--c-accent); }
main[class^="t-"] .tool-row:hover, main[class^="t-"] .playbook:hover { border-color: var(--topic); }
.topic-card:hover .topic-card__name { color: var(--c-accent); }

.topic-card__icon { color: var(--c-accent); }

.topic-card__name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--dur) var(--ease);
}
.topic-card__desc {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.55;
}
.topic-card__count {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
.topic-card__count em {
  font-style: normal;
  color: var(--c-ink-2);
}

/* ==========================================================================
   TOPIC PAGE BLOCKS
   ========================================================================== */
.block { padding-block: var(--s-8); border-bottom: var(--border); }
.block:last-of-type { border-bottom: none; }

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.block__head h2 { font-size: 1.5rem; }
.block__head p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ---- The guide -----------------------------------------------------------
   The topic page is the guide. One URL answers the search and also links to
   the tools and playbooks underneath it, instead of a thin hub page and a
   separate guide competing for the same query. */
.guide { max-width: var(--w-read); }
.guide h2 {
  font-size: 1.5rem;
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
}
.guide h2:first-child { margin-top: 0; }
.guide h3 {
  font-size: 1.1rem;
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}
.guide p { margin-bottom: var(--s-4); color: var(--c-ink-2); line-height: 1.68; }
.guide ul, .guide ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); color: var(--c-ink-2); }
.guide li { margin-bottom: var(--s-2); line-height: 1.6; }
.guide li::marker { color: var(--c-ink-3); }

/* On this page: a short contents list, useful once the guide is long. */
.toc {
  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);
  margin-bottom: var(--s-7);
}
.toc__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);
}
.toc ol { margin: 0; padding-left: var(--s-5); }
.toc li { margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.toc li::marker { color: var(--c-ink-3); }

/* ---- Try this: a tool -------------------------------------------------- */
.tool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.tool-row:hover { border-color: var(--c-accent); }
.tool-row:hover .tool-row__name { color: var(--c-accent); }
.tool-row__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  transition: color var(--dur) var(--ease);
}
.tool-row__desc { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 60ch; }

/* ---- Playbooks: boxes carrying the setup time --------------------------
   Card per playbook, like the previous site, so an operator can see the cost
   of doing it before opening it. Setup time is the deciding factor. */
.playbook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

/* An odd number of playbooks would leave a hole in a two column grid.
   The last card takes the full width instead of sitting beside a gap. */
.playbook-grid > .playbook:last-child:nth-child(odd) { grid-column: span 2; }

.playbook {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.playbook:hover { border-color: var(--c-accent); }
.playbook:hover .playbook__title { color: var(--c-accent); }
.playbook:hover .playbook__read .icon { transform: translateX(3px); }

.playbook__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
}

.playbook__desc {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.55;
}

.playbook__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: var(--border);
}

.playbook__time {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
.playbook__time .icon { width: 0.95rem; height: 0.95rem; }

.playbook__read {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
}
.playbook__read .icon {
  width: 0.95rem; height: 0.95rem;
  transition: transform var(--dur) var(--ease);
}

/* ---- Empty state ------------------------------------------------------
   A topic with nothing in it yet says so, rather than showing a blank shelf. */
.empty-state {
  padding: var(--s-7);
  border: 1px dashed var(--c-rule-strong);
  border-radius: var(--radius);
  text-align: center;
}
.empty-state h3 { font-family: var(--font-display); font-size: 1.15rem; }
.empty-state p {
  margin: var(--s-3) auto 0;
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.6;
}
.empty-state__cta { margin-top: var(--s-5); }

/* ---- Related topics ---------------------------------------------------- */
.related { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.related 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);
}
.related a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .topic-index { grid-template-columns: 1fr; }
  .playbook-grid { grid-template-columns: 1fr; }
  .playbook-grid > .playbook:last-child:nth-child(odd) { grid-column: span 1; }
}

@media (max-width: 640px) {
  .page-head__title { gap: var(--s-3); }
  .page-head__icon { width: 1.6rem; height: 1.6rem; }
  .tool-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .tool-row .btn { width: 100%; }
}

/* A short rule above each block head, in the topic colour. One mark, repeated,
   is what carries a colour through a long page without washing it.

   It hangs off .block, not .block__head. The head is a flex row holding the
   title and the "All tools" link with space-between, so a pseudo-element on it
   was never a rule above the head: it was a third flex item. Three items under
   space-between put the dash hard left and the link hard right, and left the
   title floating in the middle, centred on nothing. */
main[class^="t-"] .block::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--topic);
  margin-bottom: var(--s-3);
}
main[class^="t-"] .toc {
  background: var(--topic-tint);
  border-color: var(--topic);
}
main[class^="t-"] .toc__title { color: var(--topic); }
main[class^="t-"] .guide h2 { border-left: 3px solid var(--topic); padding-left: var(--s-4); }

/* A standing note on a page that is deliberately thin: the section exists in
   the navigation but has no listings yet. Set as editorial copy rather than as
   an error state, because nothing is broken. */
.page-note {
  max-width: var(--w-read);
  margin: 0 0 var(--s-6);
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-statement);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}