/* "Example review" — the parts of one review story the sample-finding
   panel does not already cover: the file that went in, the list of
   results, and what the reviewer does next. The finding panel itself
   reuses .sf-panel* from public_sample_finding.css unchanged. */

.ex-file,.ex-results,.ex-next{
  list-style:none;margin:0;padding:0;display:grid;gap:0}

/* ── the documents supplied ─────────────────────────────────────── */
.ex-doc{
  display:grid;gap:.2rem;padding:.9375rem 0;
  border-top:1px solid var(--border)}
.ex-doc:last-child{border-bottom:1px solid var(--border)}
.ex-doc-k{
  font-size:.8125rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted-foreground)}
.ex-doc-v{color:var(--ink);line-height:1.5}
@media(min-width:768px){
  .ex-doc{grid-template-columns:13rem 1fr;gap:1.5rem;align-items:baseline}
  .ex-doc-k{padding-top:.1rem}
}

/* ── the results ────────────────────────────────────────────────── */
.ex-result{
  display:grid;gap:.375rem;padding:1.1875rem 0;
  border-top:1px solid var(--border)}
.ex-result:last-child{border-bottom:1px solid var(--border)}
.ex-result-name{font-weight:600;color:var(--ink)}
/* The dot is never the only signal — the result is spelled out beside
   it, and each row also carries a sentence saying what it means. */
.ex-result-out{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;color:var(--ink);white-space:nowrap}
.ex-result-note{color:var(--muted-foreground);line-height:1.6;max-width:58ch}
@media(min-width:768px){
  .ex-result{
    grid-template-columns:15rem 14rem 1fr;gap:1.25rem;align-items:baseline}
}

.ex-aside{
  margin-top:1.75rem;padding-left:1rem;
  border-left:2px solid var(--border);
  color:var(--muted-foreground);line-height:1.7;max-width:62ch}

/* ── establishes / does not establish ───────────────────────────── */
.ex-split{display:grid;gap:2rem;margin-top:2.5rem}
@media(min-width:768px){.ex-split{grid-template-columns:1fr 1fr;gap:3rem}}
.ex-sub-h{
  font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 .75rem}
.ex-list{margin:0;padding-left:1.1rem;display:grid;gap:.5rem}
.ex-list li{color:var(--ink);line-height:1.6}
.ex-list-muted li{color:var(--muted-foreground)}

/* ── what happens next ──────────────────────────────────────────── */
.ex-next{counter-reset:ex-step;gap:0}
.ex-next li{
  position:relative;padding:1.125rem 0 1.125rem 2.5rem;
  border-top:1px solid var(--border);
  color:var(--muted-foreground);line-height:1.65;max-width:66ch}
.ex-next li:last-child{border-bottom:1px solid var(--border)}
.ex-next li strong{color:var(--ink);font-weight:600}
.ex-next li::before{
  counter-increment:ex-step;content:counter(ex-step);
  position:absolute;left:0;top:1.125rem;
  width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--muted);border:1px solid var(--border);
  font-size:.75rem;font-weight:600;color:var(--muted-foreground)}