/* ============================================================
   Statements Archive — Bearing Witness child theme
   ------------------------------------------------------------
   Built on the concept design system (wireframe.css + site-skin.css):
     · 6px base unit, spacing scale --s1…--s12 (multiples of 6)
     · 12-col grid: 1128px container · 24px gutter
       archive = sidebar 4 cols (360px) + results 8 cols (744px)
     · cards 2-up (360px) desktop/tablet, 1-up mobile
     · brand palette sampled from bearing-witness.com
   Adapted to the template's BEM classes and self-contained:
   the prototype layers are NOT enqueued in WordPress.

   Modern CSS: logical properties throughout (mirrors for HE/AR),
   container queries for the card wall, :focus-visible,
   prefers-reduced-motion, coarse-pointer touch targets.

   Accessibility:
     · visible maroon focus rings on every interactive element
     · [hidden] wins over display utilities
     · tooltips open on hover AND keyboard focus
     · ≥44px hit areas on touch devices
     · motion/transitions disabled under reduced-motion
     · .visually-hidden utility for screen-reader-only text
   ============================================================ */

:root {
  /* ---- palette (site-skin layer) ---- */
  --bw-s-paper: #ffffff;
  --bw-s-paper-2: #f7f6f4;
  --bw-s-fill: #f7f6f4;
  --bw-s-card: #ffffff;
  --bw-s-line: #e4e0dc;
  --bw-s-line-2: #edeae6;
  --bw-s-ink: #3a3734;
  --bw-s-ink-2: #57534e;
  --bw-s-ink-3: #7a756f;
  --bw-s-accent: #8b2020;
  --bw-s-accent-dark: #761a1a;
  --bw-s-accent-deep: #6f1a1a;
  --bw-s-accent-soft: #f4e6e6;

  /* ---- 6px spacing scale (wireframe layer) ---- */
  --bw-s-s1: 6px;
  --bw-s-s2: 12px;
  --bw-s-s3: 18px;
  --bw-s-s4: 24px;
  --bw-s-s5: 30px;
  --bw-s-s6: 36px;
  --bw-s-s8: 48px;
  --bw-s-s10: 60px;
  --bw-s-s12: 72px;

  /* ---- shape ---- */
  --bw-s-radius-sm: 10px;
  --bw-s-radius-lg: 18px;
  --bw-s-radius-pill: 50px;

  /* ---- type ---- */
  --bw-s-sans:
    "IBM Plex Sans Hebrew", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Arial, sans-serif;
  /* quotes stay serif — interface voice vs quoted voice */
  --bw-s-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;

  /* ---- elevation ---- */
  --bw-s-shadow-1: 0 1px 2px rgba(58, 55, 52, 0.04);
  --bw-s-shadow-2: 0 6px 18px rgba(58, 55, 52, 0.07);
  --bw-s-shadow-3: 0 20px 60px rgba(58, 55, 52, 0.18);

  /* ---- focus ring ---- */
  --bw-s-ring: 2px solid var(--bw-s-accent);
}

/* ---------- scoped resets ---------- */

.statements-page,
.statements-modal {
  box-sizing: border-box;
  font-family: var(--bw-s-sans);
  color: var(--bw-s-ink);
}

.statements-page *,
.statements-page *::before,
.statements-page *::after,
.statements-modal *,
.statements-modal *::before,
.statements-modal *::after {
  box-sizing: border-box;
}

/* [hidden] must always win — several elements carry display utilities */
.statements-page [hidden],
.statements-modal[aria-hidden="true"] {
  display: none !important;
}

/* strip Safari / iOS native chrome on form controls */
.statements-page input,
.statements-page button,
.statements-page select,
.statements-page textarea,
.statements-modal input,
.statements-modal button,
.statements-modal select,
.statements-modal textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Kill all overflow on ancestors of .statements-search so sticky works. */
html,
body,
body > .wrapper:not(.et-fb-iframe-ancestor),
main#content,
.statements-page,
.statements-page__main {
  overflow: unset !important;
}

/* screen-reader-only text */
.statements-page .visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- focus visibility ---------- */

.statements-page :focus-visible,
.statements-modal :focus-visible {
  outline: var(--bw-s-ring);
  outline-offset: 2px;
  border-radius: var(--bw-s-radius-sm);
}

/* ============================================================
   Layout — 12-col archive grid
   ============================================================ */

.statements-page {
  max-inline-size: calc(1250px + var(--bw-s-s4) * 2);
  margin-inline: auto;
  padding-inline: var(--bw-s-s4);
}

.statements-page__main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--bw-s-s4);
  row-gap: var(--bw-s-s6);
  align-items: start;
  margin-block-start: var(--bw-s-s6);
}

.statements-page__main > .statements-search {
  grid-column: span 4;
}

.statements-page__main > .statements-page__results {
  grid-column: span 8;
  container-type: inline-size;
  container-name: bw-results;
}

@media (max-width: 1175px) {
  .statements-page__main > .statements-search,
  .statements-page__main > .statements-page__results {
    grid-column: span 12;
  }
}

/* ============================================================
   Hero
   ============================================================ */

/* .statements-page__hero {
  padding-block-start: var(--bw-s-s6);
} */

.statements-page__title {
  font-family: var(--bw-s-sans);
  font-size: clamp(30px, 5vw, 42px); /* 42px = 7u, mobile 30px */
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bw-s-ink);
  margin: 0 0 var(--bw-s-s2);
}

