/* Charlie Fresh customer portal (Pass 5A), built on tokens.css. See docs/design/PLAN.md.
   Sections: base · forms and buttons · chrome (header, cut-off strip, bottom bar) · order sheet ·
   review and receipt · history and order detail · sign in · motion.
   The previous stylesheet is in _attic/shop/static/shop/style.css. */

/* ===== Base ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-md) / var(--lh-md) var(--font-sans);
  font-variant-numeric: tabular-nums;  /* quantities, dates and order numbers line up */
}

h1, h2, h3 { margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: var(--text-xl); line-height: var(--lh-xl); letter-spacing: -.01em; }
h2 { font-size: var(--text-lg); line-height: var(--lh-lg); }
h3 { font-size: var(--text-md); line-height: var(--lh-md); }
p { margin: 0 0 var(--space-3); }
a { color: var(--leaf); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-3); top: -200px; z-index: 20;
  padding: var(--space-2) var(--space-4);
  background: var(--surface); color: var(--leaf);
  border: 2px solid var(--leaf); border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-3); }

.muted { color: var(--ink-soft); }

/* ===== Forms and buttons ============================================================ */

label { display: block; margin: var(--space-4) 0 6px; font-size: var(--text-sm); font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }

/* :where() keeps these at zero specificity, so page-specific rules always win. */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit]), select, textarea) {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
:where(textarea) { padding: var(--space-3) var(--space-4); min-height: 88px; resize: vertical; }
:where(input, select, textarea):focus-visible { border-color: var(--leaf); }
/* A field the error above it is about (aria-invalid, set by the server): a red edge, 2 px. */
:where(input, select, textarea)[aria-invalid=true] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
:where(input, select, textarea)[aria-invalid=true]:focus-visible { outline-color: var(--red); }
::placeholder { color: var(--ink-soft); opacity: 1; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  background: var(--leaf); color: var(--surface);
  border: 1.5px solid var(--leaf); border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--leaf); color: var(--surface); }
.btn--outline, .btn.o { background: var(--surface); color: var(--leaf); }
.btn--block { width: 100%; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .85; cursor: progress; }

/* While a form submits (ui.js): the label hides behind a spinner, and the button keeps its size. */
.btn.is-loading, .btn.is-loading * { color: transparent !important; }
.btn.is-loading::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--surface);
  border-radius: 50%;
}
.btn--outline.is-loading::before, .btn.o.is-loading::before { border-color: var(--leaf-tint); border-top-color: var(--leaf); }

/* Messages from the server (django.contrib.messages) */
.msg {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--leaf-tint); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.msg.error { background: var(--red-tint); color: var(--red); border-color: var(--red-tint); }
.msg.warning { background: var(--surface); border-color: var(--line-strong); }  /* amber is kept for cut-off */

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.scroll { overflow-x: auto; }

/* ===== Chrome: header, cut-off strip, bottom bar ===================================== */

:root { --page-max: calc(var(--content) + 2 * var(--gutter)); }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner, .venue-line, .cutoff-strip__inner, .page, .bar__inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.site-header__inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-top: var(--space-1); padding-bottom: var(--space-1); }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-step);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.brand img { width: 32px; height: auto; }  /* PLAN.md decision 8: about 32 px on phones */
@media (min-width: 1024px) {
  .brand img { width: 46px; }  /* and 44-48 px on desktop */
}

.site-nav { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; }
.site-nav a, .site-nav button {
  display: inline-flex; align-items: center;
  min-height: var(--tap-step); padding: 0 var(--space-2);
  background: none; border: 0;
  color: var(--ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.site-nav form { margin: 0; }

.venue-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm); color: var(--ink-soft);
}

