/* Glossary pages (UI-052): the index of terms and one page per term. One
   sheet, loaded only by a page that renders one (html.ts looks for
   data-gloss-region). The head frame is the site's layered head (chrome.css);
   the sections follow the editorial code page: a heading column beside the
   content from 768px, a hairline opening each section. The one loud element
   is the worked example, which takes the hard press shadow. Sizes and colours
   resolve to tokens; the few local sizes sit in :root. */

:root {
  --gloss-tap: 2.75rem;
  --gloss-head-col: 14rem;
  --gloss-row-min: 21rem;
  --gloss-example-max: 44rem;
  --gloss-mono: 0.82rem;
}

/* ---------- head ---------- */

/* The browser's own h1 margins are 36px each side; the alternate name and the
   count sit close to the title instead. */
.gloss-title { margin: var(--space-5) 0 0; }

.gloss-count {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--gloss-mono);
}
.gloss-count b { color: var(--color-text); font-size: var(--text-heading-sm); font-variant-numeric: tabular-nums; }

.gloss-alt-name {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-medium);
}
.gloss-lede {
  margin: var(--space-4) 0 0;
  max-inline-size: 40rem;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  text-wrap: pretty;
}

/* ---------- index: group links under the head ---------- */

.gloss-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.gloss-jump a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--gloss-tap);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-label);
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.gloss-jump a:hover { background: var(--color-accent-soft); }
.gloss-jump b { color: var(--color-accent-text); font-family: var(--font-mono); font-size: var(--gloss-mono); font-variant-numeric: tabular-nums; }

/* ---------- index: groups of term rows ---------- */

.gloss-group {
  display: grid;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border-strong);
}
.gloss-group:first-child { border-block-start: 2px solid var(--color-text); }
.gloss-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}
.gloss-group-n {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--gloss-mono);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}
.gloss-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gloss-row-min)), 1fr));
  column-gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gloss-list > li { border-block-end: 1px dashed var(--color-border); }
.gloss-entry {
  display: block;
  min-block-size: var(--gloss-tap);
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}
.gloss-entry:hover { background: var(--color-bg-subtle); }
.gloss-entry:focus-visible { outline: 0.1875rem solid var(--color-focus); outline-offset: calc(-1 * var(--space-1)); }
.gloss-term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}
.gloss-entry:hover .gloss-term { color: var(--color-accent-text); }
.gloss-alt {
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
}
.gloss-short {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  line-height: var(--leading-body);
}

/* ---------- term page: sections ---------- */

.gloss-sec {
  display: grid;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border-strong);
}
.gloss-sec:first-child { border-block-start: 2px solid var(--color-text); }
.gloss-sec h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}
.gloss-sec-body { min-inline-size: 0; }

/* ---------- term page: worked example ---------- */

.gloss-example {
  max-inline-size: var(--gloss-example-max);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  box-shadow: var(--shadow-press);
}
.gloss-lead { margin: 0 0 var(--space-4); font-size: var(--text-body); line-height: var(--leading-body); }
.gloss-ledger { margin: 0; border-block-start: 2px solid var(--color-text); }
.gloss-ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-end: 1px dashed var(--color-border);
}
.gloss-ledger dt { color: var(--color-text-muted); font-size: var(--text-label); }
.gloss-ledger dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--gloss-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.gloss-result {
  margin: var(--space-4) 0 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* ---------- term page: related terms and product lists ---------- */

.gloss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gloss-chips a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--gloss-tap);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.gloss-chips a:hover { background: var(--color-accent-soft); }
.gloss-chips--lists a { font-family: var(--font-mono); font-size: var(--gloss-mono); font-weight: var(--weight-regular); }

/* ---------- foot: last-updated day, then the closing line ---------- */

.gloss-asof { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.gloss-disclaimer { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-label); }

@media (max-width: 640px) {
  .gloss-example { padding: var(--space-4); }
  .gloss-ledger > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .gloss-ledger dd { text-align: start; }
}

@media (min-width: 768px) {
  .gloss-group,
  .gloss-sec { grid-template-columns: var(--gloss-head-col) minmax(0, 1fr); align-items: start; }
  .gloss-group-title,
  .gloss-sec h2 { padding-block-start: var(--space-1); }
}