/* /website-audit: hero form, jigsaw result board, report card. Builds on site.css + service.css. */
:root { --ok: var(--volt); --warn: #e8a33d; --bad: #ef6b5b; }

.a-hero .wrap { align-items: center; }
.a-run { display: flex; gap: 10px; margin-top: 34px; max-width: 560px; background: none; border: 0; padding: 0; }
.a-run input { flex: 1; min-width: 0; font-size: 17px; padding: 15px 16px; }
.a-run .btn { flex: none; }
.a-run.busy .btn { opacity: .6; pointer-events: none; }
.a-note { margin: 14px 0 0; font-size: 14px; color: var(--mute); }
.a-note.err, .a-err { color: var(--bad); }
.a-err { margin: 0; font-size: 14px; min-height: 1em; }
@media (max-width: 560px) { .a-run { flex-direction: column; } .a-run .btn { justify-content: center; } }

/* ---- jigsaw board */
.a-board-wrap { display: grid; gap: 14px; }
.board { width: 100%; height: auto; overflow: visible; display: block; }
.bp path { fill: var(--slate-2); stroke: var(--ink); stroke-width: 3; transition: fill .4s, stroke .4s, opacity .4s; }
.bp-n { font: 500 12px var(--mono); letter-spacing: .1em; fill: var(--mute); transition: fill .4s; }
.bp-mark { font: 800 46px var(--display); font-stretch: 125%; text-anchor: middle; dominant-baseline: middle; fill: var(--ink); opacity: 0; transition: opacity .4s; }
.a-status { margin: 0; text-align: center; min-height: 1.2em; }
.a-board-wrap.running .bp path { animation: bp-scan 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes bp-scan { 0%, 100% { fill: var(--slate-2); } 40% { fill: #2b2b31; stroke: var(--ink); } }
.bp.pass path { fill: var(--volt); }
.bp.pass .bp-n { fill: #6d6a1f; }
.bp.warn path { fill: #2a2418; stroke: var(--warn); stroke-width: 2; }
.bp.fail path { fill: rgba(239,107,91,.05); stroke: var(--bad); stroke-width: 2; stroke-dasharray: 7 6; }
.bp.skip path { opacity: .35; }
.bp.pass .bp-mark, .bp.warn .bp-mark, .bp.fail .bp-mark { opacity: 1; }
.bp.warn .bp-mark { fill: var(--warn); }
.bp.fail .bp-mark { fill: var(--bad); }
@media (max-width: 900px) { .a-board-wrap { max-width: 560px; } }

/* ---- summary + piece list */
.a-results { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.a-summary { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; margin-bottom: 36px; }
.a-summary h2 { font-size: clamp(28px, 3.6vw, 48px); max-width: 20ch; }
.a-summary .eyebrow { margin-bottom: 14px; text-transform: none; letter-spacing: .06em; }
.a-score { font: 900 clamp(88px, 11vw, 150px)/.8 var(--display); font-stretch: 125%; letter-spacing: -.04em; color: var(--volt); font-variant-numeric: tabular-nums; }
.a-score small { font-size: .22em; color: var(--mute); letter-spacing: 0; margin-left: .15em; font-weight: 600; }
.a-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.a-pieces li { border: 1px solid var(--line); background: var(--slate); padding: 16px 16px 14px; display: grid; gap: 6px; border-top: 3px solid var(--line); }
.a-pieces li.pass { border-top-color: var(--ok); }
.a-pieces li.warn { border-top-color: var(--warn); }
.a-pieces li.fail { border-top-color: var(--bad); }
.a-pieces b { font: 700 16px/1.25 var(--body); }
.a-pieces span { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.a-pieces li.warn span { color: var(--warn); }
.a-pieces li.fail span { color: var(--bad); }
.a-pieces li.pass span { color: var(--ok); }
@media (max-width: 860px) { .a-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- locked report */
.a-lock { position: relative; margin-top: 28px; }
.a-lock-fake { display: grid; align-content: space-evenly; min-height: 440px; padding: 28px; border: 1px solid var(--line); filter: blur(3px); opacity: .5; }
.a-lock-fake i { display: block; height: 14px; background: var(--slate-2); }
.a-lock-fake i:nth-child(odd) { width: 72%; } .a-lock-fake i:nth-child(3n) { width: 46%; }
.a-unlock { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 24px)); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.a-unlock h3 { font-size: 24px; }
.a-unlock > p { margin: -6px 0 0; color: #bdbcb3; font-size: 16px; }
.a-unlock label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #6f6e66; }
@media (max-width: 700px) {
  .a-lock-fake { display: none; }
  .a-unlock { position: static; transform: none; width: auto; box-shadow: none; }
}

/* ---- full report */
.a-detail { display: grid; gap: 14px; margin-top: 28px; }
.a-sec { border: 1px solid var(--line); background: var(--slate); }
.a-sec > header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 24px 12px; }
.a-sec > header h3 { font-size: 22px; }
.a-sec > header span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.a-sec.pass > header span { color: var(--ok); } .a-sec.warn > header span { color: var(--warn); } .a-sec.fail > header span { color: var(--bad); } .a-sec.skip > header span { color: var(--mute); }
.a-checks { list-style: none; margin: 0; padding: 0 24px; }
.a-checks li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.a-checks .m { font: 800 15px/1.5 var(--body); }
.a-checks .pass .m { color: var(--ok); } .a-checks .warn .m { color: var(--warn); } .a-checks .fail .m { color: var(--bad); } .a-checks .skip .m { color: var(--mute); }
.a-checks b { font-weight: 600; }
.a-checks .found { color: #a9a89e; }
.a-checks .why { grid-column: 2; margin: 0; font-size: 15px; color: var(--mute); }
.a-fix { margin: 0; padding: 14px 24px 20px; border-top: 1px solid var(--line); font-size: 16px; color: #c9c8bf; }
.a-fix strong { color: var(--volt); font-weight: 600; }
.a-fix a { color: var(--volt); white-space: nowrap; }
.a-sec:not(:has(.a-fix)) .a-checks { padding-bottom: 8px; }
.a-shot { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 28px; align-items: center; border: 1px solid var(--line); padding: 24px; }
.a-shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.a-shot p { margin: 8px 0 0; color: #bdbcb3; }
.a-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; border: 1px solid var(--volt); padding: 26px 28px; }
.a-cta h3 { font-size: 24px; }
.a-cta p { margin: 6px 0 0; color: #bdbcb3; }
@media (max-width: 560px) { .a-shot { grid-template-columns: 1fr; } .a-shot img { max-width: 220px; } }
@media (prefers-reduced-motion: reduce) { .a-board-wrap.running .bp path { animation: none; fill: #26262b; } }