/*
 * css/mirror.css · The Long Game — Mirror feature styles
 * Purpose: visual design for the Mirror insight card: card shell, outcome bar,
 *          dot-strip slices, calibration narrative, rhythm note, legend, empty state.
 *          All classes prefixed .mirror-* to avoid collision with styles.css.
 *          Inherits all tokens from css/styles.css (:root + html[data-theme]).
 *          Reduced-motion guard disables bar/dot transitions.
 * Related: js/mirror.js (renders into these classes), css/styles.css (token source)
 */

/* ===== MIRROR CARD SHELL ===== */
/* Extends .surface-card from styles.css — no extra bg/border/shadow needed.
   Just spacing and stacking of sections inside. */
.mirror-card {
  margin-bottom: var(--space-5);
}

/* ===== MIRROR HEADER ===== */
.mirror-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.mirror-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mirror-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.mirror-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400; /* Newsreader 400 only — no faux-bold */
  color: var(--ink);
  line-height: 1.2;
}

.mirror-subtitle {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* ===== SECTION CONTAINERS ===== */
.mirror-section {
  margin-bottom: var(--space-5);
}

.mirror-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

/* ===== OVERALL SEGMENTED BAR ===== */
.mirror-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: var(--space-3);
}

/* Each segment stretches proportionally via flex value set inline. */
.mirror-bar-seg {
  border-radius: 999px;
  min-width: 6px;
  transition: opacity 0.2s ease;
}

/* Outcome colors — using the semantic verdict tokens from styles.css.
   These mirror .pill--* and .verdict--* but as solid fills (not transparent). */
.mirror-bar-seg--better  { background: var(--verdict-better-ink);  opacity: 0.75; }
.mirror-bar-seg--same    { background: var(--verdict-same-ink);    opacity: 0.65; }
.mirror-bar-seg--worse   { background: var(--verdict-worse-ink);   opacity: 0.70; }
.mirror-bar-seg--mixed   { background: var(--verdict-mixed-ink);   opacity: 0.70; }
.mirror-bar-seg--unclear { background: var(--verdict-unclear-ink); opacity: 0.55; }

.mirror-bar-seg:hover { opacity: 1; }

/* ===== LEGEND ===== */
.mirror-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.mirror-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.mirror-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Same hues as bar segments */
.mirror-legend-dot--better  { background: var(--verdict-better-ink);  opacity: 0.85; }
.mirror-legend-dot--same    { background: var(--verdict-same-ink);    opacity: 0.75; }
.mirror-legend-dot--worse   { background: var(--verdict-worse-ink);   opacity: 0.80; }
.mirror-legend-dot--mixed   { background: var(--verdict-mixed-ink);   opacity: 0.80; }
.mirror-legend-dot--unclear { background: var(--verdict-unclear-ink); opacity: 0.65; }

.mirror-legend-label {
  color: var(--ink-soft);
}

.mirror-legend-count {
  font-weight: 600;
  color: var(--ink);
  margin-left: 2px;
}

/* ===== SLICE ROWS (arena / type breakdown) ===== */
.mirror-slice-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  gap: 4px var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

.mirror-slice-row:first-child {
  border-top: none;
}

.mirror-slice-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  padding-top: 3px;
  line-height: 1.3;
}

.mirror-slice-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mirror-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

/* Dot colors — lighter/softer than bar to avoid overwhelming the layout */
.mirror-dot--better  { background: var(--verdict-better-ink);  opacity: 0.80; }
.mirror-dot--same    { background: var(--verdict-same-ink);    opacity: 0.65; }
.mirror-dot--worse   { background: var(--verdict-worse-ink);   opacity: 0.75; }
.mirror-dot--mixed   { background: var(--verdict-mixed-ink);   opacity: 0.75; }
.mirror-dot--unclear { background: var(--verdict-unclear-ink); opacity: 0.55; }

.mirror-dot:hover { transform: scale(1.3); }

.mirror-slice-note {
  grid-column: 2;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
  padding-bottom: 2px;
}

/* ===== CALIBRATION NARRATIVE ===== */
.mirror-calibration {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--accent);
}

.mirror-calibration-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

/* ===== LOOKING-BACK RHYTHM ===== */
.mirror-rhythm {
  background: transparent;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.mirror-rhythm-text {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ===== TRANSPARENCY NOTE ===== */
/* opacity:0.75 removed — it reduced --ink-soft contrast from 6.02:1 to ~3.46:1,
   failing WCAG AA for small text at 0.72rem. Full opacity is already accessible. */
.mirror-transparency {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  line-height: 1.4;
}

/* ===== EMPTY / LOADING STATES ===== */
.mirror-empty {
  text-align: center;
  padding: var(--space-4) 0 var(--space-5);
}

.mirror-empty-serif {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.mirror-empty-sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

.mirror-no-data {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  padding: var(--space-2) 0;
}

/* Loading skeleton: a single quiet pulsing line */
.mirror-loading {
  height: 120px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: mirror-pulse 1.6s ease-in-out infinite;
}

@keyframes mirror-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 0.3; }
}

/* ===== CALIBRATOR — CONFIDENCE CALIBRATION SECTION ===== */
/* Compact rows showing how each confidence level (hunch/fairly/pretty) tracked
   actual outcomes. Filled dots = landed; outline dots = didn't land as hoped.
   Color-independent: shape + sr-only text carry meaning. */

.mirror-calibrator {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  margin-top: var(--space-1);
}

.mirror-calib-strips {
  margin-bottom: var(--space-3);
}

.mirror-calib-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 4px var(--space-3);
  padding: var(--space-1) 0;
}

.mirror-calib-row-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.3;
}

.mirror-calib-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Calibration dots: filled = landed, outline = didn't land as hoped.
   Shape conveys meaning — color adds warmth but is not the only signal. */
.mirror-calib-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mirror-calib-dot--landed {
  background: var(--accent);
  opacity: 0.75;
}

.mirror-calib-dot--missed {
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  opacity: 0.6;
}

.mirror-calib-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.mirror-calib-legend-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-right: var(--space-3);
}

.mirror-calib-insight {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}

.mirror-calib-fallback {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  padding: var(--space-1) 0;
}

/* ===== REDUCED-MOTION GUARD ===== */
@media (prefers-reduced-motion: reduce) {
  .mirror-loading {
    animation: none;
    opacity: 0.5;
  }
  .mirror-bar-seg {
    transition: none;
  }
  .mirror-dot {
    transition: none;
  }
  .mirror-dot:hover {
    transform: none;
  }
}

/* ===== DARK-MODE TUNING ===== */
/* The bar/dot colors already reference verdict tokens which flip in dark mode.
   The calibration block's accent border and surface-2 background also flip automatically.
   Only the loading skeleton needs a slightly more prominent dark-mode shade. */
html[data-theme="dark"] .mirror-loading {
  background: var(--surface-2);
  opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .mirror-loading {
    background: var(--surface-2);
    opacity: 0.8;
  }
}