.statements-page__intro {
  max-inline-size: 744px; /* 8 columns — reading measure */
  font-size: 18px;
  line-height: 1.667; /* 30px */
  color: var(--bw-s-ink-2);
}
.statements-page__intro p {
  font-size: 18px !important;
}

.statements-page__stats {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--bw-s-s3);
  padding-block: var(--bw-s-s3);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-3);
}

.statements-page__stats span:not(:last-of-type)::after {
  content: "·";
  display: inline-block;
  margin-inline-start: var(--bw-s-s2);
  margin-inline-end: var(--bw-s-s2);
  color: var(--bw-s-ink-3);
}

.statements-page__stats b,
.statements-total,
.speakers-total {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Related links (child pages)
   ============================================================ */

.statements-page__related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s2);
  margin-block-start: var(--bw-s-s4);
}

.statements-page__link {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s1);
  padding: var(--bw-s-s2) var(--bw-s-s3);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-pill);
  color: var(--bw-s-ink);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}

.statements-page__link:hover {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
  background: var(--bw-s-paper-2);
}

.statements-page__link .arrow {
  position: relative;
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg); /* points to inline end */
}

html[dir="rtl"] .statements-page__link .arrow {
  transform: rotate(135deg);
}
/* ============================================================
   Sidebar — search
   ============================================================ */

.statements-search {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s4);
  position: sticky;
  align-self: start;
  top: var(--bw-s-s6);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-s2);
  padding: var(--bw-s-s2);
}

@media (max-width: 1175px) {
  .statements-search {
    position: static;
    max-block-size: none;
    overflow-y: visible;
  }
}

/* ----- toolbar + filters drawer -----
   Desktop keeps the original stacked sidebar (search, then filters) by
   unwrapping the toolbar and drawer containers. ≤1175px turns the
   toolbar into a search + filters-toggle + sort row and the filters into a
   hidden drawer. The extra .statements-search ancestor keeps these rules at
   higher specificity than the external .flex utilities. */
.statements-search .statements-search__toolbar {
  display: contents;
}

.statements-search .statements-search__filters {
  display: contents;
}

.statements-search .statements-search__filters-toggle {
  display: none;
}

.statements-search .statements-page__sort--mobile {
  display: none;
}

.statements-search__search-bar {
  position: relative; /* anchor for the typeahead panel */
  display: flex;
  align-items: center;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s2) var(--bw-s-s3);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  transition: border-color 0.12s ease;
}

.statements-search__search-bar:focus-within {
  border-color: var(--bw-s-accent);
}

.statements-search__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px; /* ≥16px avoids iOS zoom */
  line-height: 24px;
  color: var(--bw-s-ink);
}

.statements-search__input::-webkit-search-cancel-button,
.statements-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.statements-search__input:focus,
.statements-search__input:focus-visible {
  outline: none; /* ring lives on the wrapper */
  box-shadow: none !important;
}

.statements-search__input::placeholder {
  color: var(--bw-s-ink-3);
}

.statements-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  color: var(--bw-s-ink-2);
}
.statements-search__icon svg {
  fill: none;
  stroke: currentColor;
}

/* typeahead results panel — populated by js */
.statements-search__results {
  position: absolute;
  inset-block-start: calc(100% + var(--bw-s-s1));
  inset-inline: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-block-size: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  box-shadow: 0 8px 24px rgba(58, 55, 52, 0.08);
}

.statements-search__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  inline-size: 100%;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  border: 0;
  border-block-end: 1px solid var(--bw-s-line-2);
  background: none;
  color: var(--bw-s-ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.statements-search__result:last-child {
  border-block-end: 0;
}

.statements-search__result:hover,
.statements-search__result.is-highlighted {
  background: var(--bw-s-paper-2);
}

.result-kind {
  flex: 0 0 auto;
  padding: var(--bw-s-s1) var(--bw-s-s2);
  border-radius: var(--bw-s-radius-pill);
  background: var(--bw-s-paper-2);
  color: var(--bw-s-ink-3);
  font-size: 12px;
  line-height: 18px;
}

.statements-search__result-total {
  margin-inline-start: var(--bw-s-s1);
  color: var(--bw-s-ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.statements-search__result--free {
  border-block-end: 1px solid var(--bw-s-line);
}

.statements-search__result-pill {
  padding: var(--bw-s-s1) var(--bw-s-s2);
  border-radius: var(--bw-s-radius-sm);
  background: var(--bw-s-paper-2);
  color: var(--bw-s-ink-3);
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

/* ============================================================
   Sidebar — topics pills
   ============================================================ */

.topics__title,
.speakers__title {
  margin-block-end: var(--bw-s-s2);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-s-ink-2);
  font-weight: 600;
}

.topics__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s1);
}

.topics.topic {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s1);
  padding: var(--bw-s-s1) var(--bw-s-s2);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line-2);
  border-radius: var(--bw-s-radius-pill);
  font-size: 12px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}

.topics.topic:hover,
.topics.topic:focus-visible {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
}

.topics.topic.is-active {
  background: var(--bw-s-accent-soft);
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
  font-weight: 600;
}

.topic__total {
  color: var(--bw-s-ink-3);
  font-variant-numeric: tabular-nums;
}

.topics.topic.is-active .topic__total {
  color: inherit;
}

/* ============================================================
   Sidebar — speakers multi-select dropdown
   ============================================================ */

.speakers__dropdown {
  position: relative;
}

.speakers__selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  inline-size: 100%;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink);
  cursor: pointer;
  text-align: start;
}

.speakers__selector:hover {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
}

