/* Digital Mirror — component library. Pure classes over tokens.css variables; no raw values. */

/* ---------- base ---------- */
.dm-body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.dm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.dm-section { padding: var(--space-8) 0; }
@media (min-width: 900px) { .dm-section { padding: var(--space-9) 0; } }
.dm-section__head { margin-bottom: var(--space-6); max-width: 640px; }
.dm-section__head p { color: var(--ink-muted); margin: var(--space-3) 0 0; }

.dm-kicker {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.dm-kicker::before { content: ""; width: 20px; height: 1px; background: var(--accent); }
.dm-kicker--signal { color: var(--signal); }
.dm-kicker--signal::before { background: var(--signal); }

.dm-label {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}

a.dm-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-tint-edge); }
a.dm-link:hover { border-bottom-color: var(--accent); }

.dm-scanlines {
  background-image: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
}

/* Focus: one solid ring, accent, visible on every surface */
.dm-btn:focus-visible, .dm-nav__link:focus-visible, a.dm-link:focus-visible,
.dm-scan__more:focus-visible, .dm-card:focus-visible, .dm-chip:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ---------- Nav ---------- */
.dm-nav {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; row-gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--scrim); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; z-index: 40;
}
.dm-nav__logo {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.dm-nav__cursor {
  display: inline-block; width: 9px; height: 15px; background: var(--signal);
  animation: dm-blink 1.1s steps(1) infinite;
}
@keyframes dm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-nav__cursor { animation: none; } }
.dm-nav__links { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-1); }
.dm-nav__link {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-muted); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: 1px solid transparent;
}
.dm-nav__link:hover { color: var(--ink); background: var(--surface-raised); }
.dm-nav__link--active { color: var(--accent); border-color: var(--accent-tint-edge); background: var(--accent-tint); }
.dm-nav__link--soon { color: var(--ink-faint); cursor: default; }
.dm-nav__link--soon:hover { color: var(--ink-faint); background: none; }
.dm-nav__soon-tag { font-size: 9px; letter-spacing: 0.08em; border: 1px solid var(--edge-strong); border-radius: var(--radius-sm); padding: 1px 4px; margin-left: 6px; }

/* ---------- Buttons ---------- */
.dm-btn {
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.dm-btn--primary { background: var(--signal); color: var(--on-signal); }
.dm-btn--primary:hover { box-shadow: var(--glow-signal); transform: translateY(-1px); }
.dm-btn--secondary { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
.dm-btn--secondary:hover { border-color: var(--ink); background: var(--surface-raised); }
.dm-btn--ghost { background: transparent; color: var(--accent); padding-left: var(--space-2); padding-right: var(--space-2); }
.dm-btn--ghost:hover { background: var(--accent-tint); }
.dm-btn--lg { font-size: 14px; padding: var(--space-4) var(--space-6); }

/* ---------- Status chips: color + word + mark, never color alone ---------- */
.dm-chip {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--edge-strong); color: var(--ink-muted); background: transparent;
}
.dm-chip__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--edge-strong); }
.dm-chip--danger { color: var(--signal); border-color: var(--signal-tint-edge); background: var(--signal-tint); }
.dm-chip--danger .dm-chip__dot { background: var(--signal); animation: dm-pulse 1.6s ease infinite; }
.dm-chip--ok { color: var(--secure); border-color: var(--secure-tint-edge); background: var(--secure-tint); }
.dm-chip--ok .dm-chip__dot { background: var(--secure); }
.dm-chip--warn { color: var(--warn); border-color: var(--edge-strong); background: var(--surface-raised); }
.dm-chip--warn .dm-chip__dot { background: var(--warn); }
@keyframes dm-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dm-chip--danger .dm-chip__dot { animation: none; } }

/* ---------- Scan panel (the mirror) ---------- */
.dm-scan {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.dm-scan__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--edge);
  background: var(--surface-raised);
  background-image: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
}
.dm-scan__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.dm-scan__live { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--signal); }
.dm-scan__live .dm-chip__dot { background: var(--signal); animation: dm-pulse 1.6s ease infinite; }
.dm-scan__rows { padding: var(--space-2) 0; }
.dm-scan__row {
  display: grid; grid-template-columns: 148px 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-3) var(--space-5);
}
.dm-scan__row + .dm-scan__row { border-top: 1px solid var(--edge); }
.dm-scan__key { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: var(--space-2); }
.dm-scan__key svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.dm-scan__val { font-family: var(--font-mono); font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.dm-scan__val--big { font-size: 24px; line-height: 32px; }
.dm-scan__row--exposed { background: var(--signal-tint); }
.dm-scan__row--exposed + .dm-scan__row, .dm-scan__row + .dm-scan__row--exposed { border-top-color: var(--signal-tint-edge); }
@media (max-width: 640px) {
  .dm-scan__row { grid-template-columns: 1fr auto; }
  .dm-scan__key { grid-column: 1 / -1; }
}
.dm-scan__more {
  width: 100%; text-align: center; background: var(--surface-raised); color: var(--accent);
  border: 0; border-top: 1px solid var(--edge); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
}
.dm-scan__more:hover { background: var(--accent-tint); }

/* ---------- Score gauge ---------- */
.dm-score { display: grid; gap: var(--space-4); }
.dm-score__row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.dm-score__num { font-family: var(--font-mono); font-size: 64px; line-height: 64px; font-weight: 600; }
.dm-score__den { font-family: var(--font-mono); font-size: 24px; color: var(--ink-faint); }
.dm-score--critical .dm-score__num { color: var(--score-critical); }
.dm-score--high .dm-score__num { color: var(--score-high); }
.dm-score--medium .dm-score__num { color: var(--score-medium); }
.dm-score--low .dm-score__num { color: var(--score-low); }
.dm-score__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-1); }
.dm-score__seg { height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--edge); }
.dm-score--critical .dm-score__seg--on { background: var(--score-critical); border-color: var(--score-critical); }
.dm-score--high .dm-score__seg--on { background: var(--score-high); border-color: var(--score-high); }
.dm-score--medium .dm-score__seg--on { background: var(--score-medium); border-color: var(--score-medium); }
.dm-score--low .dm-score__seg--on { background: var(--score-low); border-color: var(--score-low); }
.dm-score__pct { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink-muted); margin: 0; }
.dm-score__pct strong { color: var(--ink); font-weight: 600; }

