/* ======================================================================
   KG EXPLORER: NEW PARTS (everything here is kg-*, GoTriple has none of it)

   Built only from kg-tokens.css and kg-components.css. Load order:
     kg-tokens.css, kg-components.css, kg-app.css

   Part                     Classes
   Page shell               kg-shell (the header is gt-header, in kg-components.css)
   Home                     kg-home (__intro, __text, __title, __sub), kg-editor--home
   Card                     kg-card
   Editor                   kg-editor (__head, __hint, __actions, __meta)
   Collapsible reference    kg-disclosure
   Status band              kg-status-band (__text, __actions)
   Results card             kg-results (__body)
   Table                    kg-table (.num, .kg-table__entity)
   Empty / error / loading  kg-state (__icon, __title, __text, __fix)
   View bar                 kg-controls, kg-note
   Charts                   kg-bars, kg-chart, kg-chart-tip
   Examples                 kg-example, kg-code, kg-code-card, kg-modal-examples--browse
   Recent searches          kg-recent
   Inspect panel            kg-inspect (__head, __body), kg-prop, kg-prop-group, kg-link, kg-missing
   Graph overlay            kg-graph (__head, __canvas, __hint), kg-node, kg-edge, kg-menu
   Seed mode                kg-scrim, kg-seed-banner, kg-seedpick
   Site nav and pages       kg-page, kg-guide, kg-prose, kg-values, kg-resource
   Counts strip             kg-stats, kg-stat--button, kg-pred
   ====================================================================== */

:root {
  --kg-shell-width: 1536px;
  /* page content width (not in Figma) */
  /* header height, so the shell can fill the rest of the window: logo + padding + border (89px).
     Below 1280px the header is the mobile one, with the language strip on top (106px, measured). Update if the header changes. */
  --kg-header-height: calc(var(--kg-header-logo-height) + var(--layout-spacing-md) * 2 + var(--kg-border-width));
  --kg-editor-rows: 12;
  /* visible lines in the query editor */
  --kg-code-max-height: 11rem;
  /* example query preview */
  --kg-chart-height: 300px;
  /* trend chart */
  --kg-inspect-width: 480px;
  /* inspect panel */
  --kg-menu-width: 232px;
  /* graph node menu */
  --kg-node-r: 26px;
  /* graph node radius: resource and group */
  --kg-node-r-small: 19px;
  /* author and discipline */
  --kg-dash: 4 3;
  /* dashed outline = has more to expand */
  --kg-dot-size: 8px;
  /* entity dot in the counts strip */
  --kg-guide-nav-width: 240px;
  /* user guide side list */
  --kg-value-col: 220px;
  /* column width in the discipline list */
  --kg-home-text-width: 573px;
  /* home intro text (Figma kg-shell) */
  --kg-home-stats-width: 453px;
  /* home count badges (Figma kg-shell) */
  --kg-home-editor-rows: 6;
  /* visible lines in the home query box */
  --kg-scrollbar-thumb: 6px;
  /* Figma scrollbar thumb width */
  --kg-scrollbar-inset: 4px;
  /* Figma scrollbar padding around the thumb */
}

/* ---------- Page shell ---------- */
.kg-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-gray-01);
}

@media (max-width: 1279px) {
  :root {
    --kg-header-height: 106px;
  }
}

/* the footer stays at the bottom on short pages */
.kg-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--kg-shell-width);
  margin: 0 auto;
  padding: var(--layout-margin-sm);
  align-items: center;
  min-height: calc(100dvh - var(--kg-header-height));
}

/* Home only: photo at the bottom edge, scaled with the viewport width (Figma kg-shell).
   :has() switches it on while the home screen is showing, so no extra class or script.
   The shell runs edge to edge here so the photo is not cut off on wide screens. */
.kg-shell:has(.kg-home:not([hidden])) {
  max-width: none;
  background-color: var(--color-white-100);
  background-image: url("assets/bg-img.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100vw auto;
}

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

/* ---------- Home ---------- */
.kg-home {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-3xl);
  /* Figma: shell width minus the large side margins */
  max-width: calc(var(--kg-shell-width) - 2 * var(--layout-margin-lg));
  margin: 0 auto;
  padding-top: var(--layout-spacing-xl);
}

/* title + description on the left, count badges on the right */
.kg-home__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--layout-gap);
}

.kg-home__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--layout-gap);
  min-width: 0;
}

