/* ==========================================================================
   BEL-AIR public site (Mockup 02) — government & transparency pages
   Only what inner.css lacks: initials avatars, people cards, the procurement
   document trail, the transparency landing cards and superseded documents.
   Every colour comes from tokens.css (7:1 on paper); nothing under 14 px.
   ========================================================================== */

/* ---------------------------------------------------------------- avatar
   An official's portrait in a circle, or a neutral circle with initials when there is none (BRD v3.3, DV-10). */
.avatar { flex: none; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); color: var(--accent); font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: .02em; user-select: none; }
.avatar--sm { width: 3rem; height: 3rem; font-size: 1.2rem; }
.avatar--lg { width: 6rem; height: 6rem; font-size: 2.4rem; }
.avatar--xl { width: 8rem; height: 8rem; font-size: 3.2rem; }
.avatar--light { background: var(--paper-3); color: var(--ink-d); border: 1px solid var(--line-d-strong); }
.avatar--photo { display: block; object-fit: cover; background: var(--paper-3); border: 1px solid var(--line-d-strong); }

/* ---------------------------------------------------------------- group and staff-team photographs (M2-GOV-06a)
   Captions sit under the photograph, never over it: the people stand in the lower half. */
.group-photo { margin: 0 0 1.5rem; max-width: 36rem; }
/* One row of five on a laptop, two columns on a phone, so the council page stays within its length budget (UX-03). */
/* The Punong Barangay's card and the council photograph side by side on a wide screen. */
.council-lead { display: grid; gap: 1rem; align-items: start; }
.council-lead .group-photo { margin: 0; }
@media (min-width: 56rem) { .council-lead { grid-template-columns: 1fr 1fr; } }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
.group-photo img, .team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo); background: var(--paper-3); }
.group-photo figcaption, .team-photo figcaption { margin-top: .6rem; font-size: var(--t-sm); color: var(--ink-d2); }
.team-photo { margin: 0; }
.team-photo figcaption b { display: block; color: var(--ink-d); font-size: var(--t-base); }

/* ---------------------------------------------------------------- people cards */
.person { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.person b { display: block; font-weight: 700; font-size: var(--t-base); line-height: 1.3; }
.person .role { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.seats { margin-top: .5rem; font-size: var(--t-sm); color: var(--ink-d); }
.seats dt { font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink-d3); }
.seats dd + dt { margin-top: .4rem; }
.person .more { display: inline-block; margin-top: .6rem; color: var(--link-d); font-weight: 700; font-size: var(--t-sm); text-decoration: underline; }
a.card .person .more { text-decoration: underline; }

.person--feature { grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.person--feature b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.1; }
.person--feature .role { font-size: var(--t-base); margin-top: .25rem; }
@media (max-width: 520px) { .person--feature { grid-template-columns: 1fr; } }

/* a section's note under its heading */
.section-note { margin-top: .5rem; color: var(--ink-d2); font-size: var(--t-sm); max-width: 48rem; }

/* jump links at the top of a long page */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); background: var(--paper-2); color: var(--ink-d); font-weight: 700; text-decoration: none; }
.jump a:hover { border-color: var(--ink-d); }

/* "How the barangay works" */
.explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; counter-reset: ex; }
.explain > div { counter-increment: ex; padding: 1.25rem; border-top: 3px solid var(--ink-d); background: var(--paper-2); border-radius: 0 0 var(--r-photo) var(--r-photo); }
.explain h3 { font-size: var(--t-base); }
.explain h3::before { content: counter(ex) ". "; color: var(--ink-d3); }
.explain p { margin-top: .4rem; color: var(--ink-d2); font-size: var(--t-sm); line-height: 1.55; }

/* external links: say they open elsewhere, in words */
.ext::after { content: " ↗"; }

