/* ============================================================
   bill-ll.css — one bill's record

   Only what legilist.css has no equivalent for. The masthead,
   sections, tables and pager are the shared components.

   What is here: the progress track, the actions timeline, the
   subject list, and the share sheet.
   ============================================================ */

/* a bill title is a sentence, not a name */
.bl-page .bl-h1 {
  max-width: 36ch;
}

/* the years, and whether that Congress has risen: context on the
   kicker, in the kicker's quieter ink so the bill number still leads */
.bl-page .bl-kicker-years {
  margin-left: 2px;
  color: var(--ll-ink-4);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* "for Sen. Lee" under the member who moved an amendment */
.bl-page .bl-onbehalf {
  display: block;
  margin-top: 2px;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

.bl-page .bl-tag {
  margin-left: 6px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
  font-weight: 600;
}

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

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

/* The masthead already pads 32px below itself, and a section pads 46px
   above. On the directory pages the tab strip sits in that space and
   uses it; with the strip gone from a record page the two paddings
   stack into 78px of nothing under the buttons. */
.bl-page .ll-masthead + .ll-section {
  padding-top: 14px;
}

/* --- progress --------------------------------------------------------
   Five stages across the page, each with the date it happened. A
   reached stage is in the silo colour and sits on a solid rule; one
   not reached is grey on a dotted one, because "not yet" and "never"
   look the same in the record and the page should not pretend to tell
   them apart. */
/* As many columns as the measure has stages, not always five: a
   simple resolution has two and a concurrent one three. */
.bl-page .bl-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.bl-page .bl-stage {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 13px;
  border-top: 3px solid var(--ll-line);
}

.bl-page .bl-stage.is-done {
  border-top-color: var(--ll-accent);
}

/* a veto is a stop, not a step: it keeps the weight of a reached
   stage so it cannot be missed, without borrowing a warning colour */
.bl-page .bl-stage.is-halted {
  border-top-style: dashed;
  border-top-color: var(--ll-ink-3);
}

.bl-page .bl-stage-label {
  color: var(--ll-ink-4);
  font-size: 0.88rem;
  font-weight: 600;
}

.bl-page .bl-stage.is-done .bl-stage-label,
.bl-page .bl-stage.is-halted .bl-stage-label {
  color: var(--ll-ink);
}

.bl-page .bl-stage-date {
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

.bl-page .bl-stage.is-done .bl-stage-date {
  color: var(--ll-accent);
  font-weight: 600;
}

/* the sentence the record itself leads with. In the masthead now,
   under the tools, so the reader has the present before the history */
.bl-page .bl-latest {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 22px 0 0;
  padding: 14px 16px;
  max-width: 78ch;
  border-left: 3px solid var(--ll-accent);
  background: var(--ll-surface);
}

.bl-page .bl-latest span {
  color: var(--ll-ink-4);
  font-size: 0.82rem;
}

.bl-page .bl-latest b {
  color: var(--ll-ink);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.5;
}

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

.bl-page .bl-summary p { margin: 0 0 1em; }
.bl-page .bl-summary p:last-child { margin-bottom: 0; }

.bl-page .bl-summary.is-clamped {
  max-height: 18rem;
  overflow: hidden;
}

.bl-page .bl-summary.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;
}

/* --- subjects --------------------------------------------------------
   A bill carries twenty of these. A wrapped list of plain links rather
   than chips: twenty pills is a cloud, and these are a vocabulary. */
.bl-page .bl-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 18px 0 0;
  padding: 0;
  max-width: 90ch;
  list-style: none;
}

.bl-page .bl-subjects li {
  font-size: 0.92rem;
  line-height: 1.4;
}

.bl-page .bl-subjects li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 10px;
  color: var(--ll-line-strong);
}

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

.bl-page .bl-subjects a:hover { text-decoration: underline; }
.bl-page .bl-subjects span { color: var(--ll-ink-3); }

.bl-page .bl-subjects.is-clamped {
  position: relative;
  max-height: 9.5rem;
  overflow: hidden;
}

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

/* --- the actions timeline --------------------------------------------
   An action is a dated sentence, so it is set as one: the date in the
   margin, the clerk's wording running as text. Ruled into table cells
   it read as data, which made the dates the subject when the sentence
   is. */
.bl-page .bl-steps {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ll-line);
}

.bl-page .bl-step {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ll-line);
}

