/* Failure classes page (/failure-classes), rebuilt on 2026-10-09 from
   templates/page.html on the homepage's patterns. Every value comes from
   ds/autogeny/tokens.css or the homepage's own inline values. */

/* The catalogue: one card per class, two to a row on a wide screen, one on a
   phone. The grid is the homepage's (gap 40px 48px), with a wider minimum so
   each card keeps a readable measure. The cards are definitions, not results,
   so they are bordered like the homepage's #evidence cards and do not lift:
   only the hero's sample excerpt is a report sheet. */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 48px; }
.fc-card { min-width: 0; background: var(--paper-raised); border: 1px solid var(--rule); padding: 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
/* The class number over a 1px ink rule, as the steps in index.html #how. */
.fc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.fc-id { font-family: var(--font-mono); font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); }
.fc-card h3 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }

/* The side notes beside the prose in #why and beside the flags table in
   #adjudication. Beside their neighbour they stack in one column; once the
   row wraps (about 880 px for #why, 1100 px for #adjudication) they sit in a
   row of up to three columns, so no note runs past the reading measure. */
.fc-side { flex: 1 1 280px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-content: start; gap: 28px 40px; }
.fc-side > div { max-width: 42rem; }
/* Each class's four facts: a mono label over the text, ruled like the
   verdict on the homepage's summary card. */
.fc-fields { margin: 0; display: flex; flex-direction: column; }
.fc-fields > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--rule); }
.fc-fields > div:first-child { border-top: 0; padding-top: 0; }
.fc-fields > div:last-child { padding-bottom: 0; }
.fc-fields dd { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.fc-fields dd.fc-def { color: var(--ink); }

/* ResultTables whose cells are sentences take the body face (the component's
   td is mono, for figures) and align to the top, as on the privacy page. */
.fc-table th, .fc-table td { vertical-align: top; }
.fc-table td.fc-sentence { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-variant-numeric: normal; }
.fc-cell { display: block; max-width: 34rem; }
.fc-col-flag { width: 12rem; }
/* The study table's qualifiers keep its claims honest, so they get the
   fine-print size (15/23) rather than the component's 13/18. */
.fc-study .ag-row-note { max-width: 36rem; font-size: 15px; line-height: 23px; }
.fc-study td { white-space: nowrap; }
.fc-study th[scope="row"] { min-width: 20rem; }
.fc-study td.ag-ref { white-space: normal; min-width: 6rem; }
/* A plain result where the sample is too small for a Pass: no StatusMark. */
.fc-flag-text { display: block; white-space: normal; min-width: 9.5rem; max-width: 10rem; color: var(--ink-muted); }
.fc-gov td { min-width: 9rem; }
/* The mono label each cell shows on a narrow screen, where the column heads are gone. */
.fc-table td[data-label]::before { display: none; }

/* Prose without one-word last lines. */
main p { text-wrap: pretty; }

/* On a narrow screen these tables would need sideways scrolling, or would
   squeeze their sentences into a thin column, so each row becomes a block: its
   name, then each cell under a mono label (the column head, from data-label).
   The column heads stay in the markup for screen readers. As the privacy
   page's services table. The study and governance tables, whose first column
   carries long notes, switch below 960 px; the flags table below 600 px. */
@media (max-width: 959px) {
  .fc-study, .fc-study tbody, .fc-study tr, .fc-study th, .fc-study td,
  .fc-gov, .fc-gov tbody, .fc-gov tr, .fc-gov th, .fc-gov td { display: block; }
  .fc-study thead, .fc-gov thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fc-study tbody tr, .fc-gov tbody tr { padding: var(--space-4); border-bottom: 1px solid var(--rule); }
  .fc-study th, .fc-study td, .fc-gov th, .fc-gov td { padding: 0; border-bottom: 0; min-width: 0; }
  .fc-study th[scope="row"], .fc-study td.ag-ref { min-width: 0; }
  .ag-table-wrap .fc-study tbody th[scope="row"], .ag-table-wrap .fc-gov tbody th[scope="row"] { position: static; background: transparent; }
  .fc-study td, .fc-gov td { margin-top: var(--space-3); white-space: normal; text-align: left !important; }
  .fc-study td[data-label]::before, .fc-gov td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .fc-flag-text { min-width: 0; }
}
/* Between 600 and 959 px the three short cells sit side by side under the
   row's name, so a row stays short. */
@media (min-width: 600px) and (max-width: 959px) {
  .fc-study tbody tr, .fc-gov tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); }
  .fc-study tbody th[scope="row"], .fc-gov tbody th[scope="row"] { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .fc-table, .fc-table tbody, .fc-table tr, .fc-table th, .fc-table td { display: block; }
  .fc-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .fc-table tbody tr { padding: var(--space-4); border-bottom: 1px solid var(--rule); }
  .fc-table th, .fc-table td { padding: 0; border-bottom: 0; }
  .ag-table-wrap .fc-table tbody th[scope="row"] { position: static; background: transparent; }
  .fc-table td { margin-top: var(--space-3); white-space: normal; text-align: left !important; }
  .fc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .fc-flag-text { max-width: none; }
}

/* The closing band: index.html #contact's layout. */
.fc-close { max-width: var(--page-max); margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between; }