/* ======================================================================
   AIDA: COMPONENT STYLES  (LUMEN theme)

   Started from the GoTriple KG Explorer's kg-components.css (2026-10-07),
   then checked against the WLP code (wlp-front, develop, 902e87dc) and the
   LUMEN WLP UI Kit in Figma.

   Same class names and the same HTML as the WLP front end. Only the values
   change: every value comes from aida-tokens.css (Figma, LUMEN theme).

   Load order:  aida-tokens.css  then  aida-components.css
   Do NOT load wlp.css on the same page. The class names are the same,
   so the two files would fight. wlp.css is a visual reference only.

   NAMING RULE
     gt-*, ms-*, modal-*   already exist in the WLP code. Same name, same markup.
     aida-*                new here. The WLP code has no equivalent.
                           (Most were made for the KG Explorer as kg-*.)

   VALUE RULE
     No hex colors, no raw px for sizes, radii or font sizes. Use a token.
     The few exceptions are listed in "Component constants" below.

   PREVIEW HELPERS (test pages only, devs do not need them)
     .is-hover   .is-focus   force a state so it can be shown still.

   WHERE EACH COMPONENT COMES FROM  (WLP file in src/styles/)
     gt-title-1, -2, -3, -4, gt-text, -small, -bold                atoms/_title-*, _text, _text-small, _text-bold
     gt-button (+ -cta -transparent -chatbot -s -l -no-text -icon-only)  atoms/_buttons
     gt-input-text (+ __border __error __disabled __full-width),
     gt-input-textarea                                             atoms/_input-text
     gt-select                                                     atoms/_select
     ms-checkbox (+ __check __label --small --medium)              atoms/_input-checkbox
     modal-overlay, modal-wrapper, modal, gt-modal-header/-content/-footer,
     gt-form-actions                                               molecules/_modal
     gt-nav-bar, gt-nav-bar-item (.is-active .is-disabled)         molecules/_nav-bar, atoms/_nav-bar-item
     gt-header (+ __wrapper __logo __content __nav __tools ...),
     gt-nav__element, gt-dropdown-panel, gt-dropdown-item          organisms/_header, atoms/_nav-element, molecules/_dropdown
     gt-divider                                                    atoms/_divider
     gt-footer (+ __wrapper __brand __title ...)                    organisms/_footer
     gt-diagram-tooltip (restyled to the Figma tooltip)            atoms/_diagram-tooltip
     gt-badge (+ -discipline -keyword -tripleVocabulary -open -primary) atoms/_badge
     gt-toast-container, -block, -title, -message                  utilities/_toast (restyled to the Figma toast)
     gt-loader (+ -small -medium -large -dots -spinner), __content atoms/_loader
     aida-input-icon, aida-field, aida-tooltip-*, aida-toast-*,
     aida-badge-*, aida-nav-bar-vertical, aida-divider-strong      new (no WLP equivalent)
   ====================================================================== */

/* ---------- Component constants (NOT in Figma) ----------
   Values WLP or the Figma components use, but that are not variables.
   Move them into Figma if you want them as tokens. */
:root {
  --aida-border-width: 1px;
  --aida-focus-gap: 2px;
  --aida-focus-ring: 2px;
  --aida-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.05), 0 2px 15px rgb(0 0 0 / 0.05);
  /* Figma effect style Card-shadow-sm. Also WLP tabs */
  --aida-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.05);
  /* Figma effect style Card-shadow-lg */
  --aida-toast-width: 329px;
  /* Figma Toast width */
  --aida-transition: 0.2s;
  --aida-disabled-opacity: 0.4;
  /* same as WLP nav bar */
  --aida-nav-item-height: 42px;
  /* Figma Nav-item */
  --aida-nav-icon-size: 18px;
  /* Figma Nav-item icon */
  --aida-button-height-s: 28px;
  /* Figma Buttons, size S */
  --aida-button-height-m: 40px;
  /* size M */
  --aida-button-height-l: 52px;
  /* size L */
  --aida-checkbox-size-s: 20px;
  --aida-checkbox-size-m: 24px;
  --aida-tooltip-width: 301px;
  /* Figma Tooltip width */
  --aida-z-header: 30;
  /* same as WLP .gt-header */
  --aida-header-logo-height: 57px;
  /* Figma logo-main "WLP header" (223 x 57) */
  --aida-header-logo-height-mobile: 40px;
  /* same logo on mobile */
  --aida-footer-logo-height: 52px;
  /* Figma logo-main "WLP footer" (375 x 52) */
  --aida-menu-button-size: 48px;
  /* Figma mobile "menu" frame */
  --aida-menu-icon-size: 32px;
  /* Figma mobile "Icon wrapper" */
  --aida-lang-icon-size: 24px;
  /* Figma "world 2" (16 in the mobile top bar) */
  --aida-lang-icon-size-s: 16px;
  --aida-icon-size-m: 20px;
  /* Figma Icon wrapper 20px */
  --aida-icon-size-s: 16px;
  /* Figma Icon wrapper 16px */
  --aida-sparkle-size: 24px;
  /* Figma AIDA sparkle in the header button */
  --aida-footer-col-min: 328px;
  /* Figma footer groups: min width 328 */
  --aida-footer-address-max: 453px;
  /* Figma footer left group max width */
  --aida-footer-links-max: 249px;
  /* Figma footer link column max width */
  --aida-beta-background: #93ddff;
  /* Figma Tag / Badge "New sm" fill (not a token) */
  --aida-chip-height: 26px;
  /* Figma prompt chip */
  --aida-avatar-size: 40px;
  /* Figma AIDA avatar ("floating button") next to a message */
  --aida-message-max: 864px;
  /* Figma AIDA chat column max width */
  --aida-bubble-max: 600px;
  /* Figma user bubble max width */
  --aida-input-max: 811px;
  /* Figma landing page chat text area max width */
  --aida-band-title-size: 12px;
  /* Figma AIDA band title (Space Grotesk Bold 12; no token at this size) */
  --aida-band-title-color: #ffefd8;
  /* Figma AIDA band title color (not a token; close to secondary-100) */
  --aida-typing-icon-size: 48px;
  /* Figma "Typing animation" */
  --aida-landing-padding: 160px;
  --aida-input-padding-y: 7px;
  /* Figma "Form / Input" inside the chat text area */
  --aida-chip-padding-end: 10px;
  /* Figma prompt chip, right padding */
  --aida-dot-size: 6px;
  /* typing dots (Figma uses an ellipsis icon) */
  --aida-textarea-max: 400px;
  /* WLP chat input: the textarea grows up to this height */
  --aida-band-gap: 2px;
  /* Figma AIDA band: logo to title */
  /* Figma AIDA landing body, top and bottom padding */
  --aida-beta-size: 9px;
  /* Figma "Beta" micro label (no token at this size) */
  --aida-dropdown-min-width: 200px;
  /* Figma Dropdown is 300 wide; a language list does not need it */
}

[class^="gt-"],
[class*=" gt-"],
[class^="ms-"],
[class*=" ms-"],
[class^="aida-"],
[class*=" aida-"],
.modal,
.modal-wrapper,
.modal-overlay {
  box-sizing: border-box;
}

/* Page base for the prototype */
.aida-app {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
  background: var(--background-gray-01);
}

/* Visible only to screen readers */
.aida-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography used by the components ---------- */
.gt-title-2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: var(--size-title-h2);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

/* Page title (h1), body text and bold words. Figma: H1-Title 2, Body text, Body text bold (Roboto SemiBold). */
.gt-title-1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h1);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-primary);
}

.gt-text {
  margin: 0;
  padding: 0;
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.gt-text-bold {
  font-weight: var(--weight-semibold);
}

.gt-title-3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.gt-title-4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.gt-text-small {
  margin: 0;
  padding: 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

/* ---------- Focus ring (shared) ----------
   Figma tokens: Focus/Focus (black) and Focus/inner-focus (white).
   The transparent outline keeps a visible ring in Windows high-contrast mode. */
.gt-button:focus-visible,
.gt-button.is-focus,
.gt-input-text:focus-visible,
.gt-input-text.is-focus,
.gt-select:focus-visible,
.gt-select.is-focus,
.ms-checkbox__check:focus-visible,
.ms-checkbox__check.is-focus,
.gt-nav-bar-item__content:focus-visible,
.gt-nav-bar-item__content.is-focus,
.gt-header__logo a:focus-visible,
.gt-footer__logo:focus-visible,
.gt-footer__link-button:focus-visible,
.gt-footer a:focus-visible,
.gt-nav__element>a:focus-visible,
.gt-nav__element>a.is-focus,
.gt-header__language-options__selected-option:focus-visible,
.gt-header__language-options__selected-option.is-focus,
.gt-header__search-button:focus-visible,
.aida-header-button:focus-visible,
.gt-header__active-user .gt-menu-button:focus-visible,
.gt-header__mobile-menu-toggle:focus-visible,
.gt-header__mobile-menu-close:focus-visible,
.gt-dropdown-item>a:focus-visible,
.gt-dropdown-item>button:focus-visible,
.gt-dropdown-item>a.is-focus {
  outline: var(--aida-focus-ring) solid transparent;
  box-shadow:
    0 0 0 var(--aida-focus-gap) var(--inner-focus),
    0 0 0 calc(var(--aida-focus-gap) + var(--aida-focus-ring)) var(--focus);
}

/* ======================================================================
   BUTTON
   Figma "Buttons" (LUMEN WLP UI Kit, node 3506:34044).
   <button class="gt-button">Label</button>                 Default (outline)
   <button class="gt-button gt-button-cta">Label</button>   CTA: the main action
   <button class="gt-button gt-button-transparent">         Transparent
   <button class="gt-button gt-button-chatbot">             Chatbot (no fill until hover)
   Sizes:  gt-button-s (28), (none) (40), gt-button-l (52)
   Square, icon only:  add gt-button-no-text, and aria-label
   Ghost icon button (as WLP):  gt-button-icon-only gt-button-no-text
   Icon after the label, shown on the left:  icon-left
   States: :hover  :active or .active  :disabled or .disabled  .gt-button-clicked
   Not built: gt-button-light, gt-button-xl (not in the Figma Buttons frame)
   ====================================================================== */
.gt-button {
  --_bg: var(--color-white-100);
  --_fg: var(--content-primary);
  --_border: var(--border-gray-02);
  --_bg-hover: var(--background-gray-01);
  --_fg-hover: var(--content-01);
  --_border-hover: var(--border-gray-04);
  --_bg-active: var(--background-primary);
  --_fg-active: var(--content-inverse);
  --_border-active: var(--background-primary);
  --_bg-disabled: var(--color-white-100);
  --_border-disabled: var(--border-gray-01);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--layout-spacing-xs);
  min-height: var(--aida-button-height-m);
  padding: 0 var(--layout-spacing-md);
  margin: 0;
  overflow: hidden;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_fg);
  background-color: var(--_bg);
  border: var(--aida-border-width) solid var(--_border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--aida-transition), border-color var(--aida-transition), color var(--aida-transition);
}

.gt-button:not(:disabled):not(.disabled):hover,
.gt-button.is-hover {
  color: var(--_fg-hover);
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
}

