/* create.html in the "original-zoom" look.  (redesign-v6/css/create.css, loaded last)

   The real engine (js/create.js, wizard*.js, photoEditor.js) drives the markup, so nothing here renames
   or moves an id or class. The wizard is one cream panel on the countryside, with a ticket-strip step rail
   above it. The capture dialogs, fonts window, postmark window and the two full-screen overlays (the card
   reveal and the send) are in create-capture.css.

   Fights to know about: css/funnel.css is full of !important (current step dot, dropzone, panel, inputs),
   and css/order.css gives every .card a max-width. Where funnel.css or theme.css use !important this
   sheet repeats it with one more selector, never a bigger hammer. */

/* ================================================================== 1. PAGE FRAME */
.wizard-shell { padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 7vw, 92px); }
.wizard-shell > .container { max-width: 1080px; }

/* intro: a small plate, one line of title and one of lead, the "five steps" tag on the right */
.wizard-intro {
  max-width: none; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.5rem;
  padding: 18px clamp(20px, 2.8vw, 32px) 20px;
}
.wizard-intro h1 { order: 1; margin: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.wizard-intro .lead { order: 3; flex: 1 0 100%; margin: 0; font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); }
/* funnel.css hides this tag with !important; it is a fact worth keeping (five steps, about two minutes) */
body .wizard-intro .badge {
  display: inline-flex !important; order: 2; margin-left: auto; align-items: center; gap: 8px;
  padding: 7px 12px 6px 8px; background: var(--cream-2); color: var(--ink);
  border: 1.5px dashed rgb(var(--terra-rgb) / .55); box-shadow: 2px 2px 0 var(--edge); transform: rotate(1.2deg);
}
.wizard-intro .badge img { width: 30px; height: 24px; }
@media (max-width: 559px) {
  .wizard-intro { padding: 16px 18px 18px; }
  body .wizard-intro .badge { order: 0; margin-left: 0; flex: none; margin-bottom: .45rem; transform: rotate(-1deg); }
  .wizard-intro h1 { flex: 1 0 100%; }
}

/* one column always: the rail is a strip above the panel, and the panel gets the full width */
.wizard-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

/* ================================================================== 2. STEP RAIL: a ticket strip
   Five stubs between dashed perforations. The current stub is the stamped one. */