.speakers__selector-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speakers__selector-arrow {
  position: relative;
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.speakers__selector[aria-expanded="true"] .speakers__selector-arrow {
  transform: rotate(-45deg);
}

.speakers__list-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s2);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  max-height: 251px;
}

.speakers__search-bar {
  inline-size: 100%;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  background: var(--bw-s-paper);
  color: var(--bw-s-ink);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
}

.speakers__list {
  display: flex;
  flex-direction: column;
  max-block-size: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bw-s-line-2);
  border-radius: var(--bw-s-radius-sm);
}

.speakers__option {
  display: flex;
  align-items: center;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s2) var(--bw-s-s3);
  border-block-end: 1px solid var(--bw-s-line-2);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink);
  cursor: pointer;
}

.speakers__option:last-child {
  border-block-end: 0;
}

.speakers__option:hover {
  background: var(--bw-s-paper-2);
}

.speakers__option-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  flex: 1;
  min-inline-size: 0;
}

.speakers__option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speakers__option-total {
  flex-shrink: 0;
  color: var(--bw-s-ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.speakers__option input[type="checkbox"] {
  position: relative;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  border: 1.5px solid var(--bw-s-line);
  border-radius: 3px;
  background: var(--bw-s-paper);
  cursor: pointer;
  flex-shrink: 0;
}

.speakers__option input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  background: var(--bw-s-accent);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.speakers__option input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.speakers__option input[type="checkbox"]:checked {
  border-color: var(--bw-s-accent);
}

.speakers__cta {
  align-self: stretch;
  padding: var(--bw-s-s2) var(--bw-s-s4);
  background: var(--bw-s-accent) !important;
  color: #fff;
  border: 0;
  border-radius: var(--bw-s-radius-pill);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.speakers__cta:hover {
  background: var(--bw-s-accent-dark);
}
/* ============================================================
   Results controls — count + sort
   ============================================================ */

.statements-page__results-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s3);
  flex-wrap: wrap;
  margin-block-end: var(--bw-s-s4);
}

.statements-page__total-results {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
  font-variant-numeric: tabular-nums;
}

.statements-page__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s2);
}

.statements-page__sort-label {
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
}

.sort__dropdown {
  position: relative;
}

.sort__selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  min-inline-size: 0;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink);
  cursor: pointer;
  text-align: start;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}

.sort__selector:hover {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
}

.sort__selector-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort__selector-arrow {
  position: relative;
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
}

html[dir="rtl"] .sort__selector-arrow {
  transform: rotate(-135deg) scale(-1);
}

.sort__list-wrapper {
  position: absolute;
  inset-block-start: calc(100% + var(--bw-s-s1));
  inset-inline-start: 0;
  z-index: 50;
  inline-size: max-content;
  min-inline-size: 100%;
  max-block-size: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  box-shadow: 0 8px 24px rgba(58, 55, 52, 0.08);
}

.sort__option {
  display: flex;
  align-items: center;
  padding: var(--bw-s-s2) var(--bw-s-s3);
  border-block-end: 1px solid var(--bw-s-line-2);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink);
  cursor: pointer;
}

.sort__option:last-child {
  border-block-end: 0;
}

.sort__option:hover {
  background: var(--bw-s-paper-2);
}

.sort__option.is-active {
  color: var(--bw-s-accent);
  font-weight: 500;
}

/* ============================================================
   Card wall
   ------------------------------------------------------------
   Container query on the results area (not viewport): the wall
   reacts to its own width, so it stays correct inside any layout.
   Fallback media queries for engines without container queries.
   ============================================================ */

@supports (container-type: inline-size) {
  .statements-page__statements {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bw-s-s4);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  @container bw-results (min-width: 660px) {
    .statements-page__statements {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr; /* equal row heights */
    }
  }
}

@supports not (container-type: inline-size) {
  .statements-page__statements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--bw-s-s4);
  }

  @media (max-width: 767px) {
    .statements-page__statements {
      grid-template-columns: 1fr;
    }
  }
}
.statements-page__statements {
  margin-block-end: var(--bw-s-s4);
}
.statements-page__statements:focus {
  box-shadow: unset !important;
}

.statements__card {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s4);
  block-size: 100%;
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  box-shadow: var(--bw-s-shadow-1);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
  width: calc(50% - var(--bw-s-s2));
}

@container bw-results (max-width: 660px) {
  .statements__card {
    width: 100%;
  }
}

/* whole card is clickable → opens the modal (js) */
.statements__card[data-id] {
  cursor: pointer;
}

.statements__card[data-id]:hover {
  border-color: var(--bw-s-accent);
  box-shadow: var(--bw-s-shadow-2);
  transform: translateY(-2px);
}

.statements__card[data-id]:focus-within {
  border-color: var(--bw-s-accent);
  box-shadow: var(--bw-s-shadow-2);
}

/* ---------- speaker head ---------- */

.statements__speaker {
  display: flex;
  align-items: center;
  gap: var(--bw-s-s2);
}

.statements__speaker-img {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 48px; /* 8u */
  block-size: 48px;
  border-radius: 50%;
  background: var(--bw-s-paper-2);
  color: var(--bw-s-ink-3);
}

/* Card image wrapper — clips the photo to a circle so the absolutely-positioned
   credit badge stays out of the clipping box (the badge is a sibling). */
.statements__speaker-photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: 50%;
}

/* Cards and the JS-built modal both put the image inside
   .statements__speaker-photo; the modal's img is inserted at runtime. */
.statements__speaker-photo img,
.statements__speaker-img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 25%; /* portraits: faces sit high */
  filter: grayscale(1); /* house style — remove to restore color */
}

