svg.icon-upload {
  display: flex;
  padding-top: 0;
  width: 3rem;
  height: 2rem;
}

.position-holders--navbar {
  display: grid;
  grid-template-areas:
    "search"
    "nav";
  grid-template-columns: 1fr;
  gap: 1rem;
  align-content: flex-start;
  position: relative;
  margin-bottom: 2rem;
}

.position-holders--navbar-search {
  grid-area: search;
  width: 100%;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.position-holders--navbar-links {
  grid-area: nav;
  min-width: min(500px, 100%); /* never exceed the viewport on mobile */
}

.navbar-search-form {
  display: flex;
  gap: 0.4rem;
  width: 100%;
}

.navbar-border-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-bottom: 1px solid var(--colour-light);
  z-index: 1;
  pointer-events: none;
}

.navbar-search-form input[type="text"],
.navbar-search-form input[type="search"] {
  flex: 0 1 50%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border-strong);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font: inherit;
  background: var(--colour-bg);
  color: var(--colour-text);
}

.navbar-search-form input[type="text"]:focus,
.navbar-search-form input[type="search"]:focus {
  outline: none;
  /* Matches the Search button beside it, which is now primary. A green focus
     ring on an input glued to a red button read as two unrelated controls. */
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
  position: relative;
  z-index: 1;
}

/* Primary, not secondary. This was the only green primary control on the site:
   every other submit button and active pill is `--colour-primary`, so a green
   Search here read as a different kind of action rather than the same one.
   Both are existing brand tokens — this aligns to the convention, it does not
   introduce a colour. */
.navbar-search-form button {
  padding: var(--space-2) var(--space-5);
  background: var(--colour-primary);
  color: #fff;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: 1px solid var(--colour-primary);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}

.navbar-search-form button:hover {
  background: var(--colour-primary-dark);
  border-color: var(--colour-primary-dark);
}

.navbar-search-form button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

.position-holders--navbar {
  display: flex;
  flex: 0 1 50%;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.navbar-search-form {
  display: flex;
  justify-content: flex-start;
}

.position-holders--navbar-links {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  overflow-x: visible;
  gap: 0;
  flex: 1 1 0%;
  background: none;
  position: relative;
}

.position-holders--navbar-links .position-holders--navbar-scroll-icon.left {
  grid-column: 1;
  justify-self: start;
  margin-right: 0.75rem;
}

.position-holders--navbar-links .position-holders--navbar-scroll-icon.right {
  grid-column: 3;
  justify-self: end;
  margin-left: 0.75rem;
}

.position-holders--navbar-links ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
  grid-column: 2;
}

.position-holders--navbar-links ul {
  scrollbar-width: none;
}

.position-holders--navbar-links ul::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.position-holders--navbar-links li {
  display: flex;
  align-items: flex-end;
  position: relative;
  flex: 0 0 auto;
}

.position-holders--navbar-scroll-icon.left {
  margin-right: 0.75rem;
  align-self: center;
  font-size: 1rem;
  color: #bbb;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  transition: color 0.2s;
}

.position-holders--navbar-scroll-icon.right {
  margin-left: 0.75rem;
  align-self: center;
  font-size: 1rem;
  color: #bbb;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  transition: color 0.2s;
}

.position-holders--navbar-scroll-icon.left:hover,
.position-holders--navbar-scroll-icon.right:hover {
  color: var(--colour-dark, #222);
}

.position-holders--navbar-links a {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--colour-text-muted);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
  position: relative;
  z-index: 2;
}

.position-holders--navbar-links a:hover {
  color: var(--colour-primary);
}

.position-holders--navbar-links a:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.position-holders--navbar-links a.selected {
  background: transparent;
  color: var(--colour-primary);
  border-bottom: 3px solid var(--colour-primary);
  font-weight: var(--fw-bold);
  z-index: 2;
  position: relative;
}

.position-holders--navbar-links a:not(.selected) {
  background: transparent;
  color: var(--colour-text-muted);
}

/* Hide scrollbars for a cleaner look */
.position-holders--navbar-links {
  scrollbar-width: thin;
  scrollbar-color: var(--colour-light) #fff;
}

/* Fix for first nav item being hidden: ensure ul and links do not shrink below content */
.position-holders--navbar-links ul {
  min-width: 0;
  overflow-x: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  display: flex;
}

.position-holders--navbar-links ul {
  justify-content: flex-start;
  min-width: 0;
  overflow-x: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  display: flex;
}

.position-holders--navbar-links {
  min-width: 0;
  max-width: 100%;
  overflow-x: visible;
  justify-self: start;
}

.position-holders--navbar-links::-webkit-scrollbar {
  height: 6px;
}

.position-holders--navbar-links::-webkit-scrollbar-thumb {
  background: var(--colour-light);
  border-radius: 3px;
}

.position-holders--navbar-links::-webkit-scrollbar-track {
  background: #fff;
}

.position-holders--navbar-scroll-icon.left,
.position-holders--navbar-scroll-icon.right {
  transition: color 0.2s, opacity 0.2s, width 0.2s, margin 0.2s;
}

.position-holders--navbar-scroll-icon.left[style*="visibility: hidden"],
.position-holders--navbar-scroll-icon.right[style*="visibility: hidden"] {
  opacity: 0;
  width: 0;
  margin: 0;
  pointer-events: none;
}

/* Index page intro highlight + list heading */
.vp-index--highlight {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--colour-primary-alpha-10);
  border-left: 3px solid var(--colour-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--colour-text);
  font-weight: var(--fw-medium);
}

