/* ride.css — single stylesheet for the RIDE static site.
 *
 * Specification: knowledge/interface.md (visual + interaction).
 * BEM class hooks: config/element-mapping.yaml.
 * Phase 8 fills in component-level rules; this file is the foundation.
 *
 * Constraints (interface.md §12):
 *   - one stylesheet, no preprocessor, no build step
 *   - target ≤ 800 lines total when Phase 8 lands
 *   - WCAG 2.2 AA per specification.md N5
 *
 * Sections (in order):
 *   1. Design tokens (custom properties)
 *   2. Reset and base typography
 *   3. Layout grid (1080 / 680 / 60 / 220)
 *   4. Page chrome (header, search slot, footer)
 *   5. Component class hooks (empty selectors that Phase 8 fills)
 *   6. Responsive breakpoints (interface.md §10)
 *   7. Accessibility helpers
 *   8. Print stylesheet (Phase 14, placeholder)
 */

/* ─── 1. Design tokens ───────────────────────────────────────────────── */

:root {
  /* Layout — interface.md §4. Widened over the original 1080/680/220
     so the citation suggestion in the sidebar fits without wrapping
     acrobatics; the content column stays around 80 reading-characters. */
  --ride-page-max:       1150px;
  --ride-content-width:   720px;
  --ride-factsheet-width: 980px;
  --ride-sidebar-width:   280px;
  --ride-gutter:           60px;
  --ride-page-padding:     20px;

  /* Typography — interface.md §7. Single Sans-family per the
     mockup-driven decision; the previous Serif body was retired. */
  --ride-font-sans:     "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ride-font-mono:     ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --ride-text-base:     18px;   /* slightly larger than the prior 17 to
                                    keep readability with a sans body */
  --ride-text-small:    14px;   /* sidebar, apparate */
  --ride-text-tiny:     12px;   /* hard floor — never go smaller */
  --ride-text-h1:       30px;
  --ride-text-h2:       22px;
  --ride-text-h3:       18px;

  --ride-leading-prose: 1.6;
  --ride-leading-ui:    1.4;

  --ride-weight-regular: 400;
  --ride-weight-medium:  500;

  /* Colour — derived from the colleague's mockup (mockup/ride.css +
     mockup/template.html) and the live ride.i-d-e.de palette. The
     navbar is medium-dark grey (#333) rather than near-black; the
     accent blue matches the link colour on the live WordPress site. */
  --ride-fg-primary:    #212529;   /* body text — Bootstrap default text */
  --ride-fg-secondary:  #4b5560;   /* secondary text, sidebar labels */
  --ride-fg-tertiary:   #5a6371;   /* meta lines, separators — AA-konform 4.7:1 auf weiß */
  --ride-bg:            #ffffff;
  --ride-bg-muted:      #f4f6f8;   /* abstract block, code background */
  --ride-rule:          #d4d9df;   /* hairlines between sections */
  --ride-accent:        #0d6efd;   /* link blue (mockup-aligned) */
  --ride-accent-hover:  #0a58ca;
  --ride-navbar-bg:     #333333;   /* mockup ride.css line 12 */
  --ride-navbar-fg:     #ffffff;

  /* Focus ring — visible on every interactive element (interface.md §9) */
  --ride-focus:         0 0 0 3px rgba(29, 79, 140, 0.45);

  /* Spacing scale — multiples of 4px keep vertical rhythm honest */
  --ride-space-1:  4px;
  --ride-space-2:  8px;
  --ride-space-3: 12px;
  --ride-space-4: 16px;
  --ride-space-6: 24px;
  --ride-space-8: 32px;
  --ride-space-12: 48px;
  --ride-space-16: 64px;
  --ride-space-20: 80px;

  /* Section-Rhythmus — Abstand zwischen großen Inhaltsblöcken auf Aggregations-
     und Editorialseiten. Knapp doppelt so groß wie der Block-Innenabstand,
     damit die Hierarchie zwischen Block (innen) und Section (außen) klar wird. */
  --ride-stack-section: var(--ride-space-16);
  --ride-stack-block:   var(--ride-space-8);

  /* Form-Tokens — eine Quelle für Radien, Schatten, Übergänge. */
  --ride-radius:        4px;
  --ride-radius-pill:   999px;
  --ride-shadow-soft:   0 1px 2px rgba(17, 20, 24, 0.04), 0 1px 4px rgba(17, 20, 24, 0.04);
  --ride-shadow-hover:  0 2px 8px rgba(17, 20, 24, 0.08), 0 4px 16px rgba(17, 20, 24, 0.04);
  --ride-transition:    160ms ease-out;
}

/* ─── 2. Reset and base typography ───────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-base);
  line-height: var(--ride-leading-prose);
  color: var(--ride-fg-primary);
  background: var(--ride-bg);
  /* Prevent horizontal scroll from wide tables/figures by default;
     blocks that need overflow opt in via their own scroll container. */
  overflow-x: hidden;
  /* Schrift-Rendering: Kerning + Standard-Ligaturen für sauberes Lesetypografie-Bild. */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ride-font-sans);
  font-weight: var(--ride-weight-medium);
  line-height: var(--ride-leading-ui);
  margin: 0 0 var(--ride-space-4);
}

h1 { font-size: var(--ride-text-h1); }
h2 { font-size: var(--ride-text-h2); margin-top: var(--ride-space-12); }
h3 { font-size: var(--ride-text-h3); margin-top: var(--ride-space-8); }

p {
  margin: 0 0 var(--ride-space-4);
}

a {
  color: var(--ride-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ride-accent-hover); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ride-focus);
  border-radius: 2px;
}

code, pre, kbd, samp {
  font-family: var(--ride-font-mono);
  font-size: 0.92em;
}

pre {
  background: var(--ride-bg-muted);
  padding: var(--ride-space-4);
  overflow-x: auto;
}

img { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--ride-rule);
  margin: var(--ride-space-8) 0;
}

/* ─── 3. Layout grid ─────────────────────────────────────────────────── */

.ride-shell {
  max-width: var(--ride-page-max);
  margin: 0 auto;
  padding: 0 var(--ride-page-padding);
}

main.ride-shell {
  padding-top: var(--ride-space-12);
  padding-bottom: var(--ride-space-16);
}

/* Two-column layout for review and aggregation pages.
   Single-column for editorial pages — toggled by adding .ride-page--solo. */
.ride-page {
  display: grid;
  grid-template-columns: var(--ride-content-width) var(--ride-sidebar-width);
  column-gap: var(--ride-gutter);
  align-items: start;
}

.ride-page--solo { grid-template-columns: minmax(0, var(--ride-content-width)); }

/* Home- und Aggregations-Seiten brauchen die volle Page-Max-Breite, damit
   das drei-spaltige Widget-Grid nicht in die Lese-Spalte gezwängt wird. */
.ride-page--wide { grid-template-columns: minmax(0, 1fr); }
.ride-page--wide .ride-content { max-width: none; }

.ride-content   { grid-column: 1; min-width: 0; }
.ride-sidebar   { grid-column: 2; font-family: var(--ride-font-sans); font-size: var(--ride-text-small); }