/* no photo → initials fallback (php renders it on cards, js in the modal) */
.statements__speaker-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  background: var(--bw-s-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  user-select: none;
}

.statements-modal .statements__speaker-initials {
  font-size: 19px; /* modal avatar is 64px vs the card's 48px */
}

.statements__speaker-info {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s1);
}

.statements__speaker-name {
  font-size: 21px; /* 21/30 on the baseline */
  line-height: 30px;
  font-weight: 700;
  color: var(--bw-s-ink);
}

/* speaker name as a link back to the speaker page (modal, archive only) */
.statements-modal__speaker-info {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s2);
}

.statements-modal .statements__speaker-name {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-s-s1);
}

.statements__speaker-link {
  color: var(--bw-s-ink-2);
  text-decoration: none;
}

.statements__speaker-link:hover,
.statements__speaker-link:focus-visible {
  text-decoration: underline;
  color: var(--bw-s-accent);
}

.statements__speaker-link:hover .statements__speaker-name .arrow,
.statements__speaker-link:focus-visible .statements__speaker-name .arrow {
  color: var(--bw-s-accent);
}

.statements-modal .statements__speaker-name .arrow {
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  color: var(--bw-s-ink-2);
  transition: transform 0.12s ease;
}

html[dir="ltr"] .statements-modal .statements__speaker-name .arrow {
  transform: scaleX(-1);
}

/* ---------- date above quote ---------- */

.statements__date {
  margin-block-start: var(--bw-s-s2);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--bw-s-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- role + party + tooltip ---------- */

.statements__role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bw-s-s1) var(--bw-s-s2);
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-ink-2);
}

.statements__role .position:after {
  content: "·";
  display: inline-block;
  color: var(--bw-s-ink-2);
  margin-inline-start: calc(0.5 * var(--bw-s-s1));
  position: absolute;
  font-weight: 400;
}

.tooltip {
  position: relative;
  display: flex !important;
  align-items: center;
}

.statements__role .tooltip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: Georgia, serif;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  border: 1px solid var(--bw-s-ink-3);
  color: var(--bw-s-ink-3);
}

.statements__role .tooltip:hover .tooltip__icon,
.statements__role .tooltip:focus-within .tooltip__icon {
  border-color: var(--bw-s-accent);
  color: var(--bw-s-accent);
}

.tooltip__content {
  position: absolute;
  inset-block-end: calc(100% + var(--bw-s-s1));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: none;
  max-inline-size: max-content;
  padding: var(--bw-s-s1) var(--bw-s-s2);
  background: var(--bw-s-ink);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
  text-align: start;
  width: max-content;
}

html[dir="rtl"] .tooltip__content {
  transform: translateX(50%);
}

.statements__role .tooltip:hover .tooltip__content,
.statements__role .tooltip:focus-within .tooltip__content {
  display: block;
}

/* ---------- photo-credit "i" tooltip (statement + speaker cards) ---------- */
.bw-photo-credit {
  position: absolute;
  z-index: 8;
  inset-block-end: calc(-0.5 * var(--bw-s-s1));
  inset-inline-start: calc(-0.5 * var(--bw-s-s1));
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff;
  border: 1px solid var(--bw-s-ink-2);
  border-radius: 50%;
}

.bw-photo-credit:hover,
.bw-photo-credit:focus,
.bw-photo-credit:focus-visible {
  border: 1px solid var(--bw-s-accent);
}

.bw-photo-credit__icon {
  font-size: 14px;
  color: var(--bw-s-ink-2);
}

.bw-photo-credit__tip {
  position: absolute;
  inset-block-end: calc(100% + var(--bw-s-s1));
  inset-inline-end: 0;
  z-index: 8;
  display: none;
  min-inline-size: 168px;
  max-inline-size: 240px;
  padding: var(--bw-s-s1) var(--bw-s-s2);
  background: var(--bw-s-card);
  color: var(--bw-s-ink);
  border: 1px solid var(--bw-s-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(40, 30, 24, 0.18);
  font-size: 12px;
  line-height: 17px;
  text-align: start;
  white-space: normal;
}

.bw-photo-credit__tip::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline-end: 7px;
  inline-size: 9px;
  block-size: 9px;
  background: var(--bw-s-card);
  border: 0;
  border-inline-end: 1px solid var(--bw-s-line);
  border-block-end: 1px solid var(--bw-s-line);
  transform: rotate(45deg);
}

.bw-photo-credit__tip.is-measuring {
  display: block;
  visibility: hidden;
}

.bw-photo-credit:hover .bw-photo-credit__tip,
.bw-photo-credit:focus .bw-photo-credit__tip,
.bw-photo-credit.is-open .bw-photo-credit__tip {
  display: block;
}

.bw-photo-credit__artist {
  display: block;
  font-weight: 600;
  margin-block-end: 6px;
}

.bw-photo-credit__row {
  display: block;
  margin-block-start: 4px;
}

.bw-photo-credit__row-title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bw-s-ink-3);
  margin-block-end: 1px;
}

.bw-photo-credit__row-link {
  display: block;
  color: var(--bw-s-ink-2);
}