.gt-button:not(:disabled):not(.disabled):active,
.gt-button.active,
.gt-button.active:hover {
  color: var(--_fg-active);
  background-color: var(--_bg-active);
  border-color: var(--_border-active);
}

.gt-button:disabled,
.gt-button.disabled,
.gt-button:disabled:hover,
.gt-button.disabled:hover {
  color: var(--content-04);
  background-color: var(--_bg-disabled);
  border-color: var(--_border-disabled);
  cursor: not-allowed;
}

.gt-button.icon-left {
  flex-direction: row-reverse;
}

/* CTA */
.gt-button-cta {
  --_bg: var(--button-secondary);
  --_fg: var(--content-02);
  --_border: var(--border-secondary);
  --_bg-hover: var(--button-secondary-hover);
  --_fg-hover: var(--content-02);
  --_border-hover: var(--border-gray-04);
  --_bg-active: var(--button-secondary-clicked);
  --_fg-active: var(--content-02);
  --_border-active: var(--border-gray-04);
  --_bg-disabled: var(--button-disabled);
  --_border-disabled: var(--button-disabled);
}

/* Transparent */
.gt-button-transparent {
  --_bg: var(--background-gray-01);
  --_fg: var(--button-primary);
  --_border: transparent;
  --_bg-hover: var(--background-gray-01);
  --_fg-hover: var(--button-primary);
  --_border-hover: var(--border-primary);
  --_bg-active: var(--background-gray-02);
  --_fg-active: var(--button-primary);
  --_border-active: var(--border-gray-04);
  --_bg-disabled: transparent;
  --_border-disabled: transparent;
}

.gt-button-transparent.gt-button-clicked {
  background-color: var(--background-gray-02);
  border-color: transparent;
}

/* Chatbot: like Transparent, but with no fill at rest (Figma "Chatbot" style) */
.gt-button-chatbot {
  --_bg: transparent;
  --_fg: var(--button-primary);
  --_border: transparent;
  --_bg-hover: var(--background-gray-01);
  --_fg-hover: var(--button-primary);
  --_border-hover: var(--border-primary);
  --_bg-active: var(--background-gray-02);
  --_fg-active: var(--button-primary);
  --_border-active: var(--border-gray-04);
  --_bg-disabled: transparent;
  --_border-disabled: transparent;
}

.gt-button-chatbot.gt-button-clicked {
  background-color: var(--background-gray-02);
  border-color: var(--border-gray-04);
}

/* Ghost icon button: no background until hover (used for Close in modals) */
.gt-button-icon-only {
  --_bg: transparent;
  --_fg: var(--button-primary);
  --_border: transparent;
  --_bg-hover: var(--background-gray-01);
  --_fg-hover: var(--button-primary);
  --_border-hover: var(--border-primary);
  --_bg-active: var(--background-gray-02);
  --_fg-active: var(--button-primary);
  --_border-active: transparent;
  --_bg-disabled: var(--background-gray-01);
  --_border-disabled: transparent;
}

.gt-button-icon-only.gt-button-clicked {
  background-color: var(--background-gray-02);
  border-color: transparent;
}

/* Sizes */
.gt-button.gt-button-s {
  min-height: var(--aida-button-height-s);
  padding: 0 var(--layout-spacing-sm);
  gap: var(--layout-spacing-sm);
  font-size: var(--size-body-xs);
}

.gt-button.gt-button-l {
  min-height: var(--aida-button-height-l);
  padding: 0 var(--layout-spacing-lg);
  gap: var(--layout-spacing-sm);
  font-size: var(--size-title-h4);
}

/* Icon only: square */
.gt-button.gt-button-no-text {
  width: var(--aida-button-height-m);
  padding: 0;
}

.gt-button.gt-button-no-text.gt-button-s {
  width: var(--aida-button-height-s);
}

.gt-button.gt-button-no-text.gt-button-l {
  width: var(--aida-button-height-l);
}

.gt-button.gt-button-icon-only.gt-button-no-text {
  width: var(--spacing-6);
  min-height: var(--spacing-6);
}

/* Icons (inline SVG here; WLP uses <i class="gt-icon">) */
.gt-button svg {
  flex: none;
  width: calc(var(--spacing-4) + var(--spacing-1));
  height: calc(var(--spacing-4) + var(--spacing-1));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gt-button.gt-button-s svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.gt-button.gt-button-l svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

/* ======================================================================
   FIELD (new). A label, a control, a hint or an error message.
   <div class="aida-field"><label class="aida-field__label" for="x">Label</label>
     <input class="gt-input-text gt-input-text__border" id="x">
     <p class="aida-field__hint">Hint</p></div>
   ====================================================================== */
.aida-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.aida-field__label {
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--content-02);
}

.aida-field__hint {
  margin: 0;
  font-size: var(--size-body-xs);
  color: var(--content-04);
}

.aida-field__error {
  margin: 0;
  font-size: var(--size-body-xs);
  color: var(--content-error);
}

/* ======================================================================
   INPUT, TEXTAREA
   <input class="gt-input-text gt-input-text__border gt-input-text__full-width">
   <textarea class="gt-input-text gt-input-textarea gt-input-text__border">
   Modifiers: __error  __disabled  __full-width
   Monospace (new, for the SPARQL editor): add aida-mono
   ====================================================================== */
.gt-input-text {
  min-height: var(--aida-button-height-m);
  margin: 0;
  padding: 0 var(--spacing-3);
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
  background-color: var(--color-white-100);
  border: 0;
  border-radius: 0;
  transition: border-color var(--aida-transition), background-color var(--aida-transition);
}

.gt-input-text__border {
  border: var(--aida-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-md);
}

.gt-input-text__full-width {
  width: 100%;
}

.gt-input-textarea {
  min-height: calc(var(--aida-button-height-m) * 2);
  padding: var(--spacing-2) var(--spacing-3);
  resize: vertical;
}

/* Input with an icon on the right (Figma Form / Input with icon). New (from the KG Explorer).
   <div class="aida-input-icon"><input class="gt-input-text ..."> <svg>...</svg></div> */
.aida-input-icon {
  position: relative;
}

.aida-input-icon .gt-input-text {
  padding-right: calc(var(--spacing-5) + var(--spacing-2) * 2);
}

.aida-input-icon .gt-input-text::-webkit-search-cancel-button {
  appearance: none;
}

.aida-input-icon svg {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  width: var(--spacing-5);
  height: var(--spacing-5);
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--content-01);
  pointer-events: none;
}

.gt-input-text::placeholder {
  color: var(--content-placeholder);
  opacity: 1;
}

.gt-input-text__border:hover {
  border-color: var(--border-gray-04);
}

.gt-input-text__border:focus,
.gt-input-text__border.is-focus {
  border-color: var(--border-primary);
}

.gt-input-text__error,
.gt-input-text__error:hover {
  border-color: var(--error);
}

.gt-input-text__disabled,
.gt-input-text:disabled {
  color: var(--content-04);
  background-color: var(--background-gray-01);
  border-color: var(--border-gray-01);
  cursor: not-allowed;
}

.aida-mono {
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
}

/* ======================================================================
   SELECT
   <select class="gt-select"> ... </select>
   ====================================================================== */
.gt-select {
  appearance: none;
  min-height: var(--aida-button-height-m);
  padding: 0 var(--spacing-7) 0 var(--spacing-3);
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  color: var(--content-01);
  background-color: var(--color-white-100);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--content-02) 50%),
    linear-gradient(135deg, var(--content-02) 50%, transparent 50%);
  background-position: calc(100% - var(--spacing-5)) 50%, calc(100% - var(--spacing-4)) 50%;
  background-size: var(--spacing-2) var(--spacing-2), var(--spacing-2) var(--spacing-2);
  background-repeat: no-repeat;
  border: var(--aida-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--aida-transition);
}

.gt-select:hover {
  border-color: var(--border-gray-04);
}

.gt-select:focus {
  border-color: var(--border-primary);
}

.gt-select:disabled {
  color: var(--content-04);
  background-color: var(--background-gray-01);
  border-color: var(--border-gray-01);
  cursor: not-allowed;
}

.gt-select[aria-invalid="true"] {
  border-color: var(--error);
}

/* ======================================================================
   CHECKBOX
   <label class="ms-checkbox ms-checkbox--medium ms-checkbox--left ms-checkbox--style-default">
     <input class="ms-checkbox__check" type="checkbox">
     <span class="ms-checkbox__label">Label</span></label>
   Sizes: --small, --medium.  Position: --left, --right.
   The tick is WLP's own icon: public/svg/icon-check-white.svg
   ====================================================================== */
.ms-checkbox {
  display: inline-flex;
  position: relative;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

.ms-checkbox--left {
  flex-direction: row;
}

.ms-checkbox--right {
  flex-direction: row-reverse;
}

.ms-checkbox__label {
  padding: 0;
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.ms-checkbox__check {
  appearance: none;
  flex-shrink: 0;
  margin: 0 var(--spacing-2) 0 0;
  width: var(--aida-checkbox-size-m);
  height: var(--aida-checkbox-size-m);
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--aida-transition), border-color var(--aida-transition);
}

.ms-checkbox--small>.ms-checkbox__check {
  width: var(--aida-checkbox-size-s);
  height: var(--aida-checkbox-size-s);
}

.ms-checkbox--right>.ms-checkbox__check {
  margin: 0 0 0 var(--spacing-2);
}

.ms-checkbox__check:hover {
  border-color: var(--border-primary);
}

.ms-checkbox__check:checked {
  content: url("public/svg/icon-check-white.svg");
  padding: var(--spacing-1);
  background-color: var(--button-primary);
  border-color: var(--button-primary);
}

.ms-checkbox__check:disabled {
  background-color: var(--background-gray-01);
  border-color: var(--border-gray-01);
  cursor: not-allowed;
}

.ms-checkbox__check:disabled:checked {
  background-color: var(--button-disabled);
  border-color: var(--button-disabled);
}

.ms-checkbox__check:disabled+.ms-checkbox__label {
  color: var(--content-04);
}

/* ======================================================================
   MODAL
   <div class="modal-overlay"></div>
   <div class="modal-wrapper">
     <div class="modal" role="dialog" aria-modal="true" aria-labelledby="t">
       <div class="gt-modal-header"><h2 class="gt-title-2" id="t">Title</h2>
         <button class="gt-button gt-button-icon-only gt-button-no-text" aria-label="Close">...</button></div>
       <div class="gt-modal-content"> ... <div class="gt-modal-footer">buttons</div></div>
     </div></div>
   Sizes: modal-big (720), modal-bigger (960), modal-biggest (1200)
   ====================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: var(--overlay-black-50);
}

.modal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-overlay[hidden],
.modal-wrapper[hidden] {
  display: none;
}

/* While a modal is open the page behind it does not scroll. The gutter stays reserved so the
   page does not shift sideways when the page scrollbar goes away. */
html {
  scrollbar-gutter: stable;
}

html:has(.modal-wrapper:not([hidden])) {
  overflow: hidden;
}

.modal {
  position: relative;
  z-index: 100;
  width: 80%;
  max-width: 31.25rem;
  margin: auto;
  padding: var(--layout-spacing-xl);
  background-color: var(--color-white-100);
  border-radius: var(--radius-lg);
  color: var(--content-01);
}

.modal.modal-big {
  max-width: 45rem;
}

.modal.modal-bigger {
  max-width: 60rem;
}

.modal.modal-biggest {
  max-width: 75rem;
}

.gt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.gt-modal-header .gt-title-2 {
  margin: 0;
}

.gt-modal-header button:only-child {
  margin-left: auto;
}

.gt-modal-content {
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
}

.gt-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.gt-form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--layout-spacing-lg);
}

