/* Magnets, quantities, basket, thank-you detail, and Charlie's office. Owner: lane "commerce".
   Tokens only (tokens.css). Reasons, one line each:
   - The basket is a panel on --night-2 with drawn corners and the magnet shadow: DESIGN.md lets only
     magnets and the open basket float, and the basket is "the open basket".
   - Gold (--accent) is the pay button alone: one action per screen.
   - The quantity stepper is the one pill on the page (DESIGN.md: "No pills except the quantity stepper").
   - Problems sit on --ultra with wax text (6.3:1) and say what to do in words, never colour alone.
   - The office uses the day page (paper and ink): it is Charlie's studio desk, read on a phone, as a list. */

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Demo notices ---------- */
.demo-flag {
  font-family: var(--hand); font-size: var(--step-0); letter-spacing: 0.02em;
  border: 1.5px dashed var(--fg-soft); border-radius: var(--r-control); padding: var(--s-1) var(--s-2);
  max-width: none; align-self: stretch;
}
.demo-banner { border: 1.5px dashed var(--fg-soft); border-radius: var(--r-drawn); padding: var(--s-2); }
.demo-banner[hidden] { display: none; }

/* ---------- Prices line and magnets ---------- */
.prices { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-family: var(--hand); font-size: var(--step-1); }
.order { display: flex; flex-direction: column; gap: var(--s-4); }
.magnets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
@media (min-width: 48rem) { .magnets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } }
.magnet { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
/* Each drawing keeps its own shape (no crop); the pictures sit on a shared shelf so names and steppers line up. */
.magnet figure { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); }
.magnet img { width: 100%; height: auto; border-radius: var(--r-magnet); box-shadow: var(--magnet-shadow); }
.magnet figcaption { font-family: var(--hand); font-size: var(--step-1); letter-spacing: 0.02em; line-height: 1.15; }

/* ---------- Quantity ---------- */
.qty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.qty label { font-size: var(--step--1); color: var(--fg-soft); }
.stepper { display: inline-flex; align-items: center; }
.stepper input {
  width: 4.5rem; min-height: 44px; font: inherit; font-family: var(--hand); font-size: var(--step-1); text-align: center;
  border-radius: var(--r-control); border: 1.5px solid var(--fg-soft); background: transparent; color: var(--fg); padding: 0 var(--s-1);
}
/* With JavaScript: − and + join the input into one pill. */
.stepper.is-enhanced { border: 1.5px solid var(--fg-soft); border-radius: 999px; }
.stepper.is-enhanced input { width: 2.75rem; border: 0; border-radius: 0; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.stepper.is-enhanced input::-webkit-outer-spin-button,
.stepper.is-enhanced input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none;
  font-family: var(--hand); font-size: var(--step-1); line-height: 1; color: var(--fg);
  background: transparent; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation;
}
.step:hover:not(:disabled) { background: var(--night-2); }
.step:disabled { opacity: 0.45; cursor: not-allowed; }
.stepper input:focus-visible, .step:focus-visible { outline: 3px dashed var(--accent); outline-offset: 2px; }
/* Phones: the label above, the stepper full width so both buttons sit under a thumb. */
@media (max-width: 30rem) {
  .qty { flex-direction: column; align-items: stretch; }
  .stepper.is-enhanced { justify-content: space-between; }
}

/* ---------- Digital copies ---------- */
.digital-choice { display: flex; flex-direction: column; gap: var(--s-1); }
/* One "Digital copy" tick under each drawing (£2 each, Charlie's post). */
.digital-one { display: flex; gap: var(--s-1); align-items: center; min-height: 44px; cursor: pointer; font-size: var(--step--1); line-height: 1.25; }
.digital-one input { width: 1.375rem; height: 1.375rem; flex: none; accent-color: var(--accent); }
.digital-one:has(input:disabled) { cursor: not-allowed; color: var(--fg-soft); }
.digital-label { font-family: var(--hand); font-size: var(--step-1); letter-spacing: 0.02em; }
.digital-note { color: var(--fg-soft); font-size: var(--step--1); }
.digital-consent { display: flex; gap: var(--s-2); align-items: flex-start; min-height: 44px; padding-top: var(--s-1); cursor: pointer; max-width: 40rem; }
.digital-consent[hidden] { display: none; }
.digital-consent input { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.2rem; accent-color: var(--accent); }