.bw-photo-credit__row-link[href] {
  color: var(--bw-s-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bw-photo-credit__row-link[href]:hover {
  color: var(--bw-s-accent-dark);
}

.bw-photo-credit__divider {
  display: block;
  height: 1px;
  background: var(--bw-s-line);
  margin-block: 8px;
}

/* flip to the left when the default (right) position would leave viewport */
.bw-photo-credit.flip-inset .bw-photo-credit__tip,
.bw-photo-credit.flip-inset .bw-photo-credit__tip::after {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* flip above the badge when default (below/above) would leave viewport */
.bw-photo-credit.flip-up .bw-photo-credit__tip {
  inset-block-end: auto;
  inset-block-start: calc(100% + var(--bw-s-s1));
}

.bw-photo-credit.flip-up .bw-photo-credit__tip::after {
  inset-block-end: auto;
  inset-block-start: -5px;
  transform: rotate(225deg);
}

/* ---------- quote ---------- */

.statements__highlight {
  font-family: var(--bw-s-serif);
  font-size: 18px;
  line-height: 30px;
  color: var(--bw-s-ink);

  /* hard cap at 4 lines regardless of word length */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 30px); /* line-height * line-clamp */
}

/* ---------- source + expand affordance pinned to card bottom ---------- */

.statements__source {
  margin-block-start: auto;
  padding-block-start: var(--bw-s-s2);
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--bw-s-s1);
}

/* In the card the source line spans the footer: source content on the right,
   the expand icon at the far left (RTL: space-between puts the last child on
   the left). The modal's own source line keeps the plain layout below. */
.statements__card .statements__source {
  justify-content: space-between;
  gap: var(--bw-s-s2);
}

.statements__source-body {
  display: flex;
  align-items: center;
  gap: var(--bw-s-s1);
  min-inline-size: 0;
}

.statements__source a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  color: var(--bw-s-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.statements__source a:hover {
  color: var(--bw-s-accent-deep);
}

/* dead-link marker from the template (source_url_status = false) */
.statements__source a[data-link-dead] {
  color: var(--bw-s-ink-3);
  text-decoration-style: dashed;
}

@media (max-width: 767px) {
  /* single column: no sibling to align against — let it flow */
  .statements__source a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* expand icon button — opaque square chip that lights up on card hover/focus */
.statements__expand {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--bw-s-radius-sm);
  background: none !important;
  color: var(--bw-s-ink-2);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.statements__expand svg {
  width: 16px;
  height: 16px;
  fill: var(--bw-s-accent-dark);
}

.statements__card[data-id]:hover .statements__expand,
.statements__card[data-id]:focus-within .statements__expand {
  background: var(--bw-s-accent-soft) !important;
}

.statements__empty {
  grid-column: 1 / -1;
  padding: var(--bw-s-s8) var(--bw-s-s4);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  text-align: center;
  color: var(--bw-s-ink-2);
}
/* ============================================================
   Modal
   ------------------------------------------------------------
   Open state: js adds .is-open to .statements-modal (and toggles
   aria-hidden) + body.bw-modal-open. Escape / backdrop click /
   close button all close (js).
   ============================================================ */

.statements-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  padding: var(--bw-s-s10) var(--bw-s-s4);
  overflow-y: auto;
  background: rgba(58, 55, 52, 0.5);
}

.statements-modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

body.bw-modal-open {
  overflow: hidden;
}

.statements-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: min(744px, 100%); /* 8 columns */
  margin-block: auto;
  padding: var(--bw-s-s5);
  background: var(--bw-s-card);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-lg);
  box-shadow: var(--bw-s-shadow-3);
  gap: var(--bw-s-s2);
}

.statements-modal__close {
  position: absolute;
  top: var(--bw-s-s3);
  left: var(--bw-s-s3);
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--bw-s-line-2) !important;
  background-color: #fff !important;
  color: var(--bw-s-ink-2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition:
    border 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}

.statements-modal__close:hover {
  border: 1px solid var(--bw-s-accent) !important;
  color: var(--bw-s-accent);
  background-color: var(--bw-s-paper-2) !important;
}

/* modal reuses the card's inner classes — spacing tuned for reading */
.statements-modal .statements__speaker {
  align-items: flex-start;
  color: var(--bw-s-ink-2);
}

.statements-modal .statements__speaker-img {
  inline-size: 96px; /* lg avatar */
  block-size: 96px;
}

.statements-modal .statements__date {
  font-weight: 400;
  margin-block-start: 0;
}

.statements-modal .statements__highlight {
  /* The card rule sets display:-webkit-box + -webkit-line-clamp:4 which would
     turn the JS-inserted <mark> and text nodes into stacked full-width items and
     clip anything past line 4. Reset to a normal block so the highlight is inline
     word-level text and the max-height scroll below governs longer quotes. */
  display: block;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  line-clamp: unset;

  /* cap at 5 rendered lines — longer quotes auto-scroll */
  --bw-quote-line-height: 36px;
  max-block-size: calc(5 * var(--bw-quote-line-height));
  line-height: var(--bw-quote-line-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: var(--bw-s-s2); /* keep text clear of the scrollbar */

  /* full quote reads larger than the card excerpt */
  font-size: 21px;
  margin-block-start: var(--bw-s-s4);

  scrollbar-width: thin;
  scrollbar-color: #cfc8c0 transparent;
}

/* bottom fade hint — visible only while the quote can actually scroll */
.statements-modal .statements__highlight::after {
  content: "";
  position: sticky;
  display: block;
  inset-block-end: 0;
  block-size: 32px;
  margin-block-start: -32px; /* pull the gradient up over the last line */
  background: linear-gradient(to top, var(--bw-s-card), transparent);
  pointer-events: none;
  opacity: 0;
}

.statements-modal .statements__highlight.is-scrollable::after {
  opacity: 1;
}

.statements-modal .statements__highlight::-webkit-scrollbar {
  inline-size: 6px;
}

.statements-modal .statements__highlight::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #cfc8c0;
}

