/**
 * glossary.css — the three glossaries at /resources/.
 *
 * A reference page, styled as one. None of the article furniture: the layout
 * is a persistent controls rail beside an alphabetical list, because the job
 * is "find one word", not "read this from the top".
 *
 * The controls are hidden until glossary.js marks the block ready, so a page
 * without JavaScript shows the full alphabetical list, every letter anchor
 * still works, and there is no dead search box.
 */

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── head ──────────────────────────────────────────────────────────── */
/* Title on the left, intro beside it. The site's .page-head__intro caps at
   580px, which is right for the single sentence the other index pages carry
   and wrong for four paragraphs — it left the whole right half of the page
   empty. Setting the two side by side uses the width and keeps the line
   length readable, rather than just widening one tall column. */
.page-head--gloss { padding-bottom: 8px; }
.page-head--gloss .post__crumb { margin-bottom: 24px; }
.page-head--gloss .page-head__title { margin-bottom: 0; }

.gloss-page__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-soft);
}
.gloss-page__intro h2 { display: none; }        /* the "how to use this glossary" heading is redundant here */
.gloss-page__intro p { margin: 0 0 1.15em; }
.gloss-page__intro p:last-child { margin-bottom: 0; }

.gloss-page__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--mid);
}

/* The header artwork fills the gap the two-column header leaves under the
   title. Hidden below the breakpoint, where the header stacks and there is
   no gap to fill — a decorative image would only push the terms down.

   Each glossary carries a different drawing at a different size, so the
   width is set per orientation and the height comes from the file's own
   ratio. No aspect-ratio here: forcing one would distort two of the three. */
.gloss-page__cover { display: none; }

@media (min-width: 1000px) {
  .page-head--gloss .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 72px;
    align-items: start;
  }
  .page-head--gloss .post__crumb,
  .gloss-page__meta { grid-column: 1 / -1; }
  .page-head--gloss .page-head__title { grid-column: 1; }
  .gloss-page__intro { grid-column: 2; grid-row: 2 / span 2; padding-top: 10px; }

  .gloss-page__cover {
    display: block;
    grid-column: 1;
    margin: 40px 0 0;
  }
  /* Sized so the three cover roughly the same area despite being three
     different shapes, and so each one uses most of the column it sits in.
     The column runs to about 640px at full container width; anything much
     under 400 read as a small picture floating in a large gap. */
  .gloss-page__cover--portrait  { max-width: 400px; }
  .gloss-page__cover--square    { max-width: 500px; }
  .gloss-page__cover--landscape { max-width: 620px; }

  .gloss-page__cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 14px;
  }
}
.gloss-page__meta b { color: var(--ink); }
.gloss-page__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--warm-2);
}

/* ── layout ────────────────────────────────────────────────────────── */
.gloss {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.gloss-page__rail { position: sticky; top: calc(var(--nav-h, 72px) + 28px); }
.gloss-page__main { min-width: 0; }

/* ── controls ──────────────────────────────────────────────────────── */
.gloss__controls { display: grid; gap: 22px; }
.gloss:not([data-ready="true"]) .gloss__search,
.gloss:not([data-ready="true"]) .gloss__topics { display: none; }

.gloss__search-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 9px;
}
.gloss__search input {
  font: inherit;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
}
.gloss__search input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.gloss__az { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gloss__az-link {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink);
}
a.gloss__az-link:hover { background: var(--cream); }
a.gloss__az-link[aria-current="true"] { background: var(--ink); color: var(--white); }
.gloss__az-link[aria-disabled="true"] { color: var(--warm-2); }

.gloss__topics { display: grid; gap: 4px; }
.gloss__topics button {
  font: inherit; font-size: 0.82rem;
  text-align: left;
  padding: 7px 11px;
  border-radius: 7px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.gloss__topics button:hover { background: var(--cream); }
.gloss__topics button[aria-pressed="true"] { background: var(--warm); color: var(--ink); font-weight: 500; }

/* ── the list ──────────────────────────────────────────────────────── */
/* Status line: says whether a filter is on, never how many terms exist. */
.gloss__status {
  margin: 0 0 8px;
  min-height: 1.2em;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.gloss__status:empty { margin-bottom: 0; }

.gloss__note {
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--cream);
  border-radius: 9px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.gloss__letter { margin: 0 0 48px; scroll-margin-top: calc(var(--nav-h, 72px) + 24px); }
.gloss__letter-mark {
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.6rem !important;
  font-weight: 600;
  line-height: 1;
  color: var(--orange);
}

.gloss__list { margin: 0; padding: 0; display: grid; gap: 2px; }
.gloss__item {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 40px;
  padding: 18px 22px;
  border-radius: 9px;
  scroll-margin-top: calc(var(--nav-h, 72px) + 24px);
}
.gloss__item:nth-child(odd) { background: var(--cream); }
.gloss__item:target { background: var(--warm); box-shadow: inset 3px 0 0 var(--orange); }

.gloss__term { margin: 0; display: grid; gap: 5px; align-content: start; }
.gloss__anchor {
  color: inherit; text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
}
.gloss__anchor:hover { color: var(--orange); }
.gloss__anchor::after {
  content: '#'; margin-left: 6px; color: var(--warm-2);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.gloss__item:hover .gloss__anchor::after,
.gloss__anchor:focus-visible::after { opacity: 1; }
.gloss__tag { font-size: 0.7rem; color: var(--mid); }

.gloss__def { margin: 0; font-size: 0.94rem; line-height: 1.72; }
.gloss__def em { font-style: italic; color: var(--ink-soft); }

.gloss__empty { margin: 24px 0; color: var(--mid); font-size: 0.92rem; }

/* ── tail sections ─────────────────────────────────────────────────── */
.gloss-page__faq, .gloss-page__next {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
.gloss-page__faq h2, .gloss-page__next h2 {
  font-size: 1.1rem !important;
  margin: 0 0 16px !important;
}
.gloss-page__next p { font-size: 0.95rem; line-height: 1.7; }

.gloss-page__more-list { display: grid; gap: 2px; margin-top: 18px; }
.gloss-page__more-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border-radius: 9px;
  text-decoration: none; color: inherit;
}
.gloss-page__more-list a:hover { background: var(--white); }
.gloss-page__more-list b { font-size: 0.82rem; color: var(--mid); font-weight: 500; }

/* ── narrow ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gloss { grid-template-columns: 1fr; gap: 26px; }
  .gloss-page__rail {
    position: sticky; top: 0; z-index: 3;
    padding: 14px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .gloss__controls { gap: 14px; }
  .gloss__az { grid-template-columns: repeat(13, 1fr); }
  .gloss__topics { display: flex; flex-wrap: wrap; }
  .gloss__topics .gloss__search-label { width: 100%; }
  .gloss__item { grid-template-columns: 1fr; gap: 7px; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gloss__anchor::after { transition: none; }
}