/* /topics — the topic selection guide, in the wireframe language.
   ============================================================================
   Loaded after css/wire-page.css and on top of it: the page is `body.wp
   wp-topics`, so the plates, chips, tags, notes, tables and fields are the
   shared ones and everything below is what this page has that the others do
   not. No new palette — every colour here is a --wp- token, and the four
   chart fills are the ink restated with an alpha so density can carry
   strength of opinion.

   The page is 131 records with a distribution each, so the design problem is
   not decoration, it is instrument-making:

   1  Every topic's opinions are drawn as a diverging bar — the standard
      display for a -3..+3 agreement scale — and every bar on the page shares
      one axis, fixed at 45.45% of the chart. Down the page those axes line
      up into a single instrument: you can see which topics split a class and
      which do not without reading a number. The ragged left and right edges
      are the signal, not an accident of layout.

   2  Sides are not coloured. Disagreement is not a failure state and
      agreement is not a success one, which is the whole premise of the
      product; giving one side red and the other green would say the
      opposite. Distance from the axis says which side, fill density says how
      strongly, and the hatch leans away from the axis on both sides.

   3  Nothing on this page animates. It is a reference: 131 rows deep, read by
      someone scanning for a topic to set next week. The only motion is a
      chip meeting the pointer.
   ============================================================================ */

/* `hidden` has to win. It is a UA rule — [hidden] { display: none } — and any
   author rule that sets `display` on the same element beats it, so the rows
   (display: grid) and the clear chip (display: inline-flex) both went on
   rendering after the script had hidden them: the counts said "13 of 159" and
   all 159 stayed on the page. Scoped to this page and marked important
   because that is the only thing that outranks a more specific author rule
   without enumerating every element the script may hide. */
.wp-topics [hidden] { display: none !important; }

body.wp-topics {
  /* The bar's four fills: the ink at four densities. ±3 solid, ±2 and ±1
     hatched over a tint so a two-pixel sliver still reads as a mid-tone,
     neutral left open. */
  --tp-fill3: #55555f;
  --tp-fill2: rgba(85, 85, 95, 0.26);
  --tp-fill1: rgba(85, 85, 95, 0.07);
  --tp-hatch: rgba(85, 85, 95, 0.78);
  --tp-open: rgba(85, 85, 95, 0.05);

  /* The shared axis. 75 is the widest disagree-plus-half-neutral in the set
     and 90 the widest agree side, so the chart spans 165 units and each
     bar — always 100 units — sits somewhere inside it. */
  --tp-axis-f: 0.454545;
  --tp-axis-at: calc(var(--tp-axis-f) * 100%);
  --tp-bar-w: 60.6061%;

  /* The reading column — chart, then its numbers — and the gap to the
     proposition. In rem, like the measure beside it: the legacy pages scale
     their root with the viewport (fluid-dense), so a column in px would
     quietly widen its share of the line on a large monitor. */
  --tp-col: 17rem;
  --tp-gap: 2.1rem;
  /* How far a row's hover tint bleeds past the measure on each side. The
     axis has to know: the bars sit inside that padding, and the line is
     drawn against the box outside it. */
  --tp-bleed: 0.7rem;

  background: var(--wp-page);
  color: var(--wp-ink);
  font-family: var(--wp-body);
}

html.dark-mode body.wp-topics {
  --tp-fill3: #a8a8b4;
  --tp-fill2: rgba(168, 168, 180, 0.26);
  --tp-fill1: rgba(168, 168, 180, 0.07);
  --tp-hatch: rgba(168, 168, 180, 0.7);
  --tp-open: rgba(168, 168, 180, 0.06);
}


/* ============================================================
   The page
   ============================================================ */

/* The measure is .container, which the build's own fragment sizes to the
   same 78rem column every other page on this site uses. Nothing here narrows
   it further and nothing caps a paragraph: a second wrapper inside the
   container centred this page 269px in from where /feedback, /news and
   /chats start, so it did not even share a left edge with them. Text that
   runs narrower than the column does so by being inside something narrower —
   a plate, a table cell, one side of a topic row. */
