/* ============================================================
   Pinakes — layout and components on the Alexandrian Suite.

   Reads the tokens in tokens.css and never hard-codes a colour, so
   red-figure and black-figure both resolve from one palette. This
   file replaces style.css, style-scandi.css and style-terminal.css
   as pages are rebuilt onto it; until then base-core.html serves
   the old sheets to everything that has not moved yet.

   Built out one page at a time. Present so far: the icon system,
   the shell (capsa and column), navigation, the sillybos journal
   tags, tool cards, and the index -- entries, search and filters,
   the journal picker, pagination. Still to come with the pages
   that need them: the coverage table, the article detail page,
   author profiles, and the visualisation chrome.
   ============================================================ */

/* ============================================================
   The icon system.

   57 symbols live in three sprite partials: _icons_core.html (the
   wordmark mark and eleven sidebar destinations, on every page),
   _icons_tools.html (nineteen analytical tools), and
   _icons_datastories.html (twenty-six chapter panels).

   Usage:
     <svg class="ic" aria-hidden="true"><use href="#ic-centrality"/></svg>

   Icons are decoration beside a text label, so they take
   aria-hidden and the label carries the meaning. Where an icon is
   the ONLY content of a control, give the control an aria-label —
   never rely on the mark alone.

   Accent colours travel as custom properties rather than classes.
   A <use> clone lives in a shadow tree that document CSS selectors
   do not reach, but inherited properties cross that boundary, so
   --ic-accent set here lands on the paths inside the symbol.
   ============================================================ */

.ic-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  display: inline-block;
  flex: none;
  width: var(--ic-size, 1.5rem);
  height: var(--ic-size, 1.5rem);
  color: var(--gloss);

  /* The one saturated hue, on the one element per icon that earns it. */
  --ic-accent: var(--terracotta);
  --ic-wash: var(--terracotta-wash);

  /* Sit on the baseline of the label beside it rather than on the
     line box, which would ride high next to Literata's x-height. */
  vertical-align: -0.28em;
  transition: color var(--t-fast);
}

.ic-sm { --ic-size: 1.125rem; }
.ic-lg { --ic-size: 2rem; }
.ic-xl { --ic-size: 2.75rem; }

/* Dense lists — a sidebar of 54 journals, a nav dropdown — would blow
   the terracotta budget if every row carried an accent. Quiet icons
   drop to a single colour and let the page keep its 5%. */
.ic-quiet {
  --ic-accent: currentColor;
  --ic-wash: transparent;
}

/* Faience marks absence here as it does everywhere else: an icon for
   a tool with no data yet, not an icon that failed to load. */
.ic-absent {
  color: var(--faience);
  --ic-accent: var(--faience);
  --ic-wash: var(--faience-wash);
}

/* In a link or button, the mark follows the label on hover. The accent
   lifts with it, so the two-colour relationship survives the state. */
a:hover > .ic,
button:hover > .ic,
a:hover .ic,
button:hover .ic {
  color: var(--terracotta);
  --ic-accent: var(--terracotta-lift);
}

a:hover .ic-quiet,
button:hover .ic-quiet {
  --ic-accent: currentColor;
}

/* The wordmark mark, which is the only icon allowed to be large and
   the only one that is terracotta throughout. */
.ic-wordmark {
  color: var(--terracotta);
  --ic-accent: var(--terracotta);
}

@media (prefers-reduced-motion: reduce) {
  .ic { transition: none; }
}

/* Switching figure repaints every surface at once. The same component
   transitions that make a hover feel considered turn that switch into a
   fade through the wrong palette -- cards sitting in light paper on a
   black-figure page for a couple of frames -- so they are suppressed for
   the frame the switch happens in. */
.figure-switching, .figure-switching * { transition: none !important; }


/* ============================================================
   Skip link and focus.
   ============================================================ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--terracotta); color: var(--added-white);
  font-family: var(--f-ui); font-weight: 700;
  padding: var(--space-3) var(--space-4); text-decoration: none;
}
.skip:focus { left: var(--space-4); top: var(--space-2); color: var(--added-white); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
main:focus { outline: none; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ============================================================
   The shell.

   A capsa is the cylindrical box a library stood its rolls in, each
   with its sillybos tag turned outward so the titles could be read
   without pulling anything out. That is what the left column does:
   it holds fifty-four journals with their names facing the reader.
   ============================================================ */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.capsa {
  --capsa-w: 17.5rem;
  width: var(--capsa-w);
  flex: none;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--papyrus-deep);
  border-right: 1px solid var(--rule);
}

.column {
  flex: 1 1 auto;
  min-width: 0;
}

.column-inner {
  max-width: 64rem;
  padding: var(--space-10) var(--space-8) var(--space-16);
}

/* A page that is mostly prose -- one article, one author -- narrows to
   something closer to the book-roll measure. 64rem is right for a grid of
   cards and much too wide for a paragraph. */
.column-inner--read { max-width: 52rem; }


/* -- The wordmark, at the head of the capsa ------------------ */

.capsa-head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--gloss);
  line-height: 1.15;
}
.wordmark .name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
}
.wordmark .sub {
  display: block;
  font-family: var(--f-quote); font-style: italic;
  font-size: var(--text-sm); color: var(--dilute);
  margin-top: 0.1rem;
}
.wordmark:hover .name { color: var(--terracotta); }
.wordmark .ic { margin-top: 0.28rem; }


/* -- Navigation --------------------------------------------- */

.capsa-nav {
  flex: 1 1 auto;
  padding: var(--space-3) 0 var(--space-4);
  overflow-y: auto;
}

.nav-item { position: relative; }

.nav-link,
.nav-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: 0.4rem var(--space-5);
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--gloss-soft);
  text-decoration: none;
  background: none; border: 0;
  text-align: left;
  border-left: 2px solid transparent;
}
.nav-link:hover,
.nav-trigger:hover { background: var(--paper); color: var(--gloss); }

/* The diple in the margin: this is the passage you are reading. */
.nav-link[aria-current="page"] {
  color: var(--gloss); font-weight: 700;
  background: var(--paper);
  border-left-color: var(--terracotta);
}

.nav-label { flex: 1 1 auto; min-width: 0; }

.nav-chevron {
  flex: none; width: 0; height: 0;
  border-left: 5px solid var(--dilute-light);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.nav-item.open .nav-chevron { transform: rotate(90deg); }

.nav-count {
  flex: none;
  font-family: var(--f-mono); font-size: 0.68rem;
  padding: 0.05em 0.4em; border-radius: var(--radius-sm);
  background: var(--terracotta-wash); color: var(--terracotta);
}

.nav-dropdown { display: none; padding: var(--space-1) 0 var(--space-3); }
.nav-item.open .nav-dropdown { display: block; }

.nav-dropdown a {
  display: block;
  padding: 0.28rem var(--space-5) 0.28rem 3.2rem;
  font-family: var(--f-ui); font-size: 0.8125rem;
  color: var(--dilute); text-decoration: none;
}
.nav-dropdown a:hover { color: var(--terracotta); background: var(--paper); }

.nav-dropdown .group {
  display: block;
  padding: var(--space-3) var(--space-5) 0.2rem 3.2rem;
  font-family: var(--f-ui); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--dilute-light);
}
.nav-dropdown .lead { font-weight: 700; color: var(--gloss-soft); }


/* -- The sillybos tags: one journal, one label --------------- */

.tags-fold { border-top: 1px solid var(--rule); margin-top: var(--space-3); }

/* Wide enough for the capsa to stand beside the column, the list is simply
   there; the disclosure only exists for phones, so its summary is not. */
.tags-fold > summary { display: none; }

.tags-head {
  padding: var(--space-4) var(--space-5) 0.2rem;
  font-family: var(--f-ui); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dilute-light);
  border-top: 1px solid var(--rule);
  margin-top: var(--space-2);
}
.tags-head:first-child { border-top: 0; margin-top: 0; }

.tag {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2);
  position: relative;
  padding: 0.3rem var(--space-5);
  font-family: var(--f-ui); font-size: 0.78rem; line-height: 1.4;
  color: var(--gloss-soft); text-decoration: none;
}
.tag:hover { background: var(--paper); color: var(--gloss); }

.tag .jname { flex: 1 1 auto; min-width: 0; }
.tag .jmeta { flex: none; display: flex; align-items: baseline; gap: 0.3rem; }
.tag .jcount {
  font-family: var(--f-mono); font-size: 0.68rem;
  font-variant-numeric: tabular-nums; color: var(--dilute-light);
}