/* Save state: Saving… (only if slow) / Saved / Couldn't save · Retry. Hidden while idle. */
.save-state { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.save-state[data-state="idle"] { visibility: hidden; }
.save-state__icon { display: none; }
.save-state[data-state="saved"] { color: var(--leaf); }
.save-state[data-state="saved"] .save-state__icon { display: inline; }
.save-state[data-state="error"], .save-state[data-state="signedout"] { color: var(--red); }
.save-state__signin { color: var(--red); font-weight: 700; }
.save-state__signin[hidden], .save-state__retry[hidden] { display: none; }
.save-state__retry {
  min-height: 28px; padding: 0 var(--space-2);
  background: var(--surface); color: var(--red);
  border: 1px solid var(--red); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; cursor: pointer;
}

/* Cut-off strip on pages without the bottom bar; amber in the last two hours. */
.cutoff-strip { background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: 20px; }
.cutoff-strip.is-warning { background: var(--amber-tint); }
.cutoff-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.cutoff-strip p { margin: 0; }
.cutoff-strip a { margin-left: auto; font-weight: 600; }
.nowrap { white-space: nowrap; }
.cutoff-left { color: var(--amber); font-weight: 700; }

.page { flex: 1 0 auto; padding-top: var(--space-5); padding-bottom: var(--space-7); }

/* A focused field is never hidden under the order panel on phones (WCAG 2.4.11). */
html:has(body.has-bar) { scroll-padding-bottom: calc(var(--bar-height) + var(--space-4)); }

/* ===== Order sheet (shop.html, partials/order_sheet.html, order_sheet.js) ============== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sheet-layout { display: block; }

.search { position: relative; margin: 0; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.search input { padding-left: 44px; }

.chips {
  display: flex; gap: var(--space-2);
  margin: var(--space-3) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) var(--space-1);
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.chip span { color: var(--leaf); font-weight: 700; }
@media (min-width: 768px) {
  .chips { flex-wrap: wrap; overflow: visible; margin: var(--space-3) 0 0; padding: 0; }
}
.search-empty { margin: var(--space-5) 0 0; color: var(--ink-soft); }

.section { margin-top: var(--space-6); scroll-margin-top: var(--space-4); }
.section[hidden] { display: none; }
.section__head { margin-bottom: var(--space-3); }
.section__head h2 { margin: 0; }
.section__sub { margin: 2px 0 0; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-soft); }
.empty {
  margin: 0; padding: var(--space-4);
  background: var(--surface); color: var(--ink-soft);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
}
.repeat-form { margin: 0 0 var(--space-3); }
.repeat { width: 100%; justify-content: flex-start; padding: 0 var(--space-4); }
.repeat .when { color: var(--ink-soft); font-weight: 400; }

.list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden;
}
.row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--space-3);
  min-height: 64px;
  padding: 6px var(--space-3);  /* 6 + name 21 + 2 + toggle 28 + 6 + 1 border = 64 */
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row[hidden] { display: none; }
.row.has-qty { background: var(--leaf-tint); }  /* the "entered" signal */
.thumb {
  width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface);
}
.thumb--letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--leaf-tint); color: var(--leaf);
  font-size: var(--text-lg); font-weight: 700;
}
.row.is-unavailable .thumb { opacity: .45; }
.row__text { min-width: 0; }
.row__name { margin: 0; font-weight: 600; font-stretch: 92%; line-height: 21px; overflow-wrap: anywhere; }
.row.is-unavailable .row__name { color: var(--ink-soft); }
.row__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-2);
  margin-top: 2px;
  font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-soft);
}
.unit-only { font-size: var(--text-sm); }
.unit-only[hidden], .extra-hint[hidden], .row__error[hidden] { display: none; }
.row__error { flex-basis: 100%; color: var(--red); font-weight: 600; }
.extra-hint {
  min-height: 26px; padding: 0 2px;
  background: none; border: 0; color: var(--leaf);
  font-size: var(--text-xs); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Unit toggle: a segmented radio group */
.units { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.units[hidden] { display: none; }
.units label { position: relative; margin: 0; font-size: inherit; font-weight: inherit; }
.units input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.units span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 26px; padding: 0 10px;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.units label:first-child span { border-radius: 5px 0 0 5px; }
.units label:last-child span { border-radius: 0 5px 5px 0; }
.units label + label span { border-left: 1px solid var(--line-strong); }
.units input:checked + span { background: var(--leaf); color: var(--surface); }
.units input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }

/* Stepper and Add */
.line { display: flex; justify-content: flex-end; }
.stepper {
  position: relative; display: inline-flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.stepper[hidden], .add[hidden] { display: none; }
.stepper:focus-within { border-color: var(--leaf); }
.stepper::after {  /* the quantity-change flash: opacity only, the digits never move */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; background: var(--leaf-tint); mix-blend-mode: multiply;
  opacity: 0; pointer-events: none;
}
.step {
  width: var(--tap-step); height: var(--tap-step);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--leaf); cursor: pointer;
}
.step[aria-disabled="true"] { color: var(--line-strong); cursor: default; }
.qty {
  width: 56px; height: var(--tap-step); min-height: 0; padding: 0;
  background: none;
  border: 0; border-inline: 1px solid var(--line); border-radius: 0;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
.qty::placeholder { color: var(--ink-faint); font-weight: 400; opacity: 1; }
.add {
  min-width: 88px; height: var(--tap-step);
  background: var(--surface); color: var(--leaf);
  border: 1.5px solid var(--leaf); border-radius: var(--radius-sm);
  font-weight: 600; cursor: pointer;
}

/* The order panel: a sticky bottom bar on phones, the right-hand rail from 1024 px. */
.order-panel {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; gap: var(--space-3);
  margin: var(--space-5) calc(-1 * var(--gutter)) calc(-1 * var(--space-7));
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.rail-only { display: none; }
.order-panel__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.order-panel__when { display: flex; align-items: center; gap: var(--space-3); }
.date-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-step); padding: 0 var(--space-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-weight: 700; white-space: nowrap; cursor: pointer;
}
.bar__cutoff { margin: 0; font-size: var(--text-sm); line-height: 20px; }
.bar__cutoff .cutoff-left { display: block; }
.order-panel__actions { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.items-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 var(--space-3);
  background: var(--surface); color: var(--leaf);
  border: 1.5px solid var(--leaf); border-radius: var(--radius-md);
  font-weight: 700; white-space: nowrap; cursor: pointer;
}
.summary { list-style: none; margin: 0; padding: 0; }
.summary li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.summary li:first-child { border-top: 0; }
.summary__empty { color: var(--ink-soft); }
.note { margin: 0; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-soft); }

@media (min-width: 640px) and (max-width: 1023px) {
  .order-panel { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1024px) {
  body.has-rail { --page-max: calc(var(--content) + var(--rail) + var(--space-6) + 2 * var(--gutter)); }
  html:has(body.has-bar) { scroll-padding-bottom: var(--space-4); }
  .sheet-layout {
    display: grid; grid-template-columns: minmax(0, var(--content)) var(--rail);
    gap: var(--space-6); align-items: start;
  }
  .order-panel {
    top: var(--space-4); bottom: auto;
    gap: var(--space-4);
    margin: 0; padding: var(--space-5);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: none;
  }
  .rail-only { display: block; }
  .order-panel__when { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .date-chip { justify-content: space-between; }
  .bar__cutoff.is-warning { padding: var(--space-2) var(--space-3); background: var(--amber-tint); border-radius: var(--radius-sm); }
  .order-panel__actions { grid-template-columns: 1fr; }
}

/* Drawer and date picker: bottom sheets on phones, centred dialogs on wider screens. */
.sheet-dialog {
  width: min(100%, 560px); max-width: 100%; max-height: min(85vh, 720px);
  margin: auto auto 0;
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--ink);
  border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.sheet-dialog::backdrop { background: rgb(26 29 25 / .35); }
@media (min-width: 640px) {
  .sheet-dialog { margin: auto; border-radius: var(--radius-md); }
}
.sheet-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.sheet-dialog__head h2 { margin: 0; }
.sheet-dialog__head h2:focus { outline: none; }  /* focused so screen readers start at the title */
.dialog-close {
  min-height: var(--tap-step); padding: 0 var(--space-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-weight: 600; cursor: pointer;
}
.drawer__count { margin: 0 0 var(--space-3); font-weight: 700; }
.drawer__lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--line); }
.dline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; border-bottom: 1px solid var(--line); }
.dline__text { margin: 0; }
.dline__name { font-weight: 600; }
.dline__unit { color: var(--ink-soft); }
.dline-also { padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--line); }
.also {
  min-height: 32px; padding: 0;
  background: none; border: 0; color: var(--leaf);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sheet-dialog .note { margin-bottom: var(--space-3); }
.date-options { display: grid; gap: var(--space-2); }
.date-option {
  display: grid; justify-items: start; gap: 2px;
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  text-align: left; cursor: pointer;
}
.date-option.is-selected { background: var(--leaf-tint); border-color: var(--leaf); }
.date-option__day { font-weight: 700; }
.date-option__by { font-size: var(--text-sm); color: var(--ink-soft); }

/* ===== Review and receipt (review.html, received.html) ================================= */

.label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.hint { margin: 6px 0 0; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-soft); }
.hint--count { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); }
.optional { font-weight: 400; color: var(--ink-soft); }
.link-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;  /* the same as a button or a link */
  min-height: var(--tap-step); padding: 0 var(--space-4);
  text-decoration: none;
  background: var(--surface); color: var(--leaf);
  border: 1.5px solid var(--leaf); border-radius: var(--radius-sm);
  font-weight: 600; white-space: nowrap; cursor: pointer;
}