.wizard-grid .step-rail {
  position: relative; top: auto; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: row; flex-wrap: nowrap !important; gap: 0 !important;
  overflow: hidden !important; list-style: none; border: 0;
  outline: 2px dashed rgb(var(--ink-rgb) / .22); outline-offset: -7px;
}
.wizard-grid .step-rail-item {
  position: relative; flex: 1 1 0 !important; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px !important; border-radius: 0 !important;
  cursor: default;
}
.wizard-grid .step-rail-item.is-done { cursor: pointer; }
.wizard-grid .step-rail-item + .step-rail-item::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 0; background: none;
  border-left: 2px dashed rgb(var(--ink-rgb) / .26);
}
.wizard-grid .step-rail-item.is-current { background: rgb(var(--terra-rgb) / .1); }
.wizard-grid .step-rail-item.is-current + .step-rail-item::after,
.wizard-grid .step-rail-item.is-current::after { border-left-color: rgb(var(--terra-rgb) / .45); }
.wizard-grid .step-rail-item.is-done:hover { background: var(--pen-wash); }
.wizard-grid .step-rail-item.is-done:hover .step-rail-dot { background: var(--terra) !important; color: var(--btn-on) !important; }
.wizard-grid .step-rail-dot {
  flex: none; width: 34px; height: 34px;
  font: 700 .95rem/1 var(--font-ui);
  background: var(--cream-2); color: var(--ink-faint);
  border: 2px solid rgb(var(--ink-rgb) / .35) !important;
}
.wizard-grid .step-rail-item.is-current .step-rail-dot {
  background: var(--terra) !important; border-color: var(--terra) !important; color: var(--btn-on) !important;
  box-shadow: 0 3px 0 var(--terra-deep);
}
.wizard-grid .step-rail-item.is-done .step-rail-dot { font-size: 0 !important; background: var(--cream-2) !important; border-color: var(--terra) !important; color: var(--terra) !important; }
.wizard-grid .step-rail-item.is-done .step-rail-dot::before { font-size: 1rem !important; font-weight: 700; color: var(--terra) !important; }
.wizard-grid .step-rail-item.is-done:hover .step-rail-dot::before { color: var(--btn-on) !important; }
.wizard-grid .step-rail-text { padding: 0; gap: 2px; min-width: 0; }
.wizard-grid .step-rail-text strong { font: 700 1rem/1.15 var(--font-ui); color: var(--ink-faint); white-space: normal; }
.wizard-grid .step-rail-item.is-current .step-rail-text strong,
.wizard-grid .step-rail-item.is-done .step-rail-text strong { color: var(--ink); }
.wizard-grid .step-rail-text small { display: none; font: 500 .8125rem/1.25 var(--font-ui); color: var(--ink-dim); }
@media (min-width: 1000px) { .wizard-grid .step-rail-text small { display: block; } }
@media (max-width: 859px) {
  .wizard-grid .step-rail-item { flex-direction: column; justify-content: flex-start; gap: 7px; padding: 14px 2px 12px !important; text-align: center; }
  .wizard-grid .step-rail-dot { width: 30px; height: 30px; font-size: .875rem; }
  .wizard-grid .step-rail-text { align-items: center; }
  .wizard-grid .step-rail-text strong { font-size: .8125rem; letter-spacing: 0; }
  .wizard-grid .step-rail-item + .step-rail-item::after { top: 10px; bottom: 10px; }
}
@media (max-width: 559px) { .wizard-grid .step-rail-text strong { font-size: .75rem; } }
@media (max-width: 430px) { .wizard-grid .step-rail-text strong { font-size: .6875rem; } }

/* ================================================================== 3. THE PANEL */
.wizard-panel { padding: clamp(24px, 3.6vw, 42px) clamp(20px, 3.8vw, 46px) clamp(22px, 3vw, 34px); }
.step-panel.is-active { animation-duration: .22s; }
.step-panel-title { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.2rem); margin: 0 0 .4rem; }
.step-panel-hint { max-width: 56ch; margin: 0 0 1.6rem; }
.hint { margin: .45rem 0 0; font: 500 .875rem/1.45 var(--font-ui); color: var(--ink-dim); }
.wizard-panel .link-btn { color: var(--pen); }
.wizard-panel .link-btn:hover { color: var(--pen-deep); }

.mini-label { font: 700 .8125rem/1.3 var(--font-ui); letter-spacing: .03em; text-transform: none; color: var(--ink); margin-bottom: .35rem; }
.mini-opt { font: 500 .8125rem var(--font-ui); letter-spacing: 0; color: var(--ink-faint); }

