/* ==========================================================================
   Scan report — the shared ScanResult view on /scan and inside /app.
   Built on brand.css tokens; prints cleanly to PDF.
   ========================================================================== */
.rp { display: grid; gap: var(--s-5); min-width: 0; }
.rp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; }
@media (max-width: 860px) { .rp-head { grid-template-columns: auto minmax(0, 1fr); } .rp-head .rp-actions { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 520px) { .rp-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.rp-gauge { position: relative; width: 9.5rem; height: 9.5rem; }
.rp-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-gauge .trk { fill: none; stroke: var(--line); stroke-width: 9; }
.rp-gauge .val { fill: none; stroke: var(--g, var(--signal)); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--g, var(--signal)) 45%, transparent)); }
.rp-gauge .tick { stroke: var(--line-strong); stroke-width: 1; }
.rp-gauge .mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.rp-gauge .g-grade { font: 650 3rem/1 var(--font-display); font-stretch: 80%; color: var(--g, var(--ink)); }
.rp-gauge .g-score { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--muted); margin-top: 0.375rem; letter-spacing: 0.06em; }
.rp-title { display: grid; gap: var(--s-2); min-width: 0; }
.rp-title h2 { font: 650 var(--fs-2xl)/1.1 var(--font-display); font-stretch: 86%; overflow-wrap: anywhere; }
.rp-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--muted); font-size: var(--fs-sm); }
.rp-sum { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rp-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

.rp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-3); }
.rp-cat { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--glass); cursor: pointer; text-align: left; color: inherit; transition: border-color 0.25s, transform 0.3s var(--ease); }
:root[data-theme="light"] .rp-cat, .on-light .rp-cat { background: var(--surface); }
.rp-cat:hover, .rp-cat[aria-pressed="true"] { border-color: var(--signal); transform: translateY(-2px); }
.rp-cat .l { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 550; }
.rp-cat .n { font: 650 var(--fs-xl)/1 var(--font-display); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.rp-cat .n small { font: 500 var(--fs-xs) var(--font-mono); color: var(--muted); margin-left: 0.25rem; }
.rp-bar { height: 0.375rem; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--g, var(--signal)); border-radius: inherit; transition: width 1.2s var(--ease); }

.rp-panel { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
:root[data-theme="light"] .rp-panel, .on-light .rp-panel { background: var(--surface); }
.rp-panel .tabs { padding: 0 var(--s-4); }
.rp-body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
@media (max-width: 560px) { .rp-body { padding: var(--s-3); } }
.rp-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.rp-filters .input { height: 2.375rem; max-width: 16rem; font-size: var(--fs-sm); }
.chip-btn { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 550; cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); }
.chip-btn:hover { color: var(--ink); border-color: var(--muted); }
.chip-btn[aria-pressed="true"] { background: var(--signal-tint); border-color: var(--signal); color: var(--ink); }
.chip-btn b { font: 500 var(--fs-xs) var(--font-mono); color: var(--muted); }

.rp-group { display: grid; gap: var(--s-2); }
.rp-group h3 { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: var(--s-3) 0 var(--s-1); }
.rp-check { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ground-2); transition: border-color 0.2s; }
:root[data-theme="light"] .rp-check, .on-light .rp-check { background: var(--raised); }
.rp-check:hover { border-color: var(--line-strong); }
.rp-check[open] { border-color: var(--line-strong); }
.rp-check summary { list-style: none; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); cursor: pointer; }
.rp-check summary::-webkit-details-marker { display: none; }
.rp-check summary .t { font-weight: 550; font-size: var(--fs-sm); }
.rp-check summary .chev { width: 1rem; height: 1rem; stroke: var(--muted); fill: none; stroke-width: 2; transition: transform 0.25s var(--ease); }
.rp-check[open] summary .chev { transform: rotate(180deg); }
@media (max-width: 560px) { .rp-check summary { grid-template-columns: 1.5rem minmax(0, 1fr) auto; } .rp-check summary .badge { display: none; } }
.st { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; }
.st svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st.pass { color: var(--ok); background: var(--ok-tint); }
.st.warn { color: var(--amber); background: var(--amber-tint); }
.st.fail { color: var(--coral-ink); background: var(--coral-tint); }
.st.info { color: var(--steel); background: color-mix(in srgb, var(--steel) 16%, transparent); }
.rp-check .more { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 1.5rem + var(--s-3)); font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 560px) { .rp-check .more { padding-left: var(--s-4); } }
.rp-check .more .k { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.rp-check .code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-xs); padding: var(--s-3); }
.rp-check .fix { border-left: 2px solid var(--signal); padding-left: var(--s-3); }

