/* ═══════════════════════════════════════════════════════════════════════════
   DRIIF — GLOSSARY page-specific layout only.
   Rebuilds the reference glossary/quiz build (sidebar shell, lime/Baloo2
   theme) in this design system instead: standard nav + hero + the shared
   .tabs component for the Glossary/Quiz Yourself switch, .tab-panel for the
   two views. Everything below is new — the flip-card grid, the category
   chips, and the quiz layout have no prior art elsewhere on the site.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── HERO INTRO ────────────────────────────────────────────────────────────
   Eyebrow + h1 + lead, same rhythm as every other page's opening block —
   margin-top corrected from --space-5 to --space-6 (site-wide
   standardisation pass): this was actually 8px tighter than the
   heading-to-lead gap every plain .split section uses (base.css), despite
   the comment above claiming parity. Eyebrow-to-heading is unaffected;
   that one already runs on .eyebrow's own margin-bottom, same as
   everywhere else. */
.glossary-heading{ max-width:26ch; }
.glossary-heading .accent{ color:var(--color-accent); }
.glossary-lead{ margin-top:var(--space-6); }


/* ── STATS STRIP ───────────────────────────────────────────────────────────
   Three counts (terms / categories / plain-English note) in a hairline-
   divided row — the same "divided strip" idiom as .flow-strip, scoped to
   this page since three stat numbers is a different shape than a four-step
   process. */
.g-stats{ display:grid; grid-template-columns:repeat(3,1fr);
  border-top:var(--hair) solid var(--color-border-subtle);
  border-bottom:var(--hair) solid var(--color-border-subtle);
  margin-top:var(--space-8); }
.g-stat{ padding:var(--space-5) var(--space-6);
  border-left:var(--hair) solid var(--color-border-subtle); }
.g-stat:first-child{ border-left:0; }
.g-stat-n{ font-family:var(--font-display); font-weight:400; color:var(--color-accent);
  font-size:var(--text-h1); line-height:var(--lh-tight); }
.g-stat-l{ margin-top:var(--space-2); }
@media (max-width:639px){
  .g-stats{ grid-template-columns:1fr; }
  .g-stat{ border-left:0; border-top:var(--hair) solid var(--color-border-subtle); padding:var(--space-4) 0; }
  .g-stat:first-child{ border-top:0; padding-top:0; }
}


/* ── VIEW SWITCH: Glossary / Quiz Yourself ───────────────────────────────
   Reuses .tabs/.tab as-is (components.css) — this page drives the active
   view itself in glossary.js rather than through tab-panels.js, since the
   quiz also needs its own start/reset lifecycle on activation. */
.glossary-view-tabs{ margin-top:var(--space-8); }
.glossary-view-tabs .tab{ cursor:pointer; }


/* ── TOOLBAR: search + category chips ────────────────────────────────────── */
.g-toolbar{ margin-top:var(--space-7); }

/* Search: .field-input (contact.css) is the site's only other text input,
   built for a reading-heavy form — IBM Plex Sans, no icon. This one is
   chrome, not prose, so it borrows the brand's structural face (Space
   Grotesk, same as nav/buttons/labels) instead, plus a stroke-drawn glass
   icon in the exact idiom the product-card arrow badges already use
   (currentColor, stroke-width 2, square caps, no fill — see .badge-hex
   svg on the homepage). The placeholder gets the eyebrow/label treatment
   (uppercase, tracked, small) so the empty state reads as chrome; typed
   text stays full-size Space Grotesk for legibility. */
.g-search-wrap{ position:relative; max-width:420px; margin-bottom:var(--space-5); }
.g-search-icon{ position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--color-text-muted); pointer-events:none;
  transition:color var(--dur-fast) var(--ease-out); }
.g-search-wrap:focus-within .g-search-icon{ color:var(--color-accent); }
/* Chrome, not a form field: an underline instead of .field-input's bordered
   box, so it reads as a search rule on the page rather than a text-entry
   container competing with the card grid below it. */
.g-search{ font-family:var(--font-display); font-weight:500;
  background:transparent; border:0;
  border-bottom:var(--hair) solid var(--color-border);
  padding:var(--space-3) 0 var(--space-3) calc(16px + var(--space-3));
  transition:border-color var(--dur-fast) var(--ease-out); }