/* ---------- Grids & cards ---------- */
.dm-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dm-grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.dm-card {
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card); color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
a.dm-card:hover { transform: translateY(-2px); border-color: var(--edge-strong); box-shadow: var(--shadow-pop); }
.dm-card__icon { width: 26px; height: 26px; stroke: var(--accent); flex: none; }
.dm-card__title { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; margin: 0; color: var(--ink); }
.dm-card__desc { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; flex: 1; }
.dm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.dm-card__go { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.dm-card--soon { opacity: 0.6; }
.dm-card--soon .dm-card__icon { stroke: var(--ink-faint); }
a.dm-card--soon:hover { transform: none; border-color: var(--edge); box-shadow: var(--shadow-card); }

/* Pillar card (Learn hub) */
.dm-pillar { gap: var(--space-2); }
.dm-pillar__count { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-faint); }
.dm-pillar__num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.dm-pillar--caught .dm-pillar__num { color: var(--signal); }

/* ---------- Caught case card ---------- */
.dm-caught {
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
  color: inherit; text-decoration: none; transition: transform 120ms ease, border-color 120ms ease;
}
a.dm-caught:hover { transform: translateY(-2px); border-color: var(--signal-tint-edge); }
.dm-caught__head {
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--edge);
  display: flex; align-items: center; gap: var(--space-3);
  background-image: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
}
.dm-caught__file { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.dm-caught__year { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.dm-caught__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.dm-caught__title { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.dm-caught__mistake { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; flex: 1; }
.dm-caught__mistake strong { color: var(--ink); }
.dm-caught__trail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.dm-caught__trail b { color: var(--ink-muted); font-weight: 600; }
.dm-caught__trail .dm-caught__arrow { color: var(--signal); }
.dm-caught__check {
  border-top: 1px solid var(--edge); padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  background: var(--surface-raised);
}

/* ---------- Insight boxes ---------- */
.dm-insight {
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3);
  border: 1px solid var(--edge-strong); background: var(--surface-raised);
}
.dm-insight__icon { width: 18px; height: 18px; stroke: var(--ink-muted); margin-top: 3px; }
.dm-insight__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); align-self: center; margin: 0; }
.dm-insight__body { grid-column: 2; font-size: 14px; line-height: 22px; color: var(--ink); margin: 0; }
.dm-insight__body a { color: var(--accent); }
.dm-insight--threat { background: var(--signal-tint); border-color: var(--signal-tint-edge); }
.dm-insight--threat .dm-insight__icon { stroke: var(--signal); }
.dm-insight--threat .dm-insight__title { color: var(--signal); }
.dm-insight--evidence { background: var(--accent-tint); border-color: var(--accent-tint-edge); }
.dm-insight--evidence .dm-insight__icon { stroke: var(--accent); }
.dm-insight--evidence .dm-insight__title { color: var(--accent); }
.dm-insight--fixed { background: var(--secure-tint); border-color: var(--secure-tint-edge); }
.dm-insight--fixed .dm-insight__icon { stroke: var(--secure); }
.dm-insight--fixed .dm-insight__title { color: var(--secure); }

/* ---------- CTA block ---------- */
.dm-cta {
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  background-image: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
}
@media (min-width: 900px) { .dm-cta { padding: var(--space-7) var(--space-7); } }
.dm-cta--signal { box-shadow: var(--glow-signal); border-color: var(--signal-tint-edge); }
.dm-cta__title { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.dm-cta__text { font-size: 16px; line-height: 26px; color: var(--ink-muted); margin: 0; max-width: 520px; }
.dm-cta__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.dm-cta__meta { font-size: 13px; line-height: 18px; color: var(--ink-faint); margin: 0; }

/* ---------- Fix steps ---------- */
.dm-steps { display: grid; gap: var(--space-3); counter-reset: dm-step; }
.dm-step {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: start;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.dm-step__num {
  counter-increment: dm-step; width: 32px; height: 32px; border-radius: var(--radius-pill);
  border: 1px solid var(--edge-strong); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-muted);
}
.dm-step__num::before { content: counter(dm-step, decimal-leading-zero); }
.dm-step > div { min-width: 0; }
.dm-step--done .dm-step__num { border-color: var(--secure); color: var(--secure); background: var(--secure-tint); }
.dm-step--done .dm-step__num::before { content: "✓"; }
.dm-step__title { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 2px; color: var(--ink); }
.dm-step__desc { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; overflow-wrap: anywhere; }
.dm-step__desc a { color: var(--accent); }
.dm-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--secure-tint-edge); color: var(--secure); background: var(--secure-tint);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); white-space: nowrap;
}
.dm-tag--partner { border-color: var(--edge-strong); color: var(--ink-faint); background: transparent; }