/* M7: the imported knowledge library.
 *
 * Utilitarian by design. M8 owns the finished knowledge surface; what this has
 * to do is make every M7 behaviour legible and reachable — which class a source
 * carries, whether it is enabled, whether it is narrator-only, what its
 * passages are, and what an indexing failure was.
 *
 * The three class colours are the ones the Insights token bar uses for the
 * matching prompt sections (`pages/Play/format.js`), so a Canon badge here and
 * a Canon slice there are the same colour. Two views of one thing should not
 * need a reader to learn two palettes.
 */

.knowledge-panel > p { margin-top: 0; }

.knowledge-import {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.knowledge-import input[type='text'] { width: 100%; }
.knowledge-import .dim { font-size: 0.8rem; margin-top: -4px; }

.knowledge-notice {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
}

.knowledge-status { margin-top: 10px; font-size: 0.8rem; line-height: 1.5; }

.knowledge-row {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
/* A disabled source is still listed, still inspectable and still editable — it
   is simply out of retrieval. Fading it says "not in play" without saying
   "gone", which is the distinction disable exists to make. */
.knowledge-row.disabled { opacity: 0.62; }

.knowledge-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knowledge-title {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.knowledge-title:hover { color: var(--accent); }

.knowledge-class {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid currentColor;
}
.knowledge-class-canon { color: #c76f9c; }
.knowledge-class-reference { color: #8fa8d1; }
.knowledge-class-inspiration { color: #a99ad6; }

.knowledge-badge {
  font-size: 0.7rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
}
.knowledge-badge.failed { color: var(--danger); border-color: var(--danger); }

.knowledge-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.8rem;
}
.knowledge-controls label { display: inline-flex; align-items: center; gap: 4px; }
.knowledge-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--danger);
  font-size: 0.8rem;
}

.knowledge-detail { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); }
.knowledge-facts { font-size: 0.78rem; line-height: 1.55; }
/* The digest is shown whole so it can be compared against another copy, which
   means it has to be allowed to wrap. */
.knowledge-hash { font-family: var(--font-mono, monospace); word-break: break-all; }
.knowledge-detail-buttons { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }

/* Imported text, everywhere it appears: the source inspector, the passage
   inspector, and the Insights provenance rows.
 *
 * `<pre>` with wrapping, and never `dangerouslySetInnerHTML` anywhere near it.
 * This is where H06 and H07 are actually decided — a `<script>` in an imported
 * file is text in a text node, and a `javascript:` URL is characters rather
 * than an href, because nothing turns either of them into markup. */
.knowledge-text {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 22rem;
  overflow-y: auto;
}

.knowledge-chunk { margin: 8px 0; }
.knowledge-used { margin-bottom: 10px; }
.knowledge-used .knowledge-class { margin-left: 6px; }

/* The filename beside the title in the list. Dim, because the title is what the
   reader named it and this is what the file was called. */
.knowledge-filename { font-size: 0.78rem; }