/* statement_highlight marked inside the full quote (js wraps it in <mark>) */
.statements-modal .statements__highlight mark {
  background: rgba(139, 32, 32, 0.16);
  color: inherit;
  font-weight: 600;
  border-radius: 2px;
  padding-inline: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- topic pills in the modal ---------- */

.statements-modal__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-s-s1);
  margin-block-start: var(--bw-s-s3);
}

/* pills are cursor-default here — informational, not filters */
.statements-modal .topics.topic {
  cursor: default;
  pointer-events: none;
}

/* ---------- share row ---------- */

.statements-modal__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bw-s-s2);
  margin-block-start: var(--bw-s-s4);
  padding-block-start: var(--bw-s-s3);
  border-block-start: 1px solid var(--bw-s-line-2);
}

.share-link {
  inline-size: 36px;
  block-size: 36px;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--bw-s-radius-sm);
  text-decoration: none;
  background-color: var(--bw-s-accent);
  transition: background-color 0.12s ease;
}

.share-link:hover {
  background-color: #6f1a1a;
}

.share-link svg {
  width: 16px;
  height: 16px;
  fill: currentcolor;
}

/* Native (Web Share API) link — mobile-only control. navigator.share() is not
   reliable on desktop so the native chip is hidden there and the fb/x/whatsapp
   row does the work; on phones (767px block below) it takes over and the three
   share-intent links drop away. The copy control stays visible on both. */
.share-link--native {
  display: none;
}

@media (max-width: 767px) {
  /* swap the intents for the OS share sheet; "native_share" is untagged —
     the shared URL lands in an unknown app, so a utm channel would be noise. */
  .share-link--facebook,
  .share-link--x,
  .share-link--whatsapp {
    display: none;
  }

  .share-link--native {
    display: inline-flex;
  }
}

/* ---------- photo credit pinned to the modal's bottom corner ---------- */
/* [hidden] must beat the display:flex below (author styles override the UA
   [hidden] rule). */
.statements-modal__photo-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bw-s-s1) var(--bw-s-s2);
  font-size: 13px;
  line-height: 18px;
  color: var(--bw-s-ink-3);
}

.statements-modal__photo-credit[hidden] {
  display: none;
}

