:root {
  --ink: #181818;
  --muted: #666;
  --page: #f5f5f2;
  --white: #fff;
  --line: #c9c9c4;
  --unknown: #777;
  --danger: #d71920;
  --success: #37834a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
a { color: inherit; }
button { font: inherit; }
.skip-link {
  position: absolute;
  left: .75rem;
  top: -5rem;
  z-index: 99;
  padding: .5rem .75rem;
  color: #fff;
  background: var(--ink);
}
.skip-link:focus { top: .75rem; }

.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.header-inner,
.masthead,
.recent-wrap,
.feed-shell,
.site-footer,
.article-page {
  width: min(900px, calc(100% - 2rem));
  margin-inline: auto;
}
.header-inner {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #b82222;
  font-size: .65rem;
  font-weight: bold;
}
.brand strong { display: block; font-size: .95rem; }
.brand small { display: none; }
.header-inner nav { display: flex; gap: 1rem; }
.header-inner nav a { font-size: .8rem; text-decoration: none; }
.header-inner nav a:hover { text-decoration: underline; }

.masthead { padding: 1.8rem 0 1.5rem; }
.masthead h1,
.article-page h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}
.masthead p { margin: .45rem 0 0; color: var(--muted); }
.eyebrow {
  margin: 0 0 .45rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.recent-wrap { padding-bottom: 1.5rem; }
.section-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ink);
}
.section-kicker h2 { margin: 0; font-size: .8rem; text-transform: uppercase; }
.section-kicker span { color: var(--muted); font-size: .72rem; }
.recent-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.debate-tab {
  min-height: 88px;
  padding: .7rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  text-decoration: none;
}
.debate-tab time,
.debate-tab small { display: block; color: var(--muted); font-size: .65rem; }
.debate-tab span {
  /* Clamped rather than truncated to a character count: card width varies
     with the viewport, and titles vary enormously by country -- the U.S.
     Congressional Record prints whole resolution titles (and truncates its
     own at ~195 characters), where a Hansard subject is a few words. A line
     clamp keeps every card the same height in both. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: .25rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  line-height: 1.2;
}
.debate-tab:hover { text-decoration: underline; }
.debate-tab.is-active { color: #fff; background: var(--ink); }
.debate-tab.is-active time,
.debate-tab.is-active small { color: #ccc; }

.feed-shell { padding-bottom: 3rem; }
.debate-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.debate-header h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.15;
}
.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .7rem;
}
.source-button {
  flex: none;
  padding: .42rem .6rem;
  border: 1px solid var(--ink);
  background: var(--white);
  font-size: .72rem;
  text-decoration: none;
}
.source-button:hover { color: #fff; background: var(--ink); }

.debate-summary {
  margin: .5rem 0 0;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: .85rem;
}
/* Only relevant once the mobile media query below clamps the summary --
   a title="..." tooltip doesn't work on a touchscreen, so this is the
   real way to read the rest of it there. Hidden by default (desktop
   never clamps, so there's nothing to expand). */
.summary-toggle {
  display: none;
  margin: .3rem 0 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: .72rem;
  font-weight: bold;
  text-decoration: underline;
}
.party-filters { display: flex; gap: .4rem; padding: .85rem 0 1.5rem; overflow-x: auto; }
.party-filter {
  flex: none;
  padding: .32rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .7rem;
  font-weight: bold;
  text-decoration: none;
}
.party-filter:hover,
.party-filter.is-active { color: #fff; border-color: var(--ink); background: var(--ink); }

.translation-feed { display: grid; gap: 1.5rem; }
.speech-card, .mp-header { --party-colour: var(--unknown); position: relative; }
.conversation-row { display: flex; align-items: flex-start; gap: 1rem; }
.speech-card.side-right .conversation-row { flex-direction: row-reverse; }
.speaker-profile { width: 150px; flex: none; text-align: center; }
.avatar {
  position: relative;
  /* A portrait "badge" shape rather than a circle -- the real photos are
     professional headshots at roughly a 3:4 ratio (taller than wide), so
     a circle crop always had to cut into either the top of the head or
     the shoulders. This shape needs little to no cropping instead.
     Sized larger than the original 46x58: dropping the riding/title line
     below (moved to a hover tooltip on the name instead) freed up the
     vertical space in this column, so it goes straight into the photo. */
  width: 62px;
  height: 80px;
  display: grid;
  place-items: center;
  margin: 0 auto .4rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #ddd;
  filter: grayscale(1);
  font-size: 2.2rem;
  line-height: 1;
  overflow: hidden;
  transition: border-color .15s ease, filter .15s ease;
}
.speaker-identity h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; cursor: help; }
.speaker-link { color: inherit; text-decoration: none; }
.speaker-link:hover { text-decoration: underline; }
/* Black-and-white at rest, full colour (photo and party-coloured border)
   on hover -- the colour reveal itself is the reward, so no extra tint
   overlay is needed on top of it. */
.avatar:hover { border-color: var(--party-colour); filter: grayscale(0); }
/* Absolutely positioned rather than width/height: 100% -- .avatar's grid
   layout (for centering the emoji fallback) leaves the row track
   auto-sized, so a percentage height on a grid item resolves to "auto"
   there and the image falls back to its own aspect ratio, overflowing
   the circle. An absolutely positioned element's containing block is
   .avatar's own padding box instead, which is fully explicit (54x54),
   so this sizes correctly regardless of the photo's native dimensions. */
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop toward the top -- these are headshots with headroom
     above the hair already, so centering vertically wasted that headroom
     and pushed the crop into the chin/shoulders instead. */
  object-position: center 15%;
  border-radius: 10px;
  display: block;
}
.speaker-tags { display: flex; justify-content: center; align-items: center; gap: .4rem; }
.speaker-tags time { color: var(--muted); font-size: .65rem; }
.party-badge {
  padding: .16rem .35rem;
  color: #fff;
  background: var(--unknown);
  font-size: .58rem;
  font-weight: bold;
  text-transform: uppercase;
}