.review-title { margin-bottom: var(--space-5); }
.review, .review__main { display: grid; gap: var(--space-5); }
.review-block { margin: 0; }

/* Delivery: the cut-off strip's place on this page, amber in the last two hours. */
.review-delivery {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.review-delivery.is-warning { background: var(--amber-tint); border-color: var(--amber-tint); }
.review-delivery__when { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.review-delivery__date { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 700; }
.review-delivery__by { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.review-venue { margin: 0; }

.review-lines { display: grid; }
.review-lines__list {
  list-style: none; margin: 0; padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.review-lines__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.review-lines__list li:first-child { border-top: 0; }
.review-lines__name { font-weight: 600; overflow-wrap: anywhere; }
.review-lines__qty { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.review-lines__edit { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-step); font-weight: 600; }

.review__send label { margin-top: 0; }
.pricing { margin: var(--space-4) 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.btn.is-busy { cursor: progress; }

@media (min-width: 1024px) {
  .review { grid-template-columns: minmax(0, var(--content)) var(--rail); gap: var(--space-6); align-items: start; }
  .review__send {  /* beside the lines, where the order sheet's rail keeps "Review order" */
    position: sticky; top: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-md);
  }
}

/* The receipt: a docket. The order number is large in tabular figures and the lines run on
   between dashed rules (PLAN.md 3.5 and section 5). */
.receipt {
  max-width: 560px; margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.receipt__check { display: block; margin-bottom: var(--space-3); }
.receipt__disc { fill: var(--leaf-tint); }
.receipt__tick { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.receipt__cover { fill: var(--leaf-tint); transform-box: fill-box; transform: translateX(101%); }  /* off the tick */
.receipt__title { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.receipt__number { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.receipt__facts { margin: 0 0 var(--space-4); }
.receipt__facts dt { min-width: 5.5em; color: var(--ink-soft); }
.receipt__facts dd { margin: 0; font-weight: 600; }
.receipt__docket { padding: var(--space-4) 0; border-block: 2px dashed var(--line-strong); }
.receipt__lines { margin: 0; }
.receipt__note { margin: var(--space-2) 0 0; color: var(--ink-soft); }
.receipt__next { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-md); line-height: var(--lh-md); }
.next-steps { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: step; }
.next-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); counter-increment: step; }
.next-steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--leaf-tint); color: var(--leaf);
  font-size: var(--text-xs); font-weight: 700;
}
.receipt__links { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-sm); }
.receipt__links a { display: inline-flex; align-items: center; min-height: var(--tap-step); margin: 0 var(--space-1); }
@media (min-width: 640px) {
  .receipt { padding: var(--space-6); }
}

/* ===== History and order detail (orders.html, order_detail.html) ===================== */

.page-heading { margin-bottom: var(--space-2); }
.lede { margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }

/* Status pills: always the word, never colour alone (PLAN.md section 2). */
.pill {
  display: inline-flex; align-items: center; flex: none;
  min-height: 24px; padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 700; white-space: nowrap;
}
.pill--placed { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }  /* Received */
.pill--packed { background: var(--leaf-tint); color: var(--leaf); }                                          /* Being prepared */
.pill--delivered { background: var(--leaf); color: var(--surface); }
.pill--cancelled { background: var(--line); color: var(--ink-soft); }

.month { margin-top: var(--space-5); }
.order-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.order-card {
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.order-card__title { margin: 0; font-size: var(--text-md); line-height: var(--lh-md); }
.order-card__title a {
  display: inline-flex; align-items: center; min-height: var(--tap-step);
  color: var(--ink); text-decoration-color: var(--line-strong);
}
.order-card__meta { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }
.order-card__invoice { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }
.pdf-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-step); font-weight: 600; }
.empty--action { display: grid; justify-items: start; gap: var(--space-3); }
.empty--action p { margin: 0; }

.back-link { margin: 0 0 var(--space-2); }
.back-link a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-step); font-weight: 600; text-decoration: none; }
.detail { display: grid; gap: var(--space-5); }
.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.detail-title { margin: 0; }
.fact-list { margin: 0; }
.fact-list div, .receipt__facts div { display: flex; gap: var(--space-2); }
.fact-list dt { min-width: 5.5em; color: var(--ink-soft); }
.fact-list dd { margin: 0; font-weight: 600; }
.detail-invoice {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.detail-invoice__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.detail-invoice__number { font-weight: 700; overflow-wrap: anywhere; }
.detail-invoice__none { margin: 0; }
.detail-note { margin: var(--space-3) 0 0; color: var(--ink-soft); }
.detail-links { margin: var(--space-2) 0 0; text-align: center; font-size: var(--text-sm); }
.detail-links a { display: inline-flex; align-items: center; min-height: var(--tap-step); }

/* ===== Sign in (login.html, verify.html) ==============================================
   Stage 8. Phones: the header's 56 px mark, the card first, then the facts; no imagery and no
   ambient motion. From 1024 px: no header; a centred 536 px column (the mark, the line, the
   card, the facts) with eight real produce cut-outs around it at 22% opacity. They are CSS
   backgrounds inside the media query, so a phone downloads none of them. */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }
