/* ============================================================
   DEMO PAGES — append to app.css
   Retro style consistent with the existing design system
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────────── */
.demo-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
}

.demo-controls {
  flex: 0 1 220px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-main { flex: 1 1 420px; min-width: 0; }

/* ── Control blocks ──────────────────────────────────────────── */
.ctrl-section {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 8px;
}

.ctrl-section-title {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 4px;
  font-weight: bold;
}

.ctrl-ops { display: flex; flex-direction: column; gap: 3px; }

.ctrl-info { border: 1px solid var(--border); background: var(--bg); }

.ctrl-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px dotted var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-2);
}
.ctrl-info-row:last-child { border-bottom: none; }
.ctrl-info-val { font-family: var(--font-mono); color: var(--acc-b); }

/* ── Operation buttons ───────────────────────────────────────── */
.btn-op {
  width: 100%;
  background: #cccccc;
  border: 2px outset #aaaaaa;
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.btn-op:hover:not(:disabled) { background: #bbbbbb; border-style: inset; }
.btn-op:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-search { color: #000088; }
.btn-add    { color: #003300; }
.btn-remove { color: #880000; }
.btn-clear  { color: #333333; }
.btn-build  { background: #ddeeff; border-color: #3366aa; color: #001166; }

/* ── Status bar ──────────────────────────────────────────────── */
.demo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  margin-bottom: 6px;
}
.status-ok  { background: #eeffee; border-color: #008800; color: #003300; }
.status-err { background: #ffeeee; border-color: #880000; color: #440000; }

/* ── Legend ──────────────────────────────────────────────────── */
.ctrl-legend {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 6px 8px;
}
.legend-title {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 6px;
  font-weight: bold;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 3px;
}
.legend-cell { display: inline-block; width: 22px; height: 12px; border: 1px solid; }
.legend-cell.scanning { background: #fffacc; border-color: #998800; }
.legend-cell.found    { background: #ddf4dd; border-color: #008800; }
.legend-cell.notfound { background: #f4dddd; border-color: #880000; }

/* ── Log ─────────────────────────────────────────────────────── */
.demo-log {
  background: #ffffff;
  padding: 6px 8px;
  max-height: 170px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px inset #999999;
}
.log-line  { padding: 1px 0; }
.log-op    { color: var(--text); font-weight: bold; }
.log-ok    { color: var(--acc-g); }
.log-err   { color: var(--acc-r); }
.log-miss  { color: var(--text-3); }

/* ── LinearDictionary visualisation ─────────────────────────── */
.lin-viz-wrap  { overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; }
.lin-array     { display: flex; gap: 2px; min-width: max-content; }

.lin-cell {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 6px 8px;
  min-width: 92px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
  vertical-align: top;
}
.lin-cell.scanning { background: #fffacc; border-color: #998800; }
.lin-cell.found    { background: #ddf4dd; border-color: #008800; }
.lin-cell.notfound { background: #f4dddd; border-color: #880000; }

.lin-scan-arrow {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  color: #998800;
  font-size: 13px;
}
.lin-idx  { font-size: 9px; color: var(--text-3); margin-bottom: 3px; }
.lin-key  { font-weight: bold; color: var(--text); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.lin-sep  { color: var(--text-3); font-size: 10px; }
.lin-val  { color: var(--acc-b); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.lin-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px inset var(--border);
  background: var(--bg-alt);
  font-style: italic;
}
.lin-ruler { display: flex; gap: 2px; margin-top: 2px; }
.lin-ruler-cell {
  min-width: 92px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
}

/* ── PerfectHash visualisation ───────────────────────────────── */
.ph-pairs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 8px;
}
.ph-pair-cell {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.ph-pair-cell.ph-pair-hit {
  background: #ddf4dd;
  border-color: #008800;
}
.ph-pair-key { font-weight: bold; color: var(--text); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-pair-sep { color: var(--text-3); font-size: 10px; }
.ph-pair-val { color: var(--acc-b); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ph-steps-panel {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 8px;
}
.ph-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px dotted var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  transition: background 0.15s;
}
.ph-step:last-child { border-bottom: none; }
.ph-step.ph-step-active {
  background: #fffacc;
  color: var(--text);
  border-left: 3px solid #998800;
}
.ph-step.ph-step-done { color: var(--acc-g); }
.ph-step.ph-step-pending { opacity: 0.5; }
.ph-step-num {
  font-family: var(--font-ui);
  font-size: 10px;
  min-width: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

.ph-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-2);
  border: 1px inset var(--border);
  background: var(--bg-alt);
  font-family: var(--font-serif);
  font-size: 13px;
}
.ph-empty-icon { font-size: 36px; margin-bottom: 10px; color: var(--text-3); display: block; }

.ph-textarea {
  width: 100%;
  border: 1px inset var(--border);
  background: var(--bg);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  margin-bottom: 6px;
  resize: vertical;
  display: block;
}

.ph-step-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid;
  flex-shrink: 0;
}
.ph-step-dot.step1 { background: #f8f8e8; border-color: #888800; }
.ph-step-dot.step2 { background: #e8eeff; border-color: #0033aa; }
.ph-step-dot.step3 { background: #eee8ff; border-color: #6600aa; }
.ph-step-dot.step-ok { background: #e8f8e8; border-color: #008800; }

/* ── Nav additions ───────────────────────────────────────────── */
.nav-sep   { color: #3d6aaa; padding: 5px 4px; font-family: var(--font-ui); font-size: 11px; }
.nav-label { color: #99bbcc; padding: 5px 4px; font-family: var(--font-ui); font-size: 11px; }
.nav-demo  { color: #ffee88 !important; }
.nav-demo:hover  { color: #ffffff !important; }
.nav-demo:visited { color: #ffee88 !important; }
.nav-demo.active { color: var(--text) !important; background: var(--bg); }
.nav-demo.active:visited { color: var(--text) !important; }

/* ── Misc ────────────────────────────────────────────────────── */
.viz-section-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}