/* ============================================================================
   The Glossary
   Filter pills speak the same language as the About chips: pill radius, the
   uppercase micro-type, the sand fill — plus a pressed state and the hard
   ink shadow the buttons and cards use everywhere else on the site.
   ========================================================================== */

/* The controls are the point of this page, so the section opens tight —
   browse, filters and search all clear the fold on a laptop rather than
   sitting under a paragraph nobody reads twice. */
.gloss { padding-block: var(--s2) var(--s8); }

/* --------------------------------------------------------- browse rail -- */
/* THE PRIMARY WAY IN. A–Z leads the page and then sticks under the nav, so
   browsing never strands you: at S you can still reach B without scrolling
   back up. --gloss-nav is measured by glossary.js (the nav's height is not
   a constant — the wordmark reflows when Fraunces lands). */
.gloss__browse {
  position: sticky;
  top: var(--gloss-nav, 56px);
  z-index: 50;                    /* under the nav's 100, over the entries */
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  background: var(--paper);
  /* ONE RULE, NOT TWO. The rail used to be boxed top and bottom, which put
     a line a few pixels under the masthead's own edge — two horizontal
     rules with a sliver of paper between them, reading as a mistake. The
     bottom border is the one doing work (it separates the rail from the
     entries scrolling under it while it is stuck); the top had nothing to
     separate from. The section's top padding comes down with it so the
     alphabet sits closer to the masthead. */
  border-bottom: var(--ringer);
  padding-block: var(--s2);
  margin-bottom: var(--s4);
}
.gloss__browselabel { flex: none; color: var(--ink-soft); margin: 0; }
.gloss__count { flex: none; margin-left: auto; color: var(--ink-soft); }

.gloss__az {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1 1 auto;
}
/* Full-size targets, not the 12px afterthought this started as: browsing is
   the job, so a letter is a real button. */
.gloss-az__key {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-slide),
              color var(--dur-fast) var(--ease-slide);
}
a.gloss-az__key:hover { background: var(--ink); color: var(--paper-warm); }
a.gloss-az__key:focus-visible { outline: var(--ringer); outline-offset: 2px; }
/* Where you are right now, updated as you scroll. */
a.gloss-az__key[aria-current="location"] {
  background: var(--gold);
  border-color: var(--ink);
}
/* Nothing under this letter with the current filter on — kept in place so
   the alphabet never changes shape, and so the row reads as a summary of
   what the filter did. */
.gloss-az__key.is-off { color: var(--ink-soft); opacity: 0.3; }

/* ------------------------------------------------------------- refine --- */
.gloss__refine { margin-bottom: var(--s4); }

.gloss__row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}
.gloss__row + .gloss__row { margin-top: var(--s3); }

/* The row label sits in a fixed gutter so every row starts on the same x. */
.gloss__rowlabel {
  flex: none;
  width: 5.5rem;
  color: var(--ink-soft);
  margin: 0;
}

.gloss__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  flex: 1 1 16rem;
}

.gloss-pill {
  font: inherit;
  /* WCAG 2.2 target size: 24x24 minimum. This glossary defines the rule,
     so it keeps it. */
  min-height: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-slide),
    color var(--dur-fast) var(--ease-slide),
    transform var(--dur-fast) var(--ease-peel),
    box-shadow var(--dur-fast) var(--ease-peel);
}
.gloss-pill:hover {
  background: var(--paper-warm);
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.gloss-pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
}
.gloss-pill[aria-pressed="true"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
.gloss-pill:focus-visible { outline: var(--ringer); outline-offset: 3px; }

/* Search is the secondary route, and is dressed as such: a quiet field at
   the end of the refinements rather than the headline control. */
.gloss__row--search { margin-top: var(--s3); }
.gloss__search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 16rem;
  max-width: 30rem;
}
.gloss__search input {
  font: inherit;
  font-size: 0.9375rem;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  background: var(--paper-warm);
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.gloss__search input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.gloss__search input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.gloss__clear {
  font: inherit;
  font-size: var(--type-fine);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gold);
  padding: 0 0 1px;
  cursor: pointer;
  flex: none;
}
.gloss__clear:hover { color: var(--rust-deep); border-bottom-color: var(--rust); }

/* ------------------------------------------------------------ entries ---- */
/* The entries ARE the About page's accordion: .accord__item / __head /
   __chevron / __panel come from components.css, so the chevron badge, the
   hard shadow, the hover lift and the eased open/close are shared, not
   re-implemented. Only the inside of the panel is glossary-specific. */

/* The gap between letter sections rides the TRAILING edge, never the
   leading one: scroll-margin-top offsets from the border box, so a
   margin-top above the heading lands an anchor jump that much too low —
   which also made the rail's scroll-spy report the previous letter. */
