/* ======================================================================
   GoTriple KG Explorer: results layout variant (prototype-results.html)
   Built from the lo-fi mockup (Figma GRAPHIA-Sandbox, node 96:337).
   Loaded after kg-app.css. It only adds kg-ide classes and scoped changes,
   so prototype.html looks the same with or without this file.

   Page head              kg-ide-head
   Frame                  kg-ide (.is-collapsed)
   Query column           kg-ide__query (__head, __title, __toggle, __body, __actions)
   Results column         kg-ide__results (Figma 257:5512), kg-ide__row, kg-ide__table
                          (__head, __count, __tools, __search)
   Switch group           kg-switch-group (--sm), kg-switch (.is-active .is-disabled)
   Small input            gt-input-text__s, kg-input-icon--s
                          LUMEN WLP UI Kit 5141:53781. GoTriple has no such component:
                          gt-switch is an on/off toggle, gt-toggle-button has two options.
   Icons                  kg-icon (+ --table --chart --connection --trend --raw --search
                          --share --network --download --options), drawn from assets/
   Views                  kg-net (shared connections), kg-raw (raw data)
   Sidebar                kg-ide__query (+ __head __divider __rail), kg-schema (off-canvas panel)
                          Figma "sources sidebar" 5124:4029, LUMEN WLP UI Kit
   ====================================================================== */

:root {
  --kg-ide-height: 781px;
  /* frame height in the lo-fi mockup */
  --kg-ide-query-width: clamp(18rem, 24vw, 22.125rem);
  /* 354px, as in the Figma sidebar */
  --kg-ide-rail-width: calc(var(--layout-spacing-md) * 2 + var(--kg-button-height-m) + var(--kg-border-width));
  /* collapsed sidebar: 72px (16 + 40 + 16) plus the 1px divider, so the buttons fit without a scrollbar */
  --kg-icon-size-lg: 20px;
  /* icon inside the 40px icon-only buttons (Figma) */
  --kg-results-body-min-height: 70vh;
  --kg-results-body-max-height: 85dvh;
  /* room for the views; longer results scroll inside */
  --kg-ide-search-width: 200px;
  /* search box in the results header (Figma) */
  --kg-input-s-icon: 18px;
  /* magnifier inside the small input */
  --kg-switch-gap: 7px;
  /* space between icon and label in a switch (Figma md) */
  --kg-switch-icon: 18px;
  --kg-switch-sm-icon: 16px;
  --kg-switch-sm-pad-y: calc(var(--spacing-2) - var(--kg-border-width));
  /* 7px: with the border, the small group is 32px high (Figma) */
}

/* ---------- Page head: h1 on the left, help on the right ---------- */
.kg-ide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--layout-spacing-lg);
}

/* the title and how long the query ran, side by side, with a thin divider between them */
.kg-ide-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-spacing-sm) var(--layout-spacing-md);
  min-width: 0;
}

.kg-ide-head__time:not(:empty) {
  padding-left: var(--layout-spacing-md);
  border-left: var(--kg-border-width) solid var(--border-gray-03);
  line-height: var(--line-height-body);
}

/* ---------- Frame: query on the left, results on the right ---------- */
.kg-ide {
  display: grid;
  grid-template-columns: var(--kg-ide-query-width) minmax(0, 1fr);
  /* a fixed height (not a minimum), the Figma frame height: on a short window the page scrolls instead of
     squeezing the results, which scroll inside the frame if they need more room */
  height: var(--kg-ide-height);
  overflow: hidden;
  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-sm);
}

.kg-ide.is-collapsed {
  grid-template-columns: var(--kg-ide-rail-width) minmax(0, 1fr);
}

/* on wide screens the one row is exactly the frame's height; each column scrolls on its own if it needs more */
@media (min-width: 768px) {
  .kg-ide {
    grid-template-rows: minmax(0, 1fr);
  }

  .kg-ide__query {
    overflow-y: auto;
  }
}

/* ---------- Query column: the sidebar ----------
   Expanded: title and a ghost toggle, a divider, then the content.
   Collapsed: a 72px rail with the toggle, a divider and icon-only buttons that show a tooltip. */
.kg-ide__query {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);
  min-width: 0;
  min-height: 0;
  padding: var(--layout-spacing-lg);
  border-right: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-ide__query-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-spacing-sm);
  min-height: var(--kg-button-height-s);
}

.kg-ide__query-title {
  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-primary);
}

.kg-ide__toggle {
  flex: none;
}

.kg-ide__divider {
  flex: none;
}

.kg-ide__query-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--layout-spacing-md);
  min-height: 0;
  /* room for the focus ring, which the scrolling box would otherwise cut off */
  margin: calc(var(--kg-focus-gap) * -2);
  padding: calc(var(--kg-focus-gap) * 2);
  overflow-y: auto;
}

.kg-ide__query-body[hidden] {
  display: none;
}

.kg-ide__query textarea.gt-input-text {
  display: block;
  flex: 1;
  min-height: 10rem;
  padding: var(--spacing-3);
  line-height: var(--line-height-body);
  background-color: var(--background-gray-01);
  tab-size: 2;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kg-ide__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* the buttons share the row; the ones that do not fit wrap onto the next row and stretch to fill it */
.kg-ide__actions > .gt-button {
  flex: 1 1 auto;
  justify-content: center;
}

/* icon-only buttons of the collapsed sidebar: 40px squares, 20px icons */
.kg-ide__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-spacing-md);
}

.kg-ide__rail[hidden] {
  display: none;
}

.kg-ide__rail .gt-button .kg-icon {
  --kg-icon-size: var(--kg-icon-size-lg);
}

/* Collapsed (wide screens) */
.kg-ide.is-collapsed .kg-ide__query {
  align-items: center;
  padding-right: var(--layout-spacing-md);
  padding-left: var(--layout-spacing-md);
}

.kg-ide.is-collapsed .kg-ide__query-head {
  justify-content: center;
}

.kg-ide.is-collapsed .kg-ide__query-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kg-ide.is-collapsed .kg-ide__divider {
  align-self: stretch;
}

/* ---------- Results column (Figma 257:5512) ---------- */
.kg-ide__results {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-md);
  min-width: 0;
  min-height: 0;
  padding: var(--layout-spacing-lg);
  background-color: var(--background-gray-02);
}

/* switch group on the left, the graph action on the right */
.kg-ide__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-spacing-md);
}

.kg-ide__table {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-white-100);
  border: var(--kg-border-width) solid var(--border-gray-02);
  border-radius: var(--radius-lg);
}

.kg-ide__table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap);
  padding: var(--layout-spacing-md);
  background-color: var(--background-gray-01);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-ide__count {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-md);
  min-width: 0;
}

.kg-ide__count-main {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-sm);
}

.kg-ide__count .gt-title-3 {
  color: var(--content-primary);
}

/* thin divider between the count and what is left out of it (for example hidden duplicates) */
.kg-ide__count-note {
  margin-left: var(--layout-spacing-sm);
  padding-left: var(--layout-spacing-md);
  border-left: var(--kg-border-width) solid var(--border-gray-03);
  line-height: var(--line-height-body);
}

.kg-ide__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-spacing-sm);
}

.kg-ide__search {
  width: var(--kg-ide-search-width);
  max-width: 100%;
}

.kg-ide__search[hidden] {
  display: none;
}

.kg-ide__search .gt-input-text {
  border-radius: var(--radius-md);
  background-color: var(--color-white-100);
}

/* Share and Export are the small button (28px); Figma puts 4px between icon and label here */
.kg-ide__tools .gt-button-s {
  gap: var(--layout-spacing-xs);
}

/* ---------- Small text input (Figma Form / Input, 28px) ----------
   <div class="kg-input-icon kg-input-icon--s"><input class="gt-input-text gt-input-text__border gt-input-text__s"> <span class="kg-icon kg-icon--search"></span></div> */