/* ─── 4. Page chrome ─────────────────────────────────────────────────── */

.ride-header {
  border-bottom: 1px solid var(--ride-rule);
  padding: var(--ride-space-6) 0;
}

.ride-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ride-space-6);
}

.ride-header__brand {
  margin: 0;
  text-decoration: none;
  color: var(--ride-fg-primary);
}

.ride-header__brand-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1;
}

.ride-header__tagline {
  display: block;
  margin: 4px 0 0;
  font-size: var(--ride-text-base);
  color: var(--ride-fg-secondary);
  line-height: var(--ride-leading-ui);
}

.ride-header__brand:hover .ride-header__brand-name,
.ride-header__brand:hover .ride-header__tagline {
  color: var(--ride-accent-hover);
}

.ride-header__logo img {
  display: block;
  max-height: 80px;   /* angehoben von 60px (Welle 8.E) — Logo darf
                         visuell schwerer sitzen, näher am Live-Vorbild */
  width: auto;
  height: auto;
}

@media (max-width: 719px) {
  .ride-header__inner { gap: var(--ride-space-3); }
  .ride-header__brand-name { font-size: 22px; }
  .ride-header__logo img { max-height: 50px; }
}

/* Work-in-Progress-Status — schmales dunkles Band oberhalb des
   Headers, ein Liner, neutral. Tritt visuell zurück wie ein
   System-Status-Bar, nicht wie eine Warnung. Welle 14 entfernt es. */
.ride-wip {
  background: var(--ride-navbar-bg);
  color: var(--ride-navbar-fg);
  font-size: var(--ride-text-tiny);
  line-height: var(--ride-leading-ui);
  letter-spacing: 0.01em;
}
.ride-wip .ride-shell {
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ride-space-3);
}
.ride-wip__label {
  display: inline-block;
  padding: 1px 8px;
  background: var(--ride-accent);
  color: var(--ride-bg);
  border-radius: var(--ride-radius);
  font-weight: var(--ride-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.ride-wip__text {
  color: rgba(255, 255, 255, 0.85);
}
.ride-wip a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ride-wip a:hover { color: var(--ride-bg); }

/* Global navigation — five top-level entries from config/navigation.yaml.
   Dropdown items are native <details>; CSS positions the submenu absolutely
   beneath the summary so the visual model matches a classic navbar.
   No JavaScript required (interface.md §4, R11.5). */
.ride-nav {
  background: var(--ride-navbar-bg);
  color: var(--ride-navbar-fg);
  border-bottom: 1px solid var(--ride-rule);
}

.ride-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ride-space-6);
  align-items: stretch;
}

.ride-nav__item {
  position: relative;
}

.ride-nav__link,
.ride-nav__summary {
  display: inline-block;
  padding: var(--ride-space-3) 0;
  color: var(--ride-bg);
  text-decoration: none;
  font-size: var(--ride-text-base);
  cursor: pointer;
  list-style: none;
}

.ride-nav__summary::-webkit-details-marker { display: none; }
.ride-nav__summary { -webkit-user-select: none; user-select: none; }

/* Disclosure-Caret bewusst entfernt (Welle 8.E) — die Live-Site nutzt
   keinen Indikator, und der Hover-Effekt allein reicht als Affordance. */

.ride-nav__link:hover,
.ride-nav__summary:hover { color: var(--ride-bg-muted); text-decoration: underline; }
.ride-nav__link:focus-visible,
.ride-nav__summary:focus-visible {
  outline: none;
  box-shadow: var(--ride-focus);
}

.ride-nav__dropdown[open] > .ride-nav__summary { color: var(--ride-bg-muted); }

.ride-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: var(--ride-space-2) 0;
  background: var(--ride-bg);
  color: var(--ride-fg-primary);
  border: 1px solid var(--ride-rule);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 50;
}

.ride-nav__sublink {
  display: block;
  padding: var(--ride-space-2) var(--ride-space-4);
  color: var(--ride-fg-primary);
  text-decoration: none;
  font-size: var(--ride-text-small);
}
.ride-nav__sublink:hover { background: var(--ride-bg-muted); color: var(--ride-accent); }
.ride-nav__sublink:focus-visible { outline: none; box-shadow: var(--ride-focus); }

@media (max-width: 719px) {
  .ride-nav__list { gap: var(--ride-space-3); }
  .ride-nav__submenu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding-left: var(--ride-space-4);
  }
  .ride-nav__sublink { color: var(--ride-bg); }
  .ride-nav__sublink:hover { background: transparent; color: var(--ride-bg-muted); }
}

/* Navbar-Layout — Liste links, Suchfeld rechts. Auf Mobile bricht die
   Suche unter die Liste. */
.ride-nav__shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ride-space-6);
  flex-wrap: wrap;
}
.ride-nav__list { flex: 1 1 auto; }
.ride-nav__search {
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.ride-nav__search-form {
  display: flex;
  gap: var(--ride-space-2);
}
.ride-nav__search-form input {
  flex: 1 1 auto;
  padding: var(--ride-space-2) var(--ride-space-3);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  font: inherit;
}
.ride-nav__search-form button {
  padding: var(--ride-space-2) var(--ride-space-3);
  background: var(--ride-bg);
  color: var(--ride-fg-primary);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  font: inherit;
  cursor: pointer;
}

/* Pagefind UI — Tokens an unsere Palette anpassen (Pagefind exposiert
   per CSS-Custom-Property einen kompletten Theme-Hook). */
#ride-search {
  --pagefind-ui-scale: 0.85;
  --pagefind-ui-primary: var(--ride-accent);
  --pagefind-ui-text: var(--ride-fg-primary);
  --pagefind-ui-background: var(--ride-bg);
  --pagefind-ui-border: var(--ride-rule);
  --pagefind-ui-tag: var(--ride-bg-muted);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--ride-radius);
  --pagefind-ui-image-border-radius: var(--ride-radius);
  --pagefind-ui-image-box-ratio: 1 / 1;
  --pagefind-ui-font: var(--ride-font-sans);
  width: 100%;
}
#ride-search.ride-search--unavailable { display: none; }

@media (max-width: 719px) {
  .ride-nav__shell { flex-direction: column; align-items: stretch; }
  .ride-nav__search { max-width: none; }
}

.ride-footer {
  border-top: 1px solid var(--ride-rule);
  padding: var(--ride-space-6) 0;
  margin-top: var(--ride-space-12);
  color: var(--ride-fg-secondary);
  font-size: var(--ride-text-small);
}

.ride-footer__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ride-space-4);
}

.ride-footer__items > li::after {
  content: "·";
  margin-left: var(--ride-space-4);
  color: var(--ride-fg-tertiary);
}

.ride-footer__items > li:last-child::after {
  content: none;
}

.ride-footer__build {
  margin: var(--ride-space-3) 0 0;
  font-size: var(--ride-text-tiny);
  color: var(--ride-fg-tertiary);
}
.ride-footer__build code {
  font-family: var(--ride-font-mono);
  font-size: inherit;
  background: transparent;
  padding: 0;
  letter-spacing: 0.04em;
}

