/* ===========================
   Glossary (compact, columns)
   =========================== */

/* Outer container = just sizing/alignment, NO columns here */
.glossary {
  max-width: 60rem;
  margin: 0 auto 1rem;
}

/* Controls row */
.glossary-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  max-width: 60rem;
  margin: 0 auto 0.75rem;
}
.glossary-controls button {
  border: 1px solid #bbb;
  background: #f7f7f7;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
.glossary-controls button:hover { background: #eee; }

/* Put columns on the DL itself (single multicol context) */
.glossary dl {
  column-count: 2;
  column-gap: 2rem;
  column-fill: balance;      /* keep column tops aligned */
  padding: 0.25rem 0;        /* buffer to avoid top/bottom clipping */
  margin: 0;
}

/* Each dt+dd pair is wrapped as .g-item by JS */
.glossary dl .g-item {
  display: inline-block;     /* treat pair as an atomic box */
  width: 100%;
  vertical-align: top;
  padding: 0.25rem 0 0.85rem 0;  /* extra bottom space after definitions */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Make terms look clickable/focusable */
.glossary dl .g-item dt {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: color 0.15s ease;

  /* space for the chevron */
  position: relative;
  padding-left: 1.15em;
}

/* Chevron indicator (collapsible marker) */
.glossary dl .g-item dt::before {
  content: "▸";                /* collapsed state */
  position: absolute;
  left: 0;
  top: 0.05em;
  line-height: 1;
  display: inline-block;
  width: 1em;
  transform-origin: center;
  transition: transform 0.15s ease;
  color: #666;
}

/* Rotate chevron when open */
.glossary dl .g-item dt[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

/* Hover/focus styles */
.glossary dl .g-item dt:hover { color: #0055aa; text-decoration: underline; }
.glossary dl .g-item dt:focus-visible { outline: 2px solid #0055aa; border-radius: 4px; }

/* Definitions: indent a bit; vertical spacing comes from .g-item padding */
.glossary dl .g-item dd {
  margin: 0 0 0 1rem;
  line-height: 1.4;
}

/* Collapsed state */
.glossary dl .g-item dd[hidden] { display: none; }

/* Responsive columns */
@media (max-width: 700px) {
  .glossary dl { column-count: 1; }
}
@media (min-width: 1100px) { .glossary dl { column-count: 3; } }
@media (min-width: 1500px) { .glossary dl { column-count: 4; } }