.gt-input-text__s {
  height: var(--kg-button-height-s);
  min-height: 0;
  padding: 0 var(--layout-spacing-sm);
  font-size: var(--size-body-sm);
}

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

.kg-input-icon--s .kg-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-2);
  --kg-icon-size: var(--kg-input-s-icon);
  color: var(--content-placeholder);
  transform: translateY(-50%);
  pointer-events: none;
}

/* The body has a minimum height so charts and diagrams have room. Every view puts its own container
   inside it, so the body is a column and those containers stretch to fill it. */
.kg-ide__table .kg-results__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: var(--kg-results-body-min-height);
  max-height: var(--kg-results-body-max-height);
  overflow: auto;
}

/* wide screens: the frame has a fixed height, so the body takes what is left and scrolls inside it */
@media (min-width: 768px) {
  .kg-ide__table .kg-results__body {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }
}

.kg-results__body > .kg-table {
  flex: none;
}

.kg-results__body > .kg-chart,
.kg-results__body > .kg-net,
.kg-results__body > .kg-bars,
.kg-results__body > .kg-raw-view,
.kg-results__body > .kg-state {
  flex: 1 0 auto;
}

.kg-results__body > .kg-chart,
.kg-results__body > .kg-net {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kg-results__body > .kg-bars,
.kg-results__body > .kg-state {
  justify-content: center;
}

/* the drawings grow with the room they get, without distorting */
.kg-results__body > .kg-chart svg,
.kg-results__body > .kg-net svg {
  flex: 1;
  min-height: 0;
  max-height: none;
}

/* the header row stays in view while the rows scroll */
.kg-ide__table .kg-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--background-gray-01);
  border-bottom: 0;
  box-shadow: inset 0 calc(var(--kg-border-width) * -1) 0 var(--border-gray-01);
}

.kg-table__none td {
  padding: var(--layout-spacing-xl) var(--layout-spacing-md);
  text-align: center;
  color: var(--content-03);
}

/* the export menu opens under the button, aligned to its right edge */
.kg-ide__tools .gt-dropdown-panel {
  top: calc(100% + var(--layout-spacing-xs));
}

/* ---------- Icons: shapes from assets/, coloured by the text colour around them ----------
   The shapes are embedded below (data URIs) because browsers refuse to load a mask image from a file
   that was opened straight from disk (file://). Each one names its source file in assets/. */
.kg-icon {
  --kg-icon-size: var(--spacing-4);
  display: inline-block;
  flex: none;
  width: var(--kg-icon-size);
  height: var(--kg-icon-size);
  background-color: currentColor;
  -webkit-mask: var(--kg-icon) center / contain no-repeat;
  mask: var(--kg-icon) center / contain no-repeat;
}

.kg-icon--table {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0.436 -1.8 18.0 18.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.5178 0.900366C16.6359 0.900615 17.542 1.80675 17.5423 2.92478L17.551 11.4756C17.5508 12.5937 16.6448 13.4998 15.5266 13.5H3.37624C2.25793 13.4999 1.34206 12.5841 1.34206 11.4658L1.33327 2.91599C1.33338 1.79771 2.24914 0.900366 3.36745 0.900366H15.5178ZM3.36745 10.247C2.99466 10.247 2.69265 10.5491 2.69265 10.9219V11.4756C2.69285 11.8482 2.99478 12.1504 3.36745 12.1504H8.20339C8.52334 12.0974 8.76777 11.8193 8.76784 11.4844V10.9219C8.76784 10.5491 8.46485 10.247 8.09206 10.247H3.36745ZM10.7923 10.247C10.4195 10.2471 10.1175 10.5491 10.1175 10.9219V11.4844C10.1175 11.8194 10.3618 12.0976 10.6819 12.1504H15.5178C15.8903 12.1501 16.1925 11.848 16.1926 11.4756V10.9219C16.1926 10.5492 15.8904 10.2473 15.5178 10.247H10.7923ZM3.36745 6.97947C2.9948 6.97947 2.69288 7.28168 2.69265 7.65427V8.21677C2.69265 8.58956 2.99466 8.89255 3.36745 8.89255H8.09206C8.46485 8.89255 8.76784 8.58956 8.76784 8.21677V7.65427C8.76761 7.28168 8.46471 6.97947 8.09206 6.97947H3.36745ZM10.7923 6.97947C10.4197 6.97954 10.1177 7.28172 10.1175 7.65427V8.21677C10.1175 8.58952 10.4195 8.89249 10.7923 8.89255H15.5178C15.8904 8.8923 16.1926 8.58941 16.1926 8.21677V7.65427C16.1924 7.28183 15.8903 6.97972 15.5178 6.97947H10.7923ZM3.36745 3.71287C2.99467 3.71287 2.69266 4.01489 2.69265 4.38767V4.95017C2.69265 5.32296 2.99466 5.62498 3.36745 5.62498H8.09206C8.46485 5.62498 8.76784 5.32296 8.76784 4.95017V4.38767C8.76783 4.01489 8.46485 3.71287 8.09206 3.71287H3.36745ZM10.7923 3.71287C10.4195 3.71293 10.1175 4.01493 10.1175 4.38767V4.95017C10.1175 5.32292 10.4195 5.62491 10.7923 5.62498H15.5178C15.8904 5.62473 16.1926 5.32281 16.1926 4.95017V4.38767C16.1926 4.01504 15.8904 3.71312 15.5178 3.71287H10.7923Z' fill='%23F8F8F8'/%3E %3C/svg%3E");
  /* source: assets/heroicons_table-cells.svg */
}

.kg-icon--chart {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='-0.169 -0.591 18.0 18.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.61452 7.65037C5.4946 7.65051 6.20826 8.36401 6.20827 9.24412V14.3066C6.20827 15.1867 5.4946 15.9002 4.61452 15.9004H2.92702C2.04682 15.9004 1.33327 15.1868 1.33327 14.3066V9.24412C1.33329 8.36392 2.04683 7.65037 2.92702 7.65037H4.61452ZM9.67702 4.27537C10.5571 4.27551 11.2708 4.98901 11.2708 5.86912V14.3066C11.2708 15.1867 10.5571 15.9002 9.67702 15.9004H7.98952C7.10932 15.9004 6.39577 15.1868 6.39577 14.3066V5.86912C6.39579 4.98892 7.10933 4.27537 7.98952 4.27537H9.67702ZM14.7395 0.900366C15.6196 0.90051 16.3333 1.61401 16.3333 2.49412V14.3066C16.3333 15.1867 15.6196 15.9002 14.7395 15.9004H13.052C12.1718 15.9004 11.4583 15.1868 11.4583 14.3066V2.49412C11.4583 1.61392 12.1718 0.900366 13.052 0.900366H14.7395ZM2.92702 9.15037C2.87525 9.15037 2.83329 9.19235 2.83327 9.24412V14.3066C2.83327 14.3584 2.87525 14.4004 2.92702 14.4004H4.61452C4.66618 14.4002 4.70827 14.3583 4.70827 14.3066V9.24412C4.70826 9.19244 4.66617 9.15051 4.61452 9.15037H2.92702ZM7.98952 5.77537C7.93775 5.77537 7.89579 5.81735 7.89577 5.86912V14.3066C7.89577 14.3584 7.93775 14.4004 7.98952 14.4004H9.67702C9.72868 14.4002 9.77077 14.3583 9.77077 14.3066V5.86912C9.77076 5.81744 9.72867 5.77551 9.67702 5.77537H7.98952ZM13.052 2.40037C13.0003 2.40037 12.9583 2.44235 12.9583 2.49412V14.3066C12.9583 14.3584 13.0002 14.4004 13.052 14.4004H14.7395C14.7912 14.4002 14.8333 14.3583 14.8333 14.3066V2.49412C14.8333 2.44244 14.7912 2.40051 14.7395 2.40037H13.052Z' fill='%231E1C1E'/%3E %3C/svg%3E");
  /* source: assets/heroicons_chart-bar.svg */
}

