/* ============================================================================
   ManiaMapper - chart preview + quality panel (result card)
   Uses the tokens from styles.css. Sections: preview / quality
   ========================================================================== */

/* ---------- preview ---------- */
.preview { margin-bottom: 18px; }
.preview-toolbar {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.preview-toolbar h3 { margin: 0; }
.preview-version {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  color: var(--tier-color, var(--pink));
  background: var(--tier-soft, var(--pink-soft));
  border: 1px solid var(--tier-color, var(--pink));
}
.preview-version:empty { display: none; }
.preview-readout { font-variant-numeric: tabular-nums; min-width: 0; }
.preview-hint { margin-left: auto; white-space: nowrap; }

.preview-canvas-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  overflow: hidden;
  outline-offset: 2px;
  min-height: 60px;
}
.preview-canvas { display: block; width: 100%; cursor: grab; touch-action: none; }
.preview-canvas.is-dragging { cursor: grabbing; }
.preview-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: .82rem; pointer-events: none;
}
.preview-status { margin-top: 6px; }
.preview-status:empty { display: none; }
.preview-status.is-error { color: var(--warn); }

/* ---------- quality ---------- */
.quality { margin-top: 14px; }
.quality:empty { display: none; }
.q-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.q-head h3 { margin: 0; }
.q-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }

.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
.q-stat {
  margin: 0; padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}
.q-stat dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 2px; }
.q-stat dd { margin: 0; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.q-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; align-items: center; margin-bottom: 12px; }
.q-cols .q-label { grid-column: 1 / -1; }
.q-col { display: flex; align-items: center; gap: 7px; min-width: 0; }
.q-col-n { font-size: .72rem; font-weight: 700; color: var(--muted); width: 10px; text-align: center; }
.q-col-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.q-col-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .3s ease; }
.q-col-v { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--text-2); width: 34px; text-align: right; }
.q-col.is-off .q-col-fill { background: var(--warn); }
.q-col.is-off .q-col-v { color: var(--warn); font-weight: 700; }

.q-issues { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q-issues li { font-size: .78rem; border-radius: 6px; padding: 6px 9px; border: 1px solid transparent; }
.q-issues li.is-warn { color: var(--warn); background: rgba(255, 199, 107, .08); border-color: rgba(255, 199, 107, .2); }
.q-issues li.is-ok { color: var(--ok); background: rgba(90, 214, 160, .07); border-color: rgba(90, 214, 160, .18); }

.q-compare-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.q-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.q-table th { text-align: right; font-weight: 600; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; }
.q-table th:first-child { text-align: left; }
.q-table td { padding: 4px 8px; border-top: 1px solid var(--border); color: var(--text-2); }
.q-table td.q-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.q-table td.q-num.muted { color: var(--muted); }
.q-table td:last-child { text-align: right; }
.q-delta {
  display: inline-block; min-width: 54px; text-align: right;
  padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.q-delta.is-ok { color: var(--muted); background: rgba(142, 141, 170, .1); }
.q-delta.is-high { color: var(--warn); background: rgba(255, 199, 107, .1); border-color: rgba(255, 199, 107, .25); }
.q-delta.is-low { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(102, 204, 255, .25); }

@media (max-width: 760px) {
  .q-cols { grid-template-columns: 1fr 1fr; }
  .preview-hint { margin-left: 0; white-space: normal; }
}