/* width of the description; the type itself comes from gt-text */
.kg-home__text .gt-text {
  max-width: var(--kg-home-text-width);
}

@media (max-width: 1279px) {
  .kg-home__intro {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Card ---------- */
.kg-card {
  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);
}

/* ---------- Editor ---------- */
.kg-editor {
  padding: var(--spacing-4);
}

.kg-editor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.kg-editor__head .gt-button {
  flex: none;
  margin-left: auto;
  align-self: center;
}

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

.kg-editor__hint {
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

.kg-editor textarea.gt-input-text {
  display: block;
  min-height: calc(var(--size-body-sm) * var(--line-height-body) * var(--kg-editor-rows));
  padding: var(--spacing-3);
  line-height: var(--line-height-body);
  background-color: var(--background-gray-01);
  tab-size: 2;
  white-space: pre;
}

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

.kg-editor__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.kg-editor__meta {
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

/* Home card (Figma kg-shell > Home): dark brand panel with the pattern, white query box */
.kg-editor--home {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-2xl);
  padding: var(--layout-spacing-3xl);
  background-color: var(--background-brand-dark);
  background-image: url("assets/pattern.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.kg-editor--home .kg-editor__head {
  justify-content: center;
  margin: 0;
}

.kg-editor--home .kg-editor__title {
  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-inverse);
  text-align: center;
}

.kg-editor--home textarea.gt-input-text {
  min-height: calc(var(--size-body-sm) * var(--line-height-body) * var(--kg-home-editor-rows) + var(--spacing-3) * 2);
  background-color: var(--color-white-100);
  border-color: var(--border-gray-03);
  border-radius: var(--radius-md);
}

.kg-editor--home .kg-editor__actions {
  margin-top: 0;
}

/* ---------- Collapsible reference ---------- */
.kg-disclosure {
  margin-top: var(--spacing-4);
  padding: 0;
}

.kg-disclosure>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  font-weight: var(--weight-semibold);
  color: var(--content-01);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}

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

.kg-disclosure>summary:hover {
  background-color: var(--background-gray-01);
}

.kg-disclosure>summary:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: calc(var(--kg-focus-gap) * -1);
}

.kg-disclosure>summary svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--kg-transition);
}

.kg-disclosure[open]>summary svg {
  transform: rotate(180deg);
}

.kg-disclosure__body {
  padding: 0 var(--spacing-4) var(--spacing-4);
  font-size: var(--size-body-sm);
  color: var(--content-02);
}

.kg-disclosure__body p {
  margin: 0 0 var(--spacing-2);
}

.kg-disclosure__body p:last-child {
  margin-bottom: 0;
}

.kg-disclosure code{
  font-family: var(--font-mono);
  font-size: var(--size-body-xs);
  padding: 0 var(--spacing-1);
  background-color: var(--background-gray-01);
  border-radius: var(--radius-xs);
}

.kg-muted {
  color: var(--content-04);
}

/* ---------- Results card and status band ---------- */
.kg-results {
  margin-top: var(--spacing-4);
  overflow: hidden;
}

.kg-status-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--background-gray-01);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-status-band__text {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--size-body-sm);
  color: var(--content-02);
}

.kg-status-band__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.kg-results__body {
  overflow-x: auto;
  min-height: 12rem;
}

/* ---------- Table ---------- */
.kg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-body-sm);
}

.kg-table th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
  color: var(--content-03);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-table td {
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--content-02);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-table tbody tr:last-child td {
  border-bottom: 0;
}

.kg-table tbody tr:hover td {
  background-color: var(--background-gray-01);
}

.kg-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kg-table td.kg-table__title {
  font-weight: var(--weight-semibold);
  color: var(--content-01);
}

.kg-table__entity {
  cursor: pointer;
}

.kg-table__entity .kg-table__go {
  color: var(--content-primary);
}

.kg-table__go {
  display: inline-flex;
  width: var(--spacing-5);
  height: var(--spacing-5);
  align-items: center;
  justify-content: center;
}

.kg-table__go svg {
  width: calc(var(--spacing-4) + var(--spacing-1) / 2);
  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Empty, error, loading ---------- */
.kg-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--layout-spacing-2xl) var(--spacing-4);
  text-align: center;
}

.kg-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  color: var(--content-04);
}

.kg-state__icon svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-state--ok .kg-state__icon {
  color: var(--content-success);
}

