/* Public sample review — a fictional demonstration of one procurement
   discrepancy. Reuses tokens and primitives from _shared_tokens.html and
   public_home.css (dark-band outcome dots, closing .cta-band). Typography
   and quiet dividers do the work; no repeated bordered windows. */

/* ── page frame ──────────────────────────────────────────────── */
.sf{max-width:56rem;margin:0 auto;padding:2rem 1.5rem 4rem}
@media(min-width:768px){.sf{padding:3rem 2rem 5rem}}

/* ── breadcrumb ──────────────────────────────────────────────── */
.sf-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  font-size:.8125rem;color:var(--muted-foreground);
  margin-bottom:1.5rem;
}
.sf-crumb a{color:var(--muted-foreground);text-decoration:none}
.sf-crumb a:hover{color:var(--foreground)}
.sf-crumb .sep{color:var(--border-strong)}
.sf-crumb .current{color:var(--foreground)}

/* ── fictional-example notice (compact, restrained) ──────────── */
.sf-notice{
  display:flex;gap:.55rem;align-items:flex-start;
  padding:.9rem 1rem;margin-bottom:2rem;
  font-size:.8125rem;line-height:1.55;color:var(--muted-foreground);
  background:var(--secondary);
  border-left:2px solid var(--border-strong);
  border-radius:.25rem;
}
.sf-notice strong{color:var(--foreground);font-weight:600}

