/* Home, File a report, the 404 and Data Center tables: the approved design board's layout
   (texas-brb board, rows A, E and G). Loaded after site.css. Colours are the pack's tokens (brand.css). */

/* ---- shared: a <details> chevron, and a table that stacks label over value on a phone ---- */
.chev { flex: none; transition: transform 120ms ease; }
details[open] > summary .chev { transform: rotate(180deg); }
.stack tbody th { font-weight: 500; background: none; }
@media (max-width: 767.98px) {
  .stack-wrap { overflow: visible; }
  .stack-wrap table.stack { min-width: 0; }
  .stack, .stack tbody, .stack tfoot, .stack tr { display: block; width: 100%; }
  .stack caption { display: block; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack thead tr, .stack thead th { display: block; width: 1px; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .stack tr { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: #fff; }
  .stack-wrap .stack tbody th, .stack-wrap .stack tbody td, .stack-wrap .stack tfoot th, .stack-wrap .stack tfoot td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; background: none; overflow-wrap: anywhere; }
  .stack-wrap .stack tr > :last-child { border-bottom: 0; }
  .stack-wrap .stack tbody th.stack-card-heading { display: block; padding: 4px 0 10px; }
  .stack-wrap .stack tbody th.stack-card-heading::before { display: none; }
  .stack-wrap .stack .stack-card-title { display: block; font-weight: 600; }
  .stack tbody th::before, .stack tfoot th::before, .stack td::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--muted); font-weight: 400; font-size: .85rem; text-align: left; }
  .data-center-page a, .data-releases-page a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The issue page's costs: the phone list, not the stacked table (the stacked table made the
     page 10,509 px at 390 px, against 4,576 px with the list). */
  .dc-card .cost-table { display: none; }
  .dc-card .cost-list { display: block; }
}

/* ---- Home: the glance row (each card: figure, date, one source) and "Why two figures?" ---- */
.stats.glance-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glance .stat { display: flex; flex-direction: column; }
.glance .stat .asof { margin-bottom: 14px; }
.glance .stat .source { margin-top: auto; }
@media (max-width: 860px) { .stats.glance { grid-template-columns: minmax(0, 1fr); } }

/* Data Center figures are grouped by measure so outstanding and issued values have their own
   rows at wide and tablet widths.  PAB stays in its compact strip below those four families. */
.data-stats { display: block; }
.data-stats .stats-group { margin: 0 0 28px; }
.data-stats .stats-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.data-stats .stats-group-grid.pab-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.data-stats .stat { min-width: 0; }
.data-stats .stat .label { min-height: 2.8em; line-height: 1.4; font-size: .875rem; text-transform: none; letter-spacing: normal; }
.data-stats .stats-footnotes { border-top: 1px solid var(--line); padding-top: 10px; }
.data-stats .stats-reconciliation { margin: 10px 0 0; }
@media print {
  .data-center-page .hero-search { display: none; }
  .data-stats .stats-group, .data-stats .stats-group-grid, .data-stats .stat { break-inside: avoid; }
  .data-releases-page .section-tight, .data-releases-page .release-calendar tr { break-inside: avoid; }
  .data-center-page .class-facts { break-before: auto; }
}
@media (max-width: 700px) {
  .data-stats .stats-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-stats .stats-group-grid.pab-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .data-stats .stats-group-grid, .data-stats .stats-group-grid.pab-strip { grid-template-columns: minmax(0, 1fr); }
}
.why-two { margin: 18px 0 0; }
.why-two > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 0; color: var(--link); font-weight: 500; cursor: pointer; list-style: none; }
.why-two > summary::-webkit-details-marker { display: none; }
.why-two > summary:hover { color: var(--primary); }
.why-two > summary > span { text-decoration: underline; text-underline-offset: 2px; }
.why-two-body { margin: 10px 0 0; padding: 18px 20px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.why-two-body .table-scroll { margin: 0; }
.why-two-body .table-scroll table.data { min-width: 0; }
.why-two-body table.data th, .why-two-body table.data td { vertical-align: top; }
.why-two-body > p { margin: 12px 0 0; }
@media (max-width: 640px) {
  .why-two-body { padding: 6px 16px 14px; }
  .why-two-body .stack tr { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .why-two-body .stack tbody tr + tr { margin-top: 4px; border-top: 2px solid var(--line); }
}

/* ---- Home: one source line under each dated list; the PAB panel and gauge beside the deadlines ---- */
.dated + .list-source { margin: 10px 0 0; }
/* a deadline's meta line (date, program, citation) may break anywhere rather than push a phone sideways */
.dated .small { overflow-wrap: anywhere; }
.pab-panel { margin: 36px 0 0; }
.pab-panel .stat .figure { margin-bottom: 4px; }
.gauge { height: 16px; margin: 14px 0 6px; border: 1px solid var(--muted); border-radius: 4px; background: var(--surface); overflow: hidden; }
.gauge svg { display: block; width: 100%; height: 100%; }
.gauge rect { fill: var(--primary); }
.gauge-keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: .85rem; color: var(--muted); }
.gauge-key-avail { color: var(--text); }
.gauge-key-avail::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--primary); }