/* controls bar: back on the left, the one thing to do on the right, a dotted rule above */
.wizard-panel .wizard-controls {
  margin-top: 2.1rem; padding-top: 1.35rem; padding-bottom: 0;
  border-top: 2px dotted rgb(var(--ink-rgb) / .3); border-radius: 0;
  gap: .75rem 1rem;
}
/* the message hugs its words and sits beside the button, instead of stretching into a bar */
.wizard-controls #wizard-error { flex: 0 1 auto; margin-left: auto; justify-content: flex-start; text-align: left; }
.wizard-controls .btn-primary { margin-left: auto; }
@media (min-width: 560px) { .wizard-controls:has(#wizard-error:not(.hidden)) .btn-primary { margin-left: 0; } }
@media (max-width: 559px) { .wizard-controls #wizard-error { flex: 1 0 100%; margin-left: 0; } }
/* on checkout the message sits on its own row above the buttons, as plain red words with the mark */
.wizard-controls[data-step="checkout"] #wizard-error { background: none; border: 0; padding: 0; }
.wizard-controls .btn-ghost { color: var(--ink-dim) !important; padding-left: 4px; }
.wizard-controls .btn-ghost:hover { color: var(--ink) !important; }
.wizard-controls .btn-ghost:disabled { opacity: .35; cursor: not-allowed; background: none; }
#wizard-continue { min-height: 52px; padding-inline: 34px; font-size: 1.0625rem; }
#wizard-continue:disabled { opacity: .55; cursor: wait; box-shadow: 0 4px 0 var(--terra-deep); }
#wizard-addcart { min-height: 46px; }
.wizard-error { padding: 9px 13px; }
.wizard-error::before { background: var(--flag); color: var(--cream-2); font-family: var(--font-ui); }

/* the held-cards strip above the wizard, and the note above it (both are hidden until used) */
.cart-strip { margin: 0 0 1.25rem; padding: 12px 16px; gap: .8rem 1.2rem; }
.cart-strip[hidden] { display: none; }
.cart-thumb { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font: 700 .75rem/1.2 var(--font-ui); color: var(--ink-dim); }
.cart-thumb img { border: 2px solid rgb(var(--ink-rgb) / .4); border-radius: 6px; box-shadow: 2px 2px 0 var(--edge); }
.cart-thumb button { top: -9px; right: -9px; width: 24px; height: 24px; border: 2px solid rgb(var(--ink-rgb) / .5); background: var(--cream-2); color: var(--ink); box-shadow: 0 2px 0 rgb(var(--shade-rgb) / .3); font-family: var(--font-ui); }
.cart-thumb button:hover { border-color: var(--terra); color: var(--terra-deep); background: var(--cream-hi); }
.cart-strip-meta { font: 700 .9375rem var(--font-ui); }
.again-status { margin: 0 0 1.25rem; padding: 12px 16px; background: var(--cream); border: 2px solid rgb(var(--ink-rgb) / .3); box-shadow: 4px 4px 0 var(--edge); color: var(--ink); }
.again-status.is-error { color: var(--flag); background: var(--cream); border-color: color-mix(in srgb, var(--flag) 55%, transparent); }

/* ================================================================== 4. STEP 1: PHOTO */
/* the empty drop target: a viewfinder. the corners are the frame the photo will be cut to. */
#photo-drop {
  min-height: 250px; padding: 28px !important; border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--edge);
  border: 2px dashed rgb(var(--ink-rgb) / .45) !important;
}
#photo-drop:hover, #photo-drop:focus-visible { border-color: var(--terra) !important; box-shadow: 4px 4px 0 rgb(var(--terra-rgb) / .3); }
body #photo-drop::before {
  display: block !important; content: ""; position: absolute; inset: 14px; width: auto; height: auto; transform: none; background:
    linear-gradient(var(--terra), var(--terra)) 0 0 / 22px 3px,   linear-gradient(var(--terra), var(--terra)) 0 0 / 3px 22px,
    linear-gradient(var(--terra), var(--terra)) 100% 0 / 22px 3px, linear-gradient(var(--terra), var(--terra)) 100% 0 / 3px 22px,
    linear-gradient(var(--terra), var(--terra)) 0 100% / 22px 3px, linear-gradient(var(--terra), var(--terra)) 0 100% / 3px 22px,
    linear-gradient(var(--terra), var(--terra)) 100% 100% / 22px 3px, linear-gradient(var(--terra), var(--terra)) 100% 100% / 3px 22px;
  background-repeat: no-repeat; pointer-events: none; opacity: .75;
}
#photo-drop .dropzone-placeholder { position: relative; z-index: 1; }
.dropzone-placeholder svg { width: 52px; height: 52px; margin-bottom: 14px; color: var(--terra) !important; }
.dropzone-placeholder p:first-of-type { font: 400 1.35rem/1.2 var(--font-heading); color: var(--ink) !important; }
.dropzone-placeholder .hint { margin-top: .5rem; color: var(--ink-dim) !important; }
#photo-drop .dropzone-thumb { height: 100%; }