/* The diple proper, as it marks a row in the coverage table: a mark
   rather than a tint, so it survives a printout with background
   graphics off and does not depend on colour alone. */
.tag[aria-current="page"] { color: var(--gloss); font-weight: 700; background: var(--paper); }
.tag[aria-current="page"]::before {
  content: ""; position: absolute; left: var(--space-3); top: 0.62rem;
  width: 0; height: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

/* Provenance, not status: how a record arrived is a quiet fact, so it
   is set in the dilute glaze rather than given a colour of its own. */
.src {
  font-family: var(--f-ui); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12em 0.34em; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); color: var(--dilute);
  background: var(--papyrus); white-space: nowrap;
}

/* Faience marks absence, and nothing else. A journal we cannot reach
   is the only thing in this column that is not here. */
.tags-head.absent { color: var(--faience); }
.tag.absent { color: var(--faience); cursor: default; }
.tag.absent:hover { background: none; }


/* -- The foot of the capsa ----------------------------------- */

.capsa-foot {
  flex: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--space-3);
}

.figure-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  padding: 0.35rem 0.7rem;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.figure-toggle:hover { background: var(--terracotta-wash); }

.capsa-back {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); text-decoration: none;
}
.capsa-back:hover { color: var(--terracotta); }


/* ============================================================
   The column: page furniture.
   ============================================================ */

.page-head { margin-bottom: var(--space-8); }
.page-head h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.lede {
  font-size: 1.16rem; line-height: 1.6;
  color: var(--gloss-soft); max-width: 58ch;
}

/* The paragraphos: a short stroke hanging at the left edge, which is
   what it was in a book roll, rather than a rule across the measure. */
.column-inner > section + section::before {
  content: ""; display: block; width: 2.5rem; height: 0;
  border-top: 2px solid var(--gloss);
  margin: var(--space-12) 0 var(--space-8);
}

.section-head { margin-bottom: var(--space-5); }
.section-head h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.section-head p {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); max-width: 68ch; margin: 0;
}


/* -- Tool cards ---------------------------------------------- */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-3);
}

.tool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tool:hover { border-color: var(--terracotta); background: var(--papyrus); }

.tool .ic { grid-row: 1 / span 2; align-self: start; margin-top: 0.1rem; }

.tool .tname {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  color: var(--gloss); line-height: 1.3;
}
.tool:hover .tname { color: var(--terracotta); }

.tool .tdesc {
  font-size: 0.875rem; line-height: 1.5;
  color: var(--dilute); margin: 0;
}


/* -- The foot of the page ------------------------------------ */

.column-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--f-ui); font-size: var(--text-sm);
}

.coronis {
  display: block; width: 22px; height: 22px;
  margin: var(--space-10) 0 0; color: var(--dilute-light);
}


/* ============================================================
   Narrow viewports: the capsa lies down above the column rather
   than standing beside it. It stops being sticky, because a
   full-height sticky box on a phone is just a wall.
   ============================================================ */

@media (max-width: 62rem) {
  .layout { flex-direction: column; }
  .capsa {
    width: 100%;
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  /* No nested scroll region. A scrollable box inside a scrolling page is
     a trap on touch, so the capsa simply gets as tall as it needs. */
  .capsa-nav { overflow: visible; }

  /* Seen from above, a capsa is a ring of tags rather than a column of
     them. Fifty-four stacked rows would bury the page, so they reflow
     into a wrapped field -- which is what the legacy sidebar did here
     too, and it was right to. */
  .tags-fold > summary {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0.55rem var(--space-5);
    font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
    color: var(--gloss-soft); cursor: pointer; list-style: none;
  }
  .tags-fold > summary::-webkit-details-marker { display: none; }
  /* The diple again, rotated: closed points right, open points down. */
  .tags-fold > summary::after {
    content: ""; margin-left: auto; width: 0; height: 0;
    border-left: 6px solid var(--terracotta);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    transition: transform var(--t-fast);
  }
  .tags-fold[open] > summary::after { transform: rotate(90deg); }
  .tags-count {
    font-family: var(--f-mono); font-size: 0.68rem;
    padding: 0.05em 0.4em; border-radius: var(--radius-sm);
    background: var(--terracotta-wash); color: var(--terracotta);
  }

  .tags {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
  }
  .tags-head {
    width: 100%; border-top: 0;
    margin-top: var(--space-2); padding: var(--space-2) 0 0;
  }
  .tags-head:first-child { margin-top: 0; }
  .tag {
    padding: 0.26rem 0.6rem;
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    background: var(--papyrus);
  }
  /* The provenance chip inside a chip is one border too many. */
  .tag .src { display: none; }
  .tag[aria-current="page"] {
    border-color: var(--terracotta); color: var(--terracotta);
    padding-left: 1.15rem;
  }
  .tag[aria-current="page"]::before { left: 0.42rem; top: 0.6rem; }

  .column-inner { padding: var(--space-8) var(--space-5) var(--space-12); }
}

@media (max-width: 40rem) {
  .column-inner { padding: var(--space-6) var(--space-4) var(--space-10); }
  .page-head h1 { font-size: var(--text-2xl); }
}


/* ============================================================
   The index: the pinax proper.

   Callimachus's Pinakes were a catalogue, and a catalogue is a
   ruled list, not a deck of cards. Two hundred entries in boxes
   is a wall; two hundred entries separated by hairlines is a
   column you can run your eye down. So the article list borrows
   the discipline of the coverage table on Eunomia's Labors --
   rules and nothing else, no zebra, no boxes, tabular figures.
   ============================================================ */

/* -- The orientation block, shown on a first visit ----------- */

.orient {
  background: var(--paper);
  border-left: 2px solid var(--terracotta);
  padding: var(--space-6) var(--space-6) var(--space-4);
  margin-bottom: var(--space-10);
}
.orient p { max-width: 64ch; }
.orient p:first-child { font-size: 1.0625rem; }
.orient p:last-of-type { color: var(--dilute); font-size: 0.9375rem; }

.orient-starts {
  list-style: none; padding: 0;
  margin: var(--space-5) 0 var(--space-4);
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* The diple hangs on the row, not on the link, so the gloss can drop to
   its own line underneath instead of sitting in the flex run beside it. */
.orient-starts li {
  margin: 0; display: flex; align-items: baseline; gap: var(--space-2);
}
.orient-starts li::before {
  content: ""; flex: none; width: 0; height: 0;
  position: relative; top: -0.15em;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.orient-starts a {
  display: block;
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  text-decoration: none; color: var(--gloss);
}
.orient-starts a:hover { color: var(--terracotta); }
.orient-starts .gloss {
  display: block; font-family: var(--f-body); font-weight: 400;
  color: var(--dilute); font-size: 0.875rem; line-height: 1.4;
  margin-top: 0.15rem;
}


/* -- The head of the column ---------------------------------- */

.column-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.column-head h1 { font-size: var(--text-3xl); margin: 0; }
.result-count {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); font-variant-numeric: tabular-nums;
}


/* -- Search and filters -------------------------------------- */

.sift {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-8);
}

.sift-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
}
.sift-row + .sift-row { margin-top: var(--space-4); }

.sift-label {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); flex: none;
}

.sift input[type="text"],
.sift input[type="search"],
.sift select {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.44rem 0.62rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.sift input[type="text"] { flex: 1 1 22rem; }
.sift select { flex: 0 1 auto; max-width: 16rem; }

.btn {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.44rem 1.1rem;
  color: var(--added-white); background: var(--terracotta);
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
  text-decoration: none; display: inline-block;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn:hover {
  background: var(--terracotta-lift); border-color: var(--terracotta-lift);
  color: var(--added-white);
}

.btn-quiet {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.4rem 0.85rem;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
  text-decoration: none; display: inline-block;
}
.btn-quiet:hover { background: var(--terracotta-wash); color: var(--terracotta); }

.sift-clear {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); text-decoration: underline;
  text-underline-offset: 0.18em;
}
.sift-clear:hover { color: var(--terracotta); }

.sift-dash { color: var(--dilute-light); }

/* Active filters, as marginal notes on the query rather than buttons. */
.sift-active { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.22rem 0.5rem;
  background: var(--terracotta-wash); color: var(--terracotta);
  border-radius: var(--radius-sm);
}
.pill a {
  color: inherit; text-decoration: none; font-size: 1rem; line-height: 1;
}
.pill a:hover { color: var(--gloss); }


/* -- Periods: the divisions of the roll ---------------------- */

.period + .period { margin-top: var(--space-10); }

.period-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dilute);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--gloss);
}


