/* ══════════════════════════════════════════════════════════════
   Ripple Foundry — audit report
   Rides on gallery.css tokens; only what the report needs.
   ══════════════════════════════════════════════════════════════ */
.audit-page{padding-bottom:0}
.au-wrap{padding-top:clamp(104px,12vw,150px);min-height:70vh}
.au-f{display:block}
.au-f>span{display:block;font-size:.78rem;font-weight:540;color:var(--muted);margin-bottom:8px}
.au-f>span small{color:var(--faint);font-weight:400}
.au-f input,.au-f select{width:100%;height:54px;border-radius:15px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);padding:0 16px;font:inherit;font-size:.98rem;outline:none;
  transition:border-color .3s,box-shadow .3s,background .3s}
.au-f input:focus,.au-f select:focus{border-color:var(--brand);background:var(--surface-2);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 16%,transparent)}

/* ── hero ── */
.au-hero h1{margin:26px 0 0;max-width:15ch}
.au-hero .lead{margin-top:24px}
.au-form{margin-top:36px;max-width:900px}
.au-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:end}
.au-go{height:54px;padding:0 26px;white-space:nowrap}
.au-note{margin-top:14px;font-size:.8rem;color:var(--faint)}

/* ── loading skeleton ── */
.sk{background:linear-gradient(90deg,var(--surface) 8%,var(--line) 24%,var(--surface) 40%);
  background-size:900px 100%;animation:auShim 1.5s linear infinite;border-radius:14px;display:block}
@keyframes auShim{from{background-position:-450px 0}to{background-position:450px 0}}
.au-skel-top{display:flex;gap:26px;align-items:center;margin-bottom:22px}
.sk-ring{width:150px;height:150px;border-radius:50%;flex:none}
.sk-lines{flex:1;display:grid;gap:12px}
.sk-l1{height:26px;width:52%}.sk-l2{height:16px;width:74%}.sk-l3{height:16px;width:38%}
.au-skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sk-card{height:118px}
.au-status{margin-top:22px;color:var(--muted);font-size:.9rem}

/* ── error ── */
.au-err{padding:60px 0;max-width:620px}
.au-err h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.au-err .lead{margin:14px 0 26px}

/* ── report head ── */
.au-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,36px)}
.au-head h2{margin-top:14px;font-size:clamp(1.9rem,4vw,3rem)}
.au-url{display:inline-block;margin-top:10px;font-family:ui-monospace,monospace;font-size:.82rem;
  color:var(--muted);border-bottom:1px dotted var(--line-2)}
.au-url:hover{color:var(--brand)}
.au-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── score ── */
.au-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:center;
  padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.au-scorecard{position:relative;width:200px;height:200px;flex:none}
.au-ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:14}
.ring-fg{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:0 999;
  transition:stroke-dasharray 1.3s cubic-bezier(.16,1,.3,1)}