/* the framing editor: the postcard front on the left (the thing you are editing), the tools on the right */
.photo-editor { display: grid; gap: 14px; }
#photo-editor-stage {
  border: 0 !important; border-radius: 6px !important; background: var(--paper-sunken) !important;
  outline: 2px solid rgb(var(--ink-rgb) / .4); box-shadow: 7px 7px 0 var(--edge);
}
.photo-editor-controls { gap: .6rem; }
.pe-actions { gap: .55rem; align-items: center; }
.pe-change { min-height: 44px; }
.pe-chip {
  min-height: 44px; padding: 6px 14px; font: 700 .875rem/1 var(--font-ui); color: var(--ink);
  background: var(--cream-2); border: 2px solid rgb(var(--ink-rgb) / .4); border-radius: 8px; box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .22);
}
.pe-chip:hover:not(:disabled) { background: var(--cream-hi); border-color: var(--terra); color: var(--terra-deep); }
.pe-chip:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.pe-chip:disabled { opacity: .4; box-shadow: none; }
.pe-more[open] > summary { background: var(--pen-wash); border-color: var(--terra); color: var(--terra-deep); }
.pe-more { flex: 1 1 100%; order: 9; }
.pe-more-row { gap: .55rem; margin-top: .7rem; padding: 14px; background: var(--paper-sunken); border-radius: 10px; border: 2px dashed rgb(var(--ink-rgb) / .25); }
.pe-slider { font: 700 .8125rem var(--font-ui); color: var(--ink); grid-template-columns: 5.6rem minmax(0, 1fr) 3rem; }
.pe-slider span:last-child { color: var(--ink-dim); font-weight: 500; }
.pe-slider label { font: 700 .8125rem var(--font-ui); }
#pe-straighten { accent-color: var(--terra) !important; }
#pe-straighten::-webkit-slider-runnable-track { background: var(--paper-sunken); height: 6px; }
#pe-straighten::-moz-range-track { background: var(--paper-sunken); height: 6px; }
.photo-editor > .hint { margin: 0; }

@media (min-width: 860px) {
  .photo-editor { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; align-items: start; }
  #photo-editor-stage { grid-column: 1; grid-row: 1 / span 3; }
  .photo-editor-controls { grid-column: 2; grid-row: 1; }
  .front-stamp { grid-column: 2; grid-row: 2; margin-top: .4rem; }
  .photo-editor > .hint { grid-column: 2; grid-row: 3; align-self: end; }
}

/* "Stamp on the photo", optional: a fold-out with chips and four little thumbnails */
.front-stamp { margin-top: 1rem; padding: 4px 14px; background: var(--cream-2); border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 10px; box-shadow: 3px 3px 0 var(--edge); }
.front-stamp[open] { padding-bottom: 14px; }
.front-stamp > summary, .front-stamp > .mini-label { font: 700 .9375rem/1.2 var(--font-ui); color: var(--ink); min-height: 46px; }
.front-stamp > summary::before { border: 2px solid rgb(var(--ink-rgb) / .5); color: var(--ink); font-weight: 700; background: var(--cream); }
.front-stamp > summary:hover::before { color: var(--terra); border-color: var(--terra); }
.stamp-toggles { gap: .5rem; }
.stamp-chip span { min-height: 42px; padding: 0 16px; font: 700 .875rem var(--font-ui); border-radius: 8px; }
.stamp-chip input:checked + span { background: var(--terra); color: var(--btn-on); border-color: var(--terra); box-shadow: 0 3px 0 var(--terra-deep); }
.stamp-chip input:checked + span::before { background: var(--btn-on); }
.stamp-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.stamp-chip:hover span { border-color: var(--terra); color: var(--terra-deep); }
.stamp-chip input:checked:hover + span, .stamp-chip:hover input:checked + span { color: var(--btn-on); }
.stamp-when-note, .stamp-when-note[hidden] { font: 500 .875rem/1.4 var(--font-ui); color: var(--ink-dim); }
.stamp-when-custom input { width: auto; min-height: 42px; font-size: .9375rem; }
.stamp-place { min-height: 42px; }
.stamp-styles { gap: .6rem; }
.stamp-look { padding: 6px 6px 8px; gap: .35rem; }
.stamp-look span { font: 700 .75rem var(--font-ui); color: var(--ink-dim); }
.stamp-look canvas { box-shadow: 0 0 0 1.5px rgb(var(--shade-rgb) / .3); border-radius: 4px; }
.stamp-look:has(input:checked) { border-color: var(--terra) !important; box-shadow: 3px 3px 0 rgb(var(--terra-rgb) / .35) !important; background: color-mix(in srgb, var(--terra) 8%, var(--cream-2)) !important; }
.stamp-look input:checked ~ canvas { box-shadow: 0 0 0 2px var(--terra); }
.stamp-look input:checked ~ span { color: var(--terra-deep); }
.stamp-look:hover canvas { box-shadow: 0 0 0 2px var(--terra); }