/* ── intro block ─────────────────────────────────────────────── */
.sf-intro{margin-bottom:2.5rem}
.sf-intro .eyebrow{margin-bottom:1rem}
.sf-intro h1{
  font-family:var(--font-display);
  font-size:clamp(1.875rem,4vw,2.5rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.15;
  color:var(--foreground);text-wrap:balance;
  margin:.5rem 0 1.15rem;max-width:24ch;
}
.sf-intro-p{
  font-size:1.0625rem;line-height:1.65;color:var(--muted-foreground);
  max-width:44rem;
}
.sf-intro-p strong{color:var(--foreground);font-weight:600}

/* inline outcome line — red dot + plain text, no pill */
.sf-outcome{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9375rem;font-weight:600;color:var(--foreground);
  letter-spacing:-.005em;
}

/* two-item context strip, plain sentence-style */
.sf-ctx{
  display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;
  margin-top:1.75rem;padding-top:1.25rem;
  border-top:1px solid var(--border);
  font-size:.875rem;color:var(--muted-foreground);
}
.sf-ctx span strong{color:var(--foreground);font-weight:600}

/* ── section rhythm — dividers, not nested cards ─────────────── */
.sf-sec{
  padding-top:3rem;margin-top:3rem;
  border-top:1px solid var(--border);
}
.sf-sec > h2{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.4vw,1.625rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2;
  color:var(--foreground);margin-bottom:.6rem;
  text-wrap:balance;
}
.sf-sub{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  max-width:44rem;margin-bottom:1.5rem;
}
.sf-sec p{
  font-size:1rem;line-height:1.7;color:var(--muted-foreground);
  max-width:44rem;margin-bottom:1rem;
}

/* ── focal review panel (dark, related to homepage outcomes band) */
.sf-panel{
  margin-top:.25rem;
  background:var(--foreground);
  color:var(--primary-foreground);
  border-radius:var(--radius-xl);
  overflow:hidden;
}
.sf-panel-head{
  padding:1.75rem 1.75rem 1.5rem;
  border-bottom:1px solid hsl(0 0% 24%);
  display:flex;flex-direction:column;gap:.85rem;
}
@media(min-width:640px){.sf-panel-head{padding:2rem 2.5rem 1.75rem}}
.sf-panel-eyebrow{
  font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:hsl(0 0% 62%);
}
.sf-panel-outcome{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:600;letter-spacing:-.01em;
  color:var(--primary-foreground);
}
.sf-panel-rows{display:grid;grid-template-columns:1fr;margin:0}
@media(min-width:640px){.sf-panel-rows{grid-template-columns:1fr 1fr}}
.sf-panel-cell{
  padding:1.75rem;
  display:flex;flex-direction:column;gap:.5rem;
  border-bottom:1px solid hsl(0 0% 24%);
}
@media(min-width:640px){
  .sf-panel-cell{padding:2rem 2.5rem}
  .sf-panel-cell + .sf-panel-cell{border-left:1px solid hsl(0 0% 24%)}
}
.sf-panel-k{
  font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:hsl(0 0% 62%);
}
.sf-panel-v{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.5vw,2.75rem);
  font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--primary-foreground);
}
.sf-panel-v.diff{color:#F98A83}
.sf-panel-hint{
  font-size:.8125rem;color:hsl(0 0% 62%);
  letter-spacing:-.005em;
}
.sf-panel-summary{
  display:grid;grid-template-columns:1fr;
  padding:0;background:hsl(0 0% 9%);
}
@media(min-width:640px){.sf-panel-summary{grid-template-columns:1fr 1fr}}
.sf-panel-summary > div{
  padding:1.15rem 1.75rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid hsl(0 0% 24%);
}
@media(min-width:640px){
  .sf-panel-summary > div{
    padding:1.15rem 2.5rem;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:.35rem;
  }
  .sf-panel-summary > div + div{border-left:1px solid hsl(0 0% 24%)}
}
.sf-panel-sk{
  font-size:.8125rem;color:hsl(0 0% 62%);
}
.sf-panel-sv{
  font-size:1.125rem;font-weight:600;color:var(--primary-foreground);
  letter-spacing:-.005em;
}
.sf-panel-sv.diff{color:#F98A83}
.sf-panel-sources{
  padding:1.15rem 1.75rem;
  font-size:.8125rem;color:hsl(0 0% 68%);
  letter-spacing:-.005em;line-height:1.55;
}
@media(min-width:640px){.sf-panel-sources{padding:1.15rem 2.5rem}}
.sf-panel-sources strong{color:hsl(0 0% 85%);font-weight:500}
.sf-panel-sources .mono{
  font-family:var(--font-mono);font-size:.9em;letter-spacing:-.005em;
}

/* ── document previews (paper-like, side by side on desktop) ─── */
.sf-docs{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:.25rem}
@media(min-width:820px){.sf-docs{grid-template-columns:1fr 1fr}}
.sf-doc{
  background:hsl(40 30% 99%);
  border:1px solid var(--border);
  border-radius:.5rem;
  box-shadow:0 1px 2px rgb(0 0 0 / .04);
  padding:1.5rem;
  display:flex;flex-direction:column;
}
.sf-doc-kicker{
  font-size:.6875rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-foreground);
  margin-bottom:.4rem;
}
.sf-doc-fict{
  font-size:.6875rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-foreground);
  margin-bottom:.85rem;
}
.sf-doc-title{
  font-family:var(--font-display);
  font-size:1rem;font-weight:600;letter-spacing:-.01em;
  color:var(--foreground);
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-bottom:.15rem;
}
.sf-doc-title .mono{
  font-family:var(--font-mono);font-size:.85em;font-weight:500;
  color:var(--muted-foreground);letter-spacing:-.005em;
}
.sf-doc-id{
  font-family:var(--font-mono);font-size:.8125rem;
  color:var(--foreground);letter-spacing:-.005em;
  margin-bottom:1.15rem;
}
.sf-doc-table{
  width:100%;border-collapse:collapse;
  font-size:.8125rem;color:var(--foreground);
  margin-bottom:1.1rem;
}
.sf-doc-table th,
.sf-doc-table td{
  padding:.55rem .6rem;text-align:left;
  border-bottom:1px solid var(--border);
}
.sf-doc-table thead th{
  font-size:.6875rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-foreground);
  border-bottom:1px solid var(--border-strong);
}
.sf-doc-table td.num{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sf-doc-table td.qty{
  text-align:right;font-weight:600;font-variant-numeric:tabular-nums;
}
.sf-doc-table td.qty.diff{
  color:var(--status-red);
  background:var(--status-red-bg);
  box-shadow:inset 0 0 0 1px var(--status-red-border);
  border-radius:.25rem;
}
.sf-doc-foot{
  margin-top:auto;padding-top:.85rem;
  border-top:1px dashed var(--border-strong);
  font-size:.75rem;color:var(--muted-foreground);
}
.sf-doc-foot strong{color:var(--foreground);font-weight:500}

/* ── calculation ─────────────────────────────────────────────── */
.sf-calc{
  margin:.25rem 0 1rem;padding:1.35rem 1.5rem;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--secondary);
  font-family:var(--font-mono);
  font-size:clamp(1rem,1.75vw,1.15rem);
  color:var(--foreground);text-align:center;
  letter-spacing:-.01em;overflow-x:auto;
}
.sf-calc-note{
  font-size:.9375rem;color:var(--muted-foreground);line-height:1.55;
  max-width:42rem;
}