.gloss-letter { margin-bottom: var(--s6); }
.gloss-letter:last-child { margin-bottom: 0; }
/* An anchor jump must not land under the sticky stack. base.css already
   sets html { scroll-padding-top } for the nav alone; on this page the
   stack is the nav PLUS the browse rail, so the page-level padding is
   re-stated here rather than adding a per-element scroll-margin on top of
   it — the two COMPOUND, which landed every letter jump 88px too low and
   made the rail report the previous letter. This stylesheet loads only on
   the glossary, so overriding html here is contained. */
html { scroll-padding-top: calc(var(--gloss-stick, 120px) + var(--s3)); }

.gloss-letter__mark {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--gold-deep);
  border-bottom: var(--ringer);
  padding-bottom: var(--s2);
  margin: 0 0 var(--s3);
}

.gloss-letter__items { max-width: var(--col-break); }
.gloss-entry + .gloss-entry { margin-top: var(--s2); }

/* The term carries the row on its own; the taxonomy pills live in the panel
   where they can be real buttons (a <button> inside a <summary> is a nested
   interactive control, and assistive tech has every right to object). */
.gloss-entry__term { font-size: 1.125rem; }

/* Landing from a pivot: border, background AND a rule — never hue alone,
   which would be invisible to a chunk of the people this page defines. */
.gloss-entry.is-landed {
  border-color: var(--gold-deep);
  background: var(--paper-butter);
  box-shadow: var(--shadow-hard);
}
.gloss-entry:target { border-color: var(--gold-deep); }

.gloss-entry .accord__panelInner > * { padding: 0 var(--s4); }
.gloss-entry .accord__panelInner > :last-child { padding-bottom: var(--s4); }
/* The Top 10 indents its <p> to clear its numeral; there is no numeral here,
   so nested paragraphs reset — direct children already carry the inset. */
.gloss-entry .gloss-related p,
.gloss-entry .gloss-flow p,
.gloss-entry .gloss-entry__tax p { padding: 0; }

.gloss-entry__aka {
  margin: 0 0 var(--s2);
  font-size: var(--type-fine);
  color: var(--ink-soft);
}
.gloss-entry__aka .eyebrow { margin-right: var(--s1); }
.gloss-entry__sep { padding: 0 6px; opacity: 0.6; }

.gloss-entry__def {
  margin: 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------------------------------------------------- tags vs. pivots ---- */
/* Two pill species, and the difference must read BEFORE the click: a
   taxonomy tag FILTERS the list (square-ish, sand, sits under "Filter by"),
   a related pill NAVIGATES to another entry (rounded, arrowed, under
   "Related"). Same family, different shape and different verb. */
.gloss-entry__tax { margin-top: var(--s3); }
.gloss-entry__taxlabel { color: var(--ink-soft); margin: 0 0 var(--s1); }
.gloss-entry__tags { display: flex; flex-wrap: wrap; gap: var(--s1); }

.gloss-tag {
  font: inherit;
  min-height: 24px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid transparent;
  border-radius: 6px;                 /* square-ish: filters, not journeys */
  padding: 3px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-slide),
              border-color var(--dur-fast) var(--ease-slide);
}
.gloss-tag--facet { background: var(--sky); }
.gloss-tag:hover { border-color: var(--ink); background: var(--paper-warm); }
.gloss-tag:focus-visible { outline: var(--ringer); outline-offset: 3px; }

.gloss-related { margin-top: var(--s3); }
.gloss-related__label { color: var(--ink-soft); margin: 0 0 var(--s1); }
.gloss-related__pills { display: flex; flex-wrap: wrap; gap: var(--s1); }

.gloss-pivot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--ringer);
  border-radius: var(--radius-pill);  /* rounded: it takes you somewhere */
  padding: 3px 12px;
  transition: transform var(--dur-fast) var(--ease-peel),
              box-shadow var(--dur-fast) var(--ease-peel),
              background var(--dur-fast) var(--ease-slide);
}
.gloss-pivot::after { content: "\2192"; color: var(--rust-deep); }
a.gloss-pivot:hover {
  background: var(--paper-warm);
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}
a.gloss-pivot:focus-visible { outline: var(--ringer); outline-offset: 3px; }
.gloss-pivot.is-dead { opacity: 0.5; border-style: dashed; }
.gloss-pivot.is-dead::after { content: ""; }