/* ================================================================== 5. STEP 2: HANDWRITING */
/* the offer to trace your own hand: a tile with a line of sample writing, then the words, then the button */
.hw-cta {
  position: relative; gap: .75rem; margin-top: .2rem; padding: 24px clamp(20px, 3vw, 32px) 26px;
  background: var(--cream-2); border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 12px; box-shadow: 5px 5px 0 var(--edge);
}
.hw-cta::before {
  content: "the quick brown fox"; display: block; margin-bottom: .1rem;
  font: 400 clamp(2rem, 1.5rem + 2vw, 2.9rem)/1 var(--font-hand); color: var(--hand-ink); transform: rotate(-1.5deg); transform-origin: left; opacity: .92;
}
.hw-cta-title { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.7rem)/1.15 var(--font-heading); color: var(--ink); }
.hw-cta-text { max-width: 58ch; font: 500 var(--step--1)/1.5 var(--font-ui); color: var(--ink-dim); }
.hw-cta .btn { min-height: 52px; padding-inline: 28px; margin-top: .4rem; }
.hw-mine-title { font: 400 1.3rem/1.2 var(--font-heading); margin: .2rem 0 .8rem; color: var(--ink); }

/* handwriting tiles (also in the fonts window): a specimen of the hand, a name under it */
.font-grid { gap: 14px; margin-bottom: 1.1rem; }
.font-option { padding: 10px 12px 11px; text-align: left; color: var(--ink); }
.font-option:hover { transform: translateY(-2px); border-color: var(--terra) !important; }
.font-option.is-selected { background: color-mix(in srgb, var(--terra) 8%, var(--cream-2)) !important; }
.font-option.is-selected::after {
  display: flex !important; content: "\2713"; top: -10px; right: -10px; width: 26px; height: 26px; font: 700 .9rem var(--font-ui);
  color: var(--btn-on); background: var(--terra); border: 2px solid var(--cream); box-shadow: 0 2px 0 var(--terra-deep);
}
.font-preview-holder { height: 58px !important; background: var(--card-paper-2); border-radius: 6px; }
.font-preview-holder svg { color: var(--card-ink); }
.font-option-label { font: 700 .8125rem var(--font-ui); color: var(--ink-dim); margin-top: .5rem; }
.font-option.is-selected .font-option-label { color: var(--terra-deep); }

/* the "use a default font" line sits under the panel, on the scene: give it a small plate */
.font-menu-line {
  grid-column: 1 / -1; justify-self: start; margin: -.4rem 0 0; padding: 8px 18px 9px; width: auto;
  background: var(--cream); border-radius: 10px; box-shadow: 4px 4px 0 var(--edge); font: 500 .9375rem var(--font-ui);
}
.font-menu-line[hidden] { display: none; }
.font-menu-line .link-btn { color: var(--terra-deep); font: 700 .9375rem var(--font-ui); }
.font-menu-line .link-btn:hover { color: var(--pen-deep); }