.rp-kv { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.rp-kv dt { color: var(--muted); }
.rp-kv dd { margin: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; }
@media (max-width: 560px) { .rp-kv { grid-template-columns: minmax(0, 1fr); } .rp-kv dd { margin-bottom: var(--s-2); } }
.rp .table td.mono, .rp .table td code { font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.rp .table-wrap { background: transparent; }

.rp-certs { display: grid; gap: var(--s-3); }
.rp-axis { position: relative; height: 1.25rem; font: 400 var(--fs-xs) var(--font-mono); color: var(--muted); }
.rp-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rp-cert { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
@media (max-width: 680px) { .rp-cert { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.rp-cert .who { min-width: 0; }
.rp-cert .who b { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cert .who span { font-size: var(--fs-xs); color: var(--muted); }
.rp-track { position: relative; height: 1.25rem; border-radius: var(--r-1); background: var(--sunken); }
.rp-track i { position: absolute; top: 0.25rem; bottom: 0.25rem; border-radius: var(--r-pill); background: var(--g, var(--signal)); transform-origin: left; animation: rp-grow 1s var(--ease) both; }
.rp-track .now { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; background: var(--ink); opacity: 0.7; }
@keyframes rp-grow { from { transform: scaleX(0); } }
.rp-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--muted); display: grid; gap: var(--s-2); justify-items: center; }

@media print {
  .rp-actions, .rp-filters, .rp-panel .tabs { display: none !important; }
  .rp-panel, .rp-cat, .rp-check { background: #fff !important; border-color: #ccc !important; break-inside: avoid; }
  .rp-tabpanel[hidden] { display: grid !important; }
  .rp-tabpanel { break-before: auto; }
  .rp-tabpanel::before { content: attr(data-label); display: block; font: 600 14pt/1.3 var(--font-display); margin: 12pt 0 6pt; }
  .rp, .rp * { color: #111 !important; }
}

/* ---------- live scan progress ---------- */
.sp { display: grid; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-3); position: relative; overflow: hidden; }
:root[data-theme="light"] .sp, .on-light .sp { background: var(--surface); }
.sp::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: sp-sweep 1.8s var(--ease) infinite; }
@keyframes sp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sp-head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; flex-wrap: wrap; }
.sp-head b { font: 600 var(--fs-xl)/1.2 var(--font-display); font-stretch: 88%; overflow-wrap: anywhere; }
.sp-head .num { font: 500 var(--fs-sm) var(--font-mono); color: var(--muted); }
.sp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 760px) { .sp-steps { grid-template-columns: minmax(0, 1fr); } }
.sp-step { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ground-2); transition: border-color 0.4s, background 0.4s; }
:root[data-theme="light"] .sp-step, .on-light .sp-step { background: var(--raised); }
.sp-step .h { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-sm); }
.sp-step p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.sp-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; position: relative; }
.sp-step.run { border-color: color-mix(in srgb, var(--signal) 60%, transparent); }
.sp-step.run .sp-dot { border-color: var(--signal); border-right-color: transparent; animation: spin 0.8s linear infinite; }
.sp-step.done { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.sp-step.done .sp-dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent); }
.sp-step.done .sp-dot::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 7px; border: solid var(--ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sp-log { font: 400 var(--fs-xs)/1.7 var(--font-mono); color: var(--muted); max-height: 7.5rem; overflow: hidden; mask-image: linear-gradient(transparent, #000 35%); -webkit-mask-image: linear-gradient(transparent, #000 35%); display: flex; flex-direction: column; justify-content: flex-end; min-height: 7.5rem; }
.sp-log span { animation: rise 0.4s var(--ease) both; }
.sp-log span b { color: var(--signal); font-weight: 500; }