.gt-form-actions button:only-child {
  margin-left: auto;
}

/* ======================================================================
   TAB NAVIGATION  (WLP calls it the nav bar)
   Figma "Tab navigation" (LUMEN WLP UI Kit, node 3506:55911): Nav-bar, Nav-item, Nav-bar-item.
   <nav class="gt-nav-bar has-children">
     <ul class="gt-nav-bar__list" aria-label="Result views">
       <li class="gt-nav-bar-item is-active">
         <a class="gt-nav-bar-item__content" href="#" aria-current="page">
           <span class="gt-nav-bar-item__text">Table</span>
           <span class="gt-badge gt-badge-counter">213</span></a></li>
       <li class="gt-nav-bar-item">...</li>
       <li class="gt-nav-bar-item is-disabled">...</li></ul></nav>
   Optional icon before the text:
     <i class="gt-icon gt-nav-bar-item__icon"> (inline <svg class="gt-nav-bar-item__icon"> here)
   Vertical list (Figma "Nav-bar-item"): add aida-nav-bar-vertical to the nav. New class.
   Disabled follows WLP (opacity). Figma has no disabled state.
   ====================================================================== */
.gt-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
  padding: var(--spacing-2);
  background-color: var(--background-gray-02);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
  box-shadow: var(--aida-shadow-sm);
}

.gt-nav-bar__list {
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.gt-nav-bar-item {
  list-style: none;
}

.gt-nav-bar-item__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--aida-nav-item-height);
  padding: 0 var(--spacing-4);
  color: var(--content-02);
  text-decoration: none;
  background: transparent;
  border: var(--aida-border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gt-nav-bar-item__icon {
  flex: none;
  width: var(--aida-nav-icon-size);
  height: var(--aida-nav-icon-size);
  margin-right: calc(var(--spacing-1) - var(--spacing-3));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--content-02);
}

.gt-nav-bar-item__text,
.gt-nav-bar-item__text p {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: inherit;
  transition: color var(--aida-transition);
}

/* Hover (Figma: text and icon turn primary, underlined) */
.gt-nav-bar-item:not(.is-active):not(.is-disabled):hover .gt-nav-bar-item__content,
.gt-nav-bar-item:not(.is-active):not(.is-disabled) .gt-nav-bar-item__content.is-hover {
  color: var(--content-primary);
}

.gt-nav-bar-item:not(.is-active):not(.is-disabled):hover .gt-nav-bar-item__icon,
.gt-nav-bar-item:not(.is-active):not(.is-disabled) .is-hover .gt-nav-bar-item__icon {
  color: var(--content-primary);
}

.gt-nav-bar-item:not(.is-active):not(.is-disabled):hover .gt-nav-bar-item__text,
.gt-nav-bar-item:not(.is-active):not(.is-disabled) .is-hover .gt-nav-bar-item__text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Active (Figma "Selected": white, 1px dark border) */
.gt-nav-bar-item.is-active .gt-nav-bar-item__content {
  background-color: var(--color-white-100);
  border-color: var(--border-gray-04);
}

/* Disabled */
.gt-nav-bar-item.is-disabled .gt-nav-bar-item__content {
  cursor: not-allowed;
}

.gt-nav-bar-item.is-disabled .gt-nav-bar-item__icon,
.gt-nav-bar-item.is-disabled .gt-nav-bar-item__text {
  opacity: var(--aida-disabled-opacity);
}

.gt-nav-bar-item.is-disabled .gt-badge-counter {
  opacity: var(--aida-disabled-opacity);
}

.gt-nav-bar-item__content:focus-visible,
.gt-nav-bar-item__content.is-focus {
  position: relative;
  z-index: 1;
}

/* Vertical (Figma "Nav-bar-item"): the selected item is a gray card, the others have no fill */
.aida-nav-bar-vertical {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.aida-nav-bar-vertical .gt-nav-bar__list {
  flex-direction: column;
  width: 100%;
}

.aida-nav-bar-vertical .gt-nav-bar-item__content {
  width: 100%;
  box-sizing: border-box;
}

.aida-nav-bar-vertical .gt-nav-bar-item__content {
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
}

.aida-nav-bar-vertical .gt-nav-bar-item__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--content-01);
}

.aida-nav-bar-vertical .gt-badge-counter {
  flex: none;
}

.aida-nav-bar-vertical .gt-nav-bar-item.is-active .gt-nav-bar-item__content {
  background-color: var(--background-gray-02);
  border-color: var(--border-gray-01);
}

/* Counter badge (Figma Tag / Badge, Type=Count) */
.gt-badge-counter {
  --_content: var(--content-primary);
  --_bg: var(--background-primary-light);
  --_border: var(--border-gray-02);
  --_bar: transparent;
  padding: var(--spacing-0) var(--spacing-2);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  border-radius: var(--radius-sm);
}

.gt-badge-counter::before {
  display: none;
}

/* ======================================================================
   TOOLTIP
   Follows Figma "Tooltip" (LUMEN WLP UI Kit, node 3506:56049).
   <span class="aida-tooltip-wrap">
     <button class="gt-button" aria-describedby="tip1">...</button>
     <span class="gt-diagram-tooltip aida-tooltip-down" role="tooltip" id="tip1">Text</span>
   </span>
   Arrow direction (Figma "Direction"): aida-tooltip-up, -down, -left, -right.
     down = tooltip above its target, arrow points down. up = tooltip below.
     left = tooltip to the right of its target, arrow points left. right = the other way.
   Color (Figma "Color"): (none) = light, aida-tooltip-dark
   Optional action: <div class="aida-tooltip-actions"><button class="gt-button gt-button-cta gt-button-s">...
   WLP's gt-diagram-tooltip is the white chart tooltip. The graph in the KG
   Explorer is a diagram, so it uses the same class. Dark is for short hints on buttons.
   aida-tooltip-wrap is new: it places the tooltip, shows it on hover and focus.
   Add .is-open to keep it visible.
   ====================================================================== */
.gt-diagram-tooltip {
  --_bg: var(--color-white-100);
  --_fg: var(--content-01);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: max-content;
  max-width: var(--aida-tooltip-width);
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-text);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--_fg);
  background-color: var(--_bg);
  border-radius: var(--radius-md);
  box-shadow: var(--aida-shadow-sm);
}

.gt-diagram-tooltip.aida-tooltip-dark {
  --_bg: var(--background-gray-06);
  --_fg: var(--content-inverse);
}

.aida-tooltip-actions {
  display: flex;
  justify-content: flex-end;
}

/* Arrow: a rotated square, half hidden behind the box */
.aida-tooltip-up::after,
.aida-tooltip-down::after,
.aida-tooltip-left::after,
.aida-tooltip-right::after {
  content: "";
  position: absolute;
  width: var(--spacing-3);
  height: var(--spacing-3);
  background-color: var(--_bg);
  border-radius: var(--radius-xs);
}

.aida-tooltip-up::after {
  top: calc(var(--spacing-3) / -2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.aida-tooltip-down::after {
  bottom: calc(var(--spacing-3) / -2);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.aida-tooltip-left::after {
  left: calc(var(--spacing-3) / -2);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.aida-tooltip-right::after {
  right: calc(var(--spacing-3) / -2);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Placement and show/hide */
.aida-tooltip-wrap {
  position: relative;
  display: inline-block;
}

.aida-tooltip-wrap>.gt-diagram-tooltip {
  position: absolute;
  z-index: 1100;
  bottom: calc(100% + var(--spacing-3));
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--aida-transition), visibility var(--aida-transition);
}

.aida-tooltip-wrap>.aida-tooltip-up {
  top: calc(100% + var(--spacing-3));
  bottom: auto;
}

.aida-tooltip-wrap>.aida-tooltip-left {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--spacing-3));
  transform: translateY(-50%);
}

.aida-tooltip-wrap>.aida-tooltip-right {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + var(--spacing-3));
  transform: translateY(-50%);
}

/* Below its target, no arrow: the hint on icon-only buttons (Figma "icon-only actions", 5124:4425).
   aida-tooltip-end lines it up with the button's right edge, for buttons at the end of a row. */
.aida-tooltip-wrap>.aida-tooltip-below {
  top: calc(100% + var(--spacing-2));
  bottom: auto;
  white-space: nowrap;
}

.aida-tooltip-wrap>.aida-tooltip-end {
  left: auto;
  right: 0;
  transform: none;
}

/* Keep an open tooltip above the content that follows it (answers fade in, which stacks them) */
.gt-chatbot__message-actions,
.aida-results {
  position: relative;
}

.gt-chatbot__message-actions:is(:hover, :focus-within, :has(.is-open)),
.aida-results:is(:hover, :focus-within, :has(.is-open)) {
  z-index: 2;
}

.aida-tooltip-wrap:hover>.gt-diagram-tooltip,
.aida-tooltip-wrap:focus-within>.gt-diagram-tooltip,
.aida-tooltip-wrap>.gt-diagram-tooltip.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ======================================================================
   BADGE
   <span class="gt-badge gt-badge-discipline">Discipline</span>
   Entity types for the explorer (Figma Tag types):
     type-01  gt-badge-discipline        (Discipline)
     type-02  gt-badge-keyword           (Profile)
     type-03  gt-badge-tripleVocabulary  (Document)
     type-04  aida-badge-type-04           (new, WLP has none)
     type-05  aida-badge-type-05           (new)
   Also: gt-badge-open (mint, Figma "collab"), gt-badge-primary.
   Status badges are new: aida-badge-info, -success, -warn, -error.
   ====================================================================== */
.gt-badge {
  --_content: var(--content-01);
  --_bg: var(--background-gray-01);
  --_border: var(--border-gray-01);
  --_bar: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  font-family: var(--font-text);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-tight);
  color: var(--_content);
  background-color: var(--_bg);
  border: var(--aida-border-width) solid var(--_border);
  border-radius: var(--radius-sm);
}