/* -- The entries --------------------------------------------- */

.entries { list-style: none; padding: 0; margin: 0; }

.entry {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.entry:last-child { border-bottom: 2px solid var(--gloss); }

.entry-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute);
  margin-bottom: var(--space-2);
}
.entry-journal { font-weight: 700; color: var(--gloss-soft); }
.entry-date { font-variant-numeric: tabular-nums; }

/* Open access is a good thing and says so; the status tokens exist
   for exactly this and nothing else on the page uses green. */
.oa-badge {
  font-family: var(--f-ui); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.14em 0.4em; border-radius: var(--radius-sm);
  background: var(--good-bg); color: var(--good-fg);
  text-decoration: none; white-space: nowrap;
}
.oa-badge:hover { color: var(--good-fg); text-decoration: underline; }

.entry-title-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  max-width: var(--measure);
}
.entry-title {
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.4;
  color: var(--gloss); text-decoration: none;
  text-wrap: pretty;
}
.entry-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }

.entry-out {
  flex: none; color: var(--dilute-light); text-decoration: none;
  font-size: 0.8rem; line-height: 1;
}
.entry-out:hover { color: var(--terracotta); }

.entry-authors {
  font-family: var(--f-ui); font-size: 0.8125rem;
  color: var(--dilute); margin-top: var(--space-2);
  max-width: var(--measure);
}
.entry-authors.no-data { font-style: italic; color: var(--dilute-light); }

.cite-count {
  font-family: var(--f-mono); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; color: var(--dilute-light);
  margin-left: 0.3rem;
}

/* The abstract, folded. The diple points right until it is read. */
.abstract { margin-top: var(--space-2); }
.abstract > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dilute);
}
.abstract > summary::-webkit-details-marker { display: none; }
.abstract > summary:hover { color: var(--terracotta); }
.abstract > summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.abstract[open] > summary::before { transform: rotate(90deg); }
.abstract-text {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--rule);
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--gloss-soft); max-width: var(--measure);
}

.entry-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.entry-tag {
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.14em 0.45em;
  color: var(--dilute); background: var(--papyrus-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none;
}
.entry-tag:hover {
  color: var(--terracotta); border-color: var(--terracotta);
  background: var(--terracotta-wash);
}

.entry-keywords,
.entry-doi {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute-light); margin-top: var(--space-2);
}
.entry-keywords .label { font-weight: 700; }
.entry-doi a { color: var(--dilute); font-family: var(--f-mono); font-size: 0.72rem; }
.entry-doi a:hover { color: var(--terracotta); }


/* -- Pagination ---------------------------------------------- */

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-8);
  font-family: var(--f-ui); font-size: var(--text-sm);
}
.pagination .page-info { color: var(--dilute); font-variant-numeric: tabular-nums; }


/* -- Nothing found ------------------------------------------- */

.empty {
  padding: var(--space-12) 0;
  color: var(--dilute); max-width: var(--measure);
}
.empty p { margin-bottom: var(--space-3); }
.empty .hint { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute-light); }


/* ============================================================
   Capsa additions for the index: the journal picker, the
   CompPile pointer, and the fetch controls.
   ============================================================ */

.picker { padding: var(--space-3) var(--space-5) 0; }
.picker > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.4rem 0.6rem;
  color: var(--gloss-soft);
  background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after {
  content: ""; margin-left: auto; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.picker[open] > summary::after { transform: rotate(90deg); }
.picker-summary-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker-list {
  max-height: 18rem; overflow-y: auto;
  margin-top: var(--space-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper);
  padding: var(--space-2) 0;
}
.picker-list label {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0.22rem var(--space-3);
  font-family: var(--f-ui); font-size: 0.78rem;
  color: var(--gloss-soft); cursor: pointer;
}
.picker-list label:hover { background: var(--papyrus-deep); }
.picker-list input { accent-color: var(--terracotta); margin: 0; flex: none; }
.picker-list .jname { flex: 1 1 auto; min-width: 0; }
.picker-list .jcount {
  font-family: var(--f-mono); font-size: 0.66rem;
  color: var(--dilute-light); font-variant-numeric: tabular-nums;
}
.picker-group {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dilute-light);
  padding: var(--space-3) var(--space-3) 0.2rem;
  border-top: 1px solid var(--rule); margin-top: var(--space-2);
}
.picker-group:first-of-type { border-top: 0; margin-top: 0; }
.picker-list .absent { color: var(--faience); cursor: default; }

.comppile {
  font-family: var(--f-ui); font-size: var(--text-xs); line-height: 1.5;
  color: var(--dilute);
}
.comppile a { color: var(--terracotta); }

.fetch-btn {
  width: 100%;
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  padding: 0.45rem 0.7rem;
  color: var(--added-white); background: var(--terracotta);
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.fetch-btn:hover:not(:disabled) { background: var(--terracotta-lift); }
.fetch-btn:disabled { opacity: 0.55; cursor: default; }
.fetch-btn--deep {
  color: var(--terracotta); background: transparent;
}
.fetch-btn--deep:hover:not(:disabled) { background: var(--terracotta-wash); }
.fetch-note {
  font-family: var(--f-ui); font-size: 0.66rem;
  color: var(--dilute-light); margin: 0.3rem 0 0;
}

/* The toast sits over the column, not the capsa, because that is where
   the reader is looking when they press the button. */
.fetch-status {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 50;
  max-width: 26rem;
  padding: var(--space-4) var(--space-5);
  background: var(--paper); color: var(--gloss-soft);
  border: 1px solid var(--rule-strong); border-left: 2px solid var(--terracotta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--f-ui); font-size: var(--text-sm); line-height: 1.5;
}

@media (max-width: 62rem) {
  .picker { padding: var(--space-3) var(--space-5); }
  .fetch-status { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); max-width: none; }
}


/* ============================================================
   Chart colour.

   These live here and not in tokens.css, because that file is a
   verbatim copy of Eunomia's and has to stay one. Charts are the
   one place Pinakes needs more hues than the Suite carries: a
   journal map is categorical data, and identity cannot be encoded
   in a single saturated clay.

   The eight are pigments from the same world -- terracotta,
   verdigris, ochre, indigo, olive, manganese, Egyptian blue,
   madder -- pushed to the chroma a categorical encoding actually
   needs. The Suite's own discipline still holds everywhere else on
   the page: these appear inside a plot frame and nowhere outside it.

   Both figures were checked with the dataviz validator rather than
   by eye (scripts/validate_palette.js):

     red-figure   on #F5EFE1 -- all five checks pass
     black-figure on #171512 -- pass, with --cat-7 against --cat-6
                                at deutan dE 6.8

   That last pair sits in the 6-8 band, which is legal ONLY with a
   secondary encoding. So on any chart that can show both at once,
   a legend is not optional and direct labels are better. Do not
   reorder these: adjacency is what was validated, and madder next
   to verdigris in particular is invisible to a deutan reader.

   The order is fixed and is never cycled. Past eight series, fold
   the tail into --cat-other rather than reusing a hue: a reader
   cannot hold more than eight identities anyway, and repeating one
   says two journals are the same journal.
   ============================================================ */

:root {
  --cat-1: #A8462C;   /* terracotta   */
  --cat-2: #008B78;   /* verdigris    */
  --cat-3: #B0821A;   /* ochre        */
  --cat-4: #5A57A8;   /* indigo       */
  --cat-5: #3E7D2A;   /* olive        */
  --cat-6: #8A3A73;   /* manganese    */
  --cat-7: #1466A0;   /* Egyptian blue*/
  --cat-8: #A83A5C;   /* madder       */
  --cat-other: #8C8271;

  /* Chart chrome. Recessive by construction: the grid is the page
     hairline, the axes are the dilute glaze, and the ink is body
     text. Nothing in a plot frame is heavier than the data. */
  --chart-ink:     #33302A;
  --chart-muted:   #6A5F4E;
  --chart-grid:    #DDD3BF;
  --chart-surface: #F5EFE1;
  --chart-halo:    #FBF7EE;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-1: #C96B50;
    --cat-2: #2FA890;
    --cat-3: #A8842A;
    --cat-4: #7F7BC8;
    --cat-5: #6BA34B;
    --cat-6: #B2689C;
    --cat-7: #4F93C7;
    --cat-8: #CB6E88;
    --cat-other: #877C69;

    --chart-ink:     #D8D0C0;
    --chart-muted:   #ADA18C;
    --chart-grid:    #332E26;
    --chart-surface: #171512;
    --chart-halo:    #1F1C18;
  }
}

