/* ============================================================================
   Buldhana District Forest — Component library
   Government + nature design language. Loads after tokens.css and base.css.
   Sections:
     01 Buttons            08 Header (emblem, wordmark, search, controls)
     02 Inline link        09 Primary + mobile navigation
     03 Badge / Tag / CMS  10 Breadcrumbs
     04 Alert + Alert bar   11 Footer
     05 Card family         12 Tables (responsive reflow)
     06 Image placeholder   13 Forms
     07 Government top bar   14 Tabs / Accordion / Pagination / Modal
                            15 System states (skeleton, empty, error)
   ========================================================================== */

/* == 01 · BUTTONS ========================================================= */

.btn {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-text-inverse);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;              /* 44px touch target */
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-width-strong) solid var(--btn-bd);
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast);
}
.btn:hover { --btn-bg: var(--color-action-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled {
  --btn-bg: var(--bf-neutral-200);
  --btn-fg: var(--bf-neutral-500);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-brand);
  --btn-bd: currentColor;
}
.btn--secondary:hover {
  --btn-bg: var(--color-surface-accent-soft);
  --btn-fg: var(--color-brand-strong);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-brand);
  --btn-bd: transparent;
  padding-inline: var(--space-3);
}
.btn--ghost:hover { --btn-bg: var(--color-surface-sunken); }

.btn--on-brand {
  --btn-bg: var(--color-text-inverse);
  --btn-fg: var(--color-brand-strong);
}
.btn--on-brand.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-inverse);
  --btn-bd: rgba(255,255,255,0.6);
}
.btn--on-brand.btn--secondary:hover { --btn-bg: rgba(255,255,255,0.12); }

.btn--sm { min-height: 2.25rem; padding: var(--space-2) var(--space-4); font-size: var(--text-small); }
.btn--lg { min-height: 3.25rem; padding: var(--space-4) var(--space-6); font-size: var(--text-body-lg); }
.btn--block { display: flex; width: 100%; }

.btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* == 02 · INLINE LINK (with trailing arrow convention) =================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* == 03 · BADGE · TAG · CMS MARKER ====================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  background: var(--bf-neutral-100);
  color: var(--color-text-muted);
}
.badge--new     { background: var(--color-accent); color: #fff; }
.badge--category { background: var(--bf-green-100); color: var(--bf-green-800); }
.badge--info    { background: var(--color-info-bg); color: var(--color-info); }

/* Workflow status pills (admin + freshness) */
.status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.2rem var(--space-3);
  font-size: var(--text-small); font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
}
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status--draft     { background: var(--bf-neutral-100); color: var(--bf-neutral-600); }
.status--published { background: var(--color-success-bg); color: var(--color-success); }
.status--scheduled { background: var(--color-info-bg); color: var(--color-info); }
.status--archived  { background: var(--bf-neutral-100); color: var(--bf-neutral-500); }

/* CMS-managed region marker — hidden until review mode is switched on
   (body[data-cms-visible="true"]). Communicates brief §3 / §26. */
.cms-tag {
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-cms-outline);
  background: var(--color-cms-bg);
  border: 1px dashed var(--color-cms-outline);
  border-radius: var(--radius-xs);
}
body[data-cms-visible="true"] .cms-tag { display: inline-flex; }
body[data-cms-visible="true"] [data-cms] {
  outline: 2px dashed var(--color-cms-outline);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* == 04 · ALERTS ======================================================= */

.alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.alert__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-text-muted); }
.alert__title { font-weight: var(--weight-bold); }
.alert__body { margin-top: var(--space-1); color: var(--color-text-muted); }
.alert--info    { border-left-color: var(--color-info);    background: var(--color-info-bg); }
.alert--success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.alert--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.alert--error   { border-left-color: var(--color-error);   background: var(--color-error-bg); }

