/* Knowledge graph: evidence drawer, terminology tooltips, candidate table.
 *
 * Kept out of app.css so the explainability surfaces stay separable from the
 * canvas chrome they sit beside. Every colour reads an existing token, so both
 * themes are inherited rather than redefined.
 */

/* --- info icon + tooltip ----------------------------------- */

.kg-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: .32em;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  flex: none;
  vertical-align: middle;
  /* role=button span, not a <button>: these get no UA reset and sit inside
     other buttons, so the text-selection and sizing defaults matter. */
  box-sizing: content-box;
  user-select: none;
}

.kg-info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.kg-info:hover,
.kg-info[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-press);
}

.kg-term-tip {
  position: absolute;
  /* Above the sticky filter bar (30) and its popovers (40). The tooltip is a
     body-level element, so it only has to beat the highest sibling context. */
  z-index: 500;
  width: max-content;
  max-width: 21rem;
  /* Some vocabularies enumerate eight or nine values; without a ceiling the
     panel grows taller than the viewport and covers the graph it explains. */
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .7rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  /* Opaque on purpose: this floats over a WebGL canvas, and any transparency
     lets graph nodes read straight through the text. */
  background: var(--surface);
  box-shadow: var(--e3);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

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

.kg-term-tip h4 {
  margin: 0 0 .35rem;
  font-size: .78rem;
  color: var(--ink);
}

.kg-term-tip p { margin: 0 0 .4rem; }
.kg-term-tip p:last-child { margin-bottom: 0; }
.kg-term-scale,
.kg-term-source { color: var(--muted); font-size: .69rem; }
.kg-term-why { border-left: 2px solid var(--accent-soft); padding-left: .5rem; }
/* The formula must not wrap mid-expression, so it scrolls inside the tip
   rather than breaking across lines. */
.kg-term-formula {
  display: block; margin: 0 0 .35rem; padding: .4rem .5rem;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--accent-soft); color: var(--ink);
  font-family: var(--mono); font-size: .72rem;
  overflow-x: auto; white-space: nowrap;
}
.kg-term-formula-note { color: var(--muted); }
.kg-term-missing { color: var(--warn); }
/* Value lists read as a two-column glossary rather than a stack of pairs,
   which roughly halves the height of the longer vocabularies. */
.kg-term-values {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .12rem .5rem;
  margin: .4rem 0;
  padding-top: .4rem;
  border-top: 1px solid var(--rule);
  font-size: .68rem;
}

.kg-term-values dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.kg-term-values dd { margin: 0; color: var(--muted); line-height: 1.35; }

/* --- evidence drawer --------------------------------------- */

.kg-evidence { font-size: .76rem; line-height: 1.5; }
.kg-ev-head { margin-bottom: .7rem; }

.kg-ev-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: .15rem 0 .4rem;
  font-size: .9rem;
}

.kg-ev-end {
  padding: .1rem .4rem;
  border-radius: 5px;
  background: var(--surface-alt);
  font-weight: 650;
}

.kg-ev-disease { background: var(--info-bg); color: var(--info); }
.kg-ev-gene { background: var(--accent-soft); color: var(--accent-press); }
.kg-ev-drug { background: var(--violet-bg); color: var(--violet); }
.kg-ev-trial { background: var(--crit-bg); color: var(--crit); }
.kg-ev-tissue { background: var(--good-bg); color: var(--good); }

.kg-ev-verb {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kg-ev-asserts { margin: 0; color: var(--muted); font-size: .72rem; }

.kg-ev-headline {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .55rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-alt);
}

.kg-ev-headline-label { color: var(--muted); font-size: .7rem; }

.kg-ev-headline-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.kg-ev-verdict {
  margin: .55rem 0;
  padding: .5rem .6rem;
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 6px 6px 0;
  background: var(--surface-alt);
}

.kg-ev-verdict .hint { margin: .25rem 0 0; font-size: .69rem; }
.kg-ev-tier-clinical { border-left-color: var(--good); background: var(--good-bg); }
.kg-ev-tier-curated { border-left-color: var(--info); background: var(--info-bg); }
.kg-ev-tier-limited { border-left-color: var(--warn); background: var(--warn-bg); }
.kg-ev-tier-literature_only { border-left-color: var(--warn); background: var(--warn-bg); }
.kg-ev-tier-measured { border-left-color: var(--good); background: var(--good-bg); }

