/* graph-views.css — the Knowledge Graph's VIEW card (bottom-left of the canvas)
   and the condensed-view overlay. Markup is injected by
   concept-graph/graph-views.js; nothing in index.html carries these classes.

   Lives beside the `.kg2-*` rules in how-it-works.css rather than inside them:
   that file is ORANGE and owns the graph's own chrome (controls, legend, dock).
   Linked AFTER it, because `.kg2-graph.has-kgv .kg2-legend` below repositions
   the legend and has to come later in the cascade to win at equal
   specificity — the legend and this card share the bottom-left corner. */

.kg2-graph { --kgv-w: 236px; }

/* ---- the card --------------------------------------------------------- */
.kgv-panel {
  position: absolute; left: 14px; bottom: calc(var(--kg2-dock-h, 0px) + 12px); z-index: 6;
  width: var(--kgv-w); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 7px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px 8px;
  font-size: 11.5px; color: var(--text); backdrop-filter: blur(4px);
}
.kgv-head { display: flex; align-items: center; justify-content: space-between; }
.kgv-title { font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.kgv-reset {
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--muted); font: inherit; font-size: 11px; padding: 1px 6px; cursor: pointer;
}
.kgv-reset:hover { color: var(--accent-text); border-color: var(--border); }
/* Nothing to collapse in the complete view. */
.kgv-panel[data-view="complete"] .kgv-reset { visibility: hidden; }

/* Segmented control — same shape as #kg-colormode in the opposite corner. */
.kgv-seg { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.kgv-seg button {
  flex: 1 1 0; background: transparent; color: var(--muted); border: 0; padding: 5px 4px;
  font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.kgv-seg button + button { border-left: 1px solid var(--border); }
.kgv-seg button.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.kgv-seg button:not(.active):hover { color: var(--text); }

.kgv-hint { color: var(--muted); line-height: 1.4; min-height: 1.4em; }
.kgv-hint b { color: var(--text); }
/* The two fan colours, named in the hint the same way they are drawn. */
.kgv-in  { color: #3d8bfd; font-weight: 700; }
.kgv-out { color: #f28c28; font-weight: 700; }

/* ---- chapters fold ---------------------------------------------------- */
.kgv-chapters { border-top: 1px solid var(--border); padding-top: 6px; }
.kgv-chapters > summary { cursor: pointer; color: var(--muted); font-weight: 600; list-style-position: inside; }
.kgv-chapters > summary:hover { color: var(--text); }
.kgv-chapters[open] > summary { margin-bottom: 5px; }
.kgv-chapter-list { display: flex; flex-direction: column; gap: 3px; max-height: 32vh; overflow: hidden auto; }
.kgv-chapter { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.kgv-chapter input { margin: 0; }
.kgv-swatch { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(var(--well-rgb) / calc(.25 * var(--well-k))); }
.kgv-chapter-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgv-chapter-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.kgv-warn { color: var(--warn); margin-top: 4px; }

/* ---- sharing the corner with the legend ------------------------------ */
/* The legend was alone in the bottom-left; with the card there it moves
   right of it. Width is capped so the two never overlap the controls. */
.kg2-graph.has-kgv .kg2-legend {
  left: calc(var(--kgv-w) + 26px);
  max-width: calc(100% - var(--kgv-w) - 48px);
}
.kg2-graph.has-kgv .kg2-legend-grouped { max-width: calc(100% - var(--kgv-w) - 48px); }

/* ---- condensed overlay ------------------------------------------------ */
/* Same box as #kg-cy. The main canvas stays MOUNTED underneath (visibility,
   not display): lesson-graph.js keeps measuring and animating it, and a
   display:none container cannot be measured — the reason that file builds
   lazily in the first place. */
.kgv-condensed { position: absolute; inset: 0 0 var(--kg2-dock-h, 0px) 0; z-index: 2; }
.kgv-condensed[hidden] { display: none; }
#kg-cy.kgv-behind { visibility: hidden; }

@media (max-width: 820px) {
  .kg2-graph { --kgv-w: 190px; }
  .kgv-hint { display: none; }
}