body.page-login .site-header__inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
body.page-login .brand img { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.login__column { display: grid; gap: var(--space-5); max-width: 536px; margin: 0 auto; }
.login__brand, .login-art { display: none; }  /* wide screens only */
.login__tagline { margin: 0; font-family: var(--font-display); font-weight: 400; }
.facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }
.facts svg { margin-top: 3px; color: var(--leaf); }

/* The card: the title is the page's h1, 24 px on a phone and 28 px from 1024 px. */
.login__card-title { margin: 0 0 var(--space-4); font-size: 24px; line-height: 30px; letter-spacing: -.01em; }
.login__card .msg { margin-bottom: var(--space-4); }
.login__form label:first-of-type { margin-top: 0; }
.login__form .btn { margin-top: var(--space-5); }
.login__under { margin: var(--space-2) 0 0; text-align: center; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-soft); }
.login__alt { margin: var(--space-5) 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.login__alt a { font-weight: 600; }
.login__card .login__note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.phone-field { display: flex; align-items: center; gap: var(--space-2); }
.phone-field span { white-space: nowrap; font-weight: 600; }
.sent-to { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }
.sent-to strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sent-to a { font-weight: 600; }
.code { font-size: var(--text-lg); font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.login__form .hint { margin-top: var(--space-2); }
.login__card .hint, .login__under, .sent-to { text-wrap: pretty; }  /* no one-word last lines */
/* Resend: centred under the full-width button; tabular figures, so the count doesn't shift. */
.resend { margin: var(--space-2) 0 0; text-align: center; }
.text-btn {
  min-height: var(--tap-step); padding: 0 var(--space-2);
  background: none; border: 0; color: var(--leaf);
  font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.text-btn:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; }

/* MARKET_NOTE: one quiet line, on the sign-in card and at the top of the order sheet. */
.market-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-soft); }
.market-note::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--leaf); }
.market-note--sheet { margin-bottom: var(--space-4); }

