/* AS-20 — ATS teaser report card. Theme-aware (prefers-color-scheme), responsive, no external assets. */
.atr-card {
  --atr-bg: #fffdf9; --atr-fg: #1a1a1a; --atr-muted: #6b6b6b; --atr-line: #ece5d8;
  --atr-track: #efe8db; --atr-good: #2f9e5f; --atr-ok: #e0a13a; --atr-low: #c0503a;
  font-family: var(--sans, system-ui, sans-serif);
  background: var(--atr-bg); color: var(--atr-fg);
  border: 1px solid var(--atr-line); border-radius: 14px;
  padding: 16px; margin-top: 10px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.atr-empty { color: var(--atr-muted); font-size: 13px; padding: 6px 2px; }

/* header: gauge + label + potential */
.atr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.atr-gauge {
  --ring: var(--atr-ok);
  position: relative; width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--ring) calc(var(--pct, 0) * 1%), var(--atr-track) 0);
}
.atr-gauge.atr-good { --ring: var(--atr-good); }
.atr-gauge.atr-ok   { --ring: var(--atr-ok); }
.atr-gauge.atr-low  { --ring: var(--atr-low); }
.atr-gauge::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--atr-bg);
}
.atr-gauge-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; z-index: 1;
}
.atr-headlab { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.atr-title { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--atr-muted); }
.atr-grade { font-weight: 700; font-size: 15px; }
.atr-grade.atr-good { color: var(--atr-good); } .atr-grade.atr-ok { color: #a5741f; } .atr-grade.atr-low { color: var(--atr-low); }
.atr-lc { font-weight: 600; font-size: 11px; color: #a5741f; }
.atr-potential { font-size: 12px; margin-top: 2px; }
.atr-pot-cur { color: var(--atr-muted); } .atr-pot-arrow { color: var(--atr-muted); }
.atr-pot-new { font-weight: 800; color: var(--atr-good); }
.atr-pot-lab { color: var(--atr-muted); }
.atr-stamp { font-size: 9px; letter-spacing: .04em; color: var(--atr-muted); opacity: .7; margin-top: 2px; }

/* pillar bars */
.atr-pillars { display: flex; flex-direction: column; gap: 9px; }
.atr-pillar-top { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.atr-pillar-name { font-weight: 600; }
.atr-pillar-wt { color: var(--atr-muted); font-size: 10px; }
.atr-lc-dot { color: #a5741f; font-size: 10px; font-weight: 600; margin-left: auto; }
.atr-track { position: relative; height: 7px; border-radius: 999px; background: var(--atr-track); margin-top: 4px; overflow: hidden; }
.atr-fill { height: 100%; border-radius: 999px; }
.atr-fill.atr-good { background: var(--atr-good); } .atr-fill.atr-ok { background: var(--atr-ok); } .atr-fill.atr-low { background: var(--atr-low); }
.atr-pillar-score { font-size: 11px; color: var(--atr-muted); text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }
.atr-pillar-pending { font-size: 11px; color: var(--atr-muted); font-style: italic; margin-top: 3px; }

/* locked issues */
.atr-issues { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--atr-line); padding-top: 12px; }
.atr-issues-h { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--atr-muted); }
.atr-issue { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--atr-track); }
.atr-lock { opacity: .6; flex: 0 0 auto; }
.atr-issue-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atr-issue-impact { font-weight: 700; color: var(--atr-low); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.atr-sev-critical .atr-issue-impact, .atr-sev-major .atr-issue-impact { color: var(--atr-low); }
.atr-sev-minor .atr-issue-impact, .atr-sev-info .atr-issue-impact { color: #a5741f; }

/* decorative blurred X-Ray peek (NO real data) */
.atr-xray { position: relative; border: 1px solid var(--atr-line); border-radius: 10px; overflow: hidden; }
.atr-xray-mock { display: flex; flex-direction: column; gap: 7px; padding: 14px; filter: blur(3px); opacity: .5; pointer-events: none; }
.atr-xray-line { height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--atr-muted), var(--atr-line)); }
.atr-xray-cta {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--sans, sans-serif); color: var(--atr-fg); background: rgba(255,253,249,.35);
  border: none; cursor: pointer; backdrop-filter: blur(1px);
}
.atr-xray-cta:hover { background: rgba(255,253,249,.15); }

/* unlock CTA */
.atr-unlock {
  font: 700 14px var(--sans, sans-serif); color: #1a1a1a; background: #e9c46a;
  border: none; border-radius: 999px; padding: 12px 18px; cursor: pointer; text-align: center;
}
.atr-unlock:hover { background: #efd08a; }

@media (max-width: 520px) {
  .atr-head { gap: 10px; } .atr-headlab { min-width: 120px; }
}

@media (prefers-color-scheme: dark) {
  .atr-card {
    --atr-bg: #23201b; --atr-fg: #f0ece4; --atr-muted: #9a9488; --atr-line: #3a332a;
    --atr-track: #322c24; --atr-good: #45b877; --atr-ok: #e0a13a; --atr-low: #d96a54;
  }
  .atr-grade.atr-ok { color: #e0a13a; }
  .atr-xray-cta { color: var(--atr-fg); background: rgba(35,32,27,.35); }
  .atr-xray-cta:hover { background: rgba(35,32,27,.15); }
  .atr-unlock { color: #1a1a1a; }
}
:root[data-theme="dark"] .atr-card {
  --atr-bg: #23201b; --atr-fg: #f0ece4; --atr-muted: #9a9488; --atr-line: #3a332a;
  --atr-track: #322c24; --atr-good: #45b877; --atr-ok: #e0a13a; --atr-low: #d96a54;
}