/* ==========================================================================
   s35-cases.css — the "On real software" roster (index, section 2)
   --------------------------------------------------------------------------
   Two compact case cards: rsync (flagship) and jsonparser (demo project).
   Tokens only; 12px floor; no state colors on the roster (the receipts live
   on the case pages).
   ========================================================================== */
.rs-case{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.3rem,2.2vw,1.8rem) clamp(1.3rem,2.2vw,1.7rem);
  background:var(--card);border:1px solid var(--hair);
  border-radius:10px; /* card radius (DESIGN.md scale); was an off-scale calc(+6px)=12px */
}
/* hard-geometry themes flatten the roster cards and their flags like every
   other card chassis (themes.css §shapes) */
html[data-theme="riso"] .rs-case,html[data-theme="terminal"] .rs-case,
html[data-theme="brutal"] .rs-case,html[data-theme="verified"] .rs-case,
html[data-theme="riso"] .rs-case-flag,html[data-theme="terminal"] .rs-case-flag,
html[data-theme="brutal"] .rs-case-flag,html[data-theme="verified"] .rs-case-flag,
html[data-theme="riso"] .rs-demo-flag,html[data-theme="terminal"] .rs-demo-flag,
html[data-theme="brutal"] .rs-demo-flag,html[data-theme="verified"] .rs-demo-flag{border-radius:0;}
/* the section may never widen the document: the flag below is 247px of
   nowrap mono, and on a 375px phone it pushed scrollWidth to 414. The real
   fix is on the flag (wrap + max-width); the clip is the backstop. */
#cases{overflow-x:clip;}
.rs-case-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;
  margin:0 0 .8rem;
}
.rs-case-name{
  margin:0;font-family:var(--mono);font-size:1rem;font-weight:600;
  letter-spacing:.06em;color:var(--ink);
}
.rs-case-flag{
  flex:0 1 auto;max-width:100%;font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair-strong,var(--hair));
  border-radius:2px;padding:.18rem .45rem;white-space:nowrap; /* control radius */
}
/* under 480px even the flag alone can exceed the column, so its text wraps
   inside its own border instead of leaving the viewport */
@media (max-width:480px){
  .rs-case-flag{white-space:normal;line-height:1.5;}
}
.rs-case-say{margin:0;max-width:62ch;font-family:var(--prose);font-size:1.12rem;line-height:1.6;color:var(--ink);}
.rs-case-nums{
  margin:1rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.78rem;line-height:1.9;letter-spacing:.04em;
  color:var(--muted);
}
.rs-case-nums b{font-weight:600;color:var(--ink);}
.rs-case-nums i{font-style:normal;color:var(--hair-strong);margin:0 .5em;}
.rs-case-rec{
  margin:.9rem 0 0;max-width:66ch;
  font-family:var(--prose);font-size:.98rem;line-height:1.55;
  color:var(--ink);
}
.rs-case-rec b{font-weight:600;}
.rs-case-foot{margin:1rem 0 0;}
.rs-case-tob{
  margin:1.2rem 0 0;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;line-height:1.6;
  color:var(--muted);
}
/* exp38 STAGE-29: the quiet "more projects" pointer under the two case cards.
   Same machine-layer register as .rs-case-tob; counts read as ink, the roster
   is the one --signal affordance. No state hue here — this is a pointer, not a
   verdict. */
.rs-case-more{
  margin:1.1rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;line-height:1.85;
  color:var(--muted);
}
.rs-case-more b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.rs-case-more a{
  color:var(--signal);text-decoration:none;
  border-bottom:1px solid rgba(var(--signal-rgb),.35);
}
.rs-case-more a:hover{border-bottom-color:var(--signal);}

/* the demo-project flag at the roster→requirement seam */
.rs-demo-flag{
  display:inline-flex;align-items:center;margin:0 0 .7rem;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair-strong,var(--hair));
  border-radius:2px;padding:.2rem .5rem;white-space:nowrap; /* control radius */
}