/* ---- Home: the Board, four across (two on a phone) ---- */
.programs.board-members { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
@media (max-width: 860px) { .programs.board-members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } }

/* ---- 404: the four doors under the search ---- */
.nf-doors { margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid var(--line); }

/* ---- File a report: the head and its jump box ---- */
.file-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 18px 40px; align-items: center; }
.file-head-text { min-width: 0; }
.file-jump.aside-box { margin: 0; padding: 6px 18px; }
.file-jump li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 0; font-size: .95rem; }
.file-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.file-jump-n { font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .file-head { grid-template-columns: minmax(0, 1fr); } .file-group-n { display: none; } }

/* ---- File a report: cards ---- */
.file-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px 20px; margin: 0 0 36px; min-width: 0; }
.file-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.file-card-head h2 { margin: 0; }

/* ---- the standing deadlines: one track of stops per program. An event is an ink disc, a filing due a ring
   with a clock, each also named in words. Across where the track is wide, down on a phone. ---- */
.stop-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .85rem; color: var(--muted); }
.stop-key li { display: inline-flex; align-items: center; gap: 7px; }
.stop-key .stop-mark { width: 20px; height: 20px; margin: 0; }
.stop-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; margin: 0 0 10px; }
.stop-mark.due, .stop.due .stop-mark { border: 2px solid var(--primary); color: var(--primary); }
.stop-mark.event, .stop.event .stop-mark { background: var(--ink); color: var(--accent); }
.track { container-type: inline-size; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.track:first-child { padding-top: 6px; border-top: 0; }
.track-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 14px; }
.track-head h3 { margin: 0; font-size: 1.05rem; }
.track-note { font-size: .875rem; color: var(--muted); }
.track-none { margin: -6px 0 14px; font-size: .925rem; color: var(--muted); }
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
.stop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.stop::after { content: ""; position: absolute; top: 16px; left: 42px; right: -10px; border-top: 2px solid var(--line); }
.stop:last-child::after { content: none; }
.stop-title { font-weight: 500; color: var(--ink); line-height: 1.3; }
.stop-date { font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.stop.due .stop-date { color: var(--primary); }
.stop-clock { font-size: .875rem; line-height: 1.4; }
.stop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-top: 2px; }
.stop-cite { font-size: .8rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
@container (max-width: 640px) {
  .stops { grid-auto-flow: row; grid-auto-columns: auto; }
  .stop { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 0 0 18px; }
  .stop:last-child { padding-bottom: 0; }
  .stop > * { grid-column: 2; }
  .stop > .stop-mark { grid-column: 1; grid-row: 1 / span 7; margin: 0; }
  .stop::after { top: 38px; bottom: 2px; left: 16px; right: auto; border-top: 0; border-left: 2px solid var(--line); }
}
/* the same, by the viewport, for a browser without container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .stops { grid-auto-flow: row; grid-auto-columns: auto; }
    .stop { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 0 0 18px; }
    .stop:last-child { padding-bottom: 0; }
    .stop > * { grid-column: 2; }
    .stop > .stop-mark { grid-column: 1; grid-row: 1 / span 7; margin: 0; }
    .stop::after { top: 38px; bottom: 2px; left: 16px; right: auto; border-top: 0; border-left: 2px solid var(--line); }
  }
}
.track-sources { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.standing { list-style: none; margin: 0; padding: 0; }
.standing li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---- the filing groups: a heading rule, then the cards two to a row ---- */
.file-group { margin: 0 0 36px; scroll-margin-top: 12px; }
.file-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 18px; padding: 0 0 10px; border-bottom: 2px solid var(--ink); }
.file-group-head h2 { margin: 0; }
.file-group-who { margin: 0; color: var(--muted); }
.file-group-n { margin: 0 0 0 auto; font-size: .925rem; color: var(--muted); }
.filing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .filing-cards { grid-template-columns: minmax(0, 1fr); } }
.filing-cards .filing { margin: 0; padding: 18px 20px; min-width: 0; }
.filing-cards > .filing:last-child:nth-child(odd) { grid-column: 1 / -1; } /* a lone last card spans the row */
.filing-stage { margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.filing-cards .filing h3 { margin: 0 0 6px; }
.filing-cards .filing dl { grid-template-columns: 6.5em minmax(0, 1fr); gap: 7px 14px; margin: 8px 0 0; }
.filing-cards .filing dd { overflow-wrap: break-word; }
.filing-rule { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }
.filing-forms { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.filing-forms li { min-width: 0; }
.filing-form-ico { margin-right: 5px; vertical-align: -.15em; }
.filing-form-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  .filing-cards .filing { padding: 16px; }
  .filing-cards .filing dl { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .filing-cards .filing dd { margin-bottom: 9px; }
  .filing-cards .filing dd:last-child { margin-bottom: 0; }
}

/* "File online": an outlined button, so the page has one filled button at rest (the header's Search) */
.filing-cards .filing-link { margin: 6px 0 4px; }
.file-online { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 16px 5px 5px; border: 1px solid var(--primary); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; text-decoration: none; }
.file-online:hover { background: var(--surface); color: var(--ink); }
.file-online-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 4px; background: var(--surface); color: var(--primary); }
.file-online-text { display: flex; flex-direction: column; min-width: 0; }
.file-online-name { font-weight: 500; line-height: 1.2; color: var(--primary); }
.file-online-meta { font-size: .8rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 560px) { .file-online { display: flex; width: 100%; } }

/* ---- the fold: a <details> that rests folded on a phone ("Show 11 filings") and shows its content at 861 px and
   wider, where the summary hides (::details-content; a browser without it keeps the summary to open it) ---- */
.fold > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 500; color: var(--link); cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .chev { margin-left: auto; color: var(--ink); }
.fold-extra { font-weight: 400; font-size: .875rem; color: var(--muted); }
.fold[open] > summary { margin-bottom: 14px; }
.fold .fold-hide, .fold[open] .fold-show { display: none; }
.fold[open] .fold-hide { display: inline; }
@media (min-width: 861px) {
  @supports selector(::details-content) {
    .fold::details-content { content-visibility: visible; display: block; }
    .fold > summary { display: none; }
  }
}
/* Printed, every fold shows its content (the printed page is narrower than 861 px), and so does a fold holding the
   target of a link such as /file/#annual-report, for a browser that does not open it on the jump. */
@supports selector(::details-content) {
  @media print {
    .fold::details-content { content-visibility: visible; display: block; }
    .fold > summary { display: none; }
  }
  @supports selector(:has(*)) {
    .fold:has(:target)::details-content { content-visibility: visible; display: block; }
    .fold:has(:target) > summary { display: none; }
  }
}

/* ---- who files what: one table per group, the columns aligned across them ---- */
.who-files .table-scroll + .table-scroll { margin-top: 26px; }
.who-files table.data caption { font-size: 1.05rem; padding: 0 0 8px; }
.who-files table.data th, .who-files table.data td { overflow-wrap: break-word; vertical-align: top; }
@media (min-width: 641px) {
  .who-files .table-scroll table.data { table-layout: fixed; min-width: 0; }
  .who-files thead th:nth-child(1), .who-files thead th:nth-child(2) { width: 22%; }
  .who-files thead th:nth-child(3) { width: 21%; }
  .who-files thead th:nth-child(4) { width: 16%; }
  .who-files thead th:nth-child(5) { width: 19%; }
}
@media (max-width: 860px) { .file-card { padding: 16px; } }
/* Printed, a deadline track keeps its stops and their words on one page. */
@media print { .track { break-inside: avoid; } }
.pab-status-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pab-status-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media print { .programs > div, .glance > div, .next-meeting { break-inside: avoid; } }
@media screen and (max-width: 800px) {
  .release-calendar.stack tbody th.dataset-card-heading { display: block; font-size: 1.05rem; font-weight: 600; }
  .release-calendar.stack tbody th.dataset-card-heading::before { content: none; }
}
.data-releases-page .release-datasets > summary { min-height: 44px; padding: 10px 0; color: var(--link); cursor: pointer; }