/* ==========================================================================
   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.
   ========================================================================== */

/* ---------------------------------------------------------------- initials avatar
   No photographs of people: every person gets a neutral circle with initials. */
.avatar { flex: none; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); color: var(--gold); 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); }

/* ---------------------------------------------------------------- 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: 400; 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: 400; 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-mono); 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: 400; 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; }