/* ================================================================== 6. STEP 3: NOTE */
.note-hand { font: 700 .875rem var(--font-ui); color: var(--ink-dim); margin-bottom: .6rem; }
.note-hand strong { color: var(--ink); }
/* the textarea is a sheet of lined note paper */
#note-input {
  min-height: 13.5rem; padding: 16px 20px 18px 24px;
  font: 400 1.2rem/2rem var(--font-body); color: var(--ink);
  background-color: var(--cream-2) !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgb(var(--ink-rgb) / .14) 31px 32px) !important;
  background-origin: content-box; background-attachment: local;
  box-shadow: inset 5px 0 0 -2px rgb(var(--terra-rgb) / .0), inset 0 2px 0 rgb(var(--shade-rgb) / .06);
  border-radius: 10px !important;
}
.note-meta { margin-top: .55rem; font: 700 .8125rem var(--font-ui); color: var(--ink-dim); }
.note-fit { font: 700 .8125rem var(--font-ui); }
#note-preview {
  margin-top: 1rem; padding: 14px 20px; border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 10px;
  background: var(--card-paper-2) !important; box-shadow: 3px 3px 0 var(--edge);
}
#note-preview:empty { display: none; }
.sig-use { margin-top: 1rem; padding: 12px 16px; background: var(--cream-2); border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 10px; box-shadow: 3px 3px 0 var(--edge); }
.sig-use-text { font: 700 .9375rem var(--font-ui); color: var(--ink); }

/* ================================================================== 7. STEP 4: ADDRESS */
.address-grid { gap: 1rem .85rem; }
@media (min-width: 560px) {
  .address-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .address-grid > .addr-field { grid-column: span 6; }
  .address-grid > .addr-field:nth-child(-n+3), .address-grid > .addr-field:has(.addr-fixed) { grid-column: 1 / -1; }
  .address-grid > .addr-field:nth-child(4) { grid-column: span 6; }
  .address-grid > .addr-field:nth-child(5) { grid-column: span 3; }
  .address-grid > .addr-field:nth-child(6) { grid-column: span 3; }
}
.addr-field .mini-label { margin-bottom: .35rem; }
.addr-field input { margin: 0; }
.addr-fixed { color: var(--ink-dim) !important; background: var(--paper-sunken) !important; box-shadow: none; }
.saved-addr-row { gap: .5rem; margin-bottom: 1.1rem; }
.saved-addr-row-label { font: 700 .8125rem var(--font-ui); letter-spacing: .03em; text-transform: none; color: var(--ink-dim); }
.saved-addr-chip { padding: 8px 16px; min-height: 40px; font: 700 .875rem var(--font-ui); border-radius: 8px !important; cursor: pointer; }
.saved-addr-chip:hover { border-color: var(--terra) !important; }
.save-addr { gap: .65rem; margin-top: 1.1rem; font: 700 .9375rem var(--font-ui); color: var(--ink); }
.save-addr-name { min-height: 42px !important; padding: 6px 12px !important; font-size: .9375rem; }
.addr-extra-row { margin-top: 1.2rem; }
#toggle-return { display: inline-flex; align-items: center; min-height: 44px; margin-top: .9rem; }
#return-panel { margin-top: .6rem; padding: 18px; background: var(--paper-sunken); border: 2px dashed rgb(var(--ink-rgb) / .25); border-radius: 12px; }
.postmark-field { margin-top: 1.2rem; max-width: 26rem; }

/* ================================================================== 8. STEP 5: CHECKOUT */
.checkout-layout { gap: 1.75rem; }
@media (min-width: 760px) { .checkout-layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 2.4rem; } }
/* the card on the cream: a real postcard with a hard shadow and a thin edge */
.co-stage {
  background: var(--card-paper-2) !important; border-radius: 6px; outline: 2px solid rgb(var(--ink-rgb) / .4);
  box-shadow: 7px 7px 0 var(--edge); transform: rotate(-.7deg);
}
.co-building { background: var(--card-paper-2) !important; font: 700 .9375rem var(--font-ui); color: var(--card-text-dim); text-align: center; padding: 1rem; }
.co-card-actions { margin-top: .9rem; gap: .2rem 1.4rem; }
.co-replay { font: 700 .9375rem var(--font-ui); }
.co-side-toggle { margin-bottom: 1rem; }
#co-overflow { margin-top: 1rem; }

