/* dash-retrieval.css — kg-rag retrieval bench monitor.
   Engineering-schematic flavor: tight monospaced table, color-coded
   rows for baseline / scoped / best / worst. Reuses dash.css base
   tokens. */

.retrieval-page {
  background: #0c1014;
  color: #d8e2ec;
  min-height: 100vh;
}

.retrieval-stage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.retrieval-intro h1 {
  font-family: "Chakra Petch", monospace;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: #f0f4f8;
}

.retrieval-lede {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #b8c6d4;
  max-width: 760px;
  margin: 0 0 12px;
}

.retrieval-lede code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: #e0e8f0;
}

.retrieval-table-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
}

.retrieval-table {
  border-collapse: collapse;
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
}

.retrieval-table th {
  text-align: left;
  padding: 6px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-weight: 500;
  color: #88a;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.retrieval-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.retrieval-table tbody tr:last-child td {
  border-bottom: none;
}

.retrieval-table .strategy-name {
  color: #f0f4f8;
  font-weight: 500;
}

.retrieval-table .tone-baseline .strategy-name {
  color: #d8e2ec;
}

.retrieval-table .tone-scoped {
  background: rgba(140, 180, 255, 0.04);
}

.retrieval-table .tone-best {
  background: rgba(120, 220, 140, 0.07);
}

.retrieval-table .tone-best .strategy-name {
  color: #88e6a0;
}

.retrieval-table .tone-worst {
  background: rgba(220, 120, 100, 0.07);
}

.retrieval-table .tone-worst .strategy-name {
  color: #e69088;
}

.retrieval-loading {
  text-align: center;
  color: #6a7a8a;
  font-style: italic;
  padding: 14px;
}

/* ── sparkline column ──────────────────────────────────────────
   Engineering-schematic blues. Tone-specific overrides match the
   row tints so the trend line reads as the same strategy. */
.retrieval-table .th-spark {
  text-align: left;
}

.retrieval-table .strategy-spark {
  padding: 4px 12px;
  min-width: 130px;
}

.spark-svg {
  display: block;
  width: 100%;
  max-width: 160px;
  min-width: 80px;
  height: 28px;
  overflow: visible;
}

.spark-axis {
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
}

.spark-line {
  fill: none;
  stroke: #8ab4ff;            /* baseline schematic-blue */
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: spark-draw 1100ms ease-out forwards;
}

.spark-dot-last {
  fill: #f0f4f8;
  stroke: #8ab4ff;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 3px rgba(138, 180, 255, 0.45));
}

.spark-empty {
  fill: #54688a;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* tone-coordinated sparklines: match row tints */
.tone-scoped .spark-line       { stroke: #b8c9ff; }
.tone-scoped .spark-dot-last   { stroke: #b8c9ff; }

.tone-best .spark-line         { stroke: #88e6a0; }
.tone-best .spark-dot-last     { stroke: #88e6a0;
                                 filter: drop-shadow(0 0 3px rgba(136, 230, 160, 0.55)); }

.tone-worst .spark-line        { stroke: #e69088; }
.tone-worst .spark-dot-last    { stroke: #e69088;
                                 filter: drop-shadow(0 0 3px rgba(230, 144, 136, 0.55)); }

@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 720px) {
  .retrieval-table .strategy-spark { min-width: 90px; padding: 4px 6px; }
  .spark-svg { max-width: 110px; min-width: 80px; height: 24px; }
}

.retrieval-footnote {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 13px;
  color: #88a0b4;
  line-height: 1.65;
  max-width: 760px;
}

.retrieval-footnote code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: #d0d8e0;
  background: rgba(255,255,255,0.05);
  padding: 1px 4px;
  border-radius: 3px;
}