/* Folio glossaries.

   A reference page, read by looking things up rather than straight through,
   so the layout is a two-column index: the term on the left where the eye
   scans, its definition on the right. Type, colour and rules come from the
   folio pages -- Latin Modern Sans, the Ouviaj blue, hairline dividers -- and
   values or defining relations are set apart in a quiet tinted band, as the
   folios set their equations. */
.glossary-page {
  --gl-ink: #1b2533;
  --gl-body: #3a4453;
  --gl-muted: #6b7482;
  --gl-rule: #e2e6ed;
  --gl-accent: #0048A0;
  --gl-tint: #f4f7fb;
  --gl-term-col: minmax(190px, 28%);
  color: var(--gl-body);
  background: #fff;
  font: 400 17px/1.62 "Latin Modern Sans", Arial, sans-serif;
}
.glossary-page main {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(84px, 11svh, 120px) 24px 56px;
}
.glossary-page a { color: var(--gl-accent); }
.glossary-page .katex { font-size: 1.06em; color: var(--gl-ink); }

/* Heading: the folio it belongs to above, as a way back. */
.gl-head { text-align: center; margin-bottom: clamp(30px, 5svh, 52px); }
.gl-folio {
  display: inline-block;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.gl-folio:hover { text-decoration: underline; text-underline-offset: 4px; }
.gl-head h1 {
  margin: 6px 0 0;
  color: var(--gl-accent);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 700;
  line-height: 1.05;
}
.gl-head p {
  max-width: 34em;
  margin: 14px auto 0;
  color: var(--gl-muted);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.45;
  text-wrap: balance;
}

/* The filter appears only once its script has run. */
.gl-tools {
  /* Stuck just below the logo and menu button, which stay fixed above it. */
  position: sticky;
  top: 58px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 14px 0;
  background: #fff;
  border-bottom: 1px solid var(--gl-rule);
}
.gl-tools[hidden] { display: none; }
/* Once stuck, the bar widens into an opaque band reaching the top of the
   window, so entries do not show through beside the logo, which stays above
   it. The script marks the state. */
.gl-tools.is-stuck {
  border-bottom-color: transparent;
  box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--gl-rule);
  clip-path: inset(-58px -100vmax -1px -100vmax);
}
.gl-tools[hidden] + .gl-contents ol { border-top: 1px solid var(--gl-rule); }
.gl-search { flex: 1; display: block; }
.gl-search-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gl-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  background: #fff;
  color: var(--gl-ink);
  font: inherit;
  font-size: 16px;
}
.gl-search input:focus { outline: 2px solid var(--gl-accent); outline-offset: 1px; border-color: transparent; }
.gl-count { margin: 0; min-width: 7.5em; color: var(--gl-muted); font-size: 14px; text-align: right; white-space: nowrap; }

/* Contents: numbered, in columns, quiet. */
.gl-contents { margin: 0 0 clamp(36px, 6svh, 60px); }
.gl-contents ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gl-contents li { border-bottom: 1px solid var(--gl-rule); }
.gl-contents a {
  display: flex;
  gap: 14px;
  padding: 11px 2px;
  color: var(--gl-ink);
  text-decoration: none;
}
.gl-contents a:hover { color: var(--gl-accent); }
.gl-num {
  color: var(--gl-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.7;
}

/* Sections. */
.gl-section { margin-top: clamp(40px, 7svh, 72px); scroll-margin-top: 150px; }
.gl-section h2 {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gl-accent);
  color: var(--gl-accent);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
}
.gl-section h2 .gl-num { font-size: 0.62em; opacity: 0.6; }
.gl-intro {
  max-width: 46em;
  margin: 16px 0 6px;
  color: var(--gl-muted);
  font-size: 17px;
}

/* Entries. */
.gl-entries { margin: 0; }
.gl-entry {
  display: grid;
  grid-template-columns: var(--gl-term-col) 1fr;
  gap: 8px 36px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--gl-rule);
  scroll-margin-top: 150px;
}
.gl-entry dt { margin: 0; }
.gl-term {
  color: var(--gl-ink);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  text-decoration: none;
}
.gl-term:hover { color: var(--gl-accent); }
.gl-aside {
  display: block;
  margin-top: 3px;
  color: var(--gl-muted);
  font-size: 15px;
}
.gl-entry dd { margin: 0; min-width: 0; }
.gl-entry dd p { margin: 0 0 10px; }
.gl-entry dd p:last-child { margin-bottom: 0; }
.gl-value {
  padding: 8px 14px;
  border-left: 2px solid var(--gl-accent);
  background: var(--gl-tint);
  color: var(--gl-ink);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}
.gl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--gl-muted);
  font-size: 14.5px;
}
.gl-where { color: var(--gl-muted); }
.gl-where a { text-decoration: none; }
.gl-where a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-see a { text-decoration: none; }
.gl-see a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A linked entry announces itself briefly. */
.gl-entry:target { animation: gl-arrive 2.4s ease-out; }
@keyframes gl-arrive {
  from { background: #e8f0fb; box-shadow: -14px 0 0 #e8f0fb, 14px 0 0 #e8f0fb; }
  to { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .gl-entry:target { animation: none; background: var(--gl-tint); } }

.gl-empty { margin: 40px 0; color: var(--gl-muted); text-align: center; }
/* A group glossary closes with its folios, in menu order. */
.gl-folios { margin: clamp(52px, 8svh, 84px) 0 0; padding-top: 22px; border-top: 2px solid var(--gl-accent); }
.gl-folios h2 { margin: 0 0 12px; color: var(--gl-accent); font-size: clamp(20px, 2vw, 24px); font-weight: 700; }
.gl-folios ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gl-folios li { border-bottom: 1px solid var(--gl-rule); }
.gl-folios a { display: block; padding: 10px 2px; color: var(--gl-ink); font-weight: 700; text-decoration: none; }
.gl-folios a:hover { color: var(--gl-accent); }
.gl-back { margin: clamp(44px, 7svh, 72px) 0 0; text-align: center; font-weight: 700; }
.gl-back a { text-decoration: none; }
.gl-back a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The publication footer spans the text column rather than a folio's width.
   The definitions are AI-generated, so the copyright claims the page's design
   and the choice and ordering of its terms, not the text itself. */
.glossary-page .site-footer--publication { width: min(100%, 1020px); padding: 4px 24px 16px; }

/* Filtering hides what does not match. */
.gl-entry[hidden], .gl-section[hidden], .gl-contents[hidden] { display: none; }

@media (max-width: 720px) {
  .glossary-page { font-size: 16.5px; }
  .glossary-page main { padding-left: 16px; padding-right: 16px; }
  .glossary-page .site-footer--publication { padding-left: 16px; padding-right: 16px; }
  .gl-entry { grid-template-columns: 1fr; gap: 6px; }
  .gl-tools { gap: 12px; }
  .gl-count { min-width: 0; }
}

@media print {
  .site-logo, .site-navigation, .gl-tools, .gl-contents, .gl-back, .gl-folios, .site-footer { display: none; }
  .glossary-page main { padding: 0; max-width: none; }
  .gl-entry { break-inside: avoid; }
}