/* ============================================================
   Technology glossary — the A–Z index, the search, and the <dl>.

   No mockup page exists for a glossary (the handover has none), so the look is
   composed from the kit's own vocabulary: the resources block's pill and search
   shapes, and a reading measure for the definitions. One sheet, the cards/
   convention: the list can never load without the index that sits over it.

   TWO COLUMNS, NOT CARDS. A definition is a sentence, not a panel — and a
   hundred-odd panels is a wall. The entries flow in two columns on the wide
   band with a hairline between them, which is what a reference page looks like
   and what makes scanning for a headword fast.

   The block spans its column and is its own container — a block cannot query
   its own container, so the queries below sit on children (BLOCKS.md trap).
   ============================================================ */
.vt-glossary {
  width: 100%;
  container-type: inline-size;
}

/* --- search: a plain GET form; view.js only live-filters ------------------ */
.vt-glossary__search {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  max-width: 480px;
  width: 100%;
}

.vt-glossary__search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 99px;
  /* the same ground as the pills beneath it — the three filters are one strip */
  background: var(--color-bg-muted);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.vt-glossary__search input[type="search"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.vt-glossary__search-btn {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 99px;
  background-image: var(--gradient-button-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.vt-glossary__search-btn:hover {
  filter: brightness(0.92) saturate(1.12);
}

/* --- the theme tabs: the primary axis, so they read heavier than the letters ---
   Pills and not underlined tabs: the site has no tab vocabulary, and the pill
   row is what the resources block's filters already are — one shape for "this
   narrows the list below", learned once. The letter row beneath keeps the
   smaller, squarer pill so the two rows cannot be mistaken for each other. */
.vt-glossary__themes ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* one gap for both axes, so a wrapped second row sits exactly as far from the
     first as the pills sit from each other */
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
}

.vt-glossary__theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 99px;
  /* Whispering Fog — a real step off the page's white, so the row reads as a
     control strip rather than as text that happens to be in outlines. The
     letters below take the lighter `bg-muted` so the two rows keep their
     hierarchy: themes are the primary axis. */
  background: var(--color-purple-black-10);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.vt-glossary__theme:hover {
  border-color: var(--color-light-purple);
  background: var(--color-light-purple-20);
  text-decoration: none;
}

/* The chosen one wears the site's primary button gradient — `.btn--brand-deep`
   in components.css. A filter that is on is the one affirmative thing in the
   strip, which is what that gradient already means everywhere else; flat ink
   said "disabled" as readily as "selected".

   THE DEEP VARIANT AND NOT `--gradient-button`, and the reason is contrast:
   white on that gradient's light end (#a068b1) measures 4.11:1, and this label
   is 14px bold — under WCAG's 18.66px bold threshold for "large", so it needs
   4.5:1 and does not have it. `--gradient-button-deep` starts at
   --color-dark-purple and measures 7.4:1. Same family, same meaning, legible.
   (The same 4.11:1 applies to `.btn--brand` site-wide; that is a finding for
   the theme, not something to fix from inside one block.) */
.vt-glossary__theme.is-active {
  background-image: var(--gradient-button-deep);
  border-color: transparent;
  color: #fff;
}

.vt-glossary__theme:focus-visible,
.vt-glossary__letter:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.vt-glossary__theme.is-active:hover {
  background-image: var(--gradient-button-deep);
  border-color: transparent;
  filter: brightness(0.92) saturate(1.12);
  color: #fff;
}

/* The count is information, not decoration, so it has to be READABLE: at 11px
   it needs 4.5:1, and 0.65 measured 4.28 on the grey pill and 4.21 on the
   selected one. 0.75 clears both (4.9 / 4.8). Same reasoning the
   --color-text-subtle token itself carries — it was darkened for exactly this. */
.vt-glossary__theme-count {
  font-size: max(11px, var(--fs-floor, 0px));
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* --- the A–Z index: plain GET links, a tighter pill than the type pills --- */
.vt-glossary__index ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
}

.vt-glossary__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* square-ish, because a single letter in a wide pill reads as a typo */
  min-width: 36px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  background: var(--color-bg-muted);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium, 500);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.vt-glossary__letter:hover {
  border-color: var(--color-light-purple);
  background: var(--color-light-purple-20);
  text-decoration: none;
}

.vt-glossary__letter.is-active {
  background-image: var(--gradient-button-deep);
  border-color: transparent;
  color: #fff;
}

.vt-glossary__letter.is-active:hover {
  background-image: var(--gradient-button-deep);
  border-color: transparent;
  filter: brightness(0.92) saturate(1.12);
  color: #fff;
}

/* The one deliberate step in the rhythm: 12px holds the filter strip together,
   and the larger gap here is what separates the controls from the list they
   control. */
.vt-glossary__count {
  margin: 0 0 26px;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}

/* --- a letter's section ---------------------------------------------------- */
.vt-glossary__group {
  margin: 0 0 26px;
}

.vt-glossary__group[hidden] {
  display: none;
}

.vt-glossary__letter-head {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display, var(--font-body));
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent, var(--color-text));
}

