/* Credolex, the per-state pages at /requirements.
   Loaded after styles.css and blog.css, and it adds one thing those two do
   not have: a table that stops being a table.

   The blog's tables scroll sideways inside their wrapper, which is the right
   answer for a fifty-row grid of state survey data that nobody reads on a
   phone. These tables are read on a phone, by a director of nursing standing
   in a corridor, and a three-column table that scrolls sideways on a 380px
   screen hides the third column, which is the citation, which is the entire
   reason the page exists. So under 640px each row becomes a card and each
   cell says which column it came from.

   No new palette, no new type scale, no components. Everything here reaches
   for the tokens in styles.css. */

/* ---------- The answer, before any preamble ----------
   The first thing under the h1 and the only paragraph on the page set at this
   size. A reader who reads this and nothing else should have the answer. */
.rq-answer {
  font-size: 18.5px;
  line-height: 1.58;
  color: #2A3644;
  margin: 0 0 14px;
  max-width: 68ch;
  text-wrap: pretty;
}

/* The page is one column: there is no contents rail, because the thing to
   scan is the table itself and a rail beside it would compete with it.

   blog.css caps every direct child of .bl-body at 72ch, which is the right
   measure for a sentence and slightly too tight for a three-column table with
   a note under the first cell. So the sections get a little more room and the
   prose inside them keeps the measure it should have. */
.rq-body > * { max-width: 84ch; }
.rq-body p, .rq-body ul.bl-list { max-width: 72ch; }
.rq-body > section { margin: 0 0 8px; }

/* The hub is a grid of cards rather than a column of prose, so nothing on it
   is capped except the sentences. */
.rq-hub > * { max-width: none; }

.rq-body h2 { scroll-margin-top: 24px; }

.rq-body h3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A6774;
  margin: 26px 0 0;
}

/* ---------- The table ---------- */

.rq-tablewrap {
  position: relative;
  margin: 16px 0 26px;
  border: 1px solid #E4E0D6;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: clip;
}

/* The one gold rule, along the top edge, fading out. Same gesture as the
   call to action panels, so a page of panels reads as one page. */
.rq-tablewrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
  z-index: 1;
}

.rq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.rq-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A6774;
  background: #FBFCFD;
  padding: 13px 16px 12px;
  border-bottom: 1px solid #E4E0D6;
}

.rq-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F0EDE4;
  color: #2C3540;
  vertical-align: top;
  line-height: 1.5;
}

.rq-table tbody tr:last-child td { border-bottom: 0; }
.rq-table tbody tr:nth-child(even) td { background: #FBFCFD; }

/* Column widths only as a hint: the middle column is the shortest phrase and
   the last one is a citation, which must not wrap mid-section-number if the
   room is there. */
.rq-table td:nth-child(2) { width: 30%; }
.rq-table td:nth-child(3) { width: 24%; }

.rq-what { display: block; font-weight: 600; color: #1F2A36; }

.rq-note {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5A6774;
}

/* The citation is the load-bearing part of every row, so it is set apart from
   the sentence beside it rather than reading as more prose. */
.rq-cite {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: #EFF2F4;
  border: 1px solid #E1E6EA;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.4;
}

/* ---------- Sources and the state list ---------- */

.rq-sources a { text-decoration: underline; text-underline-offset: 2px; }

.rq-states {
  list-style: none;
  margin: 18px 0 8px;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.rq-body .rq-state__link {
  position: relative;
  /* .bl-body underlines every link inside it, which is right for a link in a
     sentence and wrong for a card whose whole surface is the link. */
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 20px 22px 18px;
  border: 1px solid #E4E0D6;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: clip;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.rq-body .rq-state__link::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
}

.rq-body .rq-state__link:hover { border-color: #D3DEEC; }
.rq-body .rq-state__link, .rq-body .rq-state__link:hover { text-decoration: none; }
.rq-body .rq-state__link:active { transform: translateY(1px); }

.rq-body .rq-state__k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 8px;
}

.rq-body h3.rq-state__t {
  font-family: var(--serif);
  letter-spacing: -0.008em;
  text-transform: none;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 8px;
}

.rq-body .rq-state__d {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A5663;
  margin: 0;
}

.rq-next ul { max-width: 68ch; }

/* ---------- Under 640px the table stops being a table ----------
   Header row gone, every row a card, every cell labelled with the column it
   came from. The label is the same string the <th> carries, put there by the
   generator, so the two cannot drift apart. */
@media (max-width: 640px) {
  .rq-answer { font-size: 17px; }

  .rq-tablewrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    margin: 14px 0 24px;
  }
  .rq-tablewrap::before { display: none; }

  .rq-table, .rq-table tbody, .rq-table tr, .rq-table td { display: block; }

  /* The percentage widths above are a desktop hint about three columns side
     by side. There are no columns here, so they have to go: left in place
     they squeeze "Every year. The first one falls within 90 days" into a
     quarter of the screen and break the citation across four lines. */
  .rq-table td,
  .rq-table td:nth-child(2),
  .rq-table td:nth-child(3) { width: auto; }
  .rq-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .rq-table tr {
    position: relative;
    margin: 0 0 12px;
    padding: 16px 18px 14px;
    border: 1px solid #E4E0D6;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: clip;
  }

  .rq-table tr::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
  }

  .rq-table td,
  .rq-table tbody tr:nth-child(even) td {
    padding: 0;
    width: auto;
    border: 0;
    background: transparent;
    font-size: 16px;
  }

  .rq-table td + td { margin-top: 12px; }

  .rq-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7A8798;
    margin-bottom: 4px;
  }

  .rq-note { font-size: 14.5px; }
  .rq-cite { font-size: 14.5px; }
  .rq-states { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-body .rq-state__link { transition: none; }
  .rq-body .rq-state__link:active { transform: none; }
}