/* PolitiQuote — redesigned claim page.
   Tokens from the design system (Styles/Spacing/Radius PDFs):
   content max 1330px centered; section gaps 32; container padding 24;
   card padding 16; radius 6 (containers/video) and 4 (cards);
   Bevan for the wordmark, Public Sans for everything else. */

:root {
  --primary-blue: #0171BC;
  --secondary-blue: #20A4AE;
  --primary-black: #202027;
  --highlight-yellow: #FFF3AF;
  --dark-blue: #002947;
  --primary-gray: #6B6B6B;
  --light-blue: #F3FAFF;
  --report-blue: #DAEFFF;
  --light-gray: #F6F6F5;
  --white: #FFFFFF;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Bevan", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--primary-black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: var(--primary-blue); }

/* Content: max 1330px, centered with whitespace beyond (margin: 0 auto) */
.page {
  max-width: 1330px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ---- Header ---- */
.site-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: var(--primary-blue);
  white-space: nowrap;
}
.brand.big { font-size: 48px; }
/* On the claim page the wordmark is the link home; on the home page it's the
   H1 of the page you're already on, so only the anchor gets link affordances. */
a.brand {
  text-decoration: none;
  transition: color 250ms ease;
}
a.brand:hover { color: var(--dark-blue); }
a.brand:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.leader {
  flex: 1;
  border-bottom: 2px dotted var(--primary-blue);
  opacity: .55;
  transform: translateY(-8px);
}
.head-right { text-align: right; }
.tagline {
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-blue);
  margin: 0;
}
.about-link {
  background: none; border: none; padding: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--dark-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Title bar ---- */
.titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.featuring {
  font-weight: 500;
  font-size: 18px;
  color: var(--primary-gray);
  margin: 8px 0 0;
}
.h1 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--primary-black);
  margin: 0;
  /* Server-capped at H1_CHARS, then clamped here: a fixed character cut is
     layout-blind, identical on a phone and a 1400px desktop. Visual only —
     the capped string is intact in the HTML. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.actions { display: flex; gap: 8px; flex: none; }
.actbtn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: none;
  background: var(--light-blue);
  color: var(--primary-black);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}
.actbtn:hover { background: var(--primary-blue); color: #fff; }
.actbtn.copied { background: #1a7f37; color: #fff; }
.reportbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: var(--report-blue);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--primary-black);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 250ms ease, color 250ms ease;
}
.reportbtn:hover { background: var(--primary-blue); color: #fff; }

/* Copy Page Link: the title-bar action. Same pill metrics and --report-blue
   fill as .reportbtn, so the two read as one control family. site.js toggles
   .copied for 1.5s, which swaps the label in place — no JS label handling, so
   the two spans below are the whole mechanism. */
.copybtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: var(--report-blue);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--primary-black);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 250ms ease, color 250ms ease;
}
.copybtn:hover { background: var(--primary-blue); color: #fff; }
.copybtn.copied { background: #1a7f37; color: #fff; }
.copybtn .copy-done { display: none; }
.copybtn.copied .copy-idle { display: none; }
.copybtn.copied .copy-done { display: inline; }

/* ---- Main: video 650 / quote 600, space-between ---- */
.main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-top: 32px;
}
.media { flex: 0 1 650px; margin: 0; max-width: 650px; }
.passage { flex: 0 1 600px; max-width: 600px; }

/* Player: blue frame, radius 6 */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 3px solid var(--primary-blue);
  border-radius: 6px;
  overflow: hidden;
}
.player iframe, .player .facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade { padding: 0; background: #000; cursor: pointer; }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.overlay-title {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 10px 12px 24px;
  text-align: left;
  background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
.overlay-title small { display: block; font-weight: 300; font-size: 11px; opacity: .85; }
.playbtn {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  background: #f00;
  border-radius: 12px;
}
.playbtn::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-45%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.start-pill {
  position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
  background: rgba(0, 26, 46, .85);
  border: 1px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.yt-badge {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
}
.yt-badge:hover { background: #f00; }

/* Caption under the video */
.caption { margin: 8px 2px 0; }
/* The recording's title, which is what tells a reader where the quote came
   from. It sat at the same 12px as the date below it; now it leads the caption
   and the date recedes. line-height is explicit because real titles are long
   enough to wrap. */
.cap-title { font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--primary-black); margin: 0; }
.cap-meta { font-weight: 300; font-size: 12px; color: var(--primary-gray); margin: 4px 0 0; }

/* Quote passage */
.passage-text {
  font-weight: 300;
  font-size: 21px;
  line-height: 1.5;
  color: var(--primary-black);
  margin: 0;
}
.claim-hl {
  background: var(--highlight-yellow);
  padding: 1px 2px;
}
.claim-hl strong { font-weight: 700; }
.q-open, .q-close {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 26px;
  line-height: 0;
}
.q-open { margin-right: 4px; }
.q-close { margin-left: 4px; }
.range {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary-gray);
  white-space: nowrap;
  margin-left: 8px;
}

/* ---- Divider + Discover more (v3) ---- */
.dotted-divider {
  border: none;
  border-top: 2px dotted var(--primary-blue);
  opacity: .5;
  margin: 32px 0;
}
.discover {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.discover-side { flex: 0 0 280px; }
.avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
}
.discover-kicker {
  font-weight: 600;
  font-size: 20px;
  color: var(--primary-black);
  margin: 0;
  line-height: 1.22;
}
/* Inline, not a line of its own: the name now sits mid-sentence and shares the
   heading's line box. It is set apart by face and colour rather than by size —
   a larger inline run would open uneven gaps between the wrapped lines. */
.discover-name {
  font-family: var(--display);
  color: var(--secondary-blue);
}
.discover-list { flex: 1; min-width: 0; }
/* The pager sits after the list, so its position followed the list's height —
   quotes wrap to different line counts, and the last page usually holds fewer
   than three items. Reserving a fixed block for three rows pins the arrows.
   --d-row is one row incl. its meta line; --d-gap the space between rows. */
.d-list {
  --d-row: 64px;
  --d-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--d-gap);
  min-height: calc(3 * var(--d-row) + 2 * var(--d-gap));
}
.d-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: var(--d-row);
}
.d-item[hidden] { display: none; }
.d-logo {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 1px;
  background: url("../img/pq-outline.79aade52b372.svg") center / contain no-repeat;
}
.d-item:hover .d-logo { background-image: url("../img/pq-dark.69b7f00a301e.svg"); }
.d-body { min-width: 0; flex: 1; }
/* Clamped so a long quote can't push the row — and with it the pager — taller.
   Clamping is visual only: the full text stays in the HTML for crawlers. */