.statements-modal__photo-credit a {
  color: var(--bw-s-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.statements-modal__photo-credit a:hover {
  color: var(--bw-s-accent);
}

.statements-modal__photo-credit-artist {
  font-weight: 500;
  color: var(--bw-s-ink-2);
}

/* Mirrors the source-caption look: same muted ink-2, normal weight, colon. */
.statements-modal__photo-credit-label {
  color: var(--bw-s-ink-2);
}

.statements-modal__photo-credit-sep {
  color: var(--bw-s-ink-3);
}

/* ---------- "Link copied" toast ---------- */

.bw-copied-toast {
  position: fixed;
  inset-inline-start: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(8px);
  z-index: 1001;
  max-inline-size: calc(100vw - 32px);
  padding: var(--bw-s-s2) var(--bw-s-s4);
  background-color: var(--bw-s-ink);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  border-radius: var(--bw-s-radius-sm);
  box-shadow: var(--bw-s-shadow-3);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.bw-copied-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Mobile — sidebar becomes a search/filters/sort toolbar with a
   collapsible filters drawer; results re-stack: applied filters,
   then the count, then the cards.
   ============================================================ */

@media (max-width: 1175px) {
  .statements-search {
    gap: var(--bw-s-s2);
  }

  .statements-search .statements-search__toolbar {
    display: flex;
    align-items: center;
    gap: var(--bw-s-s2);
  }

  .statements-search .statements-search__search-bar {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 44px;
    padding-block: 0;
  }

  .statements-search .statements-search__filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding-inline: var(--bw-s-s3);
    min-block-size: 44px;
    border: 1px solid var(--bw-s-line);
    border-radius: var(--bw-s-radius-sm);
    background: var(--bw-s-card);
    color: var(--bw-s-ink);
    font: inherit;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
  }

  .statements-search .statements-search__filters-toggle:active {
    background: var(--bw-s-accent-soft);
  }

  .statements-search .statements-page__sort--mobile {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .statements-search .statements-page__sort--mobile .sort__selector {
    gap: var(--bw-s-s1);
    padding-inline: var(--bw-s-s2);
    padding-block: 0;
    min-block-size: 44px;
  }

  .statements-search .statements-page__sort--mobile .sort__list-wrapper {
    z-index: 30;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: max-content;
    max-inline-size: calc(100vw - var(--bw-s-s4));
  }

  /* role-faction tooltip stays on screen: anchored to the icon's inline-end
     and capped to the viewport so it cannot drive past 100vw on phones */
  .statements__role .tooltip__content {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: none;
    inline-size: max-content;
    max-inline-size: min(calc(100vw - var(--bw-s-s4)), 300px);
  }

  html[dir="rtl"] .statements__role .tooltip__content {
    transform: none;
  }

  .statements-search .statements-search__filters {
    display: none;
  }

  .statements-search .statements-search__filters.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--bw-s-s4);
  }

  /* desktop sort sits inside the results-control; it is hidden here so the
     mobile toolbar's twin is the only visible instance */
  .statements-page__results-control .statements-page__sort {
    display: none;
  }

  .statements-page__results {
    display: flex;
    flex-direction: column;
  }

  .statements-page__results > .bw-applied-filters {
    order: 1;
  }

  .statements-page__results > .statements-page__results-control {
    order: 2;
  }

  .statements-page__results > .statements-page__statements {
    order: 3;
  }

  /* the infinite-scroll loader is a permanent direct child of the results
     flex column; without an explicit order it sorts to 0 (the top) on mobile,
     so pin it after the wall to sit below the cards. margin-block-start:auto
     pushes it to the very bottom of the column as a belt-and-braces fallback. */
  .statements-page__results > .bw-loading-spinner {
    order: 4;
    margin-block-start: auto;
  }

  /* The 1px infinite-scroll sentinel is a direct child of the results flex
     column too; with no explicit order it defaults to 0 and flexbox renders
     it FIRST — at the top of the results area — which fired the load-more
     fetch as soon as the results div entered the viewport instead of at the
     bottom of the loaded cards. Pin it after the loader (order 4) so the
     observer watches the true end of the cards. */
  .statements-page__results > .statements-page__sentinel {
    order: 5;
  }

  /* Native date pickers have an intrinsic minimum width that exceeds narrow
     containers. Stack the two fields so each gets the full sidebar width and
     nothing bleeds outside the drawer. */
  .statements-search .dates__inputs {
    flex-direction: column;
    align-items: stretch;
  }

  .statements-search .dates__field {
    max-inline-size: 100%;
  }
}

/* ============================================================
   Mobile sheet — modal becomes full-screen below 560px
   ============================================================ */

@media (max-width: 560px) {
  .statements-modal {
    padding: 0;
  }

  .statements-modal__content {
    max-inline-size: 95%;
    max-block-size: 95vh;
    overflow-y: auto;
    padding: var(--bw-s-s4);
  }

  /* close button sits in its own flex line (no absolute overlay), aligned to
     the inline end so it still flips correctly for he/ar */
  .statements-modal__close {
    position: static;
    align-self: flex-end;
  }

  /* modal avatar 25% smaller than the desktop 96px */
  .statements-modal .statements__speaker-img {
    inline-size: 72px; /* 96 * 0.75 */
    block-size: 72px;
  }

  .statements-modal .statements__highlight {
    flex-shrink: 1;
    min-block-size: 0; /* allow it to compress inside the flex column */
    max-block-size: calc(7 * var(--bw-quote-line-height));
  }
}

/* ============================================================
   Accessibility — interaction & motion preferences
   ============================================================ */

/* comfortable hit areas on touch devices */
@media (pointer: coarse) {
  .topics.topic,
  .speakers__selector,
  .statements-page__link,
  .share-link,
  .statements-modal__close {
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  .speakers__option {
    padding-block: var(--bw-s-s3); /* taller rows */
  }
}

/* motion only when the user allows it */
@media (prefers-reduced-motion: no-preference) {
  .statements__card[data-id]:hover,
  .statements__card[data-id] {
    transition:
      border-color 0.12s ease,
      box-shadow 0.12s ease,
      transform 0.12s ease;
  }

  .statements-page__link,
  .topics.topic,
  .speakers__cta,
  .share-link,
  .statements-modal__close {
    transition:
      background-color 0.12s ease,
      border-color 0.12s ease,
      color 0.12s ease,
      transform 0.12s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .statements-page *,
  .statements-page *::before,
  .statements-page *::after,
  .statements-modal *,
  .statements-modal *::before,
  .statements-modal *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- infinite scroll sentinel (js observes this to fetch more) ---------- */
.statements-page__sentinel {
  block-size: 1px;
}

/* ---------- loading spinner ---------- */
@keyframes bw-spin {
  to {
    transform: rotate(360deg);
  }
}

.bw-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bw-s-s6) 0;
}

.bw-loading-spinner::after {
  content: "";
  inline-size: 28px;
  block-size: 28px;
  border: 3px solid var(--bw-s-line);
  border-block-start-color: var(--bw-s-accent);
  border-radius: 50%;
  animation: bw-spin 0.6s linear infinite;
}

/* ---------- page-level loading overlay (sort / filter navigation) ---------- */
.statements-page__results {
  position: relative;
}

.bw-page-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
}

.bw-page-loading::after {
  content: "";
  inline-size: 40px;
  block-size: 40px;
  border: 3px solid var(--bw-s-line);
  border-block-start-color: var(--bw-s-accent);
  border-radius: 50%;
  animation: bw-spin 0.6s linear infinite;
}

body.bw-scroll-locked {
  overflow: hidden !important;
}

/* ============================================================
   Applied-filters bar (activebar)
   ============================================================ */

.bw-applied-filters {
  gap: var(--bw-s-s2);
  padding-block: var(--bw-s-s2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bw-applied-filters-label {
  color: var(--bw-s-ink-3);
  font-size: 12.5px;
  line-height: 24px;
}

.bw-applied-filters-list {
  gap: var(--bw-s-s1);
  display: flex;
  flex-wrap: wrap;
}

.bw-applied-filters .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--bw-s-radius-pill);
  border: 1px solid var(--bw-s-line);
  background: var(--bw-s-paper);
  color: var(--bw-s-ink-2);
  padding: 5px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.bw-applied-filters .pill.on {
  background: var(--bw-s-accent-soft);
  color: var(--bw-s-accent);
  border-color: var(--bw-s-accent);
}

.bw-applied-filters .pill .x {
  color: var(--bw-s-ink-3);
  line-height: 1;
}

.bw-applied-filters .clearall,
.bw-applied-filters-clear {
  margin-inline-start: var(--bw-s-s1);
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  color: var(--bw-s-accent);
  text-decoration: underline;
  cursor: pointer;
}

.bw-applied-filters .clearall:hover,
.bw-applied-filters-clear:hover {
  color: var(--bw-s-accent-dark);
}

/* ============================================================
   Skeleton cards (AJAX filter / sort refresh)
   Replaces the page-loading overlay inside the wall while a
   refresh is in flight. Mirrors .statements__card proportions so
   the grid doesn't reflow once the real cards land.
   ============================================================ */

.statements__card.is-skeleton {
  pointer-events: none;
  user-select: none;
  box-shadow: none;
}

.bw-skeleton {
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    var(--bw-s-paper-2) 25%,
    var(--bw-s-card) 50%,
    var(--bw-s-paper-2) 75%
  );
  background-size: 200% 100%;
  animation: bw-skeleton-shimmer 1.3s ease-in-out infinite;
}

@keyframes bw-skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.bw-skeleton-head {
  display: flex;
  align-items: center;
  gap: var(--bw-s-s3);
}

.bw-skeleton-avatar {
  flex: 0 0 auto;
  inline-size: 48px; /* matches .statements__speaker-img */
  block-size: 48px;
  border-radius: 50%;
}

.bw-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s1);
  flex: 1;
  min-inline-size: 0;
}

