/* Shared chrome: header, footer, section rhythm, glossary term tooltips */

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; gap: 18px;
  height: 60px;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.brand .glyph {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--accent); position: relative;
  box-shadow: var(--shadow-sm);
}
.brand .glyph::before, .brand .glyph::after {
  content: ""; position: absolute; background: #fff; border-radius: 1px;
}
.brand .glyph::before { left: 6px; right: 6px; top: 8px; height: 2px; opacity: .9; }
.brand .glyph::after  { left: 6px; right: 11px; top: 13px; height: 2px; opacity: .65; }
.brand .glyph i {
  position: absolute; left: 6px; bottom: 7px; width: 6px; height: 6px;
  border-radius: 999px; background: var(--live); box-shadow: 0 0 0 2px var(--accent);
}
.brand b { font-weight: 600; }
.brand .dim { color: var(--text-faint); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-size: 14px; color: var(--text-muted); font-weight: 500;
  padding: 7px 11px; border-radius: var(--r-sm);
}
.nav a:hover { color: var(--ink); background: var(--surface-sunken); }
.nav a.active { color: var(--accent-ink); background: var(--accent-soft); }
.nav .sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: .15s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent-border); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

@media (max-width: 740px) {
  .nav a.hide-sm { display: none; }
}

/* ---------- section rhythm ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.section-head p { margin-top: 14px; color: var(--text-muted); font-size: 17px; text-wrap: pretty; }

/* ---------- glossary term (inline jargon, plain-first) ---------- */
.term {
  border-bottom: 1.5px dotted var(--accent-border);
  cursor: help; color: inherit; position: relative; font-weight: 500;
}
.term:hover { border-bottom-color: var(--accent); }
.term::after {
  content: attr(data-def);
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 260px;
  background: var(--ink); color: var(--surface);
  font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.45;
  letter-spacing: 0; text-transform: none;
  padding: 9px 12px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
  z-index: 60;
}
.term::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60;
}
.term:hover::after, .term:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: 52px 40px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.footer-grid h5 {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 14px; font-weight: 500;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { font-size: 14px; color: var(--text-muted); }
.footer-grid a:hover { color: var(--accent-ink); }
.footer-grid .mono { font-size: 12.5px; }
.footer-note {
  max-width: var(--maxw); margin: 36px auto 0; padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  color: var(--text-faint); font-size: 13px;
}
.footer-note .mono { font-family: var(--font-mono); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}