.kg-flags { margin: .4rem 0; padding: 0; list-style: none; }

.kg-flag {
  position: relative;
  margin-bottom: .3rem;
  padding-left: 1.1rem;
  font-size: .72rem;
  color: var(--ink-soft);
}

.kg-flag::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.kg-flag-support::before { content: "\2713"; color: var(--good); }
.kg-flag-caution::before { content: "!"; color: var(--warn); }

.kg-ev-total {
  margin: .5rem 0 .2rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.kg-ev-section { margin-top: .85rem; }

.kg-ev-section h4 {
  margin: 0 0 .35rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.kg-ev-table { width: 100%; border-collapse: collapse; font-size: .72rem; }

.kg-ev-table th,
.kg-ev-table td {
  padding: .28rem .3rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.kg-ev-table th { font-weight: 600; color: var(--ink-soft); }

.kg-ev-table td.mono {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kg-ev-meter { width: 40%; }

.kg-ev-note {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: .66rem;
  line-height: 1.35;
}

.kg-meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.kg-meter-fill { display: block; height: 100%; background: var(--accent); }

.kg-ev-papers,
.kg-ev-trials,
.kg-ev-list { margin: 0; padding: 0; list-style: none; }

.kg-ev-papers li,
.kg-ev-trials li,
.kg-ev-list li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .72rem;
}

.kg-ev-meta {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .67rem;
}

.kg-chip-row { display: flex; flex-wrap: wrap; gap: .25rem; }

.kg-badge {
  display: inline-block;
  margin-left: .3rem;
  padding: .05rem .35rem;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: .63rem;
  font-weight: 600;
  white-space: nowrap;
}

.kg-badge-warn { background: var(--warn-bg); color: var(--warn); }
.kg-badge-derived { background: var(--info-bg); color: var(--info); }
.kg-badge-evidence-supported-candidate { background: var(--good-bg); color: var(--good); }
.kg-badge-clinically-precedented { background: var(--good-bg); color: var(--good); }
.kg-badge-potential-opportunity { background: var(--info-bg); color: var(--info); }
.kg-badge-evidence-supported { background: var(--info-bg); color: var(--info); }
.kg-badge-requires-validation { background: var(--warn-bg); color: var(--warn); }
.kg-badge-literature-only { background: var(--warn-bg); color: var(--warn); }

/* --- candidate table --------------------------------------- */

.kg-candidates .kg-candidate-controls { display: flex; gap: .4rem; }

.kg-candidates-weights {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: 0 1rem .5rem;
}

.kg-candidates-notes {
  margin: .5rem 0 0;
  padding: .5rem 1rem;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.kg-candidates-notes li {
  position: relative;
  padding-left: 1rem;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.5;
}

.kg-candidates-notes li::before {
  content: "\2022";
  position: absolute;
  left: .2rem;
  color: var(--rule-strong);
}

.kg-candidates tbody tr[data-node] { cursor: pointer; }
.kg-candidates tbody tr[data-node]:hover { background: var(--surface-alt); }

.kg-candidates tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.kg-why summary {
  cursor: pointer;
  color: var(--accent);
  font-size: .69rem;
  font-weight: 600;
}

.kg-why ul {
  margin: .3rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 26rem;
}

.kg-why li {
  padding: .22rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .68rem;
  line-height: 1.4;
}

.kg-why li span {
  display: block;
  color: var(--muted);
  font-size: .65rem;
}

/* --- colour-by control -------------------------------------- */

.kg-seg-label {
  padding: 0 .4rem 0 .1rem;
  color: var(--muted);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  align-self: center;
}

.kg-seg [data-colorby].is-active {
  background: var(--accent-soft);
  color: var(--accent-press);
  font-weight: 600;
}

/* --- search hits -------------------------------------------- */

.kg-hit-alias {
  display: block;
  font-style: normal;
  font-size: .62rem;
  color: var(--accent-press);
  line-height: 1.3;
}

/* Canonical term as the parent row, its other names nested beneath. */
.kg-hit-term { align-items: flex-start; }

.kg-hit-body {
  display: block;
  min-width: 0;
  width: 100%;
  text-align: left;
}

.kg-hit-name {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 650;
}

.kg-hit-count { color: var(--muted); font-weight: 400; }

.kg-hit-secondary {
  display: block;
  color: var(--ink-soft);
  font-size: .68rem;
  line-height: 1.3;
}

.kg-hit-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: .25rem;
  padding-left: .5rem;
  border-left: 2px solid var(--rule);
}

.kg-alias {
  padding: .02rem .28rem;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: .6rem;
  line-height: 1.5;
}

.kg-alias.is-match {
  background: var(--accent-soft);
  color: var(--accent-press);
  font-weight: 600;
}

.kg-alias.is-more { background: transparent; font-style: italic; }

/* --- legend ------------------------------------------------- */

.legend-mix {
  display: block;
  font-style: normal;
  font-size: .6rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Entity-type key: colour cannot say "gene" while it is saying "NSCLC", so
   the type key identifies itself by the same pictogram the canvas draws. */
.legend-icon {
  width: 13px;
  height: 13px;
  flex: none;
  object-fit: contain;
  border-radius: 3px;
}

.legend-focus-title { color: var(--warn); }

.kg-legend .legend-title + ul + .legend-title { margin-top: .5rem; }

/* --- hover card -------------------------------------------- */
/*
   The card answers "is this worth clicking?", so it stays narrow and scannable.
   Widened from the original 280px because a fact list needs a label column and
   a value column side by side; any narrower and every value wraps.
*/

.kg-tooltip { max-width: 330px; }

.kg-hover-summary {
  margin: .3rem 0 .45rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.kg-hover-facts {
  display: grid;
  gap: .12rem;
  margin: .35rem 0 .45rem;
}

.kg-hover-fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: baseline;
  font-size: .71rem;
}

.kg-hover-fact dt { color: var(--muted); }

.kg-hover-fact dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

/* Tone is set server-side so the card does not re-derive what is worrying
   about a value -- 40 of 42 organs is a warning, 3 is not. */
.kg-hover-fact.is-warn dd { color: var(--warn); }
.kg-hover-fact.is-good dd { color: var(--good); }

/* --- inspector profiles ------------------------------------- */

.kg-profile { margin-top: .9rem; }

.kg-profile h4 {
  display: flex;
  align-items: center;
  margin: .9rem 0 .4rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.kg-profile h4:first-child { margin-top: 0; }
.kg-profile h4 .hint { text-transform: none; letter-spacing: 0; margin-left: .3rem; }

.kg-signals { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }

.kg-signal {
  padding: .45rem .55rem;
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 6px 6px 0;
  background: var(--surface-alt);
}

.kg-signal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}

.kg-signal-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kg-signal-value { font-weight: 700; font-size: .8rem; color: var(--ink); }

.kg-signal-note {
  margin: .2rem 0 0;
  font-size: .69rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.kg-signal.is-good { border-left-color: var(--good); background: var(--good-bg); }
.kg-signal.is-mixed { border-left-color: var(--info); background: var(--info-bg); }
.kg-signal.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.kg-signal.is-unknown { border-left-color: var(--rule-strong); }

.kg-stops .kg-stop { border-left: 3px solid var(--rule-strong); padding-left: .5rem; }
.kg-stops .kg-stop.is-negative { border-left-color: var(--crit); }
.kg-stops .kg-stop.is-neutral { border-left-color: var(--good); }
.kg-stops .kg-stop.is-unknown { border-left-color: var(--rule-strong); }

/* --- collapsible filter bar --------------------------------- */
/*
   Six filter groups wrap to three rows on a typical laptop, which pushed the
   canvas ~340px down the page. Collapsing hides the controls but *never* the
   active-filter chips: a graph silently narrowed by filters you cannot see is
   worse than one that takes up space.
*/

.kg-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.kg-filter-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease;
}

.kg-filterbar[data-collapsed="true"] .kg-filter-caret {
  transform: rotate(-90deg);
}

.kg-filterbar[data-collapsed="true"] .kg-menu-row { display: none; }

/* Nothing below the head but the chips, so the bar can sit tighter. */
.kg-filterbar[data-collapsed="true"] { padding-bottom: .55rem; }

.kg-filterbar[data-collapsed="true"] .kg-active-chips:empty { display: none; }

/* Hand the reclaimed height to the canvas rather than just sliding the page
   up, so collapsing buys a bigger graph and not only less scrolling. */
.kg-filterbar[data-collapsed="true"] ~ .kg-workspace .kg-stage {
  height: min(80vh, 900px);
}

/* --- menu additions ---------------------------------------- */

.kg-menu-desc {
  display: block;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.35;
}

.kg-checklist-scroll { max-height: 15rem; overflow-y: auto; }