/* what is being sent: two rows on a receipt, dotted rules between them */
.co-summary { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 0 .5rem; }
.co-sum-row { padding: 14px 0; border-top: 2px dotted rgb(var(--ink-rgb) / .3); }
.co-sum-row:last-child { border-bottom: 2px dotted rgb(var(--ink-rgb) / .3); }
.co-sum-title { font: 700 .75rem var(--font-ui); letter-spacing: .08em; color: var(--ink-dim); }
.co-sum-body { font: 400 1.0625rem/1.4 var(--font-body); color: var(--ink); }
.co-sum-sub { font: 500 .875rem/1.4 var(--font-ui); color: var(--ink-dim); }
.co-sum-body .is-muted { font-style: normal; color: var(--ink-faint); }
.co-sum-edit { font: 700 .9375rem var(--font-ui); color: var(--terra-deep); }
.co-sum-edit:hover { color: var(--pen-deep); }
.co-fine { margin: .8rem 0 1.2rem; padding: 0; background: none; border-radius: 0; font: 500 .9375rem var(--font-ui); color: var(--ink-dim); }
.guest-note { margin: 0 0 1.25rem; }
.guest-note .link-btn { font: 700 inherit; }
.pay-sub-note { margin: 0 0 1rem; padding: 10px 14px; font: 700 .9375rem var(--font-ui); color: var(--ok-text); background: color-mix(in srgb, var(--ok) 12%, var(--cream-2)); border: 2px solid color-mix(in srgb, var(--ok) 50%, transparent); border-radius: 6px; }
.pay-sub-note.hidden { display: none; }

/* paying: fields as everywhere else, the saved cards as selectable tiles */
.pay-field { gap: .35rem; align-content: start; }
.pay-field label, .pay-field-label { font: 700 .8125rem var(--font-ui); letter-spacing: .03em; text-transform: none; color: var(--ink); }
.pay-field input { font: 500 1rem var(--font-ui); }
.pay-field input.is-bad { border-color: var(--flag) !important; }
.pay-err { margin: 0; padding: 0; background: none; border: 0; font: 700 .8125rem/1.3 var(--font-ui); color: var(--flag); }
.pay-field-row { gap: .8rem; }
@media (max-width: 459px) { .pay-field-row { grid-template-columns: 1.3fr 1fr 1fr; gap: .5rem; } }
.cc-number-wrap .cc-brand { font: 700 .75rem var(--font-ui); color: var(--terra-deep); right: 14px; }
.card-form { gap: 1rem; }
.pay-save { font: 700 .9375rem var(--font-ui); color: var(--ink); }
.pay-mock-note { margin: 0; font: 500 .8125rem/1.45 var(--font-ui); color: var(--ink); }
.pay-mock-note strong { color: var(--terra-deep); }
.saved-cards { margin-bottom: 1.2rem; }
.saved-card { padding: 12px 14px; font: 700 .9375rem var(--font-ui); }
.saved-card.is-selected { background: color-mix(in srgb, var(--terra) 8%, var(--cream-2)) !important; }
.saved-card .cc-brand { font: 700 .75rem var(--font-ui); letter-spacing: .06em; color: var(--terra-deep); }
.saved-card-meta { font: 500 .875rem var(--font-ui); color: var(--ink-dim); }
.co-or { margin: 1rem 0 0; font: 700 .875rem var(--font-ui); color: var(--ink-dim); }
.co-or::before, .co-or::after { height: 0; background: none; border-top: 2px dotted rgb(var(--ink-rgb) / .3); }
.checkout-card { min-width: 0; }

/* ================================================================== 9. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .step-panel.is-active { animation: none; }
  .font-option:hover { transform: none; }
  .wizard-intro .badge, .co-stage { transform: none; }
  .pe-chip, .stamp-chip span, .stamp-look canvas { transition: none; }
}