.kg-state--warn .kg-state__icon {
  color: var(--content-warn);
}

.kg-state--error .kg-state__icon {
  color: var(--content-error);
}

.kg-state__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-semibold);
  color: var(--content-01);
}

.kg-state__text {
  margin: 0;
  max-width: var(--layout-content-max-sm);
  color: var(--content-04);
}

.kg-state__fix {
  max-width: var(--layout-content-max-sm);
  margin-top: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-size: var(--size-body-sm);
  color: var(--content-02);
  background-color: var(--background-primary-light);
  border: var(--kg-border-width) solid var(--border-gray-02);
  border-radius: var(--radius-md);
}

/* ---------- View bar ---------- */
.kg-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-4);
}

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

.kg-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: var(--spacing-3) 0 0;
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

.kg-note svg {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  margin-top: var(--spacing-1);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* ---------- Charts ---------- */
.kg-bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
}

.kg-bars__row {
  display: grid;
  grid-template-columns: minmax(7rem, 14rem) 1fr 6rem;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--size-body-sm);
}

.kg-bars__label {
  color: var(--content-02);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kg-bars__track {
  height: var(--spacing-3);
  background-color: var(--background-gray-02);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kg-bars__fill {
  height: 100%;
  background-color: var(--background-primary);
  border-radius: var(--radius-sm);
}

.kg-bars__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--content-03);
}

.kg-chart {
  padding: var(--spacing-4);
}

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

.kg-chart__grid {
  stroke: var(--border-gray-01);
}

.kg-chart__axis {
  stroke: var(--border-gray-03);
}

.kg-chart__area {
  fill: var(--background-primary-light);
  stroke: none;
}

.kg-chart__line {
  fill: none;
  stroke: var(--background-primary);
}

.kg-chart__dot {
  fill: var(--background-primary);
}

.kg-chart__hit {
  fill: transparent;
  cursor: pointer;
}

.kg-chart__hit:hover+.kg-chart__dot,
.kg-chart__hit:focus-visible+.kg-chart__dot {
  fill: var(--content-02);
}

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

.kg-chart-tip {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - var(--spacing-3)));
  transition: opacity var(--kg-transition);
}

.kg-chart-tip.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- Examples ---------- */
.kg-modal-examples.modal {
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  padding-bottom: 0;
}

.kg-modal-examples .gt-modal-header {
  margin-bottom: var(--spacing-3);
}

.kg-modal-examples__intro {
  margin: var(--spacing-2) 0 0;
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

.kg-modal-examples__list {
  overflow-y: auto;
  margin: 0 calc(var(--layout-spacing-xl) * -1);
  padding: 0 var(--layout-spacing-xl) var(--layout-spacing-xl);
}

.kg-example {
  padding: var(--spacing-4) 0;
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-example:last-child {
  border-bottom: 0;
}

.kg-example__desc {
  margin: var(--spacing-1) 0 var(--spacing-2);
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

.kg-code-wrap {
  position: relative;
}

.kg-code {
  margin: 0;
  padding: var(--spacing-3);
  max-height: var(--kg-code-max-height);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--size-body-xs);
  line-height: var(--line-height-body);
  color: var(--content-01);
  background-color: var(--background-gray-01);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-md);
}

.kg-code-wrap .kg-code-copy {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
}

/* Browse example queries modal (Figma modal 249:4559) */
.kg-modal-examples--browse.modal {
  gap: var(--layout-spacing-lg);
  padding-bottom: var(--layout-spacing-xl);
  border: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-modal-examples--browse .gt-modal-header {
  margin-bottom: 0;
}

.kg-modal-examples--browse .gt-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
}

/* The list reaches the modal's side and bottom edges, so scrolling works over the modal's
   padding too and the scrollbar sits at the modal's edge. The padding moves inside the list. */
.kg-modal-examples--browse .kg-modal-examples__list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-xl);
  margin: 0 calc(var(--layout-spacing-xl) * -1) calc(var(--layout-spacing-xl) * -1);
  padding: 0 var(--layout-spacing-xl) var(--layout-spacing-xl);
}

.kg-modal-examples--browse .kg-example {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-sm);
  padding: 0;
  border-bottom: 0;
}

.kg-example__head {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-xs);
}

/* Code card: copy and select in the header, the query below it (Figma chat-output) */
.kg-code-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--background-gray-01);
  border: var(--kg-border-width) solid var(--border-gray-01);
  border-radius: var(--radius-lg);
}

