/* ============================================================================
   Hemicycle Voting Visualization Styles
   ========================================================================== */

/* Vote Detail Layout */
.vote-detail--header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.vote-detail--title {
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
  color: var(--colour-text);
}

.vote-detail--date {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.vote-detail--description {
  margin-top: var(--space-4);
}

.vote-detail--description p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--colour-text);
  margin: 0;
}

/* Section heading above the table/hemicycle split */
.members-table--header {
  font-size: var(--text-xl);
  margin: var(--space-5) 0 var(--space-4);
}

/* Two Column Layout */
.vote-detail--layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .vote-detail--layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ============================================================================
   Hemicycle Container
   ========================================================================== */

.hemicycle-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-4);
}

@media (max-width: 1024px) {
  .hemicycle-container {
    position: static;
  }
}

.hemicycle-svg-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}

.hemicycle-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG Seat Styles (loaded via CSS in hemicycle.html) */
svg a.seat-link {
  cursor: pointer;
  text-decoration: none;
}

svg circle.seat {
  stroke: #f0f0f0;
  stroke-width: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

svg circle.seat:hover {
  filter: brightness(1.2);
  stroke-width: 2px;
  stroke: #333;
}

svg a.seat-link:hover circle.seat {
  filter: brightness(1.2);
  stroke-width: 2px;
  stroke: #333;
}

svg circle.seat.highlighted {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
  stroke-width: 2px;
  stroke: #333;
}

/* Decision Colors */
svg circle.group-green {
  fill: #008000;
}

/* YES */
svg circle.group-yellow {
  fill: #FFD700;
}

/* NO */
svg circle.group-pink {
  fill: #FF8888;
}

/* SPOILT */
svg circle.group-grey {
  fill: #A9A9A9;
}

/* ABSENT */

/* ============================================================================
   Vote Statistics Legend
   ========================================================================== */
.vote-statistics-list {
  flex: 0 1 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}


.vote-statistics-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}

.legend-list {
  display: inline-block;
  width: 32px;
  height: 16px;
  border-radius: var(--radius-sm);
  background-color: var(--colour-lighter);
}



.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--colour-text);
}

.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid hsl(0 0% 0% / 0.12);
  flex: none;
}

.legend-item.yes .legend-color {
  background-color: #4CAF50;
}

.legend-item.no .legend-color {
  background-color: #F44336;
}

.legend-item.spoilt .legend-color {
  background-color: #FF9800;
}

.legend-item.abstained .legend-color {
  background-color: #7346d7;
}

.legend-item.absent .legend-color {
  background-color: #9E9E9E;
}

.legend-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-label strong {
  color: var(--colour-text);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.list-label {
  color: var(--colour-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

/* Total tally line under the legend (vote_detail.html) */
.legend-total {
  flex: 1 1 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--colour-border);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Vote Filter Buttons
   ========================================================================== */
.vote-filter-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  align-self: center;
}

.vote-filter-buttons {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  justify-content: flex-start;
  align-items: center;
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border-strong);
  background: var(--colour-bg);
  color: var(--colour-text);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--colour-secondary);
  color: var(--colour-secondary-dark);
}

.filter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--colour-secondary-alpha-20);
}

.filter-btn.active {
  background: var(--colour-secondary);
  color: #fff;
  border-color: var(--colour-secondary);
}

.filter-btn.active:hover {
  background: var(--colour-secondary-dark);
  color: #fff;
  border-color: var(--colour-secondary-dark);
}

/* ============================================================================
   Members Vote Table
   ========================================================================== */

.members-table-container {
  overflow: auto;
  max-height: min(70vh, 48rem);
  margin-bottom: var(--space-6);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-bg);
  -webkit-overflow-scrolling: touch;
}

.members-table--header {
  flex: 1 1 100%;
}

.members-vote-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colour-bg);
  font-size: var(--text-sm);
}

.members-vote-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--colour-bg-subtle);
  border-bottom: 2px solid var(--colour-border-strong);
}

.members-vote-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-bold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colour-text-muted);
  white-space: nowrap;
}

.members-vote-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: middle;
}

/* Column Widths */
.col-header {
  background-color: var(--colour-bg-subtle);
  color: var(--colour-text-muted);
}

.col-name {
  width: 30%;
  min-width: 150px;
}

.col-vote {
  width: 15%;
  min-width: 100px;
}

.col-party {
  width: 15%;
  min-width: 100px;
}

.col-constituency {
  width: 20%;
  min-width: 120px;
}

.col-county {
  width: 20%;
  min-width: 100px;
}

/* Member Name Link */
a.member-name {
  color: var(--colour-secondary-dark);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}

span.member-name {
  font-weight: var(--fw-medium);
  color: var(--colour-text);
}