/* --- the definition list --------------------------------------------------- */
.vt-glossary__list {
  margin: 0;
  padding: 0;
  /* the second column only where there is room for a real measure — a 40ch
     definition in a 300px track is a stack of two-word lines */
  columns: 2;
  column-gap: 48px;
}

@container (max-width: 720px) {
  .vt-glossary__list { columns: 1; }
}

/* An entry must never be split across the column break: half a definition at
   the foot of column one is unreadable, and `break-inside` is the only thing
   that governs it. */
.vt-glossary__entry {
  break-inside: avoid;
  page-break-inside: avoid; /* the print view still speaks the old name */
  margin: 0 0 18px;
}

/* view.js hides non-matching entries via the hidden ATTRIBUTE — a `display`
   here would beat the UA's [hidden] rule, so state it (the admin badge
   lesson). Nothing above sets display on an entry, but the next edit might. */
.vt-glossary__entry[hidden] {
  display: none;
}

.vt-glossary__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-text);
  /* the fragment link lands the headword clear of a sticky header */
  scroll-margin-top: 96px;
}

.vt-glossary__entry:target .vt-glossary__term {
  color: var(--color-accent, var(--color-text));
}

/* The English term beside a ja/zh headword. Regular weight and subdued: it is
   the cross-reference, not the heading. */
.vt-glossary__original {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular, 400);
  color: var(--color-text-subtle);
}

/* The per-term permalink: present for everyone (a tap target on touch, where
   there is no hover to reveal it) but quiet until the entry is pointed at. */
.vt-glossary__permalink {
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular, 400);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.vt-glossary__entry:hover .vt-glossary__permalink,
.vt-glossary__entry:target .vt-glossary__permalink,
.vt-glossary__permalink:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .vt-glossary__permalink { opacity: 0.5; }
}

.vt-glossary__def {
  margin: 5px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  /* a reading measure, so the two columns do not become one long line each */
  max-width: 46ch;
}

/* --- the connections: a native <details>, no JavaScript ---------------------
   The faq-item block's arrangement: the content is in the HTML whether the
   disclosure is open or shut, so a crawler reads every link and a reader with
   no JavaScript can still open it. Only the marker is ours — the UA triangle is
   replaced by the same chevron the FAQ uses. */
.vt-glossary__links {
  margin: 8px 0 0;
}

.vt-glossary__conn {
  font-size: var(--fs-sm);
}

/* The one affordance on an entry, so it wears the brand rather than the
   neutral hairline every other control on this page uses: lavender tint, plum
   text, a real target. It has to read as "there is more here" from across the
   two columns — a grey outline at 12px did not. */
.vt-glossary__conn-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 99px;
  background: var(--color-surface);
  color: var(--color-link);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none; /* Firefox */
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

/* The UA marker, in both spellings — ::marker is the standard, ::-webkit-details-marker
   is what older WebKit still paints. Both, or the triangle survives in one browser. */
.vt-glossary__conn-summary::marker,
.vt-glossary__conn-summary::-webkit-details-marker {
  display: none;
  content: "";
}

.vt-glossary__conn-summary:hover {
  border-color: var(--color-light-purple);
  background: var(--color-light-purple-10);
}

/* Open reads as pressed — the same inversion the active filter pills use, so
   "this one is on" is one visual idea across the whole page. */
.vt-glossary__conn[open] > .vt-glossary__conn-summary {
  background: var(--color-dark-purple);
  border-color: var(--color-dark-purple);
  color: var(--color-text-inverse);
}