.kg-code-card__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--layout-spacing-md);
  padding: var(--layout-spacing-sm) var(--layout-spacing-md);
}

.kg-code-card__head .gt-button.gt-button-icon-only.gt-button-no-text {
  width: var(--spacing-5);
  min-height: var(--spacing-5);
}

/* Figma puts 8px between the lines of the query */
.kg-code-card .kg-code {
  padding: var(--layout-spacing-sm) var(--layout-spacing-md) var(--layout-spacing-md);
  line-height: calc(var(--line-height-body) * 1em + var(--layout-spacing-sm));
  color: var(--content-02);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

/* Scrollbar look (Figma): a 6px rounded thumb with 4px around it, no track.
   In the code card it shows only on hover or keyboard focus. In the modal it is always there. */
.kg-code-card .kg-code::-webkit-scrollbar,
.kg-modal-examples--browse .kg-modal-examples__list::-webkit-scrollbar {
  width: calc(var(--kg-scrollbar-thumb) + var(--kg-scrollbar-inset) * 2);
  height: calc(var(--kg-scrollbar-thumb) + var(--kg-scrollbar-inset) * 2);
}

.kg-code-card .kg-code::-webkit-scrollbar-track,
.kg-code-card .kg-code::-webkit-scrollbar-corner,
.kg-modal-examples--browse .kg-modal-examples__list::-webkit-scrollbar-track {
  background: transparent;
}

.kg-code-card .kg-code::-webkit-scrollbar-thumb,
.kg-modal-examples--browse .kg-modal-examples__list::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: var(--kg-scrollbar-inset) solid transparent;
  border-radius: var(--radius-full);
}

.kg-code-card .kg-code::-webkit-scrollbar-thumb {
  background-color: transparent;
}

/* The background change is the same grey as the card. It makes the browser repaint the
   scrollbar when the thumb appears or disappears. */
.kg-code-card .kg-code:hover,
.kg-code-card .kg-code:focus-visible {
  background-color: var(--background-gray-01);
}

.kg-code-card .kg-code:hover::-webkit-scrollbar-thumb,
.kg-code-card .kg-code:focus-visible::-webkit-scrollbar-thumb,
.kg-modal-examples--browse .kg-modal-examples__list::-webkit-scrollbar-thumb {
  background-color: var(--border-gray-03);
}

/* Firefox has no way to size the thumb, so it gets its thin scrollbar in the same colours */
@supports not selector(::-webkit-scrollbar) {
  .kg-code-card .kg-code {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .kg-code-card .kg-code:hover,
  .kg-code-card .kg-code:focus-visible {
    scrollbar-color: var(--border-gray-03) transparent;
  }

  .kg-modal-examples--browse .kg-modal-examples__list {
    scrollbar-width: thin;
    scrollbar-color: var(--border-gray-03) transparent;
  }
}

/* ---------- Onboarding ---------- */
.kg-onboarding h3 {
  margin: var(--spacing-4) 0 var(--spacing-1);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
}

.kg-onboarding h3:first-child {
  margin-top: 0;
}

.kg-onboarding p,
.kg-onboarding ul {
  margin: 0 0 var(--spacing-2);
}

.kg-onboarding ul {
  padding-left: var(--spacing-5);
}

/* ---------- Recent searches ---------- */
.kg-recent {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-top: var(--spacing-5);
}

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

.kg-recent__label {
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .kg-shell {
    padding-left: var(--layout-margin-sm);
    padding-right: var(--layout-margin-sm);
  }

  .kg-bars__row {
    grid-template-columns: 1fr 5rem;
  }

  .kg-bars__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .kg-controls {
    align-items: stretch;
  }
}

/* ======================================================================
   SCRIM, SEED MODE
   Layers: graph 1020, scrim 1030, seeded card 1031, banner 1032, modal 1040/1050,
           inspect 1060/1061, graph menu 1070, toast 1200, chart tip 1300
   ====================================================================== */
.kg-scrim {
  position: fixed;
  inset: 0;
  z-index: 1030;
  background-color: var(--overlay-black-50);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--kg-transition), visibility var(--kg-transition);
}

.kg-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.kg-seedpick {
  position: relative;
  z-index: 1031;
  box-shadow: 0 0 0 calc(var(--kg-focus-ring) + var(--kg-focus-gap)) var(--inner-focus), 0 0 0 calc(var(--kg-focus-ring) * 2 + var(--kg-focus-gap)) var(--focus);
}

