:root { color-scheme: light dark; --b: #8886; --fail:#b00020; --ok:#146c2e; --warn:#8a5a00; --mute:#666; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { margin-bottom: .2rem; } h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.lede { margin-top: 0; }
.small { font-size: .85rem; color: var(--mute); }
#drop { border: 2px dashed var(--b); border-radius: 8px; padding: 1.5rem; text-align: center; cursor: pointer; }
#drop.over, #drop:focus { border-color: currentColor; outline: none; }
#file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick { text-decoration: underline; cursor: pointer; }
.card { border: 1px solid var(--b); border-left-width: 6px; border-radius: 6px; padding: .6rem .9rem; margin: .8rem 0; }
.card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.card .label { font-weight: 700; }
.state-verified { border-left-color: var(--ok); } .state-verified .label { color: var(--ok); }
.state-present-unverified { border-left-color: var(--warn); } .state-present-unverified .label { color: var(--warn); }
.state-failed, .state-error { border-left-color: var(--fail); } .state-failed .label, .state-error .label { color: var(--fail); }
.state-absent, .state-not-checkable { border-left-color: #888; }
.card .detail { font-size: .85rem; color: var(--mute); }
.card .note { background: #8881; padding: .3rem .5rem; border-radius: 4px; font-size: .9rem; margin: .4rem 0 0; }
table.facts { border-collapse: collapse; font-size: .85rem; margin-top: .4rem; }
table.facts td { border-top: 1px solid var(--b); padding: .15rem .6rem .15rem 0; vertical-align: top; word-break: break-all; }
table.facts td:first-child { color: var(--mute); white-space: nowrap; }
button { font: inherit; padding: .35rem .8rem; margin-top: .6rem; }
footer { margin-top: 2rem; border-top: 1px solid var(--b); }
/* Signals scanning log (design.md D9): lines are real steps; the reveal is cosmetic (<=150 ms). */
#scanlog { --t-bg:#0d1117; --t-fg:#c9d1d9; --t-dim:#8b949e; background:var(--t-bg); color:var(--t-fg); border-radius:6px; padding:.6rem .8rem; min-height:2.4rem;
  font: .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; overflow-x:auto; white-space:pre-wrap; }
.logline { animation: log-reveal 120ms steps(12, end) both; padding-left: 17ch; text-indent: -17ch; }
.logline .log-t { color:var(--t-dim); } .logline .log-ch { color:#79c0ff; font-weight:700; }
.logline .log-s { font-weight:700; margin-left:.4rem; }
.log-verified .log-s { color:#3fb950; } .log-present-unverified .log-s { color:#d29922; }
.log-failed .log-s, .log-error .log-s, .log-error .log-x { color:#f85149; }
.log-absent .log-s, .log-not-checkable .log-s, .log-skipped .log-s { color:var(--t-dim); }
#scanlog[aria-busy="true"]::after { content:"\2588" / ""; color:var(--t-fg); animation: log-blink 1s steps(1, end) infinite; }
@keyframes log-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes log-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .logline, #scanlog[aria-busy="true"]::after { animation: none; } }
.card .claim { font-weight:600; margin:.2rem 0 .4rem; }
/* Local preview (design.md D10): compact, beside the report header; stacks on narrow screens. */
#report-head { display:flex; gap:1rem; align-items:flex-start; margin-top:1.2rem; }
#report-head #fname-h { margin-top:0; word-break:break-word; }
#report-title { flex:1 1 16rem; min-width:0; }
#preview { flex:0 0 auto; margin:0; max-width:240px; }
#preview img { display:block; max-width:240px; max-height:160px; width:auto; height:auto; border:1px solid var(--b); border-radius:4px;
  background: repeating-conic-gradient(#8883 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
#preview video { display:block; max-width:240px; max-height:200px; border-radius:4px; background:#000; }
#preview audio { display:block; width:240px; max-width:100%; }
#preview figcaption { margin-top:.3rem; line-height:1.3; }
.preview-tile { width:240px; max-width:100%; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  border:1px dashed var(--b); border-radius:4px; text-align:center; padding:.5rem; box-sizing:border-box; }
.preview-tile .preview-fmt { font-weight:700; }
.preview-tile .preview-na { font-size:.85rem; color:var(--mute); }
.preview-tile .preview-hint { font-size:.8rem; color:var(--mute); margin-top:.35rem; max-width:22ch; line-height:1.35; }
@media (max-width: 34rem) { #report-head { flex-direction:column; } #preview, #preview img, #preview video { max-width:100%; } }