.g-search:focus{ outline:none; border-color:var(--color-accent); }
.g-search::placeholder{ font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-label);
  font-size:var(--ui-sm); color:var(--color-text-muted); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.chip{
  font-family:var(--font-display); font-weight:500; font-size:var(--ui-xs);
  line-height:var(--lh-flat); letter-spacing:var(--track-label);
  text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-5); padding-right:calc(var(--space-5) - var(--track-label));
  border:var(--hair) solid var(--color-pill-border); background:transparent;
  color:var(--color-text-muted); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.chip:hover{ color:var(--color-text); border-color:var(--color-border-strong); }
.chip.active{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
.chip-n{ opacity:.65; }
.g-count{ margin-top:var(--space-4); }


/* ── CARD GRID: expanding cards ────────────────────────────────────────────
   These were 3D flip cards. Per direct request — "tap to flip -> tap to
   expand — the user shouldn't have to scroll the tab contents, if there's a
   slight CLS, it's fine as long as it's smooth — but ux first" — they expand
   in place instead.

   The flip is gone rather than restyled, and the reason is structural: a
   flip card's two faces have to be absolutely positioned at inset:0 to sit
   on top of each other, which pins the card to one fixed height. Any
   definition longer than that had to scroll INSIDE the card, and making that
   bearable took a hidden scrollbar, an accent arrow shown only on overflow,
   a click-to-step-down button, a scroll listener to retire the arrow at the
   bottom, and a Lenis opt-out so the page did not steal the gesture. Every
   one of those existed to work around a box that could not grow. Letting it
   grow deleted all of them (see glossary.js).

   HOW THE HEIGHT ANIMATES: grid-template-rows 0fr -> 1fr on a wrapper. This
   is the one way to transition to a content-derived height in CSS alone —
   `height:auto` is not interpolable, and a max-height guess eases wrong for
   every card whose text is shorter than the guess, which here is most of
   them since definitions run from one line to ten. Browsers without
   interpolable grid rows simply snap open, which is the accepted CLS rather
   than a broken state.

   min-height on the card, not a fixed height: the collapsed cards still line
   up as an even grid, and an expanded one is free to be as tall as its text.
   Expanding grows its grid row and pushes the cards below it down — that is
   the accepted cost of not hiding text. */
.card-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter);
  margin-top:var(--space-7); }
@media (min-width:640px){  .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }

.g-card{ min-height:190px; cursor:pointer; display:flex; }
.g-card:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; }
.g-card-face{
  flex:1; background:var(--color-surface);
  border:var(--hair) solid var(--color-border);
  padding:var(--space-6); display:flex; flex-direction:column;
  transition:border-color var(--dur-fast);
}
.g-card:hover .g-card-face,
.g-card.is-open .g-card-face{ border-color:var(--color-border-strong); }
.g-card-tag{ font-family:var(--font-display); font-weight:500; font-size:var(--ui-xs);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--color-accent);
  margin-bottom:var(--space-5); }
/* flex:1 while closed so the term fills the card and the hint stays pinned
   to the bottom — the same vertical rhythm the front face had. It gives that
   up when open, so the definition below it is what takes the free space. */
.g-card-term{ font-family:var(--font-display); font-weight:500; font-size:var(--text-h3);
  line-height:var(--lh-snug); flex:1; }
.g-card.is-open .g-card-term{ flex:none; }

/* The collapsing wrapper. grid + 0fr is the mechanism; overflow:hidden is
   what makes the 0fr row actually clip its content rather than spill it.

   minmax(0, 0fr), not a bare 0fr: an fr track keeps an AUTOMATIC MINIMUM,
   so a bare 0fr still floors the row at its content's minimum height. With
   a bare 0fr this measured 16px shut instead of 0 — the definition's own
   padding-top, refusing to collapse — which left a stray gap above the hint
   on every closed card. minmax(0, ...) is what removes that floor. */
.g-card-defwrap{
  display:grid; grid-template-rows:minmax(0,0fr); overflow:hidden;
  transition:grid-template-rows var(--dur-drawer) var(--ease-drawer);
}
.g-card.is-open .g-card-defwrap{ grid-template-rows:minmax(0,1fr); }
/* min-height:0 on the grid child is what lets it be clipped at 0fr; without
   it the child's auto minimum keeps the row at content height and nothing
   ever collapses. NO overflow here — the definition is shown in full, which
   is the entire point of this change. */