/* ---------------------------------------------------------------- transparency landing cards */
.tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.tcard { display: grid; gap: .5rem; align-content: start; min-height: 15rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.tcard h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.1; }
.tcard .count { font-family: var(--font-display); font-size: clamp(2.6 * var(--u), 2 * var(--u) + 2vw, 3.6 * var(--u)); line-height: 1; color: var(--ink-d); }
.tcard .count small { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 700; color: var(--ink-d2); margin-left: .35rem; }
.tcard .updated { font-size: var(--t-sm); color: var(--ink-d2); }
.tcard .go { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--link-d); text-decoration: underline; }
.tcard--dark .count, .tcard--dark .count small, .tcard--dark .updated { color: var(--ink-2); }
.tcard--dark .count { color: var(--ink); }
.tcard--dark .go { color: var(--blue-light); }

/* ---------------------------------------------------------------- documents: extra actions, superseded */
.doc__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: end; }
@media (max-width: 600px) { .doc__actions { grid-column: 1 / -1; justify-content: start; } }
.doc .status { margin-left: .4rem; vertical-align: middle; }
.doc .old-note { display: block; margin-top: .35rem; font-size: var(--t-sm); color: var(--ink-d); }
/* superseded: a striped edge as well as the word, so it is never colour alone */
.doc--old { border-left: 6px solid var(--line-d-strong); background: linear-gradient(90deg, var(--paper-3), var(--paper-2) 40%); }
.doc:target, .proj:target { outline: 3px solid var(--focus-d); outline-offset: 3px; }

/* ---------------------------------------------------------------- procurement register */
.projects { display: grid; gap: .75rem; }
.proj { background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); }
.proj > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem; align-items: start; padding: 1.1rem 1.25rem; min-height: 3rem; }
.proj > summary::-webkit-details-marker { display: none; }
.proj > summary:focus-visible { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.proj__ref { display: block; font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--ink-d2); }
.proj__title { display: block; font-weight: 700; font-size: var(--t-lg); line-height: 1.3; }
.proj__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .4rem; font-size: var(--t-sm); color: var(--ink-d2); }
.proj__meta b { color: var(--ink-d); }
.proj__side { display: grid; gap: .5rem; justify-items: end; }
.proj__toggle { font-weight: 700; font-size: var(--t-sm); color: var(--link-d); text-decoration: underline; white-space: nowrap; }
.proj__toggle::before { content: "Show the documents"; }
.proj[open] .proj__toggle::before { content: "Hide the documents"; }
.proj__body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--line-d); }
@media (max-width: 640px) { .proj > summary { grid-template-columns: 1fr; } .proj__side { justify-items: start; } }

.trail { display: grid; gap: 0; margin-top: 1rem; }
.trail li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line-d); }
.trail li:first-child { border-top: 0; }
.trail .tick { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 2px solid currentColor; }
.trail .is-posted .tick { color: var(--ok); background: var(--ok-bg); }
.trail .is-missing .tick { color: var(--wait); background: var(--wait-bg); border-style: dashed; }
.trail .is-na .tick { color: var(--ink-d2); background: var(--paper-3); }
.trail b { display: block; font-weight: 700; }
.trail small { display: block; font-size: var(--t-sm); color: var(--ink-d2); }
.trail .is-missing b { color: var(--more); }
.trail .btn { min-height: 2.75rem; padding: .5rem 1rem; }
@media (max-width: 600px) { .trail li { grid-template-columns: 2rem 1fr; } .trail li > :last-child { grid-column: 2; justify-self: start; } }

/* ---------------------------------------------------------------- legend chips for statuses */
.legend-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: var(--t-sm); color: var(--ink-d2); }