.gt-badge::before {
  content: "";
  position: absolute;
  top: calc(var(--aida-border-width) * -1);
  bottom: calc(var(--aida-border-width) * -1);
  left: calc(var(--aida-border-width) * -1);
  width: var(--spacing-1);
  background-color: var(--_bar);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.gt-badge-discipline {
  --_content: var(--type-01-content);
  --_bg: var(--type-01-background);
  --_border: var(--type-01-border);
  --_bar: var(--type-01-content);
}

.gt-badge-keyword {
  --_content: var(--type-02-content);
  --_bg: var(--type-02-background);
  --_border: var(--type-02-border);
  --_bar: var(--type-02-content);
}

.gt-badge-tripleVocabulary {
  --_content: var(--type-03-content);
  --_bg: var(--type-03-background);
  --_border: var(--type-03-border);
  --_bar: var(--type-03-content);
}

.aida-badge-type-04 {
  --_content: var(--type-04-content);
  --_bg: var(--type-04-background);
  --_border: var(--type-04-border);
  --_bar: var(--type-04-content);
}

.aida-badge-type-05 {
  --_content: var(--type-05-content);
  --_bg: var(--type-05-background);
  --_border: var(--type-05-border);
  --_bar: var(--type-05-content);
}

.gt-badge-open {
  --_bg: var(--type-collab-background);
  --_border: var(--type-collab-background);
}

.gt-badge-primary {
  --_content: var(--content-inverse);
  --_bg: var(--background-primary);
  --_border: var(--background-primary);
}

.aida-badge-info {
  --_content: var(--content-info);
  --_bg: var(--info-light);
  --_border: var(--info);
}

.aida-badge-success {
  --_content: var(--content-success);
  --_bg: var(--success-light);
  --_border: var(--success);
}

.aida-badge-warn {
  --_content: var(--content-warn);
  --_bg: var(--warn-light);
  --_border: var(--warn);
}

.aida-badge-error {
  --_content: var(--content-error);
  --_bg: var(--error-light);
  --_border: var(--error);
}

/* ======================================================================
   TOAST
   Follows Figma "Toast and callout" (LUMEN WLP UI Kit, node 3506:36065).
   <div class="gt-toast-container aida-toast-info" role="status">
     <div class="aida-toast-content">
       <svg class="aida-toast-icon" aria-hidden="true">...</svg>
       <div class="gt-toast-block">
         <div class="gt-toast-title">Title</div>
         <div class="gt-toast-message">Message</div>
       </div>
       <button class="gt-button gt-button-icon-only gt-button-no-text aida-toast-close" aria-label="Close">...</button>
     </div>
     <div class="aida-toast-actions"><button class="gt-button gt-button-s">My Button</button></div>
   </div>
   Colors (Figma names): (none) = light, aida-toast-dark, aida-toast-info,
                         aida-toast-warning, aida-toast-error
   Callout (no shadow, no close button): add aida-toast-callout
   aida-toast-region is new: a live region fixed to the bottom right.
   ====================================================================== */
.aida-toast-region {
  position: fixed;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.gt-toast-container {
  --_bg: var(--color-white-100);
  --_border: var(--border-gray-01);
  --_text: var(--content-01);
  --_icon: var(--content-success);
  --_close: var(--content-03);
  --_action: var(--content-primary);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  width: var(--aida-toast-width);
  max-width: 100%;
  padding: var(--layout-spacing-md);
  color: var(--_text);
  background-color: var(--_bg);
  border: var(--aida-border-width) solid var(--_border);
  border-radius: var(--radius-md);
  box-shadow: var(--aida-shadow-lg);
}

.aida-toast-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}

.gt-toast-container .gt-toast-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: 0;
}

.gt-toast-container .gt-toast-title {
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--_text);
}

.gt-toast-container .gt-toast-message {
  font-size: var(--size-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--_text);
}

.aida-toast-icon {
  flex: none;
  width: var(--spacing-5);
  height: var(--spacing-5);
  color: var(--_icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gt-toast-container .aida-toast-close {
  --_fg: var(--_close);
  --_fg-hover: var(--_close);
  --_fg-active: var(--_close);
  flex: none;
  width: var(--spacing-5);
  min-height: var(--spacing-5);
}

.gt-toast-container .aida-toast-close svg {
  width: calc(var(--spacing-2) + var(--spacing-1));
  height: calc(var(--spacing-2) + var(--spacing-1));
}

.aida-toast-actions {
  display: flex;
  justify-content: flex-end;
}

.aida-toast-actions .gt-button {
  --_fg: var(--_action);
}

.aida-toast-dark {
  --_bg: var(--background-gray-06);
  --_text: var(--content-inverse);
  --_icon: var(--content-inverse);
  --_close: var(--content-inverse);
}

.aida-toast-info {
  --_bg: var(--info-light);
  --_border: var(--border-gray-02);
  --_icon: var(--content-info);
  --_action: var(--content-info);
}

.aida-toast-warning {
  --_bg: var(--warn-light);
  --_icon: var(--content-warn);
}

.aida-toast-error {
  --_bg: var(--error-light);
  --_icon: var(--content-error);
}

.aida-toast-callout {
  box-shadow: none;
}

/* ======================================================================
   LOADER
   <div class="gt-loader gt-loader-spinner gt-loader-medium"><div class="gt-loader__content"></div></div>
   Types: gt-loader-dots (WLP default), gt-loader-spinner
   Sizes: gt-loader-small, gt-loader-medium, gt-loader-large
   Add role="status" and a .aida-sr-only label where it stands alone.
   ====================================================================== */
.gt-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.gt-loader-spinner .gt-loader__content {
  width: var(--spacing-5);
  height: var(--spacing-5);
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--button-primary);
  border-radius: var(--radius-full);
  animation: gt-spin 1s linear infinite;
}

.gt-loader-spinner.gt-loader-small .gt-loader__content {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-width: var(--aida-focus-ring);
}

.gt-loader-spinner.gt-loader-large .gt-loader__content {
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-width: 4px;
}

.gt-loader-dots {
  padding: 0 var(--spacing-3);
}

.gt-loader-dots .gt-loader__content,
.gt-loader-dots .gt-loader__content::before,
.gt-loader-dots .gt-loader__content::after {
  width: var(--spacing-2);
  height: var(--spacing-2);
  background-color: var(--content-01);
  border-radius: var(--radius-full);
  animation: gt-dot-flashing 1.2s infinite alternate linear;
}

.gt-loader-dots .gt-loader__content {
  position: relative;
  animation-delay: 0.4s;
}

.gt-loader-dots .gt-loader__content::before,
.gt-loader-dots .gt-loader__content::after {
  content: "";
  position: absolute;
  top: 0;
}

.gt-loader-dots .gt-loader__content::before {
  left: calc(var(--spacing-3) * -1);
  animation-delay: 0s;
}

.gt-loader-dots .gt-loader__content::after {
  left: var(--spacing-3);
  animation-delay: 0.8s;
}

.gt-loader-dots.gt-loader-small .gt-loader__content,
.gt-loader-dots.gt-loader-small .gt-loader__content::before,
.gt-loader-dots.gt-loader-small .gt-loader__content::after {
  width: var(--spacing-1);
  height: var(--spacing-1);
}

.gt-loader-dots.gt-loader-small .gt-loader__content::before {
  left: calc(var(--spacing-2) * -1);
}

.gt-loader-dots.gt-loader-small .gt-loader__content::after {
  left: var(--spacing-2);
}

@keyframes gt-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gt-dot-flashing {
  0% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-loader__content {
    animation-duration: 3s !important;
  }
}

/* ======================================================================
   DIVIDER
   Figma draws dividers as their own line (footer "Border", mobile menu "divider"),
   not as a border on a neighbour. 1px line, full width. Space around it comes from the
   parent's gap, so there is no margin (WLP's .gt-divider has a 40px margin).
   <hr class="gt-divider">                 Border/border-gray-01 (header menu)
   <hr class="gt-divider aida-divider-strong">  Border/border-gray-03 (footer; Figma uses the older gray-04 style, #888891)
   ====================================================================== */
.gt-divider {
  display: block;
  width: 100%;
  height: var(--aida-border-width);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--border-gray-01);
  flex: none;
}

.aida-divider-strong {
  background-color: var(--border-gray-01);
}

/* ======================================================================
   HEADER
   Desktop: the header on the AIDA landing page (White-label platform UX/UI
   design, 3404:73149): logo, nav, language, search, AIDA button, user menu.
   Mobile: LUMEN WLP UI Kit "Header", Device=Mobile (3506:18869, 3506:18880).
   Search, AIDA button and user menu sit in .gt-header__tools after the language picker:
     <button class="gt-header__search-button" aria-label="Search"> icon </button>
     <button class="aida-header-button" aria-label="Open AIDA"> sparkle </button>
     <div class="gt-header__active-user"><button class="gt-menu-button" aria-expanded="false">Name <svg/></button></div>

   <header class="gt-header" id="header">
     <div class="gt-header__top gt-header__mobile">  language picker, mobile only
     <div class="gt-header__wrapper">
       <button class="gt-header__mobile-menu-toggle">      (mobile only)
       <div class="gt-header__logo"><a href="/">logo</a></div>
       <div class="gt-header__content">
         <button class="gt-header__mobile-menu-close">      (mobile only)
         <ul class="gt-header__nav">
           <li class="gt-nav__element"><a class="is-active" aria-current="page" href="#">
             <span class="gt-nav__element-text" data-text="Explore">Explore</span></a></li>
         </ul>
         <div class="gt-header__tools"> language picker
   The header is one block above the page, wider than the page content (as in WLP).
   At 1024px and below the nav folds into a full-screen menu (WLP's mobile header breakpoint).
   Add class is-mobile-nav-visible to .gt-header to show the menu.
   ====================================================================== */
/* Figma (LUMEN): white, Card-shadow-sm, no bottom border */
.gt-header {
  background-color: var(--color-white-100);
  box-shadow: var(--aida-shadow-sm);
  z-index: 5;
}

.gt-header__wrapper {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: var(--layout-spacing-lg) var(--layout-margin-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-spacing-lg);
}

.gt-header__logo a {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--content-01);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.gt-header__logo img {
  display: block;
  height: var(--aida-header-logo-height);
  width: auto;
}

.gt-header__content>.gt-divider {
  display: none;
}

/* only used in the mobile menu */
.gt-header__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--layout-spacing-lg);
}

.gt-header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav item: Figma "Nav-item" (Default 500, Hover and Active 600 underlined) */
.gt-nav__element {
  list-style: none;
}

.gt-nav__element>a {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: var(--layout-spacing-xs);
  padding: var(--layout-spacing-sm) var(--layout-spacing-md);
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-heading);
  color: var(--link-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* the hidden bold copy keeps the item the same width in every state */
.gt-nav__element-text::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--weight-semibold);
  user-select: none;
  pointer-events: none;
}

.gt-nav__element>a:hover,
.gt-nav__element>a.is-hover,
.gt-nav__element>a.is-active {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 8px;
  color: var(--link-primary);
}

/* Language picker: Figma "lang" (globe + code) */
.gt-header__language-options {
  display: flex;
}

.gt-header__language-options__selected-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-1);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.gt-header__language-options__selected-option:hover span {
  text-decoration: underline;
}

.gt-header__language-options__selected-option svg {
  flex: none;
  width: var(--aida-lang-icon-size);
  height: var(--aida-lang-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gt-header__language-options__dropdown-menu {
  top: 100%;
  margin-top: var(--spacing-2);
}

/* Tools: language, search, AIDA, user. Figma: 24 between groups, 16 between buttons */
.gt-header__tools {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-md);
}

/* Search: Figma Button "Default, Icon only, M", round. WLP .gt-header__search-button */
.gt-header__search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--aida-button-height-m);
  height: var(--aida-button-height-m);
  margin: 0;
  padding: 0;
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-02);
  border-radius: var(--radius-full);
  color: var(--content-02);
  cursor: pointer;
  transition: border-color var(--aida-transition);
}