.d-item a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--primary-black);
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.d-item:hover a { color: var(--secondary-blue); }
/* Carries the claim's assertion, not the source title and date — those were
   identical on every row. Assertions vary in length, so this wraps to two
   lines rather than ellipsing one. */
.d-meta {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  color: var(--primary-gray);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* The timestamp is the row's most useful fact — it is what the link delivers —
   so it carries the body colour and full weight while the assertion stays grey. */
.d-range { font-weight: 700; color: var(--primary-black); white-space: nowrap; }
.d-sep { opacity: .5; }
/* Submit feedback for the report dialog; empty until site.js fills it. */
.report-status {
  font-size: 13px;
  line-height: 1.35;
  margin: 8px 0 0;
  min-height: 18px;          /* reserved, so the dialog does not jump */
  color: var(--primary-gray);
}
.report-status.ok  { color: var(--secondary-blue); font-weight: 600; }
.report-status.err { color: #b3261e; font-weight: 600; }
.d-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.d-pager button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--secondary-blue);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 250ms ease;
}
.d-pager button:disabled {
  background: rgba(32, 164, 174, .4);   /* same hex at 40% per annotation */
  color: #fff;
  cursor: default;
}

/* ---- CLAIM block ---- */
.claim-box { margin-top: 24px; }
.claim-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-blue);
  letter-spacing: .02em;
  margin: 0 0 4px;
}
.claim-assertion {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--primary-black);
  margin: 0;
}

/* Raw-transcript disclaimer, under the CLAIM block in the right column.
   Margin and line-height weren't in the spec; the rest is verbatim. */
.transcript-note {
  margin: 16px 0 0;
  padding: 8px;
  background-color: var(--light-blue);
  color: var(--primary-black);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
}

/* The report control now lives with the disclaimer it answers. Left-aligned
   under the note, 12px below it so the two read as one block. */
.note-actions { margin-top: 12px; }

/* ---- About dialog ---- */
.about {
  border: none;
  border-radius: 8px;
  width: min(720px, calc(100% - 32px));
  padding: 40px 64px 64px;
  box-shadow: 0 12px 40px rgba(0, 20, 40, .25);
}
.about::backdrop { background: rgba(20, 26, 34, .55); }
.about-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.about-title {
  font-family: var(--display);
  font-size: 30px;
  color: var(--primary-blue);
}
.about .close {
  background: none; border: none; padding: 4px;
  color: var(--primary-black);
  cursor: pointer;
}
.about .close:hover { color: var(--primary-blue); }
.about .dotted-divider { margin: 8px 0 24px; }
.about-body p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--primary-black);
  margin: 0 0 20px;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body a { color: var(--primary-blue); }

/* ---- Report an Error dialog ---- */
.report-body p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--primary-black);
  margin: 0 0 16px;
}
.report-text {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--primary-gray);
  border-radius: 4px;
  padding: 12px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--primary-black);
  resize: vertical;
}
.report-text:focus { outline: 2px solid var(--primary-blue); border-color: transparent; }
.report-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.submitbtn {
  border: none;
  border-radius: 4px;
  background: var(--primary-blue);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background-color 250ms ease;
}
.submitbtn:hover { background: var(--dark-blue); }

