/* ============================================================================
   BME — STYLE GUIDE  ·  shared component + layout stylesheet
   ----------------------------------------------------------------------------
   Loaded after fonts.css and tokens.css. Everything here builds on the tokens.
   Organisation:
     1. Bridge variables & chrome constants
     2. Base / reset  (brutalist universal laws)
     3. Font & text utilities
     4. Layout containers
     5. Chrome  (superbar · safety bar · footer)  — theme-independent
     6. Mastheads & property navbars
     7. Components  (badges · buttons · flash · plates · cards · gates · …)
     8. Prose / reading zone
     9. Style-guide document layout
   ========================================================================= */

/* 1 · BRIDGE VARIABLES & CHROME CONSTANTS ---------------------------------- */
:root {
  --font-masthead: 'Playfair Display', serif;   /* publisher */
  --font-slab: 'Alfa Slab One', serif;           /* IAM / internal */
  --font-serif: 'Source Serif 4', Georgia, serif;/* reading body */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* secondary foreground + soft line, bridged to canonical tokens so page
     markup can lean on the same names the prototypes used. */
  --fg2: var(--faded-ink);
  --line2: var(--line-soft);

  --maxw: 1280px;    /* body content width */
  --gutter: 28px;    /* consistent L/R margin */

  /* Theme-independent chrome (superbar/safety bar/footer never invert) */
  --chrome-ink: #0A0A0A;
  --chrome-fg: #FAF9F9;
  --chrome-dim: #7d7d7d;
  --chrome-mute: #9a9a9a;
  --chrome-line: #2a2a2a;
  --chrome-sep: #3a3a3a;
  --chrome-blue: #3C47AC;
  --chrome-indigo: #9aa0e0;
  --gate-dim: #cfcfcf;
}
.dark { --fg2: var(--bone); }

