.checkout-page {
  background: radial-gradient(circle at 14% 3%, #f4edff 0, transparent 35%), var(--paper);
}
.checkout-main {
  width: min(1020px, calc(100% - 40px));
  margin-inline: auto;
}
.checkout-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgb(255 253 252 / 96%);
  backdrop-filter: blur(12px);
}
.checkout-header__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  width: min(1020px, calc(100% - 32px));
  min-height: 54px;
  margin: auto;
  font-family: var(--display);
}
.checkout-header .wordmark { justify-self: center; }
.checkout-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; color: var(--ink); font: 400 1.3rem/1 var(--display); }
.checkout-back[aria-disabled="true"] { opacity: .55; cursor: wait; }
.checkout-header__step {
  color: var(--muted);
  font: 700 .75rem/1.2 var(--display);
  text-align: right;
  white-space: nowrap;
}
.checkout-progress { height: 4px; overflow: hidden; background: #ece7f1; }
.checkout-progress span { display: block; height: 100%; background: var(--violet); transition: width 240ms ease; }
.checkout-main { padding: 32px 0 48px; }
.checkout-auth, .checkout-extras { width: min(520px, 100%); margin-inline: auto; }
.checkout-extras h1 { margin: 0; max-width: 16ch; font-size: clamp(1.9rem, 7vw, 2.5rem); letter-spacing: -.03em; line-height: 1.1; }
.checkout-extras__lead { margin: 12px 0 28px; color: var(--text); font-size: .95rem; }
.checkout-extras__total { display: flex; justify-content: space-between; gap: 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font: 400 .85rem/1.4 var(--display); }
.checkout-extras__total strong { color: var(--ink); font-weight: 700; }
.checkout-page[data-checkout-screen="extras"] { background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.order-panel__eyebrow,
.cover-panel__caption span {
  color: var(--violet);
  font: 800 .69rem/1.3 var(--display);
  letter-spacing: .14em;
}
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 5vw, 56px);
}
.cover-panel { min-width: 0; }
.cover-panel__image {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 18px;
  background: #e7e3ed;
  box-shadow: 0 18px 38px rgb(36 32 58 / 16%);
}
.cover-panel__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-panel__placeholder {
  max-width: 15ch;
  padding: 20px;
  color: var(--muted);
  font: 700 .9rem/1.4 var(--display);
  text-align: center;
}
.cover-panel__caption {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin: 17px 0 0;
}
.cover-panel__caption div { display: grid; gap: 4px; }
.cover-panel__caption strong { font: 700 1.05rem/1.2 var(--display); }
.cover-panel__caption a {
  flex: 0 0 auto;
  color: var(--violet);
  font: 700 .82rem/1.25 var(--display);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cover-panel > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.order-panel {
  min-width: 0;
  padding: clamp(22px, 3.6vw, 38px);
  border: 1px solid #e6dff0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgb(42 30 74 / 8%);
}
.order-panel h1 {
  margin: 5px 0 0;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}
.order-panel__cast { margin: 3px 0 20px; color: var(--text); font-size: .95rem; }
/* What the order includes, numbered so the count reads at a glance (owner decision 2026-10-09).
   The count in the heading is the length of the list (tests/pay-value.spec.ts). */
.order-gets h2 { margin: 0 0 12px; color: var(--violet); font: 800 .69rem/1.3 var(--display); letter-spacing: .14em; }
.order-gets ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: gets; }
.order-gets li { display: flex; align-items: start; gap: 12px; counter-increment: gets; }
.order-gets li::before {
  content: counter(gets, decimal-leading-zero);
  flex: 0 0 24px;
  padding-top: 1px;
  color: var(--violet);
  font: 800 .86rem/1.3 var(--display);
  font-variant-numeric: tabular-nums;
}
.order-gets p { display: grid; gap: 3px; margin: 0; }
.order-gets strong { font: 700 .91rem/1.3 var(--display); }
.order-gets small { color: var(--muted); font-size: .83rem; line-height: 1.45; }
/* Where the movie will play: what it gives the family */
.now-playing { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--tint); }
.now-playing span { display: block; margin: 0 0 4px; color: var(--violet); font: 800 .69rem/1.3 var(--display); letter-spacing: .14em; }
.now-playing p { margin: 0; color: var(--ink); font: italic 500 .9rem/1.5 var(--body); }
/* The family's own end credits under the sample movie: the roles and places of the film's end crawl
   (08-tools/botr-order/END-CREDITS-DOCTRINE.md; change both together), with the names from the order (pay.js). */