@media (max-width: 600px) {
  .wp-topics .container { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* Anything an in-page link lands on has to clear the fixed banner and the
   filter strip stuck under it — together about a fifth of a laptop screen,
   and half a phone once the strip wraps to four rows. The height is measured
   rather than guessed: js/topics-guide.js writes the real figure into
   --tp-stick on load and on resize, because the strip is two rows on a
   laptop and four on a phone and no single number is right for both. What is
   here is what a reader without JavaScript gets, which is close enough that
   the row they asked for is on screen.

   scroll-padding on the scroller rather than scroll-margin on the rows: it
   covers a #fragment in the address bar, a press on a topic's own name, and
   the scrollIntoView the script does when a deep link has to beat a filter,
   without three rules that could disagree. */
:root { --tp-stick: 12rem; }
html { scroll-padding-top: var(--tp-stick); }

.wp-topics .tp-head {
  padding: 3.5rem 0 0;
}
body.wp-topics.standalone .tp-head { padding-top: 2.25rem; }

.wp-topics .tp-head h1 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wp-strong);
  margin: 0.4rem 0 0.9rem;
}
.wp-topics .tp-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--wp-ink);
  margin: 0;
}
.wp-topics .tp-lede strong { color: var(--wp-strong); font-weight: 600; }

/* The three numbers the guide rests on, said once, in mono, under the lede.
   A ruled strip rather than three cards: it is a dateline, not a dashboard. */
.wp-topics .tp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px dashed var(--wp-faint);
  list-style: none;
  font-family: var(--wp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--wp-soft);
}
.wp-topics .tp-facts b {
  color: var(--wp-strong);
  font-weight: 700;
  margin-right: 0.4em;
}

.wp-topics .tp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
}

/* ============================================================
   The prose that comes before the list
   ============================================================
   Body face for anything that speaks, mono for anything that labels. The
   section headings are the page's own scale — bigger than a plate heading,
   smaller than the h1. */

.wp-topics .tp-prose { margin: 3rem 0 0; }
.wp-topics .tp-prose h2 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp-strong);
  margin: 0 0 0.9rem;
}
.wp-topics .tp-prose h3 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--wp-strong);
  margin: 1.7rem 0 0.5rem;
}
/* Only the paragraphs that are paragraphs. A <p> that carries a class — the
   eyebrow, the caption under the ramp, the two ends of an axis — has already
   said how it is set, and a blanket rule here would be one class more
   specific than any of them and would quietly win. */
.wp-topics .tp-prose p:not([class]),
.wp-topics .tp-prose li {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--wp-ink);
}
.wp-topics .tp-prose p { margin: 0 0 0.85rem; }
.wp-topics .tp-prose .tp-ramp-said { margin: 1.3rem 0 0; }
.wp-topics .tp-prose strong { color: var(--wp-strong); font-weight: 600; }

/* A list whose markers are ruled rather than bulleted — the same dash the
   dividers use, so the page has one vocabulary of marks. */
.wp-topics .tp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
}
.wp-topics .tp-list li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0 0 0.55rem;
}
.wp-topics .tp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 0.7rem;
  border-top: 1.5px solid var(--wp-accent);
}
.wp-topics .tp-prose .wp-plate .tp-list li:last-child { margin-bottom: 0; }

/* A table of before-and-after rather than of names and descriptions: its
   first column is a quotation, not a title, so it is set in the body face —
   and when the table unstacks, all three cells need saying, not just the
   third. */
.wp-topics .tp-swap tbody th {
  font-family: var(--wp-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--wp-soft);
  width: 30%;
}
@media (max-width: 640px) {
  /* The unstack rule turns the cells into blocks; this is one class more
     specific than it, so it has to give the width back itself. */
  .wp-topics .tp-swap tbody th { width: auto; }
  .wp-topics .tp-swap tbody th,
  .wp-topics .tp-swap tbody td:not(.wp-when) { margin-bottom: 0.55rem; }
  .wp-topics .tp-swap tbody th::before,
  .wp-topics .tp-swap tbody td:not(.wp-when)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--wp-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp-soft);
    margin-bottom: 0.2rem;
  }
}

/* ============================================================
   How to read the bar
   ============================================================
   The key figure. Everything the reader needs to decode 131 charts, shown
   rather than described: the ramp with its seven steps named, and three
   archetypes with the verdict each one carries. */