/* 2 · BASE / RESET --------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0;      /* brutalist law: zero radius, everywhere */
}
html, body { margin: 0; padding: 0; }
html { font-family: var(--font-serif); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

a:focus-visible,
button:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--heritage-blue);
  outline-offset: 2px;
}
::selection { background: #6163BA; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* glyph is black artwork on transparent; knock it to white in dark mode */
.glyph-invert { filter: none; }
.dark .glyph-invert { filter: invert(1); }

/* 3 · FONT & TEXT UTILITIES ------------------------------------------------ */
.font-masthead { font-family: var(--font-masthead); }
.font-slab     { font-family: var(--font-slab); }
.font-serif    { font-family: var(--font-serif); }
.font-mono     { font-family: var(--font-mono); }

.u-meta  { color: var(--meta); }
.u-blue  { color: var(--heritage-blue); }
.u-caps  { text-transform: uppercase; letter-spacing: .12em; }
.u-fg2   { color: var(--fg2); }

/* link: underlined always, never color alone; hard, instant state changes */
.link {
  color: var(--heritage-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--deep-heritage-blue); background: rgba(97, 99, 186, .16); }
.link:active { color: #FAF9F9; background: var(--deep-heritage-blue); }
.link:visited { color: #71738F; }

/* the ubiquitous small mono kicker/label */
.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
}
.label--blue { color: var(--heritage-blue); }
.label--fg   { color: var(--fg); }

/* hairline rules */
.rule       { border: none; border-top: 1px solid var(--line); margin: 0; }
.rule--soft { border-top-color: var(--line2); }
.rule--3    { border-top-width: 3px; }

/* layout helpers */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grid  { display: grid; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.gap-0  { gap: 0; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 14px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 24px; }
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* hairline "cell grid": container draws top+left, each child draws right+bottom,
   producing the ledger-like 1px matrix used throughout the guide. */
.cell-grid {
  display: grid;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.cell-grid > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cell { padding: 16px 18px; }

/* 4 · LAYOUT CONTAINERS ---------------------------------------------------- */
/* full-width band; the inner element re-establishes the margined column */
.band { width: 100%; }
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 640px) { :root { --gutter: 20px; } }

/* 5 · CHROME (theme-independent) ------------------------------------------- */
/* 5.1 Superbar — full-width, always --ink */
.superbar {
  background: var(--chrome-ink);
  color: var(--chrome-fg);
  border-bottom: 1px solid var(--chrome-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.superbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.superbar__group { display: flex; align-items: center; gap: 14px; }
.superbar a { color: var(--chrome-dim); }
.superbar a.is-active,
.superbar__user strong { color: var(--chrome-fg); font-weight: 600; }
.superbar__user { display: flex; align-items: center; gap: 12px; color: var(--chrome-dim); }
.superbar__sep { color: var(--chrome-sep); }

/* 5.2 Safety bar — full-width, always --deep-heritage-blue */
.safety-bar { background: var(--chrome-blue); color: #fff; }
.safety-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.3;
}
.safety-bar__tag {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .55);
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: .12em;
}

/* 5.3 Site footer — full-width, always --ink */
.site-footer {
  background: var(--chrome-ink);
  color: var(--chrome-fg);
  border-top: 3px solid var(--chrome-blue);
  font-family: var(--font-mono);
}
.site-footer .wrap { padding-top: 36px; padding-bottom: 30px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
.site-footer__brand { display: flex; align-items: flex-start; gap: 14px; }
.site-footer__mark {
  width: 52px; height: 52px; flex: none;
  background: var(--chrome-fg);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.site-footer__wordmark {
  font-family: var(--font-masthead);
  font-weight: 900; font-size: 30px; line-height: .9;
}
.site-footer__wordmark sup { font-size: 13px; vertical-align: super; }
.site-footer__sub { font-size: 9px; letter-spacing: .28em; margin-top: 5px; color: var(--chrome-mute); }
.site-footer__note { font-size: 11px; line-height: 1.6; color: var(--chrome-mute); margin: 16px 0 0; max-width: 34ch; }
.site-footer__quote { font-family: var(--font-masthead); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--chrome-fg); margin: 16px 0 0; }
.site-footer__head {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrome-dim);
  border-bottom: 1px solid var(--chrome-line);
  padding-bottom: 8px; margin-bottom: 12px;
}
.site-footer__list { display: flex; flex-direction: column; gap: 9px; font-size: 11.5px; }
.site-footer__list a { color: var(--chrome-fg); }
.site-footer__list.is-screens a { color: var(--chrome-indigo); }
.site-footer__base {
  border-top: 1px solid var(--chrome-line);
  margin-top: 30px; padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 10px; letter-spacing: .06em; color: var(--chrome-dim);
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* 6 · MASTHEADS & NAVBARS -------------------------------------------------- */
/* 6.1 dateline strip above a masthead */
.dateline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--meta);
}

/* 6.2 masthead base (3px rule under) */
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 16px 0;
  border-bottom: 3px solid var(--line);
}
.masthead__brand { display: flex; align-items: center; gap: 14px; }
.masthead__mark {
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.masthead__mark--boxed { border: 1px solid var(--line); background: var(--surface); padding: 10px; }
.masthead__mark--paper { background: #FAF9F9; padding: 6px; }
.wordmark {
  font-family: var(--font-masthead);
  font-weight: 900; line-height: .85;
  color: var(--fg);
}
.wordmark sup { vertical-align: super; }
.wordmark--slab { font-family: var(--font-slab); font-weight: 400; }
.masthead__sub {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--meta); margin-top: 4px;
}
.masthead__aside {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--meta); text-align: right;
}

/* big BME.COM home masthead variant */
.masthead--home { align-items: center; }
.masthead--home .wordmark { font-size: 104px; }
.masthead--home .wordmark sup { font-size: 30px; font-weight: 700; }
.masthead--home .masthead__sub { font-size: 13px; letter-spacing: .46em; margin-top: 10px; color: var(--fg); }

/* 6.3 property navbar */
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.navbar__links { display: flex; }
.navbar a { padding: 11px 16px; color: var(--fg); }
.navbar a:first-child { padding-left: 0; }
.navbar a.is-active {
  font-weight: 600;
  border-bottom: 3px solid var(--heritage-blue);
  margin-bottom: -1px;
}
.navbar__meta { color: var(--meta); font-size: 11px; letter-spacing: .1em; }

/* dark-mode toggle (square checkbox) */
.theme-toggle {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--line);
  padding: 9px 12px; cursor: pointer; color: var(--fg);
  font-family: var(--font-mono);
}
.theme-toggle__box {
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--fg);
  display: flex; align-items: center; justify-content: center;
  color: var(--bg); font-size: 11px; line-height: 1;
  background: transparent;
}
.dark .theme-toggle__box { background: var(--fg); }
.theme-toggle__box::after { content: ""; }
.dark .theme-toggle__box::after { content: "\00d7"; }
.theme-toggle__label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

