:root {
  --red: #c0392b;
  --amber: #e67e22;
  --green: #27ae60;
  /* UNSCORED (see RAGCategory's own docstring) — deliberately not red/amber/green,
     since it isn't a real verdict outcome on the same scale, and not the heatmap's own
     grey "pending" either, since this one *has* been judged, just has nothing to score. */
  --unscored: #1a1a1a;
  /* Sampled from the logo/favicon, kept deliberately separate from --green above: that
     one means "answered well" on a verdict, this one is the site's own identity. Reusing
     one colour for both would make a brand accent look like a RAG signal (or vice versa)
     wherever they ended up near each other. */
  --brand-navy: #000f1b;
  --brand-navy-light: #1b2e42;
  /* Without this (and an explicit body background below), a browser with a dark OS
     preference applies its own heuristic dark-mode repaint on top of this page's own
     colours — confirmed live: Chrome was washing out the header's text against its own
     auto-dark background. This tells the browser the page already handles its own
     colours, so it leaves them alone. */
  color-scheme: light;
}

body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
/* header itself spans the full width for its border/background; .header-inner is the
   part that's actually constrained, same pattern as .search-bar/.search-bar form below —
   without it, the logo and nav ran all the way to the screen edge on a wide viewport
   while the rest of the page stayed capped at main's 800px. */
