/* Contributions Pagination */
/* --- Pagination --- */
.paginator {
  max-width: 1200px;
  margin: 0 auto;
  height: 5vh;
}

.pagination-container {
  width: 100%;
}

.pagination {
  display: flex;
  flex: 0 1 100%;
  justify-content: center;
  line-height: 1.6rem;
  font-weight: 400;
  font-size: 1.4rem;
  list-style: none;
  padding: 0.5rem 0;
}

.pagination hr {
  margin-bottom: 0.5rem;
}

.pagination-link--previous,
.pagination-link--next {
  font-weight: 700;
}

.pagination a {
  color: black;
}

.pagination a:hover {
  color: white;
  background-color: var(--colour-secondary);
  transition: 0.2s;
  cursor: pointer;
}

.pagination a.page_label:hover {
  background-color: white;
}

.pagination li.active,
.pagination a.live {
  height: 2.5rem;
  text-align: center;
  margin: 0 0.2em;
}

.pagination svg {
  width: 1.5em;
  height: 1.66em;
  margin: 0 0.25em;
}

.pagination .enabled {
  fill: var(--colour-secondary);
}

.pagination .number_box {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem 0;
  text-align: center;
  background-color: #cdc;
  text-decoration: none;
  float: left;
  margin: 0 0.25rem;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.4s;
}

.pagination .number_box:hover {
  background-color: var(--colour-secondary);
}

.pagination .number_box:hover a {
  color: white;
}

.pagination .active_number_box {
  width: 2.5rem;
  padding: 0.5rem 0;
  color: white;
  text-align: center;
  background-color: var(--colour-secondary);
  float: left;
  margin-right: 1.25rem;
  border-radius: var(--radius);
  transition: 0.4s;
}

.pagination .active {
  background-color: var(--colour-secondary);
}

.pagination li.active_ellipses a {
  text-decoration: none;
}

.pagination .disabled {
  display: none;
}

/* Chevron page controls (replaces the old VCR-style play-triangle SVGs) */
.pagination .page_chevron {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--colour-primary);
  text-decoration: none;
}
.pagination .page_chevron:hover {
  background-color: var(--colour-primary);
  color: #fff;
  border-radius: var(--radius);
}
.pagination .page_chevron.is-disabled {
  color: var(--colour-light);
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .contributions-pagination .page-link {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
}

/* Topical Contributions Styling */
.topical-contribution-item {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  transition: box-shadow 0.2s;
}

.topical-contribution-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Conversation Context Header */
.contribution-conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.conversation-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.conversation-type-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #467e7a;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius);
  letter-spacing: 0.5px;
}

.conversation-title {
  font-weight: 600;
  color: #2d3748;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
}

.conversation-title:hover {
  color: var(--colour-secondary);
  text-decoration: underline;
}

.contribution-meta-header {
  font-size: 0.85rem;
  color: #718096;
  white-space: nowrap;
}

/* Role, Intent, and Stance Indicators */
.contribution-indicators {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.role-badge,
.intent-badge,
.stance-badge {
  display: inline-block;
  padding: 0.5rem 0.75rem 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius);
  line-height: 1;
}

/* Role Badge Colors */







/* Contributions List */
.contributions-holder {
  margin: 0.25rem 0 1rem;
}

div.activity-section p {
  margin-bottom: 0.5rem;
}

.contributions-info {
  margin-left: 0.5rem;
  color: var(--colour-secondary-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  background: #e9f9e9;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--colour-secondary-light);
}

.contributions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contributions--list-icon {
  font-size: 1.6em;
  margin-left: 1em;
  transition: transform 0.1s;
  cursor: pointer;
  color: var(--colour-primary);
}

.contributions--list-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid var(--colour-secondary);
  text-transform: uppercase;
  color: var(--colour-secondary);
}

.contributions--list-icon.open {
  transform: rotate(45deg);
  color: var(--colour-secondary);
}

.contribution-text-link .contribution-text:hover {
  color: var(--colour-secondary);
}

.contributions--list-text {
  max-height: 26rem;
  overflow: hidden;
  transition:
    max-height 0.4s ease-out,
    padding 0.4s ease-out;
  padding-top: 0;
}

.contributions--list-text.active {
  /* max-height set dynamically via JavaScript based on actual content height */
  padding-top: 0.5em;
  transition:
    max-height 0.5s ease-in,
    padding 0.3s ease-in;
}

.contribution-item {
  background: white;
  border-radius: 0.5rem;
  padding: 0 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}

.contribution-item:hover {
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--colour-secondary);
}

/* Presiding-officer speech: shown for the record but not counted in the
   metrics. De-emphasised, with a left rule and an "As Speaker / Chair" badge so
   it reads as set-apart from the member's own contributions. */