.speech-bubble {
  position: relative;
  min-width: 0;
  flex: 1;
  padding: 1rem 1rem .65rem;
  border: 1px solid var(--ink);
  background: var(--white);
}
.speech-bubble::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -9px;
  width: 15px;
  height: 15px;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--white);
  transform: rotate(45deg);
}
.speech-card.side-right .speech-bubble::before {
  right: -9px;
  left: auto;
  border: 0;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}
.speech-bubble blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.4;
}
.pending { margin: 0; color: var(--muted); font-family: Georgia, "Times New Roman", serif; }
.bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  padding-top: .5rem;
  border-top: 1px solid #ddd;
  color: var(--muted);
  font-size: .65rem;
  text-transform: uppercase;
}
.reduction-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .35rem;
  border: 1px solid var(--success);
  border-radius: 3px;
  color: var(--success);
  font-weight: bold;
  letter-spacing: .02em;
}
.official-trigger {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: .65rem;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}
.official-tooltip {
  position: absolute;
  z-index: 10;
  /* Flush against the bubble (no gap, no margin) so the cursor never
     crosses empty space while moving from the bubble down into the
     tooltip -- a gap here breaks :hover and closes the tooltip before
     the mouse arrives. The border itself is the visual separation. */
  top: 100%;
  left: 0;
  width: min(580px, calc(100vw - 3rem));
  max-height: 260px;
  overflow: auto;
  padding: .85rem;
  border: 1px solid var(--ink);
  background: #fffef4;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.speech-card.side-right .official-tooltip { right: 0; left: auto; }
.speech-bubble:hover .official-tooltip,
.speech-bubble.is-open .official-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.official-tooltip strong { display: block; margin-bottom: .35rem; font-size: .72rem; text-transform: uppercase; }
.official-tooltip p { margin: 0 0 .65rem; font-family: Georgia, "Times New Roman", serif; font-size: .88rem; line-height: 1.55; }
.official-tooltip a { font-size: .7rem; font-weight: bold; }

/* A speech-bubble used on its own (not paired with an avatar in a
   conversation row) drops the pointer-tail decoration -- same white box,
   same hover-to-reveal-official-wording behaviour, no dangling arrow. */
.speech-bubble.standalone::before { display: none; }
.mp-feed { margin-top: 1.5rem; }
.mp-statement-context { margin-bottom: .6rem; }
.mp-statement-context h3 { margin: .15rem 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.mp-statement-context h3 a { color: inherit; }
.mp-statement-context time { color: var(--muted); font-size: .75rem; }
.mp-header { display: flex; align-items: flex-start; gap: 1.25rem; }
.mp-avatar {
  position: relative;
  /* Same portrait badge shape as the feed's .avatar, scaled up -- see
     that rule for why this isn't a circle. */
  width: 76px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--party-colour);
  border-radius: 14px;
  background: #ddd;
  font-size: 2.6rem;
  line-height: 1;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
/* Same halo-ring-plus-sheen hover reward as the feed's .avatar. */
.mp-avatar:hover { box-shadow: 0 0 0 3px var(--party-colour); }
.mp-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.mp-avatar:hover::after { opacity: 1; }
/* See .avatar img for why this is absolutely positioned rather than a
   plain width/height: 100%. */
.mp-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 12px;
  display: block;
}
@media (max-width: 640px) {
  .mp-header { gap: .75rem; }
  .mp-avatar { width: 54px; height: 68px; font-size: 1.8rem; }
}
/* Consecutive statements from the same debate skip repeating the debate
   heading -- pull them visually closer so they read as one group instead
   of leaving the full inter-card gap where a heading would have been. */
.mp-statement.is-grouped { margin-top: -.8rem; }

.empty-state { padding: 2.5rem 1rem; border: 1px solid var(--line); text-align: center; background: var(--white); }
.empty-state h3,
.empty-state h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.empty-state p { color: var(--muted); }
.empty-home { margin: 3rem auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .3rem; padding-top: 2rem; }
.pagination a,
.pagination span {
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: .72rem;
  text-decoration: none;
}
.pagination a.is-active,
.pagination a:hover { color: #fff; border-color: var(--ink); background: var(--ink); }

.article-page { max-width: 760px; padding-block: 2.5rem 4rem; }
.debate-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.debate-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.debate-list-item:hover h2 { text-decoration: underline; }
.debate-list-item h2 { margin: .15rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.debate-list-item .metadata { margin: .3rem 0 0; color: var(--muted); font-size: .75rem; }
.debate-list-count {
  flex-shrink: 0;
  text-align: right;
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
}
.debate-list-count strong { display: block; font-size: 1.2rem; color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.article-page h1 { font-size: clamp(2rem, 5vw, 3rem); }
.article-page h1 em { font-weight: normal; }
.article-page .lede { margin: 1.5rem 0 2.5rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.article-page section { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.article-page h2 { margin: 0 0 .4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.article-page section p,
.article-page ol { margin: 0; color: #444; }
.article-page li + li { margin-top: .35rem; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}

.admin-page { width: min(1000px, calc(100% - 2rem)); margin-inline: auto; padding: 2rem 0 4rem; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-header h1 { margin: 0; font: bold 2rem/1.1 Georgia, "Times New Roman", serif; }
.status-pill { padding: .3rem .55rem; border: 1px solid var(--ink); font-size: .68rem; font-weight: bold; text-transform: uppercase; }
.status-ok { color: #fff; border-color: var(--success); background: var(--success); }
.status-bad { color: #fff; border-color: var(--danger); background: var(--danger); }
.status-unknown { color: var(--muted); border-color: var(--line); background: var(--white); }
.service-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.service-card { padding: .85rem .9rem; border: 1px solid var(--line); background: var(--white); }
.service-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.service-card-hint { margin: 0 0 .5rem; color: var(--muted); font-size: .72rem; }
.service-card-detail { margin: 0; padding-top: .5rem; border-top: 1px solid var(--line); font-size: .72rem; color: #333; line-height: 1.5; }
.service-card-detail .pre-line { white-space: pre-line; }
.status-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin: 1.5rem 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.status-grid div { min-width: 0; padding: .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.status-grid strong { display: block; font: bold 1.35rem/1.1 Georgia, "Times New Roman", serif; }
.status-grid span { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.admin-section { margin-top: 1.5rem; }
.admin-section h2 { margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ink); font-size: .82rem; text-transform: uppercase; }
.config-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-left: 1px solid var(--line); }
.config-list div { display: grid; grid-template-columns: 9rem 1fr; padding: .5rem .65rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.config-list dt { color: var(--muted); font-size: .7rem; }
.config-list dd { margin: 0; overflow-wrap: anywhere; font-size: .75rem; font-weight: bold; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
.admin-section table { width: 100%; border-collapse: collapse; font-size: .72rem; text-align: left; }
.admin-section th,
.admin-section td { padding: .5rem .6rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.admin-section th { background: #eee; font-size: .65rem; text-transform: uppercase; }
.admin-section tbody tr:last-child td { border-bottom: 0; }
.status-text { font-weight: bold; text-transform: uppercase; }
.status-complete { color: var(--success); }
.status-failed { color: var(--danger); }
.muted { color: var(--muted); }

@media (max-width: 700px) {
  /* On a phone, the masthead + recent-debates strip + debate header + full
     AI summary pushed the first translated statement well past a full
     screen of scrolling before any actual speech content appeared. Tighten
     all of them together rather than cutting any one feature: shrink the
     masthead and the recent-debates strip, and cap the summary at 3 lines
     (still fully readable, just not able to eat the whole viewport on its
     own) -- the goal is just for the top of the first speech bubble to
     peek into view on load, as a hint of what the page actually does. */
  .masthead { padding: 1rem 0 .85rem; }
  .masthead p { margin-top: .3rem; }
  .recent-strip { display: flex; overflow-x: auto; }
  .debate-tab { min-width: 190px; min-height: 64px; padding: .5rem .6rem; }
  .debate-header { display: block; }
  .debate-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .debate-summary.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .summary-toggle { display: inline-block; }
  .party-filters { padding: .6rem 0 1rem; }
  .source-button { display: inline-block; margin-top: .75rem; }
  .conversation-row,
  .speech-card.side-right .conversation-row { gap: .6rem; flex-direction: row; }
  .speaker-profile { width: 84px; }
  .avatar { width: 50px; height: 64px; font-size: 1.7rem; }
  .speaker-identity h3 { font-size: .78rem; overflow-wrap: anywhere; }
  .speaker-tags { margin-top: .3rem; flex-direction: column; gap: .2rem; }
  .speech-card.side-right .speech-bubble::before {
    right: auto;
    left: -9px;
    border: 0;
    border-left: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .official-tooltip,
  .speech-card.side-right .official-tooltip {
    position: static;
    display: none;
    width: auto;
    max-height: 220px;
    margin-top: .75rem;
    visibility: visible;
    opacity: 1;
  }
  .speech-bubble:hover .official-tooltip { display: none; }
  .speech-bubble.is-open .official-tooltip { display: block; }
  .site-footer { display: block; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .config-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The other countries' sites. Deliberately quiet -- it belongs with the
   footer's provenance lines, not competing with the primary navigation. */
.country-switch { margin-top: .5rem; }
.country-switch a,
.country-switch span[aria-current] { padding: 0 .1rem; }
.country-switch span[aria-current] { color: var(--ink); font-weight: bold; }
.country-switch .sep { padding: 0 .35rem; color: var(--line); }

/* Filter above the full debate list. The checkbox submits on change, so the
   Apply button is only a fallback for browsers without JS -- app.js hides it
   rather than CSS, so it stays usable when scripts are off. */
.list-filter {
  /* No rule of its own: .debate-list already draws a border-top directly
     below, and a second line 1.25rem above it read as a stray divider. */
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0 -.5rem;
  font-size: .8rem;
}
.list-filter label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.list-filter input { accent-color: var(--ink); }
.list-filter button {
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  background: var(--white);
  font: inherit;
  cursor: pointer;
}
.list-filter button:hover { border-color: var(--ink); }