:root {
  --teal: #0f8d80;
  --teal-dark: #0a6b61;
  --ink: #15201f;
  --muted: #5d6b69;
  --line: #d9e2e0;
  --bg: #f4f8f7;
  --card: #ffffff;
  --danger: #b3261e;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* --- masthead ---------------------------------------------------------- */
.masthead {
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.masthead h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
}

.lede {
  margin: 0;
  color: var(--muted);
}

/* --- layout ------------------------------------------------------------ */
/*
  Three children, in this DOM order: the details card, the total and payment
  panel, then the payment card. That is already the right reading order in one
  column, which is why the narrow branch below only has to undo the two-column
  placement rather than reorder anything.
*/
.layout {
  display: grid;
  gap: 0 20px;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto auto;
  align-items: start;
}

/*
  Wide: both cards stack in the left column and the panel runs alongside them.
  The two cards are drawn as one unbroken panel — no row gap, no seam — so the
  split is invisible here and only does its work in one column. The join is
  rendered as the same inset divider that separates sections inside a card:
  32px above, a line, 28px below, matching `.group + .group`.
*/
.layout > .card:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 32px;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.layout > .card:nth-of-type(2) {
  grid-column: 1;
  grid-row: 2;
  padding-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.layout > .card:nth-of-type(2) > .group:first-child {
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/*
  The seam has to measure the same as `.group + .group` does inside a single
  card: 32px, the line, 28px. Between two sections of one card the last field's
  18px bottom margin collapses into that 32px and vanishes; across two grid
  items it cannot collapse out, so it would be added to the card's padding and
  push the divider 18px low. Dropping it also lines this card's bottom padding
  up with every other card's, so it is not scoped to the wide layout.
*/
.layout > .card:nth-of-type(1) > .group:last-child > :last-child {
  margin-bottom: 0;
}

.layout > .summary {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.card,
.summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

/* `align-items: start` keeps this at its content height, so it can stick
   inside the two-row area it spans. */
.summary {
  position: sticky;
  top: 20px;
}

@media (max-width: 860px) {
  .layout {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .layout > .card:nth-of-type(1),
  .layout > .card:nth-of-type(2),
  .layout > .summary {
    grid-column: 1;
    grid-row: auto;
  }

  /* Three separate cards in one column, so undo the join above. */
  .layout > .card:nth-of-type(1) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .layout > .card:nth-of-type(2) {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .layout > .card:nth-of-type(2) > .group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .summary {
    position: static;
  }
}

/* --- groups and fields ------------------------------------------------- */
.group + .group {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.group h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.group__note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 0.92rem;
}

.req {
  color: var(--danger);
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.hint {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(15, 141, 128, 0.4);
  outline-offset: 1px;
  border-color: var(--teal);
}

input[type="file"] {
  padding: 8px;
  background: var(--bg);
}

input:disabled {
  background: var(--bg);
  color: var(--muted);
}

textarea {
  resize: vertical;
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--danger);
}

.error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
}

.row {
  display: grid;
  gap: 0 16px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .row {
    grid-template-columns: 1fr;
  }
}

.stack {
  display: grid;
  gap: 8px;
}

.choice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.choice legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 0.92rem;
}

.choice label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.choice input {
  width: auto;
}

/* --- summary ----------------------------------------------------------- */
.summary h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.summary h3 {
  margin: 20px 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary__lines,
.summary__bank {
  margin: 0;
}

.summary__lines > div,
.summary__bank > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.summary__bank > div {
  display: grid;
  gap: 0;
  padding: 4px 0;
}

.summary__lines dt,
.summary__bank dt {
  color: var(--muted);
  font-size: 0.88rem;
}

.summary__lines dd,
.summary__bank dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.summary__bank dd {
  text-align: left;
  word-break: break-all;
}

.summary__total {
  margin-top: 8px;
  padding-top: 10px !important;
  border-top: 1px solid var(--line);
}

.summary__total dt {
  color: var(--ink) !important;
  font-weight: 700;
}

.summary__total dd {
  color: var(--teal-dark);
  font-size: 1.15rem;
}

.summary__note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

/* --- review ------------------------------------------------------------ */
.review {
  max-width: 640px;
}

.review h2 {
  margin: 0 0 8px;
}

.review__prompt {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #fff8e6;
  border: 1px solid #e8d8a8;
  border-radius: 8px;
  font-size: 0.93rem;
}

.review__block {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.review__block h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.review__address {
  margin: 0 0 12px;
  font-size: 1.15rem;
  line-height: 1.5;
}

.review__contact {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

/* --- confirmation / edit ------------------------------------------------ */
.confirmation,
.edit {
  max-width: 660px;
}

.confirmation h1,
.edit h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.confirmation__no {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.confirmation .review__block h2,
.edit h2 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.status {
  margin: 20px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #f0f8f7;
}

.status strong {
  display: block;
  margin-bottom: 4px;
}

.status p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Anything needing attention is amber, not green — the buyer has to act. */
.status--payment_issue,
.status--cancelled {
  border-left-color: #c77700;
  background: #fff8e6;
}

.steps {
  margin: 0 0 12px;
  padding-left: 20px;
}

.steps li {
  margin-bottom: 6px;
}

.confirmation .review__prompt a,
.edit a {
  color: var(--teal-dark);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- receipt ----------------------------------------------------------- */
.receipt__state {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  font-size: 0.93rem;
}

.receipt__state--sent {
  border-left-color: var(--teal);
  background: #f0f8f7;
}

/* Pending and failed are amber, not green: in both cases the buyer has not
   actually got the email yet, and saying otherwise is the bug being fixed. */
.receipt__state--pending,
.receipt__state--failed {
  border-left-color: #c77700;
  background: #fff8e6;
}

.receipt__message {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--teal-dark);
  font-weight: 500;
}

.actions--tight {
  margin-top: 4px;
}

/* --- actions ----------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--teal-dark);
}

.btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.notice {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: #fdeceb;
  border: 1px solid #f2c4c0;
  border-radius: 8px;
  color: #7d1c17;
  font-size: 0.92rem;
}

/* --- footer ------------------------------------------------------------ */
.footer {
  margin-top: 32px;
  color: var(--muted);
  font-size: 0.86rem;
}

.footer a {
  color: var(--teal-dark);
}

/* --- admin dashboard ---------------------------------------------------- */
/* Wider than the buyer pages: the queue is a table, and wrapping a delivery
   address across three lines in a list of fifty is how a city gets misread. */
.page--admin {
  max-width: 1280px;
}

.admin-login {
  max-width: 420px;
  margin: 48px auto;
}

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-bar__who {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.queue__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.queue__search {
  display: flex;
  gap: 8px;
  flex: 1 1 320px;
}

.queue__search input {
  flex: 1 1 auto;
}

.queue__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.queue__empty {
  margin: 32px 0;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.chip--on {
  border-color: var(--teal);
  background: #f0f8f7;
  color: var(--teal-dark);
  font-weight: 600;
}

.chip__n {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 600;
}

.chip--on .chip__n {
  background: #fff;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table tbody tr {
  cursor: pointer;
}

.table tbody tr:hover,
.table tbody tr:focus-visible {
  background: #f0f8f7;
  outline: none;
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.72rem;
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Colour carries meaning here: amber is "a person must do something", green is
   "settled", grey is "no longer live". */
.pill--received { background: #fff8e6; color: #8a5600; }
.pill--payment_issue { background: #fdeceb; color: #7d1c17; }
.pill--payment_verified,
.pill--packed { background: #eaf4f2; color: var(--teal-dark); }
.pill--shipped { background: #e8f0fb; color: #1c4f8a; }
.pill--delivered { background: #eaf4f2; color: #1f6b3a; }
.pill--cancelled { background: var(--bg); color: var(--muted); }

.ok { color: var(--teal-dark); font-weight: 600; }
.warn { color: #8a5600; font-weight: 600; }

/* --- order detail ------------------------------------------------------- */
.detail__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.detail__head h1 {
  margin: 0;
  font-size: 1.5rem;
}

.detail__verify,
.detail__cols {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .detail__verify,
  .detail__cols {
    grid-template-columns: 1fr;
  }
}

.detail .card h2 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail .card + .card {
  margin-top: 0;
}

.detail > .card {
  margin-bottom: 16px;
}

.proof {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.proof--pdf {
  height: 460px;
  border: 1px solid var(--line);
}

.action-form {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #f8fbfa;
}

.action-form h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.action-form label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.86rem;
  font-weight: 600;
}

.actions--wrap {
  flex-wrap: wrap;
}

.btn--danger {
  color: var(--danger);
  border-color: #f2c4c0;
}

/* --- audit log ---------------------------------------------------------- */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.log li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.log li:first-child {
  border-top: none;
}

.log__at {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.log__note {
  margin-top: 3px;
  color: var(--ink);
}

/* A click that emails a buyer should not look like a click that does not. */
.action-form__warn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff8e6;
  border: 1px solid #e8d8a8;
  font-size: 0.88rem;
}

/* --- demo banner -------------------------------------------------------- */
/* Deliberately loud and not dismissible. A demo of a form that takes money
   must never be mistakable for the real thing, including by someone who was
   handed the phone halfway through. */
.demo-banner {
  margin: -32px -16px 24px;
  padding: 10px 16px;
  background: #fff3cd;
  border-bottom: 2px solid #e8d8a8;
  color: #7a5200;
  font-size: 0.92rem;
  text-align: center;
}

.demo-banner strong {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}