/* ── numbered list of hypotheses ─────────────────────────────── */
.sf-list{
  list-style:none;padding:0;margin:.5rem 0 1.25rem;
  counter-reset:sfl;
  display:grid;grid-template-columns:1fr;gap:.85rem;max-width:44rem;
}
.sf-list li{
  counter-increment:sfl;
  display:grid;grid-template-columns:1.75rem 1fr;column-gap:.85rem;
  font-size:1rem;line-height:1.6;color:var(--foreground);
}
.sf-list li::before{
  content:counter(sfl) ".";
  font-family:var(--font-mono);color:var(--muted-foreground);
  font-size:.9375rem;font-weight:500;
}

/* ── next-steps mini-list ────────────────────────────────────── */
.sf-steps{
  list-style:none;padding:0;margin:.5rem 0 1rem;
  display:grid;grid-template-columns:1fr;gap:.8rem;max-width:44rem;
}
.sf-steps li{
  display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;
  font-size:1rem;line-height:1.6;color:var(--foreground);
}
.sf-steps li strong{font-weight:600;color:var(--foreground)}
.sf-steps li::before{
  content:"";display:block;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--foreground);margin-top:.7rem;
}

/* ── establishes / does-not-establish two-column pair ────────── */
.sf-pair{
  display:grid;grid-template-columns:1fr;gap:2rem;margin-top:.25rem;
}
@media(min-width:768px){.sf-pair{grid-template-columns:1fr 1fr;gap:3rem}}
.sf-pair h3{
  font-family:var(--font-display);
  font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;
  color:var(--foreground);margin-bottom:.85rem;
}
.sf-pair p{
  font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);
  margin:0 0 .85rem;max-width:none;
}
.sf-pair ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.sf-pair ul li{
  padding-left:1.15rem;position:relative;
  font-size:.9375rem;line-height:1.55;color:var(--muted-foreground);
}
.sf-pair ul li::before{
  content:"";position:absolute;left:0;top:.6rem;
  width:.4rem;height:.4rem;background:var(--border-strong);border-radius:50%;
}

/* ── source trail (visible by default) ───────────────────────── */
.sf-trail{
  list-style:none;padding:1.35rem 1.5rem;margin:.25rem 0 0;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--card);
  display:grid;grid-template-columns:1fr;gap:.9rem;
}
.sf-trail > li{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--border);
  font-size:.9375rem;color:var(--foreground);
}
@media(min-width:640px){
  .sf-trail > li{grid-template-columns:12rem 1fr;column-gap:1.25rem;align-items:baseline}
}
.sf-trail > li:last-child{padding-bottom:0;border-bottom:0}
.sf-trail dt{font-weight:600;color:var(--foreground)}
.sf-trail dd{
  margin:0;color:var(--muted-foreground);
  font-family:var(--font-mono);font-size:.875rem;letter-spacing:-.005em;
  overflow-wrap:anywhere;line-height:1.55;
}

/* ── closing CTA (reuses homepage .cta-band via public_home.css) */
.sf-cta-wrap{margin-top:3.5rem}