/* Shared "scan results" rendering -- used by both the public wizard's step-3
   results panel (form.html/app.js) and the admin scan detail page
   (admin_scan_detail.html). Kept separate from style.css/admin.css so
   neither page's own element-level chrome (body/form/input/button rules)
   leaks into the other -- these rules are all class-scoped. */
:root {
  /* Always light -- this tool is embedded on clickables.nl and must match
     its (always-light) branding regardless of the visitor's own OS/browser
     dark-mode preference, so no prefers-color-scheme override here. */
  color-scheme: light;
  /* Matches clickables.nl's own accent orange (confirmed against its live
     CTA buttons), not an approximation -- this tool is embedded there via
     iframe and should read as part of the same site, not a separate app. */
  --color-accent: #fb7505;
  --color-accent-contrast: #ffffff;
  --color-bg: #ffffff;
  --color-fg: #0a0a0a;
  --color-muted: #6b6b6b;
  --color-border: #e2e2e2;
  --color-track: #f0f0f0;
  /* clickables.nl's own body font is "Avenir Next LT Pro" (a licensed
     commercial font) -- named first so it's used if a visitor's system
     happens to have it installed, but we don't host/serve the font file
     ourselves (no license for this domain), so in practice this falls
     back to the same system-font stack as before. Ask if you want this
     pixel-matched -- that needs either license rights to self-host the
     real font here, or a freely-licensed lookalike (e.g. Poppins). */
  --font-family: "Avenir Next LT Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

.results-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

.hero-gauge { display: flex; justify-content: center; margin: 0.5rem 0 0.75rem; }
.hero-gauge svg text { font-family: var(--font-family); }
.overall-caption {
  text-align: center;
  color: var(--color-muted);
  font-weight: 700;
  max-width: 480px;
  margin: 0 auto 2.25rem;
}

.stat-row {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.stat-tile {
  flex: 1 1 130px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Reset since this is now a <button> (click-to-expand its detail
     section below) -- explicit rather than relying on the host page's own
     button defaults, since report.css is shared between two different
     pages (the public wizard's style.css and the admin scan detail page's
     admin.css) with different button chrome. */
  background: none;
  border: none;
  padding: 0.5rem 0.35rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.stat-tile:hover,
.stat-tile.active {
  background: var(--color-track);
}
.stat-tile svg text { font-family: var(--font-family); }
.stat-tile-label { font-weight: 800; margin: 0.6rem 0 0.25rem; font-size: 0.92rem; }
.stat-tile-explanation { font-size: 0.78rem; color: var(--color-muted); margin: 0; }

.expand-hint {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: 0 0 1.5rem;
}

.detail-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--color-border);
}
.detail-section h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 1rem; }
.detail-section p { margin: 0 0 0.75rem; }

.profile-card {
  background: var(--color-track);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 4px);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}
.profile-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.profile-avatar {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-fg);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
}
.profile-card-heading { min-width: 0; }
.profile-name { font-size: 1.25rem; font-weight: 800; margin: 0; }
.profile-category-badge {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted);
}
.profile-rating-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}
.profile-stars { color: #fab219; letter-spacing: 0.05em; }
.profile-stat-sub { font-weight: 600; color: var(--color-muted); }
.profile-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.profile-detail { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin: 0; }
.profile-detail-icon { flex: 0 0 auto; }

.rank-sole-note {
  margin: 0 0 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--color-track);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.rank-item:last-child { border-bottom: none; }
.rank-item.own {
  background: var(--color-track);
  border-radius: var(--radius);
  padding: 0.7rem 0.75rem;
  margin: 0.15rem 0;
  border-bottom: none;
}
.rank-badge {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-track);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.rank-item.own .rank-badge { background: var(--color-fg); color: var(--color-bg); }
.rank-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rank-name { font-weight: 700; }
.rank-meta { font-size: 0.85rem; color: var(--color-muted); }
.rank-meta-sub { color: var(--color-muted); }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-icon { font-weight: 800; flex: 0 0 auto; width: 1.2rem; }
.checklist-item.pass .checklist-icon { color: #0ca30c; }
.checklist-item.fail .checklist-icon { color: #d03b3b; }
.checklist-item.tip .checklist-icon { color: #fab219; }
.checklist-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.checklist-label { font-weight: 700; }
.checklist-detail { font-size: 0.85rem; color: var(--color-muted); }
.checklist-points { flex: 0 0 auto; font-weight: 800; color: var(--color-muted); font-size: 0.9rem; }

.issues-heading { font-weight: 800; margin: 1rem 0 0.5rem; }

@media (max-width: 480px) {
  .stat-tile { flex-basis: 100%; max-width: 260px; }
}