:root[data-theme="dark"] {
  --cat-1: #C96B50; --cat-2: #2FA890; --cat-3: #A8842A; --cat-4: #7F7BC8;
  --cat-5: #6BA34B; --cat-6: #B2689C; --cat-7: #4F93C7; --cat-8: #CB6E88;
  --cat-other: #877C69;
  --chart-ink: #D8D0C0; --chart-muted: #ADA18C; --chart-grid: #332E26;
  --chart-surface: #171512; --chart-halo: #1F1C18;
}


/* ============================================================
   Chart chrome: the frame around a visualisation.
   ============================================================ */

.viz {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--papyrus);
  padding: var(--space-4);
  margin-top: var(--space-4);
  overflow: hidden;
}
.viz svg { display: block; max-width: 100%; height: auto; }
.viz canvas { display: block; max-width: 100%; }

/* Controls sit in one row above the plot, never beside or below it. */
.viz-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.viz-controls label,
.viz-controls .viz-label {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
}
.viz-controls select,
.viz-controls input[type="search"],
.viz-controls input[type="text"] {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.34rem 0.55rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.viz-controls input[type="range"] { accent-color: var(--terracotta); }

.viz-stats {
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--dilute); font-variant-numeric: tabular-nums;
}

/* A legend is present whenever more than one series is drawn. With the
   black-figure blue/manganese pair sitting at deutan dE 6.8, it is the
   secondary encoding that makes that pair legal at all. */
.viz-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}
.viz-legend .key { display: inline-flex; align-items: center; gap: var(--space-2); }
.viz-legend .swatch {
  width: 0.7rem; height: 0.7rem; flex: none;
  border-radius: 1px; border: 1px solid var(--chart-halo);
}

.viz-note {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute-light); margin-top: var(--space-3);
  max-width: 70ch;
}

/* One tooltip style for every chart on the site. */
.viz-tip {
  position: absolute; z-index: 40; pointer-events: none;
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  background: var(--paper); color: var(--gloss);
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--terracotta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--f-ui); font-size: var(--text-sm); line-height: 1.45;
}
.viz-tip .tip-title { font-weight: 700; color: var(--gloss); }
.viz-tip .tip-meta { color: var(--dilute); font-size: var(--text-xs); }
.viz-tip .tip-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.viz-empty {
  padding: var(--space-10) 0; text-align: center;
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
}


/* ============================================================
   /explore.

   The markup here keeps its legacy class names on purpose. Eighteen
   visualisation modules and the loader address this page by id and
   class -- net-select, acocit-container, citnet-stats, and several
   dozen more -- so renaming anything would mean editing JavaScript
   to change a colour. The selectors stay; what changed is that every
   value behind them now comes from a token.
   ============================================================ */

.page-intro {
  font-size: 1.16rem; line-height: 1.6;
  color: var(--gloss-soft); max-width: 58ch;
  margin-bottom: var(--space-8);
}


/* -- The accordion: five questions, twenty tools -------------- */

.accordion-nav { margin-bottom: var(--space-10); }

.accordion-section { border-top: 1px solid var(--rule); }
.accordion-section:last-child { border-bottom: 1px solid var(--rule); }

.accordion-header {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-4) 0;
  background: none; border: 0;
}
.accordion-header:hover .accordion-question { color: var(--terracotta); }

.accordion-question {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.2;
  color: var(--gloss);
}
.accordion-orient {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); margin-top: 0.2rem; max-width: 68ch;
}
.accordion-header-text { flex: 1 1 auto; min-width: 0; }

/* The diple, rotated: closed points right, open points down. Same mark
   as the FAQ rows on Eunomia's Labors and the abstract folds here. */
.accordion-chevron {
  flex: none; width: 0; height: 0; font-size: 0;
  border-left: 6px solid var(--terracotta);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform var(--t-fast);
}
.accordion-section.open .accordion-chevron { transform: rotate(90deg); }
/* The markup still holds the old text arrow inside the span; the border
   triangle is the mark now, so the glyph itself is hidden by font-size:0
   above rather than removed from eighteen places in the template. */

/* The loader animates this by writing maxHeight in pixels -- 0 when shut,
   scrollHeight when open. So it must collapse by max-height and not by
   display, or the measurement it takes would be of a hidden box. */
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-section.open .accordion-body { padding-bottom: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  .accordion-body { transition: none; }
}

.accordion-cards {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.accordion-card {
  display: block; cursor: pointer;
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.accordion-card:hover { border-color: var(--terracotta); background: var(--papyrus); }
.accordion-card-name {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  color: var(--gloss); line-height: 1.3;
}
.accordion-card:hover .accordion-card-name { color: var(--terracotta); }
.accordion-card-desc {
  font-size: 0.875rem; line-height: 1.5;
  color: var(--dilute); margin-top: 0.25rem;
}


/* -- Panels --------------------------------------------------- */

/* display is switched inline by the loader; do not set it here. */
.tab-panel { padding-top: var(--space-2); }

.explore-tab { display: none; }   /* legacy tab buttons, kept for the JS */

.tab-intro {
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--gloss-soft); max-width: var(--measure);
  margin-bottom: var(--space-4);
}
.tab-coverage-link,
.coverage-note-link {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute);
}
.tab-coverage-link a,
.coverage-note-link a { color: var(--terracotta); }

.explore-hint {
  font-family: var(--f-quote); font-style: italic;
  font-size: 0.9375rem; color: var(--dilute);
  margin-bottom: var(--space-3);
}

.loading-msg {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); padding: var(--space-8) 0; text-align: center;
}

.chart-section-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dilute);
  margin: var(--space-8) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}


/* -- Plot frames ---------------------------------------------- */

.chart-container,
.chart-container--horiz,
.chart-container--auto,
.citnet-container,
.network-container,
.heatmap-container {
  position: relative; width: 100%;
  background: var(--papyrus);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden;
}
.chart-container { height: 480px; }
.chart-container--horiz { min-height: 360px; height: auto; }
.chart-container--auto { height: auto; }
.citnet-container,
.network-container { min-height: 32rem; }

.chart-container canvas,
.chart-container--horiz canvas { display: block; }
.citnet-container svg,
.network-container svg,
.heatmap-container svg { display: block; }


/* -- Controls: one row above the plot, never beside it -------- */

.chart-toolbar,
.network-toolbar,
.citnet-controls,
.citnet-filters,
.ds-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.citnet-filter-group,
.citations-filter-group,
.net-control-group {
  display: flex; align-items: center; gap: var(--space-2);
}

.filter-label,
.net-label,
.citnet-journal-label {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); white-space: nowrap;
}

.filter-select,
.net-select,
.net-search,
.te-journal-check {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.34rem 0.55rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  max-width: 16rem;
}

.citnet-slider { accent-color: var(--terracotta); }

.filter-apply-btn,
.net-btn,
.rp-filter-btn,
.soi-compare-control,
.ds-zoom-reset {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.36rem 0.8rem; cursor: pointer;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.filter-apply-btn:hover,
.net-btn:hover,
.rp-filter-btn:hover,
.soi-compare-control:hover,
.ds-zoom-reset:hover { background: var(--terracotta-wash); }

.rp-filter-btn.active,
.net-btn.active {
  color: var(--added-white); background: var(--terracotta);
}

.net-stats,
.citnet-stats-text,
.citnet-meta {
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--dilute); font-variant-numeric: tabular-nums;
}


/* -- The journal picker on the network tabs ------------------- */

.citnet-journal-picker { position: relative; }
.citnet-journal-summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.34rem 0.6rem;
  color: var(--gloss-soft); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.citnet-journal-summary::-webkit-details-marker { display: none; }
