/* 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 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; }

  .dc-card .cost-table { display: block; }
  .dc-card .cost-list { display: none; }
}

/* ---- 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); } }
.why-two { margin: 18px 0 0; }
.why-two > summary { display: inline-flex; align-items: center; gap: 6px; 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 { 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 lane 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 lane 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); }
.lane { container-type: inline-size; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.lane:first-child { padding-top: 6px; border-top: 0; }
.lane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 14px; }
.lane-head h3 { margin: 0; font-size: 1.05rem; }
.lane-note { font-size: .875rem; color: var(--muted); }
.lane-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); }
  }
}
.lane-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 lane keeps its stops and their words on one page (E3). */
@media print { .lane { break-inside: avoid; } }