a.member-name:hover {
  color: var(--colour-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.member-name:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Vote Row Styling */
.vote-row {
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.vote-row:hover {
  background-color: var(--colour-bg-subtle);
}

.vote-row.highlighted {
  background-color: var(--colour-secondary-alpha-10) !important;
  animation: highlightFade 2s ease-out;
}

@keyframes highlightFade {
  0% {
    background-color: var(--colour-secondary-alpha-20);
  }

  100% {
    background-color: transparent;
  }
}

/* Vote Decision Color Coding */
.vote-row--yes {}

.vote-row--no {}

.vote-row--spoilt {}

.vote-row--absent {}

/* Alternating row colors (zebra) */
.vote-row:nth-child(even) {
  background-color: var(--colour-bg-subtle);
}

.vote-row:nth-child(even):hover {
  background-color: var(--colour-lighter);
}

/* ============================================================================
   Decision Badges
   ========================================================================== */

.decision-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

.decision-badge--yes {
  background-color: var(--colour-success-bg);
  color: var(--colour-success);
}

.decision-badge--no {
  background-color: var(--colour-danger-bg);
  color: var(--colour-danger);
}

.decision-badge--spoilt {
  background-color: var(--colour-warning-bg);
  color: var(--colour-warning);
}

.decision-badge--abstained {
  background-color: #E9DCFF;
  color: #4A2B8E;
}

.decision-badge--absent {
  background-color: var(--colour-lighter);
  color: var(--colour-text-muted);
}

/* ============================================================================
   Vote List Links - Active State
   ========================================================================== */

.vote-link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.vote-link.active {
  background-color: var(--colour-primary);
  color: #fff !important;
}

.vote-link.active .vote-date {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
  .vote-detail--layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hemicycle-svg-wrapper {
    max-width: 100%;
  }

  /* Collapse table columns on smaller screens */
  .col-county {
    display: none;
  }
}

@media (max-width: 768px) {
  .vote-detail--header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  .vote-detail--title {
    font-size: 1.5rem;
  }

  .vote-statistics-legend {
    flex-direction: column;
    gap: 0.75rem;
  }

  .legend-item {
    justify-content: space-between;
  }

  /* Hide county and constituency on mobile */
  .col-county,
  .col-constituency {
    display: none;
  }

  /* Party stays visible: it is the identifying column of the party-breakdown
     table, so hiding it left anonymous numeric rows on narrow screens. Drop
     county/constituency for space instead — never the identity column. */

  .members-vote-table th,
  .members-vote-table td {
    padding: 0.625rem 0.5rem;
    font-size: 0.85rem;
  }

  .col-name {
    width: 50%;
  }

  .col-vote {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .vote-detail--layout {
    gap: 1rem;
  }

  .vote-detail--title {
    font-size: 1.25rem;
  }

  .vote-detail--date {
    font-size: 0.85rem;
  }

  .vote-statistics-legend {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .legend-color {
    width: 16px;
    height: 16px;
  }

  .legend-label {
    font-size: 0.8rem;
  }

  .members-vote-table {
    font-size: 0.8rem;
  }

  .members-vote-table th,
  .members-vote-table td {
    padding: 0.5rem 0.25rem;
  }

  .col-name {
    width: 60%;
  }

  .col-vote {
    width: 40%;
  }

  .decision-badge {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* ============================================================================
   Empty State
   ========================================================================== */

.no-votes--message {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--colour-text-muted);
  background: var(--colour-bg-subtle);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-lg);
}

.no-votes--message p {
  margin: 0;
  font-size: var(--text-base);
}

/* Empty table row */
.members-vote-table td.no-data {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--colour-text-muted);
  font-style: italic;
}

/* On-demand SVG generation placeholder */
.svg-loading {
  display: grid;
  place-items: center;
  min-height: 18rem;
  color: var(--colour-text-muted);
  font-weight: var(--fw-medium);
}

.svg-loading p {
  margin: 0;
}

/* ============================================================================
   Vote detail — split hero + progressive disclosure (2026-08-11)

   Replaces the old layout on na_vote_detail/se_vote_detail, where the arc —
   the whole point of the page — sat ~65% down inside a narrow right column
   beside a 340-row table, the result was the smallest element on the page,
   and the entire top-right half was empty.

   Now: arc left, verdict + tallies right (filling that dead space), and the
   party breakdown and the member roll collapsed into disclosures that open to
   the FULL page width, so names and counties stop wrapping.

   The old .vote-detail--layout / .members-table-container rules above are NOT
   removed: vote_embed.html and the generic vote_detail.html still use them.
   ========================================================================== */

.vote-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
  align-items: stretch;
}

/* 1.35fr keeps the arc the dominant element without letting it grow so tall
   that the tallies fall below the fold on a laptop. minmax(0,…) so the inline
   SVG cannot force the column wider than its share. */
@media (min-width: 960px) {
  .vote-hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-5);
  }
}

.vote-hero__panel {
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.vote-hero__viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* Capped, not stretched. At full column width the arc read as a poster and
   pushed the tallies down; it is a diagram, so it gets a diagram's size and
   centres in whatever space is left. */
.vote-hero__viz .hemicycle-svg,
.vote-hero__viz svg {
  width: 100%;
  max-width: 26rem;
  height: auto;
  display: block;
  margin-inline: auto;
}

.vote-hero__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Centred, because the grid stretches this panel to the arc's height and
     top-aligned content left a visible dead gap under the export buttons. */
  justify-content: center;
}

/* ---- Verdict ---- */

.vote-verdict {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vote-verdict__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--colour-text-muted);
  font-weight: var(--fw-semibold);
}