/* ---------- The open basket ---------- */
.basket {
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start;
  background: var(--night-2); border-radius: var(--r-drawn); box-shadow: var(--magnet-shadow);
  padding: var(--s-3); max-width: 34rem; width: 100%;
}
/* Wide screens: the basket sits beside the digital copies, level with them, instead of under them. */
@media (min-width: 56rem) {
  .order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: var(--s-5); align-items: start; }
  .order > .demo-banner, .order > .magnets { grid-column: 1 / -1; }
  .order > .digital-choice { grid-column: 1; }
  .order > .basket { grid-column: 2; }
}
.basket-title { font-size: var(--step-1); }
.basket-summary { display: flex; flex-direction: column; gap: 0.15rem; }
.basket-line { display: block; }
.basket-aside { font-size: var(--step--1); color: var(--fg-soft); }
.basket-total { font-family: var(--hand); font-size: var(--step-1); letter-spacing: 0.02em; margin-top: var(--s-1); }
.basket button[type="submit"] {
  min-height: 52px; padding: var(--s-1) var(--s-3); max-width: 100%; text-align: left; text-wrap: balance;
  font-family: var(--hand); font-size: var(--step-1); line-height: 1.2; letter-spacing: 0.02em;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-control); cursor: pointer;
}
.basket button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; }
.order.is-busy button[type="submit"] { cursor: progress; opacity: 0.85; }
.basket-small { font-size: var(--step--1); color: var(--fg-soft); }
.basket-note { font-family: var(--hand); font-size: var(--step-0); letter-spacing: 0.02em; border: 1.5px dashed var(--fg-soft); border-radius: var(--r-control); padding: var(--s-1) var(--s-2); }
.basket-error, .problem-message {
  background: var(--ultra); color: var(--wax); border-radius: var(--r-control); padding: var(--s-1) var(--s-2);
}
.basket-error[hidden] { display: none; }

/* ---------- Pages that say what went wrong (no-JavaScript path) ---------- */
.problem { max-width: 40rem; }
.problem-hint { color: var(--fg-soft); }

/* ---------- Thank-you detail ---------- */
.order-status.is-loading { color: var(--fg-soft); }
.order-status.is-error { background: var(--ultra); color: var(--wax); border-radius: var(--r-control); padding: var(--s-1) var(--s-2); }
.order-status.is-demo { font-family: var(--hand); font-size: var(--step-1); }
#order-detail {
  display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start;
  background: var(--night-2); border-radius: var(--r-drawn); padding: var(--s-3); max-width: 34rem;
}
#order-detail[hidden] { display: none; }
#order-detail h2 { font-size: var(--step-2); }
#order-detail h3 { font-size: var(--step-1); margin-top: var(--s-2); }
.order-items, .downloads { margin: 0; padding-left: 1.2em; }
.order-total { font-family: var(--hand); font-size: var(--step-1); }
.order-small { color: var(--fg-soft); font-size: var(--step--1); }
.downloads { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
/* Wax, not gold: gold stays on the one action per screen. */
.downloads a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--hand); font-size: var(--step-1); color: var(--fg); text-decoration-thickness: 1.5px; }

