/* css/card.css — cards, panels and the small layout helpers.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   Cards and panels
   ========================================================================== */
.card{
  background:var(--field);border:1px solid var(--rule-strong);
  border-radius:var(--r);padding:30px;
  /* One notch more depth than --sh so surfaces separate from the paper —
     CIT-15. The shadow tokens are the LOCKED spec's and stay verbatim. */
  box-shadow:0 1px 2px rgba(27,42,58,.05), 0 10px 28px rgba(27,42,58,.07);
}
.card + .card{margin-top:30px}
.card > h2:first-child{margin:0 0 5px}
.card > h2:first-child + .help{margin:0 0 20px}
.card-head{display:flex;align-items:flex-start;gap:var(--gap);flex-wrap:wrap;margin-bottom:var(--gap)}
.card-head h2,.card-head h3{margin:0}
.card-head .label{margin-bottom:.2rem}

.narrow{max-width:34rem}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:flex-end}
.spread{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:baseline;justify-content:space-between}

/* Decorative hairline between rows. THE ONLY legitimate use of --rule: it is
   1.4:1 and carries no meaning (WCAG 1.4.11). */
.hairline{border:0;border-top:1px solid var(--rule);margin:var(--gap) 0}

/* No 640px padding step-down — CIT-15: the approved mock keeps 30px on its
   phone toggle. */