.wp-topics .tp-key { padding-bottom: 1.5rem; }

.wp-topics .tp-ramp {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin: 0.2rem 0 0;
}
.wp-topics .tp-ramp-cell { text-align: center; }
.wp-topics .tp-ramp-swatch {
  height: 30px;
  border: 1px solid var(--wp-faint);
}
.wp-topics .tp-ramp-cell span {
  display: block;
  font-family: var(--wp-mono);
  font-size: 0.6rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--wp-soft);
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}
.wp-topics .tp-ramp-cell b {
  display: block;
  font-family: var(--wp-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--wp-strong);
}

.wp-topics .tp-ramp-said {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--wp-soft);
  margin: 1.2rem 0 0;
}

/* The three archetypes. A label, a bar on the shared axis, a verdict. */
.wp-topics .tp-shapes {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  border-top: 1px dashed var(--wp-faint);
}
.wp-topics .tp-shape {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px dashed var(--wp-faint);
}
.wp-topics .tp-shape-name {
  font-family: var(--wp-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp-strong);
}
.wp-topics .tp-shape-said {
  grid-column: 2;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--wp-soft);
  margin: 0;
}
.wp-topics .tp-shape:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-topics .tp-shape .tp-chart { margin: 0; }
@media (max-width: 620px) {
  .wp-topics .tp-shape { grid-template-columns: minmax(0, 1fr); }
  .wp-topics .tp-shape-said { grid-column: 1; }
}

/* ============================================================
   The filter strip
   ============================================================
   Paper, ruled along the bottom, stuck under the banner. Real buttons and a
   real select: the strip it replaces was built from <span>s, so none of it
   could be reached from a keyboard. */

.wp-topics .tp-filter {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp-page);
  border-bottom: 1.5px solid var(--wp-ink);
  padding: 0.7rem 0 0.75rem;
  margin: 1.6rem 0 0;
}
body.wp-topics.standalone .tp-filter { top: var(--banner-h); }

/* Below the desktop breakpoint the banner's own theme switch is gone and the
   page's floating toggle takes its place — parked at the top right, directly
   over where this strip sticks. The strip keeps its hands off that corner
   rather than letting a button sit on top of a filter. */
@media (max-width: 1279px) {
  .wp-topics .tp-filter-in { padding-right: 3.4rem; }
}
/* Once the search has a row to itself, only that row has to give way, and
   the chips below it can run the full width again. */
@media (max-width: 760px) {
  .wp-topics .tp-filter-in { padding-right: 0; }
  .wp-topics .tp-search { max-width: calc(100% - 3.4rem); }
}

.wp-topics .tp-filter-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}

.wp-topics .tp-search {
  width: 13rem;
  flex: 0 1 13rem;
  padding: 0.42rem 0.7rem;
  font-family: var(--wp-mono);
  font-size: 0.78rem;
}
.wp-topics .tp-select {
  width: auto;
  flex: 0 1 auto;
  /* A <select> is as wide as its widest option and, as a flex item, will not
     shrink below that on its own — which put "medicine, health & clinical
     practice" off the right edge of a 360px phone. */
  min-width: 0;
  max-width: 15rem;
  padding: 0.42rem 0.7rem;
  font-family: var(--wp-mono);
  font-size: 0.78rem;
}
.wp-topics .tp-filter .wp-chip {
  padding: 0.38rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  box-shadow: 1px 1px 0 var(--wp-cast);
}
.wp-topics .tp-filter .wp-chip:hover,
.wp-topics .tp-filter .wp-chip:focus-visible {
  box-shadow: 3px 3px 0 var(--wp-cast);
}
/* The count each filter would leave, in the same mono as the readout. */
.wp-topics .tp-chip-n {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}
.wp-topics .wp-chip[aria-pressed="true"] .tp-chip-n { opacity: 0.8; }

.wp-topics .tp-sep {
  align-self: stretch;
  width: 0;
  border-left: 1px dashed var(--wp-faint);
  margin: 0 0.25rem;
}

