/* =====================================================================
   hub-glossary.css — the Knowledge Hub glossary (redesign SPEC §5.1–5.2):
   /glossary (overview + search), /glossary/{letter}, /glossary/term/{slug}.
   Loaded by layouts/hub.php after crcgs.css. Colours, fonts and sizes come from the kit's
   --ck- tokens only; text in --ck-blue-text or darker (never --ck-blue / --ck-orange on white).
   Owner, 2026-10-19: first "too blue", then "too orangy - use the palettes for some variation". So the colours
   are mixed: navy for the current letter (white text) with a small orange underline, light blue for hover, the
   search box and an open term, blue rules on the cards; orange only for focus rings, search highlights and the
   "Jump to a letter" box (cream with an orange rule). Orange is never text.
   Sections: 1 page head + search · 2 A–Z bar · 3 overview · 4 term lists · 5 term page ·
             6 previous / next · 7 small screens · 8 reduced motion
   ===================================================================== */

/* ---- 1. Page head and search ---- */
.hub-gl{padding-top:var(--ck-space-7);padding-bottom:var(--ck-space-8)}   /* no breadcrumb above it any more (owner, 2026-10-19) */
.hub-gl__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--ck-space-5) var(--ck-space-7);align-items:end;margin:0 0 var(--ck-space-5)}
.hub-gl__head h1{margin-bottom:var(--ck-space-2)}
.hub-gl__head .ck-lead{margin:0;max-width:40rem}
/* A letter page: "A · 110 terms" under the heading "Glossary"; the letter echoes its orange tile in the A–Z bar */
.ck .hub-gl__sub{display:flex;align-items:center;gap:10px;margin:0;color:var(--ck-muted);font-size:1.125rem;line-height:1.3}
.hub-gl__sub-letter{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:var(--ck-radius-sm);
  background:var(--ck-navy);color:var(--ck-white);font:700 22px/1 var(--ck-font-head)}
.hub-gl__sub-dot{color:var(--ck-muted)}
.hub-gl__h2{font-size:1.45rem;margin:var(--ck-space-6) 0 var(--ck-space-4)}

.hub-gl-search{margin:0;padding:var(--ck-space-4) var(--ck-space-5);background:var(--ck-light);border:1px solid var(--ck-line);border-top:3px solid var(--ck-blue);border-radius:var(--ck-radius);--ck-blue-text:var(--ck-blue-text-deep)}   /* warm, like the rail (owner, 2026-10-19) */
.hub-gl-search__row{display:flex;gap:var(--ck-space-2);align-items:stretch}
.hub-gl-search__field{position:relative;flex:1 1 auto;min-width:0}
.hub-gl-search__icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ck-muted);pointer-events:none}
.ck .hub-gl-search__input{padding-left:40px;min-height:46px}
.hub-gl-search__input::-webkit-search-cancel-button{cursor:pointer}

/* Suggestions (hub-glossary.js): a list under the field; the active option is highlighted */
.hub-gl-suggest{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:22rem;overflow-y:auto;
  background:var(--ck-white);border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-sm);box-shadow:var(--ck-shadow-lg)}
.hub-gl-suggest[hidden]{display:none}
.hub-gl-suggest__opt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ck-space-3);padding:9px 12px;border-radius:4px;
  color:var(--ck-text);cursor:pointer;line-height:1.35}
.hub-gl-suggest__opt mark{background:transparent;color:var(--ck-navy);font-weight:700}
.hub-gl-suggest__letter{flex:0 0 auto;color:var(--ck-muted);font-size:12px;font-weight:600}
.hub-gl-suggest__opt:hover,.hub-gl-suggest__opt[aria-selected="true"]{background:var(--ck-light);color:var(--ck-navy)}
.hub-gl-suggest__opt[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--ck-navy)}   /* navy: the chosen one stands out at 3:1 and more */
.hub-gl-suggest__all{border-top:1px solid var(--ck-line);margin-top:4px;padding-top:11px;color:var(--ck-blue-text);font-weight:600}

/* ---- 2. The A–Z bar: every letter with its number of terms; empty letters greyed out ---- */
.hub-az{margin:0 0 var(--ck-space-6)}
.hub-az__list{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}   /* A–Z and 0–9: one row on wide screens */
.hub-az__link{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:5px 2px 4px;
  border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius-sm);background:var(--ck-white);color:var(--ck-navy);text-decoration:none;
  line-height:1.1;transition:background-color var(--ck-dur) ease,border-color var(--ck-dur) ease,color var(--ck-dur) ease}
