/* Knowledge demos (History Matters, MC-MKE, EchoQA).
 * Same shell as the other demo families: serif heading, green eyebrow, 1px rules.
 * Boxes are used only for structured data; explanatory text stays plain. */
.knowledge-demo {
  --kd-ink: var(--ink, #202a26);
  --kd-muted: var(--muted, #626b66);
  --kd-accent: var(--accent, #2b6151);
  --kd-line: var(--line, #dce2dc);
  --kd-wash: var(--wash, #f0f4ee);
  --kd-tint: #f7f9f6;
  margin-block: 28px;
  padding: 28px;
  border: 1px solid var(--kd-line);
  background: #fff;
  color: var(--kd-ink);
  font-size: 14px;
  line-height: 1.65;
  min-width: 0;
}
.knowledge-demo [hidden] { display: none !important; }
.knowledge-demo p { margin: 0; }
.knowledge-demo :focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 3px; }

/* Heading shell shared with the evaluation, decoding and reasoning demos. */
.knowledge-demo .kd-heading { margin-bottom: 24px; }
.knowledge-demo .kd-eyebrow { margin: 0 0 7px; color: var(--kd-accent); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.knowledge-demo h3 { margin: 0 0 10px; font: 400 25px/1.3 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.knowledge-demo .kd-heading > p:last-child { max-width: 75ch; color: var(--kd-muted); font-size: 14px; line-height: 1.75; }
.knowledge-demo h4 { margin: 0 0 10px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.knowledge-demo .kd-label { display: block; margin: 0 0 8px; color: var(--kd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.knowledge-demo .kd-small { color: var(--kd-muted); font-size: 12px; line-height: 1.65; }
.knowledge-demo .kd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.knowledge-demo code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* Controls. */
.knowledge-demo .kd-controls { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 26px 0 22px; padding-top: 18px; border-top: 1px solid var(--kd-line); }
.knowledge-demo .kd-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.knowledge-demo .kd-controls legend { margin-bottom: 7px; padding: 0; font-size: 12px; font-weight: 600; }
.knowledge-demo .kd-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-demo .kd-buttons button { min-height: 38px; padding: 7px 12px; border: 1px solid #b8c5bc; border-radius: 0; background: #fff; color: var(--kd-ink); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; cursor: pointer; }
.knowledge-demo .kd-buttons button:hover { border-color: var(--kd-accent); }
.knowledge-demo .kd-buttons button[aria-pressed="true"] { border-color: var(--kd-accent); background: var(--kd-wash); color: var(--kd-accent); font-weight: 600; }

/* Structured data. */
/* position: relative keeps visually hidden text inside the scroll region. */
.knowledge-demo .kd-table-wrap { position: relative; max-width: 100%; overflow-x: auto; }
.knowledge-demo table { border-collapse: collapse; }
.knowledge-demo caption { padding: 0 0 7px; color: var(--kd-ink); font-size: 12px; font-weight: 600; text-align: left; }
.knowledge-demo thead th { color: var(--kd-muted); font-size: 11.5px; font-weight: 600; vertical-align: bottom; }
.knowledge-demo .kd-readout { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--kd-line); }
.knowledge-demo .kd-status { max-width: 82ch; font-size: 13.5px; line-height: 1.7; }
.knowledge-demo .kd-provenance { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--kd-line); color: var(--kd-muted); font-size: 11.5px; line-height: 1.7; }
.knowledge-demo .kd-provenance a, .knowledge-demo .kd-small a, .knowledge-demo .kd-echo-source a { color: var(--kd-accent); }

/* History Matters: fact chain. */
.knowledge-demo .kd-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--kd-line); }
.knowledge-demo .kd-periods li { min-width: 0; padding: 10px 13px; border-left: 1px solid var(--kd-line); }
.knowledge-demo .kd-periods li:first-child { border-left: 0; }
.knowledge-demo .kd-periods strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.knowledge-demo .kd-period-years { display: block; color: var(--kd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.knowledge-demo .kd-period-role { display: block; color: var(--kd-muted); font-size: 11.5px; }
.knowledge-demo .kd-periods li.is-target { background: var(--kd-wash); }
.knowledge-demo .kd-periods li.is-target strong { color: var(--kd-accent); }
.knowledge-demo .kd-periods li.is-target .kd-period-role::after { content: " · asked by this probe"; color: var(--kd-accent); }
.knowledge-demo .kd-periods li.is-outside { color: #8b938e; }
.knowledge-demo .kd-periods li.is-outside strong { font-weight: 500; }

/* History Matters: edit requests. */
.knowledge-demo .kd-requests { margin-top: 24px; }
.knowledge-demo .kd-request-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; margin-bottom: 10px; }
.knowledge-demo .kd-targets { width: 100%; font-size: 12.5px; }
.knowledge-demo .kd-targets th, .knowledge-demo .kd-targets td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--kd-line); text-align: left; vertical-align: top; }
.knowledge-demo .kd-targets td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; overflow-wrap: anywhere; }
.knowledge-demo .kd-targets td:last-child { width: 38%; }
.knowledge-demo .kd-target-group th { padding-top: 10px; color: var(--kd-accent); font-size: 11px; font-weight: 600; }

/* History Matters: probe. */
.knowledge-demo .kd-probe { margin-bottom: 26px; }
.knowledge-demo .kd-probe-table { width: 100%; margin-bottom: 8px; }
.knowledge-demo .kd-probe-table th, .knowledge-demo .kd-probe-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--kd-line); text-align: left; vertical-align: top; }
.knowledge-demo .kd-probe-table td:last-child { width: 30%; font-weight: 600; }
.knowledge-demo .kd-cloze { display: block; font: 400 18px/1.45 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.knowledge-demo .kd-blank { color: var(--kd-muted); }
.knowledge-demo .kd-probe-question { display: block; margin-top: 3px; color: var(--kd-muted); font-size: 12px; }

/* History Matters: measured dumbbells (hollow square = Table 2, filled square = Table 3). */
.knowledge-demo .kd-measured { padding-top: 20px; border-top: 1px solid var(--kd-line); }
.knowledge-demo .kd-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 4px; color: var(--kd-muted); font-size: 11.5px; }
.knowledge-demo .kd-key-plain::before, .knowledge-demo .kd-key-meto::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1.5px solid var(--kd-ink); background: #fff; vertical-align: 0; }
.knowledge-demo .kd-key-meto::before { border-color: var(--kd-accent); background: var(--kd-accent); }
.knowledge-demo .kd-dumbbells { margin: 0; padding: 0; list-style: none; }
.knowledge-demo .kd-dumbbell,
.knowledge-demo .kd-axis { display: grid; grid-template-columns: 62px minmax(0, 1fr) 118px 62px; gap: 14px; align-items: center; }
.knowledge-demo .kd-dumbbell { padding: 7px 8px; border-bottom: 1px solid #edf0eb; font-size: 13px; }
.knowledge-demo .kd-dumbbell.is-selected { background: var(--kd-wash); font-weight: 650; }
.knowledge-demo .kd-db-track { position: relative; height: 14px; }
.knowledge-demo .kd-db-track::before { content: ""; position: absolute; top: 6px; right: 0; left: 0; height: 1px; background: var(--kd-line); }
.knowledge-demo .kd-db-span { position: absolute; top: 6px; height: 2px; background: var(--kd-accent); }
.knowledge-demo .kd-db-plain, .knowledge-demo .kd-db-meto { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; box-sizing: border-box; }
.knowledge-demo .kd-db-plain { border: 1.5px solid var(--kd-ink); background: #fff; }
.knowledge-demo .kd-db-meto { background: var(--kd-accent); }
.knowledge-demo .kd-db-values, .knowledge-demo .kd-db-change { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.knowledge-demo .kd-db-values span { color: var(--kd-muted); }
.knowledge-demo .kd-db-change.is-up { color: var(--kd-accent); }
.knowledge-demo .kd-axis { padding: 3px 8px 0; color: var(--kd-muted); font-size: 10.5px; }
.knowledge-demo .kd-axis span { grid-column: 2; grid-row: 1; }
.knowledge-demo .kd-axis span:first-child { justify-self: start; }
.knowledge-demo .kd-axis span:nth-child(2) { justify-self: center; }
.knowledge-demo .kd-axis span:last-child { justify-self: end; }

/* History Matters: change map. */
.knowledge-demo .kd-map { margin-top: 26px; }
.knowledge-demo .kd-map > .kd-small { margin-bottom: 8px; }
.knowledge-demo .kd-delta-map { width: 100%; min-width: 440px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.knowledge-demo .kd-delta-map th, .knowledge-demo .kd-delta-map td { padding: 7px 10px; border-bottom: 1px solid var(--kd-line); text-align: right; }
.knowledge-demo .kd-delta-map th:first-child { text-align: left; }
.knowledge-demo .kd-delta-map tbody th { font-weight: 400; }
.knowledge-demo .kd-delta-map tbody th span { display: block; font-weight: 650; }
.knowledge-demo .kd-delta-map tbody th small { display: block; color: var(--kd-muted); font-size: 11px; line-height: 1.4; }
.knowledge-demo .kd-delta-map td.is-up { color: var(--kd-accent); }
.knowledge-demo .kd-delta-map tr.is-selected, .knowledge-demo .kd-delta-map .is-col { background: var(--kd-tint); }
.knowledge-demo .kd-delta-map thead th.is-col { background: var(--kd-wash); color: var(--kd-ink); font-weight: 700; }
.knowledge-demo .kd-delta-map td.is-cell { background: var(--kd-wash); outline: 1px solid var(--kd-accent); outline-offset: -1px; font-weight: 650; }

/* MC-MKE: decomposed example. */
.knowledge-demo .kd-mc-example > .kd-small:first-of-type { margin-bottom: 10px; max-width: 82ch; }
.knowledge-demo .kd-decomp { width: 100%; min-width: 520px; margin-bottom: 8px; font-size: 13px; }
.knowledge-demo .kd-decomp th, .knowledge-demo .kd-decomp td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--kd-line); text-align: left; vertical-align: top; }
.knowledge-demo .kd-decomp tbody th { width: 20%; font-weight: 600; white-space: nowrap; }
.knowledge-demo .kd-decomp td:last-child { width: 32%; color: var(--kd-muted); }
.knowledge-demo .kd-decomp .kd-role-edit { background: var(--kd-tint); }
.knowledge-demo .kd-decomp .kd-role-edit td:last-child { color: var(--kd-accent); font-weight: 600; }
.knowledge-demo .kd-decomp .kd-role-check td:last-child { color: var(--kd-ink); font-weight: 600; }
.knowledge-demo .kd-decomp tr > :first-child { padding-left: 8px; }
.knowledge-demo .kd-was { display: block; color: var(--kd-muted); font-size: 11.5px; }

/* MC-MKE: measured results. */
.knowledge-demo .kd-mc-results { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--kd-line); }
.knowledge-demo .kd-mc-layout { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: 28px; align-items: start; }
.knowledge-demo .kd-plot-figure { margin: 0; min-width: 0; }
.knowledge-demo .kd-plot { display: block; width: 100%; height: auto; font-family: inherit; }
.knowledge-demo .kd-plot .kd-grid { stroke: #edf0eb; stroke-width: 1; }
.knowledge-demo .kd-plot .kd-tick { fill: var(--kd-muted); font-size: 10.5px; }
.knowledge-demo .kd-plot .kd-axis-title { fill: var(--kd-ink); font-size: 11.5px; }
.knowledge-demo .kd-plot .kd-diagonal { stroke: #9aa69e; stroke-width: 1; stroke-dasharray: 4 3; }
.knowledge-demo .kd-plot .kd-point { fill: #fff; stroke: #5d6862; stroke-width: 1.5; }
.knowledge-demo .kd-plot .kd-point.is-selected { fill: var(--kd-accent); stroke: var(--kd-accent); }
.knowledge-demo .kd-plot .kd-point-label { fill: #46504b; font-size: 12px; }
.knowledge-demo .kd-plot .kd-point-label.is-selected { fill: var(--kd-accent); font-weight: 700; }
.knowledge-demo .kd-plot-figure figcaption { margin-top: 6px; }
.knowledge-demo .kd-mc-side { min-width: 0; }
.knowledge-demo .kd-metrics { width: 100%; min-width: 430px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.knowledge-demo .kd-metrics th, .knowledge-demo .kd-metrics td { padding: 6px 7px; border-bottom: 1px solid var(--kd-line); text-align: right; white-space: nowrap; }
.knowledge-demo .kd-metrics th:first-child { padding-left: 0; text-align: left; }
.knowledge-demo .kd-metrics tbody th { font-weight: 400; }
.knowledge-demo .kd-metrics thead th:nth-child(2), .knowledge-demo .kd-metrics thead th:nth-child(3) { color: var(--kd-ink); }
.knowledge-demo .kd-metrics tr.is-selected { background: var(--kd-wash); }
.knowledge-demo .kd-metrics tr.is-selected > * { font-weight: 650; }
.knowledge-demo .kd-component { width: auto; min-width: min(280px, 100%); margin: 18px 0 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.knowledge-demo .kd-component th, .knowledge-demo .kd-component td { padding: 5px 18px 5px 0; border-bottom: 1px solid var(--kd-line); text-align: left; }
.knowledge-demo .kd-component tbody th { font-weight: 400; }
.knowledge-demo .kd-component td.is-higher { color: var(--kd-accent); font-weight: 650; }

/* EchoQA: replay a published response, then inspect measured prompt conditions. */
.knowledge-demo .kd-echo-case > h4 { margin-bottom: 8px; font: 400 19px/1.45 Georgia, "Times New Roman", serif; }
.knowledge-demo .kd-echo-options { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; font-size: 12.5px; }
.knowledge-demo .kd-echo-options .is-key { color: var(--kd-accent); border-bottom: 1px solid currentColor; }
.knowledge-demo .kd-echo-options small { font-size: 10.5px; }
.knowledge-demo .kd-echo-document { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--kd-line); }
.knowledge-demo .kd-echo-document h5 { margin: 0 0 6px; color: var(--kd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.knowledge-demo .kd-echo-document > p:first-of-type { font-size: 14px; line-height: 1.7; }
.knowledge-demo .kd-echo-document .kd-small { margin-top: 6px; font-size: 11.5px; }
.knowledge-demo .kd-echo-trace { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.knowledge-demo .kd-echo-trace > div { padding-top: 10px; border-top: 1px solid var(--kd-accent); }
.knowledge-demo .kd-echo-trace .is-blocked { border-top: 1px dashed #8e9892; }
.knowledge-demo .kd-echo-trace .is-blocked strong { color: var(--kd-muted); }
.knowledge-demo .kd-echo-trace strong { display: block; font-size: 14px; }
.knowledge-demo .kd-echo-trace p { margin-top: 6px; font-size: 13px; line-height: 1.65; }
.knowledge-demo .kd-echo-output { display: grid; grid-template-columns: minmax(7rem, .5fr) 1fr; align-items: center; gap: 16px; margin: 18px 0; padding: 12px 0; border-block: 1px solid var(--kd-line); }
.knowledge-demo .kd-echo-output strong { display: block; font-size: 17px; }
.knowledge-demo .kd-echo-output > p { font-size: 13px; line-height: 1.65; }
.knowledge-demo .kd-echo-source { color: var(--kd-muted); font-size: 11.5px; line-height: 1.65; }
.knowledge-demo .kd-echo-measurements { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--kd-line); }
.knowledge-demo .kd-echo-measurements > p { font-size: 13.5px; }
.knowledge-demo .kd-echo-instruction { margin: 4px 0 12px; font-size: 13px; line-height: 1.7; }
.knowledge-demo .kd-echo-chart > div { display: grid; grid-template-columns: minmax(8rem, 1.1fr) 1fr 4.2rem; gap: 12px; align-items: center; padding: 8px; border-bottom: 1px solid #edf0eb; font-size: 12.5px; }
.knowledge-demo .kd-echo-chart .is-selected { background: var(--kd-wash); font-weight: 650; }
.knowledge-demo .kd-echo-chart i { display: block; height: 8px; background: #edf1ea; }
.knowledge-demo .kd-echo-chart i::after { content: ""; display: block; width: var(--echo-rate); min-width: 1px; height: 100%; background: var(--kd-accent); }
.knowledge-demo .kd-echo-chart strong { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.knowledge-demo .kd-echo-measurements > .kd-small { margin-top: 12px; }

/* Narrow layouts. */
@media (max-width: 760px) {
  .knowledge-demo .kd-mc-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .knowledge-demo .kd-plot-figure { max-width: 440px; }
  .knowledge-demo .kd-request-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
  .knowledge-demo { padding: 20px 16px; }
  .knowledge-demo h3 { font-size: 23px; }
  .knowledge-demo .kd-heading > p:last-child { font-size: 13px; }
}
@media (max-width: 560px) {
  .knowledge-demo .kd-controls { gap: 14px; }
  .knowledge-demo .kd-periods { grid-template-columns: minmax(0, 1fr); }
  .knowledge-demo .kd-periods li { border-left: 0; border-top: 1px solid var(--kd-line); }
  .knowledge-demo .kd-periods li:first-child { border-top: 0; }
  .knowledge-demo .kd-cloze { font-size: 16px; }
  .knowledge-demo .kd-probe-table td:last-child { width: 38%; }
  /* Dumbbells: numbers on the first line, the full-width track below. */
  .knowledge-demo .kd-dumbbell { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name values change" "track track track"; gap: 4px 12px; }
  .knowledge-demo .kd-db-name { grid-area: name; }
  .knowledge-demo .kd-db-track { grid-area: track; }
  .knowledge-demo .kd-db-values { grid-area: values; }
  .knowledge-demo .kd-db-change { grid-area: change; }
  .knowledge-demo .kd-axis { grid-template-columns: minmax(0, 1fr); }
  .knowledge-demo .kd-axis span { grid-column: 1; }
  /* Change map: form codes only, so all four editors fit on a phone. */
  .knowledge-demo .kd-delta-map { min-width: 0; }
  .knowledge-demo .kd-delta-map th, .knowledge-demo .kd-delta-map td { padding: 7px 6px; }
  .knowledge-demo .kd-delta-map tbody th small { display: none; }
  /* Decomposed example: knowledge type and role above the statement. */
  .knowledge-demo .kd-decomp { min-width: 0; }
  .knowledge-demo .kd-decomp thead { display: none; }
  .knowledge-demo .kd-decomp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; padding: 9px 8px; border-bottom: 1px solid var(--kd-line); }
  .knowledge-demo .kd-decomp tbody th, .knowledge-demo .kd-decomp td { display: block; width: auto; padding: 0; border: 0; }
  .knowledge-demo .kd-decomp tr > :first-child { padding-left: 0; }
  .knowledge-demo .kd-decomp td:first-of-type { grid-column: 1 / -1; grid-row: 2; }
  .knowledge-demo .kd-decomp td:last-child { width: auto; font-size: 12px; text-align: right; }
  .knowledge-demo .kd-echo-trace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .knowledge-demo .kd-echo-output { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .knowledge-demo .kd-echo-chart > div { grid-template-columns: minmax(6.5rem, 1fr) .7fr 3.6rem; gap: 7px; font-size: 12px; }
}