/* Tracking audit pages (/audit, /audit/report). Same visual language as the demo page. */
@font-face { font-family: 'Audit Plex'; src: url('../fonts/ibmplexsans-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Audit Plex'; src: url('../fonts/ibmplexsans-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

.audit-page { background: #f9f9f7; }
.audit-page > [data-header] { background: #fff; }
.audit-stage { max-width: 880px; margin: 0 auto; padding: 56px 24px 72px; color: #15151a; font-family: 'Audit Plex', sans-serif; }
.audit-stage [hidden] { display: none !important; }
.audit-stage h1 { margin: 0; font: 600 clamp(32px, 4vw, 46px)/1.12 'Audit Plex', sans-serif; letter-spacing: -.05em; }
.audit-stage h2 { margin: 0 0 12px; font: 600 20px/1.3 'Audit Plex', sans-serif; letter-spacing: -.02em; }
.audit-stage h3 { margin: 16px 0 8px; font: 600 15px/1.4 'Audit Plex', sans-serif; }
.audit-stage p { margin: 0; line-height: 1.6; }
.audit-stage a { color: #6240c4; text-decoration: underline; text-underline-offset: 3px; }
.audit-muted { color: #706a78; }

/* start */
.audit-lede { margin-top: 16px !important; font-size: 17px; color: #4d4656; max-width: 640px; }
.audit-scan-form { margin-top: 32px; }
.audit-scan-form label, .audit-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.audit-scan-row { display: flex; gap: 10px; }
.audit-stage input, .audit-stage select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #d9d4e0; border-radius: 10px;
  background: #fff; color: #15151a; font: 400 16px/1.4 'Audit Plex', sans-serif;
}
.audit-stage input:focus, .audit-stage select:focus { outline: 2px solid #764ff6; outline-offset: 1px; border-color: #764ff6; }
.audit-stage input[aria-invalid="true"] { border-color: #c2410c; }
.audit-stage button, .audit-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 10px; background: #764ff6; color: #fff; font: 600 15px/1 'Audit Plex', sans-serif;
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
}
.audit-stage button:hover, .audit-button:hover { background: #6240c4; }
.audit-stage button:disabled { opacity: .55; cursor: not-allowed; }
.audit-secondary { background: #fff !important; color: #6240c4 !important; border: 1px solid #d9d4e0 !important; }
.audit-field-error { margin-top: 6px !important; color: #c2410c; font-size: 13px; }
.audit-notes { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #4d4656; font-size: 14px; }
.audit-notes li { padding-left: 22px; position: relative; }
.audit-notes li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: #764ff6; }
.audit-notlive { margin-top: 20px !important; padding: 14px 16px; border-radius: 10px; background: #f3eefe; }

/* panels */
.audit-panel { padding: 40px 32px; border: 1px solid #e8e5ec; border-radius: 16px; background: #fff; text-align: center; }
.audit-busy-title { font-size: 18px; font-weight: 600; margin-top: 18px !important; }
.audit-spinner { width: 36px; height: 36px; margin: 0 auto; border: 3px solid #ece6fd; border-top-color: #764ff6; border-radius: 50%; animation: audit-spin .9s linear infinite; }
@keyframes audit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .audit-spinner { animation-duration: 2.4s; } }
.audit-error p { margin: 0 0 18px !important; color: #4d4656; }

/* grade */
.audit-grade-card, .audit-report-head { display: flex; align-items: center; gap: 22px; padding: 24px; border: 1px solid #e8e5ec; border-radius: 16px; background: #fff; }
.audit-grade { flex: 0 0 auto; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 18px; color: #fff; font: 600 48px/1 'Audit Plex', sans-serif; background: #706a78; }
.audit-grade.is-good { background: #15803d; } .audit-grade.is-fair { background: #4d7c0f; }
.audit-grade.is-weak { background: #b45309; } .audit-grade.is-poor { background: #b91c1c; }
.audit-score { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.audit-grade-label { font-weight: 600; }
.audit-site { font-size: 15px; word-break: break-all; }

/* boxes */
.audit-teaser { display: grid; gap: 18px; }
.audit-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.audit-box { padding: 24px; border: 1px solid #e8e5ec; border-radius: 16px; background: #fff; }
.audit-scores { display: grid; gap: 10px; margin-top: 6px; }
.audit-score-row { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 10px; font-size: 14px; }
.audit-bar { height: 8px; border-radius: 8px; background: #eeebf2; overflow: hidden; }
.audit-bar-fill { display: block; height: 100%; border-radius: 8px; background: #706a78; }
.audit-bar-fill.is-good { background: #16a34a; } .audit-bar-fill.is-fair { background: #65a30d; }
.audit-bar-fill.is-weak { background: #d97706; } .audit-bar-fill.is-poor { background: #dc2626; }
.audit-score-value { text-align: right; font-weight: 600; }
.audit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.audit-chip { padding: 4px 10px; border-radius: 999px; background: #f3eefe; color: #4b2fa6; font-size: 13px; }
.audit-chip.sev-critical { background: #fee2e2; color: #991b1b; } .audit-chip.sev-high { background: #ffedd5; color: #9a3412; }
.audit-chip.sev-medium { background: #fef3c7; color: #92400e; } .audit-chip.sev-low { background: #e0f2fe; color: #075985; }

/* findings */
.audit-finding { padding: 18px 20px; margin-top: 12px; border: 1px solid #e8e5ec; border-left: 4px solid #706a78; border-radius: 12px; background: #fff; text-align: left; }
.audit-finding.sev-critical { border-left-color: #dc2626; } .audit-finding.sev-high { border-left-color: #ea580c; }
.audit-finding.sev-medium { border-left-color: #d97706; } .audit-finding.sev-low { border-left-color: #0891b2; }
.audit-finding.is-opportunity { border-left-color: #764ff6; background: #fbf9ff; }
.audit-finding h3 { margin: 8px 0 6px; font-size: 17px; }
.audit-finding p { color: #36303f; font-size: 15px; }
.audit-finding-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.audit-pill { padding: 2px 9px; border-radius: 999px; background: #f1eff4; color: #15151a; font-size: 12px; font-weight: 600; }
.audit-evidence { margin: 10px 0; padding: 10px 14px; border-radius: 8px; background: #f7f6f9; list-style: none; font: 400 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #4d4656; word-break: break-word; }
.audit-evidence.is-masked { font-family: 'Audit Plex', sans-serif; font-style: italic; }
.audit-row { margin-top: 8px !important; }
.audit-ok { padding: 14px 16px; border-radius: 10px; background: #f0fdf4; color: #166534; }

/* report form */
.audit-get-report { border-color: #d6c7fc; background: #fdfcff; }
.audit-lead-form { display: grid; gap: 14px; margin-top: 18px; }
.audit-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.audit-hint { margin-top: -6px !important; color: #706a78; font-size: 13px; }
.audit-lead-form button { justify-self: start; }
.audit-form-status[data-state="error"] { color: #c2410c; }
.audit-privacy { color: #706a78; font-size: 13px; }
.audit-walkthrough { text-align: center; color: #4d4656; }

/* report page */
.audit-report-head { flex-wrap: wrap; }
.audit-report-head > div:nth-child(2) { flex: 1 1 280px; }
.audit-report-head h1 { font-size: clamp(24px, 3vw, 32px); word-break: break-word; }
.audit-report .audit-box, .audit-section { margin-top: 22px; }
.audit-table-wrap { overflow-x: auto; border: 1px solid #e8e5ec; border-radius: 12px; background: #fff; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.audit-table th { padding: 10px 12px; text-align: left; font-size: 12px; color: #706a78; border-bottom: 1px solid #e8e5ec; }
.audit-table td { padding: 9px 12px; border-top: 1px solid #f1eff4; vertical-align: top; }
.audit-mono { font: 400 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #4d4656; word-break: break-all; }
.audit-strong { font-weight: 600; }
.audit-cta { margin-top: 28px; padding: 26px; border-radius: 16px; background: #764ff6; color: #fff; }
.audit-cta h2 { color: #fff; }
.audit-cta p { margin-bottom: 18px !important; }
.audit-button-light { background: #fff !important; color: #4b2fa6 !important; }
.audit-method { margin-top: 24px !important; color: #706a78; font-size: 13.5px; }

@media (max-width: 720px) {
  .audit-stage { padding: 36px 16px 56px; }
  .audit-scan-row { flex-direction: column; }
  .audit-teaser-grid, .audit-field-row { grid-template-columns: 1fr; }
  .audit-grade-card, .audit-report-head { align-items: flex-start; }
  .audit-grade { width: 72px; height: 72px; font-size: 40px; }
  .audit-score-row { grid-template-columns: 110px 1fr 28px; }
  .audit-print { width: 100%; }
}

@media print {
  .audit-page > [data-header], .audit-page footer, .audit-print { display: none !important; }
  .audit-stage { padding: 0; max-width: none; }
  .audit-finding, .audit-box { break-inside: avoid; }
}