.wp-topics .tp-count {
  margin-left: auto;
  font-family: var(--wp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--wp-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wp-topics .tp-count b { color: var(--wp-strong); font-weight: 700; }

@media (max-width: 760px) {
  .wp-topics .tp-sep { display: none; }
  .wp-topics .tp-search { flex: 1 1 100%; width: auto; }
  .wp-topics .tp-select { flex: 1 1 7rem; max-width: none; width: auto; }
}

/* The index of disciplines. Ruled links, not pills — pressing one moves the
   page, it does not change what is on it. */
.wp-topics .tp-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.wp-topics .tp-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  border: 1px dashed var(--wp-faint);
  border-radius: 3px;
  padding: 0.28rem 0.6rem;
  font-family: var(--wp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--wp-ink);
  text-decoration: none;
}
.wp-topics .tp-index a:hover,
.wp-topics .tp-index a:focus-visible {
  border-color: var(--wp-accent);
  border-style: solid;
  color: var(--wp-strong);
  text-decoration: none;
}
.wp-topics .tp-index i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--wp-soft);
}

/* ============================================================
   A discipline
   ============================================================ */

.wp-topics .tp-sec { margin: 3.2rem 0 0; }
.wp-topics .tp-sec h2 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp-strong);
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
}
.wp-topics .tp-sec-intro {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--wp-soft);
  margin: 0.55rem 0 0;
}

/* The instrument, labelled once per discipline rather than once per row:
   the two ends of the scale meeting at the axis, over the rule the bars
   are read against. */
.wp-topics .tp-sec-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tp-col);
  gap: 0 var(--tp-gap);
  align-items: end;
  margin: 1.5rem 0 0;
}
.wp-topics .tp-sec-rule::before {
  content: "";
  border-bottom: 1.5px solid var(--wp-ink);
  padding-bottom: 0.35rem;
}
.wp-topics .tp-axis-key {
  display: grid;
  grid-template-columns: var(--tp-axis-at) minmax(0, 1fr);
  border-bottom: 1.5px solid var(--wp-ink);
  padding-bottom: 0.35rem;
  font-family: var(--wp-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp-soft);
  white-space: nowrap;
}
.wp-topics .tp-axis-key span:first-child { text-align: right; padding-right: 0.5rem; }
.wp-topics .tp-axis-key span:last-child { padding-left: 0.5rem; }

@media (max-width: 860px) {
  .wp-topics .tp-sec-rule { grid-template-columns: minmax(0, 1fr); }
  .wp-topics .tp-sec-rule::before { display: none; }
}

/* ============================================================
   A topic
   ============================================================
   Two columns: what it says on the left, what happened when a class
   discussed it on the right. Rows are ruled, not boxed — 131 plates with a
   cast each is a texture, not a page. */

.wp-topics .tp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tp-col);
  gap: 0.9rem var(--tp-gap);
  align-items: start;
  padding: 1.15rem var(--tp-bleed) 1.25rem;
  margin: 0 calc(var(--tp-bleed) * -1);
  border-bottom: 1px dashed var(--wp-faint);
}
.wp-topics .tp-row:hover { background: var(--wp-sunken); }
.wp-topics .tp-row:target {
  background: var(--wp-accent-soft);
  box-shadow: inset 2px 0 0 var(--wp-accent);
}

.wp-topics .tp-name {
  font-family: var(--wp-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wp-soft);
  margin: 0 0 0.35rem;
}
.wp-topics .tp-name a {
  color: inherit;
  text-decoration: none;
}
.wp-topics .tp-name a:hover,
.wp-topics .tp-name a:focus-visible {
  color: var(--wp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The proposition. The one thing on the row set at reading size, because it
   is the one thing the reader is choosing between. */
.wp-topics .tp-prop {
  font-size: 1.01rem;
  line-height: 1.55;
  color: var(--wp-strong);
  margin: 0;
}

.wp-topics .tp-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0.65rem 0 0;
}
/* Of the four marks a topic can carry, one is the accent's: eight topics in
   a hundred and thirty-one earned all three of the others. The accent
   points, it does not label, so the rest are the page's ordinary tag. */
.wp-topics .tp-mark-star {
  border: 1px solid var(--wp-accent);
  border-style: solid;
  background: var(--wp-accent);
  color: var(--wp-on-accent);
}
html.wp-js .wp-topics .tp-row .wp-copy {
  font-size: 0.6rem;
  padding: 0.24rem 0.55rem;
  letter-spacing: 0.09em;
  box-shadow: 1px 1px 0 var(--wp-cast);
}
html.wp-js .wp-topics .tp-row .wp-copy:hover,
html.wp-js .wp-topics .tp-row .wp-copy:focus-visible {
  box-shadow: 3px 3px 0 var(--wp-cast);
}

.wp-topics .tp-prov {
  font-family: var(--wp-mono);
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--wp-soft);
  margin: 0.6rem 0 0;
}
.wp-topics .tp-prov b { color: var(--wp-ink); font-weight: 500; }
.wp-topics .tp-nowrap { white-space: nowrap; }