.citnet-journal-summary::after {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.citnet-journal-picker[open] .citnet-journal-summary::after { transform: rotate(90deg); }

.citnet-journal-list {
  position: absolute; z-index: 30; top: 100%; left: 0;
  min-width: 20rem; max-height: 20rem; overflow-y: auto;
  margin-top: var(--space-2); padding: var(--space-2) 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.citnet-journal-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0.2rem var(--space-3); cursor: pointer;
  font-size: 0.78rem; color: var(--gloss-soft); white-space: normal;
}
.citnet-journal-label:hover { background: var(--papyrus-deep); }
.citnet-journal-label input { accent-color: var(--terracotta); flex: none; margin: 0; }

.citnet-legend,
.network-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}


/* -- The selection bar under a network ------------------------ */

.net-infobar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--rule); border-left: 2px solid var(--terracotta);
  border-radius: var(--radius-sm);
  font-family: var(--f-ui); font-size: var(--text-sm);
}
.net-infobar-name { font-weight: 700; color: var(--gloss); }
.net-infobar-detail { color: var(--dilute); font-size: var(--text-xs); }
.net-infobar-link { color: var(--terracotta); text-decoration: none; }
.net-infobar-link:hover { text-decoration: underline; }
.net-infobar-close {
  margin-left: auto; cursor: pointer;
  background: none; border: 0; color: var(--dilute);
  font-size: 1rem; line-height: 1;
}
.net-infobar-close:hover { color: var(--terracotta); }


/* -- Methodology, folded under each tool ---------------------- */

.abstract-toggle,
.methodology-section { border-top: 1px solid var(--rule); margin-top: var(--space-8); }

.abstract-toggle > summary,
.methodology-summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) 0;
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dilute);
}
.abstract-toggle > summary::-webkit-details-marker,
.methodology-summary::-webkit-details-marker { display: none; }
.abstract-toggle > summary:hover,
.methodology-summary:hover { color: var(--terracotta); }
.abstract-toggle > summary::before,
.methodology-summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.abstract-toggle[open] > summary::before,
.methodology-section[open] .methodology-summary::before { transform: rotate(90deg); }

.methodology-body { padding: 0 0 var(--space-6); }
.methodology-body p { max-width: var(--measure); font-size: 0.9375rem; }
.methodology-heading {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  color: var(--gloss); margin: var(--space-5) 0 var(--space-2);
}
.methodology-refs {
  font-size: 0.875rem; color: var(--dilute);
  max-width: var(--measure);
}
.methodology-refs a { color: var(--terracotta); }


/* -- Tooltips -------------------------------------------------
   The D3 modules each create their own tooltip node and give it a
   private class, so every one of them is listed. They all get the
   same object: paper, a hairline, and a terracotta edge on the left.

   The legacy tooltip was an inverted black chip, which in black-figure
   would have been a light chip on a dark page -- the one element on the
   site that inverted the wrong way. */
.heatmap-tooltip,
.ego-tip, .citnet-tip, .acocit-tip, .bibcoup-tip, .cent-tip,
.cocit-tip, .comm-tip, .jflow-tip, .te-tip {
  position: fixed; z-index: 200; pointer-events: none;
  max-width: 24rem; white-space: normal;
  padding: var(--space-3) var(--space-4);
  background: var(--paper); color: var(--gloss);
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--terracotta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--f-ui); font-size: 0.8125rem; line-height: 1.5;
}


/* -- Tables inside a panel ------------------------------------ */

.ds-table {
  border-collapse: collapse; width: 100%;
  font-family: var(--f-ui); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.ds-table thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--dilute); text-align: left; white-space: nowrap;
  padding: 0.4rem 0.85rem 0.4rem 0;
  border-bottom: 2px solid var(--gloss);
}
.ds-table td, .ds-table th[scope="row"] {
  padding: 0.5rem 0.85rem 0.5rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-weight: 400;
}
.ds-table tbody tr:last-child > * { border-bottom: 2px solid var(--gloss); }


@media (max-width: 52rem) {
  .chart-container { height: 380px; }
  .citnet-container, .network-container { min-height: 24rem; }
  .citnet-journal-list { min-width: 0; width: 100%; }
}


/* ============================================================
   The article list, under its older name.

   index.html was rebuilt with .entry; article.html and author.html
   still say .article, and their markup is addressed by the tag-vote
   and topic-suggestion scripts. Rather than rename in two templates
   and the JavaScript that reads them, the old names are given the
   same object here. When those pages are next touched the aliases
   can go.
   ============================================================ */

.article-list { list-style: none; padding: 0; margin: 0; }

.article {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.article:last-child { border-bottom: 2px solid var(--gloss); }

.article-meta-top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute); margin-bottom: var(--space-2);
}
.article-journal { font-weight: 700; color: var(--gloss-soft); }
.article-date { font-variant-numeric: tabular-nums; }
.article-affiliation { color: var(--dilute-light); }

.article-title-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  max-width: var(--measure);
}
.article-title {
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.4;
  color: var(--gloss); text-decoration: none; text-wrap: pretty;
}
.article-title:hover {
  color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em;
}
.article-detail-link {
  flex: none; color: var(--dilute-light); text-decoration: none;
  font-size: 0.8rem; line-height: 1;
}
.article-detail-link:hover { color: var(--terracotta); }

.article-authors {
  font-family: var(--f-ui); font-size: 0.8125rem;
  color: var(--dilute); margin-top: var(--space-2);
  max-width: var(--measure);
}
.article-authors.no-data { font-style: italic; color: var(--dilute-light); }

.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.article-tag {
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.14em 0.45em;
  color: var(--dilute); background: var(--papyrus-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none;
}
.article-tag:hover {
  color: var(--terracotta); border-color: var(--terracotta);
  background: var(--terracotta-wash);
}
/* A reader's tag, not the classifier's. Faience would mean absence, so
   this takes the terracotta wash instead: present, but contributed. */
.article-tag--community {
  background: var(--terracotta-wash);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.article-doi { font-family: var(--f-ui); font-size: var(--text-xs); margin-top: var(--space-2); }
.article-doi a { color: var(--dilute); font-family: var(--f-mono); font-size: 0.72rem; }
.article-doi a:hover { color: var(--terracotta); }

.content-header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.content-header h1, .content-header h2 { font-size: var(--text-3xl); margin: 0; }

.empty-state { padding: var(--space-12) 0; color: var(--dilute); max-width: var(--measure); }
.empty-state p { margin-bottom: var(--space-3); }
.empty-hint { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute-light); }


/* ============================================================
   One article: the full record.
   ============================================================ */

.detail-header { margin-bottom: var(--space-6); }
.detail-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: -0.01em; text-wrap: balance;
  margin: 0 0 var(--space-4);
  color: var(--gloss);
}
/* The title is wrapped in a link to the publisher, so without this it takes
   the global anchor treatment and a whole display-size heading arrives
   underlined in terracotta. It is the title first and a link second. */
.detail-title a {
  color: inherit; text-decoration: none;
}
.detail-title a:hover {
  color: var(--terracotta);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}
.detail-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute);
}

.detail-authors { margin: var(--space-4) 0 0; }
.detail-author-item {
  display: block; font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--gloss-soft); margin-bottom: 0.2rem;
}
.author-link { color: var(--terracotta); text-decoration: none; }
.author-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.author-affiliation-inline { color: var(--dilute-light); font-size: var(--text-xs); }

.detail-section-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin: var(--space-10) 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--gloss);
}

.detail-abstract {
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--gloss-soft); max-width: var(--measure);
}

/* The record proper: a two-column list, set like a catalogue entry. */
.detail-fields {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  font-family: var(--f-ui); font-size: var(--text-sm);
  max-width: 52rem;
}
.detail-fields dt {
  color: var(--dilute); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.15em;
}
.detail-fields dd { margin: 0; color: var(--gloss-soft); overflow-wrap: break-word; }

.export-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.export-btn {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  padding: 0.32rem 0.7rem; cursor: pointer;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
  text-decoration: none;
}
.export-btn:hover { background: var(--terracotta-wash); color: var(--terracotta); }

.oa-status-text, .ext-doi-link, .citation-network-link, .comppile-ref-link {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
}
.citation-network-link a, .comppile-ref-link a, .ext-doi-link a { color: var(--terracotta); }


/* -- Citation context ----------------------------------------- */

.citation-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin: var(--space-4) 0 var(--space-6);
}
/* Numerals in the display face: a didone's figures are the best thing
   about it, and this section is made of them. */