.vote-list--heading {
  font-size: var(--text-xl);
  margin: var(--space-5) 0 var(--space-3);
}

/* votings Filter Styles */

.col-name {
  width: 15rem;
}

.voting-position-holders {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  gap: var(--space-5);
  align-items: flex-start;
}

.voting-position-holders > .position-holders--navbar,
.vote-visual {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 min(360px, 100%);
  min-width: 0;
}

.vote-visual {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The vote list is ~850px tall and this detail panel is ~250px, so the right
   half of the row was ~600px of empty space, and scrolling the list pushed the
   panel out of view entirely. Sticking it keeps the selected division's tallies
   beside whatever row you have scrolled to, which is the point of a two-column
   master/detail layout. Desktop only — below 900px the two stack. */
@media (min-width: 900px) {
  .vote-visual {
    position: sticky;
    top: var(--space-5);
    align-self: flex-start;
  }
}

.vote-visual-title--list {
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  width: 100%;
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  color: var(--colour-text);
}

.votings-list--filter {
  margin-top: 1rem;
}

.votings-list--filter label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}

.votings-list--filter input[type="text"] {
  width: 100%;
  max-width: 300px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--colour-bg);
  color: var(--colour-text);
  transition: border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.votings-list--filter input[type="text"]:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

.votings-list--filter input[type="text"]::placeholder {
  color: var(--colour-text-muted);
}


.vote-container {
  flex: 0 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: auto;
}

.vote-container li {
  flex: 0 1 100%;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--colour-border);
}

.vote-container li:last-child {
  border-bottom: none;
}

.vote-container li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--colour-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.vote-container li a:hover {
  background: var(--colour-bg-subtle);
  color: var(--colour-primary);
}

.vote-container li a:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: -2px;
}

.vote-container li a .vote-date {
  color: var(--colour-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.vote-header {
  color: var(--colour-text-muted);
}

.vote-display {
  flex: 0 1 100%;
}

/* MP Filter Form Styles */
.mp-filter--form {
  flex: 1;
  max-width: 400px;
  margin-left: auto;
}

.mp-filter--input {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-sm);
  background: var(--colour-bg);
  color: var(--colour-text);
  transition: border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.mp-filter--input:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

.mp-filter--input::placeholder {
  color: var(--colour-text-muted);
}

/* Adjust vote filter buttons container to accommodate search */
.vote-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}

.vote-filter-title {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colour-text-muted);
  margin-right: var(--space-2);
}

/* Screen-reader-only utility (votingpatterns.css is loaded standalone on the
   vote pages, so it cannot rely on a class defined in another bundle). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Vote detail: date line under the title + tidy empty state in the votes list. */
