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

   Only what legilist.css has no equivalent for. The masthead, the
   headline figure and chart, the measures row, the tables and the
   pager are the shared components, unchanged, so a bill in a
   committee's record looks like the same bill on /bills.

   What is here: the official-name line, the Congress filter strip,
   the subcommittee list, and the clamp on a hearing title.
   ============================================================ */

/* a committee name is a phrase, not a sentence */
.cm-page .cm-h1 {
  max-width: 28ch;
}

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

/* The register's formal name — "Committee on Energy and Natural
   Resources" against the short name above it. Quiet, because it is
   the same thing said longer, and only shown when it differs. */
.cm-page .cm-official {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--ll-ink-3);
  font-size: 0.93rem;
  line-height: 1.5;
}

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

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

/* --- the measures row -------------------------------------------------
   Two or three here, not the system's four: a subcommittee has no
   subcommittees of its own, and a committee with nothing on file for
   this Congress gets no meetings cell rather than a nought. */
.cm-page .cm-metrics-1 { grid-template-columns: minmax(0, 1fr); }
.cm-page .cm-metrics-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-page .cm-metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

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

/* --- the Congress filter ----------------------------------------------
   Thirteen of them, so the shared tab strip scrolls sideways on a
   narrow screen rather than wrapping into four rows of stubs. */
.cm-page .cm-congress-switch {
  margin: 18px 0 2px;
}

/* --- subcommittees ----------------------------------------------------
   A ruled list, not chips: these are names of standing bodies and
   several run past forty characters, which is where a row of pills
   stops being scannable and becomes a wall. */
.cm-page .cm-subs {
  margin: 18px 0 0;
  padding: 0;
  max-width: 78ch;
  list-style: none;
  border-top: 1px solid var(--ll-line);
}

.cm-page .cm-subs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ll-line);
}

.cm-page .cm-subs a {
  color: var(--ll-accent);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.cm-page .cm-subs a:hover { text-decoration: underline; }

/* the seat count, as a figure rather than a label: "12" after a name
   reads as how many sit on it without having to say so */
.cm-page .cm-sub-n {
  flex: 0 0 auto;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- inside the tables ------------------------------------------------- */

/* the Congress a referral belongs to, under the activity that caused
   it: two facts about the same event, so they share a cell */
.cm-page .cm-congress {
  display: block;
  margin-top: 2px;
  color: var(--ll-ink-4);
  font-size: 0.84rem;
}

.cm-page .cm-meta {
  display: block;
  margin-top: 3px;
  color: var(--ll-ink-4);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* A hearing title is the whole agenda — "Business meeting to consider
   S.365 and H.R.1729, bills to amend the John D. Dingell, Jr.
   Conservation, Management, and Recreation Act to allow…" runs past
   three hundred characters and would make every row a paragraph. Four
   lines, with the rest still in the markup for a crawler and for
   anyone copying the text out. */
.cm-page .cm-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cm-page [data-list="nm"] .cm-clamp {
  -webkit-line-clamp: 2;
  color: var(--ll-ink-3);
  font-size: 0.9rem;
}

/* --- the member list, clamped -----------------------------------------
   Thirty seats is most of a screen before the subcommittees are
   reached. Clamped with a fade and a control, the same way the bill
   page handles a long subject list. */
.cm-page .cm-members.is-clamped {
  position: relative;
  max-height: 27rem;
  overflow: hidden;
}

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

/* --- a meeting's documents --------------------------------------------
   The control sits under the subject, reading as what it opens. The
   panel below is the bill page's roll call in a different hat. */
.cm-page .cm-doc-btn {
  color: var(--ll-accent);
  font-weight: 600;
  text-decoration: none;
}

.cm-page .cm-doc-btn:hover { text-decoration: underline; }

.cm-page .cm-doc-btn::after {
  content: "\203A";
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.cm-page .cm-meeting-row.is-open .cm-doc-btn::after {
  transform: rotate(-90deg);
}

.cm-page .cm-meeting-row.is-open > td { border-bottom: 0; }

.cm-page .cm-doc-detail[hidden] { display: none; }

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

.cm-page .cm-doc-empty {
  margin: 0;
  padding: 16px 18px;
  color: var(--ll-ink-3);
  font-size: 0.92rem;
}

/* A markup can carry fifty papers — one per bill before the
   committee. Two columns where there is room, and a ceiling so
   opening one costs a fixed amount of page however long it runs. */
.cm-page .cm-docs {
  margin: 0;
  padding: 16px 18px;
  max-height: 60vh;
  column-width: 320px;
  column-gap: 32px;
  overflow-y: auto;
  list-style: none;
}

.cm-page .cm-docs li {
  padding: 6px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  break-inside: avoid;
}

.cm-page .cm-docs a {
  color: var(--ll-ink);
  text-decoration: none;
}

.cm-page .cm-docs a:hover {
  color: var(--ll-accent);
  text-decoration: underline;
}

.cm-page .cm-doc-kind {
  display: block;
  margin-top: 1px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
}

/* .ll-section pads above itself and not below, which is right where
   one section follows another — the next heading brings its own 46px.
   The last list on this page is followed by the support block, which
   leads with a rule of its own, so the pager ended up sitting on it.
   The pager carries its own trailing space instead. */
.cm-page .cm-pager {
  margin-bottom: 20px;
}

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

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

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

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

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

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

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

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

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

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

/* --- narrow ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* In card form every cell prints a separating middot before it. A
     cell with nothing in it — the role of a member who holds none —
     printed the middot anyway and left a double. */
  .cm-page .ll-directory td:empty {
    display: none;
  }

  .cm-page .cm-congress {
    display: inline;
    margin: 0 0 0 6px;
  }

  /* the documents panel is not a card like the rows around it — it is
     a panel belonging to the row above, so it opts out and runs full
     width */
  .cm-page .cm-doc-detail {
    display: block;
    padding: 0;
    border: 0;
  }

  .cm-page .cm-doc-detail[hidden] { display: none; }

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

  .cm-page .cm-docs {
    column-width: auto;
    padding: 14px;
  }
}