.citation-stat {
  font-family: var(--f-display); font-size: 2.1rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--gloss);
  border-top: 2px solid var(--gloss); padding-top: var(--space-2);
  min-width: 7rem;
}
.citation-stat .label,
.citation-subcount {
  display: block; font-family: var(--f-ui); font-size: var(--text-xs);
  font-variant-numeric: normal; color: var(--dilute);
  margin-top: 0.3rem; line-height: 1.35;
}

.citation-columns {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.citation-col-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
}

.citation-list { list-style: none; padding: 0; margin: 0; }
.citation-list--bibliography { padding-left: 0; }
.citation-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem; line-height: 1.5;
}
.citation-item:last-child { border-bottom: 0; }
/* Outside the index: the work is real, we just do not hold it. */
.citation-item--ext { color: var(--dilute); }

.citation-title { color: var(--gloss); text-decoration: none; }
.citation-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.citation-title--plain { color: var(--gloss-soft); }
.citation-byline, .citation-journal {
  display: block; font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute); margin-top: 0.2rem;
}

.citation-empty, .citation-pending, .citation-overflow, .citation-coverage-note {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); padding: var(--space-3) 0;
}
.citation-pending { font-style: italic; }
.citation-coverage-note { color: var(--dilute-light); font-size: var(--text-xs); max-width: 70ch; }


/* -- Reader-contributed tags ---------------------------------- */

.tag-vote { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.25rem; }
.tag-vote-btn {
  cursor: pointer; line-height: 1;
  padding: 0 0.15rem; font-size: 0.7rem;
  color: var(--dilute-light); background: none; border: 0;
}
.tag-vote-btn:hover { color: var(--terracotta); }

.tag-suggest { margin-top: var(--space-4); }
.tag-suggest-toggle {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em;
}
.tag-suggest-toggle:hover { color: var(--terracotta); }
.tag-suggest-form {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.tag-suggest-input {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.34rem 0.55rem; flex: 1 1 14rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.tag-suggest-submit {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.34rem 0.9rem; cursor: pointer;
  color: var(--added-white); background: var(--terracotta);
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.tag-suggest-msg { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute); }

.topic-chip {
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.14em 0.45em; margin: 0 0.2rem 0.2rem 0;
  display: inline-block;
  color: var(--dilute); background: var(--papyrus-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none;
}
.topic-chip:hover { color: var(--terracotta); border-color: var(--terracotta); }
.topics-empty { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute-light); }


/* -- Related ---------------------------------------------------- */

.related-section { margin-top: var(--space-10); }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-item {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem; line-height: 1.5;
}
.related-item:last-child { border-bottom: 0; }
.related-item a { color: var(--gloss); text-decoration: none; }
.related-item a:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }


/* ============================================================
   One author.
   ============================================================ */

.author-profile-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); margin-bottom: var(--space-6);
}
.author-profile-institution { color: var(--gloss-soft); }
.author-orcid-link, .author-comppile-link, .cocitation-link { color: var(--terracotta); }
.cocitation-hint { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute-light); }

.author-redacted-note {
  background: var(--paper); border-left: 2px solid var(--faience);
  padding: var(--space-4) var(--space-5);
  color: var(--dilute); font-size: 0.9375rem;
  margin-bottom: var(--space-6); max-width: var(--measure);
}
.author-redacted-tag {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--faience); background: var(--faience-wash);
  padding: 0.14em 0.45em; border-radius: var(--radius-sm);
}

.author-affiliation-summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
}
.author-affiliation-summary::-webkit-details-marker { display: none; }
.author-affiliation-label { font-weight: 700; color: var(--gloss-soft); }
.author-affiliation-item { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); }
.author-affiliation-more { font-size: var(--text-xs); color: var(--dilute-light); }

/* Topic distribution: a bar per topic, terracotta on a papyrus track. */
.author-topics-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.author-topic-row {
  display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr) 3rem;
  align-items: center; gap: var(--space-3);
  padding: 0.25rem 0;
  font-family: var(--f-ui); font-size: var(--text-sm);
}
.author-topic-label { color: var(--gloss-soft); overflow-wrap: break-word; }
.author-topic-bar-wrap {
  background: var(--papyrus-deep); border-radius: 1px; height: 0.6rem;
  border: 1px solid var(--rule);
}
.author-topic-bar { background: var(--terracotta); height: 100%; border-radius: 1px; }
.author-topic-count {
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--dilute); text-align: right; font-variant-numeric: tabular-nums;
}
.author-topics-toggle {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em;
  margin-top: var(--space-3);
}
.author-topics-toggle:hover { color: var(--terracotta); }

/* Insight panels: the small charts on a profile. */
.author-insights { margin-top: var(--space-10); }
.insight-row {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.insight-col { min-width: 0; }
.insight-heading {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
}
.insight-block { margin-bottom: var(--space-8); }
.insight-chart-wrap {
  position: relative; width: 100%; min-height: 15rem;
  background: var(--papyrus);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden;
}
.insight-note { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute-light); margin-top: var(--space-2); }
.insight-empty { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); padding: var(--space-6) 0; }

/* Books by this author. */
.author-books-section { margin-top: var(--space-10); }
.author-books-heading {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--gloss);
}
.author-books-list { list-style: none; padding: 0; margin: 0; }
.author-book-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.author-book-item:last-child { border-bottom: 0; }
.author-book-title { color: var(--gloss); text-decoration: none; font-size: 1rem; }
.author-book-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.author-book-meta, .author-book-series, .author-book-role {
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}
.author-book-role { font-style: italic; }


/* ============================================================
   The author index.
   ============================================================ */

.alpha-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: var(--space-5) 0;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule);
}
.alpha-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; padding: 0.22rem 0.4rem;
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
  color: var(--gloss-soft); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper);
}
.alpha-link:hover { color: var(--terracotta); border-color: var(--terracotta); }
.alpha-link-active {
  color: var(--added-white); background: var(--terracotta); border-color: var(--terracotta);
}
.alpha-prompt { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); }
.alpha-nav-picker { margin-bottom: var(--space-4); }

.author-filter-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.author-filter-input {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.44rem 0.62rem; flex: 1 1 18rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.author-filter-count, .author-count {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); font-variant-numeric: tabular-nums;
}

.author-list, .author-list-full { list-style: none; padding: 0; margin: 0; }
.author-list-full { columns: 2; column-gap: var(--space-8); }
@media (max-width: 52rem) { .author-list-full { columns: 1; } }

.author-item {
  break-inside: avoid;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--rule);
}
.author-item-main { display: flex; align-items: baseline; gap: var(--space-2); }
.author-name-link {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--gloss); text-decoration: none;
}
.author-name-link:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.author-institution { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute-light); }
.no-results { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); padding: var(--space-8) 0; }

.letter {
  font-family: var(--f-display); font-size: var(--text-xl);
  color: var(--terracotta); margin: var(--space-6) 0 var(--space-2);
}


/* -- CompPile pointer, on the detail pages -------------------- */

.comppile-search-form {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.sidebar-comppile { font-family: var(--f-ui); font-size: var(--text-xs); line-height: 1.5; color: var(--dilute); }
.sidebar-comppile a { color: var(--terracotta); }
.sidebar-back-link { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); text-decoration: none; }
.sidebar-back-link:hover { color: var(--terracotta); }


/* ============================================================
   Pieces some templates still name in the older vocabulary.

   The class names stayed when those pages moved, because JavaScript
   addresses a good deal of this markup by class and renaming it would
   have meant editing scripts in order to change a colour. The values
   behind them are tokens like everything else.
   ============================================================ */

.content-title { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }

/* index.html was rebuilt with .period; new.html still says this. */
.period-section + .period-section { margin-top: var(--space-10); }
.period-heading,
.journal-new-section > h3,
.new-page-header h2 {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dilute);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--gloss);
}
.new-page-header { margin-bottom: var(--space-6); }
.journal-new-section { margin-bottom: var(--space-8); }

/* The provenance badge, under its older name. */
.src-badge {
  font-family: var(--f-ui); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12em 0.34em; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); color: var(--dilute);
  background: var(--papyrus); white-space: nowrap;
}