/* ─── 5. Component class hooks ───────────────────────────────────────── */

/* These selectors mirror config/element-mapping.yaml. They are deliberately
   empty (or near-empty) here — Phase 8 templates render with these classes,
   and the rule bodies grow as the visual design solidifies against real
   data. Keep this section in sync with the YAML, both ways.

   Block kinds: Paragraph, List, Table, Figure, Citation. */

.ride-paragraph                 { /* citation-anchor gutter is set by the template */ }
.ride-paragraph__anchor         { position: relative; /* anchor for .ride-copy-feedback popover */ }

.ride-list                      { padding-left: var(--ride-space-6); }
.ride-list--bulleted            { list-style: disc; }
.ride-list--ordered             { list-style: decimal; }
.ride-list--labeled             { list-style: none; padding-left: 0; }
.ride-list--labeled > li        { display: grid; grid-template-columns: max-content 1fr; gap: var(--ride-space-3); }

.ride-table                     { border-collapse: collapse; width: 100%; margin: var(--ride-space-6) 0; }
.ride-table th, .ride-table td  { border: 1px solid var(--ride-rule); padding: var(--ride-space-2) var(--ride-space-3); text-align: left; }
.ride-table th                  { background: var(--ride-bg-muted); font-weight: var(--ride-weight-medium); }

.ride-figure                    { margin: var(--ride-space-8) 0; }
.ride-figure__caption           { font-size: var(--ride-text-small); color: var(--ride-fg-secondary); margin-top: var(--ride-space-2); }
.ride-figure--image img         { display: block; max-width: 100%; height: auto; }
.ride-figure--code pre          { /* code_example variant; pre styles inherit from base */ }

.ride-citation                  { border-left: 3px solid var(--ride-rule); padding-left: var(--ride-space-4); margin: var(--ride-space-6) 0; color: var(--ride-fg-secondary); }
.ride-citation__bibl            { font-size: var(--ride-text-small); margin-top: var(--ride-space-2); }

/* Inline kinds: Text, Emphasis, Highlight, Reference, Note, InlineCode.
   Text has no class — it's bare text nodes. */

.ride-emph                      { font-style: italic; }
.ride-highlight                 { /* contextual rend variants land here */ }
.ride-code                      { font-family: var(--ride-font-mono); background: var(--ride-bg-muted); padding: 1px 4px; border-radius: 2px; overflow-wrap: anywhere; }

/* Reference buckets — Phase 7 resolver classifies every <ref> into one of
   four kinds; the modifier classes are mirrored in
   config/element-mapping.yaml `inlines.Reference.by_bucket`. */
.ride-ref                       { overflow-wrap: anywhere; }
.ride-ref--local                { /* same-page anchor — default link styling is the right affordance */ }
.ride-ref--criteria             { border-bottom: 1px dotted currentColor; text-decoration: none; }
.ride-ref--external             { /* external link styling — class hook, no glyph indicator */ }
.ride-ref--orphan               { color: var(--ride-fg-secondary); text-decoration: line-through; cursor: not-allowed; }

.ride-note                      { /* footnote marker; superscript wrapper renders the @n value */ }

/* Apparate-Block — three parallel sub-blocks under one rule (interface.md §6).
   References | Figures | Notes, each with its own h3. Mobile stacks them. */
.ride-apparate {
  border-top: 1px solid var(--ride-rule);
  margin-top: var(--ride-space-12);
  padding-top: var(--ride-space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ride-gutter);
}
.ride-apparate__panel h3        { margin-top: 0; font-size: var(--ride-text-h3); }
.ride-apparate__list            { font-size: var(--ride-text-small); list-style: none; padding: 0; margin: 0; }
.ride-apparate__list li         { margin-bottom: var(--ride-space-2); }
.ride-note__back                { margin-left: var(--ride-space-2); color: var(--ride-fg-tertiary); text-decoration: none; }
.ride-note__back:hover          { color: var(--ride-accent); }

/* Post-publication amendments (<mod>). Inline marker mirrors the footnote
   marker; the apparate panel lists each original text plus the reviewer note
   with a back-link. */
.ride-amendment                 { /* inline amendment marker; superscript wrapper renders the @n value */ }
.ride-amendment__n              { font-weight: 600; }
.ride-amendment__label          { font-style: italic; color: var(--ride-fg-tertiary); }
.ride-amendment__note           { display: block; margin-top: var(--ride-space-1); }
.ride-amendment__date           { color: var(--ride-fg-tertiary); }

/* Sidebar boxes — TOC, Factsheet, Meta, Cite, Tags. Welle 8.E:
   visuell mit dem Home-Widget-Panel angeglichen (gleiche Radius,
   Border, Padding-Spur), aber ohne Schatten weil die Sidebar als
   Gesamteinheit ruhig bleiben soll. */
.ride-sidebar__box {
  margin-bottom: var(--ride-space-6);
  padding: var(--ride-space-4);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  background: var(--ride-bg);
}
.ride-sidebar__box h2 {
  font-size: var(--ride-text-h3);
  margin: 0 0 var(--ride-space-3);
  font-weight: var(--ride-weight-medium);
}
.ride-sidebar__box > :last-child { margin-bottom: 0; }

.ride-toc                       { list-style: none; padding-left: 0; margin: 0; }
.ride-toc li                    { margin-bottom: var(--ride-space-2); }

.ride-factsheet                 { margin: 0; }
.ride-factsheet a,
.ride-factsheet-page a          { overflow-wrap: anywhere; }
.ride-factsheet__criteria       { font-weight: var(--ride-weight-medium); margin-top: var(--ride-space-3); }
.ride-factsheet__score          { display: flex; align-items: center; gap: var(--ride-space-2); margin: 0 0 var(--ride-space-2); }
.ride-factsheet__bar            { flex: 1; height: 6px; }
.ride-factsheet__anomaly        { color: var(--ride-fg-secondary); font-size: var(--ride-text-tiny); }

/* Review output navigation. The same four-file contract is visible on the
   review, the factsheet and the local draft workspace. */