.ring-fg.good{stroke:#34D399}.ring-fg.ok{stroke:#E8FE5B}
.ring-fg.warn{stroke:#FBBF24}.ring-fg.bad{stroke:#FB7185}
.au-score{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.au-score b{font-family:"Instrument Serif",Georgia,serif;font-size:3.6rem;line-height:1;letter-spacing:-.04em}
.au-score span{font-size:.72rem;color:var(--faint)}
.au-grade{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.1em;margin-top:6px;
  padding:3px 10px;border-radius:99px;justify-self:center}
.au-grade.good{background:rgba(52,211,153,.16);color:#34D399}
.au-grade.ok{background:color-mix(in oklab,var(--brand) 18%,transparent);color:var(--brand)}
.au-grade.warn{background:rgba(251,191,36,.16);color:#FBBF24}
.au-grade.bad{background:rgba(251,113,133,.16);color:#FB7185}
html[data-theme="light"] .au-grade.ok{background:rgba(43,89,255,.12);color:var(--brand-2)}

.au-cats{display:grid;gap:14px;min-width:0}
.au-cat{animation:auIn .7s cubic-bezier(.16,1,.3,1) both}
@keyframes auIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.au-cat-h{display:flex;align-items:center;gap:11px;margin-bottom:8px;font-size:.9rem}
.au-cat-h b{flex:1;font-weight:540}
.au-cat-h em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.au-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--glass);border:1px solid var(--line);color:var(--muted)}
.au-ic svg{width:15px;height:15px}
.track{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.fill{height:100%;border-radius:99px;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.fill.good{background:linear-gradient(90deg,#34D399,#84CC16)}
.fill.ok{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.fill.warn{background:linear-gradient(90deg,#FBBF24,#F97316)}
.fill.bad{background:linear-gradient(90deg,#FB7185,#EF4444)}
em.good{color:#34D399}em.ok{color:var(--brand)}em.warn{color:#FBBF24}em.bad{color:#FB7185}
html[data-theme="light"] em.ok{color:var(--brand-2)}

/* ── lead intelligence ── */
.au-lead{margin-top:16px}
.au-temp{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:99px;
  font-size:.86rem;font-weight:560;margin-bottom:14px;border:1px solid var(--line-2)}
.au-temp i{width:8px;height:8px;border-radius:99px;animation:pulse 2.2s infinite}
.au-temp.hot{background:rgba(251,113,133,.12);color:#FB7185;border-color:rgba(251,113,133,.3)}
.au-temp.hot i{background:#FB7185}
.au-temp.warm{background:rgba(251,191,36,.12);color:#FBBF24;border-color:rgba(251,191,36,.3)}
.au-temp.warm i{background:#FBBF24}
.au-temp.cold{background:var(--glass);color:var(--muted)}
.au-temp.cold i{background:var(--muted);animation:none}
.au-lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.au-metric{padding:18px;animation:auIn .7s cubic-bezier(.16,1,.3,1) both}
.au-metric .l{font-size:.78rem;color:var(--muted)}
.au-metric b{display:block;font-size:2rem;font-weight:660;letter-spacing:-.04em;margin:6px 0 10px;
  font-variant-numeric:tabular-nums}
.au-metric b small{font-size:.9rem;font-weight:400;color:var(--faint);letter-spacing:0}
.au-metric .d{display:block;margin-top:10px;font-size:.74rem;color:var(--faint);line-height:1.5}

/* ── angle ── */
.au-angle{margin-top:16px;padding:clamp(20px,3vw,30px)}
.au-angle-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.au-angle-h b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
  letter-spacing:-.02em}
.au-why{margin-top:10px;color:var(--muted);max-width:70ch}
.au-ice{margin-top:20px;padding:18px;border-radius:16px;background:var(--surface-2);border:1px dashed var(--line-2)}
.au-ice p{margin:10px 0 14px;line-height:1.6}

/* ── fixes ── */
.au-fixes{display:grid;gap:12px}
.au-fix{padding:20px;animation:auIn .6s cubic-bezier(.16,1,.3,1) both;border-left:3px solid var(--line-2)}
.au-fix.critical{border-left-color:#FB7185}
.au-fix.major{border-left-color:#FBBF24}
.au-fix.minor{border-left-color:var(--line-2)}
.au-fix-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.au-fix-h b{font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.sev{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.sev.critical{background:rgba(251,113,133,.16);color:#FB7185}
.sev.major{background:rgba(251,191,36,.16);color:#FBBF24}
.sev.minor{background:var(--glass);color:var(--faint)}
.au-fix .cat{margin-left:auto;font-size:.72rem;color:var(--faint);text-transform:capitalize}
.au-fix .why{margin-top:10px;color:var(--muted);font-size:.92rem;max-width:76ch}
.au-fix .fix{margin-top:10px;font-size:.9rem}
.au-fix .fix span{color:var(--brand);font-weight:600;margin-right:8px}
html[data-theme="light"] .au-fix .fix span{color:var(--brand-2)}

/* ── passed ── */
.au-pass{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.au-pass summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;
  align-items:center;color:var(--muted);font-size:.9rem}
.au-pass summary::-webkit-details-marker{display:none}
.au-pass summary b{color:#34D399;margin-left:8px}
.au-pass summary i{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .35s}
.au-pass[open] summary i{transform:rotate(225deg)}
.au-passlist{display:flex;flex-wrap:wrap;gap:8px;padding:4px 20px 20px;border-top:1px solid var(--line)}
.au-ok{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  background:var(--glass);border:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.au-ok i{font-style:normal;color:#34D399;font-weight:700}

/* ── handoff ── */
.au-cta{margin-top:clamp(40px,5vw,64px)}
.au-build{display:grid;grid-template-columns:1.6fr auto auto;gap:12px;align-items:end;
  max-width:820px;margin:26px auto 0;text-align:left}
.au-build .btn{height:54px;white-space:nowrap}
.au-engine{margin:26px 0 40px;text-align:center;font-size:.76rem;color:var(--faint);
  font-family:ui-monospace,monospace}

/* ── print / PDF ── */
@media print{
  .nav,.au-actions,.au-cta,footer,.au-hero,#theme{display:none!important}
  body{background:#fff;color:#111}
  .card,.au-top,.au-pass{border-color:#ddd!important;background:#fff!important;box-shadow:none!important}
  .au-wrap{padding-top:0}
  .au-fix{break-inside:avoid}
  .au-report{display:block!important}
}

@media(max-width:1000px){
  .au-row{grid-template-columns:1fr}
  .au-go{width:100%}
  .au-top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .au-cats{width:100%}
  .au-cat-h{text-align:left}
  .au-lead-grid,.au-skel-grid{grid-template-columns:1fr 1fr}
  .au-build{grid-template-columns:1fr}
}
@media(max-width:560px){
  .au-lead-grid,.au-skel-grid{grid-template-columns:1fr}
  .au-scorecard{width:170px;height:170px}
  .au-score b{font-size:3rem}
  .au-actions .btn{flex:1}
  .au-skel-top{flex-direction:column;text-align:center}
}