/* ----------------------------------------------------------- sequence ---- */
.gloss-flow {
  margin-top: var(--s3);
  border-top: 2px dotted var(--sand);
  padding-top: var(--s2);
}
.gloss-flow__name { color: var(--ink-soft); margin: 0 0 var(--s2); }
.gloss-flow__at { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
.gloss-flow__row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.gloss-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 12rem;
  min-height: 24px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--ringer);
  border-radius: var(--radius-card);
  padding: var(--s2);
  transition: transform var(--dur-fast) var(--ease-peel),
              box-shadow var(--dur-fast) var(--ease-peel),
              background var(--dur-fast) var(--ease-slide);
}
.gloss-step--next { text-align: right; }
a.gloss-step:hover {
  background: var(--paper-warm);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard);
}
a.gloss-step:focus-visible { outline: var(--ringer); outline-offset: 3px; }
.gloss-step__dir {
  font-size: var(--type-fine);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.gloss-step__name { font-weight: 600; }
/* The ends of a sequence are stated, so the row keeps its shape and
   "nothing before this" is information rather than a gap. */
.gloss-step.is-end {
  border-style: dashed;
  border-color: var(--ink-soft);
  background: none;
  opacity: 0.7;
}
.gloss-step.is-end .gloss-step__dir { color: var(--ink-soft); }

/* --------------------------------------------------------------- empty --- */
.gloss__empty {
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius-card);
  padding: var(--s5);
  text-align: center;
  color: var(--ink-soft);
}
.gloss__empty p { margin: 0 0 var(--s3); }
.gloss__empty p:last-child { margin: 0; }

/* ------------------------------------------------------------ no-JS ------ */
/* Generated into the page by tools/build-glossary.py. Plain, complete, and
   the only thing a visitor without JavaScript ever sees. */
.gloss-nojs dt { font-weight: 700; margin-top: var(--s3); }
.gloss-nojs dd { margin: var(--s1) 0 0; color: var(--ink-soft); max-width: 62ch; }
.gloss-nojs small { display: block; margin-top: 2px; opacity: 0.75; }

@media (max-width: 720px) {
  .gloss { padding-block: var(--s6); }
  .gloss__rowlabel { width: 100%; }
  /* The rail keeps its full width on a phone; the count drops below it
     rather than squeezing the alphabet. */
  .gloss__browselabel { width: 100%; }
  .gloss__count { margin-left: 0; }
  .gloss-az__key { min-width: 26px; min-height: 26px; font-size: 0.9375rem; }
  .gloss-entry .accord__panelInner > * { padding-inline: var(--s3); }
  .gloss-entry .accord__panelInner > :last-child { padding-bottom: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .gloss-pill, .gloss-tag, .gloss-pivot, .gloss-step { transition: none; }
  a.gloss-pivot:hover, a.gloss-step:hover { transform: none; }
}

/* ============================================================================
   MOBILE — browsing with a thumb
   ========================================================================== */
@media (max-width: 767px) {

  /* THE A–Z RAIL becomes a swipeable strip rather than a wrapped block.
     Wrapping 26 letters at a tappable size makes a four-row wall that eats
     the screen — and this rail is sticky, so it would eat it permanently.
     One row that scrolls sideways keeps the rail thin and every letter
     properly sized. */
  .gloss__az {
    flex-wrap: nowrap;
    /* A flex item will not shrink below its CONTENT's min-content width
       unless told to. Without this, a nowrap row of 26 letters demands
       ~1040px, the flex item takes it, and the whole PAGE scrolls sideways
       instead of just the strip. */
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .gloss__az::-webkit-scrollbar { display: none; }
  .gloss-az__key {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.375rem;
    flex: none;
  }

  /* The count moves under the strip rather than fighting it for the row. */
  .gloss__browselabel { width: auto; }
  .gloss__count { margin-left: 0; width: 100%; }

  /* Filters and pivots: readable, and big enough to hit. Every one of these
     is at or above the 16px body floor — a tag is a quieter register than
     an entry, not a smaller one than the phone can read. */
  .gloss-pill { font-size: 1.0625rem; min-height: 44px; padding: 10px 18px; }
  .gloss-tag  { font-size: 1rem;      min-height: 40px; padding: 8px 14px; }
  .gloss-pivot { font-size: 1.25rem; min-height: 44px; padding: 8px 16px; }
  .gloss-step { min-height: 44px; font-size: 1.25rem; }

  /* 16px is the floor: below it, iOS zooms the page the moment this field
     takes focus. That is not a preference, it is a defect. */
  .gloss__search input { font-size: 1.125rem; min-height: 48px; }

  /* An entry's term is its headline and its definition is the page's whole
     reason for existing — on a phone the term was 18px and the definition
     21, both a desktop register. Term to h3 scale, definition to body. */
  .gloss-entry__term { font-size: 1.5rem; }
  .gloss-entry__def { font-size: 1.375rem; }
  .gloss-letter__mark { font-size: 2.5rem; }
}