.ride-artifacts {
  display: flex;
  align-items: center;
  gap: var(--ride-space-4);
  margin: 0 0 var(--ride-space-8);
  padding: var(--ride-space-3) var(--ride-space-4);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  background: var(--ride-bg-muted);
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-small);
}
.ride-artifacts__label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ride-fg-secondary);
  font-weight: var(--ride-weight-medium);
}
.ride-artifacts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ride-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ride-artifacts__list a,
.ride-artifacts__current,
.ride-artifacts__unavailable {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--ride-space-1) var(--ride-space-3);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius-pill);
  background: var(--ride-bg);
  line-height: var(--ride-leading-ui);
  text-decoration: none;
}
.ride-artifacts__list a:hover {
  border-color: var(--ride-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ride-artifacts__current {
  border-color: var(--ride-fg-primary);
  background: var(--ride-fg-primary);
  color: var(--ride-bg);
  font-weight: var(--ride-weight-medium);
}
.ride-artifacts__unavailable {
  color: var(--ride-fg-tertiary);
}

/* Full Factsheet page. Metadata and people form a compact overview, while
   each questionnaire answer remains an individually addressable text block. */
.ride-factsheet-page {
  grid-template-columns: minmax(0, var(--ride-factsheet-width));
}
.ride-factsheet-page .ride-content {
  width: 100%;
  max-width: var(--ride-factsheet-width);
}
.ride-factsheet-page__kicker {
  margin: 0 0 var(--ride-space-2);
  color: var(--ride-fg-secondary);
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-small);
  font-weight: var(--ride-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ride-factsheet-page__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ride-space-3) var(--ride-space-6);
  margin-top: var(--ride-space-6);
}
.ride-factsheet-page__meta .ride-meta__item--wide {
  grid-column: 1 / -1;
}
.ride-factsheet-page .ride-meta__item {
  min-width: 0;
  padding: var(--ride-space-3) 0;
  border-top: 1px solid var(--ride-rule);
}
.ride-factsheet-page .ride-meta__item dt {
  margin: 0 0 var(--ride-space-1);
  color: var(--ride-fg-secondary);
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-small);
}
.ride-factsheet-page .ride-meta__item dd {
  margin: 0;
}
.ride-factsheet-page__overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ride-space-6);
  margin: var(--ride-space-8) 0 var(--ride-space-12);
}
.ride-factsheet-page__resource,
.ride-factsheet-page__people {
  padding: var(--ride-space-6);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  background: var(--ride-bg);
  box-shadow: var(--ride-shadow-soft);
}
.ride-factsheet-page__resource h2,
.ride-factsheet-page__people h2 {
  margin: 0 0 var(--ride-space-4);
  font-size: var(--ride-text-h3);
}
.ride-people__group + .ride-people__group {
  margin-top: var(--ride-space-4);
}
.ride-people__role {
  margin: 0 0 var(--ride-space-2);
  color: var(--ride-fg-secondary);
  font-size: var(--ride-text-small);
}
.ride-people__list {
  margin: 0;
  padding-left: var(--ride-space-6);
}
.ride-factsheet-page__questionnaire > h2 {
  margin-top: 0;
  padding-bottom: var(--ride-space-3);
  border-bottom: 2px solid var(--ride-fg-primary);
}
.ride-questionnaire + .ride-questionnaire {
  margin-top: var(--ride-space-12);
}
.ride-questionnaire__resource {
  margin-top: var(--ride-space-8);
}
.ride-questionnaire__criteria {
  margin: 0 0 var(--ride-space-6);
  font-size: var(--ride-text-small);
}
.ride-questionnaire__section {
  margin: var(--ride-space-12) 0 var(--ride-space-4);
  padding-bottom: var(--ride-space-2);
  border-bottom: 1px solid var(--ride-rule);
}
.ride-question {
  margin-bottom: var(--ride-space-4);
  padding: var(--ride-space-4) var(--ride-space-6);
  border: 1px solid var(--ride-rule);
  border-left: 4px solid var(--ride-accent);
  border-radius: var(--ride-radius);
  background: var(--ride-bg);
}
.ride-question__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ride-space-2);
  margin: 0 0 var(--ride-space-2);
  font-family: var(--ride-font-sans);
  font-weight: var(--ride-weight-medium);
}
.ride-question__criteria-ref {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--ride-space-2);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius-pill);
  font-size: var(--ride-text-tiny);
  font-weight: var(--ride-weight-regular);
  text-decoration: none;
}
.ride-question__text {
  margin: 0 0 var(--ride-space-4);
}
.ride-question__answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ride-space-2);
  margin: 0;
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-small);
}
.ride-question__answer-label {
  color: var(--ride-fg-secondary);
  font-weight: var(--ride-weight-medium);
}
.ride-question__answer-value {
  padding: var(--ride-space-1) var(--ride-space-3);
  border-radius: var(--ride-radius-pill);
  background: var(--ride-bg-muted);
  color: var(--ride-fg-primary);
}
.ride-question__anomaly,
.ride-question__unanswered {
  color: var(--ride-fg-secondary);
  font-style: italic;
}

/* Native criteria help toggle. The body is sourced from the editable
   criterion explanations under content/factsheet-help/. */
.ride-question__help            { margin: var(--ride-space-3) 0 0; }
.ride-question__help-badge      {
  display: inline-flex; align-items: center; gap: var(--ride-space-2);
  min-height: 32px; padding: var(--ride-space-1) var(--ride-space-3);
  border: 1px solid var(--ride-rule); border-radius: var(--ride-radius-pill);
  background: var(--ride-bg-muted); color: var(--ride-fg-secondary);
  font-size: var(--ride-text-small); line-height: 1; cursor: pointer;
  list-style: none; user-select: none;
}
.ride-question__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--ride-text-tiny);
  font-weight: var(--ride-weight-medium);
}
.ride-question__help-badge::-webkit-details-marker { display: none; }
.ride-question__help-badge:hover { background: var(--ride-rule); }
.ride-question__help[open] .ride-question__help-badge { background: var(--ride-rule); }
.ride-question__help-body       {
  margin-top: var(--ride-space-2); padding-left: var(--ride-space-3);
  border-left: 2px solid var(--ride-rule);
  color: var(--ride-fg-secondary); font-size: var(--ride-text-small);
}
.ride-question__help-body p     { margin: 0 0 var(--ride-space-2); }
.ride-question__help-body ul    { margin: 0; padding-left: var(--ride-space-6); }

.ride-meta                      { margin: 0; }
.ride-meta dt                   { font-weight: var(--ride-weight-medium); margin-top: var(--ride-space-3); }
.ride-meta dd                   { margin: 0 0 var(--ride-space-2); }

.ride-downloads                 { list-style: none; padding-left: 0; margin: var(--ride-space-3) 0 0; }
.ride-downloads li              { margin-bottom: var(--ride-space-2); }

.ride-draft-entry .ride-artifacts {
  margin: var(--ride-space-4) 0 0 184px;
}

.ride-cite__suggestion          { margin: 0 0 var(--ride-space-3); }
.ride-cite__suggestion-note     { font-style: italic; color: var(--ride-fg-secondary); font-size: var(--ride-text-small); margin: var(--ride-space-2) 0 var(--ride-space-3); }

/* Cite-Buttons sitzen als Paar nebeneinander, sodass die Sidebar-Höhe
   nicht durch zwei vollbreite Buttons aufgebläht wird. Wrap auf zwei
   Zeilen passiert nur, wenn die Sidebar so schmal ist, dass beide
   nicht passen — dann ist auch kein vertikales Stapeln mehr störend. */
.ride-cite__btns                { display: flex; flex-wrap: wrap; gap: var(--ride-space-2); margin-top: var(--ride-space-2); }
.ride-cite__btn                 { flex: 1 1 auto; min-width: 0; padding: var(--ride-space-2) var(--ride-space-3); background: var(--ride-bg-muted); border: 1px solid var(--ride-rule); border-radius: 2px; font: inherit; cursor: pointer; text-align: center; }
.ride-cite__btn:hover           { background: var(--ride-rule); }