.bw-skeleton-line {
  block-size: 14px;
  inline-size: 100%;
}

.bw-skeleton-line--sm {
  block-size: 12px;
}

.bw-skeleton-line--w80 {
  inline-size: 80%;
}

.bw-skeleton-line--w60 {
  inline-size: 60%;
}

.bw-skeleton-line--w40 {
  inline-size: 40%;
}

/* quote block — soft-rounded, taller than the text lines */
.bw-skeleton-block {
  border-radius: var(--bw-s-radius-sm);
  block-size: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .bw-skeleton {
    animation: none;
  }
}

/* ============================================================
   Sidebar — date range filter
   ============================================================ */

.dates__title {
  margin-block-end: var(--bw-s-s2);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-s-ink-2);
  font-weight: 600;
}

.dates__inputs {
  gap: var(--bw-s-s1);
  display: flex;
  align-items: center;
}

.dates__field {
  display: flex;
  flex-direction: column;
  gap: var(--bw-s-s1);
  flex: 1 1 0;
  min-inline-size: 0;
}

.dates__label {
  font-size: 11px;
  line-height: 16px;
  color: var(--bw-s-ink-3);
}

.dates__sep {
  align-self: flex-end;
  padding-block-end: 10px;
  color: var(--bw-s-ink-3);
}

.statements-page .dates__from,
.statements-page .dates__to {
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--bw-s-s2) var(--bw-s-s2);
  border: 1px solid var(--bw-s-line);
  border-radius: var(--bw-s-radius-sm);
  background: var(--bw-s-card);
  color: var(--bw-s-ink);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: start;
  /* restore native appearance so iOS shows the date picker placeholder */
  -webkit-appearance: auto;
  appearance: auto;
}

.dates__from:hover,
.dates__to:hover {
  border-color: var(--bw-s-accent);
}

.dates__from:disabled,
.dates__to:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ============================================================
   Sidebar links — About / Officials archive
   ============================================================ */

.statements-search__links {
  display: flex;
  gap: var(--bw-s-s1);
  padding-block-start: var(--bw-s-s1);
  border-block-start: 1px solid var(--bw-s-line);
}

.statements-search__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-s-s2);
  padding: var(--bw-s-s2) var(--bw-s-s2);
  border-radius: var(--bw-s-radius-sm);
  color: var(--bw-s-ink);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.statements-search__link:hover {
  background: var(--bw-s-paper-2);
  color: var(--bw-s-accent);
}

.statements-search__link .arrow {
  position: relative;
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg); /* points to inline end */
  flex-shrink: 0;
}

html[dir="ltr"] .statements-search__link .arrow {
  transform: rotate(-135deg);
}

/* ============================================================
   Filter controls — busy / loading states
   ============================================================
   While a filter refresh is in flight the controls being removed
   show a spinner and everything else is dimmed + inert so no
   second request can overlap the first. */

.bw-applied-filters .pill:disabled,
.bw-applied-filters .clearall:disabled,
.speakers__cta:disabled {
  opacity: 0.55;
  cursor: wait;
}

.bw-applied-filters .pill.is-loading {
  position: relative;
  color: transparent;
}

.bw-applied-filters .pill.is-loading .x {
  visibility: hidden;
}

.bw-applied-filters .pill.is-loading::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: -7px;
  margin-block-start: -7px;
  border: 2px solid var(--bw-s-line);
  border-block-start-color: var(--bw-s-accent);
  border-radius: 50%;
  animation: bw-spin 0.6s linear infinite;
}

.bw-applied-filters .clearall.is-loading,
.topics.topic.is-loading {
  position: relative;
  color: transparent;
}

.bw-applied-filters .clearall.is-loading::after,
.topics.topic.is-loading::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: -7px;
  margin-block-start: -7px;
  border: 2px solid var(--bw-s-ink-3);
  border-block-start-color: var(--bw-s-accent);
  border-radius: 50%;
  animation: bw-spin 0.6s linear infinite;
}

.topics.topic[aria-disabled="true"] {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.sort__option[aria-disabled="true"] {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bw-applied-filters .pill.is-loading::after,
  .bw-applied-filters .clearall.is-loading::after,
  .topics.topic.is-loading::after {
    animation: none;
  }
}