/* 7 · COMPONENTS ----------------------------------------------------------- */
/* 7.1 tier badges (mono-caps) */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: .14em;
  width: max-content;
}
.badge--sm { padding: 2px 7px; font-size: 10px; letter-spacing: .1em; }
.badge--open      { border-color: var(--line); color: var(--fg); }
.badge--community { border-color: var(--heritage-blue); color: var(--heritage-blue); }
.badge--gated     { background: var(--deep-heritage-blue); color: #fff; border-color: var(--deep-heritage-blue); }

/* 7.2 buttons — hard edges, no radius, no pill */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--line);
  background: none; color: var(--fg);
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--blue    { background: var(--heritage-blue); color: #fff; border-color: var(--heritage-blue); }
.btn--disabled { border-color: var(--line2); color: var(--meta); cursor: default; }
.btn--sm { padding: 9px 16px; }
.btn--paper { background: #FAF9F9; color: #0A0A0A; border: none; }

/* 7.3 flash / system messages */
.flash { border: 1px solid var(--line); display: flex; align-items: stretch; }
.flash__accent { width: 8px; flex: none; }
.flash__body { padding: 14px 16px; }
.flash__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.flash__dot { width: 7px; height: 7px; flex: none; }
.flash__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.flash__text { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--fg2); }
.flash--dismissible .flash__body { flex: 1; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.flash--info    .flash__accent, .flash--info    .flash__dot { background: var(--info); }
.flash--success .flash__accent, .flash--success .flash__dot { background: var(--success); }
.flash--warning .flash__accent, .flash--warning .flash__dot { background: var(--warning); }
.flash--caution .flash__accent, .flash--caution .flash__dot { background: var(--caution); }
.flash--danger  .flash__accent, .flash--danger  .flash__dot { background: var(--danger); }
.flash--note    .flash__accent, .flash--note    .flash__dot { background: var(--note); }

/* empty state */
.empty-state {
  border: 1px dashed var(--line2);
  padding: 26px; text-align: center;
}
.empty-state p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; margin: 0; }
.empty-state p.is-muted { color: var(--meta); }
.empty-state p.is-invite { color: var(--fg2); }

/* 7.4 archival plate & data card */
.plate {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta);
  padding: 8px;
}
.plate--frame { border: 1px solid var(--line); padding: 14px; background: var(--surface); }
.data-card { border: 1px solid var(--line); padding: 15px; background: var(--surface); font-family: var(--font-mono); }
.data-card__head {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta);
  border-bottom: 1px solid var(--line2); padding-bottom: 7px; margin-bottom: 9px;
}
.data-card__num { font-size: 28px; line-height: 1; color: var(--heritage-blue); font-weight: 600; }
.data-card__cap { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; color: var(--fg2); }

/* 7.5 gate cover (monochrome + typographic warning) + revealed placeholder */
.gate-cover {
  background: var(--chrome-ink); color: var(--chrome-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 24px;
}
.gate-cover__title { font-family: var(--font-slab); line-height: 1.05; text-transform: uppercase; }
.gate-cover__text { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--gate-dim); max-width: 46ch; margin: 0; }
.gate-cover__note { font-size: 9.5px; letter-spacing: .08em; color: var(--chrome-dim); }
.gate-reveal {
  background: var(--bg);
  border: 1px dashed var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px;
  font-family: var(--font-mono);
}
.gate-reveal__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.gate-reveal__slot { font-size: 13px; letter-spacing: .1em; color: var(--fg); }
[hidden] { display: none !important; }

/* 7.6 spec rows (label / value lines) used in profile + metadata sidebars */
.spec { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.95; }
.spec__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spec__row > span:first-child { color: var(--meta); }
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  border: 1px solid var(--line2);
  padding: 4px 8px; font-size: 10.5px;
}

/* 7.7 boxed panel (generic hairline-framed block) */
.panel { border: 1px solid var(--line); padding: 22px; }
.panel--tight { padding: 16px; }
.panel--surface { background: var(--surface); }
.panel__label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta);
  margin-bottom: 16px;
}

