/* ======================================================================
   KG EXPLORER: COMPONENT STYLES

   Same class names and the same HTML as GoTriple. Only the values change:
   every value comes from kg-tokens.css (Figma, SSH theme).

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

   NAMING RULE
     gt-*, ms-*, modal-*   already exist in GoTriple. Same name, same markup.
     kg-*                  new in the KG Explorer. GoTriple has no equivalent.

   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  (GoTriple file in styles/ )
     gt-title-1, -3, -4, gt-text, -small, -bold                    atoms/_title-1, _title-3, _title-4, _text, _text-small, _text-bold
     kg-input-icon (input with an icon, new)                       no GoTriple equivalent
     gt-button, -cta, -transparent, -s, -l, -no-text, -icon-only   atoms/_button
     gt-input-text (+ __border __error __disabled __full-width),
     gt-input-textarea                                             atoms/_input
     gt-select                                                     atoms/_select
     ms-checkbox (+ __check __label --small --medium)              atoms/_checkbox
     modal-overlay, modal-wrapper, modal, gt-modal-header/-content/-footer,
     gt-form-actions, gt-title-2                                   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 __top __mobile-menu-toggle
       __mobile-menu-close __language-options), gt-nav__element,
       gt-dropdown-panel (+ -wrapper -left -right -top), gt-dropdown-item   organisms/Header, atoms/DropDownPanel, atoms/DropDownItem
     gt-divider (+ -strong)                                       atoms/_divider (new file in the KG; GoTriple has the class but no atom file)
     gt-footer (+ __wrapper __brand __logo __version __partners __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
   ====================================================================== */

/* ---------- Component constants (NOT in Figma) ----------
   Values GoTriple or the Figma components use, but that are not variables.
   Move them into Figma if you want them as tokens. */
:root {
  --kg-border-width: 1px;
  --kg-focus-gap: 2px;
  --kg-focus-ring: 2px;
  --kg-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 GoTriple tabs */
  --kg-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 */
  --kg-toast-width: 329px;
  /* Figma Toast width */
  --kg-transition: 0.2s;
  --kg-disabled-opacity: 0.4;
  /* same as GoTriple nav bar */
  --kg-nav-item-height: 42px;
  /* Figma Nav-item */
  --kg-nav-icon-size: 18px;
  /* Figma Nav-item icon */
  --kg-button-height-s: 28px;
  /* Figma Buttons, size S */
  --kg-button-height-m: 40px;
  /* size M */
  --kg-button-height-l: 52px;
  /* size L */
  --kg-checkbox-size-s: 20px;
  --kg-checkbox-size-m: 24px;
  --kg-tooltip-width: 301px;
  /* Figma Tooltip width */
  --kg-z-header: 30;
  /* same as GoTriple .gt-header */
  --kg-header-logo-height: 56px;
  /* KG Explorer logo (assets/logo.svg) in the header */
  --kg-header-logo-height-mobile: 40px;
  /* same logo on mobile */
  --kg-footer-logo-height: 48px;
  /* same logo in the footer */
  --kg-menu-button-size: 48px;
  /* Figma mobile "menu" frame */
  --kg-menu-icon-size: 32px;
  /* Figma mobile "Icon wrapper" */
  --kg-lang-icon-size: 24px;
  /* Figma "world 2" (16 in the mobile top bar) */
  --kg-lang-icon-size-s: 16px;
  --kg-footer-col-min: 280px;
  /* Figma footer columns wrap at 328 */
  --kg-footer-partner-height: 32px;
  /* partner logos in the footer. The GoTriple KG logo stays larger */
  --kg-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^="kg-"],
[class*=" kg-"],
.modal,
.modal-wrapper,
.modal-overlay {
  box-sizing: border-box;
}