.gt-header__search-button:hover,
.gt-header__search-button.is-hover {
  border-color: var(--border-gray-04);
}

.gt-header__search-button svg {
  width: var(--aida-icon-size-m);
  height: var(--aida-icon-size-m);
}

/* AIDA entry point (new): Figma "floating button", 40px round, dark green with the
   orange sparkle. The radial fill is a gradient in Figma; brand-dark is the token for it. */
.aida-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--aida-button-height-m);
  height: var(--aida-button-height-m);
  margin: 0;
  padding: 0;
  background-color: var(--background-brand-dark);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.aida-header-button img,
.aida-header-button svg {
  width: var(--aida-sparkle-size);
  height: auto;
}

/* User menu: Figma "User dropdown", pill, border-gray-01, Body text + chevron.
   WLP .gt-header__active-user .gt-menu-button */
.gt-header__active-user {
  position: relative;
}

.gt-header__active-user .gt-menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  height: var(--aida-button-height-m);
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-full);
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--content-01);
  cursor: pointer;
  transition: border-color var(--aida-transition);
}

.gt-header__active-user .gt-menu-button:hover,
.gt-header__active-user .gt-menu-button.is-hover {
  border-color: var(--border-gray-04);
}

.gt-header__active-user .gt-menu-button svg {
  width: var(--aida-icon-size-s);
  height: var(--aida-icon-size-s);
  transition: transform var(--aida-transition);
}

.gt-header__active-user.is-open .gt-menu-button svg {
  transform: rotate(180deg);
}

/* Mobile bar and menu */
.gt-header__top,
.gt-header__mobile {
  display: none;
}

.gt-header__mobile-menu-toggle,
.gt-header__mobile-menu-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--aida-menu-button-size);
  height: var(--aida-menu-button-size);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--content-01);
}

.gt-header__mobile-menu-toggle svg,
.gt-header__mobile-menu-close svg {
  width: var(--aida-menu-icon-size);
  height: var(--aida-menu-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aida-no-scroll {
  overflow: hidden;
}

/* 1024px is WLP's mobile header breakpoint ($breakpoint-desktop-small; a media query cannot read a variable) */
@media (max-width: 1024px) {

  /* the wide Lumen / EOSC logo shrinks to fit next to the menu button */
  .gt-header__logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .gt-header__logo img {
    max-width: 100%;
    height: auto;
    max-height: var(--aida-header-logo-height-mobile);
  }

  .gt-header__top {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--layout-margin-base);
    border-bottom: var(--aida-border-width) solid var(--border-gray-01);
  }

  .gt-header__top .gt-header__language-options__selected-option {
    font-size: var(--size-body-sm);
    padding: 0;
  }

  .gt-header__top .gt-header__language-options__selected-option svg {
    width: var(--aida-lang-icon-size-s);
    height: var(--aida-lang-icon-size-s);
  }

  .gt-header__wrapper {
    padding: var(--spacing-3) var(--layout-margin-base);
    justify-content: flex-start;
    gap: var(--spacing-2);
  }

  .gt-header__logo img {
    height: var(--aida-header-logo-height-mobile);
  }

  .gt-header__mobile-menu-toggle {
    display: flex;
  }

  .gt-header__content {
    display: none;
  }

  .gt-header.is-mobile-nav-visible .gt-header__top {
    display: none;
  }

  .gt-header.is-mobile-nav-visible .gt-header__content {
    position: fixed;
    inset: 0;
    z-index: var(--aida-z-header);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-5);
    padding: var(--spacing-4);
    overflow-y: auto;
    background-color: var(--color-white-100);
  }

  .gt-header__mobile-menu-close {
    display: flex;
    align-self: flex-end;
  }

  .gt-header__content>.gt-divider {
    display: block;
  }

  .gt-header.is-mobile-nav-visible .gt-header__nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-5);
  }

  .gt-header .gt-nav__element>a {
    padding: var(--spacing-2) var(--spacing-3);
  }

  .gt-header__content .gt-header__language-options__selected-option {
    font-size: var(--size-body-sm);
  }

  .gt-header__top .gt-dropdown-panel-left,
  .gt-header__content .gt-dropdown-panel-left {
    right: auto;
    left: 0;
  }

  /* the picker sits at the left edge here */
}

/* ======================================================================
   DROPDOWN
   Figma "Basics / Dropdown" (557:70572) and "Basics / DropdownItem" (505:96396).
   <div class="gt-dropdown-panel-wrapper">                    position anchor
     <button aria-expanded="false">trigger</button>
     <div class="gt-dropdown-panel gt-dropdown-panel-left"> opens to the left of the anchor (right edge aligned)
                                           gt-dropdown-panel-right  left edge aligned
                                           add .is-open to show
       <ul><li class="gt-dropdown-item">
         <a class="selected-item" href="#">          or <button>; .disabled for a disabled item
           <div class="gt-dropdown-item-text-container" data-text="Label"><div class="gt-dropdown-item-text">Label</div></div>
   ====================================================================== */
.gt-dropdown-panel-wrapper {
  position: relative;
}

.gt-dropdown-panel {
  position: absolute;
  z-index: var(--aida-z-header);
  min-width: var(--aida-dropdown-min-width);
  padding: var(--spacing-2) 0;
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
  box-shadow: var(--aida-shadow-lg);
  transform: scaleY(0);
  transform-origin: top;
  visibility: hidden;
  transition: transform var(--aida-transition) ease-in-out, visibility var(--aida-transition);
}

.gt-dropdown-panel-right {
  left: 0;
}

.gt-dropdown-panel-left {
  right: 0;
}

.gt-dropdown-panel-top {
  top: auto;
  bottom: 100%;
  transform-origin: bottom;
}

.gt-dropdown-panel.is-open {
  transform: scaleY(1);
  visibility: visible;
}

.gt-dropdown-panel>ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gt-dropdown-item>a,
.gt-dropdown-item>button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--content-01);
  transition: background-color var(--aida-transition), color var(--aida-transition);
}

.gt-dropdown-item>a.selected-item,
.gt-dropdown-item>button.selected-item,
.gt-dropdown-item>a:hover,
.gt-dropdown-item>button:hover {
  font-weight: var(--weight-semibold);
  color: var(--content-primary);
}

.gt-dropdown-item>a:not(.selected-item):hover,
.gt-dropdown-item>button:not(.selected-item):hover,
.gt-dropdown-item>a.is-hover {
  background-color: var(--background-gray-01);
}

.gt-dropdown-item>a.disabled,
.gt-dropdown-item>button.disabled {
  opacity: var(--aida-disabled-opacity);
  pointer-events: none;
}

.gt-dropdown-item-text {
  width: max-content;
}

.gt-dropdown-item-text-container::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* ======================================================================
   FOOTER
   Figma "Footer" (LUMEN WLP UI Kit, component set 5026:2792; Desktop 5026:2728,
   Mobile 5026:2793). Class names and markup from WLP organisms/_footer.scss.
   Gray band, top border. The two groups wrap on their own (Figma min width 328),
   so there is no media query.
   <footer class="gt-footer">
     <div class="gt-footer__wrapper">
       <div class="gt-widget-address">
         <a class="gt-footer__logo" href="/"><img src="public/logo-lumen-eosc.svg" alt="Lumen and EOSC"></a>
         <div class="gt-footer__about">
           <div class="gt-footer__brand-row"><p class="gt-footer__brand">White-label Platform</p><span class="gt-footer__beta">Beta</span></div>
           <p class="gt-address">Your single access point to …</p>
         </div>
       </div>
       <div class="gt-footer__columns">
         <div class="gt-widget-link">
           <p class="gt-footer__title">General information</p>
           <div class="gt-footer__links"><a href="#">…</a> <a href="#">…</a></div>
         </div>
       </div>
     </div>
     <div class="gt-footer__bottom-bar"><div class="gt-footer__bottom-bar-wrapper">Copyright © …</div></div>
   </footer>
   gt-footer__about wraps the platform name and the description (Figma "Frame 8").
   It is new here: WLP puts them straight inside gt-widget-address.
   ====================================================================== */
.gt-footer {
  background-color: var(--background-gray-02);
  border-top: var(--aida-border-width) solid var(--border-gray-02);
  color: var(--content-01);
}

.gt-footer p {
  margin: 0;
}

/* Figma: padding 64 64 0 64; the two groups 144 apart, wrapping */
.gt-footer__wrapper {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: var(--layout-spacing-5xl) var(--layout-margin-base) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-spacing-3xl) var(--layout-utility);
}

/* Left group: logo, platform name, description. Figma 328 to 453 wide, gap 48 */
.gt-widget-address {
  flex: 1 1 var(--aida-footer-col-min);
  max-width: var(--aida-footer-address-max);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-spacing-3xl);
}

.gt-footer__logo {
  display: inline-block;
  border-radius: var(--radius-sm);
}

.gt-footer__logo img {
  display: block;
  height: var(--aida-footer-logo-height);
  width: auto;
  max-width: 100%;
}

.gt-footer__about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.gt-footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

/* Figma: Space Grotesk Medium 20, content-03 (no text style in Figma) */
.gt-footer__brand {
  font-family: var(--font-display);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-heading);
  color: var(--content-03);
}