.kg-icon--connection {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0.688965 16.4315C0.689211 14.7693 1.99477 13.4114 3.63649 13.3281L3.79639 13.3242L3.80449 13.3242L3.81171 13.3237L4.09781 13.3382L4.1054 13.3391L4.11386 13.3405C5.42086 13.4734 6.4848 14.4158 6.80352 15.6574L13.8508 15.6571C14.1722 14.4056 15.2514 13.4572 16.5723 13.3367L16.8578 13.3242L16.8659 13.3242L16.8731 13.3238L17.1592 13.3382L17.1668 13.3391L17.1758 13.3397C18.7424 13.4992 19.9649 14.8231 19.9651 16.4316L19.9659 16.4402L19.9645 16.4487L19.9491 16.7343L19.9496 16.7415L19.9487 16.7491C19.7893 18.3159 18.4664 19.5387 16.8576 19.5389L16.8495 19.5389L16.8419 19.538L16.5558 19.5235L16.5478 19.5234L16.5402 19.5225C15.4021 19.4069 14.448 18.6781 14.0096 17.6731L6.64162 17.6726C6.16282 18.7695 5.0713 19.5388 3.79624 19.5389L3.78815 19.5389L3.78056 19.5379L3.49446 19.5235L3.48637 19.5234L3.47878 19.5225C2.01615 19.3739 0.85273 18.2116 0.704115 16.7486L0.702779 16.7408L0.702815 16.7327L0.689395 16.4468L0.688965 16.4315ZM4.21374 6.89287C4.21398 5.23074 5.51954 3.87277 7.16126 3.78948L7.32117 3.78559L7.32926 3.78562L7.33649 3.78516L7.62258 3.79963L7.63017 3.80054L7.63864 3.80194C8.94508 3.93478 10.008 4.87595 10.3271 6.11689L17.3761 6.11765C17.6975 4.86625 18.7763 3.91854 20.0971 3.79814L20.3826 3.78559L20.3906 3.78563L20.3979 3.78516L20.684 3.79963L20.6916 3.80054L20.7005 3.80108C22.2672 3.96066 23.4888 5.28409 23.489 6.89252L23.4889 6.90871L23.4744 7.1948L23.4735 7.20239L23.4735 7.21049C23.3141 8.7772 21.9911 10.0001 20.3824 10.0003L20.3743 10.0003L20.3667 9.99936L20.0806 9.98488L20.0725 9.98485L20.0649 9.98394C18.9269 9.86829 17.972 9.13922 17.5335 8.13405L10.1664 8.134C9.68759 9.23094 8.59605 10.0002 7.32102 10.0003L7.31292 10.0003L7.30533 9.99935L7.01923 9.98488L7.01114 9.98484L7.00355 9.98394C5.54072 9.83528 4.37798 8.6719 4.22939 7.20911L4.22892 7.20188L4.22809 7.19329L4.21417 6.90818L4.2137 6.90096L4.21374 6.89287ZM16.8573 15.341C16.2551 15.3413 15.7665 15.8293 15.7663 16.4315C15.7664 17.0339 16.2552 17.5229 16.8576 17.5229C17.46 17.5228 17.9482 17.0335 17.9482 16.4311C17.9479 15.8667 17.5188 15.4023 16.9689 15.3464L16.8573 15.341ZM20.3825 5.80154C19.8179 5.80162 19.3532 6.23137 19.2973 6.78171L19.2911 6.89288C19.2913 7.49525 19.7802 7.98429 20.3824 7.98435C20.9846 7.98421 21.4728 7.49492 21.473 6.89251C21.4727 6.32783 21.0438 5.86302 20.4942 5.80689L20.3825 5.80154ZM3.79588 15.341C3.19365 15.3413 2.7051 15.8293 2.70491 16.4315C2.70499 17.0339 3.19377 17.5229 3.79625 17.5229C4.39864 17.5229 4.88679 17.0336 4.88686 16.4311C4.88649 15.829 4.3982 15.3411 3.79588 15.341ZM7.32116 5.80153C6.75648 5.80162 6.2918 6.23136 6.23591 6.7817L6.22969 6.89288C6.22996 7.49524 6.71879 7.98428 7.32103 7.98435C7.92327 7.98428 8.41146 7.49501 8.41163 6.8925C8.41139 6.32772 7.98249 5.86294 7.43283 5.80689L7.32116 5.80153Z' fill='black'/%3E %3C/svg%3E");
  /* source: assets/carbon_connection.svg */
}

.kg-icon--trend {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0.352 -2.756 18.0 18.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.7519 1.45665C11.8484 1.05655 12.219 0.819172 12.5791 0.926378L16.8818 2.20763C17.0547 2.25911 17.2024 2.38497 17.2919 2.55724C17.3813 2.72932 17.4055 2.93368 17.3593 3.1256L16.206 7.90685C16.1095 8.30691 15.7399 8.54426 15.3798 8.43712C15.0198 8.32994 14.806 7.91916 14.9023 7.51915L15.6308 4.49767C13.6003 5.88782 11.9121 7.66865 10.5976 9.70079C10.482 9.8795 10.3009 9.99253 10.1035 10.0104C9.90634 10.0281 9.71218 9.94882 9.57222 9.79357L6.73335 6.63927L2.48531 11.359C2.22181 11.6516 1.79478 11.6514 1.53121 11.359C1.2676 11.0661 1.26761 10.5913 1.53121 10.2984L6.25581 5.04845C6.51942 4.75556 6.94631 4.75556 7.20992 5.04845L9.97652 8.12169C11.3274 6.20892 13.0004 4.52868 14.9677 3.19005L12.2294 2.3756C11.8694 2.26836 11.6555 1.8567 11.7519 1.45665Z' fill='%231E1C1E'/%3E %3C/svg%3E");
  /* source: assets/heroicons_arrow-trending-up.svg */
}

.kg-icon--raw {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='-0.731 -0.028 18.0 18.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.27077 0.900366C10.0705 0.900402 11.7375 1.2636 12.9817 1.88572C14.181 2.48545 15.2083 3.45286 15.2083 4.74412V13.1816C15.2083 14.4729 14.181 15.4403 12.9817 16.04C11.7375 16.6621 10.0705 17.0253 8.27077 17.0254C6.47105 17.0254 4.80412 16.6621 3.55984 16.04C2.3605 15.4403 1.33327 14.473 1.33327 13.1816V4.74412C1.33329 3.45278 2.36051 2.48545 3.55984 1.88572C4.80412 1.26363 6.47106 0.900366 8.27077 0.900366ZM13.7083 12.7978C13.4788 12.9565 13.2345 13.1011 12.9817 13.2275C11.7375 13.8496 10.0705 14.2128 8.27077 14.2129C6.47105 14.2129 4.80412 13.8496 3.55984 13.2275C3.307 13.1011 3.0628 12.9565 2.83327 12.7978V13.1816C2.83327 13.5988 3.19094 14.1783 4.23073 14.6982C5.22585 15.1957 6.65344 15.5254 8.27077 15.5254C9.88811 15.5253 11.3157 15.1958 12.3108 14.6982C13.3504 14.1783 13.7083 13.5987 13.7083 13.1816V12.7978ZM13.7083 9.98533C13.4788 10.144 13.2345 10.2886 12.9817 10.415C11.7375 11.0371 10.0705 11.4003 8.27077 11.4004C6.47105 11.4004 4.80412 11.0371 3.55984 10.415C3.307 10.2886 3.0628 10.144 2.83327 9.98533V10.3691C2.83327 10.7863 3.19094 11.3658 4.23073 11.8857C5.22585 12.3832 6.65344 12.7129 8.27077 12.7129C9.88811 12.7128 11.3157 12.3833 12.3108 11.8857C13.3504 11.3658 13.7083 10.7862 13.7083 10.3691V9.98533ZM13.7083 7.17283C13.4788 7.33151 13.2345 7.47608 12.9817 7.60251C11.7375 8.22464 10.0705 8.58783 8.27077 8.58787C6.47105 8.58787 4.80412 8.22461 3.55984 7.60251C3.307 7.47608 3.0628 7.33152 2.83327 7.17283V7.55662C2.83327 7.97378 3.19094 8.55326 4.23073 9.07322C5.22585 9.57073 6.65344 9.90037 8.27077 9.90037C9.88811 9.90033 11.3157 9.57075 12.3108 9.07322C13.3504 8.55328 13.7083 7.97375 13.7083 7.55662V7.17283ZM8.27077 2.40037C6.65345 2.40037 5.22585 2.73001 4.23073 3.22751C3.19096 3.74747 2.83329 4.32696 2.83327 4.74412C2.83327 5.16128 3.19094 5.74076 4.23073 6.26072C5.22585 6.75823 6.65344 7.08787 8.27077 7.08787C9.88811 7.08783 11.3157 6.75825 12.3108 6.26072C13.3504 5.74078 13.7083 5.16125 13.7083 4.74412C13.7083 4.32699 13.3504 3.74744 12.3108 3.22751C11.3157 2.72998 9.88811 2.4004 8.27077 2.40037Z' fill='%231E1C1E'/%3E %3C/svg%3E");
  /* source: assets/heroicons_circle-stack.svg */
}

