/*
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Woodfine Capital Projects Inc.
 */

/* bim-layout.css — structural layout for BIM Objects shell */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--bim-font-sans, 'IBM Plex Sans'), system-ui, sans-serif;
  background: var(--bim-bg-page, #ffffff);
  color: var(--bim-fg, #111827);
}

/* carbon.min.css's reset (h1,h2,h3...{font:inherit}) loads after fonts.css
   and wins the cascade at equal specificity, so the display-font rule has
   to be repeated here, in a sheet that loads after carbon.min.css. */
h1, h2 {
  font-family: var(--bim-font-display);
}

.bim-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header — a single 48px "title block" bar: brand + governing standards,
   nothing else. No utility bar, no in-header search (see RD.7 §2) — those
   were wiki-borrowed (app-mediakit-knowledge-2's utility-bar + search
   convention); this catalog's cross-property links live only in the
   footer's Network column, and /search stays a live, deep-linkable route
   with no chrome entry point (a 24-item sidebar tree doesn't need one).
   2026-07-04: dropped the custom wordmark SVG entirely (operator request)
   — brand identity is now the plain text "BIM Object Library," which
   never disappears at any breakpoint (the old logo+descriptor combo used
   to drop its descriptor text below 480px, leaving zero identity on
   mobile — fixed by not having a separate, droppable descriptor at all).
   `justify-content: space-between` replaces the old flex:1 spacer span,
   which left ~700px of dead space at 1440px width (2026-07-04 audit). */
.bim-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bim-header-height);
  display: flex;
  align-items: center;
  background: var(--bim-bg-surface, #fff);
  border-bottom: 1px solid var(--bim-border, #D0D5DD);
  z-index: 100;
}

.bim-header__inner {
  display: flex;
  align-items: center;
  /* Was `space-between` — with .bim-header__nav's old `flex: 1 1 auto` (see
     bim-planroom.css), the nav's own box grew to fill all remaining width
     while its links stayed left-anchored inside that box, then
     space-between shoved the search+toggle cluster out to the far right
     edge — ~668px of dead space at 1440px (2026-07-09 audit). Brand + nav +
     search + toggle are now one continuous, left-anchored cluster with only
     small deliberate gaps between groups; no max-width container or 2-zone
     grid (explicitly rejected — the void moves to the right edge instead of
     the middle, which is fine).

     Round 5 (2026-07-10) addendum, large screens only: at 1920px the
     right-edge void grew to 1000px+ (live-measured), a much starker
     asymmetry than the 1440px case this comment describes, and the header
     no longer shared a horizontal rhythm with .bim-main's own centered,
     capped column. max-width + margin:0 auto below has zero effect at or
     below 1360px (the row is already narrower than that) — it only engages
     on very wide viewports, redistributing the same void evenly on both
     sides instead of dumping all of it on the right, matching how the main
     content column already centers itself. This does not reintroduce the
     space-between bug above: it caps the row's own width, it does not
     change how brand/nav/search/toggle distribute within that row. */
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.bim-header__brand {
  font-family: var(--bim-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bim-accent, #164679);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.bim-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bim-header__standards {
  font-family: var(--bim-font-mono);
  font-size: 0.65625rem;
  color: var(--bim-fg-faint, #5D6773);
  white-space: nowrap;
}

/* Theme toggle */
.bim-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--bim-fg-secondary, #374151);
  background: transparent;
  border: 1px solid var(--bim-border, #E6E7E8);
  border-radius: var(--bim-radius-md, 4px);
  cursor: pointer;
}

.bim-theme-toggle:hover {
  border-color: var(--bim-accent, #164679);
  color: var(--bim-accent, #164679);
}

.bim-theme-toggle__sun,
.bim-theme-toggle__moon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Language switch (Round 11, 2026-07-12) — labeled in the destination
   language's own name, matching the reference app-mediakit-marketing-2
   pattern. Renders as empty string (nothing in the DOM) when the current
   page has no counterpart in the other language. */
.bim-lang-switch {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.625rem;
  font-family: var(--bim-font-mono);
  font-size: 0.75rem;
  color: var(--bim-fg-secondary, #374151);
  border: 1px solid var(--bim-border, #E6E7E8);
  border-radius: var(--bim-radius-md, 4px);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.bim-lang-switch:hover {
  border-color: var(--bim-accent, #164679);
  color: var(--bim-accent, #164679);
}

.bim-drawer__panel .bim-lang-switch {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.bim-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .bim-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .bim-theme-toggle__moon { display: block; }

/* No longer a flex container — the sidebar it used to lay out alongside
   .bim-main is gone (replaced by the hero + breadcrumb/back-link nav
   model). Previously `flex: 1` forced this element to stretch and fill
   all remaining viewport height even on short pages, leaving ~1500px of
   dead space before the footer on the homepage (2026-07-04 audit) —
   removed; height now simply follows .bim-main's real content, and
   .bim-footer's existing `margin-top: auto` handles pinning the footer to
   the viewport bottom on short pages without forcing .bim-main to stretch. */
.bim-shell {
  margin-top: var(--bim-header-stack);
}

/* .bim-nav-link is a shared base treatment — reused by breadcrumbs, category
   cards, research-index items, and the back-link below. The dedicated
   sidebar-tree nav (.bim-side-nav, .bim-nav-section, .bim-nav-group) was
   removed 2026-07-03: the Envelope-as-Navigation homepage diagram is now
   the primary navigation device, and category/detail pages use a
   breadcrumb + back-link instead of an always-open tree — see
   BRIEF-app-privategit-bim.md's 2026-07-03 rebuild entry. */
.bim-nav-link {
  display: block;
  padding: 0.375rem 0.5rem;
  margin: 0 -0.5rem;
  font-size: 0.875rem;
  color: var(--bim-fg, #101828);
  text-decoration: none;
  border-radius: var(--bim-radius-sm, 4px);
}

.bim-nav-link:hover {
  background: var(--bim-border-subtle, rgba(0,0,0,0.04));
}

.bim-nav-link.active {
  background: var(--bim-accent-subtle, #E8EEF8);
  color: var(--bim-accent, #164679);
  font-weight: 600;
}

.bim-main {
  flex: 1;
  padding: 2rem;
  max-width: 896px;
  min-width: 0;
  margin: 0 auto;
}

@media (max-width: 1056px) {
  .bim-main {
    padding: 1rem;
  }
}

@media (max-width: 600px) {
  .bim-header__standards {
    display: none;
  }
  .bim-header__inner {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }
}

@media (max-width: 480px) {
  .bim-hero__h1 {
    font-size: 1.25rem;
  }
  .bim-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Breadcrumbs */
.bim-breadcrumbs {
  font-size: 0.875rem;
  color: var(--bim-fg-secondary, #374151);
  margin-bottom: 1rem;
}

.bim-breadcrumbs a,
.bim-breadcrumbs .bim-nav-link {
  display: inline;
  padding: 0;
  margin: 0;
  color: var(--bim-accent, #164679);
  text-decoration: none;
}

.bim-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Home grid + /tokens catalog index */
.bim-home-subtitle {
  color: var(--bim-fg-secondary, #374151);
  margin-bottom: 2rem;
}

.bim-tokens-index h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bim-tokens-index__group {
  margin: 2rem 0;
}

.bim-tokens-index__group h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.bim-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* Catalog-family card: top accent border + hover lift, matching the home
   page's `.bim-cat-card` signature (2026-07-06 interior-page pass). */
.bim-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--bim-border, #D0D5DD);
  border-top: 3px solid var(--bim-accent, #164679);
  border-radius: 0;
  background: var(--bim-bg-surface, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.bim-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(11, 35, 64, 0.05), 0 10px 26px -16px rgba(11, 35, 64, 0.28);
  border-color: var(--bim-border-strong, #98A2B3);
  border-top-color: var(--bim-accent-hover, #1D5795);
}

.bim-category-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bim-fg, #101828);
}

.bim-category-card-count {
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--bim-fg-muted, #667085);
  margin-top: auto;
}

/* Category page */
.bim-category-page h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bim-category-page h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}

.bim-intro {
  color: var(--bim-fg-secondary, #374151);
  margin-bottom: 0.75rem;
}

.bim-ifc-anchor, .bim-elements {
  font-size: 0.875rem;
  color: var(--bim-fg-secondary, #374151);
  margin-bottom: 0.5rem;
}

/* Key plans grid */
.bim-key-plans h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bim-kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.bim-kp-card {
  border: 1px solid #E6E7E8;
  overflow: hidden;
}

.bim-kp-svg {
  background: #F7F9FA;
  display: block;
}

.bim-kp-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.bim-kp-info {
  padding: 0.75rem;
}

.bim-kp-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.bim-kp-meta {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.bim-tag {
  background: #E6E7E8;
  padding: 0.1em 0.4em;
  border-radius: 2px;
}

.bim-cat {
  color: var(--bim-fg-secondary, #374151);
}

.bim-kp-area {
  font-size: 0.75rem;
  color: var(--bim-fg-muted, #6B7280);
}

.bim-kp-note {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--bim-fg-muted, #6B7280);
}

/* Furniture */
.bim-furniture h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bim-furniture-actions {
  margin: 1rem 0;
}

.bim-furniture-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bim-furniture-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid #E6E7E8;
}

.bim-furniture-name {
  flex: 1;
  font-size: 0.875rem;
}

/* Research */
.bim-research h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.bim-research-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bim-research-item a {
  display: block;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bim-border, #E6E7E8);
  border-top: 3px solid var(--bim-accent, #164679);
  border-radius: 0;
  background: var(--bim-bg-surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.bim-research-item a:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(11, 35, 64, 0.05), 0 10px 26px -16px rgba(11, 35, 64, 0.28);
  border-color: var(--bim-border-strong, #98A2B3);
  border-top-color: var(--bim-accent-hover, #1D5795);
}

.bim-research-item__title {
  display: block;
  font-family: var(--bim-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bim-fg, #111827);
}

/* Search results — catalog-family card treatment, kind rendered as a
   mono classification chip (matches the home page's chip language). */
.bim-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bim-search-result {
  display: block;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bim-border, #E6E7E8);
  border-top: 3px solid var(--bim-accent, #164679);
  border-radius: 0;
  background: var(--bim-bg-surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.bim-search-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(11, 35, 64, 0.05), 0 10px 26px -16px rgba(11, 35, 64, 0.28);
  border-color: var(--bim-border-strong, #98A2B3);
  border-top-color: var(--bim-accent-hover, #1D5795);
}

.bim-search-result__kind {
  display: inline-flex;
  align-items: center;
  font-family: var(--bim-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bim-accent, #164679);
  background: var(--bim-accent-subtle, #E8EEF5);
  border: 1px solid var(--bim-accent, #164679);
  border-radius: var(--bim-radius-sm, 4px);
  padding: 0.1875rem 0.5rem;
  margin-bottom: 0.625rem;
}

.bim-search-result__title {
  display: block;
  font-family: var(--bim-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bim-fg, #111827);
}

.bim-search-result__snippet {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--bim-fg-secondary, #374151);
  line-height: 1.5;
}

.bim-search-result__snippet mark {
  background: var(--bim-accent-subtle, #E8EFF7);
  color: var(--bim-fg, #111827);
  border-radius: 2px;
  padding: 0 0.1em;
}

.bim-research-item__slug {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--bim-font-mono);
  font-size: 0.75rem;
  color: var(--bim-fg-muted, #6B7280);
}

.bim-markdown {
  max-width: 72ch;
  line-height: 1.6;
  color: var(--bim-fg-secondary, #374151);
}

.bim-markdown h1 {
  font-family: var(--bim-font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bim-fg, #111827);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.bim-markdown h2 {
  font-family: var(--bim-font-display);
  color: var(--bim-fg, #111827);
}

.bim-markdown h2, .bim-markdown h3 {
  font-weight: 400;
  margin: 1.5rem 0 0.5rem;
}

.bim-markdown p {
  margin: 0 0 1rem;
}

.bim-markdown ul, .bim-markdown ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.bim-markdown li {
  margin-bottom: 0.375rem;
}

.bim-markdown a {
  color: var(--bim-accent, #164679);
}

.bim-markdown code {
  background: #F7F9FA;
  padding: 0.1em 0.3em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875em;
}

.bim-markdown pre {
  background: #F7F9FA;
  padding: 1rem;
  overflow-x: auto;
}

.bim-markdown table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.bim-markdown th, .bim-markdown td {
  padding: 0.375rem 0.75rem;
  border: 1px solid #E6E7E8;
  text-align: left;
}

.bim-markdown th {
  background: #F7F9FA;
  font-weight: 600;
}

/* Empty state */
.bim-empty {
  padding: 2rem;
  color: var(--bim-fg-secondary, #374151);
}

/* Editor */
.bim-editor {
  max-width: 900px;
}

.bim-editor-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.bim-editor-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.bim-editor-pane {
  margin-bottom: 1rem;
}

.bim-editor-preview {
  background: #F7F9FA;
  padding: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  overflow-x: auto;
  border: 1px solid #E6E7E8;
  max-height: 60vh;
  overflow-y: auto;
}

.bim-codemirror-host {
  border: 1px solid #E6E7E8;
  min-height: 400px;
  font-size: 0.875rem;
}

.bim-editor-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* "Anatomy of a Key Plan" homepage hero (2026-07-04 rebuild). Shows PO-1,
   a real, already-shipped catalog entry, using the same diagram generator
   already live on /key-plans (render::svg::render_kp_zone_svg_from_value)
   — not invented geometry. Real-fact callouts, always visible (not
   hover-only), each a clickable hotspot routed to a catalog Section. */
.bim-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--bim-border, #E6E7E8);
  margin-bottom: 2rem;
}

.bim-hero__diagram {
  flex: 1 1 320px;
  min-width: 240px;
  max-width: 360px;
}

.bim-hero__diagram svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bim-border, #E6E7E8);
}

.bim-hero__panel {
  flex: 1 1 360px;
  min-width: 280px;
}

.bim-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bim-fg-muted, #6B7280);
  margin: 0 0 0.5rem;
}

.bim-hero__h1 {
  font-family: var(--bim-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bim-fg, #111827);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.bim-hero__example-label {
  font-size: 0.9375rem;
  color: var(--bim-fg-secondary, #374151);
  margin: 0 0 0.75rem;
}

.bim-hero__example-label strong {
  color: var(--bim-accent, #164679);
}

.bim-hero__lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--bim-fg-secondary, #374151);
  max-width: 60ch;
  margin: 0 0 1.25rem;
}

.bim-hero__callouts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.bim-hero-callout {
  display: block;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bim-border, #D0D5DD);
  border-radius: var(--bim-radius-md, 6px);
  background: var(--bim-bg-surface, #fff);
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.bim-hero-callout:hover,
.bim-hero-callout:focus-visible {
  border-color: var(--bim-accent, #164679);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

.bim-hero-callout__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bim-accent, #164679);
  margin-bottom: 0.125rem;
}

.bim-hero-callout__fact {
  display: block;
  font-size: 0.8125rem;
  color: var(--bim-fg-secondary, #374151);
}

.bim-hero-callout__fact code {
  font-family: var(--bim-font-mono);
  font-size: 0.8125em;
}

.bim-hero__credit {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--bim-fg-muted, #6B7280);
  margin: 0;
}

@media (max-width: 700px) {
  .bim-hero {
    flex-direction: column;
  }
  .bim-hero__diagram {
    max-width: 100%;
  }
}

/* Article prose sections (/about, /disclaimers). Catalog-family typography:
   display-font section headings on a hairline rule, serif-adjacent body
   measure. Section content itself is unchanged — this is a visual pass. */
.bim-article {
  max-width: 68ch;
  margin: 0;
}
.bim-article section {
  margin-bottom: 2rem;
}
.bim-article section:last-child {
  margin-bottom: 0;
}
.bim-article h2 {
  font-family: var(--bim-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bim-fg, #111827);
  margin: 0 0 0.875rem;
  padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--bim-border, #E6E7E8);
}
.bim-article p {
  line-height: 1.7;
  color: var(--bim-fg-secondary, #374151);
  margin: 0 0 1rem;
}
.bim-article a {
  color: var(--bim-accent, #164679);
}
.bim-article ol,
.bim-article ul {
  padding-left: 1.5rem;
  line-height: 1.7;
  color: var(--bim-fg-secondary, #374151);
}
.bim-article li {
  margin-bottom: 0.5rem;
}

/* Footer — full width from the viewport edge; no sidebar to offset around
   since the sidebar tree was removed 2026-07-03. 2 columns + a single
   "part of the network" line + 1 badge (was 3 columns + 3 badges) per the
   operator's design.pointsav.com-leaner-shape note. Uses `--bim-bg-surface`
   (2026-07-09 fix) rather than the prior hardcoded `#f8f9fa` literal — the
   2026-07 audit measured a ~1.2:1 contrast failure in dark mode because the
   hardcoded light-mode hex never flipped while the text color (a themed
   var) did. Both now flip together, in both directions, with every other
   surface on the page — no half-inverted states. */
/* 2026-07-09 texture/elevation fix: the footer used to be a completely
   flat slab (solid --bim-bg-surface, hairline top border, no shadow) while
   every other surface on the page (cards, the catalog hero, the mobile
   drawer) carries a soft navy-tinted shadow and/or the drafting-grid
   texture — the footer read as a plain block appended under an
   art-directed page. A faint top-edge shadow plus a very light navy tint
   fading down from the top border now match that language without
   competing with the footer's own (still flat, still readable) content. */
.bim-footer {
  background:
    linear-gradient(180deg, rgba(22, 70, 121, 0.035), transparent 46%),
    var(--bim-bg-surface, #ffffff);
  color: var(--bim-fg-secondary, #374151);
  padding: 2rem;
  margin-top: auto;
  border-top: 1px solid var(--bim-border, #D0D5DD);
  box-shadow: 0 -10px 24px -20px rgba(11, 35, 64, 0.28);
}
:root[data-theme="dark"] .bim-footer {
  background:
    linear-gradient(180deg, rgba(180, 197, 213, 0.05), transparent 46%),
    var(--bim-bg-surface, #0B2340);
}

.bim-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Heading hierarchy fix: was 14px/600 vs. the 13px/400 body list right
   below it — too close in size to read as a heading at a glance, so the 3
   columns ran together as one gray paragraph block (2026-07-09 audit).
   Bumped into the 16-18px range and given real breathing room below (was
   an 8px gap that felt like a docs sidebar, worst on the 390px mobile
   view where the 3 columns stack 1-up and carry the same tight gap). */
.bim-footer__heading {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bim-fg, #101828);
  margin: 0 0 0.875rem 0;
}
.bim-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bim-fg-secondary, #374151);
}
.bim-footer__list li {
  margin-bottom: 0.375rem;
}
.bim-footer__list li:last-child {
  margin-bottom: 0;
}
.bim-footer__list a {
  color: var(--bim-accent, #164679);
  text-decoration: none;
}
.bim-footer__list a:hover {
  text-decoration: underline;
}
.bim-footer__base {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bim-border-subtle, #E5E7EB);
  font-size: 0.75rem;
  color: var(--bim-fg-muted, #667085);
}
.bim-footer__base p {
  margin: 0 0 0.5rem;
}
.bim-footer__base p:last-child {
  margin-bottom: 0;
}
.bim-footer__trademark {
  max-width: 72ch;
  font-size: 0.6875rem;
  color: var(--bim-fg-faint, #5D6773);
  line-height: 1.5;
}

/* Persistent one-line disclaimer — always visible (not just the
   collapsible Important Information band), so a collapsed band never
   screenshots bare. */
.bim-footer__disclaimer {
  font-size: 0.75rem;
  color: var(--bim-fg-muted, #667085);
  margin: 0 0 0.5rem;
}

.bim-badge__cc {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.bim-cc-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Cities left, badge(s) right (2026-07-06 operator decision — the badge
   stays and is intentionally right-aligned, reversing the 2026-07-04
   tight-grouping choice). Reverted 2026-07-11 from the Round 6 bordered
   title-block treatment back to this floating-card layout per operator
   instruction — the compartmentalized frame read worse than each element
   (cities text, CC badge, PrivateGit badge) floating independently with
   its own spacing. */
.bim-footer__base-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.bim-footer__cities {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bim-fg-muted, #667085);
}
.bim-footer__cities-inner { display: flex; align-items: center; gap: 0.625rem; }

.bim-footer__cities-sep {
  color: var(--bim-border-strong, #98A2B3);
}

.bim-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Card treatment (2026-07-09 audit): the CC-BY-ND and "Powered by PointSav"
   badges used to be the flattest thing on the page — ~4px radius (well,
   2px: --bim-radius-sm), no shadow at all — so they read as generic
   license-compliance chips instead of first-class footer content. Given
   the same radius + soft navy-tinted shadow the Objects/Compositions
   catalog cards use (bim-components.css's .bim-cat-card), applied at rest
   (not hover-only — a footer badge isn't a primary interactive surface the
   way a catalog card is, so it should already read as "raised" sitting in
   the footer). */
.bim-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--bim-border, #D0D5DD);
  border-radius: var(--bim-radius-card, 10px);
  background: var(--bim-bg-surface, #fff);
  color: var(--bim-fg-secondary, #374151);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 35, 64, 0.05), 0 10px 26px -16px rgba(11, 35, 64, 0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

a.bim-badge:hover {
  border-color: var(--bim-accent, #164679);
  color: var(--bim-accent, #164679);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11, 35, 64, 0.08), 0 14px 30px -16px rgba(11, 35, 64, 0.34);
}

.bim-badge__glyph {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.bim-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bim-badge__lead {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bim-fg-muted, #667085);
}

.bim-badge__name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bim-fg, #101828);
}

/* "Important Information" disclosure band — full-width, no sidebar to
   offset around. 2026-07-03 fixes: (1) the full disclosure copy now
   renders inline (reusing the same sections /disclaimers shows) instead
   of a 2-paragraph summary truncated to a "read more" link — matching the
   pattern already correct on home.woodfinegroup.com/home.pointsav.com;
   (2) the summary heading is now visibly larger/heavier than its own body
   text, fixing the inverted type hierarchy the audit found (was 0.75rem
   vs. the body's 0.8125rem). */
.bim-disclosure {
  border-top: 1px solid var(--bim-border, #E6E7E8);
  background: var(--bim-bg-subtle, #F7F9FA);
}

.bim-disclosure__details {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.bim-disclosure__summary {
  cursor: pointer;
  padding: 1.25rem 0;
  font-family: var(--bim-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--bim-fg, #101828);
  list-style: none;
}

.bim-disclosure__summary::-webkit-details-marker {
  display: none;
}

.bim-disclosure__summary::before {
  content: "\25B8  ";
  color: var(--bim-fg-muted, #6B7280);
}

.bim-disclosure__details[open] .bim-disclosure__summary::before {
  content: "\25BE  ";
}

/* The record copy carries the full disclaimer, expanded, regardless of
   on-screen open/closed state — matches the proven pattern in
   project-knowledge/app-mediakit-knowledge/static/app.css. */
@media print {
  .bim-disclosure__body { display: block !important; }
  .bim-disclosure__summary::before { display: none; }
}

.bim-disclosure__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bim-fg-muted, #6B7280);
  margin: -0.5rem 0 1rem;
}

.bim-disclosure__body {
  max-width: 72ch;
  padding-bottom: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bim-fg-secondary, #374151);
}

.bim-disclosure__body h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bim-fg, #101828);
  margin: 1.25rem 0 0.375rem;
}

.bim-disclosure__body h3:first-of-type {
  margin-top: 0;
}

.bim-disclosure__body p {
  margin: 0 0 0.75rem;
}

.bim-disclosure__more {
  margin-top: 1rem !important;
  font-size: 0.75rem;
}

/* ============================================================================
   CATALOG HOME (`/`) — page-level layout: hero, definition grid, catalog
   two-column (facets + card grid), sticky tab bar. Component-level treatment
   (chips, cards, modal, spec tables) lives in bim-components.css. The home
   page needs more width than the 896px prose column, so widen `.bim-main`
   only when it hosts the catalog (scoped via :has, no shell change).
   ============================================================================ */
.bim-main:has(.bim-catalog-home) { max-width: 1180px; }

.bim-catalog-home { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }

/* ---- hero ---- */
.bim-cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  color: #EAF1FA;
  border: 1px solid var(--bim-border, #E6E7E8);
  border-top: 3px solid var(--bim-accent, #164679);
  background:
    radial-gradient(120% 130% at 82% -10%, rgba(41, 86, 140, 0.55) 0%, transparent 55%),
    linear-gradient(155deg, #10365C 0%, #0B2340 58%, #071A31 100%);
}
.bim-cat-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BFD4EE;
  border: 1px solid rgba(160, 190, 225, 0.34);
  padding: 0.375rem 0.75rem;
}
.bim-cat-hero__eyebrow b { color: #EAF1FA; font-weight: 600; }
.bim-cat-hero__title {
  font-family: var(--bim-font-display);
  font-weight: 700;
  color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.bim-cat-hero__lede {
  font-family: var(--bim-font-serif);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: #D3E0F0;
  max-width: 54ch;
  margin-top: 1.25rem;
}
.bim-cat-hero__lede strong { color: #fff; font-weight: 600; }
.bim-cat-hero__sites { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bim-cat-hero__sites span {
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #CFE0F2;
  border: 1px solid rgba(150, 182, 220, 0.3);
  background: rgba(23, 50, 84, 0.4);
  padding: 0.3125rem 0.6875rem;
}
.bim-cat-hero__panel {
  border: 1px solid rgba(150, 182, 220, 0.28);
  background: rgba(11, 26, 49, 0.55);
}
.bim-cat-hero__panel-h {
  padding: 0.8125rem 1.125rem;
  border-bottom: 1px solid rgba(150, 182, 220, 0.24);
  font-family: var(--bim-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9FBCE0;
}
.bim-cat-hero__stats { display: grid; grid-template-columns: 1fr 1fr; }
.bim-cat-hstat {
  padding: 1rem 1.125rem;
  border-top: 1px solid rgba(150, 182, 220, 0.16);
  border-right: 1px solid rgba(150, 182, 220, 0.16);
}
.bim-cat-hstat:nth-child(2n) { border-right: 0; }
.bim-cat-hstat:nth-child(-n + 2) { border-top: 0; }
.bim-cat-hstat__n {
  font-family: var(--bim-font-mono);
  font-size: 1.625rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}
.bim-cat-hstat__n small { font-size: 0.5em; color: #9FBCE0; font-weight: 500; }
.bim-cat-hstat__l { font-size: 0.6875rem; color: #A9C2DE; margin-top: 3px; line-height: 1.35; }

/* ---- section headers ---- */
.bim-cat-sechead { max-width: 720px; }
.bim-cat-kicker {
  display: inline-block;
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bim-accent, #164679);
  margin-bottom: 0.75rem;
}
.bim-cat-sechead h2 {
  font-family: var(--bim-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bim-fg, #111827);
}
.bim-cat-sechead p { color: var(--bim-fg-secondary, #374151); font-size: 1rem; line-height: 1.6; margin-top: 0.875rem; }

/* ---- definition grid ---- */
.bim-cat-def { display: flex; flex-direction: column; gap: 1.75rem; }
.bim-cat-def-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
.bim-cat-defcard {
  background: var(--bim-bg-surface, #fff);
  border: 1px solid var(--bim-border, #E6E7E8);
  border-top: 3px solid var(--bim-accent, #164679);
  padding: 1.625rem 1.625rem 1.5rem;
}
.bim-cat-defcard__tag {
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bim-accent, #164679);
  margin-bottom: 0.875rem;
}
.bim-cat-defcard h3 { font-family: var(--bim-font-display); font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.625rem; color: var(--bim-fg, #111827); }
.bim-cat-defcard p { color: var(--bim-fg-secondary, #374151); font-size: 0.9rem; line-height: 1.64; }
.bim-cat-defcard code {
  font-family: var(--bim-font-mono);
  font-size: 0.85em;
  background: var(--bim-bg-subtle, #EEF1F5);
  padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--bim-border, #E6E7E8);
  color: var(--bim-fg, #111827);
}
.bim-cat-defcard__foot {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--bim-border, #E6E7E8);
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  color: var(--bim-fg-muted, #6B7280);
}

/* ---- catalog + tab bar ---- */
.bim-cat-catalog { display: flex; flex-direction: column; gap: 1.25rem; }
.bim-cat-tabbar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--bim-border-strong, #98A2B3);
  position: sticky;
  top: var(--bim-header-height, 48px);
  z-index: 30;
  background: var(--bim-bg-page, #F7F9FA);
  padding-top: 0.375rem;
}
.bim-cat-tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.8125rem 1.125rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bim-fg-muted, #6B7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.bim-cat-tab:hover { color: var(--bim-fg-secondary, #374151); }
.bim-cat-tab[aria-selected="true"] { color: var(--bim-accent, #164679); border-bottom-color: var(--bim-accent, #164679); }
.bim-cat-count {
  font-family: var(--bim-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  background: var(--bim-bg-subtle, #EEF1F5);
  color: var(--bim-fg-muted, #6B7280);
  border: 1px solid var(--bim-border, #E6E7E8);
}
.bim-cat-tab[aria-selected="true"] .bim-cat-count {
  background: var(--bim-accent-subtle, #E8EEF5);
  color: var(--bim-accent, #164679);
  border-color: var(--bim-accent, #164679);
}

/* ---- catalog body: facets + grid ---- */
.bim-cat-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.875rem; align-items: start; }
.bim-cat-facets { position: sticky; top: calc(var(--bim-header-height, 48px) + 3.5rem); }
.bim-cat-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--bim-border-strong, #98A2B3);
  background: var(--bim-bg-surface, #fff);
  padding: 0 0.75rem;
  margin-bottom: 1.25rem;
}
.bim-cat-search__ico { color: var(--bim-fg-muted, #6B7280); font-size: 1rem; }
.bim-cat-search input {
  border: 0;
  background: none;
  outline: none;
  color: var(--bim-fg, #111827);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.6875rem 0;
  width: 100%;
}
.bim-cat-fgrp { border-top: 1px solid var(--bim-border, #E6E7E8); padding: 0.9375rem 0 0.5rem; }
.bim-cat-fgrp:first-child { border-top: 0; padding-top: 0; }
.bim-cat-fgrp__h {
  font-family: var(--bim-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bim-fg-muted, #6B7280);
  margin-bottom: 0.6875rem;
  font-weight: 600;
}
.bim-cat-facet {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.25rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--bim-fg-secondary, #374151);
  user-select: none;
}
.bim-cat-facet:hover { background: var(--bim-bg-subtle, #EEF1F5); color: var(--bim-fg, #111827); }
.bim-cat-facet input { position: absolute; opacity: 0; width: 0; height: 0; }
.bim-cat-facet__box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--bim-border-strong, #98A2B3);
  flex: none;
  position: relative;
}
.bim-cat-facet input:checked + .bim-cat-facet__box {
  background: var(--bim-accent, #164679);
  border-color: var(--bim-accent, #164679);
}
.bim-cat-facet input:checked + .bim-cat-facet__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bim-cat-facet input:focus-visible + .bim-cat-facet__box { outline: 2px solid var(--bim-accent, #164679); outline-offset: 2px; }
.bim-cat-facet__lbl { flex: 1 1 auto; }
.bim-cat-facet__n { font-family: var(--bim-font-mono); font-size: 0.6875rem; color: var(--bim-fg-muted, #6B7280); }
.bim-cat-reset {
  margin-top: 0.9375rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--bim-accent, #164679);
  font-weight: 600;
  padding: 0.375rem 0.25rem;
}
.bim-cat-reset:hover { text-decoration: underline; }

.bim-cat-gridhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.125rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.bim-cat-res { font-family: var(--bim-font-mono); font-size: 0.8125rem; color: var(--bim-fg-muted, #6B7280); }
.bim-cat-res b { color: var(--bim-fg, #111827); font-weight: 600; }
.bim-cat-hint { font-size: 0.75rem; color: var(--bim-fg-muted, #6B7280); }
.bim-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 1.125rem; }
/* Real bug found via browser-in-the-loop screenshot review (2026-07-06):
   `[hidden]`'s UA default (`display: none`) was being beaten by this rule's
   own `display: grid` (author stylesheet always wins over UA styles at any
   specificity), so both the Objects and Compositions panels rendered
   stacked on top of each other regardless of the tab-switching JS setting
   `.hidden` on the inactive panel. Explicit override restores correct
   single-panel display. */
.bim-cat-grid[hidden] { display: none; }
.bim-cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.25rem;
  color: var(--bim-fg-muted, #6B7280);
  border: 1px dashed var(--bim-border-strong, #98A2B3);
}

@media (max-width: 1000px) {
  .bim-cat-hero { grid-template-columns: 1fr; }
  .bim-cat-hero__panel { max-width: 460px; }
  .bim-cat-body { grid-template-columns: 1fr; }
  .bim-cat-facets { position: static; }
  .bim-cat-def-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bim-cat-zones { grid-template-columns: 1fr; }
  .bim-cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Grid-item guard + let long classification chips wrap instead of forcing
     the card column (and page) wider than the viewport at phone widths. The
     descendant selector (0,2,0) is deliberate: it must out-specify the base
     `.bim-cat-chip { white-space: nowrap }` in bim-components.css, which loads
     after this file. */
  .bim-cat-card { min-width: 0; }
  .bim-cat-card .bim-cat-chip { white-space: normal; max-width: 100%; }
}

/* ============================================================================
   INTERIOR PAGES (/tokens, /tokens/{name}, /about, /disclaimers, /search,
   /research) — brought onto the same visual family as the catalog home (`/`)
   in the 2026-07-06 pass. These pages reuse the catalog's design tokens,
   `.bim-cat-kicker`, `.bim-cat-chip*`, and `.bim-cat-spectable` verbatim, and
   add a shared interior-page masthead plus /tokens section headers. The home
   page's own `.bim-cat-*` rules are untouched — this block only ADDS classes
   or restyles interior-only classes (`.bim-category-card`, `.bim-article`,
   `.bim-search-result`, `.bim-research-item`) that the home page never uses.
   Appended last so the masthead h1 wins over the earlier per-page h1 rules
   (`.bim-tokens-index h1`, `.bim-category-page h1`, `.bim-research h1`) at
   equal specificity.
   ============================================================================ */

/* Shared masthead — kicker + display-font title + optional lede. Mirrors the
   catalog hero/section-header language without the navy panel, so every
   interior page opens with the same masthead the catalog established. */
.bim-cat-pagehead {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--bim-border, #E6E7E8);
}
.bim-cat-pagehead .bim-cat-kicker {
  display: inline-block;
  margin-bottom: 0.625rem;
}
.bim-cat-pagehead h1 {
  font-family: var(--bim-font-display);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--bim-fg, #111827);
  margin: 0;
}
.bim-cat-pagehead__lede {
  font-family: var(--bim-font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bim-fg-secondary, #374151);
  max-width: 60ch;
  margin: 0.875rem 0 0;
}
/* The category-detail masthead carries a classification chip row; pin it
   directly under the title instead of the free-standing chip-row margin. */
.bim-cat-pagehead .bim-chip-row {
  margin: 0.875rem 0 0;
}

/* /tokens section headers — display-font label with a mono section index,
   on a hairline rule (the catalog's kicker/`.bim-cat-sechead` vocabulary,
   scaled down for an index page with four sections). */
.bim-tokens-sechead {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bim-border, #E6E7E8);
}
.bim-tokens-secnum {
  font-family: var(--bim-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bim-accent, #164679);
}
.bim-tokens-index__group {
  margin: 2.5rem 0;
}
.bim-tokens-index__group h2 {
  font-family: var(--bim-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bim-fg, #111827);
  margin: 0;
}