/* ---- Home: masthead + latest-quotes feed ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The feed is a reading column, so it runs narrower than the claim page's 1330. */
.home-page { max-width: 1000px; padding-top: 40px; }
.home-head { text-align: center; margin-bottom: 36px; }
.home-head .brand { display: block; margin: 0; font-weight: 400; }
.home-head .tagline { margin: 4px 0 6px; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-item {
  display: flex;
  gap: 64px;
  align-items: center;
  /* Divider sits above every row, so the first row is separated from the
     masthead exactly like the rows are from each other. */
  border-top: 2px dotted rgba(1, 113, 188, .5);
  padding: 28px 0;
}
.feed-side { flex: 0 0 180px; text-align: center; }
.feed-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
}
.feed-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--secondary-blue);
  margin: 0;
}
.feed-creds {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  color: var(--primary-black);
  margin: 4px 0 0;
}
.feed-body { flex: 1; min-width: 0; }
.feed-quote {
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--primary-black);
  text-decoration: none;
}
.feed-quote:hover { color: var(--secondary-blue); }
.feed-meta {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--primary-gray);
  margin: 10px 0 0;
}
/* Visible About copy — a tinted panel in the masthead. It is the description
   search engines read, so it must stay outside any data-nosnippet wrapper. */
.about-block {
  margin: 24px auto;
  padding: 32px 100px;
  background-color: var(--light-blue);
  border-radius: 6px;
}
.about-block p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--primary-black);
  margin: 0 0 14px;
}

/* /about/ — a plain reading page. */
.about-page .prose { max-width: 720px; margin: 32px 0 0; }
.about-page .prose h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  color: var(--primary-blue);
  margin: 0 0 20px;
}
.about-page .prose p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--primary-black);
  margin: 0 0 18px;
}

.feed-empty {
  border-top: 2px dotted rgba(1, 113, 188, .5);
  padding: 40px 0;
  text-align: center;
  font-size: 18px;
  color: var(--primary-gray);
}

/* ---- Tablet (≤1024px): stack; heights grow so content fits ---- */
@media (max-width: 1024px) {
  /* In column direction align-items governs horizontal alignment:
     stretch so the video spans the content width (per Tablet mock). */
  .main { flex-direction: column; gap: 24px; align-items: stretch; }
  .media, .passage { flex-basis: auto; max-width: 100%; width: 100%; }
  .h1 { font-size: 26px; }
  .discover { flex-direction: column; gap: 24px; }
  .discover-side { flex-basis: auto; display: flex; align-items: center; gap: 16px; }
  .avatar { margin-bottom: 0; width: 72px; height: 72px; }
  .feed-item { gap: 24px; }
  .feed-side { flex-basis: 150px; }
}

/* ---- Title bar stacking (≤860px) ----
   Set when "Report A Transcription Error" sat here: ~195px of nowrap text plus
   the 16px gap took 211px off the heading's measure, which wrapped the H1 over
   six lines on a phone. "Copy Page Link" replaced it and costs roughly 135px,
   so the heading has more room than this threshold assumes — 860px is kept as
   the conservative stack point rather than retuned by eye. */
@media (max-width: 860px) {
  .titlebar { flex-direction: column; gap: 12px; }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  .page { padding: 16px 16px 32px; }
  .site-head { flex-wrap: wrap; gap: 4px; }
  .site-head .leader { display: none; }
  .head-right { text-align: left; width: 100%; }
  .brand { font-size: 32px; }
  .h1 { font-size: 24px; }
  .passage-text { font-size: 19px; }
  .about { padding: 24px; }
  .about-title { font-size: 24px; }
  .about-body p { font-size: 16px; }

  /* Narrower column wraps quotes further, so allow a third line and a taller
     row — the reserved block still keeps the pager still. */
  .d-list { --d-row: 86px; --d-gap: 20px; }
  .d-item a { -webkit-line-clamp: 3; line-clamp: 3; }

  /* 100px side padding would leave ~158px of text on a 390px screen. */
  .about-block { padding: 24px 20px; margin: 20px auto; }

  /* Feed rows stack: politician on one line (avatar beside name), quote below. */
  .home-page { padding-top: 24px; }
  .home-head { margin-bottom: 24px; }
  .brand.big { font-size: 38px; }
  /* align-items governs the HORIZONTAL axis once this is a column, and the
     desktop rule above sets it to center — which centred each .feed-side as a
     unit, so the avatar landed at a different x on every row depending on how
     long that politician's credentials were. Stretch, as .main does at 1024. */
  .feed-item { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 0; }
  .feed-side {
    flex-basis: auto;
    display: flex; align-items: center; gap: 12px;
    text-align: left;
  }
  .feed-avatar { width: 56px; height: 56px; margin: 0; flex: none; }
  .feed-quote { font-size: 17px; }
}