header { border-bottom: 1px solid #ddd; padding: 1rem 2rem; }
.header-inner { max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.brand { font-weight: 700; text-decoration: none; color: inherit; }
.brand-logo { display: block; height: 52px; width: auto; }
main { max-width: 800px; margin: 0 auto; padding: 1rem 2rem; }

/* Hidden on wide screens — the nav links show inline instead (see nav rules below). */
.nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; margin-left: auto; background: none; border: none; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 100%; background: #1a1a1a; border-radius: 1px; }

/* Scoped to .rag-badge specifically, not bare .rag-red/.rag-amber/.rag-green — those
   modifier classes are reused on .result (border-left colour only) and .rag-box (its own
   small-square fill), and an unscoped rule here was bleeding its background onto both of
   those (confirmed live: a .result.rag-green card was rendering as a solid green block,
   not a card with a green left border). */
.rag-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; color: #fff; font-size: 0.75rem; font-weight: 700; }
.rag-badge.rag-red { background: var(--red); }
.rag-badge.rag-amber { background: var(--amber); }
.rag-badge.rag-green { background: var(--green); }
.rag-badge.rag-unscored { background: var(--unscored); }
.status-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; background: #7f8c8d; color: #fff; font-size: 0.75rem; margin-left: 0.25rem; }
/* Marks a hybrid-search result that was surfaced by semantic similarity rather than
   containing the visitor's literal words (see routes.search._hybrid_results) — a
   distinct colour from the plain grey .status-badge so it doesn't read as a verdict
   fact (like DEFERRED) but as "why this result is here". */
.status-badge-semantic { background: #2c7fb8; }
.date { color: #666; font-size: 0.85rem; margin-left: 0.5rem; }

.results { list-style: none; padding: 0; }
.result { border-left: 4px solid #ddd; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.result.rag-red { border-left-color: var(--red); }
.result.rag-amber { border-left-color: var(--amber); }
.result.rag-green { border-left-color: var(--green); }
.result.rag-unscored { border-left-color: var(--unscored); }
/* The whole card is one link; without this it renders as one giant underlined,
   browser-default-blue block of text, badges included, which reads as messy rather
   than as a card with a clickable question inside it. */
.result a { text-decoration: none; color: inherit; display: block; }
/* Scoped to "inside the link" specifically, not every .question-text in a .result — on
   debate_detail.html the text sits outside the card's own <a> (see _expandable.html), so
   it isn't part of the clickable card and shouldn't look underlined like it is. */
.result a .question-text { text-decoration: underline; text-decoration-color: #ccc; }
.result a:hover .question-text { text-decoration-color: currentColor; }

table.breakdown { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.breakdown th, table.breakdown td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; vertical-align: top; }

nav a { margin-right: 1rem; color: inherit; text-decoration: none; font-size: 0.9rem; }
nav a:hover { text-decoration: underline; }

/* Below this width the nav links collapse behind the hamburger button (nav.js toggles
   .open), so the header never has to squeeze brand + four links onto one line on a
   phone. The search bar lives outside <header> entirely (see .search-bar) so it isn't
   part of this collapse at all — it's a permanent fixture, not a menu item. */
@media (max-width: 700px) {
  .nav-toggle { display: flex; order: 2; }
  .brand { order: 1; }
  #site-nav {
    order: 3;
    display: none;
    flex-direction: column;
    flex-basis: 100%;
    border-top: 1px solid #ddd;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  #site-nav.open { display: flex; }
  #site-nav a { margin-right: 0; padding: 0.5rem 0; }
}

/* A permanent, deliberately prominent fixture below the header on every page — search
   is the primary way into the site's content now that it's off the nav listing (see
   base.html), so it gets a styled row of its own rather than living quietly in a
   corner of the header. */
.search-bar { background: #f0f4f8; border-bottom: 1px solid #ddd; padding: 0.85rem 2rem; }
.search-bar form { max-width: 800px; margin: 0 auto; display: flex; gap: 0.5rem; }
.search-bar input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #bbc7d1; border-radius: 4px; font-size: 1rem; }
.search-bar button { padding: 0.5rem 1.25rem; border: none; border-radius: 4px; background: var(--brand-navy); color: #fff; font-size: 1rem; cursor: pointer; }
.search-bar button:hover { background: var(--brand-navy-light); }
/* The quick bar above is keyword-only (see search.search_all's query_text ilike clause) —
   this points anyone who wants the government/department/asker/date filters at the one
   page that actually has them, rather than implying the bar itself searches on those. */
.advanced-search-link { display: block; max-width: 800px; margin: 0.4rem auto 0; font-size: 0.85rem; color: #555; text-decoration: none; }
.advanced-search-link:hover { text-decoration: underline; }

.asker { color: #555; font-size: 0.85rem; font-weight: 600; margin-left: 0.5rem; }
/* Asker + department on a listing card — a second line under the badges/score/date row,
   not crammed inline with them, since both can be present at once and inline would wrap
   unpredictably across cards of very different widths (see the home-section grid below). */
.result-meta { display: block; color: #555; font-size: 0.85rem; margin-top: 0.2rem; }

.debate-list { list-style: none; padding: 0; }
.debate-card { border: 1px solid #ddd; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.debate-card a { text-decoration: none; color: inherit; display: block; }
.debate-card a:hover h2 { text-decoration: underline; }
.debate-card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.debate-summary { margin: 0.5rem 0; color: #333; }

.debate-context { background: #f7f7f7; border-radius: 6px; padding: 1rem 1.25rem; margin: 1rem 0; }
.debate-context h2 { margin-top: 0; font-size: 1rem; }

/* One small box per question in a debate — a quick heatmap of how it went, rather than
   an aggregate count, so the shape of the exchange (e.g. green-green-red) is visible
   at a glance on the listing page. */
.rag-heatmap { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.rag-box { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.rag-box.rag-red { background: var(--red); }
.rag-box.rag-amber { background: var(--amber); }
.rag-box.rag-green { background: var(--green); }
.rag-box.rag-unscored { background: var(--unscored); }
.rag-box.rag-pending { background: #ccc; }

footer { border-top: 1px solid #ddd; padding: 1.5rem 2rem; margin-top: 2rem; color: #888; font-size: 0.85rem; }
.footer-inner { max-width: 800px; margin: 0 auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-links a { color: #888; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* The written-questions RAG filter links — plain text links, left unstyled until now
   (confirmed live: rendered as default blue underlined text, unlike everything else on
   the page). Colour-coded to match the badges they filter by, same visual language as
   the rest of the site rather than generic hyperlink styling. */
.rag-filters { margin-bottom: 1rem; }
.rag-filters a { margin-right: 1rem; text-decoration: none; font-weight: 600; color: #555; }
.rag-filters a:hover { text-decoration: underline; }
.rag-filters a.rag-red { color: var(--red); }
.rag-filters a.rag-amber { color: var(--amber); }
.rag-filters a.rag-green { color: var(--green); }

.type-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--brand-navy); color: #fff; font-size: 0.7rem; font-weight: 700; margin-right: 0.25rem; text-transform: uppercase; }

/* The "what am I looking at" strip on an individual item page — a type-badge plus a
   trail back up to that type's listing (and, one level further, the session it belongs
   to, for anything that sits inside one). */
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.9rem; }
.breadcrumb a { color: #555; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #bbb; }

/* The /search advanced-filter panel: structured-column filters (government, department,
   asker, responder, date range) kept visually distinct from the plain keyword search bar
   above — narrowing results by who/what/when is a different action from typing a phrase. */
.filters { background: #f7f7f7; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.filters-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.filters-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #444; flex: 1; min-width: 160px; position: relative; }

/* Member-name typeahead dropdown (member_autocomplete.js) — positioned against its
   label, the nearest ancestor with position set, so it sits right under whichever
   input it belongs to regardless of where that input is on the page. */
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  margin: 2px 0 0; padding: 0.25rem 0; list-style: none;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-height: 220px; overflow-y: auto;
}
.autocomplete-list li { padding: 0.4rem 0.75rem; font-size: 0.9rem; font-weight: 400; color: #1a1a1a; cursor: pointer; }
.autocomplete-list li:hover, .autocomplete-list li.active { background: #f0f4f8; }
.filters-row input, .filters-row select { font: inherit; font-size: 0.95rem; padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.filters-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filters-actions button { padding: 0.5rem 1.25rem; border: none; border-radius: 4px; background: var(--brand-navy); color: #fff; font-size: 0.95rem; cursor: pointer; }
.filters-actions button:hover { background: var(--brand-navy-light); }
.filters-actions a { font-size: 0.9rem; color: #555; }
/* Points from a listing page's basic row (RAG/government/department only) to /search's
   full filter set, so it reads as "more options elsewhere" rather than another action
   alongside Apply/Clear. */
.filters-actions a.more-filters { margin-left: auto; }

.hero { background: #f0f4f8; border-radius: 8px; padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.hero h1 { margin: 0.5rem 0 0.25rem; font-size: 1.5rem; }
.hero h1 a { color: inherit; text-decoration: none; }
.hero-summary { margin: 0.75rem 0 0; color: #333; }
.hero-badges { display: flex; align-items: center; gap: 0.4rem; }
/* Marks this as the editorially-featured pick, distinct from the type-badge next to it
   (which just labels what kind of session it is). */
.badge-highlight { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; background: #f1c40f; color: #4d3800; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.hero .rag-heatmap { margin-top: 1rem; }
.hero-cta { display: inline-block; margin-top: 1.25rem; padding: 0.5rem 1.25rem; border-radius: 4px; background: var(--brand-navy); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.hero-cta:hover { background: var(--brand-navy-light); }

.home-section { margin-bottom: 2rem; }
.home-section h2 { font-size: 1.1rem; border-bottom: 1px solid #eee; padding-bottom: 0.4rem; }
.see-more { display: inline-block; margin-top: 0.25rem; font-size: 0.9rem; }
/* Homepage listings as a card grid rather than a full-width stack — auto-fill lets a
   section like "Best of the month" flow several cards per row on a wide screen and drop
   to one column on a phone, with no separate breakpoint needed. Only .home-section's own
   lists get this treatment; the long filterable listings (search.html, search_all.html)
   stay a single scannable column. */
.home-section .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.home-section .result {
  border-top: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  border-left-width: 4px;
  border-radius: 6px;
  margin-bottom: 0;
  padding: 0.85rem 1rem;
  background: #fff;
}
/* Listing cards are meant to be scanned quickly — a Statement response or a long Oral
   supplementary can otherwise run to a full speech, dwarfing every other card. Applied
   wherever a card shows raw question text rather than a generated summary. */
.question-text.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* A ~200-word excerpt + inline "Show more"/"Show less" toggle (see _expandable.html,
   expand_toggle.js) — debate_detail.html only, where a reader scans many long blocks of
   verbatim speech in one sitting and clicking through to each one's own page just to
   read the rest (then back) adds up in a way it doesn't on a single-item listing card. */
.expandable { margin-top: 0.4rem; }
.expand-toggle {
  display: inline-block; margin-top: 0.3rem; padding: 0; border: none; background: none;
  color: var(--brand-navy); font: inherit; font-size: 0.85rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.expand-toggle:hover { color: var(--brand-navy-light); }

.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.95rem; }
.flash-success { background: #eafaf0; color: #1e7a42; border: 1px solid #b7e6c7; }
.flash-error { background: #fdecea; color: #a33a2f; border: 1px solid #f3c6c0; }

/* Shared by the question-feedback box and the standalone contact form — a plain stacked
   form, no grid of filters here, just message -> optional email -> CAPTCHA -> submit. */
.feedback-box { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.contact-form, .feedback-box form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 500px; }
.contact-form textarea, .feedback-box textarea,
.contact-form input, .feedback-box input { font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; }
.contact-form button, .feedback-box button, .recaptcha-gate button {
  align-self: flex-start; padding: 0.5rem 1.25rem; border: none; border-radius: 4px;
  background: var(--brand-navy); color: #fff; font-size: 0.95rem; cursor: pointer;
}
.contact-form button:hover, .feedback-box button:hover, .recaptcha-gate button:hover { background: var(--brand-navy-light); }

.recaptcha-gate { max-width: 500px; padding: 1rem 1.25rem; border: 1px solid #dde3ea; border-radius: 6px; background: #f5f7fa; }
.recaptcha-gate p { margin-top: 0; }
.recaptcha-gate form { margin: 0; }

.result.reviewed { opacity: 0.55; }

/* Steps through a debate session's own questions in seq order — lets a reader progress
   through, say, every round of the Leader of the Opposition's exchange at PMQs without
   going back to the session listing each time. Written questions have no seq-ordered
   session to step through, so this never appears on one. */
.question-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; font-size: 0.9rem; }
.question-nav a { color: #444; text-decoration: none; }
.question-nav a:hover { text-decoration: underline; }
.question-nav-next { margin-left: auto; text-align: right; }

/* Deliberately not red/amber/green (that's reserved for the RAG verdict) and not the
   brand navy (that's structural chrome) — a distinct colour per rhetorical-style
   category, all visually grouped as "this axis", so a reader can tell point-scoring and
   vibes apart at a glance without them being confused for RAG or structural UI. Hidden
   entirely at 0%, so a page with nothing to flag stays quiet (see rhetorical_style_pct).
   Add a rule here (and a tuple entry in question.html's rhetorical_badges macro) for any
   further category. */
.rhetorical-badge { display: inline-block; margin-top: 0.4rem; margin-right: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 4px; color: #fff; font-size: 0.75rem; font-weight: 700; }
.rhetorical-badge-point_scoring { background: #7d5ba6; }
.rhetorical-badge-vibes { background: #2e8b8b; }

.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; font-size: 0.9rem; }
.pagination a { color: var(--brand-navy); text-decoration: none; font-weight: 600; }
.pagination a:hover { text-decoration: underline; }
.pagination-disabled { color: #bbb; }
.pagination-page { color: #666; }

.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 0.85rem 1.25rem; background: var(--brand-navy); color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
.cookie-notice p { margin: 0; flex: 1 1 320px; font-size: 0.9rem; }
.cookie-notice a { color: #fff; text-decoration: underline; }
.cookie-notice form { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.cookie-notice button {
  flex: 0 0 auto; padding: 0.5rem 1.25rem; border: none; border-radius: 4px;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--brand-navy);
}
.cookie-notice button:hover { background: #eee; }
.cookie-notice-reject {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cookie-notice-reject:hover { background: rgba(255, 255, 255, 0.1); }