.kg-icon--search {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='-0.619 -1.2 24.0 24.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10.178 1.20018C14.8171 1.20024 18.5773 4.96054 18.5775 9.5996C18.5775 11.5946 17.8816 13.4285 16.72 14.8691L20.7142 18.8633C21.0656 19.2147 21.0655 19.7842 20.7142 20.1357C20.3627 20.4872 19.7932 20.4872 19.4417 20.1357L15.4476 16.1416C14.007 17.3031 12.173 18 10.178 18C5.53885 18 1.77765 14.2388 1.77765 9.5996C1.77777 4.9605 5.53892 1.20018 10.178 1.20018ZM10.178 2.99999C6.53303 2.99999 3.57757 5.95461 3.57746 9.5996C3.57746 13.2447 6.53296 16.2002 10.178 16.2002C12.0008 16.2002 13.6497 15.4619 14.845 14.2666C16.0403 13.0713 16.7777 11.4223 16.7777 9.5996C16.7775 5.95465 13.823 3.00005 10.178 2.99999Z' fill='%236B666B'/%3E %3C/svg%3E");
  /* source: assets/heroicons_magnifying-glass.svg */
}

.kg-icon--share {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M6.28294 2.14411C8.79474 1.86687 11.3238 1.77285 13.8493 1.86188C14.1381 1.87121 14.3266 2.11179 14.3474 2.36579L14.3454 2.47516L14.3318 2.59821L14.3259 2.64606L14.3288 2.64899L14.2771 3.36579C14.2681 3.49448 14.2085 3.61551 14.112 3.70173C14.0167 3.7867 13.8915 3.8308 13.7624 3.82575C11.3382 3.73946 8.91053 3.83194 6.49974 4.10016C5.83779 4.17349 5.21894 4.46835 4.74486 4.9361C4.27164 5.40319 3.96911 6.01649 3.88646 6.67634C3.45323 10.3791 3.45418 14.122 3.88744 17.8248L3.92845 18.0699C4.0479 18.636 4.33042 19.1569 4.74486 19.566C5.21894 20.0338 5.83778 20.3286 6.49974 20.4019L7.1804 20.4732C10.5926 20.8055 14.1032 20.7817 17.5017 20.4019C18.1636 20.3285 18.7816 20.0336 19.2556 19.566C19.7296 19.0983 20.0309 18.4839 20.113 17.8228C20.2403 16.7343 20.33 15.6422 20.3826 14.5494L20.4001 14.4293C20.4102 14.3898 20.4252 14.3513 20.4431 14.314C20.4789 14.2396 20.5283 14.1731 20.5896 14.1197C20.9806 13.7759 21.359 13.417 21.7243 13.0445L21.779 12.9986C22.013 12.8314 22.3535 12.9746 22.3913 13.2633L22.3952 13.3238C22.3613 14.9043 22.2515 16.4841 22.0681 18.0543C21.8015 20.326 19.9768 22.1044 17.7185 22.357C13.9181 22.7776 10.0824 22.7776 6.28197 22.357C4.02367 22.1044 2.19776 20.3261 1.93236 18.0543C1.48218 14.1989 1.48218 10.3032 1.93236 6.44782C2.19773 4.17592 4.02346 2.39671 6.28294 2.14411ZM16.5505 3.58942C16.6976 3.6166 16.8389 3.67158 16.9656 3.75251C18.8373 4.94811 20.4645 6.49002 21.7595 8.2945L22.1599 8.85212C22.2739 9.01114 22.3355 9.20205 22.3357 9.39802C22.3357 9.59414 22.2744 9.78638 22.1599 9.94587L21.7595 10.5035C20.4796 12.2861 18.8747 13.8105 17.031 14.9996L16.9636 15.0425C16.2243 15.515 15.2491 15.0262 15.1853 14.1509L15.1257 13.3345C15.09 12.8442 15.062 12.3523 15.0398 11.8609L15.0359 11.7759L14.9509 11.7662L14.6472 11.7447C13.9384 11.718 13.2307 11.8643 12.5886 12.1773C11.8004 12.5618 11.1467 13.1764 10.7156 13.94L9.92259 15.3453L9.8347 15.4742C9.73717 15.5947 9.61102 15.6903 9.46654 15.7506C9.27317 15.8308 9.05711 15.844 8.85619 15.7886C8.6548 15.733 8.47792 15.6099 8.35326 15.442C8.22873 15.2739 8.16276 15.0701 8.16771 14.8619L8.22044 12.6988C8.25966 11.0797 8.92974 9.53922 10.0886 8.40778C11.2476 7.27643 12.8038 6.64231 14.4236 6.64216H15.0544L15.0593 6.54743C15.0782 6.1853 15.0993 5.82312 15.1257 5.46149L15.1853 4.64509C15.1998 4.44545 15.2656 4.25211 15.3767 4.08552C15.4884 3.91842 15.6431 3.7827 15.822 3.69294C16.0013 3.60313 16.2017 3.56145 16.4021 3.57184L16.5505 3.58942ZM16.9568 6.23102C16.9286 6.69016 16.904 7.15102 16.8884 7.61188C16.881 7.82287 16.8025 8.02439 16.6677 8.18415L16.6023 8.25446C16.4279 8.42269 16.1939 8.51796 15.9509 8.51813H14.4236C13.3494 8.51836 12.3134 8.91731 11.5173 9.63825C11.064 10.049 10.7078 10.548 10.4646 11.0982L10.2995 11.4703L10.6179 11.2164C11.0972 10.8345 11.6322 10.5235 12.2068 10.2965C13.2235 9.89484 14.3287 9.7686 15.4099 9.93122L16.0837 10.0328C16.2997 10.0654 16.4977 10.1724 16.6433 10.3355L16.7429 10.4693C16.8277 10.6076 16.8767 10.7674 16.8816 10.9322C16.8975 11.4763 16.9248 12.0203 16.9577 12.5631L16.9685 12.7525L17.1189 12.6363C18.2908 11.7279 19.3295 10.6583 20.1999 9.45563L20.2419 9.39704L20.1999 9.33845C19.3293 8.13566 18.2899 7.06714 17.1179 6.15876L16.9675 6.04255L16.9568 6.23102Z' fill='black'/%3E %3C/svg%3E");
  /* source: assets/basil_share-box-outline.svg */
}

