/* ═══ THE CASE DOSSIER — components Ib: paper sheets, holes, buttons ═══ */

/* ── paper sheets: the bone panels everything important is typed on ── */
.sheet{
  position:relative;background:linear-gradient(178deg,var(--bone),var(--bone-2));
  color:var(--ink);border-radius:3px;padding:clamp(1.6rem,3.4vw,2.8rem);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4);
}
.sheet h2,.sheet h3{color:var(--ink)}
.sheet .lede{color:var(--ink-soft)}
.sheet .kick{color:var(--graphite)}
.sheet .kick b{color:var(--stamp-ink)}
.sheet p{color:var(--ink-soft)}
/* ruled baselines, like real typing paper */
.sheet--ruled{
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(107,103,94,.14) 31px 32px),
    linear-gradient(178deg,var(--bone),var(--bone-2));
}
/* a typed page heading, as if from the typewriter */
.typehead{font-family:var(--mono);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--ink);display:inline-block;padding-bottom:.35rem;margin-bottom:1.1rem}
.marginalia{font:italic 1.02rem/1.5 var(--serif);color:var(--graphite)}

/* punch holes down a sheet's left edge */
.holes{position:absolute;top:0;bottom:0;left:14px;width:16px;display:flex;flex-direction:column;
  justify-content:space-evenly;pointer-events:none}
.holes i{width:14px;height:14px;border-radius:50%;background:var(--desk);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.35)}
.sheet--holes{padding-left:clamp(2.6rem,5vw,3.6rem)}

/* ── buttons: red is the verdict, used sparingly ── */
.btn{display:inline-block;font:700 .82rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;padding:.95rem 1.5rem;cursor:pointer;border:0}
.btn--red{color:#F6EFE2;background:var(--stamp-btn);
  box-shadow:0 3px 0 var(--stamp-press),0 10px 22px rgba(0,0,0,.4);
  transition:filter .15s ease,transform .15s ease}
.btn--red:hover{filter:brightness(1.09)}
.btn--red:active{transform:translateY(2px);box-shadow:0 1px 0 var(--stamp-press)}
.btn--ink{color:var(--ink);background:transparent;border:2px solid var(--ink);box-shadow:none}
.btn--ink:hover{background:rgba(28,26,23,.07)}

/* ── reduced motion (2026-09-10) ─────────────────────────────────────────────────
   P6 has required this since 2026-08-28; this file shipped without it because
   nothing could fail. scripts/check-reduced-motion.mjs now refuses any animating
   stylesheet that carries no guard. Vestibular need, not a preference. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}