/* Section block, FAQ, sources, notice, ranking table (theme.md section 4). */
@layer components {
  section.block { padding: 30px 0 6px; border-top: 1px solid var(--rule); }
  section.block h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
  section.block .lede { max-width: 62ch; color: var(--muted); margin-bottom: 18px; }

  .faq { display: grid; gap: 22px; max-width: 62ch; }
  .faq h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }

  .sources { max-width: 62ch; display: grid; gap: 10px; margin: 0; }
  .sources dt { font-weight: 700; }
  .sources dd { margin: 0 0 4px; color: var(--muted); }

  /* The airport page's list of the other covered airports: codes at 700, comma separated. */
  .others { max-width: 62ch; font-weight: 700; line-height: 1.9; }

  /* Airport index: the busyness-only airports under the ranking, code at 800 and name
     in muted, one hairline per row as in the table, flowing into as many columns as
     fit. No wait, no time: these airports publish none. */
  .index { list-style: none; margin: 0; padding: 0; columns: 9.5em; column-gap: 20px; }
  .index li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
  .index a { display: grid; grid-template-columns: 3.3em 1fr; align-items: baseline; padding: 7px 0; text-decoration: none; line-height: 1.25; }
  .index b { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
  .index .name { font-size: .85rem; color: var(--muted); }
  .index a:hover .name, .index a:focus-visible .name { text-decoration: underline; color: var(--ink); }

  /* One dated sentence the reader must see. Ink on paper, hairlines, nothing else. */
  .notice { margin: 20px 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 62ch; }

  /* Ranking table: the sign's row rhythm on paper. Longest line first; a closed or dead
     airport prints the word. Numbers right-aligned so they stack. */
  .rank { margin-top: 8px; }
  .rank-table { width: 100%; }
  .rank-table th, .rank-table td { text-align: left; vertical-align: middle; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .rank-table thead th { font-weight: 400; font-size: .9rem; color: var(--muted); border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
  .rank-table thead th + th { text-align: right; }
  .rank-table tbody th { font-weight: 400; padding-right: 12px; }
  .rank-table .code { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; margin-right: .35em; text-decoration: none; }
  .rank-table a.code:hover, .rank-table a.code:focus-visible { text-decoration: underline; }
  .rank-table .name { font-size: .95rem; }
  .rank-table td.wait { text-align: right; white-space: nowrap; line-height: 1.1; padding-left: 12px; }
  .rank-table .num { font-weight: 800; font-size: clamp(1.55rem, 5.2vw, 2.1rem); letter-spacing: -.02em; }
  .rank-table .unit { font-size: .9rem; margin-left: .3em; color: var(--muted); }
  .rank-table td.read { text-align: right; white-space: nowrap; font-size: .9rem; color: var(--muted); line-height: 1.3; padding-left: 12px; }
  .rank-table td.read b { color: var(--ink); font-weight: 700; }
  .rank-table td.word { text-align: right; color: var(--muted); font-size: .95rem; }
  .rank-foot { margin-top: 12px; font-size: .9rem; color: var(--muted); max-width: 62ch; }
  /* The busiest-airports list (B2026-09-06-7): the same table with a count column in
     place of the waits. 431 rows, so the row is tighter and the number is smaller than a
     wait; the rank is the first cell, in muted, because the position is the content.
     The header stays in view while the list scrolls. Under 600 px the days column goes
     and the name folds under the code, as the read column does above. */
  .rank-table.counts th, .rank-table.counts td { padding: 6px 0; }
  .rank-table.counts thead th { position: sticky; top: 0; background: var(--paper); text-align: right; }
  .rank-table.counts thead th:nth-child(2) { text-align: left; }
  .rank-table.counts .code { font-size: 1.15rem; }
  .rank-table.counts .pos { width: 2.4em; padding-right: 14px; text-align: right; color: var(--muted); font-size: .9rem; }
  .rank-table.counts td.count { text-align: right; white-space: nowrap; font-weight: 700; font-size: 1.15rem; padding-left: 12px; }
  .rank-table.counts td.days { text-align: right; color: var(--muted); font-size: .9rem; padding-left: 12px; }
  .rank-table .read-inline { display: none; }
  @media (max-width: 599px) {
    .rank-table .name { display: block; font-size: .85rem; color: var(--muted); line-height: 1.2; }
    .rank-table .num { font-size: 1.45rem; }
    .rank-table thead th:nth-child(2), .rank-table thead th:nth-child(3) { font-size: .8rem; }
    .rank-table .read { display: none; }
    .rank-table .read-inline { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
    .rank-table .read-inline b { color: var(--ink); }
    .rank-table td.word[colspan="3"] { white-space: normal; }
    .rank-table.counts .days { display: none; }
  }
}