/* Learn pages: glossary (stages/glossary) and checklists (stages/checklists). Tokens only; motion respects reduced-motion. */

/* ---------- Hero term cloud: terms drift slowly behind the copy ---------- */
.gl-cloud { position: absolute; inset-block: 0; inset-inline: 52% 0; z-index: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 900px) { .gl-cloud { display: none; } }
.gl-cloud span { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); font-weight: 800; font-size: clamp(12px, 1.4vw, 16px); white-space: nowrap;
  color: color-mix(in srgb, var(--cx-paper) 12%, transparent); animation: gl-drift 18s ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
.gl-cloud span:nth-child(3n) { color: color-mix(in srgb, var(--cx-or) 34%, transparent); }
@keyframes gl-drift { from { transform: translate(0, 0); } to { transform: translate(-28px, 18px); } }

/* ---------- Glossary list ---------- */
.gl-az { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-az a { min-inline-size: 36px; min-block-size: 36px; display: inline-grid; place-items: center; border-radius: 10px; font-weight: 800; text-decoration: none;
  color: var(--ih-text); background: var(--ih-bg); border: 1.5px solid var(--ih-border); transition: background 200ms, color 200ms, transform 200ms; }
.gl-az a:hover { background: var(--ih-color-brand-ink); color: var(--ih-color-brand-paper); transform: translateY(-2px); }
.gl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.gl-letter { grid-column: 1 / -1; margin: 14px 0 0; font-size: var(--ih-font-size-2xl); display: flex; align-items: center; gap: 12px; scroll-margin-top: 96px; }
.gl-letter::after { content: ""; flex: 1; block-size: 2px; background: linear-gradient(90deg, var(--cx-or), transparent); }
[dir="rtl"] .gl-letter::after { background: linear-gradient(-90deg, var(--cx-or), transparent); }
.gl-term { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--ih-radius-lg); background: var(--ih-bg); border: 1.5px solid var(--ih-border);
  scroll-margin-top: 96px; animation: gl-in 520ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 40ms); transition: border-color 200ms, transform 200ms, box-shadow 200ms; }
.gl-term:hover { border-color: var(--cx-or); transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ih-color-brand-ink) 50%, transparent); }
.gl-term.hl { border-color: var(--cx-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 18%, transparent); }
@keyframes gl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gl-hd { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gl-hd h3 { margin: 0; font-size: var(--ih-font-size-lg); }
.gl-fl { flex: none; font-size: 18px; }
.gl-term p { margin: 0; color: var(--ih-text-muted); line-height: 1.6; }
.gl-term mark { background: color-mix(in srgb, var(--cx-or) 26%, transparent); color: inherit; border-radius: 3px; padding-inline: 2px; }
.gl-ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: center; font-size: 14px; }
.gl-ft a { font-weight: 800; color: var(--ih-color-orange-700); text-decoration: none; }
.gl-ft a:hover { text-decoration: underline; }
.gl-copy { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 0; background: none; color: var(--ih-text-muted); padding: 4px 0; }
.gl-copy:hover { color: var(--ih-text); }

/* ---------- Checklists ---------- */
.ck-total { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--ih-radius-lg);
  background: var(--ih-color-brand-ink); color: var(--ih-color-brand-paper); }
.ck-total ih-hub { inline-size: 64px; block-size: 64px; }
.ck-total b { display: block; font-size: var(--ih-font-size-xl); }
.ck-total small { color: color-mix(in srgb, var(--ih-color-brand-paper) 70%, transparent); font-weight: 600; }
.ck-bar { block-size: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ih-color-brand-paper) 16%, transparent); overflow: hidden; margin-top: 10px; }
.ck-bar i { display: block; block-size: 100%; inline-size: var(--p, 0%); background: var(--cx-or); border-radius: inherit; transition: inline-size 600ms cubic-bezier(.2, .7, .2, 1); }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.ck-card { display: grid; gap: 10px; padding: 18px; border-radius: var(--ih-radius-lg); background: var(--ih-bg); border: 1.5px solid var(--ih-border);
  animation: gl-in 520ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 50ms); }
.ck-card.all-done { border-color: var(--ih-color-status-success); }
.ck-card .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; font-weight: 800; color: var(--ih-text-muted); }
.ck-card h3 { margin: 0; font-size: var(--ih-font-size-lg); }
.ck-card .chk { margin: 0; }
.ck-card .ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; }
.ck-card .ft a { font-weight: 800; color: var(--ih-color-orange-700); text-decoration: none; }
.ck-card .ft a:hover { text-decoration: underline; }
.ck-reset { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 0; background: none; color: var(--ih-text-muted); }
.ck-reset:hover { color: var(--ih-text); }

@media (prefers-reduced-motion: reduce) {
  .gl-cloud span, .gl-term, .ck-card { animation: none; }
  .gl-term, .gl-az a { transition: none; }
}
@media print {
  [data-site-header], [data-site-footer], .cx-hero, .lib-tools, .cta-band, .ck-reset, .proto-flag { display: none !important; }
  .ck-card { break-inside: avoid; animation: none; }
}