/* ============================================================
   legislator-ll.css — a member's record

   Only what legilist.css has no equivalent for. The masthead,
   the portrait, the measures row, the tables and the pager are
   all the shared components, unchanged, so a bill in a member's
   record looks like the same bill on /bills.
   ============================================================ */

/* --- masthead ------------------------------------------------------
   The portrait is identification, not a hero image: it sits in the
   tools slot at the size exec/president.php set, and on a phone it
   moves above the name rather than shrinking to a token. */
.leg-page .ll-masthead-tools {
  align-items: flex-start;
}

/* The shared portrait is 112px, set for exec/president.php where the
   byline runs long and the slot is nearly filled. A member's byline is
   shorter, which left the face stranded as a thumbnail at the far edge
   of a wide masthead. Larger only here, and only on a wide screen:
   this is the one record where the face is what a reader scans for,
   and the source portraits are 200px native so nothing is upscaled. */
@media (min-width: 861px) {
  .leg-page .ll-portrait {
    width: 168px;
    height: 168px;
  }
}

/* office, telephone, official site — a row of plain facts under the
   byline, not a stack of icons */
/* One fact per line. They were separated by middots on a single
   wrapping row, which put a leading dot at the start of any line the
   address pushed over — and a Senate office address is long enough to
   do that every time. */
.leg-page .leg-contact {
  display: block;
  margin: 14px 0 0;
  max-width: 60ch;
  color: var(--ll-ink-3);
  font-size: 0.9rem;
  line-height: 1.6;
}

.leg-page .leg-contact span {
  display: block;
}

.leg-page .leg-contact a {
  color: var(--ll-accent);
  font-weight: 600;
}

.leg-page .leg-tools {
  margin-top: 20px;
}

/* the tag on a member who has left: a statement of fact, set in the
   quiet grey the system uses for one, never in red */
.leg-page .ll-h1-record .ll-tag {
  position: relative;
  top: -0.35em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}

.leg-page .pin-btn.is-pinned {
  border-color: var(--ll-accent);
  color: var(--ll-accent);
}

/* the measures row is three here, not the system's four: the fourth
   was the headline figure repeated */
.leg-page .leg-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* a former member has no committee cell: see legislator.php */
.leg-page .leg-metrics-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .leg-page .leg-metrics {
    grid-template-columns: 1fr;
  }
}

/* --- the output chart ----------------------------------------------
   The columns are the member; the rule across each one is the median
   for their chamber in that Congress. A line rather than a second set
   of columns: the member is the subject and the median is the scale
   they are read against, so it sits behind rather than beside. */
.leg-page .leg-chart .ll-bar-g {
  position: relative;
}

.leg-page .leg-median {
  position: absolute;
  right: -1px;
  bottom: var(--leg-median-h, 0%);
  left: -1px;
  height: 0;
  border-top: 2px dotted var(--ll-ink-3);
  pointer-events: none;
}

/* the column in view carries the accent, so its median has to stay
   legible against it */
.leg-page .leg-chart .ll-bar-g-now .leg-median {
  border-top-color: var(--ll-ink-4);
}

.leg-page .leg-chart-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
}

.leg-page .leg-key-median {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 2px dotted var(--ll-ink-3);
}

/* --- biography -----------------------------------------------------
   Official biographies run from two lines to several screens. Clamped
   with a fade and a control, so a long one does not bury the record
   underneath it. */
/* One measure for every piece of prose on the page.
   .ll-sub carries no max-width in legilist.css, which is right on a
   directory page where it is one line, but this page has a two-line
   intro over each of four sections. Left to run, those set at ~1150px
   while the biography sat at 74ch — the short text wide and the long
   text narrow, which made the biography look pinched rather than
   measured. Both are 78ch now, the same measure .ll-doc uses, so the
   prose shares one left and right edge all the way down. */
.leg-page .ll-sub,
.leg-page .ll-coverage {
  max-width: 78ch;
}

.leg-page .leg-bio {
  max-width: 78ch;
  color: var(--ll-ink-2);
  font-size: 0.97rem;
  line-height: 1.75;
}

.leg-page .leg-bio p {
  margin: 0 0 1em;
}

.leg-page .leg-bio p:last-child {
  margin-bottom: 0;
}

.leg-page .leg-bio a {
  color: var(--ll-accent);
  font-weight: 600;
}

.leg-page .leg-bio.is-clamped {
  max-height: 16rem;
  overflow: hidden;
}

.leg-page .leg-bio.is-clamped::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6rem;
  background: linear-gradient(to bottom, rgba(250, 249, 247, 0), var(--ll-bg, #faf9f7));
  pointer-events: none;
}

/* --- what they work on, and who with -------------------------------
   Two ranked lists side by side. Bars rather than a table: the figures
   are a ranking, and the length of the row says more at a glance than
   the number does. The number stays, because a bar without one is a
   shape rather than a fact. */
.leg-page .leg-work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin-top: 22px;
}

.leg-page .leg-work-head {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ll-line-strong);
  color: var(--ll-ink-3);
  font-size: 0.88rem;
  font-weight: 600;
}