/* Figma Tag / Badge "New sm": a micro label. Its fill and size are not tokens. */
.gt-footer__beta {
  display: inline-flex;
  align-items: center;
  padding: 0 3px 1px;
  border-radius: var(--radius-xs);
  background-color: var(--aida-beta-background);
  color: var(--content-03);
  font-family: var(--font-text);
  font-size: var(--aida-beta-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
}

/* Figma: Body text */
.gt-address {
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

/* Right group: link columns, gap 32, aligned right */
.gt-footer__columns {
  flex: 1 1 var(--aida-footer-col-min);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--layout-spacing-xl);
}

.gt-widget-link {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--aida-footer-links-max);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Figma: Body text bold */
.gt-footer__title {
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.gt-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
}

/* Figma "link", size s: Small text, link-primary, underlined */
.gt-footer__links a,
.gt-footer__link-button {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-text);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  text-align: left;
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.gt-footer__links a:hover,
.gt-footer__link-button:hover {
  color: var(--link-primary-hover);
  text-decoration: none;
}

/* Divider and copyright. Figma: 32 gap above, 32 padding below, Small text, content-03.
   Figma draws the line in the old #888891; border-gray-03 is the nearest token. */
.gt-footer__bottom-bar {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: var(--layout-spacing-xl) var(--layout-margin-base);
}

.gt-footer__bottom-bar-wrapper {
  padding-top: var(--layout-spacing-xl);
  border-top: var(--aida-border-width) solid var(--border-gray-03);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

/* ######################################################################
   CHAT COMPONENTS (AIDA)
   Class names from the WLP chat styles where they exist
   (src/styles/atoms/_chatbot-prompt-chip, template/_chatbot-input-box,
   template/_chatbot-messages, template/_chatbox-empty-state,
   molecules/_alert-banner). New parts use aida-*.
   Look: LUMEN WLP UI Kit "AI and Chatbot" page and the AIDA frames in
   "White-label platform UX/UI design" (3404:73148 landing, 3404:73201 answer
   with cards, 3423:63175 follow-up with slim rows).
   ###################################################################### */

/* ======================================================================
   AIDA TITLE BAND (new)
   Figma "chatbot header" under the main header: dark green band with the
   AIDA logo and its name. WLP .gt-chatbot-header is a different thing
   (Cogent's own fixed header), so this is new.
   <div class="aida-title-band"><div class="aida-title-band__logo"> logo
     <span class="aida-title-band__title">AI Discovery Assistance</span></div></div>
   ====================================================================== */
.aida-title-band {
  background-color: var(--background-brand-dark);
  border-bottom: var(--aida-border-width) solid var(--border-gray-02);
}

.aida-title-band__logo {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: var(--layout-spacing-md) var(--layout-margin-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aida-band-gap);
}

.aida-title-band__logo img,
.aida-title-band__logo svg {
  width: var(--aida-avatar-size);
  height: auto;
}

.aida-title-band__title {
  font-family: var(--font-display);
  font-size: var(--aida-band-title-size);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  color: var(--aida-band-title-color);
}

/* ======================================================================
   ANNOUNCEMENT BAR
   Figma "Announcement bar" (Property 1=info). WLP molecules/_alert-banner.
   <div class="gt-alert-banner gt-alert-banner--info" role="status">
     <div class="gt-alert-banner__container"><div class="gt-alert-banner__content">
       <span class="gt-alert-banner__content-icon"> icon </span>
       <div class="gt-alert-banner__content-main">Text <strong>bold part</strong></div>
     </div></div>
     <div class="gt-alert-banner__close"><button class="gt-button gt-button-icon-only gt-button-no-text gt-alert-banner__close-button" aria-label="Close"> x </button></div>
   </div>
   ====================================================================== */
.gt-alert-banner {
  position: relative;
  width: 100%;
  background-color: var(--info-light);
  border-bottom: var(--aida-border-width) solid var(--border-gray-02);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.gt-alert-banner--closed {
  display: none;
}

.gt-alert-banner--success {
  background-color: var(--success-light);
}

.gt-alert-banner--warning {
  background-color: var(--warn-light);
}

.gt-alert-banner--error {
  background-color: var(--error-light);
}

.gt-alert-banner__container {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
}

.gt-alert-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--layout-spacing-md) calc(var(--layout-margin-base) + var(--layout-spacing-xl)) var(--layout-spacing-md) var(--layout-margin-base);
}

.gt-alert-banner__content-icon {
  flex: none;
  display: inline-flex;
  color: var(--content-info);
}

.gt-alert-banner--success .gt-alert-banner__content-icon {
  color: var(--content-success);
}

.gt-alert-banner--warning .gt-alert-banner__content-icon {
  color: var(--content-warn);
}

.gt-alert-banner--error .gt-alert-banner__content-icon {
  color: var(--content-error);
}

.gt-alert-banner__content-icon svg {
  width: var(--aida-icon-size-m);
  height: var(--aida-icon-size-m);
}

.gt-alert-banner__content-main strong {
  font-weight: var(--weight-semibold);
}

.gt-alert-banner__content-main a {
  color: var(--link-primary);
  text-decoration: underline;
}

.gt-alert-banner__close .gt-button {
  --_fg: var(--content-03);
  --_fg-hover: var(--content-01);
}

.gt-alert-banner__close {
  position: absolute;
  top: 50%;
  right: var(--layout-margin-base);
  transform: translateY(-50%);
  color: var(--content-03);
}

/* ======================================================================
   EMPTY CHAT (landing)
   Figma AIDA landing body (3404:73157). WLP template/_chatbox-empty-state.
   <section class="gt-chatbox-empty-state">
     <div class="gt-chatbox-empty-state__intro">
       <h1 class="gt-title-1 gt-chatbox-empty-state__title">What would you like to find?</h1>
       <p class="gt-chatbox-empty-state__description">…</p>
     </div>
     chat input (below), then the prompt chips
   </section>
   gt-chatbox-empty-state__intro is new: Figma groups title and text (gap 16).
   ====================================================================== */
.gt-chatbox-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-spacing-3xl);
  padding: var(--aida-landing-padding) var(--layout-margin-base);
  background-color: var(--color-white-100);
}

.gt-chatbox-empty-state__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-spacing-md);
}

.gt-chatbox-empty-state__title {
  text-align: center;
}

/* Figma: Small text, centred */
.gt-chatbox-empty-state__description {
  max-width: var(--layout-content-max-base);
  margin: 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  text-align: center;
  color: var(--content-01);
}

.gt-chatbox-empty-state .gt-chatbot-input-container {
  width: 100%;
  max-width: var(--aida-input-max);
}

/* ======================================================================
   CHAT INPUT
   Figma "chat text area" (Default, Filled, Empty, Disabled).
   WLP template/_chatbot-input-box.
   <div class="gt-chatbot-input-container">
     <form class="gt-chatbot-input">
       <div class="gt-chatbot-input__main">
         <label class="aida-sr-only" for="q">Your question</label>
         <textarea id="q" class="gt-textarea" rows="1" placeholder="Describe what you're looking for"></textarea>
       </div>
       <button class="gt-button gt-button-cta gt-button-no-text" aria-label="Send"> arrow </button>
     </form>
   </div>
   Disabled: add gt-chatbot-input-container--disabled and disable the textarea and button.
   ====================================================================== */
.gt-chatbot-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.gt-chatbot-input {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-2xl);
  padding: var(--spacing-4);
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
  box-shadow: var(--aida-shadow-sm);
}

.gt-chatbot-input:focus-within {
  border-color: var(--border-primary);
}

.gt-chatbot-input-container--disabled .gt-chatbot-input {
  background-color: var(--background-gray-01);
  box-shadow: none;
}

.gt-chatbot-input__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: var(--aida-button-height-m);
  padding: var(--aida-input-padding-y) var(--spacing-3);
}

/* Figma: Body text, content-01; placeholder content-placeholder */
.gt-textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  field-sizing: content;
  max-height: var(--aida-textarea-max);
  overflow-y: auto;
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.gt-textarea::placeholder {
  color: var(--content-placeholder);
  opacity: 1;
}

.gt-textarea:disabled::placeholder {
  color: var(--content-disabled);
}

.gt-chatbot-input .gt-button-cta {
  flex: none;
  width: var(--aida-button-height-m);
  height: var(--aida-button-height-m);
}

/* ======================================================================
   PROMPT CHIPS
   Figma "prompt chip" (default, hover, disabled) and the "Try these prompts:"
   block on the landing page. WLP atoms/_chatbot-prompt-chip.
   Revived for AIDA (deprecated for Cogent). Also used for closing suggestions.
   <div class="gt-chatbot-prompt-chip__block">
     <h2 class="gt-chatbot-prompt-chip__heading">Try these prompts:</h2>
     <div class="gt-chatbot-prompt-chip__container">
       <button class="gt-chatbot-prompt-chip">Open access articles about …</button>
     </div>
   </div>
   gt-chatbot-prompt-chip__block and __heading are new.
   ====================================================================== */
.gt-chatbot-prompt-chip__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-spacing-md);
  max-width: var(--layout-content-max-lg);
}

/* Figma: H4, content-primary */
.gt-chatbot-prompt-chip__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-primary);
}

.gt-chatbot-prompt-chip__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
}

/* Figma: 26 high, radius 16, border-gray-02, background-gray-01,
   Small button text in content-primary. Hover: border-primary. */
.gt-chatbot-prompt-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--aida-chip-height);
  margin: 0;
  padding: 0 var(--aida-chip-padding-end) 0 var(--spacing-3);
  background-color: var(--type-05-background);
  border: var(--aida-border-width) solid var(--type-05-border);
  border-radius: var(--radius-xl);
  font-family: var(--font-text);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-tight);
  text-align: left;
  color: var(--type-05-content);
  cursor: pointer;
  transition: border-color var(--aida-transition);
}

.gt-chatbot-prompt-chip:hover:not(.gt-chatbot-prompt-chip--disabled),
.gt-chatbot-prompt-chip.is-hover {
  border-color: var(--border-primary);
}

.gt-chatbot-prompt-chip--disabled,
.gt-chatbot-prompt-chip:disabled {
  background-color: transparent;
  border-color: var(--border-gray-01);
  color: var(--content-disabled);
  cursor: default;
}

/* ======================================================================
   MESSAGES
   Figma "user-prompt", "ai-response" (Default, Typing) and the AIDA answer
   frames. WLP template/_chatbot-messages.
   <div class="gt-chatbot__messages">
     <div class="gt-chatbot__message message-out"><div>How do …?</div></div>
     <div class="gt-chatbot__message message-in">
       <span class="aida-message__avatar" aria-hidden="true"> sparkle </span>
       <div class="aida-message__body"> tool workflow, answer, results, actions, disclaimer </div>
     </div>
     <div class="gt-chatbot__message message-in gt-chatbot__message-loader">
       <span class="aida-message__avatar"> sparkle </span>
       <div class="aida-message__typing"> dots <span>Thinking…</span></div>
     </div>
   </div>
   WLP builds the inner parts with React module classes, so the avatar, body
   and typing parts are new here (aida-message__*).
   ====================================================================== */
.gt-chatbot__messages {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-xl);
  max-width: var(--aida-message-max);
  margin: 0 auto;
  padding: var(--layout-spacing-xl) 0;
}

.gt-chatbot__message {
  display: flex;
}

/* User message. UI Kit "user-prompt": background-primary-light, radius 16 except
   top right, Body text. (The AIDA frames use background-gray-01: see the flags.) */
.gt-chatbot__message.message-out {
  justify-content: flex-end;
}

.gt-chatbot__message.message-out>div {
  max-width: var(--aida-bubble-max);
  padding: var(--spacing-3);
  background-color: var(--background-primary-light);
  border-radius: var(--radius-xl) 0 var(--radius-xl) var(--radius-xl);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

/* AIDA message: avatar, then a column (gap 16) */
.gt-chatbot__message.message-in,
.gt-chatbot__message.message-notification {
  align-items: flex-start;
  gap: var(--spacing-4);
}

.aida-message__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aida-avatar-size);
  height: var(--aida-avatar-size);
  background-color: var(--background-brand-dark);
  border-radius: var(--radius-full);
}

.aida-message__avatar img,
.aida-message__avatar svg {
  width: var(--aida-sparkle-size);
  height: auto;
}

.aida-message__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Typing: Figma "Status=Typing": dots and "I'm thinking..." in Body text */
.aida-message__typing {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--aida-avatar-size);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.aida-message__typing-dots {
  display: inline-flex;
  gap: var(--spacing-1);
}

.aida-message__typing-dots span {
  width: var(--aida-dot-size);
  height: var(--aida-dot-size);
  border-radius: var(--radius-full);
  background-color: var(--content-04);
  animation: aida-typing 1.2s infinite ease-in-out;
}

.aida-message__typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.aida-message__typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes aida-typing {

  0%,
  80%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aida-message__typing-dots span {
    animation: none;
    opacity: 0.6;
  }
}

