/* ============================================================
   Measure Marketer Audit: site-specific additions on top of
   the shared design system in styles.css.
   ============================================================ */

/* "Audit" badge next to the logo */
.audit-badge {
  display: inline-flex; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--primary));
  padding: .28rem .55rem; border-radius: .5rem;
  border: 1px solid rgb(var(--primary) / .3);
  background: rgb(var(--primary) / .08);
  margin-left: .35rem;
}

/* ---------- Scorecard visual (hero) ---------- */
.score-ring { position: relative; width: 120px; height: 120px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.score-ring .track { stroke: rgb(var(--muted)); }
.score-ring .bar { stroke: url(#scoreGrad); stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.score-ring .value {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em;
}
.score-ring .value small { font-size: .7rem; color: rgb(var(--muted-fg)); margin-left: 2px; }

.check-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .85rem; border-radius: .8rem;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border));
  font-size: .86rem;
}
.check-row + .check-row { margin-top: .5rem; }
.check-row .name { font-weight: 600; }
.check-row .detail { color: rgb(var(--muted-fg)); font-size: .78rem; }

.sev {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sev-critical { color: rgb(220 38 38); border-color: rgb(220 38 38 / .35); background: rgb(220 38 38 / .1); }
.sev-high { color: rgb(217 119 6); border-color: rgb(217 119 6 / .35); background: rgb(217 119 6 / .1); }
.sev-medium { color: rgb(2 132 199); border-color: rgb(2 132 199 / .35); background: rgb(2 132 199 / .1); }
.sev-pass { color: rgb(5 150 105); border-color: rgb(5 150 105 / .35); background: rgb(5 150 105 / .1); }
[data-theme="dark"] .sev-critical { color: rgb(252 165 165); }
[data-theme="dark"] .sev-high { color: rgb(252 211 77); }
[data-theme="dark"] .sev-medium { color: rgb(125 211 252); }
[data-theme="dark"] .sev-pass { color: rgb(110 231 183); }

/* ---------- Checklists (what-we-audit) ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.checklist li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem .9rem; border-radius: .8rem;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border));
  font-size: .92rem; line-height: 1.5;
}
.checklist li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .1rem; border-radius: 6px;
  border: 1.5px solid rgb(var(--primary) / .6);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314a88a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    rgb(var(--primary) / .08);
}

/* Platform tab buttons */
.ptab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem; border-radius: .8rem; font-weight: 600; font-size: .9rem;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--muted-fg));
  cursor: pointer; transition: all .25s ease; white-space: nowrap;
}
.ptab:hover { color: rgb(var(--fg)); border-color: rgb(var(--primary) / .4); }
.ptab[aria-selected="true"] { color: rgb(var(--on-primary)); background: rgb(var(--primary)); border-color: rgb(var(--primary)); box-shadow: 0 10px 22px -12px rgb(var(--primary) / .7); }

/* ---------- Steps ---------- */
.step-num {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; flex: none;
  font-family: "JetBrains Mono", monospace; font-weight: 600;
  background: rgb(var(--primary) / .1); color: rgb(var(--primary));
}

/* ---------- Lead form (two steps) ---------- */
.form-progress { display: flex; gap: .4rem; }
.form-progress span { flex: 1; height: 5px; border-radius: 999px; background: rgb(var(--muted)); transition: background .3s ease; }
.form-progress span.done { background: rgb(var(--primary)); }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .8rem; border-radius: .75rem; cursor: pointer;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface));
  font-size: .9rem; transition: border-color .2s ease, background .2s ease;
}
.opt:hover { border-color: rgb(var(--primary) / .5); }
.opt input { accent-color: rgb(var(--primary)); width: 16px; height: 16px; flex: none; }
.opt:has(input:checked) { border-color: rgb(var(--primary)); background: rgb(var(--primary) / .08); }

.form-error {
  display: none; padding: .8rem 1rem; border-radius: .75rem; font-size: .9rem;
  color: rgb(185 28 28); background: rgb(239 68 68 / .1); border: 1px solid rgb(239 68 68 / .3);
}
[data-theme="dark"] .form-error { color: rgb(252 165 165); }
.form-error.show { display: block; }

.phone-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: .5rem; }
@media (max-width: 420px) { .phone-row { grid-template-columns: 1fr; } }

.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; }

/* ---------- Report anatomy ---------- */
.report-page {
  background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 1rem;
  padding: 1.25rem; box-shadow: 0 24px 50px -30px rgb(var(--shadow-color) / .45);
}
.report-line { height: 8px; border-radius: 999px; background: rgb(var(--muted)); }
.report-line.w60 { width: 60%; } .report-line.w80 { width: 80%; } .report-line.w40 { width: 40%; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.tbl th, .tbl td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid rgb(var(--border)); vertical-align: top; }
.tbl th { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--muted-fg)); font-weight: 500; }
.tbl tr:last-child td { border-bottom: 0; }

/* Utility: numbered list inside prose */
.prose-mm p + p { margin-top: 1rem; }
.prose-mm h3 { margin-top: 2rem; }

/* ---------- CRM booking form embed ---------- */
.crm-embed {
  position: relative;
  background: #fcfcfd;
  border: 1px solid rgb(var(--border));
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgb(var(--shadow-color) / .5);
  min-height: 480px;
}
.crm-embed iframe { display: block; width: 100%; border: 0; transition: height .35s ease; opacity: 0; }
.crm-embed.is-ready iframe { opacity: 1; }
.crm-embed__loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .9rem; color: #59667d; background: #fcfcfd;
}
.crm-embed__loading[hidden] { display: none; }
.crm-embed__spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(var(--primary) / .25); border-top-color: rgb(var(--primary));
  animation: crm-spin .8s linear infinite;
}
@keyframes crm-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .crm-embed { border-color: rgb(255 255 255 / .12); }