.vt-glossary__conn-summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.vt-glossary__conn-chev {
  display: inline-flex;
  width: 15px;
  height: 15px;
  transition: rotate var(--dur-base) var(--ease-standard);
}

.vt-glossary__conn-chev svg {
  width: 100%;
  height: 100%;
}

.vt-glossary__conn[open] .vt-glossary__conn-chev {
  rotate: 180deg;
}

/* The opened panel is DARK, and it is the site's own dark panel — the
   `--gradient-cinematic` ground and `--radius-lg` that `visitech/event-panel`
   ("Meet us at…") and the news lead already use. Nothing new is invented here.

   Why dark at all: in a two-column list of 105 entries, an opened block on the
   page's own white ground had no edge of its own and read as more definition.
   A dark panel is unmistakably a different KIND of thing — the links out — and
   it closes the loop with the summary above it, which already inverts to solid
   plum when open. */
/* THE SITE'S OWN CARD VOCABULARY, after two wrong turns worth recording.
   First a `--gradient-cinematic` panel with white cards: two maximum contrasts
   stacked, and a black block pasted onto a white page. Then the inverse, a
   lavender ground with plum cards — which read, in Yoann's words, as "very
   barbie style", and he was right: it used purple as a FIELD.

   Visitech uses purple as an ACCENT. Every panel on this site is a white
   surface with a hairline and a soft shadow, and the brand shows up in the type
   — `.vt-resources__card` is the canonical example and this is its vocabulary,
   one size down. The section boundary is still a SURFACE, which is the thing
   that fixed the grouping; it just stopped shouting. */
.vt-glossary__conn-body {
  margin: 8px 0 0;
  padding: 14px 16px 16px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* THE LABEL SITS ON THE DARK, THE LINKS SIT ON A LIGHT CARD.

   Four groups of links all on one dark ground, separated by nothing but an
   11px label, read as one long list — the label was carrying the whole
   distinction and losing. Giving each group its own light card makes the
   boundary a SURFACE rather than a line of small caps, which is the one thing
   that survives being skimmed. It also puts the links back on the ground links
   are read on everywhere else on this site, at `--color-link`. */
/* The label is a quiet caption, not an accent — the plum on this page belongs
   to the links and to the one pill above. */
.vt-glossary__conn-body .vt-glossary__conn-kind {
  color: var(--color-text-subtle);
}

.vt-glossary__conn-body .vt-glossary__conn-list {
  padding: 9px 14px;
  /* --radius-md (4px), not the panel's own --radius-lg: a 10px corner nested
     inside a 10px corner reads as a mistake rather than as a nested card. */
  border-radius: var(--radius-md);
  /* White on the faint ground, separated by a hairline rather than by a colour
     — `.vt-resources__card`'s own arrangement. The shadow is a third of that
     card's, because these are nested and small. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-ink) 4%, transparent);
}

/* The gap between one group's card and the next label — bigger than the gap
   between a label and its own card, so the grouping reads the right way round
   (proximity does the work, not a divider). */
.vt-glossary__conn-body .vt-glossary__conn-list + .vt-glossary__conn-kind,
.vt-glossary__conn-body .vt-glossary__conn-list ~ .vt-glossary__conn-kind {
  margin-top: 14px;
}

/* Where the brand actually lives on this panel: the link colour. */
.vt-glossary__conn-body .vt-glossary__conn-list a {
  color: var(--color-link);
}

.vt-glossary__conn-body .vt-glossary__conn-list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.vt-glossary__conn-body .vt-glossary__conn-list a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.vt-glossary__conn-body .vt-glossary__conn-size {
  color: var(--color-text-subtle);
}

.vt-glossary__conn-kind {
  margin: 10px 0 4px;
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-dark-purple);
}

/* first label in the panel has the panel's own padding above it */
.vt-glossary__conn-kind:first-child {
  margin-top: 0;
}

.vt-glossary__conn-kind:first-child {
  margin-top: 0;
}

.vt-glossary__conn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vt-glossary__conn-list a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.vt-glossary__conn-list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.vt-glossary__conn-size {
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular, 400);
}

.vt-glossary__empty {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}

.vt-glossary__empty[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .vt-glossary__theme,
  .vt-glossary__letter,
  .vt-glossary__permalink,
  .vt-glossary__conn-summary { transition: none; }
  .vt-glossary__conn-chev { transition: none; }
}