/* ═══════════════════════════════════════════════════════════════
   PARLIAMENT CHAMBER
   Macrostructure : workbench — control rail, canvas, stats rail
   Signature      : the chamber, large, in brand rust on warm paper
   Colour         : ONE hue + highlight encoding, never categorical.
                    The theme's 7 brand hues FAIL the dataviz validator as a
                    categorical palette (5 below the chroma floor; teal vs
                    cool-gray ΔE 6.1 under normal vision), and a hemicycle is
                    an all-pairs form capped at ~3 series. Two colours it is.
   Radius         : 0 throughout, matching the theme's --radius.
   ═══════════════════════════════════════════════════════════════ */

.omran-parliament {
  --seat: var(--color-primary, #89431B);
  --seat-dim: #B8AFA8;
  --seat-ring: var(--color-deep-rust, #5C2D0E);
  --bar: var(--color-primary, #89431B);
  --paper: var(--color-bg-warm, #F8F5F2);
  --rule: var(--color-border, #B8AFA8);

  container-type: inline-size;
  background: var(--paper);
  /* Same measure as the site header (.omran-site-header__inner) so the chart
     lines up with the rest of the page rather than running wider. */
  max-inline-size: var(--home-container-max, 1400px);
  margin-inline: auto;
  padding: var(--space-32, 32px) var(--home-container-pad-lg, 32px);
  color: var(--color-text, #2D2D2D);
  font-family: var(--font-primary, 'IBM Plex Sans Arabic', sans-serif);
}

/* ── Head ─────────────────────────────────────────────────────── */

.omran-parliament__title {
  margin: 0 0 var(--space-8, 8px);
  font-size: clamp(1.5rem, 1.1rem + 1.6cqi, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.omran-parliament__lede {
  margin: 0 0 var(--space-24, 24px);
  max-inline-size: 58ch;
  color: var(--color-text-muted, #5A6469);
  line-height: 1.8; /* Arabic wants more leading than Latin. */
}

.omran-parliament__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #2D2D2D);
}

/* ── Dimension control ────────────────────────────────────────── */

.omran-parliament__dims {
  border: 0;
  margin: 0 0 var(--space-24, 24px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  align-items: center;
}

.omran-parliament__dims-label {
  padding: 0;
  margin-inline-end: var(--space-8, 8px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #5A6469);
}

.omran-parliament__dim {
  /* 24px minimum target; 44 preferred — padding gets us to ~40 tall. */
  min-block-size: 2.5rem;
  padding: var(--space-8, 8px) var(--space-16, 16px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: var(--color-text, #2D2D2D);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__dim:hover {
  background: color-mix(in oklab, var(--seat) 8%, var(--color-bg, #fff));
  border-color: var(--seat);
}

.omran-parliament__dim.is-active {
  background: var(--seat);
  border-color: var(--seat);
  color: #fff;
  font-weight: 600;
}

.omran-parliament__dim:focus-visible,
.omran-parliament__seat:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 2px;
}

/* ── Layout: canvas + stats rail ──────────────────────────────── */

.omran-parliament__body {
  display: grid;
  gap: var(--space-32, 32px);
  grid-template-columns: 1fr;
  align-items: start;
}

@container (min-width: 60rem) {
  .omran-parliament__body {
    /* The rail only ever holds a label, a bar and two numbers — it does not
       need a third of the page. Cap it and give the rest to the chamber. */
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 20cqi, 17rem);
  }
}

/* ── Chamber ──────────────────────────────────────────────────── */

.omran-parliament__svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  overflow: visible;
}

.omran-parliament__seat {
  fill: var(--seat);
  /* 2px surface ring so adjacent seats never merge into a mass. */
  stroke: var(--paper);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 160ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__seat.is-management {
  stroke: var(--seat-ring);
  stroke-width: 3;
}

/* Highlight encoding: matching seats keep the hue, the rest recede.
   Opacity is a second channel so the distinction never rests on colour. */
.omran-parliament__seat.is-dimmed {
  fill: var(--seat-dim);
  opacity: 0.55;
}

.omran-parliament__seat:hover,
.omran-parliament__seat.is-selected {
  fill: var(--seat-ring);
}

.omran-parliament__note {
  margin: var(--space-12, 12px) 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #5A6469);
  line-height: 1.8;
}

/* ── Stats rail ───────────────────────────────────────────────── */

.omran-parliament__stats-title {
  margin: 0 0 var(--space-16, 16px);
  font-size: 1.0625rem;
  font-weight: 700;
  padding-block-end: var(--space-8, 8px);
  border-block-end: 2px solid var(--seat);
}

.omran-parliament__bars {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-12, 12px);
}

.omran-parliament__bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4, 4px) var(--space-12, 12px);
  align-items: center;
  cursor: pointer;
}

.omran-parliament__bar-label {
  min-inline-size: 0; /* Let long Arabic labels truncate rather than blow out. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
}

.omran-parliament__bar-track {
  grid-column: 1 / -1;
  grid-row: 2;
  block-size: 6px;
  background: color-mix(in oklab, var(--rule) 45%, transparent);
  display: block;
}

.omran-parliament__bar-fill {
  display: block;
  block-size: 100%;
  background: var(--bar);
  /* Rounded data-end only, anchored to the baseline. */
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  transition: inline-size 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__bar-value {
  display: flex;
  gap: var(--space-8, 8px);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.omran-parliament__bar-n { font-weight: 700; }

.omran-parliament__bar-pct {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #5A6469);
}

.omran-parliament__bar-row.is-active .omran-parliament__bar-label { font-weight: 700; }
.omran-parliament__bar-row.is-muted { opacity: 0.5; }

/* ── Table view (the non-colour identity channel) ─────────────── */

.omran-parliament__table-wrap {
  margin-block-start: var(--space-32, 32px);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-16, 16px);
}

.omran-parliament__table-wrap > summary {
  cursor: pointer;
  font-weight: 600;
  min-block-size: 2.5rem;
  display: flex;
  align-items: center;
}

.omran-parliament__table-scroll {
  overflow-x: auto;
  margin-block-start: var(--space-16, 16px);
  overscroll-behavior-x: contain;
}

.omran-parliament__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.omran-parliament__table th,
.omran-parliament__table td {
  text-align: start;
  padding: var(--space-8, 8px) var(--space-12, 12px);
  border-block-end: 1px solid var(--rule);
}

.omran-parliament__table th { font-weight: 700; white-space: nowrap; }
.omran-parliament__table td:first-child { font-variant-numeric: tabular-nums; }

.omran-parliament__empty {
  padding: var(--space-32, 32px);
  text-align: center;
  color: var(--color-text-muted, #5A6469);
}

@media (prefers-reduced-motion: reduce) {
  .omran-parliament__seat,
  .omran-parliament__dim,
  .omran-parliament__bar-fill {
    transition: none;
  }
}

/* ── Search ───────────────────────────────────────────────────── */

.omran-parliament__search-wrap {
  margin-block-end: var(--space-24, 24px);
  max-inline-size: 28rem;
}

.omran-parliament__search-label {
  display: block;
  margin-block-end: var(--space-4, 4px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #5A6469);
}

.omran-parliament__search {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--space-8, 8px) var(--space-12, 12px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
}

.omran-parliament__search:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 1px;
}

.omran-parliament__search-status {
  margin: var(--space-4, 4px) 0 0;
  min-block-size: 1.25rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #5A6469);
}

/* Counts-only dimensions read as available but non-interactive for seats. */
.omran-parliament__dim.is-counts-only::after {
  content: '•';
  margin-inline-start: var(--space-4, 4px);
  opacity: 0.6;
}

.omran-parliament__policy {
  margin: var(--space-8, 8px) 0 0;
  padding: var(--space-8, 8px) var(--space-12, 12px);
  border-inline-start: 3px solid var(--seat);
  background: color-mix(in oklab, var(--seat) 6%, transparent);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-text, #2D2D2D);
}

.omran-parliament__bar-row.is-static { cursor: default; }

/* ── Member detail dock ───────────────────────────────────────── */

.omran-parliament__detail[hidden] { display: none; }

.omran-parliament__detail {
  margin-block-start: var(--space-24, 24px);
}

.omran-parliament__card {
  position: relative;
  display: grid;
  gap: var(--space-24, 24px);
  grid-template-columns: 1fr;
  padding: var(--space-24, 24px);
  background: var(--color-bg, #fff);
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--seat);
}

@media (min-width: 40rem) {
  .omran-parliament__card {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: start;
  }
}

.omran-parliament__card-photo {
  inline-size: 8rem;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper);
}

.omran-parliament__card-name {
  margin: 0 0 var(--space-4, 4px);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

.omran-parliament__card-role {
  margin: 0 0 var(--space-16, 16px);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--seat);
}

.omran-parliament__card-fields {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4, 4px) var(--space-16, 16px);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.omran-parliament__card-fields dt {
  color: var(--color-text-muted, #5A6469);
  white-space: nowrap;
}

.omran-parliament__card-fields dd {
  margin: 0;
  min-inline-size: 0;
}

.omran-parliament__card-close {
  position: absolute;
  inset-block-start: var(--space-8, 8px);
  inset-inline-end: var(--space-8, 8px);
  min-block-size: 2.25rem;
  padding: var(--space-4, 4px) var(--space-12, 12px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.omran-parliament__card-close:hover { border-color: var(--seat); }

.omran-parliament__card-close:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   REVIEW FIXES — 2026-07-31
   Against the rendered page, four defects were visible:
   1. the chamber rendered ~1200px wide, making seats ~39px blobs
   2. seats were flat circles; the original uses member photos, and we
      already mirror 618 of them
   3. the detail card spread across the full width with content crammed
      into the inline-start third
   4. no value chips above the chamber, so the only filter affordance
      was the statistics rail
   ═══════════════════════════════════════════════════════════════ */

/* 1 ── Cap the chamber. The SVG scaled to whatever the grid column gave it,
       which at 1900px page width meant ~39px seats. Capping the drawing
       keeps seat size in the ~28px range the layout was designed around. */
.omran-parliament__svg {
  max-inline-size: 54rem;
  margin-inline: auto;
}

/* 2 ── Photo seats. Identity is the face; the ring carries state, so colour
       is still doing one job on a single hue. */
.omran-parliament__seat { cursor: pointer; }

.omran-parliament__seat-bg {
  fill: var(--paper);
}

.omran-parliament__seat-img {
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
              filter 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__seat-ring {
  fill: none;
  stroke: var(--seat);
  stroke-width: 2.5;
  transition: stroke 160ms cubic-bezier(0.23, 1, 0.32, 1),
              stroke-width 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__seat.is-management .omran-parliament__seat-ring {
  stroke: var(--seat-ring);
  stroke-width: 4;
}

/* Dimmed: desaturated AND faded — two channels, so the distinction never
   rests on colour alone. */
.omran-parliament__seat.is-dimmed .omran-parliament__seat-img {
  filter: grayscale(1);
  opacity: 0.35;
}

.omran-parliament__seat.is-dimmed .omran-parliament__seat-ring {
  stroke: var(--seat-dim);
  stroke-width: 1.5;
}

.omran-parliament__seat:hover .omran-parliament__seat-ring,
.omran-parliament__seat.is-selected .omran-parliament__seat-ring {
  stroke: var(--seat-ring);
  stroke-width: 4;
}

.omran-parliament__seat:focus {
  outline: none; /* Replaced by the visible ring rule below. */
}

.omran-parliament__seat:focus-visible .omran-parliament__seat-ring {
  stroke: var(--seat-ring);
  stroke-width: 5;
}

/* 3 ── Value chips above the chamber. */
.omran-parliament__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  margin: 0 0 var(--space-16, 16px);
  padding: 0;
  list-style: none;
  justify-content: center;
}

.omran-parliament__chips[hidden] { display: none; }

.omran-parliament__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8, 8px);
  min-block-size: 2rem;
  padding: var(--space-4, 4px) var(--space-12, 12px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.omran-parliament__chip:hover { border-color: var(--seat); }

.omran-parliament__chip[aria-pressed="true"] {
  background: var(--seat);
  border-color: var(--seat);
  color: #fff;
}

.omran-parliament__chip:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 2px;
}

.omran-parliament__chip-n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.75;
}

/* 4 ── Detail card. It was a full-width band with content pinned to one
       side; constrain it and let the field list size to its content. */
.omran-parliament__card {
  max-inline-size: 46rem;
  margin-inline: auto;
}

.omran-parliament__card-fields {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-24, 24px);
}

.omran-parliament__card-fields dd {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .omran-parliament__seat-img,
  .omran-parliament__seat-ring,
  .omran-parliament__chip {
    transition: none;
  }
}


/* ── Member popup ─────────────────────────────────────────────── */

.omran-parliament__modal {
  inline-size: min(72rem, calc(100vw - 3rem));
  max-block-size: min(80svh, 48rem);
  padding: 0;
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--seat);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: var(--color-text, #2D2D2D);
  overflow: auto;
  overscroll-behavior: contain;
}

.omran-parliament__modal::backdrop {
  background: rgb(45 45 45 / 0.55);
}

.omran-parliament__modal .omran-parliament__card {
  max-inline-size: none;
  border: 0;
  margin: 0;
}

/* ── Vacant seats & management labels ─────────────────────────── */

.omran-parliament__seat-vacant {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
  opacity: 0.6;
}



/* Chip swatch — the legend half of the colour encoding. */
.omran-parliament__chip-dot {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  flex: none;
}

.omran-parliament__chip[aria-pressed="true"] .omran-parliament__chip-dot {
  box-shadow: 0 0 0 2px #fff;
}


/* ── Management labels ────────────────────────────────────────────
   HTML rather than SVG <text>: SVG text does not shape Arabic
   reliably, which produced overlapping glyphs. Positioned in
   percentages of the viewBox so it tracks the chart at any size. */

.omran-parliament__chamber { position: relative; }

.omran-parliament__mgmt-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.omran-parliament__svg { position: relative; }

.omran-parliament__mgmt-label {
  position: absolute;
  /* Physical translate: the chart is drawn in physical coordinates whatever
     the page direction, so a logical property would mirror it wrongly. */
  transform: translateX(-50%);
  font-size: clamp(0.4375rem, 0.72cqi, 0.625rem);
  font-weight: 600;
  line-height: 1.25;
  /* Adjacent management seats are ~9% of the chart apart (~126px at desktop
     width) and the longest title sets ~110px, so one line fits. Wrapping was
     what pushed the second row's labels into the chamber's first seat row —
     the answer is to stop the wrap, not to move the chamber. Below ~34em the
     type shrinks with the container and two lines are allowed again, where
     there is vertical room for them. */
  max-inline-size: 12em;
  white-space: nowrap;
  text-align: center;
  color: var(--color-accent-green, #2E6B4F);
}


/* The label overlay must match the SVG's box exactly — the chamber container
   also holds the chip row and the note, so percentages of it landed wrong. */
.omran-parliament__canvas-wrap {
  position: relative;
  inline-size: 100%;
  /* No cap: the chart should use the whole column. On-screen seat size is
     (drawn diameter / viewBox width) x rendered width, so the container is the
     only lever that makes avatars bigger without closing the gaps again. */
  margin-inline: auto;
}

.omran-parliament__canvas-wrap .omran-parliament__svg {
  max-inline-size: none;
}


/* ── Member card: grouped, multi-column ───────────────────────────
   Twenty-eight fields in one column forced a scroll. Four labelled
   groups flowing into columns fit the whole record on screen. */

.omran-parliament__card-groups {
  columns: 2;
  column-gap: var(--space-32, 32px);
  margin-block-start: var(--space-16, 16px);
}

@media (min-width: 64rem) {
  .omran-parliament__card-groups { columns: 3; }
}

.omran-parliament__card-group {
  break-inside: avoid;
  margin-block-end: var(--space-24, 24px);
}

.omran-parliament__card-group-title {
  margin: 0 0 var(--space-8, 8px);
  padding-block-end: var(--space-4, 4px);
  border-block-end: 1px solid var(--rule);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0; /* Never letter-space Arabic: it breaks letter joining. */
  color: var(--seat);
}

.omran-parliament__card-groups .omran-parliament__card-fields {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 2px var(--space-12, 12px);
  font-size: 0.875rem;
  line-height: 1.7;
}

.omran-parliament__card-photo {
  inline-size: 9rem;
  border: 1px solid var(--rule);
}

.omran-parliament__card-name {
  font-size: 1.375rem;
}

/* Close sits clear of the content rather than over the first field. */
.omran-parliament__card-close {
  position: static;
  justify-self: start;
  grid-column: 1;
}

@media (min-width: 40rem) {
  .omran-parliament__card-close {
    position: absolute;
    inset-block-start: var(--space-16, 16px);
    inset-inline-end: var(--space-16, 16px);
  }
}

/* ── Advanced (multi-criterion) filtering ─────────────────────────
   Up to four criteria combined with AND, matching the original's
   ظ…طھظ‚ط¯ظ… mode. The chamber dims rather than re-seats: a member
   jumping seats when a filter is added is worse than a dimmed one. */

.omran-parliament__mode {
  display: inline-flex;
  gap: 0;
  margin-block-end: var(--space-16, 16px);
  border: 1px solid var(--rule);
}

.omran-parliament__mode-btn {
  min-block-size: 2.25rem;
  padding: var(--space-4, 4px) var(--space-16, 16px);
  border: 0;
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.omran-parliament__mode-btn.is-active {
  background: var(--seat);
  color: #fff;
  font-weight: 600;
}

.omran-parliament__mode-btn:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: -3px;
}

.omran-parliament__advanced[hidden] { display: none; }

/* The basic chooser hides while advanced filtering is on. Needs the attribute
   selector: .omran-parliament__dims is display:flex and the select wrap is
   display:block on mobile, so a bare [hidden] would lose to both. */
.omran-parliament__dims[hidden],
.omran-parliament__dim-select-wrap[hidden] { display: none; }

.omran-parliament__advanced {
  margin-block-end: var(--space-24, 24px);
  padding: var(--space-16, 16px);
  border: 1px dashed var(--rule);
  background: color-mix(in oklab, var(--seat) 4%, transparent);
}

.omran-parliament__criteria {
  display: grid;
  gap: var(--space-8, 8px);
  margin-block-end: var(--space-12, 12px);
}

.omran-parliament__criterion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  align-items: center;
}

.omran-parliament__criterion-select {
  min-block-size: 2.5rem;
  min-inline-size: 0;
  flex: 1 1 12rem;
  padding: var(--space-4, 4px) var(--space-8, 8px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
}

.omran-parliament__criterion-select:focus-visible,
.omran-parliament__criterion-remove:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 1px;
}

.omran-parliament__criterion-remove {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border: 1px solid var(--rule);
  background: var(--color-bg, #fff);
  color: var(--color-text-muted, #5A6469);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.omran-parliament__criterion-remove:hover {
  border-color: var(--seat);
  color: var(--seat);
}

.omran-parliament__advanced-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  align-items: center;
}

.omran-parliament__advanced-count {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #5A6469);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — stat-led catalogue
   Desktop is a workbench (control rail · canvas · stats rail). That
   shape does not survive 375px: 206 seats across a phone puts each
   seat near 9px, against a 24px WCAG minimum and a 44px usable one.
   So below 48rem the chamber stops being the interface and becomes a
   SEAL — a glanceable emblem you tap to open full-screen — while a
   member catalogue takes over as the primary interaction.
   Tokens, palette and radius 0 are inherited unchanged.
   ═══════════════════════════════════════════════════════════════ */

/* Desktop keeps the chips; mobile uses the native picker. Neither is
   ever shown twice. */
.omran-parliament__dim-select-wrap { display: none; }.omran-parliament__mobile-list { display: none; }

@media (max-width: 47.999rem) {

  .omran-parliament {
    padding-inline: max(var(--space-16, 16px), env(safe-area-inset-inline-start));
    padding-block-end: max(var(--space-32, 32px), env(safe-area-inset-bottom));
  }

  /* ── Classification: one tap, no five-row chip wrap ────────────── */
  .omran-parliament__dims { display: none; }

  .omran-parliament__dim-select-wrap {
    display: block;
    margin-block-end: var(--space-16, 16px);
  }

  .omran-parliament__dim-select {
    inline-size: 100%;
    min-block-size: 2.75rem; /* 44px */
    padding: var(--space-8, 8px) var(--space-12, 12px);
    border: 1px solid var(--rule);
    border-radius: var(--radius, 0);
    background: var(--color-bg, #fff);
    color: inherit;
    font: inherit;
    font-size: 1rem; /* 16px — anything smaller makes iOS zoom on focus. */
  }

  /* ── The seal ───────────────────────────────────────────────────
     The chamber, reduced to an emblem. Not interactive at this size —
     pretending 9px seats are tappable would be the real failure — so
     pointer events are off and the expander does the work. */
  .omran-parliament__body {
    display: block;
  }

  .omran-parliament__canvas-wrap {
    max-inline-size: 20rem;
    margin-inline: auto;
  }

  .omran-parliament__seat,
  .omran-parliament__seat-vacant {
    pointer-events: none;
  }

  .omran-parliament__chips,
  .omran-parliament__mgmt-labels,
  .omran-parliament__note,
  .omran-parliament__policy {
    display: none;
  }
  /* ── Statistics: compact, still the same bars ──────────────────── */
  .omran-parliament__stats { margin-block-start: var(--space-24, 24px); }
  .omran-parliament__bar-label { font-size: 0.875rem; }

  /* ── Member catalogue — the primary interaction on a phone ─────── */
  .omran-parliament__mobile-list {
    display: block;
    margin: var(--space-24, 24px) 0 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--rule);
  }

  .omran-parliament__mobile-item {
    border-block-end: 1px solid var(--rule);
  }

  .omran-parliament__mobile-item[hidden] { display: none; }

  .omran-parliament__mobile-btn {
    inline-size: 100%;
    min-block-size: 3.5rem; /* 56px row — comfortably past the 44px target. */
    display: flex;
    align-items: center;
    gap: var(--space-12, 12px);
    padding: var(--space-8, 8px) var(--space-4, 4px);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation; /* Kills the 300ms tap delay. */
  }

  .omran-parliament__mobile-btn:focus-visible {
    outline: 3px solid var(--seat-ring);
    outline-offset: -3px;
  }

  .omran-parliament__mobile-photo {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper);
  }

  .omran-parliament__mobile-text {
    display: grid;
    gap: 2px;
    min-inline-size: 0; /* Without this the name refuses to truncate. */
  }

  .omran-parliament__mobile-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .omran-parliament__mobile-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #5A6469);
  }

  /* The desktop table is redundant once the catalogue exists. */
  .omran-parliament__table-wrap { display: none; }

  /* ── Member card as a sheet ─────────────────────────────────────
     Full-width, bottom-anchored: a centred dialog on a phone puts the
     content under the thumb's blind spot and the close button out of
     reach. */
  .omran-parliament__modal {
    inline-size: 100vw;
    max-inline-size: 100vw;
    max-block-size: 88svh; /* svh, not vh — vh is wrong under mobile chrome. */
    margin: auto 0 0;
    border-inline: 0;
    border-block-end: 0;
    overscroll-behavior: contain;
  }

  .omran-parliament__card { padding: var(--space-16, 16px); }
  .omran-parliament__card-groups { columns: 1; }

  .omran-parliament__card-close {
    position: static;
    inline-size: 100%;
    min-block-size: 2.75rem;
    margin-block-start: var(--space-16, 16px);
    order: 99;
  }

  /* ── Advanced criteria stack rather than squeeze ───────────────── */
  .omran-parliament__criterion { flex-direction: column; align-items: stretch; }
  .omran-parliament__criterion-select { flex: none; inline-size: 100%; font-size: 1rem; }
  .omran-parliament__criterion-remove { inline-size: 100%; }
}

@media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
  .omran-parliament__mobile-btn { transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1); }
  .omran-parliament__mobile-btn:active { background: color-mix(in oklab, var(--seat) 8%, transparent); }
}

/* ── Expanded-chart zoom (mobile) ─────────────────────────────────
   The overlay is position: fixed, so page-level pinch-zoom moves the
   visual viewport instead of letting you explore it. It needs zoom of
   its own. Docked to the bottom so it clears the thumb's reach arc and
   the home indicator. */

.omran-parliament__zoom[hidden] { display: none; }

.omran-parliament__zoom {
  position: fixed;
  z-index: 1000;
  inset-inline: 0;
  inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-16, 16px));
  display: flex;
  justify-content: center;
  gap: var(--space-8, 8px);
  pointer-events: none;
}

.omran-parliament__zoom-btn {
  pointer-events: auto;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--space-12, 12px);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 0);
  background: var(--color-bg, #fff);
  color: var(--color-text, #2D2D2D);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(45 45 45 / 0.18);
}

.omran-parliament__zoom-level {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  min-inline-size: 4rem;
}
.omran-parliament__zoom-btn:focus-visible {
  outline: 3px solid var(--seat-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {}


/* In landscape the chart gets the full viewport and the chrome shrinks
   out of its way. */
@media (orientation: landscape) and (max-height: 32rem) {  .omran-parliament__zoom {
    inset-block-end: calc(env(safe-area-inset-bottom) + var(--space-8, 8px));
  }
}

/* Fullscreen backdrop matches the paper rather than the UA's black. */
.omran-parliament__canvas-wrap:fullscreen {
  background: var(--paper);
  inline-size: 100vw;
  block-size: 100svh;
}
/* ── Desktop chamber zoom ─────────────────────────────────────────
   Same controls as mobile, but docked to the chart instead of the
   viewport. Zoom must affect the chamber ONLY — the statistics rail,
   chips and table are unrelated to it — so it scales the SVG inside
   its wrapper and the wrapper bounds and scrolls, rather than the
   page growing. */

.omran-parliament__zoom.is-inline {
  position: static;
  justify-content: flex-end;
  margin-block-end: var(--space-8, 8px);
  pointer-events: auto;
}

.omran-parliament__zoom.is-inline .omran-parliament__zoom-btn {
  min-inline-size: 2.25rem;
  min-block-size: 2.25rem;
  font-size: 1rem;
  box-shadow: none;
}

.omran-parliament__zoom.is-inline .omran-parliament__zoom-level {
  min-inline-size: 3.5rem;
  font-size: 0.75rem;
}
@media (min-width: 48rem) {
  /* Bounded so a zoomed chamber pans inside its own box instead of
     pushing the rail and the table down the page. */
  .omran-parliament__canvas-wrap.is-zoomed .omran-parliament__svg {
    margin-inline: 0;
  }

  /* At rest the whole chamber must be on screen. Framing the viewBox to the
     seats made it nearly square, so at full column width it ran past the
     fold. Bound the WIDTH -- not the height -- so the SVG still fills its own
     box and the management labels, which are positioned as percentages of
     that box, stay locked to their seats. Height then follows the real
     aspect, published by the renderer. 70svh matches the zoomed box, so
     entering zoom does not jump the page.

     Applies while zoomed too: zoom scales the SVG *inside* this box, so if the
     cap lifted on zoom the box would snap back to full column width and the
     first click would jump far more than its 10%. The box is fixed; only the
     drawing inside it grows, and .is-zoomed lets it pan. */
  .omran-parliament__canvas-wrap {
    max-inline-size: calc(70svh * var(--chart-aspect, 1.03));
  }
}


/* Dragging must not select or ghost-drag the seat images. */
.omran-parliament__canvas-wrap.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}
.omran-parliament__canvas-wrap.is-zoomed .omran-parliament__svg { -webkit-user-drag: none; }


/* Narrow charts: the labels no longer fit on one line, so let them wrap and
   pull the management rows up to make room. */
@container (max-width: 34rem) {
  .omran-parliament__mgmt-label {
    white-space: normal;
    max-inline-size: 7.5em;
  }
}

/* ── Full list: photo + clickable name ────────────────────────────
   The name is a real <button>, not a clickable row: a row gives
   keyboard users nothing to focus and screen readers nothing to
   announce. */

.omran-parliament__table-photo-cell {
  inline-size: 2.25rem;
  padding-inline: var(--space-4, 4px);
}

.omran-parliament__table-photo {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  display: block;
}

.omran-parliament__table-name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  border-block-end: 1px solid transparent;
}

.omran-parliament__table-name:hover { border-block-end-color: var(--seat); color: var(--seat); }
.omran-parliament__table-name:focus-visible { outline: 3px solid var(--seat-ring); outline-offset: 2px; }

/* The theme's global img { max-width: 100% } was collapsing these to the
   auto-laid-out cell width (~10px). Pin the cell and opt the image out of the
   global constraint. */
.omran-parliament__table-photo-cell {
  inline-size: 3rem;
  min-inline-size: 3rem;
}

.omran-parliament__table-photo {
  inline-size: 2.25rem !important;
  block-size: 2.25rem !important;
  max-inline-size: none !important;
}

/* ── Mobile member list: closed until asked for ───────────────────
   202 rows unfurled under the chart buried everything below it.
   <details> rather than a JS toggle: keyboard-accessible, announced
   as a disclosure, and it still opens with JavaScript off. */

.omran-parliament__mobile-list-wrap { display: none; }

@media (max-width: 47.999rem) {
  .omran-parliament__mobile-list-wrap {
    display: block;
    margin-block-start: var(--space-24, 24px);
    border-block-start: 1px solid var(--rule);
  }

  .omran-parliament__mobile-summary {
    min-block-size: 2.75rem;
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding-block: var(--space-8, 8px);
    font-weight: 600;
    cursor: pointer;
  }

  .omran-parliament__mobile-summary:focus-visible {
    outline: 3px solid var(--seat-ring);
    outline-offset: -3px;
  }

  .omran-parliament__mobile-count {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #5A6469);
    font-weight: 400;
  }

  /* The list itself no longer needs its own top border or spacing —
     the disclosure owns both now. */
  .omran-parliament__mobile-list {
    margin-block-start: 0;
    border-block-start: 0;
  }
}

/* ── Search suggestions ───────────────────────────────────────────
   A combobox rather than a bare filter: typing a name and getting the
   person beats typing and then hunting the dimmed chamber. */

.omran-parliament__search-field { position: relative; }

.omran-parliament__suggest[hidden] { display: none; }

.omran-parliament__suggest {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  inset-block-start: calc(100% + 2px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 20rem;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-bg, #fff);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 14px rgb(45 45 45 / 0.12);
}

.omran-parliament__suggest-item {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  padding: var(--space-8, 8px) var(--space-12, 12px);
  min-block-size: 2.75rem;
  cursor: pointer;
  border-block-end: 1px solid color-mix(in oklab, var(--rule) 45%, transparent);
}

.omran-parliament__suggest-item:last-child { border-block-end: 0; }

.omran-parliament__suggest-item:hover,
.omran-parliament__suggest-item.is-active {
  background: color-mix(in oklab, var(--seat) 8%, transparent);
}

.omran-parliament__suggest-photo {
  inline-size: 2rem;
  block-size: 2rem;
  max-inline-size: none;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--paper);
}

.omran-parliament__suggest-text { display: grid; gap: 1px; min-inline-size: 0; }

.omran-parliament__suggest-name {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omran-parliament__suggest-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #5A6469);
}


/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   MOBILE FIXES
   1. Full bleed — the site container's measure and padding cost ~15%
      of a phone's width, which the chamber cannot spare.
   2. Seats tappable again. pointer-events: none was right when the
      seal put them at 9px; full bleed plus the fullscreen view makes
      them real targets, and a seat that ignores taps reads as broken
      rather than as deliberate.
   3. Fullscreen: zoom controls, seat taps and a close affordance all
      have to survive the rotation.
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

@media (max-width: 47.999rem) {

  /* Break out of the theme container: the component owns the viewport. */
  .omran-parliament {
    max-inline-size: none;
    margin-inline: calc(50% - 50vw);
    inline-size: 100vw;
    padding-inline: var(--space-12, 12px);
  }

  .omran-parliament__canvas-wrap {
    max-inline-size: none;
    margin-inline: calc(-1 * var(--space-12, 12px));
  }

  /* Seats respond to taps. */
  .omran-parliament__seat { pointer-events: auto; }
  .omran-parliament__seat-vacant { pointer-events: none; }
  /* The member card must sit above the fullscreen overlay and its
     controls, or opening a seat from fullscreen shows nothing. */
  .omran-parliament__modal { z-index: 1100; }
  .omran-parliament__modal::backdrop { z-index: 1099; }
}


/* ── Member list disclosure ───────────────────────────────────────
   The summary read as a heading: the theme hides the native marker,
   so nothing said it could be opened. Given it sits directly under
   the outlined طھظƒط¨ظٹط± ط§ظ„ظ…ط®ط·ط· control, it needs an affordance of its
   own rather than inheriting the look of body text. */

@media (max-width: 47.999rem) {
  .omran-parliament__mobile-summary {
    list-style: none;
    justify-content: space-between;
    padding-inline: var(--space-12, 12px);
    border: 1px solid var(--rule);
    background: var(--color-bg, #fff);
    color: var(--seat);
    min-block-size: 3rem;
    /* Tapping a disclosure should not select its label. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  /* The theme hides the native triangle; supply our own. */
  .omran-parliament__mobile-summary::-webkit-details-marker { display: none; }
  .omran-parliament__mobile-summary::marker { content: ''; }

  .omran-parliament__mobile-summary::after {
    content: '';
    inline-size: 0.55rem;
    block-size: 0.55rem;
    flex: none;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    margin-block-end: 0.2rem;
  }

  .omran-parliament__mobile-list-wrap[open] .omran-parliament__mobile-summary::after {
    transform: rotate(-135deg);
    margin-block: 0.2rem 0;
  }

  .omran-parliament__mobile-list-wrap[open] .omran-parliament__mobile-summary {
    background: color-mix(in oklab, var(--seat) 8%, var(--color-bg, #fff));
  }

  .omran-parliament__mobile-list-wrap {
    border-block-start: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .omran-parliament__mobile-summary::after { transition: none; }
  }
}

/* The heading takes focus on open (see parliament.js) so the card cannot open
   scrolled to its close button; it is a programmatic target, not a tab stop,
   so it needs no focus ring of its own. */
.omran-parliament__card-name:focus { outline: none; }
.omran-parliament__card-name:focus-visible { outline: 2px solid var(--seat); outline-offset: 3px; }

/* Expanded chart is a fixed overlay, not a Fullscreen API session — the API
   promotes only its own element to the top layer, which hid the zoom controls
   and clipped the member card. Stacking is therefore explicit. */
@media (max-width: 47.999rem) {  .omran-parliament__modal { z-index: 1100; }
}