.kg-seedpick .kg-table__entity {
  cursor: crosshair;
}

.kg-seedpick .kg-table__entity:hover td {
  background-color: var(--info-light);
}

.kg-seed-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1032;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  padding: var(--spacing-4);
  background-color: var(--color-info-light);
  box-shadow: var(--kg-shadow-lg);
  color: var(--content-info);
  font-weight: var(--weight-semibold);
  border-bottom: var(--kg-border-width) solid var(--border-info);
}

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

.kg-seed-banner span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.kg-seed-banner svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-table__entity:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: calc(var(--kg-focus-ring) * -1);
}

.kg-table__entity td:first-child {
  width: var(--spacing-8);
  padding-right: 0;
}

/* ======================================================================
   INSPECT PANEL
   <aside class="kg-inspect" role="dialog" aria-modal="true" aria-labelledby="insp-title">
     <header class="kg-inspect__head"> type, title, tools </header>
     <div class="kg-inspect__body">
       <div class="kg-prop-group">Core</div>
       <div class="kg-prop"><div><div class="kg-prop__label">Title</div><div class="kg-prop__pred">schema:headline</div></div><div class="kg-prop__value">...</div></div>
   Raw predicates (the property names) are shown; add .is-predicates-hidden to the panel to hide them.
   ====================================================================== */
.kg-inspect {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1061;
  display: flex;
  flex-direction: column;
  width: min(var(--kg-inspect-width), 100%);
  background-color: var(--color-white-100);
  box-shadow: var(--kg-shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--kg-transition), visibility var(--kg-transition);
}

.kg-inspect.is-open {
  transform: none;
  visibility: visible;
}

.kg-inspect-scrim {
  z-index: 1060;
}

.kg-inspect__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background-color: var(--background-gray-01);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

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

.kg-inspect__title {
  margin: var(--layout-spacing-md) 0 0;
  font-family: var(--font-display);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.kg-inspect__tools {
  display: flex;
  gap: var(--spacing-1);
  flex: none;
}

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

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

.kg-inspect__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--spacing-4) var(--spacing-5);
}

.kg-prop-group {
  margin-top: var(--spacing-4);
  padding-bottom: var(--spacing-1);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--content-04);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-prop-group small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-regular);
}

.kg-prop {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
  font-size: var(--size-body-sm);
}

.kg-prop__label {
  color: var(--content-03);
}

.kg-prop__pred {
  margin-top: var(--spacing-1);
  font-family: var(--font-mono);
  font-size: var(--size-body-xs);
  color: var(--content-04);
}

.kg-inspect.is-predicates-hidden .kg-prop__pred {
  display: none;
}

.kg-prop__value {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-1) var(--spacing-2);
  color: var(--content-01);
  min-width: 0;
  overflow-wrap: anywhere;
}

.kg-link {
  padding: 0;
  font: inherit;
  color: var(--link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

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

.kg-link:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: var(--kg-focus-gap);
  border-radius: var(--radius-xs);
}

.kg-missing {
  font-style: italic;
  color: var(--content-04);
}

.kg-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--size-body-sm);
}

.kg-back svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .kg-prop {
    grid-template-columns: 1fr;
    gap: var(--spacing-1);
  }
}

/* ======================================================================
   GRAPH OVERLAY ("Direct connections")
   Node types follow the entity colours: resource = type-03 (Document),
   author = type-02 (Profile), discipline = type-01 (Discipline).
   A group node ("1,234 resources") uses the warn colours.
   Dashed outline = has more to expand. Solid = fully expanded.
   ====================================================================== */
.kg-graph {
  position: fixed;
  inset: 0;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  background-color: var(--background-gray-01);
}

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

.kg-graph__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-white-100);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-graph__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-semibold);
}

.kg-graph__title svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.kg-graph__legend {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-left: var(--spacing-2);
  font-size: var(--size-body-sm);
  color: var(--content-02);
}

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

.kg-legend::before {
  content: "";
  width: var(--spacing-3);
  height: var(--spacing-3);
  border-radius: var(--radius-full);
  background-color: var(--_bg);
  border: var(--kg-border-width) solid var(--_fg);
}

.kg-legend--r,
.kg-node--r {
  --_bg: var(--type-03-background);
  --_fg: var(--type-03-content);
}

