/* ============================================================================
   Glossary section — /glossary/ index + /glossary/<term>/ pages.
   Tokens only (site.css), so light + dark come for free. Loaded ONLY on
   glossary pages via shell({ styles }).
   ========================================================================== */

/* ---- Breadcrumb + term head -------------------------------------------- */
.gl-crumb{ padding:26px 0 0; font-family:var(--ui); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.gl-crumb a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.gl-crumb a:hover{ color:var(--crimson); border-bottom-color:var(--crimson); }
.gl-intro{ padding-top:18px; }
.gl-intro h1{ max-width:16ch; }

/* The quotable sentence. Set larger than body copy so it reads as the definition,
   not as a first paragraph that happens to be there. */
.gl-def{ font-family:var(--display); font-size:clamp(20px,2.6vw,25px); line-height:1.45;
  color:var(--ink); margin:0 0 1.3em; padding-left:18px; border-left:3px solid var(--crimson); }

/* ---- Index: grouped definition lists, each a native <details> ----------- */
/* Server-rendered <details>: a closed group still ships every term in the HTML.
   The +/- marker sits on the summary so the heading keeps its real <h2>. */
.gl-group{ margin:0; border-top:1px solid var(--line); }
.gl-group:last-of-type{ border-bottom:1px solid var(--line); margin-bottom:46px; }
.gl-sum{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:12px;
  padding:20px 2px; }
.gl-sum::-webkit-details-marker{ display:none; }
/* Fixed-width marker: + and - differ in width, and the heading must NOT shift when it flips. */
.gl-sum::before{ content:"+"; flex:0 0 18px; width:18px; text-align:center; line-height:1;
  font-family:var(--ui); font-weight:700; font-size:22px; color:var(--crimson); }
.gl-group[open] > .gl-sum::before{ content:"\2212"; }
/* Hover/focus change COLOUR ONLY — never position: a moving summary retargets taps. */
.gl-sum:hover h2, .gl-sum:focus-visible h2{ color:var(--crimson); }
.gl-sum:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; border-radius:6px; }
.gl-group h2{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3.4vw,32px);
  margin:0; color:var(--ink); transition:color .15s ease; }
.gl-count{ font-family:var(--ui); font-weight:500; font-size:15px; color:var(--ink-soft); }
.gl-group-body{ padding:0 0 34px 30px; }
.gl-group-sub{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0 0 24px; max-width:62ch; }
.gl-list{ margin:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); }
.gl-item{ border:1px solid var(--line); border-radius:12px; padding:15px 17px; background:var(--tile);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gl-item:hover{ border-color:var(--crimson); transform:translateY(-1px);
  box-shadow:0 16px 32px -22px var(--shadow); }
.gl-item dt{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1.15; margin:0 0 5px; }
.gl-item dt a{ color:var(--ink); text-decoration:none; }
.gl-item:hover dt a{ color:var(--crimson); }
.gl-item dd{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft); }

/* ---- Service CTA + related terms ---------------------------------------- */
.gl-cta{ max-width:760px; margin:36px 0 0; padding:22px 24px; border:1px solid var(--line);
  border-radius:14px; background:var(--paper-2); }
.gl-cta h2{ font-family:var(--display); font-weight:600; font-size:22px; margin:0 0 8px; color:var(--ink); }
.gl-cta p{ margin:0 0 14px; font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:56ch; }
.gl-cta p:last-child{ margin:0; }

.gl-related{ max-width:760px; margin:34px 0 0; }
.gl-related h2{ font-family:var(--ui); font-weight:600; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; }
.gl-related ul{ list-style:none; margin:0; padding:0; display:flex; gap:9px; flex-wrap:wrap; }
.gl-related a{ display:inline-block; font-family:var(--ui); font-size:12px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line); padding:7px 13px; border-radius:999px;
  transition:color .15s ease, border-color .15s ease; }
.gl-related a:hover{ color:var(--crimson); border-color:var(--crimson); }

.gl-back{ margin:30px 0 0; font-family:var(--ui); font-size:13px; }
.gl-back a{ color:var(--crimson); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--crimson) 45%,transparent); }
.gl-back a:hover{ border-bottom-color:var(--crimson); }

/* ---- Narrow screens ----------------------------------------------------- */
@media (max-width:480px){
  .gl-list{ grid-template-columns:1fr; }
  .gl-def{ padding-left:14px; }
  .gl-cta{ padding:18px 16px; }
  .gl-sum{ padding:16px 2px; gap:9px; }
  .gl-sum::before{ flex-basis:15px; width:15px; font-size:19px; }
  .gl-group-body{ padding:0 0 28px; }
  .gl-count{ font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .gl-item{ transition:none; }
  .gl-item:hover{ transform:none; }
}