/* Actions under an answer: copy, save, thumbs up and down.
   Figma "actions": chatbot icon buttons, gap 8, a thin line before the thumbs. */
.gt-chatbot__message-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Disclaimer under an answer. Figma: 14px text under the actions. */
.gt-chatbot-input__feedback {
  margin: 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

.gt-chatbot-input__feedback a {
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gt-chatbot-input__feedback a:hover {
  text-decoration: none;
}

/* ======================================================================
   TOOL WORKFLOW (new)
   Figma "tool-workflow" (expanded, collapsed) and "workflow-step".
   What AIDA did: a short status line (preamble), each search with its name,
   the number of passes and the queries.
   <div class="aida-tool-workflow">
     <button class="aida-tool-workflow__toggle" aria-expanded="true">Tool workflow <svg/></button>
     <ol class="aida-tool-workflow__steps">
       <li class="aida-tool-workflow__step">
         <p class="aida-tool-workflow__note">I'll search the catalogue for …</p>
         <p class="aida-tool-workflow__tool"><svg/> <span class="aida-tool-workflow__name">Search documents</span>
           <span aria-hidden="true">·</span> <span class="aida-tool-workflow__count">2 passes</span></p>
         <p class="aida-tool-workflow__note">query text</p>
       </li>
     </ol>
   </div>
   ====================================================================== */
.aida-tool-workflow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Figma: Small text bold, content-placeholder, chevron 16 */
.aida-tool-workflow__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-text);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--content-03);
  cursor: pointer;
}

.aida-tool-workflow__toggle svg {
  width: var(--aida-icon-size-s);
  height: var(--aida-icon-size-s);
  transition: transform var(--aida-transition);
}

.aida-tool-workflow__toggle[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

.aida-tool-workflow__toggle[aria-expanded="false"]+.aida-tool-workflow__steps {
  display: none;
}

.aida-tool-workflow__steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0 0 var(--spacing-2);
  list-style: none;
}

/* A thin divider between steps. Figma: 12 high, 8 in from the left */
.aida-tool-workflow__step+.aida-tool-workflow__step::before {
  content: "";
  display: block;
  width: var(--aida-border-width);
  height: var(--spacing-3);
  margin: 0 0 var(--spacing-1) var(--spacing-2);
  background-color: var(--border-gray-01);
}

.aida-tool-workflow__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-top: var(--spacing-1);
  color: var(--content-04);
}

.aida-tool-workflow__step p {
  margin: 0;
}

/* Preamble lines and queries. Figma: Xsmall text italic, content-04 */
.aida-tool-workflow__note {
  font-size: var(--size-body-xs);
  font-style: italic;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-xs);
}

.aida-tool-workflow__tool {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
}

.aida-tool-workflow__tool svg {
  width: var(--aida-icon-size-s);
  height: var(--aida-icon-size-s);
}

/* Figma: Xsmall text medium uppercase */
.aida-tool-workflow__name {
  font-size: var(--size-body-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-xs);
  text-transform: uppercase;
}

/* Figma: Xsmall text medium */
.aida-tool-workflow__count {
  font-size: var(--size-body-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-xs);
}

/* ======================================================================
   ANSWER TEXT (new)
   AIDA writes markdown. The front end renders it inside this wrapper.
   Figma: Body text; group headings H3; titles H4. Two heading levels at most.
   <div class="aida-answer"> <p>…</p> <h3>…</h3> <ul><li>…</li></ul> </div>
   ====================================================================== */
.aida-answer {
  max-width: var(--layout-content-max-xl);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

/* Space between blocks. :not(:first-child) keeps this rule stronger than the p/ul/ol reset below */
.aida-answer>:not(:first-child) {
  margin-top: var(--spacing-3);
}

.aida-answer p,
.aida-answer ul,
.aida-answer ol {
  margin-top: 0;
  margin-bottom: 0;
}

/* The first block never adds space above itself: the parent's gap does that */
.aida-answer>:first-child {
  margin-top: 0;
}

.aida-answer h2,
.aida-answer h3 {
  margin: var(--layout-spacing-lg) 0 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.aida-answer h4 {
  margin: var(--layout-spacing-md) 0 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
}

.aida-answer ul,
.aida-answer ol {
  padding-left: var(--layout-spacing-lg);
}

/* Headings keep more space above them than paragraphs */
.aida-answer>h2:not(:first-child),
.aida-answer>h3:not(:first-child) {
  margin-top: var(--layout-spacing-lg);
}

.aida-answer>h4:not(:first-child) {
  margin-top: var(--layout-spacing-md);
}

.aida-answer li+li {
  margin-top: var(--spacing-1);
}

.aida-answer strong {
  font-weight: var(--weight-semibold);
}

.aida-answer a {
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aida-answer a:hover {
  color: var(--link-primary-hover);
  text-decoration: none;
}

.aida-answer code,
.aida-code {
  font-family: var(--font-mono);
  font-size: var(--size-body-xs);
  padding: 0 var(--spacing-1);
  background-color: var(--type-04-background);
  border-radius: var(--radius-sm);
}

/* ======================================================================
   RESULTS: GROUP, SLIM ROWS, CARDS (new)
   Figma follow-up frame (3423:63175): group heading (H3), then a gray box of
   slim rows. Each row: title (links to the record page) and a meta line,
   then icon buttons: open full text (only when there is one), save to a collection. Cards (3404:73201) are the alternative: title (H4), meta (Small
   text, content-03), tags, buttons.
   <section class="aida-results">
     <h3 class="aida-results__heading">Open licence <span class="aida-results__count">(9)</span></h3>
     <ul class="aida-results__list">
       <li class="aida-result-row">
         <div class="aida-result-row__text">
           <a class="aida-result-row__title" href="#">Title</a>
           <span class="aida-result-row__meta">2024 · HAL · en</span>
         </div>
         <div class="aida-result-row__actions">
           <span class="aida-tooltip-wrap"><a class="gt-button gt-button-chatbot gt-button-s gt-button-no-text" href="…" aria-label="Open full text of Title"> pdf icon </a>
             <span class="gt-diagram-tooltip aida-tooltip-dark aida-tooltip-below aida-tooltip-end" aria-hidden="true">Open full text</span></span>
           <span class="aida-tooltip-wrap"><button class="gt-button gt-button-chatbot gt-button-s gt-button-no-text" aria-pressed="false" aria-label="Save Title to a collection"> folder icon </button>
             <span class="gt-diagram-tooltip aida-tooltip-dark aida-tooltip-below aida-tooltip-end" aria-hidden="true">Save to a collection</span></span>
         </div>
       </li>
     </ul>
   </section>
   ====================================================================== */
.aida-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.aida-results__heading {
  margin: var(--layout-spacing-md) 0 0 !important;
  font-family: var(--font-display);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.aida-results__count {
  font-weight: var(--weight-medium);
  color: var(--content-04);
}

/* Figma "Results list": padding 16, gap 8, radius 16, background-gray-01, border-gray-01 */
.aida-results__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-4);
  list-style: none;
  background-color: var(--background-gray-01);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-xl);
}

/* Figma "Result row": white, gap 8 */
.aida-result-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.aida-result-row__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Figma: Small text, content-01 */
.aida-result-row__title {
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--link-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.aida-result-row__title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Meta line (year, source, language). Figma mixes styles here; Xsmall, content-04 */
.aida-result-row__meta {
  font-size: var(--size-body-xs);
  line-height: var(--line-height-body);
  color: var(--content-04);
}

.aida-result-row__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Card version. Figma "Resource card": padding 16, gap 16, radius 16 */
.aida-result-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--background-gray-01);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-xl);
}

.aida-result-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
}

/* Figma: H4 */
.aida-result-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

/* Figma: Small text, content-03 */
.aida-result-card__meta {
  margin: 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

.aida-result-card__tags,
.aida-result-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

/* Focus for the chat parts */
.gt-chatbot-prompt-chip:focus-visible,
.aida-tool-workflow__toggle:focus-visible,
.aida-result-row__title:focus-visible,
.aida-answer a:focus-visible,
.gt-alert-banner__content-main a:focus-visible {
  outline: var(--aida-focus-ring) solid transparent;
  box-shadow:
    0 0 0 var(--aida-focus-gap) var(--inner-focus),
    0 0 0 calc(var(--aida-focus-gap) + var(--aida-focus-ring)) var(--focus);
}

/* Mobile */
@media (max-width: 767px) {
  .gt-chatbox-empty-state {
    padding: var(--layout-spacing-3xl) var(--layout-margin-base);
  }

  .gt-chatbot__message.message-in:not(.gt-chatbot__message-loader) {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .gt-chatbot-input {
    gap: var(--spacing-2);
  }

  .gt-alert-banner__content {
    justify-content: flex-start;
  }
}

/* ======================================================================
   CHAT ALERT (new)
   A short message inside the chat: closest-matches notice, errors, out of
   credits. Icon, text, one optional action.
   <div class="aida-chat-alert aida-chat-alert--error" role="alert">
     <span class="aida-chat-alert__icon"> icon </span>
     <div class="aida-chat-alert__text"><p>Your session has expired. …</p></div>
     <div class="aida-chat-alert__actions"><button class="gt-button gt-button-s">Log in</button></div>
   </div>
   Variants: --info (notice), --warning (out of credits), --error.
   ====================================================================== */
.aida-chat-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-2) var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--info-light);
  border: var(--aida-border-width) solid var(--border-gray-02);
  border-radius: var(--radius-lg);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.aida-chat-alert--warning {
  background-color: var(--warn-light);
}

.aida-chat-alert--error {
  background-color: var(--error-light);
}

.aida-chat-alert__icon {
  flex: none;
  display: inline-flex;
  padding-top: 1px;
  color: var(--content-info);
}

.aida-chat-alert--warning .aida-chat-alert__icon {
  color: var(--content-warn);
}

.aida-chat-alert--error .aida-chat-alert__icon {
  color: var(--content-error);
}

.aida-chat-alert__icon svg {
  width: var(--aida-icon-size-m);
  height: var(--aida-icon-size-m);
}

.aida-chat-alert__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.aida-chat-alert__text p {
  margin: 0;
}

.aida-chat-alert__text p+p {
  margin-top: var(--spacing-1);
}

.aida-chat-alert__text strong {
  font-weight: var(--weight-semibold);
}

.aida-chat-alert__text a {
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aida-chat-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* ======================================================================
   INPUT ERROR (new)
   A note under the chat input, for example when the question is too long.
   Add gt-chatbot-input-container--error to the container.
   <p class="aida-input-error" id="q-error">Your question is too long. …</p>
   The textarea gets aria-describedby="q-error" and aria-invalid="true".
   ====================================================================== */
.gt-chatbot-input-container--error .gt-chatbot-input {
  border-color: var(--error);
}

.aida-input-error {
  margin: 0;
  padding: 0 var(--spacing-4);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-error);
}

.aida-chat-alert__text a:focus-visible {
  outline: var(--aida-focus-ring) solid transparent;
  box-shadow:
    0 0 0 var(--aida-focus-gap) var(--inner-focus),
    0 0 0 calc(var(--aida-focus-gap) + var(--aida-focus-ring)) var(--focus);
}

