/* The AI implementation glossary (scripts/glossary.py): the index and one page per term, on the site's shared styles
   (site/assets/hub/hub.css); the header and footer come from site/partials/. */

.gl { padding-block: 48px 72px; }
.gl--index { padding-top: 0; }
.gl ul, .gl ol { margin: 0; }
.gl ul { list-style: none; padding: 0; }
.gl .label { margin-bottom: 14px; }
:where(.gl section:not(.hero)) { padding-block: 0; }
.gl .lede { margin-top: 18px; max-width: 64ch; }

/* hub: the hero with the search and topic filters (the story kit's .hero), then A-Z */
.gl-hero { min-height: 0; padding-block: clamp(48px, 7vw, 88px) clamp(28px, 3vw, 40px); }
.gl-hero .hero__title { font-size: clamp(42px, 6.2vw, 84px); }
.gl-lede { max-width: 44rem; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--ink2); }
.gl-tools { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.gl-search { display: flex; max-width: 720px; }
.gl-search input { width: 100%; height: 60px; padding: 0 20px 0 52px; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); font: 500 18px var(--font);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 18px 50% / 20px; }
.gl-search input::placeholder { color: var(--ink3); }
.gl-search input:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink); font: 500 .9rem var(--font); cursor: pointer; transition: border-color .2s; }
.gl-chip:hover { border-color: var(--ink); }
.gl-chip span { font: 500 .74rem var(--mono); color: var(--ink3); margin-left: 4px; }
.gl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.gl-chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
.gl-count { margin: 0; font: 500 .78rem var(--mono); color: var(--ink3); }
/* A to Z, sticky under the header; the letter in view is marked (glossary.js) */
.gl-az { position: sticky; top: var(--gl-bar, 57px); z-index: 5; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 4px;
  background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(6px); border-block: 1px solid var(--rule); }
.gl-az a { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; font: 500 .82rem var(--mono); color: var(--ink2); text-decoration: none; transition: background-color .2s, color .2s; }
.gl-az a:hover { color: var(--stamp); }
.gl-az a.is-on { background: var(--ink); color: #fff; }
/* a letter: the letter on the left, as in a dictionary, its terms beside it */
.gl-letter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink); scroll-margin-top: 130px; }
.gl-letter h2 { position: sticky; top: calc(var(--gl-bar, 57px) + 76px); align-self: start; margin: 0; font: 600 clamp(56px, 6vw, 80px)/.9 var(--display); color: var(--stamp); }
.gl-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.gl-card { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; background: #fff; border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; }
.gl-card:hover { border-color: #AEB6C0; box-shadow: 0 18px 40px -30px rgba(15, 27, 45, .5); }
.gl-card:hover .gl-card-name { color: var(--stamp); }
.gl-card-cat { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stamp); }
.gl-card-name { font: 600 1.35rem/1.15 var(--display); transition: color .2s; }
.gl-card-aka { font: 500 .78rem var(--mono); color: var(--ink3); }
.gl-card-short { font-size: .95rem; line-height: 1.5; color: var(--ink2); }
.gl-empty { margin-top: 40px; font-size: 1.05rem; }
.gl-reset { margin-left: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .9rem var(--font); cursor: pointer; }
.gl-note { margin-top: 64px; padding-top: 16px; border-top: 1px dashed var(--dash); font: 11px/1.8 var(--mono); letter-spacing: .03em; color: var(--ink3); }

/* a term: a short story-kit hero (crumbs, the name, the one-line definition), then the definition beside "In practice",
   related terms as the index's cards, and the next and previous terms */
.gl--term { padding-top: 0; }
.gl-thero { min-height: 0; gap: 0; padding-block: clamp(40px, 6vw, 80px) clamp(28px, 3vw, 40px); }
.gl-thero .hero__in { gap: 20px; }
.gl-thero .hero__title { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; }
.gl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.gl-crumbs::before { content: ""; width: 8px; height: 8px; background: var(--stamp); }
.gl-crumbs a { color: var(--stamp); text-decoration: none; padding-block: 4px; }
.gl-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-aka { font: 500 .9rem var(--mono); color: var(--ink3); }
.gl-short { max-width: 44rem; padding: 2px 0 2px 20px; border-left: 4px solid var(--stamp); font: 500 clamp(1.25rem, 2.2vw, 1.6rem)/1.45 var(--display); color: var(--ink); }
.gl-term { max-width: none; }
.gl-grid { margin-top: clamp(28px, 4vw, 48px); padding-top: 28px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.gl-body h2, .gl-side h2, .gl-related h2 { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stamp); }
.gl-body h2 + p, .gl-body p + p { margin-top: 16px; }
.gl-body p { font-size: 1.12rem; line-height: 1.75; color: var(--ink); max-width: 44rem; }
.gl-body h2:not(:first-child) { margin-top: 40px; }
.gl-sources { margin-top: 12px; padding-left: 1.3em; list-style: decimal; display: grid; gap: 8px; font-size: .95rem; }
.gl-sources a { color: var(--ink2); text-underline-offset: 3px; }
.gl-sources a:hover { color: var(--stamp); }
.gl-side { position: sticky; top: calc(var(--gl-bar, 57px) + 24px); display: flex; flex-direction: column; gap: 20px; }
.gl-practice { background: var(--stage); color: var(--stage-ink); padding: 24px 24px 26px; box-shadow: 8px 8px 0 var(--stamp); margin: 0 8px 8px 0; }
.gl-practice h2 { color: var(--stamp-on-dark); }
.gl-practice ul { margin-top: 14px; display: grid; gap: 14px; }
.gl-practice li { position: relative; padding-left: 22px; line-height: 1.55; color: var(--stage-soft); }
.gl-practice li::before { content: "→"; position: absolute; left: 0; color: var(--stamp-on-dark); }
.gl-scayl { padding: 20px 22px; background: #fff; border: 1px solid var(--rule); }
.gl-scayl ul { margin-top: 12px; display: grid; gap: 10px; }
.gl-scayl a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--stamp); }
.gl-scayl a:hover { color: var(--stamp); }
.gl-related { margin-top: clamp(56px, 7vw, 88px); padding-top: 20px; border-top: 1px solid var(--ink); }
.gl-related .gl-list { margin-top: 18px; }
.gl-pn { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.gl-pn a { text-decoration: none; color: var(--ink); }
.gl-pn-prev, .gl-pn-next { display: flex; flex-direction: column; gap: 4px; }
.gl-pn-next { text-align: right; }
.gl-pn span { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); }
.gl-pn b { font: 600 1.15rem var(--display); transition: color .2s; }
.gl-pn-all { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font-weight: 600; }
.gl-pn-all:hover { background: var(--ink); color: #fff !important; }
.gl-pn a:hover b { color: var(--stamp); }

@media (max-width: 860px) {
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-side { position: static; }
}
@media (max-width: 700px) {
  .gl-letter { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .gl-letter h2 { position: static; font-size: 48px; }
}
@media (max-width: 600px) {
  .gl { padding-block: 28px 56px; }
  .gl--index { padding-top: 0; }
  .gl-az { position: static; }
  .gl-pn { grid-template-columns: 1fr 1fr; }
  .gl-pn-all { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
}