/* truth-map.css
   Truth-map popup: overlay, modal chrome, axis strip, and data grid.
*/

/* ══════════════════════════════════════════════════
   1. OVERLAY + MODAL SHELL
   ══════════════════════════════════════════════════ */
.tm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(2,6,23,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: tmFadeIn .14s ease-out;
}
@keyframes tmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tm-overlay.floating {
  background: transparent;
  pointer-events: none;
  align-items: flex-start;
  justify-content: flex-start;
}
.tm-overlay.minimized {
  background: transparent;
  pointer-events: none;
}

.tm-modal {
  width: min(700px, 94vw);
  max-height: 88vh;
  background: #0b1424;
  border: 1px solid #243450;
  border-radius: 13px;
  box-shadow: 0 24px 64px rgba(0,0,0,.72);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tmSlideIn .18s cubic-bezier(.2,.9,.2,1);
  pointer-events: auto;
}
@keyframes tmSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.tm-overlay.floating .tm-modal,
.tm-overlay.minimized .tm-modal { position: fixed; pointer-events: auto; }

.tm-overlay.minimized .tm-modal  { width: 240px !important; height: auto !important; max-height: none !important; }
.tm-overlay.minimized .tm-axis-strip,
.tm-overlay.minimized .tm-content { display: none; }

/* ── Modal header ── */
.tm-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #111827;
  border-bottom: 1px solid #1e293b;
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
}
.tm-header:active { cursor: grabbing; }

.tm-title { flex: 1; min-width: 0; }
.tm-title h3 {
  margin: 0;
  font-size: 14px; font-weight: 600; color: #7dd3fc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-title .tm-sub {
  font-size: 10px; color: #334155; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .04em;
}

.tm-hbtns { display: flex; gap: 5px; flex-shrink: 0; }
.tm-hbtns button {
  padding: 4px 10px; font-size: 12px; margin: 0;
  background: #1a2540; border: 1px solid #2d3d55;
  border-radius: 6px; color: #8094b0; line-height: 1.5;
}
.tm-hbtns button:hover { background: #243450; color: #c5d5e8; border-color: #38bdf8; }

/* ══════════════════════════════════════════════════
   2. AXIS STRIP  (drag chips to reorder inputs)
   ══════════════════════════════════════════════════ */
.tm-axis-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px;
  background: #080f1e;
  border-bottom: 1px solid #182236;
  flex-shrink: 0;
  min-height: 38px;
}

.tm-axis-group {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 5px; border-radius: 7px;
  transition: background .1s; min-height: 28px;
}
.tm-axis-group.tm-drop-target { background: #0c2235; outline: 1px dashed #38bdf8; }

.tm-axis-sep { width: 1px; align-self: stretch; background: #1e293b; margin: 0 4px; }

.tm-axis-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #475569; margin-right: 2px;
}

.tm-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: #19283d; border: 1px solid #2d3d55;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: grab; user-select: none;
  transition: background .1s, border-color .1s, opacity .1s;
}
.tm-chip-row { color: #60a5fa; }
.tm-chip-col { color: #34d399; border-color: #1d4a38; }
.tm-chip:hover      { background: #1e3550; border-color: #38bdf8; }
.tm-chip.tm-dragging { opacity: .3; }
.tm-chip.tm-dropbefore { box-shadow: -3px 0 0 #38bdf8; }
.tm-chip.tm-dropafter  { box-shadow:  3px 0 0 #38bdf8; }

/* ══════════════════════════════════════════════════
   3. GRID  (folded truth-table)
   ══════════════════════════════════════════════════ */
.tm-content {
  flex: 1; overflow: auto;
  padding: 24px;
  display: flex; align-items: flex-start; justify-content: center;
}

.tm-grid {
  border-collapse: collapse;
  font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
}

/* Corner cell (top-left with axis reveal buttons) */
.tm-corner {
  background: #0d1a2e;
  border: 1px solid #1a2d48;
  border-bottom: 2px solid #243450;
  border-right:  2px solid #243450;
  padding: 8px 10px;
  text-align: right; vertical-align: bottom;
  min-width: 56px;
}
.tm-corner-axis  { margin-bottom: 2px; }
.tm-corner-sep   { height: 1px; background: #243450; margin: 4px 0; }

/* Axis reveal button (click to show input names) */
.tm-corner-btn {
  font-size: 11px; font-weight: 700;
  font-family: Inter, system-ui, sans-serif;
  padding: 2px 5px; border-radius: 4px;
  cursor: pointer; user-select: none;
  display: inline-block;
  transition: background .12s;
}
.tm-corner-btn-row { color: #60a5fa; }
.tm-corner-btn-row:hover, .tm-corner-btn-row.tm-active { background: #1a3050; }
.tm-corner-btn-col { color: #34d399; }
.tm-corner-btn-col:hover, .tm-corner-btn-col.tm-active { background: #0d2218; }

.tm-corner-detail {
  display: none;
  font-size: 10px; font-family: Inter, system-ui, sans-serif;
  padding: 3px 5px; margin-top: 2px;
  background: #0a1528; border-radius: 3px;
  animation: tmDetailIn .12s ease-out;
}
@keyframes tmDetailIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
.tm-corner-detail.tm-open { display: block; }
.tm-detail-row { color: #7db8f0; }
.tm-detail-col { color: #5bcfa3; }

/* Column combo labels ("00","01"…) — teal */
.tm-col-combo {
  background: #0a1628; border: 1px solid #182236;
  border-bottom: 2px solid #243450;
  padding: 6px 12px; text-align: center;
  color: #34d399; font-size: 13px; font-weight: 700;
  min-width: 38px; cursor: default;
}
.tm-col-combo:hover { background: #0e1e35; }

/* Row combo labels ("00","01"…) — blue */
.tm-row-combo {
  background: #0f1f35; border: 1px solid #1a2d48;
  border-right: 2px solid #243450;
  padding: 6px 12px; text-align: right;
  color: #60a5fa; font-size: 13px; font-weight: 700;
  white-space: nowrap; cursor: default;
}
.tm-row-combo:hover { background: #142336; }

/* Value cells */
.tm-cell {
  border: 1px solid #152030;
  padding: 7px 14px; min-width: 36px;
  text-align: center; font-size: 14px; font-weight: 700;
  cursor: default; transition: filter .07s;
}
.tm-cell:hover { filter: brightness(1.35); }
.tm-cell.v1 { background: #14532d; color: #86efac; }
.tm-cell.v0 { background: #0a1628; color: #243450; }
.tm-cell.vq { background: #3d1a03; color: #fbbf24; }