/* ======================================================================
   SEARCH CARD (new, Approach B)
   One search that AIDA prepared: its label, the result count, the top
   results as slim rows, and a link to the full results page.
   Built from the results box (padding 16, radius 16, background-gray-01)
   and the slim result rows above.
   <div class="aida-search-cards">
     <section class="aida-search-card" aria-labelledby="sc1">
       <div class="aida-search-card__head">
         <h3 class="aida-search-card__title" id="sc1">Ontologies in digital humanities</h3>
         <span class="aida-search-card__count">45 results</span>
       </div>
       <ul class="aida-search-card__list"> <li class="aida-result-row">…</li> </ul>
       <div class="aida-search-card__bottom">
         <p class="aida-search-card__note">Showing 15 of the 100 requested. …</p>   (only when over the cap)
         <div class="aida-search-card__foot">
           <a class="gt-button gt-button-cta gt-button-s" href="…" target="_blank" rel="noopener">View all results <svg/></a>
           <button type="button" class="gt-button gt-button-s">Copy search <svg/></button>
         </div>
       </div>
     </section>
   </div>
   ====================================================================== */
.aida-search-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.aida-search-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: var(--background-gray-01);
  border: var(--aida-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-xl);
}

/* Keep a row tooltip above the next card */
.aida-search-card:is(:hover, :focus-within, :has(.is-open)) {
  z-index: 2;
}

.aida-search-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-3);
}

/* Figma H4 */
.aida-search-card__title {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.aida-search-card__count {
  flex: none;
  font-size: var(--size-body-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-body);
  color: var(--content-03);
  white-space: nowrap;
}

.aida-search-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bottom of the card: the optional note, then the buttons */
.aida-search-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
  margin-top: var(--layout-spacing-sm);
}

.aida-search-card__foot {
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  gap: var(--layout-spacing-sm);
}

/* "Related searches": separates the main search (first card) from the others.
   Small text bold, content-03 */
.aida-search-cards__heading {
      margin: var(--layout-spacing-md) 0 0 !important;
    font-family: var(--font-display);
    font-size: var(--size-title-h3);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-heading);
    color: var(--content-01);
}

/* Note when the question asks for more results than the card shows (cap: 15). Xsmall, content-03 */
.aida-search-card__note {
  margin: 0;
  font-size: var(--size-body-xs);
  line-height: var(--line-height-body);
  font-weight: var(--weight-medium);
  color: var(--content-03);
}

/* Search with no results: one line instead of the list and the buttons. Small text, content-03 */
.aida-search-card__empty {
  margin: 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

/* Inline code snippet (Figma text style "Code snippet"), outside the answer text too:
   <code class="aida-code">Open access</code>. Used for the filters in the Approach B
   tool workflow: plain values, not tags, so nothing looks clickable. */
.aida-code {
  font-style: normal;
  color: var(--type-04-content);
}

/* Filters line in the tool workflow (Approach B) */
.aida-tool-workflow__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}
/* ======================================================================
   PAGINATION (new; the Figma kit has none)
   Built from the small default button (gt-button gt-button-s).
   Current page: .active (the button's own pressed look) + aria-current="page".
   Arrows: icon-only small buttons, disabled on the first and last page.
   Gap: a plain "…", not a button.
   <nav class="aida-pagination" aria-label="Pages: Ontologies in the humanities">
     <button class="gt-button gt-button-s gt-button-no-text" aria-label="Previous page" disabled><svg/></button>
     <button class="gt-button gt-button-s active" aria-current="page">1</button>
     <button class="gt-button gt-button-s">2</button>
     <button class="gt-button gt-button-s">3</button>
     <span class="aida-pagination__gap" aria-hidden="true">…</span>
     <button class="gt-button gt-button-s">33</button>
     <button class="gt-button gt-button-s gt-button-no-text" aria-label="Next page"><svg/></button>
   </nav>
   ====================================================================== */
.aida-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
}

/* Page numbers stay square up to two digits, then grow */
.aida-pagination .gt-button.gt-button-s:not(.gt-button-no-text) {
  min-width: var(--aida-button-height-s);
  padding: 0 var(--spacing-2);
  font-variant-numeric: tabular-nums;
}

.aida-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--aida-button-height-s);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-semibold);
  color: var(--content-03);
}

/* ======================================================================
   SEARCH CARD, paged variant (new; the default card above is unchanged)
   Same card, but the bottom holds pagination instead of
   "View all results" and "Copy search". AIDA fetches all results;
   the card shows them 5 at a time.
   <section class="aida-search-card aida-search-card--paged" aria-labelledby="sc1">
     <div class="aida-search-card__head"> title + count </div>
     <ul class="aida-search-card__list"> 5 rows </ul>
     <div class="aida-search-card__bottom">
       <nav class="aida-pagination" …>…</nav>
     </div>
   </section>
   ====================================================================== */
/* A page the prototype has no data for */
.aida-search-card__missing {
  margin: 0;
  padding: var(--spacing-2) 0;
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

/* ======================================================================
   SEARCH CARD, collapsible (new; prototype-new)
   A chevron after the results count shows or hides the card's content.
   The first card of a reply is open, the others start closed.
   Same chevron behaviour as the tool workflow toggle.
   <div class="aida-search-card__head">
     <h3 class="aida-search-card__title" id="sc1">…</h3>
     <span class="aida-search-card__side">
       <span class="aida-search-card__count">162 results</span>
       <button class="gt-button gt-button-icon-only gt-button-no-text aida-search-card__toggle"
         aria-expanded="true" aria-controls="sc1-body" aria-label="Hide results: …"><svg/></button>
     </span>
   </div>
   <div class="aida-search-card__body" id="sc1-body"> list + pagination </div>
   ====================================================================== */
.aida-search-card--collapsible .aida-search-card__head {
  align-items: center;
}

.aida-search-card__side {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: auto;
}

.aida-search-card__toggle svg {
  transition: transform var(--aida-transition);
}

.aida-search-card__toggle[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

.aida-search-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

@media (prefers-reduced-motion: reduce) {
  .aida-search-card__toggle svg {
    transition: none;
  }
}

/* The whole head opens and closes the card; the hover look stays on the chevron */
.aida-search-card--collapsible .aida-search-card__head {
  cursor: pointer;
}

.aida-search-card--collapsible .aida-search-card__head:hover .aida-search-card__toggle:not(:disabled) {
  color: var(--_fg-hover);
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
}

/* ======================================================================
   SAVE TO A COLLECTION (Figma: WLP UI Kit "reading list modal" 3506:57346,
   collection card states 3506:17286). WLP class names kept.
   <div class="modal aida-collection-modal" role="dialog" …>
     <div class="gt-modal-header"><h2 class="gt-title-3">Save to a collection</h2><button … aria-label="Close"></div>
     <div class="gt-modal-content">
       <p class="aida-collection-modal__intro">Please select one of your pre-existing collections:</p>
       <div class="gt-collection-select__items" role="radiogroup">
         <button class="gt-collection-item" role="radio" aria-checked="false">
           <span class="gt-collection-item-title-text">Name</span>
           <span class="gt-collection-item-badge"><span class="aida-collection-count">12</span> documents</span>
         </button>
         (already holds the record: class "added", aria-disabled, badge = <span class="aida-tag-added">Added</span>)
       </div>
       <div class="gt-modal-footer"> Create new collection · Confirm (CTA, disabled until a choice) </div>
     </div>
   </div>
   ====================================================================== */
.modal.aida-collection-modal {
  max-width: 33rem;
  padding: var(--layout-spacing-lg);
  border-radius: var(--radius-lg);
}

.aida-collection-modal .gt-modal-header {
  margin-bottom: var(--layout-spacing-lg);
}

.aida-collection-modal__intro {
  margin: 0 0 var(--layout-spacing-sm);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.aida-collection-modal .gt-collection-select__items {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
  max-height: 16rem;
  overflow-y: auto;
  padding-right: var(--layout-spacing-sm);
}

.aida-collection-modal .gt-modal-footer {
  margin-top: var(--layout-spacing-lg);
}

.gt-collection-item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-spacing-md);
  width: 100%;
  margin: 0;
  padding: var(--layout-spacing-md);
  font: inherit;
  text-align: left;
  background-color: var(--color-white-100);
  border: var(--aida-border-width) solid var(--border-gray-02);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--aida-transition);
}

/* Name: Body text bold, content-01 */
.gt-collection-item-title-text {
  min-width: 0;
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

/* Hover: the name becomes a link */
.gt-collection-item:not(.added):hover .gt-collection-item-title-text {
  color: var(--link-primary);
  text-decoration: underline;
}

/* Selected: dark border */
.gt-collection-item[aria-checked="true"] {
  border-color: var(--border-gray-03);
}

.gt-collection-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Already holds the record: grey name, "Added" tag, not selectable */
.gt-collection-item.added {
  cursor: default;
}

.gt-collection-item.added .gt-collection-item-title-text {
  color: var(--content-03);
}

/* "12 documents": the number in a light primary box, Small text */
.gt-collection-item-badge {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--layout-spacing-xs);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-03);
  white-space: nowrap;
}

.aida-collection-count {
  min-width: 1.5rem;
  padding: 0 var(--layout-spacing-xs);
  text-align: center;
  color: var(--link-primary);
  background-color: var(--background-primary-light);
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}

.aida-tag-added {
  padding: 0 var(--layout-spacing-sm);
  color: var(--content-02);
  background-color: var(--type-collab-background);
  border-radius: var(--radius-xs);
}

/* ======================================================================
   MODAL WITH IMAGE (new variant)
   An image slot across the top (16:9, edge to edge), then the usual
   title, text and footer. The close button sits on the image.
   <div class="modal aida-modal-media" role="dialog" aria-labelledby="…">
     <img class="aida-modal-media__image" src="public/images/…" alt="">
     <button class="gt-button gt-button-s gt-button-no-text aida-modal-media__close" aria-label="Close"><svg/></button>
     <div class="aida-modal-media__body">
       <h2 class="gt-title-3">…</h2>
       <div class="aida-modal-media__text"><p>…</p><p>…</p></div>
       <div class="gt-modal-footer"> default button · CTA </div>
     </div>
   </div>
   ====================================================================== */
.modal.aida-modal-media {
  max-width: 33rem;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.aida-modal-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  background-color: var(--background-gray-02);
}

.aida-modal-media__close.gt-button {
  position: absolute;
  top: var(--layout-spacing-md);
  right: var(--layout-spacing-md);
}

.aida-modal-media__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
  padding: var(--layout-spacing-lg);
}

.aida-modal-media__text {
  margin: 0;
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
  color: var(--content-03);
}

.aida-modal-media .gt-modal-footer {
  margin-top: var(--layout-spacing-md);
}

/* "Create a collection" step inside the Save to a collection dialog */
.aida-collection-modal .gt-input-text {
  width: 100%;
}

/* Text of the image modal can hold several paragraphs */
.aida-modal-media__text {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
}

.aida-modal-media__text p {
  margin: 0;
}

.aida-modal-media__text a {
  color: var(--link-primary);
  text-decoration: underline;
}