@media (min-width: 1024px) {
  body.page-login .site-header { display: none; }  /* the composition carries the brand */
  body.page-login .page { max-width: none; padding: 0; }
  .login { display: grid; place-items: center; min-height: 100vh; padding: var(--space-7) 0; }
  .login__column { position: relative; z-index: 1; width: 536px; max-width: none; padding: 0 var(--space-7); gap: 20px; }
  .login__brand { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
  .login__mark { display: block; width: 104px; }  /* PLAN.md decision 8 */
  .login__mark img { display: block; width: 100%; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
  .login__tagline { font-size: clamp(40px, 1.5vw + 25px, 52px); line-height: 1.15; letter-spacing: -.01em; }  /* 40 px at 1024, 44 at 1280, 52 at 1920 */
  .login__card { padding: var(--space-6); }
  .login__card-title { font-size: 28px; line-height: 34px; }

  /* The facts sit on the paper, where a cut-out can pass under them: a soft paper veil keeps
     ink-soft at 4.5:1 or more over the darkest produce (shop/test_signin.py checks it). */
  .login__facts { position: relative; }
  .login__facts::before {
    content: ''; position: absolute; inset: -8px -12px; z-index: -1;
    background: color-mix(in srgb, var(--paper) 75%, transparent);
    border-radius: var(--radius-md);
    box-shadow: 0 0 24px 16px color-mix(in srgb, var(--paper) 75%, transparent);
  }

  /* The art: the eight cut-outs (docs/design/make_signin_art.py), sizes and places as the
     approved mock-up (docs/design/mockups/stage8/drift.html). The produce's own soft outline
     replaces the mock-up's circular mask, so no piece is cut across. */
  .login-art { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .login-art__piece { position: absolute; aspect-ratio: 1; background: center / contain no-repeat; opacity: .22; }
  .login-art__tomato { width: 300px; left: 4%; top: 8%; background-image: url(signin/tomato.webp); }
  /* The four low pieces keep their place from the mock-up, but never closer than 16 px to the
     window's foot, so a short window doesn't cut them off (the coriander's 74% does below 1040 px). */
  .login-art__broccoli { width: 220px; left: 16%; top: min(58%, 100% - 236px); background-image: url(signin/broccoli.webp); }
  .login-art__coriander { width: 260px; left: 2%; top: min(74%, 100% - 276px); background-image: url(signin/coriander.webp); }
  .login-art__eggplant { width: 180px; left: 27%; top: 30%; background-image: url(signin/eggplant.webp); }
  .login-art__capsicum { width: 320px; right: 3%; top: 4%; background-image: url(signin/capsicum.webp); }
  .login-art__onion { width: 170px; right: 24%; top: min(66%, 100% - 186px); background-image: url(signin/onion.webp); }
  .login-art__sweet-potato { width: 280px; right: 2%; top: min(56%, 100% - 296px); background-image: url(signin/sweet-potato.webp); }
  .login-art__beetroot { width: 200px; right: 20%; top: 26%; background-image: url(signin/beetroot.webp); }
}

/* ===== Motion =========================================================================
   transform and opacity only, 150-250 ms, var(--ease-out), and only when the visitor
   hasn't asked for reduced motion. The submit spinner (a continuous 700 ms linear turn)
   is the one documented exception in timing. */

@media (prefers-reduced-motion: no-preference) {
  .btn, .step, .add { transition: transform var(--dur-fast) var(--ease-out); }
  .btn.is-loading::before { animation: cf-spin 700ms linear infinite; }
  .stepper.is-bumped::after { animation: cf-flash var(--dur-fast) var(--ease-out); }  /* after a tap */
  .stepper.is-morphing { animation: cf-morph var(--dur-base) var(--ease-out); }      /* Add becoming the stepper */
  .sheet-dialog[open] { animation: cf-sheet-in var(--dur-base) var(--ease-out); }
  .sheet-dialog[open]::backdrop { animation: cf-fade var(--dur-base) var(--ease-out); }
  /* The receipt's tick, once, straight after Send order: the cover slides off it. */
  .receipt.is-fresh .receipt__cover { animation: cf-uncover var(--dur-base) var(--ease-out) var(--dur-fast) both; }
  /* Sign in: the site's one page-load sequence. The mark and line, the card 60 ms later and the
     facts at 120 ms rise 8 px; from 1024 px the produce then fades in (Stage 8). */
  .login.is-arriving .login__brand, .login.is-arriving .login__card, .login.is-arriving .login__facts { animation: cf-rise 220ms var(--ease-out) both; }
  .login.is-arriving .login__card { animation-delay: 60ms; }
  .login.is-arriving .login__facts { animation-delay: 120ms; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .login.is-arriving .login-art { animation: cf-fade var(--dur-slow) var(--ease-out) 180ms both; }
  /* The one ambient layer: three of the eight cut-outs (the mock-up's three slowest) drift and
     come back, each a full cycle of 44-52 s and at most 6 px. ease-in-out, so the turn is smooth. */
  .login-art__broccoli { animation: cf-drift-a 48s ease-in-out infinite; }
  .login-art__onion { animation: cf-drift-b 52s ease-in-out infinite; }
  .login-art__sweet-potato { animation: cf-drift-c 44s ease-in-out infinite; }
}
.step:active, .add:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-flash { 50% { opacity: .9; } }
@keyframes cf-morph { from { opacity: 0; transform: scale(.96); } }
@keyframes cf-sheet-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes cf-fade { from { opacity: 0; } }
@keyframes cf-uncover { from { transform: none; } }
@keyframes cf-rise { from { opacity: 0; transform: translateY(8px); } }
/* The sign-in's ambient drift: 5.7, 5 and 5 px out, then back. */
@keyframes cf-drift-a { 50% { transform: translate(4px, -4px); } }
@keyframes cf-drift-b { 50% { transform: translate(-4px, 3px); } }
@keyframes cf-drift-c { 50% { transform: translate(3px, 4px); } }