/* =====================================================
   The AI Glossary — /glossary
   Rides styles.css tokens (white canon · #173EF5 ·
   PP NeueBit / Space Mono / Inter). Hand-maintained;
   build-glossary.mjs only generates the HTML.
   ===================================================== */

/* ---------- shared ---------- */
.gl-label {
  display: block;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
}
.gl-chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px;
}
.gl-chip--level { color: var(--blue); border-color: var(--blue-15); background: var(--blue-08); }

/* ---------- term page ---------- */
.gl-term { padding: 150px 0 96px; }
.gl-crumb {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px;
}
.gl-crumb a { color: var(--blue); text-decoration: none; }
.gl-crumb a:hover { text-decoration: underline; }
.gl-crumb span { margin: 0 6px; color: var(--ink-3); }

.gl-term__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 0.95; letter-spacing: 0.01em; color: var(--ink);
  margin-bottom: 20px; overflow-wrap: anywhere;
}
.gl-term__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gl-aka {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2);
  margin-bottom: 34px;
}
.gl-aka span { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; margin-right: 6px; }

.gl-prose { margin-bottom: 44px; }
.gl-prose p { font-size: 1.05rem; line-height: 1.75; }
.gl-prose a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-15); text-underline-offset: 3px; }
.gl-prose a:hover { text-decoration-color: var(--blue); }
.gl-prose code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--band); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}

.gl-related { margin-bottom: 36px; }
.gl-related .gl-label { margin-bottom: 14px; }
.gl-related__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pill {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.gl-pill:hover { border-color: var(--blue); background: var(--blue-08); color: var(--blue); }

.gl-source {
  display: block; text-decoration: none;
  border: 1px solid var(--blue); border-radius: 6px;
  padding: 20px 22px; margin-bottom: 48px;
  box-shadow: 4px 4px 0 var(--blue-15);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gl-source:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--blue-15); }
.gl-source .gl-label { margin-bottom: 8px; }
.gl-source__cta { font-family: var(--body); font-weight: 600; font-size: 1rem; color: var(--ink); }

.gl-pager {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.gl-pager__link {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--ink-2); text-decoration: none; max-width: 46%;
}
.gl-pager__link:hover { color: var(--blue); }
.gl-pager__link--next { text-align: right; margin-left: auto; }

/* ---------- index ---------- */
.gl-hero { padding: 150px 0 40px; }
.gl-hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 0.95; letter-spacing: 0.01em; color: var(--ink);
}
.gl-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 640px; margin: 44px auto 0;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 18px; background: #FFFFFF;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gl-search:focus-within { border-color: var(--blue); box-shadow: 4px 4px 0 var(--blue-15); }
.gl-search__prompt { font-family: var(--mono); color: var(--blue); font-size: 0.9rem; }
.gl-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 0.9rem; color: var(--ink);
}
.gl-search input::placeholder { color: var(--ink-3); }
.gl-search__count {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

.gl-index__body { padding-bottom: 110px; }
.gl-cat { margin-top: 64px; }
.gl-cat__head {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue);
  line-height: 1.4; margin-bottom: 20px;
}
.gl-cat__count { color: var(--ink-3); margin-left: 8px; }

.gl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.gl-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 18px; text-decoration: none; background: #FFFFFF;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gl-card:hover {
  border-color: var(--blue); transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--blue-15);
}
.gl-card__term {
  font-family: var(--display); font-weight: 700; font-size: 1.45rem;
  line-height: 1; color: var(--ink);
}
.gl-card__snippet { font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); flex: 1; }
.gl-card__level {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.gl-empty {
  margin-top: 72px; text-align: center;
  font-family: var(--mono); font-size: 0.85rem; color: var(--ink-2);
}
.gl-empty a { color: var(--blue); }

@media (max-width: 640px) {
  .gl-term { padding-top: 120px; }
  .gl-hero { padding-top: 120px; }
  .gl-pager__link { max-width: 100%; }
}