.tag-pill {
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.14em 0.45em; border-radius: var(--radius-sm);
  background: var(--terracotta-wash); color: var(--terracotta);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.page-btn, .show-more-btn, .search-btn, .books-filter-btn, .feeds-btn, .fl-btn {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.4rem 0.9rem; cursor: pointer; text-decoration: none;
  display: inline-block;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.page-btn:hover, .show-more-btn:hover, .search-btn:hover,
.books-filter-btn:hover, .feeds-btn:hover, .fl-btn:hover {
  background: var(--terracotta-wash); color: var(--terracotta);
}
.search-btn { color: var(--added-white); background: var(--terracotta); }
.search-btn:hover { background: var(--terracotta-lift); color: var(--added-white); }

/* The legacy search-and-filter bar, as index.html used to draw it. */
.filter-section {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--space-5) 0; margin-bottom: var(--space-8);
}
.filter-form { display: block; }
.search-row, .filter-row, .export-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
}
.filter-row, .export-row { margin-top: var(--space-4); }
.search-input {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.44rem 0.62rem; flex: 1 1 22rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.filter-label-spaced { margin-left: var(--space-3); }
.filter-select-tag { max-width: 18rem; }
.filter-dash { color: var(--dilute-light); }
.filter-clear {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); text-decoration: underline; text-underline-offset: 0.18em;
}
.filter-clear:hover { color: var(--terracotta); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.filter-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs);
  padding: 0.22rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--terracotta-wash); color: var(--terracotta);
}
.pill-remove { color: inherit; text-decoration: none; font-size: 1rem; line-height: 1; }
.pill-remove:hover { color: var(--gloss); }

/* The checkbox journal filter, as books.html and book.html carry it. */
.journal-filter-wrapper { padding: var(--space-3) var(--space-5) 0; }
.journal-filter > summary,
.journal-filter-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.4rem 0.6rem;
  color: var(--gloss-soft); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.journal-filter-summary::-webkit-details-marker { display: none; }
.filter-summary-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.dropdown-arrow {
  flex: none; width: 0; height: 0; font-size: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.journal-filter[open] .dropdown-arrow { transform: rotate(90deg); }
.journal-filter-list {
  max-height: 18rem; overflow-y: auto; margin-top: var(--space-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper); padding: var(--space-2) 0;
}
.journal-check-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0.22rem var(--space-3); cursor: pointer;
  font-family: var(--f-ui); font-size: 0.78rem; color: var(--gloss-soft);
}
.journal-check-label:hover { background: var(--papyrus-deep); }
.journal-check-label input { accent-color: var(--terracotta); flex: none; margin: 0; }
.journal-check-label .jname { flex: 1 1 auto; min-width: 0; }
.journal-check-label.unavailable { color: var(--faience); cursor: default; }
.unavailable-name { color: var(--faience); }
.journal-filter-divider { border-top: 1px solid var(--rule); margin: var(--space-2) 0; }
.journal-group-label {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dilute-light);
  padding: var(--space-2) var(--space-3) 0.2rem;
}
.nav-section-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute-light);
  padding: var(--space-4) var(--space-5) 0.2rem;
}
.sidebar-footer { display: flex; flex-direction: column; gap: var(--space-2); }


/* ============================================================
   Books: the grid, and one book.
   ============================================================ */

.books-filter-bar {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--space-5) 0; margin-bottom: var(--space-8);
}
.books-filter-row, .books-filter-actions, .books-filter-years {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
.books-filter-row + .books-filter-row { margin-top: var(--space-4); }
.books-filter-group { display: flex; align-items: center; gap: var(--space-2); }
.books-filter-label { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); }
.books-filter-input, .books-filter-select {
  font-family: var(--f-ui); font-size: var(--text-sm);
  padding: 0.4rem 0.6rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.books-filter-input { flex: 1 1 18rem; }
.books-filter-clear {
  font-family: var(--f-ui); font-size: var(--text-sm);
  color: var(--dilute); text-decoration: underline; text-underline-offset: 0.18em;
}
.books-filter-clear:hover { color: var(--terracotta); }
.books-results-meta {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
  font-variant-numeric: tabular-nums; margin-bottom: var(--space-4);
}
.books-empty { padding: var(--space-12) 0; color: var(--dilute); }

.books-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.book-card {
  display: block; padding: var(--space-4);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.book-card:hover { border-color: var(--terracotta); background: var(--papyrus); }
.book-card-title {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.35;
  color: var(--gloss); text-wrap: pretty;
}
.book-card:hover .book-card-title { color: var(--terracotta); }
.book-card-people, .book-card-publisher, .book-card-meta, .book-card-subjects {
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
  margin-top: 0.25rem;
}
.book-card-role { font-style: italic; }
.book-card-year { font-variant-numeric: tabular-nums; }
.book-card-type {
  font-family: var(--f-ui); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12em 0.34em; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); color: var(--dilute); background: var(--papyrus);
}

.book-breadcrumb { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); margin-bottom: var(--space-4); }
.book-breadcrumb a { color: var(--terracotta); }
.book-breadcrumb-sep { color: var(--dilute-light); margin: 0 0.4rem; }

.book-detail-header { margin-bottom: var(--space-6); }
.book-detail-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: -0.01em; text-wrap: balance; color: var(--gloss);
  margin: 0 0 var(--space-3);
}
.book-detail-people, .book-detail-publisher, .book-detail-year,
.book-detail-isbn, .book-detail-subjects, .book-detail-cited,
.book-detail-type-row {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
  margin-top: 0.3rem;
}
.book-detail-role { font-style: italic; }
.book-detail-section-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin: var(--space-10) 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--gloss);
}
.book-detail-abstract {
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--gloss-soft); max-width: var(--measure);
}
.book-detail-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.book-detail-link {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  padding: 0.32rem 0.7rem; text-decoration: none;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.book-detail-link:hover { background: var(--terracotta-wash); color: var(--terracotta); }

.book-citation-block {
  background: var(--paper); border-left: 2px solid var(--terracotta);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-4);
}
.book-citation-text { font-size: 0.9375rem; line-height: 1.6; color: var(--gloss-soft); max-width: var(--measure); }
.book-citation-note { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute-light); margin-top: var(--space-2); }

.book-chapter-section { margin-top: var(--space-8); }
.book-chapter-count { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute); }
.book-chapter-list, .book-chapter-list--fm { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.book-chapter-item, .book-chapter-item--fm {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
}
.book-chapter-item:last-child, .book-chapter-item--fm:last-child { border-bottom: 0; }
/* Front matter is present but not a chapter; it takes the dilute glaze. */
.book-chapter-item--fm { color: var(--dilute); }
.book-chapter-num {
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--dilute-light); font-variant-numeric: tabular-nums; padding-top: 0.15em;
}
.book-chapter-title { font-size: 0.9375rem; line-height: 1.45; color: var(--gloss); text-decoration: none; }
a.book-chapter-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.book-chapter-authors, .book-chapter-pages, .book-chapter-doi, .book-chapter-footer {
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute); margin-top: 0.2rem;
}
.book-chapter-doi a { font-family: var(--f-mono); font-size: 0.72rem; color: var(--dilute); }
.book-chapter-doi a:hover { color: var(--terracotta); }
.book-chapter-body { min-width: 0; }
.book-chapters-unavailable { font-family: var(--f-ui); font-size: var(--text-sm); color: var(--faience); padding: var(--space-4) 0; }


/* ============================================================
   Most cited.
   ============================================================ */

.most-cited-view-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule);
}
.most-cited-view-tab {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 0.34rem 0.8rem; text-decoration: none;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.most-cited-view-tab:hover { background: var(--terracotta-wash); color: var(--terracotta); }
.most-cited-view-tab.active,
.most-cited-view-tab[aria-current="page"] {
  color: var(--added-white); background: var(--terracotta);
}

.most-cited-group { margin-bottom: var(--space-10); }
.most-cited-group-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dilute);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--gloss);
}
.most-cited-list { list-style: none; padding: 0; margin: 0; }
.most-cited-item {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.most-cited-item:last-child { border-bottom: 2px solid var(--gloss); }
/* Numerals in the display face: the ranking is made of them. */
.most-cited-rank {
  font-family: var(--f-display); font-size: 1.35rem; line-height: 1;
  color: var(--dilute-light); font-variant-numeric: tabular-nums;
  text-align: right;
}
.most-cited-body { min-width: 0; }
.most-cited-title { font-size: 1rem; line-height: 1.4; color: var(--gloss); text-decoration: none; }
.most-cited-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.most-cited-byline, .most-cited-journal, .most-cited-meta {
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute); margin-top: 0.2rem;
}
.most-cited-count {
  font-family: var(--f-mono); font-size: var(--text-sm);
  color: var(--terracotta); font-variant-numeric: tabular-nums; white-space: nowrap;
}