.hub-az__letter{font:700 18px/1.1 var(--ck-font-head);white-space:nowrap}
.hub-az__count{margin-top:3px;color:var(--ck-muted);font-size:11px;font-variant-numeric:tabular-nums}
a.hub-az__link:hover{background:var(--ck-light);border-color:var(--ck-blue);box-shadow:inset 0 0 0 1px var(--ck-blue);color:var(--ck-navy)}
a.hub-az__link:hover .hub-az__count{color:var(--ck-navy)}
.ck a.hub-az__link:focus-visible{outline:2px solid var(--ck-navy);outline-offset:3px;border-color:var(--ck-orange);box-shadow:0 0 0 3px var(--ck-orange)}
a.hub-az__link[aria-current="page"]{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white);box-shadow:inset 0 -4px 0 var(--ck-orange)}
a.hub-az__link[aria-current="page"] .hub-az__count{color:var(--ck-on-navy)}
.hub-az__link.is-empty{background:var(--ck-neutral);border-style:dashed;color:var(--ck-muted);cursor:default}
.hub-az__link.is-empty .hub-az__letter{opacity:.75}

/* ---- 3. Overview: one card per letter, its first terms, "All … terms" ---- */
.hub-gl-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:var(--ck-space-4);margin:0;padding:0;list-style:none}
.hub-gl-letter{display:flex;flex-direction:column;padding:var(--ck-space-4) var(--ck-space-5) var(--ck-space-5);background:var(--ck-white);
  border:1px solid var(--ck-line);border-top:3px solid var(--ck-blue);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)}
.ck .hub-gl-letter__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ck-space-3);margin:0 0 var(--ck-space-3);
  padding-bottom:var(--ck-space-2);border-bottom:1px solid var(--ck-line)}
.hub-gl-letter__letter{font:700 2.25rem/1 var(--ck-font-head);color:var(--ck-navy);text-decoration:none}
.hub-gl-letter__letter:hover{color:var(--ck-blue-text);text-decoration:underline;text-decoration-thickness:2px}
.hub-gl-letter__count{color:var(--ck-muted);font:500 13px/1.3 var(--ck-font-body);font-variant-numeric:tabular-nums}
.hub-gl-letter__terms{flex:1 1 auto;margin:0 0 var(--ck-space-3);padding:0;list-style:none}
.hub-gl-letter__terms li{margin:0;padding:5px 0;border-bottom:1px dotted var(--ck-line)}
.hub-gl-letter__terms li:last-child{border-bottom:0}
.hub-gl-letter__terms a{color:var(--ck-text);text-decoration:none;font-size:15px;line-height:1.4}
.hub-gl-letter__terms a:hover{color:var(--ck-blue-text);text-decoration:underline}
.hub-gl-letter__all{font-size:14px}
@media (min-width:601px){ .hub-gl-letter__all--phone{display:none} }

/* ---- 4. Terms (letter pages, search results): only the names show; each opens its definition below it ----
   A <details> per term (owner, 2026-10-19): the name is the <summary>, with a chevron that turns when it
   opens; the open term has a blue rule down its side and a light blue name bar. */
.hub-gl-list{max-width:54rem;margin:0;padding:0;list-style:none;border-top:1px solid var(--ck-line)}
.hub-gl-list__item{margin:0;border-bottom:1px solid var(--ck-line);scroll-margin-top:calc(var(--ck-sticky-top) + var(--ck-space-4))}
.hub-gl-entry{border-left:3px solid transparent;transition:border-color var(--ck-dur) ease}
.hub-gl-entry[open]{border-left-color:var(--ck-blue)}
.hub-gl-entry__sum{display:flex;align-items:center;gap:var(--ck-space-3);min-height:52px;padding:var(--ck-space-3) var(--ck-space-3) var(--ck-space-3) var(--ck-space-4);
  color:var(--ck-navy);cursor:pointer;list-style:none;transition:background-color var(--ck-dur) ease}