.kg-icon--network {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.53913 1.06039C5.15089 0.938705 5.78523 1.0015 6.36153 1.2401C6.9379 1.47884 7.43139 1.88314 7.77802 2.40183C8.12459 2.92049 8.30965 3.53068 8.30973 4.15447C8.30771 4.7781 8.11622 5.38478 7.76745 5.89865L9.89853 8.56038C10.2719 8.41424 10.671 8.34156 11.0729 8.3458C11.5316 8.35068 11.9841 8.45657 12.3975 8.65552C12.8106 8.85447 13.1753 9.14161 13.4651 9.49696C13.7194 9.80871 13.911 10.1665 14.0296 10.5498H16.851C17.043 9.94113 17.4138 9.4031 17.9197 9.00964C18.4703 8.58145 19.1481 8.34787 19.8457 8.3458C20.4345 8.34496 21.0114 8.50972 21.5116 8.82043C22.0118 9.13117 22.4153 9.57545 22.6755 10.1037C22.9356 10.632 23.0428 11.2229 22.9841 11.8088C22.9255 12.3947 22.7032 12.9525 22.3435 13.4187C21.9838 13.885 21.5002 14.2419 20.9482 14.4473C20.3963 14.6525 19.7979 14.6991 19.2209 14.5815C18.6438 14.4639 18.1114 14.1864 17.6839 13.7813C17.2974 13.4151 17.0121 12.9571 16.851 12.4515H14.0296C13.911 12.8346 13.7192 13.1917 13.4651 13.5033C13.1751 13.859 12.81 14.1468 12.3964 14.3458C11.9829 14.5447 11.5307 14.6508 11.0719 14.6555C10.6696 14.6597 10.2711 14.5853 9.89747 14.4388L7.76745 17.1005C8.1166 17.6145 8.30763 18.2208 8.30973 18.8447C8.30973 19.4686 8.1246 20.0797 7.77802 20.5984C7.43138 21.1172 6.93798 21.5214 6.36153 21.7602C5.78518 21.9988 5.15095 22.0616 4.53913 21.9399C3.92727 21.8181 3.36504 21.5174 2.92391 21.0762C2.48286 20.6351 2.18197 20.0728 2.06027 19.461C1.93865 18.8492 2.00128 18.2149 2.23998 17.6386C2.47868 17.0623 2.88314 16.5698 3.40171 16.2232C3.92037 15.8766 4.53057 15.6915 5.15435 15.6915C5.54217 15.6932 5.92711 15.7666 6.28754 15.9071L8.41756 13.2443C8.06754 12.7309 7.87633 12.1241 7.87633 11.5001C7.87638 10.8758 8.06712 10.2685 8.41756 9.75489L6.28754 7.09315C5.92706 7.23374 5.54329 7.30812 5.1554 7.30986C4.53162 7.30977 3.92037 7.1247 3.40171 6.77814C2.88302 6.43151 2.47871 5.93802 2.23998 5.36166C2.00138 4.78535 1.93858 4.15102 2.06027 3.53925C2.18201 2.92734 2.48275 2.36519 2.92391 1.92403C3.36507 1.48287 3.92723 1.18213 4.53913 1.06039ZM19.3562 17.1608C20.2871 17.1609 21.0412 17.915 21.0412 18.8458C21.0412 19.7767 20.2871 20.5317 19.3562 20.5318C18.4253 20.5318 17.6702 19.7767 17.6702 18.8458C17.6702 17.9149 18.4253 17.1608 19.3562 17.1608ZM4.91016 17.6175C4.66745 17.6658 4.44463 17.785 4.26957 17.96C4.09439 18.1351 3.97435 18.3586 3.92602 18.6016C3.87773 18.8445 3.90311 19.0969 3.9979 19.3257C4.0927 19.5543 4.25307 19.7495 4.45879 19.887C4.66465 20.0246 4.90676 20.0983 5.15435 20.0984C5.48647 20.0984 5.80529 19.9664 6.04018 19.7316C6.27509 19.4967 6.40699 19.178 6.40699 18.8458C6.40697 18.5982 6.33411 18.3561 6.19663 18.1502C6.05899 17.9442 5.86315 17.7831 5.63426 17.6883C5.40538 17.5935 5.15314 17.5691 4.91016 17.6175ZM5.15435 9.81514C6.08519 9.81514 6.84026 10.5693 6.84039 11.5001C6.84039 12.4311 6.08527 13.1862 5.15435 13.1862C4.22363 13.1859 3.46936 12.4309 3.46936 11.5001C3.4695 10.5695 4.22372 9.81538 5.15435 9.81514ZM10.7865 10.2718C10.5438 10.3201 10.3209 10.4394 10.1459 10.6143C9.97071 10.7895 9.85067 11.013 9.80233 11.2559C9.754 11.4989 9.77941 11.7512 9.87422 11.98C9.96904 12.2088 10.1292 12.4048 10.3351 12.5424C10.5409 12.6799 10.7832 12.7527 11.0307 12.7528C11.3628 12.7528 11.6816 12.6208 11.9165 12.386C12.1514 12.1511 12.2833 11.8323 12.2833 11.5001C12.2833 11.2525 12.2105 11.0104 12.0729 10.8046C11.9353 10.5986 11.7395 10.4374 11.5106 10.3426C11.2817 10.2479 11.0294 10.2235 10.7865 10.2718ZM19.6015 10.2718C19.3585 10.3201 19.135 10.4392 18.9598 10.6143C18.7847 10.7895 18.6657 11.013 18.6173 11.2559C18.569 11.4989 18.5934 11.7512 18.6882 11.98C18.783 12.2089 18.9442 12.4048 19.1501 12.5424C19.356 12.6798 19.5981 12.7527 19.8457 12.7528C20.1779 12.7528 20.4966 12.6209 20.7315 12.386C20.9664 12.1511 21.0983 11.8323 21.0983 11.5001C21.0983 11.2525 21.0245 11.0105 20.8869 10.8046C20.7493 10.5987 20.5543 10.4374 20.3256 10.3426C20.0967 10.2478 19.8444 10.2235 19.6015 10.2718ZM17.3975 2.46948C18.3282 2.46959 19.0822 3.2238 19.0824 4.15447C19.0824 5.08533 18.3283 5.84041 17.3975 5.84051C16.4665 5.84051 15.7114 5.08539 15.7114 4.15447C15.7116 3.22374 16.4667 2.46948 17.3975 2.46948ZM5.39959 2.92614C5.15661 2.87781 4.90437 2.90322 4.67549 2.99802C4.44665 3.09283 4.25074 3.25295 4.11312 3.45891C3.97558 3.66478 3.90179 3.90689 3.90171 4.15447C3.90171 4.48668 4.03466 4.80539 4.26957 5.0403C4.50437 5.27505 4.82234 5.40699 5.15435 5.40711C5.40209 5.40711 5.64497 5.33439 5.85096 5.19675C6.05689 5.05915 6.21704 4.86318 6.31185 4.63438C6.40666 4.4055 6.43207 4.15326 6.38373 3.91028C6.33539 3.6674 6.21528 3.44482 6.04018 3.26969C5.86509 3.0946 5.64243 2.97452 5.39959 2.92614Z' fill='black'/%3E %3C/svg%3E");
  /* source: assets/network.svg */
}