/* Tags as pill-list in the review sidebar. WCAG 2.5.8 (Target Size,
   Minimum, AA) requires 24×24 CSS-px pointer targets — min-height +
   inline-flex centering hits that without changing the visual rhythm. */
.ride-tag-pills                 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ride-space-2); }
.ride-tag-pills li a            { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; background: var(--ride-bg-muted); border: 1px solid var(--ride-rule); border-radius: 2px; text-decoration: none; font-size: var(--ride-text-small); }
.ride-tag-pills li a:hover      { background: var(--ride-rule); }

/* ─── Panel — geteiltes Karten-Primitiv ───────────────────────────────
   Wird für Home-Widgets, Sidebar-Boxen (perspektivisch) und Review-
   Cards verwendet. Eine Quelle für Padding, Radius, Border, Shadow,
   Hover-Transition. Modifier ändern Akzent oder Layout. */

.ride-panel {
  padding: var(--ride-space-6);
  background: var(--ride-bg);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  box-shadow: var(--ride-shadow-soft);
  transition: box-shadow var(--ride-transition), transform var(--ride-transition);
}

.ride-panel__title {
  margin: 0 0 var(--ride-space-3);
  font-size: var(--ride-text-h3);
  font-weight: var(--ride-weight-medium);
  line-height: var(--ride-leading-ui);
}

.ride-panel__body > :first-child { margin-top: 0; }
.ride-panel__body > :last-child  { margin-bottom: 0; }

.ride-panel--lede {
  /* Lede-Variante — keine Border, Hintergrund leicht abgesetzt, mehr Padding,
     größerer Lesefließtext. Setzt einen ruhigen Einleitungs-Block ohne
     Karten-Anmutung. */
  border: 0;
  background: var(--ride-bg-muted);
  padding: var(--ride-space-8);
  box-shadow: none;
}
.ride-panel--lede .ride-panel__body { font-size: 1.05em; }

.ride-panel--action {
  /* Action-Karten in der 2x2-Grid auf der Startseite. Etwas weniger
     Padding als die Default-Panel, hover bekommt Schatten. */
  padding: var(--ride-space-4) var(--ride-space-6);
}
.ride-panel--action:hover { box-shadow: var(--ride-shadow-hover); }

/* Prose-Klasse — Editorial-Markdown-Output bekommt einheitliche
   vertikale Rhythmik. `* + *`-Pattern: jedes Folge-Element bekommt
   konsistenten Top-Abstand vom Vorgänger, ohne dass jede Komponente
   ihre eigenen Margins setzen muss. */
.ride-prose > * + * { margin-top: var(--ride-space-3); }
.ride-prose > h2 + *,
.ride-prose > h3 + * { margin-top: var(--ride-space-2); }

/* Editorial pages — single column, generous reading width. */
.ride-editorial                 { max-width: var(--ride-content-width); }
.ride-editorial__updated        { font-size: var(--ride-text-small); color: var(--ride-fg-secondary); margin-top: var(--ride-space-12); }

/* Aggregation pages — Issue-Übersicht, Tags, Reviewer, Resources, Home. */
.ride-lede                      { color: var(--ride-fg-secondary); font-size: 1.05em; margin: 0 0 var(--ride-space-8); }

/* Section-Heading-Pattern — wiederverwendbar auf Home und Aggregations-
   Seiten. Heading ohne Top-Margin (das übernimmt der Section-Stack),
   ein zarter Sub-Meta-Text rechts daneben für „· {issue}". */
.ride-section__heading {
  margin: 0 0 var(--ride-space-4);
  font-size: var(--ride-text-h2);
  font-weight: var(--ride-weight-medium);
  line-height: var(--ride-leading-ui);
}
.ride-section__heading-meta {
  color: var(--ride-fg-secondary);
  font-weight: var(--ride-weight-regular);
}

/* ─── Startseite ──────────────────────────────────────────────────────
   Sechs vertikale Stationen: lede-section, lede-panel, current-issue,
   action-widgets, browse, footer. Section-Rhythmus über --ride-stack-
   section, jede Sektion verteilt ihren Innenraum selbst. */

.ride-home > * + * {
  margin-top: var(--ride-stack-section);
}

.ride-home__lede-section { /* nur sr-only h1 plus eine Zeile lede */ }
.ride-home__lede {
  margin: 0;
  font-size: 1.25em;
  color: var(--ride-fg-secondary);
  max-width: 60ch;
  line-height: var(--ride-leading-ui);
}

.ride-home__current { /* heading + cards */ }
.ride-home__cards {
  display: grid;
  gap: var(--ride-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

/* Action-Widgets (News, Call for Reviews, Open Data, Follow us) als
   2x2-Grid auf Desktop, 2x1 auf Tablet, 1x4 auf Mobile. */
.ride-home__widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ride-space-6);
}

.ride-home__browse {
  padding-top: var(--ride-space-6);
  border-top: 1px solid var(--ride-rule);
}
.ride-home__browse-list {
  list-style: none;
  padding: 0;
  margin: var(--ride-space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ride-space-6);
}
.ride-home__browse-list a {
  text-decoration: none;
  font-size: var(--ride-text-base);
  color: var(--ride-accent);
}
.ride-home__browse-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 719px) {
  .ride-home__widgets { grid-template-columns: minmax(0, 1fr); }
  .ride-home__lede { font-size: 1.125em; }
}

.ride-review-card {
  padding: var(--ride-space-4) var(--ride-space-6);
  border: 1px solid var(--ride-rule);
  border-radius: var(--ride-radius);
  background: var(--ride-bg);
  box-shadow: var(--ride-shadow-soft);
  transition: box-shadow var(--ride-transition), transform var(--ride-transition);
  display: flex;
  flex-direction: column;
  gap: var(--ride-space-2);
}
.ride-review-card:hover { box-shadow: var(--ride-shadow-hover); }
.ride-review-card__title        { margin: 0; font-size: var(--ride-text-h3); line-height: var(--ride-leading-ui); }
.ride-review-card__title a      { text-decoration: none; }
.ride-review-card__title a:hover { color: var(--ride-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.ride-review-card__authors      { margin: 0; font-size: var(--ride-text-small); color: var(--ride-fg-secondary); }
.ride-review-card__meta         { margin: 0; font-size: var(--ride-text-tiny); color: var(--ride-fg-tertiary); letter-spacing: 0.02em; }

.ride-issue-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--ride-space-3);
}
.ride-issue-list__entry         { padding: var(--ride-space-2) 0; }
.ride-issue-list__link          { text-decoration: none; display: inline-flex; gap: var(--ride-space-3); align-items: baseline; flex-wrap: wrap; }
.ride-issue-list__link:hover    { text-decoration: underline; text-underline-offset: 3px; }
.ride-issue-list__no            { font-weight: var(--ride-weight-medium); }
.ride-issue-list__date,
.ride-issue-list__count         { color: var(--ride-fg-secondary); font-size: var(--ride-text-small); font-weight: var(--ride-weight-regular); }

