/* Topic pages. Tokens come from styles.css; only the tag-specific layout lives
   here. The leading # is drawn in CSS, never in the markup, so the text a
   crawler reads as anchor text is "Safety" and not "#Safety". */

.tg-hero{padding:clamp(2.6rem,6vw,4.4rem) clamp(1.2rem,5vw,5.5rem) clamp(1.4rem,3vw,2rem);}
.tg-hero h1{font-family:var(--font-display);font-weight:800;color:var(--white);
  font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.05;margin:.5rem 0 0;letter-spacing:-.02em;}
.tg-hash{color:var(--orange);}
.tg-count{color:var(--gray-light);margin:.9rem 0 0;font-size:.98rem;}
.breadcrumb{color:var(--gray);font-size:.8rem;margin-bottom:.9rem;}
.breadcrumb a{color:var(--gray-light);text-decoration:none;}
.breadcrumb a:hover{color:var(--orange);}

.tg-list{list-style:none;margin:0;padding:0 clamp(1.2rem,5vw,5.5rem) clamp(3rem,7vw,5rem);
  display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.tg-ep{background:var(--bg);padding:1.5rem clamp(1rem,2vw,1.6rem);}
.tg-ep-link{display:block;text-decoration:none;}
.tg-ep-series{display:block;color:var(--gray);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.5rem;}
.tg-ep h2{font-family:var(--font-display);font-weight:600;color:var(--white);
  font-size:1.08rem;line-height:1.35;margin:0 0 .55rem;}
.tg-ep-link:hover h2,.tg-ep-link:focus-visible h2{color:var(--orange);}
.tg-ep p{color:var(--gray-light);font-size:.93rem;line-height:1.7;margin:0;max-width:78ch;}
.tg-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;}
.tg-chip{color:var(--gray-light);background:var(--card);border:1px solid var(--rule);
  font-size:.76rem;padding:.28rem .6rem;text-decoration:none;transition:color .18s,border-color .18s;}
.tg-chip::before{content:"#";color:var(--orange);margin-right:.12rem;}
.tg-chip:hover,.tg-chip:focus-visible{color:var(--white);border-color:var(--orange);}

.tg-cloud{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:0 clamp(1.2rem,5vw,5.5rem);}
.tg-tile{background:var(--bg);padding:1.1rem 1.2rem;text-decoration:none;color:var(--white);
  font-family:var(--font-display);font-weight:600;font-size:1rem;display:flex;align-items:baseline;
  gap:.3rem;transition:background .18s;}
.tg-tile:hover,.tg-tile:focus-visible{background:var(--card);color:var(--orange);}
.tg-tile em{margin-left:auto;font-style:normal;color:var(--gray);font-size:.82rem;font-weight:400;}
.tg-back{padding:2rem clamp(1.2rem,5vw,5.5rem) clamp(3rem,6vw,4rem);color:var(--gray);font-size:.9rem;}
.tg-back a{color:var(--orange);}

/* The tag list on an episode page.

   THE OUTLINE means clickable. THE # does not: it marks the thing as a topic,
   which is true whether or not that topic has earned a page of its own. So the
   # stays orange on both, and only the border distinguishes them. The border
   lives on a.cd-tag in episodes/episode.css.

   A greyed-out # was tried on 2026-09-11 and the user preferred it orange on
   both. Do not "correct" this back without asking.

   Padding stays on the spans too, deliberately, so a plain tag sits on the same
   baseline as a boxed one rather than riding a pixel higher in the flex row. */
.cd-tags a.cd-tag{text-decoration:none;}
.cd-tags .cd-tag::before{content:"#";color:var(--orange);margin-right:.1rem;}
.cd-tags a.cd-tag:hover,.cd-tags a.cd-tag:focus-visible{color:var(--orange);border-color:var(--orange);}

/* TRIAL, not site wide. A very subtle breathing of the border on CLICKABLE tags
   only, so the eye picks up that some of these go somewhere. Enabled per page by
   the generator adding .tag-pulse to .cd-tags; see TAG_PULSE_ON in
   generate_chapter_deck.py. One line there turns it on everywhere.

   Deliberate choices, each one a thing that would have made it worse:
   - border-color ONLY. No transform, no box-shadow, no opacity on the text.
     Anything that moves or dims the words makes them harder to read, and these
     are 0.7rem uppercase, which is already the smallest type on the page.
   - 5.5s. Slow enough to read as breathing rather than blinking. At 1 to 2s it
     reads as an alert and pulls attention off the transcript. Was 4s; the user
     asked for subtler, and slowing it does as much as dimming it.
   - Peak 0.42 alpha against a 0.25 resting state, so the swing is about half of
     what it was. You notice it in peripheral vision and not while reading.
   - Staggered so a row never pulses in unison, the same reasoning as the
     library tiles.
   - Hover and focus KILL the animation, so hover remains a distinct, stronger
     state rather than competing with it.
   - Off entirely under prefers-reduced-motion. */
@keyframes cd-tag-breathe{
  0%,100%{border-color:var(--live);}
  50%{border-color:var(--live);}
}
.cd-tags.tag-pulse a.cd-tag{animation:cd-tag-breathe 5.5s ease-in-out infinite;}
.cd-tags.tag-pulse a.cd-tag:nth-of-type(5n+2){animation-delay:1.1s;}
.cd-tags.tag-pulse a.cd-tag:nth-of-type(5n+3){animation-delay:2.2s;}
.cd-tags.tag-pulse a.cd-tag:nth-of-type(5n+4){animation-delay:3.3s;}
.cd-tags.tag-pulse a.cd-tag:nth-of-type(5n+5){animation-delay:4.4s;}
.cd-tags.tag-pulse a.cd-tag:hover,
.cd-tags.tag-pulse a.cd-tag:focus-visible{animation:none;}
@media(prefers-reduced-motion:reduce){
  .cd-tags.tag-pulse a.cd-tag{animation:none;}
}

/* The extractable answer paragraph. Deliberately plain prose: research on AI
   citation is consistent that a blockquote or callout box is lifted less often
   than an ordinary paragraph sitting directly under the heading. */
.tg-answer{color:var(--gray-light);font-size:1rem;line-height:1.8;max-width:76ch;
  margin:0 clamp(1.2rem,5vw,5.5rem) 2.2rem;}

/* ---- sort control on topic pages -------------------------------------------
   Injected by tags-sort.js, never present without JavaScript, so these rules
   style something that only exists when it can actually work. Pill styling is
   copied from library.html deliberately: the library already has a sort bar and
   two different-looking controls for the same job would read as two features. */
.tg-sort{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;
  margin:0 0 1.6rem;
}
.tg-sort-label{
  color:var(--gray);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;
  margin-right:0.3rem;
}
.tg-sort .pill{
  border:1px solid var(--edge);padding:0.42rem 1rem;font-size:0.82rem;
  background:transparent;color:var(--gray-light);cursor:pointer;
  font-family:inherit;transition:color 0.2s ease,border-color 0.2s ease,background 0.2s ease;
}
.tg-sort .pill:hover{color:var(--white);border-color:var(--orange);}
.tg-sort .pill:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.tg-sort .pill.on{background:var(--orange);border-color:var(--orange);color:#141519;font-weight:600;}
.tg-sort-note{
  flex-basis:100%;color:var(--gray);font-size:0.74rem;line-height:1.5;margin-top:0.1rem;
}
/* Visually hidden but announced. The reorder is silent otherwise. */
.tg-sort-status{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;
}