.kg-icon--download {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='-0.412 -0.8 16.0 16.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.3852 8.79982C13.7164 8.79993 13.9848 9.0691 13.9848 9.4004V11.4004C13.9847 12.6153 12.9995 13.6006 11.7846 13.6006H3.38517C2.17022 13.6006 1.18509 12.6153 1.18498 11.4004V9.4004C1.18498 9.06916 1.45339 8.80002 1.78459 8.79982C2.11596 8.79982 2.38517 9.06903 2.38517 9.4004V11.4004C2.38529 11.9526 2.83296 12.4004 3.38517 12.4004H11.7846C12.3368 12.4004 12.7845 11.9526 12.7846 11.4004V9.4004C12.7846 9.06903 13.0538 8.79982 13.3852 8.79982ZM7.58537 0.799817C7.91655 0.800037 8.18498 1.06917 8.18498 1.4004V8.29103L10.5492 5.7881C10.7767 5.54754 11.1561 5.53642 11.3969 5.76368C11.6378 5.99121 11.6488 6.37141 11.4213 6.61232L8.02092 10.2119C7.90766 10.3318 7.7503 10.4003 7.58537 10.4004C7.42029 10.4004 7.26219 10.3319 7.14885 10.2119L3.74846 6.61232C3.521 6.3714 3.53198 5.99119 3.77287 5.76368C4.01379 5.53624 4.394 5.54722 4.6215 5.7881L6.98478 8.29103V1.4004C6.98478 1.06903 7.254 0.799817 7.58537 0.799817Z' fill='%231C3358'/%3E %3C/svg%3E");
  /* source: assets/heroicons_arrow-down-tray.svg */
}

.kg-icon--options {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='-5.612 -1.6 16.0 16.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2.38517 9.59962C3.04773 9.59984 3.58439 10.1372 3.58439 10.7998C3.58418 11.4622 3.04759 11.9988 2.38517 11.999C1.72257 11.999 1.1852 11.4624 1.18498 10.7998C1.18498 10.1371 1.72243 9.59962 2.38517 9.59962ZM2.38517 5.19923C3.04773 5.19945 3.58439 5.73682 3.58439 6.39943C3.58439 7.06203 3.04772 7.5994 2.38517 7.59962C1.72244 7.59962 1.18499 7.06216 1.18498 6.39943C1.18498 5.73668 1.72243 5.19923 2.38517 5.19923ZM2.38517 0.799817C3.0476 0.800038 3.58419 1.3366 3.58439 1.99904C3.58439 2.66164 3.04773 3.19901 2.38517 3.19923C1.72243 3.19923 1.18498 2.66178 1.18498 1.99904C1.18518 1.33647 1.72256 0.799817 2.38517 0.799817Z' fill='%231E1C1E'/%3E %3C/svg%3E");
  /* source: assets/options.svg */
}

.kg-icon--sidebar {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='-0.812 -3.2 16.0 16.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.6852 7.8C12.9613 7.8 13.1852 8.02386 13.1852 8.3C13.1851 8.57605 12.9612 8.8 12.6852 8.8H7.18516C6.90926 8.79979 6.68527 8.57592 6.68516 8.3C6.68516 8.02399 6.9092 7.80021 7.18516 7.8H12.6852ZM12.6852 4.3C12.9613 4.3 13.1852 4.52386 13.1852 4.8C13.1851 5.07605 12.9612 5.3 12.6852 5.3H1.68516C1.40926 5.29979 1.18527 5.07592 1.18516 4.8C1.18516 4.52399 1.4092 4.30021 1.68516 4.3H12.6852ZM12.6852 0.8C12.9613 0.8 13.1852 1.02386 13.1852 1.3C13.1851 1.57605 12.9612 1.8 12.6852 1.8H1.68516C1.40926 1.79979 1.18527 1.57592 1.18516 1.3C1.18516 1.02399 1.4092 0.800208 1.68516 0.8H12.6852Z' fill='%231C3358'/%3E %3C/svg%3E");
  /* source: assets/sidebar.svg */
}

.kg-icon--book {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0.0 0.019 24.0 24.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25' stroke='%231E1C1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
  /* source: assets/heroicons_book-open.svg */
}

.kg-icon--list {
  --kg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='-0.188 0.0 24.0 24.0' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' stroke='%231E1C1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
  /* source: assets/heroicons_list-bullet.svg */
}

/* ---------- Switch group (LUMEN WLP UI Kit 5141:53781) ----------
   <div class="kg-switch-group" role="group" aria-label="...">     add --sm for the small one
     <button class="kg-switch is-active" aria-pressed="true"><span class="kg-icon kg-icon--table"></span><span>Label</span></button>
     <button class="kg-switch is-disabled" aria-disabled="true">...</button>
   The icon is optional. One switch is on at a time. */
.kg-switch-group {
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  background-color: var(--color-white-100);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
}

.kg-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kg-switch-gap);
  margin: 0;
  padding: var(--spacing-3) var(--layout-spacing-md);
  font-family: var(--font-text);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  line-height: normal;
  white-space: nowrap;
  color: var(--content-02);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--kg-transition), color var(--kg-transition);
}

.kg-switch .kg-icon {
  --kg-icon-size: var(--kg-switch-icon);
}

.kg-switch:not(.is-active):not(.is-disabled):hover {
  background-color: var(--background-gray-01);
}

.kg-switch.is-active {
  color: var(--content-inverse);
  background-color: var(--background-primary);
}

.kg-switch.is-disabled {
  color: var(--content-disabled);
  cursor: not-allowed;
}

/* the ring sits inside, so the group's rounded edge does not cut it off */
.kg-switch:focus-visible {
  outline: var(--kg-focus-ring) solid transparent;
  box-shadow:
    inset 0 0 0 var(--kg-focus-gap) var(--inner-focus),
    inset 0 0 0 calc(var(--kg-focus-gap) + var(--kg-focus-ring)) var(--focus);
}

/* small: 32px high, 16px icon, 13px medium label (Figma GRAPHIA-Sandbox 257:5537) */
.kg-switch-group--sm {
  border-radius: var(--radius-md);
}

.kg-switch-group--sm .kg-switch {
  gap: var(--layout-spacing-xs);
  padding: var(--kg-switch-sm-pad-y) var(--layout-spacing-md);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
}

.kg-switch-group--sm .kg-switch .kg-icon {
  --kg-icon-size: var(--kg-switch-sm-icon);
}

/* ---------- Shared connections and raw data views ---------- */
.kg-net {
  padding: var(--layout-spacing-md);
}

.kg-net svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-text);
}

.kg-net__edge {
  fill: none;
  stroke: var(--border-gray-03);
  stroke-linecap: round;
}

.kg-net__node {
  fill: var(--background-primary);
  stroke: var(--color-white-100);
  stroke-width: 2;
}

.kg-net__label {
  font: var(--weight-semibold) var(--size-body-xs) var(--font-text);
  fill: var(--content-primary);
}

/* raw data: the copy button sits in the upper right corner and stays there while the text scrolls */
.kg-raw-view {
  display: flex;
  flex-direction: column;
}

.kg-raw-view > .kg-raw {
  flex: 1;
}

.kg-raw-copy.gt-button.gt-button-icon-only.gt-button-no-text {
  position: sticky;
  top: var(--layout-spacing-sm);
  z-index: 1;
  flex: none;
  align-self: flex-end;
  width: var(--spacing-5);
  min-height: var(--spacing-5);
  height: var(--spacing-5);
  margin: var(--layout-spacing-sm) var(--layout-spacing-sm) calc(var(--spacing-5) * -1) 0;
}

.kg-raw {
  margin: 0;
  padding: var(--layout-spacing-md);
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  line-height: var(--line-height-body);
  color: var(--content-02);
  white-space: pre;
  tab-size: 2;
}