/* 8 · PROSE / READING ZONE ------------------------------------------------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose__kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px; display: flex; gap: 12px; align-items: center;
}
.prose h1 {
  font-family: var(--font-masthead);
  font-weight: 800; font-size: 54px; line-height: 1.04; letter-spacing: -.012em;
  margin: 0 0 22px; color: var(--fg);
}
.prose__lede {
  font-family: var(--font-serif);
  font-size: 21px; line-height: 1.5; color: var(--fg2); margin: 0 0 26px;
}
.prose__meta {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin-bottom: 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--meta);
}
.prose__figure {
  aspect-ratio: 16 / 9;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono); color: var(--meta);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.prose__caption {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .04em; color: var(--meta); margin-bottom: 36px;
}
.prose__body { font-family: var(--font-serif); font-size: 18.5px; line-height: 1.62; color: var(--fg); }
.prose__body p { margin: 0 0 22px; }
.prose__body .dropcap::first-letter,
.dropcap::first-letter {
  float: left; font-family: var(--font-masthead); font-weight: 800;
  font-size: 74px; line-height: .72; padding: 6px 12px 0 0; color: var(--heritage-blue);
}
.prose__body blockquote,
blockquote.pull {
  margin: 34px 0; padding: 0 0 0 24px;
  border-left: 3px solid var(--heritage-blue);
  font-family: var(--font-masthead); font-style: italic; font-weight: 500;
  font-size: 27px; line-height: 1.32; color: var(--fg);
}
.tags {
  border-top: 1px solid var(--line); margin-top: 40px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
.tags__label { color: var(--meta); margin-right: 6px; align-self: center; }

/* inline content-warning block (BRUTAL, inside QUIET prose) */
.cw { border: 1px solid var(--line); margin: 34px 0; }
.cw__head {
  background: var(--fg); color: var(--bg);
  padding: 11px 16px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
}
.cw__tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--bg); padding: 2px 8px; }
.cw__body { padding: 22px 20px; }

/* 9 · STYLE-GUIDE DOCUMENT LAYOUT ----------------------------------------- */
.doc { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.doc-masthead {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 34px 0 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta);
  border-bottom: 1px solid var(--line2);
}
.doc-title-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 28px; align-items: center;
  padding: 26px 0 24px; border-bottom: 3px solid var(--line);
}
.doc-title {
  font-family: var(--font-slab);
  font-size: 60px; line-height: .9; margin: 0; text-transform: uppercase; letter-spacing: -.01em; color: var(--fg);
}
.doc-standfirst { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--fg2); margin: 14px 0 0; max-width: 52ch; }

.doc-layout { display: grid; grid-template-columns: 200px 1fr; padding-bottom: 80px; }
.toc { border-right: 1px solid var(--line); padding: 26px 24px 30px 0; }
.toc__sticky { position: sticky; top: 24px; }
.toc__head {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta);
  border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 6px;
}
.toc a {
  display: flex; gap: 9px; padding: 8px 0;
  border-bottom: 1px solid var(--line2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fg);
}
.toc__num { color: var(--heritage-blue); flex: none; }
.toc__label { text-transform: uppercase; letter-spacing: .06em; }

.doc-sections { padding: 26px 0 0 32px; }
.section { padding: 52px 0; border-bottom: 1px solid var(--line); }
.section:first-child { padding-top: 0; }
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--heritage-blue); margin-bottom: 16px;
}
.section__h {
  font-family: var(--font-slab);
  font-size: 30px; line-height: 1; margin: 0 0 24px; text-transform: uppercase; color: var(--fg);
}
.section__h--playfair { font-family: var(--font-masthead); font-weight: 800; font-size: 38px; line-height: 1.08; text-transform: none; }
.section__intro { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 0 0 24px; max-width: 66ch; }

/* code blocks (foundation section + block-elements demo) */
.code-block { border: 1px solid var(--line); }
.code-block__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); padding: 12px 16px; background: var(--surface);
}
.code-block__file { font-family: var(--font-mono); font-size: 12px; color: var(--fg); letter-spacing: .02em; font-weight: 500; }
.code-block__desc { font-family: var(--font-serif); font-size: 12.5px; color: var(--meta); margin-top: 3px; }
.code-block pre { margin: 0; padding: 16px 18px; overflow: auto; background: var(--bg); }
.code-block code, pre code { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--fg); white-space: pre; }
.copy-btn {
  flex: none; background: none; border: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
}
.copy-btn.is-copied { border-color: var(--heritage-blue); color: var(--heritage-blue); }

/* doc footer */
.doc-footer {
  margin-top: 40px; border-top: 3px solid var(--line); padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--meta);
}

/* responsive: collapse the doc rail + wide grids on small screens */
@media (max-width: 820px) {
  .doc-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .doc-sections { padding-left: 0; }
  .doc-title-row { grid-template-columns: 72px 1fr; }
  .doc-title-row .theme-toggle { grid-column: 1 / -1; justify-self: start; }
}