.ride-tag-list                  { list-style: none; padding-left: 0; column-count: 2; column-gap: var(--ride-space-8); }
.ride-tag-list__entry           { break-inside: avoid; margin-bottom: var(--ride-space-2); }
.ride-tag-list__count           { color: var(--ride-fg-tertiary); font-size: var(--ride-text-small); margin-left: var(--ride-space-2); }
.ride-tag__cards                { display: grid; gap: var(--ride-space-4); margin-top: var(--ride-space-6); }

.ride-reviewer-list             { list-style: decimal; padding-left: var(--ride-space-6); }
.ride-reviewer-list__entry      { margin-bottom: var(--ride-space-2); }
.ride-reviewer-list__name       { text-decoration: none; font-weight: var(--ride-weight-medium); }
.ride-reviewer-list__aff,
.ride-reviewer-list__count      { color: var(--ride-fg-secondary); font-size: var(--ride-text-small); }

.ride-reviewer__header          { margin-bottom: var(--ride-space-8); padding-bottom: var(--ride-space-4); border-bottom: 1px solid var(--ride-rule); }
.ride-reviewer__cards           { display: grid; gap: var(--ride-space-4); }

.ride-resources                 { width: 100%; border-collapse: collapse; font-size: var(--ride-text-small); }
.ride-resources th              { text-align: left; border-bottom: 1px solid var(--ride-rule); padding: var(--ride-space-2); font-family: var(--ride-font-sans); }
.ride-resources td              { border-bottom: 1px solid var(--ride-rule); padding: var(--ride-space-3) var(--ride-space-2); vertical-align: top; }
.ride-resources__title          { display: block; font-weight: var(--ride-weight-medium); }
.ride-resources__credits        { display: block; margin-top: var(--ride-space-1); color: var(--ride-fg-secondary); font-size: var(--ride-text-tiny); }

@media (max-width: 719px) {
  .ride-tag-list                { column-count: 1; }
}

/* Issue-Header — Titel, Editor-Lead, optional Description und Count.
   Welle 6: vorher zwei-spaltige <dl>-Tabelle mit Editors/DOI/Date,
   jetzt ein redaktioneller Lead-Satz im Live-Site-Stil
   ("Edited by …. {Date}. DOI: …."). */
.ride-issue__header {
  margin-bottom: var(--ride-stack-section);
  padding-bottom: var(--ride-space-6);
  border-bottom: 1px solid var(--ride-rule);
}
.ride-issue__title {
  margin: 0 0 var(--ride-space-3);
  font-size: var(--ride-text-h1);
}
.ride-issue__lead {
  margin: 0 0 var(--ride-space-3);
  font-size: 1.05em;
  color: var(--ride-fg-primary);
  line-height: var(--ride-leading-prose);
}
.ride-issue__description {
  margin: var(--ride-space-3) 0;
  font-style: italic;
  color: var(--ride-fg-secondary);
}
.ride-issue__count {
  margin: var(--ride-space-3) 0 0;
  font-size: var(--ride-text-small);
  color: var(--ride-fg-tertiary);
}
.ride-issue__back {
  margin-top: var(--ride-stack-section);
  font-size: var(--ride-text-small);
}

/* Rich-Entry pro Review — Wordcloud-Thumbnail (wenn vorhanden) +
   Titel + Edition-Citation + Reviewer-Inline + Abstract-Excerpt. */
.ride-issue__contributions > * + * {
  margin-top: var(--ride-stack-block);
  padding-top: var(--ride-stack-block);
  border-top: 1px solid var(--ride-rule);
}

.ride-issue-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--ride-space-6);
  align-items: start;
}
.ride-issue-entry__thumb {
  display: block;
  width: 160px;
  aspect-ratio: 1;
  background: var(--ride-bg-muted);
  border-radius: var(--ride-radius);
  overflow: hidden;
}
.ride-issue-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.ride-issue-entry__body {
  min-width: 0;
}
.ride-issue-entry__title {
  margin: 0 0 var(--ride-space-3);
  font-size: var(--ride-text-h2);
  font-weight: var(--ride-weight-medium);
  line-height: var(--ride-leading-ui);
}
.ride-issue-entry__title a {
  text-decoration: none;
}
.ride-issue-entry__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ride-issue-entry a {
  overflow-wrap: anywhere;
}
.ride-issue-entry__cite {
  margin: 0 0 var(--ride-space-3);
  font-size: var(--ride-text-small);
  color: var(--ride-fg-secondary);
}
.ride-issue-entry__cite cite {
  font-style: italic;
  color: var(--ride-fg-primary);
}
.ride-issue-entry__abstract {
  margin: 0;
  color: var(--ride-fg-primary);
}

/* Wenn die Issue-Liste keine Wordcloud hat, fällt die Thumbnail-Spalte
   weg. Pre-Welle-6-Issues kommen so ohne leeren Platzhalter aus. */
.ride-issue-entry:not(:has(.ride-issue-entry__thumb)) {
  grid-template-columns: 1fr;
}

@media (max-width: 719px) {
  .ride-issue-entry {
    grid-template-columns: 96px 1fr;
    gap: var(--ride-space-4);
  }
  .ride-issue-entry__thumb { width: 96px; }
  .ride-issue-entry__title { font-size: var(--ride-text-h3); }
}

.ride-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--ride-font-sans);
  font-size: var(--ride-text-tiny);
  font-weight: var(--ride-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--ride-radius);
  vertical-align: middle;
  margin-left: var(--ride-space-3);
}
.ride-badge--rolling { background: var(--ride-accent); color: var(--ride-bg); }

/* Review header — title + bibliographic-and-reviewer prose block
   (interface.md §5, mockup-driven). The reviewed-edition citation and
   the reviewer attribution share one paragraph rather than two
   separate blocks, matching the visual model where both flow
   together as the article's opening byline. */
.ride-review__header            { margin-bottom: var(--ride-space-8); padding-bottom: var(--ride-space-6); border-bottom: 1px solid var(--ride-rule); }
.ride-review__draft             { margin: 0 0 var(--ride-space-6); padding: var(--ride-space-4); background: var(--ride-bg-muted); border: 2px solid var(--ride-accent); border-radius: var(--ride-radius); font-family: var(--ride-font-sans); }
.ride-review__title             { margin-top: 0; font-size: var(--ride-text-h1); }
.ride-review__byline            { margin: var(--ride-space-4) 0 0; font-size: var(--ride-text-small); color: var(--ride-fg-secondary); line-height: var(--ride-leading-prose); }
.ride-review__byline cite       { font-style: italic; }

.ride-review__orcid             { display: inline-block; margin: 0 4px; padding: 0 var(--ride-space-2); background: var(--ride-bg-muted); border: 1px solid var(--ride-rule); border-radius: 2px; font-size: var(--ride-text-tiny); text-decoration: none; vertical-align: middle; }

.ride-review__abstract          { background: var(--ride-bg-muted); padding: var(--ride-space-4) var(--ride-space-6); margin: var(--ride-space-6) 0; border-radius: 2px; }
.ride-review__abstract h2       { margin-top: 0; font-size: var(--ride-text-h3); }