/* ---------------------------------------------------------------- ordinance page */
.ord-sections { counter-reset: sec; }
.ord-sections h3 { font-size: var(--t-base); }
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .print-only h1 { font-family: var(--font-display); font-weight: 700; font-size: 20pt; line-height: 1.1; color: #000; }
  .print-only p { color: #000; }
  .status { border-color: #000 !important; color: #000 !important; background: #fff !important; }
}

/* ---------------------------------------------------------------- PDF viewer stand-in (Forms and documents, FR-DOC-005) */
.pdf-view { width: min(100% - 2rem, 46rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r-photo); background: var(--paper); color: var(--ink-d); overflow: auto; }
.pdf-view::backdrop { background: rgba(7, 11, 20, .78); }
.pdf-view :focus-visible { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.pdf-view__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; background: var(--paper-3); }
.pdf-view__bar h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; color: var(--ink-d); }
.pdf-view .btn { color: var(--ink-d); border-color: var(--line-d-strong); white-space: normal; }
.pdf-view .btn:hover { background: var(--ink-d); color: var(--paper); }
.pdf-view .btn--primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.pdf-view__page { margin: 1.25rem auto; width: min(100% - 2.5rem, 30rem); aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--line-d-strong); box-shadow: 0 20px 40px -28px rgba(12, 18, 32, .6); display: grid; align-content: start; justify-items: center; gap: .6rem; padding: 2rem 1.5rem; text-align: center; color: #000; }
.pdf-view__note { margin-top: auto; font-size: var(--t-sm); color: var(--ink-d2); }

/* anchors (#council, #p-021, #doc-…) land below the fixed bar */
.paper [id] { scroll-margin-top: 6.5rem; }

/* a link alone in a 16 px note ("All Peace and order ordinances"): a 44 px box, not 43 (UX-92, § 45.1) */
.note--link > a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------------------------------------------------------------- organizational chart (BRD § 19.8, M2-GOV-30/31; v3.7)
   A tree in plain HTML and CSS: the head card, a connector, then its branches side by side; on a phone, a stacked and
   indented list with the connector on the left. The administrative staff are a compact list of names and roles. */
.org__level, .org__staff { list-style: none; margin: 0; padding: 0; }
.org__head > .card { max-width: 34rem; margin-inline: auto; }
.org__branches { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--line-d-strong); }
.org__branches::before { content: ""; position: absolute; left: 50%; top: calc(-2rem - 2px); height: 2rem; border-left: 2px solid var(--line-d-strong); }
.org__branches--headless { margin-top: 0; padding-top: 0; border-top: 0; }
.org__branches--headless::before { display: none; }
.org__branches > :only-child { grid-column: 1 / -1; }
.org__branch > h3 { margin-bottom: .75rem; }
.org__level { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.org__branch--side .org__level { grid-template-columns: 1fr; }
.org__staff { columns: 3 18rem; column-gap: 2rem; }
.org__staff li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--line-d); }
.org__staff b { display: block; font-weight: 600; color: var(--ink-d); }
.org__staff span { display: block; font-size: var(--t-sm); color: var(--ink-d2); line-height: 1.4; }
@media (max-width: 760px) {
  .org__branches { grid-template-columns: minmax(0, 1fr); margin-left: .75rem; padding: 0 0 0 1rem; border-top: 0; border-left: 2px solid var(--line-d-strong); }
  .org__branches::before { display: none; }
  .org__branches--headless { margin-left: 0; padding-left: 0; border-left: 0; }
}
.org__staff a { color: var(--link-d); }
.org__more { margin-top: .75rem; }

/* ---------------------------------------------------------------- "How the barangay is organized" (M2-GOV-33; v3.8)
   The council page's chart in small, closed so the page keeps its length budget (UX-03): the heading (outside the
   disclosure, so it stays in the page outline), then "Show the chart" / "Hide the chart" — real text in the summary,
   always in the same place under the heading — then the Punong Barangay and one <details> per branch behind a
   connector line. On a laptop the head and the three branches share one row; on a phone they stack. */