/* ---------- Small screens: one column, the query can be collapsed ---------- */
@media (max-width: 767px) {
  .kg-ide,
  .kg-ide.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  .kg-ide__query,
  .kg-ide.is-collapsed .kg-ide__query {
    padding: var(--layout-spacing-md);
    border-right: 0;
    border-bottom: var(--kg-border-width) solid var(--border-gray-01);
  }

  .kg-ide__query {
    gap: var(--layout-spacing-md);
  }

  /* collapsed on a phone: the toggle and the icon buttons sit in one row */
  .kg-ide.is-collapsed .kg-ide__query {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .kg-ide.is-collapsed .kg-ide__divider {
    align-self: stretch;
    width: var(--kg-border-width);
    height: auto;
  }

  .kg-ide__rail {
    flex-direction: row;
  }

  .kg-ide__results {
    --kg-results-body-min-height: 50dvh;
  }

  .kg-ide__results {
    padding: var(--layout-margin-sm);
  }

  .kg-ide__table {
    max-height: 70dvh;
  }

  .kg-ide__table .kg-results__body {
    max-height: none;
  }

  .kg-ide__search {
    width: 100%;
  }

  .kg-ide__tools {
    width: 100%;
  }

  .kg-switch-group {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ---------- Prototype shortcut: floating "Jump to results" ----------
   Not part of the product. A fixed button in the corner with a menu of every kind of result, so a
   results page can be opened without going through the home page. Sits below the modals and the scrim. */
.kg-jump {
  position: fixed;
  right: var(--layout-spacing-md);
  bottom: var(--layout-spacing-md);
  z-index: 1010;
}

.kg-jump__btn.gt-button {
  --_bg: var(--color-black-100);
  --_fg: var(--color-white-100);
  --_border: var(--color-black-100);
  --_bg-hover: var(--background-gray-05);
  --_fg-hover: var(--color-white-100);
  --_border-hover: var(--background-gray-05);
  --_bg-active: var(--background-gray-06);
  --_fg-active: var(--color-white-100);
  --_border-active: var(--background-gray-06);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  box-shadow: var(--kg-shadow-lg);
}

.kg-jump .gt-dropdown-panel {
  bottom: calc(100% + var(--layout-spacing-xs));
  width: max-content;
  max-width: calc(100vw - var(--layout-spacing-md) * 2);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  font-family: var(--font-mono);
  color: var(--color-white-100);
  background-color: var(--color-black-100);
  border-color: var(--background-gray-05);
}

.kg-jump__title {
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-mono);
  color: var(--color-neutral-300);
}

.kg-jump .gt-dropdown-item > button {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  color: var(--color-white-100);
}

.kg-jump .gt-dropdown-item > button:hover,
.kg-jump .gt-dropdown-item > button:not(.selected-item):hover {
  color: var(--color-white-100);
  background-color: var(--background-gray-05);
}

.kg-jump .gt-dropdown-item > button:focus-visible {
  background-color: var(--background-gray-05);
  box-shadow: inset 0 0 0 var(--kg-focus-ring) var(--color-white-100);
}

.kg-jump__name {
  white-space: normal;
}

.kg-jump__views {
  font-family: var(--font-mono);
  color: var(--color-neutral-300);
}

/* ---------- Tooltip placed to the right of its button (collapsed sidebar) ---------- */
.kg-chart-tip.kg-chart-tip--right {
  transform: translate(var(--spacing-3), -50%);
}

/* ---------- Schema reference: off-canvas panel (same shell as the inspect panel) ---------- */
html:has(.kg-schema.is-open) {
  overflow: hidden;
}

.kg-schema__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-lg);
  padding-top: var(--layout-spacing-md);
}

.kg-schema__body p {
  margin: 0;
}

/* the same reading pattern as the user guide: a short heading, a two-column table, code chips for IRIs */
.kg-schema__sec {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.kg-schema__body h3 {
  margin: 0;
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  color: var(--content-01);
}

.kg-schema__body code {
  padding: 0 var(--spacing-1);
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  color: var(--content-primary);
  background-color: var(--background-gray-01);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

/* the panel is narrow, so the cells are tighter than in the guide */
.kg-schema__body .kg-table {
  margin: 0;
}

.kg-schema__body .kg-table th,
.kg-schema__body .kg-table td {
  padding: var(--spacing-2) var(--spacing-3);
}

.kg-schema__body .kg-table th:first-child,
.kg-schema__body .kg-table td:first-child {
  padding-left: 0;
  width: 42%;
}

/* ---- About this result: which values are missing (resources table only) ---- */
.kg-quality {
  padding: 0 var(--layout-spacing-md);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
  color: var(--content-02);
  font-size: var(--size-body-sm);
  background-color: var(--color-warn-light);
}

.kg-quality[hidden] {
  display: none;
}

.kg-quality > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  list-style: none;
  cursor: pointer;
}

.kg-quality > summary::-webkit-details-marker {
  display: none;
}

.kg-quality svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-quality__icon {
  display: inline-flex;
  color: var(--content-warn);
}

.kg-quality__more {
  margin-left: auto;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kg-quality__more:hover {
  color: var(--link-primary-hover);
  text-decoration: none;
}

.kg-quality__chev {
  display: inline-flex;
  transition: transform 0.15s ease;
  color: var(--color-accent);
}

.kg-quality[open] .kg-quality__chev {
  transform: rotate(180deg);
}

.kg-quality > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.kg-quality__body {
  padding: 0 0 var(--spacing-3);
}

.kg-quality__body ul {
  margin: 0 0 var(--spacing-2);
  padding: 0;
  list-style: none;
  max-width: 360px;
}

.kg-quality__body li {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-1) 0;
}

.kg-quality__body p {
  margin: 0;
  color: var(--content-03);
}

@media (prefers-reduced-motion: reduce) {
  .kg-quality__chev {
    transition: none;
  }
}

/* ---------- Hide duplicates ----------
   One work can arrive from several providers. A switch hides the extra versions; a badge shows how many are hidden.
   Table:  <button class="kg-ver" data-ver aria-expanded>+2 versions</button> in the title cell, <tr class="kg-table__ver"> rows when open.
   Toggle (any on/off setting): <button class="kg-toggle" role="switch" aria-checked="true"><span class="kg-toggle__track"></span>Label</button>
   Graph:  .kg-node--v (other version, pale), .kg-edge--version (dashed: the match is a guess), .kg-node__badge ("+2" on the main node). */
.kg-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--kg-button-height-s);
  padding: 0 var(--spacing-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--content-02);
  font: inherit;
  font-size: var(--size-body-sm);
  white-space: nowrap;
  cursor: pointer;
}

.kg-toggle[hidden] {
  display: none;
}

.kg-toggle__track {
  position: relative;
  flex: none;
  width: var(--spacing-6);
  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
  border-radius: var(--radius-full);
  background-color: var(--border-gray-03);
  transition: background-color 0.15s ease;
}

.kg-toggle__track::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-1) / 2);
  left: calc(var(--spacing-1) / 2);
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  background-color: var(--color-white-100);
  transition: transform 0.15s ease;
}

.kg-toggle[aria-checked="true"] .kg-toggle__track {
  background-color: var(--button-primary);
}

.kg-toggle[aria-checked="true"] .kg-toggle__track::after {
  transform: translateX(calc(var(--spacing-3) + var(--spacing-1) / 2));
}

.kg-toggle:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: var(--kg-focus-gap);
}

.kg-toggle.is-disabled {
  color: var(--content-disabled);
  cursor: not-allowed;
}

.kg-toggle.is-disabled .kg-toggle__track {
  background-color: var(--button-disabled);
}

/* in the graph header the switch sits next to "Max nodes" */
.kg-graph__ctl .kg-toggle {
  margin-left: var(--spacing-3);
  color: var(--content-04);
}

/* "+2 versions" badge in the title cell */
.kg-ver {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-left: var(--spacing-2);
  padding: 0 var(--spacing-2);
  border: var(--kg-border-width) solid var(--border-gray-03);
  border-radius: var(--radius-full);
  background-color: var(--background-gray-01);
  color: var(--content-02);
  font: inherit;
  font-size: var(--size-body-xs);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}

.kg-ver:hover {
  background-color: var(--background-gray-03);
}

.kg-ver:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: var(--kg-focus-gap);
}