/* ============================================================
   The per-article citation network (/citations).
   ============================================================ */

.ego-header { margin-bottom: var(--space-5); }
.ego-title { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.ego-authors, .ego-meta, .ego-stats-text {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
}
.ego-stats-text { font-family: var(--f-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ego-container {
  position: relative; width: 100%; min-height: 32rem;
  background: var(--papyrus); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); overflow: hidden;
}
.ego-key, .citnet-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}
.ego-key-item, .citnet-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.citnet-legend-dot {
  width: 0.7rem; height: 0.7rem; flex: none;
  border-radius: 50%; border: 1px solid var(--chart-halo);
}


/* -- The journal legend, grouped by sub-field -----------------
   Colour carries the sub-field and lightness carries rank within it, so
   the legend is built the same way: the group leads, its journals sit
   under it in their own tints. A flat run of names would assert that the
   reader can tell fifty-five hues apart, which was the old legend's
   problem and is not true of any palette. */

.jlegend { margin-top: var(--space-3); }

.jlegend-group {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
}
.jlegend-group:first-child { border-top: 0; }

.jlegend-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; color: var(--gloss-soft); line-height: 1.3;
}
.jlegend-swatch {
  width: 0.75rem; height: 0.75rem; flex: none;
  border-radius: 1px; border: 1px solid var(--chart-halo);
}

.jlegend-items {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}
.jlegend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.jlegend-item[data-journal]:hover { color: var(--terracotta); }
.jlegend-dot {
  width: 0.6rem; height: 0.6rem; flex: none;
  border-radius: 50%; border: 1px solid var(--chart-halo);
}

.jlegend-key {
  font-family: var(--f-ui); font-size: var(--text-xs);
  color: var(--dilute-light); margin-top: var(--space-3);
  max-width: 72ch;
}

@media (max-width: 52rem) {
  .jlegend-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}


/* ============================================================
   Feeds, and one feed's landing page.
   ============================================================ */

.feeds-lede {
  font-size: 1.16rem; line-height: 1.6; color: var(--gloss-soft);
  max-width: 58ch; margin-bottom: var(--space-8);
}
.feeds-panel, .fl-wrap {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.feeds-addr, .fl-url {
  font-family: var(--f-mono); font-size: 0.8125rem;
  padding: var(--space-3); overflow-wrap: anywhere;
  background: var(--papyrus-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); color: var(--gloss-soft);
}
.fl-url-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fl-url-label, .fl-kicker, .fl-fine, .fl-raw {
  font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute);
}
.fl-kicker {
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.fl-steps { padding-left: 1.15rem; max-width: var(--measure); }
.fl-steps li { margin-bottom: var(--space-2); }
.fl-steps li::marker { color: var(--terracotta); }
.fl-recent, .fl-included { margin-top: var(--space-6); }
.fl-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.fl-item:last-child { border-bottom: 0; }
.fl-item-title { font-size: 0.9375rem; color: var(--gloss); text-decoration: none; }
.fl-item-title:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }
.fl-item-meta { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute); margin-top: 0.2rem; }

.feed-copy {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  padding: 0.3rem 0.7rem; cursor: pointer;
  color: var(--terracotta); background: transparent;
  border: 1px solid var(--terracotta); border-radius: var(--radius-sm);
}
.feed-copy:hover { background: var(--terracotta-wash); }

/* The feed builder's checkbox grid. */
.fb-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.fb-group { min-width: 0; }
.fb-group-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2);
}
.fb-check, .fb-all-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0.2rem 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 0.8125rem; color: var(--gloss-soft);
}
.fb-check input, .fb-all input { accent-color: var(--terracotta); flex: none; margin: 0; }
.fb-count { font-family: var(--f-mono); font-size: 0.68rem; color: var(--dilute-light); }
.fb-summary {
  font-family: var(--f-ui); font-size: var(--text-sm); color: var(--dilute);
  margin: var(--space-4) 0; font-variant-numeric: tabular-nums;
}
.fb-row-link, .fb-section-link { color: var(--terracotta); font-size: var(--text-xs); text-decoration: none; }
.fb-row-link:hover, .fb-section-link:hover { text-decoration: underline; }


/* ============================================================
   Alerts: the saved-search forms.
   ============================================================ */

.alerts-wrap { max-width: 42rem; }
.alerts-field { margin-bottom: var(--space-4); }
.alerts-field label {
  display: block; font-family: var(--f-ui); font-size: var(--text-sm);
  font-weight: 700; color: var(--gloss-soft); margin-bottom: var(--space-2);
}
.alerts-field input[type="email"],
.alerts-field input[type="text"],
.alerts-field select {
  width: 100%;
  font-family: var(--f-ui); font-size: var(--text-base);
  padding: 0.5rem 0.68rem;
  color: var(--gloss); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.alerts-fine { font-family: var(--f-ui); font-size: var(--text-xs); color: var(--dilute-light); margin-top: var(--space-2); }
.alerts-dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  font-family: var(--f-ui); font-size: var(--text-sm);
}
.alerts-dl dt { color: var(--dilute); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.alerts-dl dd { margin: 0; color: var(--gloss-soft); }

.alerts-search {
  background: var(--paper); border-left: 2px solid var(--terracotta);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
}
.alerts-search-label {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
}
.alerts-search-value { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--gloss-soft); }

.alerts-error, .alerts-danger {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  font-family: var(--f-ui); font-size: var(--text-sm);
  background: var(--err-bg); color: var(--err-fg);
  border-left: 2px solid var(--terracotta);
  margin-bottom: var(--space-5);
}

/* Honeypot: off-screen for people, present for the bots that fill it.
   Not display:none -- a form bot skips what is not rendered. */
.alerts-hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}


/* ============================================================
   Institution, and the Datastories landing coverage panel.
   ============================================================ */

.inst-author-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-8); }
@media (max-width: 52rem) { .inst-author-list { columns: 1; } }
.inst-author-item {
  break-inside: avoid; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-ui); font-size: var(--text-sm);
}
.inst-author-item a { color: var(--gloss); text-decoration: none; }
.inst-author-item a:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: 0.18em; }

.accordion-browse-link {
  font-family: var(--f-ui); font-size: var(--text-sm); font-weight: 700;
  color: var(--terracotta); text-decoration: none;
}
.accordion-browse-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.explore-tabs { display: none; }

.coverage-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dilute); background: none; border: 0; cursor: pointer;
  padding: var(--space-3) 0;
}
.coverage-toggle:hover { color: var(--terracotta); }
.coverage-chevron {
  flex: none; width: 0; height: 0; font-size: 0;
  border-left: 5px solid var(--terracotta);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-fast);
}
.coverage-panel.open .coverage-chevron,
.coverage-toggle[aria-expanded="true"] .coverage-chevron { transform: rotate(90deg); }
/* Driven by a max-height toggle, as the accordion is. */
.coverage-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.coverage-panel.open { max-height: 1200px; }
.coverage-section-head {
  font-family: var(--f-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dilute);
  margin: var(--space-5) 0 var(--space-2);
}
.coverage-table-wrap { margin-top: var(--space-3); overflow-x: auto; }

/* The pinax: a well-set catalogue. Rules above and below the header and
   at the foot, no vertical rules, no zebra, tabular lining figures. */
.coverage-table, table.coverage {
  border-collapse: collapse; width: 100%;
  font-family: var(--f-ui); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.coverage-table caption, table.coverage caption {
  caption-side: top; text-align: left;
  font-family: var(--f-quote); font-style: italic;
  font-size: var(--text-base); color: var(--dilute);
  padding: 0 0 var(--space-3);
}
.coverage-table thead th, table.coverage thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--dilute); text-align: left; white-space: nowrap;
  padding: 0.4rem 0.85rem 0.4rem 0;
  border-bottom: 2px solid var(--gloss);
  background: var(--papyrus); position: sticky; top: 0;
}
.coverage-table td, .coverage-table th[scope="row"],
table.coverage td, table.coverage th[scope="row"] {
  padding: 0.5rem 0.85rem 0.5rem 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-weight: 400;
}
.coverage-table tbody tr:last-child > *,
table.coverage tbody tr:last-child > * { border-bottom: 2px solid var(--gloss); }
.coverage-table td.num, table.coverage td.num,
.coverage-table th.num, table.coverage th.num { text-align: right; white-space: nowrap; }