/* ============================================================
   congress-ll.css — the Congress landing page

   Most of this page is the ll- system as it stands: the masthead,
   the section headings, the index rows, the tables. What is here is
   the search control and the figures band, which the system has no
   equivalent for, plus the two-up layout at the foot.

   Replaces three stylesheets this page used to load together —
   searchrefresh.css, analytics.css and congress.css — none of which
   is loaded here any more.
   ============================================================ */

.cg-page .ll-masthead-copy .ll-lede {
  max-width: 56ch;
  margin-top: 16px;
}

/* --- search ------------------------------------------------------
   The control itself rather than a link to a search page: this is
   what most people come to the section to do. It sits where the
   Executive landing puts its one button. No typeahead, because the
   nav already carries that component and its element ids cannot
   appear twice on one page.
   ---------------------------------------------------------------- */
.cg-search {
  width: min(440px, 100%);
}

.cg-search label {
  display: block;
  margin-bottom: 8px;
  color: var(--ll-ink-3);
  font-size: 0.9rem;
}

.cg-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cg-search-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 8px;
  background: var(--ll-surface);
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 1rem;
}

.cg-search-row input::placeholder {
  color: var(--ll-ink-4);
}

.cg-search-row input:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

.cg-search-row button {
  padding: 14px 28px;
  border: 1px solid var(--ll-accent);
  border-radius: 8px;
  background: var(--ll-accent);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 120ms ease;
}

.cg-search-row button:hover {
  filter: brightness(1.15);
}

/* the examples read as a sentence rather than a row of chips: four
   pills under a search box is the look of a filter, and these are
   not filters, they are suggestions */
.cg-examples {
  margin: 10px 0 0;
  color: var(--ll-ink-4);
  font-size: 0.88rem;
  line-height: 1.5;
}

.cg-examples a {
  color: var(--ll-accent);
  text-decoration: underline;
  text-decoration-color: var(--ll-accent-wash);
  text-underline-offset: 2px;
}

.cg-examples a:hover {
  text-decoration-color: var(--ll-accent);
}

/* the note on the current Congress's column, under its name */
.ll-headline-chart .ll-bar-tip em {
  display: block;
  margin-top: 2px;
  color: #b9c6d6;
  font-size: 0.7rem;
  font-style: normal;
}

/* links in running text: the section colour, never the browser's blue,
   as on Lobbying */
.ll-sub a, .ll-coverage a { color: var(--ll-accent); font-weight: 600; }

/* --- the tables ---------------------------------------------------- */
.cg-click-row {
  cursor: pointer;
}

/* the bill's title leads, with the action it took underneath: two
   lines in one cell, because they are one fact */
.cg-title {
  display: block;
  color: var(--ll-ink);
  font-weight: 600;
  line-height: 1.4;
}

.cg-action {
  display: block;
  margin-top: 3px;
  color: var(--ll-ink-3);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cg-col-bill {
  width: 1%;
  white-space: nowrap;
}

.cg-col-date {
  width: 1%;
  white-space: nowrap;
}

.cg-col-chamber,
.cg-col-type {
  width: 1%;
  white-space: nowrap;
  color: var(--ll-ink-3);
}

/* --- two up at the foot -------------------------------------------- */
.cg-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

/* --- narrow --------------------------------------------------------- */
@media (max-width: 980px) {
  .cg-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 720px) {
  .cg-search {
    width: 100%;
  }

  .cg-search-row input,
  .cg-search-row button {
    flex: 1 1 100%;
  }

  /* the date is the first thing to go: the lists are already in date
     order, so the exact day is detail rather than structure */
  .cg-col-date {
    display: none;
  }

  .cg-col-type {
    display: none;
  }
}