.ride-review__footer            { margin-top: var(--ride-space-12); padding-top: var(--ride-space-4); border-top: 1px solid var(--ride-rule); font-family: var(--ride-font-sans); font-size: var(--ride-text-small); color: var(--ride-fg-secondary); }
.ride-review__footer p          { margin: 0 0 var(--ride-space-2); }

/* Copy-link feedback popover — anchor positioning lives on the upper
   .ride-paragraph__anchor rule (consolidated). */
.ride-copy-feedback             { position: absolute; left: 100%; top: -2px; margin-left: var(--ride-space-3); padding: 2px 6px; background: var(--ride-fg-primary); color: var(--ride-bg); font-size: var(--ride-text-tiny); border-radius: 2px; white-space: nowrap; opacity: 0; transition: opacity 120ms ease-out; pointer-events: none; }
.ride-copy-feedback--visible    { opacity: 1; }

/* ─── Data-Charts (Phase 10 R9) ────────────────────────────────────────
   Renderer: src/render/charts.py emits one figure per criteria set with
   inline SVG bars; the editorial body of /data/charts/ substitutes the
   chart marker with this block. The SVG is responsive via viewBox; the
   class hooks below tune colour, label weight, and axis tick subtlety.
   Dataviz palette is intentionally muted — the bar is the data, the
   numerals are the truth, everything else is chrome. */
.ride-charts                         { display: flex; flex-direction: column; gap: var(--ride-space-6); margin: var(--ride-space-6) 0; }
.ride-charts__figure                 { margin: 0; padding: var(--ride-space-4); border: 1px solid var(--ride-rule); border-radius: 4px; background: var(--ride-bg-muted); }
.ride-charts__caption                { margin: 0 0 var(--ride-space-3); font-size: var(--ride-text-base); }
.ride-charts__count                  { color: var(--ride-fg-secondary); font-weight: 400; }
.ride-charts__svg, .ride-chart__svg  { width: 100%; height: auto; max-width: 700px; }
.ride-chart__grid                    { stroke: var(--ride-rule); stroke-width: 1; }
.ride-chart__tick                    { fill: var(--ride-fg-secondary); font-size: 10px; }
.ride-chart__row-label               { fill: var(--ride-fg-primary); font-size: 12px; }
.ride-chart__bar-bg                  { fill: var(--ride-bg-muted); }
.ride-chart__bar-fg                  { fill: var(--ride-accent); }
.ride-chart__bar-annotation          { fill: var(--ride-fg-primary); font-size: 11px; }
.ride-charts__anomaly                { margin: var(--ride-space-3) 0 0; font-size: var(--ride-text-tiny); color: var(--ride-fg-secondary); }
.ride-charts__anomaly code           { font-size: inherit; }

/* Data-Questionnaires per-question tables (/data/questionnaires/). Same
   muted dataviz register as the charts; the yes-rate bar is a background
   fill behind the percentage numeral so the number stays the truth. */
.ride-questionnaires                 { display: flex; flex-direction: column; gap: var(--ride-space-6); margin: var(--ride-space-6) 0; }
.ride-questionnaires__set            { margin: 0; }
.ride-questionnaires__heading        { font-size: var(--ride-text-base); margin: 0 0 var(--ride-space-3); }
.ride-questionnaires__count          { color: var(--ride-fg-secondary); font-weight: 400; }
.ride-questionnaires__table          { width: 100%; border-collapse: collapse; font-size: var(--ride-text-small); }
.ride-questionnaires__table th,
.ride-questionnaires__table td       { text-align: left; padding: var(--ride-space-2) var(--ride-space-3); border-bottom: 1px solid var(--ride-rule); vertical-align: top; }
.ride-questionnaires__section th     { background: var(--ride-bg-muted); font-weight: 600; }
.ride-questionnaires__num            { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ride-questionnaires__kind           { color: var(--ride-fg-secondary); font-size: var(--ride-text-tiny); }
.ride-questionnaires__rate           { position: relative; min-width: 6rem; }
.ride-questionnaires__bar            { position: absolute; inset: 0; background: var(--ride-bg-muted); border-right: 2px solid var(--ride-accent); z-index: 0; }
.ride-questionnaires__pct            { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.ride-questionnaires__anomaly        { margin: var(--ride-space-3) 0 0; font-size: var(--ride-text-tiny); color: var(--ride-fg-secondary); }
.ride-questionnaires__anomaly code   { font-size: inherit; }

/* ─── Explore view (P1 + P3) ───────────────────────────────────────────
   Interactive corpus exploration at /data/explore/ (knowledge/exploration.md).
   App layout: sticky filter sidebar left, visualisation centre. Drives
   static/js/explore.js (facet browser + beeswarm + coupled table + issue
   timeline). Reduced-motion is handled globally by the section-7 override,
   so these rules carry transitions without a local media-query duplicate. */
.xp-wrap { margin-top: .5rem; }
.xp-title { font-size: 1.5rem; margin: 0 0 1rem; }

.xp-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
@media (max-width: 820px) { .xp-layout { grid-template-columns: 1fr; gap: 1.4rem; } }

/* sidebar */
.xp-sidebar { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.4rem; font-size: .9rem; }
.xp-status { display: flex; align-items: baseline; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ride-rule); }
.xp-status b { font-size: 1.6rem; line-height: 1; color: var(--ride-fg-primary); font-variant-numeric: tabular-nums; }
.xp-status span { color: var(--ride-fg-secondary); }
.xp-reset { margin-left: auto; background: none; border: none; color: var(--ride-accent); cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; padding: 0; }
.xp-facet { display: flex; flex-direction: column; gap: .5rem; }
.xp-facet > span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ride-fg-secondary); font-weight: 700; }
.xp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.xp-chips--stack { flex-direction: column; align-items: stretch; }
.xp-chip {
  border: 1px solid var(--ride-rule); background: var(--ride-bg);
  color: var(--ride-fg-primary); border-radius: 7px;
  padding: .4rem .6rem; font-size: .84rem; cursor: pointer; text-align: left;
  transition: background .15s, color .15s, border-color .15s; font: inherit;
  display: flex; align-items: center; gap: .45rem; line-height: 1.25;
}
.xp-chips:not(.xp-chips--stack) .xp-chip { border-radius: var(--ride-radius-pill); }
.xp-chip:hover { border-color: var(--ride-accent); }
.xp-chip[aria-pressed="true"] { background: var(--ride-accent); color: var(--ride-bg); border-color: var(--ride-accent); }
.xp-chip[aria-pressed="true"] .xp-chip__n { color: rgba(255, 255, 255, .75); }
.xp-chip__dot { flex: 0 0 auto; width: .65rem; height: .65rem; border-radius: 50%; }
.xp-chip__label { flex: 1 1 auto; }
.xp-chip__n { color: var(--ride-fg-tertiary); font-variant-numeric: tabular-nums; font-size: .78rem; }

/* main / visualisation */
.xp-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.xp-figure { margin: 0; }
.xp-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.xp-figure--hero svg { min-height: 360px; }