.g-card-def{
  min-height:0; font-family:var(--font-body); font-size:var(--ui-md);
  line-height:var(--lh-body); color:var(--color-text);
  padding-top:var(--space-4); opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.g-card.is-open .g-card-def{ opacity:1; }
.g-card-hint{ font-family:var(--font-display); font-size:var(--ui-xs); color:var(--color-text-muted);
  letter-spacing:var(--track-label); text-transform:uppercase; margin-top:var(--space-4); }
.g-card.is-open .g-card-hint{ color:var(--color-accent); }
/* Two labels, one shown: the affordance has to say what the next tap does,
   and "tap to expand" on an already-expanded card says the wrong thing. Both
   live in the markup and CSS picks one, so it cannot fall out of sync with
   .is-open the way a JS-written string would on the next re-render (the grid
   is rebuilt from scratch on every search keystroke and category change). */
.g-card-hint-open{ display:none; }
.g-card.is-open .g-card-hint-shut{ display:none; }
.g-card.is-open .g-card-hint-open{ display:inline; }

/* ── DESKTOP: OPEN AS A POPOVER, NOT AS A PUSH ─────────────────────────────
   Per direct request: "on desktop, tap to open can open in a scale and show
   as a small popup in place instead of causing cls."

   The expand above is right on a phone, where the grid is one column and
   growing a card just pushes the next one down the page you are already
   scrolling. On a three-column grid it is worse: expanding one card grows
   the whole ROW, so two cards the user was not touching jump down with it.

   So on desktop the face leaves the flow and overlays instead. The grid cell
   keeps its 190px, nothing below it moves, and the face grows downward over
   the cards beneath — anchored at top:0 rather than centred, so it can never
   grow upward off the top of the viewport and its starting edge stays put.
   Width stays the cell's own, so it cannot overflow the container at the
   first or last column either.

   The mobile behaviour is unchanged and deliberately so: the accepted "slight
   CLS" applies there, where it costs one card's position instead of a row's.

   Background must be opaque — --color-bg, not the face's usual
   --color-surface, which is a 4%-alpha tint and would let the card
   underneath read straight through the popover. */
@media (min-width:1024px){
  .g-card{ position:relative; }
  .g-card.is-open{ z-index:5; }
  .g-card.is-open .g-card-face{
    position:absolute; top:0; left:0; right:0; min-height:100%;
    background:var(--color-bg); border-color:var(--color-accent);
    animation:g-card-pop var(--dur-drawer) var(--ease-drawer);
  }
  /* The scale the request asked for. An animation, not a transition: the
     face's position flips from static to absolute in the same frame, and a
     transition across that discrete change has nothing to interpolate — an
     animation replays cleanly on every open regardless. */
  @keyframes g-card-pop{
    from{ transform:scale(.97); opacity:0; }
    to{ transform:none; opacity:1; }
  }
}

@media (prefers-reduced-motion:reduce){
  .g-card-defwrap, .g-card-def{ transition:none; }
  .g-card.is-open .g-card-face{ animation:none; }
}


/* ── QUIZ ──────────────────────────────────────────────────────────────────
   Single centred column — the quiz is one question at a time, not a grid,
   so it takes the same "centred narrow column" treatment as the contact
   form rather than the page's usual full-bleed sections. */
.quiz-wrap{ max-width:640px; margin:var(--space-8) auto 0; }
.quiz-meta{ display:flex; justify-content:space-between; margin-bottom:var(--space-4); }
.quiz-bar{ height:4px; background:var(--color-border-subtle); margin-bottom:var(--space-8); position:relative; }
.quiz-bar-fill{ position:absolute; inset:0 auto 0 0; width:0; height:100%;
  background:var(--color-accent); transition:width var(--dur-ui) var(--ease-out); }
.quiz-term{ margin-top:var(--space-3); }
.q-options{ display:grid; gap:var(--space-3); margin-top:var(--space-8); }
.q-option{ text-align:left; font-family:var(--font-body); font-size:var(--ui-md);
  color:var(--color-text); background:var(--color-surface);
  border:var(--hair) solid var(--color-border); padding:var(--space-4) var(--space-5);
  cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast); }
.q-option:hover{ border-color:var(--color-border-strong); }
.q-option.correct{ border-color:var(--color-accent); background:var(--color-accent-dim); }
.q-option.wrong{ border-color:var(--color-designate); background:rgba(217,59,43,.12); }
.q-next{ margin-top:var(--space-7); }
.q-next:disabled{ opacity:.4; pointer-events:none; }

.quiz-done{ text-align:center; padding:var(--space-8) 0; }
.quiz-done-score{ margin:var(--space-3) 0 var(--space-6); }

.is-hidden{ display:none !important; }