.bl-page .bl-step-date {
  color: var(--ll-ink-4);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.bl-page .bl-step-text {
  max-width: 78ch;
  color: var(--ll-ink-2);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* the text versions use the same timeline, and their links are the
   section colour rather than the browser's blue */
.bl-page .bl-step-text a {
  color: var(--ll-accent);
  font-weight: 600;
  text-decoration: none;
}

.bl-page .bl-step-text a:hover { text-decoration: underline; }

/* --- recorded votes ---------------------------------------------------
   The result is the clerk's wording — "Cloture Motion Agreed to" — and
   the tally sits under it as the figure that wording stands for. Not a
   column of its own: on a phone the fourth column is the date, and the
   tally belongs with the result it describes. */
.bl-page .bl-tally {
  display: block;
  margin-top: 2px;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

/* --- a roll call, opened out -------------------------------------------
   The question is the control: it reads as a link because it is one,
   and pressing it drops the names in under the row. */
.bl-page .bl-roll-btn {
  color: var(--ll-accent);
  font-weight: 600;
  text-decoration: none;
}

.bl-page .bl-roll-btn:hover { text-decoration: underline; }

.bl-page .bl-roll-btn::after {
  content: "\203A";
  display: inline-block;
  margin-left: 7px;
  color: var(--ll-ink-4);
  font-weight: 700;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.bl-page .bl-roll-row.is-open .bl-roll-btn::after {
  transform: rotate(-90deg);
}

.bl-page .bl-roll-row.is-open > td {
  border-bottom: 0;
}

.bl-page .bl-roll-detail[hidden] { display: none; }

.bl-page .bl-roll-detail > td {
  padding: 4px 0 8px;
  background: var(--ll-accent-soft);
  box-shadow: inset 3px 0 0 var(--ll-accent);
}

.bl-page .bl-roll-empty {
  margin: 0;
  padding: 18px;
  color: var(--ll-ink-3);
  font-size: 0.93rem;
}

/* Four columns of names, the way a newspaper prints a division. A
   table with "Yea" repeated four hundred times says less and takes
   four times the room. */
.bl-page .bl-roll-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 30px;
  padding: 18px;
  /* A House division is 435 names: without a ceiling the panel pushes
     five screens of page below it and the reader loses the bill.
     Capped and scrolled, so opening a roll call costs a fixed amount
     of room however big the chamber is. */
  max-height: 68vh;
  overflow-y: auto;
}

.bl-page .bl-roll-head {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ll-line-strong);
  color: var(--ll-ink-3);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bl-page .bl-roll-head .ll-num {
  margin-left: 4px;
  color: var(--ll-accent);
}

/* Sixty names in a single file is a column a screen and a half long.
   Within its group the list flows into as many sub-columns as the
   width allows, so a Senate division fits on one screen. */
.bl-page .bl-roll-names {
  margin: 0;
  padding: 0;
  column-width: 158px;
  column-gap: 20px;
  list-style: none;
}

.bl-page .bl-roll-names li {
  padding: 3px 0;
  color: var(--ll-ink-2);
  font-size: 0.89rem;
  line-height: 1.45;
  break-inside: avoid;
}

.bl-page .bl-roll-names a {
  color: var(--ll-ink);
  text-decoration: none;
}

.bl-page .bl-roll-names a:hover {
  color: var(--ll-accent);
  text-decoration: underline;
}

/* --- amendments --------------------------------------------------------
   The status is the register's own sentence and runs long, which left
   it taking half the row and squeezing the sponsor's name onto two
   lines. Capped, and set in the quieter ink: the name is what the eye
   is looking for. */
.bl-page [data-list="am"] td:nth-child(3) {
  min-width: 14ch;
}

.bl-page [data-list="am"] td:last-child {
  max-width: 36ch;
  color: var(--ll-ink-3);
  font-size: 0.9rem;
}

/* --- counts beside a heading ------------------------------------------ */
.bl-page .bl-count {
  margin-left: 4px;
  color: var(--ll-ink-4);
  font-size: 1rem;
  font-weight: 600;
}

.bl-page .bl-list { transition: opacity 120ms ease; }
.bl-page .bl-list.is-loading { opacity: 0.45; }

/* --- show more --------------------------------------------------------
   One control, not a row of page numbers: a bill's record is
   continuous, and the reader wants the next twenty under the twenty
   they have, not page six of a timeline. */
.bl-page .bl-more {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.bl-page .bl-more-note {
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

/* when everything is on screen the note stands alone */
.bl-page > .ll-section p.bl-more-note,
.bl-page .bl-list > .bl-more-note {
  display: block;
  margin: 16px 0 0;
}

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

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

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

.bl-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);
}

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

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

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

.bl-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;
}

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

/* --- narrow ------------------------------------------------------------ */
@media (max-width: 860px) {
  /* five stages do not fit a phone; they stack, and the rule moves to
     the left edge so the column still reads as a sequence */
  .bl-page .bl-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bl-page .bl-stage {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0 11px 14px;
    border-top: 0;
    border-left: 3px solid var(--ll-line);
  }

  .bl-page .bl-stage.is-done { border-left-color: var(--ll-accent); }
  .bl-page .bl-stage.is-halted {
    border-left-style: dashed;
    border-left-color: var(--ll-ink-3);
  }
}

@media (max-width: 720px) {
  .bl-page .bl-step {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Below 640px a directory table stops being a table and each row
   becomes a card. The opened roll call is not a row of that kind — it
   is a panel belonging to the row above — so it opts out of the card
   rules and runs full width. */
@media (max-width: 640px) {
  .bl-page .bl-roll-detail {
    display: block;
    padding: 0;
    border: 0;
  }

  .bl-page .bl-roll-detail[hidden] { display: none; }

  .bl-page .bl-roll-detail > td {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    font-size: inherit;
  }

  .bl-page .bl-roll-groups {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px 14px;
  }

  /* In card form every cell prints a separating middot before it. A
     cell with nothing in it — the "Original" flag on a cosponsor who
     was not one — printed the middot anyway and left a double. */
  .bl-page .ll-directory td:empty {
    display: none;
  }

  /* In card form the row is one wrapping line, so the tally joins the
     result rather than dropping below it and pushing the date onto a
     line of its own behind a stray middot. */
  .bl-page .bl-tally {
    display: inline;
    margin: 0 0 0 7px;
  }
}