/* Rule-reading guide: the guide template (section nav, reading column) with no call to action. ADA Title II dates guide, forked from
   the Spring @Scheduled guide stylesheet. Two of its tables answer a question and quote the rule sentence the answer comes from: each
   row is set as the answer, then its receipt (the quote) across the row's full width, so a 300-character quote never sits in a
   quarter-width column. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a sentence in display type, 108 characters: balanced, four lines at desktop. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
/* the intro keeps the reading measure */
article.tzg-guide .results-intro { max-width: none; }
article.tzg-guide .results-intro > [data-article-intro] > * { max-width: var(--cn-reading-max); }
/* the kicker date stays one unit on a phone */
.tzg-guide .results-intro .eyebrow time { white-space: nowrap; }
.tzg-guide .guide-byline { color: var(--wp-muted); margin: 0 0 var(--wp-8); }
.tzg-guide .guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--wp-16); margin-top: var(--wp-12); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .guide-nav { padding-top: var(--wp-8); }
.tzg-guide .guide-nav ol { list-style: decimal-leading-zero; padding-left: var(--wp-6); margin: 0; }
.tzg-guide .guide-nav li { padding-left: var(--wp-2); margin-bottom: var(--wp-4); }
.tzg-guide .guide-nav li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
.tzg-guide .guide-nav a { display: inline-flex; align-items: center; min-height: var(--wp-tap); line-height: 1.5; }
.tzg-guide .guide-back { margin-top: var(--wp-4); }
.tzg-guide .guide-reading { min-width: 0; }
article.tzg-guide .results-section:first-child { border-top: 0; margin-top: 0; }
article.tzg-guide .results-section { scroll-margin-top: var(--wp-8); }
/* a date (April 26, 2027) and a three-part name (conforming-alternate-version) are each one unit on a line */
.tzg-guide .tzg-nobreak { white-space: nowrap; }
/* Narrower than 20rem happens only with enlarged text (at 100% the page is at least 320px): there a unit wider than the line wraps inside its own box instead of crossing the screen. */
@container page (max-width: 19.99rem) { .tzg-guide .tzg-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: inherit; white-space: normal; } }

/* the intro: the lede (the two dates), then what the page adds */
article.tzg-guide .tzg-intro { max-width: 44em; font-size: var(--wp-text-body); line-height: 1.6; margin: 0 0 var(--wp-4); }
/* tables: ledger lines, mono heads */
.tzg-guide .tzg-table-wrap { margin: var(--wp-6) 0 var(--wp-8); }
.tzg-guide table.tzg-table { min-width: 0; width: 100%; border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); line-height: 1.5; }
.tzg-guide .tzg-table th, .tzg-guide .tzg-table td { border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; text-align: left; vertical-align: top; background: none; }
.tzg-guide .tzg-table th:last-child, .tzg-guide .tzg-table td:last-child { padding-right: 0; }
.tzg-guide .tzg-table thead th { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); vertical-align: bottom; }
.tzg-guide .tzg-table tbody th { font-weight: 600; }
/* the answers are the bold dates (700); a row title can be a whole sentence (the dependent school system row), so it is set at 500:
   distinct from the values, never heavier than the answer */
.tzg-guide .tzg-table td strong, .tzg-guide .tzg-table th strong { font-weight: 700; }
.tzg-guide .ada-finder tbody th, .tzg-guide .ada-docs tbody th { font-weight: 500; }

/* Answer rows (the date finder and the documents table): the row is a grid. Its title and answers share the first line; the rule's
   sentence runs under them across the row, behind a hairline edge and its own label, so it reads as the receipt for that answer.
   Table roles are set in the markup, so screen readers keep the table, its rows and its column heads whatever the display. */
