/* ============================================================
   /carbon-receipt/ — page constructions only.

   §8.5: nothing boxed. The three verification states (§3) and the receipt contents (§4)
   are both borderless lists — §8.5 names explanatory prose and standards-style lists as
   never-box, and the three states in particular are one argument read in sequence, not
   three peer objects to compare. The answer block carries a rule, not a frame.
   Everything else is global.
   ============================================================ */

.cr-hero{padding-block:var(--sp-16) var(--sp-12)}

/* The answer block's only emphasis. --c-link rather than --c-border-accent, which is
   rgba(...,.25) and computes ~1.37:1 on white, i.e. effectively invisible. */
.cr-answer{border-inline-start:3px solid var(--c-link);padding-inline-start:var(--sp-4)}

/* §3 the three states — numbered rail. The numbering is load-bearing: these are three
   points on one ladder of assurance, and a bulleted set would read as alternatives of
   equal weight, which is precisely the misreading the page exists to prevent. */
.cr-states{list-style:none;counter-reset:cr-state}
.cr-state{position:relative;counter-increment:cr-state;
  padding-inline-start:var(--sp-12);padding-bottom:var(--sp-8)}
.cr-state:last-child{padding-bottom:0}
.cr-state::before{content:counter(cr-state);position:absolute;inset-inline-start:0;top:0;
  width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--s-bluelt);color:var(--c-link);font-size:var(--t-small);font-weight:800}
/* Solid rail: a dashed line means "missing data" in this design system (DL §2), and a
   dashed connector on a page about assurance would mis-signal. */
.cr-state::after{content:"";position:absolute;inset-block:var(--sp-8) 0;
  inset-inline-start:calc(var(--sp-4) - 1px);width:0;
  border-inline-start:1px solid var(--c-border)}
.cr-state:last-child::after{display:none}
.cr-state h3{margin:0 0 var(--sp-2)}
.cr-state p{margin:0;max-width:var(--measure)}

/* §4 receipt contents — slim two-column strip, hairline divided. */
.cr-contents{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-8) var(--sp-12)}
.cr-item{padding-inline-start:var(--sp-4);border-inline-start:1px solid var(--c-border)}
.cr-item h3{margin:0 0 var(--sp-2)}
.cr-item p{margin:0}

@media (max-width:900px){
  .cr-contents{grid-template-columns:1fr;gap:var(--sp-6)}
}
@media (max-width:640px){
  .cr-hero{padding-block:var(--sp-12) var(--sp-8)}
  .cr-state{padding-inline-start:var(--sp-12);padding-bottom:var(--sp-6)}
}