/* 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);
}
.profile-hero__body { min-width: 0; }
.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. */
@media (max-width: 768px) {
  .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; }
}

/* 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; }
}