.tzg-guide .ada-finder, .tzg-guide .ada-finder thead, .tzg-guide .ada-finder tbody,
.tzg-guide .ada-docs, .tzg-guide .ada-docs thead, .tzg-guide .ada-docs tbody { display: block; }
.tzg-guide .ada-finder tr, .tzg-guide .ada-docs tr { display: grid; column-gap: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-hair); }
.tzg-guide .ada-finder tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
.tzg-guide .ada-docs tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.tzg-guide .ada-finder th, .tzg-guide .ada-finder td, .tzg-guide .ada-docs th, .tzg-guide .ada-docs td { display: block; border: 0; padding: 0; }
.tzg-guide .ada-finder thead tr, .tzg-guide .ada-docs thead tr { padding-bottom: var(--wp-3); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
/* the row carries the strong rule under the heads, so a head draws none of its own */
.tzg-guide .ada-finder thead th, .tzg-guide .ada-docs thead th { border: 0; padding: 0; }
/* the quote column has no head of its own on the line: each quote carries its label */
.tzg-guide .ada-finder thead th:last-child, .tzg-guide .ada-docs thead th:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tzg-guide .ada-finder tbody tr, .tzg-guide .ada-docs tbody tr { row-gap: var(--wp-4); padding: var(--wp-5, 1.25rem) 0 var(--wp-6); }
.tzg-guide td.ada-rule { grid-column: 1 / -1; max-width: 62ch; padding-left: var(--wp-4); border-left: 2px solid var(--wp-hair); font-size: .9375rem; line-height: 1.55; }
.tzg-guide td.ada-rule::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }

/* the cutoff table is three short columns: a table down to 30rem */
.tzg-guide .ada-cutoff { table-layout: fixed; }
.tzg-guide .ada-cutoff thead th:nth-child(1) { width: 38%; }

/* Below 48rem the answer row's three columns would be a word a line. Each row becomes a card: its title, then each value under its
   own column head (drawn by CSS with empty alt text, so it is not read twice), then the quote. The column heads leave the screen. */
@container page (max-width: 48rem) {
  .tzg-guide .ada-finder thead, .tzg-guide .ada-docs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .ada-finder tbody, .tzg-guide .ada-docs tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .ada-finder tr, .tzg-guide .ada-docs tr { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-3); }
  .tzg-guide .ada-finder tbody th, .tzg-guide .ada-docs tbody th { font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .ada-finder td:not(.ada-rule)::before, .tzg-guide .ada-docs td:not(.ada-rule)::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
  .tzg-guide td.ada-rule { margin-top: var(--wp-1); }
  .tzg-guide .ada-cutoff thead th:nth-child(1) { width: 34%; }
}
/* Below 30rem a cutoff column is narrower than one bold date (April 26, 2027 ran into its neighbour at 320). Each row becomes a card:
   the group as its title, then the two cutoffs side by side, each under its column head. */
@container page (max-width: 30rem) {
  .tzg-guide .ada-cutoff, .tzg-guide .ada-cutoff tbody, .tzg-guide .ada-cutoff th, .tzg-guide .ada-cutoff td { display: block; width: auto; }
  .tzg-guide .ada-cutoff thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .ada-cutoff tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .ada-cutoff tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp-4); row-gap: var(--wp-2); padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .ada-cutoff th, .tzg-guide .ada-cutoff td { border: 0; padding: 0; }
  /* the two dates share a line however many lines each head takes */
  .tzg-guide .ada-cutoff td { display: flex; flex-direction: column; justify-content: space-between; }
  .tzg-guide .ada-cutoff tbody th { grid-column: 1 / -1; font-size: var(--wp-text-body); line-height: 1.4; }
  .tzg-guide .ada-cutoff td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
}
/* The closing line says who prepared the page: body text at every width, set apart under a hairline */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
/* one column up to 62.5rem, as on the runtimes guide: below it the nav column leaves the reading column too narrow for the answer rows */
@container page (max-width: 62.5rem) {
  .tzg-guide .guide-body { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .tzg-guide .guide-nav { padding-top: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-ink); padding-bottom: var(--wp-6); }
  .tzg-guide .guide-nav li { margin-bottom: var(--wp-2); }
  article.tzg-guide .results-section:first-child { padding-top: 0; }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
}