.hub-gl-entry__sum::-webkit-details-marker{display:none}
.hub-gl-entry__sum:hover{background:var(--ck-neutral)}
.hub-gl-entry[open] > .hub-gl-entry__sum{background:var(--ck-light)}
.ck .hub-gl-entry__sum:focus-visible{outline:2px solid var(--ck-navy);outline-offset:3px;box-shadow:0 0 0 3px var(--ck-orange)}
.hub-gl-entry__term{flex:1 1 auto;min-width:0;font:600 1.2rem/1.3 var(--ck-font-head);overflow-wrap:anywhere}
.hub-gl-entry__term mark,.hub-gl-entry__match mark{padding:0 1px;background:var(--ck-cream);color:var(--ck-navy);box-shadow:inset 0 -3px 0 var(--ck-orange)}
.hub-gl-entry__n{flex:0 0 auto;color:var(--ck-muted);font-size:13px;font-weight:500}
.hub-gl-entry__icon{flex:0 0 auto;box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:50%;background:var(--ck-white);
  box-shadow:inset 0 0 0 1.5px var(--ck-navy);color:var(--ck-navy);transition:transform var(--ck-dur-slow) var(--ck-ease)}
.hub-gl-entry[open] .hub-gl-entry__icon{transform:rotate(180deg);background:var(--ck-navy);color:var(--ck-white)}
.hub-gl-entry__body{padding:var(--ck-space-2) var(--ck-space-4) var(--ck-space-4)}
.hub-gl-list__def{margin:0;color:var(--ck-text);line-height:1.65}
.hub-gl-list__def p{margin:0 0 .5em}
.hub-gl-list__def p:last-child{margin-bottom:0}
.hub-gl-defs{margin:0;padding-left:1.4em;color:var(--ck-text);line-height:1.65}
.hub-gl-defs li{margin:0 0 .55em;padding-left:.2em}
.hub-gl-defs li p{margin:0 0 .4em}
.hub-gl-defs li::marker{color:var(--ck-blue-text);font-weight:700}
.ck .hub-gl-entry__more{margin:var(--ck-space-3) 0 0;font-size:15px}
/* A search result found by its definition: the words around the match, under the name while it is closed */
.ck .hub-gl-entry__match{margin:0;padding:0 var(--ck-space-4) var(--ck-space-3) calc(var(--ck-space-4) + 3px);color:var(--ck-muted);font-size:15px;line-height:1.55}
.hub-gl-entry[open] + .hub-gl-entry__match{display:none}
.hub-gl-entry__where{color:var(--ck-text);font-weight:600}
.hub-gl-results .ck-meta{margin:0 0 var(--ck-space-5)}

/* A letter page on wide screens: the list, and a side rail that keeps the letters in reach */
.hub-gl-cols{display:grid;grid-template-columns:minmax(0,54rem) minmax(0,1fr);gap:var(--ck-space-7);align-items:start}
.hub-gl-rail{position:sticky;top:calc(var(--ck-sticky-top) + var(--ck-space-4));justify-self:end;width:100%;max-width:17rem;padding:var(--ck-space-4);
  background:var(--ck-cream);border:1px solid var(--ck-line);border-top:3px solid var(--ck-orange);border-radius:var(--ck-radius);
  transition:top var(--ck-dur-slow) var(--ck-ease);--ck-blue-text:var(--ck-blue-text-deep)}