.wp-topics .tp-quote {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--wp-soft);
  border-left: 2px solid var(--wp-faint);
  padding: 0 0 0 0.85rem;
  margin: 0.7rem 0 0;
}

/* ============================================================
   The bar
   ============================================================
   A diverging stacked bar on a fixed axis. The bar is always 100 units of a
   165-unit chart; where it starts is what says which way the class leaned.
   Every number in it is also written out beside it, so the chart is
   aria-hidden and carries no information of its own. */

.wp-topics .tp-chart {
  position: relative;
  height: 22px;
  margin: 0.15rem 0 0;
}
/* The rule the bars stand on. */
.wp-topics .tp-chart::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  border-bottom: 1px solid var(--wp-faint);
}
/* The axis. On a chart that stands alone — the three archetypes in the key —
   it is drawn on the chart itself. */
.wp-topics .tp-chart::before {
  content: "";
  position: absolute;
  left: var(--tp-axis-at);
  top: -4px;
  bottom: -4px;
  border-left: 1px dashed var(--wp-soft);
  z-index: 1;
}

/* Inside a discipline it is one line for the whole run of rows, drawn over
   the bars rather than between them. This is the thing that makes a column
   of 131 charts an instrument instead of 131 pictures: the reader's eye has
   a straight edge to measure every bar against, and how far each one
   overhangs it on one side is the answer to "will this split my class?"
   read without a number. The bars cross it at their own neutral midpoint,
   so where the line cuts a bar is where half the class sits. */
.wp-topics .tp-rows { position: relative; }
.wp-topics .tp-rows::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - var(--tp-col) + var(--tp-col) * var(--tp-axis-f));
  border-left: 1px dashed var(--wp-soft);
  opacity: 0.75;
  z-index: 2;
  pointer-events: none;
}
.wp-topics .tp-rows .tp-chart::before { display: none; }
@media (max-width: 860px) {
  /* Stacked, the chart is the full width of the row and the run of rows no
     longer has one column to hang a line down. */
  .wp-topics .tp-rows::before { display: none; }
  .wp-topics .tp-rows .tp-chart::before { display: block; }
}

.wp-topics .tp-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--tp-bar-w);
  left: calc(var(--tp-l) * 1%);
  display: flex;
  outline: 1px solid var(--tp-open);
}
.wp-topics .tp-s { height: 100%; }

.wp-topics .tp-s3 { background: var(--tp-fill3); }
.wp-topics .tp-s2 {
  background-color: var(--tp-fill2);
  background-image: repeating-linear-gradient(
    var(--tp-lean), var(--tp-hatch) 0 1.1px, transparent 1.1px 3px);
}
.wp-topics .tp-s1 {
  background-color: var(--tp-fill1);
  background-image: repeating-linear-gradient(
    var(--tp-lean), var(--tp-hatch) 0 1px, transparent 1px 7.5px);
}
.wp-topics .tp-s0 { background: var(--tp-open); }
/* The hatch leans away from the axis on both sides, so the two halves are
   mirror images rather than a repeat. */
.wp-topics .tp-d { --tp-lean: 42deg; }
.wp-topics .tp-a { --tp-lean: -42deg; }

/* The figures are set around the axis rather than across it: each line puts
   one number to the left of the line and one to the right, meeting on it.
   The split reads as a caption to the bar above rather than as a row of
   statistics, and — the practical reason — the line that runs the length of
   a discipline never has to cut through a word. */