.kg-ver svg {
  display: block;
  width: var(--spacing-3);
  height: var(--spacing-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-ver__chev {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.kg-ver[aria-expanded="true"] .kg-ver__chev {
  transform: rotate(180deg);
}

/* the other versions, when opened: quiet rows under the main one */
.kg-table__ver td {
  background-color: var(--background-gray-01);
  color: var(--content-03);
}

/* the table no longer has an arrow column: kg-app.css still sizes the first cell for one, so give it back its width */
.kg-table__entity td:first-child {
  width: auto;
  padding-right: var(--spacing-4);
}

.kg-table__ver td:first-child {
  padding-left: var(--spacing-5);
}

.kg-table__ver-tag {
  color: var(--content-02);
}

.kg-table__ver-date {
  margin-left: var(--spacing-1);
}

/* graph: other versions are small, pale and joined by a dashed line (a guess, not a stored link) */
.kg-legend--v,
.kg-node--v {
  --_bg: var(--background-gray-03);
  --_fg: var(--border-gray-03);
}

.kg-node--v .kg-node__label {
  fill: var(--content-03);
  font-size: 11px;
}

.kg-edge--version .kg-edge__line {
  stroke-dasharray: var(--kg-dash);
}

.kg-node__badge circle {
  fill: var(--button-primary);
  stroke: var(--color-white-100);
  stroke-width: 2;
}

.kg-node__badge text {
  fill: var(--color-white-100);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kg-toggle__track,
  .kg-toggle__track::after,
  .kg-ver__chev {
    transition: none;
  }
}

/* "Resource version" badge in the inspect panel header (GoTriple record page): this panel shows one other version of a work */
.kg-badge-version {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0 var(--spacing-2);
  border: var(--kg-border-width) solid var(--info);
  border-radius: var(--radius-sm);
  background-color: var(--color-info-light);
  color: var(--content-info);
  font-size: var(--size-body-xs);
  line-height: var(--line-height-body);
  vertical-align: middle;
  margin-right: var(--spacing-1);
}

.kg-badge-version__info {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  cursor: help;
}

.kg-badge-version__info svg {
  display: block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-badge-version__info:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: var(--kg-focus-gap);
}

.kg-badge-version-plain {
  background-color: var(--color-info-light);
  color: var(--content-info);
}

/* the "Hide raw predicates" toggle sits under the panel header, on the right */
.kg-inspect__option {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-2) var(--spacing-4) 0;
}

/* ---------- Shared connections: count line, key, note, axes ---------- */
.kg-net__head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.kg-net__note,
.kg-net__hint {
  margin: 0 0 var(--layout-spacing-sm);
  font-size: var(--size-body-sm);
  color: var(--content-02);
}

.kg-net__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1) var(--spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--size-body-xs) var(--font-mono);
  color: var(--content-02);
}

.kg-net__key li {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.kg-net__key-line {
  width: var(--spacing-4);
  border-top: 3px solid var(--border-gray-03);
}

.kg-net__key-dot {
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
}

/* one colour and one dash per kind of link, so the key never depends on colour alone */
.kg-net__key-line--k0 { border-top-color: var(--type-01-content); }
.kg-net__key-line--k1 { border-top-color: var(--type-02-content); border-top-style: dashed; }
.kg-net__key-line--k2 { border-top-color: var(--type-03-content); border-top-style: dotted; }

.kg-net {
  --kg-net-edge: var(--content-04);
  --kg-net-edge-opacity: 0.7;
}

/* at rest the lines are thin and calm; they stay at least 3:1 against white, so they are still readable */
.kg-net__edge {
  stroke: var(--kg-net-edge);
  stroke-opacity: var(--kg-net-edge-opacity);
  transition: stroke-opacity var(--kg-transition);
}

.kg-net__node,
.kg-net__label {
  transition: opacity var(--kg-transition);
}

/* hover or tab to a dot: its links and neighbours stay clear, the rest steps back */
.kg-net svg.is-focus .kg-net__link:not(.is-on) .kg-net__edge {
  stroke-opacity: 0.1;
}

.kg-net svg.is-focus .kg-net__link.is-on .kg-net__edge {
  stroke-opacity: 1;
}

.kg-net svg.is-focus .kg-net__node:not(.is-on),
.kg-net svg.is-focus .kg-net__label:not(.is-on) {
  opacity: 0.25;
}

/* "Hide labels" */
.kg-net.is-labels-hidden .kg-net__label {
  display: none;
}

.kg-net__edge--k0 { stroke: var(--type-01-content); }
.kg-net__edge--k1 { stroke: var(--type-02-content); stroke-dasharray: var(--kg-dash); }
.kg-net__edge--k2 { stroke: var(--type-03-content); stroke-dasharray: 1 4; }

.kg-net__link:hover .kg-net__edge {
  stroke-opacity: 1;
}

/* names get a thin halo so a line passing behind never cuts through the letters */
.kg-net__label {
  paint-order: stroke;
  stroke: var(--color-white-100);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.kg-net__axis-title {
 font: var(--size-body-xs) var(--font-mono);
  fill: var(--content-04);
}

.kg-net .kg-chart__hit {
  cursor: default;
}

.kg-net .kg-chart__hit:hover {
  stroke: var(--content-02);
  stroke-width: 1.5px;
}

.kg-net .kg-chart__hit:focus-visible {
  outline: none;
  stroke: var(--focus);
  stroke-width: 2px;
}

/* on a phone the drawing keeps a readable size and scrolls sideways; the count and key stay in view */
@media (max-width: 767px) {
  .kg-results__body > .kg-net {
    overflow-x: auto;
  }

  .kg-net svg {
    min-width: 40rem;
  }

  .kg-net__head {
    position: sticky;
    left: 0;
  }
}

/* ---- Explore in the graph: header, floating controls, legend ---- */
html.kg-noscroll {
  overflow: hidden;
}

.kg-graph__head {
  justify-content: space-between;
}

.kg-graph__headtext {
  flex: 1 1 10rem;
  min-width: 0;
}

.kg-graph__sub {
  overflow-wrap: anywhere;
}

.kg-graph__sep {
  display: inline-block;
  width: var(--kg-border-width);
  height: 1em;
  margin: 0 var(--spacing-3);
  vertical-align: middle;
  background-color: var(--border-gray-02);
}

.kg-graph__tools {
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  pointer-events: none;
}

.kg-graph__tools > * {
  pointer-events: auto;
}

.kg-graph__tools .kg-graph__ctl {
  margin-left: 0;
}

.kg-graph__key {
  position: absolute;
  left: var(--spacing-4);
  bottom: var(--spacing-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);
  list-style: none;
  font-size: var(--size-body-sm);
  color: var(--content-02);
  background-color: var(--color-white-100);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-md);
  box-shadow: var(--kg-shadow-sm);
}

.kg-graph__key:empty {
  display: none;
}

.kg-legend--open::before {
  --_bg: transparent;
  --_fg: var(--content-04);
  border-width: 2px;
  border-style: dashed;
}

/* the node-limit warning is the only message left at the bottom of the canvas */
@media (max-width: 767px) {
  .kg-graph__hint {
    top: 7rem;
    bottom: auto;
  }
}

/* text on the canvas gets a halo in the canvas colour, so a line never strikes through a name */
.kg-edge__label,
.kg-node__label {
  paint-order: stroke;
  stroke: var(--background-gray-01);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.kg-edge__label {
  pointer-events: none;
}

/* node menu: each relationship is a switch (on = drawn), with its count on the right */
.kg-menu__item.kg-toggle {
  display: flex;
  width: 100%;
  gap: var(--spacing-3);
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--content-01);
}

.kg-menu__count {
  margin-left: auto;
  font-size: var(--size-body-sm);
  color: var(--content-03);
}

.kg-graph__hint {
  color: var(--content-warn);
  background-color: var(--warn-light);
  border-color: var(--warn);
}

/* ---------- Resource titles in the results table are links, like every other entity ---------- */
.kg-table td.kg-table__title {
  font-weight: var(--weight-regular);
}