.kg-legend--a,
.kg-node--a {
  --_bg: var(--type-02-background);
  --_fg: var(--type-02-content);
}

.kg-legend--d,
.kg-node--d {
  --_bg: var(--type-01-background);
  --_fg: var(--type-01-content);
}

.kg-legend--g,
.kg-node--g {
  --_bg: var(--warn-light);
  --_fg: var(--warn);
}

.kg-graph__ctl {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: auto;
  font-size: var(--size-body-sm);
  color: var(--content-04);
}

.kg-graph__ctl .gt-select {
  width: auto;
  min-width: 5rem;
}

.kg-graph__canvas {
  position: relative;
  flex: 1;
  min-height: 0;
}

.kg-graph__canvas>svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-text);
}

.kg-graph__info {
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-4);
}

.kg-graph__hint {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - var(--spacing-6));
  padding: var(--spacing-1) var(--spacing-4);
  text-align: center;
  font-size: var(--size-body-sm);
  color: var(--content-03);
  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-graph__hint.is-warn {
  color: var(--content-warn);
  background-color: var(--warn-light);
  border-color: var(--warn);
}

.kg-edge__line {
  stroke: var(--border-gray-03);
  stroke-width: 1.5;
}

.kg-edge__hit {
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
  cursor: help;
}

.kg-edge__label {
  fill: var(--content-04);
  font-size: 11px;
}

.kg-edge.is-dim,
.kg-node.is-dim {
  opacity: 0.12;
}

.kg-node {
  cursor: pointer;
  outline: none;
}

.kg-node__base {
  fill: var(--color-white-100);
}

.kg-node__body {
  fill: var(--_bg);
  stroke: var(--_fg);
  stroke-width: 2;
}

.kg-node.is-open .kg-node__body {
  stroke-dasharray: var(--kg-dash);
}

.kg-node:focus-visible .kg-node__body,
.kg-node:hover .kg-node__body {
  stroke-width: 3;
}

.kg-node:focus-visible .kg-node__ring {
  stroke: var(--focus);
}

.kg-node__ring {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
}

.kg-node__label {
  fill: var(--content-02);
  font-size: 12px;
  text-anchor: middle;
  pointer-events: none;
}

.kg-node__glyph {
  fill: var(--_fg);
  font-size: 14px;
  text-anchor: middle;
  pointer-events: none;
}

/* Node menu */
.kg-menu {
  position: fixed;
  z-index: 1070;
  width: var(--kg-menu-width);
  padding: var(--spacing-2);
  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-lg);
}

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

.kg-menu__head {
  padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--content-03);
  border-bottom: var(--kg-border-width) solid var(--border-gray-01);
  margin-bottom: var(--spacing-2);
  overflow-wrap: anywhere;
}

.kg-menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  padding-bottom: var(--spacing-2);
}

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

.kg-menu__label {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--content-04);
  border-top: var(--kg-border-width) solid var(--border-gray-01);
}

.kg-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-2);
  font: inherit;
  font-size: var(--size-body-sm);
  color: var(--content-01);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

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

.kg-menu__item:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: calc(var(--kg-focus-ring) * -1);
}

.kg-menu__item:disabled {
  color: var(--content-04);
  cursor: default;
}

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

.kg-danger:hover:not(:disabled) {
  color: var(--content-error);
  background-color: var(--error-light);
  border-color: var(--error);
}

/* How it works */
.kg-howto h3 {
  margin: var(--spacing-4) 0 var(--spacing-1);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
}

.kg-howto h3:first-child {
  margin-top: 0;
}

.kg-howto p,
.kg-howto ul {
  margin: 0 0 var(--spacing-2);
}

.kg-howto ul {
  padding-left: var(--spacing-5);
}

.kg-howto .kg-graph__legend {
  margin: var(--spacing-2) 0;
}

/* ======================================================================
   SITE NAV AND PAGES (user guide, about, resources) AND COUNTS STRIP
   ====================================================================== */

/* Header: logo, page links, help button. Wraps to two rows on small screens. */

/* Counts strip on the home page: gt-badge per entity type, the predicates one is a button. */
.kg-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-2);
  flex: 0 1 var(--kg-home-stats-width);
}

/* two rows: resources, datasets, media objects / authors, predicates */
.kg-stats__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-2);
}

.kg-stats .gt-badge strong {
  font-weight: var(--weight-semibold);
}