.xp-axis .tick text { font-size: 12px; fill: var(--ride-fg-secondary); }
.xp-axis path, .xp-axis .tick line { stroke: var(--ride-rule); }
.xp-axis-title { font-size: 16px; font-weight: 700; fill: var(--ride-fg-primary); letter-spacing: .06em; text-transform: uppercase; }
.xp-axis-sub { font-size: 11.5px; fill: var(--ride-fg-tertiary); }
.xp-dot { cursor: pointer; transition: opacity .2s; }
.xp-dot.dimmed { opacity: .1; }

.xp-tooltip {
  position: fixed; pointer-events: none; z-index: 50;
  background: var(--ride-fg-primary); color: var(--ride-bg);
  padding: .5rem .65rem; border-radius: 6px; font-size: .8rem; line-height: 1.4;
  max-width: 260px; opacity: 0; transition: opacity .12s; box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.xp-tooltip b { display: block; margin-bottom: .2rem; }
/* Dimmed white on the dark tooltip surface — no light-theme token fits. */
.xp-tooltip .xp-tt-meta { color: #c9c9cf; }

/* table, integrated under the chart */
.xp-table-head { display: flex; align-items: baseline; gap: .6rem; margin-top: .6rem; }
.xp-table-head h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ride-fg-secondary); margin: 0; font-weight: 700; }
.xp-table-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; border: 1px solid var(--ride-rule); border-radius: 8px; }
table.xp-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.xp-table th, table.xp-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--ride-rule); white-space: nowrap; }
table.xp-table th { cursor: pointer; user-select: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ride-fg-secondary); position: sticky; top: 0; background: var(--ride-bg); z-index: 1; }
table.xp-table th:hover { color: var(--ride-accent); }
table.xp-table th[aria-sort] { color: var(--ride-accent); }
table.xp-table th .xp-info { cursor: help; color: var(--ride-fg-tertiary); font-weight: 700; }
table.xp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.xp-table tr:hover td { background: var(--ride-bg-muted); }
table.xp-table a { color: var(--ride-accent); text-decoration: none; }
table.xp-table a:hover { text-decoration: underline; }
table.xp-table td.xp-td-title { max-width: 360px; }
table.xp-table td.xp-td-title a { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.xp-pill { display: inline-block; padding: .05rem .45rem; border-radius: var(--ride-radius-pill); font-size: .72rem; color: #fff; }

/* ─── 6. Responsive breakpoints ──────────────────────────────────────── */

/* < 720px — sidebar collapses below content; apparate stacks. */
@media (max-width: 719px) {
  .ride-page              { grid-template-columns: minmax(0, 1fr); }
  .ride-sidebar           { grid-column: 1; margin-top: var(--ride-space-12); }
  .ride-apparate          { grid-template-columns: minmax(0, 1fr); }
  .ride-artifacts         { align-items: flex-start; flex-direction: column; }
  .ride-factsheet-page__meta { grid-template-columns: minmax(0, 1fr); }
  .ride-factsheet-page__meta .ride-meta__item--wide { grid-column: auto; }
  .ride-question          { padding: var(--ride-space-4); }
  .ride-draft-entry .ride-artifacts { margin-left: 0; }
}

/* ≥ 720px and < 1200px — keep the two-column review layout fluid. */
@media (min-width: 720px) and (max-width: 1199px) {
  .ride-page {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--ride-sidebar-width));
    column-gap: var(--ride-space-8);
  }
  .ride-page--solo,
  .ride-page--wide { grid-template-columns: minmax(0, 1fr); }
}

/* ≥ 1200px — centred grid with symmetric outer space; default rules apply. */

/* ─── 7. Accessibility helpers ───────────────────────────────────────── */

/* Skip link — first focusable element on every page (WCAG 2.4.1). */
.ride-skip {
  position: absolute;
  left: -10000px;
  top: 0;
  background: var(--ride-fg-primary);
  color: var(--ride-bg);
  padding: var(--ride-space-2) var(--ride-space-4);
  z-index: 100;
}
.ride-skip:focus { left: 0; }

/* Visually-hidden text for screen-reader-only labels. */
.ride-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Honour user motion preference (interface.md §11 — animations dezent). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Print-only DOI line in the review header — hidden on screen, shown
   when the page is rendered to PDF via WeasyPrint (requirements A6:
   DOI on the first page). The Meta sidebar carries the DOI for web
   readers; in print, the sidebar is suppressed. */
.ride-review__doi-print { display: none; }

/* ─── 8. Print stylesheet (Phase 14) ─────────────────────────────────── */

/* Used by the browser's Drucken-Dialog and by WeasyPrint when generating
   the per-review PDF. Strips chrome, drops the sidebar, surfaces the
   first-page DOI line. WeasyPrint honours @page, page margins and
   page-break-* properties — kept simple here; tune per-template if a
   review's tables overflow. */
@media print {
  @page {
    size: A4; margin: 18mm 16mm;
    /* Running footers (parity with the legacy PDF chain). string(citeline)
       is the DOI line captured below; on non-review pages the string is
       never set, so string() yields empty and the box renders blank
       rather than crashing. counter(page) is always available. */
    @bottom-left {
      content: string(citeline);
      font-size: 8pt; color: var(--ride-fg-tertiary);
    }
    @bottom-right {
      content: "Page " counter(page);
      font-size: 8pt; color: var(--ride-fg-tertiary);
    }
  }
  body {
    font-size: 10.5pt;
    line-height: 1.48;
    background: var(--ride-bg);
  }
  .ride-wip, .ride-header, .ride-nav, .ride-footer,
  .ride-sidebar, .ride-skip,
  .ride-artifacts, .ride-note__back,
  .ride-cite__btns, .ride-cite-data,
  /* Interactive help toggles carry no static print value — a closed
     <details> would print only a bare "?" badge. */
  .ride-question__help { display: none; }
  .ride-page { display: block; }
  .ride-content, .ride-shell { max-width: 100%; padding: 0; margin: 0; }
  .ride-review__header {
    margin-bottom: var(--ride-space-6);
    padding-bottom: var(--ride-space-4);
  }
  .ride-review__title {
    font-size: 22pt;
    line-height: 1.18;
  }
  .ride-review__byline {
    font-size: 9.5pt;
  }
  .ride-review__abstract {
    margin: var(--ride-space-6) 0;
    padding: var(--ride-space-3) var(--ride-space-4);
    border-left: 3px solid var(--ride-rule);
    background: transparent;
  }
  .ride-review__body p,
  .ride-apparate__list li {
    orphans: 3;
    widows: 3;
  }
  .ride-apparate { display: block; }
  .ride-apparate__panel + .ride-apparate__panel { margin-top: var(--ride-space-8); }
  .ride-apparate__list {
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
  .ride-review__doi-print {
    display: block; margin: 0 0 var(--ride-space-4) 0;
    font-size: 9.5pt; color: var(--ride-fg-secondary);
    /* Feed the bottom-left running footer. WeasyPrint captures the
       element's text content (e.g. "DOI: 10.xxxx/...") as the named
       string; must not be display:none for string-set to fire. */
    string-set: citeline content();
  }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  figure, table { break-inside: avoid; page-break-inside: avoid; }
  .ride-figure--image img { max-height: 205mm; object-fit: contain; }
  .ride-review__footer { break-inside: avoid; }
}