/* ============================================================
   c-complete — C11 order completed. K-17, option 1-E "Linen and cognac": a stitch sews itself across a linen stage,
   the garments hang from it on tags, Amara's woven "Tailored by" label carries the stars, the receipt is one row.
   Tokens only; strokes are inset shadows; money is the sans. Motion lives in the no-preference block at the end and
   only moves things that are already complete at rest (html.is-test never animates, so baselines are stable).
   ============================================================ */
.c-complete { gap: 0; }

/* the stage (eyebrow, title, the stitch with the garment tags) is the shared linenStage + tagRail (components-v5.css, K-20 / K-21) */

/* ---------- Amara's woven label ---------- */
.c-complete__label { position: relative; z-index: 1; margin-top: calc(-1 * var(--space-16)); padding: var(--space-20); border-radius: var(--radius-sm); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--neutral-300), var(--shadow-float); }
.c-complete__label::before { content: ''; position: absolute; inset: var(--space-8); border: 1px dashed var(--accent-base); border-radius: var(--radius-4); pointer-events: none; }
.c-complete__label > * { position: relative; }
.c-complete__by { margin: 0; color: var(--accent-ink); }
.c-complete__namerow { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-4); }
.c-complete__name { font-family: var(--font-sans); font-size: var(--size-24); line-height: var(--lh-24); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.c-complete__meta { margin: var(--space-2) 0 0; padding-bottom: var(--space-4); color: var(--neutral-700); }
.c-complete__rule { margin: var(--rhythm-group) 0; height: 0; border-top: 1px dashed var(--accent-base); }
.c-complete__label h2 { margin: 0; }
.c-complete__label .stars--input { margin-left: calc(-1 * var(--space-8)); }
.c-complete__hint { margin: var(--space-4) 0 0; color: var(--neutral-700); text-wrap: pretty; }
.c-complete__label + .sec { margin-top: var(--rhythm-block); }
@media (max-width: 18.75em) { .c-complete__label { padding: var(--space-12); } .c-complete__label .stars--input { margin-left: 0; } }   /* P1-2 zoom tier */

/* ---------- the receipt row ---------- */
.c-complete__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: 56px; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--card-ring-tap); font-family: var(--font-sans); color: var(--ink); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums lining-nums; }
.c-complete__row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.c-complete__rowicon { display: inline-flex; flex-shrink: 0; color: var(--neutral-600); }
.c-complete__rowtext { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.c-complete__row .method-row__chevron { flex-shrink: 0; width: var(--size-16); height: var(--size-16); color: var(--neutral-600); }
.c-complete__row[aria-expanded="true"] .method-row__chevron { transform: rotate(90deg); }
.c-complete__receipt-body { padding-top: var(--space-16); }

/* ---------- motion: the label rises (the stitch and tags move in the shared tagRail) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes c-complete-rise { from { transform: translateY(var(--space-12)); opacity: 0; } to { transform: none; opacity: 1; } }
  html:not(.is-test) .c-complete__label { animation: c-complete-rise 600ms var(--ease-out) 700ms both; }
  .c-complete__row .method-row__chevron { transition: transform 180ms var(--ease-out); }
}
/* Study-1 A4: the 7-day review reminder, a notification card above the linen stage (the stage then starts under it, not bled up) */
.c-complete__reminder { margin-bottom: var(--rhythm-group); }
.c-complete__reminder + .linen-stage { margin-top: 0; }

/* S-35 (pre-MVP A1): where the courier left it, and "Didn't get it?" */
.c-complete__delivered { margin-top: var(--rhythm-block); }
.c-complete__missing { margin-top: var(--space-8); }