.stack-lg > .org-preview:has(> .org-preview__details:not([open])) + * { margin-top: 1rem; }
.org-preview { border-bottom: 1px solid var(--line-d); }
.org-preview > h2 { margin: 0; }
#organization > h2::before { display: none; } /* a compact bar: no ribbon above its heading */
.org-preview__details > summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--link-d); text-decoration: underline; }
.org-preview__details > summary::-webkit-details-marker { display: none; }
.org-preview__details > summary:focus-visible { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.org-preview__hide, .org-preview__details[open] .org-preview__show { display: none; }
.org-preview__details[open] .org-preview__hide { display: inline; }
.org-preview__tree { display: grid; gap: .75rem; margin-top: 1rem; }
.org-preview__head { margin: 0; padding: .6rem 1rem; background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-ui); }
.org-preview__head b { font-weight: 700; color: var(--ink-d); }
.org-preview__head a { color: var(--link-d); }
.org-preview__head span { display: block; font-size: var(--t-sm); color: var(--ink-d2); }
.org-preview__branches { display: grid; gap: .25rem 1.5rem; margin-left: .75rem; padding-left: 1rem; border-left: 2px solid var(--line-d-strong); }
.org-preview__branch > summary { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--link-d); list-style: none; }
.org-preview__branch > summary::-webkit-details-marker { display: none; }
.org-preview__branch > summary::before { content: "+" / ""; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: var(--r-ui); font-weight: 400; line-height: 1; }
.org-preview__branch[open] > summary::before { content: "\2212" / ""; }
.org-preview__branch > summary:focus-visible { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.org-preview__count { font-weight: 400; color: var(--ink-d2); }
.org-preview__branch .org__staff { columns: 1; }
@media (min-width: 56rem) {
  .org-preview__tree { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; }
  .org-preview__branches { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-left: 0; }
  .org-preview__branch--wide .org__staff { columns: 2 12rem; }
}
/* Budget at a glance (M2-TRN-59, v3.8): a horizontal bar chart with the same figures in a table, above the register */
.budget { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.budget__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 1.25rem; }
.budget__years { display: flex; flex-wrap: wrap; gap: .5rem; }
.budget__years a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.budget__years a:hover { border-color: var(--ink); }
.budget__years a[aria-current="true"] { background: var(--accent-fill); border-color: var(--accent); color: var(--on-blue); }
/* The page keeps its length budget (UX-03: 8 phone screens, 5 laptop screens): a shorter chart, and the same figures as
   a table behind "Show the figures as a table" (the chart's aria-label names the totals). No !important: the selectors
   are specific enough to win over .table th / td. At 320 px the table fits without a sideways scroll. */
.budget__chart { position: relative; height: 22rem; margin-bottom: 1rem; }
.budget__figures > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--link-d); text-decoration: underline; list-style: none; }
.budget__figures > summary::-webkit-details-marker { display: none; }
.budget__figures > summary::before { content: "+" / ""; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: var(--r-ui); font-weight: 400; line-height: 1; text-decoration: none; }
.budget__figures[open] > summary::before { content: "\2212" / ""; }
.budget__figures > summary:focus-visible { outline: 3px solid var(--focus-d); outline-offset: 2px; }
.budget__figures .budget__hide, .budget__figures[open] .budget__show { display: none; }
.budget__figures[open] .budget__hide { display: inline; }
.budget__figures[open] > summary { margin-bottom: .75rem; }
.budget__table .table th[scope="row"] { font-weight: 400; overflow-wrap: anywhere; }
.budget__table .table th small { display: block; color: var(--ink-d2); font-size: var(--t-sm); }
.budget__table .table .budget__amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget__table .table .budget__group th { background: var(--night-2); font-weight: 700; }
.budget__table .table .budget__total th, .budget__table .table .budget__total td { font-weight: 700; }
.budget__source { margin-top: 1rem; color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 600px) { .budget__chart { height: 15rem; } }
/* On a phone the register's four lists sit two to a row (the search keeps its own row), for the same length budget. */
@media (max-width: 30rem) { .filters--pairs .field:not(.field--search) { flex: 1 1 calc(50% - .5rem); min-width: 0; } .filters--pairs select { min-width: 0; width: 100%; } }
@media (max-width: 30rem) {
  .budget__table .table th, .budget__table .table td { padding: .6rem .75rem; }
  .budget__table .table td.budget__amount { font-size: var(--t-sm); }
}