.wp-topics .tp-split,
.wp-topics .tp-nums {
  display: grid;
  grid-template-columns: var(--tp-axis-at) minmax(0, 1fr);
  font-family: var(--wp-mono);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.wp-topics .tp-split {
  margin: 0.6rem 0 0;
  font-size: 0.68rem;
  color: var(--wp-strong);
}
.wp-topics .tp-nums {
  margin: 0.1rem 0 0;
  font-size: 0.65rem;
  line-height: 1.7;
  color: var(--wp-soft);
}
.wp-topics .tp-split > :first-child,
.wp-topics .tp-nums > :first-child { text-align: right; padding-right: 0.4rem; }
.wp-topics .tp-split > :last-child,
.wp-topics .tp-nums > :last-child { padding-left: 0.4rem; }
.wp-topics .tp-split i,
.wp-topics .tp-nums i {
  font-style: normal;
  font-weight: 400;
  color: var(--wp-soft);
}
/* The sample size, out at the edge of the column where the line cannot
   reach it. */
.wp-topics .tp-n {
  font-family: var(--wp-mono);
  font-size: 0.65rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: right;
  color: var(--wp-soft);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .wp-topics .tp-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wp-topics .tp-read { margin-top: 1rem; }
  .wp-topics .tp-prop { max-width: none; }
}

/* ============================================================
   Nothing matched
   ============================================================ */

.wp-topics .tp-empty { display: none; margin: 2.5rem 0; }
.wp-topics .tp-empty.is-on { display: block; }
.wp-topics .tp-empty p { margin: 0 0 1rem; color: var(--wp-ink); }

/* ============================================================
   The furniture
   ============================================================ */

/* Unscoped on purpose. This sheet only ever loads on /topics, and the
   injected banner-metrics fragment — which moves the button to the top right
   below the desktop breakpoint, where the banner's own switch is gone —
   carries the same specificity and is injected after. Scoping this to
   .wp-topics would win that argument and park the button on top of the
   filter strip. */
.theme-toggle {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--wp-paper);
  border: 1.5px solid var(--wp-ink);
  border-radius: 5px;
  box-shadow: 2px 2px 0 var(--wp-cast);
  color: var(--wp-strong);
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  box-shadow: 4px 4px 0 var(--wp-cast);
  transform: translate(-1px, -1px);
}
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .tp-icon-sun { display: none; }
html.dark-mode .theme-toggle .tp-icon-sun { display: block; }
html.dark-mode .theme-toggle .tp-icon-moon { display: none; }

.wp-topics .tp-foot {
  border-top: 1px dashed var(--wp-faint);
  margin: 4rem 0 0;
  padding: 1.6rem 0 2.5rem;
  font-family: var(--wp-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--wp-soft);
}
.wp-topics .tp-foot a { color: inherit; text-decoration: none; }
.wp-topics .tp-foot a:hover { text-decoration: underline; }
.wp-topics .tp-foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.wp-topics .tp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Print
   ============================================================
   An instructor picking topics for a syllabus prints this. The bars survive
   — they are backgrounds, so print-color-adjust has to ask for them — and
   nothing splits across a page break mid-row. */

@media print {
  .wp-topics .tp-filter,
  .theme-toggle,
  .wp-topics .tp-index,
  .wp-topics .tp-actions,
  .wp-topics .wp-copy,
  .gs-banner,
  .gs-sidebar { display: none !important; }
  body.wp-topics { background: #fff; }
  body.wp-topics.standalone { margin-left: 0; padding-top: 0; }
  .wp-topics .tp-row,
  .wp-topics .tp-shape,
  .wp-topics .wp-plate { break-inside: avoid; page-break-inside: avoid; }
  .wp-topics .tp-sec h2 { break-after: avoid; page-break-after: avoid; }
  .wp-topics .tp-s,
  .wp-topics .tp-ramp-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Nothing on this page moves on arrival; the transitions that exist are a
   control answering a pointer. Reduced motion takes those too. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .wp-topics .tp-filter .wp-chip,
  html.wp-js .wp-topics .tp-row .wp-copy { transition: none; }
}