.kg-stat--button {
  --_border: var(--info-light);
  gap: var(--spacing-1);
  padding-right: var(--spacing-2);
  cursor: pointer;
  transition: border-color var(--kg-transition);
}

.kg-stat--button svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-stat--button:hover {
  --_border: var(--info);
}

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

@media (max-width: 1279px) {
  .kg-stats {
    flex: none;
    align-items: flex-start;
  }

  .kg-stats__row {
    justify-content: flex-start;
  }
}

/* Predicates list in the modal */
.kg-pred-group__title {
  margin: var(--spacing-4) 0 var(--spacing-1);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--content-04);
}

.kg-pred {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) var(--spacing-4);
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font: inherit;
  font-size: var(--size-body-sm);
  text-align: left;
  color: var(--content-02);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.kg-pred:hover {
  background-color: var(--background-gray-01);
}

.kg-pred:focus-visible {
  outline: var(--kg-focus-ring) solid var(--focus);
  outline-offset: calc(var(--kg-focus-gap) * -1);
}

.kg-pred code {
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  color: var(--content-primary);
  overflow-wrap: anywhere;
}

.kg-pred svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: var(--content-04);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pages */
.kg-page {
  padding-top: var(--layout-spacing-lg);
}

.kg-page__title {
  margin: 0 0 var(--layout-spacing-lg);
  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);
}

.kg-guide {
  display: grid;
  grid-template-columns: var(--kg-guide-nav-width) minmax(0, 1fr);
  gap: var(--layout-gap);
  align-items: start;
}

.kg-guide__nav {
  position: sticky;
  top: calc(var(--kg-header-logo-height) + 2 * var(--layout-spacing-lg) + var(--spacing-4));
}

/* sits below the sticky header */

/* Reading text */
.kg-prose {
  max-width: var(--layout-content-max-xl);
  padding: var(--layout-spacing-xl);
  color: var(--content-02);
  font-size: var(--size-body-base);
  line-height: var(--line-height-body);
}

.kg-prose--single {
  margin: 0;
}

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

.kg-prose h2 {
  margin: var(--layout-spacing-lg) 0 var(--spacing-2);
  font-size: var(--size-title-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--content-01);
}

.kg-prose h2:first-child,
.kg-prose article>h2:first-child {
  margin-top: 0;
}

.kg-prose h3 {
  margin: var(--layout-spacing-lg) 0 var(--spacing-1);
  font-size: var(--size-body-base);
  font-weight: var(--weight-semibold);
  color: var(--content-01);
}

.kg-prose p {
  margin: 0 0 var(--spacing-3);
}

.kg-prose p:last-child {
  margin-bottom: 0;
}

.kg-prose code,
.kg-disclosure 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);
}

.kg-prose pre.kg-code {
  margin: var(--spacing-2) 0 var(--spacing-3);
}

.kg-prose pre.kg-code code {
  padding: 0;
  background: none;
  border: 0;
}

.kg-prose__table {
  margin: var(--spacing-2) 0 var(--spacing-3);
}

.kg-prose__table td {
  vertical-align: top;
}

.kg-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kg-value-col), 1fr));
  gap: var(--spacing-2) var(--spacing-4);
  margin: var(--spacing-2) 0 var(--spacing-3);
}

.kg-value {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  font-size: var(--size-body-sm);
}

.kg-values-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.kg-prose .kg-code-wrap {
  margin: var(--spacing-2) 0 var(--spacing-3);
}

/* Resources */
.kg-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kg-guide-nav-width), 1fr));
  gap: var(--layout-gap);
}

.kg-resource {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--layout-spacing-lg);
  color: var(--content-02);
  text-decoration: none;
  transition: border-color var(--kg-transition);
}

.kg-resource:hover {
  border-color: var(--border-primary);
}

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

.kg-resource__title {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--size-title-h4);
  font-weight: var(--weight-semibold);
  color: var(--content-primary);
}

.kg-resource__title svg {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-resource__text {
  font-size: var(--size-body-sm);
}

@media (max-width: 767px) {
  .kg-guide {
    grid-template-columns: minmax(0, 1fr);
  }

  .kg-guide__nav {
    position: static;
  }

  .kg-pred {
    grid-template-columns: minmax(0, 1fr) var(--spacing-4);
  }

  .kg-pred span {
    grid-column: 1;
    grid-row: 2;
  }

  .kg-pred svg {
    grid-column: 2;
    grid-row: 1;
  }
}