.cover-panel > .your-credits { grid-column: 1 / -1; }
.your-credits {
  margin: 18px 0 0;
  padding: 20px 16px 18px;
  border-radius: 12px;
  background: #15131f;
  color: #f4f1fb;
  text-align: center;
  box-shadow: 0 10px 30px rgb(36 32 58 / 18%);
}
.your-credits figcaption { margin: 0 0 14px; color: #b9a8ff; font: 800 .68rem/1.3 var(--display); letter-spacing: .14em; }
.your-credits__head { margin: 0 0 8px; color: #fff; font: 700 .74rem/1.3 var(--body); letter-spacing: .32em; }
/* One grid for every credit, so all the roles end on one line: the roles never wrap, and the names take
   the rest of the width and wrap between words (a single very long word breaks rather than overflow). */
.your-credits dl {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr);
  gap: 5px 10px;
  align-items: baseline;
  margin: 0 0 16px;
}
.your-credits dl div { display: contents; }
.your-credits dt { color: #cfc8dc; font: italic 400 .86rem/1.3 var(--body); text-align: right; }
.your-credits dd { margin: 0; color: #fff; font: 700 .84rem/1.3 var(--body); letter-spacing: .1em; text-align: left; text-transform: uppercase; overflow-wrap: break-word; }
/* Long names (pay.js): each name centred under its role */
.your-credits--stacked dl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.your-credits--stacked dt,
.your-credits--stacked dd { text-align: center; }
.your-credits--stacked dl div:not(:first-child) dt { margin-top: 8px; }
.your-credits__places { margin: 0 0 16px; color: #e9e4f3; font: 400 .84rem/1.6 var(--body); letter-spacing: .04em; }
.your-credits__joke { margin: 0; color: #cfc8dc; font: italic 400 .8rem/1.5 var(--body); text-wrap: balance; }
.your-credits__joke span { display: block; color: var(--coral); }
.production-note { margin: 16px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.order-panel__delivery {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: .83rem;
  overflow-wrap: anywhere;
}
.order-panel__delivery strong { color: var(--ink); }
.order-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 24px 0 16px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font: 700 .94rem/1.2 var(--display);
}
.order-panel__total span { display: grid; gap: 4px; }
.order-panel__total small { color: var(--muted); font-size: .78rem; font-weight: 400; }
.order-panel__total > strong { font: 800 2rem/1 var(--display); }
.checkout-status {
  margin: 0 0 14px;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--lavender);
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.45;
  scroll-margin-top: 80px;
}
.checkout-page:has(.pay-actions > .button:not([hidden])) {
  padding-bottom: calc(var(--pay-actions-height, 160px) + 32px);
}
.pay-actions {
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: 8px 32px;
  padding: 16px max(20px, calc((100vw - 1020px) / 2)) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #d9cfea;
  background: rgb(255 253 252 / 98%);
  box-shadow: 0 -8px 26px rgb(42 30 74 / 12%);
  backdrop-filter: blur(14px);
}
.pay-actions .pay-terms { grid-column: 1; grid-row: 1 / 3; margin: 0; padding: 12px 14px; }
.pay-actions .button {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 60px;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgb(99 70 199 / 24%);
}
.pay-actions .payment-note { grid-column: 2; grid-row: 2; margin: 0; }
.pay-actions .pay-error { grid-column: 1; grid-row: 3; margin: 0; }
.pay-actions:not(:has(> .button:not([hidden]))) { display: none; }
.pay-actions .button:disabled { opacity: .65; cursor: wait; }
.checkout-page[data-checkout-screen="extras"] .pay-actions { display: block; padding: 12px max(20px, calc((100vw - 520px) / 2)) max(12px, env(safe-area-inset-bottom)); }
.checkout-page[data-checkout-screen="extras"] .pay-actions .button { min-height: 54px; font-size: 1rem; font-weight: 700; box-shadow: none; }
/* Cookie preferences remain usable without covering the payment action. */
.checkout-page .analytics-consent {
  bottom: calc(var(--pay-actions-height, 0px) + max(16px, env(safe-area-inset-bottom, 0px)));
  max-height: calc(100dvh - var(--pay-actions-height, 0px) - 32px);
  overflow-y: auto;
}
.pay-terms {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #d9cfea;
  border-radius: 14px;
  background: #f8f5ff;
  color: var(--ink);
  font: 400 .84rem/1.5 var(--display);
  cursor: pointer;
}
.pay-terms input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--violet);
}
.pay-terms__eyebrow { display: block; margin-bottom: 5px; color: var(--violet); font: 800 .67rem/1.3 var(--display); letter-spacing: .12em; }
.pay-terms a,
.refund-note a,
.checkout-support a {
  color: var(--violet);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pay-terms.is-missing { border-color: #a12424; background: #fff6f5; color: #8c2121; }
.pay-terms.is-missing input { outline: 2px solid #a12424; outline-offset: 2px; }
.pay-error { margin: 0 0 12px; color: #a12424; font: 700 .82rem/1.4 var(--display); }
.payment-note { margin: 10px 0 0; color: var(--muted); font: 400 .78rem/1.4 var(--display); text-align: center; }
/* The PayPal login, a text link under the main "Pay by card" button. */
.payment-note__paypal { padding: 0; border: 0; background: none; color: var(--violet); font: 600 .78rem/1.4 var(--display); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.payment-note__paypal:disabled { opacity: .6; cursor: wait; }
.refund-note {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
}
.checkout-support { margin: 25px 0 0; color: var(--muted); font-size: .91rem; text-align: center; }
.checkout-legal { display: flex; justify-content: center; gap: 12px; margin-top: 12px; color: var(--muted); font: 400 12px/1.4 var(--display); }
.checkout-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; }
.checkout-legal a:hover,
.checkout-header a:hover { color: var(--violet-dark); }
@media (max-width: 700px) {
  .pay-actions {
    display: block;
    padding: 12px max(16px, calc((100vw - 520px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .pay-actions .pay-terms { margin-bottom: 10px; padding: 10px 12px; }
  .pay-actions .pay-error { margin-bottom: 10px; }
  .pay-actions .payment-note { margin-top: 6px; }
  .checkout-main { width: min(100% - 32px, 520px); }
  .checkout-main { padding-top: 24px; }
  .checkout-layout { display: block; }
  .cover-panel {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    margin: 0 0 20px;
  }
  .cover-panel__image { grid-row: span 2; border-width: 4px; border-radius: 10px; }
  .cover-panel__placeholder { font-size: .68rem; padding: 6px; }
  .cover-panel__caption { display: grid; align-self: end; gap: 8px; margin: 0; }
  .cover-panel__caption strong { font-size: .92rem; }
  .cover-panel__caption a { font-size: .76rem; }
  .cover-panel > p { align-self: start; margin: 7px 0 0; font-size: .72rem; }
  .order-panel { padding: 22px 20px; border-radius: 18px; }
  .order-panel__cast { margin-bottom: 16px; }
  .order-gets ol { gap: 13px; }
}
@media (max-width: 700px) and (max-height: 520px) {
  .pay-actions { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pay-actions .pay-terms { padding: 8px 10px; font-size: .75rem; line-height: 1.4; }
  .pay-actions .pay-terms > span { max-height: 72px; overflow-y: auto; }
  .pay-actions .pay-terms__eyebrow,
  .pay-actions .payment-note { display: none; }
}
@media (max-width: 365px) {
  .cover-panel { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .order-panel { padding-inline: 16px; }
  .your-credits { padding-inline: 12px; }
  .your-credits dt { font-size: .8rem; }
  .your-credits dd { font-size: .78rem; letter-spacing: .08em; }
  .your-credits__places { font-size: .78rem; }
}

/* Optional extras (rendered from the server's catalog; the page never computes a price) */
.order-panel__addons { margin: 0; padding: 0; border: 0; }
.order-panel__addons legend { margin: 0 0 10px; padding: 0; font: 700 .72rem/1.3 var(--display); letter-spacing: .14em; color: var(--muted); }
.addon { display: flex; gap: 12px; align-items: start; padding: 12px 14px; margin: 0 0 10px; border: 1px solid #e4ddec; border-radius: 12px; background: #fff; cursor: pointer; }
.addon input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--violet); }
.addon span { display: grid; gap: 3px; }
.addon strong { font: 700 .91rem/1.3 var(--display); }
.addon em { font: 700 .91rem/1.3 var(--display); font-style: normal; color: var(--violet); }
.addon small { color: var(--muted); font-size: .83rem; line-height: 1.45; }
.addon[data-disabled="true"] { opacity: .55; cursor: not-allowed; }
.addon:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }
.order-panel__addons-note { margin: 0 0 8px; color: var(--muted); font-size: .83rem; }
.order-panel__lines { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .9rem; }
.order-panel__lines li { display: flex; justify-content: space-between; gap: 12px; }
.order-panel__lines li span:last-child { font-weight: 700; }

.billing-form { margin: 24px 0; padding: 20px; border: 1px solid var(--line, #ded8e9); border-radius: 12px; }
.billing-form h2 { font-size: 1.15rem; margin: 0 0 8px; }
.billing-form > p { font-size: .85rem; line-height: 1.5; }
.billing-form label { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: .85rem; }
.billing-form input, .billing-form select { scroll-margin-top: 24px; scroll-margin-bottom: calc(var(--pay-actions-height, 160px) + 24px); }
.billing-form input:not([type=checkbox]), .billing-form select { width: 100%; min-width: 0; min-height: 44px; padding: 9px; border: 1px solid #b8afc9; border-radius: 6px; background: #fff; color: #211b30; font: inherit; }
.billing-form__row { display: grid; grid-template-columns: 1fr 1fr 100px; gap: 12px; }
.billing-form .billing-form__check { flex-direction: row; align-items: flex-start; line-height: 1.5; }
.billing-form__check input { flex-shrink: 0; margin-top: 4px; }
@media (max-width: 420px) { .billing-form__row { grid-template-columns: 1fr; } }

/* One checkout screen (2026-10-09, Book by Anyone style): the extras are an optional part of the order, the
   terms box sits in the page under the total, and only the payment button stays pinned at the bottom, so it
   never covers the order on a phone. */
.pay-actions,
.checkout-page[data-checkout-screen] .pay-actions {
  display: block;
  padding: 12px max(16px, calc((100vw - 520px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
}
.pay-actions .button { min-height: 56px; }
.pay-actions .pay-error { margin: 0 0 10px; }
.pay-actions .payment-note { margin: 6px 0 0; }
.order-panel .pay-terms { margin: 18px 0 0; scroll-margin-bottom: calc(var(--pay-actions-height, 100px) + 16px); }
/* Choose your movie (two films, owner decision 2026-10-12): one card per film the server offers, at the top of the
   order, right under the cast, so the cheaper short is seen before the total (the sticky button shows the total from the start).
   The chosen card takes the brand violet on the tint of the "now playing" block; every price comes from the server
   (pay.js renderFilms). The length reads like the page's other small eyebrows. */
.order-panel__films { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.order-panel__films h2 { margin: 0 0 12px; color: var(--ink); font: 700 1rem/1.3 var(--display); }
.film-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.film-choices > div { display: grid; gap: 10px; }
.film-choice {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 13px;
  border: 1px solid #e4ddec;
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.film-choice input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--violet); }
.film-choice__body { display: grid; flex: 1; gap: 3px; min-width: 0; }
.film-choice__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.film-choice__head strong { color: var(--ink); font: 700 .96rem/1.3 var(--display); }
.film-choice__head em { flex: none; color: var(--ink); font: 800 1.05rem/1.2 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.film-choice__length { color: var(--violet); font: 800 .69rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.film-choice small { color: var(--muted); font-size: .83rem; line-height: 1.45; }
.film-choice:has(input:checked) { border-color: var(--violet); background: var(--tint); box-shadow: inset 0 0 0 1px var(--violet); }
.film-choice:has(input:checked) .film-choice__head em { color: var(--violet); }
.film-choice:has(input:disabled) { cursor: wait; }
.film-choice:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }
.order-panel__films-note { margin: 8px 0 0; color: #a12424; font: 700 .8rem/1.4 var(--display); }
@media (prefers-reduced-motion: reduce) { .film-choice { transition: none; } }
.order-panel__extras { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.order-panel__extras h2 { margin: 0 0 12px; color: var(--ink); font: 700 1rem/1.3 var(--display); }
.order-panel__extras h2 small { margin-left: 6px; color: var(--muted); font: 400 .78rem/1.3 var(--display); }
.order-panel__extras .order-panel__addons-note { margin: 4px 0 0; color: #a12424; font: 700 .8rem/1.4 var(--display); }
.personal-line { margin: 16px 0 0; color: var(--text); font-size: .82rem; line-height: 1.5; }
.personal-line p { margin: 0; }
.personal-line__more summary { display: inline-block; margin-top: 4px; color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.personal-line__more p { margin-top: 6px; color: var(--muted); }
.refund-note__lead { display: block; margin-bottom: 4px; color: var(--ink); font: 700 .95rem/1.3 var(--display); }
.refund-note__lead span { color: var(--violet); }
.pay-offer { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f3effc; color: var(--ink); font: 600 .88rem/1.4 var(--display); }
.pay-offer s { color: var(--muted); font-weight: 500; }
.pay-offer strong { color: var(--violet); }

/* 15.10 brief: the decision first. Cover → the order and its price → extras (folded) → the box, with the pay button
   pinned below; the sample movie, what you get and the credits follow, for anyone still deciding. */
.checkout-more { grid-column: 2; min-width: 0; padding: clamp(22px, 3.6vw, 38px); border: 1px solid #e6dff0; border-radius: 22px; background: #fff; }
.checkout-more > .sample-film { margin-top: 0; }
.checkout-more > .order-gets { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.checkout-more > .your-credits { margin-top: 22px; }
.checkout-layout > .cover-panel { grid-row: 1 / span 2; position: sticky; top: 24px; }
.order-panel__extras details { margin: 0; }
.order-panel__extras summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; }
.order-panel__extras summary::-webkit-details-marker { display: none; }
.order-panel__extras summary h2 { margin: 0; }
.order-panel__extras summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.order-panel__extras details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.order-panel__extras details[open] summary { margin-bottom: 10px; }
.order-panel__extras summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .order-panel__extras summary::after { transition: none; } }
@media (max-width: 700px) {
  .checkout-layout > .cover-panel { position: static; }
  .checkout-more { margin-top: 20px; padding: 22px 20px; border-radius: 18px; }
}
@media (max-width: 365px) { .checkout-more { padding-inline: 16px; } }

/* 15.10 brief, task 4: the cover as the builder showed it, its title on the art; "Looks good" moves on to the order
   and "Edit cover" opens the names editor. On a phone the cover opens large until "Looks good" (or until it could
   not be shown); after that it is the small row above the order. */
.cover-panel__image { position: relative; container-type: inline-size; }
.cover-panel__title { position: absolute; inset: 0 0 auto; z-index: 1; display: grid; justify-items: center; gap: .8cqw; padding: 7cqw 4cqw 13cqw; text-align: center; background: linear-gradient(180deg, rgb(0 0 0 / 52%), transparent); pointer-events: none; }
.cover-panel__title small { color: #dcfb40; font: 800 3.4cqw/1.2 var(--display); letter-spacing: .24em; }
.cover-panel__title strong { max-width: 100%; color: #dcfb40; font-family: Impact, 'Arial Narrow', sans-serif; font-size: min(11.2cqw, calc(92cqw / (var(--title-chars, 16) * .46))); font-style: italic; font-weight: 900; line-height: .92; letter-spacing: -.015em; text-shadow: .7cqw .7cqw 0 #01091a; white-space: nowrap; }
.cover-panel__title strong.is-long { font-size: 7.6cqw; white-space: normal; }
.cover-panel__body { min-width: 0; }
.cover-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.cover-panel__actions:not(:has(> :not([hidden]))) { display: none; }
.cover-panel__actions .button { min-height: 46px; padding: 10px 20px; font-size: .92rem; }
#pay-change-cover { display: inline-flex; align-items: center; min-height: 44px; color: var(--violet); font: 700 .85rem/1.25 var(--display); text-decoration: underline; text-underline-offset: 3px; }
.cover-panel__saved { margin: 4px 0 0; color: #1b5e33; font: 700 .8rem/1.4 var(--display); }
.cover-panel__note { margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
/* "Looks good" scrolls the order to the top, clear of the pinned header. */
.order-panel { scroll-margin-top: 72px; }
@media (max-width: 700px) {
  .cover-panel__image { grid-row: auto; }
  .cover-panel__actions { gap: 4px 14px; margin-top: 4px; }
  .cover-panel__actions .button { min-height: 44px; padding: 8px 16px; font-size: .85rem; }
  #pay-change-cover { font-size: .78rem; }
  .cover-panel__note { margin-top: 4px; font-size: .72rem; }
  .cover-panel:not(.is-confirmed):not(.no-cover) { display: block; margin-bottom: 22px; text-align: center; }
  /* Sized so the cover, its caption and "Looks good" fit above the pinned pay button on the first screen. */
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__image { width: max(132px, min(58vw, 236px, calc((100dvh - 350px) * 2 / 3))); margin: 0 auto; border-width: 5px; border-radius: 14px; }
  /* The base caption's space-between would keep its single track at the left edge. */
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__caption { justify-content: center; justify-items: center; margin-top: 12px; }
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__caption strong { font-size: 1.05rem; }
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__actions { justify-content: center; margin-top: 10px; }
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__actions .button { min-width: 168px; min-height: 48px; font-size: .95rem; }
  .cover-panel:not(.is-confirmed):not(.no-cover) .cover-panel__note { max-width: 36ch; margin: 8px auto 0; }
}

/* The names editor: a sheet from the bottom on a phone, a card in the middle on a computer (create.css .sheet). */
.cover-edit { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; margin: 0; padding: 26px 20px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -12px 40px rgb(20 14 40 / 25%); }
.cover-edit::backdrop { background: rgb(20 14 40 / 46%); }
.cover-edit::before { content: ""; display: block; width: 40px; height: 5px; margin: -12px auto 18px; border-radius: 3px; background: #d7cfe0; }
.cover-edit h2 { margin: 0; font: 700 1.45rem/1.15 var(--display); letter-spacing: -.02em; }
.cover-edit__lead { margin: 8px 0 2px; color: var(--text); font-size: .92rem; line-height: 1.5; }
.cover-edit .field-label { margin: 14px 0 6px; }
.cover-edit .pay-error { margin: 12px 0 0; }
.cover-edit__actions { display: grid; gap: 10px; margin-top: 20px; }
.cover-edit__actions .button { width: 100%; min-height: 54px; }
.cover-edit__actions .button:disabled { opacity: .65; cursor: wait; }
.cover-edit__more { margin: 16px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; text-align: center; }
.cover-edit__more a { color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 600px) {
  .cover-edit { inset: 0; width: min(480px, calc(100% - 40px)); max-height: calc(100dvh - 48px); margin: auto; border-radius: 20px; box-shadow: 0 20px 60px rgb(20 14 40 / 30%); }
  .cover-edit::before { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .cover-edit[open] { animation: cover-edit-in 220ms ease-out; }
  @keyframes cover-edit-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
}

/* 15.10 brief, task 5: what the button takes (PayPal and the cards, as marks), the PayPal login beside them, and the
   trust line with the delivery promise under them. */
.pay-actions .payment-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 10px; font-size: .74rem; }
.pay-marks { display: inline-flex; gap: 4px; }
.pay-mark { display: block; width: auto; height: 18px; }
.pay-mark rect { fill: #fff; stroke: #d9d1e6; }
.pay-mark--amex rect { fill: #2e77bc; stroke: #2e77bc; }
.pay-mark text { font-family: var(--display); }
.pay-actions .payment-note__paypal { font-size: .74rem; }
.pay-trust { flex: 1 0 100%; text-wrap: balance; }