/* Page base for the prototype */
.kg-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 */
.kg-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, Body text, Poppins 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-semibold);
  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 a: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__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(--kg-focus-ring) solid transparent;
  box-shadow:
    0 0 0 var(--kg-focus-gap) var(--inner-focus),
    0 0 0 calc(var(--kg-focus-gap) + var(--kg-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 GoTriple):  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(--kg-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(--kg-border-width) solid var(--_border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--kg-transition), border-color var(--kg-transition), color var(--kg-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(--kg-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(--kg-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(--kg-button-height-m);
  padding: 0;
}

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

.gt-button.gt-button-no-text.gt-button-l {
  width: var(--kg-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; GoTriple 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="kg-field"><label class="kg-field__label" for="x">Label</label>
     <input class="gt-input-text gt-input-text__border" id="x">
     <p class="kg-field__hint">Hint</p></div>
   ====================================================================== */
.kg-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

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

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

.kg-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 kg-mono
   ====================================================================== */
.gt-input-text {
  min-height: var(--kg-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(--kg-transition), background-color var(--kg-transition);
}

.gt-input-text__border {
  border: var(--kg-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(--kg-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 in the KG.
   <div class="kg-input-icon"><input class="gt-input-text ..."> <svg>...</svg></div> */
.kg-input-icon {
  position: relative;
}

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

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

.kg-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;
}

.kg-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(--kg-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(--kg-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--kg-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 GoTriple'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(--kg-checkbox-size-m);
  height: var(--kg-checkbox-size-m);
  background-color: var(--color-white-100);
  border: var(--kg-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--kg-transition), border-color var(--kg-transition);
}

.ms-checkbox--small>.ms-checkbox__check {
  width: var(--kg-checkbox-size-s);
  height: var(--kg-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  (GoTriple 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 kg-nav-bar-vertical to the nav. New class.
   Disabled follows GoTriple (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(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
  box-shadow: var(--kg-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(--kg-nav-item-height);
  padding: 0 var(--spacing-4);
  color: var(--content-02);
  text-decoration: none;
  background: transparent;
  border: var(--kg-border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gt-nav-bar-item__icon {
  flex: none;
  width: var(--kg-nav-icon-size);
  height: var(--kg-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(--kg-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(--kg-disabled-opacity);
}

.gt-nav-bar-item.is-disabled .gt-badge-counter {
  opacity: var(--kg-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 */
.kg-nav-bar-vertical {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

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

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

.kg-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);
}

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

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

.kg-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="kg-tooltip-wrap">
     <button class="gt-button" aria-describedby="tip1">...</button>
     <span class="gt-diagram-tooltip kg-tooltip-down" role="tooltip" id="tip1">Text</span>
   </span>
   Arrow direction (Figma "Direction"): kg-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, kg-tooltip-dark
   Optional action: <div class="kg-tooltip-actions"><button class="gt-button gt-button-cta gt-button-s">...
   GoTriple'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.
   kg-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(--kg-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(--kg-shadow-sm);
}

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

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

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

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

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

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

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

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

.kg-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(--kg-transition), visibility var(--kg-transition);
}

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

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

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

.kg-tooltip-wrap:hover>.gt-diagram-tooltip,
.kg-tooltip-wrap:focus-within>.gt-diagram-tooltip,
.kg-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  kg-badge-type-04           (new, GoTriple has none)
     type-05  kg-badge-type-05           (new)
   Also: gt-badge-open (mint, Figma "collab"), gt-badge-primary.
   Status badges are new: kg-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(--kg-border-width) solid var(--_border);
  border-radius: var(--radius-sm);
}

.gt-badge::before {
  content: "";
  position: absolute;
  top: calc(var(--kg-border-width) * -1);
  bottom: calc(var(--kg-border-width) * -1);
  left: calc(var(--kg-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);
}

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

.kg-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);
}

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

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

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

.kg-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 kg-toast-info" role="status">
     <div class="kg-toast-content">
       <svg class="kg-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 kg-toast-close" aria-label="Close">...</button>
     </div>
     <div class="kg-toast-actions"><button class="gt-button gt-button-s">My Button</button></div>
   </div>
   Colors (Figma names): (none) = light, kg-toast-dark, kg-toast-info,
                         kg-toast-warning, kg-toast-error
   Callout (no shadow, no close button): add kg-toast-callout
   kg-toast-region is new: a live region fixed to the bottom right.
   ====================================================================== */
.kg-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(--kg-toast-width);
  max-width: 100%;
  padding: var(--layout-spacing-md);
  color: var(--_text);
  background-color: var(--_bg);
  border: var(--kg-border-width) solid var(--_border);
  border-radius: var(--radius-md);
  box-shadow: var(--kg-shadow-lg);
}

.kg-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);
}

.kg-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 .kg-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 .kg-toast-close svg {
  width: calc(var(--spacing-2) + var(--spacing-1));
  height: calc(var(--spacing-2) + var(--spacing-1));
}

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

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

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

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

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

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

.kg-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 (GoTriple default), gt-loader-spinner
   Sizes: gt-loader-small, gt-loader-medium, gt-loader-large
   Add role="status" and a .kg-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(--kg-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 (GoTriple's .gt-divider has a 40px margin).
   <hr class="gt-divider">                 Border/border-gray-01 (header menu)
   <hr class="gt-divider gt-divider-strong">  Border/border-gray-03 (footer; Figma uses the older gray-04 style, #888891)
   ====================================================================== */
.gt-divider {
  display: block;
  width: 100%;
  height: var(--kg-border-width);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--border-gray-01);
  flex: none;
}

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

/* ======================================================================
   HEADER
   Figma "Header" (node 5631:9096, desktop) and "Type=GoTriple - Not logged,
   Device=Mobile" (3506:18869 closed, 3506:18880 open menu).
   No search and no log in: the KG Explorer does not have them.

   <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 GoTriple).
   Below 1280px the nav folds into a full-screen menu (GoTriple's mobile header breakpoint).
   Add class is-mobile-nav-visible to .gt-header to show the menu.
   ====================================================================== */
.gt-header {
  background-color: var(--color-white-100);
  box-shadow: var(--kg-shadow-sm);
  border-bottom: var(--kg-border-width) solid var(--border-gray-02);
  z-index: 5;
}

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

.gt-header__logo a,
.gt-footer__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,
.gt-footer__logo img {
  display: block;
  height: var(--kg-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;
  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(--content-01);
  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(--kg-lang-icon-size);
  height: var(--kg-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);
}

/* 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(--kg-menu-button-size);
  height: var(--kg-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(--kg-menu-icon-size);
  height: var(--kg-menu-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* 1279px is GoTriple's own mobile header breakpoint (a media query cannot read a variable) */
@media (max-width: 1279px) {
  .gt-header__top {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--layout-margin-base);
    border-bottom: var(--kg-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(--kg-lang-icon-size-s);
    height: var(--kg-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(--kg-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(--kg-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(--kg-z-header);
  min-width: var(--kg-dropdown-min-width);
  padding: var(--spacing-2) 0;
  background-color: var(--color-white-100);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
  box-shadow: var(--kg-shadow-lg);
  transform: scaleY(0);
  transform-origin: top;
  visibility: hidden;
  transition: transform var(--kg-transition) ease-in-out, visibility var(--kg-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(--kg-transition), color var(--kg-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(--kg-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" (component set 5026:2792; Desktop 5026:2728, Mobile 5026:2793).
   Gray band, 1px top border. Columns wrap on their own, so there is no media query.
   <footer class="gt-footer">
     <div class="gt-footer__wrapper">
       <div class="gt-footer__about">
         <div class="gt-footer__brand"> <div class="gt-footer__logo"><a href="/"> logo </a></div> <span class="gt-footer__version">v1.3.0</span> </div>
         <hr class="gt-divider gt-divider-strong">
         <div class="gt-footer__partners"> <div> partner logo + short text </div> <div> … </div> </div>
       </div>
       <div> <p class="gt-footer__title">Links</p> <ul> <li><a>…</a></li> </ul> </div>
     </div>
   ====================================================================== */
.gt-footer {
  background-color: var(--background-gray-02);
  border-top: var(--kg-border-width) solid var(--border-gray-02);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-01);
}

.gt-footer__wrapper {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: var(--layout-margin-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--layout-spacing-3xl) var(--layout-spacing-5xl);
}

.gt-footer__wrapper>div {
  flex: 1 1 var(--kg-footer-col-min);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  min-width: 0;
}

.gt-footer__wrapper>.gt-footer__about {
  flex: 3 1 calc(var(--kg-footer-col-min) * 2);
  gap: var(--layout-spacing-md);
  margin-right: var(--layout-spacing-5xl);
}

/* GoTriple KG logo on top, the two partners side by side below */
.gt-footer__brand {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
}

.gt-footer__version {
  color: var(--content-03);
}

.gt-footer__partners {
  align-self: stretch;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: var(--layout-spacing-xl);
  margin-top: var(--layout-spacing-md);
}

.gt-footer__partners>div {
  flex: 1 1 var(--kg-footer-col-min);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  min-width: 0;
  margin-right: var(--layout-spacing-md);
}

.gt-footer__wrapper p {
  margin: 0;
}

.gt-footer__wrapper img {
  display: block;
  height: var(--kg-footer-partner-height);
  width: auto;
  max-width: 100%;
}

.gt-footer__wrapper .gt-footer__logo img {
  height: var(--kg-footer-logo-height);
}

.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__wrapper ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gt-footer__wrapper li a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
}

.gt-footer__wrapper li a:hover {
  color: var(--link-primary-hover);
  text-decoration: none;
}

.gt-footer__wrapper li svg {
  flex: none;
  width: var(--spacing-3);
  height: var(--spacing-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}