.vote-verdict__value {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--colour-text);
}

.vote-verdict--passed .vote-verdict__value { color: var(--colour-success); }
.vote-verdict--rejected .vote-verdict__value { color: var(--colour-danger); }
.vote-verdict--tied .vote-verdict__value { color: var(--colour-text-muted); }

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

/* ---- Proportion bar ----
   One glance at how the house split. Segment colours are the SAME five the
   generator bakes into the seats (hemicycle_generator_na.py:39-43) — a legend
   that disagrees with the arc would be worse than no legend. */

.vote-meter {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--colour-lighter);
}

.vote-meter__seg { display: block; height: 100%; }
.vote-meter__seg--yes { background-color: #4CAF50; }
.vote-meter__seg--no { background-color: #F44336; }
.vote-meter__seg--abstained { background-color: #7346d7; }
.vote-meter__seg--spoilt { background-color: #FF9800; }
.vote-meter__seg--absent { background-color: #9E9E9E; }

/* ---- Tally tiles ---- */

.vote-tallies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vote-tally {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}

.vote-tally__num {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.vote-tally__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--colour-text-muted);
}

.vote-tally--yes .vote-tally__num { color: #4CAF50; }
.vote-tally--no .vote-tally__num { color: #F44336; }
.vote-tally--abstained .vote-tally__num { color: #7346d7; }
.vote-tally--spoilt .vote-tally__num { color: #FF9800; }
.vote-tally--absent .vote-tally__num { color: #9E9E9E; }

/* A zero is real information (nobody voted No), but it must not shout as
   loudly as a figure that carries the result. */
.vote-tally--zero .vote-tally__num { color: var(--colour-text-muted); opacity: .55; }

/* ---- Inline legend under the arc ---- */

.vote-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vote-key li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.vote-key .legend-color {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

/* ---- Disclosures ---- */

.vote-disclosure {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-bg);
  margin: 0 0 var(--space-4);
  overflow: hidden;
}

.vote-disclosure__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--colour-text);
}

.vote-disclosure__summary::-webkit-details-marker { display: none; }

.vote-disclosure__summary::before {
  content: "+";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--colour-text-muted);
}

.vote-disclosure[open] > .vote-disclosure__summary::before { content: "\2212"; }

.vote-disclosure__summary:hover { background: var(--colour-bg-subtle); }
.vote-disclosure__summary:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: -2px;
}

.vote-disclosure__count {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

.vote-disclosure__body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--colour-border);
  padding-top: var(--space-4);
}

/* The roll opens to the full container width — the point of collapsing it.
   Overriding the old narrow-column container rather than editing it, because
   vote_embed.html still needs the constrained version. */
.vote-disclosure__body .members-table-container {
  max-width: none;
  width: 100%;
  max-height: none;
  overflow: visible;
}

.vote-disclosure__body .members-vote-table { width: 100%; }
.vote-disclosure__body .party-breakdown-table { max-width: none; }

/* ---- Roll toolbar ---- */

.vote-roll__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.vote-roll__status {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

.vote-roll__empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--colour-text-muted);
}

@media (max-width: 640px) {
  .vote-hero__panel { padding: var(--space-4); }
  .vote-disclosure__summary { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
  .vote-disclosure__body { padding: var(--space-4) var(--space-3) var(--space-4); }
  .vote-verdict__value { font-size: var(--text-2xl); }
  .vote-roll__status { margin-left: 0; width: 100%; }
}

/* ---- Division header meta (under the branded hero) ----
   The title moved into the hero band, so what is left here is provenance: the
   house, the sitting date, and the way back to the list. */

.vote-detail--meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.vote-detail--meta .vote-detail--date {
  margin: 0;
  color: var(--colour-text-muted);
  font-weight: var(--fw-medium);
}

.vote-detail--back {
  color: var(--colour-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.vote-detail--back::before { content: "\2190"; margin-right: .4em; }
.vote-detail--back:hover { text-decoration: underline; }
.vote-detail--back:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }

.vote-detail--description {
  color: var(--colour-text);
  margin: 0 0 var(--space-4);
}