.ck .hub-gl-rail__title{margin:0 0 var(--ck-space-3);color:var(--ck-orange-text);font:600 12px/1.3 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase}
.ck .hub-gl-rail__top{margin:var(--ck-space-3) 0 0;font-size:14px}
.hub-az--mini{margin:0}
.hub-az--mini .hub-az__list{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hub-az--mini .hub-az__link{min-height:34px;padding:2px}
.hub-az--mini .hub-az__letter{font-size:14px;letter-spacing:-.02em}
.hub-az--mini .hub-az__count{display:none}
@media (max-width:1100px){
  .hub-gl-cols{grid-template-columns:minmax(0,1fr)}
  .hub-gl-rail{display:none}   /* the A–Z bar above the list does the job */
}

/* ---- 5. One term ---- */
.hub-gl-term{max-width:48rem;margin:var(--ck-space-2) 0 var(--ck-space-6)}
.hub-gl-term__title{margin-bottom:var(--ck-space-4)}
.hub-gl-term__def{font-size:1.15rem;line-height:1.7;color:var(--ck-text)}
.hub-gl-term__def p{margin:0 0 .8em}
.hub-gl-term__defs{counter-reset:def;margin:var(--ck-space-4) 0 0;padding:0;list-style:none}
.hub-gl-term__defs li{counter-increment:def;position:relative;margin:0 0 var(--ck-space-3);padding:var(--ck-space-4) var(--ck-space-4) var(--ck-space-4) 64px;
  border:1px solid var(--ck-line);border-radius:var(--ck-radius);background:var(--ck-white);font-size:1.075rem;line-height:1.65}
.hub-gl-term__defs li::before{content:counter(def);position:absolute;left:var(--ck-space-4);top:var(--ck-space-4);display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:var(--ck-light);box-shadow:inset 0 0 0 1.5px var(--ck-blue);color:var(--ck-navy);font:700 15px/1 var(--ck-font-body)}
.hub-gl-term__defs li p{margin:0 0 .5em}
.hub-gl-term__defs li p:last-child{margin-bottom:0}
.hub-gl-term__defs li.is-linked{border-color:var(--ck-blue);box-shadow:inset 4px 0 0 var(--ck-blue)}
.hub-gl-term__defs li.is-linked::before{background:var(--ck-navy);box-shadow:none;color:var(--ck-white)}
.ck .hub-gl-term__note{margin:0 0 var(--ck-space-1);color:var(--ck-muted);font-size:13.5px;font-weight:600}   /* first in the followed definition */
.hub-gl-term__more{margin:var(--ck-space-5) 0 0}
.hub-gl-browse{margin-top:var(--ck-space-7);padding-top:var(--ck-space-2);border-top:1px solid var(--ck-line)}
.hub-gl-browse .hub-gl__h2{margin-top:var(--ck-space-5)}

/* ---- 6. Previous / next (letters, terms) ---- */
.hub-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ck-space-4);max-width:54rem;margin:var(--ck-space-6) 0 0}
.hub-pn__link{display:flex;flex-direction:column;gap:2px;padding:var(--ck-space-3) var(--ck-space-4);border:1px solid var(--ck-line-strong);border-radius:var(--ck-radius);
  color:var(--ck-navy);text-decoration:none;transition:border-color var(--ck-dur) ease,background-color var(--ck-dur) ease}
.hub-pn__link:hover{border-color:var(--ck-navy);background:var(--ck-light);color:var(--ck-navy)}
.hub-pn__link--next{grid-column:2;text-align:right}
.hub-pn__dir{color:var(--ck-muted);font-size:13px;font-weight:500}
.hub-pn__link--prev .hub-pn__dir::before{content:"← "}
.hub-pn__link--next .hub-pn__dir::after{content:" →"}
.hub-pn__name{font:600 1.05rem/1.35 var(--ck-font-head);overflow-wrap:anywhere}

/* ---- 7. Small screens ---- */
@media (max-width:1040px){
  .hub-az__list{grid-template-columns:repeat(14,minmax(0,1fr))}   /* two rows */
}
@media (max-width:900px){
  .hub-gl__head{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:600px){
  .hub-gl-search{padding:var(--ck-space-3)}
  .hub-gl-search__row{flex-direction:column}
  .hub-gl-search__row .ck-btn{width:100%}
  .hub-az__list{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}   /* three rows */
  .hub-az__link{min-height:48px}
  .hub-az__letter{font-size:17px}
  .hub-gl-term__defs li{padding-left:56px}
  .hub-gl__sub-letter{min-width:36px;height:36px;font-size:20px}
  .hub-gl-entry__sum{padding-left:var(--ck-space-3)}
  .hub-gl-entry__term{font-size:1.1rem}
  .hub-gl-entry__body{padding:var(--ck-space-2) var(--ck-space-3) var(--ck-space-4)}
  .ck .hub-gl-entry__match{padding:0 var(--ck-space-3) var(--ck-space-3) calc(var(--ck-space-3) + 3px)}
  .hub-gl-letter__terms li:nth-child(n+4){display:none}   /* a shorter overview on phones; "All … terms" shows the rest */
  .hub-pn{grid-template-columns:minmax(0,1fr)}
  .hub-pn__link--next{grid-column:1}
}

/* Touch screens: 44px tap targets (review R3-07). On phones the A–Z bar takes seven to a row, so each
   letter is 44px wide; the overview's terms and big letters are 44px tall. */
@media (pointer:coarse){
  .hub-az__link{min-width:44px;min-height:52px}
  .hub-az--mini .hub-az__link{min-height:44px}
  .hub-gl-letter__letter{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  .hub-gl-letter__terms li{padding:0}
  .hub-gl-letter__terms a{display:flex;align-items:center;min-height:44px}
}
@media (pointer:coarse) and (max-width:600px){
  .hub-az__list{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* ---- 8. Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .hub-az__link,.hub-pn__link,.hub-gl-rail,.hub-gl-entry,.hub-gl-entry__sum,.hub-gl-entry__icon{transition:none}
}