/* Advibe Agency — Free Instant Ads Audit tool (free-ads-audit.html)
   Page-scoped additions. Reuses tokens.css/styles.css throughout — the
   score-tier colors below repurpose the same gold/violet/coral vocabulary
   the rest of the site already uses for "good/secondary/negative", just
   extended into a three-way severity scale instead of a two-way
   before/after. Nothing here redefines a color, it only points existing
   tokens at a new meaning. */

/* ---------- Hero: copy + form side by side ---------- */
.audit-hero {
  padding-top: calc(76px + var(--sp-8));
  padding-bottom: var(--section-padding);
}
.audit-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 960px) {
  /* align-items: start matters here — the form runs long (four steps),
     and "center" would center the short copy column into empty space
     halfway down the tall row instead of keeping it at the top.
     (position: sticky was tried for a top-pinned copy column, but
     body/html compute overflow-y: auto as a side effect of the
     sitewide overflow-x: hidden reset, which breaks sticky's scroll
     containment — not worth touching that shared rule for this.) */
  .audit-hero-grid { grid-template-columns: 1fr minmax(360px, 460px); gap: var(--sp-8); align-items: start; }
}

.audit-hero-copy h1 {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.audit-hero-copy p.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  margin-top: var(--sp-5);
  max-width: 48ch;
}
.audit-trust-list { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.audit-trust-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 14px; color: var(--text-muted); }
.audit-trust-list svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; margin-top: 1px; }

/* ---------- Form card ---------- */
.audit-form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.audit-form-step + .audit-form-step { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.audit-step-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.audit-step-label span { color: var(--text-faint); font-weight: 600; }

.diag-category {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: var(--sp-4) 0 var(--sp-2);
}
.diag-category:first-of-type { margin-top: 0; }

.diag-question { border: none; margin: 0 0 var(--sp-4); padding: 0; }
.diag-question legend {
  padding: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
}

.diag-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.diag-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.diag-toggle label {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.diag-toggle label:hover { color: var(--text); }
.diag-toggle input:checked + label { background: var(--bg-elevated); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.diag-toggle input:focus-visible + label { outline: 2px solid var(--gold-400); outline-offset: 2px; }

.form-hint { font-size: 12px; color: var(--text-faint); margin-top: var(--sp-2); }

/* ---------- Results ---------- */
#audit-results { padding-top: var(--sp-8); scroll-margin-top: 96px; }
.audit-results-inner { max-width: 1000px; }
.audit-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
@media (min-width: 760px) {
  .audit-results-grid { grid-template-columns: 220px 1fr; align-items: start; }
}

.score-dial-wrap { text-align: center; }
.score-dial { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--bg-elevated-2); stroke-width: 14; }
.dial-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke: var(--gold-400);
  transition: stroke-dashoffset 1.1s var(--ease-out), stroke 0.3s ease;
}
.score-dial-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-dial-number { font-family: var(--font-data); font-size: 44px; font-weight: 700; line-height: 1; color: var(--text); transition: color 0.3s ease; }
.score-dial-max { font-family: var(--font-data); font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.score-band {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.score-band-note { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); max-width: 32ch; margin-left: auto; margin-right: auto; }

/* Tier coloring — applied via JS by adding tier-good/tier-mid/tier-risk
   to #audit-results. Good reuses the gold accent, mid borrows the
   violet secondary accent, risk uses the existing --negative token. */
#audit-results.tier-good .dial-fill { stroke: var(--gold-400); }
#audit-results.tier-good .score-dial-number,
#audit-results.tier-good .score-band { color: var(--gold-400); }
#audit-results.tier-mid .dial-fill { stroke: var(--violet-400); }
#audit-results.tier-mid .score-dial-number,
#audit-results.tier-mid .score-band { color: var(--violet-400); }
#audit-results.tier-risk .dial-fill { stroke: var(--negative); }
#audit-results.tier-risk .score-dial-number,
#audit-results.tier-risk .score-band { color: var(--negative); }

.bar-fill.tier-good { background: var(--gold-gradient); }
.bar-fill.tier-mid { background: linear-gradient(90deg, var(--violet-600), var(--violet-400)); }
.bar-fill.tier-risk { background: linear-gradient(90deg, #A8544A, var(--negative)); }

.audit-results-detail .results-bars { margin-bottom: var(--sp-5); }

.audit-flags { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.audit-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-muted);
}
.audit-flag svg { width: 16px; height: 16px; color: var(--negative); flex-shrink: 0; margin-top: 2px; }
.audit-flag.is-info svg { color: var(--gold-400); }
.audit-flag strong { color: var(--text); font-weight: 700; }

.audit-paste-notes {
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--gold-400);
  margin-bottom: var(--sp-5);
  font-size: 13px;
  color: var(--text-muted);
}
.audit-paste-notes p { margin: var(--sp-1) 0 0; }
.audit-paste-notes p:first-child { margin-top: 0; }
.audit-paste-notes .audit-paste-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.audit-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .dial-fill { transition: none; }
}