/* ==========================================================================
   utilities.css — small utility classes that replace inline style overrides
   --------------------------------------------------------------------------
   The sanctioned alternative to inline `style="font-size:…"`. Each class maps
   to the --fs-* token scale (tokens.css), so a font-size tweak stays on-scale
   and on-token instead of becoming a one-off literal in markup.

   Named by px (.fs-12 … .fs-16) to avoid colliding with Bootstrap's heading
   scale (.fs-1 … .fs-6, which are large display sizes). `!important` matches
   Bootstrap utility behaviour so a utility reliably wins where it replaces an
   inline style.

   Floors (see Docs/CSS_ARCHITECTURE.md): content text ≥ 13px (.fs-13);
   decorative micro-labels ≥ 12px (.fs-12). Do NOT add an .fs-11 / sub-12 class.

   Loaded after the component layer, before public-editorial + the runtime block.
   ========================================================================== */

.fs-12 { font-size: var(--fs-12) !important; }  /* 12px — decorative micro-label floor */
.fs-13 { font-size: var(--fs-13) !important; }  /* 13px — content floor */
.fs-14 { font-size: var(--fs-14) !important; }  /* 14px */
.fs-15 { font-size: var(--fs-15) !important; }  /* 15px */
.fs-16 { font-size: var(--fs-16) !important; }  /* 16px — base */

/* --------------------------------------------------------------------------
   Full-width mobile buttons: the responsive views use `d-grid d-sm-block` (or
   d-md-block) directly on icon+label buttons/anchors to stretch them on small
   screens. Plain CSS grid treats the <i> and the text run as two grid items —
   icon on row 1, label on row 2. Flow the implicit items on one centred row
   so the pattern renders as intended everywhere it's already used.
   -------------------------------------------------------------------------- */
.btn.d-grid {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Responsive helpers Bootstrap doesn't ship but the responsive views already
   reference (Committee Members/Details header groups, Ordinance/Resolution
   History sidebars). Defined here so the markup works as written.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .w-md-auto { width: auto !important; }
    .border-md-bottom-0 { border-bottom: 0 !important; }
    .border-md-end { border-right: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6) !important; }
}