.contribution-item--presiding {
  background: var(--colour-surface-2, #f7f7f9);
  border-left: 3px solid var(--colour-border, #d6d6db);
  opacity: 0.85;
}
.presiding-badge {
  background-color: var(--colour-surface-2, #ececed);
  color: var(--colour-text-muted, #6b6b72);
  border: 1px solid var(--colour-border, #d9d9de);
  font-style: italic;
}

.contribution-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
}

.contribution-date {
  font-weight: 600;
  color: hsl(210, 9%, 15%);
}

.contribution-doc {
  color: hsl(210, 9%, 15%);
  flex: 1;
  font-style: italic;
  font-weight: 500;
}

.contribution-text {
  color: var(--colour-secondary-dark);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.contribution-text-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

@media screen and (max-width: 768px) {
  .contribution-item {
    padding: 0.875rem;
  }

  .contribution-meta {
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  .contribution-text {
    font-size: 0.9rem;
  }
}

/* Topic Tags */
.contribution-topics {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.topic-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1.5px solid #cbd5e0;
  background-color: #f7fafc;
  color: #2d3748;
  line-height: 1;
  transition: all 0.2s;
}

.topic-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Contribution Text */
.contribution-text-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.contribution-text {
  margin: 0.75rem 0;
  line-height: 1.6;
  color: #2d3748;
  font-size: 0.95rem;
}

.contribution-text-link:hover .contribution-text {
  color: #1a202c;
  background-color: #f7fafc;
  border-radius: var(--radius);
  transition: all 0.2s;
}

/* Novel Elements and Asks */
.contribution-novel-elements,
.contribution-asks {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: #f7fafc;
  border-left: 3px solid #4299e1;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.contribution-asks {
  border-left-color: #ed8936;
}

.contribution-novel-elements strong,
.contribution-asks strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #2d3748;
  font-size: 0.85rem;
}

.contribution-novel-elements ul,
.contribution-asks ul {
  margin: 0;
  padding-left: 1.5rem;
}

.contribution-novel-elements li,
.contribution-asks li {
  margin-bottom: 0.35rem;
  color: #4a5568;
  line-height: 1.5;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .contribution-conversation-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .contribution-meta-header {
    align-self: flex-start;
  }

  .conversation-type-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }

  .contribution-indicators {
    gap: 0.35rem;
  }

  .role-badge,
  .intent-badge,
  .stance-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }

  .topic-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@media screen and (max-width: 480px) {
  .topical-contribution-item {
    padding: 0.75rem;
  }

  .conversation-title {
    font-size: 0.9rem;
  }

  .contribution-text {
    font-size: 0.9rem;
  }

  .contribution-novel-elements,
  .contribution-asks {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

/* Grouped Contributions Styling */
.contribution-group {
  border: 2px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 0.5rem;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.contribution-group:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Group Header (Date + Topic) */
.contribution-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 3px solid #edf2f7;
}

.group-date-topic {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.group-date {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3748;
  letter-spacing: 0.3px;
}

.topic-badge-large {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
}

.group-count {
  font-size: 0.85rem;
  color: #819E8D;
  font-weight: 500;
  background-color: var(--colour-secondary-alpha-10);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* Presiding-officer groups carry no counted interventions; label the run as
   presiding activity instead of a contradictory "0 contributions". */
.group-count--presiding {
  color: var(--colour-text-muted, #555);
  background-color: var(--colour-surface-2, #eef0f3);
  font-style: italic;
}



/* Grouped contribution items (nested within group) */
.grouped-contribution {
  margin-bottom: 1.25rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background-color: #fafafa;
}

.grouped-contribution:last-child {
  margin-bottom: 0;
}

.grouped-contribution:hover {
  background-color: #f7fafc;
  border-color: #cbd5e0;
}

/* Remove date from individual contribution headers in groups */
.grouped-contribution .contribution-meta-header {
  display: none;
}

/* Responsive adjustments for grouped contributions */
@media screen and (max-width: 768px) {
  .contribution-group {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .contribution-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .group-date-topic {
    gap: 0.75rem;
  }

  .group-date {
    font-size: 1rem;
  }

  .topic-badge-large {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  .group-count {
    align-self: flex-start;
  }

  .grouped-contribution {
    padding: 0.75rem;
  }
}

@media screen and (max-width: 480px) {
  .contribution-group {
    padding: 0.75rem;
  }

  .group-date {
    font-size: 0.95rem;
  }

  .topic-badge-large {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }

  .group-count {
    font-size: 0.8rem;
  }

  .grouped-contribution {
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
}

/* Conversation Sub-groups (within date+topic groups) */
.conversation-subgroup {
  padding: 1rem 0;
  background-color: #f9fafb;
  border-radius: var(--radius);
}

.conversation-subgroup:last-child {
  margin-bottom: 0;
}

/* Conversation Sub-group Header */
.conversation-subgroup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.conversation-subgroup-header .conversation-info {
  flex: 1;
}

.conversation-subgroup-header .conversation-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
}

.conversation-contrib-count {
  font-size: 0.8rem;
  color: #718096;
  font-weight: 500;
  background-color: #e2e8f0;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* Contributions within conversation subgroups */
.conversation-subgroup .grouped-contribution {
  background-color: #ffffff;
  border: 1px solid var(--colour-border);
  margin-bottom: 0.75rem;
}

.conversation-subgroup .grouped-contribution:last-child {
  margin-bottom: 0;
}

.conversation-subgroup .grouped-contribution:hover {
  background-color: #fafafa;
  border-color: #cbd5e0;
}

/* Responsive adjustments for conversation subgroups */
@media screen and (max-width: 768px) {
  .conversation-subgroup {
    padding: 0.75rem;
  }

  .conversation-subgroup-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .conversation-subgroup-header .conversation-title {
    font-size: 0.95rem;
  }

  .conversation-contrib-count {
    align-self: flex-start;
  }
}

@media screen and (max-width: 480px) {
  .conversation-subgroup {
    padding: 0.5rem;
    margin-bottom: 1rem;
  }

  .conversation-subgroup-header .conversation-title {
    font-size: 0.9rem;
  }

  .conversation-contrib-count {
    font-size: 0.75rem;
  }
}

/* Legislative Bills Section */
.legislative-bills {
  margin: 2rem 0;
}

.bills-summary {
  font-size: 1.1rem;
  color: #333;
}

.bills-container {
  margin: 0.25rem 0 1rem;
}

.bills-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bill-item {
  padding: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--colour-border);
  transition: box-shadow 0.3s ease;
}

.bill-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bill-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.bill-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #467e7a;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.bill-year {
  background: #467e7a;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.bill-stage,
.bill-notes {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

.bill-stage strong,
.bill-notes strong {
  color: #333;
  font-weight: 600;
}

.bill-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  font-size: 0.875rem;
  color: #6c757d;
  gap: 1rem;
  flex-wrap: wrap;
}

.bill-period {
  font-weight: 500;
  color: #495057;
}

.bill-updated {
  font-style: italic;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .bill-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bill-year {
    align-self: flex-start;
  }

  .bill-name {
    font-size: 1.1rem;
  }

  .bill-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media screen and (max-width: 480px) {
  .bill-item {
    padding: 1rem;
  }

  .bill-name {
    font-size: 1rem;
  }

  .bills-summary {
    font-size: 1rem;
  }
}

/* ── Member performance scorecard widget (computed) ── */
.member-scorecard { border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--colour-bg); }
.member-scorecard__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.member-scorecard__grade { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--colour-primary); border: 3px solid currentColor; border-radius: 8px; padding: .2rem .6rem; }
/* Grade colour reflects performance — a low score should not read as a brand-red
   "error". A/B green, C amber, D/E/F red. */
.member-scorecard__grade--a,
.member-scorecard__grade--b { color: var(--colour-secondary); }
.member-scorecard__grade--c { color: #B8860B; }
.member-scorecard__grade--d,
.member-scorecard__grade--e,
.member-scorecard__grade--f { color: var(--colour-primary); }
.member-scorecard__head a { color: var(--colour-primary); }
.member-scorecard__row { margin-bottom: .7rem; }
.member-scorecard__label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .25rem; color: var(--colour-text); font-weight: 600; }
.member-scorecard__bar { height: 12px; background: var(--colour-bg-subtle); border-radius: 6px; overflow: hidden; }
.member-scorecard__bar > span { display: block; height: 100%; background: var(--colour-secondary); border-radius: 6px; }

/* Accountability panels — Declarations of Interest + Kenya Gazette mentions.
   See data-pull audit (workflow wmubc0idq) Conflict-of-Interest Graph pattern. */
.accountability-panel { margin: var(--space-5, 24px) 0; padding: var(--space-4, 16px);
  background: #fff; border: 1px solid var(--colour-border); border-radius: 8px;
  border-top: 4px solid var(--colour-primary); }
.accountability-panel__head { margin-bottom: var(--space-3, 12px); }
.accountability-panel__head h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.accountability-panel__sub { margin: 0; font-size: .85rem; color: var(--colour-text-mute, #6b6157); }
.accountability-panel__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.accountability-panel__item { padding: .65rem .85rem; background: #fafaf5; border: 1px solid var(--colour-border); border-radius: 6px; }
.accountability-panel__row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; font-size: .85rem; margin-bottom: .35rem; }
.accountability-panel__badge { display: inline-block; padding: .15rem .55rem; background: var(--colour-primary-alpha-10, #fbeaec);
  color: var(--colour-primary); border-radius: var(--radius-lg); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.accountability-panel__when { color: var(--colour-text-mute, #6b6157); }
.accountability-panel__amt { font-weight: 700; }
.accountability-panel__ref { color: var(--colour-text-mute, #6b6157); font-family: monospace; font-size: .8rem; }
.accountability-panel__desc { margin: 0 0 .35rem; line-height: 1.45; }
.accountability-panel__note { margin: 0; font-size: .9rem; color: var(--colour-text-mute, #6b6157); }
.provenance { margin: .5rem 0 0; font-size: .75rem; color: var(--colour-text-mute, #6b6157); }
.provenance__verb, .provenance__against { opacity: .85; }
.provenance__when { font-weight: 600; }
.provenance__source { color: var(--colour-primary); text-decoration: underline; }

.empty-state { padding: var(--space-3, 12px) var(--space-4, 16px);
  background: #fafaf5; border: 1px dashed var(--colour-border); border-radius: 6px;
  color: var(--colour-text-mute, #6b6157); }
.empty-state__title { margin: 0 0 .35rem; font-size: 1rem; color: var(--colour-text, #272525); }
.empty-state__body { margin: 0 0 .55rem; font-size: .9rem; line-height: 1.45; }
.empty-state__cta { font-weight: 600; color: var(--colour-primary); }
.accountability-panel__role { margin: 0 0 .35rem; font-size: .85rem; color: var(--colour-text, #272525); }
.accountability-panel__excerpt { margin: .5rem 0; padding: .55rem .8rem;
  background: #fff; border-left: 3px solid var(--colour-primary);
  font-style: italic; font-size: .9rem; line-height: 1.5;
  color: var(--colour-text, #272525); }

/* === WS-A: Tabbed MP/Senator profiles === */
/* Reuse components.css .tabs / .tabs a / .tabs a.is-active for the bar; drive
   panel visibility with :target (works JS-off), JS only syncs .is-active. */
.profile-tabs .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-panel { display: none; }
.tab-panel:target { display: block; }
.tab-panel#tab-overview { display: block; }
.profile-tabs:has(.tab-panel:target) .tab-panel#tab-overview:not(:target) { display: none; }
.tabs .count { font-size: var(--text-xs); color: var(--colour-text-muted); }

/* Hero cross-link button to the member's legislative business. */
.profile-hero__cta { margin: 0.9rem 0 0; }
.mp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--colour-secondary);
  border-radius: var(--radius-pill);
  color: var(--colour-secondary-dark);
  font-weight: 700;
  text-decoration: none;
}
.mp-cta-btn:hover { background: var(--colour-secondary); color: var(--colour-bg); }

/* "Enacted into law" chip on the profile Acts tab (Bills that reached assent). */
.status-chip--enacted { background: var(--colour-secondary); color: var(--colour-bg); border-color: var(--colour-secondary); }

/* Right-rail widgets (activity sparkline + policy focus). */
.rail-widget { margin-top: 0; margin-bottom: var(--space-5); }
.rail-widget__title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--colour-text-muted); margin: 0 0 var(--space-2); }

/* Activity + Policy Focus: a full-width 2-column summary row (was a slim rail
   where the two widgets stacked and looked cramped). */
.member-rail-row { margin: var(--space-4) auto var(--space-2); }
.rail-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.rail-widgets .rail-widget {
  margin: 0;
  background: var(--colour-bg-subtle, #f8f8f8);
  border: 1px solid var(--colour-border, #e3e3e3);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4) var(--space-5);
}
.member-info--full { flex: 1 1 100%; width: 100%; min-width: 0; }
@media (max-width: 700px) {
  .rail-widgets { grid-template-columns: 1fr; }
}
.sparkbars { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
.sparkbars__bar { flex: 1; min-height: 2px; background: var(--colour-primary); border-radius: 2px 2px 0 0; opacity: .85; }
.policy-focus { list-style: none; padding: 0; margin: 0; }
.policy-focus li { margin-bottom: var(--space-3); }
.policy-focus__row { display: flex; justify-content: space-between; font-size: var(--text-sm); }

/* ==========================================================================
   DECLUTTER REDESIGN — member / senator profile (Phase: spacious, organized)
   On-brand tokens only (var(--colour-primary) #d21218, --colour-secondary
   #009f57, Montserrat). Goal: generous whitespace, one card system, one
   heading style, a clean scrollable tab bar, and a tidy identity header.
   ========================================================================== */

/* ---- Consistent card system ------------------------------------------- */
.profile-card {
  background: var(--colour-bg, #fff);
  border: 1px solid var(--colour-border, #e3e3e3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-5);
  margin: 0 0 var(--space-5);
}
.profile-card:last-child { margin-bottom: 0; }

/* ---- One section-heading style (Title Case, no UPPERCASE shouting) ----- */

/* ---- Identity / profile header ("hero") card -------------------------- */
.profile-hero {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--space-6);
  align-items: start;
  background: var(--colour-bg, #fff);
  border: 1px solid var(--colour-border, #e3e3e3);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--colour-primary);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-4) 0 var(--space-6);
}
.profile-hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  background: var(--colour-bg-subtle, #f6f6f6);
}
/* `container-type: inline-size` makes this the query container for the stat-card
   row below (see the @container block after the 560px media query). It is set
   HERE and on `main.member-info` because those are the two different parents the
   row lives in, and they have different widths at the same viewport — which is
   exactly why no viewport breakpoint can size that row correctly. Verified
   2026-08-18 that the containment moves nothing: 0 elements changed box on
   either view at 1440/900/560px, and neither container holds an absolutely,
   fixed or sticky positioned descendant that a new containing block could
   disturb. */
.profile-hero__body { min-width: 0; container-type: inline-size; }
.profile-hero__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--colour-primary);
}
.profile-hero__name {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--colour-text, #272525);
}

/* Key facts as a tidy labelled grid */
.profile-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--colour-border, #e3e3e3);
}
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--colour-text-muted, #6b6157);
}
.fact__value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--colour-text, #272525);
  overflow-wrap: anywhere;
}
.status-chip {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--colour-secondary-alpha-10, #e9f9f0);
  color: var(--colour-secondary-dark, #047a44);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}
/* Speaker / presiding officer treatment (not an ordinary member). */
.status-chip--speaker {
  background: var(--colour-surface-2, #eef0f3);
  color: var(--colour-text-muted, #555);
}
.profile-hero__role {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-md, 1rem);
  font-weight: 700;
  color: var(--colour-text-muted, #555);
}
.profile-note {
  margin: 0;
  color: var(--colour-text-muted, #555);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Headline stat row */
.profile-hero__stats {
  display: grid;
  /* Five cards render here since 2026-08-18 (Bills, Contributions, Committees,
     Questions, Petitions), plus a sixth Presiding tile for the two presiding
     officers; it previously carried only Contributions + Committees.
     auto-fit adapts to BOTH containers this row lives in — the full-width
     in-depth hero and the 67% `main.member-info` column — which no
     viewport-width breakpoint can do: at a 768px viewport the two containers
     are 730px and 560px wide, so they want a different number of columns.
     Known and ticketed (MZ-1072), NOT fixed here: auto-fit steps 5 -> 4
     columns, so container widths of ~535-648px render 4 cards and a ragged
     fifth. Measured bands, dev 2026-08-18: viewports 840-960px on the default
     view, 768px and 600-680px on the in-depth view. Removing that band needs
     the column count to skip 4 entirely, which is a container query, not a
     track floor — every auto-fit floor has a 4-column band of width floor+12.
     The phone case IS fixed, in the <=560px block below.
     The track floor is 120px, not the old 150px: the default profile renders
     this row inside `main.member-info` (67% of the container), where 150px
     tracks fit only 4 of the 5 cards on a 1024-1280px laptop and left a ragged
     single card on a second row. 5 x 120 + 4 x 12 gap = 648px, which the column
     clears from ~1024px up. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.hero-stat {
  margin: 0;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--colour-bg-subtle, #f8f8f8);
  border: 1px solid var(--colour-border, #e3e3e3);
  border-radius: 10px;
  /* now a clickable drill-down trigger: reset button chrome + affordance.
     The tiles are <a> elements (drawer.js preventDefaults, so the href stays
     the JS-off route to the full list) — display/colour/underline resets keep
     an anchor rendering exactly as the old <button> tile did. */
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: transform var(--motion-fast, .12s) var(--ease-standard, ease),
              box-shadow var(--motion-fast, .12s) var(--ease-standard, ease),
              border-color var(--motion-fast, .12s) var(--ease-standard, ease);
}
.hero-stat:hover {
  border-color: var(--colour-primary);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
  transform: translateY(-2px);
}
.hero-stat:hover .hero-stat__label { color: var(--colour-primary); }
/* Presiding turns are a FIGURE, not a drill-down: there is no per-turn list
   worth opening, and they are deliberately excluded from every score. Drop the
   button affordance so the tile does not promise an interaction it has not got,
   and mute the number so it never reads as a performance stat. */
.hero-stat--presiding {
  cursor: default;
  border-style: dashed;
}
.hero-stat--presiding:hover {
  border-color: var(--colour-border, #e3e3e3);
  box-shadow: none;
  transform: none;
}
.hero-stat--presiding:hover .hero-stat__label { color: var(--colour-text-muted, #6b6157); }
.hero-stat--presiding .hero-stat__num { color: var(--colour-text-muted, #6b6157); }
.hero-stat__num {
  display: block;
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--colour-primary);
}
.hero-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--colour-text-muted, #6b6157);
  font-weight: 600;
}
.profile-hero__link {
  display: inline-block;
  font-weight: 700;
  color: var(--colour-primary);
  text-decoration: none;
}
.profile-hero__link:hover { text-decoration: underline; }

/* ---- Two-column layout with generous gap; sidebar trimmed ------------- */
.member-container,
.senator-detail-container { gap: var(--space-6); align-items: start; }
/* The trailing space above the footer is now owned by `.site-content`'s
   `padding-bottom` (core.css) — this was the only page that had it, hand-rolled.
   Keeping both would give 96px here, because a flex item's margin adds to the
   parent's padding rather than collapsing into it. */
.member-container.container,
.senator-detail-container.container { margin-bottom: 0; }
aside.member-essentials { padding-right: 0; }

/* ---- Clean, horizontally-scrollable tab bar (never ugly-wraps) -------- */
.profile-tabs { position: relative; }
.profile-tabs .tabs {
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--colour-border-strong, #ccc) transparent;
  border-bottom: 2px solid var(--colour-border, #e3e3e3);
  margin: 0 0 var(--space-5);
  padding-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--colour-bg, #fff);
}
/* On narrow screens the horizontal-scroll tab strip hid Motions/Petitions/
   Questions/Statements/Papers behind a near-invisible 6px scrollbar — wrap the
   tabs onto multiple rows so every section is visible, and drop the sticky.
   The bound is 820px, not 768px, because the VERTICAL rail below starts at
   `min-width: 821px` — and 769-820px fell between the two, leaving the
   nowrap strip in charge. That band did not merely look wrong, it made the
   whole page scroll sideways (MZ-1088): `.senator-header` is a flex item of
   `.senator-detail-container` with `min-width: auto`, so it cannot shrink
   below the min-content of this 13-tab row, and it computed to 2027px against
   an 800px viewport. Measured 2026-08-18: overflow at 780 and 800, none at
   768 or 821+, and this one bound fixes it while leaving 768/900/1024
   byte-identical. `min-width: 0` on the header also stops the overflow, but
   it does so by handing the band back to a 6px scrollbar — the exact defect
   the comment above says this rule exists to prevent. */
@media (max-width: 820px) {
  .profile-tabs .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: .25rem;
    position: static;
  }
}
.profile-tabs .tabs::-webkit-scrollbar { height: 6px; }
.profile-tabs .tabs::-webkit-scrollbar-thumb {
  background: var(--colour-border-strong, #ccc); border-radius: 3px;
}
.profile-tabs .tabs a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--space-3) var(--space-3);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  color: var(--colour-text-muted, #6b6157);
}
.profile-tabs .tabs a:hover { color: var(--colour-primary); }
.profile-tabs .tabs a.is-active {
  color: var(--colour-primary);
  border-bottom-color: var(--colour-primary);
}
.profile-tabs .tabs a .count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 .45rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--colour-bg-subtle, #f1f1f1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--colour-text-muted, #6b6157);
}
.profile-tabs .tabs a.is-active .count {
  background: var(--colour-primary-alpha-10, #fbeaec);
  color: var(--colour-primary);
}

/* ---- Overview cards: bio gets air, term reads cleanly ---------------- */
.member-biography.profile-card .biography-content p {
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
/* Background card: Career / Education / Previous Parties as clean accent blocks */
.member-background { display: flex; flex-direction: column; gap: var(--space-5); }
.member-background > .section-heading { margin-bottom: var(--space-2); }
.bg-block {
  border-left: 3px solid var(--colour-primary);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
}
.bg-block__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--colour-text, #272525);
  text-transform: none;
}
.bg-block__body { color: var(--colour-text, #272525); }
.bg-block__body p { line-height: 1.7; margin: 0 0 var(--space-3); }
.bg-block__body p:last-child { margin-bottom: 0; }
.bg-block__body ul,
.bg-block__body ol { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); }
.bg-block__body li { line-height: 1.6; margin: 0 0 var(--space-2); }
.bg-block__body a { color: var(--colour-primary); font-weight: 600; }
.bg-block__body a:hover { text-decoration: underline; }
/* legacy fallback if the old heading class lingers anywhere */
.member-background--heading {
  font-size: var(--text-lg); font-weight: var(--fw-bold);
  margin: var(--space-5) 0 var(--space-3);
}
.member-background--heading:first-child { margin-top: 0; }
.profile-card .position-section p,
.profile-card .position-section { line-height: 1.7; }
.profile-card .highlight { font-weight: 600; color: var(--colour-text, #272525); }
.profile-card .emphasis { color: var(--colour-primary); font-weight: 600; }

/* Give the server-rendered scorecard breathing room inside its card */
.profile-card .member-scorecard { border: none; box-shadow: none; padding: 0; margin: 0; }

/* ---- Committee + legislative lists: row spacing, dividers, hover ------ */
.committee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.committee-list .committee-item {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--colour-border, #ececec);
  line-height: 1.6;
  border-radius: 6px;
  transition: background-color .15s ease;
}
.committee-list .committee-item:last-child { border-bottom: none; }
.committee-list .committee-item:hover { background: var(--colour-bg-subtle, #f8f8f8); }
.committee-list .committee-role {
  display: inline-block;
  font-weight: 700;
  color: var(--colour-secondary-dark, #047a44);
}
.committee-list .committee-dates {
  display: inline-block;
  margin-left: .4rem;
  font-size: var(--text-sm);
  color: var(--colour-text-muted, #6b6157);
}
/* Legislative-business lists (motions/petitions/questions/…): airier rows */
.leg-list .committee-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.leg-list .committee-item > a { font-weight: 600; }
.leg-list .role-badge {
  background: var(--colour-bg-subtle, #f1f1f1);
  color: var(--colour-text-muted, #6b6157);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill, 999px);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Bills + voting + contributions inside cards: tidy margins -------- */
.profile-card .legislative-bills { margin: var(--space-4) 0 0; }
.profile-card .bills-summary { font-size: var(--text-base); color: var(--colour-text-muted, #6b6157); margin: 0 0 var(--space-4); }
.profile-card .bill-item { padding: var(--space-4); }
.profile-card .contributions-holder { margin: 0; }
.profile-card .stat-grid { margin-bottom: var(--space-4); }
.profile-card .voting-summary { padding: 0; margin: var(--space-4) 0 var(--space-3); }
.profile-card .voting-summary h4 { margin: 0; }

/* ---- Contributions list: give the dense stack room to breathe -------- */
.contributions-list { gap: var(--space-4); }
.contribution-group { padding: var(--space-4); }
.conversation-subgroup { padding: var(--space-3) 0; }
.contribution-item { padding: var(--space-3) var(--space-4); }
.grouped-contribution { padding: var(--space-3) var(--space-4); }

/* ==========================================================================
   RESPONSIVE — sidebar stacks above main at ≤768px; nothing overflows at 360px
   ========================================================================== */
@media (max-width: 768px) {
  .member-container,
  .senator-detail-container { flex-direction: column; }
  .senator-header { display: flex; flex-direction: column; }
  aside.member-essentials,
  .member-info { flex: 0 1 100% !important; width: 100%; }
  aside.member-essentials { order: 1; }
  .member-info { order: 2; }

  .profile-hero { grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-4); }
  .profile-hero__name { font-size: var(--text-xl); }
}

@media (max-width: 560px) {
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero__photo { max-width: 160px; }
  .profile-hero__stats { grid-template-columns: repeat(2, 1fr); }
  /* Two columns and an ODD number of tiles leaves the last one alone at half
     width, which reads as a rendering fault rather than a card. Measured on dev
     2026-08-18: every phone width from 320 to 560px rendered 2+2+1 on both
     views. Stretch that final tile across the row so the run ends deliberately.
     `:nth-child(odd)` is load-bearing, not decoration — with an EVEN number of
     tiles (a presiding officer's default profile has four, having no
     Contributions card) the last tile completes its row, and stretching it
     turned a clean 2+2 into 2+1+1. Measured both ways before shipping.
     Three columns was tried first and rejected: CONTRIBUTIONS is one
     unbreakable 111px word, so three tracks overflow the grid below ~400px. */
  .profile-hero__stats > .hero-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .profile-card { padding: var(--space-4); }
  .profile-hero { padding: var(--space-4); }
}

@media (max-width: 360px) {
  .profile-hero__facts { grid-template-columns: 1fr; }
}

/* The stat-card row sizes against ITS OWN CONTAINER, not the viewport --------
   `main.member-info` is the second of the two parents (see `.profile-hero__body`
   above). Both are containers so the row can ask how much space IT has.

   Why this exists: `repeat(auto-fit, ...)` steps 5 -> 4 -> 3 columns, and the
   4-column step leaves a ragged fifth card. Measured 2026-08-18, that band was
   real on both views — viewports 840-960px on the default profile, 768px and
   600-680px on the in-depth one. No viewport breakpoint can fix it, because at
   a 768px viewport the two parents are 730px and 560px wide and want a
   different number of columns; and no track floor can fix it either, because
   every auto-fit floor `f` has a 4-column band `f + gap` wide. So the column
   count is stated outright and simply never 4: five, three, or two.

   The thresholds come from the widest label. CONTRIBUTIONS is one unbreakable
   word measuring 111px, plus 16px of card padding = 127px per card, so
   5 x 127 + 4 x 12 gap = 683px and 3 x 127 + 2 x 12 = 405px.

   The `auto-fit` declaration above stays as the fallback for anything without
   container queries; these rules come later and win where they are supported.
   The `grid-column: auto` reset is what stops the two from fighting: the 560px
   media block stretches the last tile for its 2-column layout, and without the
   reset that stretch survived into a 3-column row and produced 3+1+1 — measured,
   not hypothesised.

   Each band re-states which tile is the lonely one, because THAT DEPENDS ON THE
   COLUMN COUNT: a row of N orphans a run of `N x + 1` tiles. Five cards orphan
   at two columns, four cards orphan at three, six would orphan at five. Getting
   this wrong is not theoretical — the first version carried only the 2-column
   rule, and the presiding officer's four-tile profile came out `3+1` right
   across the 3-column band. The ranges do not overlap, so none of this depends
   on which block is written first; the `grid-column: auto` lines exist only to
   undo the 560px fallback's stretch, and match its specificity so they win on
   source order. */
main.member-info { container-type: inline-size; }
@container (max-width: 404px) {
  .profile-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero__stats > .hero-stat:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@container (min-width: 405px) and (max-width: 682px) {
  .profile-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-hero__stats > .hero-stat:last-child:nth-child(odd) { grid-column: auto; }
  .profile-hero__stats > .hero-stat:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@container (min-width: 683px) {
  .profile-hero__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .profile-hero__stats > .hero-stat:last-child:nth-child(odd) { grid-column: auto; }
  .profile-hero__stats > .hero-stat:last-child:nth-child(5n + 1) { grid-column: 1 / -1; }
}

/* Member "Topics" tab — PolicyTopic footprint (360° link graph) */
.member-topics__lead { color: var(--colour-text-muted); margin: 0 0 1rem; }
.member-topics__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.member-topics__item {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
}
/* The topic and the count are separate click targets: the topic opens the
   topic hub, the count opens this member's contributions on it. */
.member-topics__row { display: flex; align-items: center; gap: .5rem; }
.member-topics__link {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
  text-decoration: none; color: var(--colour-text); font-weight: var(--fw-bold);
}
.member-topics__link:hover .member-topics__name { text-decoration: underline; }
.member-topics__emoji { font-size: 1.1em; }
.member-topics__name { flex: 1; }
.member-topics__count {
  font-variant-numeric: tabular-nums;
  background: var(--colour-primary); color: #fff;
  border: 0; border-radius: 999px; padding: 0 .5rem; font-size: var(--text-xs);
  font-family: inherit; line-height: 1.6;
}
button.member-topics__count { cursor: pointer; }
button.member-topics__count:hover { background: var(--colour-primary-dark); }
button.member-topics__count:focus-visible {
  outline: 2px solid var(--colour-primary); outline-offset: 2px;
}
.member-topics__breakdown {
  display: block; margin-top: .25rem;
  font-size: var(--text-xs); color: var(--colour-text-muted);
}
.member-topics__empty { color: var(--colour-text-muted); }

/* Inline source links on profile tabs (affordance contract: components.css). */
.contribution-source-link,
.leg-source-link {
  color: var(--colour-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.contribution-source-link:hover,
.contribution-source-link:focus-visible,
.leg-source-link:hover,
.leg-source-link:focus-visible {
  color: var(--colour-link-hover);
  text-decoration-thickness: 2px;
}

/* =====================================================================
   WS-B: Vertical tab rail for member profiles — `.profile-tabs--vertical`
   Additive variant: the base `.profile-tabs` (horizontal strip) and the shared
   `.tabs` component used elsewhere (e.g. the elections page) are untouched. On
   desktop (>=821px) the nav becomes a sticky left rail beside a single content
   column; below 821px it falls back to the base horizontal-scroll strip.
   Token-only — no raw hex.
   ===================================================================== */

/* Rail-only group headings stay hidden until the rail exists. */
.tabs__group { display: none; }

/* ---- Election 2022 result card (both profile houses) ---- */
.election-result__headline {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}
.election-result__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--colour-primary-alpha-10);
  border: 1px solid var(--colour-primary-alpha-20);
  border-radius: var(--radius-lg);
}
.election-result__votes { display: flex; flex-direction: column; }
.election-result__votes-num {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--colour-primary-dark);
  font-variant-numeric: tabular-nums;
}
.election-result__votes-label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
}
.election-result__meta { display: flex; flex-direction: column; gap: var(--space-1); }
.election-result__meta-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
}
.election-result__meta-value {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}
.election-result__source {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.election-result__source a { color: var(--colour-link); }
.election-result__source a:hover { color: var(--colour-link-hover); }

/* Honest placeholder — clearly labelled "coming soon", never fabricated data. */
.election-provision {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.election-provision__tag {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--colour-secondary-alpha-20);
  color: var(--colour-secondary-dark);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.election-provision__text { margin: 0; font-size: var(--text-sm); color: var(--colour-text-muted); }
.election-result__empty { margin: 0; font-size: var(--text-base); color: var(--colour-text-muted); }

@media (min-width: 821px) {
  .profile-tabs--vertical {
    display: grid;
    grid-template-columns: 315px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-6);
  }

  /* Left rail (column 1). Every content panel — and the always-present but
     0-height certified-module wrapper divs — shares the single column-2 cell;
     the global .tab-panel :target rules keep exactly one visible at a time. */
  .profile-tabs--vertical > .tabs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0 var(--space-3) var(--space-2) 0;
    overflow: visible;
    border-bottom: none;
    border-right: 1px solid var(--colour-border);
    background: transparent;
    position: sticky;
    top: var(--space-4);
  }
  .profile-tabs--vertical > *:not(.tabs) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  /* Rail tabs: pill-ish rows with a brand-red active accent bar + tint. */
  .profile-tabs--vertical > .tabs a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    white-space: normal;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--colour-text-muted);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    transition: background-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
  }
  .profile-tabs--vertical > .tabs a:hover {
    background: var(--colour-bg-subtle);
    color: var(--colour-primary);
  }
  .profile-tabs--vertical > .tabs a.is-active {
    border-left-color: var(--colour-primary);
    background: var(--colour-primary-alpha-10);
    color: var(--colour-primary);
    font-weight: var(--fw-bold);
  }
  .profile-tabs--vertical > .tabs a .count { margin-left: auto; }
  .profile-tabs--vertical > .tabs a.is-active .count {
    background: var(--colour-primary-alpha-20);
    color: var(--colour-primary-dark);
  }

  /* Decorative FontAwesome leading icon per tab (vertical rail only). */
  .profile-tabs--vertical > .tabs a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: var(--text-sm);
    flex: 0 0 auto;
    width: 1.2em;
    text-align: center;
    color: var(--colour-text-light);
    content: "\f111";
  }
  .profile-tabs--vertical > .tabs a.is-active::before { color: var(--colour-primary); }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-overview"]::before { content: "\f007"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-election"]::before { content: "\f772"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-contributions"]::before { content: "\f086"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-committees"]::before { content: "\f0c0"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-topics"]::before { content: "\f02c"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-bills"]::before { content: "\f15b"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-acts"]::before { content: "\f24e"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-voting"]::before { content: "\f14a"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-motions"]::before { content: "\f256"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-petitions"]::before { content: "\f573"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-questions"]::before { content: "\f059"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-statements"]::before { content: "\f075"; }
  .profile-tabs--vertical > .tabs a[aria-controls="tab-papers"]::before { content: "\f07c"; }

  /* Muted rail section labels: the "Profile" group heading on the rail. */
  .profile-tabs--vertical > .tabs .tabs__group {
    display: block;
    align-self: stretch;
    margin: var(--space-3) 0 var(--space-1);
    padding: 0 0 0 var(--space-3);
    border: 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--colour-text-light);
  }
  .profile-tabs--vertical > .tabs .tabs__group:first-child { margin-top: 0; }
}