/* ==========================================================================
   Who represents you.

   A directory page, so the design job is legibility under repetition: nine or
   eleven near-identical blocks that a reader scans for one name and then acts
   on. Three consequences run through everything below.

     1. The contact routes are the content. The photograph is a recognition
        aid, so it stays small and never pushes the email address below the
        fold on a phone.

     2. Every row is a label/value pair on a two-column grid at the width where
        that fits, and stacks below it. Labels are set in the mono face, which
        is what this site uses for anything read as data rather than prose.

     3. Nothing here uses the thermal ramp's status colours. Those mean
        operational / under construction / proposed / reported, and letting a
        supervisor's party badge borrow one of them would put a meaning on the
        page that the legend does not carry. Party is set in the neutral ink.
   ========================================================================== */

/* ---- The finder ---------------------------------------------------------- */

.reps-finder {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

.reps-finder__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.reps-route__field {
  margin-bottom: 0;
}

/* The input and its button sit on one line only when the input still has room
   to show a street address. Below that the button takes the full width, which
   is the larger tap target anyway. */
.reps-route__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reps-route__row .input,
.reps-route__row .select {
  flex: 1 1 14rem;
  min-width: 0;
}

.reps-route__row .btn {
  flex: 1 0 auto;
}

@media (min-width: 480px) {
  .reps-route__row .btn {
    flex: 0 0 auto;
    min-width: 7rem;
  }
}

/* A rule with the word sitting in the gap — the three routes are alternatives,
   not steps, and a numbered list would say the wrong thing. */
.reps-finder__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.reps-finder__or::before,
.reps-finder__or::after {
  content: "";
  flex: 1;
  height: var(--rule-width);
  background: var(--rule);
}

/* ---- Status -------------------------------------------------------------- */

.reps-status {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Empty until something has happened; an empty bordered strip reads as a
   broken component. */
.reps-status:empty {
  display: none;
}

.reps-status--ok,
.reps-status--warning,
.reps-status--error {
  padding-left: var(--space-3);
  border-left: var(--rule-heavy) solid var(--border-strong);
}

.reps-status--ok {
  border-left-color: var(--accent);
  color: var(--text);
}

.reps-status--warning {
  border-left-color: var(--warning);
  color: var(--text);
}

.reps-status--error {
  border-left-color: var(--danger);
  color: var(--danger);
  font-weight: var(--weight-semibold);
}

/* ---- The result ---------------------------------------------------------- */

.reps-result__head {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  /* Focus lands here after a lookup, so the ring has to be visible even though
     a heading is not normally focusable. */
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.reps-result__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.reps-result__outside {
  padding: var(--space-3) var(--space-4);
  border-left: var(--rule-heavy) solid var(--warning);
  background: var(--warning-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

.reps-group {
  margin-bottom: var(--space-7);
}

.reps-group__title {
  font-family: var(--font-display);
  font-stretch: var(--width-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-heavy) solid var(--text);
  margin-bottom: var(--space-4);
}

.reps-group__note {
  padding: var(--space-3) var(--space-4);
  border-left: var(--rule-heavy) solid var(--warning);
  background: var(--warning-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

/* ---- One official -------------------------------------------------------- */

.rep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 780px) {
  .rep-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rep-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  background: var(--bg-raised);
}

.rep-card__figure {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 90px;
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border);
  overflow: hidden;
}

/* The initials sit underneath the photograph rather than replacing it, so the
   fallback needs no layout change when js/representatives.js removes an <img>
   whose file the county has taken down. */
.rep-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
}

.rep-card__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rep-card__body {
  min-width: 0;
  flex: 1 1 auto;
}

.rep-card__role {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-1);
}

.rep-card__scope {
  display: block;
  font-weight: var(--weight-normal);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-subtle);
}

.rep-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.rep-card__party {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  color: var(--text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.rep-card__elected,
.rep-card__nocontact {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin: 0 0 var(--space-2);
}

.rep-card__nocontact {
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ---- Contact routes ------------------------------------------------------ */

.rep-contacts {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: var(--rule-width) solid var(--rule);
}

.rep-contact {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: var(--rule-width) solid var(--rule);
}

@media (min-width: 560px) {
  .rep-contact {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
  }
}

.rep-contact__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* Email addresses and county URLs are long and the viewport is 375px wide at
   its narrowest. Breaking mid-token is ugly; a page that scrolls sideways is
   worse. */
.rep-contact__value {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.rep-contact__value a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.rep-contact__address {
  font-style: normal;
  line-height: var(--leading-normal);
  color: var(--text-muted);
  display: block;
}

.rep-copy {
  appearance: none;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.rep-copy:hover {
  border-color: var(--text);
  color: var(--text);
}

.rep-copy.is-copied {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Provenance ---------------------------------------------------------- */

.reps-asof {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}