/* ============================================================
   glossary.css — Metrics Glossary page (glossary.html)
   Layered on top of main.css (shared Hub chrome). Only the
   glossary-specific content styles live here.
   ============================================================ */

.glossary-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 28px 64px;
}

.glossary-header { margin-bottom: 18px; }
.glossary-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-heading, #111);
  margin: 0 0 6px;
}
.glossary-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted, #6B6B6B);
  margin: 0;
  max-width: 70ch;
}

/* Sticky search bar so it stays reachable while scrolling a long list. */
.glossary-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 8px;
  background: var(--color-surface-alt, #F5F5F5);
}
.glossary-search-wrap { position: relative; flex: 1; }
.glossary-search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted, #9CA3AF); pointer-events: none;
}
#glossary-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1.5px solid var(--color-border, #E5E5E5);
  border-radius: 8px;
  background: var(--color-bg-card, #FFFFFF);
  color: var(--color-text, #111);
  font-family: var(--font-family);
  font-size: 14px;
}
#glossary-search:focus {
  outline: none;
  border-color: var(--color-primary, #C52127);
  box-shadow: 0 0 0 3px rgba(197,33,39,0.12);
}
#glossary-count {
  font-size: 12px;
  color: var(--color-text-muted, #6B6B6B);
  white-space: nowrap;
  flex-shrink: 0;
}

.glossary-group { margin: 26px 0 0; }
.glossary-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #C52127);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border, #E5E5E5);
}
.glossary-group--concepts .glossary-group-title { color: var(--color-text-heading, #111); }

.glossary-list { margin: 0; }
.glossary-term {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border, #EFEFEF);
}
.glossary-term:last-child { border-bottom: none; }
.glossary-term-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-heading, #111);
  margin: 0 0 3px;
}
.glossary-term-def {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text, #2E2E2E);
  margin: 0;
}
.glossary-term-formula {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted, #6B6B6B);
}
.glossary-formula-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9CA3AF);
  margin-right: 6px;
}
.glossary-empty {
  padding: 32px 0;
  color: var(--color-text-muted, #6B6B6B);
  font-size: 14px;
}

/* Dark mode */
[data-theme="dark"] .glossary-toolbar { background: var(--color-surface-alt, #141210); }
[data-theme="dark"] #glossary-search {
  background: #1A1916;
  border-color: #2A2826;
  color: #E8E5E0;
}
[data-theme="dark"] .glossary-term-name { color: #F5F3EF; }
[data-theme="dark"] .glossary-term-def  { color: #D4D1CC; }
[data-theme="dark"] .glossary-group-title { border-bottom-color: #2A2826; }
[data-theme="dark"] .glossary-term { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .glossary-group--concepts .glossary-group-title { color: #F5F3EF; }