.vote-detail--date {
  margin: 0.25rem 0 0.75rem;
  color: var(--colour-text-muted, #666);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Honest reconciliation note when the official tally counts votes from members
   outside the displayed verified roster (see vote_detail roll_delta). */
.vote-detail--roster-note {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--colour-border-strong, #bbb);
  background: var(--colour-bg-subtle, #f7f7f5);
  color: var(--colour-text-muted, #666);
  font-size: 0.82rem;
  line-height: 1.5;
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

.vote-empty {
  list-style: none;
  padding: var(--space-5) var(--space-4);
  color: var(--colour-text-muted, #666);
  font-style: italic;
  text-align: center;
}

/* ============================================================================
   Member voting patterns page
   ========================================================================== */
.voting-patterns-container .member-summary {
  margin-bottom: var(--space-6);
}

.member-basic-info {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.member-photo-placeholder {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  color: var(--colour-text-muted);
  flex: none;
}

.member-details .member-name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
  color: var(--colour-text);
}

.member-details .member-constituency,
.member-details .member-party {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.member-details .member-party {
  color: var(--colour-primary);
  font-weight: var(--fw-semibold);
}

.attendance-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.attendance-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.attendance-item:last-child {
  border-bottom: none;
}

.attendance-item:nth-child(even) {
  background: var(--colour-bg-subtle);
}

.attendance-label {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}

.attendance-value {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- Outcome banner (curated + automated division pages) ---- */
.vote-outcome-banner {
  display: inline-block;
  margin: 0.5rem 0 0.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--colour-border);
  background: var(--colour-surface, #fff);
  font-size: var(--text-sm);
  color: var(--colour-text);
}
.vote-outcome-banner--passed strong,
.vote-outcome-banner--agreed_to strong { color: var(--colour-success, #2e6b46); }
.vote-outcome-banner--rejected strong,
.vote-outcome-banner--negatived strong { color: var(--colour-danger, #a6212a); }
.vote-outcome-banner--tallies { color: var(--colour-text-muted); }
.vote-detail--links {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
  font-size: var(--text-sm);
}
.vote-detail--links li { margin: 0.15rem 0; }

/* ---- "From Hansard" automated tier ---- */
.hansard-tier { margin-top: 2rem; }
.hansard-tier--note,
.vote-visual--caption {
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  /* Small type across the full container measured 201 cpl. */
  max-width: var(--container-prose);
}
/* …that cap is now inert: `--container-prose` is `none` site-wide (core.css,
   owner decision), so this spans its container instead of leaving 1168px dead.
   A CSS-columns fix was also tried and removed — components.css `.src-cite`. */
/* The tier is a .data-table now. `.hansard-tier--list li` and
   `.hansard-tier--badges` went with the <ul> markup they styled: as flex list
   items the subject, date and badges ran the full container (165 cpl measured
   at 1440px) and the vote counts never aligned into a readable column. */
/* Row-header weight comes from the shared `.data-table tbody th`; a
   `.hansard-tier--subject { font-weight: … }` rule here was dead code, since
   `.data-table tbody th` (0-1-2) outranks a single class (0-1-0). */
.hansard-tier--date { white-space: nowrap; }
/* Badge and bill now live in the row header beside the subject they describe.
   The bill is a secondary line; the badge sits inline after the title. */
.hansard-tier--subject .hansard-badge--auto { margin-left: var(--space-2); vertical-align: middle; }
.hansard-tier--bill {
  display: block;
  margin-top: var(--space-1);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  max-width: 44ch;
}

/* `.data-table` goes `display: block; overflow-x: auto; white-space: nowrap`
   under 600px. With a 120-character subject forced onto one unwrapped line
   this table became 1647px wide inside a 371px viewport, which pushed the
   "Automated" badge to x=1641 — four screen-widths off-canvas, behind a
   sideways scroll past four columns. That defeats the whole reason the badge
   is per-row: a reader must see THIS row is machine-extracted. Let the text
   wrap so the table fits the screen and the badge stays in the first view. */
@media (max-width: 600px) {
  .hansard-tier--table,
  .hansard-tier--table th,
  .hansard-tier--table td { white-space: normal; }
  .hansard-tier--subject { min-width: 11rem; }
  .hansard-tier--bill { max-width: 14ch; }
}
.hansard-badge {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--colour-border);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  color: var(--colour-text-muted);
  white-space: nowrap;
}
.hansard-badge--auto { color: var(--colour-primary); border-color: var(--colour-primary); }
.hansard-badge--bill { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.hansard-tier--breadcrumb { font-size: var(--text-sm); margin-bottom: 0.4rem; }

/* ---- Party breakdown table ---- */
.party-breakdown { margin: 0.75rem 0 1rem; }
.party-breakdown--summary { cursor: pointer; }
.party-breakdown-table { max-width: 40rem; }
.party-breakdown-table td, .party-breakdown-table th { text-align: left; }

/* ---- Selected division + pre-filled detail pane ---- */
/* The newest division is highlighted by default so the right-hand pane is never
   an unbound placeholder on load (list rows remain full-page links). */
.vote-container li a.is-selected {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
  font-weight: var(--fw-bold);
  box-shadow: inset 3px 0 0 var(--colour-primary);
}
.vote-visual--tallies {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.vote-visual--tallies li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
}
.vote-visual--tallies .tally-num {
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--colour-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vote-visual--tallies .tally-label {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.vote-visual--cta { margin-top: var(--space-2); }

/* Horizontal scroll under 600px. This table is wider than a phone viewport and
   had no wrapper, so it pushed the whole PAGE sideways (measured 433px at 390px).
   Same treatment `.data-table` already carries. */
@media (max-width: 600px) {
  .party-breakdown-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}