/* ========== Charlie's office (day page) ========== */
.office { display: flex; flex-direction: column; gap: var(--s-3); max-width: 42rem; width: 100%; margin: 0 auto; }
.office h1 { font-size: var(--step-2); }
.office h2 { font-size: var(--step-1); }
.office .n { color: var(--fg-soft); }
.office-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-family: var(--hand); font-size: var(--step-1); }
.office-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--core); }
.office-nav a[aria-current="page"] { color: var(--fg); text-decoration-thickness: 2px; }
.office-nav form { margin-left: auto; }
.office-body { display: flex; flex-direction: column; gap: var(--s-4); }
.office-loading { font-family: var(--hand); font-size: var(--step-1); color: var(--fg-soft); }
.office-loading:not(:last-child) { display: none; }
.office-state { display: flex; flex-direction: column; gap: var(--s-1); border: 1.5px solid var(--fg); border-radius: var(--r-drawn); padding: var(--s-3); }
.office-state.is-error { border-style: dashed; }
.office-flash { font-family: var(--hand); font-size: var(--step-1); border: 1.5px solid var(--core); border-radius: var(--r-control); padding: var(--s-1) var(--s-2); }
.office-flash.is-error { border-style: dashed; border-color: var(--fg); }
.office-error { font-family: var(--hand); font-size: var(--step-1); }
.office-summary { font-family: var(--hand); font-size: var(--step-1); line-height: 1.3; }
.office-empty { color: var(--fg-soft); }
.example { background: var(--paper-2); border-radius: var(--r-control); padding: var(--s-1) var(--s-2); }
.example-tag { font-family: var(--hand); }

.order-group { display: flex; flex-direction: column; gap: var(--s-1); }
.orders, .fans, .labels { list-style: none; margin: 0; padding: 0; }
.office-order { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) 0; border-top: 1.5px dashed var(--fg-soft); }
.office-order:last-child { border-bottom: 1.5px dashed var(--fg-soft); }
.order-line { font-size: var(--step-0); }
.order-note { font-size: var(--step--1); color: var(--fg-soft); }
.order-note a { color: var(--core); display: inline-block; padding-block: 0.6rem; }
.st { align-self: flex-start; font-family: var(--hand); font-size: var(--step-0); letter-spacing: 0.02em; border-radius: var(--r-control); padding: 0 var(--s-1); border: 1.5px solid var(--core); color: var(--core); }
.st.is-done { border-style: dashed; border-color: var(--fg-soft); color: var(--fg-soft); }
.fans li { padding-block: 0.25rem; }
.fans a { color: var(--core); display: inline-block; padding-block: 0.6rem; }

.office button, .office .act {
  min-height: 44px; padding: 0 var(--s-2); font-family: var(--hand); font-size: var(--step-1); letter-spacing: 0.02em;
  border-radius: var(--r-control); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.office .act { background: var(--accent); color: var(--on-accent); border: 0; align-self: flex-start; }
.office .mark { background: transparent; color: var(--core); border: 1.5px solid var(--core); }
.office .mark:hover { background: var(--paper-2); }
.office .quiet { background: transparent; color: var(--fg-soft); border: 1.5px dashed var(--fg-soft); }

.sign-in { display: flex; flex-direction: column; gap: var(--s-1); max-width: 22rem; }
.sign-in label { font-family: var(--hand); font-size: var(--step-1); }
.sign-in input { min-height: 48px; font: inherit; font-size: max(16px, var(--step-0)); padding: 0 var(--s-1); border: 1.5px solid var(--fg); border-radius: var(--r-control); background: var(--bg); color: var(--fg); }
.sign-in .act { margin-top: var(--s-1); }

.totals { border-collapse: collapse; width: 100%; max-width: 26rem; }
.totals caption { text-align: left; color: var(--fg-soft); padding-bottom: var(--s-1); }
.totals th, .totals td { text-align: left; padding: var(--s-1) 0; border-bottom: 1.5px dashed var(--fg-soft); font-weight: 400; }
.totals thead th:last-child { text-align: right; }
.totals td { text-align: right; font-family: var(--hand); font-size: var(--step-1); }
.totals tfoot th, .totals tfoot td { border-bottom: 0; font-family: var(--hand); font-size: var(--step-1); }
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-2); }
.label { border: 1.5px solid var(--fg); border-radius: var(--r-drawn); padding: var(--s-2); }
.class-h { font-size: var(--step-1); margin-top: var(--s-2); }
.office-tools { margin: 0; }
.ref { white-space: nowrap; }
.label p { margin: 0; }
.label-name { font-family: var(--hand); font-size: var(--step-1); }
.label-what { color: var(--fg-soft); font-size: var(--step--1); margin-top: var(--s-1) !important; }

@media print {
  .office-nav, .office form, .skip, .office-flash { display: none !important; }
  .label { break-inside: avoid; }
}