/* Site-wide important-notice bar (brief §43) */
.alert-bar {
  background: var(--bf-clay-700);
  color: #fff;
}
.alert-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
}
.alert-bar__label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
}
.alert-bar a { color: #fff; font-weight: var(--weight-semibold); }
.alert-bar__dismiss { margin-left: auto; color: #fff; padding: var(--space-1); }

/* == 05 · CARD FAMILY ================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card--interactive:hover {
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-sm);
}
.card__media { border-bottom: var(--border-width) solid var(--color-border); }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card__eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.card__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--color-link); text-decoration: underline; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: var(--text-small); color: var(--color-text-muted);
}
.card__desc { color: var(--color-text-muted); }
.card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Stat card (brief §10 — CMS-configurable numbers) */
.stat {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-brand);
}
.stat__value {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--color-brand-strong);
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--space-2); font-weight: var(--weight-semibold); }
.stat__note { margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-text-subtle); }
.stat--pending .stat__value { color: var(--color-text-subtle); font-style: italic; font-size: var(--text-body-lg); }

/* Notice / list row (brief §14) */
.notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.notice__date {
  display: flex; flex-direction: column; align-items: center;
  min-width: 3.5rem;
  padding: var(--space-2);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  line-height: 1.1;
}
.notice__day { font-size: var(--text-h3); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
.notice__mon { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.notice__main { min-width: 0; }
.notice__title { font-weight: var(--weight-semibold); }
.notice__title a { color: inherit; text-decoration: none; }
.notice__title a:hover { text-decoration: underline; color: var(--color-link); }
.notice__tags { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notice__action { align-self: center; white-space: nowrap; }
@media (max-width: 40rem) {
  .notice { grid-template-columns: auto 1fr; }
  .notice__action { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
}

/* Document card (brief §15) */
.doc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.doc__filetype {
  display: grid; place-items: center;
  width: 3rem; height: 3.5rem;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--color-error);
  background: var(--color-error-bg);
  border-radius: var(--radius-sm);
}
.doc__title { font-weight: var(--weight-semibold); }
.doc__meta { margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* Officer card (brief §19) */
.officer { text-align: left; }
.officer .card__body { align-items: flex-start; }
.officer__name { font-weight: var(--weight-bold); }
.officer__role { color: var(--color-text-muted); font-size: var(--text-small); }
.officer__contact { margin-top: var(--space-2); font-size: var(--text-small); }
.officer__contact a { display: block; }

/* == 06 · IMAGE PLACEHOLDER ========================================== */
/* Neutral, layout-accurate stand-in. No AI imagery (brief §1, §30). Real
   photos drop in later via the CMS media library with no layout change. */

.img-ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  background-color: var(--bf-neutral-100);
  background-image:
    linear-gradient(45deg, var(--bf-neutral-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bf-neutral-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bf-neutral-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bf-neutral-200) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  color: var(--color-text-muted);
  border-radius: inherit;
}
.img-ph__glyph { width: 2rem; height: 2rem; margin-inline: auto; color: var(--bf-neutral-400); }
.img-ph__label { font-weight: var(--weight-semibold); font-size: var(--text-small); }
.img-ph__cms { font-size: var(--text-caption); color: var(--color-text-subtle); }

.img-ph--16x7  { aspect-ratio: 16 / 7; }
.img-ph--16x9  { aspect-ratio: 16 / 9; }
.img-ph--4x3   { aspect-ratio: 4 / 3; }
.img-ph--1x1   { aspect-ratio: 1 / 1; }
.img-ph--3x4   { aspect-ratio: 3 / 4; }

/* == 07 · GOVERNMENT TOP BAR ======================================== */

.bf-topbar {
  background: var(--color-surface-brand-dark);
  color: #cfe3d8;
  font-size: var(--text-small);
}
.bf-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: 2.5rem;
  padding-block: var(--space-1);
}
.bf-topbar a { color: #eaf3ee; text-decoration: none; }
.bf-topbar a:hover { text-decoration: underline; }
.bf-topbar__gov { font-weight: var(--weight-semibold); color: #fff; }
.bf-topbar__spacer { margin-left: auto; }
.bf-topbar__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* On phones the top bar keeps only identity + accessibility + language;
   the external government link list moves to the footer to save vertical space. */
@media (max-width: 48rem) {
  .bf-topbar__links { display: none; }
  .bf-topbar .text-caption { display: none; }
  .bf-topbar__inner { gap: var(--space-2) var(--space-3); }
  .bf-topbar__gov { font-size: 0.8125rem; }
  /* let the a11y + language row wrap instead of clipping the A+ button */
  .a11y-controls { flex-wrap: wrap; row-gap: var(--space-1); justify-content: flex-end; }
  .a11y-controls__group { flex: none; }
}

/* Accessibility + language controls */
.a11y-controls { display: flex; align-items: center; gap: var(--space-2); }
.a11y-controls__group {
  display: inline-flex;
  border: var(--border-width) solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.a11y-controls__btn {
  min-width: 2rem; min-height: 2rem;
  padding: 0 var(--space-2);
  color: #eaf3ee;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.a11y-controls__btn + .a11y-controls__btn { border-left: var(--border-width) solid rgba(255,255,255,0.25); }
.a11y-controls__btn[aria-pressed="true"] { background: rgba(255,255,255,0.16); }
.a11y-controls__btn:hover { background: rgba(255,255,255,0.10); }

.lang-switch { display: inline-flex; gap: 0; }
.lang-switch button {
  padding: var(--space-1) var(--space-2);
  color: #cfe3d8;
  font-weight: var(--weight-semibold);
}
.lang-switch button[aria-pressed="true"] { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

/* == 08 · MAIN HEADER ============================================== */

.bf-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.bf-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.bf-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.bf-emblem {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  flex: none;
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  line-height: 1.1;
  text-align: center;
  color: var(--color-text-subtle);
  background: var(--color-surface-sunken);
}
.bf-wordmark__name {
  display: block;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand-strong);
  line-height: 1.15;
}
.bf-wordmark__division {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Compact identity on small screens so a long division name can't push the
   header to four lines. */
@media (max-width: 40rem) {
  .bf-emblem { width: 2.5rem; height: 2.5rem; font-size: 9px; }
  .bf-wordmark__name { font-size: var(--text-h4); }
  .bf-wordmark__division {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.bf-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Header search */
.bf-search { display: flex; }
.bf-search__field {
  display: flex;
  align-items: center;
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}
.bf-search__field:focus-within {
  border-color: var(--color-brand);
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 1px;
}
.bf-search input {
  border: 0;
  padding: var(--space-2) var(--space-3);
  min-width: 12rem;
  background: transparent;
}
.bf-search input:focus-visible { outline: none; box-shadow: none; }
.bf-search button {
  display: grid; place-items: center;
  padding-inline: var(--space-3);
  background: var(--color-brand);
  color: #fff;
  align-self: stretch;
}
.bf-search button:hover { background: var(--color-brand-strong); }
.bf-search__icon { width: 1.15rem; height: 1.15rem; }

.bf-header__menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}

/* == 09 · PRIMARY NAVIGATION ===================================== */

.bf-nav {
  background: var(--color-surface-brand);
  color: var(--color-text-on-brand);
}
.bf-nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
}
.bf-nav__link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  color: #eaf3ee;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
@media (min-width: 60.001rem) {
  .bf-nav__link { padding-inline: clamp(var(--space-2), 1vw, var(--space-4)); }
}
.bf-nav__link:hover { background: rgba(255,255,255,0.10); color: #fff; }
.bf-nav__link[aria-current="page"] {
  background: rgba(255,255,255,0.12);
  border-bottom-color: var(--color-accent);
  color: #fff;
}

/* Mobile drawer */
.bf-nav__backdrop { display: none; }

@media (max-width: 60rem) {
  .bf-header__tools .bf-search { display: none; }
  .bf-header__menu-toggle { display: inline-flex; }

  .bf-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 22rem);
    z-index: var(--z-modal);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .bf-nav[data-open="true"] { transform: translateX(0); }
  .bf-nav__list { flex-direction: column; padding: var(--space-4) 0; max-width: none; }
  .bf-nav__link { min-height: 3.25rem; border-bottom: var(--border-width) solid rgba(255,255,255,0.12); border-left: 4px solid transparent; }
  .bf-nav__link[aria-current="page"] { border-left-color: var(--color-accent); border-bottom-color: rgba(255,255,255,0.12); }

  .bf-nav__mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4);
    border-bottom: var(--border-width) solid rgba(255,255,255,0.16);
  }
  .bf-nav__mobile-search { display: block; padding: var(--space-4); }
  .bf-nav__mobile-search input { width: 100%; }

  .bf-nav__backdrop[data-open="true"] {
    display: block;
    position: fixed; inset: 0;
    background: rgba(11,12,12,0.5);
    z-index: var(--z-overlay);
  }
}
@media (min-width: 60.001rem) {
  .bf-nav__mobile-head, .bf-nav__mobile-search { display: none; }
}

/* == 10 · BREADCRUMBS ========================================== */

.breadcrumb { padding-block: var(--space-3); font-size: var(--text-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "\203A"; color: var(--color-text-subtle); }
.breadcrumb a { color: var(--color-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); }

/* == 11 · FOOTER ============================================== */

.bf-footer {
  background: var(--color-surface-brand-dark);
  color: #cfe3d8;
  padding-block: var(--space-10) var(--space-6);
  font-size: var(--text-small);
}
.bf-footer a { color: #eaf3ee; text-decoration: none; }
.bf-footer a:hover { text-decoration: underline; }
.bf-footer__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.bf-footer__brand { max-width: 22rem; }
.bf-footer h2 {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #fff;
  margin-bottom: var(--space-3);
}
.bf-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.bf-footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
}
.bf-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* == 12 · TABLES (responsive reflow to cards, brief §38) ===== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
.table caption { text-align: left; padding-bottom: var(--space-3); color: var(--color-text-muted); }
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}
.table thead th {
  background: var(--color-surface-sunken);
  font-weight: var(--weight-bold);
  border-bottom: var(--border-width-strong) solid var(--color-border-strong);
  white-space: nowrap;
}
.table tbody tr:hover { background: var(--color-surface-sunken); }

@media (max-width: 48rem) {
  .table--reflow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--reflow tbody tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .table--reflow td { border: 0; padding: var(--space-1) 0; display: grid; grid-template-columns: 40% 1fr; gap: var(--space-3); }
  .table--reflow td::before {
    content: attr(data-label);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }
}

/* == 13 · FORMS ============================================ */

.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field__label { font-weight: var(--weight-semibold); }
.field__label .req { color: var(--color-error); }
.field__hint { font-size: var(--text-small); color: var(--color-text-muted); }
.field__error { font-size: var(--text-small); color: var(--color-error); font-weight: var(--weight-semibold); }

.input, .textarea, .select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.textarea { min-height: 7rem; resize: vertical; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--color-brand);
}
.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--color-error); }

.checkbox, .radio { display: flex; gap: var(--space-3); align-items: flex-start; }
.checkbox input, .radio input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; accent-color: var(--color-action); }

fieldset { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
legend { font-weight: var(--weight-bold); padding-inline: var(--space-2); }

/* == 14 · TABS / ACCORDION / PAGINATION / MODAL =========== */

.tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: var(--border-width-strong) solid var(--color-border); }
.tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tabs__tab[aria-selected="true"] { color: var(--color-brand-strong); border-bottom-color: var(--color-brand); }
.tabs__panel { padding-top: var(--space-5); }

.accordion__item { border-bottom: var(--border-width) solid var(--color-border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  text-align: left;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
}
.accordion__trigger:hover { color: var(--color-link); }
.accordion__icon { flex: none; width: 1.25rem; height: 1.25rem; transition: transform var(--dur) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__panel { padding-bottom: var(--space-4); color: var(--color-text-muted); max-width: var(--measure); }
.accordion__panel[hidden] { display: none; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; justify-content: center; }
.pagination a, .pagination span {
  display: grid; place-items: center;
  min-width: 2.5rem; min-height: 2.5rem;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-link);
}
.pagination [aria-current="page"] { background: var(--color-brand); color: #fff; border-color: var(--color-brand); font-weight: var(--weight-bold); }
.pagination [aria-disabled="true"] { color: var(--color-text-subtle); pointer-events: none; }

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-4);
  background: rgba(11,12,12,0.6);
}
.modal__dialog {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 60rem;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-md);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.modal__body { padding: var(--space-5); }
.modal__close { padding: var(--space-2); border-radius: var(--radius-sm); }
.modal__close:hover { background: var(--color-surface-sunken); }

/* == 15 · SYSTEM STATES (brief §49) ====================== */

.skeleton {
  background: linear-gradient(90deg, var(--bf-neutral-100) 25%, var(--bf-neutral-200) 37%, var(--bf-neutral-100) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton--line { height: 0.9rem; margin-bottom: var(--space-2); }
.skeleton--title { height: 1.5rem; width: 60%; margin-bottom: var(--space-3); }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  max-width: 32rem;
  margin-inline: auto;
}
.state__glyph { width: 3rem; height: 3rem; margin: 0 auto var(--space-4); color: var(--color-text-subtle); }
.state__title { font-size: var(--text-h3); }
.state__body { margin-top: var(--space-2); color: var(--color-text-muted); }
.state__actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* == misc · media object, chips, definition rows ========= */

.media-obj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-5), 4vw, var(--space-10)); align-items: center; }
.media-obj--reverse > :first-child { order: 2; }
@media (max-width: 52rem) { .media-obj { grid-template-columns: 1fr; } .media-obj--reverse > :first-child { order: 0; } }