.leg-page .leg-rank {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leg-page .leg-rank li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 42px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ll-line);
}

.leg-page .leg-rank li:last-child {
  border-bottom: 0;
}

.leg-page .leg-rank-name {
  min-width: 0;
  color: var(--ll-ink-2);
  font-size: 0.93rem;
  line-height: 1.4;
}

.leg-page .leg-rank-name a {
  color: var(--ll-accent);
  font-weight: 600;
  text-decoration: none;
}

.leg-page .leg-rank-name a:hover {
  text-decoration: underline;
}

/* party and state after a member's name: identification, not a label
   to read — the name is what the eye is looking for */
.leg-page .leg-rank-meta {
  margin-left: 7px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.leg-page .leg-rank-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ll-line);
}

.leg-page .leg-rank-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ll-accent);
  opacity: 0.55;
}

.leg-page .leg-rank-n {
  color: var(--ll-ink-3);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
}

.leg-page .leg-work-note {
  margin: 12px 0 0;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .leg-page .leg-work {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* --- the four lists ------------------------------------------------ */

/* The .ll-search panel is right on a directory page, where that form
   is what the page is for: a ruled card, generous padding, a labelled
   field for each control. Here it is a filter on one of four sections
   and it appears twice, so two of those cards sat mid-page doing the
   work of a toolbar. The card comes off and the controls run inline:
   same fields, same focus ring, a quarter of the furniture. */
.leg-page .leg-filter {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.leg-page .leg-filter .ll-fields {
  grid-template-columns: minmax(0, 22rem) minmax(0, 11rem) auto;
  gap: 8px;
  align-items: center;
}

/* the labels go: "Search these bills" over a box reading "Title,
   status or bill number" said the same thing twice */
.leg-page .leg-filter .ll-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the toolbar size: one height for the input, the select and the
   button, so the three sit on the same baseline */
.leg-page .leg-filter .ll-field input,
.leg-page .leg-filter .ll-field select {
  height: 36px;
  padding: 0 11px;
  font-size: 0.9rem;
}

.leg-page .leg-filter .ll-btn {
  height: 36px;
  padding: 0 14px;
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .leg-page .leg-filter .ll-fields {
    grid-template-columns: 1fr;
  }
}

/* a list being swapped stands down rather than disappearing, so the
   page does not jump while the next page is on its way */
.leg-page .leg-list {
  transition: opacity 120ms ease;
}

.leg-page .leg-list.is-loading {
  opacity: 0.45;
}

/* how the member answered. Yea and Nay are the record's own words,
   and they are weighted rather than coloured: green and red would
   read as right and wrong, which is not this site's job. */
.leg-page .leg-cast {
  font-weight: 600;
  color: var(--ll-ink-3);
}

.leg-page .leg-cast-yea,
.leg-page .leg-cast-nay {
  color: var(--ll-ink);
}

.leg-page .leg-cast-nay {
  font-style: italic;
}

/* --- the ask -------------------------------------------------------
   After the record, not inside it, and in the page's own type. The old
   card was a filled panel with its own colours sitting between the
   biography and the votes. */
.leg-page .leg-support {
  border-top: 1px solid var(--ll-line-strong);
  padding-top: 26px;
}

.leg-page .leg-support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
}

.leg-page .leg-support-copy .ll-sub {
  max-width: 52ch;
  margin-bottom: 0;
}

.leg-page .leg-cadence {
  display: inline-flex;
  margin-bottom: 12px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 8px;
  overflow: hidden;
}

.leg-page .leg-cadence-btn {
  padding: 7px 15px;
  border: 0;
  background: transparent;
  color: var(--ll-ink-3);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.leg-page .leg-cadence-btn + .leg-cadence-btn {
  border-left: 1px solid var(--ll-line-strong);
}

.leg-page .leg-cadence-btn.is-active {
  background: var(--ll-accent-soft);
  color: var(--ll-accent);
}

.leg-page .leg-amounts {
  display: flex;
  gap: 8px;
}

.leg-page .leg-support-note {
  margin: 12px 0 0;
  max-width: 34ch;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* --- share ---------------------------------------------------------- */
.leg-share[hidden] { display: none; }

.leg-share {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.leg-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 22, 0.55);
}

.leg-share-panel {
  position: relative;
  width: min(100%, 420px);
  padding: 22px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 12px;
  background: var(--ll-surface);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.5);
}

.leg-share-card {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid var(--ll-line);
  border-radius: 8px;
}

.leg-share-name {
  margin-bottom: 14px;
  color: var(--ll-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.leg-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leg-share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ll-ink-3);
  cursor: pointer;
}

.leg-share-close:hover {
  background: var(--ll-line);
  color: var(--ll-ink);
}

/* --- narrow ---------------------------------------------------------- */
@media (max-width: 860px) {
  .leg-page .leg-support-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .leg-page .leg-support-note {
    max-width: none;
  }
}

@media (max-width: 720px) {
  /* the face before the name, at the size it is legible */
  .leg-page .ll-masthead-tools {
    order: -1;
    margin-bottom: 14px;
  }

}