/* ==========================================================================
   /mps-performance/constituencies/ — the 290-seat directory.
   Loaded via {% block extra_css %}. Tokens and hsl() only, no raw #hex (the
   design linter forbids hex in app CSS).

   Every link here carries a class on purpose: core.css's
   `.site-content a:not([class])` gives bare links prose styling (red,
   underlined) and out-ranks a component rule such as `.pills a`.
   ========================================================================== */

html:has(.ci-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.ci-page) { scroll-behavior: auto; } }

/* ---- Search: a full-width field, not a 237px box that cut off its own hint ---- */
.ci-search {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}
.ci-search__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}
.ci-search__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ci-search__box { position: relative; flex: 1 1 18rem; min-width: 0; }
.ci-search__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--colour-text-muted);
  pointer-events: none;
}
.ci-search__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 2 + 1rem);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--colour-text);
  background: var(--colour-bg);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-pill);
}
.ci-search__input::placeholder { color: var(--colour-text-muted); opacity: 1; }
.ci-search__btn { min-height: 3rem; padding-inline: var(--space-6); }

.ci-note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--colour-secondary);
  background: var(--colour-secondary-alpha-10);
  border-radius: var(--radius-sm);
}

/* ---- Count + key for the bars ---- */
.ci-summary { margin: 0 0 var(--space-4); }
.ci-summary__count { margin: 0 0 var(--space-1); font-size: var(--text-base); color: var(--colour-text); }
.ci-summary__key {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  max-width: var(--measure-lead);
}
.ci-key-bar {
  flex: 0 0 1.5rem;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--colour-secondary);
  transform: translateY(-2px);
}

/* ---- Jump to a county ---- */
.ci-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--colour-border);
}
.ci-jump__link {
  padding: 2px var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--colour-text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.ci-jump__link:hover { color: var(--colour-primary); background: var(--colour-primary-alpha-10); }

/* ---- One card per county ---- */
.ci-county {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-top: 4px solid var(--colour-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: var(--space-6);
}
.ci-county__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.ci-county__title { margin: 0; font-size: var(--text-xl); }
.ci-county__link { color: var(--colour-text); text-decoration: none; }
.ci-county__link:hover { color: var(--colour-primary); text-decoration: underline; text-underline-offset: 0.18em; }
.ci-county__count {
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--colour-primary);
  background: var(--colour-primary-alpha-10);
  border-radius: var(--radius-pill);
}

/* ---- Seat tiles: name on one line, voters on the next, never glued ---- */
.ci-seats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-seats > li { display: flex; min-width: 0; }
.ci-seat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--colour-text);
  text-decoration: none;
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.ci-seat:hover {
  color: var(--colour-text);
  background: var(--colour-bg);
  border-color: var(--colour-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.ci-seat:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.ci-seat__name {
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.ci-seat:hover .ci-seat__name { color: var(--colour-primary); }
.ci-seat__voters {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--colour-text);
}
.ci-seat__unit { color: var(--colour-text-muted); }
.ci-seat__voters--none { color: var(--colour-text-muted); font-style: italic; }
.ci-seat__bar {
  display: block;
  height: 6px;
  margin-top: var(--space-2);
  background: var(--colour-lighter);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ci-seat__fill {
  display: block;
  height: 100%;
  background: var(--colour-secondary);
  border-radius: var(--radius-pill);
}

@media (max-width: 559px) {
  .ci-search, .ci-county { padding-inline: var(--space-4); }
  .ci-seats { grid-template-columns: 1fr; }
}

@media print {
  .ci-search, .ci-jump { display: none; }
  .ci-county { box-shadow: none; break-inside: avoid; }
}