.deflist { display: grid; gap: 0; }
.deflist__row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); }
.deflist__row dt { font-weight: var(--weight-semibold); color: var(--color-text-muted); }
@media (max-width: 40rem) { .deflist__row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* == 16 · PAGE-LEVEL PATTERNS (inner public pages) ================= */

/* Page header band: breadcrumb + title + short intro + optional meta */
.page-head { background: var(--color-surface-sunken); border-bottom: var(--border-width) solid var(--color-border); }
.page-head__inner { padding-block: var(--space-6) var(--space-7); }
.page-head h1 { margin-top: var(--space-2); max-width: 24ch; }
.page-head__intro { margin-top: var(--space-3); max-width: var(--measure); color: var(--color-text-muted); font-size: var(--text-body-lg); }
.page-head__meta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-small); color: var(--color-text-subtle); }
.page-head__meta svg { width: 1em; height: 1em; vertical-align: -0.12em; }

/* Two-column: article + sticky aside (details pages, policy pages) */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: start; }
.with-aside__aside { position: sticky; top: 6rem; display: grid; gap: var(--space-4); }
@media (max-width: 60rem) { .with-aside { grid-template-columns: 1fr; } .with-aside__aside { position: static; } }

.side-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.side-card h2, .side-card h3 { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.side-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.side-nav a { display: block; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.side-nav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.side-nav a[aria-current="page"] { border-left-color: var(--color-brand); color: var(--color-brand-strong); font-weight: var(--weight-semibold); background: var(--color-surface-accent-soft); }

/* Filter / toolbar bar above lists */
.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding: var(--space-4); margin-bottom: var(--space-5);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.toolbar .select, .toolbar .input { min-height: 2.5rem; width: auto; min-width: 10rem; }
.toolbar__count { margin-left: auto; font-size: var(--text-small); color: var(--color-text-muted); }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.35rem var(--space-3); font-size: var(--text-small); font-weight: var(--weight-semibold);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-muted);
}
.chip[aria-pressed="true"] { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* Gallery grid + item */
.gallery-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gallery-item { position: relative; display: block; border: 0; padding: 0; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
.gallery-item .img-ph { border-radius: 0; }
.gallery-item__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--space-3);
  font-size: var(--text-small); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(11,12,12,0.78));
}
.gallery-item:hover .gallery-item__cap { text-decoration: underline; }

/* Vertical timeline (history / process) */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.timeline li { position: relative; padding-left: var(--space-6); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--color-brand); }
.timeline li::after { content: ""; position: absolute; left: 0.38rem; top: 1.2rem; bottom: -1.6rem; width: 2px; background: var(--color-border-strong); }
.timeline li:last-child::after { display: none; }
.timeline__when { font-weight: var(--weight-bold); color: var(--color-brand-strong); }

/* Contact / info split */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 5vw, var(--space-10)); align-items: start; }
@media (max-width: 60rem) { .contact-grid { grid-template-columns: 1fr; } }
.map-ph { aspect-ratio: 16 / 10; display: grid; place-content: center; gap: var(--space-2); text-align: center;
  background: var(--bf-neutral-100); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); }

/* Big centred state page (404) */
.hero-state { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.hero-state__code { font-size: clamp(4rem, 12vw, 8rem); font-weight: var(--weight-bold); line-height: 1; color: var(--color-brand); }