/* exhibit.css — styles for the chunking/retrieval exhibit pages */

/* ── Page layout ──────────────────────────────────────────────────────────── */

.exhibit-main {
  padding-top: var(--space-10);
  padding-bottom: var(--space-20);
  justify-content: flex-start;
}

/* ── Bottom line up front (the very first thing on the page) ──────────────── */

.exhibit-bluf {
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--text-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-8);
  margin-bottom: var(--space-8);
}

.exhibit-bluf__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.exhibit-bluf__statement {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ── Header block ─────────────────────────────────────────────────────────── */

.exhibit-header {
  margin-bottom: var(--space-8);
}

.exhibit-header h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.exhibit-header p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── The transferable rule (large, teal, prominent) ───────────────────────── */

.exhibit-lede {
  margin-bottom: var(--space-10);
}

.exhibit-rule-card {
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  background: var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}

.exhibit-rule-card p {
  color: var(--accent);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ── Two-column split layout ──────────────────────────────────────────────── */

.exhibit-split {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.exhibit-split__col {
  flex: 1;
  min-width: 280px;
}

/* ── Document characteristics cards ──────────────────────────────────────── */

.exhibit-doc-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.exhibit-doc-card--before {
  border-top: 3px solid var(--text-muted);
}

.exhibit-doc-card--after {
  border-top: 3px solid var(--accent);
}

.exhibit-doc-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.exhibit-doc-card__stat {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.exhibit-doc-card__stat:last-child {
  border-bottom: none;
}

.exhibit-doc-card__stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.exhibit-doc-card__stat-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.exhibit-doc-card__stat-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.exhibit-doc-card__stat-caption {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* ── Sources mini-section within the doc comparison panel ────────────────── */

.exhibit-doc-card__sources {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.exhibit-doc-card__source-line {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.exhibit-doc-card__source-line a {
  color: var(--accent);
}

.exhibit-doc-card__source-line code {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ── Major sections ───────────────────────────────────────────────────────── */

.exhibit-section {
  margin-bottom: var(--space-10);
}

.exhibit-section__heading {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.exhibit-section__body {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.exhibit-section__body p + p {
  margin-top: var(--space-3);
}

/* ── Comparison axis note ─────────────────────────────────────────────────── */

.exhibit-axis-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-subtle);
  line-height: 1.5;
}

/* ── Query demonstration block ────────────────────────────────────────────── */

.exhibit-demo {
  margin-bottom: var(--space-8);
}

.exhibit-demo__query {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  line-height: 1.5;
  word-break: break-word;
}

/* ── Side-by-side result pair ─────────────────────────────────────────────── */

.exhibit-result-pair {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.exhibit-result {
  flex: 1;
  min-width: 260px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.exhibit-result__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.exhibit-result__rank {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.exhibit-result__cosine {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.exhibit-result__path {
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.exhibit-result__path--populated {
  color: var(--accent);
}

.exhibit-result__path--empty {
  color: var(--text-muted);
  font-style: italic;
}

.exhibit-result__preview {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

/* Plain-language caption stating what a result actually is — narrative
   first, deliberately more prominent than the raw preview text below it. */
.exhibit-result__plain-caption {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: var(--space-3);
}

/* ── Complication block (garbled-beats-clean, amber tone) ─────────────────── */

.exhibit-complication {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);
}

.exhibit-complication .exhibit-section__heading {
  color: #f59e0b;
}

.exhibit-complication .exhibit-section__body {
  color: var(--text-secondary);
}

/* Cosine values within the complication block */
.exhibit-complication .exhibit-result__cosine {
  color: #f59e0b;
}

/* ── Forward reference sentence ───────────────────────────────────────────── */

.exhibit-fwd {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: var(--space-10);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--border);
}

/* ── Technical metadata footer ────────────────────────────────────────────── */

.exhibit-meta {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  margin-top: var(--space-8);
}

.exhibit-meta__heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.exhibit-meta__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

.exhibit-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.exhibit-meta__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exhibit-meta__value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Loading and error states ─────────────────────────────────────────────── */

.exhibit-loading,
.exhibit-error {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-secondary);
}

.exhibit-error {
  color: var(--error);
}

.exhibit-error code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--error-dim);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  color: var(--error);
  text-align: left;
}

/* ── Separator rule ───────────────────────────────────────────────────────── */

.exhibit-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-10) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §3.2 — the size lever (dilution↔fragmentation valley)
   Namespaced under .size-lever-* so nothing here touches §3.1's selectors
   above. Reuses exhibit-* primitives (card, axis-note, complication, meta)
   where the vocabulary already fits; only adds new rules for the
   document-picker, the detented slider, and the valley display.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Document picker (4 set-members) ──────────────────────────────────────── */

.size-lever-picker {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.size-lever-picker__card {
  flex: 1;
  min-width: 150px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color var(--fast), background-color var(--fast);
}

.size-lever-picker__card:hover {
  border-color: var(--accent-border);
}

.size-lever-picker__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Active set-member — same "picked out" language as exhibit-doc-card--after */
.size-lever-picker__card--active {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.size-lever-picker__card--active .size-lever-picker__title {
  color: var(--accent);
}

.size-lever-picker__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.size-lever-picker__face {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Distinct face-tags (fragment-hard / dilute-hard / both-walls / size-robust)
   — a small colored dot, not a new palette; reuses accent/error/success. */
.size-lever-picker__face-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--space-1);
  background: var(--text-muted);
}

.size-lever-picker__card--active .size-lever-picker__face-dot {
  background: var(--accent);
}

/* ── Per-member framing line ("watch this") — reads like exhibit-axis-note ── */

.size-lever-watch {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-subtle);
  line-height: 1.5;
}

/* ── Detented slider (3 stops: small / mid / large — NOT continuous) ─────── */

.size-lever-slider {
  margin-bottom: var(--space-8);
}

.size-lever-slider__label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.size-lever-slider__track {
  position: relative;
  padding: var(--space-2) 0;
}

/* The <input type="range"> itself: 3-step (min=0, max=2, step=1) so dragging
   snaps between detents — never a continuous value. Reset to a flat rail and
   let the tick marks + labels below communicate "stepped," not "continuous." */
.size-lever-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius);
  outline: none;
  margin: 0;
  cursor: pointer;
}

.size-lever-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--accent-border);
  cursor: pointer;
  transition: transform var(--fast);
}

.size-lever-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.size-lever-slider__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--accent-border);
  cursor: pointer;
}

.size-lever-slider__input::-moz-range-track {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius);
}

/* Tick marks at each detent — sit under the track, evenly spaced, so the
   3 stops read as discrete positions rather than a free-drag rail. */
.size-lever-slider__ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  margin-top: var(--space-2);
}

.size-lever-slider__tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 1px;
}

.size-lever-slider__tick::before {
  content: '';
  display: block;
  width: 2px;
  height: 8px;
  background: var(--border-subtle);
  border-radius: 1px;
}

.size-lever-slider__tick--active::before {
  background: var(--accent);
}

.size-lever-slider__tick-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  transform: translateX(-50%);
}

.size-lever-slider__tick--active .size-lever-slider__tick-label {
  color: var(--accent);
  font-weight: 600;
}

/* ── Valley display (boundaries, token counts, cosine/rank per size-point) ── */

.size-lever-valley {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* One card per size-point (small/mid/large), same card language as
   exhibit-result but with a size-point header instead of before/after. */
.size-lever-valley__point {
  flex: 1;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--fast);
}

.size-lever-valley__point--current {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.size-lever-valley__point-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.size-lever-valley__point--current .size-lever-valley__point-label {
  color: var(--accent);
}

.size-lever-valley__cosine {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.size-lever-valley__rank {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Technical sub-stats within a valley point card — reuses exhibit-doc-card__stat
   row rhythm so boundary count / token counts read consistently with §3.1. */
.size-lever-valley__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}

.size-lever-valley__stat:last-child {
  border-bottom: none;
}

.size-lever-valley__stat-label {
  color: var(--text-secondary);
}

.size-lever-valley__stat-value {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

/* ── Size-robust honest beat — extends exhibit-complication's amber pattern ─
   Reuses .exhibit-complication as the outer block (same amber tone, same
   heading/body color overrides) so the visual language for "honest
   complication" matches §3.1's garbled-beats-clean exactly. This modifier
   only adds size-lever-specific internals (e.g. a flat-line valley
   indicator); it does not redefine the amber tone or border. */
.size-lever-null-result {
  margin-top: var(--space-4);
}

.size-lever-null-result .size-lever-valley__point--current {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
}

.size-lever-null-result .size-lever-valley__point--current .size-lever-valley__point-label,
.size-lever-null-result .size-lever-valley__cosine {
  color: #f59e0b;
}

/* ── Responsive: stack picker/slider/valley on narrow viewports ───────────── */

@media (max-width: 640px) {
  .size-lever-picker__card {
    min-width: 100%;
  }

  .size-lever-valley__point {
    min-width: 100%;
  }
}